/* =====================================================================
   NATO English: Military Scenarios -- one stylesheet for every page
   Order: 1 tokens > 2 base > 3 frame > 4 slide layout > 5 components > 6 pages > 7 utilities
   Breakpoints (min-width): md 640px, lg 1024px, xl 1440px. Short screens: max-height 500px.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --bg: #EFF4FA;
  --surface: #FFFFFF;
  --surface2: #E6EEF6;
  --border: #C3D3E5;
  --border-strong: #74899F;
  --fg: #0D1F35;
  --fg-muted: #4A6685;
  --accent: #1557B0;
  --accent-hover: #0F4590;
  --accent-lt: #2A7DE1;
  --gold: #845F17;
  --gold-hover: #6B4C10;
  --success: #176A43;
  --danger: #B22222;
  --navy: #1557B0;
  --star-s: #1557B0;
  --star-t: #6B4DB0;
  --star-a: #845F17;
  --star-r: #1E7A4F;
  --tint-accent: rgba(21, 87, 176, 0.08);
  --tint-success: rgba(23, 106, 67, 0.10);
  --tint-danger: rgba(178, 34, 34, 0.07);
  --tint-gold: rgba(132, 95, 23, 0.10);

  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* fluid type: 360px wide -> 1600px wide */
  --fs-h1: clamp(2.5rem, 1.92rem + 2.58vw, 4.5rem);
  --fs-h2: clamp(1.75rem, 1.46rem + 1.29vw, 2.75rem);
  --fs-h3: clamp(1.0625rem, 0.99rem + 0.32vw, 1.3125rem);
  --fs-body: clamp(1rem, 0.946rem + 0.24vw, 1.1875rem);
  --fs-small: clamp(0.9375rem, 0.9rem + 0.16vw, 1.0625rem);
  --fs-label: clamp(0.8125rem, 0.794rem + 0.08vw, 0.875rem);
  --fs-btn: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --lh: 1.6;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --gutter: clamp(16px, 4vw, 48px);
  --flow: clamp(1rem, 0.78rem + 0.97vw, 1.75rem);
  --measure: 62ch;
  --content-max: 760px;
  --pad-card: clamp(16px, 0.9rem + 0.8vw, 24px);

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(13, 31, 53, 0.05), 0 4px 14px rgba(13, 31, 53, 0.06);
  color-scheme: light;
}
@media (min-width: 1024px) { :root { --content-max: 880px; } }
@media (min-width: 1440px) { :root { --content-max: 960px; } }
/* very large screens: scale the whole page up a little so the column does not look lost */
@media (min-width: 1920px) { html { font-size: 106.25%; } :root { --content-max: 1000px; } }
@media (min-width: 2400px) { html { font-size: 112.5%; } :root { --content-max: 1080px; } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--fg); line-height: 1.12; font-weight: 700; }
ul, ol { padding-left: 1.25em; }
li + li { margin-top: 0.35em; }
img, svg { max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { touch-action: manipulation; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--accent-lt); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--sp-3); top: -60px; z-index: 100;
  background: var(--fg); color: #fff; padding: 10px 16px; border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--sp-3); color: #fff; }

/* ---------- 3. Frame: top bar, stage, bottom bar ---------- */
.app {
  height: 100%;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.topbar { position: relative; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--border); }
.progress { height: 4px; background: var(--border); }
.progress-fill { height: 100%; width: 0; background: var(--gold); transition: width 0.3s ease; }
.topbar-row, .pager-row {
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.topbar-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; }
.home-link, .brand {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--accent); text-decoration: none; white-space: nowrap;
}
.home-link:hover, .brand:hover { color: var(--accent-hover); text-decoration: underline; }
.dots { display: none; flex: 1 1 auto; min-width: 0; justify-content: center; gap: 6px; }
.dot {
  width: 32px; height: 44px; padding: 0; border: 0; background: none; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.dot::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: #6A82A0; transition: width 0.2s, background 0.2s; }
.dot.is-seen::before { background: var(--fg-muted); }
.dot.is-current::before { width: 20px; background: var(--gold); }
.dot:hover::before { background: var(--accent); }
.dot.is-current:hover::before { background: var(--gold-hover); }
.dot:focus-visible { outline: 2px solid var(--accent-lt); outline-offset: 0; }
.counter {
  margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--fg-muted);
}
/* The dots are a row of small controls; rule 8 (the owner, 31 Oct: every row) keeps them off touch screens, where a thumb lands on a neighbour. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .dots { display: flex; }
  .dots + .counter { margin-left: 0; }
}
.topbar-row #cb-btn.cb-inbar { margin-left: 0; flex-shrink: 0; }

.stage {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding: var(--sp-5);
}
.stage:focus { outline: none; }
.slide h1[tabindex="-1"]:focus, .slide h2[tabindex="-1"]:focus { outline: none; }

.pager { position: relative; z-index: 20; background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0px); }
.pager-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: 10px; padding-bottom: 10px; }
.pager-row #btnNext { margin-left: auto; }
body.on-cover .pager { display: none; }
body.is-typing .pager { display: none; }

/* ---------- 4. Slide layout ---------- */
.slide {
  display: none;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: clamp(24px, 4vh, 56px) var(--gutter) clamp(40px, 7vh, 80px);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh);
}
.slide.active { display: block; animation: slideIn 0.2s ease; }
@keyframes slideIn { from { opacity: 0; } to { opacity: 1; } }
.slide > * + * { margin-top: var(--flow); }
.slide > .slide-eyebrow + *, .slide > .star-chip + *, .slide > .cover-eyebrow + * { margin-top: var(--sp-2); }
.slide > .slide-title + .slide-intro, .slide > .slide-title + .slide-body,
.slide > .slide-title + .level-chip, .slide > .level-chip + .slide-intro,
.slide > .level-chip + .slide-body { margin-top: var(--sp-3); }
/* Running text stops at the measure wherever it lives, not only in p and li; cards and grids keep the column. */
.slide:not(#slide-0) :where(.slide-body, .note, .a-step-body, .tl-body, .lang-content, .listen-instr, .listen-tx, .listen-q-text,
  .cq-text, .cq-prompt, .cq-opt, .cq-fb, .cq-explain, .cq-tryagain, .try-reason, .exemplar-note, .feedback-box, .pri-fb, .pri-hint,
  .en-note, .obj-t, .star-note, .about-card-body, .transfer-list, .sc-desc, .ws-hint, .vocab-def, .phrase-item, .so-what, .so-card-body,
  .outcome-text, .rc-desc, .vocab-grid > div, .checklist > div, .sentence-starters, .reveal-note, .task-box p, .card > p, .card-muted > p, .listen-q-item, .notice-q, .notice-list, .notice-why, .recall-q, .recall-list) { max-width: var(--measure); }

