/* ============================================================================
   STOIAN CO - HTML CHASSIS  (single source of truth)
   One token + component core, two layout skins: .skin-print / .skin-screen
   Brand: Stoian_Brand_Guidelines_v2.html  |  No CDN, print-safe, self-contained
   ----------------------------------------------------------------------------
   Usage: <body class="skin-screen" data-default-theme="auto"> ... </body>
          <body class="skin-print"  data-default-theme="auto"> ... </body>
   Pair with stoian-chassis.js. For SHARED deliverables, inline this file into
   a <style> block (keeps the output a portable single file).
   ============================================================================ */

/* ── Brand constants (never theme-flip) ─────────────────────────────────── */
:root{
  --navy:#172A53; --navy-deep:#0D1A35; --navy-mid:#2D3E65; --navy-soft:#4A5678; --navy-pale:#7681A0; --navy-faint:#A8ABC2;
  --green:#009069; --green-lt:#33AB8C; --green-ltr:#66C5AD;
  --citrine:#E0CA3C;
  --coq:#F34213; --coq-tint:#F5714D;
  --wine:#823038;            /* optional editorial accent only - never status */
  --white:#FFFFFF;

  --font-head:"Times New Roman", Times, serif;
  --font-body:Arial, Helvetica, sans-serif;
  --font-mono:Consolas, "Courier New", monospace;

  --radius:10px;
  --maxw:1080px;
}

/* ── Semantic surfaces - LIGHT (default) ────────────────────────────────── */
:root{
  --app-bg:#5a5a5a;
  --surface:#FFFFFF;
  --surface-alt:#F4F4F4;
  --wash:#F0F3F9;
  --ink:#1D2330;
  --ink-soft:#5D6675;
  --heading:#172A53;
  --heading-2:#2D3E65;
  --line:#E2E6EE;
  --track:#ECECEC;
  --bar-primary:#172A53;   /* chart bars - theme-aware, always visible */
  --bar-dim:#7681A0;
  --citrine-deep:#8A7400;        /* readable citrine text on light */
  --callout-info-bg:#E3F3EE;
  --callout-warn-bg:#FBF6DD;
  --callout-flag-bg:#FDE8E2;
  --shadow:0 2px 8px rgba(23,42,83,.06);
  --node-bg:#FFFFFF;
}

/* ── Semantic surfaces - DARK ───────────────────────────────────────────── */
:root[data-theme="dark"]{
  --app-bg:#070C16;
  --surface:#131F36;
  --surface-alt:#1A2942;
  --wash:#1D222C;
  --ink:#E6EAF3;
  --ink-soft:#A8ABC2;
  --heading:#CBD6EE;
  --heading-2:#9FB1D6;
  --line:#2C3D5E;
  --track:#243756;
  --bar-primary:#6E86C9;   /* lightened brand blue, visible on dark cards */
  --bar-dim:#9BA6C2;
  --citrine-deep:#E0CA3C;
  --callout-info-bg:rgba(0,144,105,.15);
  --callout-warn-bg:rgba(224,202,60,.12);
  --callout-flag-bg:rgba(243,66,19,.13);
  --shadow:0 2px 10px rgba(0,0,0,.4);
  --node-bg:#1B2942;
}

/* ── Follow the OS theme when no explicit choice is set (works with ZERO JS) ──
   In a JS-enabled browser the toggle sets data-theme, so this never applies.
   In a no-JS viewer (iOS Quick Look, file previews) there is no data-theme, so
   the document follows the phone's light/dark setting automatically. ──────── */
