/* The app's theme (views/shell.py, `THEME_STYLE`): the Ledger tokens on :root, the other
 * backgrounds and the Dossier font by `data-bg` / `data-font` on <html>, and the shell's own
 * rules (the sidebar, the workspace switcher, motion off). Linked by every page that carries
 * the shell, in the head, after the fonts.
 *
 * ⭐ B38 N3 (2026-09-29): until then an inline <style> the shell wrote into every page (13 089
 * bytes each). As a static file (shell.asset_url, content-hashed) the browser caches it across
 * pages. Moved byte for byte from the rendered page (the B79 method): everything after this
 * comment is that <style>'s text, and the link stands where the <style> stood, so the cascade
 * is unchanged.
 */
:root {
  /* accent (navy) + status + shape + body/mono fonts (shared base) */
  --accent:#1d3a5f; --accent-2:#142a47; --accent-soft:#e4eaf0; --accent-ink:#1d3a5f;
  --ok:#2f6b46; --ok-soft:#e7efe6; --warn:#94621b; --warn-soft:#f3ecdd;
  --bad:#9a3b3b; --bad-soft:#f2e3df; --info:#1d3a5f; --info-soft:#e4eaf0;
  --neutral:#6b6453; --neutral-soft:#ecebe6;
  /* --gold / --gold-soft: Goodwill on the GPAI leaderboard v2 (B212 g1): an award that is never
     part of the score, so it takes no status colour. One pair, in every theme: the three light
     ones share this one, Dark has its own below. */
  --gold:#9a700c; --gold-soft:#f5ecd2;
  /* --on-fill: the LABEL on a solid BLUE fill, --accent / --accent-2 / --info (a primary button,
     the active pill or tab). Light in every theme: it equals the theme's --surface in the three
     light ones and is white in Dark, where --surface is dark (B154 S3b, Magnus 2026-09-30: white on
     blue, as before the sweep). A status fill (--ok / --warn / --bad / --neutral) keeps --surface
     (S3c, his q4). Never a page colour. */
  --on-fill:#fbf9f4;
  --radius:6px; --radius-sm:4px; --radius-lg:8px;
  --shadow:0 1px 0 rgba(40,40,55,.06),0 1px 2px rgba(40,40,55,.05);
  --shadow-sm:0 1px 0 rgba(40,40,55,.05);
  --font-body:'Hanken Grotesk',sans-serif; --font-mono:'IBM Plex Mono',monospace;
  /* Ledger background (default) */
  --bg:#ece6da; --surface:#fbf9f4; --surface-2:#f4efe4; --surface-3:#efe9db;
  --border:#e0d9c9; --border-strong:#cfc6b1;
  /* --field: content the user reads/edits (evidence box, answer textareas) —
     pushed toward white so it pops against the cream chrome (white_content_fields_task). */
  --field:#fffefb;
  --ink:#21242b; --ink-2:#5c5648; --ink-3:#8d8675;
  /* Archivo display font (default) */
  --font-display:'Archivo',sans-serif; --display-weight:700; --head-weight:700;
}
html[data-bg="vector"] {
  --bg:#eaedf3; --surface:#ffffff; --surface-2:#f6f7fb; --surface-3:#eef1f7;
  --border:#e6e9f1; --border-strong:#d6dbe8; --field:#ffffff; --on-fill:#ffffff;
  --ink:#15181f; --ink-2:#4a5160; --ink-3:#8b92a3;
}
html[data-bg="white"] {
  --bg:#f5f6f8; --surface:#ffffff; --surface-2:#f7f8fa; --surface-3:#eef0f3;
  --border:#e9eaee; --border-strong:#dadce1; --field:#ffffff; --on-fill:#ffffff;
  --ink:#1a1a1f; --ink-2:#54555c; --ink-3:#888a92;
}
html[data-bg="dark"] {
  --bg:#16181d; --surface:#1e2127; --surface-2:#262a31; --surface-3:#2f343c;
  --border:#33373f; --border-strong:#444a54; --field:#23272f;
  --ink:#f1f2f5; --ink-2:#b3b8c2; --ink-3:#7f8593;
  --accent:#6b8fc7; --accent-2:#5a7eb8; --accent-soft:#23303f; --accent-ink:#9db8dd;
  --ok:#5fa97a; --ok-soft:#1d2a22; --warn:#c79a4e; --warn-soft:#2c2618;
  --bad:#cc7a72; --bad-soft:#2f201e; --info:#6b8fc7; --info-soft:#23303f;
  --neutral:#9aa0ac; --neutral-soft:#2a2e35; --on-fill:#ffffff;
  --gold:#e6ba4f; --gold-soft:#332a14;
  --shadow:0 1px 0 rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.4); --shadow-sm:0 1px 0 rgba(0,0,0,.3);
}
html[data-font="dossier"] {
  --font-display:'Source Serif 4',serif; --display-weight:600; --head-weight:600;
}
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body { background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:14px; line-height:1.5; }
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-thumb { background:rgba(110,120,140,.30); border-radius:9px; border:3px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:rgba(110,120,140,.5); background-clip:padding-box; }
::-webkit-scrollbar-track { background:transparent; }
@keyframes ce-pulse { 0%,100% { box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent); } 50% { box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 0%,transparent); } }
.av-nav-item { display:flex; align-items:flex-start; gap:11px; padding:9px 11px; min-height:38px; border-radius:var(--radius-sm); border:1px solid transparent; background:transparent; color:var(--ink-2); font-family:var(--font-body); font-size:13.5px; font-weight:500; cursor:pointer; text-decoration:none; width:100%; text-align:left; }
/* Long child labels (e.g. "My AI Systems Compliance", "General-Purpose AI Models")
   word-wrap onto multiple lines instead of truncating; the icon stays top-aligned. */
