/* portal-shell.css -- 1067 (Andy, 13.10.2026): THE PORTAL FRAME AS A REUSABLE COMPONENT.
   White header + dark sidebar + profile menu + mobile drawer, lifted from the approved homepage
   (index.html, 1049/1051) so the Stock Room pilot wears exactly the same frame. Every class is
   prefixed "oxs-" and every token "--oxs-", so dropping this file onto a page changes NOTHING on
   that page until the page turns the frame on (html.oxs-on) -- no global rules for tables, buttons,
   cards or inputs. Brand guidelines Sept 2026, sections 03-10: Instrument Sans 400/600, core +
   extended palette only, 8px spacing. The homepage keeps its own copy for now; adopting this file
   there is a later, separate step. */
/* 1068 (Andy, 13.10.2026: "Ensure Instrument Sans loads reliably in the delivered build"). Self-hosted
   from /assets/fonts (SIL Open Font License, see OFL-Instrument-Sans.txt there), so the frame and the
   pilot never depend on Google Fonts being reachable. Latin + Latin Extended, 400 and 600 -- the only
   weights the brand uses (s.05). The browser only downloads a file when text on screen needs it. */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/instrument-sans-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/instrument-sans-latin-600-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/instrument-sans-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/instrument-sans-latin-ext-600-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --oxs-bw:#F9F7FF; --oxs-white:#FFFFFF; --oxs-black:#0D0024; --oxs-purple:#7000B2; --oxs-deep:#4A0075; --oxs-orange:#F26320;
  --oxs-slate:#5B5470; --oxs-rule:#DFD9EA; --oxs-haze:#F1E7F8; --oxs-mist:#EDEAF3; --oxs-ember:#A8380D;
  --oxs-side-w:240px; --oxs-radius:8px; --oxs-head-h:100px;
  --oxs-shadow:0 1px 2px rgba(13,0,36,.04),0 8px 24px rgba(13,0,36,.06);
  --oxs-font:"Instrument Sans",Aptos,Calibri,Arial,sans-serif;
}
/* 1072: --oxs-side-w is 240px on desktop (64px as a collapsed rail, 336px for the phone drawer):
   portal-rail.css owns those widths for every page that wears the frame. */
/* off by default: the frame exists in the DOM but is invisible until the page switches it on */
.oxs-topbar,.oxs-shell>.oxs-sidebar,.oxs-scrim{display:none}
html.oxs-on body{background:var(--oxs-bw) !important;color:var(--oxs-black)}
html.oxs-on .oxs-topbar{display:flex}
html.oxs-on .oxs-shell>.oxs-sidebar{display:block}

.oxs-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.oxs-ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---- header ---- */
.oxs-topbar{align-items:center;gap:24px;background:var(--oxs-white);border-bottom:1px solid var(--oxs-rule);
  padding:24px;min-height:var(--oxs-head-h);position:relative;z-index:30;font-family:var(--oxs-font);color:var(--oxs-black);box-sizing:border-box}
.oxs-topbar *{box-sizing:border-box}
.oxs-brand{display:block;flex:none;line-height:0}
.oxs-brand img{width:208px;height:auto;display:block}            /* gradient lockup: never below 200px (s.04) */
.oxs-brand .oxs-brand-sm{display:none;width:64px}                /* staggered shorthand: 48px minimum (s.04) */
.oxs-brand-sub{display:flex;align-items:center;gap:24px;color:var(--oxs-slate);font-size:18px;white-space:nowrap}
.oxs-brand-sub::before{content:"";width:1px;height:40px;background:var(--oxs-rule)}
.oxs-tools{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:16px;min-width:0}
.oxs-iconbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--oxs-radius);
  border:0;background:transparent;color:var(--oxs-black);cursor:pointer}
.oxs-iconbtn:hover{background:var(--oxs-haze)}
.oxs-iconbtn:focus-visible,.oxs-profile:focus-visible,.oxs-menu-item:focus-visible{outline:3px solid var(--oxs-purple);outline-offset:2px}
.oxs-navtoggle{display:none;flex:none}
/* 1068: the homepage's bell (index.html .bell-dot): orange while something needs you, purple for notes only */
.oxs-bell{flex:none}
.oxs-bell[hidden]{display:none}
.oxs-bell-dot{position:absolute;top:10px;right:11px;width:10px;height:10px;border-radius:50%;background:var(--oxs-orange);border:2px solid var(--oxs-white)}
.oxs-bell-dot.note{background:var(--oxs-purple)}
.oxs-bell-dot[hidden]{display:none}
.oxs-session{position:relative}
.oxs-profile{display:flex;align-items:center;gap:12px;border:0;background:transparent;cursor:pointer;padding:4px 8px 4px 4px;border-radius:var(--oxs-radius);color:var(--oxs-black);text-align:left;font-family:inherit}
.oxs-profile:hover{background:var(--oxs-haze)}
.oxs-avatar{width:44px;height:44px;border-radius:50%;background:var(--oxs-haze);color:var(--oxs-purple);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;flex:none}
.oxs-pf-text{display:flex;flex-direction:column;line-height:1.25}
.oxs-pf-name{font-weight:600;font-size:15px;white-space:nowrap}
.oxs-pf-role{font-size:14px;color:var(--oxs-slate);white-space:nowrap}
.oxs-pf-role.warn{color:var(--oxs-ember)}
.oxs-profile .oxs-chev{width:20px;height:20px;transition:transform .15s}
.oxs-profile[aria-expanded="true"] .oxs-chev{transform:rotate(180deg)}
.oxs-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:264px;background:var(--oxs-white);border:1px solid var(--oxs-rule);border-radius:var(--oxs-radius);
  box-shadow:var(--oxs-shadow);padding:8px;z-index:60}
