/* shuriq-site.css — the Black Flag pitch, reskinned to the ShurIQ system.
 *
 * Alex 2026-07-31: "reskin … to our style that the deterministic renderer outputs … it only has an ambient
 * which is fine" and, mid-review: "make sure that this is building the ambient site."
 *
 * So this package carries TWO ShurIQ surfaces, exactly like the DBM port (the closest precedent):
 *   · the PITCH (index.html)  = the AMBIENT surface — deep-slate ground, cream ink, #6AA0FF accent,
 *     glass panels, mono-caps eyebrows. Grammar per shuriq-dbm/ambient + AMBIENT-PLAYBOOK.
 *   · the SUITE (suite/*)     = the light INSTRUMENT surface — white ground, Geist display,
 *     JetBrains Mono labels, cobalt. Grammar per shuriq-dbm/viz-hub/viz.css.
 *
 * Every color below is a canonical ShurIQ token VALUE, copied from
 * deterministic-report-renderer/design-system/tokens/tokens.css (--color-ambient-bg #21262E,
 * --color-accent-on-dark #6AA0FF, cream-60/30, --color-line #ECECEC, --color-cobalt #1E3A6E,
 * --color-accent #1E50C8, --color-critical #8B2020, --color-warm #C4A882). Values only — nothing here
 * imports from or runs the renderer.
 *
 * SCOPING: apply-skin.ts stamps <html data-shuriq-surface="ambient"|"instrument"> inside the marker
 * block, so the two dialects' token names (--bg, --panel, --accent collide across pages) never fight:
 * no global :root declarations exist in this file.
 *
 * LOADS LAST IN <head>, AFTER pitch.css AND the suite pages' inline <style>. Nothing is deleted;
 * stripping the marker block restores the delivered design byte-for-byte. Structure and copy untouched.
 *
 * The pitch's 13 D3 charts are fully token-driven (zero hex literals in index.html's chart JS), so
 * retargeting tokens restyles them untouched. The SUITE charts are only partly token-driven: their
 * categorical data palette is hardcoded in JS (kept verbatim per the DBM rule — new data, not new
 * geometry) and a handful of cream-era literals are overridden below via attribute selectors.
 */

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
 * SURFACE 1 — AMBIENT (the pitch, index.html)
 * ══════════════════════════════════════════════════════════════════════════════════════════════════ */

html[data-shuriq-surface="ambient"] {
  color-scheme: dark;

  /* ground — ambient deck slate, not the delivered cold near-black */
  --bg:        #21262E;
  --bg-raise:  rgba(255, 255, 255, 0.05);   /* glass panel */
  /* node boxes / bar tracks — GLASS, not a dark well: on the slate ground a dark inset reads as a
     black slab (the exact artifact the first reskin pass shipped) */
  --bg-inset:  rgba(255, 255, 255, 0.07);
  --panel:     rgba(255, 255, 255, 0.05);
  --line:        rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.30);

  /* ink — cream over slate (renderer cream / cream-60 / cream-30). faint/dim are LIFTED above the
     cream-30 floor because they also paint DATA (competitor bars/series, axis text) over the light
     gradient center — at 0.52/0.30 that data fell under 3:1 and effectively vanished. */
  --ink:       #FFFFFF;
  --ink-soft:  rgba(255, 255, 255, 0.78);
  --ink-faint: rgba(255, 255, 255, 0.68);
  --ink-dim:   rgba(255, 255, 255, 0.48);

  /* the one accent — accent-on-dark. The delivered amber does not exist in the ShurIQ system. */
  --accent:      #6AA0FF;
  --accent-soft: rgba(106, 160, 255, 0.14);
  --accent-line: rgba(106, 160, 255, 0.45);

  /* data semantics — lifted for the slate ground */
  --up:   #55B586;
  --down: #E0705F;
  --hold: rgba(255, 255, 255, 0.52);

  /* type — Geist display everywhere; the serif does not exist on ambient */
  --serif: "Geist", system-ui, -apple-system, sans-serif;
  --sans:  "Geist", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* combar palette for this surface */
  --sq-plate:      rgba(24, 27, 34, 0.62);
  --sq-plate-hi:   rgba(24, 27, 34, 0.88);
  --sq-plate-open: rgba(21, 24, 30, 0.97);
  --sq-ink:        #FFFFFF;
  --sq-soft:       rgba(255, 255, 255, 0.78);
  --sq-faint:      rgba(255, 255, 255, 0.52);
  --sq-dim:        rgba(255, 255, 255, 0.30);
  --sq-line:       rgba(255, 255, 255, 0.16);
  --sq-line-strong: rgba(255, 255, 255, 0.34);
  --sq-accent:      #6AA0FF;
  --sq-accent-soft: rgba(106, 160, 255, 0.14);
  --sq-accent-line: rgba(106, 160, 255, 0.45);
  --sq-hover:       rgba(255, 255, 255, 0.08);
  --sq-drawer:      #1A1E25;
  --sq-scrim:       rgba(8, 10, 14, 0.55);
}

/* ambient ground — the DBM radial slate, fixed so panels scroll over it */
html[data-shuriq-surface="ambient"] body {
  background: radial-gradient(120% 90% at 50% 42%, #5A6E8C 0%, #48586F 34%, #353F4E 62%, #21262E 100%)
              fixed #21262E;
  color: var(--ink);
}
/* film grain, the ambient texture layer. Sits under the fixed chrome (z 100+), rides over content at
   4% overlay — the same turbulence tile the DBM ambient uses. */
html[data-shuriq-surface="ambient"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-shuriq-surface="ambient"] ::selection { background: rgba(106, 160, 255, 0.30); color: #FFFFFF; }

/* ── cover — ambient hook panel: Geist light display over the ground itself ─────────────────────── */
html[data-shuriq-surface="ambient"] .cover { background: transparent; }
html[data-shuriq-surface="ambient"] .cover h1 {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(3rem, 8.5vw, 7.25rem);
  line-height: 1.04; letter-spacing: -0.02em; color: #FFFFFF;
}
html[data-shuriq-surface="ambient"] .cover .rule { background: var(--accent); height: 1px; width: 64px; }
html[data-shuriq-surface="ambient"] .cover .mark,
html[data-shuriq-surface="ambient"] .close .mark {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--ink-soft);
}
html[data-shuriq-surface="ambient"] .scroll-cue {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.24em; color: rgba(255, 255, 255, 0.5);
}

/* ── sections — one idea per viewport, mono eyebrow, Geist-light statement ──────────────────────── */
html[data-shuriq-surface="ambient"] .pitch { border-top: 0; }
html[data-shuriq-surface="ambient"] .sec-num {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--accent);
}
html[data-shuriq-surface="ambient"] .statement {
  font-family: var(--sans); font-weight: 300;
  /* one uniform size for every headline — sized down a notch so the long ones sit comfortably */
  font-size: clamp(1.75rem, 3.4vw, 2.85rem);
  line-height: 1.14; letter-spacing: -0.02em; color: #FFFFFF;
}
html[data-shuriq-surface="ambient"] .statement strong,
html[data-shuriq-surface="ambient"] .statement .brand { font-weight: 500; }
html[data-shuriq-surface="ambient"] .brand { font-family: var(--sans); font-weight: 500; letter-spacing: -0.01em; }
html[data-shuriq-surface="ambient"] .sub {
  font-weight: 300; font-size: clamp(1rem, 1.3vw, 1.14rem);
  line-height: 1.6; color: var(--ink-soft);
}
html[data-shuriq-surface="ambient"] .sub strong { color: #FFFFFF; font-weight: 500; }

/* ── charts + cards — glass over the gradient, hairline borders, no drop shadows ────────────────── */
html[data-shuriq-surface="ambient"] .chart,
html[data-shuriq-surface="ambient"] .card {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 12px;
}
html[data-shuriq-surface="ambient"] .card.hot { border-color: var(--accent-line); }
html[data-shuriq-surface="ambient"] .chart-label,
html[data-shuriq-surface="ambient"] .card-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--ink-faint);
}
html[data-shuriq-surface="ambient"] .card-eyebrow { color: var(--accent); }
html[data-shuriq-surface="ambient"] .card h3 {
  font-family: var(--sans); font-weight: 500; font-size: 1.24rem;
  letter-spacing: -0.01em; color: #FFFFFF;
}
html[data-shuriq-surface="ambient"] .card .metric .v {
  font-family: var(--sans); font-weight: 300; font-size: 1.5rem;
  letter-spacing: -0.02em; color: #FFFFFF;
}
html[data-shuriq-surface="ambient"] .card .metric .k { color: var(--accent); }
html[data-shuriq-surface="ambient"] .card .tag { border-radius: 999px; padding: 4px 10px; }
html[data-shuriq-surface="ambient"] .hint { color: var(--ink-dim); }

/* svg text inherits the token flip; only the black-defaulting marker needs help */
html[data-shuriq-surface="ambient"] .chart svg marker,
html[data-shuriq-surface="ambient"] .chart svg marker path,
html[data-shuriq-surface="ambient"] .chart svg marker polygon { fill: var(--ink-faint); }

