/*
 * theme.css — Hypnotic Bridges / Punți hipnotice.
 *
 * Opens DARK: a deep indigo night lit by one amber candle — the room a trance
 * session happens in. The light mode is a different palette, not the night
 * inverted: warm paper with indigo ink, like a practitioner's notebook.
 * Amber is the accent at night (a filled action you can find in the dark);
 * indigo is the accent on paper. Fraunces carries the spoken lines — soft,
 * literary, made for sentences people read slowly; Figtree carries the
 * interface. The six chart colours double as the six pattern families.
 */

:root {
  color-scheme: dark;

  --canvas: #0e1022;
  --surface: #171a33;
  --surface-2: #20244a;
  --border: #2c3060;
  --border-strong: #4a4f8a;
  --ink: #f3eee4;
  --muted: #a8a5c6;
  --accent: #f2b45a;
  --accent-hover: #f6c579;
  --accent-ink: #1b1405;
  --accent-text: #f5c27a;
  --accent-strong: #f6cf94;
  --accent-soft: #3a2f1f;
  --accent-border: #7a5a2a;
  --success: #1f7a4a;
  --success-ink: #ffffff;
  --success-soft: #13301f;
  --success-strong: #74d6a0;
  --warning: #9c5208;
  --warning-ink: #ffffff;
  --warning-soft: #3a2812;
  --warning-strong: #f2b46b;
  --danger: #b02a2a;
  --danger-ink: #ffffff;
  --danger-soft: #3a171b;
  --danger-strong: #f29c9c;
  --chart-1: #f2b45a;
  --chart-2: #9d99f5;
  --chart-3: #5fcac3;
  --chart-4: #a3d873;
  --chart-5: #ec88b0;
  --chart-6: #d3a6f7;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 500;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 999px;
  --radius-card: 22px;
  --radius-input: 14px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --btn-weight: 600;
  --card-pad: 1.5rem;
  --measure: 64ch;
  --shadow-btn: none;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.7);
  --shadow-raised: 0 24px 60px -20px rgba(0, 0, 0, 0.75);

  --gradient-dusk: radial-gradient(1200px 520px at 15% -10%, color-mix(in srgb, var(--chart-2) 22%, transparent), transparent 70%),
    radial-gradient(900px 480px at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%);

  --x-cmd: #f5c27a;
  --x-cmd-wash: #3d311d;
  --x-card-back: #262a57;
}

html[data-theme="light"] {
  color-scheme: light;

  --canvas: #f6f0e4;
  --surface: #fffcf6;
  --surface-2: #eee5d3;
  --border: #ddd1ba;
  --border-strong: #b4a587;
  --ink: #1c1a3a;
  --muted: #5c5878;
  --accent: #2e2a73;
  --accent-hover: #3d389a;
  --accent-ink: #fbf4e6;
  --accent-text: #3d389a;
  --accent-strong: #2e2a73;
  --accent-soft: #e7e3f7;
  --accent-border: #c4bee9;
  --success: #1f7a4a;
  --success-ink: #ffffff;
  --success-soft: #dcefe2;
  --success-strong: #17603a;
  --warning: #9c5208;
  --warning-ink: #ffffff;
  --warning-soft: #f5e5cc;
  --warning-strong: #7d4206;
  --danger: #b02a2a;
  --danger-ink: #ffffff;
  --danger-soft: #f6dddd;
  --danger-strong: #8f1f1f;
  --chart-1: #b4690e;
  --chart-2: #2e2a73;
  --chart-3: #1d7f79;
  --chart-4: #4c7a1f;
  --chart-5: #a8355f;
  --chart-6: #7046a8;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 14px 32px -22px rgba(0, 0, 0, 0.35);
  --shadow-raised: 0 22px 50px -24px rgba(0, 0, 0, 0.4);

  --gradient-dusk: radial-gradient(1100px 500px at 10% -10%, color-mix(in srgb, var(--chart-2) 10%, transparent), transparent 70%),
    radial-gradient(900px 460px at 100% 0%, color-mix(in srgb, var(--chart-1) 12%, transparent), transparent 65%);

  --x-cmd: #9a5800;
  --x-cmd-wash: #f8e7c8;
  --x-card-back: #e3dcf5;
}