.slide-eyebrow {
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted);
}
.slide-title { font-size: var(--fs-h2); font-weight: 800; letter-spacing: 0.005em; }
.slide-intro, .slide-body { color: var(--fg-muted); max-width: var(--measure); }
.slide-body p + p { margin-top: 0.75em; }
.slide p, .slide li { max-width: var(--measure); }
.slide b, .slide strong { color: var(--fg); }

/* Covers: centred start pages */
#slide-0.active { min-height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
#slide-0 > * { max-width: min(100%, 680px); }
#slide-0 > * + * { margin-top: var(--sp-4); }
#slide-0 > .cover-title { margin-top: var(--sp-3); }
#slide-0 > .vocab-box, #slide-0 > .course-disclaimer, #slide-0 > .cover-feature { text-align: left; }

/* ---------- 5. Components ---------- */

/* 5.1 Buttons */
.btn, .gen-btn, .cover-begin, .cover-start, .end-btn, .exemplar-btn, .listen-btn, .listen-chk,
.share-btn, .pri-retry, .cb-like-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px;
  border: 2px solid transparent; border-radius: var(--radius);
  font-family: var(--font-display); font-size: var(--fs-btn); font-weight: 700; letter-spacing: 0.04em; line-height: 1.1;
  text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
/* primary: moves the learner forward */
.btn-primary, .gen-btn, .cover-begin, .cover-start, .end-btn.prim {
  background: var(--gold); border-color: var(--gold); color: #fff;
}
.btn-primary:hover, .gen-btn:hover, .cover-begin:hover, .cover-start:hover, .end-btn.prim:hover {
  background: var(--gold-hover); border-color: var(--gold-hover); color: #fff;
}
/* secondary */
.btn-secondary, .end-btn, .exemplar-btn, .share-btn, .pri-retry, .gen-btn.btn-secondary, .listen-chk {
  background: var(--surface); border-color: var(--border-strong); color: var(--fg);
}
.btn-secondary:hover, .end-btn:hover, .exemplar-btn:hover, .share-btn:hover, .pri-retry:hover,
.gen-btn.btn-secondary:hover, .listen-chk:hover {
  background: var(--surface); border-color: var(--accent); color: var(--accent);
}
.listen-chk { border-color: var(--accent); color: var(--accent); }
/* play / audio actions */
.listen-btn { background: var(--accent); border-color: var(--accent); color: #fff; border-radius: var(--radius-pill); }
.listen-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
/* quiet text action */
.btn-link, .gen-btn.reveal-btn, .listen-show-tx, .cc-go {
  background: none; border: 0; padding: 0 2px; min-height: 44px;
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
  font-family: var(--font-display); font-size: var(--fs-btn); font-weight: 700; letter-spacing: 0.02em; cursor: pointer;
}
.btn-link:hover, .gen-btn.reveal-btn:hover, .listen-show-tx:hover, .cc-go:hover { background: none; color: var(--accent-hover); }
/* disabled: clearly unavailable, still readable */
.btn:disabled, .gen-btn:disabled, .end-btn:disabled, .exemplar-btn:disabled, .listen-btn:disabled,
.listen-chk:disabled, .share-btn:disabled, .cover-begin:disabled {
  background: var(--surface2); border-color: var(--border); border-style: dashed; color: var(--fg-muted); cursor: not-allowed;
}
.btn-lg, .cover-begin, .cover-start { padding: 12px 28px; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); }
.btn-row, .ws-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5); }

/* 5.2 Chips and labels */
.chip, .cover-meta-chip, .level-chip, .sc-tag, .level-badge, .phrase-tag, .sc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.04em; line-height: 1.5;
  color: var(--fg); white-space: nowrap;
}
.level-chip { color: var(--fg-muted); border-color: var(--border); background: transparent; }
.box-label, .section-label, .vocab-box-hdr, .lang-box-hdr, .listen-hdr, .cq-num, .inc-hdr, .cover-kicker,
.cover-eyebrow, .sc-num, .exemplar-note-label {
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold);
}
.section-label { color: var(--fg); font-size: var(--fs-small); letter-spacing: 0.06em; }
.note { font-size: var(--fs-small); color: var(--fg-muted); max-width: var(--measure); }
.form-error { font-size: var(--fs-small); color: var(--danger); }
.part-label { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.part-s, .s-col, .slide .part-s, .slide .s-col { color: var(--star-s); }
.part-t, .t-col, .slide .part-t, .slide .t-col { color: var(--star-t); }
.part-a, .a-col, .slide .part-a, .slide .a-col { color: var(--star-a); }
.part-r, .r-col, .slide .part-r, .slide .r-col { color: var(--star-r); }
.muted, .slide .muted { color: var(--fg-muted); }
.part-label { font-size: var(--fs-label); }

/* stacks: vertical rhythm inside wrappers */
.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.section-label { display: block; margin-bottom: var(--sp-3); }
.box-label { display: block; margin-bottom: var(--sp-2); }

/* 5.3 Cards and boxes */
.card, .so-card, .about-card, .outcome-card, .r-card, .incident-card, .comp-question, .listen-panel,
.ws-block, .t-field, .preview-card, .complete-card, .vocab-box, .obj-item, .star-card, .a-step,
.tl-content, .timeline .tl-body, .cover-feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.card, .so-card, .about-card, .outcome-card, .r-card, .incident-card, .comp-question, .listen-panel,
.ws-block, .t-field, .preview-card, .complete-card, .vocab-box, .star-card { padding: var(--pad-card); }
.card-muted { background: var(--surface2); border-color: var(--border); }
.callout, .lang-box, .star-note, .task-box, .feedback-box, .pri-fb {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--pad-card);
}
.callout-t { border-left-color: var(--star-t); }
.task-box { background: var(--tint-accent); }
.task-box p + p, .card > p + p { margin-top: 0.6em; }
.task-key { color: var(--accent); }