/* ── prose expanders + dossier tables ───────────────────────────────────────────────────────────── */
html[data-shuriq-surface="ambient"] .sub-more summary,
html[data-shuriq-surface="ambient"] .dossier summary {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 400; color: var(--ink-soft);
  transition: color .2s ease;
}
/* neutral at rest — blue is the HOVER state, not the resting one */
html[data-shuriq-surface="ambient"] .sub-more summary:hover,
html[data-shuriq-surface="ambient"] .dossier summary:hover { color: var(--accent); }
html[data-shuriq-surface="ambient"] .dossier p,
html[data-shuriq-surface="ambient"] .sub-more p { color: var(--ink-soft); }
html[data-shuriq-surface="ambient"] .dossier th { color: #FFFFFF; }
html[data-shuriq-surface="ambient"] .dossier th,
html[data-shuriq-surface="ambient"] .dossier td { border-color: var(--line); color: var(--ink-soft); }

/* ── viewports grid + closing + footer ──────────────────────────────────────────────────────────── */
html[data-shuriq-surface="ambient"] .vp-grid { background: #21262E; }
html[data-shuriq-surface="ambient"] .vp-grid-title,
html[data-shuriq-surface="ambient"] .vp-card-title { font-family: var(--sans); font-weight: 400; color: #FFFFFF; }
html[data-shuriq-surface="ambient"] .vp-card { border-radius: 12px; }
html[data-shuriq-surface="ambient"] .close h2 {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(2.4rem, 7vw, 6rem); line-height: 1.05;
  letter-spacing: -0.02em; color: #FFFFFF;
}
html[data-shuriq-surface="ambient"] .close .mark { color: var(--accent); }
html[data-shuriq-surface="ambient"] footer { color: var(--ink-dim); border-color: var(--line); }

/* the pitch's own mode bar is replaced by the combar; this deck is ambient-only */
html[data-shuriq-surface="ambient"] .modebar { display: none !important; }

/* ══ AMBIENT CHROME — ported from shuriq-dbm/ambient (dots outline, orbits, reveals, snap) ══ */

/* hard snap: one section per screen, like the DBM ambient (its #main scroller is y-mandatory).
   The pitch scrolls the window, so the snap lives on the root. Both selectors carried: the delivered
   pitch.css sets proximity via html:has(body.mode-ambient) at (0,1,2) — the :has() variant here
   out-specifies it; the bare one covers engines without :has(). */
html[data-shuriq-surface="ambient"] { scroll-snap-type: y mandatory; }
html[data-shuriq-surface="ambient"]:has(body.mode-ambient) { scroll-snap-type: y mandatory; }
html[data-shuriq-surface="ambient"] .pitch,
html[data-shuriq-surface="ambient"] .cover,
html[data-shuriq-surface="ambient"] .close { scroll-snap-align: start; scroll-snap-stop: always; }

/* the delivered dot rail is superseded by the DBM dots outline */
html[data-shuriq-surface="ambient"] .rail { display: none !important; }

#orbits {
  position: fixed; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 1;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity .8s ease;
}
html[data-shuriq-surface="ambient"] .cover,
html[data-shuriq-surface="ambient"] .pitch,
html[data-shuriq-surface="ambient"] .close { position: relative; z-index: 1; }

#dots {
  position: fixed; right: 0; left: auto; top: 50%; transform: translateY(-50%); z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  padding: 18px 34px 18px 26px; cursor: pointer;
}
#dots .row { display: flex; flex-direction: row-reverse; align-items: center; gap: 0; min-height: 3px; }
#dots .row em, #dots .row .no { text-align: left; }
#dots .row i { width: 3px; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.42); transition: all .4s; display: block; flex-shrink: 0; }
#dots .row.on i { height: 18px; background: #FFFFFF; }
#dots .row em {
  font-style: normal; white-space: nowrap; overflow: hidden; width: 0; min-width: 0; opacity: 0; margin-left: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.78);
  transition: width .45s cubic-bezier(0.22, 1, 0.36, 1), opacity .35s, margin-left .45s;
}
#dots .row .no {
  font-style: normal; white-space: nowrap; overflow: hidden; max-width: 0; opacity: 0; margin-left: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8px; color: rgba(255, 255, 255, 0.42);
  transition: max-width .45s, opacity .35s, margin-left .45s;
}
body.outline-open #dots .row .no { max-width: 30px; opacity: 1; margin-left: 14px; margin-right: 16px; }
body.outline-open #dots .row em { width: 240px; opacity: 1; margin-left: 9px; }
#dots .row:hover em { color: #FFFFFF; }
#dots .row.on em { color: #FFFFFF; }
#dots .row.on .no { color: #6AA0FF; }

/* ── per-section reveal staggering (DBM .rv / .d1-.d4 pattern, applied to the pitch's own anatomy) ── */
html[data-shuriq-surface="ambient"] .pitch .sec-num,
html[data-shuriq-surface="ambient"] .pitch .statement,
html[data-shuriq-surface="ambient"] .pitch .sub,
html[data-shuriq-surface="ambient"] .pitch .sub-more,
html[data-shuriq-surface="ambient"] .pitch .stage,
html[data-shuriq-surface="ambient"] .pitch .dossier,
html[data-shuriq-surface="ambient"] .cover h1,
html[data-shuriq-surface="ambient"] .cover .rule,
html[data-shuriq-surface="ambient"] .cover .mark,
html[data-shuriq-surface="ambient"] .close h2,
html[data-shuriq-surface="ambient"] .close .mark {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s ease, transform .8s cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-shuriq-surface="ambient"] .pitch .statement,
html[data-shuriq-surface="ambient"] .cover .rule { transition-delay: .15s; }
html[data-shuriq-surface="ambient"] .pitch .sub,
html[data-shuriq-surface="ambient"] .cover .mark,
html[data-shuriq-surface="ambient"] .close .mark { transition-delay: .3s; }
html[data-shuriq-surface="ambient"] .pitch .sub-more { transition-delay: .38s; }
/* two-phase reveal: the TEXT column finishes its rise first, THEN the graph comes on */
html[data-shuriq-surface="ambient"] .pitch .dossier { transition-delay: .5s; }
html[data-shuriq-surface="ambient"] .pitch .stage { transition-delay: .9s; }
html[data-shuriq-surface="ambient"] .vis .sec-num,
html[data-shuriq-surface="ambient"] .vis .statement,
html[data-shuriq-surface="ambient"] .vis .sub,
html[data-shuriq-surface="ambient"] .vis .sub-more,
html[data-shuriq-surface="ambient"] .vis .stage,
html[data-shuriq-surface="ambient"] .vis .dossier,
html[data-shuriq-surface="ambient"] .cover.vis h1,
html[data-shuriq-surface="ambient"] .cover.vis .rule,
html[data-shuriq-surface="ambient"] .cover.vis .mark,
html[data-shuriq-surface="ambient"] .close.vis h2,
html[data-shuriq-surface="ambient"] .close.vis .mark { opacity: 1; transform: none; }
/* motion-reduced readers get everything immediately */
@media (prefers-reduced-motion: reduce) {
  html[data-shuriq-surface="ambient"] .pitch .sec-num, html[data-shuriq-surface="ambient"] .pitch .statement,
  html[data-shuriq-surface="ambient"] .pitch .sub, html[data-shuriq-surface="ambient"] .pitch .sub-more,
  html[data-shuriq-surface="ambient"] .pitch .stage, html[data-shuriq-surface="ambient"] .pitch .dossier,
  html[data-shuriq-surface="ambient"] .cover h1, html[data-shuriq-surface="ambient"] .cover .rule,
  html[data-shuriq-surface="ambient"] .cover .mark, html[data-shuriq-surface="ambient"] .close h2,
  html[data-shuriq-surface="ambient"] .close .mark { opacity: 1; transform: none; transition: none; }
}

/* ── the split panel: text | graph, with FOCUS mode — clicking a graph element slides the text
   off, the graph takes the left, and the readout module gets the right. .amb-focus mirrors the
   card's .hot state; the Back pill, empty-chart clicks, and Escape all switch back. ── */
