/* s02.css — section 02's graphic styles only (the role node). Owns: the
   2D canvas box, the readout STACK (dim-label / blue-value rows, one per
   role field), and the [ randomize ] control. The shared shell lives in
   research.css. HARD RULE: hover changes pixels, never geometry — the
   canvas box has a fixed aspect ratio and overflow:hidden, so a taller
   cube stack is clipped, never resizes the block. The readout lives
   OUTSIDE the canvas, so its text can never overlap the cubes; every value
   sits in a reserved ch-width slot so an NSRoll swap changes glyphs only. */

/* cap the block at its original rendered width so it keeps the same size */
.spec-02 {
  max-width: 477px;
}

/* the canvas box: a fixed aspect-ratio frame for the ground plane + stack.
   The <canvas> is absolute-filled so it contributes nothing to layout. */
.spec-02 .spec-canvas {
  aspect-ratio: 1 / 0.7;
}
.spec-02 .spec-canvas .rn-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
}

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

/* the readout stack — five rows, each a dim label + a blue value in a
   reserved-width slot. Column layout so rows never run together; the
   whole panel is reserved height (5 rows) at all times, idle included. */
.spec-02 .rn-readout {
  /* override the shared one-line .spec-readout: this one is a fixed block
     of rows, so drop the nowrap/ellipsis single-line treatment */
  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-02 .rn-readout .rn-row {
  display: block;
  white-space: nowrap;
}
.spec-02 .rn-readout .rl {
  color: var(--ink-dim);
  display: inline-block;
  min-width: 12ch;      /* longest label "consequence" (11) + a space */
  padding-right: 1ch;   /* guarantees a gap even at the max-width label */
  box-sizing: border-box;
}
.spec-02 .rn-readout .rv {
  color: #2222ff;
  display: inline-block;
}
/* reserved value widths — the longest real enum value in each slot, so an
   NSRoll swap never reflows (monospace: ch is exact):
     domain "Customer Support" 16 · data "CUSTOMER_DATA, TRANSACTION_DATA" 31
     output "RECONCILIATION_RECORD" 21 · authority "MODIFY_INTERNAL_STATE" 21
     consequence "INTERNAL_INFORMATION_ONLY" 25 */
.spec-02 .rn-readout .rv-domain { min-width: 16ch; }
.spec-02 .rn-readout .rv-data { min-width: 31ch; }
.spec-02 .rn-readout .rv-output { min-width: 21ch; }
.spec-02 .rn-readout .rv-authority { min-width: 21ch; }
.spec-02 .rn-readout .rv-consequence { min-width: 25ch; }
/* the consequence row reads fully blue (label + value), the home rule */
.spec-02 .rn-readout .rn-row.is-consequence .rl { color: #2222ff; }

/* the [ randomize ] 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) */
.spec-02 .rn-rand {
  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-02 .rn-rand:hover,
.spec-02 .rn-rand:focus-visible { opacity: 0.9; }

/* ---- essay-band recolour (white ink on the dark band) ---- */
.essay-band .spec-02 .rn-readout .rl { color: rgba(255, 255, 255, 0.55); }
.essay-band .spec-02 .rn-readout .rn-row.is-consequence .rl { color: #6a6aff; }
.essay-band .spec-02 .rn-rand { 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-02 .rn-panel {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .spec-02 .rn-rand { align-self: flex-start; }
}