/* vocabulary */
.vocab-box-hdr { margin-bottom: var(--sp-3); }
.vocab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--sp-3) var(--sp-5); }
.vocab-grid > div, .vocab-def { font-size: var(--fs-small); line-height: 1.55; color: var(--fg); }
.vocab-grid > div b, .vocab-term { font-family: var(--font-display); font-size: 1.05em; font-weight: 700; color: var(--fg); }
.vocab-term + .vocab-def { margin-top: 2px; color: var(--fg-muted); }

/* language notes and phrases */
.lang-box-hdr { color: var(--accent); margin-bottom: var(--sp-2); }
.lang-content { font-size: var(--fs-small); line-height: 1.75; }
.lang-content i, .lang-box i { color: var(--accent); }
.phrase-list { display: grid; gap: var(--sp-3); }
.phrase-item { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-small); line-height: 1.55; }
.phrase-tag { flex-shrink: 0; font-size: 0.75rem; padding: 1px 8px; color: var(--fg-muted); }
.phrase-text { flex: 1; min-width: 0; color: var(--fg); }
.phrase-note { display: block; margin-top: 2px; color: var(--fg-muted); font-size: 0.92em; }
.en-note { margin-top: var(--sp-3); padding: 10px 12px; border-radius: var(--radius); background: var(--tint-accent); font-size: var(--fs-small); }
.en-note strong { color: var(--accent); }
.sentence-starters { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--fg-muted); }
.sentence-starters strong { color: var(--fg-muted); }
.sentence-starters span { color: var(--accent); }
.checklist { display: grid; gap: 6px; font-size: var(--fs-small); color: var(--fg-muted); }

/* 5.4 Framework and setup cards */
.star-overview, .so-grid, .star-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 640px) { .star-overview, .so-grid, .star-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.so-card { --part: var(--accent); }
.so-s, .star-card.s { --part: var(--star-s); }
.so-t, .star-card.t { --part: var(--star-t); }
.so-a, .star-card.a { --part: var(--star-a); }
.so-r, .star-card.r { --part: var(--star-r); }
.star-overview .so-card, .star-card { border-top: 4px solid var(--part); }
.so-ltr, .star-letter { font-family: var(--font-display); font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); font-weight: 800; line-height: 1; color: var(--part); }
.so-word, .star-word { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--part); margin-top: 4px; }
.so-what { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--fg); line-height: 1.35; margin-top: var(--sp-2); }
.so-card p, .star-desc { font-size: var(--fs-small); line-height: 1.55; margin-top: var(--sp-2); }
.so-later, .star-prompt { font-style: italic; color: var(--fg-muted); }
.so-card.so-locked { border-style: dashed; border-top-style: solid; }
.so-card.so-locked .so-ltr { opacity: 0.8; }
.so-card-hdr { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--sp-2); }
.so-card-body { font-size: var(--fs-small); line-height: 1.6; }
.star-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); padding: 3px 12px 3px 3px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--tint-accent); color: var(--part, var(--accent));
}
.star-chip .ltr { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--part, var(--accent)); color: #fff; letter-spacing: 0; }
.chip-s { --part: var(--star-s); } .chip-t { --part: var(--star-t); } .chip-a { --part: var(--star-a); } .chip-r { --part: var(--star-r); background: var(--tint-success); }
.chip-t { background: rgba(107, 77, 176, 0.09); } .chip-a { background: var(--tint-gold); }

/* objectives / setup list (scenario 1) */
.obj-list { display: grid; gap: var(--sp-3); }
.obj-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: 14px var(--pad-card); }
.obj-n { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; line-height: 1.2; min-width: 1.4rem; }
.obj-t { font-size: var(--fs-small); line-height: 1.6; }
.obj-item.obj-later { border-style: dashed; }

/* 5.5 Timelines */
.timeline, .tl-wrap { display: grid; gap: var(--sp-3); counter-reset: tl; }
.tl-item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; counter-increment: tl; }
.tl-dot {
  grid-column: 1; grid-row: 1; position: relative; z-index: 1;
  width: 32px; height: 32px; margin-top: 10px; border-radius: 50%;
  border: 2px solid var(--gold); background: var(--surface); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 800; line-height: 1;
}
.tl-wrap .tl-dot::before { content: counter(tl); }
.tl-dot.hi { background: var(--gold); color: #fff; }
.tl-item:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 42px; bottom: calc(-1 * var(--sp-3) - 10px); width: 2px; background: var(--border); }
.tl-spine { display: none; }
.timeline .tl-body, .tl-content { grid-column: 2; grid-row: 1; padding: 12px var(--sp-4); }
.tl-time { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; color: var(--gold); }
.tl-head, .timeline .tl-body h3 { font-size: var(--fs-h3); margin-top: 2px; }
.tl-wrap .tl-body, .timeline .tl-body p { font-size: var(--fs-small); line-height: 1.6; margin-top: 4px; }

/* incident report extract */
.incident-card { border-left: 4px solid var(--danger); }
.inc-hdr { color: var(--danger); margin-bottom: var(--sp-2); }
.incident-card p + p { margin-top: 0.75em; }

