:root{
  --bg:#0e0e0c;
  --surface:#161612;
  --surface-alt:#1a1a16;
  --border:#2e2a20;
  --border-light:#252218;
  --surface-c:#161612;
  --border-c:#2e2a20;
  --surface-d:#161612;
  --border-d:#2e2a20;
  --surface-e:#0f0f0e;
  --border-e:#252218;
  --text:#F1EFE8;
  --text-muted:#D2D0C8;
  --text-dim:#A8A6A0;
  --accent:#FAC775;
  --heat:#FF8C1A; /* severity heat: Material only. Not red (collides with a red subject), not gold. */
  --accent-dim:rgba(250,199,117,0.12);
  --teal:#1D9E75;
  --teal-dim:rgba(29,158,117,0.12);
  --red:#c62828;
  --red-dim:rgba(198,40,40,0.12);
  --purple:#7F77DD;
  --purple-dim:rgba(127,119,221,0.12);
  --blue:#7EB8D4;
  --blue-dim:rgba(126,184,212,0.12);
  --sky-aqua:#0ad2ff;
  --electric-sapphire:#2962ff;
  --violet-ray:#9500ff;
  --aquamarine:#0fffdb;
  --yellow:#FFE000;
  --chartreuse:#b4e600;
  --hot-fuchsia:#ff0059;
  --c-subject:#FAC775;
  --c-primary:#0ad2ff;
  --c-secondary:#b4e600;
  --c-analogue:#0fffdb;
  --gap:64px;
  --gap-sm:32px;
  --gap-xs:16px;
  --border-neutral:rgba(255,255,255,0.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg)}
body{background:var(--bg);color:var(--text);font-family:'Barlow',sans-serif;font-weight:300;font-size:15px;line-height:1.75;min-height:100vh;padding-bottom:80px}

/* ── GLOBAL LINKS ── */
a{color:var(--text-muted);text-decoration:underline;text-decoration-color:rgba(177,175,169,0.25);text-underline-offset:3px}
a:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* ── COVER ── */
.cover{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;padding:64px;padding-bottom:0;border-bottom:1px solid var(--border)}
.cover-wordmark{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--sky-aqua);display:flex;align-items:center;gap:16px}
.cover-wordmark::after{content:"";flex:1;height:1px;background:var(--border)}
.cover-main{display:flex;flex-direction:column;justify-content:center;padding:72px 0 40px}
.cover-logo-wrap{margin-bottom:20px}
.cover-logo{display:block;width:clamp(220px,35vw,480px);height:auto;max-height:160px;object-fit:contain;object-position:left center}
.cover-brand{font-family:'Barlow Condensed',sans-serif;font-size:clamp(64px,9vw,120px);font-weight:800;line-height:.9;letter-spacing:-.01em;text-transform:uppercase;color:var(--text)}
.cover-brand .w1{color:var(--aquamarine)}
.cover-focus{margin-top:32px;margin-bottom:48px}
.cover-focus-label{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim);display:block;margin-bottom:10px}
.cover-focus-question{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(20px,2.4vw,28px);font-weight:400;color:var(--text);line-height:1.45;max-width:680px}
.cover-focus-question::before{content:"\201C"}
.cover-focus-question::after{content:"\201D"}
.cover-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);max-width:640px;margin-top:40px}
.meta-cell{background:var(--surface);padding:16px 20px}
.meta-label{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;display:block;margin-bottom:6px}
.meta-value{font-family:'Barlow',sans-serif;font-size:13px;font-weight:400;color:var(--text);line-height:1.4}
.confidence-boxes{display:flex;gap:4px;margin-top:8px}
.conf-box{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border:1px solid rgba(255,255,255,0.12);color:var(--text-dim);background:transparent}
.conf-box.active-high{background:rgba(15,255,219,0.1);border-color:rgba(15,255,219,0.4);color:var(--aquamarine)}
.conf-box.active-mod{background:rgba(255,224,0,0.1);border-color:rgba(255,224,0,0.4);color:var(--yellow)}
.conf-box.active-low{background:rgba(255,0,89,0.1);border-color:rgba(255,0,89,0.4);color:#ff0059}
.confidence-block{max-width:640px;margin-top:1px;background:var(--surface);border:1px solid var(--border);border-top:none;padding:16px 20px}
.confidence-block p{font-family:'Barlow',sans-serif;font-size:13px;font-weight:300;color:var(--text-muted);line-height:1.7}
.cover-footer{position:relative;margin-top:auto}
.cover-footer-disclaimer{padding:20px 0;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:48px}
.disclaimer-col{flex:1;font-family:'Barlow',sans-serif;font-size:10px;font-weight:300;color:var(--text-dim);line-height:1.7;display:flex;flex-direction:column;justify-content:flex-end}
.disclaimer-col strong{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);display:block;margin-bottom:6px;font-style:normal}
.cover-page-footer{padding:0 64px}
.cover-footer-cassie{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:16px 0;background:var(--surface);border-top:1px solid var(--border);margin:0 -64px;padding-left:64px;padding-right:64px;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--aquamarine)}
.cover-footer-confidential{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}

/* ── LAYOUT ── */
.brief-body{max-width:980px;margin:0 auto;padding:80px 64px}

/* ── SECTIONS ── */
.page{padding:var(--gap) 0;border-bottom:1px solid var(--border)}
.page:last-of-type{border-bottom:none}

/* Section eyebrow — Barlow Condensed, sky-aqua */
.section-eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:var(--aquamarine);margin-bottom:12px
}

/* Section title — Barlow Condensed 800, near-white */
.section-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(32px,3.5vw,52px);font-weight:800;
  line-height:.92;letter-spacing:-.01em;text-transform:uppercase;
  color:var(--text);margin-bottom:var(--gap-sm)
}

.section-body{display:flex;flex-direction:column;gap:20px}

/* ── PROSE ── */
.prose-para{font-size:15px;color:var(--text-muted);line-height:1.75}
.prose-takeaway{font-size:15px;color:var(--text);line-height:1.75;border-left:3px solid var(--border-neutral);padding:16px 20px;background:var(--purple-dim)}
.reality-gap-title{margin-top:var(--gap-sm);font-family:'Barlow Condensed',sans-serif;font-size:clamp(32px,3.5vw,52px);font-weight:800;line-height:.92;letter-spacing:-.01em;text-transform:uppercase;color:var(--text);margin-bottom:var(--gap-sm)}

/* ── SIGNAL TAGS — block, left-aligned, own line ── */
.sig{
  display:block;
  font-family:'Barlow Condensed',sans-serif;
  font-size:8px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:2px 6px;line-height:1.4;border-radius:2px;
  margin-top:8px;margin-left:0;
  white-space:nowrap;
  width:fit-content;
}
.sig-obs{background:none;border:none;color:var(--teal);border-left:3px solid rgba(29,158,117,0.4);padding-left:12px}
.sig-inf{background:none;border:none;color:var(--accent);border-left:3px solid rgba(250,199,117,0.4);padding-left:12px}
.sig-hyp{background:none;border:none;color:var(--blue);border-left:3px solid rgba(126,184,212,0.4);padding-left:12px}
.sig-tak{background:var(--purple-dim);color:var(--purple);border:1px solid rgba(127,119,221,0.28)}

/* ── SIGNAL TAGS v2 — data-attribute variant ──
   Sonnet emits <p class="prose-para" data-ep="o|i|h|t">...</p> and CSS
   renders the pill via ::after. Replaces the earlier inline
   <span class="sig sig-*">Label</span> pattern for new reports. Old
   reports continue to render via the .sig rules above. */
p[data-ep]::after {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 6px;
  line-height: 1.4;
  border-radius: 2px;
  margin-top: 8px;
  margin-left: 0;
  white-space: nowrap;
  width: fit-content;
}
p[data-ep="o"]::after {
  content: "Observed";
  color: var(--teal);
  border-left: 3px solid rgba(29,158,117,0.4);
  padding-left: 12px;
}
p[data-ep="i"]::after {
  content: "Inferred";
  color: var(--accent);
  border-left: 3px solid rgba(250,199,117,0.4);
  padding-left: 12px;
}
p[data-ep="h"]::after {
  content: "Hypothesis";
  color: var(--blue);
  border-left: 3px solid rgba(126,184,212,0.4);
  padding-left: 12px;
}
p[data-ep="t"]::after {
  content: "Takeaway";
  background: var(--purple-dim);
  color: var(--purple);
  border: 1px solid rgba(127,119,221,0.28);
}
.flag{
  display:inline-flex;align-items:center;gap:4px;
  font-family:'Barlow Condensed',sans-serif;font-size:7px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:1px 5px;line-height:1.4;margin-left:6px;
  background:rgba(216,90,48,0.15);color:var(--red);border:1px solid rgba(216,90,48,0.4);
  vertical-align:middle;position:relative;top:-1px
}

/* ── STAT BOXES ── */
.highlight-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:var(--gap-sm)}
.stat-box{background:var(--surface);padding:20px 24px}
.stat-num{
  font-family:'Barlow Condensed',sans-serif;
  font-size:36px;font-weight:800;line-height:1;margin-bottom:6px;
  color:var(--aquamarine);
}
.stat-num:nth-child(1){color:var(--aquamarine)}
.stat-box:nth-child(2) .stat-num{color:var(--yellow)}
.stat-box:nth-child(3) .stat-num{color:var(--sky-aqua)}
.stat-box:nth-child(4) .stat-num{color:var(--violet-ray)}
.stat-desc{font-family:'Barlow Condensed',sans-serif;font-size:11px;color:var(--text-dim);line-height:1.5;letter-spacing:.02em}

/* ── TIMELINE ── */
.timeline{margin-bottom:var(--gap-sm)}
.timeline-label{font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);margin-bottom:24px;display:block}
.timeline-items{display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.timeline-item{display:flex;flex-direction:column;padding-right:0;position:relative}
.timeline-connector{position:absolute;top:16px;left:7px;right:0;height:2px;z-index:0}
.timeline-item:last-child .timeline-connector{display:none}
.timeline-dot-wrap{height:36px;display:flex;align-items:center;margin-bottom:10px;position:relative;z-index:1}
.timeline-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:2px solid transparent}
.timeline-dot.done{background:var(--aquamarine);border-color:var(--aquamarine)}
.timeline-dot.verify{background:var(--red);border-color:var(--red)}
.timeline-dot.pending{background:transparent;border-color:var(--text-dim)}
.timeline-date{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:.06em;margin-bottom:5px;font-weight:400}
.timeline-date.done{color:var(--aquamarine)}.timeline-date.verify{color:var(--red)}.timeline-date.pending{color:var(--text-dim)}
.timeline-event{font-size:12px;color:var(--text-muted);line-height:1.5;padding-right:12px}

/* ── MAP ── */
.map-wrap{margin-bottom:var(--gap-sm)}
.map-label{font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);margin-bottom:12px;display:block}
#brand-map{height:280px;border:1px solid var(--border);border-radius:0}
.map-fallback{background:var(--surface);border:1px solid var(--border);height:200px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:11px;color:var(--text-dim);letter-spacing:.05em}

/* ── SIGNAL GRID (S03, S04) ── */
.sig-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:20px}
.sig-cell{background:var(--surface);padding:20px 24px;display:flex;flex-direction:column;gap:8px}
.sig-cell-label{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}

/* ── S03 LAYERED STRUCTURE ── */
.s03-layer-header{display:flex;align-items:center;gap:14px;margin-bottom:10px;margin-top:24px}
.s03-layer-header:first-child{margin-top:0}
.s03-layer-badge{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:3px 10px;border:1px solid;white-space:nowrap}
.s03-badge-claim{color:var(--aquamarine);border-color:rgba(15,255,219,0.3);background:rgba(15,255,219,0.05)}
.s03-badge-expression{color:var(--violet-ray);border-color:rgba(149,0,255,0.3);background:rgba(149,0,255,0.05)}
.s03-layer-rule{flex:1;height:1px;background:var(--border)}
.s03-claim-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border-c);border:1px solid var(--border-c)}
.s03-expr-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border-d);border:1px solid var(--border-d)}
.s03-cell-claim{background:var(--surface-c);padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.s03-cell-expr{background:var(--surface-d);padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.s03-label-claim{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--aquamarine)}
.s03-label-expr{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--violet-ray)}
.sig-grid a{color:var(--text-muted);text-decoration:underline;text-decoration-color:rgba(177,175,169,0.25);text-underline-offset:2px}
.sig-grid a:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* ── PROMISE GAP (S04) ── */
.promise-gap{margin-bottom:20px}
.promise-gap-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(18px,2vw,24px);font-weight:400;color:var(--text);margin-bottom:16px;line-height:1.2}
.promise-gap-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:1px;background:var(--border);border:1px solid var(--border);align-items:stretch}
.promise-gap-cell{background:var(--surface);padding:20px 24px;display:flex;flex-direction:column;gap:8px}
.promise-gap-vs{background:var(--bg);display:flex;align-items:center;justify-content:center;padding:0 24px;font-family:'Barlow Condensed',sans-serif;font-size:clamp(56px,7vw,108px);font-weight:800;letter-spacing:-.02em;line-height:.9;color:var(--accent);text-transform:uppercase}