/*
 * app.css — the screens that make this app itself: the analysed sentence,
 * the game board, the pattern cards, the live detector, the class-mode
 * stage. Tokens only. The one moment that moves: a pattern chip lighting
 * up the instant the detector finds it.
 */

/* ---- Ground ------------------------------------------------------------ */
body.dusk {
  font-family: var(--font-body);
  background-color: var(--canvas);
  background-image: var(--gradient-dusk);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.font-display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); }

/* Each family wears one of the six chart colours. */
[data-fam="presup"] { --fam: var(--chart-1); }
[data-fam="embed"] { --fam: var(--chart-2); }
[data-fam="link"] { --fam: var(--chart-3); }
[data-fam="pace"] { --fam: var(--chart-4); }
[data-fam="vague"] { --fam: var(--chart-5); }
[data-fam="bind"] { --fam: var(--chart-6); }

/* ---- Bar --------------------------------------------------------------- */
.topbar { border-bottom: var(--border-w) solid color-mix(in srgb, var(--border) 70%, transparent); }
.brand { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.brand-mark {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink);
}
.navlink {
  display: inline-flex; align-items: center; gap: 0.5rem; height: 2.5rem; padding: 0 0.75rem;
  border-radius: 999px; color: var(--muted); font-size: 0.875rem; font-weight: 600; text-decoration: none;
  transition: background-color 150ms, color 150ms;
}
.navlink:hover { background: var(--surface-2); color: var(--ink); }
.navlink.is-on { color: var(--ink); background: var(--surface-2); }
.navlabel { display: none; }
@media (min-width: 40rem) { .navlabel { display: inline; } }

/* ---- Type -------------------------------------------------------------- */
.kicker {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--eyebrow-tracking);
  color: var(--accent-text);
}
.hero-title { font-size: clamp(2.75rem, 7vw, 5.5rem); line-height: 0.98; margin-top: 1rem; }
.page-title { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.02; }
.section-title { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.1; }
.cmd {
  color: var(--x-cmd); font-style: italic; font-weight: 600;
  background: var(--x-cmd-wash); border-radius: 0.375rem; padding: 0 0.25rem;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ---- Highlights (the detector's paint) --------------------------------- */
mark.hl {
  color: inherit;
  background: color-mix(in srgb, var(--fam, var(--accent)) 20%, transparent);
  border-bottom: 2px solid var(--fam, var(--accent));
  border-radius: 0.25rem; padding: 0 0.125rem;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
mark.hl .cmd { background: transparent; padding: 0; }
mark.hl-trap { background: var(--danger-soft); color: var(--danger-strong); border-bottom: 2px dashed var(--danger); }
.legend-dot { width: 0.625rem; height: 0.625rem; border-radius: 999px; background: var(--fam, var(--muted)); flex-shrink: 0; display: inline-block; }
.legend-chip {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; border-radius: 999px;
  font-size: 0.8125rem; color: var(--ink); background: color-mix(in srgb, var(--fam) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--fam) 40%, transparent);
}

/* ---- Hero showcase ----------------------------------------------------- */
.showcase { padding: 1.75rem; position: relative; overflow: hidden; }
.showcase::before {
  content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  pointer-events: none;
}
.showcase-line {
  position: relative; font-family: var(--font-display); font-size: clamp(1.375rem, 2.6vw, 1.875rem); line-height: 1.6;
  margin-top: 1rem;
}
.showcase-legend { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }

/* ---- Modes ------------------------------------------------------------- */
.modes { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 48rem) { .modes { grid-template-columns: 1fr 1fr; } .mode-card.is-featured { grid-column: span 2; } }
.mode-card {
  display: flex; flex-direction: column; gap: 1rem; min-width: 0; padding: 1.5rem;
  border-radius: var(--radius-card); border: var(--border-w) solid var(--border); background: var(--surface);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow-card);
  transition: border-color 150ms, transform 150ms, background-color 150ms;
}
.mode-card:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.mode-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mode-card.is-featured {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 60%);
  border-color: var(--accent-border);
}
.mode-icon {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 1rem;
  background: var(--accent-soft); color: var(--accent-strong);
}
.mode-icon .icon { width: 1.5rem; height: 1.5rem; }
.mode-body { display: flex; flex-direction: column; gap: 0.5rem; }
.mode-title { font-size: 1.5rem; line-height: 1.15; }
.mode-card.is-featured .mode-title { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.mode-desc { color: var(--muted); line-height: 1.55; }
.mode-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.875rem; }
.mode-go { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--accent-text); }