/* 5.6 Priority / ranking */
.priority-grid, .rank-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 640px) { .priority-grid, .rank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#porder.revealing .tl-item { animation: itemIn 0.3s ease both; }
#porder.revealing .tl-item:nth-child(2) { animation-delay: 0.12s; }
#porder.revealing .tl-item:nth-child(3) { animation-delay: 0.24s; }
#porder.revealing .tl-item:nth-child(4) { animation-delay: 0.36s; }
@keyframes itemIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pri-card {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding: 12px var(--sp-4);
  background: var(--surface); border: 2px solid var(--border-strong); border-radius: var(--radius-lg);
  font-family: var(--font-serif); font-size: var(--fs-small); line-height: 1.45; text-align: left;
  cursor: pointer; user-select: none; transition: border-color 0.15s, background-color 0.15s;
}
.priority-grid .pri-card { flex-direction: column; align-items: flex-start; gap: 4px; }
.pri-card h3 { font-size: var(--fs-h3); }
.pri-card p { color: var(--fg-muted); font-size: 0.95em; }
.pri-card:hover { border-color: var(--accent); }
.pri-card.selected { border-color: var(--accent); background: var(--tint-accent); }
.pri-card.correct-hi { border-color: var(--accent); background: var(--tint-accent); }
.pri-card.pri-same { border-color: var(--accent); }
.pri-hint { font-family: var(--font-display); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.02em; color: var(--accent); }
.rank-badge {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: #fff; font-family: var(--font-display); font-size: 1rem; font-weight: 800;
}
.rank-badge.empty { background: transparent; border: 2px dashed var(--border-strong); }
.pri-text { flex: 1; }
.pri-story { margin-left: auto; padding-left: var(--sp-3); white-space: nowrap; font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700; color: var(--fg-muted); }
.pri-same .pri-story { color: var(--accent); }
.pri-fb, .feedback-box { font-size: var(--fs-small); line-height: 1.6; }
.pri-fb:focus { outline: none; }
.rank-actions > * + * { margin-top: var(--sp-3); }
.rank-actions > .rank-clear { margin-top: var(--sp-5); }
.btn-link:disabled { color: var(--fg-muted); text-decoration: none; cursor: default; }
.rank-status { font-family: var(--font-body); font-size: var(--fs-label); color: var(--fg-muted); }
.pri-fb .pri-retry, .feedback-box .btn { margin-top: var(--sp-3); }
.feedback-box:empty { padding: 0; border: 0; background: none; }
.slide > .feedback-box:empty { margin-top: 0; }

/* 5.7 Accordion */
.action-steps { display: grid; gap: var(--sp-2); }
.slide > .a-step + .a-step, div:not(.action-steps) > .a-step + .a-step { margin-top: var(--sp-2); }
.a-step { overflow: hidden; }
.a-step-hdr { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: 10px var(--sp-4); cursor: pointer; }
.a-step-hdr::after { content: '\25BE'; margin-left: auto; padding-left: var(--sp-2); color: var(--fg-muted); font-size: 1rem; transition: transform 0.2s; }
.a-step-hdr:has(.step-chev)::after { content: none; }
.a-step.open .a-step-hdr::after, .a-step.open .step-chev { transform: rotate(180deg); }
.step-chev { margin-left: auto; width: 18px; height: 18px; flex-shrink: 0; color: var(--fg-muted); transition: transform 0.2s; }
.a-step-num {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--border);
  font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--fg);
}
.a-step.open .a-step-num, .a-step.visited .a-step-num { background: var(--gold); border-color: var(--gold); color: #fff; }
.a-step-title, .step-hdr-txt h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; color: var(--fg); line-height: 1.25; }
.step-ico { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.step-sub { font-family: var(--font-body); font-size: var(--fs-label); color: var(--fg-muted); }
.a-step-body { display: none; padding: 0 var(--sp-4) var(--sp-4); font-size: var(--fs-small); line-height: 1.65; }
.a-step.open .a-step-body { display: block; }
.a-step-body p + p, .a-step-body ul { margin-top: 0.6em; }
.a-step.open { border-color: var(--gold); }
.a-step-hdr:hover .a-step-title, .a-step-hdr:hover h3 { color: var(--accent); }
#step-counter { font-family: var(--font-display); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.03em; color: var(--fg-muted); }
#step-counter.is-done { color: var(--success); }
button.a-step-hdr { width: 100%; margin: 0; background: none; border: 0; border-radius: var(--radius-lg); text-align: left; font: inherit; color: inherit; }
button.a-step-hdr:focus-visible { outline: 3px solid var(--accent-lt); outline-offset: -3px; }
.step-hdr-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* 5.8 Listening */
.listen-hdr { color: var(--accent); }
.listen-instr { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--fg-muted); }
.listen-play-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-4); }
.listen-stat { font-family: var(--font-body); font-size: var(--fs-label); color: var(--fg-muted); }
.listen-tx { display: none; margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: var(--surface2); font-size: var(--fs-small); line-height: 1.65; }
.listen-tx.revealed { display: block; }
.listen-q-item { margin-top: var(--sp-5); }
.listen-q-text { font-weight: 600; margin-bottom: var(--sp-2); }
.listen-opt {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  min-height: 48px; margin-top: var(--sp-2); padding: 10px 44px 10px var(--sp-3);
  background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--radius);
  font-size: var(--fs-small); cursor: pointer; transition: border-color 0.15s, background-color 0.15s;
}
.listen-opt::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); }
.listen-opt:not(.lc-locked):hover { border-color: var(--accent); }
.listen-opt.lc-sel { border-color: var(--accent); background: var(--tint-accent); }
.listen-opt.lc-sel::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 5px, var(--surface) 6px); }
.listen-opt.lc-ok { border-color: var(--success); background: var(--tint-success); }
.listen-opt.lc-no { border-color: var(--danger); background: var(--tint-danger); }
.listen-opt.lc-ok::after, .listen-opt.lc-no::after { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-weight: 700; }
.listen-opt.lc-ok::after { content: '\2713'; color: var(--success); }
.listen-opt.lc-no::after { content: '\2715'; color: var(--danger); }
.listen-opt.lc-locked { cursor: default; }
a, button, [role="button"], [role="radio"], .pri-card, .cq-opt, .listen-opt { touch-action: manipulation; }
.cq-opt, .listen-opt { user-select: none; -webkit-touch-callout: none; }
.listen-retry { margin-top: var(--sp-3); }
/* 5.8b Noticing and recall (deeper practice, 31 Oct) */
.notice, .recall { margin-top: var(--flow); }
.notice-q, .recall-q { font-size: var(--fs-small); color: var(--fg); }
.notice-list { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.notice-item {
  display: block; width: 100%; min-height: 48px; padding: 10px 44px 10px var(--sp-3); text-align: left;
  background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--radius);
  font-family: var(--font-serif); font-size: var(--fs-small); line-height: 1.5; color: var(--fg); cursor: pointer; position: relative;
  transition: border-color 0.15s, background-color 0.15s;
}
.notice-item:not([aria-disabled="true"]):hover { border-color: var(--accent); }
.notice-item.is-on { border-color: var(--accent); background: var(--tint-accent); }
.notice-item.is-hit { border-color: var(--success); background: var(--tint-success); }
.notice-item.is-miss { border-color: var(--danger); background: var(--tint-danger); }
.notice-item.is-missed { border-color: var(--success); border-style: dashed; }
.notice-item.is-hit::after, .notice-item.is-miss::after, .notice-item.is-missed::after { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-weight: 700; }
.notice-item.is-hit::after, .notice-item.is-missed::after { content: '\2713'; color: var(--success); }
.notice-item.is-miss::after { content: '\2715'; color: var(--danger); }
.notice-item[aria-disabled="true"] { cursor: default; }
.notice .btn-row, .recall .btn-row { margin-top: var(--sp-4); }
.notice-res, .recall-res { margin-top: var(--sp-2); font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; color: var(--fg); }
.notice-res:empty, .recall-res:empty { display: none; }
.notice-why { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--fg-muted); }
.recall-list { margin: var(--sp-3) 0 0; padding-left: 1.4em; display: grid; gap: var(--sp-3); }
.recall-list li { font-size: var(--fs-small); line-height: 1.7; }
.recall-gap {
  font: inherit; font-family: var(--font-body); font-size: var(--fs-small); min-height: 36px; margin: 0 2px; padding: 2px 8px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--fg);
}
.recall-gap.ok { border-color: var(--success); background: var(--tint-success); }
.recall-gap.no { border-color: var(--danger); background: var(--tint-danger); }
.recall-gap.shown { border-color: var(--success); border-style: dashed; }
.recall-mark { display: inline-block; min-width: 1.1em; margin-right: 2px; font-weight: 800; font-family: var(--font-body); }
.recall-gap.ok + .recall-mark, .recall-gap.shown + .recall-mark { color: var(--success); }
.recall-gap.no + .recall-mark { color: var(--danger); }
.recall-gap:focus-visible { outline: 3px solid var(--accent-lt); outline-offset: 2px; }
.ws-note { font-family: var(--font-body); font-size: var(--fs-small); color: var(--fg-muted); }
/* 5.8c A fold for the class parts of the last slide (cold review, 31 Oct) */
.fold { border: 1.5px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); }
.fold > summary {
  list-style: none; display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: 10px var(--sp-4); cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; color: var(--fg);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: '\25BE'; margin-left: auto; padding-left: var(--sp-2); color: var(--fg-muted); font-size: 1rem; transition: transform 0.2s; }
