/* Nektar General English: mobile-first, calm, high contrast. No emoji; icons are inline SVG. */

/* Colors follow the illustration palette (visual-engine/library/palettes, cool_default): a deep
   navy anchor, paper backgrounds, one warm accent. Flat surfaces: borders, no glow, no gradients. */
:root {
  --navy: #183153;
  --blue: #3f78c5;
  --sky: #dfe8f2;
  --sky-2: #edf2f8;
  --accent: #3f78c5;
  --accent-soft: #e3edf9;
  --bg: #faf6ef;
  --surface: #fffdf9;
  --surface-2: #eee9e1;
  --line: #ded8ce;
  --text: #1b2d46;
  --muted: #606977;
  --primary: #e8512f;
  --primary-ink: #25160f;
  --primary-soft: #fbe4da;
  --learner: #183153;
  --learner-ink: #ffffff;
  --select: #3f78c5;
  --ok: #126c34;
  --ok-soft: #e2f3e7;
  --bad: #b42318;
  --bad-soft: #fce6e3;
  --near: #9a5b06;
  --near-soft: #fcf0d9;
  --radius: 22px;
  --radius-s: 14px;
  --shadow: none;
  --bar-h: 76px;
  --accent-ink: #285b9c;
  --paper-rule: #e7dfd4;
  --stamp: #ac3c22;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
    --navy: #183153;
    --blue: #7aa7e6;
    --sky: #1d3150;
    --sky-2: #172740;
    --accent: #7aa7e6;
    --accent-soft: #1b2d48;
    --bg: #121a24;
    --surface: #1a2533;
    --surface-2: #243242;
    --line: #3c4a5c;
    --text: #f1ede5;
    --muted: #b3bfce;
    --primary: #f26a47;
    --primary-soft: #3b231e;
    --accent-ink: #9bc0f1;
    --paper-rule: #344354;
    --stamp: #f5a38b;
    --learner: #183153;
    --learner-ink: #ffffff;
    --select: #7aa7e6;
    --ok: #4cc07a;
    --ok-soft: #15301f;
    --bad: #ff7b6e;
    --bad-soft: #3a1c1a;
    --near: #f0b24a;
    --near-soft: #382a13;
    color-scheme: dark;
  }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }

.app { max-width: 480px; margin: 0 auto; min-height: 100dvh; position: relative; }
.boot { display: grid; place-items: center; min-height: 100dvh; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }

.icon { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; }
.icon svg { width: 100%; height: 100%; }
.icon.big { width: 2rem; height: 2rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 48px; padding: 0 1.1rem; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; text-decoration: none; background: var(--surface-2); transition: transform 0.18s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-soft { background: var(--surface); border-color: var(--line); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-small { min-height: 38px; padding: 0 0.85rem; font-size: 0.9rem; }
.btn-block { width: 100%; }
.danger { color: var(--bad); }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; color: var(--muted); }
.icon-btn .icon { width: 24px; height: 24px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.75rem 0; }

/* ---------- pages ---------- */
.page { padding: calc(var(--safe-top) + 1.25rem) 1.25rem max(1.25rem, calc(var(--safe-bottom) + 1rem)); }
.brand { font-weight: 800; font-size: 1.6rem; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 0.5rem; }
.brand span { font-weight: 500; font-size: 0.95rem; color: var(--muted); }
.brand-small { font-size: 1.25rem; }
.lead { color: var(--muted); font-size: 1.05rem; }

.onboarding h1 { font-size: 1.75rem; margin: 1rem 0 0.5rem; }
.field { display: grid; gap: 0.4rem; margin: 1.25rem 0; }
.field > span { font-weight: 600; }
.field small { color: var(--muted); }
.onb-actions { display: grid; gap: 0.6rem; }
.onb-level { display: grid; gap: 0.5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); text-align: center; }
.onb-level p { margin: 0; }