.av-nav-item svg { flex-shrink:0; margin-top:1px; }
.av-nav-label { white-space:normal; overflow-wrap:break-word; overflow:visible; line-height:1.25; text-wrap:pretty; }
.av-nav-item:hover { background:var(--surface-2); color:var(--ink); }
.av-nav-item.active { background:var(--accent-soft); color:var(--accent-ink); border-color:color-mix(in srgb,var(--accent) 22%,transparent); font-weight:600; }
.av-collapsed .av-nav-label, .av-collapsed .av-acct-meta, .av-collapsed .av-wordmark, .av-collapsed .av-collapse-wide { display:none !important; }
.av-collapsed .av-nav-item { justify-content:center; padding:9px 0; }
/* ⭐ The pre-workspace shell. Every item here is a WORKSPACE feature, and a user who
   has not created one yet has nothing for them to open. Muted and unclickable rather
   than hidden, so the shape of the product is visible from the first screen.
   ⚠️ No :hover and no pointer — a greyed control that still lights up under the mouse
   reads as broken rather than as not-yet. */
.av-nav-item.av-nav-inert { opacity:.42; cursor:default; }
.av-nav-item.av-nav-inert:hover { background:transparent; color:var(--ink-2); }
.av-nav-section.av-nav-inert { opacity:.42; }
/* ── B110 · workspace switcher (design handoff option 1b) ────────────────────────
   ⚠️ TOKENS, NOT THE HANDOFF'S HEXES. The bundle specifies one palette (#E3D8C8 sand,
   #1B2A3A ink, …) because the prototype has one theme. This shell has four, including a
   dark one, so every value below maps to the existing token whose ROLE matches; the raw
   hexes would render as light-on-light the moment somebody switches theme. */
.av-ws { position:relative; }
.av-ws-trigger { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px;
  border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--border);
  cursor:pointer; text-align:left; font-family:var(--font-body); }
.av-ws-trigger:hover { background:var(--surface-3); }
.av-ws-trigger:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.av-ws-avatar { flex:0 0 28px; width:28px; height:28px; border-radius:6px; background:var(--accent);
  color:var(--on-fill); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono,ui-monospace,monospace); font-size:10px; font-weight:700; }
