/* Read Along.
 *
 * Built on the house tokens (css/tokens.css) and the house Glow-UI grammar
 * (css/glow.css), the same way views/storyboard_ads.css is — accent through
 * `var(--glow-accent, #a78bfa)` so the screen is lit in Glow mode and still
 * reads as Fizzavo violet without it, radii from --radius-sm/md/lg (6/10/12),
 * spacing from --space-*, and state colours from --sunny / --danger /
 * --success. No hex literals of its own, no new type scale.
 *
 * THE ONE LAW (Glow-UI): everything interactive glows dimly; the selected or
 * primary one glows brighter. State is BRIGHTNESS, never a flat grey next to
 * a lit thing. That is what the word boxes, the ring strokes, the choice
 * cards and the page thumbnails all express.
 *
 * BRIGHTNESS BUDGET, brightest first:
 *   1. the page being read           — the hero, its own elevation
 *   2. the primary action + what is picked right now
 *   3. idle controls (dim, but lit)
 *   4. cards and rails               — soft ambient only
 */

/* ---------------------------------------------------------------- layout */

.ra-gate-body,
.ra-voice-body {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 980px) {
  .ra-gate-body,
  .ra-voice-body {
    grid-template-columns: 1fr;
  }
}

.ra-left,
.ra-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* The gate's own header sits tighter than a normal view header — the page
   itself is the thing to look at, not the words above it. */
.ra-gate .view-header,
.ra-voice .view-header {
  margin-bottom: var(--space-3);
}

/* ------------------------------------------------------------- the page
   The hero. Centred, floating on its own accent shadow, and the only
   element on the screen allowed this much elevation. */

