/* s04.css — section 04's graphic styles only (the grade plate). Owns the
   plate SVG's proportion + its dim/blue text, the row hover emphasis, the
   [next]/counter affordances, and the readout's fixed slots. Shared shell
   lives in research.css. HARD RULE: hover/click change pixels only — the
   canvas is a fixed aspect-ratio box sized from the viewBox alone, so
   text-length changes across the three cycled specimens (reserved to the
   widest specimen's own glyph count inside the SVG's fixed column) can
   never move the container. */

.spec-04 {
  max-width: 392px;
}

/* fixed box: the plate's viewBox is 360 x 152 — lock that ratio */
.spec-04 .spec-canvas {
  aspect-ratio: 360 / 152;
}

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

.spec-04 .spec-canvas svg .sv-dim {
  opacity: 0.5;
}

.spec-04 .spec-canvas svg text.sv-val {
  fill: #2222ff;
  transition: fill 120ms linear;
}

/* the [next] bracket + "n / 3" counter — dim by default, both reserved in
   the SVG's top-right (past the badge box), never affecting geometry
   since they're just text nodes plotted inside the fixed viewBox */
.spec-04 .spec-canvas svg .sv-counter,
.spec-04 .spec-canvas svg .sv-next {
  font-size: 10.5px;
}

.spec-04 .spec-canvas svg .sv-next {
  transition: opacity 120ms linear, fill 120ms linear;
}

.spec-04 .spec-canvas svg:hover .sv-next {
  opacity: 0.85;
  fill: #2222ff;
}

/* row hover: the value goes heavier + black (not blue-on-blue, so the
   emphasis reads distinctly from the plate's normal blue value color);
   the label brightens off its dim baseline. Pixels only — the <g> and its
   two <text> children keep their plotted x/y. */
.spec-04 .spec-canvas svg .sv-row {
  cursor: pointer;
}

.spec-04 .spec-canvas svg .sv-row .sv-dim {
  transition: opacity 120ms linear;
}

.spec-04 .spec-canvas svg .sv-row.is-hot .sv-dim {
  opacity: 0.85;
}

.spec-04 .spec-canvas svg .sv-row.is-hot .sv-val {
  fill: #000;
  font-weight: 500;
}

/* the reserved one-line readout: row explanations roll in via NSRoll,
   monospace + nowrap so glyph-rolls never reflow (research.css already
   reserves the line's height/overflow) */
.spec-04 .spec-readout {
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}