.fold[open] > summary::after { transform: rotate(180deg); }
.fold > summary:hover { background: var(--surface2); }
.fold > summary:focus-visible { outline: 3px solid var(--accent-lt); outline-offset: -3px; }
.fold[open] > summary { border-bottom: 1px solid var(--border); }
.fold > :not(summary) { margin: var(--flow) var(--sp-4); }
.fold > :not(summary) + :not(summary) { margin-top: var(--flow); }
.listen-chk { margin-top: var(--sp-5); }
[id^="lres"] { display: block; margin-top: var(--sp-2); font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; color: var(--fg); }
.reveal-note { font-size: var(--fs-small); font-style: italic; color: var(--fg-muted); }
.rl-hidden { display: none !important; }

/* 5.9 Outcome and results */
.outcome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--sp-3); }
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 1024px) { .result-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.outcome-card { border-left: 4px solid var(--border-strong); }
.outcome-card.bl-s { border-left-color: var(--star-s); }
.outcome-card.bl-t { border-left-color: var(--star-t); }
.outcome-card.bl-a { border-left-color: var(--star-a); }
.outcome-card.bl-r { border-left-color: var(--star-r); }
.outcome-card.bl-success { border-left-color: var(--success); }
.outcome-label, .rc-lbl { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.outcome-text, .rc-desc { font-size: var(--fs-small); line-height: 1.6; margin-top: 4px; }
.rc-val { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; margin-top: 2px; }

/* the audio time, beside the status, not read out (audit A2) */
.audio-time { margin-left: 6px; font-family: var(--font-body); font-size: var(--fs-label); color: var(--fg-muted); font-variant-numeric: tabular-nums; }

/* 5.10 Quiz */
#cquiz { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.cq-opt-txt { flex: 1 1 auto; min-width: 0; }
.comp-question.answered { border-color: var(--success); }
.cq-num { margin-bottom: var(--sp-2); }
.cq-text, .cq-prompt { font-weight: 600; margin-bottom: var(--sp-3); line-height: 1.5; }
.cq-opts { display: grid; gap: var(--sp-2); }
.cq-opt {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  min-height: 48px; padding: 10px 44px 10px var(--sp-3);
  background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--radius);
  font-size: var(--fs-small); line-height: 1.45; cursor: pointer; transition: border-color 0.15s, background-color 0.15s;
}
.cq-opt:hover { border-color: var(--accent); }
.cq-opt .ol, .cq-opt .ol-auto {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--fg);
}
.cq-opt.sel { border-color: var(--accent); background: var(--tint-accent); }
.comp-question.answered .cq-opt { cursor: default; }
.comp-question.answered .cq-opt:not(.correct) { color: var(--fg-muted); border-color: var(--border); }
.comp-question.answered .cq-opt:not(.correct):hover { border-color: var(--border); }
.cq-opt.correct { border-color: var(--success); background: var(--tint-success); }
.cq-opt.correct .ol, .cq-opt.correct .ol-auto { background: var(--success); border-color: var(--success); color: #fff; }
.cq-opt.wrong { border-color: var(--danger); background: var(--tint-danger); }
.cq-opt.correct::after, .cq-opt.wrong::after { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-weight: 700; }
.cq-opt.correct::after { content: '\2713'; color: var(--success); }
.cq-opt.wrong::after { content: '\2715'; color: var(--danger); }
.cq-fb, .cq-explain, .cq-tryagain {
  margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius);
  font-size: var(--fs-small); line-height: 1.6; background: var(--surface2);
}
.cq-fb:empty { padding: 0; margin: 0; background: none; }
.cq-fb.correct, .cq-explain { background: var(--tint-success); }
.cq-fb.wrong, .cq-tryagain { background: var(--tint-danger); }
.cq-explain, .cq-tryagain { display: none; }
.cq-explain.show, .cq-tryagain.show { display: block; }
.try-prompt { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--danger); }
.try-reason { margin-top: 4px; color: var(--fg); }
#quiz-complete { padding: var(--pad-card); border: 1px solid var(--success); border-radius: var(--radius-lg); background: var(--tint-success); text-align: center; }
.qc-icon { font-size: 1.75rem; }
.qc-head { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; color: var(--success); }
.qc-sub { font-size: var(--fs-small); color: var(--fg-muted); margin: 4px auto 0; }

