/* ============================================================
   COMPONENT · READOUT
   Segmented numeric/text display. Phosphor on deep sunken panel.
   ============================================================ */

.c-readout {
  --readout-color: var(--color-phosphor);

  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-data);   /* was --font-segment (DSEG7); dropped in chunk 00 — never loaded, mono fallback */
  font-size: var(--fs-xl);
  color: var(--readout-color);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-bezel-dark);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-inset-deep);
  text-shadow:
    0 0 4px var(--readout-color),
    0 0 12px color-mix(in srgb, var(--readout-color) 50%, transparent);
  letter-spacing: 0.05em;
  position: relative;
  overflow: hidden;
}

/* Phantom segments — show all 8s ghosted behind the real number */
.c-readout__ghost {
  position: absolute;
  inset: var(--space-2) var(--space-3);
  color: color-mix(in srgb, var(--readout-color) 6%, transparent);
  text-shadow: none;
  pointer-events: none;
  user-select: none;
}

.c-readout--amber { --readout-color: var(--color-phosphor-amber); }
.c-readout--cyan  { --readout-color: var(--color-phosphor-cyan); }

/* ───── DESTRUCTIVE / OPERATOR-ONLY TIER ─────────────────────────────────
   A fire-red numeric readout is a guilt-counter affordance. It is RESERVED for
   genuinely destructive/irreversible confirmations (delete-account, purge,
   revoke) — never a calm GTD user surface, where a full inbox is success, not
   an alarm (02-reconciliation, Rules 1–4). Do not reach for `--red` in
   app/views/app/**. See the styleguide's "Destructive-only tier" section.
   ──────────────────────────────────────────────────────────────────────── */
.c-readout--red   { --readout-color: var(--color-danger); }

.c-readout--lg { font-size: var(--fs-4xl); padding: var(--space-3) var(--space-5); }
.c-readout--sm { font-size: var(--fs-md);  padding: var(--space-1) var(--space-2); }

/* ---------------------------------------------------------------------------
   READOUT · DOSSIER  (c-readout--dossier)  — chunk 08 (the Library)
   A labeled-instrument definition list for the collection show pages (People ·
   Reference · Journal): a calm metadata header — engraved ALL-CAPS plaque labels
   (chrome, C1) beside warm sentence-case values. This is a DISTINCT readout form,
   NOT the phosphor segment display above: it does not carry the bare `.c-readout`
   class, so it inherits none of the segment cosmetics (no phosphor glow leak —
   the C3 light-mode trap). Token-only, both themes, no hardcoded rgba.
   --------------------------------------------------------------------------- */
.c-readout--dossier {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: var(--space-4);
  /* The dossier is a labeled metadata list, NOT a true instrument well: it must
     read as a cream-RECESSED panel in light, a dark well in dark. --color-field
     gives exactly that (identical to --color-surface-sunken in dark, so the dark
     readout is unchanged), where --color-surface-sunken stayed dark in BOTH themes
     and left dark-on-dark values on cream — the C3 light-mode dark-well trap. */
  background: var(--color-field);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--seam-engraved);
}

/* Each dt/dd pair groups in a __row; display:contents flattens it so the dt and
   dd flow straight into the dl's two-column grid and stay aligned. */
.c-readout__row { display: contents; }

.c-readout__label {
  font-family: var(--font-plaque);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  padding-top: 0.2em; /* optically settle the caps onto the value's first line */
}

.c-readout__value {
  margin: 0;
  color: var(--color-text);
}
/* simple_format wraps notes in <p>; don't let those margins bow the grid row. */
.c-readout__value > :first-child { margin-top: 0; }
.c-readout__value > :last-child  { margin-bottom: 0; }

/* Mobile (C4): the two-column grid would crush long values on a phone — stack each
   pair, label over value, with comfortable separation between pairs. */
@media (max-width: 30rem) {
  .c-readout--dossier { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); }
  .c-readout__row { display: block; }
  .c-readout__label { display: block; margin-bottom: var(--space-1); padding-top: 0; }
}