/* s06.css — section 06's graphic styles only (the claims horizon, now a
   scrubbable instrument). Owns the timeline SVG's proportion, its cells
   (solid/dashed, active tint, idle-breathe), the blue scrub indicator,
   tick marks, year labels and the reserved readout. Shared shell lives in
   research.css. Rides the black band: strokes/fills/text are currentColor
   (white), dim = rgba(255,255,255,.5), and the scrubbed year's cells go
   blue (#2222ff) — dashed cells stay dashed, just recoloured. HARD RULE:
   scrub, the indicator and the fill-on-view pass only ever touch pixels
   (opacity, stroke/fill colour, dash colour, indicator x) — every cell's
   x/y/width/height is fixed at build time and never changes; the box is
   sized purely from the fixed 460x96 viewBox. */

.spec-06 {
  max-width: 480px;
}

/* fixed box: the timeline's viewBox is 460 x 96 — lock that ratio */
.spec-06 .spec-canvas {
  aspect-ratio: 460 / 96;
}

/* the whole strip is a scrub track — ew-resize signals the drag axis */
.spec-06 .spec-canvas svg {
  cursor: default;
}
.spec-06 .ch-hit {
  cursor: ew-resize;
  touch-action: none; /* let pointer drag own the horizontal axis on touch */
}

.spec-06 .spec-canvas svg text {
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 300;
  fill: currentColor;
}

.spec-06 .spec-canvas svg .sv-dim,
.spec-06 .spec-canvas svg .ch-label {
  opacity: 0.5;
}

/* resting cells: arrived (solid) ones are filled ink, forecast (dashed)
   ones are a hairline ink dash. Scrub/fill never touch geometry — only
   fill/stroke colour and (dashed) stroke-opacity change. */
.spec-06 .ch-cell-solid {
  stroke-width: 1;
}

.spec-06 .ch-cell-dashed {
  stroke-width: 1;
}

/* the scrubbed year's cells go blue — solid cells recolor fill+stroke,
   dashed (forecast) cells recolor their dash to blue, still dashed */
.spec-06 .ch-cell.is-active.ch-cell-solid {
  fill: #2222ff;
  stroke: #2222ff;
}

.spec-06 .ch-cell.is-active.ch-cell-dashed {
  stroke: #2222ff;
  stroke-opacity: 1;
}

/* the blue scrub indicator: a hairline vertical rule at the active year.
   Only its x + opacity change (never its geometry). */
.spec-06 .ch-indicator {
  pointer-events: none;
}

/* tick marks between years: a faint hairline, never a hover target */
.spec-06 .ch-ticks line {
  stroke-width: 1;
  pointer-events: none;
}

/* year labels beneath the strip; the scrubbed year's label inks blue */
.spec-06 .ch-label {
  transition: none;
}

.spec-06 .ch-label.is-active {
  fill: #2222ff;
  opacity: 1;
}

/* ---------- the reserved readout: dim-label / blue-value grammar
   (frame.js / prevalence.js). Each field is a fixed-width ch slot sized
   to its longest possible content (monospace: ch is exact) so scrubbing
   between years rolls glyphs but never shifts positions or wraps. The
   whole line truncates (shell contract) rather than pile on narrow
   screens. ---------- */
.spec-06 .spec-readout {
  font-size: 11px;
  display: flex;
  flex-wrap: nowrap;
  gap: 0 16px;
}

.spec-06 .spec-readout > span {
  white-space: nowrap;
  flex: 0 0 auto;
}

/* year 2028 · state projected · on record 2nd graded cohort */
.spec-06 .spec-readout > span:nth-child(1) { min-width: 9ch; }
.spec-06 .spec-readout > span:nth-child(2) { min-width: 15ch; }
.spec-06 .spec-readout > span:nth-child(3) { min-width: 27ch; }

.spec-06 .spec-readout .val {
  color: #2222ff;
}

/* ---------- the black band: this section rides it (follows 05), so flip
   to an inverted palette — white ink, dim at 50% white, blue stays
   #2222ff regardless of ground ---------- */
.essay-band .spec-06 .spec-canvas svg text,
.essay-band .spec-06 .spec-canvas svg .ch-cell-solid,
.essay-band .spec-06 .spec-canvas svg .ch-cell-dashed,
.essay-band .spec-06 .ch-ticks {
  color: #fff;
}

.essay-band .spec-06 .spec-canvas svg .sv-dim,
.essay-band .spec-06 .spec-canvas svg .ch-label {
  opacity: 1;
  fill: rgba(255, 255, 255, 0.5);
}

.essay-band .spec-06 .ch-label.is-active {
  fill: #2222ff;
}

.essay-band .spec-06 .spec-readout {
  color: rgba(255, 255, 255, 0.5);
}

.essay-band .spec-06 .spec-readout .val {
  color: #2222ff;
}