/* Persistent professional chrome. Route controllers replace only their own outlet. */
.professional-app { --professional-header-height: 76px; --professional-header-size: 76px; --professional-nav-width: 174px; --professional-mobile-nav-height: 0px; background: var(--paper); }
.professional-app [hidden] { display: none !important; }
#professional-root { min-height: var(--professional-home-height,100dvh); }
.pro-topbar { min-height: var(--professional-header-size); height: var(--professional-header-size); padding: 0 28px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 30px; background: #fff; position: sticky; top: 0; z-index: 30; }
.pro-brand { display: inline-flex; align-items: center; line-height: 1; flex-shrink: 0; }
.pro-brand img { display: block; width: 158px; height: auto; }
.pro-topbar-label { border-left: 1px solid var(--line); padding-left: 26px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.pro-topbar-end { margin-left: auto; min-width: 0; display: flex; align-items: center; gap: 14px; }
.pro-user { min-width: 0; color: var(--muted); font-size: 12px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-prototype { font-size: 11px; letter-spacing: .075em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 4px 7px; white-space: nowrap; }
.pro-text-button { border: 0; background: transparent; padding: 8px 0; color: var(--teal); }
.pro-topbar .pro-text-button { min-height: 44px; font-size: 12px; white-space: nowrap; }
.pro-topbar .icon-button { width: 36px; height: 44px; color: var(--muted); }
#professional-context:empty { display: none; }
.pro-case-return { display: inline-flex; align-items: center; min-height: 36px; font-size: 12px; padding: 8px 12px; background: var(--mint); border-radius: 6px; white-space: nowrap; }
.professional-layout { display: grid; grid-template-columns: var(--professional-nav-width) minmax(0,1fr); min-height: calc(var(--professional-home-height,100dvh) - var(--professional-header-height)); }
.pro-nav { padding: 30px 15px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; min-width: 0; background: var(--paper); }
.pro-nav-label { padding: 0 13px 9px; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: var(--muted); }
.pro-nav a { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 12px; border-radius: 6px; color: var(--muted); font-size: 13px; }
.pro-nav a span { white-space: nowrap; }
.pro-nav a[aria-current="page"] { background: var(--mint); color: var(--teal); font-weight: 600; }
.pro-nav svg { width: 18px; height: 18px; }
.pro-nav-footer { margin-top: auto; padding: 35px 13px 0; }
.pro-nav-footer p { font-size: 11px; line-height: 1.65; color: var(--muted); }
.pro-nav-footer a { font-size: 11px; padding: 10px 0; }
#professional-content { min-width: 0; min-height: 0; position: relative; }
.submissions-view, .professional-research { min-width: 0; }
.professional-loading { display: flex; align-items: center; gap: 10px; margin: 0; padding: 32px; color: var(--muted); font-size: 13px; }
.professional-app #toast { left: calc(50% + var(--professional-nav-width) / 2); }
.professional-app :is(.pro-nav, #professional-content, .research-content) { scrollbar-width: thin; scrollbar-color: var(--field-border) transparent; }

@media (min-width: 801px) and (min-height: 560px) {
  html:has(body.professional-app > #professional-root:not([hidden])) { height: 100%; overflow: hidden; scroll-padding-top: 0; }
  .professional-app:has(> #professional-root:not([hidden])) { height: 100dvh; overflow: hidden; }
  #professional-root { height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .pro-topbar { position: relative; flex: 0 0 var(--professional-header-size); }
  .professional-layout { flex: 1; min-height: 0; grid-template-rows: minmax(0,1fr); overflow: hidden; }
  .pro-nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  #professional-content { height: 100%; overflow: hidden; }
  #submissions-view, #research-view, #products-view { height: 100%; min-height: 0; }
}
@media (min-width: 1600px) {
  .professional-app { --professional-nav-width: 192px; }
}
@media (min-width: 801px) and (max-width: 1250px) {
  .professional-app { --professional-nav-width: 76px; }
  .pro-nav { padding: 30px 12px; }
  .pro-nav a { justify-content: center; padding: 13px 10px; }
  .pro-nav a span, .pro-nav-label, .pro-nav-footer { display: none; }
  .pro-topbar { gap: 18px; }
  .pro-topbar-label { padding-left: 18px; }
  .pro-topbar-end { gap: 9px; }
}
@media (max-width: 1000px) {
  .pro-topbar-label { display: none; }
}
@media (max-width: 800px) {
  .professional-app { --professional-header-size: 64px; --professional-header-height: 64px; --professional-nav-width: 0px; --professional-mobile-nav-height: 55px; }
  .pro-topbar { padding: 0 16px; gap: 12px; }
  .pro-topbar .pro-brand img { width: 132px; }
  .pro-topbar-end { gap: 5px; }
  .pro-prototype { display: none; }
  .professional-layout { display: block; min-height: calc(var(--professional-home-height,100dvh) - var(--professional-header-height)); }
  .pro-nav { flex-direction: row; justify-content: center; gap: 4px; padding: 5px 12px; border-right: 0; border-bottom: 1px solid var(--line); background: #fff; }
  .pro-nav a { padding: 9px 12px; gap: 7px; font-size: 12px; justify-content: center; }
  .pro-nav svg { width: 16px; height: 16px; }
  .pro-nav-label, .pro-nav-footer { display: none; }
  .pro-topbar:has(#professional-context:not(:empty)) { height: auto; padding-block: 7px; }
  .pro-topbar:has(#professional-context:not(:empty)) .pro-topbar-end { flex-wrap: wrap; justify-content: flex-end; }
  #professional-context { order: 5; flex-basis: 100%; text-align: right; }
  .pro-case-return { min-height: 32px; font-size: 11px; padding: 6px 9px; }
  .professional-app #toast { left: 50%; }
}
@media (max-width: 500px) {
  .pro-user { max-width: 110px; font-size: 11px; }
  .pro-nav { padding-inline: 8px; gap: 1px; }
  .pro-nav a { padding-inline: 8px; gap: 5px; font-size: 11px; }
  .pro-nav svg { display: none; }
  .pro-topbar .pro-text-button { font-size: 11px; }
  .professional-loading { padding: 24px 16px; }
}
@media (max-width: 360px) {
  .pro-topbar { gap: 10px; }
  .pro-topbar .pro-brand img { width: 112px; }
  .pro-user { max-width: 76px; }
}
@media print {
  html:has(body.professional-app), body.professional-app, #professional-root, .professional-layout, #professional-content, #submissions-view, #research-view, #products-view { display: block; height: auto; min-height: 0; overflow: visible; }
  #professional-header, #professional-navigation, #professional-loading { display: none; }
}
.pro-login, .pro-loading { width: min(440px,calc(100% - 40px)); margin: 14vh auto; }
.pro-login { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 30px; }
.pro-login h1 { font-size: 28px; margin: 28px 0 12px; }
.pro-login p { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.pro-login label { display: block; font-size: 12px; margin-bottom: 7px; }
.pro-login input { width: 100%; padding: 12px; border: 1px solid var(--field-border); border-radius: 6px; margin-bottom: 17px; }
.pro-login .btn { width: 100%; }
.pro-login .pro-login-hint { margin: 18px 0 0; font-size: 12px; line-height: 1.6; }
.pro-login .pro-error:empty { display: none; }