/* ---- Side cards -------------------------------------------------------- */
.daily-line { font-size: 1.75rem; line-height: 1.25; }
.board { display: flex; flex-direction: column; }
.board-row {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0; border-bottom: var(--border-w) solid var(--border); font-size: 0.9375rem;
}
.board-row:last-child { border-bottom: 0; }
.board-row.is-me { color: var(--accent-text); font-weight: 700; }
.board-rank { font-family: var(--font-display); color: var(--muted); }
.board-mode { display: none; }
.board-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.footline { border-top: var(--border-w) solid var(--border); }

/* ---- Library ----------------------------------------------------------- */
.famnav { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: thin; }
.famnav .chip { flex-shrink: 0; text-decoration: none; }
.family { margin-top: 3.5rem; scroll-margin-top: 1.5rem; }
.family-head { margin-bottom: 1.5rem; }
.fam-swatch { width: 1rem; height: 1rem; border-radius: 0.25rem; background: var(--fam); display: inline-block; flex-shrink: 0; }
.pattern-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 48rem) { .pattern-grid { grid-template-columns: 1fr 1fr; } }
.pattern { border-top: 3px solid var(--fam); }
.pattern-name { font-size: 1.5rem; line-height: 1.2; }
.formula {
  display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1rem; border-radius: 0.875rem;
  background: var(--surface-2); font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.5;
}
.formula-label { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); color: var(--muted); }
.examples { display: flex; flex-direction: column; gap: 0.75rem; }
.example {
  font-family: var(--font-display); font-style: italic; font-size: 1.125rem; line-height: 1.5;
  padding-left: 1rem; border-left: 2px solid var(--fam, var(--accent));
}
.detect-note { font-size: 0.8125rem; color: var(--muted); }
.trap-card { border-top: 3px solid var(--danger); }
.fix { color: var(--success-strong); }
.ethics {
  padding: 2rem; border-radius: var(--radius-card);
  background: var(--accent-soft); color: var(--accent-strong); border: var(--border-w) solid var(--accent-border);
}

/* ---- Game frame -------------------------------------------------------- */
.game-stage { display: flex; flex-direction: column; gap: 1.25rem; }
.game-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.meta-item {
  display: flex; flex-direction: column; gap: 0.125rem; padding: 0.75rem 1rem; min-width: 0;
  border-radius: 1rem; background: var(--surface); border: var(--border-w) solid var(--border);
}
.meta-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); color: var(--muted); }
.meta-value { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stage-card { padding: 1.5rem; }
@media (min-width: 48rem) { .stage-card { padding: 2rem; } }
.q { font-weight: 600; font-size: 1.0625rem; color: var(--ink); display: flex; align-items: center; gap: 0.5rem; }
.spoken { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.125rem); line-height: 1.45; }
.direct-line { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 70%, transparent); text-decoration-thickness: 2px; color: var(--muted); }

/* Answers */
.options { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 40rem) { .options:not(.options-col) { grid-template-columns: 1fr 1fr; } }
.option {
  display: flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; padding: 0.75rem 1rem; width: 100%;
  text-align: left; border-radius: 1rem; border: var(--border-w) solid var(--border-strong);
  background: var(--surface); color: var(--ink); font-weight: 600; cursor: pointer;
  transition: border-color 150ms, background-color 150ms;
}
.option:hover:not(:disabled) { border-color: var(--accent); background: var(--surface-2); }
.option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.option:disabled { cursor: default; }
.option.is-right { border-color: var(--success); background: var(--success-soft); color: var(--success-strong); }
.option.is-wrong { border-color: var(--danger); background: var(--danger-soft); color: var(--danger-strong); }
.option-long { flex-direction: column; align-items: flex-start; font-weight: 500; }
.option-text { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.45; }
.option-note { font-size: 0.875rem; font-weight: 500; color: var(--muted); }
.option.is-right .option-note, .option.is-wrong .option-note { color: inherit; }