.oxs-menu[hidden]{display:none}
.oxs-menu-meta{padding:8px 12px 12px;border-bottom:1px solid var(--oxs-rule);margin-bottom:8px;font-size:14px;color:var(--oxs-slate);word-break:break-all}
.oxs-menu-meta b{display:block;color:var(--oxs-black);font-weight:600;font-size:15px;word-break:normal}
.oxs-menu-item{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;padding:12px;border-radius:6px;font-size:15px;color:var(--oxs-black);cursor:pointer;text-align:left;font-family:inherit;text-decoration:none;min-height:44px}
.oxs-menu-item:hover{background:var(--oxs-haze)}
.oxs-menu-item .oxs-ic{width:20px;height:20px;color:var(--oxs-purple)}
.oxs-menu-item[disabled],.oxs-menu-item[aria-disabled="true"]{opacity:.5;cursor:default}
.oxs-menu-item[disabled]:hover{background:transparent}

/* ---- shell ---- */
html.oxs-on .oxs-shell{display:flex;align-items:stretch;min-height:calc(100vh - var(--oxs-head-h));
  background:linear-gradient(to right,var(--oxs-black) var(--oxs-side-w),transparent var(--oxs-side-w))}
.oxs-sidebar{width:var(--oxs-side-w);flex:none;background:var(--oxs-black);color:var(--oxs-bw);position:sticky;top:0;height:100vh;overflow-y:auto;
  padding:24px 16px 32px;overscroll-behavior:contain;z-index:40;font-family:var(--oxs-font);box-sizing:border-box}
.oxs-sidebar ul{list-style:none;margin:0;padding:0}
.oxs-nav-item{display:flex;align-items:center;gap:14px;width:100%;min-height:48px;padding:12px 16px;border-radius:var(--oxs-radius);border:0;background:transparent;
  color:var(--oxs-bw);font-size:16px;font-weight:400;text-decoration:none;cursor:pointer;text-align:left;line-height:1.3;font-family:inherit;box-sizing:border-box}
.oxs-nav-item:hover{background:rgba(249,247,255,.08)}
.oxs-nav-item.is-active{background:var(--oxs-deep);font-weight:600}   /* 1068 (Andy): exactly the homepage's selected state (index.html .nav-item.is-active) */
.oxs-nav-item:focus-visible{outline:3px solid var(--oxs-bw);outline-offset:-3px}
.oxs-nav-label{flex:1;min-width:0}
.oxs-nav-item .oxs-ext{width:16px;height:16px;opacity:.7}
.oxs-nav-item.is-soon{color:#B7AECB;cursor:default}
.oxs-nav-item.is-soon:hover{background:transparent}
.oxs-nav-item.is-soon .oxs-ic{opacity:.75}
.oxs-soon{flex:none;font-size:12px;font-weight:600;letter-spacing:.02em;color:#D7CFE6;border:1px solid rgba(215,207,230,.4);border-radius:999px;padding:2px 8px}
.oxs-nav-sep{height:1px;background:rgba(249,247,255,.16);margin:16px 8px}
.oxs-nav-group{font-size:14px;font-weight:600;color:#B7AECB;padding:0 16px 8px;margin:0}
.oxs-scrim{position:fixed;inset:0;background:rgba(13,0,36,.5);z-index:45}
html.oxs-on .oxs-main{flex:1;min-width:0;display:flex;flex-direction:column}

/* ---- responsive: the same breakpoints as the homepage frame ---- */
@media (max-width:980px){ .oxs-pf-text,.oxs-profile .oxs-chev{display:none} .oxs-profile{padding:2px} }
@media (max-width:1180px){ .oxs-brand-sub{display:none !important} }
@media (max-width:1080px){
  html.oxs-on .oxs-navtoggle{display:inline-flex}
  html.oxs-on .oxs-shell{background:none}
  .oxs-sidebar{position:fixed;left:0;top:0;bottom:0;height:auto;transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 0 40px rgba(13,0,36,.35);z-index:1300}
  html.oxs-nav-open .oxs-sidebar{transform:none}
  html.oxs-nav-open .oxs-scrim:not([hidden]){display:block;z-index:1250}
}
@media (max-width:820px){
  .oxs-topbar{gap:16px;padding:16px;min-height:80px}
  :root{--oxs-head-h:80px}
}
@media (max-width:440px){
  /* below the gradient lockup's 200px comfort zone the supplied staggered shorthand takes over (s.03/04) */
  .oxs-brand .oxs-brand-lg{display:none}
  .oxs-brand .oxs-brand-sm{display:block}
  .oxs-avatar{width:40px;height:40px;font-size:15px}
  .oxs-profile{padding:0}
}
@media (prefers-reduced-motion:reduce){ .oxs-sidebar,.oxs-profile .oxs-chev{transition:none !important} }