/* 5.11 Writing */
.template-wrap { display: grid; gap: var(--sp-3); }
.t-field, .ws-block { padding: var(--pad-card); }
.t-field label, .ws-label {
  display: block; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.t-field .ls { color: var(--star-s); } .t-field .lt { color: var(--star-t); } .t-field .la { color: var(--star-a); } .t-field .lr { color: var(--star-r); }
.ws-hint { font-size: var(--fs-small); color: var(--fg-muted); margin-top: 2px; }
.t-field textarea, .ws-area {
  display: block; width: 100%; min-height: 140px; margin-top: var(--sp-2); padding: var(--sp-3);
  resize: vertical; background: var(--surface); color: var(--fg);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius);
  font-family: var(--font-serif); font-size: max(16px, var(--fs-body)); line-height: 1.6;
}
.t-field textarea:focus, .ws-area:focus { outline: 3px solid var(--accent-lt); outline-offset: 1px; border-color: var(--accent); }
textarea::placeholder { color: var(--fg-muted); opacity: 1; }
.wc-counter { margin-top: 6px; text-align: right; font-family: var(--font-body); font-size: var(--fs-label); color: var(--fg-muted); }
.wc-counter.wc-ok { color: var(--success); font-weight: 600; }
.exemplar-wrap { padding-top: var(--flow); border-top: 1px solid var(--border); }
.exemplar-hint { font-size: var(--fs-small); color: var(--fg-muted); margin-bottom: var(--sp-2); }
.exemplar-hint:empty { display: none; }
.exemplar-body { display: none; margin-top: var(--sp-4); padding: var(--pad-card); border-radius: var(--radius-lg); background: var(--surface2); border-left: 4px solid var(--accent); }
.exemplar-body.open { display: block; }
.exemplar-lbl { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-top: var(--sp-4); }
.exemplar-lbl:first-of-type { margin-top: 0; }
.exemplar-p { font-size: var(--fs-small); line-height: 1.7; margin-top: 4px; }
.exemplar-note { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); font-size: var(--fs-small); color: var(--fg-muted); }
.model-audio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.audio-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 18px;
  border-radius: var(--radius-pill); border: 2px solid var(--accent); background: var(--surface); color: var(--accent);
  font-family: var(--font-display); font-size: var(--fs-btn); font-weight: 700; letter-spacing: 0.03em; cursor: pointer;
}
.audio-btn:hover, .audio-btn.is-playing { background: var(--accent); color: #fff; }
.audio-status { font-family: var(--font-body); font-size: var(--fs-label); color: var(--fg-muted); }
.preview-card { display: none; border-left: 4px solid var(--gold); }
.preview-card.show { display: block; }
.pv-title, .preview-card h3:first-child { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; color: var(--fg); }
.pv-row { margin-top: var(--sp-3); }
.pv-row h3, .pv-label { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.pv-row p, .pv-text { font-size: var(--fs-small); line-height: 1.65; margin-top: 2px; }
.pv-text.is-empty { font-style: italic; color: var(--fg-muted); }
.pv-row h4 { margin: 0; }

/* 5.12 Ending */
.end-actions { display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: var(--sp-4) var(--sp-5); }
.share-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.share-manual { flex-basis: 100%; text-align: center; font-family: var(--font-body); font-size: var(--fs-small); color: var(--fg-muted); }
.share-manual input { display: block; width: min(100%, 28rem); margin: 6px auto 0; padding: 10px 12px; border: 1.5px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--fg); font-size: 16px; }
[id^="lres"]:focus, .listen-tx:focus { outline: none; }
.complete-card { border-left: 4px solid var(--fg-muted); }
.complete-card.is-done { border-left-color: var(--success); }
.cc-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; }
.cc-sub { font-size: var(--fs-small); color: var(--fg-muted); margin-top: 2px; }
.cc-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--surface2); margin-top: var(--sp-2); }
.cc-mark { width: 1.25rem; flex-shrink: 0; text-align: center; font-weight: 700; font-family: var(--font-body); }
.cc-mark.ok { color: var(--success); }
.cc-mark.todo { color: var(--fg-muted); }
.cc-label { font-family: var(--font-display); font-size: var(--fs-btn); font-weight: 700; min-width: 11rem; }
.cc-detail { font-family: var(--font-body); font-size: var(--fs-label); color: var(--fg-muted); }
.course-done { text-align: center; }

/* 5.13 Disclaimer */
.course-disclaimer {
  border-left: 3px solid var(--danger); background: rgba(178, 34, 34, 0.06); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); font-family: var(--font-serif); font-size: var(--fs-small); line-height: 1.55; color: var(--fg);
}
.course-disclaimer strong { color: var(--danger); font-family: var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; margin-right: 4px; }

/* ---------- 6. Page-specific pieces ---------- */

