/* ORAD navigation rail — the single navigation for the whole product.
 *
 * CANONICAL FILE. The tool serves it from shared/theme/ via a FastAPI mount
 * (/theme/sidebar.css); the Astro site gets a generated copy at
 * public_site/public/sidebar.css. Run scripts/sync_theme.sh after editing.
 *
 * Both surfaces render the same rail so moving from Chat to a lesion page to
 * Account never changes the furniture — only the content column.
 *
 * They DO share one markup file: shared/rail/nav.html + foot.html, rendered by
 * web/api.py's `_rail_partial` and public_site/src/components/Sidebar.astro. This
 * comment used to claim they could not — that the app's items were <button data-lens>
 * and the site's <a href>. That stopped being true in f6dcc09: every item is an
 * <a href> now, and `data-lens` marks the ones the tool intercepts. The claim outlived
 * the code by long enough for the two hand-kept copies to drift twice.
 *
 * So this file is the LOOK, shared/rail/ is the MARKUP, and
 * public_site/src/lib/sidebar-contract.test.mjs asserts neither surface re-inlines it.
 *
 * Everything keys off an ancestor `.station`, which both shells set. The station
 * GRID itself is per-surface (the app has stage + report tracks, the site just
 * sidebar + main), so it deliberately stays out of this file.
 */

/* ── the rail ───────────────────────────────────────────────────────────────── */
/* The rail sets its own type metrics. It inherited the page's, which differ (the tool's
   body is 14px/1.5, the site's 16px/1.6), so every row sat 2px taller on the site and
   stepping from Classic to About visibly shifted the whole rail. */
.sidebar{background:var(--paper);border-right:1px solid var(--rule);display:flex;flex-direction:column;overflow:hidden;min-width:0;font-size:14px;line-height:1.5}
.sb-head{flex:none;display:flex;align-items:center;gap:10px;height:52px;padding:0 10px 0 16px;border-bottom:1px solid var(--rule)}
.sb-head .logo{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.sb-head .logo b{color:var(--ox)}
.sb-toggle{flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;line-height:1;color:var(--muted);background:transparent;border:1px solid var(--rule);border-radius:var(--r-sm,8px);cursor:pointer}
.sb-toggle:hover{color:var(--ink);border-color:var(--ox)}
.sb-toggle .ic-expand{display:none}

/* nav + primary action: icon + label rows (the mini-rail keeps just the icon) */
/* One size in both rail states. Height is fixed because a row sized by its contents was
   taller with a label than with an icon alone, and the left padding puts the icon on the
   slim rail's centre line, so collapsing only hides the labels: nothing moves. */
.sb-item{box-sizing:border-box;display:flex;align-items:center;gap:11px;width:calc(100% - 16px);height:36px;margin:1px 8px;padding:0 10px 0 12px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);font-family:var(--font-body);font-size:13.5px;text-align:left;text-decoration:none;cursor:pointer;white-space:nowrap;overflow:hidden}
.sb-item .ic{flex:none;width:18px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:var(--faint)}
.sb-item .ic svg{display:block}
.sb-item .lbl{overflow:hidden;text-overflow:ellipsis}
.sb-item:hover{background:rgba(127,127,127,.07);color:var(--ink)}
.sb-item:hover .ic{color:var(--muted)}
.sb-item.active{background:var(--ox-soft);color:var(--ink)}
.sb-item.active .ic{color:var(--ox)}
/* --faint on the active row's blue tint measured 4.24:1; --muted holds 4.9:1 there.
   The tool marks the row .active, the site [data-active] (Sidebar.astro). */
.sb-item.active .sb-soon,.sb-item.active .sb-beta,.sb-item[data-active] .sb-soon,.sb-item[data-active] .sb-beta{color:var(--muted)}
/* Something the reader may not use yet. Shown rather than hidden so the rail's shape is
   honest about what is coming, but visibly inert: a control that looks live and then
   403s (Chat, whose endpoints are admin-only) is worse. */
.sb-item[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.sb-item[aria-disabled="true"]:hover{background:transparent;color:var(--muted)}
.sb-item[aria-disabled="true"]:hover .ic{color:var(--faint)}
.sb-item .sb-soon,.sb-beta{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--rule);border-radius:3px;padding:1px 4px}
.sb-item .sb-soon,.sb-item .sb-beta{margin-left:auto;flex:none;color:var(--faint)}
/* Beta: a live lens outside the classic ORAD core. Same badge as Soon, but it also sits
   inline beside headings (/map, the image assist modal, a Chat starter card). */
.sb-beta{display:inline-block;margin-left:6px;vertical-align:middle;font-weight:400;line-height:1.3;color:var(--muted)}
.sb-primary{margin:10px 8px 2px;color:var(--ink)}
.sb-primary .ic{color:var(--ox)}
/* The lead item, Classic ORAD, above the divider. The "+" that used to sit in this row
   belongs to Cases now (.sb-newcase). */
