/* ============================================================================
 * AI Speedometer — Instrument v2 styles
 * Self-contained; @font-face for the three faces is pulled in by the page via
 * deslop-tokens.css (self-hosted woff2 siblings). One easing, ~0.2s,
 * colour/opacity/position only.
 * ==========================================================================*/

:root {
  --iv2-bg: #101820;
  --iv2-surface: #1a2230;
  --iv2-border: #2a3240;
  --iv2-subtle: #1e2835;
  --iv2-text: #E8E6E1;
  --iv2-secondary: #8A8F98;
  --iv2-tertiary: #8a93a6; /* lifted from #5a6070 (sub-AA, 2.85:1) for AA — matches
                              deslop-tokens.css:54 + speedo-morph.css:9. These are the
                              instrument's structural eyebrows; they must clear AA. */
  --iv2-volt: #CEFF00;
  --iv2-volt-hover: #d9ff4d;
  /* THE CANONICAL ARM — measured vs projected tint (operator ruling 2026-07-01).
     Panel + hub arm = full Volt (a MEASURED reading). The Model arm reuses the
     SAME blade geometry in a PROJECTED variant: alpha-derived Volt (never a new
     hue — §4.6 single-accent), so the projected read reads as projected-not-
     measured while staying the ONLY Volt on the Model pane. Precedent:
     deslop-tokens.css --figure-volt-underline-color rgba(206,255,0,0.3). */
  --arm-volt-projected: rgba(206, 255, 0, 0.45);
  --iv2-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --iv2-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --iv2-display: 'Inter Tight', 'Inter', sans-serif;
  --iv2-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body.iv2-body {
  margin: 0;
  background: #0a1016;
  color: var(--iv2-text);
  font-family: var(--iv2-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.iv2-stage {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* ── card (desktop) ──────────────────────────────────────────────────── */
.iv2-card {
  background: var(--iv2-bg);
  border: 1px solid var(--iv2-border);
  border-radius: 8px;
  padding: 30px 36px;
}
.iv2-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px;
  border-bottom: 1px solid var(--iv2-subtle);
  padding-bottom: 14px;
}
.iv2-header-eyebrow {
  font-family: var(--iv2-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  color: var(--iv2-volt);
}
.iv2-header-title {
  font-family: var(--iv2-display);
  font-weight: 700; font-size: 23px; letter-spacing: -0.02em;
  color: var(--iv2-text); margin-top: 7px;
}
.iv2-header-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  flex: none;
}
.iv2-header-meta {
  font-family: var(--iv2-mono);
  font-size: 10px; letter-spacing: 0.1em; color: var(--iv2-tertiary);
  text-align: right; line-height: 1.7;
}

/* ── cohort toggle ───────────────────────────────────────────────────── */
.iv2-cohort {
  display: inline-flex;
  border: 1px solid var(--iv2-border); border-radius: 6px; overflow: hidden;
  background: #0c131b;
}
.iv2-cohort-btn {
  appearance: none; border: 0; cursor: pointer; background: transparent;
  font-family: var(--iv2-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--iv2-secondary);
  padding: 6px 11px;
  transition: background .2s var(--iv2-ease), color .2s var(--iv2-ease);
}
.iv2-cohort-btn + .iv2-cohort-btn { border-left: 1px solid var(--iv2-border); }
.iv2-cohort-btn:hover { color: var(--iv2-text); }
.iv2-cohort-btn[aria-pressed="true"] {
  background: var(--iv2-volt); color: #101820;
}
.iv2-cohort-note {
  font-family: var(--iv2-sans);
  font-size: 10.5px; font-style: italic; color: var(--iv2-tertiary);
  text-align: right;
}

.iv2-row {
  display: flex; gap: 36px; align-items: flex-start; margin-top: 16px;
}
.iv2-gaugecol { flex: none; width: 524px; max-width: 100%; }

/* ── gauge ───────────────────────────────────────────────────────────── */
.iv2-gaugewrap { position: relative; width: 100%; max-width: 524px; flex: none; }
.iv2-svg { width: 100%; max-width: 524px; height: auto; display: block; }
.iv2-svg text { dominant-baseline: middle; }

.iv2-bandoverlay { position: absolute; inset: 0; pointer-events: none; }
.iv2-bo {
  position: absolute; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none;
}
.iv2-bo-name {
  font-family: var(--iv2-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--iv2-text);
  /* dark halo at ALL widths: the HOT band-% sits on the warm fill and was
     cramped on desktop too (the mobile halo at :352 didn't reach 1280). */
  text-shadow: 0 0 3px rgba(8, 12, 18, 0.95), 0 1px 1px rgba(8, 12, 18, 0.8);
}
.iv2-bo-pct {
  font-family: var(--iv2-display);
  font-size: 15px; font-weight: 700; color: var(--iv2-text); line-height: 1.05;
  text-shadow: 0 0 3px rgba(8, 12, 18, 0.95), 0 1px 1px rgba(8, 12, 18, 0.8);
}
.iv2-center {
  position: absolute; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; width: 150px;
}
.iv2-center-k {
  font-family: var(--iv2-mono);
  font-size: 9px; font-weight: 600; letter-spacing: 0.14em; color: var(--iv2-tertiary);
}
.iv2-center-big {
  font-family: var(--iv2-display);
  font-size: 30px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--iv2-volt); line-height: 1.05; margin-top: 2px;
}
.iv2-center-tiny {
  font-family: var(--iv2-sans);
  font-size: 10px; color: var(--iv2-secondary); margin-top: 2px;
  /* HUB GUTTER: the subtitle used the full 150px center box, so its corner ran
     to within ~3px of the HOT band label's column (worst in the You-mode result
     state, where the center grows). Cap the subtitle narrower than the hub so
     its box can never reach the band-label ring — a clear gutter (~13px @1280)
     to HOT/WARM regardless of line count. Centered so the wrap stays balanced. */
  max-width: 118px; margin-left: auto; margin-right: auto;
}
/* WAVE 1 (2026-07-03): the panel center no longer prints the placed-% or its
   "OF THE PANEL" eyebrow — those two nodes are blanked (kept for the You /
   One-Expert lean-word states). Collapse them when empty so the no-crown line
   (.iv2-center-tiny) sits centered without a reserved gap above it. */
.iv2-center-k:empty,
.iv2-center-big:empty { display: none; }

/* empty-scenario label on the outer ring (S7 — defined-but-empty) */
.iv2-scenoverlay { position: absolute; inset: 0; pointer-events: none; }
.iv2-so {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--iv2-mono);
  /* 0% wedge, so kept understated — but legible where it overlaps the HOT
     band edge: secondary text token + a subtle dark halo to lift it off the
     warm fill without making the empty label shout. */
  font-size: 9px; letter-spacing: 0.04em; color: var(--iv2-secondary);
  text-shadow: 0 0 3px rgba(8, 12, 18, 0.9), 0 1px 1px rgba(8, 12, 18, 0.7);
  white-space: nowrap; pointer-events: none;
}

/* ── coverage element ────────────────────────────────────────────────── */
.iv2-coverage { width: 100%; max-width: 524px; margin-top: 14px; }
.iv2-cov-k {
  font-family: var(--iv2-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; color: var(--iv2-tertiary);
  margin-bottom: 8px;
}
.iv2-cov-bar {
  display: flex; height: 10px; border-radius: 3px; overflow: hidden;
  background: #0c131b; border: 1px solid var(--iv2-subtle);
}
.iv2-cov-seg { display: block; height: 100%; }
.iv2-cov-placed { background: var(--iv2-volt); }
.iv2-cov-notf   { background: #2f3a47; }
.iv2-cov-adv    { background: #5a4a2c; }
.iv2-cov-legend {
  display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 9px;
  font-family: var(--iv2-sans);
  font-size: 11.5px; line-height: 1.4; color: var(--iv2-secondary);
}
.iv2-cov-legend b {
  font-family: var(--iv2-mono);
  font-weight: 600; color: var(--iv2-text);
}
.iv2-cov-legend span { position: relative; padding-left: 14px; }
.iv2-cov-legend span::before {
  content: ''; position: absolute; left: 0; top: 4px;
  width: 8px; height: 8px; border-radius: 2px;
}
.iv2-cov-legend span:nth-child(1)::before { background: var(--iv2-volt); }
.iv2-cov-legend span:nth-child(2)::before { background: #2f3a47; }
.iv2-cov-legend span:nth-child(3)::before { background: #5a4a2c; }

/* ── arm caption — the retired lean track's caveat, now under the donut ────
   RETIRED (operator ruling 2026-07-01): the separate linear COLD·WARM·HOT lean
   track is gone. Its number is now carried by the CANONICAL ARM drawn ON the
   donut (against the donut's own printed cold→hot tick scale), so a second
   linear encoding of the same lean would be a duplicate (§0.5.2 restraint). Its
   caveat copy — the vocab-lock lean word + the placed-only qualifier + no-crown
   — lives here, directly beneath the gauge, in register with the arm's aria. */
.iv2-armcap {
  width: 100%; max-width: 524px; margin-top: 14px;
  font-family: var(--iv2-sans);
  font-size: 11px; line-height: 1.55; color: var(--iv2-tertiary);
}
.iv2-armcap b { font-family: var(--iv2-mono); color: var(--iv2-secondary); font-weight: 600; }
.iv2-armcap .iv2-armcap-lean { color: var(--iv2-text); font-weight: 600; }

/* ── READER ("You") needle — the hollow-Volt "Your reading" mark ─────────
   The twins port of the morph reader-ink law (speedo-morph.js / reader-funnel.css
   .rdl-reader): a single reader's own placement is HOLLOW-Volt + dashed — NOT
   the solid-Volt of a SOURCED expert read. No band is crowned. The needle is
   laid over the unchanged panel donut, amid it. Most attributes are also set
   inline by instrument-v2.js (paintReaderNeedle) so the layer renders even if
   this rule is deferred; these rules carry the chip type + the reduced-motion
   discipline and keep the ink law in one canonical place. */
.iv2-readerlayer { pointer-events: none; }
.iv2-reader-blade { fill: none; stroke: var(--iv2-volt); stroke-width: 1.2; opacity: 0.92; stroke-linejoin: round; }
.iv2-reader-spine { stroke: var(--iv2-volt); stroke-width: 1.6; stroke-dasharray: 5 4; stroke-linecap: round; opacity: 0.95; }
.iv2-reader-pip { fill: var(--iv2-volt); }
.iv2-reader-land { fill: none; stroke: var(--iv2-volt); stroke-width: 1.4; stroke-dasharray: 3 2; opacity: 0.92; }
.iv2-reader-chipbox { fill: rgba(16, 24, 32, 0.94); stroke: var(--iv2-volt); stroke-width: 1; stroke-dasharray: 3 2; }
.iv2-reader-chip {
  font-family: var(--iv2-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; fill: var(--iv2-volt);
}
/* ── THE CANONICAL SPEEDOMETER ARM (operator ruling 2026-07-01) ───────────
   The shared tapered blade drawn ON the donut at the panel's cold→hot center of
   mass. Same geometry as the Model donut (twins-model-donut) and the hub anim —
   Panel differs only by its Volt tint. A LEAN indicator (a continuous balance
   point), never a crown on a wedge. Most attrs are also set inline by
   instrument-v2.js (buildArm) so it renders even if this rule is deferred; these
   rules keep the ink law in one place (NO glow/shadow — see below). The arm group
   is rotated to the live COM with a CSS transition (set inline, reduced-motion safe). */
.iv2-needlelayer { pointer-events: none; }
/* NO glow/shadow (design charter): lift comes from a hairline dark outline that
   separates the Volt blade from the wedges beneath, not a filter (SVG filters also
   re-rasterise every frame of the arm glide — a mobile-Safari cost). */
.iv2-arm-blade { fill: var(--iv2-volt); opacity: 1; stroke: #101820; stroke-width: 0.6; }
.iv2-arm-spine { stroke: var(--iv2-volt); opacity: 0.85; stroke-linecap: round; }
.iv2-arm-tail { fill: var(--iv2-volt); opacity: 0.42; }
.iv2-arm-tip { fill: var(--iv2-volt); stroke: #101820; stroke-width: 0.5; }
.iv2-arm-pivot { fill: #101820; stroke: var(--iv2-volt); }

/* ── THE PRINTED COLD·WARM·HOT TICK SCALE (R7 rail) ───────────────────────
   The equal-spaced lean scale the arm reads against, drawn CLEAR of the wedge
   rings. Quiet steel graduations — the DISTRIBUTION lives in the wedges; this is
   the LEAN axis. The Volt arm is the only accent; the scale stays neutral so the
   arm reads as a lean against a fixed printed rule, not a pointer into a wedge. */
.iv2-scalelayer { pointer-events: none; }
.iv2-scale-arc { fill: none; stroke: rgba(107, 118, 137, 0.40); stroke-width: 1; }
.iv2-scale-tick--major { stroke: rgba(150, 162, 182, 0.72); stroke-width: 1.4; }
.iv2-scale-tick--minor { stroke: rgba(107, 118, 137, 0.40); stroke-width: 1; }

/* the center readout swaps to a smaller display face under the "Your read"
   framing so the honest LEAN WORD ("sits near center") fits the hub without
   crowding the band labels. NO-CROWN: this slot carries the lean, never a
   scenario name (which read as a crown). */
.iv2-center--reader .iv2-center-big {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1;
}

/* ── reading panel ───────────────────────────────────────────────────── */
.iv2-panel { flex: 1; min-width: 0; padding-top: 4px; }
.iv2-eyebrow {
  font-family: var(--iv2-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; color: var(--iv2-tertiary);
}
.iv2-paneltitle {
  font-family: var(--iv2-display);
  font-weight: 700; font-size: 18px; letter-spacing: -0.02em;
  color: var(--iv2-text); margin-top: 8px;
}
.iv2-panelblurb {
  font-family: var(--iv2-sans);
  font-size: 12.5px; line-height: 1.55; color: var(--iv2-secondary); margin-top: 6px;
}
.iv2-divider { height: 1px; background: var(--iv2-subtle); margin: 16px 0; }
.iv2-divider--tight { margin: 12px 0; }

.iv2-bandlist { }
.iv2-brow {
  margin-bottom: 11px; border-radius: 5px; padding: 5px 7px;
  margin-left: -7px; margin-right: -7px; background: transparent;
  transition: background .2s var(--iv2-ease);
}
.iv2-brow-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.iv2-bname {
  font-family: var(--iv2-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--iv2-text);
}
.iv2-bpct {
  font-family: var(--iv2-mono);
  font-size: 13px; color: var(--iv2-text);
}
.iv2-btrack {
  height: 4px; background: #161d28; margin-top: 5px; border-radius: 2px;
}
.iv2-bfill { height: 4px; border-radius: 2px; }

.iv2-srow {
  display: flex; align-items: center; gap: 8px; margin-top: 6px; cursor: pointer;
}
.iv2-sname {
  font-family: var(--iv2-sans);
  font-size: 12px; color: var(--iv2-text); flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .2s var(--iv2-ease);
}
.iv2-strack {
  flex: none; width: 64px; height: 4px; background: #161d28; border-radius: 2px;
}
.iv2-sfill { display: block; height: 4px; border-radius: 2px; }
.iv2-spct {
  font-family: var(--iv2-mono);
  font-size: 11px; color: #cdd2d8; flex: none; width: 30px; text-align: right;
}

.iv2-inspect { margin-top: 7px; }
.iv2-inspect.iv2-ins--empty {
  font-family: var(--iv2-sans);
  font-size: 12px; color: var(--iv2-tertiary);
}
.iv2-ins-name {
  font-family: var(--iv2-display);
  font-weight: 600; font-size: 15px; color: var(--iv2-text);
}
.iv2-ins-meta {
  font-family: var(--iv2-sans);
  font-size: 12px; color: var(--iv2-secondary); margin-top: 2px;
}

.iv2-footer {
  text-align: right;
  font-family: var(--iv2-mono);
  font-size: 8px; color: rgba(138, 143, 152, 0.3); margin-top: 4px;
}

/* ── responsive: stack gauge over panel on narrow screens ────────────── */
@media (max-width: 880px) {
  .iv2-stage { padding: 20px 14px 56px; }
  .iv2-card { padding: 20px 16px; border-radius: 10px; }
  .iv2-header { flex-direction: column; align-items: stretch; gap: 14px; }
  .iv2-header-right { align-items: stretch; }
  .iv2-cohort { width: 100%; }
  .iv2-cohort-btn { flex: 1; text-align: center; }
  .iv2-cohort-note, .iv2-header-meta { text-align: left; }
  .iv2-header-title { font-size: 21px; }

  .iv2-row { flex-direction: column; gap: 22px; align-items: stretch; }
  .iv2-gaugecol { width: 100%; }
  .iv2-gaugewrap, .iv2-svg, .iv2-coverage, .iv2-armcap { max-width: 100%; }
  .iv2-cov-legend { flex-direction: column; gap: 5px; }
  .iv2-panel { padding-top: 0; }
}

/* ── mobile declutter (≤640px) — the small dial was crowded ──────────────
   On a narrow dial the center readout collided with the band % labels and the
   0%-empty-wedge tag was cramped on HOT. Tighten + shrink the center, give the
   band % labels clearance, and pull the empty-wedge tag OFF the small dial (it
   stays in the reading list + the hover-inspect, so no information is lost). */
@media (max-width: 640px) {
  /* center: shrink. RESTORE the "OF THE PANEL" / "YOUR READ" eyebrow (operator
     2026-07-01): without it the big accent numeral/word read as a VERDICT on
     mobile. Kept tiny + tight above the big value; it sits at the top of the
     shrunk 104px box, clear of the band % labels below. */
  .iv2-center { width: 104px; }
  .iv2-center-k { display: block; font-size: 7px; letter-spacing: 0.12em;
    line-height: 1; margin-bottom: 0;
    text-shadow: 0 0 3px rgba(8,12,18,0.95), 0 1px 1px rgba(8,12,18,0.8); }
  .iv2-center-big { font-size: 23px; }
  .iv2-center-tiny { font-size: 8.5px; line-height: 1.25; margin-top: 1px;
    /* HUB GUTTER (mobile): the fixed-size overlay text is proportionally huge
       on the small dial — the subtitle's corner BOX-collided with the HOT band
       label at 375 (worst in the You-mode result state). Narrower cap here;
       pairs with the HOT label nudge below. */
    max-width: 84px; }
  /* band labels: smaller + a dark halo so COLD/WARM/HOT % stay legible and clear
     of the center on the tighter dial. */
  .iv2-bo-name { font-size: 8.5px; letter-spacing: 0.04em;
    text-shadow: 0 0 3px rgba(8,12,18,0.95), 0 1px 1px rgba(8,12,18,0.8); }
  .iv2-bo-pct { font-size: 12px;
    text-shadow: 0 0 3px rgba(8,12,18,0.95), 0 1px 1px rgba(8,12,18,0.8); }
  /* HOT label: nudge radially OUTWARD (down-right along its ~38° ray) so a
     clear gutter opens between it and the center subtitle. Measured @375: the
     subtitle box overlapped the HOT label (You-mode worst: 20×8px). The outer
     scen-ring labels are display:none at this width (rule below), so the space
     just outside the band ring is free; the halo (above) keeps it legible over
     the scen wedges. Bands render COLD, WARM, HOT in order — HOT is :nth-child(3). */
  .iv2-bandoverlay .iv2-bo:nth-child(3) {
    transform: translate(-50%, -50%) translate(17px, 13px);
  }
  /* COLD label: the same treatment, gentler — the narrower subtitle runs one
     line taller in the default state and its top-left corner grazed COLD's
     box (~1×3px @375). A small outward nudge along COLD's (left, slightly up)
     ray opens a ~6px gutter; the space outward of the band ring is free at
     this width (scen labels hidden). COLD is :nth-child(1). */
  .iv2-bandoverlay .iv2-bo:nth-child(1) {
    transform: translate(-50%, -50%) translate(-8px, -2px);
  }
  /* WARM label: same treatment — the RESTORED mobile eyebrow (rule above)
     sits at the top of the shrunk 104px middle box, directly under WARM's ray
     at the arc apex, and crowds it at 375. Nudge WARM straight up (its ray is
     vertical); the space outward of the band ring is free at this width (scen
     labels hidden) and the halo keeps it legible over the wedges.
     WARM is :nth-child(2). */
  .iv2-bandoverlay .iv2-bo:nth-child(2) {
    transform: translate(-50%, -50%) translate(0, -8px);
  }
  /* the "State-Led Race · 0%" empty-wedge tag: OFF the small dial (it crowds the
     HOT edge). It survives in the reading list and on hover-inspect. */
  .iv2-scenoverlay { display: none; }
  /* Touch target: the cohort toggle (All figures / External only) missed the
     44px sweep its siblings got — it sat at ~22px. Give it a 44px hit area,
     centered, so it is tappable on a phone. Label size unchanged. */
  .iv2-cohort-btn {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ── DESKTOP HERO: bring a slice of the dial into the opening frame @1280 ──
   The desktop hero let the standfirst + intro sprawl the full width (a dead
   right ~40%) and stacked a tall band before the figure, so the dial — the most
   important object on the page — never entered the first paint. Mirror the
   mobile discipline (speedo-morph.css selectors-in-hero): cap the hero measure
   so the right column isn't dead, and tighten the vertical band so the stage
   (and a slice of the dial) lifts above the fold. Layout-only; loads after
   speedo-morph.css so these win without touching the generated bundle. */
@media (min-width: 900px) {
  /* cap the hero text measure — the headline is already ~613px; bring the
     standfirst + intro to the same column so the right side reads intentional.
     Match the (0,2,1) specificity of decomp-v3.css `.lede p.lede__thesis` /
     `.lede p.lede__sub` (max-width none / 78ch) and win on cascade order. */
  .lede p.lede__thesis { max-width: 680px; }
  .lede p.lede__sub { max-width: 720px; margin-top: 6px; margin-bottom: 8px; }
  /* reclaim the dead vertical band: trim the lede top pad + the gap before the
     instrument bar so the stage rises into the opening viewport. */
  .mh-pin > .lede { padding-top: 10px; }
  #mhInstrument > .instrument__bar { margin-bottom: 8px; }
  .rdl__stage { margin-top: 0; }
}