/* s03.css — section 03's graphic styles only (the coverage strip). Owns:
   the strip SVG's proportion, its per-segment hover state, the tick marks
   between segments, the reserved dim-label / blue-value readout stack
   (line / share / premiums), and the [ next ] control. Shared shell lives
   in research.css. HARD RULE: hover changes pixels (stroke/fill colour,
   dash pattern, opacity), never geometry — cell positions come from the
   fixed viewBox and never move; every readout value sits in a reserved
   ch-width slot so an NSRoll swap changes glyphs only. */

/* the plate caps its width within the column (a fixed value, so it never
   varies with content), centred by the shell's margin:0 auto */
.spec-03 {
  max-width: 480px;
}

/* fixed box: the strip's viewBox is 437 x 12, so lock that ratio — the box
   height is a pure function of width, immune to anything on the SVG */
.spec-03 .spec-canvas {
  aspect-ratio: 437 / 12;
}

.spec-03 .spec-canvas svg {
  cursor: default;
}

/* resting cells: solid ones are filled ink, dashed (AI) ones are a hairline
   ink dash. Hover never touches width/height/x/y — only stroke/fill colour
   and (for AI) stroke-opacity change. */
.spec-03 .cg-cell-solid {
  stroke-width: 1;
}

.spec-03 .cg-cell-dashed {
  stroke-width: 1;
}

/* the active segment's cells go blue — solid cells recolor fill+stroke, the
   dashed AI cells recolor their dash to blue (still dashed) */
.spec-03 .cg-cell.is-active.cg-cell-solid {
  fill: #2222ff;
  stroke: #2222ff;
}

.spec-03 .cg-cell.is-active.cg-cell-dashed {
  stroke: #2222ff;
}

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

.spec-03 .cg-hits rect {
  cursor: pointer;
}

/* ---- the readout panel: the house dim-label / blue-value stack + the
   [ next ] control, laid out so they never collide ---- */
.spec-03 .cg-panel {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* the readout stack — three rows (line / share / premiums), each a dim
   label + a value in a reserved-width slot. Overrides the shared one-line
   .spec-readout: this one is a fixed block of rows, reserved height at all
   times (idle included), so nothing shifts. */
.spec-03 .spec-readout {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 0;
  min-height: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 11.5px;
  line-height: 1.35;
}
.spec-03 .spec-readout .cg-row {
  display: block;
  white-space: nowrap;
}
.spec-03 .spec-readout .cg-rl {
  color: var(--ink-dim);
  display: inline-block;
  min-width: 10ch;      /* longest label "premiums" (8) + a space */
  padding-right: 1ch;
  box-sizing: border-box;
}
.spec-03 .spec-readout .cg-rv {
  color: #2222ff;
  display: inline-block;
}
/* reserved value widths — the longest real value in each slot, so an NSRoll
   swap never reflows (monospace: ch is exact):
     line "Liability insurance" 19 · share "unwritten" 9
     premiums "unwritten" 9 (longest figure "$0.016T" is 7) */
.spec-03 .spec-readout .cg-rv-line { min-width: 19ch; }
.spec-03 .spec-readout .cg-rv-share { min-width: 9ch; }
.spec-03 .spec-readout .cg-rv-premiums { min-width: 9ch; }
/* the premiums row reads fully blue (label + value), the house rule */
.spec-03 .spec-readout .cg-row.is-premiums .cg-rl { color: #2222ff; }

/* the [ next ] control — bracket-affordance, dim ink, brightens on hover;
   a real <button>, fixed in the panel's top-right, nothing can collide with
   it (the readout slots to its left are width-reserved) — s02's grammar */
.spec-03 .cg-next {
  flex: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 120ms linear;
  white-space: nowrap;
}
.spec-03 .cg-next:hover,
.spec-03 .cg-next:focus-visible { opacity: 0.9; }

/* ---- essay-band recolour (white ink on the dark band) — s03 sits on
   white (section 03), but keep parity with the shell in case it ever moves */
.essay-band .spec-03 .spec-readout .cg-rl { color: rgba(255, 255, 255, 0.55); }
.essay-band .spec-03 .spec-readout .cg-row.is-premiums .cg-rl { color: #6a6aff; }
.essay-band .spec-03 .cg-next { color: #fff; }

/* under a narrow column, stack the readout above the control so nothing can
   crowd — the panel becomes a single column */
@media (max-width: 560px) {
  .spec-03 .cg-panel {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .spec-03 .cg-next { align-self: flex-start; }
}