.sb-primary-row{display:flex;align-items:center;gap:6px;margin:10px 8px 2px}
.sb-primary-row .sb-primary{flex:1;margin:0}
/* An empty row would be a 12px band above the nav (it was, while the site shipped the
   then-leading Chat item hidden). Collapse it when nothing shows. */
.sb-primary-row:not(:has(> :not([hidden]))){display:none}
.sb-nav{flex:none;display:flex;flex-direction:column;gap:1px;padding:6px 0;margin-top:4px;border-top:1px solid var(--rule)}

.sb-sec{flex:none;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:12px 18px 5px;border-top:1px solid var(--rule)}
/* The Cases section (shared/rail/cases.html) is on both surfaces: the tool fills the
   list from its store, the site from the same localStorage. The header doubles as a
   collapse toggle, and the list fills the middle of the rail, pushing the foot down. */
.sb-sec-toggle{display:flex;align-items:center;gap:7px;width:100%;border:0;border-top:1px solid var(--rule);background:transparent;cursor:pointer;text-align:left}
.sb-sec-toggle:hover{color:var(--muted)}
.sb-sec-cx{font-size:11px;line-height:1;color:var(--faint);transition:transform .15s}
.station.cases-collapsed .sb-sec-cx{transform:rotate(-90deg)}
.station.cases-collapsed #caseList{display:none}
/* Cases header + its "+". The row owns the rule so the two controls sit on one line
   without a seam between them. */
.sb-sec-row{flex:none;display:flex;align-items:stretch;border-top:1px solid var(--rule);padding-right:8px}
.sb-sec-row .sb-sec-toggle{flex:1;min-width:0;border-top:0}
/* Sized to the 9px label it sits beside, not to a toolbar button: at 26px with a border
   it outweighed the whole section header (Jason, 2026-09-30: "the plus is too big"). */
.sb-newcase{flex:none;align-self:center;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:5px;background:transparent;color:var(--faint);cursor:pointer;text-decoration:none}
.sb-newcase svg{display:block}
.sb-newcase:hover{color:var(--ox);background:var(--ox-soft)}
.sb-newcase:focus-visible{outline:2px solid var(--ox);outline-offset:1px}

.worklist-list{overflow-y:auto;flex:1;min-height:12px;padding:8px 7px 12px;display:flex;flex-direction:column;gap:2px}
/* One tight line per case: the title, plus a hover rename control in the tool. On the
   site an item is an <a> back into the workspace at that case. */
.caseitem{position:relative;box-sizing:border-box;width:100%;text-align:left;text-decoration:none;background:transparent;border:0;border-left:2px solid transparent;border-radius:0 7px 7px 0;padding:7px 26px 7px 11px;display:flex;align-items:center;cursor:pointer}
.caseitem:hover{background:rgba(127,127,127,.06)}
/* the OPEN case: a neutral tint + accent left edge — the strong ox-soft fill is
   reserved for the active LENS (Chat/Atlas/Map/Classic), so "which view" and "which
   case is open" read as two different signals, not one doubled highlight. */
.caseitem.active{background:rgba(127,127,127,.09);border-left-color:var(--ox)}
.cs-title{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.3}
.cs-edit{position:absolute;top:50%;transform:translateY(-50%);right:6px;background:transparent;border:0;color:var(--faint);font-size:11px;line-height:1;padding:3px;cursor:pointer;opacity:0;transition:opacity .12s}
.caseitem:hover .cs-edit,.caseitem.active .cs-edit{opacity:.8}
.cs-edit:hover{color:var(--ox);opacity:1}
.wl-empty{padding:18px 12px;color:var(--faint);font-size:12px;line-height:1.5}

.sb-foot{flex:none;display:flex;flex-direction:column;gap:4px;padding:8px 8px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--rule)}
/* an <a>, never a <button>: this is a link to /account. It WAS a handler-less
   <button> that looked interactive and did nothing — box-sizing and the
   text-decoration reset keep the anchor pixel-identical to the old control. */
