/* 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;
  /* --bad-ink: --bad as small TEXT on a panel (B337 g3): --bad in the three light themes; Dark's
     --bad reads 3.9:1 on an open question's panel, so its own lighter red there. */
  --bad-ink:#9a3b3b;
  /* --warn-ink: --warn as small TEXT on --warn-soft (question row, 2026-10-26): --warn reads 4.44:1 there in the
     three light themes; this reads 5.0:1. Dark's --warn reads 5.8:1, so it is --warn there. */
  --warn-ink:#8a5a17;
  --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;
  /* --star / --star-ink: the star badge on AI Evaluation's run ring when every question is Compliant
     (CD_0812, Claude Design's handoff: a bright yellow gold, asked for as such). The SAME two values
     in every theme, Dark included (the handoff's rule), so no theme below redefines them. */
  --star:#f2c230; --star-ink:#5a3f00;
  /* --on-fill: the LABEL on a solid BLUE fill, --accent / --accent-2 / --info (a primary button,
     the active pill or tab). In the three light themes it equals the theme's --surface (light on
     navy, 11:1 or more). ⭐ B340 y1 (Magnus 2026-10-23, m1): in Dark it is DARK, #0f1115, a shade
     under its --bg: 5.7:1 on --accent and --info, 4.6:1 on --accent-2 (B154 S3b's white read 3.3:1
     and 4.1:1). 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;
  /* --ink-title: a bold title's colour (a question's text, a project's name). --ink in the light themes; Dark Grey's is
     softer (below): bold light text on a dark surface glows (Magnus 2026-11-06). */
  --ink-title:var(--ink);
  /* 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;
  /* ⭐ Magnus 2026-11-06: "tone down a bit more from its bright white" (project names, questions): 15% toward
     --surface, still 10:1 or more on it. */
  --ink-title:color-mix(in srgb,var(--ink) 85%,var(--surface));
  --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; --bad-ink:#e0948c; --warn-ink:#c79a4e; --info:#6b8fc7; --info-soft:#23303f;
  --neutral:#9aa0ac; --neutral-soft:#2a2e35; --on-fill:#0f1115;
  --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 Compliance Projects", "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; }
/* B283 k1: the account menu from a rail (the collapsed sidebar; `av-acct-rail` is the company
   page's own phone rail, set by `avToggleAcct`) opens BESIDE it, at the expanded menu's width
   (the 252px sidebar's inner 224px), its bottom on the avatar button's, above the page and never
   past the viewport; the email on one line (an ellipsis, the full address in its title). The
   inline style is `left:0;right:0;bottom:…` (expanded: above the account block, as before). */
.av-collapsed #av-acct-pop, #av-acct-pop.av-acct-rail { position:fixed !important; left:80px !important;
  right:auto !important; top:auto !important; bottom:18px !important; width:224px; max-width:calc(100vw - 88px);
  max-height:calc(100vh - 26px); overflow-y:auto; box-sizing:border-box; }
.av-collapsed #av-acct-pop .av-acct-email, #av-acct-pop.av-acct-rail .av-acct-email { white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
#av-sidebar.av-acct-open { z-index:66; }
/* B288 k2: from the project page's phone header avatar (under 720 px, the sidebar hidden) the menu
   sits in <body> (`avToggleAcct`), under the avatar at the right edge (its top set from the
   avatar's box), at the same 224px, inside the viewport from 320px; the email on one line. */
#av-acct-pop.av-acct-phone { position:fixed !important; left:auto !important; right:16px !important;
  bottom:auto !important; top:64px; width:224px; max-width:calc(100vw - 32px);
  max-height:calc(100vh - 80px); overflow-y:auto; box-sizing:border-box; }
#av-acct-pop.av-acct-phone .av-acct-email { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ⭐ 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; }
/* ── The sidebar's company (B241 c4; B110's switcher until 2026-10-05, design handoff 1b) ──
   Its name, and nothing to open: one company per sign-in. The popover, its rows and its menu
   went with the switcher.
   ⚠️ 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. */
.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);
  text-align:left; font-family:var(--font-body); box-sizing:border-box; }
.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; }
/* The rail (collapsed sidebar) keeps only the avatar — there is no room for a label. */
.av-collapsed .av-ws-meta { display:none; }
.av-collapsed .av-ws-trigger { justify-content:center; padding:9px 0; }
/* Name your company's field and button (routes/onboarding.py). */
.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; }
/* Name your company on a phone (B241 fix F3): the fixed 252px sidebar would push the form off
   a 390px screen, so it goes, and the page's own line carries My Account and Sign out. */
.av-onb-phone { display:none; }
@media (max-width: 720px) {
  .av-onb #av-sidebar { display:none !important; }   /* its inline style says flex */
  .av-onb-main { padding:28px 16px !important; }
  .av-onb-phone { display:block; }
}
/* --- B242: company billing (docs/design/company_billing/README.md), on the theme's tokens ---
   The chooser (A1/A2, routes/onboarding.py `_company_picker_html`) and D1's s1 page. */
.av-chooser { max-width:576px; background:var(--surface); border:1px solid var(--border);
  border-radius:22px; padding:44px 48px; box-shadow:var(--shadow); box-sizing:border-box; }
.av-chooser-h1 { font-family:var(--font-body); font-size:30px; font-weight:800; color:var(--ink);
  letter-spacing:-.01em; margin:0; line-height:1.2; }
.av-chooser-sub { font-size:16px; color:var(--ink-2); margin:10px 0 0; line-height:1.5; }
.av-chooser-rows { margin-top:22px; border-top:1px solid var(--border); }
.av-chooser-rows:empty { display:none; }
.av-chooser-row { display:flex; align-items:center; gap:14px; padding:20px 0; margin:0;
  border-bottom:1px solid var(--border); }
.av-chooser-info { flex:1; min-width:0; }
.av-chooser-name { font-size:18px; font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.av-chooser-subline { font-size:16px; color:var(--ink-3); margin-top:3px; }
.av-chooser-warn { color:var(--warn); font-weight:600; }
.av-chooser-section { margin-top:22px; }
.av-chooser-label { font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  color:var(--ink-3); padding-bottom:8px; border-bottom:1px solid var(--border); }
.av-chooser-create { padding-top:18px; }
.av-chooser-create a { color:var(--accent); font-weight:700; font-size:18px; text-decoration:none; }
.av-chooser-create a:hover { color:var(--accent-2); }
.av-chooser-help { margin-top:20px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px; padding:18px 20px; }
.av-chooser-help-title { font-size:16px; font-weight:700; color:var(--ink); }
.av-chooser-help-body { font-size:15px; line-height:1.5; color:var(--ink-2); margin:6px 0 0; }
.av-chooser-error { margin:0 0 16px; padding:12px 14px; border-radius:8px; background:var(--bad-soft);
  color:var(--bad); font-size:15px; line-height:1.45; }
.av-chooser-foot { font-size:14px; color:var(--ink-3); margin:20px 0 0; }
/* Buttons: the chooser's Open / Accept / Start free trial, and Pay to open (secondary). */
.av-btn-primary { flex:none; white-space:nowrap; background:var(--accent); color:var(--on-fill);
  border:none; border-radius:8px; padding:12px 22px; font-family:var(--font-body); font-size:17px;
  font-weight:700; cursor:pointer; text-decoration:none; }
.av-btn-primary:hover { background:var(--accent-2); }
.av-btn-lg { padding:16px 28px; font-size:18px; }
.av-btn-secondary { flex:none; white-space:nowrap; background:var(--surface); color:var(--accent);
  border:1.5px solid var(--accent); border-radius:8px; padding:11px 18px; font-family:var(--font-body);
  font-size:17px; font-weight:700; cursor:pointer; text-decoration:none; }
.av-btn-secondary:hover { color:var(--accent-2); border-color:var(--accent-2); }
.av-btn-primary:focus-visible, .av-btn-secondary:focus-visible { outline:2px solid var(--accent);
  outline-offset:2px; }
/* B249: D1's Delete this company (a locked company's Compliance Officer), the destructive one. */
.av-btn-danger { flex:none; white-space:nowrap; background:var(--surface); color:var(--bad);
  border:1.5px solid var(--bad); border-radius:8px; padding:11px 18px; font-family:var(--font-body);
  font-size:17px; font-weight:700; cursor:pointer; }
.av-btn-danger:focus-visible { outline:2px solid var(--bad); outline-offset:2px; }
.av-btn-danger:disabled { cursor:not-allowed; opacity:.5; }
.av-restart-delete { margin:22px 0 0; display:flex; flex-direction:column; gap:10px; }
/* B256: a locked company's Leave (the picker's row, D1) and D1's released reports. */
.av-chooser-actions { flex:none; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.av-chooser-leave { color:var(--ink-2); font-size:16px; font-weight:600; text-decoration:underline; }
.av-chooser-leave:hover { color:var(--ink); }
.av-restart-leave { margin:18px 0 0; }
.av-restart-leave a { color:var(--bad); font-size:17px; font-weight:600; text-decoration:underline; }
.av-restart-reports { margin:26px 0 0; display:flex; flex-direction:column; gap:10px; }
.av-restart-report-list { list-style:none; margin:0; padding:0; }
.av-restart-report { display:flex; align-items:center; gap:14px; padding:14px 0; flex-wrap:wrap;
  border-bottom:1px solid var(--border); }
.av-restart-report .av-chooser-info { flex:1 1 200px; min-width:0; }
/* Create your company (B1/C1): the page, its one card, the fields and the plan selector. */
.av-create { max-width:676px; margin:0 auto; }
.av-create-h1 { font-family:var(--font-body); font-size:40px; font-weight:800; letter-spacing:-.02em;
  color:var(--ink); margin:0 0 10px; line-height:1.15; }
.av-create-intro { font-size:18px; line-height:1.5; color:var(--ink-3); margin:0 0 26px; }
.av-create-card { background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:32px; display:flex; flex-direction:column; gap:28px; box-shadow:var(--shadow); }
.av-create-back { margin:18px 0 0; }
.av-create-back a { color:var(--accent); font-size:17px; font-weight:600; text-decoration:underline; }
.av-field-label { display:block; font-size:17px; font-weight:700; color:var(--ink); margin:0 0 10px;
  padding:0; }
.av-field-input { display:block; width:100%; box-sizing:border-box; height:54px; padding:0 18px;
  font-size:18px; font-family:var(--font-body); color:var(--ink); background:var(--field);
  border:1px solid var(--border-strong); border-radius:8px; outline:none; }
.av-field-input:focus { border:1.5px solid var(--accent); }
.av-field-help { font-size:15px; color:var(--ink-3); margin:10px 0 0; line-height:1.5; }
.av-link-strong { color:var(--accent); font-weight:600; }
/* B242 s4: Company Settings → Billing (views/company_billing_panel.py) */
.av-billing-list { margin:0; display:flex; flex-direction:column; }
.av-billing-row { display:grid; grid-template-columns:160px 1fr; gap:14px; padding:11px 0; border-top:1px solid var(--border); }
.av-billing-row:first-child { border-top:none; }
.av-billing-label { font-size:13px; font-weight:600; color:var(--ink-2); }
.av-billing-value { margin:0; font-size:14px; color:var(--ink); line-height:1.5; overflow-wrap:anywhere; }
.av-billing-note { font-size:13px; color:var(--ink-3); margin:14px 0 0; line-height:1.5; }
@media (max-width:640px) { .av-billing-row { grid-template-columns:1fr; gap:2px; } }
.av-plans { border:none; margin:0; padding:0; min-width:0; }
.av-plan-list { display:flex; flex-direction:column; gap:10px; }
.av-plan { display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface); cursor:pointer; }
.av-plan:has(.av-plan-input:checked) { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.av-plan:has(.av-plan-input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.av-plan-input { appearance:none; -webkit-appearance:none; flex:none; width:20px; height:20px;
  margin:0; border-radius:50%; border:1.5px solid var(--border-strong); background:var(--surface);
  box-sizing:border-box; cursor:pointer; }
.av-plan-input:checked { border:6px solid var(--accent); }
.av-plan-input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.av-plan-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.av-plan-name { font-size:17px; font-weight:700; color:var(--ink); }
.av-plan-users { font-size:15px; color:var(--ink-3); margin-top:2px; }
.av-plan-price { flex:none; display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.av-plan-amount { font-family:var(--font-mono); font-size:18px; font-weight:700; color:var(--accent); }
.av-plan-per { font-size:13px; color:var(--ink-3); }
.av-notice { background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  padding:18px 20px; }
.av-notice-ok { background:var(--ok-soft); border-color:var(--ok-soft); }
.av-notice-title { font-size:17px; font-weight:700; color:var(--ink); }
.av-notice-ok .av-notice-title { color:var(--ok); }
.av-notice-body { font-size:15px; line-height:1.5; color:var(--ink-2); margin-top:6px; }
/* B242 s2, C2: the subscription checkout (templates/company_billing/checkout.html). */
.av-c2 { max-width:1080px; margin:0 auto; }
.av-c2-h1 { font-family:var(--font-body); font-size:32px; font-weight:800; letter-spacing:-.02em;
  color:var(--ink); margin:0 0 8px; line-height:1.2; }
.av-c2-sub { font-size:17px; color:var(--ink-3); margin:0 0 24px; line-height:1.5; }
.av-c2-grid { display:grid; grid-template-columns:1.45fr 1fr; gap:28px; align-items:start; }
.av-c2-left { display:flex; flex-direction:column; gap:20px; min-width:0; }
.av-c2-card { background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:26px 28px; box-shadow:var(--shadow); }
.av-c2-h2 { font-family:var(--font-body); font-size:20px; font-weight:800; color:var(--ink); margin:0 0 8px; }
.av-c2-help { font-size:14px; color:var(--ink-3); margin:0 0 16px; line-height:1.5; }
.av-c2-body { font-size:15px; color:var(--ink-2); margin:0; line-height:1.55; }
.av-c2-field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; min-width:0; flex:1; }
.av-c2-field label { font-size:14px; font-weight:700; color:var(--ink); }
.av-c2-field input, .av-c2-field select { height:46px; padding:0 14px; font-size:16px;
  font-family:var(--font-body); color:var(--ink); background:var(--field);
  border:1px solid var(--border-strong); border-radius:8px; box-sizing:border-box; width:100%; }
.av-c2-field input:focus, .av-c2-field select:focus { outline:2px solid var(--accent); outline-offset:1px; }
.av-c2-opt { color:var(--ink-3); font-weight:400; }
.av-c2-req { color:var(--accent); font-weight:500; }
.av-c2-row { display:flex; gap:14px; }
.av-c2-pill { font-size:13px; font-weight:600; border-radius:8px; padding:8px 12px; margin-top:4px; }
.av-c2-pill-ok { background:var(--ok-soft); color:var(--ok); }
.av-c2-pill-warn { background:var(--warn-soft); color:var(--warn); }
.av-c2-pill-bad { background:var(--bad-soft); color:var(--bad); }
.av-c2-summary { background:var(--surface-2); border:1px solid var(--border); border-radius:14px;
  padding:26px 26px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.av-c2-line { display:flex; justify-content:space-between; gap:12px; font-size:16px; font-weight:700; color:var(--ink); }
.av-c2-line-sub { font-size:14px; color:var(--ink-3); margin-bottom:8px; }
.av-c2-sum { display:flex; justify-content:space-between; gap:12px; font-size:15px; color:var(--ink-2); }
.av-c2-mono { font-family:var(--font-mono); }
.av-c2-note { font-size:13px; color:var(--ok); background:var(--ok-soft); border-radius:8px; padding:7px 10px; }
.av-c2-due { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  border-top:1px solid var(--border); padding-top:12px; margin-top:4px; font-size:16px; font-weight:700; color:var(--ink); }
.av-c2-total { font-family:var(--font-mono); font-size:30px; font-weight:700; color:var(--accent); }
.av-c2-then { font-size:15px; color:var(--ink-3); margin:0; }
.av-c2-consent { display:flex; gap:10px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--border); border-radius:10px; padding:14px 16px; font-size:14.5px;
  color:var(--ink); line-height:1.45; cursor:pointer; }
.av-c2-consent input { width:18px; height:18px; margin:2px 0 0; flex:none; accent-color:var(--accent); }
.av-c2-pay { width:100%; padding:20px; font-size:19px; }
.av-c2-pay:disabled { opacity:.4; cursor:not-allowed; }
.av-c2-foot { font-size:14px; color:var(--ink-3); text-align:center; margin:4px 0 0; line-height:1.6; }
.av-c2-foot a { color:var(--accent); text-decoration:underline; }
.av-c2-banner { margin:0 0 18px; padding:12px 14px; border-radius:8px; background:var(--bad-soft);
  color:var(--bad); font-size:15px; font-weight:600; line-height:1.45; }
/* B288 k5: the free trial's notice on the AI Governance project and the single sign-on page:
   plain, never an alarm (it goes once the company pays). */
.av-trial-notice { max-width:760px; margin:0 0 18px; padding:12px 16px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface-2); color:var(--ink); font-size:13.5px;
  line-height:1.55; }
.av-trial-notice[hidden] { display:none; }
/* B288 k5: C2's plan choice at a trial's conversion: Core held while single sign-on is set up, and
   B287's warning (with its confirmation) when Core is chosen with AI Governance answers. */
.av-plan:has(.av-plan-input:disabled) { opacity:.55; cursor:not-allowed; }
.av-plan-input:disabled { cursor:not-allowed; }
.av-c2-warn { margin-top:14px; padding:14px 16px; border-radius:10px; background:var(--warn-soft);
  border:1px solid var(--warn); display:flex; flex-direction:column; gap:12px; }
.av-c2-warn[hidden] { display:none; }
@media (max-width: 860px) {
  .av-c2-grid { grid-template-columns:1fr; }
  .av-c2-row { flex-direction:column; gap:0; }
  .av-c2-card, .av-c2-summary { padding:20px 16px; }
  .av-c2-h1 { font-size:26px; }
}
/* e10: the red bar at the top of the app shell for every member of a trialing company. */
.av-trial-bar-inset { margin:-40px -40px 24px; }
.av-trial-bar-link { color:var(--surface); font-weight:700; text-decoration:underline; margin-left:10px; }
.av-trial-bar { background:var(--bad); color:var(--surface); font-family:var(--font-body);
  font-size:14px; font-weight:600; text-align:center; padding:9px 16px; line-height:1.4; }
@media (max-width: 720px) {
  .av-chooser-wrap { padding:16px !important; }
  .av-chooser { padding:28px 20px; border-radius:16px; }
  .av-chooser-row { flex-wrap:wrap; }
  .av-create-h1 { font-size:30px; }
  .av-create-card { padding:20px 16px; gap:22px; }
  .av-plan { padding:14px; gap:12px; }
}
/* A reason or a consequence under a Leave or a Delete (Company Settings, the officers roster). */
.av-ws-hint { display:block; font-family:var(--font-mono,ui-monospace,monospace); font-size:9.5px;
  color:var(--ink-3); margin-top:2px; }

/* --- 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; } }

/* ⭐ B382 s6 (bank v0.9 addendum §1, review L5): a written-out acronym with its glossary meaning. A mouse gets the
   browser's title on hover (and no popover, so never both); a keyboard focus anywhere, and a tap on a touch screen
   (which focuses the tabindex element), show the meaning from its `data-gloss` under the term; on a phone it sits
   inside the viewport, above the bottom edge. No script. */
abbr.av-gloss { position:relative; text-decoration:underline dotted; text-underline-offset:2px; cursor:help; }
abbr.av-gloss:focus-visible { outline:2px solid var(--accent); outline-offset:1px; border-radius:2px; }
abbr.av-gloss:focus-visible::after { content:attr(data-gloss); position:absolute; left:0; top:calc(100% + 4px); z-index:60;
  width:max-content; max-width:min(320px, 80vw); padding:6px 9px; border-radius:var(--radius-sm, 6px);
  background:var(--surface); color:var(--ink); border:1px solid var(--border); box-shadow:0 4px 14px rgba(0,0,0,.12);
  font:400 12.5px/1.45 var(--font-body, system-ui); white-space:normal; text-decoration:none; }
@media (hover: none) {
  abbr.av-gloss:focus::after { content:attr(data-gloss); position:absolute; left:0; top:calc(100% + 4px); z-index:60;
  width:max-content; max-width:min(320px, 80vw); padding:6px 9px; border-radius:var(--radius-sm, 6px);
  background:var(--surface); color:var(--ink); border:1px solid var(--border); box-shadow:0 4px 14px rgba(0,0,0,.12);
  font:400 12.5px/1.45 var(--font-body, system-ui); white-space:normal; text-decoration:none; }
}
@media (max-width: 640px) {
  abbr.av-gloss:focus::after, abbr.av-gloss:focus-visible::after { position:fixed; left:16px; right:16px; top:auto;
    bottom:16px; width:auto; max-width:none; }
}