.av-ws-meta { flex:1; min-width:0; }
.av-ws-eyebrow { display:block; font-family:var(--font-mono,ui-monospace,monospace); font-size:9px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.av-ws-name { display:block; font-size:14.5px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.av-ws-caret { flex-shrink:0; color:var(--ink-3); transition:transform .15s ease; }
.av-ws[data-open="1"] .av-ws-caret { transform:rotate(180deg); }
/* The rail (collapsed sidebar) keeps only the avatar — there is no room for a label. */
.av-collapsed .av-ws-meta, .av-collapsed .av-ws-caret { display:none; }
.av-collapsed .av-ws-trigger { justify-content:center; padding:9px 0; }

.av-ws-pop { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:6;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:6px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:2px;
  transform-origin:top center; animation:avWsIn 160ms cubic-bezier(.2,.7,.3,1); }
@keyframes avWsIn { from { opacity:0; transform:scaleY(.6) translateY(-6px); } to { opacity:1; transform:none; } }
.av-ws-pop[data-closing="1"] { animation:avWsOut 120ms cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes avWsOut { to { opacity:0; transform:scaleY(.6) translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .av-ws-pop, .av-ws-pop[data-closing="1"] { animation:none; } }
.av-ws-list { display:flex; flex-direction:column; gap:2px; max-height:320px; overflow-y:auto; }
.av-ws-row { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:6px;
  cursor:pointer; border:none; background:transparent; width:100%; text-align:left;
  font-family:var(--font-body); position:relative; }
.av-ws-row:hover { background:var(--surface-2); }
.av-ws-row[aria-selected="true"] { background:var(--surface-3); }
.av-ws-check { flex:0 0 14px; text-align:center; font-size:12px; color:var(--ink); }
.av-ws-rowname { flex:1; min-width:0; font-size:13.5px; color:var(--ink-2); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.av-ws-row[aria-selected="true"] .av-ws-rowname { font-weight:600; color:var(--ink); }
.av-ws-chip { font-family:var(--font-mono,ui-monospace,monospace); font-size:9px; color:var(--ink-2);
  background:var(--surface-3); padding:3px 5px; border-radius:4px; flex-shrink:0; }
.av-ws-kebab { flex:0 0 22px; width:22px; height:22px; border-radius:5px; border:none;
  background:transparent; color:var(--ink-3); font-size:15px; line-height:1; cursor:pointer; }
.av-ws-kebab:hover { background:var(--surface-3); color:var(--ink); }
.av-ws-div { height:1px; background:var(--border); margin:4px 2px; }
.av-ws-new { display:flex; align-items:center; gap:7px; padding:8px 10px; border-radius:6px;
  font-size:13.5px; font-weight:500; color:var(--ink-3); cursor:pointer; border:none;
  background:transparent; width:100%; text-align:left; font-family:var(--font-body); }
.av-ws-new:hover { background:var(--surface-2); color:var(--ink); }
.av-ws-input { flex:1; min-width:0; font-size:13.5px; background:var(--surface);
  border:1px solid var(--accent); border-radius:6px; padding:7px 8px; color:var(--ink);
  font-family:var(--font-body); outline:none; }
.av-ws-add { background:var(--accent); color:var(--on-fill); font-size:13px; font-weight:600;
  padding:7px 11px; border-radius:6px; border:none; cursor:pointer; font-family:var(--font-body); }
.av-ws-err { font-size:12px; color:var(--bad); padding:4px 10px 2px; }
.av-ws-empty { font-size:12.5px; line-height:1.45; color:var(--ink-2); padding:8px 10px 4px; }
/* ⛔ FIXED, not absolute — and that is a bug fix, not a preference (Magnus, 2026-09-20).
   `.av-ws-list` scrolls (`overflow-y:auto` for long lists), and an absolutely positioned
   child of a scroll container is CLIPPED by it: the ⋯ menu was being cut into the list's
   own scroll area, reading as a second scroller parallel to the first. Fixed positioning
   is outside every overflow context, so the menu opens beside the popover instead of
   inside it — it tilts to the RIGHT of the row, where there is always room. */
.av-ws-menu { position:fixed; z-index:99998; width:212px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:5px; box-shadow:var(--shadow); }
.av-ws-menu button { display:block; width:100%; text-align:left; padding:8px 10px; border-radius:5px;
  border:none; background:transparent; font-size:13.5px; color:var(--ink); cursor:pointer;
  font-family:var(--font-body); }
.av-ws-menu button:hover { background:var(--surface-2); }
.av-ws-menu button.av-ws-danger { color:var(--bad); }
.av-ws-menu button.av-ws-danger:hover { background:color-mix(in srgb,var(--bad) 8%,transparent); }
.av-ws-hint { display:block; font-family:var(--font-mono,ui-monospace,monospace); font-size:9.5px;
  color:var(--ink-3); margin-top:2px; }
/* B188 rule 7: a Leave the leave rule refuses, shown with its reason rather than hidden. */
.av-ws-menu .av-ws-off { padding:8px 10px; font-size:13.5px; font-family:var(--font-body);
  color:var(--ink-3); cursor:not-allowed; }
.av-ws-menu .av-ws-off .av-ws-hint { white-space:normal; line-height:1.4; }

/* Active-workspace name under the Workspaces nav item (filled by the /api/workspaces fetch) */
.av-active-workspace { font-size:11.5px; font-weight:600; color:var(--accent-ink); background:var(--accent-soft); margin:2px 8px 0 38px; padding:3px 9px; border-radius:var(--radius-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.av-collapsed .av-active-workspace { display:none !important; }
/* --- static nav section (EU AI Act): mono-uppercase header over guide-lined children --- */
.av-nav-section { display:flex; align-items:center; gap:9px; width:100%; padding:9px 11px; }
.av-nav-sec-lead { display:inline-flex; align-items:center; gap:9px; flex-shrink:0; }
.av-nav-sec-label { flex:1; text-align:left; font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.av-nav-sec-children { margin:3px 0 2px 21px; padding-left:11px; border-left:1.5px solid var(--border); display:flex; flex-direction:column; gap:4px; }
.av-collapsed .av-nav-section { display:none; }
.av-collapsed .av-nav-sec-children { margin-left:0; padding-left:0; border-left:none; }
.av-bar { transition:width .6s cubic-bezier(.4,0,.2,1); }
/* Collapse/expand affordances: collapse chevron shows when wide, expand chevron when collapsed */
.av-expand-collapsed { display:none; }
.av-collapsed .av-expand-collapsed { display:flex; }
.av-collapsed .av-sidebar-head { justify-content:center; }
/* Brand wordmark is a monochrome image; lighten it on the dark theme so it stays legible */
html[data-bg="dark"] .av-wordmark-img { filter:invert(1) brightness(1.7); }
/* Brand icon: one file in every theme (B205 c7), the seal in dark green with a gold dot. On the dark theme it is
   turned light the same way: inverted, its hue turned back so the dot stays gold, and brightened until the ring and
   the N are white, as the wordmark beside it (B205 J1; measured: ring 16:1 and dot 6:1 on --surface). */
html[data-bg="dark"] .av-icon-img { filter:invert(1) hue-rotate(185deg) brightness(1.6); }
/* Motion off (user toggle or OS preference): snap, don't animate */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { transition:none !important; animation:none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; animation:none !important; } }