/* ── COMPETITORS ── */
.competitor-block{padding:20px 0;border-bottom:1px solid var(--border-light)}
.competitor-block:last-child{border-bottom:none}
.competitor-name{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;letter-spacing:.04em;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:12px}
.competitor-tier{
  display:inline-block;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:500;
  padding:2px 7px;
  border-radius:2px;
  margin-left:10px;
  vertical-align:2px;
  line-height:1.4;
}
.competitor-tier.tier-primary{
  color:var(--accent);
  background:var(--accent-dim);
}
.competitor-tier.tier-secondary{
  color:var(--text-muted);
  background:rgba(180,178,169,0.08);
}
.competitor-tier.tier-peripheral{
  color:var(--text-dim);
  background:transparent;
  border:1px solid var(--border);
  padding:1px 6px;
}

/* ── ANALOGUES ── */
.analogues-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-top:var(--gap-xs)}
.analogue-item{background:var(--surface);padding:24px}
.analogue-type{font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;display:block}
.analogue-close .analogue-type{color:var(--teal)}
.analogue-cautionary .analogue-type{color:var(--red)}
.analogue-aspirational .analogue-type{color:var(--accent)}
.analogue-name{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;color:var(--text);margin-bottom:10px;display:block}
.analogue-desc{font-size:13px;color:var(--text-muted);line-height:1.6}

/* ── TENSIONS ── */
.tensions-grid{display:flex;flex-direction:column;gap:24px;margin-top:var(--gap-xs)}
.tension-item{padding:28px 0;border-bottom:1px solid var(--border-light)}
.tension-poles{display:flex;align-items:center;gap:20px;margin-bottom:14px}
.tension-a{font-family:'Barlow Condensed',sans-serif;font-size:clamp(18px,2.2vw,26px);font-weight:800;color:var(--text);text-align:right;flex:1;line-height:1.1;text-transform:uppercase;letter-spacing:-.01em}
.tension-vs{font-family:'Barlow Condensed',sans-serif;font-size:9px;color:var(--text-dim);letter-spacing:.2em;text-transform:uppercase;flex-shrink:0;padding:0 4px}
.tension-b{font-family:'Barlow Condensed',sans-serif;font-size:clamp(18px,2.2vw,26px);font-weight:800;color:var(--text);text-align:left;flex:1;line-height:1.1;text-transform:uppercase;letter-spacing:-.01em}
/* Cycle pole colours across cards */
.tension-item:nth-child(1) .tension-a{color:var(--accent)}
.tension-item:nth-child(1) .tension-b{color:var(--sky-aqua)}
.tension-item:nth-child(2) .tension-a{color:var(--aquamarine)}
.tension-item:nth-child(2) .tension-b{color:var(--purple)}
.tension-item:nth-child(3) .tension-a{color:var(--text-muted)}
.tension-item:nth-child(3) .tension-b{color:var(--blue)}
.tension-item:nth-child(4) .tension-a{color:var(--accent)}
.tension-item:nth-child(4) .tension-b{color:var(--teal)}
.tension-desc{font-size:13px;color:var(--text-muted);line-height:1.65;border-top:1px solid var(--border-light);padding-top:14px;text-align:center;max-width:600px;margin-left:auto;margin-right:auto}

/* ── ASSUMPTIONS ── */
.assumptions-list{display:flex;flex-direction:column;gap:var(--gap-xs);margin-top:var(--gap-xs)}
.assumption-item{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border-neutral);padding:16px 20px;font-size:14px;color:var(--text-muted);line-height:1.6}

/* ── STAKES ── */
.stakes-list{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);margin-top:var(--gap-xs)}
.stake-item{background:var(--surface);padding:20px 24px;display:grid;grid-template-columns:4px 1fr;gap:20px;align-items:stretch}
.stake-bar{border-radius:2px;align-self:stretch}
.stake-bar.high{background:var(--red);opacity:1}
.stake-bar.med{background:var(--accent);opacity:0.85}
.stake-bar.low{background:var(--chartreuse);opacity:0.8}
.stake-text{font-size:14px;color:var(--text-muted);line-height:1.6}
.stake-text strong{color:var(--text);font-weight:500}

/* ── GAPS ── */
.gaps-list{list-style:none;display:flex;flex-direction:column;gap:var(--gap-xs);margin-top:var(--gap-xs)}
.gaps-list li{display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:14px;color:var(--text);line-height:1.6}
.gaps-list li::before{content:"—";font-family:'Barlow Condensed',sans-serif;color:var(--accent);padding-top:2px}

/* ── DISCLAIMER ── */
.disclaimer{margin-top:var(--gap);border:1px solid var(--border);background:var(--surface);overflow:hidden}
.disclaimer-body{padding:var(--gap-sm)}
.disclaimer-body p{font-size:13px;color:var(--text-muted);line-height:1.75;margin-bottom:10px}
.disclaimer-body p:last-child{margin-bottom:0}
.disclaimer-nfa{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-top:16px;padding-top:16px;border-top:1px solid var(--border-light)}
.help-link{display:flex;align-items:center;justify-content:space-between;padding:16px var(--gap-sm);border-top:1px solid var(--border);background:var(--bg)}
.help-link-text{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);text-decoration:none;cursor:default}
.help-link-soon{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border:1px solid rgba(10,210,255,0.35);color:var(--sky-aqua);background:rgba(10,210,255,0.06)}

/* ── BOTTOM BAR ── */
.bottom-bar{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);padding:14px 64px;display:flex;justify-content:space-between;align-items:center;z-index:100}
.btn-download{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#F1EFE8;background:var(--violet-ray);border:none;padding:13px 32px;text-decoration:none;transition:opacity 0.15s;cursor:pointer}
.btn-download:hover{opacity:.85;background:var(--violet-ray)}
/* Dark-mode PDF — visual twin of the dark report itself */
.btn-download-pdf {
  background: var(--surface);
  color: var(--aquamarine);
  border: 1px solid var(--border);
}
.btn-download-pdf:hover {
  opacity: 1;
  background: var(--bg);
  color: var(--aquamarine);
  border-color: var(--aquamarine);
}
/* Light-mode PDF — visual twin of the cream print palette */
.btn-download-pdf-light {
  background: #F1EFE8;
  color: #0e0e0c;
  border: 1px solid rgba(0,0,0,0.15);
}
.btn-download-pdf-light:hover {
  opacity: 1;
  background: #ffffff;
  color: #0e0e0c;
  border-color: rgba(0,0,0,0.35);
}
.btn-download.loading{opacity:0.6;pointer-events:none;cursor:wait}

.btn-new{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);border:1px solid var(--border);padding:10px 24px;text-decoration:none;transition:border-color 0.2s}
.btn-new:hover{border-color:var(--text-muted);color:var(--text-muted)}
.print-note{font-family:'Barlow Condensed',sans-serif;font-size:9px;color:var(--text-dim);letter-spacing:.05em}

/* PRINT — see end of style block. */

/* ── RESPONSIVE ── */
@media(max-width:768px){
  /* Prevent any horizontal overflow */
  html,body{overflow-x:hidden}
  .cover{padding:24px;padding-bottom:0;min-height:unset}
  .cover-main{padding:32px 0 20px}
  .brief-body{padding:40px 20px}
  .cover-meta{grid-template-columns:1fr}
  /* Cover footer: stack and shorten */
  .cover-footer-disclaimer{flex-direction:column;gap:12px}
  .cover-footer-cassie{flex-direction:column;gap:6px;padding-left:24px;padding-right:24px;margin:0 -24px;font-size:10px;line-height:1.5}
  .cover-footer-confidential{font-size:8px}
  /* Stat boxes */
  .highlight-stat{grid-template-columns:1fr 1fr}
  /* Timeline */
  .timeline-items{grid-template-columns:1fr!important;gap:0}
  .timeline-connector{display:none}
  .timeline-item{position:relative;padding-left:28px;padding-bottom:24px;border-left:2px solid var(--border);margin-left:4px}
  .timeline-item:last-child{border-left:2px solid transparent}
  .timeline-dot-wrap{position:absolute;left:-5px;margin-bottom:0}
  /* All multi-column grids: single column */
  .analogues-grid{grid-template-columns:1fr}
  .tensions-grid{grid-template-columns:1fr}
  .sig-grid{grid-template-columns:1fr}
  .promise-gap-grid{grid-template-columns:1fr}
  .promise-gap-vs{padding:8px 0;font-size:clamp(40px,10vw,56px)}
  .s03-claim-grid{grid-template-columns:1fr}
  .s03-expr-grid{grid-template-columns:1fr}
  /* Map: full width, shorter height */
  .landscape-map{margin-left:-20px;margin-right:-20px;width:calc(100% + 40px)}
  .lm-chart{height:320px}
  .lm-rationale{grid-template-columns:1fr}
  .lm-notes{grid-template-columns:1fr}
  /* Bottom bar */
  .bottom-bar{padding:14px 20px;flex-wrap:wrap;gap:8px}
  /* Reality gap: space above title */
  .reality-gap-title{margin-top:40px}
}

/* === LANDSCAPE MAP === */
.landscape-map { margin-top: 40px; }
.map-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--aquamarine); margin-bottom: 12px; }
.lm-chart-wrap { position: relative; margin: 0 -24px; }
.lm-chart { width: 100%; height: 580px; }
@media(max-width:768px){ .lm-chart { height: 440px; } }
.lm-overlay { position: absolute; top: 0; left: 0; pointer-events: none; }
.lm-legend { display: flex; gap: 20px; flex-wrap: wrap; margin: 14px 0 10px; align-items: center; justify-content: center; }
.lm-leg { display: flex; align-items: center; gap: 7px; font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.lm-leg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.lm-legend-z { display: flex; align-items: center; justify-content: center; margin: 0 0 26px; padding: 11px 16px; background: var(--surface); border: 1px solid var(--border); width: 100%; }
.lm-z-label { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-right: 16px; white-space: nowrap; }
.lm-z-items { display: flex; align-items: center; gap: 16px; }
.lm-z-item { display: flex; align-items: center; gap: 8px; font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: .10em; text-transform: uppercase; color: var(--text-muted); }
.lm-z-circle { border-radius: 50%; background: transparent; border: 1.5px solid rgba(255,255,255,0.35); flex-shrink: 0; }
.lm-rationale { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; margin-top: 2px; }
@media(max-width:700px){ .lm-rationale { grid-template-columns: 1fr 1fr; } }
@media(max-width:440px){ .lm-rationale { grid-template-columns: 1fr; } }
.lm-rat { background: var(--surface); border: 1px solid var(--border); padding: 20px 22px; }
.lm-rat-label { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: 8px; }
.lm-rat-axis { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 10px; line-height: 1.2; text-transform: uppercase; }
.lm-rat-body { font-size: 12px; color: var(--text-muted); line-height: 1.7; }
.lm-notes { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
@media(max-width:600px){ .lm-notes { grid-template-columns: 1fr; } }
.lm-note { background: var(--surface); border: 1px solid var(--border); padding: 16px 20px; }
.lm-note-name { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.lm-note-body { font-size: 12px; color: var(--text-muted); line-height: 1.65; }
.lm-tooltip { position: fixed; background: #151515; border: 1px solid #444; padding: 14px 18px; pointer-events: none; z-index: 200; max-width: 280px; display: none; }
.lm-tt-name { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; letter-spacing: .04em; }
.lm-tt-type { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.lm-tt-z { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: .08em; color: #666; margin-bottom: 10px; }
.lm-tt-desc { font-size: 12px; color: #bbb; line-height: 1.65; font-family: 'Barlow', sans-serif; font-weight: 300; }

/* PDF-only variants — hidden on screen, shown in print via the @media print block. */
.lm-pdf-only { display: none; }

/* ── S08 CATEGORY BANDS ──
   Threats grouped by category, each category as a band with its own
   accent colour. Severity dots on individual threats carry the high/
   med/low signal. Band accent cycles through sky-aqua, accent, aqua,
   purple, chartreuse for up to 5 bands. */
.threat-bands { display: flex; flex-direction: column; gap: 8px; margin-top: var(--gap-xs); }
.threat-band { border: 1px solid var(--border); background: var(--surface); padding: 18px 24px; }
.threat-band-header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.threat-band-name { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--text); }
.threat-band-rule { flex: 1; height: 1px; background: var(--border); }
.threat-list { display: flex; flex-direction: column; gap: 12px; }
.threat-item { display: grid; grid-template-columns: 14px 1fr; gap: 14px; align-items: start; }
.threat-sev-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
.threat-sev-dot.high { background: var(--hot-fuchsia); }
.threat-sev-dot.med { background: var(--yellow); }
.threat-sev-dot.low { background: var(--aquamarine); }
.threat-body { font-size: 14px; line-height: 1.65; color: var(--text-muted); }
.threat-body strong { color: var(--text); font-weight: 500; }
.threat-band.band-1 .threat-band-name { color: var(--sky-aqua); }
.threat-band.band-2 .threat-band-name { color: var(--accent); }
.threat-band.band-3 .threat-band-name { color: var(--aquamarine); }
.threat-band.band-4 .threat-band-name { color: var(--purple); }
.threat-band.band-5 .threat-band-name { color: var(--chartreuse); }

/* ── S09 STAKES LEDGER ──
   Two-column: finding label + magnitude on the left, commercial
   exposure on the right. Material/Significant/Watch map to red/
   amber/chartreuse matching the stake-bar severity convention. */
.stakes-ledger { border: 1px solid var(--border); background: var(--surface); margin-top: var(--gap-xs); }
.stakes-ledger-row { display: grid; grid-template-columns: 280px 1fr; border-bottom: 1px solid var(--border); }
.stakes-ledger-row:last-child { border-bottom: none; }
.stakes-label-cell { padding: 22px 24px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.stakes-finding { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text); line-height: 1.2; }
.stakes-magnitude { display: inline-flex; align-items: center; gap: 7px; font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; width: fit-content; }
.stakes-mag-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.stakes-magnitude.material { color: var(--hot-fuchsia); }
.stakes-magnitude.material .stakes-mag-dot { background: var(--hot-fuchsia); }
.stakes-magnitude.significant { color: var(--yellow); }
.stakes-magnitude.significant .stakes-mag-dot { background: var(--yellow); }
.stakes-magnitude.watch { color: var(--aquamarine); }
.stakes-magnitude.watch .stakes-mag-dot { background: var(--aquamarine); }
.stakes-exposure-cell { padding: 22px 26px; font-size: 14px; line-height: 1.7; color: var(--text-muted); }

/* ── S10 RESEARCH AGENDA ──
   Numbered priority-tagged cards. Critical/Important/Supporting
   map to red/amber/text-dim. Grid of 3 at desktop, single column
   at mobile. */
.agenda-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: var(--gap-xs); }
.agenda-card { background: var(--surface); border: 1px solid var(--border); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.agenda-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.agenda-num { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 800; line-height: 1; color: var(--text-dim); }
.agenda-priority { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.agenda-priority.critical { color: var(--hot-fuchsia); }
.agenda-priority.important { color: var(--yellow); }
.agenda-priority.supporting { color: var(--text-dim); }
.agenda-card.critical .agenda-num { color: var(--hot-fuchsia); }
.agenda-card.important .agenda-num { color: var(--yellow); }
/* Three-band content: topic eyebrow, question as hero, supporting context */
.agenda-topic {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 4px;
}
.agenda-question {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  letter-spacing: -.005em;
}
.agenda-context {
  font-size: 13px; line-height: 1.6;
  color: var(--text-muted);
}
/* Legacy single-line card body — retained so pre-refresh stored reports still render */
.agenda-card-body { font-size: 13px; line-height: 1.65; color: var(--text-muted); }
.agenda-card-body strong { color: var(--text); font-weight: 500; }

/* Responsive collapses for S09 / S10 */
@media(max-width:768px) {
  .agenda-grid { grid-template-columns: 1fr; }
  .stakes-ledger-row { grid-template-columns: 1fr; }
  .stakes-label-cell { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ── PRINT ──
   Placed LAST in the stylesheet so its !important rules win against the
   (max-width:768px) mobile block, which also fires in Chrome's print
   viewport (A4 content ~703px wide). Without this ordering, the mobile
   stack layout would override the print grid restorations below. */
@media print {
  @page { size: A4; margin: 12mm; }

  /* Hide UI-only elements */
  .bottom-bar,
  .btn-download { display: none !important; }

  body { padding-bottom: 0 !important; --gap: 22px !important; --gap-sm: 16px !important; font-size: 12.5px !important; line-height: 1.6 !important; }

  /* Page-one wrapper — holds cover + timeline + notice ribbon on page 1.
     min-height forces page 1 to fill an A4 sheet; page-break-after pushes
     Section 01 architecture + prose onto page 2.
     flex + margin-top:auto on cover-page-footer pins the ribbon to bottom. */
  .page-one {
    page-break-after: always !important;
    break-after: page !important;
  }
  .cover-page-footer {
    margin-top: auto !important;
    padding: 0 36px !important;
  }

  /* Cover — fit within page-one */
  .cover {
    min-height: 0 !important;
    padding: 28px 36px !important;
    padding-bottom: 0 !important;
  }
  .cover-main { padding: 24px 0 20px !important; }
  .cover-brand { font-size: 48px !important; }
  .cover-focus { margin-top: 14px !important; margin-bottom: 20px !important; }
  .cover-meta { margin-top: 20px !important; grid-template-columns: repeat(3, 1fr) !important; }
  .cover-footer-disclaimer { flex-direction: row !important; gap: 48px !important; }
  .cover-footer-cassie {
    flex-direction: row !important;
    margin: 0 -36px !important;
    padding-left: 36px !important;
    padding-right: 36px !important;
    font-size: 12px !important;
  }
  .cover-footer-confidential { font-size: 9px !important; }

  /* Body layout */
  .brief-body { padding: 14px 28px !important; max-width: none !important; }
  .page { padding: 16px 0 !important; }

  /* Prose + card text — tightened for A4 density. Screen uses 15/1.75;
     print scales down so a 10-section report lands ~15-16 pages not 22.
     Orphans/widows prevent single-line dangle at page breaks. */
  p, li { orphans: 3 !important; widows: 3 !important; }
  .prose-para { font-size: 12.5px !important; line-height: 1.6 !important; }
  .prose-takeaway { font-size: 12.5px !important; line-height: 1.6 !important; padding: 12px 16px !important; }
  .stake-text { font-size: 12px !important; line-height: 1.55 !important; }
  .threat-body { font-size: 12px !important; line-height: 1.55 !important; }
  .stakes-exposure-cell { font-size: 12px !important; line-height: 1.6 !important; padding: 16px 18px !important; }
  .stakes-label-cell { padding: 16px 18px !important; }
  .stakes-finding { font-size: 13px !important; }
  .analogue-desc { font-size: 11.5px !important; line-height: 1.55 !important; }
  .analogue-item { padding: 16px !important; }
  .analogue-name { font-size: 18px !important; margin-bottom: 8px !important; }
  .analogue-type { margin-bottom: 10px !important; }
  .sig-cell { padding: 14px 18px !important; }
  .threat-band { padding: 14px 18px !important; }
  .threat-list { gap: 8px !important; }
  .threat-item { gap: 10px !important; }
  .assumption-item { padding: 12px 16px !important; font-size: 12.5px !important; line-height: 1.55 !important; }
  .stat-box { padding: 14px 18px !important; }
  .stat-desc { font-size: 10px !important; }
  .meta-cell { padding: 12px 16px !important; }
  .meta-value { font-size: 12px !important; }
  .confidence-block { padding: 12px 16px !important; }
  .confidence-block p { font-size: 12px !important; line-height: 1.6 !important; }
  .gaps-list li { font-size: 12.5px !important; line-height: 1.55 !important; }
  .tension-desc { font-size: 12px !important; line-height: 1.55 !important; padding-top: 10px !important; }
  .tension-item { padding: 18px 0 !important; }

  /* Typography — scale down for print */
  .section-title,
  .reality-gap-title { font-size: 24px !important; margin-bottom: 12px !important; }
  .section-eyebrow { font-size: 9px !important; margin-bottom: 5px !important; }
  .tension-a,
  .tension-b { font-size: 17px !important; }
  .stat-num { font-size: 22px !important; }
  .promise-gap-vs { font-size: 36px !important; }
  /* Timeline text — base 12px renders tight on A4 at 6-item column
     width, and text extraction tools have been losing space chars
     between words at that density. Modest bump recovers readability
     and reduces the kerning-artifact in PDF text extraction. */
  .timeline-event { font-size: 13px !important; line-height: 1.55 !important; }
  .timeline-date { font-size: 11px !important; }

  /* Keep titles with their content. Chrome's print engine sometimes
     ignores page-break-after: avoid on the title alone — pairing it
     with page-break-before: avoid on the following section-body and
     its first child is the reliable pattern that keeps an eyebrow +
     title + first content block together across a page break. */
  h1, h2, h3,
  .section-title,
  .section-eyebrow,
  .reality-gap-title,
  .promise-gap-title,
  .map-eyebrow {
    page-break-after: avoid !important;
    break-after: avoid !important;
  }
  .section-body,
  .section-body > *:first-child {
    page-break-before: avoid !important;
    break-before: avoid !important;
  }

  /* Keep key components intact across page breaks.
     IMPORTANT: multi-column grid CONTAINERS are NOT in this list — they
     should be allowed to break between columns when content is tall, so
     we don't get half-empty pages followed by orphaned takeaways. Only
     individual cells + cohesive block units (like the landscape map) get
     page-break-inside: avoid. */
  .architecture,
  .landscape-map,
  .lm-chart-wrap,
  .timeline,
  .prose-takeaway,
  .promise-gap-grid,
  .analogue-item,
  .tension-item,
  .stake-item,
  .highlight-stat,
  .competitor-block,
  .disclaimer,
  .threat-band,
  .stakes-ledger-row,
  .agenda-card {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  /* sig-grid and s03 grids removed from avoid list — let them flow. */

  /* New component grid columns — re-assert desktop layout at print
     viewport since the (max-width:768px) mobile block fires in Chrome's
     print emulation and would otherwise stack them single-column. */
  .stakes-ledger-row { grid-template-columns: 280px 1fr !important; }
  .stakes-label-cell { border-right: 1px solid var(--border) !important; border-bottom: none !important; }
/* ── S10 RESEARCH AGENDA — print density ──
     Nine items in a 3×3 grid should fit on one A4 page when sized for
     print. Questions drop from 18px to 14px, context from 13px to 11.5px,
     card padding tightens from 22/24 to 12/14, priority number shrinks
     to stop hogging the card header vertical. */
  .agenda-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 3px !important; }
  .agenda-card { padding: 12px 14px !important; gap: 10px !important; }
  .agenda-num { font-size: 20px !important; }
  .agenda-priority { font-size: 8px !important; }
  .agenda-topic { font-size: 9px !important; margin-top: 2px !important; }
  .agenda-question { font-size: 14px !important; line-height: 1.25 !important; }
  .agenda-context { font-size: 11.5px !important; line-height: 1.5 !important; }
  .agenda-card-body { font-size: 11.5px !important; line-height: 1.55 !important; }

  /* Grid containers that use `background: var(--border)` with a 1px
     cell gap to draw dividers bleed their background color into any
     empty space when a child stake/cell breaks to the next page.
     Transparent the background in print so we never see a mystery
     tan rectangle at the end of a page. The 1px divider effect is
     lost, but each child already has enough padding/border to
     separate visually. */
  .stakes-list,
  .sig-grid,
  .highlight-stat,
  .analogues-grid,
  .promise-gap-grid,
  .s03-claim-grid,
  .s03-expr-grid,
  .cover-meta {
    background: transparent !important;
    border: none !important;
    gap: 0 !important;
  }
  /* Re-introduce cell separation via individual cell borders so the
     grids still look structured without a container background to
     bleed between pages. Using border-top — collapses with adjacent
     cells when they share a row. */
  .stakes-list > .stake-item + .stake-item,
  .sig-grid > .sig-cell + .sig-cell,
  .analogues-grid > .analogue-item + .analogue-item,
  .s03-claim-grid > .s03-cell-claim + .s03-cell-claim,
  .s03-expr-grid > .s03-cell-expr + .s03-cell-expr,
  .cover-meta > .meta-cell + .meta-cell,
  .promise-gap-grid > .promise-gap-cell + .promise-gap-cell {
    border-top: 1px solid var(--border-light) !important;
  }
  /* Stat boxes need full borders in print. --surface is near-identical
     to --bg in dark theme, and pure white == pure white in light, so
     without a visible border the box containers disappear entirely.
     The sibling-top trick is wrong for horizontal grids anyway —
     it draws a line ABOVE siblings 2-4 but leaves box 1 bare. */
  .highlight-stat > .stat-box {
    border: 1px solid var(--border-light) !important;
  }

  /* Landscape map — PDF path swaps ECharts for server-rendered static SVG.
     .lm-screen-only hides the ECharts interactive block in print.
     .lm-pdf-only shows the pre-rendered SVG. Theme class on <html> picks
     the dark or light variant. */
  .lm-screen-only { display: none !important; }
  .lm-pdf-only { display: block !important; }
  .landscape-map { margin: 16px 0 !important; }
  html:not(.pdf-light) .lm-pdf-light { display: none !important; }
  html.pdf-light .lm-pdf-dark { display: none !important; }
  .lm-pdf-svg { width: 100%; max-width: 680px; height: auto; display: block; margin: 0 auto; }
  .lm-legend { margin: 18px 0 12px !important; }
  .lm-legend-z { margin: 16px 0 26px !important; padding: 14px 16px !important; }
  .lm-rationale { grid-template-columns: 1fr 1fr 1fr !important; }
  .lm-notes { grid-template-columns: 1fr 1fr !important; }

  /* Restore desktop multi-column grids */
  html, body { overflow-x: visible !important; }
  .highlight-stat { grid-template-columns: repeat(4, 1fr) !important; }
  /* grid-template-columns is set inline by fix_timeline_columns to
     match the actual item count (3..8). The mobile breakpoint fires
     in Chrome's print viewport too and forces 1fr !important —
     these attribute selectors re-assert the inline column count so
     a 6-item timeline doesn't dangle one item on a second row. */
  .timeline-items { gap: 0 !important; }
  .timeline-items[style*="repeat(3"] { grid-template-columns: repeat(3, 1fr) !important; }
  .timeline-items[style*="repeat(4"] { grid-template-columns: repeat(4, 1fr) !important; }
  .timeline-items[style*="repeat(5"] { grid-template-columns: repeat(5, 1fr) !important; }
  .timeline-items[style*="repeat(6"] { grid-template-columns: repeat(6, 1fr) !important; }
  .timeline-items[style*="repeat(7"] { grid-template-columns: repeat(7, 1fr) !important; }
  .timeline-items[style*="repeat(8"] { grid-template-columns: repeat(8, 1fr) !important; }
  .timeline-connector { display: block !important; }
  .timeline-item {
    position: relative !important;
    padding-left: 0 !important;
    padding-bottom: 0 !important;
    border-left: none !important;
    margin-left: 0 !important;
  }
  .timeline-item:last-child { border-left: none !important; }
  .timeline-dot-wrap { position: relative !important; margin-bottom: 10px !important; left: auto !important; }
  .analogues-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .tensions-grid { grid-template-columns: 1fr !important; }
  .sig-grid { grid-template-columns: 1fr 1fr !important; }
  /* Promise-gap grid adapts to whether the content injected a VS
     element between the two cells. Without this, a 2-cell payload
     lands in "1fr auto 1fr" with cell 2 grabbing the auto column
     and cell 1 collapsing to word-per-line. */
  .promise-gap-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .promise-gap-grid:has(> .promise-gap-vs) { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; }
  .promise-gap-vs { font-size: 32px !important; padding: 0 12px !important; }
  .s03-claim-grid { grid-template-columns: 1fr 1fr !important; }
  .s03-expr-grid { grid-template-columns: 1fr 1fr 1fr !important; }
}

/* ── LIGHT-MODE PRINT ──
   Activated only when the PDF renderer sets <html class="pdf-light">
   before printing. Leaves the dark-mode HTML view untouched. */
@media print {
  html.pdf-light {
    /* Pure white surface + dark text + saturated accents. No cream. */
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --surface-c: #FFFFFF;
    --surface-d: #F7F5EF;
    --surface-e: #F0EDE4;
    --border: #CFC8B5;
    --border-light: #E0DBCC;
    --border-c: #CFC8B5;
    --border-d: #E0DBCC;
    --border-e: #B8B09B;
    --text: #111110;
    --text-muted: #3A3730;
    --text-dim: #767265;
    --border-neutral: rgba(0,0,0,0.14);

    /* Dialed-up saturation vs cream-tuned palette. Each still passes
       contrast against a white ground. */
    --aquamarine: #06B38C;
    --sky-aqua: #0791C9;
    --yellow: #E6B800;
    --blue: #1B7BC9;
    --teal: #0E9668;
    --red: #CB4418;
    --purple: #6A61D4;
    --accent: #D9A014;
    /* chartreuse keeps brand value (#b4e600) — safe on white */

    --c-subject: var(--accent);
    --c-primary: var(--sky-aqua);
    --c-secondary: var(--chartreuse);
    --c-analogue: var(--aquamarine);
  }
  html.pdf-light,
  html.pdf-light body { background: var(--bg) !important; color: var(--text) !important; }
  html.pdf-light .cover-brand .w1 { color: var(--aquamarine) !important; }
  html.pdf-light .section-eyebrow,
  html.pdf-light .map-eyebrow,
  html.pdf-light .cover-wordmark { color: var(--sky-aqua) !important; }
  html.pdf-light .promise-gap-vs { color: var(--accent) !important; }

  /* Every surface paints white. No cream anywhere. */
  html.pdf-light .cover,
  html.pdf-light .brief-body { background: #FFFFFF !important; }
  html.pdf-light .meta-cell,
  html.pdf-light .confidence-block,
  html.pdf-light .sig-cell,
  html.pdf-light .s03-cell-claim,
  html.pdf-light .lm-rat,
  html.pdf-light .lm-note,
  html.pdf-light .analogue-item,
  html.pdf-light .stake-item,
  html.pdf-light .assumption-item,
  html.pdf-light .promise-gap-cell,
  html.pdf-light .highlight-stat .stat-box,
  html.pdf-light .s03-cell-expr { background: #FFFFFF !important; }
  /* Subtle warm tint on the cassie footer strip so it reads as a band. */
  html.pdf-light .cover-footer-cassie { background: #F5F2EA !important; }

  /* Stat number colours on white. Cycle through the new saturated palette. */
  html.pdf-light .stat-num { color: var(--aquamarine) !important; }
  html.pdf-light .stat-box:nth-child(2) .stat-num { color: var(--yellow) !important; }
  html.pdf-light .stat-box:nth-child(3) .stat-num { color: var(--sky-aqua) !important; }
  html.pdf-light .stat-box:nth-child(4) .stat-num { color: var(--purple) !important; }

  /* ── Architecture component — light-mode surface override ──
     .arch-corporate and .arch-standalone-container hardcode
     background:#141412 in architecture.css, which renders as a dark
     block on the white light-PDF page. Override here rather than
     in architecture.css so the dark PDF and on-screen dark view
     stay untouched. */
  html.pdf-light .arch-corporate,
  html.pdf-light .arch-standalone-container {
    background: #FFFFFF !important;
    border-color: var(--text) !important;
  }
  html.pdf-light .arch-corporate .arch-name,
  html.pdf-light .arch-standalone-container .arch-name {
    color: var(--text) !important;
  }
  html.pdf-light .arch-corporate .arch-eyebrow,
  html.pdf-light .arch-standalone-container .arch-eyebrow {
    color: var(--text-muted) !important;
  }
  /* Arch brand containers (division brand cells) — use white surface. */
  html.pdf-light .arch-brand {
    background: #FFFFFF !important;
  }
  /* Arch subject modifier keeps the amber accent treatment but tuned
     to the saturated light palette so the amber wash reads clearly. */
  html.pdf-light .arch-brand.subject {
    background: rgba(217,160,20,0.08) !important;
    border-color: var(--accent) !important;
  }
  html.pdf-light .arch-brand.subject .arch-name,
  html.pdf-light .arch-brand.subject .arch-eyebrow {
    color: var(--accent) !important;
  }
  html.pdf-light .arch-brand.subject::after {
    background: var(--accent) !important;
    color: #FFFFFF !important;
  }
  /* Demerger entity (spun-out sibling on the right of the corporate row) */
  html.pdf-light .arch-demerger-entity { background: #FFFFFF !important; }
  /* JV partner badge — inverted white on light. */
  html.pdf-light .arch-jv-partner { background: #FFFFFF !important; color: var(--accent) !important; border-color: var(--accent) !important; }

  /* ── Tension pair colour cycle — light override ──
     Dark mode cycles tension-item:nth-child(1..4) through brand
     accents. Items 3 and 5+ either use --text-muted (dark grey on
     white, reads as near-black) or fall through to the base rule
     (var(--text), literal black on white). Override here to keep
     the vibrant cycle visible on white without touching dark.
     Extends to nth-child(8) so reports with many tensions still cycle. */
  html.pdf-light .tension-item:nth-child(1) .tension-a { color: var(--accent) !important; }
  html.pdf-light .tension-item:nth-child(1) .tension-b { color: var(--sky-aqua) !important; }
  html.pdf-light .tension-item:nth-child(2) .tension-a { color: var(--aquamarine) !important; }
  html.pdf-light .tension-item:nth-child(2) .tension-b { color: var(--purple) !important; }
  html.pdf-light .tension-item:nth-child(3) .tension-a { color: var(--red) !important; }
  html.pdf-light .tension-item:nth-child(3) .tension-b { color: var(--blue) !important; }
  html.pdf-light .tension-item:nth-child(4) .tension-a { color: var(--yellow) !important; }
  html.pdf-light .tension-item:nth-child(4) .tension-b { color: var(--teal) !important; }
  html.pdf-light .tension-item:nth-child(5) .tension-a { color: var(--purple) !important; }
  html.pdf-light .tension-item:nth-child(5) .tension-b { color: var(--accent) !important; }
  html.pdf-light .tension-item:nth-child(6) .tension-a { color: var(--teal) !important; }
  html.pdf-light .tension-item:nth-child(6) .tension-b { color: var(--red) !important; }
  html.pdf-light .tension-item:nth-child(7) .tension-a { color: var(--sky-aqua) !important; }
  html.pdf-light .tension-item:nth-child(7) .tension-b { color: var(--aquamarine) !important; }
  html.pdf-light .tension-item:nth-child(8) .tension-a { color: var(--blue) !important; }
  html.pdf-light .tension-item:nth-child(8) .tension-b { color: var(--yellow) !important; }
}

/* --- architecture.css --- */

/* ─────────────────────────────────────────────────────────────
   Brand Architecture Component (iteration 3 - universal renderer)
   HTML CSS Grid + SVG overlay (connectors rendered by JS).
   Division count is data-driven via --arch-cols custom property.
   Division colour is data-driven via --div-colour custom property.
   Sub-parent colour is data-driven via --subparent-colour.
   ───────────────────────────────────────────────────────────── */

.architecture {
  position: relative;
  margin: 28px 0 var(--gap-sm);
  padding: 24px 0 8px;
  color: var(--text);
  isolation: isolate;
  --arch-cols: 5;
}

/* ── Opening eyebrow: "Brand architecture" ── */
.arch-top-eyebrow {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sky-aqua);
  margin-bottom: 18px;
}

/* ── Corporate row: corporate parent + demerger ── */
.arch-corporate-row {
  display: grid;
  grid-template-columns: repeat(var(--arch-cols), 1fr);
  gap: 8px;
  align-items: stretch;
  margin-bottom: 0;
}

/* ── Connector zone: SVG connectors live here, sized by CSS not JS ──
   Paths are rendered server-side into the HTML with viewBox "0 0 100 100"
   + preserveAspectRatio="none", so they scale with the zone regardless
   of medium (HTML, PDF, print emulation). Height is fixed in CSS so the
   connectors have guaranteed structural length. No DOM measurement, no
   resize handlers, no overlay. */
.arch-connector-zone {
  height: 88px;
  margin: 0;
  position: relative;
  overflow: visible;
}
.arch-connectors {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.arch-connector {
  fill: none;
  stroke-width: 2;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.arch-connector-solid  { stroke-dasharray: none; }
.arch-connector-dashed { stroke-dasharray: 5 3; }
.arch-connector-dotted { stroke-dasharray: 2 3; opacity: 0.7; }
.arch-connector-inverted {
  /* Upward equity flow — future use (Lexus/Toyota case).
     Styling handled case-by-case in the renderer. */
}

/* Corporate parent spans all columns except the last if there's a demerger,
   otherwise spans everything. Controlled by parent class .has-demerger. */
.arch-corporate-row .arch-corporate {
  grid-column: 1 / -1;
  grid-row: 1;
  background: #141412;
  border: 1.4px solid var(--text);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 78px;
}
.arch-corporate-row.has-demerger .arch-corporate {
  grid-column: 1 / calc(var(--arch-cols));
}
/* Wider gap to parent-to-divisions on 6+ division architectures - keeps staggered
   connectors from crowding. Emitted by the renderer when --arch-cols > 5. */
.arch-corporate-row.wide-cols {
  margin-bottom: 0;
}
.architecture.arch-wide-cols .arch-connector-zone {
  height: 112px;
}

.arch-corporate .arch-eyebrow {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.arch-corporate .arch-name {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1.1;
}

.arch-demerger {
  grid-column: -2 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.arch-demerger-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.arch-demerger-entity {
  background: var(--surface);
  border: 1px solid var(--text-muted);
  padding: 10px 14px;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.arch-demerger-entity .arch-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-muted);
  line-height: 1.15;
}
.arch-demerger-entity .arch-sublabel {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Division label row ── */
.arch-divisions {
  display: grid;
  grid-template-columns: repeat(var(--arch-cols), 1fr);
  gap: 8px;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}
.arch-division-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-top: 1px solid currentColor;
  background: transparent;
  line-height: 1.2;
  min-height: 32px;
  color: var(--div-colour, var(--text));
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── Brand grid (iter5 flat structure) ─────────────────────────────────
   Brands and row spacers are direct children of .arch-grid. Each carries
   inline grid-column and grid-row for tier-banded placement. No wrappers,
   no display:contents indirection. Division labels live in .arch-divisions
   above; mobile division headers are .arch-mobile-label, hidden on desktop.
   ──────────────────────────────────────────────────────────── */
.arch-grid {
  display: grid;
  grid-template-columns: repeat(var(--arch-cols), 1fr);
  grid-auto-rows: minmax(50px, auto);
  column-gap: 8px;
  row-gap: 12px;
  padding-top: 24px;
  position: relative;
  z-index: 1;
  align-items: stretch;
}

.arch-row-spacer {
  visibility: hidden;
  min-height: 50px;
}

.arch-mobile-label {
  display: none;
}

/* ── Generic division colour palette (assigned by render order) ──
   Up to 10 divisions supported. Palette alternates through the
   five brand-safe accents, then repeats. --div-colour is set inline
   per column in the render function. */

/* ── Brand container (primitive: container_solid) ── */
.arch-brand {
  background: var(--surface);
  border: 1.6px solid currentColor;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 50px;
  position: relative;
  min-width: 0;
}
.arch-brand .arch-eyebrow {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: currentColor;
  margin-bottom: 4px;
  overflow-wrap: break-word;
  line-height: 1.25;
}
.arch-brand .arch-name {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.005em;
  color: var(--text);
  line-height: 1.15;
  overflow-wrap: anywhere;
  /* word-break removed - was breaking mid-character at narrow widths */
}

/* Dense modifier: applied on 7-column layouts to prevent mid-character wrapping */
.architecture.arch-dense .arch-brand .arch-name { font-size: 13px; }
.architecture.arch-dense .arch-brand.tier-large .arch-name { font-size: 14px; }
.architecture.arch-dense .arch-brand .arch-eyebrow { font-size: 7.5px; }
.architecture.arch-dense .arch-brand .arch-sublabel { font-size: 10px; }
.arch-brand .arch-sublabel {
  display: block;
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: currentColor;
  margin-top: 4px;
  line-height: 1.3;
  overflow-wrap: break-word;
}

/* ── Tier sizing ── */
.arch-brand.tier-large { min-height: 68px; border-width: 1.6px; }
.arch-brand.tier-large .arch-name { font-size: 17px; }
.arch-brand.tier-large.dominant { border-width: 2.2px; }

/* Subject modifier — the brand the report is about, elevated within sibling set */
.arch-brand.subject {
  border-width: 2.6px;
  border-color: var(--accent);
  background: rgba(250, 199, 117, 0.06);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.arch-brand.subject .arch-name { color: var(--accent); }
.arch-brand.subject .arch-eyebrow { color: var(--accent); }
.arch-brand.subject::after {
  content: "SUBJECT";
  position: absolute;
  top: -8px;
  left: 10px;
  background: var(--accent);
  color: var(--bg);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 2px 6px;
  line-height: 1;
}

.arch-brand.tier-mid { min-height: 50px; border-width: 1.6px; }
.arch-brand.tier-mid .arch-name { font-size: 15px; }

.arch-brand.tier-small { min-height: 40px; border-width: 1.3px; padding: 8px 12px; }
.arch-brand.tier-small .arch-name { font-size: 13px; }

/* ── Exited / ghost modifier ── */
.arch-brand.exited {
  border-color: var(--text-muted);
  border-style: dashed;
  border-width: 1px;
  opacity: 0.7;
}
.arch-brand.exited .arch-name,
.arch-brand.exited .arch-sublabel,
.arch-brand.exited .arch-eyebrow {
  color: var(--text-muted);
}

/* ── Product line modifier (subject's own product range) ── */
.arch-brand.product-line {
  min-height: 28px;
  border-width: 0.8px;
  padding: 6px 10px;
}
.arch-brand.product-line .arch-name {
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
}

/* ── Licensed-distribution modifier ── */
.arch-brand.licensed {
  border-color: var(--text-muted);
  border-style: dashed;
  border-width: 1px;
  background: transparent;
}
.arch-brand.licensed .arch-name { color: var(--text-muted); }
.arch-brand.licensed .arch-eyebrow { color: var(--text-muted); }

/* ── JV primitive ── */
.arch-brand.jv {
  border: 2.2px dashed var(--accent);
  color: var(--accent);
  padding-top: 28px;
}
.arch-brand.jv .arch-name { color: var(--text); }
.arch-brand.jv .arch-eyebrow { color: var(--accent); }

.arch-jv-partner {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 2px 8px;
  line-height: 1;
  z-index: 2;
}

/* ── Sub-parent treatment: coloured left band + eyebrow above first member ── */
.arch-brand.in-subparent {
  border-left: 3px solid var(--subparent-colour, currentColor);
  padding-left: 12px;
}
.arch-brand.subparent-first {
  margin-top: 26px;
}
.arch-brand.subparent-first::before {
  content: attr(data-subparent-label);
  position: absolute;
  top: -22px;
  left: 0;
  right: -8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--subparent-colour, currentColor);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

/* ── Licensed distribution section (below main grid) ── */
.arch-licensed-section {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.arch-licensed-label {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.arch-licensed-grid {
  display: grid;
  grid-template-columns: repeat(var(--licensed-cols, 5), 1fr);
  gap: 8px;
}

/* ── SVG overlay: now only used for the demerger line, which sits inside
   the corporate row and needs to connect corp box to demerger entity ── */
.arch-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.arch-overlay path {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.arch-overlay .arch-demerger-line {
  stroke: var(--text-muted);
  stroke-width: 1.4;
  stroke-dasharray: 5 3;
}

/* ── Evidence strip ── */
.arch-evidence {
  margin-top: 24px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.7;
}
.arch-evidence strong {
  color: var(--text-muted);
  font-weight: 700;
}

/* ── Standalone (no parent, no divisions) ── */
.architecture-standalone {
  text-align: left;
}
.arch-standalone-container {
  display: inline-flex;
  flex-direction: column;
  background: #141412;
  border: 1.4px solid var(--text);
  padding: 18px 24px;
  margin: 8px 0 18px;
  min-width: 240px;
}
.arch-standalone-container .arch-eyebrow {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.arch-standalone-container .arch-name {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.005em;
  color: var(--text);
  line-height: 1.1;
}
.arch-frame-label {
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  font-style: italic;
  color: var(--text-muted);
  margin: 0 0 18px;
  max-width: 540px;
  line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────────
   Responsive - tablet (600 to 899px)
   Cap columns at 4. Columns beyond index 3 wrap to a second
   visual row by collapsing into groups.
   If --arch-cols > 4 on tablet, the render function emits a
   fallback layout handled via --arch-cols-tablet override.
   ───────────────────────────────────────────────────────────── */

@media (min-width: 600px) and (max-width: 899px) {
  .architecture { --arch-cols: var(--arch-cols-tablet, 4); }
  .arch-corporate-row { margin-bottom: 48px; }
}

/* ─────────────────────────────────────────────────────────────
   Responsive - mobile (<600px)
   1fr single column stack. SVG overlay suppressed (by JS too).
   ───────────────────────────────────────────────────────────── */

@media (max-width: 599px) {
  .architecture { --arch-cols: 1; }
  .arch-corporate-row { gap: 14px; margin-bottom: 28px; }
  .arch-corporate-row.has-demerger .arch-corporate { grid-column: 1; }
  .arch-demerger { grid-column: 1; grid-row: 2; }
  .arch-demerger-label { padding-left: 14px; }

  .arch-divisions { display: none; }

  .arch-grid {
    display: block;
    padding-top: 0;
  }
  .arch-grid > .arch-brand {
    grid-column: unset;
    grid-row: unset;
    width: 100%;
    margin-bottom: 12px;
  }
  .arch-row-spacer { display: none; }

  .arch-mobile-label {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding-top: 20px;
    padding-bottom: 6px;
    border-top: 1px solid currentColor;
    margin-bottom: 8px;
  }
  .arch-mobile-label:first-of-type {
    padding-top: 0;
  }

  .arch-brand.subparent-first { margin-top: 22px; }
  .arch-licensed-grid { grid-template-columns: 1fr; }
  .arch-overlay { display: none; }
  .arch-connector-zone { display: none; }
}

/* ══════════════════════════════════════════
   CASSANDRA IN-HOUSE — DASHBOARD COMPONENTS
   Heritage mockup component classes.
   Palette: canonical :root above. No overrides.
   ══════════════════════════════════════════ */

/* TOP BAR */
.top-bar{position:fixed;top:0;left:0;right:0;z-index:100;height:52px;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px 0 16px}
.wordmark{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--sky-aqua);display:flex;align-items:center;gap:8px}
.inhouse-tag{color:var(--text-muted);letter-spacing:.22em;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase}
.workspace-lockup{display:flex;align-items:center;gap:10px;position:absolute;left:50%;transform:translateX(-50%)}
.workspace-lockup img{height:28px;width:auto;object-fit:contain}
.ws-logo-fallback{height:28px;width:28px;background:var(--surface);border:1px solid var(--border-light);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;color:var(--accent)}
.ws-name{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:800;color:var(--text);letter-spacing:.03em;line-height:1}
/* ITEM 63 Part A: labelled entry to /in-house. margin-left:auto groups it with the
   user-area on the right (workspace-lockup is absolutely centred, out of flow). */
.topbar-about-link{margin-left:auto;margin-right:22px;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sky-aqua);text-decoration:none;transition:opacity .15s}
.topbar-about-link:hover{opacity:.7}
.user-area{display:flex;align-items:center;gap:10px}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--sky-aqua);animation:pulse 2s ease-in-out infinite}
.user-avatar{width:30px;height:30px;border-radius:50%;background:var(--surface-alt);border:1.5px solid var(--sky-aqua);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:var(--text)}
.user-name{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--text);letter-spacing:.06em}

/* STATUS STRIP (slice 7 Part B) — replaces the demo banner; one of the two fixed-chrome surfaces */
.status-strip{position:fixed;top:52px;left:0;right:0;z-index:101;height:28px;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:10px;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.status-live{color:var(--sky-aqua)}
.status-accent{color:var(--sky-aqua)}
.status-time{color:var(--text-muted)}
.status-dot{opacity:.7}

/* KPI STRIP — un-fixed (slice 7 Part C): scrolls with the page as the first block
   in main-scroll. Cells fully transparent, separated by whitespace alone. */
.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);column-gap:48px;margin-bottom:16px}
.kpi-cell{background:transparent;padding:0;display:flex;flex-direction:column;justify-content:flex-start;gap:3px;overflow:visible;min-width:0}
.kpi-caption{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.08em;color:var(--text-dim);margin-bottom:56px}
.kpi-label{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.kpi-row{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-top:2px}
.kpi-value{font-family:'Barlow Condensed',sans-serif;font-size:40px;font-weight:800;line-height:1}
.kpi-accent{color:var(--accent)}
.kpi-teal{color:var(--accent)}
.kpi-blue{color:var(--accent)}
.kpi-purple{color:var(--accent)}
.kpi-delta{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700}
.kpi-delta-up{color:var(--text-muted)}
.kpi-delta-down{color:var(--text-muted)}
.kpi-delta-neutral{color:var(--text-dim)}
.kpi-period{font-family:'Barlow',sans-serif;font-size:16px;font-weight:300;color:var(--text);white-space:normal;line-height:1.35;overflow-wrap:break-word}

/* BODY LAYOUT */
.body-layout{display:flex;padding-top:var(--dash-top,80px);min-height:100vh}

/* LEFT RAIL */
.left-rail{position:fixed;left:0;top:var(--dash-top,80px);bottom:0;width:68px;background:var(--bg);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding-top:8px;z-index:90}
.rail-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);cursor:pointer;font-size:16px;position:relative;transition:color .15s}
.rail-icon:hover{color:var(--text-muted)}
.rail-icon.active{color:var(--sky-aqua)}
.rail-icon.active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--sky-aqua)}
.rail-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* MAIN SCROLL */
.main-scroll{flex:1;padding:24px 20px 64px 108px;padding-right:344px;overflow-y:auto}

/* CHAT DOCK */
/* ITEM 59: the chat dock is Cassandra herself; it must not be out-ranked by the
   data panels. FILL is the §2 exemption (recorded in the design rules) — aquamarine
   16%/7%, cool against the warm ground so it does not amplify to orange-brown. EDGE
   is a 2px solid aquamarine, which is what actually lifts the panel. Ref: reference_chat_dock_v1. */
.chat-dock{position:fixed;right:0;top:var(--dash-top,80px);bottom:0;width:320px;background:linear-gradient(180deg, rgba(10,210,255,.16), rgba(10,210,255,.07));border-left:2px solid var(--sky-aqua);display:flex;flex-direction:column;z-index:90}
.chat-header{height:48px;padding:0 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.chat-wordmark{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.22em;color:var(--sky-aqua)}
/* ITEM 58: Cassandra is aquamarine, locked. The dock LIVE indicator + dot were the
   sky/teal anomaly Session 80 logged. No surface carries both hues. */
.chat-live-indicator{display:flex;align-items:center;gap:6px;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.18em;color:var(--sky-aqua)}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--sky-aqua);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.chat-thread{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px}
.chat-msg{display:flex;flex-direction:column}
/* Item 1: no speaker labels — the distinction is structural. Analyst speaks
   full-width in --text; the user's words carry a 3px aquamarine bar (tick
   vocabulary) and sit in --muted. */
.chat-msg-cassandra .msg-text{font-family:'Barlow',sans-serif;font-size:17px;font-weight:400;color:var(--text);line-height:1.65;white-space:pre-line}
.chat-msg-user .msg-text{font-family:'Barlow',sans-serif;font-size:16px;font-weight:300;color:var(--text-muted);background:transparent;border-left:3px solid var(--sky-aqua);padding:2px 0 2px 12px;line-height:1.65}
.chat-pills{padding:12px 16px;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--border);flex-shrink:0}
.pill-btn{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:500;border:1px solid var(--border);background:transparent;color:var(--text-muted);padding:7px 10px;cursor:pointer;text-align:left;line-height:1.4;transition:border-color .15s,color .15s;width:100%}
.pill-btn:hover{border-color:var(--border-light);color:var(--text)}
/* ITEM 58/59: zero sky on the dock — the highlighted pill was the last sky surface. */
.pill-highlighted{border-color:var(--sky-aqua) !important;color:var(--sky-aqua) !important;background:transparent !important}
/* ITEM 59 composer: field spans full width, controls live inside on a tray.
   Field left edge aligns with the wordmark/briefing (all start at the 16px dock margin);
   the old attach button used to push it ~46px in. Ref: reference_chat_dock_v1. */
.chat-input-area{padding:12px 16px;flex-shrink:0}
.chat-composer{position:relative;border:1px solid rgba(10,210,255,.38);background:rgba(0,0,0,.30)}
.chat-composer:focus-within{border-color:var(--sky-aqua)}
.chat-field{display:block;width:100%;background:none;border:none;resize:none;color:var(--text);font-family:'Barlow',sans-serif;font-size:17px;font-weight:300;padding:13px 14px 6px;line-height:1.5;min-height:74px;outline:none}
.chat-field::placeholder{color:var(--text-muted)}
.chat-tray{display:flex;align-items:center;gap:10px;padding:0 10px 9px}
.attach-btn{width:30px;height:30px;background:none;border:none;color:#7d7b73;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}
.attach-btn:hover{color:var(--text-muted)}
.attach-btn svg{width:17px;height:17px}
.chat-shortcut{margin-left:auto;font-family:'Barlow Condensed',sans-serif;font-size:14px;color:#7d7b73;letter-spacing:.06em}
.send-btn{width:32px;height:32px;background:var(--sky-aqua);border:none;color:#07110f;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* PANEL SHARED — de-boxed (slice 7 Part D): no fills, no rules; rhythm by margin + landmark */
.panel{padding:0}
.panel-eyebrow{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-aqua);margin-bottom:8px}
.panel-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.panel-title{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;color:var(--text);letter-spacing:.04em;text-transform:uppercase}
.panel-hint{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:400;color:var(--text-muted);letter-spacing:.06em}

/* PANEL HEADING — primary panel identifier, replaces small eyebrow as first element */
.panel-heading{font-family:'Barlow Condensed',sans-serif;font-size:clamp(28px,2.8vw,40px);font-weight:800;color:var(--text);letter-spacing:.02em;text-transform:uppercase;line-height:.95;margin-bottom:8px}

/* PANEL EYEBROW — collapsed into the single declaration above (slice 7 Part D.1) */

/* PANEL SUBTITLE — clamped to 2 lines with a More toggle (slice 7 Part D.6);
   the full read stays in the DOM, the page just stops wearing them all at once */
.panel-subtitle{font-family:'Barlow',sans-serif;font-size:17px;font-weight:400;color:var(--text-muted);margin-bottom:0;line-height:1.5;max-width:720px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.panel-subtitle.subtitle-open{display:block;-webkit-line-clamp:unset;overflow:visible}
.subtitle-more-btn{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sky-aqua);background:transparent;border:none;padding:2px 0;cursor:pointer;display:block}

/* PANEL-SUMMARY — demoted, keep for legacy renders but reduce prominence */
.panel-summary{font-family:'Barlow',sans-serif;font-size:17px;font-weight:400;line-height:1.55;color:var(--text-dim);margin:-2px 0 16px;max-width:720px}

/* PANEL ALT — background retired (slice 7 Part D.2): panels separate by whitespace + landmark, not fills */
.panel-alt{}

/* PANEL rhythm — the separator replacement (slice 7 Part D.7): margin + landmark, no border */
.panel + .panel{margin-top:64px}
@media(max-width:768px){.panel + .panel{margin-top:64px}}

/* PANEL LANDMARK — index numeral + short tick + eyebrow, opens each panel (slice 7 Part D.7) */
.panel-landmark{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.panel-index{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:800;letter-spacing:.02em;color:var(--text-dim);line-height:1}
.panel-tick{width:28px;height:3px;background:var(--sky-aqua);flex-shrink:0}
.panel-landmark .panel-eyebrow{margin-bottom:0}

/* DISCUSS BUTTON (Item 1) — de-boxed: text + arrow, 3px baseline bar on hover/focus */
/* ITEM 70: measured cause — the pill's 14px left padding pushed its content to x=30
   while the column edge is x=16. Optical fix (Luke's hypothesis, confirmed by measure):
   a negative left margin equal to the horizontal padding, so the pill's CONTENT aligns to
   the column edge. The pill treatment (fill, icon, sky) is unchanged — ITEM 51 stands. */
.summary-discuss-btn{display:inline-flex;align-items:center;gap:7px;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-aqua);background:var(--surface-alt);border:none;padding:7px 14px;cursor:pointer;transition:background .15s;margin-top:12px;margin-left:-14px;line-height:1}
.discuss-ico{width:16px;height:16px;flex-shrink:0}
.summary-discuss-btn:hover,.summary-discuss-btn:focus-visible{background:var(--surface);outline:none}

/* PAIRED CELL LABEL — sub-heading inside paired rows */
.paired-cell-label{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px}

/* POST THUMB missing image fallback */
.post-thumb{height:180px;position:relative;overflow:hidden;background:var(--surface)}
.post-thumb.thumb-missing::after{content:'';position:absolute;inset:0;background:var(--surface)}

/* BRIEFING ITEMS — chat dock discussion topics */
/* ITEM 72: on LIVE boards the in-thread panel is gone; topics live in .topics-pane
   above the composer. .briefing-panel/.briefing-item stay for parked Heritage, which
   keeps the original panel. Header/label/text/discuss classes are shared vocabulary. */
.briefing-panel{display:flex;flex-direction:column;flex:1;overflow-y:auto}
.briefing-item{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.briefing-item:last-child{border-bottom:none}
/* ITEM 57: subhead to the reference .strip-label — 17px/700/--text/.06em. Was dim-grey caps. */
.briefing-panel-header{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text);padding:14px 16px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
/* ITEM 72: the topics pane. Rest = header + topics[0] + its Discuss; hover/focus-within
   slides the rest up (§6 moment). Touch (hover:none) and reduced motion get the full
   list statically — nothing hidden behind a gesture that cannot be made. */
.topics-pane{border-top:1px solid var(--border);flex-shrink:0}
.topic-entry{padding:12px 16px}
.topic-entry-inner{display:flex;flex-direction:column;gap:6px}
/* ITEM 80: the motion. Collapsing regions animate grid-template-rows 0fr->1fr, i.e.
   the TRUE content height — the old max-height targets (320/240) overshot the content
   2-3x, so expand snapped open early and collapse spent most of its duration in the
   invisible dead range then slammed shut. Direction asymmetry via transition-delay:
   the base (collapse) rule holds .5s after the pointer leaves, then closes over .45s —
   a pointer crossing to the composer and back never sees a collapse start. The hover
   rule waits .15s before opening, so brushing the pane on the way past starts nothing
   (hover intent). Keyboard focus gets no entry delay — see the :focus-within override. */
.topic-entry.topic-rest{display:grid;grid-template-rows:0fr;padding-top:0;padding-bottom:0;transition:grid-template-rows .45s ease .5s,padding .45s ease .5s}
.topic-entry.topic-rest>.topic-entry-inner{min-height:0;overflow:hidden}
/* At rest the evidence text collapses too — rest is the question and its Discuss. */
.topic-text-clip{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease .5s}
.topic-text-clip>.topic-text{min-height:0;overflow:hidden}
.topics-pane:hover .topic-entry.topic-rest,.topics-pane:focus-within .topic-entry.topic-rest{grid-template-rows:1fr;padding-top:12px;padding-bottom:12px;transition:grid-template-rows .4s ease .15s,padding .4s ease .15s}
.topics-pane:hover .topic-text-clip,.topics-pane:focus-within .topic-text-clip{grid-template-rows:1fr;transition:grid-template-rows .4s ease .15s}
/* A keyboard user has no pointer to hold still — focus expands with zero entry delay. */
.topics-pane:focus-within .topic-entry.topic-rest,.topics-pane:focus-within .topic-text-clip{transition-delay:0s}
/* Expanded, the three full entries can outgrow the dock — cap and scroll internally so
   the composer never leaves the viewport. */
.topics-pane:hover,.topics-pane:focus-within{max-height:56vh;overflow-y:auto}
@media (hover:none),(max-width:768px){
  .topic-entry.topic-rest{grid-template-rows:1fr;padding-top:12px;padding-bottom:12px}
  .topic-text-clip{grid-template-rows:1fr}
}
@media (prefers-reduced-motion:reduce){
  .topic-entry.topic-rest,.topic-text-clip{transition:none;grid-template-rows:1fr}
  .topic-entry.topic-rest{padding-top:12px;padding-bottom:12px}
}
/* ITEM 59b (zero sky on the dock): topic labels are content subheads, not entity
   identity — the reference topics-label is neutral --text, not a hue. ITEM 57 finalizes subhead values. */
/* ITEM 54 Part B: topics are now gentle sentence-case starters — drop the forced
   uppercase so they don't re-shout. text-transform removed only (heritage's static
   caps data renders identically; multix's mixed-case shows through). Tracking left at
   .16em to keep heritage byte-identical; a live-only tightening can follow once unparked. */
.briefing-item-label{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.16em;color:var(--text)}
.briefing-item-text{font-family:'Barlow',sans-serif;font-size:16px;font-weight:300;color:var(--text);line-height:1.55}
.briefing-discuss-btn{align-self:flex-start;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sky-aqua);background:transparent;border:none;padding:0;cursor:pointer;margin-top:2px;transition:opacity .15s}
.briefing-discuss-btn:hover{opacity:.65}

/* LANDSCAPE MAP */
.map-container{background:transparent;border:none}
.map-svg{width:100%;height:auto;display:block}
.map-legend{display:flex;flex-wrap:wrap;gap:16px;padding:10px 16px 4px 0}
.map-hint{padding:6px 16px 14px;font-family:'Barlow',sans-serif;font-size:16px;color:var(--text-muted);line-height:1.5}
/* ITEM 52: map instruction, above the map, reads as how-to (aquamarine tick) not caption */
.map-instruction{margin:2px 0 16px;padding:10px 0 10px 14px;border-left:3px solid var(--sky-aqua);font-family:'Barlow',sans-serif;font-size:16px;line-height:1.5;color:var(--text-muted);max-width:760px}
/* MAP Z-AXIS KEY */
.map-z-key{display:flex;align-items:center;gap:16px;padding:5px 16px 8px 0}
/* ITEM 57: subhead to the reference .strip-label values. */
.map-z-label{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.map-z-items{display:flex;align-items:center;gap:16px}
.map-z-item{display:flex;align-items:center;gap:7px;font-family:'Barlow Condensed',sans-serif;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.map-z-dot{border-radius:50%;background:transparent;border:1.5px solid rgba(255,255,255,.28);flex-shrink:0;display:inline-block}
.legend-item{display:flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;font-size:16px;color:var(--text-muted)}
.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* PAIRED PANELS — de-filled (slice 7 Part D.3): cells separate by 48px gap + promoted labels, no divider */
.paired-row{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.paired-cell{background:transparent;padding:0}
@media(max-width:768px){.paired-row{grid-template-columns:1fr;gap:40px}}

/* ALERTS */
.alert-list{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
@media(max-width:768px){.alert-list{grid-template-columns:1fr}}
.alert-item{display:flex;gap:12px;padding:20px 0}
.alert-item.priority-high{padding:28px 0}
.alert-item.priority-low{padding:14px 0}
.alert-body{flex:1;display:flex;flex-direction:column;gap:5px}
.alert-title{font-family:'Barlow',sans-serif;font-size:17px;font-weight:500;color:var(--text);line-height:1.35}
/* F.2 — severity by form, not hue: dot fill degree = severity, all --text-muted */
.sev-row{display:flex;align-items:center;gap:7px;color:var(--text-muted)}
/* ITEM 30: severity dots removed - the word is the mark. Severity reads by
   scale, weight and value (no hue), every level above the legibility floor. */
.sev-word{font-family:'Barlow Condensed',sans-serif;letter-spacing:.14em;text-transform:uppercase;font-size:16px;font-weight:700;color:var(--text-dim)}
.priority-high .sev-word,.cw-high .sev-word{font-size:20px;font-weight:800;color:var(--heat)}
.priority-medium .sev-word,.cw-medium .sev-word{font-size:16px;font-weight:800;color:var(--text-muted)}
.priority-low .sev-word,.cw-low .sev-word{font-size:16px;font-weight:700;color:var(--text-dim)}
.entity-tag{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
/* ITEM 47: entity-less category/regulatory tag — neutral, no hue (§1: category never uses hue). */
.entity-tag-neutral{color:var(--text-muted)}
.alert-live-badge{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.14em;color:var(--bg);background:var(--sky-aqua);padding:2px 7px;margin-left:8px;border-radius:2px;vertical-align:middle;}
.map-live-note{font-size:16px;color:var(--text-muted);margin:6px 0 14px;max-width:70ch;}
.alert-text{font-family:'Barlow',sans-serif;font-size:17px;color:var(--text);line-height:1.55}
.alert-meta{display:flex;align-items:center;gap:12px}
.alert-source{font-family:'Barlow Condensed',sans-serif;font-size:16px;color:var(--blue);letter-spacing:.04em;text-decoration:underline;text-decoration-color:rgba(126,184,212,.3)}
.alert-time{font-family:'Barlow Condensed',sans-serif;font-size:16px;color:var(--text-muted)}

/* RETAILER RANGING */
.ranging-note{font-family:'Barlow',sans-serif;font-size:16px;color:var(--text-muted);margin-bottom:14px;line-height:1.5}
.ranging-table{width:100%;border-collapse:collapse}
.ranging-table th{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);padding:6px 8px 10px 0;text-align:left}
.ranging-table td{padding:12px 8px 12px 0;vertical-align:middle}
.ranging-retailer{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:500;color:var(--text)}
.ranging-count{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:var(--text)}
.movement-chip{display:inline-flex;align-items:center;gap:3px;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;padding:2px 7px}
.movement-up{background:transparent;color:var(--text-muted);border:none}
.movement-down{background:transparent;color:var(--text-muted);border:none}
.movement-flat{background:transparent;color:var(--text-dim);border:none}

/* COMPETITOR POSTS CAROUSEL */
.posts-carousel-wrap{position:relative}
.posts-carousel{display:grid;grid-template-columns:repeat(4,1fr);background:transparent;gap:20px;overflow:visible;margin-bottom:4px}
.post-card{background:var(--bg);display:flex;flex-direction:column;transition:opacity .2s}
.post-card.hidden{display:none}
.post-card-featured{border:none}
.post-top-label{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}
.post-thumb{height:180px;position:relative;overflow:hidden}
.brand-chip{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;padding:3px 8px;color:#fff;letter-spacing:.08em}
.platform-chip{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;padding:3px 7px;letter-spacing:.1em;text-transform:uppercase}
.platform-tiktok{background:transparent;color:#ff2d55;border:1px solid #ff2d55}
.platform-ig{background:transparent;color:#E1306C;border:1px solid #E1306C}
.post-meta{padding:14px 14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-brand{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:var(--text);letter-spacing:.06em}
.post-content{font-family:'Barlow',sans-serif;font-size:17px;color:var(--text-muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.post-more{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sky-aqua);margin-top:6px;cursor:pointer}
.post-hover{position:fixed;z-index:220;display:none;width:340px;max-width:44vw;background:var(--surface-alt);padding:16px 18px;box-shadow:0 10px 44px rgba(0,0,0,.65);pointer-events:none}
.post-hover-brand{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:var(--text);letter-spacing:.04em;margin-bottom:8px}
.post-hover-text{font-family:'Barlow',sans-serif;font-size:17px;line-height:1.6;color:var(--text-muted);white-space:pre-wrap;max-height:60vh;overflow:hidden}
.post-stats{display:flex;justify-content:space-between;margin-top:10px;padding-top:2px}
.post-engagement{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:var(--text-muted)}
.post-time{font-family:'Barlow Condensed',sans-serif;font-size:16px;color:var(--text-muted)}
.post-counts{display:flex;gap:8px;flex-wrap:wrap}
.post-count{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.06em;color:var(--text-dim)}
.carousel-nav{display:flex;align-items:center;gap:10px;margin-top:12px}
.carousel-btn{background:none;border:1px solid var(--border);color:var(--text-muted);width:28px;height:28px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s;flex-shrink:0}
.carousel-btn:hover:not(:disabled){border-color:var(--sky-aqua);color:var(--sky-aqua)}
.carousel-btn:disabled{opacity:.7;cursor:default}
.carousel-counter{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.14em;color:var(--text-dim)}
.top-posts-toggle{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;transition:border-color .15s,color .15s}
.top-posts-toggle:hover{border-color:var(--teal);color:var(--teal)}
.top-posts-toggle.active{border-color:var(--teal);color:var(--teal);background:transparent}

/* SYNTHESIS */
.synthesis-row{display:flex;gap:20px}
.synthesis-thumb{width:130px;flex-shrink:0;background:var(--bg);border:1px solid var(--border);padding:16px;display:flex;flex-direction:column;gap:10px;text-decoration:none;transition:border-color .15s}
.synthesis-thumb:hover{border-color:var(--sky-aqua)}
.synth-eyebrow{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sky-aqua)}
.synth-brand{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800;text-transform:uppercase;color:var(--text);line-height:.95;letter-spacing:.02em}
.synth-question{font-family:'Playfair Display',serif;font-style:italic;font-size:17px;color:var(--text);line-height:1.55;flex:1}
.synth-date{font-family:'Barlow Condensed',sans-serif;font-size:16px;color:var(--text-muted)}
.synthesis-body{flex:1;display:flex;flex-direction:column;gap:14px;justify-content:center}
.synth-finding{font-family:'Barlow',sans-serif;font-size:17px;color:var(--text);line-height:1.6}
.synth-stats{display:flex;gap:20px}
.synth-stat{display:flex;flex-direction:column;gap:2px}
.synth-stat-val{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:var(--text)}
.synth-stat-label{font-family:'Barlow Condensed',sans-serif;font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}

/* DATA SOURCES */
.sources-section-label{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;display:block}
.sources-label-live{color:var(--sky-aqua)}
.sources-label-available{color:var(--text-muted)}
.source-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0}
.source-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:5px}
.source-dot-live{background:var(--teal)}
.source-dot-available{background:var(--text-dim)}
.source-info{flex:1;display:flex;flex-direction:column;gap:2px}
.source-name{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:var(--text)}
.source-detail{font-family:'Barlow',sans-serif;font-size:16px;color:var(--text-muted)}
.connect-btn{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;flex-shrink:0;transition:border-color .15s,color .15s}
.connect-btn:hover{border-color:var(--sky-aqua);color:var(--sky-aqua)}

/* DOCUMENT VAULT */
/* ITEM 75 Part A: the fill was background:var(--border) with gap:1px — a muted wash AND
   hairline row dividers, both §2 breaches. Removed: transparent, separated by space only,
   content flush to the column edge (ITEM 70). §2's dock fill exemption untouched. */
.doc-vault-grid{display:flex;flex-direction:column;margin-top:20px;position:relative;z-index:1}
.doc-vault-item{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:16px;padding:14px 0}
/* ITEM 75 Part B: a lock over the vault — the client's own documents, held not published.
   A mark, not a wash (§2). Neutral, not sky: "secure" is a status and §1 bars hue from
   status. Sized to the panel (§3), quiet at .06 so the doc names stay fully legible. */
#panel-11{position:relative}
#panel-11 > .panel-landmark, #panel-11 > .panel-heading, #panel-11 > .panel-subtitle, #panel-11 > .doc-upload-btn{position:relative;z-index:1}
.vault-lock{position:absolute;top:52%;right:20px;transform:translateY(-50%);width:200px;height:200px;color:var(--text-dim);opacity:.06;pointer-events:none;z-index:0}
.doc-vault-item.doc-pending{opacity:.5}
.doc-type-badge{width:36px;height:36px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:800;letter-spacing:.06em;flex-shrink:0}
.doc-type-pdf{background:transparent;color:var(--text-muted);border:none}
.doc-type-ppt{background:transparent;color:#D85A30;border:1px solid #D85A30}
.doc-type-xls{background:transparent;color:var(--text-muted);border:none}
.doc-name{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:var(--text);letter-spacing:.02em}
.doc-detail{font-family:'Barlow',sans-serif;font-size:16px;color:var(--text-dim);margin-top:2px}
.doc-status{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;flex-shrink:0}
.doc-status-indexed{color:var(--text-muted);border:none;background:transparent}
.doc-status-pending{color:var(--text-dim);border:none}
.doc-upload-btn{margin-top:12px;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-aqua);background:transparent;border:1px dashed rgba(10,210,255,.3);padding:10px 0;width:100%;cursor:pointer;transition:border-color .15s,background .15s}
.doc-upload-btn:hover{border-color:var(--sky-aqua);background:rgba(10,210,255,.04)}

/* SEARCH & AI VISIBILITY */
.search-headline{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;color:var(--text);margin-bottom:16px}
.search-table{width:100%;border-collapse:collapse}
.search-table th{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);padding:6px 12px 10px 0;text-align:left}
.search-table td{padding:13px 12px 13px 0;vertical-align:top}
.search-query{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:500;color:var(--text)}
.search-channel-chip{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.1em;padding:2px 7px;background:transparent;border:1px solid var(--border);color:var(--text-muted)}
.status-chip{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.08em;padding:3px 8px;display:inline-block}
.status-absent{color:var(--text-muted);background:transparent;border:none}
.status-present_weak{color:var(--text-muted);background:transparent;border:none}
.status-present_strong{color:var(--text-muted);background:transparent;border:none}
.search-note-text{font-family:'Barlow',sans-serif;font-size:16px;color:var(--text-muted);margin-top:4px}

/* SOCIAL CHART */
.chart-wrap{height:200px;position:relative}

/* FILTER STATE */
.dimmed{opacity:.18;transition:opacity .25s}
.highlighted{opacity:1;transition:opacity .25s}
.filter-active .alert-item{opacity:.18;transition:opacity .25s}
.filter-active .cw-item{opacity:.18;transition:opacity .25s}
.filter-active .cw-item.brand-match{opacity:1}
.filter-active .alert-item.brand-match{opacity:1}
.filter-active .post-card{opacity:.18;transition:opacity .25s}
.filter-active .post-card.brand-match{opacity:1}
.map-circle{cursor:pointer;transition:opacity .25s}
.map-circle:hover{filter:brightness(1.3)}
.filter-banner{display:none;align-items:center;gap:12px;margin:6px 0 10px;padding:14px 18px;background:var(--surface-alt);border-left:3px solid var(--sky-aqua);font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.filter-banner.active{display:flex}
.filter-banner-clear{margin-left:auto;cursor:pointer;color:var(--sky-aqua);font-size:16px;letter-spacing:.1em;background:none;border:none;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;padding:0}
.filter-banner-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.map-circle.entity-picked .core{animation:clickPulse 1.1s ease-out 2}
@keyframes clickPulse{0%{stroke-width:2.5}40%{stroke-width:7}100%{stroke-width:2.5}}
.filter-banner-clear:hover{color:var(--text)}
.ranging-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ranging-brand-label{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--sky-aqua);letter-spacing:.08em}

/* SCROLLBAR */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border-light)}

/* ── DASHBOARD — MOBILE STACK ──
   Below 768px the side dock and left rail stop being fixed columns.
   Everything collapses to a single scrolling column: rail becomes a
   horizontal icon strip, main content goes full width, chat dock drops
   to the bottom of the flow as a normal block. */
@media(max-width:768px){
  .body-layout{flex-direction:column;padding-top:var(--dash-top,80px)}

  .left-rail{
    position:static;
    top:auto;left:auto;bottom:auto;
    width:100%;height:48px;
    flex-direction:row;
    border-right:none;border-bottom:1px solid var(--border);
    padding-top:0;
    overflow-x:auto;
  }
  .rail-icon{flex-shrink:0}
  .rail-icon.active::before{top:auto;bottom:0;left:8px;right:8px;width:auto;height:2px}

  .main-scroll{
    padding:20px 16px 48px 16px;
    padding-right:16px;
    overflow-y:visible;
  }

  .chat-dock{
    position:static;
    top:auto;right:auto;bottom:auto;
    width:100%;height:auto;
    border-left:none;border-top:1px solid var(--border);
  }
  .chat-thread{max-height:60vh}
}

/* ITEM 39 — phone fallback: the fixed top bar + status strip are the only
   things that break at ~375px (content wider than their fixed height collides).
   Keep them to one line so the 80px chrome offset still clears the body.
   This is a fallback, not a mobile format (parked, post-Friday). */
@media(max-width:600px){
  .wordmark{display:none}                 /* the centred workspace logo identifies it; the wordmark overflows into it */
  .status-strip{justify-content:flex-start;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;gap:8px;padding:0 12px}
  .status-strip::-webkit-scrollbar{display:none}
  .status-strip > *{flex-shrink:0}
  .map-z-key{flex-wrap:wrap}
  .map-z-items{flex-wrap:wrap}
  .posts-carousel{grid-template-columns:1fr}   /* 4 cols is unreadable at ~74px/card; stack them */
  .search-table,.ranging-table{display:block;overflow-x:auto;max-width:100%}  /* wide tables scroll, not overflow */
}

/* PANEL SUMMARY — "what's happening of late" caption under the eyebrow */
.panel-summary{font-family:'Barlow',sans-serif;font-size:16px;font-weight:300;line-height:1.6;color:var(--text-muted);margin:-4px 0 18px;max-width:760px;border-left:2px solid var(--border-light);padding-left:14px}

/* ══════════════════════════════════════════
   ON-BRAND / ON-PLAN — scored assessment panel
   ══════════════════════════════════════════ */
.obop-headline{display:flex;align-items:flex-start;gap:24px;padding:20px 0 24px;border-bottom:1px solid var(--border)}
.obop-score{flex-shrink:0;display:flex;flex-direction:column;gap:4px;min-width:120px}
.obop-score-num{font-family:'Barlow Condensed',sans-serif;font-size:44px;font-weight:800;line-height:1}
.obop-score-label{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}
.obop-status-pill{display:inline-flex;align-items:center;gap:6px;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;width:fit-content;margin-top:4px}
.obop-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.obop-headline-read{font-family:'Barlow',sans-serif;font-size:17px;font-weight:400;line-height:1.65;color:var(--text)}
.obop-s-on-plan .obop-score-num,.obop-s-on-plan .obop-status-pill{color:var(--text)}
.obop-s-on-plan .obop-status-dot{background:var(--text-dim)}
.obop-s-minor-drift .obop-score-num,.obop-s-minor-drift .obop-status-pill{color:var(--text)}
.obop-s-minor-drift .obop-status-dot{background:var(--text-dim)}
.obop-s-drifting .obop-score-num,.obop-s-drifting .obop-status-pill{color:var(--text)}
.obop-s-drifting .obop-status-dot{background:var(--text-dim)}
.obop-dims{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);margin-top:20px}
.obop-dim{background:var(--bg);padding:20px 24px;display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start}
.obop-dim-left{display:flex;flex-direction:column;gap:8px}
.obop-dim-name{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text);line-height:1.15}
.obop-dim-status{display:inline-flex;align-items:center;gap:6px;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;width:fit-content}
.obop-dim-status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.obop-dim.dim-on-plan .obop-dim-status{color:var(--teal)} .obop-dim.dim-on-plan .obop-dim-status-dot{background:var(--teal)}
.obop-dim.dim-minor-drift .obop-dim-status{color:var(--accent)} .obop-dim.dim-minor-drift .obop-dim-status-dot{background:var(--accent)}
.obop-dim.dim-drifting .obop-dim-status{color:var(--red)} .obop-dim.dim-drifting .obop-dim-status-dot{background:var(--red)}
.obop-dim-right{display:flex;flex-direction:column;gap:14px}
.obop-dim-read{font-family:'Barlow',sans-serif;font-size:17px;font-weight:400;line-height:1.6;color:var(--text-muted)}
.obop-sources{display:flex;flex-wrap:wrap;gap:8px}
.obop-chip{display:flex;flex-direction:column;gap:3px;padding:8px 12px;border:none;background:transparent;min-width:150px;flex:1}
.obop-chip-head{display:flex;align-items:center;gap:6px}
.obop-chip-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.obop-chip-label{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
/* ITEM 53: one provenance vocabulary board-wide. This was border:none dim caps that
   read as body copy; now it is the Corporate Posture illustrative badge (bordered pill),
   so a flag is unmistakably separable from the claim it labels. Neutral, no hue (§1:
   provenance is status, not identity). margin-left:auto kept for the flex chip contexts. */
/* ITEM 71: provenance badge was a whisper — border --border-light measured 1.22:1 on
   the ground (invisible). §1 bars hue, so the lever is value + weight like severity:
   border to --text-dim (7.94:1, reads as a real pill), text --text-dim -> --text-muted
   (12.51:1). Unmissable, but still below the claim's --text 17px (16.79:1) — a qualifier,
   not a headline. Both illustrative badges move together (one vocabulary, ITEM 53). */
.obop-chip-illus{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--text-dim);border-radius:2px;padding:1px 6px;margin-left:auto}
.obop-chip-note{font-family:'Barlow',sans-serif;font-size:16px;font-weight:300;line-height:1.45;color:var(--text-muted)}
.obop-chip.chip-on .obop-chip-dot{background:var(--teal)}
.obop-chip.chip-partial .obop-chip-dot{background:var(--accent)}
.obop-chip.chip-drift .obop-chip-dot{background:var(--red)}
.obop-divergence{display:flex;align-items:flex-start;gap:8px;margin-top:6px;padding:10px 14px;background:transparent;border:1px solid var(--red);border-radius:2px;width:100%}
.obop-divergence-icon{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:800;color:var(--text-muted);letter-spacing:.08em;flex-shrink:0}
.obop-divergence-note{font-family:'Barlow',sans-serif;font-size:17px;font-weight:400;line-height:1.5;color:var(--text-muted)}
.obop-sources-note{font-family:'Barlow',sans-serif;font-size:16px;font-weight:300;line-height:1.55;color:var(--text-dim);margin-top:16px;max-width:820px;border-left:2px solid var(--border-light);padding-left:14px}
@media(max-width:768px){
  .kpi-strip{grid-template-columns:repeat(2,1fr)}
  .obop-headline{flex-direction:column;gap:14px}
  .obop-dim{grid-template-columns:1fr;gap:14px}
  .obop-chip{min-width:100%}
}

/* ══════════════════════════════════════════
   COMPANY WATCH — corporate-angle intelligence feed
   Priority-striped like alerts; company tag + verified badge.
   ══════════════════════════════════════════ */
.cw-list{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
@media(max-width:768px){.cw-list{grid-template-columns:1fr}}
.cw-item{display:flex;gap:12px;padding:20px 0}
.cw-body{flex:1;display:flex;flex-direction:column;gap:6px}
.cw-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
/* ITEM 55: entity + provenance wrap as ONE unit so VERIFIED never orphans onto its own line. */
.cw-flag-group{display:inline-flex;align-items:baseline;gap:8px}
/* ITEM 55 + §4: corporate-only companies carry no identity hue — neutral corporate default,
   not sky (Cassandra's voice) and not the filter target's colour. */
.cw-company{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
/* ITEM 53: the provenance vocabulary, one family. Verified = clean muted text (the
   settled state); Illustrative = bordered pill (the flagged caveat). Same type values as
   .obop-chip-illus. Neutral, no hue (§1). The split reads via the border, not colour. */
.cw-verified{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);border:none;padding:1px 6px}
.cw-illustrative{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--text-dim);border-radius:2px;padding:1px 6px}
.cw-title{font-family:'Barlow',sans-serif;font-size:17px;font-weight:500;color:var(--text);line-height:1.35}
.cw-text{font-family:'Barlow',sans-serif;font-size:17px;font-weight:400;color:var(--text);line-height:1.6}
.cw-meta{display:flex;align-items:center;gap:12px;margin-top:2px}
.cw-source{font-family:'Barlow Condensed',sans-serif;font-size:16px;color:var(--blue);letter-spacing:.04em;text-decoration:underline;text-decoration-color:rgba(126,184,212,.3)}
.cw-time{font-family:'Barlow Condensed',sans-serif;font-size:16px;color:var(--text-muted)}

/* SCROLL-SPY SECTION RAIL (slice 7 Part E) — welcome.html gutter pattern */
/* Rail presence (S86 Part 1): the label is wayfinding — it fills the column it
   owns in full-strength product colour at all times; it IS the active state. */
.rail-spy{margin-top:24px;flex:1;display:flex;flex-direction:column;align-items:center;gap:14px;min-height:0}
.rail-spy-tick{width:3px;height:28px;background:var(--sky-aqua);flex-shrink:0}
.rail-spy-label{font-family:'Barlow Condensed',sans-serif;font-size:clamp(42px,6.2vh,64px);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sky-aqua);writing-mode:vertical-rl;transform:rotate(180deg);cursor:pointer;white-space:nowrap;line-height:1}
.rail-spy-label.long{font-size:clamp(34px,5vh,52px)}
.rail-spy-list{display:none;position:fixed;left:68px;top:var(--dash-top,80px);bottom:0;z-index:95;background:var(--bg);padding:28px 28px;flex-direction:column;gap:14px;align-items:flex-start}
.rail-spy-list.open{display:flex}
.rail-spy-item{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text);background:none;border:none;cursor:pointer;padding:0;text-align:left;transition:color .15s}
.rail-spy-item:hover{color:var(--sky-aqua)}
.rail-spy-item.current{color:var(--sky-aqua)}
@media(max-width:768px){.rail-spy,.rail-spy-list{display:none !important}}

/* ══════════════════════════════════════════
   LIVING MAP (slice 8) — motion vocabulary, tooltip, motion switch, reading key.
   Lifted from reference_living_map_v3.html; amplitudes scale from --mo (0/1).
   All conditioned in-template on data.map_vault; absent -> none of this renders.
   ══════════════════════════════════════════ */
.map-wrap{position:relative}
.map-svg .breathe{transform-box:fill-box;transform-origin:center;animation:mapBreathe 6s ease-in-out infinite}
@keyframes mapBreathe{0%,100%{transform:scale(1)}50%{transform:scale(calc(1 + .045*var(--mo,1)))}}
.map-svg .heart{transform-box:fill-box;transform-origin:center;animation:mapHeart 2.4s ease-in-out infinite}
@keyframes mapHeart{0%,100%{transform:scale(1)}12%{transform:scale(calc(1 + .07*var(--mo,1)))}24%{transform:scale(1)}}
.map-svg .ripple{transform-box:fill-box;transform-origin:center;animation:mapRipple var(--rip,4s) ease-out infinite;animation-delay:var(--ripd,0s)}
@keyframes mapRipple{0%{transform:scale(1);opacity:calc(.5*var(--mo,1))}80%{transform:scale(2.3);opacity:0}100%{transform:scale(2.3);opacity:0}}
.map-svg .edge{stroke-dasharray:3 6;animation:mapCrawl 2.6s linear infinite;opacity:.55;stroke-width:1.4}
@keyframes mapCrawl{to{stroke-dashoffset:-18}}
body.mo-low .map-svg .edge{animation:none}
.map-svg .sat{transform-box:fill-box;transform-origin:center;animation:mapFloat var(--fl,7s) ease-in-out infinite;animation-delay:var(--fld,0s)}
@keyframes mapFloat{0%,100%{transform:translate(0,0)}33%{transform:translate(calc(1.6px*var(--mo,1)),calc(-2px*var(--mo,1)))}66%{transform:translate(calc(-1.4px*var(--mo,1)),calc(1.4px*var(--mo,1)))}}
.map-svg .tether{opacity:.45;stroke-width:1}
.map-svg .sat{opacity:.6;stroke-width:1}
.map-svg g.satg{cursor:pointer}
.map-svg g.satg:hover .sat-core{filter:brightness(1.6)}
.map-svg g.entity:hover circle.core{filter:brightness(1.35)}

/* Tooltip — kind in node colour, title, meta */
/* ITEM 41: drift arrow arrival glide (live map only), reduced-motion safe */
@keyframes driftIn{from{opacity:0}to{opacity:.85}}
.drift-glide{animation:driftIn 1.4s ease-out 1}
@media(prefers-reduced-motion:reduce){.drift-glide{animation:none;opacity:.85}}
.map-tip{position:fixed;display:none;max-width:290px;background:var(--surface-alt);border:none;box-shadow:0 8px 32px rgba(0,0,0,.6);padding:12px 14px;z-index:150;pointer-events:none}
.map-tip-kind{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px}
.map-tip-title{font-family:'Barlow',sans-serif;font-size:16px;color:var(--text);line-height:1.45}
.map-tip-meta{font-family:'Barlow Condensed',sans-serif;font-size:12px;color:var(--text-dim);margin-top:6px;letter-spacing:.04em}

/* Motion switch — on/off, keyboard operable */
.motion-ctl{display:flex;align-items:center;gap:10px}
.motion-ctl label{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.map-switch{position:relative;width:40px;height:20px;background:var(--surface-alt);border-radius:10px;cursor:pointer;transition:background .2s;flex-shrink:0}
.map-switch::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--text-dim);transition:left .2s,background .2s}
.map-switch.on{background:var(--surface-alt)}
.map-switch.on::after{left:23px;background:var(--sky-aqua)}

/* Click-to-board flash: entity-colour tick sweeps in, title lifts */
.flash .alert-title,.flash .cw-title,.flash .post-content,.flash .synth-finding{animation:mapLift 2.4s ease-out}
@keyframes mapLift{0%{color:var(--sky-aqua)}100%{color:var(--text)}}

/* Reading key — the honesty legend, ships with the map */