/* Covers */
.cover-eyebrow, .cover-kicker { color: var(--gold); }
.cover-kicker { color: var(--fg-muted); }
.cover-badge-row { display: flex; justify-content: center; }
.cover-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff; font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.cover-title { font-size: var(--fs-h1); font-weight: 800; line-height: 1.02; letter-spacing: 0.005em; }
.cover-sub, .cover-subtitle { font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.375rem); line-height: 1.55; color: var(--fg-muted); max-width: 36em; margin-inline: auto; }
.cover-meta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.cover-level { font-family: var(--font-display); font-size: var(--fs-small); color: var(--fg-muted); letter-spacing: 0.02em; }
.cover-level span { color: var(--fg); font-weight: 700; }
.cover-footnote { font-size: var(--fs-label); }
.cover-feature { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); text-align: left; }
.cover-feature-icon { font-size: 1.5rem; line-height: 1; }
.cover-feature-title { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700; color: var(--fg); letter-spacing: 0.02em; }
.cover-feature-text { font-size: var(--fs-small); color: var(--fg-muted); margin-top: 2px; }
#slide-0 > .vocab-box { width: 100%; }
#slide-0 > .course-disclaimer { width: 100%; }

/* QR code: large screens only, fixed to the window corner, outside the content */
.qr-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 5; display: none; }
.qr-section { padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.qr-svg { display: block; width: 112px; height: 112px; }
.qr-url, .qr-label { display: none; }
@media (min-width: 1000px) and (min-height: 760px) {
  body.on-cover .qr-wrap { display: block; }
}

/* Landing: about */
.about-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 1024px) { .about-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.about-card-hdr { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; color: var(--fg); margin-bottom: var(--sp-2); }
.about-card-body { font-size: var(--fs-small); line-height: 1.6; }
.level-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-3); margin-top: var(--sp-3); }
.level-desc { font-size: var(--fs-small); color: var(--fg-muted); }
.transfer-list { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--fg-muted); }
@media (min-width: 1440px) { .star-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Landing: scenario cards */
.scenario-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 1024px) { .scenario-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sc-card {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--pad-card); background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--radius-lg);
  color: inherit; text-decoration: none; box-shadow: var(--shadow); transition: border-color 0.15s, transform 0.15s;
}
.sc-card:hover { border-color: var(--accent); color: inherit; }
.sc-card:focus-visible { outline: 3px solid var(--accent-lt); outline-offset: 3px; }
.sc-pill { position: absolute; top: var(--sp-3); right: var(--sp-3); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); border-color: var(--border); }
.sc-pill.is-progress { color: var(--gold); border-color: var(--gold); background: var(--tint-gold); }
.sc-pill.is-done { color: var(--success); border-color: var(--success); background: var(--tint-success); }
.sc-icon { font-size: 1.75rem; line-height: 1; }
.sc-body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sc-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; color: var(--fg); line-height: 1.2; }
.sc-desc { font-size: var(--fs-small); line-height: 1.55; color: var(--fg-muted); }
.sc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.sc-tag { font-size: 0.75rem; padding: 1px 10px; color: var(--fg-muted); border-color: var(--border); }
.sc-tag.level { color: var(--accent); border-color: rgba(21, 87, 176, 0.3); background: var(--tint-accent); }
.sc-cta { margin-top: var(--sp-2); font-family: var(--font-display); font-size: var(--fs-btn); font-weight: 700; color: var(--accent); }
.sc-card:hover .sc-cta { text-decoration: underline; }
.sc-arrow { display: none; }


/* Two ways to say it: the same scenario in Fast and Clear and in Full and Detailed (both versions use these) */
.pairs { display: grid; gap: var(--sp-3); }
.pair { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
@media (min-width: 640px) { .pair { grid-template-columns: 1fr 1.4fr; gap: var(--sp-5); } }
.pair-lbl { display: block; font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pair-short .pair-lbl { color: var(--gold); }
.pair-full .pair-lbl { color: var(--gold); }
.pair-short .pair-txt { font-family: var(--font-display); font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); font-weight: 700; color: var(--fg); }
.pair-full .pair-txt { font-family: var(--font-serif); font-size: var(--fs-body); color: var(--fg); }

/* Text links on their own line keep a 44px tap area */
.page-simple .slide p > a.btn-link, .page-simple .slide p > a.btn { display: inline-flex; align-items: center; min-height: 44px; }
.page-simple .slide p > a.btn { white-space: normal; text-align: left; } /* long link buttons wrap on small phones */

.pair-txt { display: block; margin-top: 2px; }
.two-ways .pairs { margin-top: var(--sp-4); }
.two-ways > * + * { margin-top: var(--sp-4); }
/* "Know both": one quiet line with a thin two-part bar, the same in both versions (designer, 1 Nov) */
.know-both { border-left: 4px solid var(--gold); padding: 2px 0 2px var(--sp-4); color: var(--fg); max-width: var(--measure); }
#slide-0 .know-both, .page-choose .know-both { text-align: left; }

/* The home page: three scenarios, each with both ways as two equal stacked buttons (panel, 1 Nov) */
.page-choose #slide-0 > .scn-grid { width: min(100%, 1120px); max-width: 1120px; text-align: left; }
.page-choose #slide-0 > .know-both { width: min(100%, 680px); }
.scn-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 1024px) { .scn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.scn-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--pad-card); background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.scn-head { display: flex; align-items: center; gap: var(--sp-3); }
.scn-ico { font-size: 2rem; line-height: 1; }
.scn-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; margin: 0; }
.scn-desc { font-family: var(--font-body); font-size: var(--fs-small); color: var(--fg); margin: 0; }
.scn-ways { display: grid; gap: var(--sp-5); margin-top: auto; }
.way-btn {
  display: flex; flex-direction: column; gap: 4px; min-height: 44px; padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--gold); border-radius: var(--radius); background: var(--surface); color: inherit; text-decoration: none;
}
.way-btn:hover { background: var(--tint-gold); color: inherit; }
.way-btn:focus-visible { outline: 3px solid var(--accent-lt); outline-offset: 3px; }
.way-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--fg); }
.way-name::after { content: " \2192"; color: var(--gold); }
.way-sample { font-family: var(--font-display); font-size: var(--fs-small); font-weight: 600; color: var(--fg-muted); }
.way-meta { font-family: var(--font-body); font-size: var(--fs-label); color: var(--fg-muted); }
.way-status { align-self: flex-start; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 1px 8px; }
.way-status.is-progress { color: var(--gold); border-color: var(--gold); background: var(--tint-gold); }
.way-status.is-done { color: var(--success); border-color: var(--success); background: var(--tint-success); }
.one-way + .one-way { margin-top: 0; }