.feedback { display: flex; flex-direction: column; gap: 1rem; }
.feedback:empty { display: none; }
.feedback-card.is-ok { border-color: var(--success); }
.feedback-card.is-no { border-color: var(--danger); }
.feedback-verdict { font-weight: 700; font-size: 1.125rem; }
.feedback-card.is-ok .feedback-verdict { color: var(--success-strong); }
.feedback-card.is-no .feedback-verdict { color: var(--danger-strong); }
.also { display: flex; flex-direction: column; gap: 0.5rem; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pchip {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--fam, var(--accent)) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--fam, var(--accent)) 45%, transparent);
}
.pchip-trap { background: var(--danger-soft); color: var(--danger-strong); border-color: var(--danger); }
.pchip.is-new { animation: chip-light 700ms var(--ease-out, ease-out) both; }
@keyframes chip-light {
  0% { transform: scale(0.92); box-shadow: 0 0 0 0 color-mix(in srgb, var(--fam, var(--accent)) 60%, transparent); }
  60% { transform: scale(1.04); box-shadow: 0 0 0 0.375rem color-mix(in srgb, var(--fam, var(--accent)) 0%, transparent); }
  100% { transform: none; }
}
html.reduced-motion .pchip.is-new { animation: none; }

/* Pattern cards dealt to the player */
.cards-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); color: var(--muted); }
.cards { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 40rem) { .cards { grid-template-columns: 1fr 1fr; } }
.pcard {
  border-radius: 1rem; border: var(--border-w) solid color-mix(in srgb, var(--fam) 50%, var(--border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--fam) 14%, var(--x-card-back)), var(--surface) 75%);
  min-width: 0;
}
.pcard.is-used { border-color: var(--success); }
.pcard-head { display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem 1rem; cursor: pointer; list-style: none; }
.pcard-head::-webkit-details-marker { display: none; }
.pcard-name { font-family: var(--font-display); font-size: 1.125rem; min-width: 0; }
.pcard-status { margin-left: auto; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.pcard.is-used .pcard-status { color: var(--success-strong); }
.pcard-body { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9375rem; color: var(--muted); }
.pcard-formula { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink); background: var(--surface-2); border-radius: 0.625rem; padding: 0.5rem 0.75rem; }
.pcard-ex { font-family: var(--font-display); font-style: italic; color: var(--ink); }

/* Writer + detector */
.writer { display: flex; flex-direction: column; gap: 0.875rem; }
.writer-input { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.55; min-height: 8rem; }
.detector {
  display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: 1rem;
  background: var(--surface-2); border: var(--border-w) dashed var(--border-strong);
}
.detector-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); color: var(--muted); }
.detector-head-trap { color: var(--danger-strong); }
.trap-why { font-size: 0.875rem; color: var(--danger-strong); }
.preview { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.7; padding-top: 0.75rem; border-top: var(--border-w) solid var(--border); }

/* After a written answer */
.after-write { display: flex; flex-direction: column; gap: 1rem; }
.after-write:empty { display: none; }
.result-score { display: flex; align-items: baseline; gap: 0.5rem; }
.result-num { font-size: 3rem; line-height: 1; color: var(--accent-text); }
.result-lines { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9375rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rate-row { display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 40rem) { .rate-row { flex-direction: row; } }
.rate-row .btn.is-picked { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); opacity: 1; }
.models { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; border-radius: var(--radius-card); background: var(--surface); border: var(--border-w) solid var(--border); }
.models-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); color: var(--accent-text); }
.model-list { display: flex; flex-direction: column; gap: 1rem; }
.model { display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 1rem; border-bottom: var(--border-w) solid var(--border); }
.model:last-child { border-bottom: 0; padding-bottom: 0; }
.model-text { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.65; }