.sb-account{display:flex;align-items:center;gap:10px;width:100%;height:46px;padding:0 6px;border:0;border-radius:var(--r-sm);background:transparent;cursor:pointer;text-align:left;text-decoration:none;box-sizing:border-box}
.sb-account:hover{background:rgba(127,127,127,.07)}
.acct-av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ox-soft);color:var(--ox);font-family:var(--font-mono);font-size:11px;font-weight:600}
.acct-meta{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.acct-name{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-sub{font-family:var(--font-mono);font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The control renders both its signed-out and signed-in labels; account-rail.js unhides
   one. These need explicit rules because the flex column above beats the UA sheet's
   [hidden]{display:none} on specificity, and the tool ships no global [hidden] reset. */
.acct-name[hidden],.acct-sub[hidden]{display:none}
/* The whole card takes [hidden] too — {{ACCOUNT_HIDDEN}} closes the account entry
   points for launch, and .sb-account's display:flex beats the UA sheet the same way. */
.sb-account[hidden]{display:none}
.acct-cx{margin-left:auto;color:var(--faint);flex:none}
/* 11px, not 9.5px: this is the only way to the page carrying ORAD's history, method
   and how-to, and at the old size it read as fine print. Dr. White went looking for
   that page on 2026-08-24 and could not find a way back to it. */
.sb-about{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:2px 12px 4px}
.sb-about:hover,.sb-about[data-active]{color:var(--ox)}
/* About and the Help control share the footer row on both surfaces. */
.sb-foot-row{display:flex;align-items:center;gap:4px;height:30px}
.sb-foot-row .sb-about{flex:1}
/* 24px: sized to the 11px About label beside it (32px outweighed it), and still the
   WCAG 2.2 minimum target size. */
.sb-help{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:12px;line-height:1;color:var(--muted);background:transparent;border:1px solid var(--rule);border-radius:6px;text-decoration:none}
.sb-help:hover{color:var(--ink);border-color:var(--ox)}
/* {{ACCOUNT_HIDDEN}} closes the report button too, and display:inline-flex beats the UA
   sheet the way .sb-account's display:flex does. */
.sb-help[hidden]{display:none}
.sb-help svg{display:block}
.sb-report[data-active],.sb-report.active{color:var(--ox);border-color:var(--ox)}
.sb-help:focus-visible{outline:2px solid var(--ox);outline-offset:2px}

/* ── collapsed → slim icon rail (desktop only; on mobile it is a full drawer) ── */
@media(min-width:961px){
  .station.sb-collapsed .sb-head{padding:0;justify-content:center}
  .station.sb-collapsed .logo,
  .station.sb-collapsed .worklist-list,
  .station.sb-collapsed .sb-sec,
  .station.sb-collapsed .sb-item .lbl,
  .station.sb-collapsed .sb-item .sb-soon,
  .station.sb-collapsed .sb-item .sb-beta,
  .station.sb-collapsed .acct-meta,
  .station.sb-collapsed .acct-cx,
  .station.sb-collapsed .sb-about{display:none}
  /* The Cases label goes with the other labels; its "+" is the one thing in that row
     worth a slot in the mini-rail, so it centres on its own. */
  .station.sb-collapsed .sb-sec-row{justify-content:center;padding:6px 0}
  .station.sb-collapsed .sb-foot{margin-top:auto}
  /* Report and Help stay side by side, so the foot is the same height in both states.
     Together they are wider than a row, so they use the foot's padding too. */
  .station.sb-collapsed .sb-foot-row{justify-content:center;margin:0 -8px}
  .station.sb-collapsed .sb-toggle .ic-collapse{display:none}
  .station.sb-collapsed .sb-toggle .ic-expand{display:inline}
}

/* ── mobile: the rail becomes an off-canvas drawer ──────────────────────────── */
/* backdrop; tap to dismiss */
.rail-scrim{display:none;position:fixed;inset:0;z-index:39;background:color-mix(in srgb,var(--ink) 35%,transparent)}
.station.sb-shown .rail-scrim{display:block}
/* the "open sidebar" control is hidden on desktop (the rail is always docked) */
.sb-open{display:none}

/* The site drives the drawer with a checkbox instead of JavaScript — the public
   pages must work with scripting off, and a navigation you cannot open is not a
   degraded experience, it is a dead end. The app keeps its JS `.sb-shown` class;
   both resolve to the same visual state below.
   `#sbDrawer` sits immediately before `.station`, hence the sibling combinator. */
.sb-drawer-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sb-drawer-close{display:none}
/* keyboard users must still see focus land on the hamburger / close control */
.sb-drawer-input:focus-visible ~ .station .sb-open,
.sb-drawer-input:focus-visible ~ .station .sb-drawer-close{outline:2px solid var(--ox);outline-offset:2px}

@media(max-width:960px){
  .sb-open{display:inline-flex}
  .sb-drawer-close{display:inline-flex}
  /* the site's desktop collapse button; on a phone the rail is a drawer with its own close */
  .sb-collapse{display:none}
  /* ignore the desktop mini-rail collapse here — on mobile it is a drawer */
  .station .sidebar{position:fixed;top:0;bottom:0;left:0;width:min(324px,86vw);z-index:40;transform:translateX(-102%);transition:transform .2s ease;box-shadow:var(--shadow-3);border-right:1px solid var(--rule);display:flex;padding-top:env(safe-area-inset-top)}
  .station.sb-shown .sidebar,
  .sb-drawer-input:checked ~ .station .sidebar{transform:none}
  .sb-drawer-input:checked ~ .station .rail-scrim{display:block}
  @media(prefers-reduced-motion:reduce){.station .sidebar{transition:none}}
}