@media (min-width: 1041px) {
  html[data-shuriq-surface="ambient"] .pitch.amb-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 0 56px;
    align-content: center;
    align-items: center;
    transition: grid-template-columns .55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .amb-txt {
    grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden;
    opacity: 1; transform: none;
    transition: opacity .35s ease, transform .5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage { grid-column: 2; grid-row: 1; align-self: center; }
  /* dossier dropdowns sit BELOW THE BODY TEXT (left column). Exception: #s6b (Our Product. Our
     Moat) has too much copy for that column — its dossier stays on the right, under the graph. */
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .dossier { grid-column: 1; grid-row: 2; margin-top: 18px; max-width: none; }
  html[data-shuriq-surface="ambient"] #s6b.pitch.amb-split > .dossier { grid-column: 2; }
  html[data-shuriq-surface="ambient"] .pitch.amb-split .statement { max-width: none; }

  /* FOCUS: the text column collapses and glides out, the stage spans everything */
  html[data-shuriq-surface="ambient"] .pitch.amb-split.amb-focus {
    grid-template-columns: minmax(0, 0.001fr) minmax(0, 1fr);
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split.amb-focus > .amb-txt {
    opacity: 0; transform: translateX(-56px); pointer-events: none;
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split.amb-focus > .dossier { opacity: 0; pointer-events: none; }
  /* stage becomes its own split: graph slides to the left track, readout module rides the right */
  html[data-shuriq-surface="ambient"] .pitch.amb-split.amb-focus > .stage {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 36px; align-items: start;
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split.amb-focus .stage .chart { grid-column: 1; grid-row: 1; }
  html[data-shuriq-surface="ambient"] .pitch.amb-split.amb-focus .stage aside.card {
    position: static; grid-column: 2; grid-row: 1;
    width: auto; max-height: none; overflow-y: auto; /* height cap comes from JS: content-conforming, section-frame max */
    opacity: 1; pointer-events: auto; transform: none;
  }
  /* the way back — parked at the LEFT edge (where the text slid out), out of the layout flow */
  .amb-back {
    display: none; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    z-index: 5; width: fit-content;
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7); background: rgba(16, 20, 28, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px;
    padding: 9px 16px; cursor: pointer; transition: all .25s;
  }
  .amb-back:hover { color: #FFFFFF; border-color: #6AA0FF; background: rgba(106, 160, 255, 0.10); }
  html[data-shuriq-surface="ambient"] .pitch.amb-split { position: relative; }
  html[data-shuriq-surface="ambient"] .pitch.amb-split.amb-focus .amb-back { display: inline-flex; }
}

/* graph + readout COMBINED, on EVERY ambient graph (split and full-width alike): the chart owns
   the whole stage (bigger graph), and the readout card is hidden until a click paints it (.hot),
   then overlays the chart's lower-right as a glass pop-over. The chart's own "CLICK A …" hint
   keeps the affordance visible in the idle state — the separate empty leader box is gone. */
html[data-shuriq-surface="ambient"] .pitch .stage { display: block; position: relative; }
html[data-shuriq-surface="ambient"] .pitch .stage .chart { width: 100%; }
/* copy + graph must share ONE viewport: cap the chart's height so the section never overflows the
   snap screen. Wide full-width charts scale down (aspect preserved, centered); split-column charts
   get a taller allowance since the text sits beside them. */
html[data-shuriq-surface="ambient"] .pitch.amb-full .stage .chart svg {
  width: auto; height: auto; max-width: 100%; max-height: 42vh; margin: 0 auto; display: block;
}
html[data-shuriq-surface="ambient"] .pitch.amb-split .stage .chart svg { max-height: 62vh; }
html[data-shuriq-surface="ambient"] .pitch.amb-full { padding-top: calc(var(--shell-h, 64px) + 2vh); padding-bottom: 4vh; }
html[data-shuriq-surface="ambient"] .pitch .stage aside.card {
  position: absolute; right: 14px; bottom: 14px;
  width: min(52%, 400px); max-height: 78%; overflow-y: auto;
  min-height: 0; margin: 0;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .28s ease, transform .28s cubic-bezier(0.22, 1, 0.36, 1);
  background: rgba(16, 20, 28, 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-color: var(--accent-line);
  scrollbar-width: thin;
}
html[data-shuriq-surface="ambient"] .pitch .stage aside.card.hot {
  opacity: 1; pointer-events: auto; transform: none;
}


/* room for the fixed combar plate */
html[data-shuriq-surface="ambient"] .pitch,
html[data-shuriq-surface="ambient"] .close,
html[data-shuriq-surface="ambient"] .cover { padding-top: calc(var(--shell-h, 92px) + 4vh); }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
 * SURFACE 2 — INSTRUMENT (the suite: index + five viewports)
 * Light instrument grammar per shuriq-dbm/viz-hub/viz.css. The suite pages carry two token dialects
 * (01/02: --bg/--text/--border · index/03/04/05: --bg-deep/--panel-bg/--border-color); both retarget.
 * ══════════════════════════════════════════════════════════════════════════════════════════════════ */

html[data-shuriq-surface="instrument"] {
  /* dialect A (01, 02) */
  --bg:         #FFFFFF;
  --bg-alt:     #F5F5F5;
  --text:       #111111;
  --text-faint: #8C8C8A;
  --border:     #ECECEC;
  --panel:      #FFFFFF;
  /* dialect B (index, 03, 04, 05) */
  --bg-deep:      #FFFFFF;
  --panel-bg:     #FFFFFF;
  --border-color: #ECECEC;
  --accent:       #1E3A6E;
  /* shared */
  --cobalt:   #1E3A6E;
  /* --critical stays the suite's own #A33A2A: page 05 hardcodes that red in JS, so retargeting the
     token would ship two different reds across pages. #A33A2A ≈ ShurIQ crimson #A6202A — in-system. */
  --critical: #A33A2A;
  /* --warm #C4A882 is kept: it is a canonical ShurIQ token (renderer --color-warm) and sits in the
     DBM viz categorical set. */
  --font-sans:  "Geist", system-ui, -apple-system, sans-serif;
  --font-serif: "Geist", system-ui, -apple-system, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* combar palette for this surface */
  --sq-plate:      rgba(255, 255, 255, 0.82);
  --sq-plate-hi:   rgba(255, 255, 255, 0.96);
  --sq-plate-open: #FFFFFF;
  --sq-ink:        #111111;
  --sq-soft:       #444444;
  --sq-faint:      #8C8C8A;
  --sq-dim:        #BBBBBB;
  --sq-line:       #ECECEC;
  --sq-line-strong: rgb(0 0 0 / 25%);
  --sq-accent:      #1E50C8;
  --sq-accent-soft: rgb(30 80 200 / 8%);
  --sq-accent-line: rgb(30 80 200 / 32%);
  --sq-hover:       rgb(17 17 17 / 4%);
  --sq-drawer:      #FFFFFF;
  --sq-scrim:       rgb(17 17 17 / 34%);
}

html[data-shuriq-surface="instrument"] body { background: #FFFFFF; color: #111111; }

/* the suite's own fixed chrome is superseded by the combar — three stacked headers is the bug */
html[data-shuriq-surface="instrument"] .running-header,
html[data-shuriq-surface="instrument"] .back-nav { display: none !important; }
html[data-shuriq-surface="instrument"] .container { padding-top: calc(var(--shell-h, 92px) + 34px); }

/* ── type — Geist display, mono eyebrows, per the viz.css grammar ───────────────────────────────── */
html[data-shuriq-surface="instrument"] .title {
  font-family: var(--font-sans); font-weight: 300;
  letter-spacing: -0.025em; line-height: 1.06; color: #111111;
}
html[data-shuriq-surface="instrument"] .subtitle { color: #444444; }
html[data-shuriq-surface="instrument"] .eyebrow {
  font-family: var(--font-mono); font-weight: 600; font-size: 11px;
  letter-spacing: 0.22em; color: var(--cobalt);
}
html[data-shuriq-surface="instrument"] .panel-label,
html[data-shuriq-surface="instrument"] .read-eyebrow {
  font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.16em; color: var(--cobalt);
}
html[data-shuriq-surface="instrument"] .read-name,
html[data-shuriq-surface="instrument"] .panel-subhead {
  font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.01em;
}
html[data-shuriq-surface="instrument"] .read-body { color: #444444; }
html[data-shuriq-surface="instrument"] .read-body strong { color: var(--cobalt); }
html[data-shuriq-surface="instrument"] .panel-body { color: #444444; }

/* every literal Playfair reference → Geist (the family no longer loads; without these the fallback is
   the browser serif). Covers the class-based declarations on 03/04/05 AND the SVG texts whose
   font-family arrives as a presentation attribute (CSS wins over presentation attributes). */
html[data-shuriq-surface="instrument"] .dim-score { font-family: var(--font-sans); font-weight: 500; }
html[data-shuriq-surface="instrument"] .composite-num { font-family: var(--font-sans); font-weight: 300; letter-spacing: -0.02em; }
html[data-shuriq-surface="instrument"] .readout-score-val { font-family: var(--font-sans); font-weight: 300; letter-spacing: -0.02em; }
html[data-shuriq-surface="instrument"] .room-label { font-family: var(--font-sans); font-weight: 500; }
html[data-shuriq-surface="instrument"] .bridge-node-label { font-family: var(--font-sans); font-weight: 500; }
html[data-shuriq-surface="instrument"] .bar-val,
html[data-shuriq-surface="instrument"] .rank-pos,
html[data-shuriq-surface="instrument"] .rank-score { font-family: var(--font-sans); font-weight: 400; }
html[data-shuriq-surface="instrument"] svg [font-family*="Playfair"] { font-family: var(--font-sans); }

/* ── panels — white card grammar: 1px #ECECEC line, 10px radius, #F5F5F5 wells ──────────────────── */
html[data-shuriq-surface="instrument"] .graph-panel {
  background: #FFFFFF; border: 1px solid #ECECEC; border-radius: 10px; box-shadow: none;
}
html[data-shuriq-surface="instrument"] .read-panel,
html[data-shuriq-surface="instrument"] .side-panel,
html[data-shuriq-surface="instrument"] .caption-card {
  background: #FFFFFF; border: 1px solid #ECECEC; border-radius: 10px;
}
html[data-shuriq-surface="instrument"] .read-panel.hot {
  border-color: var(--cobalt); box-shadow: 0 1px 8px rgba(30, 58, 110, 0.10);
}

/* ── controls — mono-caps pills, cobalt accents ─────────────────────────────────────────────────── */
html[data-shuriq-surface="instrument"] .forward-link a {
  font-family: var(--font-mono); border: 1px solid #ECECEC; border-radius: 999px;
  background: #FFFFFF; color: var(--cobalt);
}
html[data-shuriq-surface="instrument"] .forward-link a:hover { background: var(--cobalt); color: #FFFFFF; }
html[data-shuriq-surface="instrument"] .read-clear-btn { background: var(--cobalt); border-radius: 999px; }
html[data-shuriq-surface="instrument"] .read-clear-btn:hover { background: #1E50C8; }
html[data-shuriq-surface="instrument"] .legend-item:hover,
html[data-shuriq-surface="instrument"] .legend-item.active { background: rgba(30, 58, 110, 0.07); }

/* residual cream-era literals: page 04's tooltip and page 05's JS-set label backplates
   (CSS beats SVG presentation attributes, so the attribute selector reaches the setAttribute fills) */
html[data-shuriq-surface="instrument"] .tooltip { background: rgba(17, 17, 17, 0.96); color: #FFFFFF; }
html[data-shuriq-surface="instrument"] svg rect[fill="#FAF8F5"] { fill: #FFFFFF; }

/* The COMBAR is no longer styled here. It is the DBM combar, ported verbatim:
 * markup + behavior in shuriq-combar.js, rules in shuriq-combar.css. This file keeps only the
 * page-surface layers and the shell offset the content pads against. */
html[data-shuriq-surface] { --shell-h: 64px; }

/* ── print — a pitch deck WILL get Cmd+P'd. Browsers drop background paint by default, which would
   put cream ink on white paper. Flip the ambient surface to dark-on-white for print. ─────────────── */
@media print {
  html[data-shuriq-surface="ambient"] {
    --ink: #111111; --ink-soft: #444444; --ink-faint: #6B6B6B; --ink-dim: #999999;
    --line: rgba(0, 0, 0, 0.16); --line-strong: rgba(0, 0, 0, 0.32);
    --bg-raise: #F5F5F5; --bg-inset: #EFEFEF; --panel: #F5F5F5;
    --accent: #1E50C8; --accent-soft: rgba(30, 80, 200, 0.10); --accent-line: rgba(30, 80, 200, 0.35);
  }
  html[data-shuriq-surface="ambient"] body { background: #FFFFFF; color: #111111; }
  html[data-shuriq-surface="ambient"] body::after { display: none; }
  html[data-shuriq-surface="ambient"] .cover h1,
  html[data-shuriq-surface="ambient"] .statement,
  html[data-shuriq-surface="ambient"] .close h2,
  html[data-shuriq-surface="ambient"] .card h3,
  html[data-shuriq-surface="ambient"] .card .metric .v { color: #111111; }
  html[data-shuriq-surface="ambient"] .sub strong,
  html[data-shuriq-surface="ambient"] .card p strong { color: #111111; }
  #combar, #cb-scrim, #m-drawer, #cb-scrim.open { display: none !important; }
}

/* ── responsive ── */
@media (max-width: 1536px) { html[data-shuriq-surface="instrument"] { zoom: 0.95; } }

/* eyebrows carry the title only; the number stays in the DOM (pill + outline read it) but not on screen */
html[data-shuriq-surface="ambient"] .sec-num .sec-no { display: none; }

/* the ambient scroll indicator — the renderer/DBM animated chevron under the SCROLL label */
html[data-shuriq-surface="ambient"] .scroll-cue {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: opacity .4s ease;
}
html[data-shuriq-surface="ambient"] .scroll-cue::after {
  content: ""; width: 14px; height: 14px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.55);
  transform: rotate(45deg);
  animation: bf-hsdrop 1.8s ease-in-out infinite;
}
@keyframes bf-hsdrop {
  0%, 100% { transform: rotate(45deg) translate(-2px, -2px); opacity: 0.35; }
  50% { transform: rotate(45deg) translate(2px, 2px); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) { html[data-shuriq-surface="ambient"] .scroll-cue::after { animation: none; } }




/* page 05's key-figures band: WRAP into a grid instead of scrolling horizontally */
html[data-shuriq-surface="instrument"] .figs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  overflow-x: visible; padding-bottom: 0;
}
html[data-shuriq-surface="instrument"] .figs-card { flex: none; width: auto; }

/* click-to-learn-more affordance: a soft accent glow breathes on every interactive target so the
   clickable pieces read as clickable — brighter on hover, calm otherwise */
@keyframes bf-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(106, 160, 255, 0.22)); }
  50% { filter: drop-shadow(0 0 9px rgba(106, 160, 255, 0.42)); }
}
html[data-shuriq-surface="ambient"] .node-hit .n-fill,
html[data-shuriq-surface="ambient"] .bar,
html[data-shuriq-surface="ambient"] .curve-hit {
  animation: bf-glow 3.4s ease-in-out infinite;
}
html[data-shuriq-surface="ambient"] .node-hit:hover .n-fill,
html[data-shuriq-surface="ambient"] .node-hit.sel .n-fill,
html[data-shuriq-surface="ambient"] .bar:hover,
html[data-shuriq-surface="ambient"] .curve-hit:hover {
  animation: none;
  filter: drop-shadow(0 0 12px rgba(106, 160, 255, 0.65));
}
/* no glow shadows on the launcher rows — neutral rest, accent hover (Alex) */
html[data-shuriq-surface="ambient"] .sub-more summary,
html[data-shuriq-surface="ambient"] .dossier summary,
html[data-shuriq-surface="ambient"] .sub-more summary:hover,
html[data-shuriq-surface="ambient"] .dossier summary:hover {
  text-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  html[data-shuriq-surface="ambient"] .node-hit .n-fill,
  html[data-shuriq-surface="ambient"] .bar,
  html[data-shuriq-surface="ambient"] .curve-hit { animation: none; }
}

/* the cursor tooltip — mono caps on a dark glass pill, accent tick, rides beside the pointer */
#bf-tip {
  position: fixed; z-index: 210; left: -9999px; top: -9999px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88);
  background: rgba(16, 20, 28, 0.92); border: 1px solid rgba(106, 160, 255, 0.45);
  border-radius: 999px; padding: 7px 13px; pointer-events: none; white-space: nowrap;
  opacity: 0; transform: translateY(3px);
  transition: opacity .18s ease, transform .18s ease;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#bf-tip.on { opacity: 1; transform: none; }

/* dossier tables inside a split column: shrink to the column instead of clipping at 640px */
html[data-shuriq-surface="ambient"] .pitch.amb-split .dossier table { min-width: 0; width: 100%; }
html[data-shuriq-surface="ambient"] .pitch.amb-split .dossier th,
html[data-shuriq-surface="ambient"] .pitch.amb-split .dossier td { overflow-wrap: anywhere; }

/* the closing slide's Team link — house mono pill, accent on hover */
.close-team {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 30px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none;
  color: rgba(255, 255, 255, 0.78); border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px; padding: 11px 20px; transition: all .25s;
}
/* the ↗ rides the text's optical center: sized to cap height, flex-centered, no baseline drift */
.close-team span {
  color: #6AA0FF; font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; transform: translateY(-0.5px);
}
.close-team:hover { color: #FFFFFF; border-color: #6AA0FF; background: rgba(106, 160, 255, 0.10); text-decoration: none; }

/* flywheel nodes: near-opaque slate so the re-ordered ring arrows terminate cleanly at the circles */
html[data-shuriq-surface="ambient"] #s6b .chart .n-fill { fill: rgba(32, 38, 48, 0.94); }

/* ══ focus-mode polish (overrides): slower, softer slide; the text stays as a ghosted hint on the
   left with a gradient falloff; the readout module enters AFTER the slide settles ══ */
@media (min-width: 1041px) {
  html[data-shuriq-surface="ambient"] .pitch.amb-split {
    transition: grid-template-columns .46s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* the module waits for the slide, then rises in */
  html[data-shuriq-surface="ambient"] .pitch.amb-split.amb-focus .stage aside.card {
    opacity: 0; transform: translateY(14px);
    /* still waits for the slide — but the whole sequence is now roughly half as long,
       so the readout lands in about half a second instead of over a second */
    animation: bf-module-in .28s cubic-bezier(0.22, 1, 0.36, 1) .47s forwards;
  }
  @keyframes bf-module-in { to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    html[data-shuriq-surface="ambient"] .pitch.amb-split { transition: none; }
    html[data-shuriq-surface="ambient"] .pitch.amb-split.amb-focus .stage aside.card { animation: none; opacity: 1; transform: none; }
  }
}

/* ══ smooth-slide overrides: plain fr tracks (minmax blocks interpolation — plain fr animates),
   and the stage is ALWAYS a grid so the chart glides to its focus width instead of jumping ══ */
@media (min-width: 1041px) {
  html[data-shuriq-surface="ambient"] .pitch.amb-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  html[data-shuriq-surface="ambient"] .pitch.amb-split > * { min-width: 0; }
  html[data-shuriq-surface="ambient"] .pitch.amb-split.amb-focus { grid-template-columns: minmax(0, 0fr) minmax(0, 12fr); }
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage {
    /* 7fr — NOT 1fr — is what stops the chart lurching. The section widens the stage
       from 7/12 to 12/12 while the stage splits its own tracks; with 1fr the chart's
       share collapses faster than the stage grows and the product dips to 46% before
       recovering (the visible jump). Holding this track at 7fr, matching the focus
       state, makes the chart's absolute width constant: only the card opens beside it. */
    display: grid; grid-template-columns: 7fr 0fr; gap: 0; position: relative; align-items: start;
    /* one shorthand carries BOTH jobs: the focus grid glide (no delay) AND the section reveal
       (opacity/transform, delayed so the TEXT column finishes rising before the graph comes on) */
    transition: grid-template-columns .46s cubic-bezier(0.22, 1, 0.36, 1), gap .46s cubic-bezier(0.22, 1, 0.36, 1),
                opacity .8s ease .9s, transform .8s cubic-bezier(0.22, 1, 0.36, 1) .9s;
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage .chart { grid-column: 1; grid-row: 1; }
  /* A plain `fr` track carries an automatic min-content floor. When the readout enters
     the flow it therefore snaps track 2 open to its intrinsic width — squeezing the chart
     for a few frames before the animation catches up, which is the jump. Pinning the card
     to a zero minimum lets track 2 open from nothing, smoothly. */
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage > aside.card {
    /* min-width:0 alone does not let this track close: under content-box the padding
       still forms a ~50px floor, so the readout steals that width from the chart the
       instant it enters the flow — the visible jump. border-box lets it reach zero. */
    grid-column: 2; grid-row: 1; min-width: 0; box-sizing: border-box; overflow: hidden;
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split.amb-focus > .stage { grid-template-columns: 7fr 5fr; gap: 36px; }
  html[data-shuriq-surface="ambient"] .pitch.amb-split.amb-focus .stage aside.card { grid-column: 2; grid-row: 1; min-width: 0; }
  @media (prefers-reduced-motion: reduce) { html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage { transition: none; } }
}

/* no dot-plus-text anywhere: the pulsing status dot before badges is hidden (text carries it) */
html[data-shuriq-surface="instrument"] .feed-banner .pulse,
html[data-shuriq-surface="instrument"] .pulse { display: none !important; }


/* ══ focus slide, final form: the header/body text physically moves OFF to the left — no ghost,
   no gradient. Its pixel width is locked by JS while in flight so nothing squishes or rewraps. ══ */
@media (min-width: 1041px) {
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .amb-txt {
    transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1), opacity .5s ease, filter .5s ease;
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split.amb-focus > .amb-txt {
    /* slides off, but a HINT stays at the left edge: blurred, gradient falloff to the right */
    transform: translateX(-86%); opacity: 0.35; pointer-events: none;
    filter: blur(3px);
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 45%, rgba(0,0,0,0.35) 75%, transparent 96%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,1) 45%, rgba(0,0,0,0.35) 75%, transparent 96%);
  }
}

/* dossiers ride inside their column's flow (moved there at runtime) */
@media (min-width: 1041px) {
  html[data-shuriq-surface="ambient"] .amb-txt > .dossier { margin-top: 20px; max-width: none; }
  html[data-shuriq-surface="ambient"] #s6b .stage > .dossier { grid-column: 1; grid-row: 2; margin-top: 16px; max-width: none; }
  html[data-shuriq-surface="ambient"] .pitch.amb-split.amb-focus .stage > .dossier { opacity: 0; pointer-events: none; }
}

/* ══ v62 — the dossier sheet: dossier content opens a full-screen glass sheet instead of
   expanding inline. Inline expansion can never show the long dossiers (each section is a
   one-viewport snap panel — an 11k-char table has nowhere to go). The summary rows stay in
   place as a compact index; the content renders in the sheet at full width and scrolls. ══ */
html[data-shuriq-surface="ambient"] body.sheet-open { overflow: hidden; }
/* the rows are launchers now, not dropdowns — swap the disclosure triangle for the house ↗ */
html[data-shuriq-surface="ambient"] .dossier summary { list-style: none; }
html[data-shuriq-surface="ambient"] .dossier summary::-webkit-details-marker { display: none; }
html[data-shuriq-surface="ambient"] .dossier summary::after {
  content: "\2197"; color: rgba(255, 255, 255, 0.45); margin-left: 8px;
  /* sized up to the text's cap height and baseline-trued — the glyph rides low at font size */
  display: inline-block; font-size: 13px; line-height: 1; vertical-align: -1px;
  letter-spacing: 0;
}
html[data-shuriq-surface="ambient"] .dossier summary:hover::after { color: var(--accent); }

#bf-sheet {
  position: fixed; inset: 0; z-index: 1100; display: none;
  background: rgba(14, 17, 23, 0.62);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  padding: clamp(18px, 4vh, 44px) clamp(14px, 4vw, 56px);
}
/* centered, NOT stretched — a short dossier gets a short panel; only long content fills the frame */
#bf-sheet.on { display: flex; justify-content: center; align-items: center; animation: bf-sheet-in .28s ease; }
@keyframes bf-sheet-in { from { opacity: 0; } to { opacity: 1; } }
#bf-sheet .sh-panel {
  position: relative; display: flex; flex-direction: column;
  width: min(1120px, 100%); max-height: 100%; overflow: hidden;
  /* neutral GLASS, not a blue slab — the blurred slide shows through */
  background: rgba(255, 255, 255, 0.055);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  animation: bf-panel-in .4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes bf-panel-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
#bf-sheet .sh-head {
  flex: 0 0 auto; padding: clamp(24px, 4vh, 40px) clamp(24px, 4vw, 52px) 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
#bf-sheet .sh-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 10px;
}
#bf-sheet .sh-title {
  font-family: var(--sans); font-weight: 300; font-size: clamp(21px, 2.6vw, 32px);
  line-height: 1.2; color: #FFFFFF; margin: 0; letter-spacing: -0.01em;
  padding-right: 56px;
}
#bf-sheet .sh-x {
  position: absolute; top: 20px; right: 20px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px;
  color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px;
  cursor: pointer; transition: all .2s;
}
#bf-sheet .sh-x:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.6); }
/* the body carries the `dossier` class so the delivered dossier typography (tables, ths,
   the .tbl scroller) applies to the cloned content — then sheet-scale upgrades on top */
#bf-sheet .sh-body {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; max-width: none;
  padding: 22px clamp(24px, 4vw, 52px) clamp(28px, 5vh, 48px);
}
#bf-sheet .sh-body p { font-size: 0.95rem; line-height: 1.7; max-width: 88ch; color: rgba(255, 255, 255, 0.82); }
#bf-sheet .sh-body p strong { color: #FFFFFF; }
#bf-sheet .sh-body .tbl { margin: 1.1rem 0; }
#bf-sheet .sh-body table { width: 100%; min-width: 640px; font-size: 0.82rem; }
#bf-sheet .sh-body th { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.16); }
#bf-sheet .sh-body td { color: rgba(255, 255, 255, 0.78); border-color: rgba(255, 255, 255, 0.16); line-height: 1.55; }

/* ══ v65 — gap radar: the reading panel matches the graph container's height exactly (its
   list scrolls inside); pan/zoom on the main instruments clips at the panel edge ══ */
html[data-shuriq-surface="instrument"] .viz-interface:has(#radar) { align-items: stretch; }
html[data-shuriq-surface="instrument"] .viz-interface:has(#radar) .side-panel {
  max-height: none; min-height: 0; height: auto;
}
html[data-shuriq-surface="instrument"] .graph-panel { overflow: hidden; }

/* ══ v66 — the closing frame carries the delivered footer text (moved in at runtime): the
   confidential + disclaimer lines show ON the last frame instead of below the snap fold ══ */
html[data-shuriq-surface="ambient"] .close { position: relative; }
html[data-shuriq-surface="ambient"] .close footer {
  position: absolute; left: 0; right: 0; bottom: 3.2vh;
  border-top: 0; padding: 0 5vw; background: transparent;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9px;
  letter-spacing: 0.14em; line-height: 2; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22); text-align: center;
}

/* ══ v68 — consecutive body paragraphs get real paragraph spacing (the delivered reset zeroes
   all margins, so multi-paragraph sections read as one giant block) ══ */
html[data-shuriq-surface="ambient"] .pitch .sub + .sub { margin-top: 0.9em; }

/* ══ v73 — outline hover: no plate behind the dots — the REST OF THE PAGE blurs instead,
   so the expanded section names read sharp over a softened slide ══ */
html[data-shuriq-surface="ambient"] body.outline-open::before {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  background: rgba(20, 24, 31, 0.18);
  animation: bf-veil .3s ease;
}
@keyframes bf-veil { from { background: rgba(20, 24, 31, 0); } }

/* ══ v71 — the warm tan (#C4A882) is retired from the instrument surface entirely (Alex:
   "terrible color, we don't want to see this anywhere"). Every use remaps to the house
   palette: cobalt for meta labels/flags, accent for bridge arcs, neutral gray for "weak". ══ */
html[data-shuriq-surface="instrument"] {
  --warm: #1E3A6E;        /* meta labels, pin badges, running-header issue line */
  --color-weak: #8B94A6;  /* "weak" data semantic → neutral gray, not tan */
  --bridge: #1E50C8;      /* what-closes-it arcs → accent */
}
/* the tan rgba literals (borders/fills) → cobalt at matching strengths */
html[data-shuriq-surface="instrument"] .read-pin-controls {
  background: rgba(30, 58, 110, 0.06); border-color: rgba(30, 58, 110, 0.28);
}
html[data-shuriq-surface="instrument"] .model-note {
  background: rgba(30, 58, 110, 0.05); border-color: rgba(30, 58, 110, 0.25);
}
html[data-shuriq-surface="instrument"] .feed-banner {
  border-color: rgba(30, 58, 110, 0.30); background: rgba(30, 58, 110, 0.05);
}
html[data-shuriq-surface="instrument"] .rank-row.modeled { background: rgba(30, 58, 110, 0.06); }

/* ══ v74 — quote-source citations: small mono caps, dim — the bold carries the voice ══ */
html[data-shuriq-surface="ambient"] .bf-cite {
  font-style: normal; font-family: var(--mono); font-size: 0.62em;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim);
  margin-left: 6px; white-space: nowrap;
}

/* ══ v78 — the ← Back pill belongs to the focus-slide grammar, which only exists at desktop
   widths (min-width 1041px). On narrow viewports there is no slide to come back from. ══ */
@media (max-width: 1040px) {
  html[data-shuriq-surface="ambient"] .amb-back { display: none !important; }
}

/* ══ v79 — s9 Vision: the "More" content renders INLINE (no dropdown), scaled down so the
   full text sits in the column. Text verbatim — only size and spacing change. ══ */
html[data-shuriq-surface="ambient"] #s9 .sub-more { margin-top: 14px; max-width: none; }
html[data-shuriq-surface="ambient"] #s9 .sub-more summary { display: none; }
html[data-shuriq-surface="ambient"] #s9 .sub-more p.sub {
  font-size: 0.84rem; line-height: 1.55; color: var(--ink-faint); max-width: 62ch;
}
html[data-shuriq-surface="ambient"] #s9 .sub-more p.sub + p.sub { margin-top: 0.55em; }
/* the lead-in matches the paragraph above it — only the three completions run smaller.
   (:first-of-type, NOT :first-child — the <summary> is the details' first child) */
html[data-shuriq-surface="ambient"] #s9 .sub-more p.sub:first-of-type {
  color: var(--ink-soft); font-size: clamp(1rem, 1.3vw, 1.14rem);
}

/* ══ v83 — s11: the "More" (the ask — "All that's missing is you") shows INLINE, no dropdown.
   Closing-ask copy at a slightly smaller tier; the bolded ask line keeps full weight. ══ */
html[data-shuriq-surface="ambient"] #s11 .sub-more { margin-top: 14px; max-width: none; }
html[data-shuriq-surface="ambient"] #s11 .sub-more summary { display: none; }
html[data-shuriq-surface="ambient"] #s11 .sub-more p.sub {
  /* same size as the body copy above it (Alex, 2026-07-31) */
  font-size: clamp(1rem, 1.3vw, 1.14rem); line-height: 1.6; color: var(--ink-soft); max-width: 62ch;
}
html[data-shuriq-surface="ambient"] #s11 .sub-more p.sub + p.sub { margin-top: 0.6em; }

/* ══ v86 — no hairline between the raise section and the closing frame (the delivered
   .close carries a border-top that reads as a stray rule mid-scroll) ══ */
html[data-shuriq-surface="ambient"] .close { border-top: 0; }

/* ══ v88 — phone widths: the dots rail overlaps stacked content — the burger drawer carries
   navigation there, so the rail retires below 700px ══ */
@media (max-width: 1120px) {
  /* the Contents panel carries section nav below 1120 — the dots rail retires with it,
     and the cursor tooltip has no cursor to ride on touch */
  html[data-shuriq-surface="ambient"] #dots { display: none; }
  #bf-tip { display: none !important; }
}

/* ══ v104 — s6b (Our Product. Our Moat) reads in TWO STEPS: paras 1-2 first, the next
   page-turn crossfades in paras 3-4 IN PLACE. Each step carries half the copy, so the
   type runs at full size again. Narrow screens (no pager) show all four stacked. ══ */
@media (min-width: 1041px) {
  html[data-shuriq-surface="ambient"] #s6b .bf-steps { overflow: hidden; position: relative; }
  html[data-shuriq-surface="ambient"] #s6b .bf-track {
    transition: transform .65s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform;
  }
  html[data-shuriq-surface="ambient"] #s6b .bf-step + .bf-step { margin-top: 18px; }
  /* the OTHER step peeks through a gradient falloff at the window's edge */
  html[data-shuriq-surface="ambient"] #s6b[data-step="0"] .bf-steps {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 76px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - 76px), transparent 100%);
  }
  html[data-shuriq-surface="ambient"] #s6b[data-step="1"] .bf-steps {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 76px);
    mask-image: linear-gradient(180deg, transparent 0, #000 76px);
  }
  html[data-shuriq-surface="ambient"] #s6b .bf-step p.sub {
    font-size: clamp(1rem, 1.3vw, 1.14rem); line-height: 1.6;
  }
}

/* ══ v103 — the Technology index: the first two links belong together (the stack + its
   table), so only the separator between THEM is removed — the rest keep their hairlines ══ */
html[data-shuriq-surface="ambient"] #s5 .dossier details:nth-of-type(2) { border-top: 0; }

/* ══ v109 — no "More" dropdowns anywhere: every sub-more shows open, summary hidden.
   (s9 and s11 carry their own sizing above; this is the general rule + s1.) ══ */
html[data-shuriq-surface="ambient"] .sub-more summary { display: none; }
html[data-shuriq-surface="ambient"] .sub-more { margin-top: 12px; max-width: none; }

/* ══ v111 — the Listen pill (localhost narration preview; the button only exists there) ══ */
#bf-listen {
  position: fixed; left: 22px; bottom: 22px; z-index: 220;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75); background: rgba(16, 20, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px;
  padding: 9px 16px; cursor: pointer; transition: all .25s;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#bf-listen:hover { color: #FFFFFF; border-color: var(--accent); background: rgba(106, 160, 255, 0.12); }

/* ══ v116 — the audio PLAYER, ported from the shuriq-dbm ambient (the house Listen bar):
   bottom-pinned dark frost, play/pause, animated wave, title + issue code, time, speed set,
   close, and the tick-marked scrubber with the section tooltip. Retinted cyan → the pitch's
   #6AA0FF accent; geometry and behavior verbatim. ══ */
#bf-player{position:fixed;left:0;right:0;bottom:0;z-index:820;background:rgba(8,8,8,0.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#EDEDED;
  transform:translateY(110%);transition:transform .5s cubic-bezier(0.22,1,0.36,1);border-top:1px solid rgba(255,255,255,0.08)}
#bf-player.open{transform:none}
#bf-player .pbar{display:flex;align-items:center;gap:18px;padding:14px 28px 16px;max-width:1440px;margin:0 auto}
#bf-player button{background:none;border:none;color:#EDEDED;cursor:pointer;font-family:inherit}
#pplay{width:34px;height:34px;border-radius:99px;border:1px solid rgba(255,255,255,0.3)!important;font-size:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0}
#pplay .pic-play{display:block;margin-left:1px}
#pplay .pic-pause{display:none}
#bf-player.playing #pplay .pic-play{display:none}
#bf-player.playing #pplay .pic-pause{display:block;margin-left:0}
#bf-player .wave{display:flex;align-items:flex-end;gap:2px;height:14px;flex-shrink:0}
#bf-player .wave i{width:2.5px;background:#6AA0FF;height:4px}
#bf-player.playing .wave i{animation:wv 0.9s ease-in-out infinite alternate}
#bf-player .wave i:nth-child(2){animation-delay:.15s}#bf-player .wave i:nth-child(3){animation-delay:.3s}#bf-player .wave i:nth-child(4){animation-delay:.45s}
@keyframes wv{from{height:3px}to{height:14px}}
#ptitle{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ptitle em{font-style:normal;color:rgba(255,255,255,0.45);margin-left:10px;font-size:12px}
#ptime{font-size:12px;color:rgba(255,255,255,0.55);font-variant-numeric:tabular-nums;margin-left:auto;white-space:nowrap}
#bf-player .spd{display:flex;gap:12px}
#bf-player .spd button{font-size:12px;color:rgba(255,255,255,0.45)}
#bf-player .spd button.on{color:#6AA0FF}
#pclose{font-size:15px;color:rgba(255,255,255,0.45)!important}
#ptrack{position:relative;height:5px;background:rgba(255,255,255,0.12);cursor:pointer}
#ptrack::before{content:"";position:absolute;left:0;right:0;bottom:0;height:30px;z-index:1}
#pfill{position:absolute;left:0;top:0;height:100%;background:#6AA0FF;width:0%}
#ptrack .tick{position:absolute;top:0;width:1.5px;height:100%;background:rgba(0,0,0,0.55);z-index:2}
#ptip{position:absolute;bottom:16px;left:0;transform:translateX(-50%) translateY(4px);white-space:nowrap;
 font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;
 background:rgba(8,8,8,0.96);color:#EDEDED;border:1px solid rgba(255,255,255,0.14);padding:6px 11px;border-radius:6px;
 opacity:0;visibility:hidden;transition:opacity .16s,transform .16s;pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,0.45);z-index:5}
#ptip::after{content:"";position:absolute;top:100%;left:var(--ax,50%);transform:translateX(-50%);border:4px solid transparent;border-top-color:rgba(8,8,8,0.96)}
#ptrack.tipping #ptip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
#ptrack:hover{height:7px;margin-top:-3px}

/* ══ v121 — the player's MOBILE treatment, ported from the shuriq-dbm ambient (≤600px):
   floating inset bottom pill, dark frost, big round play button, chevron fold-down that
   reveals the scrubber + speed pill. Desktop ornaments (wave, speed row, ticks, tooltip)
   retire on small screens. ══ */
@media (max-width:600px){
  #bf-player{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;
    background:rgba(10,12,18,0.78);-webkit-backdrop-filter:blur(26px) saturate(125%);backdrop-filter:blur(26px) saturate(125%);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:20px;overflow:hidden;box-shadow:0 18px 46px rgba(0,0,0,0.5);
    display:flex;flex-direction:column;transform:translateY(calc(100% + 30px));transition:transform .42s cubic-bezier(0.22,1,0.36,1)}
  #bf-player.open{transform:none}
  #bf-player .wave{display:none}
  #bf-player .spd{display:none}
  #bf-player #ptip{display:none}
  #ptrack .tick{display:none!important}
  #bf-player .pbar{order:0;flex-wrap:nowrap;padding:11px 12px 11px 11px;gap:11px;max-width:none;margin:0;align-items:center}
  #pplay{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,0.28)!important;
    flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;font-size:0;
    background:rgba(255,255,255,0.08);color:#fff;transition:background .2s,border-color .2s}
  #pplay:active{background:rgba(255,255,255,0.16)}
  #pplay .pic-play{display:block;margin-left:2px}
  #pplay .pic-pause{display:none}
  #bf-player.playing #pplay .pic-play{display:none}
  #bf-player.playing #pplay .pic-pause{display:block;margin-left:0}
  #ptitle{font-size:13.5px;font-weight:500;line-height:1.3;flex:1 1 auto;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
  #ptitle em{display:none}
  #ptime{font-size:11.5px;flex-shrink:0;font-variant-numeric:tabular-nums;color:rgba(255,255,255,0.62)}
  #pspeed{flex-shrink:0;border:1px solid rgba(255,255,255,0.22)!important;border-radius:999px;
    padding:6px 11px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.02em;color:rgba(255,255,255,0.85);
    background:rgba(255,255,255,0.05);min-height:30px;display:none;align-items:center;justify-content:center}
  #pspeed:active{background:rgba(255,255,255,0.12)}
  #pfold{flex-shrink:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,0.62);padding:0;background:none;border:none;cursor:pointer}
  #pfold svg{transition:transform .34s cubic-bezier(0.22,1,0.36,1)}
  #bf-player.expanded #pfold svg{transform:rotate(180deg)}
  #pclose{min-width:30px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
    font-size:15px!important;color:rgba(255,255,255,0.5)!important;padding:0}
  #ptrack{order:1;position:relative;cursor:pointer;background:rgba(255,255,255,0.14);
    height:0;margin:0 14px;border-radius:999px;overflow:hidden;opacity:0;
    transition:height .34s cubic-bezier(0.22,1,0.36,1),margin .34s cubic-bezier(0.22,1,0.36,1),opacity .24s ease}
  #ptrack:hover{height:0;margin-top:0}
  #pfill{border-radius:999px}
  #bf-player.expanded #ptrack{height:6px;margin:2px 14px 16px;opacity:1}
  #bf-player.expanded #ptrack:hover{height:6px}
  #bf-player.expanded #pspeed{display:inline-flex}
}
/* pspeed + pfold are mobile-only controls — desktop never shows them */
@media (min-width:601px){#pspeed,#pfold{display:none}}



/* ══ v127 — the closed mobile player parks WELL off-screen (the +30px margin left its top
   edge peeking above real-device toolbars) ══ */
@media (max-width:600px){
  #bf-player{transform:translateY(calc(100% + 90px))}
  #bf-player.open{transform:none}
}

/* ══ v128 — mobile scroll cue: clears device toolbars, and yields entirely while the
   player bar occupies the bottom edge ══ */
@media (max-width: 1120px) {
  html[data-shuriq-surface="ambient"] .scroll-cue {
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  }
  html[data-shuriq-surface="ambient"] body:has(#bf-player.open) .scroll-cue {
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
  }
}

/* ══ v129 — programmatic jumps suspend the hard snap (iOS captures smooth scrolls and
   yanks them back to the current snap point); the .snap-off class is JS-managed ══ */
html[data-shuriq-surface="ambient"].snap-off,
html[data-shuriq-surface="ambient"].snap-off:has(body.mode-ambient) { scroll-snap-type: none !important; }

/* ══ v130 — the scrubber owns its touches (page must not pan while scrubbing) ══ */
#ptrack { touch-action: none; }


/* ══ v132 — MOBILE DECK: one full-screen slide per section, exactly like desktop — but each
   slide SCROLLS INSIDE ITSELF (headline → body → graph → dossier rows). When the slide is
   read to its end, the swipe chains to the root and snaps to the next slide. A soft fade at
   the slide edge cues "more below" until the content is exhausted. ══ */
@media (max-width: 1040px) {
  html[data-shuriq-surface="ambient"],
  html[data-shuriq-surface="ambient"]:has(body.mode-ambient) { scroll-snap-type: y mandatory; }
  html[data-shuriq-surface="ambient"] .pitch,
  html[data-shuriq-surface="ambient"] .cover,
  html[data-shuriq-surface="ambient"] .close { scroll-snap-align: start; scroll-snap-stop: always; }
  html[data-shuriq-surface="ambient"] .pitch {
    height: 100vh; height: 100dvh; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 13vh 6vw 10vh;
  }
  html[data-shuriq-surface="ambient"] .cover,
  html[data-shuriq-surface="ambient"] .close { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  /* more-below cue: sticky fade riding the slide bottom while content remains */
  html[data-shuriq-surface="ambient"] .pitch.m-more::after {
    content: ""; position: sticky; display: block; bottom: -10vh; left: 0; right: 0;
    height: 64px; margin: -64px -6vw 0; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(24, 29, 38, 0.72));
  }
}

/* ══ v133 — the dossier sheet on MOBILE: full-screen reading, and its tables pan
   edge-to-edge with momentum instead of clipping ══ */
@media (max-width: 1040px) {
  #bf-sheet { padding: 0; }
  #bf-sheet .sh-panel { width: 100%; height: 100%; max-height: 100%; border-radius: 0; border: none; }
  #bf-sheet .sh-head { padding: calc(18px + env(safe-area-inset-top, 0px)) 18px 14px; }
  #bf-sheet .sh-title { font-size: 19px; padding-right: 48px; }
  #bf-sheet .sh-body { padding: 16px 18px calc(28px + env(safe-area-inset-bottom, 0px)); }
  #bf-sheet .sh-body .tbl {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 1rem -18px; padding: 0 18px; touch-action: pan-x pan-y;
  }
  #bf-sheet .sh-body table { font-size: 0.78rem; min-width: 640px; }
}

/* ══ v139 — MOBILE text|graph panels, JS-swiped: native x-scroll deadlocked vertical touch
   (mixed-axis nested snap), so the panels now sit stacked and SLIDE via transform on a
   horizontal swipe. Vertical gestures never leave the browser: panels scroll natively and
   chain to the deck snap. ══ */
@media (max-width: 1040px) {
  html[data-shuriq-surface="ambient"] .pitch.amb-split { display: grid; overflow: hidden; padding: 0; }
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .amb-txt,
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage {
    grid-area: 1 / 1; width: 100%; height: 100%; min-width: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y;
    padding: 13vh 6vw 10vh; box-sizing: border-box; margin: 0;
    transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage { transform: translateX(100%); }
  html[data-shuriq-surface="ambient"] .pitch.amb-split[data-panel="graph"] > .amb-txt { transform: translateX(-100%); }
  html[data-shuriq-surface="ambient"] .pitch.amb-split[data-panel="graph"] > .stage { transform: none; }
  html[data-shuriq-surface="ambient"] .pitch.amb-split.m-more::after { content: none; }
}

/* ══ v137 — mobile panels center their content in the viewport when it fits; panels that
   overflow keep top-flow so nothing clips (the .m-centered class is measured by JS) ══ */
@media (max-width: 1040px) {
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .m-centered {
    display: flex; flex-direction: column; justify-content: center;
  }
}

/* ══ v138 — sheet tables on MOBILE linearize into stacked row-cards: each row is a bordered
   card, each cell led by its mono column label. Replaces the giant panning table. ══ */
@media (max-width: 1040px) {
  #bf-sheet .sh-body .tbl { margin: 1rem 0; padding: 0; overflow: visible; }
  #bf-sheet .sh-body table { display: block; min-width: 0; width: 100%; }
  #bf-sheet .sh-body thead, #bf-sheet .sh-body tr:first-child:not(:has(td)) { display: none; }
  #bf-sheet .sh-body tbody, #bf-sheet .sh-body tr, #bf-sheet .sh-body td { display: block; width: 100%; }
  #bf-sheet .sh-body tr {
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 10px; background: rgba(255, 255, 255, 0.04);
  }
  #bf-sheet .sh-body tr:has(th) { display: none; }
  #bf-sheet .sh-body td { border: none; padding: 4px 0; font-size: 0.82rem; line-height: 1.5; overflow-wrap: anywhere; }
  #bf-sheet .sh-body td::before {
    content: attr(data-label); display: block;
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8.5px;
    letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
    margin-bottom: 2px;
  }
  #bf-sheet .sh-body td:first-child { font-weight: 500; color: #FFFFFF; }
}

/* v141 mobile Moat removed — superseded by the single-column window below */



/* ══ v144 — mobile: the deck is JS-paged (touch pager) — the CSS snap stands down so the
   two movers never fight ══ */
@media (max-width: 1040px) {
  html[data-shuriq-surface="ambient"],
  html[data-shuriq-surface="ambient"]:has(body.mode-ambient) { scroll-snap-type: none; }
}

/* ══ v145 — suite viz pages on MOBILE: fixed-height instrument SVGs letterboxed into huge
   blank bands on narrow screens — they size to their own aspect instead. Panels and cards
   tighten to the phone frame. ══ */
@media (max-width: 700px) {
  html[data-shuriq-surface="instrument"] .graph-panel svg,
  html[data-shuriq-surface="instrument"] .pentagon-svg { height: auto !important; }
  html[data-shuriq-surface="instrument"] .graph-panel { padding: 10px; }
  html[data-shuriq-surface="instrument"] .side-panel { width: 100% !important; }
  html[data-shuriq-surface="instrument"] .caption-card { padding: 16px; }
}

/* ══ v146 — the GRAPH LENS (mobile): tap the expand pill on any chart and it floats
   full-screen over a blur, ROTATED to landscape so wide instruments render large ══ */
.bf-expand { display: none; }
@media (max-width: 1040px) {
  html[data-shuriq-surface="ambient"] .pitch.amb-split .chart { position: relative; }
  .bf-expand {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 8px; right: 8px; z-index: 6;
    width: 34px; height: 34px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(16, 20, 28, 0.55);
    color: rgba(255, 255, 255, 0.85); font-size: 14px; cursor: pointer;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
}
#bf-lens {
  /* POPUP grammar: sits UNDER the combar (z 700 < 800) so the header stays visible;
     the veil blurs the page, the content floats as a glass card */
  position: fixed; inset: 0; z-index: 700; display: none;
  background: rgba(14, 17, 23, 0.5);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  padding: calc(128px + env(safe-area-inset-top, 0px)) 6px calc(10px + env(safe-area-inset-bottom, 0px));
}
#bf-lens.on { display: block; animation: bf-sheet-in .25s ease; }
#bf-lens.on { display: flex; flex-direction: column; justify-content: center; animation: bf-sheet-in .25s ease; }
#bf-lens .lens-panel {
  /* hug the chart: a short diagram gets a compact card, a long list fills and scrolls */
  position: relative; flex: 0 1 auto; min-height: 0; max-height: 100%; width: 100%;
  display: flex; flex-direction: column;
  background: rgba(20, 25, 33, 0.82); border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
#bf-lens .lens-rot {
  position: relative; flex: 1 1 auto; min-height: 0; display: block;
  overflow: auto; -webkit-overflow-scrolling: touch;
  padding: 52px 0 12px; touch-action: pan-x pan-y;
}
#bf-lens .lens-rot .chart { width: 100%; max-width: none; margin: 0; }
#bf-lens .lens-rot .chart svg { width: 100%; height: auto !important; max-height: none; }
#bf-lens .lens-x {
  position: absolute; z-index: 6; top: 12px; right: 12px;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 15px;
  color: rgba(255, 255, 255, 0.85); background: rgba(16, 20, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; cursor: pointer;
}

/* ══ v148 — MOBILE: no panel swipe. Slides show the TEXT; the graph opens via the
   "View the graph" pill into the full-screen rotated lens. ══ */
/* ══ MOBILE: the graph shares the slide, it does not open a window over it.
   Swipe left and the copy recedes — scaled back, blurred, dimmed — while the
   graph rises into the space it left. Swipe right and the copy returns. ══ */
@media (max-width: 1040px) {
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage {
    display: block; z-index: 2; pointer-events: none;
    transform: translateX(6%) scale(0.98); opacity: 0;
    transition: transform .42s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s ease;
    /* same 6vw gutter the copy uses, so the two panels line up when you swipe between
       them, and real air under the combar instead of butting against it */
    padding: calc(146px + env(safe-area-inset-top, 0px)) 6vw calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto;
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split[data-panel="graph"] > .stage {
    transform: none; opacity: 1; pointer-events: auto;
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .amb-txt {
    z-index: 1; transform: none;
    transition: transform .42s cubic-bezier(0.22, 1, 0.36, 1), opacity .32s ease, filter .32s ease;
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split[data-panel="graph"] > .amb-txt {
    transform: scale(0.94); opacity: 0.22; filter: blur(3px);
  }
  /* the chart floats in the reclaimed space — no window, no frame around a frame */
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage > .chart {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important;
  }
  /* a graph that fits sits centred in the space it was handed; one that overflows
     flows from the top so it can scroll */
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage.m-gfit {
    display: flex; flex-direction: column; justify-content: center; align-items: stretch;
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage > aside.card {
    /* the desktop instrument offsets this card to sit beside its chart; in the slide
       it must share the chart's own box exactly */
    position: relative; left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
    width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
    min-height: 0 !important; margin-top: 14px;
    padding: 13px 40px 14px 15px !important;
  }
  .bf-view { display: none !important; }
  /* the swipe, named. An arrow and the side it leads to, pinned to the edge you
     swipe from — right for the graph, left to come back. */
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .pan-nav {
    position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: block;
  }
  html[data-shuriq-surface="ambient"] .pan-nav .pn-seg {
    display: none; position: absolute; bottom: 0; pointer-events: auto;
    align-items: center; gap: 7px; background: none; border: 0; padding: 8px 0; cursor: pointer;
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9px;
    letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45);
  }
  html[data-shuriq-surface="ambient"] .pan-nav .pn-seg i {
    font-style: normal; font-size: 14px; line-height: 1; color: rgba(106, 160, 255, 0.85);
  }
  /* on the copy: bottom right, pointing out to the graph */
  html[data-shuriq-surface="ambient"] .pitch.amb-split:not([data-panel="graph"]) .pn-seg[data-go="graph"] {
    display: flex; right: 6vw; animation: bf-swipe-hint 2.8s ease-in-out infinite;
  }
  /* on the graph: bottom left, pointing back */
  html[data-shuriq-surface="ambient"] .pitch.amb-split[data-panel="graph"] .pn-seg[data-go="text"] {
    display: flex; left: 6vw; animation: bf-swipe-hint-back 2.8s ease-in-out infinite;
  }
  @keyframes bf-swipe-hint {
    0%, 100% { transform: translateX(0); opacity: 0.72; }
    50% { transform: translateX(4px); opacity: 1; }
  }
  @keyframes bf-swipe-hint-back {
    0%, 100% { transform: translateX(0); opacity: 0.72; }
    50% { transform: translateX(-4px); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    html[data-shuriq-surface="ambient"] .pan-nav .pn-seg { animation: none !important; opacity: 0.9; }
  }
  /* the hint sits under the content, never on it */
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage {
    /* clear the swipe hint even when scrolled to the very end of a long graph */
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .amb-txt.m-centered {
    padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
@media (min-width: 1041px) { .bf-view { display: none; } }
#bf-lens .lens-rot .stage { max-width: none; margin: 0 auto; display: block; padding: 0 14px; box-sizing: border-box; }
#bf-lens .lens-rot .stage .chart { min-height: 0 !important; height: auto !important; display: flex; flex-direction: column; gap: 12px; }
#bf-lens .lens-rot .stage svg { width: 100%; height: auto; display: block; }
#bf-lens .lens-rot .stage .chart { width: 100%; max-width: none; margin: 0; }
#bf-lens .lens-rot .stage .chart svg { width: 100%; height: auto !important; max-height: none; }

/* ══ v149 — READOUTS IN THE LENS: tapping a node opens the card as a readable overlay
   inside the rotated frame — larger, scrollable, glass over the chart's right side ══ */
#bf-lens .stage { position: relative; }
@media (max-width: 1040px) {
  /* the readout is its OWN ROW below the chart — never an overlap */
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage > aside.card {
    position: static; display: none; flex: 0 0 auto; width: auto;
    margin: 0 0 calc(12px + env(safe-area-inset-bottom, 0px));
    max-height: 40vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: rgba(16, 20, 28, 0.95); opacity: 1; transform: none; pointer-events: auto;
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage > aside.card.hot { display: block; }
}

/* v161 mobile Moat removed — its !important overrides silently blocked every later fix */


/* the lens zoom toggle — whole chart by default, 2x for detail */
#bf-lens .lens-z {
  position: absolute; z-index: 6; top: 12px; right: 60px;
  min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px;
  color: rgba(255, 255, 255, 0.85); background: rgba(16, 20, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; cursor: pointer; padding: 0 12px;
}
#bf-lens.zoomed .lens-z { color: #6AA0FF; border-color: rgba(106, 160, 255, 0.6); }

/* the Moat dossier rows ride into the graph popup — pin them to the visible width */
#bf-lens .lens-rot .stage .dossier {
  position: sticky; left: 0; width: calc(100vw - 54px); max-width: 640px;
  box-sizing: border-box; margin-top: 18px;
}

/* ── MOBILE only: the rebuilt row-cards that stand in for the desktop SVG lists.
   These classes exist solely in the mobile relayout, and every rule stays inside
   this media block so the desktop instrument is never touched. ── */
@media (max-width: 1040px) {
  .lens-list { display: flex; flex-direction: column; gap: 9px; padding: 2px 0 8px; }
  .lens-list .ll-head {
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px;
    letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
    margin: 10px 2px 2px;
  }
  .lens-list .ll-cap { font-size: 12.5px; color: rgba(255, 255, 255, 0.6); margin: 6px 2px; }
  .lens-list .ll-row {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; text-align: left;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px; padding: 12px 14px; cursor: pointer; color: inherit; font: inherit;
  }
  .lens-list .ll-row.on { border-color: rgba(106, 160, 255, 0.65); background: rgba(106, 160, 255, 0.08); }
  .lens-list .ll-num {
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px;
    color: rgba(106, 160, 255, 0.9); flex: 0 0 auto;
  }
  .lens-list .ll-title { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.92); }
  .lens-list .ll-mono {
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px;
    letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); flex-basis: 100%;
  }
  .lens-list .ll-bars { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
  .lens-list .ll-bar { display: flex; align-items: center; gap: 8px; }
  .lens-list .lb-l {
    flex: 0 0 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px;
    letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.5);
  }
  .lens-list .lb-t { flex: 1 1 auto; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
  .lens-list .lb-t i { display: block; height: 100%; border-radius: 3px; background: rgba(255, 255, 255, 0.38); }
  .lens-list .lb-t i.ours { background: #6AA0FF; }
  .lens-list .lb-v {
    flex: 0 0 26px; text-align: right;
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; color: rgba(255, 255, 255, 0.7);
  }
}

/* the stage carries deck classes (m-centered padding) into the popup — neutralize there */
#bf-lens .lens-rot .stage,
#bf-lens .lens-rot .stage.m-centered {
  padding: 0 14px 6px !important;
}



/* ── locked sections: the frame holds still, the fitbox sizes to it ── */
@media (max-width: 1040px) {
  html[data-shuriq-surface="ambient"] section.pitch .amb-txt { overflow: hidden !important; }
  html[data-shuriq-surface="ambient"] section.pitch .amb-txt > .fitbox {
    /* scale from the TOP: the frame's top edge is the fixed reference, so shrinking
       to fit pulls the tail up into view instead of splitting the overflow in two */
    width: 100%; transform-origin: top center; transition: transform .2s ease;
  }
}

/* ── the in-slide readout: compact and dismissable. MOBILE ONLY — the desktop
   instrument keeps its reserved block and its own type scale. ── */
@media (max-width: 1040px) {
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage > aside.card {
    position: relative; min-height: 0 !important; padding: 13px 40px 14px 15px !important;
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage > aside.card .card-eyebrow {
    font-size: 9px !important; margin-bottom: 6px !important; letter-spacing: 0.16em;
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage > aside.card h3 {
    font-size: 14.5px !important; line-height: 1.25 !important; margin-bottom: 6px !important;
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage > aside.card p,
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage > aside.card li {
    font-size: 12px !important; line-height: 1.5 !important;
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage > aside.card .card-x {
    position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; line-height: 1; color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px; cursor: pointer; padding: 0;
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage > aside.card .card-x:active {
    background: rgba(255, 255, 255, 0.14);
  }
}
/* the dismiss never renders in the desktop instrument */
@media (min-width: 1041px) { .card-x { display: none !important; } }

/* the first two Technology dossiers are one thought — the rule between them was
   removed, so the full row padding read as a hole. Tighten the pair to match. */
#s5 .dossier details:nth-of-type(1) { padding-bottom: 4px !important; }
#s5 .dossier details:nth-of-type(2) { padding-top: 4px !important; }

/* the closing colophon is a whisper on a phone, not a paragraph */
@media (max-width: 1040px) {
  html[data-shuriq-surface="ambient"] footer {
    font-size: 7px !important; line-height: 1.5 !important; letter-spacing: 0.06em !important;
    padding: 0 18px !important;
  }
  html[data-shuriq-surface="ambient"] footer br { display: none; }
}

/* the in-place graph sizes to the slide the same way the popup used to */
@media (max-width: 1040px) {
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage .chart svg {
    width: 100%; height: auto !important; max-height: none; display: block;
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split > .stage .chart { min-height: 0 !important; height: auto !important; }
}

/* the open graph panel scrolls on its own; the locked copy behind it does not */
@media (max-width: 1040px) {
  html[data-shuriq-surface="ambient"] .pitch.amb-split[data-panel="graph"] > .stage {
    touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
}

/* ── Vision, mobile: the three completions stay CONDENSED — plain lines that open on a
   chevron, no boxes and no rules. Containers made the section longer than the copy. ── */
@media (max-width: 1040px) {
  #s9 .v-acc { border: 0; background: none; border-radius: 0; margin: 0; overflow: hidden; }
  #s9 .v-acc-h {
    display: flex; align-items: baseline; justify-content: flex-start; gap: 8px; width: 100%;
    background: none; border: 0; padding: 7px 0; cursor: pointer; text-align: left;
    color: rgba(255, 255, 255, 0.9); font: inherit; font-size: 0.84rem; font-weight: 600; line-height: 1.45;
  }
  #s9 .v-acc-h i {
    font-style: normal; font-size: 15px; line-height: 1; color: rgba(106, 160, 255, 0.9);
    flex: 0 0 auto; order: 2; transform: rotate(90deg); transform-origin: 50% 50%;
    transition: transform 0.28s ease;
  }
  #s9 .v-acc.open .v-acc-h i { transform: rotate(270deg); }
  #s9 .v-acc.open .v-acc-h { color: #fff; }
  #s9 .v-acc-b { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease; }
  #s9 .v-acc.open .v-acc-b { max-height: 420px; opacity: 1; }
  #s9 .v-acc-b p { margin: 0; padding: 0 0 9px; font-size: 0.84rem; line-height: 1.5; color: rgba(255, 255, 255, 0.62); }
}

/* the panel control is a MOBILE affordance only — the desktop layout shows both
   panels at once and must never render it */
.pan-nav { display: none; }
@media (max-width: 1040px) { html[data-shuriq-surface="ambient"] .pitch.amb-split > .pan-nav { display: flex; } }

/* ── The Moat, mobile: ONE card, ONE column. The two delivered beats stop being
   boxes (display: contents) so their paragraphs form a single strip, and the
   strip is read through a fixed window that slides. ── */
@media (max-width: 1040px) {
  html[data-shuriq-surface="ambient"] #s6b .bf-step {
    display: contents !important;
    max-height: none !important; opacity: 1 !important;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  html[data-shuriq-surface="ambient"] #s6b .bf-steps {
    position: relative; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 99%);
    mask-image: linear-gradient(180deg, #000 76%, transparent 99%);
  }
  html[data-shuriq-surface="ambient"] #s6b .bf-steps > * {
    transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  /* the two beats stopped being boxes, so the paragraph rhythm has to come from the
     paragraphs themselves — otherwise the seam between them closes up */
  /* the paragraphs still sit in two different parents, so an adjacent-sibling rule
     cannot bridge the seam — give every paragraph the same trailing space instead */
  html[data-shuriq-surface="ambient"] #s6b .bf-steps p { margin: 0 0 18px !important; }
  /* :last-child would fire at the end of EACH half and close the seam between them —
     only the final paragraph of the whole column drops its trailing space */
  html[data-shuriq-surface="ambient"] #s6b .bf-step:last-child p:last-child { margin-bottom: 0 !important; }
  /* the eyebrow needs to clear the bar, not tuck under it */
  html[data-shuriq-surface="ambient"] #s6b .amb-txt {
    padding-top: calc(150px + env(safe-area-inset-top, 0px)) !important;
  }
  /* reading the continuation: the opening is above, so the fade moves to the top */
  html[data-shuriq-surface="ambient"] #s6b[data-step="1"] .bf-steps {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 76%, transparent 99%);
    mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 76%, transparent 99%);
  }
  /* at the end of the column there is nothing left to hint at */
  html[data-shuriq-surface="ambient"] #s6b[data-step="1"][data-moat-end="1"] .bf-steps {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%);
    mask-image: linear-gradient(180deg, transparent 0, #000 9%);
  }
}

/* ── Desktop: the composition has to answer to the viewport's HEIGHT, not only its
   width. The type clamps were vw-only, so a 13" laptop got 27"-sized headlines in a
   frame half as tall — the copy and the chart crowded the screen. The min() adds a
   height ceiling: it binds on short screens and is inert on tall ones, so the 27"
   layout is untouched. ── */
@media (min-width: 1041px) {
  html[data-shuriq-surface="ambient"] .pitch .statement {
    font-size: min(clamp(1.75rem, 3.4vw, 2.85rem), 5.6vh);
  }
  html[data-shuriq-surface="ambient"] .pitch p.sub,
  html[data-shuriq-surface="ambient"] .pitch .amb-txt p {
    font-size: min(clamp(1rem, 1.3vw, 1.14rem), 2.2vh);
  }
}

/* a short desktop window has to give the chart less room, or the sections that carry a
   chart AND rows beneath it (the Moat) run past the frame */
@media (min-width: 1041px) and (max-height: 820px) {
  /* a flat vh cap here made every chart the same height and left slack around each one;
     the charts keep their own proportions and only the frame tightens */
  html[data-shuriq-surface="ambient"] .pitch { padding-top: 10vh; padding-bottom: 7vh; }
  /* the rows under a chart were taking 220px of a 580px column, which starved the chart
     itself — compact them so the graph keeps a legible size on a short screen */
  html[data-shuriq-surface="ambient"] .pitch.amb-split .stage .dossier details { padding: 6px 0 !important; }
  html[data-shuriq-surface="ambient"] .pitch.amb-split .stage .dossier summary { font-size: 8.5px; letter-spacing: 0.16em; }
  html[data-shuriq-surface="ambient"] .pitch.amb-split .stage .chart { padding: 12px 16px 10px !important; }
  /* two columns instead of a single stack: five rows become three, and the height that
     buys goes straight back to the chart above them */
  html[data-shuriq-surface="ambient"] .pitch.amb-split .stage .dossier {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px;
  }
  html[data-shuriq-surface="ambient"] .pitch.amb-split .stage .dossier details { min-width: 0; }
  /* let a long label wrap rather than truncate — losing the end of "…three things
     compound" costs more than the line it saves */
  html[data-shuriq-surface="ambient"] .pitch.amb-split .stage .dossier summary {
    white-space: normal; line-height: 1.35;
  }
  /* an open dossier spans the full width so its table is readable */
  html[data-shuriq-surface="ambient"] .pitch.amb-split .stage .dossier details[open] { grid-column: 1 / -1; }
}