/* A → B */
.ab { display: grid; grid-template-columns: 1fr; gap: 0.75rem; align-items: stretch; }
@media (min-width: 48rem) { .ab { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; } }
.ab-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; border-radius: var(--radius-card); border: var(--border-w) solid var(--border); background: var(--surface); min-width: 0; height: 100%; }
.ab-a { border-left: 4px solid var(--chart-4); }
.ab-b { border-left: 4px solid var(--accent); }
.ab-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); color: var(--muted); }
.ab-text { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.45; }
.ab-arrow { display: grid; place-items: center; color: var(--accent-text); transform: rotate(90deg); }
@media (min-width: 48rem) { .ab-arrow { transform: none; } }

/* Story */
.themes { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 40rem) { .themes { grid-template-columns: 1fr 1fr; } }
.theme-card {
  display: flex; flex-direction: column; gap: 0.375rem; padding: 1.25rem; text-align: left; cursor: pointer;
  border-radius: 1rem; border: var(--border-w) solid var(--border-strong); background: var(--surface); color: var(--ink);
  transition: border-color 150ms, background-color 150ms;
}
.theme-card:hover { border-color: var(--accent); background: var(--surface-2); }
.theme-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-title { font-size: 1.375rem; }
.theme-intent { color: var(--muted); font-size: 0.9375rem; }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.step-dot { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; min-width: 0; font-size: 0.75rem; color: var(--muted); text-align: center; }
.step-num {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px;
  border: var(--border-w) solid var(--border-strong); background: var(--surface); font-weight: 700; color: var(--ink);
}
.step-dot.is-on .step-num { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.step-dot.is-done .step-num { background: var(--success-soft); color: var(--success-strong); border-color: var(--success); }
.step-name { display: none; }
@media (min-width: 40rem) { .step-name { display: block; } }
.step-title { font-size: 1.75rem; line-height: 1.15; }
.script { display: flex; flex-direction: column; gap: 0.75rem; }
.script-line { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.65; }
.script-line.is-opening { color: var(--muted); font-style: italic; }
.continue-from { font-size: 0.9375rem; padding: 0.75rem 1rem; border-radius: 0.875rem; background: var(--surface-2); }
.continue-from em { font-family: var(--font-display); }
.script-card { display: flex; flex-direction: column; gap: 1rem; }

/* End */
.end-card { display: flex; flex-direction: column; gap: 1rem; }
.end-num { font-size: clamp(3.5rem, 10vw, 6rem); line-height: 1; color: var(--accent-text); }
.save-row { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 40rem) { .save-row { flex-direction: row; } .save-row .input { max-width: 18rem; } }
.save-row .btn { flex-shrink: 0; }

/* ---- Class mode -------------------------------------------------------- */
.class-board { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.75rem; }
@media (min-width: 48rem) { .class-board { padding: 2.5rem; } }
.class-line { font-size: clamp(2rem, 6vw, 3.75rem); line-height: 1.15; }
.class-board .ab-text { font-size: clamp(1.375rem, 3vw, 2rem); }
.clock { font-size: clamp(2.5rem, 7vw, 4rem); line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent-text); }
.clock.is-low { color: var(--danger-strong); }
.class-card {
  display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.5rem; border-radius: var(--radius-card);
  background: linear-gradient(160deg, color-mix(in srgb, var(--fam) 22%, var(--x-card-back)), var(--surface) 80%);
  border: var(--border-w) solid color-mix(in srgb, var(--fam) 55%, var(--border));
}
.class-card-name { display: flex; align-items: center; gap: 0.75rem; font-size: clamp(1.5rem, 3.5vw, 2.25rem); line-height: 1.15; }
.class-card-name .legend-dot { width: 1rem; height: 1rem; }
.class-actions { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 40rem) { .class-actions { flex-direction: row; } }
.class-models { margin-top: 0.25rem; }
.model-script { margin-top: 0.25rem; }