/* 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 .7s 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);
    animation: bf-module-in .5s cubic-bezier(0.22, 1, 0.36, 1) .32s 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 {
    display: grid; grid-template-columns: 1fr 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 .7s cubic-bezier(0.22, 1, 0.36, 1), gap .7s 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; }
  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.38); 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 {
  font-size: 0.9rem; line-height: 1.6; color: var(--ink-faint); 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: 700px) {
  html[data-shuriq-surface="ambient"] #dots { display: none; }
}

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