.ra-stage {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
  line-height: 0;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: var(--bg-elevated, #0a1722);
  box-shadow: 0 0 24px color-mix(in srgb, var(--glow-accent, #a78bfa) 20%, transparent);
}

.ra-stage-pen {
  cursor: crosshair;
  touch-action: none;
  box-shadow: 0 0 28px color-mix(in srgb, var(--glow-accent, #a78bfa) 42%, transparent);
}

.ra-page-img {
  display: block;
  width: 100%;
  height: auto;
}

.ra-boxes {
  position: absolute;
  inset: 0;
}

/* While the pen is out the boxes stop taking clicks, so a stroke can cross
   the words it is drawing around. */
.ra-stage-pen .ra-boxes {
  pointer-events: none;
}

/* ------------------------------------------------------- the word boxes
   Four states, all of them LIT — a word that emits no light reads as dead:
   idle (dim), hovered, picked (bright), taken out (struck through). */

/* NOTE ON OPACITY: these boxes are the one thing in the view that sits on
   a WHITE surface — the page raster — not on the dark shell. The glow
   recipe's dim opacities disappear against paper, so every layer here runs
   far higher than it would anywhere else in this file. The two-brightness
   law still holds: picked is visibly about twice idle. */
.ra-box {
  position: absolute;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 60%, transparent);
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 12%, transparent);
  cursor: pointer;
  transition: background 0.12s ease-out, border-color 0.12s ease-out,
    box-shadow 0.12s ease-out;
}

.ra-box:hover {
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 26%, transparent);
  border-color: color-mix(in srgb, var(--glow-accent, #a78bfa) 85%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--glow-accent, #a78bfa) 45%, transparent);
}

/* Picked: the bright recipe — roughly twice the idle on every layer, which
   is the selection signal. */
.ra-box-picked,
.ra-box-picked:hover {
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 38%, transparent);
  border: 2px solid var(--glow-accent, #a78bfa);
  box-shadow: 0 0 12px color-mix(in srgb, var(--glow-accent, #a78bfa) 65%, transparent);
}

/* Taken out: clearly STRUCK, never vanished — she must be able to see what
   she removed, and put it back. */
.ra-box-out {
  border: 1px solid color-mix(in srgb, var(--danger, #f87171) 75%, transparent);
  background: color-mix(in srgb, var(--danger, #f87171) 22%, transparent);
  box-shadow: none;
}

.ra-box-out::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 6%;
  right: 6%;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--danger, #f87171) 85%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--danger, #f87171) 55%, transparent);
}

/* The scanner was not sure about this one: amber, dashed, unmistakably
   different from both idle and picked. Never removed for her. */
.ra-box-check {
  border: 2px dashed color-mix(in srgb, var(--sunny-ink, #8a5a00) 80%, transparent);
  background: color-mix(in srgb, var(--sunny, #ffd666) 30%, transparent);
}

.ra-box-check:hover {
  background: color-mix(in srgb, var(--sunny, #ffd666) 45%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--sunny, #ffd666) 55%, transparent);
}

/* --------------------------------------------------------- the ink rings */

/* WIDTH AND HEIGHT ARE LOAD-BEARING, not decoration.
 *
 * An inline <svg> is a REPLACED element: with `inset: 0` but no explicit
 * size, its height resolves from its own intrinsic aspect ratio — and a
 * viewBox of "0 0 100 100" means 1:1. On a 583x381 page the overlay was
 * laying itself out 583x583, so every ring rendered stretched and well
 * below where it was drawn, while the word boxes (plain divs positioned in
 * %) sat correctly. That mismatch is the misaligned pen the owner hit.
 *
 * Measured before and after, not guessed: overlay 583x583 vs stage
 * 583x381 before; identical to the stage after.
 */
.ra-circles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ra-circle {
  fill: color-mix(in srgb, var(--success, #4ade80) 12%, transparent);
  stroke: var(--success, #4ade80);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--success, #4ade80) 60%, transparent));
}

/* The stroke being drawn right now — brightest thing on the page while the
   pen is down, because it is what she is doing. */
.ra-circle-live {
  fill: none;
  stroke: var(--success, #4ade80);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6 3;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--success, #4ade80) 80%, transparent));
}

/* ------------------------------------------------------ the page rail */

.ra-strip {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-1) 0 var(--space-2);
  scrollbar-width: thin;
}

.ra-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 62px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 24%, transparent);
  border-radius: var(--radius-md, 10px);
  background: none;
  cursor: pointer;
  line-height: 0;
  overflow: hidden;
  opacity: 0.7;
  transition: opacity 0.12s ease-out, box-shadow 0.12s ease-out;
}

.ra-thumb:hover {
  opacity: 0.9;
}

.ra-thumb img {
  width: 100%;
  height: auto;
}

.ra-thumb-on {
  opacity: 1;
  border: 1.5px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 65%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--glow-accent, #a78bfa) 45%, transparent);
}

.ra-thumb-n {
  position: absolute;
  right: var(--space-1);
  bottom: var(--space-1);
  min-width: 18px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--bg, #06111a) 80%, transparent);
  color: var(--bg-elevated, #fff);
  font-size: 0.7rem;
  line-height: 17px;
  text-align: center;
}

/* --------------------------------------------------- the plain word list
   A Word file or a web page has no picture of a page, so the words are a
   list of chips instead. Same four states as the boxes. */

.ra-wordlist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  max-height: 62vh;
  padding: var(--space-3);
  overflow-y: auto;
  border-radius: var(--radius-lg, 12px);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 4%, var(--bg, #06111a));
  box-shadow: 0 0 18px color-mix(in srgb, var(--glow-accent, #a78bfa) 18%, transparent);
  line-height: 1.7;
}

.ra-chip {
  padding: 2px var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background 0.12s ease-out, box-shadow 0.12s ease-out;
}

.ra-chip:hover {
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 12%, transparent);
}

.ra-chip-picked {
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 22%, transparent);
  border-color: color-mix(in srgb, var(--glow-accent, #a78bfa) 62%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--glow-accent, #a78bfa) 40%, transparent);
}

.ra-chip-out {
  color: color-mix(in srgb, var(--danger, #f87171) 80%, transparent);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: 0.7;
}

.ra-chip-check {
  border-color: color-mix(in srgb, var(--sunny, #ffd666) 60%, transparent);
  border-style: dashed;
  color: var(--sunny, #ffd666);
}

/* ------------------------------------------------------------- the tools
   A compact lit toolbar, not a stack of loose buttons. */

.ra-tools {
  padding: var(--space-3);
}

.ra-tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.ra-tool-hint {
  margin: 0;
  color: var(--text-muted, #7d8b99);
  font-size: 0.82rem;
  line-height: 1.5;
}

.ra-tool-help {
  margin-top: var(--space-2);
  color: var(--text-muted, #7d8b99);
  font-size: 0.78rem;
  line-height: 1.45;
}

.ra-tool-help summary {
  width: fit-content;
  color: var(--glow-accent, #a78bfa);
  cursor: pointer;
  font-weight: 650;
}

.ra-tool-help p {
  margin: var(--space-1) 0 0;
}

.ra-saved {
  margin: var(--space-1) 0 0;
  font-size: 0.75rem;
}

.ra-check-note {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid color-mix(in srgb, var(--sunny, #ffd666) 70%, transparent);
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--sunny, #ffd666) 10%, transparent);
  color: var(--sunny, #ffd666);
  font-size: 0.82rem;
}

/* ------------------------------------------------- the rings, in order */

.ra-circles-card h3 {
  margin: 0 0 var(--space-1);
}

.ra-circle-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.ra-circle-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--success, #4ade80) 26%, transparent);
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--success, #4ade80) 7%, transparent);
  cursor: grab;
  touch-action: none;
}

.ra-circle-row:hover {
  box-shadow: 0 0 10px color-mix(in srgb, var(--success, #4ade80) 28%, transparent);
}

.ra-circle-dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.ra-circle-order {
  flex: 0 0 22px;
  height: 22px;
  border-radius: var(--radius-pill, 999px);
  background: color-mix(in srgb, var(--success, #4ade80) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--success, #4ade80) 60%, transparent);
  color: var(--success, #4ade80);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.ra-circle-what {
  flex: 1 1 auto;
  font-size: 0.82rem;
}

/* --------------------------------------------------------- the summary */

.ra-count {
  margin: 0 0 var(--space-1);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 650;
}

.ra-blocker {
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid color-mix(in srgb, var(--danger, #f87171) 70%, transparent);
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--danger, #f87171) 10%, transparent);
  color: var(--danger, #f87171);
  font-size: 0.85rem;
}

/* ------------------------------------------------------ the word editor
   Attached to document.body, deliberately outside anything the screen
   redraws — see readalong_gate_edit.js's rule about the typing box. */

.ra-editor {
  position: fixed;
  z-index: 60;
  width: 290px;
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 34%, transparent);
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-elevated, #0a1722);
  color: var(--text);
  box-shadow: 0 0 26px color-mix(in srgb, var(--glow-accent, #a78bfa) 40%, transparent),
    var(--shadow-md);
}

.ra-editor-title {
  margin: 0 0 var(--space-2);
  font-size: 0.9rem;
  font-weight: 650;
}

.ra-editor-input {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 34%, transparent);
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 6%, transparent);
  color: inherit;
  font: inherit;
}

.ra-editor-hint {
  margin: var(--space-2) 0;
  color: var(--text-muted, #7d8b99);
  font-size: 0.78rem;
}

.ra-editor-row {
  display: flex;
  gap: var(--space-2);
}

/* ----------------------------------------------------------- the voice */

.ra-voice-body {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
}

.ra-field + .ra-field {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 14%, transparent);
}

.ra-field h3 {
  margin: 0 0 var(--space-1);
  font-size: 0.95rem;
}

.ra-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Idle choice: dim but lit. */
.ra-choice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 190px;
  max-width: 260px;
  min-height: 44px; /* touch target, even where the lit part is smaller */
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 30%, transparent);
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 7%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--glow-accent, #a78bfa) 14%, transparent);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease-out, border-color 0.12s ease-out,
    box-shadow 0.12s ease-out;
}

.ra-choice:hover:not(:disabled) {
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 12%, transparent);
}

/* Owner ruling 2026-09-03, live-screen hands-on: "none of the disabled
   controls look disabled." Matches .btn:disabled's cursor and the
   opacity-based dimming already used elsewhere (.aa-pick:disabled,
   .deck-chip[disabled]) rather than inventing a new look. */
.ra-choice:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Picked: brighter on every layer — that IS the selection. */
.ra-choice-on {
  border: 1.5px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 62%, transparent);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 18%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--glow-accent, #a78bfa) 46%, transparent);
}

.ra-choice-on .ra-choice-label {
  text-shadow: 0 0 6px color-mix(in srgb, var(--glow-accent, #a78bfa) 55%, transparent);
}

.ra-choice-label {
  font-size: 0.85rem;
  font-weight: 650;
}

.ra-choice-hint {
  color: var(--text-muted, #7d8b99);
  font-size: 0.75rem;
  line-height: 1.4;
}

.ra-choice-on .ra-choice-hint {
  color: var(--text-muted, #7d8b99);
}

.ra-select,
.ra-url {
  width: 100%;
  max-width: 380px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 30%, transparent);
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 6%, transparent);
  color: inherit;
  font: inherit;
}

.ra-slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.ra-slider-row input[type="range"] {
  flex: 1 1 150px;
  max-width: 250px;
  accent-color: var(--glow-accent, #a78bfa);
}

.ra-slider-row input[type="range"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ra-slider-row input[type="color"] {
  width: 42px;
  height: 30px;
  padding: 2px;
  border: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 34%, transparent);
  border-radius: var(--radius-sm, 6px);
  background: none;
  cursor: pointer;
}

.ra-slider-value {
  color: var(--text-muted, #7d8b99);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.ra-audio {
  display: block;
  width: 100%;
  max-width: 380px;
  margin-top: var(--space-2);
}

/* The "?" next to natural-pace: a small round disclosure toggle, not a
   link to another page — the answer lives right below it. */
.ra-help-btn {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 40%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 10%, transparent);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ra-help-btn:hover {
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 18%, transparent);
}

.ra-help-btn-on {
  border-color: color-mix(in srgb, var(--glow-accent, #a78bfa) 62%, transparent);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 22%, transparent);
}

/* Same tinted-callout language as .ra-cost below — an answer, not a
   warning, so it gets the neutral accent treatment rather than danger. */
.ra-help-card {
  margin-top: var(--space-2);
  padding: var(--space-3);
  border-left: 3px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 55%, transparent);
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 8%, transparent);
  color: var(--text);
}

.ra-help-card h4 {
  margin: 0 0 var(--space-2);
  font-size: 0.88rem;
}

.ra-help-steps {
  margin: 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ra-help-steps li {
  font-size: 0.82rem;
  line-height: 1.5;
}

/* The start card: the primary action of the whole screen, so it carries the
   brightest treatment on it.

   SPECIFICITY, deliberate: css/glow.css loads AFTER every view stylesheet
   and restyles `.card` wholesale (transparent border, one standard accent
   shadow). A plain `.ra-start` therefore loses its border and shadow the
   moment Glow mode is on — measured in the browser, not assumed. Scoping to
   the view's own root id wins that tie without touching glow.css, which is
   shared by every screen. */
#readalong-root .ra-start {
  position: sticky;
  top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 40%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--glow-accent, #a78bfa) 32%, transparent);
}

.ra-start .btn-primary {
  width: 100%;
  margin-top: var(--space-3);
}

.ra-start .btn:not(.btn-primary) {
  width: 100%;
  margin-top: var(--space-2);
}

/* What the change will cost, said before she presses anything. */
.ra-cost {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 55%, transparent);
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 8%, transparent);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ------------------------------------------------ starting and listing */

.ra-picker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.ra-file {
  color: var(--text-muted, #7d8b99);
  font-size: 0.85rem;
}

.ra-run-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.ra-run-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 20%, transparent);
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 5%, transparent);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease-out, box-shadow 0.12s ease-out;
}

.ra-run-row:hover {
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 12%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--glow-accent, #a78bfa) 30%, transparent);
}

.ra-run-title {
  flex: 1 1 auto;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ra-run-status {
  flex: 0 0 auto;
  padding: 2px var(--space-2);
  border: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 30%, transparent);
  border-radius: var(--radius-pill, 999px);
  color: var(--text);
  font-size: 0.72rem;
}

.ra-run-size {
  flex: 0 0 auto;
  color: var(--text-muted, #7d8b99);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.ra-run-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* Back one screen. Same control on every step of the walk, always the
   first thing on the row, so it is found without looking for it. */
.ra-step-back {
  font-weight: 600;
}

.ra-back-note {
  font-size: 0.78rem;
}

/* The arrows either side of every slider: one notch per press, for hands
   that a drag does not suit. */
.ra-nudge {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  line-height: 1;
  font-size: 0.7rem;
  color: var(--text, #e8eef5);
  border: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 34%, transparent);
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 8%, transparent);
  cursor: pointer;
}

.ra-nudge:hover:not(:disabled) {
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 20%, transparent);
}

.ra-nudge:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* Naming the file before saving a copy, and naming the settings after. */
.ra-copy-label {
  color: var(--text-muted, #7d8b99);
  font-size: 0.78rem;
}

.ra-copy-name,
.ra-preset-name {
  min-width: 180px;
  padding: var(--space-2);
  color: var(--text, #e8eef5);
  border: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 28%, transparent);
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 6%, transparent);
  font: inherit;
}

.ra-done-preset {
  margin-top: var(--space-4);
}

.ra-preset-saved,
.ra-saved-path {
  margin-top: var(--space-2);
  color: var(--text-muted, #7d8b99);
  font-size: 0.8rem;
  word-break: break-all;
}

/* ------------------------------------------------ working, stopped, done */

.ra-working {
  padding: var(--space-5);
  text-align: center;
}

.ra-bar {
  height: 10px;
  max-width: 560px;
  margin: var(--space-4) auto;
  border-radius: var(--radius-pill, 999px);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 10%, transparent);
  overflow: hidden;
}

.ra-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill, 999px);
  background: var(--glow-accent, #a78bfa);
  box-shadow: 0 0 14px color-mix(in srgb, var(--glow-accent, #a78bfa) 70%, transparent);
  transition: width 0.4s ease;
}

.ra-progress-line {
  margin: var(--space-2) 0;
  color: var(--text);
  font-size: 1rem;
}

.ra-log {
  display: inline-block;
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 4%, transparent);
  color: var(--text-muted, #7d8b99);
  font-size: 0.75rem;
  line-height: 1.7;
  list-style: none;
  text-align: left;
}

/* A run that stopped is a CALM card that says what happened and what to do
   — never a red wall. Amber edge, not danger red: nothing is broken, it
   just did not finish. */
/* Same specificity note as .ra-start above: glow.css's `.card` would
   otherwise erase this card's amber edge entirely. */
#readalong-root .ra-error {
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--sunny, #ffd666) 40%, transparent);
  border-left: 4px solid var(--sunny, #ffd666);
  box-shadow: 0 0 18px color-mix(in srgb, var(--sunny, #ffd666) 20%, transparent);
}

.ra-error h2 {
  color: var(--sunny, #ffd666);
}

.ra-error-what {
  margin: var(--space-2) 0;
  font-size: 1rem;
}

.ra-error-fix {
  margin: var(--space-2) 0 var(--space-4);
  color: var(--text-muted, #7d8b99);
  font-size: 0.88rem;
}

.ra-error .btn + .btn {
  margin-left: var(--space-2);
}

/* --------------------------------------------------------- the result
   The video, front and centre. Reveal is the loud one; changing it again is
   the quiet one beside it. */

.ra-done {
  padding: var(--space-4);
}

.ra-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: var(--space-3) 0 var(--space-4);
}

.ra-result-video {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-sunken, #040c13);
  box-shadow: 0 0 26px color-mix(in srgb, var(--glow-accent, #a78bfa) 26%, transparent);
}

.ra-result-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.ra-result-name {
  color: var(--text-muted, #7d8b99);
  font-size: 0.75rem;
}

.ra-done-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 14%, transparent);
}

.ra-done-note {
  margin: 0;
  color: var(--text-muted, #7d8b99);
  font-size: 0.78rem;
}

/* ------------------------------------------------------------- a11y
   Every interactive element in this view is either a real <button>/<input>
   (which tokens.css already gives a focus ring) or one of these, which are
   positioned or overflow-clipped and so need the ring stated here. */

.ra-box:focus-visible,
.ra-chip:focus-visible,
.ra-choice:focus-visible,
.ra-thumb:focus-visible,
.ra-run-row:focus-visible,
.ra-circle-row:focus-visible {
  outline: 3px solid var(--focus-ring, #c4b5fd);
  outline-offset: 2px;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ra-box,
  .ra-chip,
  .ra-choice,
  .ra-thumb,
  .ra-run-row,
  .ra-bar-fill {
    transition: none;
  }
}


/* ------------------------------------------------- Glow mode only
 * The app ships LIGHT by default and Glow-UI is an opt-in
 * (Settings -> Appearance). Everything above therefore uses readable ink
 * (--text / --text-muted) so the screen works on paper-white, and the
 * lit-accent text — the part that only makes sense against the void — is
 * applied here.
 *
 * This block exists because the first pass derived text colour by mixing
 * the accent with WHITE, which reads beautifully on #06111a and is close
 * to unreadable on #fffcf7. Caught by screenshotting both modes.
 */

:root[data-glow="on"] #readalong-root .ra-chip,
:root[data-glow="on"] #readalong-root .ra-choice,
:root[data-glow="on"] #readalong-root .ra-count,
:root[data-glow="on"] #readalong-root .ra-cost,
:root[data-glow="on"] #readalong-root .ra-help-card,
:root[data-glow="on"] #readalong-root .ra-progress-line,
:root[data-glow="on"] #readalong-root .ra-run-status {
  color: color-mix(in srgb, var(--glow-accent, #a78bfa) 85%, white);
}

:root[data-glow="on"] #readalong-root .ra-choice-on {
  color: var(--glow-accent, #a78bfa);
}

:root[data-glow="on"] #readalong-root .ra-choice-on .ra-choice-hint {
  color: color-mix(in srgb, var(--glow-accent, #a78bfa) 70%, white);
}

:root[data-glow="on"] #readalong-root .ra-thumb-n {
  color: color-mix(in srgb, var(--glow-accent, #a78bfa) 90%, white);
}

/* ------------------------------------------------------- the V8 walk
 * Three findings from the first-time walkthrough, all about the screen
 * being slower to speak than the person is to act.
 */

/* A take-out that is still on its way to disk. The strike-through is
   already there (ra-box-out); this only says "not settled yet", so a click
   is never silent while the network thinks. */
.ra-box-pending,
.ra-chip-pending {
  animation: ra-pending 1s ease-in-out infinite;
}

@keyframes ra-pending {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .ra-box-pending,
  .ra-chip-pending {
    animation: none;
    opacity: 0.6;
  }
}

/* Once ANY ring is drawn the page means something different — only what is
   ringed gets read. That has to be said where she is looking. */
.ra-ring-banner {
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--success, #4ade80);
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--success, #4ade80) 12%, transparent);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
}

/* A ring that caught nothing is the dangerous one: it reads as progress
   and produces a silent video. Amber, not green. */
.ra-ring-banner-empty {
  border-left-color: var(--sunny, #ffd666);
  background: color-mix(in srgb, var(--sunny, #ffd666) 14%, transparent);
}

/* An edit made on a run that has ALREADY produced a video. The save landed,
   but the video is still the old one until she makes it again — saying so
   is the difference between "that did nothing" and "that is waiting". */
.ra-edit-after-done {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid color-mix(in srgb, var(--sunny, #ffd666) 75%, transparent);
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--sunny, #ffd666) 12%, transparent);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
}