/*
 * Styling for the practice activity.
 *
 * No web fonts: the system stack is used so the page makes no external
 * request of any kind and there is nothing to self-host. Colors are chosen
 * against WCAG 2.2 AA (4.5:1 for text, 3:1 for borders and other non-text)
 * and checked rather than eyeballed; see tools/contrast.mjs.
 *
 * Correctness is never carried by color alone — every correct/incorrect
 * state also has a glyph and a words-out-loud label.
 */

:root {
  color-scheme: light dark;

  --bg: #ffffff;
  --surface: #f1f4f8;
  --surface-edge: #748094;
  --ink: #141c28;
  --ink-muted: #45505f;

  --accent: #14459c;
  --accent-ink: #ffffff;
  --focus: #7a3ad6;

  --correct: #10603a;
  --correct-bg: #e8f4ed;
  --incorrect: #96202c;
  --incorrect-bg: #fceceb;
  --partial: #7a4a00;
  --partial-bg: #fdf1dd;

  --radius: 10px;
  --edge: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101620;
    --surface: #1a2333;
    --surface-edge: #6e7f96;
    --ink: #eef2f8;
    --ink-muted: #b9c4d4;
    --accent: #9fc0ff;
    --accent-ink: #0b1220;
    --focus: #d3a6ff;
    --correct: #7ede9f;
    --correct-bg: #14301f;
    --incorrect: #ffa8a4;
    --incorrect-bg: #3a1a1c;
    --partial: #f4c87c;
    --partial-bg: #33260f;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* An author-sheet `display` beats the user-agent's [hidden] rule, so the
   flex/grid containers below would ignore the attribute without this. */
[hidden] {
  display: none !important;
}

html {
  /* Never below 100%: a fixed px root would break the 200% zoom criterion. */
  font-size: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- */
/* focus — visible everywhere, never removed                         */
/* ---------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Headings receive focus on phase changes; they are not interactive, so
   they get no persistent ring, only the one the browser draws on focus. */
[tabindex="-1"]:focus {
  outline: none;
}
[tabindex="-1"]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.75rem 1rem;
  z-index: 10;
}
.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- */
/* layout — reflows to 320px with no horizontal scrolling            */
/* ---------------------------------------------------------------- */

.shell {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

@media (min-width: 40em) {
  .shell {
    padding: 3rem 1.5rem 4rem;
  }
}

.title {
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.lede {
  font-size: 1.125rem;
  margin: 0 0 1.75rem;
  max-width: 34rem;
}

.meta {
  color: var(--ink-muted);
  font-size: 0.95rem;
  margin: 1rem 0 0;
}

.prompt {
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  line-height: 1.25;
  margin: 0 0 1rem;
}

/* ---------------------------------------------------------------- */
/* progress                                                          */
/* ---------------------------------------------------------------- */

.progress-wrap {
  margin: 0 0 1.5rem;
}

.progress {
  color: var(--ink-muted);
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
  font-variant-numeric: tabular-nums;
}

.bar {
  display: flex;
  gap: 3px;
}

.seg {
  flex: 1 1 0;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-edge);
}
.seg.done {
  background: var(--accent);
}
.seg.here {
  background: var(--accent);
  opacity: 0.55;
}

/* ---------------------------------------------------------------- */
/* the sentence                                                      */
/* ---------------------------------------------------------------- */

.sentence {
  font-size: clamp(1.2rem, 4.5vw, 1.55rem);
  line-height: 1.7;
  background: var(--surface);
  border: var(--edge) solid var(--surface-edge);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.5rem;
}

.sentence mark.target {
  background: transparent;
  color: inherit;
  font-weight: 700;
  /* Shape, not color: the marked word is legible without perceiving hue. */
  box-shadow: inset 0 -0.55em 0 rgba(122, 58, 214, 0.22);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
  padding: 0 0.1em;
}

/* ---------------------------------------------------------------- */
/* buttons — all comfortably past the 24x24 minimum                  */
/* ---------------------------------------------------------------- */

.btn {
  font: inherit;
  min-height: 44px;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius);
  border: var(--edge) solid transparent;
  cursor: pointer;
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 600;
}

.btn--choice {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg);
  color: var(--ink);
  border-color: var(--surface-edge);
  font-weight: 600;
}