@media screen and (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --app-bg:#070C16; --surface:#131F36; --surface-alt:#1A2942; --wash:#1D222C;
    --ink:#E6EAF3; --ink-soft:#A8ABC2; --heading:#CBD6EE; --heading-2:#9FB1D6;
    --line:#2C3D5E; --track:#243756; --bar-primary:#6E86C9; --bar-dim:#9BA6C2; --citrine-deep:#E0CA3C;
    --callout-info-bg:rgba(0,144,105,.15); --callout-warn-bg:rgba(224,202,60,.12); --callout-flag-bg:rgba(243,66,19,.13);
    --shadow:0 2px 10px rgba(0,0,0,.4); --node-bg:#1B2942;
  }
  :root:not([data-theme]) .theme-toggle, :root:not([data-theme]) .backtotop{ background:var(--citrine); color:var(--navy); }
}

/* ── Print always renders light, whatever the toggle says ───────────────── */
@media print{
  :root[data-theme="dark"]{
    --app-bg:#fff; --surface:#fff; --surface-alt:#F4F4F4; --wash:#F0F3F9; --ink:#1A1A1A;
    --ink-soft:#4A4A4A; --heading:#172A53; --heading-2:#2D3E65; --line:#D9D9D9; --track:#ECECEC;
    --citrine-deep:#8A7400; --callout-info-bg:#E3F3EE; --callout-warn-bg:#FBF6DD; --callout-flag-bg:#FDE8E2; --node-bg:#fff;
  }
}

/* ── Reset / base ───────────────────────────────────────────────────────── */
*{ box-sizing:border-box; }
html{ -webkit-print-color-adjust:exact; print-color-adjust:exact; scroll-behavior:smooth;
  -webkit-text-size-adjust:100%; text-size-adjust:100%; }  /* stop iOS inflating wide/scrolling tables */
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--app-bg);
  line-height:1.55; transition:background .25s ease, color .25s ease; }

h1,h2,h3,h4{ font-family:var(--font-head); font-weight:400; color:var(--heading); line-height:1.2; margin:0; }
p{ margin:.5em 0; }
a{ color:var(--green); }
a:hover{ color:var(--green-lt); }
.mono,code{ font-family:var(--font-mono); }
.muted{ color:var(--ink-soft); }
em{ color:var(--ink-soft); }
strong{ color:var(--heading); }

/* anchored headings: jump target clears any sticky chrome */
[id]{ scroll-margin-top:84px; }
.skin-print [id]{ scroll-margin-top:12px; }

/* ── Shared: identity bands / kickers ───────────────────────────────────── */
.band{ display:inline-block; background:var(--navy); color:#fff; font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:4px 12px; margin:2px 0 10px; border-radius:3px; }
.band.green{ background:var(--green); } .band.teal{ background:var(--navy-mid); }
.band.amber{ background:var(--citrine); color:var(--navy); } .band.red{ background:var(--coq); }
.kicker{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green); margin-bottom:4px; }
.chip{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.04em; background:var(--wash);
  border:1px solid var(--line); color:var(--ink-soft); padding:4px 11px; border-radius:999px; }
.chip b{ color:var(--heading); }

/* ── Shared: tags / pills ───────────────────────────────────────────────── */
.tag{ font-weight:700; color:var(--heading); }
.tag.red{ color:var(--coq); } .tag.amber{ color:var(--citrine-deep); } .tag.green{ color:var(--green); }
.pill{ display:inline-block; min-width:54px; text-align:center; font-size:.72rem; font-weight:700;
  letter-spacing:.03em; padding:2px 9px; border-radius:999px; color:#fff; }
.pill.red{ background:var(--coq); } .pill.amber{ background:var(--citrine); color:var(--navy); } .pill.green{ background:var(--green); }
.trend{ font-weight:700; } .trend.up{ color:var(--coq); } .trend.down{ color:var(--green); }
.trend.flat{ color:var(--ink-soft); } .trend.new{ color:var(--heading-2); }

/* ── Shared: callouts ───────────────────────────────────────────────────── */
.callout{ border-left:4px solid var(--green); background:var(--callout-info-bg);
  padding:12px 16px; border-radius:0 var(--radius) var(--radius) 0; margin:14px 0; }
.callout h4{ margin:0 0 4px; }
.callout p:last-child{ margin-bottom:0; }
.callout.warn{ border-left-color:var(--citrine); background:var(--callout-warn-bg); }
.callout.warn .h{ color:var(--citrine-deep); font-weight:700; }
.callout.flag{ border-left-color:var(--coq); background:var(--callout-flag-bg); }
.callout.flag .h{ color:var(--coq); font-weight:700; }
.callout .h{ color:var(--green); font-weight:700; }

/* ── Shared: tables ─────────────────────────────────────────────────────── */
table{ width:100%; border-collapse:collapse; margin:12px 0; font-size:.82rem; }
thead th{ background:var(--navy); color:#fff; text-align:left; font-weight:700; letter-spacing:.02em;
  padding:7px 10px; border:.5pt solid var(--navy); }
tbody td{ padding:6px 10px; border:.5pt solid var(--line); vertical-align:top; }
tbody tr:nth-child(even) td{ background:var(--surface-alt); }
td.c{ text-align:center; } td.r{ text-align:right; font-variant-numeric:tabular-nums; }
td.id{ font-weight:700; color:var(--heading); white-space:nowrap; }
.total td{ background:var(--navy-pale)!important; color:#fff; font-weight:700; }
tfoot td{ font-weight:700; background:var(--callout-info-bg); border-top:2px solid var(--green); }

/* ── Shared: KPI cards ──────────────────────────────────────────────────── */
.kpis{ display:flex; gap:10px; margin:12px 0; flex-wrap:wrap; }
.kpi{ flex:1; min-width:120px; border:1px solid var(--line); border-top:3px solid var(--navy);
  border-radius:var(--radius); padding:10px 12px; background:var(--surface-alt); }
.kpi.red{ border-top-color:var(--coq); } .kpi.amber{ border-top-color:var(--citrine); } .kpi.green{ border-top-color:var(--green); }
.kpi .n{ font-family:var(--font-head); font-size:1.9rem; line-height:1; color:var(--heading); }
.kpi .l{ font-size:.66rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }

/* ── Shared: chart card + chart primitives ──────────────────────────────── */
.chart-card{ border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin:12px 0; background:var(--surface-alt); }
.chart-card .ct{ font-family:var(--font-head); font-size:1rem; color:var(--heading); margin:0 0 8px; }

.ragbar{ display:flex; height:24px; border-radius:4px; overflow:hidden; font-size:.7rem; font-weight:700; }
.ragbar span{ display:flex; align-items:center; justify-content:center; color:#fff; white-space:nowrap; }

.fbar{ display:grid; grid-template-columns:150px 1fr 82px; align-items:center; gap:10px; margin:6px 0; font-size:.78rem; }
.fbar .lbl{ color:var(--ink); } .fbar.big .lbl{ font-weight:700; color:var(--heading); }
.fbar .track{ background:var(--track); border-radius:4px; height:18px; overflow:hidden; }
.fbar.big .track{ height:22px; }
.fbar .track{ display:block; }
.fbar .fill{ display:block; height:100%; border-radius:4px 0 0 4px; background:var(--bar-primary); }
.fbar .fill.green{ background:var(--green); } .fbar .fill.green-lt{ background:var(--green-lt); } .fbar .fill.amber{ background:var(--citrine); } .fbar .fill.dim{ background:var(--bar-dim); }
.fbar .val{ text-align:right; font-variant-numeric:tabular-nums; font-weight:700; color:var(--heading); }

.donut-wrap{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.donut{ width:130px; height:130px; flex:0 0 auto; }
.donut .center-n{ font-family:var(--font-head); font-size:20px; fill:var(--heading); }
.donut .center-l{ font-size:7px; fill:var(--ink-soft); letter-spacing:.08em; }
.legend{ font-size:.78rem; } .legend .row{ display:flex; align-items:center; gap:8px; margin:6px 0; }
.legend .sw{ width:13px; height:13px; border-radius:3px; flex:0 0 auto; }
.legend .lv{ color:var(--ink-soft); }

.ladder{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.tier{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--wash); }
.tier .cap{ padding:12px 14px; color:#fff; } .tier .cap .gb{ font-family:var(--font-mono); font-size:1.4rem; font-weight:700; display:block; }
.tier.t1 .cap{ background:var(--navy-soft); } .tier.t2 .cap{ background:var(--green); } .tier.t3 .cap{ background:var(--navy); }
.tier .bd{ padding:12px 14px; font-size:.8rem; } .tier .bd ul{ margin:0; padding-left:16px; }

.effgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.effcard{ border:1px solid var(--line); border-radius:var(--radius); padding:14px; background:var(--wash); text-align:center; }
.effcard .hw{ font-weight:700; color:var(--heading); margin-bottom:8px; }
.effcard .big{ font-family:var(--font-mono); font-size:1.6rem; font-weight:700; color:var(--green); line-height:1; }
.effcard .unit{ font-size:.68rem; color:var(--ink-soft); }

ul.clean,ol.clean{ margin:8px 0; padding-left:20px; } ul.clean li,ol.clean li{ margin:5px 0; }
ul.clean li::marker{ color:var(--green); } ol.clean li::marker{ color:var(--heading); font-weight:700; }

/* ══════════════════════════════════════════════════════════════════════════
   NAVIGATION  (shared engine; chrome hidden in print)
   ══════════════════════════════════════════════════════════════════════════ */
.theme-toggle{ position:fixed; top:14px; right:16px; z-index:60; font-family:var(--font-mono);
  font-size:.72rem; font-weight:700; letter-spacing:.04em; background:var(--navy); color:#fff;
  border:1px solid rgba(255,255,255,.28); padding:8px 14px; border-radius:999px; cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.32); }
:root[data-theme="dark"] .theme-toggle{ background:var(--citrine); color:var(--navy); }

.progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:61;
  background:linear-gradient(90deg,var(--navy),var(--green)); transition:width .08s linear; }

.backtotop{ position:fixed; bottom:22px; right:18px; z-index:60; width:42px; height:42px; border-radius:50%;
  background:var(--navy); color:#fff; border:none; cursor:pointer; font-size:18px; line-height:1;
  box-shadow:0 3px 12px rgba(0,0,0,.34); opacity:0; pointer-events:none; transition:opacity .25s ease; }
.backtotop.show{ opacity:1; pointer-events:auto; }
:root[data-theme="dark"] .backtotop{ background:var(--citrine); color:var(--navy); }

/* heading hover anchor (copy deep link) */
.anchor{ opacity:0; margin-left:.4em; font-size:.7em; color:var(--green); text-decoration:none; cursor:pointer; }
h1:hover .anchor, h2:hover .anchor, h3:hover .anchor{ opacity:.85; }

/* quick-jump command palette */
.qjump{ position:fixed; inset:0; z-index:80; display:none; background:rgba(7,12,22,.55); }
.qjump.open{ display:block; }
.qjump .box{ max-width:560px; margin:12vh auto 0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:0 18px 60px rgba(0,0,0,.4); overflow:hidden; }
.qjump input{ width:100%; border:0; padding:16px 18px; font-family:var(--font-body); font-size:1rem;
  color:var(--ink); background:var(--surface); outline:none; border-bottom:1px solid var(--line); }
.qjump ul{ list-style:none; margin:0; padding:6px; max-height:46vh; overflow:auto; }
.qjump li{ padding:9px 12px; border-radius:6px; cursor:pointer; font-size:.86rem; color:var(--ink); }
.qjump li.active,.qjump li:hover{ background:var(--wash); color:var(--heading); }
.qjump li small{ float:right; color:var(--ink-soft); font-family:var(--font-mono); font-size:.7rem; }
.qjump .hint{ padding:8px 14px; font-size:.68rem; color:var(--ink-soft); border-top:1px solid var(--line); font-family:var(--font-mono); }

@media print{ .no-print,.theme-toggle,.progress,.backtotop,.qjump,.anchor{ display:none!important; } }

/* ══════════════════════════════════════════════════════════════════════════
   SKIN: PRINT  (paged A4 report - the Portfolio model)
   ══════════════════════════════════════════════════════════════════════════ */
.skin-print{ font-size:9pt; }
.skin-print .page{ width:210mm; min-height:297mm; padding:18mm 16mm 20mm; margin:8mm auto;
  background:var(--surface); box-shadow:0 2px 14px rgba(0,0,0,.35); position:relative; display:flex; flex-direction:column; }
.skin-print .page__body{ flex:1 0 auto; }
.skin-print h1{ font-size:18pt; margin:0 0 2px; } .skin-print h2{ font-size:14pt; color:var(--heading-2); margin:16px 0 4px; }
.skin-print h3{ font-size:11.5pt; margin:12px 0 3px; }
.skin-print .runhead{ display:flex; justify-content:space-between; align-items:center; gap:10px;
  border-bottom:1.5pt solid var(--navy); padding-bottom:5px; margin-bottom:16px; font-size:7.5pt; }
.skin-print .runhead .org{ color:var(--heading); font-weight:700; } .skin-print .runhead .mid{ color:var(--green); }
.skin-print .runhead .logo{ height:14px; width:auto; }
.skin-print .runfoot{ display:flex; justify-content:space-between; align-items:center;
  border-top:1pt solid var(--line); padding-top:6px; margin-top:16px; font-size:7.5pt; color:var(--heading); }
.skin-print .runfoot .conf{ color:var(--citrine-deep); font-weight:700; letter-spacing:.04em; }
.skin-print .cover{ background:linear-gradient(150deg,var(--navy-deep),var(--navy) 55%,var(--navy-mid)); color:#fff; justify-content:center; }
.skin-print .cover *{ color:#fff; }
.skin-print .cover .logo{ height:42px; width:auto; margin-bottom:18px; }
.skin-print .cover .wordmark{ font-family:var(--font-head); font-size:40pt; letter-spacing:5px; margin:0; }
.skin-print .cover .accent{ width:70px; height:3px; background:var(--citrine); margin:16px 0 20px; }
.skin-print .cover-foot{ position:absolute; bottom:18mm; left:16mm; right:16mm; border-top:1px solid rgba(255,255,255,.25);
  padding-top:10px; font-size:8pt; color:#9AA6C4; display:flex; justify-content:space-between; gap:10px; }
.skin-print .toc-print a{ color:var(--ink); text-decoration:none; }
.skin-print .toc-print a:hover{ color:var(--green); }
@media print{
  .skin-print body{ background:none; }
  .skin-print .page{ margin:0; box-shadow:none; width:auto; min-height:auto; }
  .skin-print .page + .page{ page-break-before:always; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SKIN: SCREEN  (scrolling document - the HouseBrain model)
   ══════════════════════════════════════════════════════════════════════════ */
.skin-screen{ font-size:15px; }
.skin-screen h1{ font-size:30px; margin:0 0 6px; } .skin-screen h2{ font-size:23px; color:var(--heading); margin:0 0 14px; }
.skin-screen h3{ font-size:18px; margin:22px 0 8px; } .skin-screen h4{ font-size:15px; margin:14px 0 6px; }
.skin-screen .masthead{ background:linear-gradient(135deg,var(--navy) 0%, var(--navy-deep) 100%); color:#fff; padding:42px 28px 38px; }
.skin-screen .masthead .wrap{ max-width:var(--maxw); margin:0 auto; }
.skin-screen .masthead h1{ color:#fff; }
.skin-screen .masthead .sub{ color:#C4CDE0; font-size:16px; max-width:720px; margin-top:6px; }
.skin-screen .brandline{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--citrine); margin-bottom:16px; }
.skin-screen .brandline .logo{ height:22px; width:auto; }
.skin-screen .meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.skin-screen .meta .chip{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#DBE3F2; }
.skin-screen .meta .chip b{ color:#fff; }

.skin-screen .layout{ max-width:var(--maxw); margin:0 auto; padding:0 22px 60px; display:grid;
  grid-template-columns:220px 1fr; gap:30px; align-items:start; }
.skin-screen .toc{ position:sticky; top:18px; align-self:start; font-size:13px; }
.skin-screen .toc h4{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 10px; }
.skin-screen .toc ol{ list-style:none; margin:0; padding:0; counter-reset:t; border-left:2px solid var(--line); }
.skin-screen .toc li{ counter-increment:t; }
.skin-screen .toc a{ display:block; text-decoration:none; color:var(--ink-soft); padding:5px 0 5px 14px;
  margin-left:-2px; border-left:2px solid transparent; }
.skin-screen .toc a::before{ content:counter(t,decimal-leading-zero); font-family:var(--font-mono); font-size:11px;
  color:var(--green); margin-right:8px; }
.skin-screen .toc a:hover{ color:var(--heading); }
.skin-screen .toc a.active{ color:var(--heading); font-weight:700; border-left-color:var(--green); }
.skin-screen .content{ min-width:0; }
.skin-screen section{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 26px; margin-bottom:18px; box-shadow:var(--shadow); }
.skin-screen .toc-card{ display:none; }   /* sidebar handles nav on screen */
.skin-screen footer{ max-width:var(--maxw); margin:0 auto; padding:24px 22px 50px; color:var(--ink-soft); font-size:12.5px; }
.skin-screen footer .rule{ height:2px; background:linear-gradient(90deg,var(--navy),var(--green)); border-radius:2px; margin-bottom:14px; }

/* ── Mobile / phone review (both skins) ─────────────────────────────────── */
@media (max-width:760px){
  /* screen skin: single column, tighter chrome */
  .skin-screen .layout{ grid-template-columns:1fr; gap:18px; }
  .skin-screen .toc{ position:static; border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; background:var(--surface); margin-bottom:4px; }
  .skin-screen .masthead{ padding:40px 18px 26px; }
  .skin-screen .brandline{ padding-right:96px; }   /* clear the fixed toggle */
  .skin-screen .masthead h1{ font-size:24px; }
  .skin-screen .masthead .sub{ font-size:14px; }
  .skin-screen section{ padding:18px 16px; }
  .skin-screen h2{ font-size:20px; }

  /* print skin reflows to full screen width (no fixed A4) for phone reading */
  .skin-print .page{ width:auto; min-height:0; margin:0 0 12px; padding:50px 16px 20px; }  /* top pad clears the fixed toggle */
  .skin-print .cover .wordmark{ font-size:30pt; letter-spacing:2px; }
  .skin-print .cover .logo{ height:34px; }
  .skin-print .cover-foot{ position:static; left:auto; right:auto; bottom:auto; margin-top:24px; flex-direction:column; gap:4px; align-items:flex-start; }
  .skin-print .cover .page__body > p, .skin-print .cover .page__body > div{ overflow-wrap:break-word; }
  .skin-print .cover p[style*="26pt"], .skin-print .cover p[style*="24pt"]{ font-size:18pt !important; }

  /* shared: dense layouts stack, charts tighten */
  .kpis{ gap:8px; }
  .kpi{ flex:1 1 calc(50% - 8px); min-width:0; }
  .ladder,.effgrid{ grid-template-columns:1fr; }
  .fbar{ grid-template-columns:90px 1fr 64px; gap:8px; font-size:.74rem; }
  .donut-wrap{ gap:14px; }

  /* wide tables scroll sideways instead of crushing; column alignment preserved */
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }

  /* comfortable tap targets for fixed chrome */
  .theme-toggle{ top:10px; right:10px; padding:10px 14px; }
  .backtotop{ width:46px; height:46px; bottom:16px; right:14px; }
  .qjump .box{ margin:8vh 12px 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   REVIEW / COMMENT LAYER  (screen only; stripped in print)
   ══════════════════════════════════════════════════════════════════════════ */
.review-toggle{ position:fixed; top:14px; right:104px; z-index:60; font-family:var(--font-mono);
  font-size:.72rem; font-weight:700; letter-spacing:.04em; background:var(--surface); color:var(--heading);
  border:1px solid var(--line); padding:8px 14px; border-radius:999px; cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.18); }
.review-toggle.active{ background:var(--green); color:#fff; border-color:var(--green); }

.rv-add{ display:none; margin-left:.5em; font-family:var(--font-body); font-size:.62rem; font-weight:700;
  color:var(--green); background:var(--callout-info-bg); border:1px solid var(--green); border-radius:999px;
  padding:2px 9px; cursor:pointer; vertical-align:middle; }
.review-on .rv-add{ display:inline-block; }
.review-on .rv-has{ box-shadow:inset 3px 0 0 var(--citrine); }

.rv-composer{ margin:10px 0; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--surface-alt); }
.rv-composer textarea{ width:100%; box-sizing:border-box; font-family:var(--font-body); font-size:.85rem; padding:8px;
  border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); resize:vertical; }
.rv-crow{ display:flex; gap:8px; margin-top:8px; align-items:center; }
.rv-crow select{ font-family:var(--font-body); padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); }

.rv-act{ font-family:var(--font-body); font-size:.78rem; font-weight:700; padding:7px 12px; border-radius:6px;
  border:1px solid var(--line); background:var(--surface); color:var(--heading); cursor:pointer; }
.rv-act:hover{ background:var(--wash); }

.rv-panel{ position:fixed; top:0; right:0; bottom:0; width:330px; max-width:88vw; z-index:70; background:var(--surface);
  border-left:1px solid var(--line); box-shadow:-6px 0 24px rgba(0,0,0,.25); transform:translateX(105%);
  transition:transform .2s ease; display:flex; flex-direction:column; }
.rv-panel.open{ transform:none; }
.rv-phead{ font-family:var(--font-head); font-size:1.1rem; color:var(--heading); padding:14px 16px;
  border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.rv-x{ background:none; border:none; font-size:20px; line-height:1; color:var(--ink-soft); cursor:pointer; }
.rv-list{ flex:1; overflow:auto; padding:10px 14px; }
.rv-empty{ color:var(--ink-soft); font-size:.82rem; }
.rv-sec{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin:12px 0 6px; }
.rv-item{ display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  margin-bottom:8px; background:var(--surface-alt); font-size:.82rem; }
.rv-tag{ flex:0 0 auto; width:18px; height:18px; border-radius:50%; color:#fff; font-size:.6rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; background:var(--navy-soft); }
.rv-item.rv-question .rv-tag{ background:var(--coq); }
.rv-item.rv-comment .rv-tag{ background:var(--green); }
.rv-txt{ flex:1; color:var(--ink); white-space:pre-wrap; word-break:break-word; }
.rv-jump{ text-decoration:none; color:var(--green); flex:0 0 auto; }
.rv-del{ background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:15px; line-height:1; flex:0 0 auto; }
.rv-pfoot{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); flex-wrap:wrap; }
.rv-pfoot .rv-act{ flex:1 1 auto; }

@media (max-width:760px){
  .review-toggle{ top:54px; right:10px; }
  .rv-panel{ width:100%; max-width:100%; }
}
@media print{ .review-toggle,.rv-panel,.rv-add,.rv-composer{ display:none!important; } .rv-has{ box-shadow:none!important; } }