/* each full scenario's cover links to the same story in clear, short English (the owner, 1 Nov: two equal versions) */
.cover-alt a.btn-link { display: inline-flex; align-items: center; min-height: 44px; }

/* The choosing page at the main address (the owner, 1 Nov: "Main address"): two doors, Simple Scenarios and the full course */
.app-choose { grid-template-rows: auto minmax(0, 1fr); }
.page-choose #slide-0 > .choose-grid { width: min(100%, 880px); max-width: 880px; text-align: left; }
.choose-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 720px) { .choose-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.door {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--pad-card); background: var(--surface); border: 2px solid var(--border-strong); border-radius: var(--radius-lg);
  color: inherit; text-decoration: none; box-shadow: var(--shadow); transition: border-color 0.15s;
}
.door:hover { border-color: var(--accent); color: inherit; }
.door:focus-visible { outline: 3px solid var(--accent-lt); outline-offset: 3px; }
.door-simple { border-top: 6px solid var(--gold); }
.door-full { border-top: 6px solid var(--gold); }
.door-ask { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.door-full .door-ask { color: var(--gold); }
.door-name { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 800; line-height: 1.1; color: var(--fg); }
.door-text { font-family: var(--font-body); font-size: var(--fs-body); color: var(--fg); line-height: 1.45; }
.door-sample { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; color: var(--fg-muted); }
.door-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.door-cta { margin-top: auto; padding-top: var(--sp-2); font-family: var(--font-display); font-size: var(--fs-btn); font-weight: 700; color: var(--accent); }
.door:hover .door-cta { text-decoration: underline; }
.choose-note p + p { margin-top: var(--sp-2); }
.choose-note-full { color: var(--fg-muted); }

/* Home in every top bar (the owner, 1 Nov: "there is always a way to return home... maybe a nav bar"): it goes to the
   choosing page at the main address. Rule 8: 24px to the next link (12px row gap + 12px margin), with a thin divider. */
.nav-home {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0;
  min-height: 44px; min-width: 44px; padding: 0 4px;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--accent); text-decoration: none; white-space: nowrap;
}
.nav-home:hover { color: var(--accent-hover); text-decoration: underline; }
.nav-home svg { width: 22px; height: 22px; flex-shrink: 0; }
.topbar-row .nav-home + .home-link, .topbar-row .nav-home + .brand { position: relative; margin-left: var(--sp-3); min-width: 0; }
.topbar-row .nav-home + .home-link::before, .topbar-row .nav-home + .brand::before {
  content: ''; position: absolute; left: -12.5px; top: 12px; bottom: 12px; width: 1px; background: var(--border);
}
.brand-head { font-weight: inherit; white-space: pre; }
.brand { gap: 0; } /* the name's parts sit together: "NATO English: Military Scenarios", no space before the colon */
@media (max-width: 639px) { .brand-head { display: none; } }
/* below laptop width Home is a house icon (its name is still read out), so the bar fits beside the slide dots */
@media (max-width: 1023px) { .nav-home .nav-lbl { display: none; } }
/* the top bar never widens the page */
.app { grid-template-columns: minmax(0, 1fr); }
.topbar-row { min-width: 0; }
.dots { overflow: hidden; }
/* phones: the page counter gives way to Home (the progress bar stays) */
@media (max-width: 479px) {
  .topbar-row .nav-home ~ .counter { display: none; }
  .topbar-row .nav-home ~ #cb-btn.cb-inbar { margin-left: auto; }
}

/* ---------- 7. Short screens (landscape phones) and touch typing ---------- */
@media (max-height: 500px) {
  :root { --fs-h1: clamp(1.75rem, 1.4rem + 2vw, 2.25rem); --fs-h2: clamp(1.375rem, 1.2rem + 1vw, 1.75rem); --flow: 0.875rem; }
  .topbar-row { min-height: 44px; }
  .home-link, .brand { min-height: 44px; }
  .pager-row { padding-top: 4px; padding-bottom: 4px; }
  .pager .btn { min-height: 44px; padding: 6px 16px; }
  .slide { padding-top: 16px; padding-bottom: 24px; }
  #slide-0.active { justify-content: flex-start; }
  .page-scenario .cover-badge-row, .page-scenario .cover-meta-row { display: none; }
  .cover-sub, .cover-subtitle { font-size: var(--fs-small); }
}

/* Laptop windows: the whole cover, disclaimer included, on the first screen (seat 1 A2) */
@media (min-width: 640px) and (max-height: 900px) {
  :root { --fs-h1: clamp(2.25rem, 1.5rem + 2vw, 3.25rem); }
  #slide-0.active { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
  #slide-0 > * + * { margin-top: var(--sp-3); }
  .cover-sub, .cover-subtitle { font-size: var(--fs-body); }
}

/* Narrow phones: the labelled Next button may wrap instead of crowding Back (seat 1 B4) */
@media (max-width: 359px) {
  .pager .btn { white-space: normal; text-align: center; }
  .pager-row { gap: var(--sp-4); }
}
/* an inline link with a 44px tap area that does not change the line */
.cover-about { font: inherit; display: inline-block; min-height: 44px; padding: 10px 2px; margin: -10px 0; vertical-align: baseline; line-height: 24px; }
.brand-tail { font-weight: inherit; }
@media (max-width: 639px) { .brand-tail { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .topbar, .pager, .qr-wrap, #cb-btn, #cb-panel { display: none !important; }
  body, .app, .stage { height: auto; overflow: visible; display: block; }
  .slide { display: block !important; }
}