/* s05.css — section 05's graphic styles only (the verification loop).
   Owns the loop SVG's proportion, its text, the traveling pulse, and the
   node-hover state (outline tint + connector tint). Rides the band; text
   is currentColor (white) with the verify node/label in blue. Shared
   shell lives in research.css. HARD RULE: hover changes pixels only
   (stroke colour/width, opacity) — the four node rects and the four
   connector paths never move; the loop's geometry is fixed by the
   viewBox. */

.spec-05 {
  max-width: 412px;
}

/* fixed box: the loop's viewBox is 380 x 220 — lock that ratio */
.spec-05 .spec-canvas {
  aspect-ratio: 380 / 220;
}

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

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

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

.spec-05 .spec-canvas svg text.sv-val {
  fill: #2222ff;
}

/* node rects: hairline at rest, heavier + fully blue on hover. The
   already-blue verify node just gets the heavier stroke-width — it does
   not need a colour change to read as "hovered". */
.spec-05 .spec-canvas svg .lp-node {
  stroke-width: 1;
}

.spec-05 .spec-canvas svg .lp-node.is-hover {
  stroke: #2222ff;
  stroke-width: 1.5;
}

/* connectors: hairline at rest; the two touching a hovered node tint
   blue (the already-blue verify→source run just gets heavier) */
.spec-05 .spec-canvas svg .lp-conn {
  stroke-width: 1;
}

.spec-05 .spec-canvas svg .lp-conn.is-tinted {
  stroke-width: 1.5;
}

.spec-05 .spec-canvas svg .lp-conn-ink .lp-conn.is-tinted {
  stroke: #2222ff;
}

/* hit targets are invisible, just capture the pointer */
.spec-05 .spec-canvas svg .lp-hit {
  cursor: pointer;
}

/* the traveling pulse: a small blue dot riding the loop, driven by rAF in
   s05.js (getPointAtLength along the loop). This just sets its paint. When
   a node is engaged the pulse DIMS (is-dim) and rests at that station — a
   quiet "this step" that never competes with the lit node/readout. The dim
   is a 120ms opacity fade, pixels only. Reduced motion: s05.js never emits
   the pulse at all, so there is nothing to freeze here. */
.spec-05 .spec-canvas svg .lp-pulse {
  fill: #2222ff;
  stroke: none;
  opacity: 1;
  transition: opacity 120ms linear;
}

.spec-05 .spec-canvas svg .lp-pulse.is-dim {
  opacity: 0.32;
}

/* the readout row: the reserved dim-label/blue-value readout on the left,
   the [ step ] bracket control on the right — laid out so they never
   collide (the readout is a single reserved line; the control is flex:none
   and cannot be crowded). Mirrors s02's rn-panel discipline. */
.spec-05 .lp-panel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

/* keep the readout on its own reserved line so the [ step ] control to its
   right can never be pushed onto the loop or overlapped by long copy */
.spec-05 .lp-panel .spec-readout {
  flex: 1 1 auto;
  min-width: 0;
}

/* the [ step ] control — bracket-affordance, dim ink, brightens on hover;
   a real <button>, fixed at the row's right, nothing collides with it */
.spec-05 .lp-step {
  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-05 .lp-step:hover,
.spec-05 .lp-step:focus-visible {
  opacity: 0.9;
}
/* on the dark band the control ink is white */
.essay-band .spec-05 .lp-step {
  color: #fff;
}

/* the reserved readout: dim label — blue value, matching the house
   dim-label/blue-value readout grammar used elsewhere */
.spec-05 .spec-readout .lp-dim {
  color: var(--ink-dim);
}

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

/* the band recolors the idle label's dim tone to white-at-half-opacity
   (research.css's --ink-dim is tuned for the white page, not the band) */
.essay-band .spec-05 .spec-readout .lp-dim {
  color: rgba(255, 255, 255, 0.5);
}