.home-head { display: flex; justify-content: space-between; align-items: center; }
.hello { color: var(--muted); margin: 0.25rem 0 1.25rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.review-card { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem 1rem; align-items: center; margin-bottom: 1.5rem; }
.review-card .icon { color: var(--primary); }
.review-card p { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.95rem; }
.review-card .btn { grid-column: 1 / -1; }
.level { margin: 1.5rem 0; }
.level h2 { font-size: 1.15rem; display: flex; gap: 0.5rem; align-items: baseline; margin-bottom: 0.75rem; }
.level h2 span { font-weight: 500; color: var(--muted); font-size: 0.95rem; }
/* ---------- lesson frame ---------- */
.lesson { display: flex; flex-direction: column; height: 100dvh; }
.topbar { display: flex; align-items: center; gap: 0.5rem; padding: calc(var(--safe-top) + 0.5rem) 0.75rem 0.5rem 0.25rem; }
.progress-wrap { flex: 1; min-width: 0; }
.stage-label { font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lesson-body { flex: 1; overflow-y: auto; padding: 0.5rem 1.25rem 1.5rem; scroll-behavior: smooth; }
.actionbar {
  display: flex; gap: 0.6rem; padding: 0.75rem 1.25rem calc(var(--safe-bottom) + 0.75rem);
  border-top: 1px solid var(--line); background: var(--bg); position: relative; z-index: 3;
}
.actionbar .btn-primary { flex: 1; }

/* feedback sheet: sits right above the action bar */
.sheet {
  position: relative; z-index: 2; max-height: 0; overflow: hidden; padding: 0 1.25rem;
  background: var(--surface); border-top: 1px solid var(--line);
}
.sheet.is-open { max-height: 60vh; overflow-y: auto; padding: 1rem 1.25rem; order: 2; }
.lesson.has-sheet .actionbar { order: 3; }
.sheet-ok { background: var(--ok-soft); }
.sheet-near { background: var(--near-soft); }
.sheet-bad { background: var(--bad-soft); }
.sheet-head { display: flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; }
.sheet-ok .sheet-icon { color: var(--ok); }
.sheet-near .sheet-icon { color: var(--near); }
.sheet-bad .sheet-icon { color: var(--bad); }
.sheet-body { margin: 0.4rem 0 0; }
.sheet-model { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; font-weight: 600; }

/* ---------- shared step pieces ---------- */
.step { animation: in 0.2s ease; }
@keyframes in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.question { font-size: 1.1rem; margin: 1.25rem 0 0.75rem; }
.situation { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.85rem 1rem; border-radius: var(--radius); background: var(--surface-2); margin: 0.25rem 0 0.75rem; }
.situation .icon { color: var(--primary); margin-top: 0.1rem; }
.situation-small { padding: 0.6rem 0.8rem; font-size: 0.95rem; }
.context { margin: 0.5rem 0; }

.choices { display: grid; gap: 0.55rem; }
.choice {
  text-align: left; padding: 0.9rem 1rem; min-height: 52px; border-radius: var(--radius-s);
  border: 1.5px solid var(--line); background: var(--surface); font-weight: 500;
}
.choice.is-selected { border-color: var(--select); box-shadow: 0 0 0 2px color-mix(in srgb, var(--select) 25%, transparent); }
.choice.is-correct { border-color: var(--ok); background: var(--ok-soft); }
.choice.is-wrong { border-color: var(--bad); background: var(--bad-soft); }
.choices.is-locked .choice { pointer-events: none; }
.choice-small { padding: 0.6rem 0.8rem; min-height: 44px; font-size: 0.95rem; }

/* avatars */
.avatar { --c: #64748b; display: inline-grid; place-items: center; border-radius: 50%; flex: none; background-color: color-mix(in srgb, var(--c) 18%, var(--surface)); color: var(--c); font-weight: 700; background-repeat: no-repeat; border: 2px solid var(--c); }
.avatar-sm { width: 34px; height: 34px; font-size: 0.85rem; }
.avatar-md { width: 44px; height: 44px; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.4rem; }
.avatar .icon { width: 55%; height: 55%; }

/* bubbles */
.chat { display: grid; gap: 0.6rem; padding: 0.25rem 0 0.5rem; }
.bubble { --c: #64748b; display: flex; gap: 0.5rem; align-items: flex-end; max-width: 92%; }
.bubble-npc .bubble-body { background: color-mix(in srgb, var(--c) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); border-bottom-left-radius: 4px; }
.bubble-learner { margin-left: auto; flex-direction: row-reverse; }
.bubble-learner .bubble-body { background: var(--learner); color: var(--learner-ink); border-bottom-right-radius: 4px; }
.bubble-learner .bubble-name { color: rgba(255, 255, 255, 0.8); }
.bubble-body { position: relative; padding: 0.55rem 2.3rem 0.6rem 0.85rem; border-radius: 16px; min-width: 6rem; }
.bubble-learner .bubble-body { padding-right: 0.85rem; }
.bubble-learner .bubble-body:has(.bubble-play) { padding-right: 2.3rem; }
.bubble-name { font-size: 0.75rem; font-weight: 700; color: var(--c); }
.bubble-text { font-size: 1.05rem; }
.bubble-text.is-hidden { color: var(--muted); font-style: italic; font-size: 0.9rem; }
.tr-reveal { margin: 0.25rem 0 0; font-size: 0.9rem; font-weight: 400; color: var(--muted); }
.has-tr { cursor: pointer; }
.has-tr:focus-visible { outline: 2px solid var(--select, var(--accent)); outline-offset: 2px; border-radius: 6px; }
.has-tr[aria-expanded="true"] { color: inherit; }
.bubble-play { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: inherit; opacity: 0.7; display: grid; place-items: center; }
.bubble.is-new { animation: pop 0.25s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.chat-static .bubble { cursor: pointer; }
.narration { text-align: center; color: var(--muted); font-size: 0.9rem; font-style: italic; padding: 0.25rem 1rem; }
.coach { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9rem; padding: 0.55rem 0.75rem; border-radius: var(--radius-s); background: var(--near-soft); color: var(--text); }
.coach .icon { color: var(--near); }
.coach-soft { background: var(--surface-2); }
.outcome { display: flex; gap: 0.5rem; align-items: center; padding: 0.8rem 1rem; border-radius: var(--radius); background: var(--ok-soft); font-weight: 600; margin-top: 0.5rem; }
.outcome .icon { color: var(--ok); }
.composer { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.choices-chat .choice { border-color: color-mix(in srgb, var(--learner) 40%, var(--line)); }

/* play buttons */
.play { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: inline-grid; place-items: center; color: var(--text); flex: none; }
.play .icon { width: 18px; height: 18px; }
.play-big { width: auto; height: 48px; padding: 0 1rem; border-radius: 999px; display: inline-flex; gap: 0.4rem; font-weight: 600; }
.repair { position: relative; display: inline-flex; }
.repair-menu { position: absolute; z-index: 5; top: calc(100% + 6px); right: 0; display: grid; gap: 0.35rem; min-width: 220px; padding: 0.4rem; border: 1.5px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
.repair-menu[hidden] { display: none; }
.repair-option { padding: 0.55rem 0.7rem; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.repair-option:focus-visible, .repair-option:hover { outline: 2px solid var(--select); }
.play.is-playing { border-color: var(--primary); color: var(--primary); }


/* cards */
.card-kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color: var(--primary); margin-bottom: 0.35rem; }
.card-en { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.card-tr { color: var(--muted); font-size: 1.05rem; margin-top: 0.25rem; }
.card-audio { display: flex; gap: 0.5rem; margin: 1rem 0 0.25rem; }
.has-audio-status { flex-wrap: wrap; }
.audio-status { display: block; flex: 1 0 100%; line-height: 1.4; text-align: left; }
.card-note { margin: 0.75rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.shadow-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0; }
.btn-record.is-recording, .btn.is-recording { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }

/* match */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.match-col { display: grid; grid-row: 1 / span var(--match-rows); grid-template-rows: subgrid; gap: 0.5rem; }
.match-item { position: relative; text-align: left; padding: 0.75rem; min-height: 56px; border-radius: var(--radius-s); border: 1.5px solid var(--line); background: var(--surface); font-size: 0.95rem; }
.match-r { font-weight: 600; }
.match-item.is-selected { border-color: var(--learner); }
.match-item.is-wrong { border-color: var(--bad); background: var(--bad-soft); animation: shake 0.3s; }
.match-item.is-matched { border-color: var(--ok); background: var(--ok-soft); color: var(--muted); }
.match-item.is-matched::after { content: attr(data-n); position: absolute; right: 0.4rem; top: 0.3rem; font-size: 0.7rem; color: var(--ok); font-weight: 700; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* gaps */
.gap-sentence { font-size: 1.35rem; font-weight: 600; margin: 1rem 0; line-height: 2.2; }
.gap { display: inline-block; min-width: 4.5rem; border-bottom: 2px solid var(--learner); text-align: center; color: var(--learner); }
.gap-input { display: inline-block; width: 7rem; font-size: 1.2rem; font-weight: 600; padding: 0.2rem 0.4rem; margin: 0 0.25rem; border: 0; border-bottom: 2px solid var(--learner); border-radius: 0; background: transparent; }
.gap-input:focus { outline: none; background: var(--surface); }

/* builder */
.build { display: grid; gap: 1rem; }
.build-answer { min-height: 64px; padding: 0.6rem; border-radius: var(--radius-s); border: 1.5px dashed var(--line); display: flex; flex-wrap: wrap; gap: 0.4rem; align-content: flex-start; }
.build-placeholder { color: var(--muted); font-size: 0.9rem; align-self: center; padding: 0 0.3rem; }
.build-bank { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.build-bank.is-locked { pointer-events: none; opacity: 0.6; }
.token { padding: 0.55rem 0.9rem; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 600; font-size: 1.05rem; min-height: 44px; }
.token.is-used { visibility: hidden; }
.token-in { border-color: var(--learner); color: var(--learner); }

/* text input */
.text-input { width: 100%; padding: 0.8rem 0.9rem; border-radius: var(--radius-s); border: 1.5px solid var(--line); background: var(--surface); font-size: 1.05rem; resize: none; }
.text-input:focus { outline: none; border-color: var(--learner); }
.diff { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0; }
.diff span { padding: 0.1rem 0.4rem; border-radius: 6px; }
.diff .ok { background: var(--ok-soft); }
.diff .miss { background: var(--surface); text-decoration: underline wavy var(--bad); }

/* summary */
.summary { text-align: left; }
.summary-badge { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); margin-bottom: 1rem; }
.summary-badge .icon { width: 28px; height: 28px; }
.summary h1 { font-size: 1.5rem; }
.summary h2 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
.learned { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.learned li { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-s); background: var(--surface); border: 1px solid var(--line); }
.learned li > div { flex: 1; display: grid; }
.learned small { color: var(--muted); }
.level-2, .level-3 { background: var(--near-soft); color: var(--near); }
.level-4, .level-5 { background: var(--ok-soft); color: var(--ok); }
.check-card { margin-top: 1rem; }
.check-card.is-pass { border-color: var(--ok); }
.check-card p { margin: 0.3rem 0 0; }
.summary-actions { display: flex; gap: 0.6rem; margin-top: 1.5rem; flex-wrap: wrap; }
.summary-actions .btn-primary { flex: 1; }
.summary .muted .icon { vertical-align: -0.2em; }

/* dialog */
.dialog { border: 0; border-radius: var(--radius); padding: 1.25rem; width: min(92vw, 420px); background: var(--surface); color: var(--text); }
.dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.dialog-actions { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; }

@media (min-width: 520px) {
  .app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}
@media (max-width: 340px) {
  .lesson-body, .page { padding-left: 0.9rem; padding-right: 0.9rem; }
  .card-en { font-size: 1.45rem; }
  .gap-sentence { font-size: 1.15rem; }
  .match { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

:where(:root[data-theme="dark"]) .bubble-name { color: color-mix(in srgb, var(--c) 55%, var(--text)); }

/* ================= v2: journey, stops, activities ================= */

/* home */
.head-actions { display: flex; gap: 0.25rem; }
.badge-wrap { position: relative; }
.badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font-size: 0.7rem; font-weight: 700; display: grid; place-items: center; }
.now { margin: 0.75rem 0 1rem; display: grid; gap: 0.35rem; border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); }
.now h1 { font-size: 1.6rem; letter-spacing: -0.01em; }
.now-meta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.now-story { display: flex; gap: 0.4rem; align-items: flex-start; margin: 0.25rem 0 0.6rem; color: var(--muted); font-size: 0.9rem; }
.now-story .icon { color: var(--primary); margin-top: 0.15rem; }
.now .btn { margin-top: 0.4rem; }
.chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.chip .icon { width: 0.9rem; height: 0.9rem; }
.chip-accent { background: var(--primary); color: var(--primary-ink); }
.home-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1.5rem; }
.tile-card { display: grid; gap: 0.2rem; padding: 0.9rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-decoration: none; }
.tile-card .icon { color: var(--accent); width: 1.6rem; height: 1.6rem; margin-bottom: 0.2rem; }
.tile-card small { color: var(--muted); }
.home-tiles .tile-card:only-child { grid-column: 1 / -1; }

.journey-title { font-size: 1.3rem; line-height: 1.25; letter-spacing: -.025em; margin: 28px 0 16px; }
.block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 0.75rem; overflow: hidden; }
.block summary { list-style: none; cursor: pointer; padding: 0.9rem 1rem; display: grid; gap: 0.5rem; }
.block summary::-webkit-details-marker { display: none; }
.block-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.path { position: relative; padding: 0 1rem 1rem 1rem; }
.path::before { content: ""; position: absolute; left: calc(1rem + 17px); top: 0; bottom: 1rem; width: 2px; background: var(--line); }
.unit-label { position: relative; display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0 0.3rem 48px; font-size: 0.9rem; font-weight: 600; }
.unit-code { font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 6px; background: var(--primary-soft); color: var(--primary); }
.stop { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0.5rem 0.45rem 0; text-decoration: none; border-radius: var(--radius-s); }
@media (hover: hover) {
  a.stop:hover .stop-main strong { text-decoration: underline; text-underline-offset: 3px; }
}
.stop-dot { position: relative; z-index: 1; width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); font-weight: 700; font-size: 0.85rem; color: var(--muted); }
.stop-dot .icon { width: 26px; height: 26px; }
.stop-dot .icon svg, .intro-knot-mark .icon svg { stroke-width: 1.8; }
.stop-main { flex: 1; min-width: 0; display: grid; }
.stop-main strong { font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop-main small { color: var(--muted); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop.is-done .stop-dot { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.stop.is-current .stop-dot { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); box-shadow: 0 0 0 5px var(--primary-soft); }
.stop.is-locked { opacity: 0.55; }
.stop-task .stop-dot { border-style: solid; }
.stop-review .stop-dot { border-color: var(--accent); color: var(--accent); }
.stop-milestone .stop-dot { border-color: var(--near); color: var(--near); background: var(--near-soft); }
.stop-milestone .stop-main strong { font-weight: 550; }
.stop .icon.muted { color: var(--muted); }

.back { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--muted); text-decoration: none; font-size: 0.9rem; margin-bottom: 0.75rem; }
.stop-intro h1 { font-size: 1.75rem; margin-top: 0.6rem; }
.story { font-size: 1rem; line-height: 1.55; margin: 0.9rem 0; padding-left: 0.8rem; border-left: 3px solid var(--accent); color: var(--text); }
.cando { margin: 1rem 0; }
.cando p { margin: 0; }

/* skill chain in the lesson top bar */
.chain { display: flex; gap: 6px; align-items: center; }
.link { flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--muted); }
.link-icon .icon { width: 15px; height: 15px; }
.link-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.link-fill { height: 100%; background: var(--primary); transform-origin: left; transition: transform 0.3s var(--ease); }
.link.is-current { color: var(--primary); }
.link.is-done { color: var(--ok); }
.link.is-done .link-fill { background: var(--ok); }

/* instructions */
.instr { margin: 0.35rem 0 0.9rem; }
.instr-en { margin: 0; font-weight: 700; font-size: 1.05rem; }
.instr-tr { margin: 0.1rem 0 0; color: var(--muted); font-size: 0.88rem; }
.setting { display: flex; gap: 0.45rem; align-items: flex-start; margin: 0 0 0.75rem; color: var(--muted); font-size: 0.9rem; }
.setting .icon { color: var(--accent); margin-top: 0.15rem; }
.question { margin: 1rem 0 0.7rem; }
.question h3 { font-size: 1.2rem; }
.q-tr { margin: 0.15rem 0 0.6rem; color: var(--muted); font-size: 0.9rem; }
.q-main { margin: 0; font-weight: 600; font-size: 1.05rem; }

/* media slots */
.media { position: relative; display: grid; place-items: center; border-radius: var(--radius-s); overflow: hidden; background: var(--surface-2); flex: none; }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.media.is-empty { background: var(--sky-2); border: 1.5px solid var(--sky); }
.media-icon { color: var(--blue); opacity: 0.55; }
.media-icon .icon { width: 2.4rem; height: 2.4rem; }
.media-xs .media-icon .icon, .media-sm .media-icon .icon { width: 1.4rem; height: 1.4rem; }
.media.is-word { background: var(--sky-2); border: 1.5px solid var(--sky); }
.media-word { padding: 0.4rem; text-align: center; font-weight: 700; font-size: 1rem; line-height: 1.25; color: var(--text); }
.media.is-numeral { background: var(--sky-2); border: 1.5px solid var(--sky); }
.media-numeral { font: 600 clamp(2rem, 9vw, 3.4rem)/1 var(--font-display); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.media-sm .media-numeral { font-size: 1.6rem; }
.media-xs { width: 26px; height: 26px; border-radius: 50%; }
.media-xs .media-icon { display: none; }
.media-sm { width: 100%; aspect-ratio: 1; }
.media-md { width: min(100%, 220px); aspect-ratio: 4 / 3; margin: 0 auto 0.75rem; }
.media-lg { width: min(100%, 260px); aspect-ratio: 1; margin: 0 auto 0.75rem; }

/* tiles (picture choices) */
.choices.tiles { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.choices.tiles .choice { padding: 0.35rem; min-height: 0; }
.tile { display: block; }
.choices-row { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.choices-row .choice { text-align: center; font-weight: 600; font-size: 1.05rem; }
.audio-hero { display: flex; gap: 0.5rem; justify-content: center; margin: 0.5rem 0 1.25rem; }
.pick-focus { margin: 0.5rem 0 0; text-align: center; font-size: 1.6rem; font-weight: 700; }
.bridge-reveal { display: grid; justify-items: center; gap: 0.1rem; margin-top: 1rem; padding: 0.75rem; border-radius: var(--radius); background: var(--accent-soft); }
.bridge-reveal strong { font-size: 1.6rem; }
.bridge-reveal span { color: var(--muted); }

/* word card */
.word-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.1rem 1.25rem; box-shadow: var(--shadow); text-align: center; }
.word-card .card-audio { justify-content: center; }
.word-card.kind-chunk { text-align: left; }
.word-card.kind-chunk .card-audio { justify-content: flex-start; }
.card-note { display: block; text-align: left; font-size: 0.92rem; color: var(--muted); }
.card-example { margin-top: 1rem; }

/* listening */
.listen-stage { position: relative; display: flex; gap: 1.25rem; justify-content: center; padding: 1rem 0.5rem 0.75rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.kind-badge { position: absolute; left: 0.6rem; top: 0.6rem; color: var(--muted); }
.face { display: grid; justify-items: center; gap: 0.25rem; font-size: 0.82rem; font-weight: 600; transition: transform 0.2s; }
.face.is-speaking { transform: translateY(-3px); }
.face.is-speaking .avatar { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent); }
.listen-controls { display: flex; gap: 0.5rem; justify-content: center; margin: 0.6rem 0 0.25rem; }
.tf-list { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.tf-row { display: flex; gap: 0.6rem; align-items: center; justify-content: space-between; padding: 0.65rem 0.75rem; border-radius: var(--radius-s); background: var(--surface); border: 1.5px solid var(--line); }
.tf-s { display: grid; font-weight: 600; }
.tf-s small { font-weight: 400; color: var(--muted); }
.tf-btns { display: flex; gap: 0.35rem; flex: none; }
.tf-btn { min-width: 64px; min-height: 40px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 600; font-size: 0.85rem; }
.tf-btn.is-selected { border-color: var(--learner); color: var(--learner); }
.tf-list.is-locked .tf-btn { pointer-events: none; }
.tf-row.is-correct { border-color: var(--ok); background: var(--ok-soft); }
.tf-row.is-wrong { border-color: var(--bad); background: var(--bad-soft); }
.tf-btn.is-answer { background: var(--text); color: var(--bg); border-color: var(--text); }

/* glossary */
.gnw { white-space: nowrap; }
.gw { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline dotted color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 4px; cursor: pointer; }
.bubble-learner .gw { text-decoration-color: rgba(255, 255, 255, 0.5); }
.gloss-pop { position: absolute; z-index: 20; display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.5rem 0.45rem 0.75rem; border-radius: 12px; background: var(--text); color: var(--bg); box-shadow: var(--shadow); max-width: 240px; font-size: 0.92rem; }
.gloss-pop .play { width: 30px; height: 30px; background: transparent; color: var(--bg); border-color: color-mix(in srgb, var(--bg) 40%, transparent); }
.lesson { position: relative; }

/* reading genres */
.read { border-radius: var(--radius); margin: 0.25rem 0 0.5rem; }
.read-body p { margin: 0.1rem 0; font-size: 1.08rem; line-height: 1.55; }
.read-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--muted); }
.read-head strong { color: var(--text); }
.read-message { padding: 0.75rem; background: var(--surface-2); }
.msg-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.msg-head .muted { margin-left: auto; }
.msg-bubble { background: var(--surface); border-radius: 16px 16px 16px 4px; padding: 0.65rem 0.85rem; box-shadow: var(--shadow); max-width: 92%; }
.read-note { padding: 1rem 1.1rem; background: #fff8dc; color: #2b2615; border: 1px solid #efe2a8; transform: rotate(-0.4deg); box-shadow: var(--shadow); }
.read-note .read-head, .read-note .read-head strong { color: #6b5d24; }
.read-list, .read-form, .read-menu, .read-ticket, .read-email, .read-text, .read-poster { padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); }
.read-list .read-body p { padding: 0.2rem 0; border-bottom: 1px dashed var(--line); }
.read-list .read-body p:last-child { border-bottom: 0; }
.read-sign { padding: 1rem; background: #1f4e3d; color: #fff; text-align: center; border: 3px solid #e8efe9; outline: 1px solid #1f4e3d; }
.read-sign .read-head, .read-sign .read-head strong { color: #cfe5da; justify-content: center; }
.read-sign .read-body p { font-weight: 700; letter-spacing: 0.02em; }
.read-ticket { border-left: 6px solid var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.read-ticket .read-body p { font-size: 0.98rem; }
.read-menu .read-body p { display: flex; justify-content: space-between; }

/* sort */
.sort { display: grid; gap: 1rem; }
.buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem; }
.bucket { min-height: 110px; padding: 0.6rem; border-radius: var(--radius-s); border: 1.5px dashed var(--line); background: var(--surface); cursor: pointer; }
.bucket-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.4rem; }
.bucket-items { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.token.is-selected { border-color: var(--learner); box-shadow: 0 0 0 2px color-mix(in srgb, var(--learner) 25%, transparent); }
.token.is-correct { border-color: var(--ok); background: var(--ok-soft); }
.token.is-wrong { border-color: var(--bad); background: var(--bad-soft); }
.sort.is-locked .token { pointer-events: none; }

/* drag and drop */
.token, .match-item, .choice { touch-action: manipulation; }
.build-bank .token, .build-answer .token, .sort .token, .match-l, .choices-row .choice { touch-action: none; user-select: none; -webkit-user-select: none; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; opacity: 0.92; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.is-dragging { opacity: 0.35; }
[data-drop].is-over { border-color: var(--learner) !important; background: color-mix(in srgb, var(--learner) 8%, var(--surface)); }
.build-answer.is-locked, .build-bank.is-locked { pointer-events: none; }
.build-answer.lines, .build-bank.lines { flex-direction: column; flex-wrap: nowrap; }
.lines .token { text-align: left; font-weight: 500; font-size: 1rem; width: 100%; }
.build-answer.letters { justify-content: center; }
.letters .token { min-width: 44px; text-transform: lowercase; text-align: center; font-size: 1.25rem; padding: 0.45rem 0.6rem; }
.build-bank.letters { justify-content: center; }
.spell-top { display: grid; justify-items: center; gap: 0.25rem; margin-bottom: 0.75rem; }
.spell-top .media-md { margin-bottom: 0; }

/* match with pictures */
.match-right { display: flex; align-items: center; gap: 0.45rem; }

/* speak */
.shadow-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); }
.mic { gap: 0.35rem; }

/* message, form */
.phone { border-radius: 22px; border: 1px solid var(--line); background: var(--surface-2); padding: 0.75rem; display: grid; gap: 0.75rem; }
.phone-compose .text-input { background: var(--surface); }
.need { margin-top: 0.75rem; }
.need ul { list-style: none; padding: 0; margin: 0.35rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.need li { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 0.9rem; color: var(--muted); }
.need li .icon { width: 0.95rem; height: 0.95rem; opacity: 0.3; }
.need li.is-ok { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.need li.is-ok .icon { opacity: 1; }
.form-card { padding: 1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 0.6rem; }
.form-row { display: grid; gap: 0.25rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.text-input.is-correct { border-color: var(--ok); }
.text-input.is-wrong { border-color: var(--bad); }

/* fix card */
.fix-card { display: grid; gap: 0.6rem; }
.fix-row { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.5rem; align-items: center; padding: 0.8rem 0.9rem; border-radius: var(--radius-s); border: 1.5px solid var(--line); background: var(--surface); }
.fix-label { grid-column: 1 / -1; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.fix-text { font-size: 1.15rem; font-weight: 600; }
.fix-row.is-wrong { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.fix-row.is-wrong .fix-text { text-decoration: line-through; text-decoration-color: var(--bad); color: var(--muted); }
.fix-row.is-right { border-color: var(--ok); background: var(--ok-soft); }
.fix-note { display: flex; gap: 0.5rem; margin: 0; padding: 0.7rem 0.8rem; border-radius: var(--radius-s); background: var(--near-soft); }
.fix-note .icon { color: var(--near); flex: none; }
.sheet-foot { display: flex; gap: 0.4rem; align-items: center; margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--muted); }
.fix-sum { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 1rem; }
.fix-sum .icon { color: var(--accent); width: 1.5rem; height: 1.5rem; }
.fix-sum p { margin: 0.2rem 0 0; }

/* speed round */
.speed-timer { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin-bottom: 1.25rem; }
.speed-fill { height: 100%; width: 100%; background: var(--accent); transform-origin: left; transition: transform 0.1s linear; }
.speed-word { font-size: 2rem; font-weight: 800; text-align: center; margin: 0.5rem 0 1.25rem; }

/* can-do self rating */
.cando-row { display: grid; gap: 0.5rem; padding: 0.8rem 0.9rem; border-radius: var(--radius-s); background: var(--surface); border: 1px solid var(--line); margin-bottom: 0.6rem; }
.cando-row p { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.92rem; }
.cando-opts { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.chip-btn { padding: 0.4rem 0.75rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font-size: 0.85rem; font-weight: 600; }
.chip-btn.is-selected { border-color: var(--accent); background: var(--accent-soft); }

/* notebook */
.nb-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.5rem; }
.nb-list li { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.75rem; align-items: center; padding: 0.75rem 0.9rem; border-radius: var(--radius-s); background: var(--surface); border: 1px solid var(--line); }
.nb-list li.is-resolved { opacity: 0.6; }
.nb-main { display: grid; }
.nb-main small { color: var(--muted); }
.nb-detail { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.9rem; }
.nb-wrong { text-decoration: line-through; text-decoration-color: var(--bad); color: var(--muted); }
.nb-right { font-weight: 600; color: var(--ok); }
.nb-detail small { flex-basis: 100%; color: var(--muted); }
.notebook .btn-primary { margin-top: 0.5rem; }

/* onboarding route */
.field-row { display: flex; gap: 0.6rem; align-items: center; }
.field-row span { font-weight: 500; }
select.text-input { appearance: auto; }
.gap-q { margin: 0.25rem 0 0.25rem; }

@media (max-width: 340px) {
  .choices.tiles { grid-template-columns: repeat(2, 1fr); }
  .home-tiles { grid-template-columns: 1fr; }
  .tf-row { flex-direction: column; align-items: stretch; }
}

/* ================= v3: visual language ================= */
/* Flat shapes on paper, a navy anchor and the cast of the story as recurring figures. */

h1, h2, h3, .card-en, .brand, .stat strong { color: var(--text); letter-spacing: -0.015em; }
.card, .block, .word-card, .shadow-card, .tile-card, .stats > div, .learned li, .nb-list li { box-shadow: none; border-width: 1.5px; }
.btn-primary { box-shadow: none; }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { box-shadow: none; }

/* Turkish behind a tap */
.tr-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; margin: 0.5rem 0 0.25rem; }
.tr-toggle { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem 0.2rem 0.45rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.tr-toggle .icon { width: 0.95rem; height: 0.95rem; }
.tr-toggle.is-open { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tr-text { color: var(--muted); font-size: 0.95rem; }
.word-card .tr-line, .shadow-card .tr-line { justify-content: center; }
.card-example .tr-line { margin-left: 42px; }

/* listening scene */
.scene { position: relative; display: grid; gap: 0.25rem; padding: 0.7rem 0.75rem 0; border-radius: var(--radius); background: var(--sky-2); border: 1.5px solid var(--sky); overflow: hidden; }
.scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--sky); }
.scene-kind { justify-self: start; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem 0.15rem 0.45rem; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 0.75rem; font-weight: 700; position: relative; z-index: 1; }
.scene-kind .icon { width: 0.95rem; height: 0.95rem; color: var(--accent); }
.scene-cast { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; gap: 0.75rem; min-height: 132px; }
.scene-fig { position: relative; display: grid; justify-items: center; width: 104px; transition: transform 0.25s ease, opacity 0.25s ease; }
.scene-img { width: 104px; height: 132px; object-fit: cover; object-position: 50% 0; }
.scene-fig .avatar { margin-bottom: 1.6rem; }
.scene-name { position: absolute; bottom: 18px; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--surface); font-size: 0.75rem; font-weight: 700; color: var(--text); border: 1.5px solid color-mix(in srgb, var(--c) 45%, var(--line)); }
.scene.is-playing .scene-fig { opacity: 0.55; }
.scene.is-playing .scene-fig.is-speaking { opacity: 1; transform: translateY(-4px); }
.scene.is-playing .scene-fig.is-speaking .scene-name { background: var(--c); color: #fff; border-color: var(--c); }
.n-1 .scene-fig, .n-1 .scene-img { width: 128px; }
.n-1 .scene-img { height: 140px; }

/* cast strip (onboarding, stop intro) */
.cast { display: flex; justify-content: center; align-items: flex-end; margin: 1rem 0 0; padding: 0.75rem 0.5rem 0; border-radius: var(--radius); background: var(--sky-2); border: 1.5px solid var(--sky); overflow: hidden; position: relative; }
.cast::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--sky); }
.cast-fig { margin: 0 -6px; display: grid; justify-items: center; position: relative; z-index: 1; }
.cast-fig img { width: 72px; height: 116px; object-fit: cover; object-position: 50% 0; }
.cast-fig figcaption { position: absolute; bottom: 14px; font-size: 0.68rem; font-weight: 700; padding: 0 0.4rem; border-radius: 999px; background: var(--surface); }
@media (max-width: 360px) { .cast-fig img { width: 56px; height: 96px; } }


/* home: current stop */
.now { margin: 0.75rem 0; padding: 0; overflow: hidden; border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--surface); display: block; }
.now-place { display: flex; gap: 0.35rem; align-items: center; font-size: 0.85rem; min-width: 0; }
.now-place .icon { color: var(--primary); flex: none; width: 1rem; height: 1rem; }
.now-body { display: grid; gap: 0.35rem; padding: 1rem; }
.now-body .btn { margin-top: 0.5rem; }
.now-meta { color: var(--muted); font-size: 0.85rem; }
.faces { display: flex; flex: none; }
.faces .avatar { margin-left: -8px; }
.faces .avatar:first-child { margin-left: 0; }

/* journey: unit headers carry their weeks */
.unit-label { margin: 1rem 0 0.35rem 48px; align-items: baseline; flex-wrap: wrap; }
.unit-name { display: inline-flex; gap: 0.4rem; align-items: baseline; }
.unit-name small { color: var(--muted); font-weight: 500; }
.unit-weeks { margin-left: auto; font-size: 0.72rem; color: var(--muted); font-weight: 600; }
.unit-code { background: var(--navy); color: #fff; }
.stop.is-current .stop-dot { background: var(--primary); border-color: var(--primary); }
.stop.is-done .stop-dot { background: var(--navy); border-color: var(--navy); color: #fff; }


/* lesson frame */
.stage-label { display: flex; gap: 0.5rem; align-items: baseline; }
.stage-label strong { color: var(--text); font-weight: 700; flex: none; }
.stage-label span { overflow: hidden; text-overflow: ellipsis; }
.stage-label .step-count { flex: none; margin-left: auto; font-variant-numeric: tabular-nums; }
.step-speak .media-md, .step-write .media-md, .step-build .media-md { width: 150px; max-height: 112px; }
.step-speak .mic-row { margin: .5rem 0; }
.step-speak .live { min-height: 40px; padding: .45rem .6rem; }
.step-speak .task-context { margin-bottom: .65rem; padding: .65rem .85rem; }
.link-fill { background: var(--navy); }
.link.is-current { color: var(--text); }
.link.is-current .link-fill { background: var(--primary); }
.instr-en { font-size: 1.12rem; }
.sheet-head .sheet-icon { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff !important; }
.sheet-head .sheet-icon svg { width: 18px; height: 18px; }
.sheet-ok .sheet-icon { background: var(--ok); }
.sheet-near .sheet-icon { background: var(--near); }
.sheet-bad .sheet-icon { background: var(--bad); }
.sheet-info .sheet-icon { background: var(--accent); }

/* cards */
.word-card { padding: 1rem 1rem 1.15rem; }
.card-kicker { color: var(--accent); }
.card-mark { width: 52px; height: 52px; margin: 0.25rem auto 0.75rem; border-radius: 16px; display: grid; place-items: center; background: var(--sky-2); color: var(--accent); }
.word-card.kind-chunk .card-mark { margin-left: 0; }
.card-mark .icon { width: 26px; height: 26px; }
.media { border-radius: 16px; }
.media.has-img { background: var(--sky-2); }
.build-target { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0 0 1rem; padding: 0.75rem 0.9rem; border-radius: var(--radius-s); background: var(--sky-2); font-weight: 600; font-size: 1.05rem; }
.build-target .icon { color: var(--accent); margin-top: 0.15rem; }
.question .q-main { font-size: 1.1rem; }

/* choices and tokens: flat, navy when placed */
.choice, .token, .match-item, .tf-btn, .chip-btn { border-width: 1.5px; }
.token-in { border-color: var(--navy); background: var(--navy); color: #fff; }
.gap { border-bottom-color: var(--select); color: var(--select); }
.tf-btn.is-selected { border-color: var(--select); color: var(--select); }
.narration { font-style: normal; color: var(--muted); background: var(--surface-2); border-radius: 999px; margin: 0.15rem auto; padding: 0.3rem 0.9rem; font-size: 0.85rem; max-width: 92%; }


/* Four pictures: two by two. Illustrations sit on paper in both themes (navy lines need light). */
.choices.tiles:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
.choices.tiles:has(> :nth-child(4)) .media-sm { aspect-ratio: 4 / 3; }
.scene-name { bottom: 3px; }
:where(:root[data-theme="dark"]) .scene, :where(:root[data-theme="dark"]) .cast, :where(:root[data-theme="dark"]) .media.has-img { background: #dbe5f1; border-color: #c4d3e5; }
:where(:root[data-theme="dark"]) .scene::after, :where(:root[data-theme="dark"]) .cast::after { background: #c4d3e5; }
:where(:root[data-theme="dark"]) .scene-kind, :where(:root[data-theme="dark"]) .scene-name, :where(:root[data-theme="dark"]) .cast-fig figcaption { background: #ffffff; color: #182a44; }
.shadow-card { text-align: center; }
.shadow-card .card-audio { justify-content: center; }


/* stop intro: title, purpose, start */
.intro-kicker { margin: 0.25rem 0 0.35rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.stop-intro h1 { font-size: 2rem; margin: 0; }
.learn-goal { margin: 0.9rem 0 1.75rem; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.card-note summary { cursor: pointer; }
.card-note p { margin: 0.6rem 0 0; }
.voice-messages { display: grid; gap: 0.75rem; }
.voice-message { padding: 0.8rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.voice-sender { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.voice-sender > span:last-child { margin-left: auto; color: var(--muted); font-size: 0.75rem; }
.voice-player { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.75rem; }
.voice-wave { display: flex; gap: 4px; flex: 1; align-items: center; justify-content: center; height: 36px; color: var(--accent); }
.voice-wave span { width: 4px; border-radius: 2px; background: currentColor; }
.voice-text { margin: 0.75rem 0 0; }
.onb-note { display: flex; gap: 0.5rem; align-items: center; color: var(--muted); font-size: 0.92rem; }
.onb-note .icon { color: var(--accent); }
/* on-camera cue in a conversation */
.cue { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; margin: 0.25rem auto; }
.cue-frame { display: grid; place-items: center; width: 132px; height: 104px; border-radius: 14px; background: #e6eef7; border: 3px solid var(--navy); overflow: hidden; }
.cue-frame img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.cue-word { font-weight: 700; color: #182a44; padding: 0 0.5rem; text-align: center; }

/* speaking: the microphone leads, words appear as they are heard */
.mic-row { display: flex; justify-content: center; margin: 0.75rem 0 0.5rem; }
.btn-mic { min-height: 56px; padding: 0 1.4rem; background: var(--navy); color: #fff; font-size: 1.05rem; }
.btn-mic.is-recording { background: var(--primary); }
.live { min-height: 56px; display: flex; flex-wrap: wrap; gap: 0.35rem; align-content: flex-start; padding: 0.6rem; border-radius: var(--radius-s); border: 1.5px dashed var(--line); margin-bottom: 0.75rem; }
.live.has-words { border-style: solid; border-color: var(--select); }
.live-hint { color: var(--muted); font-size: 0.9rem; align-self: center; }
.live-word { padding: 0.3rem 0.6rem; border-radius: 8px; background: var(--sky-2); font-weight: 600; animation: pop 0.2s ease; }
.live-note { color: var(--near); font-size: 0.9rem; margin: 0 0 0.75rem; }
:where(:root[data-theme="dark"]) .btn-mic { background: var(--blue); }
:where(:root[data-theme="dark"]) .live-word { color: var(--text); }
/* A near word (back → bag) shows as the word meant, in the near colour: said, but not quite. */
.live-word.is-near { background: var(--near-soft); color: var(--near); box-shadow: inset 0 0 0 1.5px var(--near); }
.live-note.is-ok { color: var(--ok); }
.shadow-say { margin-top: 0.5rem; }
.shadow-controls .btn { min-height: 40px; font-size: 0.9rem; }
/* Guided meaning, personal drink choices, and one continuous audio conversation. */
.match { grid-template-rows: repeat(var(--match-rows), minmax(64px, 1fr)); }
.match-item { width: 100%; height: 100%; overflow-wrap: anywhere; }
.match-col:nth-child(1) { grid-column: 1; } .match-col:nth-child(2) { grid-column: 2; }
.step-card .word-card .media { width: 100%; max-width: none; margin-inline: 0; }
.learning-note, .thread-feedback { color: var(--muted); font-size: .9rem; }
.meaning-choices { margin-top: 1rem; }
.card-kicker { display: none; }
.container-demo { display: grid; place-items: center; min-height: 220px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); margin-bottom: 1rem; }
.drink-vessel { position: relative; width: 145px; height: 145px; margin: 20px; }
.vessel-body { position: absolute; inset: 16px 24px 12px 4px; border: 4px solid var(--text); border-radius: 8px 8px 40px 40px; overflow: hidden; background: var(--paper, #e9eff4); }
.vessel-liquid { position: absolute; inset: 28px 0 0; background: var(--drink-color); transform: translateY(100%); transition: transform .22s ease; }
.is-filled .vessel-liquid { transform: translateY(0); animation: vessel-fill .22s ease-out; }
@keyframes vessel-fill { from { transform: translateY(100%); } to { transform: translateY(0); } }
.vessel-handle { position: absolute; width: 44px; height: 70px; right: 0; top: 30px; border: 8px solid var(--text); border-radius: 0 24px 24px 0; }
.vessel-glass .vessel-body { border-radius: 4px 4px 16px 16px; } .vessel-glass .vessel-handle { display: none; }
.drink-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)); gap: .5rem; }
.drink-choices .choice { text-align: center; padding: .8rem .4rem; }
.ingredient-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 1rem 0; }
.ingredient-row strong { grid-column: 1 / -1; }
.preference-summary { margin-top: 1rem; color: var(--muted); }
.task-context { padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); margin-bottom: 1rem; }
.task-context .drink-vessel { margin: 0 auto; width: 95px; height: 85px; } .task-context .vessel-handle { height: 45px; top: 25px; }
.message-thread { display: grid; gap: .7rem; }
.thread-title { display: flex; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.thread-setting { margin-top: -.4rem; }
.task-reference { position: relative; }
.task-reference > .play { position: absolute; top: .65rem; right: .65rem; }
.task-reference .read-head { padding-right: 2.5rem; }
.message-thread .voice-message { border-radius: 4px 18px 18px; }
.message-thread .voice-player { gap: .7rem; }
.message-thread .voice-wave { flex: 1; min-width: 40px; }
.message-thread .voice-wave span { background: var(--muted); }
.message-thread .is-heard .voice-wave span { background: var(--learner); }
.message-photo { max-width: 230px; border-radius: var(--radius-s); overflow: hidden; }
.message-photo .media { margin: 0; width: 100%; }
.thread-question { margin-top: 1.5rem; }
.message-text { font-size: .95rem; margin-top: .5rem; }
.question-support { color: var(--muted); font-size: .85rem; margin: .5rem 0; }
.message-thread .is-new { animation: message-enter .2s ease-out; }
@keyframes message-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .vessel-liquid { transition: none; animation: none; } .message-thread .is-new { animation: none; } }

/* ---------- Nektar identity (B09): paper, ink and documents ----------
   A year in Boston told through the things a newcomer holds: a journal page, a phone, a ticket,
   a menu, a note. Character comes from type, paper and composition, not from new pictures.
   Flat: no glow, no gradients, no shadows. */
/* Display type: titles read like a printed page. */
.stop-intro h1, .summary h1, .now h1, .onboarding h1, .menu-head strong, .read-email .read-head strong {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.005em;
}

/* Instruction: one quiet line above the task. */
.instr { margin: 0.2rem 0 0.85rem; }
.instr-en { font-size: 1.02rem; }
.instr-tr { font-size: 0.86rem; }

/* Stop intro: a page of the travel journal. */
.stop-intro { display: flex; flex-direction: column; }
.intro-page { margin: 1.5rem 0 1.75rem; padding: 1.25rem 0 0; border-top: 2px solid var(--text); }
.intro-top { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.intro-top .intro-kicker { margin: 0; font-size: 0.85rem; letter-spacing: 0.02em; text-transform: none; }
.intro-place { display: flex; gap: 0.4rem; align-items: center; margin: 1.6rem 0 0.35rem; color: var(--muted); font-size: 0.92rem; }
.intro-place .icon { color: var(--stamp); width: 1rem; height: 1rem; }
.intro-scene { margin: 1.1rem 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.stop-intro .intro-page h1 { font-size: 2.35rem; line-height: 1.1; margin: 0; }
.intro-tr { margin: 0.35rem 0 0; color: var(--muted); font-size: 1.05rem; }
.stop-intro .learn-goal { margin: 1.4rem 0 0; padding-top: 0.9rem; border-top: 1px dashed var(--line); color: var(--text); }
.stop-intro .btn-primary { margin-top: 1rem; }

/* Conversation: the screen of a phone, with who and what kind of contact on top. */
.thread { background: var(--surface-2); border-radius: 22px; padding: 0 0.75rem 0.75rem; margin-bottom: 0.75rem; }
.thread-head { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; align-items: center; padding: 0.7rem 0.15rem 0.65rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--line); }
.thread-who { display: grid; line-height: 1.2; }
.thread-who strong { font-size: 0.98rem; }
.thread .chat { padding: 0; }
.thread .narration { background: transparent; font-size: 0.8rem; letter-spacing: 0.01em; }

/* Documents, each by its kind. */
.read { border-radius: 14px; }
.read-head { letter-spacing: 0.04em; font-size: 0.8rem; font-weight: 600; }
.read-head strong { letter-spacing: 0.04em; }

.read-ticket { position: relative; background: var(--surface); border: 1.5px solid var(--line); border-left: 1.5px solid var(--line); padding: 0.9rem 1.1rem 1rem; font-family: var(--font); }
.read-ticket::before { content: ""; position: absolute; left: 0; right: 0; top: 2.35rem; border-top: 1.5px dashed var(--line); }
.read-ticket .read-head { color: var(--stamp); margin-bottom: 0.9rem; }
.read-ticket .read-head strong { color: var(--stamp); }
.read-ticket .read-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1rem; }
.read-ticket .read-body p { margin: 0; font: 600 1.02rem/1.3 var(--font-mono); }
.doc-field { display: grid; }
.doc-field small { font: 600 0.76rem/1.3 var(--font); letter-spacing: 0.02em; color: var(--muted); }
.doc-field strong { font: 700 1.15rem/1.25 var(--font-mono); color: var(--text); }

.doc-price { display: flex !important; align-items: baseline; gap: 0.35rem; }
.doc-price > span:first-child { flex: none; max-width: 70%; }
.doc-leader { flex: 1; min-width: 1rem; border-bottom: 2px dotted var(--line); transform: translateY(-0.25em); }
.doc-price > span:last-child { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }

.read-list { background: var(--surface); border: 1.5px solid var(--line); padding: 0.9rem 1.1rem 0.9rem 1.5rem; position: relative; }
.read-list::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0.75rem; border-left: 1.5px solid color-mix(in srgb, var(--stamp) 45%, transparent); }
.read-list .read-body p { border-bottom: 1px solid var(--paper-rule); }

.read-note { transform: none; border-radius: 4px 14px 14px 14px; }
:where(:root[data-theme="dark"]) .read-note { background: #2c2817; color: #efe6c4; border-color: #4a4224; }
:where(:root[data-theme="dark"]) .read-note .read-head, :where(:root[data-theme="dark"]) .read-note .read-head strong { color: #d8c88a; }

.read-form { background: var(--surface); border: 1.5px solid var(--line); }
.read-form .read-body p { border-bottom: 1px solid var(--paper-rule); padding: 0.3rem 0; }
.read-email { background: var(--surface); border: 1.5px solid var(--line); }
.read-email .read-head { padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.read-poster { background: var(--surface); border: 2px solid var(--text); text-align: center; }

/* Home: one open unit, the others one line each. */
.block .unit-group > summary { display: flex; padding: 0.35rem 0; gap: 0.5rem; list-style: none; cursor: pointer; }
.unit-group > summary .unit-code { flex: none; }
.unit-group > summary::-webkit-details-marker { display: none; }
.unit-group:not([open]) > summary { margin-bottom: 0.55rem; }
.unit-group:not([open]) .unit-weeks { color: var(--muted); }

/* Summary: the words, without evidence labels. */
.summary h1 { font-size: 1.75rem; }
@media (max-width: 340px) { .unit-group .unit-name small { display: none; } }

/* Menu: a printed café card. Name in display type, the meal under it, prices in one column. */
.read-menu { background: var(--surface); border: 1.5px solid var(--line); padding: 0.4rem; }
.read-menu .read-body { border: 1px solid var(--line); border-radius: 10px; padding: 0.4rem 1rem 0.8rem; }
.menu-head { display: grid; justify-items: center; gap: 0.1rem; padding: 0.85rem 0 0.7rem; }
.menu-head strong { font-size: 1.3rem; }
.menu-head span { font-size: 0.78rem; letter-spacing: 0.18em; color: var(--stamp); font-weight: 700; }
.menu-head::after { content: ""; width: 2.5rem; border-bottom: 1.5px solid var(--stamp); margin-top: 0.45rem; }
.read-menu .read-body p { margin: 0; padding: 0.42rem 0; border-bottom: 1px solid var(--paper-rule); }
.read-menu .read-body p:last-child { border-bottom: 0; }
.read-menu .doc-leader { display: none; }
.read-menu .doc-price { justify-content: space-between; }
.read-menu .doc-price > span:first-child { max-width: none; }
.read-menu .gw, .read-ticket .gw { text-decoration-color: color-mix(in srgb, var(--muted) 35%, transparent); }

/* A list with the picture of what it belongs to. */
.read-head .media-xs { width: 40px; height: 40px; border-radius: 10px; }
.read-head .media-xs img { padding: 3px; }

/* Documents carry the situation on their own: no frame around them, no sentence about them. */
.task-context.is-doc { padding: 0; border: 0; background: transparent; }
.task-context.is-doc .read { margin: 0; }
@media (max-width: 360px) {
  .read-ticket .read-body { gap: 0.45rem 0.8rem; }
  .doc-field strong { font-size: 1.02rem; }
  .read-ticket .read-head { margin-bottom: 0.6rem; }
  .read-ticket::before { top: 2.1rem; }
  .step-speak .card-en, .step-speak .bubble-text { font-size: 1rem; }
}

/* Chat: the photo the learner sends sits on the learner's side. */
.photo-msg { display: flex; justify-content: flex-end; }
.photo-print { position: relative; display: grid; place-items: center; width: 148px; height: 118px; border-radius: 16px 16px 4px 16px; background: var(--surface); border: 4px solid var(--learner); overflow: hidden; }
.photo-print img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.photo-print .cue-word { color: var(--text); }
.photo-print.is-set { width: 196px; }
.photo-set { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0; padding: 4px; }
.photo-set img { position: static; flex: 1 1 0; min-width: 0; width: auto; height: 100%; padding: 0; object-fit: contain; }

/* Every message enters: bubbles, voice messages, photos, notes. */
.chat > * { animation: message-enter 0.24s ease-out both; }
.chat > .photo-msg { animation-name: photo-enter; }
@keyframes photo-enter { from { opacity: 0; transform: translateY(8px) rotate(2deg) scale(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .chat > * { animation: none; } }
/* The live words box appears once the learner speaks; an empty box with a sentence about it is not shown. */
.shadow-say .live:not(.has-words) { display: none; }

/* B11: say task. The question comes as a message; the note says only what is true for you. */
.say-thread { margin: 0.25rem 0 0.6rem; padding-top: 0.75rem; }
.say-note { margin: 0 0 0.85rem; padding: 0.15rem 0 0.15rem 0.75rem; border-left: 3px solid var(--line); color: var(--muted); font-size: 0.95rem; }

/* B11: photos from the other side, a crossed-out photo, and a note the learner shows. */
.photo-msg.is-them { justify-content: flex-start; align-items: flex-end; gap: 0.5rem; }
.photo-msg.is-them .photo-print { border-color: var(--c, var(--line)); border-radius: 16px 16px 16px 4px; }
.photo-no { position: absolute; inset: 0; pointer-events: none; }
.photo-no::before, .photo-no::after { content: ''; position: absolute; left: 50%; top: 50%; width: 120%; height: 4px; background: var(--stamp); border-radius: 2px; transform: translate(-50%, -50%) rotate(-32deg); }
.photo-no::after { transform: translate(-50%, -50%) rotate(32deg); }
.photo-print.is-no img, .photo-print.is-no .cue-word { opacity: 0.7; }
.note-print { display: grid; gap: 0.15rem; min-width: 148px; max-width: 80%; padding: 0.6rem 0.8rem 0.7rem; border-radius: 16px 16px 4px 16px; background: var(--paper, var(--surface)); border: 4px solid var(--learner); font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.9rem; line-height: 1.45; }
.note-print strong { font-family: var(--font-display, inherit); font-size: 1rem; padding-bottom: 0.25rem; margin-bottom: 0.2rem; border-bottom: 1px solid var(--paper-rule, var(--line)); }
.chat > .photo-msg .note-print { animation: photo-enter 0.24s ease-out both; }
@media (prefers-reduced-motion: reduce) { .chat > .photo-msg .note-print { animation: none; } }
.photo-print.is-no .cue-word { position: relative; z-index: 1; padding: 0.1rem 0.4rem; border-radius: 6px; background: var(--surface); opacity: 1; }

/* Group chats: each person keeps one side and one colour; consecutive messages from the same
   person stack under one name. */
.message-thread { gap: .35rem; }
.message-thread .voice-message { --c: #64748b; width: min(88%, 26rem); border-color: color-mix(in srgb, var(--c) 40%, var(--line)); background: color-mix(in srgb, var(--c) 9%, var(--surface)); margin-top: .5rem; }
.message-thread .voice-message.is-right { justify-self: end; border-radius: 18px 4px 18px 18px; }
.message-thread .voice-message.is-left { justify-self: start; }
.message-thread .voice-message.is-right .voice-sender { flex-direction: row-reverse; }
.message-thread .voice-sender strong { color: color-mix(in srgb, var(--c) 70%, var(--text)); }
.message-thread .voice-message.is-cont { margin-top: 0; border-top-left-radius: 18px; }
.message-thread .voice-message.is-right.is-cont { border-top-right-radius: 18px; }
.message-thread .voice-message.is-cont .voice-sender { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.message-thread .voice-message.is-cont .voice-player { margin-top: 0; }
.message-thread .is-heard .voice-wave span { background: var(--c); }
.message-thread .message-photo.is-right { justify-self: end; }
.message-thread .message-photo.is-left { justify-self: start; }
.message-thread .voice-message.is-playing { border-color: var(--c); }
.chat .voice-message { border-color: color-mix(in srgb, var(--c, var(--line)) 40%, var(--line)); }
.chat .voice-message.is-cont .voice-sender { display: none; }
.chat .voice-message.is-cont .voice-player { margin-top: 0; }
.chat .bubble.is-cont { margin-top: -.25rem; }
.chat .bubble.is-cont .bubble-name { display: none; }
.chat .bubble-npc.is-cont .avatar { visibility: hidden; }

/* ---------- B13: phone-test pass (6 Oct) ----------
   Pictures without frames, one control per voice message, a phrase met in use, answers
   corrected in place, a summary of things to touch. */

/* Pictures stand on the page; no box or thick frame around an object. */
.media.has-img { background: transparent; }
.photo-print { border: 0; background: var(--surface-2); }
.photo-msg.is-them .photo-print { border: 0; }
:root[data-theme="dark"] .media.has-img { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }

/* Build: the question, the picture and the answer line keep their own space. */
.step-build .bubble, .step-build .build-target { margin-bottom: 0.75rem; }
.step-build .build { margin-top: 0.25rem; }
.build-given { display: inline-flex; align-items: center; padding: 0 0.35rem; min-height: 44px; font-weight: 600; font-size: 1.05rem; color: var(--muted); }

/* Letter tiles: narrow and shrinking, so a long word (umbrella) stays on one line. */
.build-answer.letters, .build-bank.letters { flex-wrap: nowrap; gap: 0.25rem; }
.letters .token { flex: 1 1 0; min-width: 0; max-width: 2.6rem; width: auto; padding: 0.4rem 0; font-size: 1.15rem; }

/* Wrong answer: the model sentence with what was missing marked in place. */
.sheet-diff span { display: inline-block; margin-right: 0.28em; }
.sheet-diff .is-add { padding: 0 0.3em; border-radius: 6px; background: var(--ok-soft); color: var(--ok); font-weight: 700; animation: word-in 0.35s ease-out both; animation-delay: calc(var(--i) * 70ms + 150ms); }
.sheet-drop { margin: 0.2rem 0 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sheet-drop s { color: var(--muted); text-decoration-color: var(--bad); }
.sheet-tr { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.92rem; padding-left: calc(36px + 0.6rem); }
@keyframes word-in { from { opacity: 0; transform: translateY(-6px) scale(0.9); } to { opacity: 1; transform: none; } }

/* The answer box quotes what it answers. */
.reply-to { display: grid; gap: 0.1rem; margin-bottom: 0.5rem; padding: 0.35rem 0.7rem; border-left: 3px solid var(--c, var(--line)); border-radius: 4px 10px 10px 4px; background: color-mix(in srgb, var(--c, var(--line)) 8%, var(--surface)); font-size: 0.85rem; }
.reply-to strong { font-size: 0.75rem; color: color-mix(in srgb, var(--c) 70%, var(--text)); }
.reply-to span { color: var(--muted); }

/* Listening: one round play/pause per message, one speed switch for the thread. */
.thread-title { justify-content: flex-start; }
.thread-speed { margin-left: auto; display: inline-flex; gap: 0.35rem; align-items: center; }
.voice-toggle { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--c, var(--learner)); color: #fff; }
.voice-toggle .icon { width: 1.25rem; height: 1.25rem; }
.message-thread .voice-message.is-playing .voice-wave span { animation: wave 0.9s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 60ms); background: var(--c); }
.message-thread .voice-wave span:nth-child(2n) { --k: 2; } .message-thread .voice-wave span:nth-child(3n) { --k: 4; }
.message-thread .voice-message.is-paused .voice-wave span { background: var(--c); opacity: 0.55; }
@keyframes wave { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .message-thread .voice-message.is-playing .voice-wave span { animation: none; } }

/* A phrase in use: a chat the learner watches, fed from a photo tray. */
.scene-top { display: grid; gap: 0.35rem; margin: 0.25rem 0 0.9rem; }
.scene-phrase { display: flex; align-items: center; gap: 0.75rem; }
.scene-phrase .card-en { margin: 0; font-size: 1.9rem; line-height: 1.15; }
.scene-phrase .play { flex: none; }
.scene-help { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.scene-help .tr-toggle { display: inline-flex; gap: 0.3rem; align-items: center; }
.scene-tr { color: var(--muted); }
.scene-thread .bubble.is-cont .bubble-name { display: none; }
.scene-thread .bubble-npc.is-cont .avatar, .scene-thread .bubble-npc.is-cont > .avatar { visibility: hidden; }
.scene-thread .photo-msg.is-them + .bubble.is-cont { margin-top: -0.25rem; }
.scene-thread { display: grid; gap: 0.5rem; min-height: 9rem; padding-top: 0.75rem; align-content: end; }
.scene-thread:empty::before { content: ''; display: block; height: 7rem; }
.scene-tray { display: flex; gap: 0.75rem; justify-content: center; padding: 0.25rem 0; }
.scene-tile { width: 88px; padding: 0; border: 0; border-radius: 18px; background: var(--surface); transition: transform 0.15s ease, opacity 0.25s ease; animation: tray-hint 1.6s ease-in-out 0.6s 2; }
.scene-tile .media { width: 88px; margin: 0; background: transparent; }
.scene-tile:active { transform: scale(0.94); }
.scene-tile.is-used { opacity: 0.35; animation: none; }
.scene-tray:has(.is-used) .scene-tile { animation: none; }
@keyframes tray-hint { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .scene-tile { animation: none; } }

/* say: the learner's photo waits in the reply box, then goes into the thread with the answer. */
.say-attach { display: flex; justify-content: flex-end; margin: -0.25rem 0 0.75rem; }
.say-attach .photo-print { width: 120px; height: 96px; }
.say-attach .photo-print.is-set, .photo-msg .photo-print.is-set { width: 220px; height: 124px; }
.photo-print { background: var(--surface); }
.thread .photo-print { background: var(--surface); }

/* Match: no numbers, no button borders; a found pair shares a colour and settles. */
.match-item { border: 0; background: var(--surface-2); transition: transform 0.18s var(--ease), opacity 0.3s ease; }
.match-item.is-selected { border: 0; background: color-mix(in srgb, var(--learner) 18%, var(--surface-2)); transform: scale(0.98); }
.match-item.is-wrong { border: 0; }
.match-item.is-matched { border: 0; background: var(--surface-2); color: var(--muted); opacity: 0.55; animation: pair-found 0.45s ease-out; }
.match-item.is-matched::after { content: none; }
@keyframes pair-found { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* Summary: things to touch, not a list. */
.learned { display: grid; gap: 0.9rem; margin-bottom: 1rem; }
.learned-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.6rem; }
.learned-phrases { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.learned-card { position: relative; display: grid; justify-items: center; gap: 0.2rem; padding: 0.55rem 0.5rem 0.6rem; border: 0; border-radius: 18px; background: var(--surface-2); color: var(--text); animation: card-in 0.4s ease-out both; animation-delay: calc(var(--i) * 60ms); }
.learned-card .media { width: 72px; margin: 0; }
.learned-card strong { font-size: 1rem; }
.learned-card small { color: var(--muted); font-size: 0.8rem; opacity: 0; max-height: 0; transition: opacity 0.2s ease; }
.learned-card.is-turned small { opacity: 1; max-height: 2rem; }
.learned-card.is-phrase { padding: 0.55rem 0.85rem; border-radius: 16px 16px 16px 4px; justify-items: start; background: color-mix(in srgb, var(--learner) 12%, var(--surface)); }
@keyframes card-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .learned-card, .match-item.is-matched, .sheet-diff .is-add { animation: none; } }

/* Look again: the learner's line turns into the right one. */
.fix-stage { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.fix-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.75rem 0.9rem; border-radius: 16px; background: var(--surface-2); font-size: 1.15rem; font-weight: 600; }
.fix-w { display: inline-block; transition: opacity 0.35s ease, transform 0.35s ease; }
.fix-line.is-mine .fix-w.is-drop { text-decoration: line-through; text-decoration-color: var(--bad); }
.fix-line.is-mine.is-going { opacity: 0.55; }
.fix-line.is-mine.is-going .fix-w.is-drop { opacity: 0.3; transform: translateY(4px); }
.fix-line.is-right { background: var(--ok-soft); animation: card-in 0.35s ease-out both; }
.fix-line.is-right .fix-w.is-add { color: var(--ok); animation: word-in 0.35s ease-out both; animation-delay: calc(var(--i) * 80ms + 200ms); }
.fix-line.is-right .play { margin-left: auto; }
.fix-hint { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* B15: tactile paper surfaces and a connected journey. Motion changes transform/opacity only. */
.page { animation: page-enter 320ms var(--ease) both; }
@keyframes page-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.brand { letter-spacing: -0.045em; }
.brand span { letter-spacing: 0; }
.page h1 { text-wrap: balance; }
.lead { line-height: 1.65; }
.btn { border-radius: 16px; }
.btn-primary { font-weight: 750; }
.btn-small, .play, .tr-toggle, .bubble-play, .tf-btn, .chip-btn, .back { min-height: 44px; }
.play { min-width: 44px; }
.bubble-play { width: 44px; right: 0; opacity: 1; }
.bubble-body, .bubble-learner .bubble-body:has(.bubble-play) { padding-right: 3rem; }
.btn, .icon-btn, .choice, .token, .match-item, .chip-btn, .tf-btn, .play, .voice-toggle, .learned-card, .tile-card, .tr-toggle { touch-action: manipulation; }
.icon-btn, .choice, .token, .chip-btn, .tf-btn, .play, .voice-toggle, .learned-card, .tile-card, .tr-toggle { transition: transform 180ms var(--ease); }
:is(.icon-btn, .choice, .token, .match-item, .chip-btn, .tf-btn, .play, .voice-toggle, .learned-card, .tile-card, .tr-toggle):active { transform: scale(.97); }
:is(button, a, summary, input, textarea, select):focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; }
.text-input { min-height: 52px; }
.text-input:focus { border-color: var(--accent-ink); }
.onboarding .cast { background: transparent; border: 0; padding-top: 1.5rem; margin-top: 1.25rem; }
.onboarding .cast::after { display: none; }
.onboarding .cast-fig img { height: 132px; }
.onboarding .cast-fig figcaption { position: relative; background: transparent; color: var(--muted); bottom: auto; padding: 0; }
.onboarding h1 { font-size: clamp(1.75rem, 7.2vw, 2.2rem); line-height: 1.12; margin-top: .75rem; }
.onboarding .onb-actions { gap: .5rem; }
.onb-actions .btn-soft { background: transparent; border-color: transparent; color: var(--muted); }
.route-flourish { height: 52px; margin: .5rem 0; }
.route-flourish svg { width: 100%; height: 100%; overflow: visible; }
.route-flourish path, .journey-route path { fill: none; stroke: var(--primary); stroke-width: 1.8; stroke-dasharray: 4 7; stroke-linecap: round; }
.home-head .brand { flex-wrap: wrap; gap: 0 .4rem; }
.home-head .brand span { font-size: .8rem; }
.now { border: 0; margin: 1rem 0 1.5rem; }
.now-body { padding: 16px 20px 20px; gap: 0; }
.now h1 { font-size: clamp(1.65rem, 7vw, 1.9rem); line-height: 1.12; }
.tile-card { border: 0; background: var(--surface-2); }
.journey-title { margin-bottom: 1rem; }
.block { border: 0; background: transparent; border-radius: 22px; margin-bottom: 16px; transition: background-color 180ms var(--ease); }
.block[open] { background: var(--surface); }
.block > summary { grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 16px; min-height: 88px; padding: 18px 20px; }
.block-head { flex-direction: column; align-items: flex-start; gap: 4px; }
.block-head strong { font-size: 1.08rem; line-height: 1.3; font-weight: 650; }
.block-subtitle { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.block-chevron { width: 20px; height: 20px; color: var(--muted); transition: transform 220ms var(--ease); }
.block > summary[aria-expanded="true"] > .block-chevron { transform: rotate(90deg); }
.path { padding: 0 12px 12px; }
.path::before { display: none; }
.journey-route { position: absolute; left: 0; top: 0; width: 96px; height: 100%; pointer-events: none; }
.block .unit-group > summary { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 8px; min-height: 88px; margin: 0; padding: 12px 0; align-items: center; }
.unit-group > summary .unit-code { justify-self: center; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); z-index: 1; }
.unit-code .icon { width: 24px; height: 24px; }
.unit-group.is-complete > summary .unit-code { background: var(--text); color: var(--bg); border-color: var(--text); }
.unit-group.is-complete > summary .unit-weeks { color: var(--muted); }
.unit-group.is-current-unit > summary .unit-code { background: var(--primary-soft); color: var(--text); border-color: var(--primary); outline: 0; }
.unit-group.is-current-unit > summary .unit-name { color: var(--text); }
.unit-name { font-size: 1.08rem; line-height: 1.3; }
.unit-detail { position: relative; margin: 0; padding: 0 4px 12px 68px; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.unit-weeks { margin: 0; max-width: 68px; font-size: .66rem; line-height: 1.4; text-align: right; font-weight: 500; }
.unit-group[open]:not(.is-current-unit) .unit-name { color: var(--text); }
.unit-group:not([open]) > summary { margin-bottom: 0; }
.stop { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 2px 0; min-height: 72px; padding: 10px 6px 10px 0; }
.stop-dot { grid-column: 1; grid-row: 1; margin-left: 10px; width: 52px; height: 52px; border-width: 1.5px; color: var(--text); }
.unit-group .stop.is-alt .stop-dot { margin-left: 28px; }
.stop-main { grid-column: 2; padding-right: 6px; }
.stop-main strong { white-space: normal; line-height: 1.3; }
.stop-main small { font-size: .8rem; line-height: 1.45; }
.stop .chip { grid-column: 2; justify-self: start; margin-top: 4px; padding: 2px 7px; font-size: .68rem; }
.stop > .icon { grid-column: 3; grid-row: 1; width: 16px; height: 16px; }
.stop.is-current { min-height: 88px; }
.stop.is-current .stop-dot { color: var(--primary-ink); box-shadow: none; border: 0; }
.stop.is-current .stop-dot::after { content: ''; position: absolute; inset: -4px; border: 1px solid var(--primary); border-radius: inherit; }
.stop.is-current .stop-main strong { color: var(--stamp); }
.stop.is-done .stop-dot { background: var(--learner); border-color: var(--learner); }
.stop.is-locked { opacity: 1; }
.stop.is-locked .stop-main strong, .stop.is-locked .stop-dot { color: var(--muted); }
.stop-milestone .stop-dot { margin-left: 10px; }
.intro-page { border-top-width: 1px; padding-top: 1.5rem; }
.stop-intro .learn-goal { line-height: 1.65; }
.stop-intro .route-flourish { margin-top: 1.75rem; }
.topbar { padding-bottom: .7rem; }
.lesson-body { padding-top: .75rem; }
.step { animation: page-enter 240ms var(--ease) both; }
.actionbar { border: 0; }
.sheet.is-open { border: 0; border-radius: 22px 22px 0 0; animation: page-enter 250ms var(--ease) both; }
.sheet-head .sheet-icon { color: var(--bg) !important; }
.sheet-model { align-items: flex-start; line-height: 1.65; }
.sheet-model > span { min-width: 0; }
.choice { border-width: 1px; }
.choice.is-selected { border-color: var(--select); background: var(--accent-soft); box-shadow: none; }
.choice.is-correct { animation: pair-found 280ms var(--ease); }
.choice.is-wrong { animation: shake 240ms ease; }
.word-card, .shadow-card { border: 0; }
.word-card .card-en { font-size: 2rem; letter-spacing: -.04em; }
.scene-phrase .card-en { font-size: 1.65rem; }
.scene-tile { background: transparent; }
.build-answer { background: var(--surface-2); border-color: var(--line); min-height: 64px; }
.build-answer:has(.token-in) { border-style: solid; }
.token { border-width: 1px; position: relative; }
.token-in { background: var(--learner); border-color: var(--learner); color: var(--learner-ink); z-index: 1; }
.build-answer.letters, .build-bank.letters { flex-wrap: wrap; }
.letters .token { flex: 0 0 44px; min-width: 44px; max-width: none; }
.play.is-playing .icon, .btn-mic.is-recording .icon { animation: audio-breathe 800ms ease-in-out infinite; }
@keyframes audio-breathe { 50% { transform: scale(.85); opacity: .65; } }
.tr-toggle, .tf-btn.is-selected, .gap { color: var(--accent-ink); }
.tf-btn.is-answer { color: var(--bg); }
.bubble-name { color: color-mix(in srgb, var(--c) 40%, var(--text)); }
.thread-who strong { color: var(--text); }
.reply-to strong, .message-thread .voice-sender strong { color: color-mix(in srgb, var(--c) 40%, var(--text)); }
.btn-mic { background: var(--learner); color: var(--learner-ink); }
.btn-mic.is-recording { background: var(--primary); color: var(--primary-ink); }
.voice-toggle { background: var(--learner); }
.message-thread .voice-wave { color: var(--accent-ink); }
.message-thread .voice-message.is-playing .voice-wave span { background: var(--accent-ink); }
.match-item.is-selected { background: var(--accent-soft); outline: 2px solid var(--select); outline-offset: -2px; }
.match-item.is-matched { color: var(--muted); }
.match-l.is-matched { animation: pair-left 320ms var(--ease); }
.match-r.is-matched { animation: pair-right 320ms var(--ease); }
@keyframes pair-left { 45% { transform: translateX(6px) scale(1.02); } }
@keyframes pair-right { 45% { transform: translateX(-6px) scale(1.02); } }
.token.is-selected { background: var(--accent-soft); border-color: var(--select); box-shadow: none; }
.summary-badge { width: 64px; height: 64px; animation: badge-enter 360ms var(--ease) both; }
@keyframes badge-enter { from { opacity: 0; transform: scale(.85) rotate(-8deg); } to { opacity: 1; transform: none; } }
.summary h1 { font-size: 2rem; line-height: 1.15; }
.learned-card { background: var(--surface); }
.learned-card, .field-row { min-height: 44px; }
.learned-card.is-turned { background: var(--accent-soft); }
.nb-list li { border: 0; padding: 1rem; }
.nb-main { min-width: 0; overflow-wrap: anywhere; }
.nb-main { display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; align-items: baseline; }
.nb-item { display: inline-flex; flex-direction: column; }
.nb-item small { color: var(--muted); }
.nb-sep { color: var(--muted); }
.nb-list li.is-resolved { opacity: 1; }
.dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; border: 0; padding: 1.5rem; border-radius: 24px; animation: page-enter 250ms var(--ease) both; }
.dialog::backdrop { background: rgb(10 22 39 / .6); }
.dialog-actions { flex-wrap: wrap; }
.dialog-actions .btn-primary { flex: 1; }
@media (max-width: 360px) {
  .page, .lesson-body { padding-left: 16px; padding-right: 16px; }
  .actionbar, .sheet.is-open { padding-left: 16px; padding-right: 16px; }
  .onboarding .cast-fig img { height: 112px; }
  .brand-small { font-size: 1.15rem; }
  .home-head .brand { display: grid; }
  .stop-main strong { font-size: .94rem; }
  .unit-weeks { max-width: 64px; text-align: right; }
  .stage-label { gap: .3rem; }
  .stage-label strong { font-size: .75rem; }
}
@media (hover: hover) {
  .tile-card:hover, .learned-card:hover { transform: translateY(-2px); }
  a.stop:hover .stop-dot { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Saved progress animates the existing thin dashed route without changing its layout. */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.theme-toggle { flex-shrink: 0; }
.stop-intro { position: relative; }
.home, .tab-placeholder { padding-bottom: calc(100px + var(--safe-bottom)); }
.home { animation: none; }
.journey { animation: journal-enter 180ms var(--ease) both; }
@keyframes journal-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.journey-locate { position: fixed; bottom: calc(82px + var(--safe-bottom)); right: max(16px, calc((100vw - 480px) / 2 + 20px)); z-index: 5; background: var(--bg); border: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms; }
.journey-locate[data-visible="true"] { opacity: 1; visibility: visible; transform: none; }
.app-tabs { position: fixed; inset: auto 0 0; z-index: 6; width: min(100%, 480px); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); padding: 4px 8px calc(4px + var(--safe-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.app-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; color: var(--muted); text-decoration: none; font-size: .65rem; transition: color 180ms var(--ease), transform 180ms var(--ease); touch-action: manipulation; }
.app-tab .icon { width: 22px; height: 22px; }
.app-tab[aria-current="page"] { color: var(--stamp); }
.app-tab:active { transform: translateY(2px); }
.journey-route .route-complete { stroke: var(--text); stroke-opacity: .45; }
.journey-route .route-current { stroke: var(--primary); stroke-opacity: 1; }
.journey-route .route-future { stroke: var(--line); stroke-opacity: 1; }
.route-traveller { fill: var(--primary); }
.stop.is-located { animation: located 900ms var(--ease); }
@keyframes located { 40% { transform: translateX(5px); } }
.stop.is-current .stop-dot::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .stop.is-current .stop-dot::after, .stop.is-located { animation: none; } }

/* Open journal cover: natural colour, asymmetry and a living route. */
.stop-intro { gap: 0; }
.stop-intro .intro-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stop-intro .intro-header .back { margin: 0; }
.stop-intro .intro-page { margin: 1.8rem 0 0; padding: 0; border: 0; background: none; }
.stop-intro .intro-top { align-items: center; gap: 8px; padding: 0; border: 0; }
.stop-intro .intro-top .intro-kicker { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text); }
.stop-intro .intro-place { margin: 12px 0 0; font-size: .75rem; line-height: 1.45; }
.stop-intro .intro-page h1 { margin-top: 22px; font-size: clamp(2.6rem, 12vw, 3.5rem); font-weight: 600; line-height: 1.04; letter-spacing: -.04em; text-wrap: pretty; }
.stop-intro .intro-tr { margin-top: .55rem; font-size: 1.05rem; }
.intro-cover { height: 180px; width: calc(100% + 20px); margin: 2px -12px -2px -8px; pointer-events: none; }
.intro-cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.intro-purpose { margin-top: 22px; padding: 2px 0 2px 14px; border-left: 2px solid var(--primary); }
.intro-purpose h2 { margin: 0 0 6px; color: var(--muted); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.stop-intro .learn-goal { margin: 0; padding: 0; border: 0; color: var(--text); font-size: 1.05rem; font-weight: 500; line-height: 1.5; }
.intro-action { margin-top: 26px; }
.intro-route { margin: 0; }
.intro-progress-label { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .72rem; }
.intro-route-count { white-space: nowrap; }
.intro-rope { position: relative; height: 82px; margin-top: 4px; }
.intro-rope-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.intro-rope-line path { fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-dasharray: 3 6; stroke-linecap: round; }
.intro-rope-line .rope-future { stroke: var(--muted); stroke-opacity: .35; }
.rope-traveller { fill: var(--primary); }
.intro-knot { display: grid; place-items: center; position: absolute; width: 44px; height: 44px; transform: translate(-50%, -50%); border: 0; padding: 0; background: none; color: var(--stamp); text-decoration: none; }
.intro-knot-mark { display: block; width: 8px; height: 8px; border: 1px solid var(--primary); border-radius: 50%; background: var(--bg); }
.intro-knot.is-done .intro-knot-mark { background: var(--primary); }
.intro-knot.is-next .intro-knot-mark { width: 11px; height: 11px; border-width: 2px; }
.intro-knot.is-selected .intro-knot-mark { width: 22px; height: 22px; border: 0; border-radius: 0; background: var(--bg); transform: translateY(-5px); }
.intro-knot.is-selected .icon { width: 22px; height: 22px; }
.intro-knot:focus-visible { outline: 2px solid var(--stamp); outline-offset: -5px; border-radius: 12px; }
.stop-intro .btn-primary { margin-top: 2px; min-height: 54px; }
@media (max-width: 360px) {
  .stop-intro .intro-page { margin-top: 1rem; }
  .stop-intro .intro-page h1 { margin-top: 14px; }
  .intro-cover { height: 164px; }
  .intro-purpose { margin-top: 16px; }
  .intro-action { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .intro-rope-line path { animation: none; } }

/* B20: quiet text, stable controls and transitions that preserve the unit route. */
.stop { align-items: center; min-height: 104px; padding-block: 20px; }
.stop .stop-dot { color: var(--muted); border-color: var(--line); background: var(--surface); }
.stop .stop-dot .icon { width: 26px; height: 26px; }
.stop-main strong { font-size: 1.1rem; line-height: 1.4; font-weight: 550; }
.stop.is-current { min-height: 116px; }
.stop.is-current .stop-dot { color: var(--primary-ink); background: var(--primary); border-color: var(--primary); }
.stop.is-current .stop-main strong { color: var(--text); font-weight: 700; }
.stop.is-done .stop-dot { color: var(--bg); background: var(--text); border-color: var(--text); }
.stop.is-done .stop-main strong { color: var(--muted); font-weight: 500; }
.stop.is-locked .stop-dot { color: var(--muted); border-color: var(--line); background: var(--surface); }
.stop-status { justify-self: start; color: var(--stamp); font-size: .72rem; line-height: 1.4; margin-top: 5px; }
.unit-group[open] > .stop { animation: none; }
.unit-group, .block { box-sizing: border-box; overflow: clip; }
.disclosure-body { display: flow-root; }
.unit-label { position: relative; }
.journey-route { overflow: hidden; }
.route-traveller, .rope-traveller { offset-rotate: 0deg; animation: route-travel 2400ms linear 3 forwards; } /* a few runs, then still: no endless repaint */
.block:not([open]) .route-traveller, .unit-group:not([open]) .route-traveller { animation-play-state: paused; }
@keyframes route-travel { from { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }
.unit-label, .block > summary { transition: color 200ms var(--ease); }
.stop-intro { display: flex; flex-direction: column; min-height: 100svh; overflow-x: clip; }
.stop-intro .intro-page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.stop-intro .intro-top { min-height: 44px; padding: 0; }
.intro-info-button { display: inline-flex; gap: 9px; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; text-align: left; color: var(--muted); touch-action: manipulation; }
.intro-info-button .icon { width: 16px; height: 16px; }
.intro-title-slot { position: relative; margin-top: 4px; }
.stop-intro .intro-title-slot h1 { margin: 0; }
.intro-title-button { display: block; width: 100%; min-height: 44px; font: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; text-align: left; padding: 0; border: 0; background: none; touch-action: manipulation; }
.intro-info-button, .intro-title-button { transition: color 180ms var(--ease); }
.intro-info-button:active, .intro-title-button:active { color: var(--stamp); }
.intro-title-measure { position: absolute; left: 0; top: 0; width: 100%; visibility: hidden; pointer-events: none; }
.stop-intro .intro-cover { position: relative; width: calc(100% + 40px); margin: 8px -20px 0; flex: 1 1 0; min-height: 140px; max-height: none; overflow: hidden; isolation: isolate; }
.stop-intro .intro-cover > .intro-cover-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.stop-intro .intro-cover > .intro-cover-detail { position: absolute; right: 5%; bottom: 4%; width: 34%; height: 40%; max-width: none; object-fit: contain; padding: 0; z-index: 1; transform: rotate(-5deg); transition: opacity 240ms var(--ease); }
.intro-cover-detail[hidden] { display: none; }
/* Poster cover (portrait art): the scene runs edge to edge behind the header and title, the page
   colour washes over its quiet top band so the title reads in both themes, and the foot fades into
   the route. */
.stop-intro.is-poster > :not(.intro-page), .stop-intro.is-poster .intro-heading { position: relative; z-index: 1; }
.stop-intro.is-poster .intro-cover { position: absolute; inset: 0 0 auto; height: min(78svh, 150vw); width: auto; margin: 0; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent); }
.stop-intro.is-poster .intro-cover > .intro-cover-scene { object-fit: cover; object-position: center 70%; }
.stop-intro.is-poster .intro-cover::before { content: ""; position: absolute; inset: 0 0 auto; height: 48%; z-index: 1; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 88%, transparent) 30%, transparent); }
.stop-intro.is-poster .intro-cover > .intro-cover-detail { bottom: 20%; width: 30%; height: 30%; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .stop-intro .intro-cover > img { transition: none; } }
.stop-intro .intro-action { margin-top: auto; padding-top: 16px; }
.intro-knot-mark { width: 22px; height: 22px; display: grid; place-items: center; border-color: var(--stamp); color: var(--stamp); }
.intro-knot-mark .icon { width: 14px; height: 14px; }
.intro-knot.is-done .intro-knot-mark { color: var(--primary-ink); }
.intro-knot.is-next .intro-knot-mark { width: 24px; height: 24px; }
.intro-knot:not(.is-done):not(.is-selected) .intro-knot-mark { color: var(--muted); border-color: var(--muted); }
.intro-knot.is-selected .intro-knot-mark { visibility: hidden; }
.intro-selection { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 2; color: var(--stamp); background: var(--bg); pointer-events: none; }
.intro-selection .icon { width: 22px; height: 22px; }
.dialog[open] { animation: dialog-enter 240ms var(--ease) both; }
.dialog[data-closing] { pointer-events: none; }
.intro-info-head { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.intro-info-head h2 { margin: 0; font-size: 1.5rem; }
.intro-info .intro-tr { margin: 0 0 20px; }
.intro-info .intro-place { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.intro-info .intro-place .icon { width: 18px; height: 18px; flex-shrink: 0; }
.intro-info .intro-purpose { margin-top: 20px; }
.intro-info .intro-purpose h3 { margin: 0 0 8px; font-size: .8rem; color: var(--muted); }
.intro-info .learn-goal { font-size: 1.05rem; line-height: 1.5; margin: 0; border: 0; padding: 0; }
.detail-sheet-open { overflow: hidden; }
.dialog.intro-info { position: fixed; inset: auto 0 max(12px, var(--safe-bottom)); margin: 0 auto; width: min(464px, calc(100vw - 16px)); max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px); padding: 0 24px 24px; overscroll-behavior: contain; }
.dialog.intro-info[open] { animation: detail-sheet-enter 320ms var(--ease) both; }
.intro-info::backdrop { animation: detail-scrim-enter 220ms var(--ease) both; }
.intro-info[data-closing]::backdrop { animation: detail-scrim-exit 180ms var(--ease) both; }
.intro-info-grip { display: grid; place-items: center; width: 100%; height: 44px; border: 0; padding: 0; background: none; touch-action: none; }
.intro-info-grip span { width: 34px; height: 4px; border-radius: 4px; background: var(--line); }
.intro-info .intro-info-head { min-height: 44px; margin: 0 0 8px; justify-content: flex-end; }
.intro-info #intro-info-title { margin: 0 0 8px; font: 600 2rem/1.08 var(--font-display); letter-spacing: -.035em; }
.intro-info .intro-purpose { border: 0; padding: 0; margin: 20px 0 28px; }
.intro-info .intro-tr { font-size: 1rem; margin-bottom: 24px; }
.intro-info .intro-place { margin: 0 0 24px; font-size: .8rem; }
.intro-info .intro-info-done { min-height: 52px; }
@keyframes detail-sheet-enter { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes detail-scrim-enter { from { background: rgb(10 22 39 / 0); } to { background: rgb(10 22 39 / .6); } }
@keyframes detail-scrim-exit { from { background: rgb(10 22 39 / .6); } to { background: rgb(10 22 39 / 0); } }
@media (prefers-reduced-motion: reduce) { .dialog.intro-info[open], .intro-info::backdrop, .intro-info[data-closing]::backdrop { animation: none; } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 360px) { .stop-intro .intro-cover { margin-top: 12px; width: calc(100% + 32px); margin-inline: -16px; } .stop-intro .intro-action { padding-top: 18px; } }
@media (max-height: 720px) {
  .stop-intro { padding-top: calc(var(--safe-top) + 12px); padding-bottom: calc(var(--safe-bottom) + 12px); }
  .stop-intro .intro-page { margin-top: 12px; }
  .stop-intro .intro-page h1 { font-size: clamp(2rem, 10vw, 2.75rem); }
  .stop-intro .intro-cover { margin-top: 8px; min-height: 96px; }
  .stop-intro .intro-action { padding-top: 16px; }
}

/* Voice messages keep portrait, playback and transcript gesture on one compact row. */
.message-thread .voice-compact { padding: 10px 12px; cursor: pointer; animation: voice-arrive 380ms var(--ease) both; transform-origin: left center; }
.message-thread .voice-compact.is-right { transform-origin: right center; }
.voice-audio-row { display: flex; align-items: center; gap: 10px; min-height: 46px; }
.message-thread .voice-message.voice-compact .voice-sender { position: static; width: auto; height: auto; overflow: visible; clip: auto; flex: none; }
.voice-compact .voice-sender strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.voice-compact .voice-sender .avatar { width: 34px; height: 34px; }
.voice-compact .voice-toggle { width: 44px; height: 44px; background: var(--learner); color: var(--learner-ink); }
.message-thread .voice-compact .voice-wave { margin: 0; min-width: 44px; min-height: 44px; border: 0; padding: 4px 2px; border-radius: 10px; background: transparent; color: var(--accent-ink); }
.message-thread .voice-compact .voice-wave span { background: currentColor; }
.voice-text .message-text { margin: 10px 0 0; }
.voice-text:not([hidden]) { animation: intro-layer 220ms var(--ease) both; }
.voice-reminder { margin: -4px 0 16px; line-height: 1.4; }
@keyframes voice-arrive { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }

/* The intro arrives in layers; selecting another stop preserves these mounted layers. */
.stop-intro { animation: none; }
.stop-intro > .intro-header { animation: intro-header-arrive 240ms var(--ease) both; }
.stop-intro .intro-top { animation: intro-descend 320ms var(--ease) 60ms both; }
.stop-intro .intro-title-slot { animation: intro-descend 360ms var(--ease) 120ms both; }
.stop-intro .intro-cover { animation: intro-art 440ms var(--ease) 180ms both; }
.stop-intro .intro-route { animation: intro-descend 360ms var(--ease) 240ms both; }
.stop-intro .intro-action > .btn { animation: intro-descend 320ms var(--ease) 300ms both; }
@keyframes intro-header-arrive { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes intro-descend { from { opacity: 0; transform: translateY(-28px); } 75% { opacity: 1; transform: translateY(2px); } to { opacity: 1; transform: none; } }
@keyframes intro-layer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes intro-art { from { opacity: 0; transform: translateY(-38px) rotate(-1.5deg) scale(.96); } 75% { opacity: 1; transform: translateY(3px) rotate(.3deg) scale(1); } to { opacity: 1; transform: none; } }
.intro-knot { touch-action: pan-y; }
.intro-knot-mark { transition: transform 160ms var(--ease), background-color 160ms var(--ease); }
.intro-knot.is-done:active .intro-knot-mark, .intro-knot.is-selected:active .intro-knot-mark { transform: scale(1.15); background: var(--primary); }
.entry-reset { color: var(--muted); font-weight: 500; padding-inline: 8px; }
.now-meta .entry-reset { margin-left: auto; }

/* A compact next-lesson card: context first, title next, one clear action. */
.now-meta { flex-wrap: nowrap; min-height: 44px; margin: -4px -8px 4px 0; }
.now-label { font-size: .78rem; font-weight: 500; }
.now-meta .entry-reset-compact { min-height: 44px; margin-top: 0; font-size: .75rem; gap: 5px; }
.entry-reset-compact .icon { width: 15px; height: 15px; }
.now-body .now-action { justify-self: start; min-width: 140px; min-height: 48px; margin-top: 20px; padding: 0 20px; gap: 16px; border-radius: 14px; }

/* Phone call (src/call.js): ringing, then a live call with the caller's face, a clock and a wave. */
.call { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.25rem 0 0.5rem; text-align: center; }
.call-kicker { margin: 0; color: var(--muted); font-size: 0.9rem; letter-spacing: 0.02em; }
.call-name { margin: 0; font-family: var(--font-display); font-size: 1.6rem; }
.call-setting { margin: 0; max-width: 30ch; color: var(--muted); font-size: 0.95rem; }
.call-face { position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin: 0.5rem 0; border-radius: 50%; }
.call-face .avatar { transform: scale(1.6); }
.call-face::before, .call-face::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c, var(--line)); opacity: 0; }
.call-face.is-ringing::before { animation: call-ring 1.6s ease-out infinite; }
.call-face.is-ringing::after { animation: call-ring 1.6s ease-out 0.8s infinite; }
.call-face.is-ringing .avatar { animation: call-shake 1.6s ease-in-out infinite; }
.call-face.is-talking::before { opacity: 0.5; transform: scale(1.12); transition: transform 200ms ease, opacity 200ms ease; }
@keyframes call-ring { from { opacity: 0.6; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
@keyframes call-shake { 0%, 60%, 100% { transform: scale(1.6) rotate(0); } 65%, 75%, 85% { transform: scale(1.6) rotate(-4deg); } 70%, 80% { transform: scale(1.6) rotate(4deg); } }
.call-actions { display: flex; justify-content: center; margin-top: 1rem; }
.call-btn-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.85rem; }
.call-btn { display: grid; place-items: center; width: 64px; height: 64px; border: 0; border-radius: 50%; cursor: pointer; }
.call-btn .icon { width: 28px; height: 28px; }
.call-accept { background: var(--ok); color: #fff; }
.call-top { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.call-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.call.is-ended .call-dot { background: var(--muted); }
.call-wave { display: flex; align-items: center; gap: 4px; height: 32px; }
.call-wave span { width: 4px; height: 6px; border-radius: 2px; background: var(--c, var(--muted)); opacity: 0.5; transition: height 180ms ease; }
.call-wave.is-on span { height: var(--h); opacity: 0.9; animation: call-wave 0.9s ease-in-out infinite alternate; }
.call-wave.is-on span:nth-child(2n) { animation-delay: 0.15s; }
.call-wave.is-on span:nth-child(3n) { animation-delay: 0.3s; }
@keyframes call-wave { from { transform: scaleY(0.4); } to { transform: scaleY(1); } }
.call-caption { width: 100%; padding: 0.6rem 0.8rem; border-radius: var(--radius-s); background: var(--surface-2); text-align: left; }
.call-caption p { margin: 0; }
.call-log { width: 100%; display: flex; flex-direction: column; gap: 0.25rem; text-align: right; }
.call-said { margin: 0; color: var(--muted); font-size: 0.92rem; }
.call-composer { width: 100%; text-align: left; }
.call-composer .mic-row { display: flex; justify-content: center; margin-bottom: 0.5rem; }
.call-live { min-height: 1.2em; margin: 0 0 0.5rem; text-align: center; }
.call-repair { margin-top: 0.5rem; }
.call-note { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.8rem; }
@media (prefers-reduced-motion: reduce) {
  .call-face::before, .call-face::after, .call-face .avatar, .call-wave.is-on span { animation: none; }
}

/* ---------- Phone critique, set 1 (8 Oct) ----------
   One screen without scrolling where the content allows it, pictures without frames, an audio bar
   with a speed switch instead of "ask again", quiet right and wrong marks. */
:root { --right: #2d7a55; --right-soft: #e6f2ec; }
:root[data-theme="dark"] { --right: #7cc8a0; --right-soft: #1b2b26; }

/* Steps that fit the screen: the body gives them its height, the picture takes what is left. */
.lesson-body { display: flex; flex-direction: column; }
.lesson-body > .step { flex: 0 0 auto; }
.lesson-body > .step.is-fit { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }

/* Pictures stand on the page in both themes (the word pictures are transparent). */
.step .media.has-img, :root[data-theme="dark"] .step .media.has-img { background: transparent; border: 0; }

/* Meaning card */
.is-meaning .instr { margin-bottom: 0.25rem; }
.is-meaning .word-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 0; border: 0; background: none; }
.media-fill { flex: 1 1 0; width: 100%; min-height: 96px; max-height: 370px; margin: 0; }
.media-fill img { padding: 0; object-position: 40% center; }
.is-meaning .word-card.kind-chunk { flex: 0 0 auto; margin: auto 0; }
.card-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 16px 0 4px; text-align: left; }
.card-line .card-en { margin: 0; font: 600 clamp(1.6rem, 7.4vw, 2.3rem)/1.12 var(--font-display); letter-spacing: -.025em; overflow-wrap: anywhere; }
.card-pattern { margin: 2px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); text-align: left; animation: cover-pop .28s var(--ease) both; }
.card-pattern p { margin: 0; font-weight: 600; }
.card-pattern p.muted { font-weight: 400; font-size: .92rem; }
.is-meaning .meaning-choices { flex: none; margin-top: 0.85rem; gap: 0.5rem; }
.is-meaning .choice { min-height: 48px; padding: 0.7rem 1rem; }
/* Picture and sound first: the meanings keep their room and fade in after the word is heard. */
.is-meaning .is-later { opacity: 0; visibility: hidden; transform: translateY(6px); }
.is-meaning .instr, .is-meaning .meaning-choices { transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .is-meaning .is-later { transform: none; } }
.word-card.is-known .media img { animation: known 0.5s var(--ease); }
@keyframes known { 40% { transform: scale(1.05); } }

/* Right and wrong: a thin line and a small mark, no coloured fill. */
.choice { position: relative; transition: border-color 0.2s ease, opacity 0.25s ease, color 0.2s ease; }
.choice.is-correct { border-color: var(--right); background: var(--surface); color: var(--text); }
.choice.is-correct::after { content: ""; position: absolute; right: 0.85rem; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--right); animation: mark-in 0.4s var(--ease) both; }
.choice.is-correct::before { content: ""; position: absolute; z-index: 1; right: 0.85rem; top: 50%; width: 24px; height: 24px; margin-top: -12px; background: var(--surface); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9'/%3E%3C/svg%3E") center / 16px no-repeat; animation: mark-in 0.4s 0.08s var(--ease) both; }
.choice.is-wrong { border-color: var(--line); background: var(--surface); color: var(--muted); opacity: 0.6; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 70%, transparent); animation: nudge 0.3s ease; }
.choices.tiles .choice.is-correct { padding-right: 0.35rem; }
@keyframes mark-in { from { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } to { transform: scale(1); } }
@keyframes nudge { 25% { transform: translateX(-5px); } 60% { transform: translateX(4px); } }
.fix-line.is-right { background: var(--right-soft); }
.fix-line.is-right .fix-w.is-add { color: var(--right); }
.tf-row.is-correct, .token.is-correct, .match-item.is-matched { background: var(--right-soft); border-color: var(--right); }
.outcome { background: var(--right-soft); }
.outcome .icon { color: var(--right); }

/* Feedback sheet: the page colour with a coloured edge; the mark arrives, it is not just there. */
.sheet.is-open { animation: sheet-up 0.3s var(--ease); }
.sheet-ok, .sheet-near, .sheet-bad { background: var(--surface); box-shadow: inset 0 3px 0 var(--sheet-c, var(--line)); }
.sheet-ok { --sheet-c: var(--right); }
.sheet-near { --sheet-c: var(--near); }
.sheet-bad { --sheet-c: var(--bad); }
.sheet-ok .sheet-icon { background: var(--right); }
.sheet.is-open .sheet-icon { animation: mark-in 0.4s 0.05s var(--ease) both; }
@keyframes sheet-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Audio bar */
.abar { display: inline-flex; align-items: stretch; height: 48px; max-width: 100%; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); overflow: hidden; }
.abar-play { flex: 1; display: flex; align-items: center; gap: 0.65rem; padding: 0 1.1rem 0 0.4rem; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.abar-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; }
:root[data-theme="dark"] .abar-icon { background: var(--accent); color: #0f1722; }
.abar-icon .icon { width: 15px; height: 15px; margin-left: 2px; }
.abar-wave { display: flex; align-items: center; gap: 3px; height: 30px; }
.abar-wave span { width: 3px; height: var(--h); border-radius: 2px; background: color-mix(in srgb, var(--text) 30%, transparent); transform: scaleY(0.7); }
.abar.is-playing .abar-wave span { background: var(--primary); animation: wave 0.9s ease-in-out infinite; animation-delay: calc(var(--k) * 55ms); }
.abar-speed { flex: none; display: flex; align-items: center; gap: 0.25rem; padding: 0 0.8rem; border: 0; border-left: 1.5px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: 0.82rem; cursor: pointer; }
.abar-speed .icon { width: 16px; height: 16px; }
.abar-speed[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent-soft); }
.abar.is-compact { height: 42px; }
.abar.is-compact .abar-icon { width: 30px; height: 30px; }
.abar.is-compact .abar-wave { height: 24px; }
.abar.is-compact .abar-wave span { height: calc(var(--h) * 0.8); }
.audio-hero .abar { width: min(100%, 320px); }
.comic .abar { display: flex; width: min(100%, 300px); margin: 0.6rem auto 0; }
@media (prefers-reduced-motion: reduce) { .abar.is-playing .abar-wave span { animation: none; } }

/* Listening checks (catch, pick, bridge): the group sits in the middle of the free height. */
.lesson-body > .step-catch, .lesson-body > .step-pick, .lesson-body > .step-bridge { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.step-catch .audio-hero, .step-pick .audio-hero, .step-bridge .audio-hero { margin: auto 0 1.5rem; padding-top: 1rem; }
.step-catch .choices, .step-pick .choices, .step-bridge .choices { margin-bottom: auto; }
.step-catch .choices-row .choice { min-height: 76px; font-size: 1.2rem; }

/* Comic: the picture keeps to the screen. */
.step-comic .comic { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.step-comic .comic-panel { flex: 1 1 0; min-height: 120px; max-height: 360px; width: min(100%, 340px); aspect-ratio: auto; margin: 0 auto; background: transparent; }
.step-comic .comic-panel > .media { width: 100%; height: 100%; aspect-ratio: auto; margin: 0; }
.step-comic .comic > .abar { flex: none; }
.step-comic .instr { margin-bottom: 0.4rem; }
.step-comic .choice { min-height: 46px; padding: 0.6rem 1rem; }
.step-comic .choices { gap: 0.45rem; margin-top: 0.6rem; }

/* The gap picture takes the space left by its question and choices. */
.step-gap > .media-md { flex: 1 1 0; min-height: 40px; max-height: 270px; width: 100%; aspect-ratio: auto; margin: 0; }
.step-gap > .audio-hero { flex: none; margin: .5rem 0; }
.step-gap .gap-sentence { flex: none; margin: .4rem 0; line-height: 1.7; }
.step-gap .choices-row { flex: none; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
.step-gap .choices-row .choice { min-width: 0; padding: .65rem .5rem; font-size: 1rem; overflow-wrap: anywhere; }

/* A phrase in use: the learner's turn sits under the chat. */
.scene-dock { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.scene-thread:empty { display: none; }
.step-card:has(.scene-thread:empty) .scene-dock { margin-top: auto; margin-bottom: auto; }
.lesson-body > .step-card:has(.scene-dock) { flex: 1 0 auto; display: flex; flex-direction: column; }
.scene-cue { margin: 0; text-align: center; color: var(--muted); font-size: 0.9rem; }
.scene-say .choice { text-align: center; }

/* Repeat with cards: the sentence is heard, not read. */
.shadow-card.is-heard .media { margin: 0 auto 0.5rem; }

/* Look again: the learner's answer, then a choice. */
.fix-label { margin: 0; color: var(--muted); font-size: 0.82rem; }
.fix-ask { margin: 0.25rem 0 0.6rem; font-weight: 700; }
.choices.is-done .choice:not(.is-correct):not(.is-wrong) { opacity: 0.45; }
.scene-thread .photo-print { width: 116px; height: 92px; }
.fix-picked { margin: 0; color: var(--muted); font-size: 0.9rem; }
.step-speak .choices, .step-say .choices { gap: 0.45rem; }
.step-speak .choice, .step-say .choice { min-height: 46px; padding: 0.6rem 1rem; }

/* ---------- Phone critique, sets 2 and 3 (8 Oct) ---------- */
/* Builder: commas and the end mark come by themselves; a right answer becomes one sentence. */
.token-mark { margin-left: 1px; opacity: 0.85; }
.build-answer.is-done { border-style: solid; border-color: var(--right); background: var(--right-soft); align-items: center; }
.build-sentence { padding: 0.35rem 0.4rem; font-size: 1.2rem; font-weight: 700; color: var(--text); animation: sentence-in 0.35s var(--ease) both; }
@keyframes sentence-in { from { opacity: 0; letter-spacing: 0.06em; } to { opacity: 1; letter-spacing: normal; } }
/* The given start of a sentence reads as already placed; the learner adds the rest. */
.build-given { min-height: 40px; padding: 0 0.7rem; border-radius: 10px; background: color-mix(in srgb, var(--navy) 55%, var(--surface)); color: #fff; opacity: 0.8; }
.build-answer:has(.build-given):not(:has(.token-in))::after { content: "+ …"; align-self: center; padding: 0 0.5rem; color: var(--muted); font-weight: 700; animation: given-hint 1.4s ease-in-out infinite; }
@keyframes given-hint { 50% { opacity: 0.35; } }
/* this → that: the old line quiet, the new one marked. */
.contrast { display: grid; gap: 0.25rem; padding: 0.55rem 0.8rem; border-radius: var(--radius-s); background: var(--surface-2); }
.contrast p { margin: 0; display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
.contrast p span + span { color: var(--muted); font-size: 0.9rem; }
.contrast-was { color: var(--muted); font-size: 0.92rem; }
.contrast-now { font-weight: 600; }
.contrast-now strong { color: var(--primary); }
.contrast strong { font-weight: 800; }
/* Listening: the thread header with the speed switch stays in view. */
.step-listen-thread .thread-title { position: sticky; top: -0.5rem; z-index: 3; margin-top: -0.5rem; padding: 0.6rem 0 0.5rem; background: var(--bg); }
/* A comic answered: the balloon holds the answer, the choices step aside. */
.step-comic .choices.is-answered { display: none; }
/* Look again: the question it was about, with its photo. */
.fix-context { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.25rem; }
.fix-context .media-sm { width: 72px; flex: none; }
.fix-context .bubble { max-width: none; }
.fix-q { margin: 0; font-weight: 600; }
/* A message read line by line: each line its own row, room between them. */
.read-message .msg-bubble .read-body { display: grid; gap: 0.35rem; }
.read-message .msg-bubble .read-body p { margin: 0; line-height: 1.45; }
.read-message .msg-bubble .read-body > * + * { padding-top: 0.35rem; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
/* Speaking: the situation, the picture and the answer share one screen. */
.step-speak .task-context:not(.is-doc), .step-build .task-context:not(.is-doc), .step-write .task-context:not(.is-doc), .step-speak .situation { padding: .25rem 0; font-size: .95rem; margin-bottom: .4rem; border: 0; background: transparent; }
.step-speak .media-md, .step-build .media-md, .step-write .media-md { width: 120px; max-height: 84px; margin-bottom: 0.4rem; }
.step-speak .build-answer, .step-build .build-answer { min-height: 56px; }
.step-speak .mic-row { margin: 0.4rem 0; }
/* Documents: tighter rows, so a form fits with its question. */
.read:not(.read-message) .read-body p { padding: 0.28rem 0; font-size: 1rem; }

/* ---------- Phone critique, set 4 (8 Oct) ---------- */
/* Audio bar: compact; the speed is a switch with a light, green while slowed. */
.abar { height: 42px; }
.abar-play { gap: 0.5rem; padding: 0 0.85rem 0 0.3rem; }
.abar-icon { width: 32px; height: 32px; }
.abar-wave { height: 24px; gap: 2.5px; }
.abar-wave span { height: calc(var(--h) * 0.8); }
.audio-hero .abar { width: min(100%, 260px); }
.abar-speed { gap: 0.4rem; padding: 0 0.7rem; }
.abar-speed[aria-pressed="true"] { background: transparent; color: var(--text); }
.thread-speed.abar-speed { height: 36px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); }
/* Bigger pictures (set 4): picture choices in two columns, the odd one centred; the picture
   fills its tile. Three in a row left them about 100px wide. */
.step-pick .choices.tiles, .step-bridge .choices.tiles, .step-listen-thread .choices.tiles { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.step-pick .choices.tiles > :last-child:nth-child(odd), .step-bridge .choices.tiles > :last-child:nth-child(odd), .step-listen-thread .choices.tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.3rem); }
.choices.tiles .choice { padding: 0.2rem; }
.choices.tiles .media-sm { aspect-ratio: 1; max-height: 26dvh; margin: 0 auto; }
.choices.tiles .media img { padding: 4%; }
.step-pick .audio-hero, .step-bridge .audio-hero { margin-bottom: .6rem; padding-top: .4rem; }
.step-pick .choices.tiles, .step-bridge .choices.tiles { flex: 1 1 0; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
.step-pick .choices.tiles .tile, .step-bridge .choices.tiles .tile { height: 100%; min-height: 0; }
.step-pick .choices.tiles .media-sm, .step-bridge .choices.tiles .media-sm { height: 100%; min-height: 0; max-height: none; aspect-ratio: auto; }
/* Speaking: the options wait behind "Şimdi konuşamam", so the picture can be large again. */
.step-speak .media-md { width: min(100%, 240px); max-height: 30dvh; aspect-ratio: 4 / 3; margin: 0 auto 0.5rem; }
.cant-speak { margin: 0.25rem auto 0; display: block; color: var(--muted); }
/* A phrase as a title: one line per form, a slot for the missing word. */
.phrase { display: inline-flex; flex-direction: column; gap: 0.1em; }
.phrase-line { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.2em; }
.slot { display: inline-block; width: 1.8em; height: 0.9em; margin: 0 0.1em; border-bottom: 3px dashed color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 2px; vertical-align: baseline; }
.tr-reveal .slot { width: 1.4em; border-bottom-width: 2px; }
.summary-next { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin: 1rem 0 0.5rem; padding: 0.65rem 0.9rem; border-radius: var(--radius-s); background: var(--surface-2); font-size: 0.92rem; }
.summary-next span { color: var(--muted); }
.summary-next strong { text-align: right; }
.summary-actions .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; white-space: nowrap; }
/* The reply quote: no stripe either. */
.reply-to { border-left: 0; border-radius: 10px; background: var(--surface-2); }
/* Repeat with cards: the heard sentence, the picture without a box, the cards in reach. */
.shadow-card.is-heard { padding: 0.25rem 0; border: 0; background: none; }
.shadow-card.is-heard .media { width: auto; height: min(22dvh, 170px); aspect-ratio: 1; margin: 0 auto 0.4rem; }
.step-shadow .context { margin: 0 0 0.4rem; }
.step-shadow .instr-tr { margin: 0.4rem 0 0.3rem; }
.step-shadow .build-answer { min-height: 52px; }
/* Unit opening slides: fixed scene area and controls; only opacity and transform move. */
.lesson-body:has(> .step-meet) { min-height: 0; padding-bottom: 0; overflow: hidden; }
.lesson:has(.step-meet) .stage-label > span { display: none; }
.step-meet { gap: 6px; animation: none; }
.meet-stage { position: relative; flex: 1 1 0; min-height: 0; touch-action: pan-y; border-radius: 3px; }
.meet-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.meet-panel { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; padding-top: 8px; }
.meet-copy { flex: none; }
.meet-eyebrow { margin: 0 0 10px; color: var(--muted); font-size: .85rem; line-height: 1.45; max-width: 31ch; }
.meet-title { margin: 0; font-family: var(--font-display); font-size: clamp(36px, 11vw, 52px); line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; overflow-wrap: anywhere; }
.meet-role { margin: 8px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.4; }
.meet-art { position: relative; margin: 0; flex: 1 1 0; min-height: 0; }
.meet-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.meet-scene .meet-art img { object-position: center 35%; }
.meet-art-fallback { display: grid; place-items: center; color: var(--accent); }
.meet-art-fallback .icon { width: min(22vw, 92px); height: min(22vw, 92px); }
.meet-known-row { display: flex; flex: none; flex-wrap: wrap; gap: 12px; padding-bottom: 8px; }
.meet-known { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .8rem; }
.meet-known .avatar { width: 28px; height: 28px; border: 0; }
.meet-known-face { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: center 30%; }
.meet-portrait { position: relative; flex: 1 1 0; min-height: 0; margin: 0; display: grid; place-items: center; overflow: hidden; }
.meet-portrait > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center top; user-select: none; }
.meet-portrait.is-crop > img { object-position: center; }
.meet-portrait.is-framed > img { inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 58% bottom; }
.meet-portrait.is-framed .meet-hello { right: 4%; bottom: 8%; }
.meet-portrait > .avatar { width: min(48vw, 190px); height: min(48vw, 190px); font-size: 3rem; }
.meet-hello { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 100px; min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 24px 24px 6px 24px; background: var(--bg); color: var(--text); font-size: 1.1rem; font-weight: 600; transition: border-color 180ms var(--ease), background 180ms var(--ease); touch-action: manipulation; }
.meet-hello-light { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #4e867e; box-shadow: 0 0 0 3px rgb(78 134 126 / .12); transition: background 180ms var(--ease), box-shadow 180ms var(--ease); }
:root[data-theme="dark"] .meet-hello-light { background: #93c5b9; }
.meet-hello.is-playing { border-color: var(--stamp); background: color-mix(in srgb, var(--stamp) 12%, var(--bg)); }
.meet-hello.is-playing .meet-hello-light { background: var(--stamp); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stamp) 16%, transparent), 0 0 9px color-mix(in srgb, var(--stamp) 60%, transparent); }
.meet-hello .icon { width: 16px; height: 16px; color: var(--stamp); }
.meet-story > .meet-eyebrow { flex: none; margin: 0; color: var(--stamp); font-weight: 600; }
.meet-story-line { margin: 0; flex: none; max-width: 24ch; font-family: var(--font-display); font-size: clamp(23px, 6.7vw, 30px); line-height: 1.3; text-wrap: pretty; color: var(--text); }
.meet-story .meet-art { margin-top: auto; }
.meet-story .meet-art img { object-position: left bottom; }
.meet-art.is-guide img { inset: 0; width: 100%; object-fit: contain; object-position: center top; }
.meet-art.is-guide.is-crop img { object-position: center; }
.meet-art.is-guide.is-small img { inset: auto 0 0 auto; width: 96px; height: 96px; max-height: 100%; border-radius: 50%; object-fit: cover; object-position: center top; }
.meet-nav { flex: none; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-height: 44px; gap: 8px; }
.meet-back:disabled { visibility: hidden; }
.meet-dots { display: flex; justify-content: center; align-items: center; gap: 7px; }
.meet-dots > span { width: 5px; height: 5px; border-radius: 50%; background: var(--line); transition: background 240ms ease, transform 240ms var(--ease); }
.meet-dots > .is-current { background: var(--stamp); transform: scale(1.5); }
@media (max-height: 660px) {
  .meet-panel { gap: 8px; padding-top: 2px; }
  .meet-title { font-size: clamp(34px, 10vw, 44px); }
  .meet-eyebrow { margin-bottom: 6px; font-size: .8rem; }
  .meet-story-line { font-size: clamp(22px, 6vw, 25px); }
}
@media (prefers-reduced-motion: reduce) {
  .meet-dots > span { transition: none; }
  .meet-hello, .meet-hello-light { transition: none; }
  .lesson:has(.step-meet) .btn { transition: none; }
  .lesson:has(.step-meet) .btn:active { transform: none; }
}
/* Picture series */
.series-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; flex: 1 1 auto; min-height: 0; align-content: center; }
.series-tile { display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center; padding: 0.4rem; border: 1.5px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--text); transition: border-color 0.15s ease, opacity 0.15s ease, transform 0.15s var(--ease); }
.series-tile:disabled { cursor: default; }
.series-tile .media-sm { width: 100%; max-height: 20dvh; aspect-ratio: 1; }
.series-cap { min-height: 1.5em; margin: 0.2rem 0 0; font-weight: 700; font-size: 1rem; text-align: center; }
.series-grid:has(.is-on) .series-tile:not(.is-on):not(.is-right) { opacity: 0.55; }
.series-tile.is-on { border-color: var(--accent); transform: scale(1.02); }
.series-tile.is-yours { border-color: var(--primary); }
.series-tile.is-blank { opacity: 1; }
.series-tile.is-right { border-color: var(--right); }
.series-tile.is-wrong { opacity: 0.4; animation: nudge 0.3s ease; }
.series-dock { display: grid; gap: 0.5rem; justify-items: center; margin-top: 0.8rem; min-height: 120px; }
.series-dock .choices { width: 100%; }
.series-ask { margin: 0; font-weight: 700; }
/* Find round (phone test 9 Oct): captions fade, the pictures wake one after another and an ear cue
   slides in, so the learner sees that the pictures are to be tapped without being told. */
.series-ask.is-cue { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--primary); animation: cue-in 0.32s var(--ease) both; }
.series-ask.is-cue .icon { width: 20px; height: 20px; animation: cue-ear 1.1s ease-in-out 0.35s 2; }
.series-grid.is-quiz .series-cap { transition: opacity 0.2s ease; opacity: 0; }
.series-grid.is-quiz .series-tile:not(:disabled) { animation: tile-wake 0.42s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 0.3s); }
@keyframes cue-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cue-ear { 50% { transform: scale(1.18); } }
@keyframes tile-wake { 0% { transform: none; } 45% { transform: scale(1.035); border-color: var(--primary); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .series-ask.is-cue, .series-ask.is-cue .icon, .series-grid.is-quiz .series-tile { animation: none; } }
.series-note { margin: 0; color: var(--muted); font-size: 0.9rem; }
.series-grid.n3 > :last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.3rem); }
.series-grid { flex: 0 0 auto; }
.series-tile { grid-template-rows: auto auto; padding: 0.3rem; min-width: 0; }
.series-tile .media-sm { width: auto; height: min(15dvh, 120px); max-height: none; }
.series-cap { font-size: 0.9rem; line-height: 1.25; }
.series-dock { min-height: 0; margin-top: 0.6rem; }
.bubble.is-built .bubble-body { box-shadow: 0 0 0 2px var(--right); }
/* Unit intro rope: one row; a long unit slides sideways. */
.intro-rope.is-sliding { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: smooth; -webkit-mask: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
.intro-rope.is-sliding::-webkit-scrollbar { display: none; }
.intro-rope.is-sliding .intro-rope-line { right: auto; }
/* Speed (set 5): one tap on a turtle; green while slowed. No slider. */
.abar-speed { width: 46px; justify-content: center; padding: 0; }
.abar-speed .icon { width: 28px; height: 28px; }
.abar-speed[aria-pressed="true"] { background: color-mix(in srgb, #2fb36d 16%, transparent); color: #1f8f53; }
:root[data-theme="dark"] .abar-speed[aria-pressed="true"] { color: #5fd394; }
.thread-speed.abar-speed { width: 40px; height: 36px; }
/* Sentence tasks (set 5): the picture takes the room left over instead of a fixed 120px stamp.
   The step fills the screen and the picture is the part that gives (210px down to 84px), so a
   context box, a question or the phone keyboard shrink the picture, not push the cards away. */
.lesson-body > .step-build, .lesson-body > .step-write, .lesson-body > .step-type, .lesson-body > .step-speak { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.step-build > .media-md, .step-write > .media-md, .step-type > .media-md, .step-speak > .media-md { width: 100%; max-height: none; aspect-ratio: auto; flex: 0 1 210px; min-height: 84px; margin: 0 0 0.6rem; background: transparent; }
.step-build > .media-md img, .step-write > .media-md img, .step-type > .media-md img { padding: 2%; }
/* A box of pencils: three pencils fanned in front of the box. */
.photo-with { position: absolute; inset: 0; pointer-events: none; }
.photo-with img { position: absolute; top: auto; right: auto; left: 50%; bottom: 4%; width: 58%; height: 58%; padding: 0; object-fit: contain; transform-origin: 50% 90%; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.18)); }
.photo-with img:nth-child(1) { transform: translateX(-70%) rotate(-28deg); }
.photo-with img:nth-child(2) { transform: translateX(-50%) rotate(-8deg); }
.photo-with img:nth-child(3) { transform: translateX(-30%) rotate(14deg); }

/* V2 portraits have their own framing; a profile is never stretched into a full figure. */
.cast-fig.is-portrait { margin: 0 6px; gap: 6px; }
.cast-fig.is-portrait img, .onboarding .cast-fig.is-portrait img { width: 72px; height: 72px; object-fit: cover; object-position: center 25%; border-radius: 50%; }
.cast-fig.is-portrait figcaption { position: static; background: transparent; padding: 0; }
.meet-story .meet-art.is-detail img { object-position: left bottom; }

/* A touch deck keeps the word, directions and action in the same phone viewport. */
.lesson-body:has(> .step-sort.is-fit), .lesson-body:has(> .step-spell.is-fit) { min-height: 0; overflow: hidden; padding-bottom: .5rem; }
.sort-deck { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.sort-deck-progress { text-align: center; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.sort-deck-stage { flex: 1; min-height: 0; overflow: hidden; display: grid; }
.sort-deck-card { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); touch-action: none; user-select: none; -webkit-user-select: none; }
.sort-deck-card .media-md { flex: 1; min-height: 0; width: 100%; max-height: 280px; aspect-ratio: auto; margin: 0; }
.sort-deck-card .media-md img { padding: 2%; }
.sort-deck-card h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); margin: 0; text-align: center; overflow-wrap: anywhere; }
.sort-deck-card.is-word { min-height: 220px; }
.sort-deck-card.is-word h2 { font-family: var(--font-display, inherit); font-size: clamp(2.4rem, 11vw, 3.2rem); }
.sort-deck-play { flex: none; }
.sort-deck-feedback { flex: none; height: 36px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .9rem; color: var(--text); }
.sort-deck-feedback .icon { flex: none; width: 20px; }
.sort-deck-feedback.is-wrong { color: var(--accent); }
.sort-deck-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sort-direction { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); text-align: left; touch-action: manipulation; transition: border-color 120ms ease, background 120ms ease; }
.sort-direction > .icon { flex: none; width: 20px; }
.sort-direction strong { display: block; font-size: .95rem; }
.sort-direction small { display: block; color: var(--muted); }
.sort-deck-count { margin-left: auto; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sort-direction.is-aimed { border-color: var(--accent); background: var(--surface-2); }
.sort-direction:disabled { opacity: .7; }
.sort-deck-done { display: grid; place-items: center; color: var(--text); }
.sort-deck-done .icon { width: 64px; height: 64px; }
/* Selected letters are a word, while unused letters retain comfortable tap targets. */
.step-spell .spell-top { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; margin: 0 0 8px; }
.step-spell .spell-top .media-md { min-height: 0; height: 100%; width: min(100%, 280px); aspect-ratio: auto; }
.spell-builder { flex: none; }
.spell-answer { display: flex; align-items: center; gap: 8px; min-height: 56px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.spell-word { flex: 1; min-width: 0; font-size: clamp(1.1rem, 5.7vw, 1.8rem); font-weight: 700; letter-spacing: .025em; white-space: nowrap; text-align: center; }
.spell-answer .icon-btn { flex: none; }
.spell-bank { display: grid; grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 6px; }
.spell-bank .token { min-width: 44px; min-height: 44px; margin: 0; padding: 6px; font-size: 1.15rem; touch-action: manipulation; }
.spell-bank .token.is-used { visibility: visible; opacity: .18; }
@media (max-width: 360px) { .spell-bank { grid-template-columns: repeat(5, minmax(44px, 1fr)); } .sort-deck-card { padding: 8px; gap: 6px; } }

/* Foot of the map: when the published version was made (Turkish time). */
.app-updated { margin: 1.4rem 0 0.4rem; text-align: center; font-size: 0.78rem; color: var(--muted); }

/* Feedback sheet over the step, above the action bar (phone test 9 Oct): the step keeps its layout,
   pictures do not shrink to make room. */
.sheet.is-open { position: absolute; left: 0; right: 0; bottom: var(--abar-h, 88px); z-index: 6; max-height: 55dvh; box-shadow: 0 -10px 30px rgb(0 0 0 / 0.08), inset 0 3px 0 var(--sheet-c, var(--line)); }
/* The right answer's mark sits on the corner, never over the word. */
.choice.is-correct { overflow: visible; }
.choice.is-correct::after, .choice.is-correct::before { top: -9px; right: -9px; margin-top: 0; width: 22px; height: 22px; }
.choice.is-correct::before { -webkit-mask-size: 14px; mask-size: 14px; }
/* Recognised speech: a tick with the words, no sentence (phone test 9 Oct). */
.live.is-ok { border-color: var(--right); }
.live .live-ok { align-self: center; margin-left: auto; width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--right); color: var(--surface); animation: mark-in 0.35s var(--ease) both; }
.live .live-ok svg { width: 16px; height: 16px; }
/* A fitted picture never shrinks to a speck: below this the page scrolls instead (phone test 9 Oct). */
.step.is-fit .media-fill { min-height: min(26dvh, 200px); }
.msg-head > .play, .read-head > .play, .menu-head > .play { margin-left: auto; }

/* ---------- Unit covers: magazine layouts (user 9 Oct; meet.js, intro-covers.json layouts) ----------
   The title sits in the picture's free space, a story line breaks around its object, and objects
   float in front at their own depth: dragging a slide moves them more than the words. */
.meet-cover .meet-obj { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; margin: 0; pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--r)); translate: calc(var(--drag, 0) * var(--d, 1) * 1px) 0; transition: translate .3s var(--ease);
  filter: drop-shadow(0 16px 18px rgb(18 28 48 / .2)); animation: cover-obj .65s var(--ease) .12s both; }
.meet-cover .meet-obj img { width: 100%; height: 100%; object-fit: contain; user-select: none; }
@keyframes cover-obj { from { opacity: 0; transform: translate(-50%, -38%) rotate(calc(var(--r, 0deg) - 8deg)) scale(.86); } }
.meet-cover .meet-story-line { position: relative; z-index: 2; flex: 1 1 0; min-height: 0; max-width: none; display: flex; flex-direction: column; justify-content: space-between; }
.meet-part { display: block; }
.meet-phrase { display: inline-block; white-space: nowrap; }
.meet-decor { position: absolute; inset: 0; pointer-events: none; transform-origin: center; }
.meet-cover .part-0 { max-width: 12ch; font-size: clamp(29px, 9vw, 40px); line-height: 1.06; letter-spacing: -.025em; }
.meet-cover .meet-part.is-last { align-self: flex-end; max-width: 15ch; text-align: right; font-size: clamp(19px, 5.4vw, 24px); line-height: 1.25; animation: cover-part .5s var(--ease) .75s both; }
@keyframes cover-part { from { opacity: 0; transform: translateY(10px); } }

/* Masthead: a huge title whose foot rests on the picture. */
.cover-masthead .meet-copy { position: relative; z-index: 2; }
.cover-masthead .meet-title { font-size: clamp(60px, 21vw, 100px); line-height: .88; letter-spacing: -.055em; }
.cover-masthead.align-end .meet-copy { align-self: flex-end; text-align: right; }
.cover-masthead.align-end .meet-eyebrow { margin-left: auto; }
.cover-masthead .meet-art { margin-top: 8px; }

/* A phone ringing between the two halves of the sentence. */
.cover-device .meet-device { position: absolute; z-index: 3; left: 52%; top: 54%; height: min(46%, 290px); aspect-ratio: 9 / 18.5; padding: 6px; border-radius: 24px; background: #1c2333;
  box-shadow: 16px 24px 38px rgb(18 28 48 / .3), inset 0 0 0 1.5px #3d4862; transform: translate(-50%, -50%) perspective(900px) rotateY(-18deg) rotateX(7deg) rotate(-5deg);
  translate: calc(var(--drag, 0) * 1.5px) 0; transition: translate .3s var(--ease); animation: cover-device .7s var(--ease) .1s both; }
@keyframes cover-device { from { opacity: 0; transform: translate(-50%, -40%) perspective(900px) rotateY(-30deg) rotateX(12deg) rotate(-10deg) scale(.9); } }
.meet-device-screen { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22% 8% 10%; border-radius: 19px; background: linear-gradient(165deg, #34466c, #141d33); color: #fff; text-align: center; }
.meet-device .meet-face { width: 50%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: center 22%; animation: cover-ring 1.4s ease-out .9s 2; }
@keyframes cover-ring { 0% { box-shadow: 0 0 0 0 rgb(255 255 255 / .45); } 100% { box-shadow: 0 0 0 14px rgb(255 255 255 / 0); } }
.meet-device strong { margin-top: 6px; font-size: .95rem; }
.meet-device span { font-size: .66rem; opacity: .75; }
.meet-device-actions { display: flex; justify-content: space-around; width: 100%; margin-top: auto; }
.meet-device-actions span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; opacity: 1; }
.meet-device-actions .icon { width: 15px; height: 15px; }
.meet-device-actions .is-decline { background: #df5a43; }
.meet-device-actions .is-decline .icon { transform: rotate(135deg); }
.meet-device-actions .is-accept { background: #36a46a; }

/* What is not said and what is: one word crossed out, one lit; the two greetings float apart. */
/* The word not used is only quieter, never crossed out (user, 11 Oct: crossing out "Türkçe" felt rude). */
.cover-contrast .meet-mark.is-quiet { color: var(--muted); }
.cover-contrast em.meet-mark { font-style: normal; color: var(--stamp); background: linear-gradient(transparent 62%, color-mix(in srgb, var(--stamp) 22%, transparent) 62%); }
.meet-bubbles { position: absolute; z-index: 1; inset: 30% 0 26%; pointer-events: none; }
.meet-bubble { position: absolute; padding: .45em 1em; border-radius: 18px 18px 18px 5px; background: var(--surface); box-shadow: 0 12px 26px rgb(18 28 48 / .14); font-weight: 800; font-size: clamp(18px, 5.4vw, 24px);
  translate: calc(var(--drag, 0) * (1 + var(--i)) * .8px) 0; transition: translate .3s var(--ease); animation: cover-pop .6s var(--ease) both; animation-delay: calc(.2s + var(--i) * .25s); }
@keyframes cover-pop { from { opacity: 0; scale: .8; } }
.meet-bubble.is-off { left: 8%; top: 8%; color: var(--muted); transform: rotate(-6deg) scale(.88); opacity: .7; }
.meet-bubble:not(.is-off) { right: 10%; top: 46%; background: var(--stamp); color: #fff; border-radius: 18px 18px 5px 18px; transform: rotate(4deg) scale(1.12); }

/* Morning here, night in Boston: the line sits on the two halves, the breakfast on the seam. */
.cover-clocks .meet-story-line { padding: 14px 14px 16px; border-radius: 22px; background: linear-gradient(to bottom, var(--sky-2, #eef3fb) 0 50%, #1b2541 50% 100%); }
.cover-clocks .part-0 { max-width: 10ch; }
.cover-clocks .meet-part.is-last { color: #f4f1ea; }
.meet-clocks { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.meet-clock { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.meet-clock .icon { width: 15px; height: 15px; }
.meet-clock.is-day { left: 14px; top: 50%; transform: translateY(-130%); background: #fff; color: #9a5b06; box-shadow: 0 6px 14px rgb(0 0 0 / .08); }
.meet-clock.is-night { left: 14px; top: 58%; background: #2c3a60; color: #e8ecf6; }

/* Two voice notes, one from each side, at different depths. */
.meet-voice { position: absolute; z-index: 3; left: 4%; right: 4%; top: 36%; display: grid; gap: 14px; pointer-events: none; }
.meet-note { display: flex; align-items: center; gap: 8px; width: 80%; padding: 9px 14px; border-radius: 22px; background: var(--surface); box-shadow: 0 12px 26px rgb(18 28 48 / .14); animation: cover-pop .6s var(--ease) both; }
.meet-note .icon { width: 16px; height: 16px; flex: none; }
.meet-note small { margin-left: auto; color: var(--muted); font-weight: 700; }
.meet-note .meet-face { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: center 22%; flex: none; }
.meet-note.is-them { justify-self: start; transform: perspective(700px) rotateY(12deg); translate: calc(var(--drag, 0) * .8px) 0; animation-delay: .25s; }
.meet-note.is-you { justify-self: end; background: var(--navy, #1d2b4a); color: #fff; transform: perspective(700px) rotateY(-12deg) scale(1.04); translate: calc(var(--drag, 0) * 1.6px) 0; animation-delay: .55s; }
.meet-note.is-you small { color: #cfd6e6; }
.meet-wave { display: flex; align-items: center; gap: 2px; height: 22px; }
.meet-wave span { width: 3px; border-radius: 2px; background: currentColor; opacity: .55; height: calc(6px + var(--k) * 2.3px); }
@media (prefers-reduced-motion: reduce) {
  .meet-cover .meet-obj, .meet-cover .meet-part.is-last, .cover-device .meet-device, .meet-device .meet-face, .meet-bubble, .meet-note { animation: none; transition: none; }
}
/* The full illustration is preserved; the text gives it room. */
.cover-masthead .meet-art img { object-position: var(--cover-art-x, 50%) 35%; }
.cover-device .part-0 { max-width: 15ch; font-size: clamp(26px, 8vw, 34px); }
.cover-device .meet-device { top: 60%; height: min(42%, 270px); left: 62%; }
@media (max-height: 700px) {
  .cover-device .meet-device { top: 65%; height: 36%; }
  .meet-device-screen { padding: 8% 6%; gap: 2px; }
  .meet-device .meet-face { width: 36%; }
  .meet-device strong { margin-top: 2px; font-size: .75rem; line-height: 1.1; }
  .meet-device span { font-size: .55rem; line-height: 1.15; }
  .meet-device-actions span { width: 22px; height: 22px; }
  .meet-device-actions .icon { width: 12px; height: 12px; }
}

/* The remaining units share a material language, not identical compositions. */
.cover-masthead .meet-title { font-size: clamp(30px, calc(var(--cover-title-size, 84) * 100vw / 390), calc(var(--cover-title-size, 84) * 1px)); }
.cover-masthead .meet-art img { object-fit: contain; }
.meet-cover .part-0 { max-width: var(--cover-leading-width, 19ch); font-size: clamp(22px, calc(var(--cover-leading-size, 34) * 100vw / 390), calc(var(--cover-leading-size, 34) * 1px)); line-height: 1.14; }
.meet-cover .meet-part.is-last { max-width: 23ch; }
.meet-cover.is-single-part .meet-story-line { justify-content: flex-start; }
.meet-paper, .meet-street-plan { position: absolute; z-index: 1; left: 54%; top: 51%; width: 70%; max-height: 36%; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: 8px 12px 18px rgb(18 28 48 / .12); transform: translate(-50%, -50%) rotate(-6deg); translate: calc(var(--drag, 0) * 1.4px) 0; transition: translate 300ms var(--ease); animation: cover-pop 460ms var(--ease) 100ms both; pointer-events: none; }
.meet-paper { top: var(--cover-prop-y, 56%); display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 10px; overflow: hidden; }
.meet-paper > .icon { width: 23px; height: 23px; color: var(--stamp); }
.meet-paper strong { font-family: var(--font-display); font-size: clamp(18px, 5vw, 24px); line-height: 1.1; }
.meet-paper-lines { grid-column: 2; display: grid; gap: 5px; font-size: 12px; color: var(--muted); }
.meet-paper.is-pass { border-inline-start: 8px solid var(--stamp); border-radius: 9px; grid-template-columns: 24px 1fr; align-items: center; }
.meet-paper.is-pass .meet-paper-lines { grid-column: 2; }
.meet-street-plan { width: 65%; height: 31%; padding: 0; overflow: hidden; background: var(--surface-2); transform: translate(-50%, -50%) rotate(7deg); }
.meet-street { position: absolute; width: 160%; height: 9px; background: var(--surface); border-block: 1px solid var(--line); left: -25%; top: 26%; transform: rotate(-18deg); }
.meet-street.street-1 { top: 72%; }
.meet-street.street-2, .meet-street.street-3 { width: 10px; height: 160%; top: -20%; left: 36%; transform: rotate(-18deg); }
.meet-street.street-3 { left: 74%; }
.meet-street-pin { position: absolute; left: 49%; top: 34%; color: var(--stamp); }
.meet-street-pin .icon { width: 34px; height: 34px; }
.meet-album { position: absolute; z-index: 1; inset: 30% 9% 24%; pointer-events: none; }
.meet-album figure { position: absolute; margin: 0; left: calc(var(--i) * 37%); top: calc(var(--i) * 16%); width: 59%; height: 85%; padding: 7px 7px 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 5px 8px 16px rgb(18 28 48 / .12); transform: rotate(calc(var(--i) * 12deg - 7deg)); translate: calc(var(--drag, 0) * (1 + var(--i)) * .8px) 0; transition: translate 300ms var(--ease); animation: cover-pop 460ms var(--ease) both; animation-delay: calc(100ms + var(--i) * 140ms); }
.meet-album img { width: 100%; height: 100%; object-fit: contain; }
@media (max-height: 620px) {
  .cover-masthead .meet-title { font-size: min(44px, calc(var(--cover-title-size, 84) * 100vw / 390)); }
  .cover-masthead .meet-art { margin-top: 8px; }
  .cover-masthead .meet-art img { object-position: var(--cover-art-x, 50%) 50%; }
  .meet-cover .part-0 { font-size: min(25px, calc(var(--cover-leading-size, 34) * 100vw / 390)); line-height: 1.12; }
  .meet-cover .meet-part.is-last { font-size: 17px; max-width: 26ch; line-height: 1.2; }
  .meet-paper { gap: 5px; padding: 10px; }
  .meet-paper-lines { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .meet-paper, .meet-street-plan, .meet-album figure { animation: none; transition: none; }
}

/* ---------- "Hatanı kontrol edelim" as its own activity (phone test 9 Oct; steps.js renderFix) ----------
   Opening: the moments named as a small fanned deck. Each moment: the picture and the question,
   the learner's bubble whose wrong words fall away, the right bubble arriving with what was missing
   marked, two pictures when one word was taken for another, then a new try under a ribbon. */
.fix-intro { display: grid; justify-items: center; gap: 0.6rem; padding-top: 6dvh; text-align: center; }
.fix-intro h2 { margin: 0.4rem 0 0; font-family: var(--font-display); font-size: clamp(26px, 7.6vw, 34px); line-height: 1.12; }
.fix-intro p { margin: 0; max-width: 30ch; color: var(--muted); line-height: 1.5; }
.fix-intro-mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--near-soft); color: var(--near); animation: cover-pop .5s var(--ease) both; }
.fix-intro-mark .icon { width: 26px; height: 26px; }
.fix-deck { display: grid; gap: 10px; width: 100%; margin-top: 1.2rem; }
.fix-chip { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); text-align: left; font-weight: 600;
  box-shadow: 0 8px 20px rgb(18 28 48 / .06); animation: fix-deal .5s var(--ease) both; animation-delay: calc(.15s + var(--i) * 90ms); }
.fix-chip .media-xs, .fix-chip-mark { flex: none; width: 44px; height: 44px; }
.fix-chip-mark { display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: var(--muted); }
@keyframes fix-deal { from { opacity: 0; transform: translateY(14px) rotate(calc(var(--i) * 1.5deg - 2deg)); } }

.step.is-fix .instr { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fix-count { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--near-soft); color: var(--near); font-size: .8rem; font-weight: 800; }
.fix-moment { display: flex; align-items: center; gap: 14px; margin: .2rem 0 1rem; padding: 12px; border-radius: 20px; background: var(--surface-2); }
.fix-moment .media-md { flex: none; width: min(34vw, 132px); height: auto; aspect-ratio: 1; }
.fix-moment .bubble { max-width: none; }
.fix-moment .fix-q { margin: 0; font-weight: 700; }
.fix-thread { display: grid; gap: 10px; }
.fix-said { position: relative; display: grid; gap: 4px; max-width: 88%; padding: 10px 14px; border-radius: 20px 20px 6px 20px; justify-self: end; background: var(--surface); border: 1px solid var(--line); }
.fix-said small { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fix-said p { margin: 0; font-size: 1.2rem; font-weight: 600; line-height: 1.35; }
.fix-said .fix-w { display: inline-block; margin-right: .28em; transition: opacity .4s ease, transform .4s ease, color .3s ease; }
.fix-said.is-mine.is-going { opacity: .7; }
.fix-said.is-mine.is-going .fix-w.is-drop { opacity: .35; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--bad); transform: translateY(3px); }
.fix-said.is-right { border: 1.5px solid var(--right); background: var(--right-soft, var(--ok-soft)); animation: fix-arrive .45s var(--ease) both; }
.fix-said.is-right .fix-w.is-add { color: var(--right); font-weight: 800; animation: word-in .4s ease-out both; animation-delay: calc(var(--i) * 70ms + 250ms); }
.fix-said.is-right .play { position: absolute; left: -54px; bottom: 4px; }
@keyframes fix-arrive { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.fix-contrast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 1rem; animation: fix-arrive .45s var(--ease) .35s both; }
.fix-pic { margin: 0; display: grid; justify-items: center; gap: 4px; padding: 10px 8px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.fix-pic .media-sm { width: 100%; max-width: 110px; aspect-ratio: 1; height: auto; }
.fix-pic figcaption { display: grid; justify-items: center; line-height: 1.25; }
.fix-pic figcaption span { color: var(--muted); font-size: .85rem; }
.fix-pic.is-was { opacity: .62; }
.fix-pic.is-was strong { text-decoration: line-through; text-decoration-color: var(--bad); }
.fix-pic.is-now { border-color: var(--right); }
.fix-arrow { color: var(--muted); }
.fix-arrow .icon { width: 22px; height: 22px; }
.fix-thread + .fix-hint, .fix-contrast + .fix-hint { margin-top: .9rem; }
.fix-ribbon { display: flex; align-items: center; gap: 8px; margin: 0 0 .4rem; padding: 6px 12px; width: fit-content; border-radius: 999px; background: var(--near-soft); color: var(--near); font-weight: 800; font-size: .85rem; animation: cover-pop .4s var(--ease) both; }
.fix-ribbon .icon { width: 16px; height: 16px; }
.fix-ribbon small { opacity: .75; }
@media (prefers-reduced-motion: reduce) {
  .fix-chip, .fix-intro-mark, .fix-said.is-right, .fix-said.is-right .fix-w.is-add, .fix-contrast, .fix-ribbon { animation: none; }
}
.fix-chip .media-xs { border-radius: 12px; }
.fix-chip-text { display: grid; gap: 2px; }
.fix-chip-text s { color: var(--muted); font-weight: 500; text-decoration-color: var(--bad); }
/* The spoken line is one sentence that writes itself (phone test 9 Oct): no word boxes; each new
   word slides in, a word not heard exactly is the target's word in the near colour. */
.live { gap: 0 0.3em; align-items: baseline; padding: 0.75rem 0.95rem; font-size: 1.3rem; line-height: 1.4; }
.live-word { padding: 0; border-radius: 0; background: none; box-shadow: none; font-weight: 600; animation: live-in 0.28s var(--ease) both; }
.live-word.is-near { background: none; box-shadow: none; color: var(--near); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--near) 45%, transparent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@keyframes live-in { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } }
@media (prefers-reduced-motion: reduce) { .live-word { animation: none; } }

/* ---------- First-lesson tutorial thread (phone test 9 Oct; listening.js renderTutorial) ----------
   The usual voice card, no bubble inside it. The first card breathes and a coach line asks for a tap:
   English opens in the card, a second tap adds the Turkish. A heart lands on the last one. */
.tut-row { position: relative; }
.is-reactable, .bubble.is-sent { position: relative; }
.is-reactable { -webkit-touch-callout: none; }
.is-reactable:has(> .tut-reaction), .bubble.is-sent:has(> .tut-reaction) { margin-bottom: 18px; }
.is-reactable.is-left .tut-reaction, .bubble.is-reactable .tut-reaction { right: auto; left: 46px; }
@keyframes tut-breathe { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--stamp) 35%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--stamp) 0%, transparent); } }
.tut-coach { display: flex; align-items: center; gap: 8px; width: fit-content; margin: 2px 0 6px 6px; padding: 7px 12px; border-radius: 999px; background: var(--near-soft); color: var(--near); font-weight: 700; font-size: .9rem; animation: cover-pop .35s var(--ease) both; }
.tut-coach::before { content: ""; width: 0; height: 0; border: 6px solid transparent; border-bottom-color: var(--near-soft); position: relative; top: -16px; left: 10px; margin-right: -12px; }
.tut-coach.is-done { background: transparent; color: var(--muted); font-weight: 600; }
.tut-coach.is-done::before { display: none; }
.tut-reaction { position: absolute; right: 10px; bottom: -14px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 2px; border-radius: 999px; background: var(--surface); box-shadow: 0 4px 12px rgb(18 28 48 / .18); animation: tut-heart .6s var(--ease) both; }
.tut-row.is-left .tut-reaction { right: auto; left: 46px; }
.tut-reaction .avatar { width: 22px; height: 22px; font-size: .6rem; border-width: 1.5px; }
.emo { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; line-height: 1; }
.tut-reaction .emo { font-size: 16px; }
.tut-picker { position: absolute; left: 4px; top: -56px; z-index: 3; display: flex; flex-wrap: wrap; gap: 0; width: max-content; max-width: calc(100vw - 40px); padding: 5px 6px; border-radius: 28px; background: var(--surface); box-shadow: 0 10px 28px rgb(18 28 48 / .22); animation: cover-pop .28s var(--ease) both; }
.tut-pick { display: grid; place-items: center; width: 38px; height: 40px; border: 0; border-radius: 50%; background: none; transition: transform 160ms var(--ease), background 160ms var(--ease); }
.tut-pick .emo { font-size: 25px; }
.tut-pick:hover, .tut-pick:focus-visible { background: var(--surface-2); transform: translateY(-3px) scale(1.15); }
.tut-row.is-hold { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* A long press on a message does not select its words or open the copy menu (phone test 9 Oct). */
.voice-message, .voice-wave, .bubble, .message-play { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tut-coach strong { text-transform: none; }
@keyframes tut-heart { 0% { opacity: 0; transform: scale(.3) translateY(8px); } 60% { opacity: 1; transform: scale(1.25); } 100% { transform: scale(1); } }
.tut-row { cursor: pointer; }
.tut-row.is-coach { animation: tut-breathe 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tut-row.is-coach, .tut-reaction, .tut-coach { animation: none; } }

/* ---------- friendzone: in-app social feed (draft, user 9 Oct; src/friendzone.js) ---------- */
.avatar-xs { width: 22px; height: 22px; font-size: .6rem; border-width: 1.5px; }
.fz { padding-bottom: 6rem; }
.fz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fz-mark { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 10vw, 42px); letter-spacing: -.045em; line-height: 1; color: var(--text); }
.fz-zone { color: var(--primary); }
.fz-friends { display: flex; order: 3; flex-basis: 100%; padding-top: 4px; }
.fz-friends .avatar { box-shadow: 0 0 0 2px var(--bg); }
.fz-friends .avatar + .avatar { margin-left: -6px; }
.fz-feed { display: grid; margin-top: .5rem; }
.fz-post { display: grid; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.fz-post:last-child { border-bottom: 0; }
.fz-head { display: flex; align-items: center; gap: 10px; }
.fz-head strong { font-size: .95rem; }
.fz-head time { color: var(--muted); font-size: .8rem; }
.fz-head time::before { content: "·"; margin-right: 6px; }
.fz-line { cursor: pointer; }
.fz-tr { display: block; color: var(--muted); font-weight: 400; font-size: .88rem; animation: live-in .25s var(--ease) both; }
.fz-caption { margin: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.fz-caption small { display: block; margin-top: 2px; font-family: var(--font); font-size: .82rem; font-weight: 500; color: var(--muted); }
.fz-words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fz-word { display: grid; gap: 4px; justify-items: center; text-align: center; font-size: .9rem; font-weight: 600; }
.fz-word .media { border-radius: 14px; background: var(--surface-2); }
.fz-word.is-text { align-content: center; min-height: 64px; border-radius: 14px; background: var(--surface-2); padding: 8px; }
.fz-photo { margin: 0; border-radius: 18px; overflow: hidden; background: var(--surface-2); }
.fz-photo img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.fz-photo .media-md { width: 100%; height: 180px; }
.fz-photo .media-md img { object-fit: contain; max-height: 160px; }
.fz-foot { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.fz-heart { display: grid; place-items: center; width: 36px; height: 36px; margin-left: -6px; border: 0; border-radius: 50%; background: none; color: var(--text); }
.fz-heart .icon { width: 24px; height: 24px; }
.fz-heart.is-on { color: #e0465a; }
.fz-heart.is-on .icon svg { fill: currentColor; animation: tut-heart .45s var(--ease) both; }
.fz-likes { color: var(--muted); font-size: .85rem; }
.fz-comments { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fz-comments li { display: flex; gap: 8px; align-items: flex-start; }
.fz-comments p { margin: 0; font-size: .92rem; line-height: 1.35; }
.fz-comments strong { margin-right: 2px; }
.fz-empty { display: grid; justify-items: center; gap: 10px; margin-top: 18dvh; text-align: center; color: var(--muted); }
.fz-empty .icon { width: 36px; height: 36px; }
.fz-empty p { max-width: 28ch; margin: 0; }
/* Until the mic is used once (user, 9 Oct): it breathes, and "Nasıl çalışır?" opens a short sheet. */
.btn-mic.is-invite { animation: mic-invite 1.8s ease-in-out infinite; }
.mic-info { display: inline-flex; align-items: center; gap: 6px; margin: 6px auto 0; padding: 6px 10px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 .85rem/1.2 var(--font); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.mic-info .icon { width: 16px; height: 16px; }
.mic-row:has(.mic-info) { flex-direction: column; align-items: center; }
.mic-dialog { max-width: min(420px, 92vw); text-align: left; }
.mic-dialog h3 { margin: .4rem 0 .6rem; }
.mic-dialog p { margin: 0 0 .7rem; line-height: 1.45; }
.mic-dialog-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); }
.mic-dialog-icon .icon { width: 22px; height: 22px; }
@keyframes mic-invite { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 35%, transparent); } 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--primary) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .btn-mic.is-invite { animation: none; } }

/* ---------- Phrase of the day and culture note (content/extras.json, user 9 Oct) ---------- */
.meet-saying { position: relative; display: grid; gap: 16px; align-content: center; flex: 1; margin-block: auto; padding: 8px 0 24px; }
.meet-saying-mark { font-family: var(--font-display); font-size: 120px; line-height: .6; color: var(--primary); height: 48px; }
.meet-saying-text { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 13vw, 64px); line-height: 1.02; letter-spacing: -.03em; cursor: pointer; }
.meet-saying .tr-reveal { margin: 0; font-size: 1.15rem; color: var(--muted); }
.meet-saying-note { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: .9rem; }
.meet-saying-play { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }
.meet-saying-play .icon { width: 18px; height: 18px; color: var(--primary); }
.culture { display: grid; gap: 14px; padding-top: 8px; }
.culture-kicker { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-weight: 700; font-size: .9rem; }
.culture-kicker .icon { width: 20px; height: 20px; color: var(--primary); }
.culture-title { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 9vw, 40px); line-height: 1.05; letter-spacing: -.02em; }
.culture-term { margin: -4px 0 0; color: var(--accent-ink); font-weight: 700; font-size: 1rem; }
.culture-text { margin: 0; font-size: 1.15rem; line-height: 1.5; }
.culture-reply { display: grid; justify-items: end; margin-top: 4px; }
.culture-reply .choices { width: 100%; }
.culture.is-voice .culture-text { font-size: 1.3rem; font-weight: 600; cursor: pointer; }
.culture-art { margin: 0; border-radius: 20px; background: var(--surface-2); overflow: hidden; }
.culture-art .media-md { width: 100%; height: 200px; }
.culture-art .media-md img { object-fit: contain; }
.fz-kicker { margin: 0 0 -6px; color: var(--primary); font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.fz-note { margin: 0; font-size: 1rem; line-height: 1.45; }
.fz-note strong { display: block; color: var(--accent-ink); }

/* ---------- Map (phone test 9 Oct) ----------
   The rope is the concept: always the dashed rope. The road walked up to the current stop is a
   thick orange rope, the road ahead a thin pale one, so where you are is felt at a glance. A
   finished stop is filled green with its check. Coming back from a stop, it fills in and the rope
   to the next one is pulled (main.js takeJustDone). */
.journey-route .route-walked { stroke: var(--primary); stroke-opacity: 1; stroke-width: 3; stroke-dasharray: 5 6; }
.journey-route .route-ahead { stroke: var(--line); stroke-opacity: 1; stroke-width: 1.8; stroke-dasharray: 4 7; }
.stop.is-done .stop-dot { color: var(--bg); background: var(--ok); border-color: var(--ok); }
.unit-group.is-complete > summary .unit-code { background: var(--ok); color: var(--bg); border-color: var(--ok); }
.unit-group.is-current-unit > summary .unit-code { background: var(--surface); color: var(--text); border-color: var(--text); }
.stop-status { color: var(--primary); font-weight: 600; }
.stop.is-just-done .stop-dot { animation: done-pop .6s var(--ease) both; }
@keyframes done-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: none; } }
.stop.is-just-next .route-in.route-walked { animation: rope-pull 1.1s var(--ease) .4s both; }
.stop.is-just-next .stop-dot { animation: next-arrive .5s var(--ease) 1.2s both; }
@keyframes rope-pull { from { stroke-dashoffset: 33; opacity: .35; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes next-arrive { 0% { transform: scale(.85); } 70% { transform: scale(1.06); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .stop.is-just-done .stop-dot, .stop.is-just-next .stop-dot { animation: none; } .stop.is-just-next .route-in.route-walked { animation: none; } }
.app-tab[aria-current="page"] { color: var(--primary); }
.phrase-end { display: grid; gap: 10px; min-height: 60svh; align-content: center; }
.phrase-end .culture-kicker .icon { color: var(--primary); }

/* Stop summary, option C (user, 10 Oct): what was learned waits behind one coloured strip with
   small pictures and the count; a tap opens the cards in place, one by one. */
.learned-reveal { display: flex; align-items: center; gap: .8rem; width: 100%; margin: 1.1rem 0 0; padding: .85rem 1rem; border: 0; border-radius: 20px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.learned-reveal > .icon { width: 28px; height: 28px; color: var(--primary); flex: none; }
.reveal-thumbs { display: flex; flex: none; }
.reveal-thumbs img { width: 44px; height: 44px; object-fit: contain; border-radius: 50%; background: var(--surface); border: 2px solid color-mix(in srgb, var(--primary) 10%, var(--surface)); margin-left: -12px; }
.reveal-thumbs img:first-child { margin-left: 0; }
.reveal-text { display: grid; min-width: 0; white-space: nowrap; }
.reveal-text small { color: var(--muted); font-size: .85rem; }
.reveal-go { margin-left: auto; padding-left: .25rem; font-weight: 700; color: var(--primary); }
.learned-reveal[aria-expanded="true"] { border-radius: 20px 20px 8px 8px; }
/* Open, the pictures are below: the strip is only the heading (user, 10 Oct). */
.learned-reveal[aria-expanded="true"] .reveal-thumbs { display: none; }
.learned-reveal + .learned { margin-top: .6rem; }
.summary .fix-sum { align-items: center; padding: .75rem 1rem; }
.summary .fix-sum strong { font-weight: 600; }
@media (max-width: 340px) { .reveal-thumbs img:nth-child(n+3) { display: none; } }

/* Admin panel (src/admin.js, user 10 Oct): the cast's sheets on the phone. Every slot is the same
   3:2 white frame so sheets of one kind line up across the cast; a missing sheet is a dashed frame. */
.onb-admin { margin-top: .35rem; }
.app-updated a { color: inherit; }
.adm { display: grid; gap: 1rem; padding-bottom: calc(2rem + var(--safe-bottom)); }
.adm-top { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: .5rem; }
.adm-top h1 { margin: 0; font-size: 1.35rem; text-align: center; }
.adm-back { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--text); }
.adm-back .icon { width: 22px; height: 22px; }
.adm-exit { font-size: .85rem; color: var(--muted); }
.adm-gate { display: grid; gap: .6rem; max-width: 360px; margin: 1.5rem auto 0; width: 100%; }
.adm-gate label { font-weight: 600; }
.adm-gate input { font: inherit; font-size: 1rem; padding: .8rem 1rem; border-radius: var(--radius-s); border: 1.5px solid var(--line); background: var(--surface); color: var(--text); }
.adm-note { margin: 0; color: var(--muted); font-size: .88rem; }
.adm-tabs { display: flex; gap: .4rem; padding: .25rem; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); }
.adm-tabs a { flex: 1; text-align: center; padding: .55rem .5rem; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: .92rem; text-decoration: none; }
.adm-tabs a[aria-current="page"] { background: var(--learner); color: var(--learner-ink); }
.adm-cast { display: grid; gap: .5rem; }
.adm-person { display: grid; grid-template-columns: 52px 1fr auto 18px; align-items: center; gap: .75rem; padding: .6rem .8rem; border-radius: var(--radius-s); background: var(--surface); border: 1.5px solid var(--line); color: var(--text); text-decoration: none; }
.adm-person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.adm-person-text { display: grid; min-width: 0; }
.adm-person small { color: var(--muted); }
.adm-person > .icon { width: 18px; height: 18px; color: var(--muted); }
.adm-dots { display: grid; grid-template-columns: repeat(5, 8px); gap: 3px; }
.adm-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.adm-hero { display: grid; grid-template-columns: 84px 1fr; gap: 1rem; align-items: center; }
.adm-hero img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.adm-hero h2 { margin: 0; font-family: var(--font-display); font-size: 1.7rem; }
.adm-hero p { margin: .1rem 0 0; }
.adm-swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.adm-swatches span { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.adm-sheets { display: grid; gap: 1.1rem; }
.adm-sheet { display: grid; gap: .45rem; }
.adm-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.adm-sheet-head h3 { margin: 0; font-size: 1rem; }
.adm-who { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--text); text-decoration: none; }
.adm-who img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.adm-frame { display: block; width: 100%; aspect-ratio: 3 / 2; padding: 0; border: 1.5px solid var(--line); border-radius: var(--radius-s); background: #fff; overflow: hidden; cursor: zoom-in; }
.adm-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.adm-frame.is-empty { display: grid; place-items: center; border-style: dashed; background: transparent; color: var(--muted); font-weight: 600; cursor: default; }
.adm-reason { margin: 0; padding: .5rem .75rem; border-radius: 10px; background: var(--bad-soft); color: var(--bad); font-size: .82rem; }
.adm-badge { font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; background: var(--line); color: var(--text); white-space: nowrap; }
.adm-badge.is-ok, .adm-dots .is-ok { background: var(--ok-soft); color: var(--ok); }
.adm-dots .is-ok { background: var(--ok); }
.adm-badge.is-opus, .adm-dots .is-opus { background: var(--accent-soft); color: var(--accent-ink); }
.adm-dots .is-opus { background: var(--accent); }
.adm-dots .is-self, .adm-dots .is-draft { background: var(--muted); }
.adm-badge.is-bad { background: var(--bad-soft); color: var(--bad); }
.adm-dots .is-bad { background: var(--bad); }
.adm-badge.is-missing { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.adm-sub { margin: .5rem 0 0; font-size: 1.1rem; }
.adm-looks { display: grid; gap: .75rem; }
.adm-look { border: 1.5px solid var(--line); border-radius: var(--radius-s); background: var(--surface); overflow: hidden; }
.adm-look.is-missing { border-style: dashed; padding: .6rem .9rem; color: var(--muted); }
.adm-strip { display: flex; height: 26px; }
.adm-strip span { flex: 1; }
.adm-look header { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem 0; }
.adm-look header b { font-family: var(--font-display); font-size: 1.1rem; }
.adm-look header span:not(.adm-badge) { flex: 1; color: var(--primary); font-weight: 600; font-size: .85rem; }
.adm-look p { margin: .35rem .9rem 0; font-size: .88rem; }
.adm-look ul { list-style: none; margin: .6rem .9rem .8rem; padding: .5rem 0 0; border-top: 1px dashed var(--line); display: grid; gap: .25rem; font-size: .82rem; }
.adm-look li { display: grid; grid-template-columns: 14px 1fr auto; gap: .5rem; align-items: center; }
.adm-look li i { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.adm-look li em { font-style: normal; color: var(--muted); }
.adm-chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.adm-chips a { flex: none; padding: .45rem .8rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text); font-size: .85rem; font-weight: 600; text-decoration: none; }
.adm-chips a[aria-current="page"] { background: var(--learner); border-color: var(--learner); color: var(--learner-ink); }
.adm-pager { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.adm-pager .btn { justify-content: center; }
.adm-zoom { position: fixed; inset: 0; z-index: 100; background: rgba(10, 14, 20, .92); display: grid; place-items: center; overflow: auto; touch-action: pinch-zoom; padding: calc(12px + var(--safe-top)) 12px calc(12px + var(--safe-bottom)); }
.adm-zoom img { max-width: 100%; max-height: 100%; background: #fff; border-radius: 8px; }
.adm-zoom-close { position: fixed; top: calc(12px + var(--safe-top)); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; display: grid; place-items: center; }
.adm-tabs.is-scroll { overflow-x: auto; scrollbar-width: none; }
.adm-tabs.is-scroll a { flex: none; padding-inline: .9rem; }
.adm-person.is-unit { grid-template-columns: 88px 1fr 18px; }
.adm-person.is-unit img { width: 88px; height: 44px; border-radius: 8px; object-fit: cover; }
.adm-person.is-npc { grid-template-columns: 52px 1fr auto; }
.adm-thumb-empty { display: block; width: 52px; height: 44px; border-radius: 8px; border: 1.5px dashed var(--line); }
.adm-unit-links { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.adm-unit-links a { font-size: .75rem; padding: .1rem .45rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); text-decoration: none; font-weight: 600; }
.adm-unit-links em { font-size: .75rem; color: var(--muted); }
.adm-unit-head h2 { margin: .1rem 0; font-family: var(--font-display); font-size: 1.5rem; }
.adm-unit-head p { margin: 0; }
.adm-frame.is-wide { aspect-ratio: 2 / 1; }
.adm-frame.is-poster { aspect-ratio: 3 / 4; max-width: 70%; }
.adm-frame.is-square { aspect-ratio: 1; }
.adm-frame.is-square.is-empty { padding: .5rem; text-align: center; font-weight: 400; }
.adm-frame.is-square.is-empty small { font-size: .68rem; line-height: 1.3; }
.adm-slot { margin: 0; font-size: .75rem; color: var(--muted); }
.adm-slot code, .adm-word code { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); }
.adm-cat h3 { margin: .4rem 0 .5rem; font-size: .95rem; color: var(--muted); }
.adm-words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.adm-word { margin: 0; display: grid; gap: .25rem; align-content: start; min-width: 0; }
.adm-word figcaption { display: grid; gap: .05rem; font-size: .78rem; overflow-wrap: anywhere; }
.adm-word figcaption span:not(.adm-badge) { color: var(--muted); }
.adm-word .adm-badge { justify-self: start; font-size: .65rem; white-space: normal; }
@media (max-width: 340px) { .adm-words { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm-idrefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.adm-idrefs figure { margin: 0; display: grid; gap: .25rem; }
.adm-idrefs figcaption { font-size: .8rem; color: var(--muted); }
.adm-frame.is-redo { border-color: var(--bad); color: var(--bad); }
.adm-npc-img { padding: 0; border: 0; background: none; }
.adm-npc-img img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; }
.adm-bust { display: flex; align-items: center; gap: .35rem; padding: .2rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: .7rem; }
.adm-bust img { width: 34px; height: 34px; object-fit: contain; background: #fff; border-radius: 6px; }
.adm-filter { display: flex; gap: .2rem; padding: .25rem; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); }
.adm-filter button { flex: 1 1 auto; white-space: nowrap; font: inherit; font-size: .76rem; font-weight: 600; padding: .45rem .35rem; border: 0; border-radius: 10px; background: transparent; color: var(--muted); }
.adm-filter button[aria-pressed="true"] { background: var(--learner); color: var(--learner-ink); }
.adm-flag { margin: 0; padding: .4rem .55rem; border-radius: 9px; font-size: .75rem; line-height: 1.35; background: var(--near-soft); color: var(--near); }
.adm-flag.is-fix { background: var(--bad-soft); color: var(--bad); }
.adm-flag b { font-weight: 700; }
.adm-flag-count { justify-self: start; margin-top: .2rem; font-size: .72rem; font-weight: 700; color: var(--bad); }
.adm-notes { display: grid; gap: .6rem; }
.adm-note-row { display: grid; gap: .3rem; padding: .6rem .7rem; border-radius: var(--radius-s); background: var(--surface); border: 1.5px solid var(--line); color: var(--text); text-decoration: none; }
.adm-note-row code { font-family: var(--font-mono); font-size: .8rem; font-weight: 600; }
/* Admin status page: what is approved, what is open. */
.adm-status { display: grid; gap: 1.5rem; }
.adm-status-block { display: grid; gap: .5rem; }
.adm-status-block h2 { margin: 0; font-size: 1.15rem; }
.adm-status-block h3 { margin: .25rem 0 0; font-size: .95rem; color: var(--muted); }
.adm-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem .75rem; border-radius: 10px; background: var(--surface); border: 1.5px solid var(--line); font-size: .9rem; }
.adm-stat b { text-align: right; min-width: 0; font-variant-numeric: tabular-nums; }
.adm-stat.is-ok { background: var(--ok-soft); border-color: transparent; }
.adm-stat.is-ok b { color: var(--ok); }
.adm-stat.is-bad { background: var(--bad-soft); border-color: transparent; }
.adm-stat.is-bad b { color: var(--bad); }
.adm-stat.is-opus { background: var(--accent-soft); border-color: transparent; }
.adm-stat.is-opus b { color: var(--accent-ink); }
.adm-stat.is-missing { border-style: dashed; }
.adm-status-words { display: grid; gap: .4rem; }
.adm-status-cast { display: grid; gap: .5rem; }
.adm-status-person { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: .7rem; padding: .5rem .7rem; border-radius: var(--radius-s); background: var(--surface); border: 1.5px solid var(--line); color: var(--text); text-decoration: none; }
.adm-status-person img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.adm-status-person span { display: grid; gap: .1rem; min-width: 0; }
.adm-status-person small { color: var(--muted); font-size: .75rem; }
.adm-decisions { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.adm-decisions li { padding: .5rem .7rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 10px 10px 0; font-size: .85rem; line-height: 1.45; }
.adm-decisions small { color: var(--muted); font-variant-numeric: tabular-nums; }
.adm-status-link { justify-self: start; font-size: .9rem; }

/* ---------- Design switch (user, 11 Oct; src/design.js) ----------
   Asked once per session before the first screen: the live design or the new one (sandbox/design/). */
.design-pick { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; }
.design-pick-kicker { margin: 0; color: var(--stamp); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; }
.design-pick h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 8vw, 2.4rem); line-height: 1.1; }
.design-pick .lead { margin: 0.25rem 0 1rem; font-size: 0.98rem; }
.design-options { display: grid; gap: 0.75rem; }
.design-option { display: grid; gap: 0.25rem; justify-items: start; text-align: left; min-height: 88px; padding: 1rem 1.1rem; border: 1.5px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); transition: transform 140ms var(--ease), border-color 160ms ease; }
.design-option strong { font-size: 1.1rem; }
.design-option span { color: var(--muted); font-size: 0.92rem; line-height: 1.4; }
.design-option small { margin-top: 0.2rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--primary-soft); color: var(--stamp); font-weight: 600; font-size: 0.75rem; }
.design-option.is-last { border-color: var(--primary); }
.design-option:active { transform: scale(0.98); }

/* Sıfırla, visible (user, 11 Oct): a small outlined pill with its icon, on the home card and the stop entry. */
.btn.entry-reset { min-height: 44px; padding: 0 12px; gap: 6px; border: 1.5px solid color-mix(in srgb, var(--primary) 45%, var(--line)); border-radius: 999px; background: var(--surface); color: var(--stamp); font-weight: 600; font-size: .8rem; }
.btn.entry-reset .icon { width: 15px; height: 15px; }
.now-meta .btn.entry-reset-compact { min-height: 44px; margin: 4px 8px 0 auto; font-size: .78rem; }

/* Word screen at the end of a block (src/wordcount.js) */
.words-screen { display: grid; gap: 12px; padding-top: 8px; }
.words-count { margin: 0; font-family: var(--font-display); line-height: 1; }
.words-count strong { font-size: clamp(3.6rem, 18vw, 5rem); color: var(--accent, var(--text)); }
.words-count span { font-size: 1.4rem; color: var(--muted); }
.words-lead { margin: 0; font-size: 1.1rem; line-height: 1.45; }
.words-ask { margin: 4px 0 0; color: var(--muted); }
.words-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.words-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.words-chip .words-en { font-weight: 600; }
.words-chip .words-tr { font-size: .8rem; color: var(--muted); }
.words-chip.is-known { border-color: var(--right); background: var(--right-soft); }
.words-status { margin: 0; font-size: .92rem; color: var(--muted); }

/* Several things in one picture slot (media.js imageSet) */
.picture-set { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; }
.picture-set > * { flex: 1 1 0; min-width: 0; max-width: 50%; }

/* Word bubbles (src/pop.js) */
.pop-field { position: relative; height: min(46vh, 330px); margin: 8px 0 4px; border-radius: 20px; background: var(--surface-2); overflow: hidden; }
.pop-bubble { position: absolute; transform: translate(-50%, -50%); min-width: 76px; padding: 12px 16px; border: 0; border-radius: 999px; background: var(--surface); color: var(--text); font: 600 1.05rem/1 inherit; box-shadow: 0 6px 16px rgb(18 28 48 / .12), inset 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); cursor: pointer; animation: pop-float var(--t, 3.6s) ease-in-out var(--d, 0s) infinite alternate; }
.pop-field.is-still .pop-bubble { animation: none; }
.pop-bubble.is-popped { animation: pop-burst .32s ease-out forwards; pointer-events: none; }
.pop-bubble.is-wrong { animation: pop-wobble .4s ease-in-out, pop-float var(--t, 3.6s) ease-in-out .4s infinite alternate; box-shadow: 0 6px 16px rgb(18 28 48 / .12), inset 0 0 0 2px var(--bad); }
.pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pop-status { margin: 0; color: var(--muted); font-size: .92rem; }
@keyframes pop-float { from { margin-top: -6px; } to { margin-top: 6px; } }
@keyframes pop-burst { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 60% { transform: translate(-50%, -50%) scale(1.25); opacity: .6; } 100% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } }
@keyframes pop-wobble { 0%, 100% { margin-left: 0; } 25% { margin-left: -6px; } 75% { margin-left: 6px; } }
@media (prefers-reduced-motion: reduce) { .pop-bubble, .pop-bubble.is-wrong { animation: none; } .pop-bubble.is-popped { animation: none; opacity: 0; } }

/* Match or not (src/verdict.js): the sort deck with a picture and its sentence */
.verdict-card .media-md { flex: 1; min-height: 0; width: 100%; max-height: 260px; aspect-ratio: auto; margin: 0; }
.verdict-text { margin: 0; font: 600 clamp(1.15rem, 5vw, 1.4rem)/1.3 var(--font-display); text-align: center; }
.sort-deck-hint { margin: 0 0 6px; text-align: center; color: var(--muted); font-size: .92rem; }