.choices--judge {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (hover: hover) {
  .btn--choice:hover {
    border-color: var(--accent);
    background: var(--surface);
  }
  .btn--primary:hover {
    filter: brightness(1.1);
  }
}

/* ---------------------------------------------------------------- */
/* word and replacement choices                                      */
/* ---------------------------------------------------------------- */

.group {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0; /* lets the fieldset shrink below its content at 320px */
}

.legend {
  padding: 0;
}
/* The visible prompt is the focused <h2>; the legend repeats it for the
   group's accessible name, so its visible copy is redundant on screen. */
.legend .prompt-inline {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.words {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  background: var(--surface);
  border: var(--edge) solid var(--surface-edge);
  border-radius: var(--radius);
  padding: 1rem;
  margin: 0 0 1.25rem;
  font-size: clamp(1.15rem, 4.2vw, 1.45rem);
  line-height: 1.6;
}

.word,
.option {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
}

.word-input,
.option-input {
  /* Kept in the accessibility tree and focusable; only painted off. */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.word-text,
.option-text {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.25rem 0.6rem;
  border: var(--edge) dashed var(--surface-edge);
  border-radius: 8px;
}

/* Checked state is signalled by border weight and a glyph as well as by
   color, so it survives greyscale and color-vision differences. */
.word-input:checked + .word-text,
.option-input:checked + .option-text {
  border-style: solid;
  border-width: 3px;
  border-color: var(--accent);
  background: var(--bg);
  font-weight: 700;
}

.word-input:checked + .word-text::before,
.option-input:checked + .option-text::before {
  content: "✓";
  font-weight: 700;
  color: var(--accent);
}

.word-input:focus-visible + .word-text,
.option-input:focus-visible + .option-text {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@media (hover: hover) {
  .word:hover .word-text,
  .option:hover .option-text {
    border-color: var(--accent);
  }
}

.options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  font-size: clamp(1.15rem, 4.2vw, 1.45rem);
}

.options .option-text {
  padding: 0.4rem 1rem;
  border-style: solid;
}

/* ---------------------------------------------------------------- */
/* notices, hints and feedback                                       */
/* ---------------------------------------------------------------- */

.notice,
.hint {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 0 0 1.25rem;
  border-left: 6px solid;
}

.notice--correct {
  background: var(--correct-bg);
  color: var(--correct);
  border-left-color: var(--correct);
}
.notice--incorrect,
.hint {
  background: var(--incorrect-bg);
  color: var(--incorrect);
  border-left-color: var(--incorrect);
}

.notice-mark {
  font-weight: 700;
  flex: none;
}

.feedback {
  border: var(--edge) solid;
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 0 0 1.5rem;
}

.feedback--correct {
  border-color: var(--correct);
  background: var(--correct-bg);
}
.feedback--incorrect {
  border-color: var(--incorrect);
  background: var(--incorrect-bg);
}

/* Partly right: the student fixed the sentence but did not spot at first
   that it needed fixing. Distinct from both, because it is neither. */
.feedback--partial {
  border-color: var(--partial);
  background: var(--partial-bg);
}

.verdict {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}
.feedback--correct .verdict {
  color: var(--correct);
}
.feedback--incorrect .verdict {
  color: var(--incorrect);
}
.feedback--partial .verdict {
  color: var(--partial);
}

.verdict-mark {
  font-size: 1.35rem;
  flex: none;
}

/* The sentence as the student was given it and, when it needed a change, as
   corrected. Each sits under a visible label, and the labels carry the
   distinction — not position, weight or color. */
.versions {
  margin: 0 0 0.9rem;
}

.version + .version {
  margin-top: 0.75rem;
}

.version-label {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--ink);
}

.version-text {
  font-size: 1.2rem;
  background: var(--bg);
  border: var(--edge) solid var(--surface-edge);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0;
  color: var(--ink);
}

.version--corrected .version-text {
  font-weight: 600;
}

.detail,
.explanation p {
  margin: 0 0 0.6rem;
  color: var(--ink);
}
.explanation p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------- */
/* results                                                           */
/* ---------------------------------------------------------------- */

.family-block {
  margin: 0 0 1.5rem;
  border: var(--edge) solid var(--surface-edge);
  border-left-width: 6px;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.family-block--strong {
  border-left-color: var(--correct);
}
.family-block--practice {
  border-left-color: var(--incorrect);
}

.family-heading {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.families {
  margin: 0;
  padding-left: 1.25rem;
}
.families li {
  margin-bottom: 0.25rem;
}
.family-name {
  font-weight: 600;
}
.family-count {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- */
/* motion                                                            */
/* ---------------------------------------------------------------- */

/* There is no animation in this activity by design. This is a backstop for
   anything a future change might introduce, and for UA-level smooth
   scrolling. */
@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;
  }
}

/* ---------------------------------------------------------------- */
/* words referred to inside feedback                                 */
/* ---------------------------------------------------------------- */

/* Feedback sentences are mostly *about* words, and an unmarked word
   disappears into the prose around it. Quotation marks come from the DOM;
   weight and a slight size bump come from here. Color is deliberately not
   used, so this reads the same for everyone and inside every panel tone.

   Explanations set the words and expansions they teach (`.term`) the same
   way, without quotation marks: those terms sit inside authored sentences,
   often inside a quoted example, where added quotes would change the
   sentence. */
.word-ref,
.term {
  font-weight: 700;
  font-size: 1.05em;
  white-space: nowrap;
}

/* The word that changed, inside the corrected sentence. Underlined rather
   than quoted: it is being read as part of a sentence, not named. */
.fixed-word {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* ---------------------------------------------------------------- */
/* reviewing answers after the round                                 */
/* ---------------------------------------------------------------- */

.results-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn--secondary {
  background: var(--bg);
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

@media (hover: hover) {
  .btn--secondary:hover {
    background: var(--surface);
  }
}

.review {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.review-item {
  border: var(--edge) solid var(--surface-edge);
  border-left-width: 6px;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 0 0 1rem;
}

/* Tone is carried by the edge, but never only by it: each entry also has a
   glyph and a worded headline. */
.review-item--correct {
  border-left-color: var(--correct);
}
.review-item--partial {
  border-left-color: var(--partial);
}
.review-item--incorrect {
  border-left-color: var(--incorrect);
}

.review-verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
}

.review-mark {
  font-weight: 700;
  flex: none;
}
.review-item--correct .review-mark {
  color: var(--correct);
}
.review-item--partial .review-mark {
  color: var(--partial);
}
.review-item--incorrect .review-mark {
  color: var(--incorrect);
}

.review-number {
  font-weight: 700;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.review-headline {
  font-weight: 600;
}

/* The labeled sentences, as on the feedback screen, a step smaller to suit a
   list of ten. */
.review .versions {
  margin: 0 0 0.6rem;
}

.review .version-text {
  font-size: 1.1rem;
}

/* ---------------------------------------------------------------- */
/* choosing a grade level                                            */
/* ---------------------------------------------------------------- */

.levels {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

/* A block button so the whole row is the target, not just the words,
   and so the two lines inside it read as one choice. */
.btn--level {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  background: var(--bg);
  color: var(--ink);
  border-color: var(--surface-edge);
  padding: 0.9rem 1.25rem;
}

.level-label {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}

.level-detail {
  color: var(--ink-muted);
  font-size: 0.95rem;
}

@media (hover: hover) {
  .btn--level:hover {
    border-color: var(--accent);
    background: var(--surface);
  }
}

/* Said in words on the intro of any level whose questions are still
   drafts. It is content-driven and disappears when they are approved. */
.draft-note {
  margin-top: 0.35rem;
}

/* ---------------------------------------------------------------- */
/* the level bar, on every screen inside a level                     */
/* ---------------------------------------------------------------- */

.level-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 1.5rem;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--surface-edge);
}

.level-name {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.95rem;
  font-weight: 600;
}

/* Low emphasis: always available, never competing with the answer
   buttons. Still a 44px target and still visibly a control. */
.btn--quiet {
  background: transparent;
  color: var(--accent);
  border-color: transparent;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .btn--quiet:hover {
    background: var(--surface);
  }
}

/* ---------------------------------------------------------------- */
/* leaving a round                                                   */
/* ---------------------------------------------------------------- */

.leave-dialog {
  max-width: min(30rem, calc(100vw - 2rem));
  margin: auto;
  background: var(--bg);
  color: var(--ink);
  border: var(--edge) solid var(--surface-edge);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.leave-dialog::backdrop {
  background: rgba(10, 14, 22, 0.6);
}

.leave-title {
  font-size: 1.3rem;
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

.leave-detail {
  margin: 0 0 1.5rem;
}

.leave-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.leave-actions .btn {
  flex: 1 1 12rem;
}

/* ---------------------------------------------------------------- */
/* what the activity is, on the chooser                              */
/* ---------------------------------------------------------------- */

/* A quiet panel rather than another paragraph of lede: it is a note
   about how the activity works, not part of the instructions, and it
   should be skippable by anyone who already knows. Colours are the
   already-checked ink-on-surface pair, so the palette is unchanged. */
.teaching-note {
  background: var(--surface);
  border: var(--edge) solid var(--surface-edge);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.75rem;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.55;
}

/* ---------------------------------------------------------------- */
/* footer — the same block as Quiz and Practice                      */
/* ---------------------------------------------------------------- */

/* The footer block after this rule is copied unchanged from Quiz and
   Practice. It reads --muted and --line, which this palette does not
   define, so they are mapped here to this palette's muted ink and to
   the Quiz divider colors. The .shell padding already spaces the footer
   from the activity. */
footer.site-footer {
  --muted: var(--ink-muted);
  --line: #c7d0dd;
}

@media (prefers-color-scheme: dark) {
  footer.site-footer {
    --line: #40516c;
  }
}

/* Footer navigation is grouped by purpose and stays open at every size.
   The brand, the link groups and Connect share one grid, so every column
   gap is equal and the last column ends flush with the legal links below.
   The two link groups sit in a subgrid to keep their named navigation. */
footer.site-footer {
    --footer-ink: var(--ink, var(--text));
    --footer-link: var(--brand, var(--accent));
    --footer-line: var(--border, var(--line));
    --footer-gap: 3rem;
    flex-shrink: 0;
    width: 100%;
    margin-inline: auto;
    margin-bottom: 0;
    padding: 3rem 1.5rem 1.5rem;
    border-top: 1px solid var(--footer-line);
    color: var(--muted);
    text-align: left;
    font-size: .875rem;
    line-height: 1.6;
}
footer .footer-inner { max-width: 72rem; margin: 0 auto; }
footer .footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(9rem, max-content)) max-content;
    align-items: start;
    gap: 2.5rem var(--footer-gap);
}
footer.footer-native .footer-main { grid-template-columns: minmax(0, 1fr) minmax(9rem, max-content) max-content; }
footer .footer-brand { min-width: 0; }
footer .footer-brand img { display: block; width: 140px; max-width: 100%; height: auto; }
footer .footer-tagline { max-width: 17rem; margin: .875rem 0 0; padding: 0; color: var(--muted); font-size: .875rem; line-height: 1.6; text-wrap: balance; }
footer .footer-navigation {
    display: grid;
    grid-column: span 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-columns: subgrid;
    gap: 0 var(--footer-gap);
    margin: 0;
}
footer.footer-native .footer-navigation { grid-column: span 1; grid-template-columns: minmax(0, 1fr); grid-template-columns: subgrid; }
footer .footer-heading {
    margin: 0 0 .75rem;
    padding: 0;
    border: 0;
    font: 600 .75rem/1.5 var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
footer .links {
    display: grid;
    align-items: start;
    justify-content: start;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}
footer .links li { min-width: 0; }
footer .links a,
footer .footer-social,
footer .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    padding: .45rem 0;
    color: var(--footer-ink);
    font-size: .875rem;
    line-height: 1.5;
    font-weight: 400;
    text-decoration: none;
    overflow-wrap: anywhere;
    border-radius: 2px;
}
footer a:hover { color: var(--footer-link); }
footer a:focus-visible { outline: 2px solid var(--footer-link); outline-offset: 4px; }
/* Connect follows the same 44 pixel rows as the link lists. The badge keeps
   more than Apple's minimum clear space of a quarter of its height. */
footer .footer-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
footer .app-store-badge { display: inline-flex; padding: 2px 10px; margin-left: -10px; border-radius: 6px; }
footer .app-store-badge img { display: block; width: 120px; height: 40px; }
footer .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    margin-top: 2.5rem;
    padding-top: .75rem;
    border-top: 1px solid var(--footer-line);
}
footer .copyright { margin: 0; font-size: .75rem; }
footer .footer-legal { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; }
footer .footer-legal a { color: var(--muted); font-size: .75rem; }
footer .footer-legal a:hover { color: var(--footer-link); }
footer .app-store-credit { max-width: 56rem; margin: .5rem 0 0; font-size: .6875rem; line-height: 1.6; }
/* Tablet. The brand takes its own row and the link groups share three
   equal columns. Native footers have room to keep the brand in line. */
@media (max-width: 60rem) {
    footer .footer-main, footer.footer-native .footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    footer .footer-brand { grid-column: 1 / -1; }
    footer.footer-native .footer-brand { grid-column: auto; }
}
/* Phone. Two link columns, with the brand and Connect each on a full row. */
@media (max-width: 37.5rem) {
    footer.site-footer { --footer-gap: 1.5rem; padding: 2.5rem 1.25rem 1.5rem; }
    footer .footer-main, footer.footer-native .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
    footer.footer-native .footer-brand, footer .footer-actions { grid-column: 1 / -1; }
    footer.footer-native .footer-navigation { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
    footer .footer-actions { flex-direction: row; align-items: center; flex-wrap: wrap; column-gap: 1.5rem; }
    footer .footer-actions .footer-heading { flex-basis: 100%; }
    footer .footer-bottom { align-items: flex-start; flex-direction: column; gap: 0; margin-top: 2rem; }
}


/* The page navigation dialog stays mounted while question screens change. */
.leave-dialog button {
  min-height: 44px;
  padding: 0.65rem 1.25rem;
  border: 2px solid var(--focus);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.leave-dialog button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }