/* Generated file. Do not edit by hand: edit the files in app/styles/ and run `bun tools/build-css.js`. */
/*
 * Learning-area stylesheet.
 * Colours and font sizes come from the design variables in driver-sitekit's
 * theme/site.css; test/style-literals.test.js rejects literals in this file.
 * Chrome classes use a learn- prefix so sitekit's older header rules do not apply to them.
 */

.learn-app {
  display: block;
}
/* sitekit's page template wraps the run page in a padded, width-capped main; the header and bars paint to the window edge from the root, like the static pages' header. */
main.site-main:has(> #learn-root) { max-width: none; padding: 0; }

/* ---------- header ---------- */
/* Header, bars and page share one width with the gutter inside it. */
.learn-header,
.learn-wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
/* Nothing in the bar wraps; under 1000px the links fold into Menu. */
.learn-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
  color: var(--on-brand);
  border-image: linear-gradient(var(--brand) 0 0) fill 0 / / 0 100vmax;
}
.learn-header a,
.learn-header summary,
.learn-header button,
.learn-brand { white-space: nowrap; }
.learn-header a { color: var(--on-brand); text-decoration: none; }
.learn-header :focus-visible { outline-color: var(--signal); }
.learn-header .learn-panel :focus-visible,
.learn-header .learn-pick-list :focus-visible,
.learn-header .learn-menu-panel :focus-visible { outline-color: var(--link); }

.learn-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.learn-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: var(--tap);
  margin-right: auto;
  font-weight: var(--fw-num);
  font-size: var(--fs-brand);
  letter-spacing: var(--track-tight);
}
.learn-logo { display: block; width: var(--logo-w); height: auto; flex: none; }
.learn-logo-plate { fill: var(--logo-plate); }
.learn-logo-slot { fill: var(--brand); }

.learn-sitenav { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-nav); }
.learn-sitenav > a,
.learn-group > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  border-radius: var(--radius-pill);
  cursor: pointer;
  list-style: none;
  color: var(--on-brand);
}
.learn-group > summary::-webkit-details-marker { display: none; }
.learn-group { position: relative; }
.learn-group[open] > summary { background: var(--pill-hover); }
/* The current place is outlined, so it does not rely on colour. The Learn group matches the static pages and stays plain. */
.learn-sitenav > a[aria-current] {
  box-shadow: inset 0 0 0 var(--bw-strong) var(--pill-line);
  font-weight: var(--fw-bold);
}
.learn-caret {
  flex: none;
  width: .4rem;
  height: .4rem;
  border-right: var(--bw-strong) solid currentColor;
  border-bottom: var(--bw-strong) solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
[open] > summary > .learn-caret { transform: translateY(1px) rotate(-135deg); }

/* One surface for the language list, the theme list, both nav groups and the Menu. */
.learn-pick-list,
.learn-panel,
.learn-menu-panel {
  position: absolute;
  z-index: 10;
  top: calc(100% + .4rem);
  margin: 0;
  padding: .35rem;
  list-style: none;
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px var(--pop-shadow);
}
.learn-pick-list { right: 0; min-width: 10rem; }
.learn-panel { left: 0; display: flex; flex-direction: column; width: max-content; min-width: 100%; }
.learn-menu-panel { right: 0; display: flex; flex-direction: column; min-width: 13.5rem; max-height: calc(100vh - 5rem); overflow-y: auto; }
.learn-header .learn-pick-list a,
.learn-header .learn-pick-list button,
.learn-header .learn-panel a,
.learn-header .learn-menu-panel a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: var(--tap);
  padding: 0 .7rem 0 var(--sp-2);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-nav);
  text-align: left;
  cursor: pointer;
}
/* A tick marks the current item; the other items keep the same indent. */
.learn-header .learn-pick-list a::before,
.learn-header .learn-pick-list button::before,
.learn-header .learn-panel a::before,
.learn-header .learn-menu-panel a::before { content: ""; flex: 0 0 .9rem; }
.learn-header .learn-pick-list a[aria-current],
.learn-header .learn-pick-list button[aria-pressed="true"],
.learn-header .learn-panel a[aria-current],
.learn-header .learn-menu-panel a[aria-current] { background: var(--brand-tint); color: var(--link); font-weight: var(--fw-bold); }
.learn-header .learn-pick-list a[aria-current]::before,
.learn-header .learn-pick-list button[aria-pressed="true"]::before,
.learn-header .learn-panel a[aria-current]::before,
.learn-header .learn-menu-panel a[aria-current]::before { content: "\2713"; }
.learn-menu-head { margin: var(--sp-2) .7rem var(--sp-hair); color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-semi); }
.learn-rule { height: var(--bw); margin: var(--sp-1) var(--sp-2) 0; background: var(--line); }

.learn-menu { display: none; position: relative; font-size: var(--fs-small); }
.learn-menu > summary,
.learn-pick > summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem var(--sp-3);
  border: var(--bw) solid var(--pill-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  list-style: none;
  font-weight: var(--fw-semi);
}
.learn-menu > summary::-webkit-details-marker,
.learn-pick > summary::-webkit-details-marker { display: none; }
.learn-menu[open] > summary,
.learn-pick[open] > summary { background: var(--pill-hover); }
/* The pill keeps its drawn height; the area that takes the tap is 44px. */
.learn-menu > summary::before,
.learn-pick > summary::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, var(--tap));
  height: max(100%, var(--tap));
  transform: translate(-50%, -50%);
}
.learn-bars {
  position: relative;
  width: .85rem;
  height: .58rem;
  border-top: var(--bw-strong) solid currentColor;
  border-bottom: var(--bw-strong) solid currentColor;
}
.learn-bars::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: var(--bw-strong) solid currentColor; transform: translateY(-1px); }

.learn-switches { display: flex; align-items: center; gap: var(--sp-2); }
.learn-pick { position: relative; font-size: var(--fs-small); }
.learn-pick-icon { width: var(--glyph-sm); height: var(--glyph-sm); flex: none; }
.learn-pick-short { display: none; }

/* ---------- section bar and tab bar ---------- */
.learn-bar { background: var(--card); border-bottom: var(--bw) solid var(--line); }
.learn-bar .learn-wrap { display: flex; align-items: center; gap: var(--sp-5); min-height: var(--bar-h); }
.learn-here { font-weight: var(--fw-bold); }
.learn-sections { display: none; list-style: none; margin: 0; padding: 0; gap: var(--sp-7); }
.learn-sections a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  height: var(--bar-h);
  border-top: var(--bw-wrong) solid var(--clear);
  border-bottom: var(--bw-wrong) solid var(--clear);
  color: var(--muted);
  font-size: var(--fs-nav);
  font-weight: var(--fw-semi);
  text-decoration: none;
}
.learn-sections a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.learn-account { margin-left: auto; display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--fs-nav); }

/* Sticks to the bottom of the window until the footer arrives. */
.learn-tabbar { position: sticky; bottom: 0; z-index: 5; background: var(--card); border-top: var(--bw) solid var(--line); }
.learn-tabbar ul { display: flex; list-style: none; margin: 0 auto; padding: var(--sp-1) var(--sp-2); max-width: var(--page); }
.learn-tabbar li { flex: 1 1 0; min-width: 0; }
.learn-tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-hair);
  min-height: var(--tap);
  padding: var(--sp-1) 0;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: var(--fs-tab);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  text-decoration: none;
}
.learn-tabbar a[aria-current="page"] { color: var(--ink); background: var(--sunken); }
.learn-tab-icon { width: var(--icon); height: var(--icon); }

@media (hover: hover) {
  .learn-brand:hover { text-decoration: underline; }
  .learn-sitenav > a:hover,
  .learn-group > summary:hover,
  .learn-pick > summary:hover,
  .learn-menu > summary:hover { background: var(--pill-hover); }
  .learn-header .learn-pick-list a:hover,
  .learn-header .learn-pick-list button:hover,
  .learn-header .learn-panel a:hover,
  .learn-header .learn-menu-panel a:hover { background: var(--brand-tint); text-decoration: none; }
  .learn-sections a:hover { color: var(--ink); }
}

/* 1000px: the links fold into Menu. */
@media (max-width: 62.5rem) {
  .learn-sitenav { display: none; }
  .learn-menu { display: block; }
  .learn-switches { margin-left: var(--sp-1); }
}

/* 560px: Menu keeps its bars, the language button its short form (when the copy has one),
   the theme button its icon; the menu spans the page width under the bar. */
@media (max-width: 35rem) {
  .learn-header { gap: var(--sp-1); }
  .learn-brand { min-width: 0; font-size: var(--fs-nav); gap: .4rem; }
  .learn-menu { position: static; }
  .learn-menu-panel { left: var(--gutter); right: var(--gutter); top: calc(100% - .25rem); min-width: 0; }
  .learn-menu > summary { gap: 0; padding: .3rem .55rem; }
  .learn-menu-text,
  .learn-pick-theme .learn-pick-name,
  .learn-pick-theme .learn-caret,
  .learn-pick-lang.has-short .learn-pick-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .learn-pick-lang.has-short .learn-pick-short { display: inline; }
  .learn-pick > summary { padding: .3rem .55rem; }
  /* Menu, language and theme each lose their label at this width, so the pill's height
     would come from whatever is left — the bars glyph, the short language word, the theme
     icon, three different boxes. One tap target as the shared floor keeps the three pills
     the same height and on the same centre line, and gives each a 44px drawn target. */
  .learn-menu > summary,
  .learn-pick > summary { justify-content: center; min-height: var(--tap); }
  .learn-switches { gap: var(--sp-1); margin-left: 0; }
}

/* 720px: the sections move from the tab bar into the bar under the header. */
@media (min-width: 45rem) {
  .learn-sections { display: flex; }
  .learn-here { display: none; }
  .learn-tabbar { display: none; }
}

/* ---------- shared parts (cards, notice, buttons, dialog) ---------- */
:root {
  --learn-state-gap: var(--sp-3);
  --learn-state-pad: var(--sp-5);
  --learn-toast-max: 34rem;
  --learn-dialog-max: 30rem;
  --learn-lane-mini-w: 3rem;
  --learn-chip: var(--tap);
  --learn-field-h: 12rem;
  --learn-form-col: 40rem;
  --learn-tabbar-h: 3.5rem; /* the phone tab bar: 44px links plus its padding and top line */
  --learn-meter-h: 8px; /* readiness bar: the track of one topic */
  --learn-tick-w: 2px; /* the standard line across a readiness bar */
  --learn-tick-over: 4px; /* how far the standard line stands above and below the bar */
  --learn-mini-plate-w: 5.5rem; /* a past sitting's score plate: wide enough for "40 / 40" */
  --learn-fs-mini-plate: 1.15rem;
}

.learn-g { width: var(--glyph); height: var(--glyph); flex: none; }
.learn-g-sm { width: var(--glyph-sm); height: var(--glyph-sm); }

.learn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: var(--sp-3) var(--sp-6);
  border: var(--bw-strong) solid var(--muted);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) ease;
}
.learn-btn--primary { background: var(--signal); border-color: var(--signal-edge); color: var(--on-signal); }
.learn-btn--small { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-small); font-weight: var(--fw-semi); }
.learn-btn--danger { border-color: var(--wrong); color: var(--wrong); }
.learn-btn:disabled { border-color: var(--muted); background: var(--sunken); color: var(--muted); cursor: default; }
.learn-text-link { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--fw-semi); }

.learn-state-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--learn-state-gap);
  padding: var(--learn-state-pad);
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  max-width: var(--prose);
}
.learn-state-card > * { margin: 0; }
.learn-state-card__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.learn-state-card__text { color: var(--muted); }
.learn-state-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.learn-state-card--locked .learn-state-card__title .learn-g { color: var(--ink); }
/* "Couldn't confirm": neutral ground with an ink edge and no unlock button. */
.learn-state-card--unknown { background: var(--sunken); border-left: var(--bw-row) solid var(--ink); }
.learn-state-card--error { border-left: var(--bw-row) solid var(--wrong); }
.learn-state-card--error .learn-state-card__title .learn-g { color: var(--wrong); }
.learn-state-card--empty { border: var(--bw) dashed var(--muted); }

.learn-loading-line { display: flex; align-items: center; gap: var(--sp-3); margin: 0; color: var(--muted); }
.learn-loading-line::before {
  content: "";
  flex: none;
  width: var(--learn-lane-mini-w);
  height: var(--lane-h);
  background: repeating-linear-gradient(90deg, var(--lane-dash) 0 var(--sp-2), var(--clear) var(--sp-2) var(--sp-3));
}
.learn-status-line { display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--muted); font-size: var(--fs-small); }

.learn-toast {
  position: sticky;
  bottom: var(--sp-4);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  max-width: var(--learn-toast-max);
  margin: var(--sp-4) auto 0;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  background: var(--toast-bg);
  color: var(--on-toast);
  box-shadow: 0 8px 24px var(--pop-shadow);
}
.learn-toast p { margin: 0; flex: 1 1 12rem; }
.learn-toast button {
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--sp-2);
  border: 0;
  background: var(--clear);
  color: var(--on-toast);
  font: inherit;
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: .18em;
  cursor: pointer;
}
.learn-toast :focus-visible { outline-color: var(--signal); }

.learn-read-aloud[data-state="locked"] { color: var(--muted); }
.learn-read-aloud[data-state="locked"]:not(:disabled) { border-style: dashed; }
.learn-read-aloud[aria-pressed="true"] { background: var(--sunken); border-color: var(--ink); }
.learn-read-aloud:disabled { border-color: var(--muted); background: var(--sunken); color: var(--muted); cursor: default; }
.learn-read-aloud-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }

/* The native dialog sits in the top layer; its ::backdrop is the scrim. */
.learn-dialog {
  width: calc(100% - 2 * var(--sp-5));
  max-width: var(--learn-dialog-max);
  max-height: calc(100vh - 2 * var(--sp-5));
  overflow: auto;
  padding: var(--sp-6);
  border: 0;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 8px 24px var(--pop-shadow);
}
/* `margin: auto` is what centres a modal dialog. It sits on [open] so a parent's `> * { margin: 0 }`
   rule (the account stacks, the state card) cannot zero it and pin the box to the top-left corner. */
.learn-dialog[open] { display: flex; flex-direction: column; gap: var(--sp-4); margin: auto; }
.learn-dialog::backdrop { background: var(--scrim); }
.learn-dialog > * { margin: 0; }
.learn-dialog h2 { font-size: var(--fs-h2); }
.learn-dialog__text { color: var(--muted); }
.learn-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-3); }

@media (hover: hover) {
  .learn-btn:hover:not(:disabled) { background: var(--sunken); }
  .learn-btn--primary:hover:not(:disabled) { background: var(--signal); filter: brightness(.95); }
  .learn-toast button:hover { text-decoration-thickness: 2px; }
}

/* Under 720px the tab bar sits at the bottom; the notice rides above it. Screens with no tab bar
   (a practice round, a mock test, the report panel) keep the notice at the window edge. */
@media (max-width: 44.99rem) {
  .learn-tabbar ~ .learn-toast,
  .learn-toast:has(~ .learn-tabbar) { bottom: calc(var(--learn-tabbar-h) + var(--sp-2)); }
}

/* ---------- report panel and contact us ---------- */
.learn-reasons { display: grid; gap: var(--sp-2); }
.learn-choice {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  line-height: var(--lh-tight);
  text-align: left;
  cursor: pointer;
}
.learn-choice[aria-pressed="true"] {
  background: var(--sunken);
  box-shadow: inset 0 0 0 calc(var(--bw-strong) + var(--bw)) var(--ink);
  font-weight: var(--fw-semi);
}
.learn-choice:disabled, .learn-chip:disabled { cursor: default; }

.learn-suggest { display: flex; flex-direction: column; gap: var(--sp-2); }
.learn-suggest > p { margin: 0; font-weight: var(--fw-semi); }
.learn-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.learn-chip {
  display: inline-grid;
  place-items: center;
  min-width: var(--learn-chip);
  min-height: var(--learn-chip);
  padding: 0 var(--sp-3);
  border: var(--bw) solid var(--muted);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.learn-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--card); }
.learn-dialog__actions--split .learn-btn { flex: 1 1 auto; }

/* One line of result: ink tick for "sent" and "already sent", red slash when nothing was sent. */
.learn-outcome { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0; font-weight: var(--fw-semi); }
.learn-outcome .learn-g { margin-top: var(--sp-hair); color: var(--ink); }
.learn-outcome--box {
  padding: var(--sp-3) var(--sp-4);
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-left: var(--bw-row) solid var(--ink);
  border-radius: var(--radius);
}
.learn-outcome--fail .learn-g { color: var(--wrong); }
.learn-outcome--box.learn-outcome--fail { border-left-color: var(--wrong); }

.learn-contact { display: flex; flex-direction: column; gap: var(--sp-6); }
.learn-contact__form { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; max-width: var(--learn-form-col); }
.learn-contact__form > * { margin: 0; }
.learn-contact__form h1 { font-size: var(--fs-h1); }
.learn-back-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--fw-semi); }
.learn-field {
  display: block;
  width: 100%;
  min-height: var(--learn-field-h);
  padding: var(--sp-3) var(--sp-4);
  border: var(--bw) solid var(--muted);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  line-height: var(--lh-body);
  resize: vertical;
}
.learn-field-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1) var(--sp-4); color: var(--muted); font-size: var(--fs-small); }
.learn-field-foot p { margin: 0; font-variant-numeric: tabular-nums; }
.learn-contact__form .learn-btn { align-self: flex-start; }

@media (max-width: 30rem) {
  .learn-contact__form .learn-btn--primary { align-self: stretch; }
}

/* ---------- Pre-exam ---------- */
.learn-preexam { display: flex; flex-direction: column; gap: var(--sp-7); }
.learn-preexam h1 { margin: 0; }
.learn-preexam__left, .learn-preexam__right { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.learn-start { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.learn-start .learn-btn { align-self: stretch; }
.learn-start > p { margin: 0; }
.learn-muted-line { margin: 0; color: var(--muted); max-width: var(--prose); }
.learn-start__hint { color: var(--muted); font-size: var(--fs-small); max-width: var(--prose); }
.learn-closed-reason { display: flex; gap: var(--sp-2); font-weight: var(--fw-semi); max-width: var(--prose); }
.learn-closed-reason .learn-g { margin-top: var(--sp-hair); color: var(--ink); }
.learn-group-label { margin: 0; color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-semi); }

/* Narrow: one row that leads to every past sitting. */
.learn-sittings-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-left: var(--bw-row) solid var(--clear);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-weight: var(--fw-row);
}
.learn-sittings-link__num { color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-num); font-variant-numeric: tabular-nums; }
.learn-sittings-wide { display: none; flex-direction: column; gap: var(--sp-3); }
.learn-sittings-wide .learn-text-link { align-self: flex-start; }

.learn-readiness-panel { display: flex; flex-direction: column; gap: var(--sp-3); }
.learn-readiness-panel h2 { margin: 0; font-size: var(--fs-h2); }
.learn-readiness__sub, .learn-readiness__sum { margin: 0; }
.learn-readiness__sub { color: var(--muted); font-size: var(--fs-small); }
.learn-readiness, .learn-sitting-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
}
.learn-readiness li { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.learn-readiness li + li, .learn-sitting-list li + li { border-top: var(--bw) solid var(--line); }
.learn-readiness__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--sp-3); }
.learn-readiness__topic { font-weight: var(--fw-row); }
.learn-readiness__state { color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.learn-meter { position: relative; height: var(--learn-meter-h); margin: var(--learn-tick-over) 0; background: var(--sunken); }
.learn-meter > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--muted); }
.learn-meter--at > i { background: var(--correct); }
.learn-meter > b { position: absolute; top: calc(-1 * var(--learn-tick-over)); bottom: calc(-1 * var(--learn-tick-over)); width: var(--learn-tick-w); background: var(--ink); }
.learn-weak-entry { align-self: flex-start; }

.learn-sitting-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--learn-mini-plate-w);
  grid-template-areas: "when plate" "state plate" "parts plate";
  align-items: center;
  gap: 0 var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}
.learn-sitting-list p { margin: 0; }
.learn-sitting__when { grid-area: when; font-weight: var(--fw-row); }
.learn-sitting__state { grid-area: state; display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.learn-sitting__state--pass { color: var(--correct); }
.learn-sitting__state--fail { color: var(--wrong); }
/* Each part's score beside the total: the standard needs the pass mark in each part, so 32 / 40 can still be not met. */
.learn-sitting__parts { grid-area: parts; display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); color: var(--muted); font-size: var(--fs-small); }
.learn-sitting__score { color: var(--ink); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
/* The two plates of the result page at row size: green with a white inner rule, or white with the thick red edge. */
.learn-mini-plate {
  grid-area: plate;
  padding: var(--sp-1) var(--sp-2);
  border: var(--bw-wrong) solid var(--wrong);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  text-align: center;
  font-size: var(--learn-fs-mini-plate);
  font-weight: var(--fw-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-num);
  line-height: var(--lh-tight);
}
.learn-mini-plate--pass {
  border-color: var(--correct);
  background: var(--correct);
  color: var(--on-correct);
  box-shadow: inset 0 0 0 var(--rule-at-sm) var(--correct), inset 0 0 0 calc(var(--rule-at-sm) + var(--rule-w-sm)) var(--on-correct);
}

@media (hover: hover) {
  .learn-sittings-link:hover { background: var(--sunken); border-left-color: var(--ink); }
}

/* 1024px: two columns, the start and past sittings on the left. */
@media (min-width: 64rem) {
  .learn-preexam {
    display: grid;
    grid-template-columns: var(--side) minmax(0, 1fr);
    gap: var(--sp-6) var(--col-gap);
    align-items: start;
  }
  .learn-sittings-wide { display: flex; }
  .learn-sittings-link { display: none; }
}

/* A note beside the form, only where there is room for a second column. */
.learn-contact-aside { display: none; margin: 0; padding: var(--sp-4) var(--sp-5); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); color: var(--muted); font-size: var(--fs-small); }
@media (min-width: 64rem) {
  .learn-contact { display: grid; grid-template-columns: minmax(0, var(--learn-form-col)) var(--side); gap: var(--col-gap); align-items: start; }
  .learn-contact-aside { display: block; }
}

/* ---------- screens: shared layout and the set list ---------- */
:root { --learn-fs-title: 1.6rem; /* a set or topic opened in the right column */ }

.learn-screen { display: flex; flex-direction: column; gap: var(--sp-5); padding-bottom: var(--sp-4); }
.learn-col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.learn-col > * { margin: 0; }
.learn-col .learn-btn { align-self: flex-start; }
/* The header's nav groups are details elements with the same class; they are not screen sections. */
.learn-group:not(details) { display: flex; flex-direction: column; gap: var(--sp-2); }
.learn-group-label { margin: 0; color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-semi); }
.learn-count-line { margin: 0; color: var(--muted); }
.learn-title-lg { margin: 0; font-size: var(--learn-fs-title); line-height: var(--lh-tight); }
.learn-row-meta { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--muted); font-size: var(--fs-small); }
.learn-row-meta .learn-g { color: var(--ink); }

.learn-qlist { list-style: none; margin: 0; padding: 0; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); overflow: hidden; }
.learn-qlist li + li { border-top: var(--bw) solid var(--line); }
.learn-qrow {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  border-left: var(--bw-row) solid var(--clear);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--dur) ease;
}
/* The list clips its corners, so the focus ring is drawn inside the row. */
.learn-qrow:focus-visible { outline-offset: calc(-1 * var(--focus-w)); }
.learn-qrow__stem { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: var(--fw-row); line-height: var(--lh-stem); }
.learn-qrow[aria-current="true"] { background: var(--sunken); border-left-color: var(--ink); }
@media (hover: hover) {
  .learn-qrow:hover { background: var(--sunken); border-left-color: var(--ink); }
}

/* 1024px: the list on the left, the opened set on the right. */
@media (min-width: 64rem) {
  .learn-screen--side { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); gap: var(--col-gap); align-items: start; }
}

/* ---------- past mock tests and weak areas ---------- */
:root {
  --learn-mini-plate-w: 5.5rem; /* a past sitting's score plate: wide enough for "40 / 40" */
  --learn-fs-mini-plate: 1.15rem; /* the numerals on that plate */
  --learn-page-col: 40rem; /* one-column screens on wide windows */
}

.learn-page-col { display: flex; flex-direction: column; gap: var(--sp-5); max-width: var(--learn-page-col); }
.learn-page-col h1 { margin: 0; font-size: var(--fs-h1); }
.learn-stack { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }

.learn-sitting-list { list-style: none; margin: 0; padding: 0; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.learn-sitting-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--learn-mini-plate-w);
  grid-template-areas: "when plate" "state plate" "parts plate";
  align-items: center;
  gap: 0 var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}
.learn-sitting-list li + li { border-top: var(--bw) solid var(--line); }
.learn-sitting-when { grid-area: when; margin: 0; font-weight: var(--fw-row); }
.learn-sitting-state { grid-area: state; margin: 0; display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.learn-sitting-state--pass { color: var(--correct); }
.learn-sitting-state--fail { color: var(--wrong); }
/* Each part's score beside the total: the standard is judged per part, so 32 / 40 can still be "not met". */
.learn-sitting-parts { grid-area: parts; margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); color: var(--muted); font-size: var(--fs-small); }
.learn-score { color: var(--ink); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.learn-mini-plate {
  grid-area: plate;
  margin: 0;
  padding: var(--sp-1) var(--sp-2);
  border: var(--bw-wrong) solid var(--wrong);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  text-align: center;
  font-size: var(--learn-fs-mini-plate);
  font-weight: var(--fw-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-num);
  line-height: var(--lh-tight);
}
.learn-mini-plate--pass {
  border-color: var(--correct);
  background: var(--correct);
  color: var(--on-correct);
  box-shadow: inset 0 0 0 var(--rule-at-sm) var(--correct), inset 0 0 0 calc(var(--rule-at-sm) + var(--rule-w-sm)) var(--on-correct);
}

.learn-diag { list-style: none; margin: 0; padding: 0; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.learn-diag li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.learn-diag li + li { border-top: var(--bw) solid var(--line); }
.learn-topic { font-weight: var(--fw-row); }
.learn-based { color: var(--muted); font-size: var(--fs-small); }
.learn-verdict-text { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.learn-verdict-text--quiet { color: var(--muted); font-weight: var(--fw-semi); }
.learn-toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: var(--clear);
  color: var(--link);
  font: inherit;
  font-weight: var(--fw-semi);
  text-decoration: underline;
  text-underline-offset: .18em;
  cursor: pointer;
}
.learn-weak-entry { align-self: flex-start; }
@media (hover: hover) {
  .learn-toggle:hover { text-decoration-thickness: 2px; }
}

/* ---------- mock test result ---------- */
.learn-lede { margin: 0; color: var(--muted); font-size: var(--fs-lede); max-width: var(--prose); }
.learn-result { display: flex; flex-direction: column; gap: var(--sp-6); padding-bottom: var(--sp-4); }
.learn-result-head { display: flex; flex-direction: column; gap: var(--sp-1); }
.learn-result-head h1 { margin: 0; font-size: var(--fs-h1); }
.learn-result-body { display: contents; }
.learn-verdict-block { order: 1; display: flex; flex-direction: column; gap: var(--sp-1); }
.learn-plates { order: 2; }
.learn-by-topic { order: 3; }
.learn-actions { order: 4; }
.learn-caveat { order: 5; }

.learn-overall { margin: 0; display: flex; align-items: center; gap: var(--sp-2); color: var(--wrong); font-size: var(--fs-h2); font-weight: var(--fw-num); }
.learn-overall--pass { color: var(--correct); }
.learn-overall .learn-g { width: var(--key); height: var(--key); }
.learn-total { margin: 0; font-size: var(--fs-total); font-weight: var(--fw-num); font-variant-numeric: tabular-nums; letter-spacing: var(--track-num); line-height: var(--lh-tight); }
.learn-pass-rule { margin: 0; font-weight: var(--fw-semi); }
.learn-unanswered { margin: 0; color: var(--muted); }
.learn-num { font-variant-numeric: tabular-nums; font-weight: var(--fw-num); }

/* One plate per part, each carrying its score in big numerals; the three rows (name, number, state) are
   shared so the numbers line up when a name wraps. */
.learn-plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0 var(--sp-3); }
.learn-plate {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-items: start;
  row-gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border: var(--bw-wrong) solid var(--clear);
  border-radius: var(--radius);
}
.learn-plate h2 { margin: 0; align-self: end; font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: 0; }
.learn-plate__num { margin: 0; font-size: var(--fs-plate); font-weight: var(--fw-num); font-variant-numeric: tabular-nums; letter-spacing: var(--track-num); line-height: 1; }
.learn-plate__of { font-size: var(--fs-plate-of); letter-spacing: 0; }
.learn-plate__state { margin: 0; display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.learn-plate--pass {
  border-color: var(--correct);
  background: var(--correct);
  color: var(--on-correct);
  box-shadow: inset 0 0 0 var(--rule-at-lg) var(--correct), inset 0 0 0 calc(var(--rule-at-lg) + var(--rule-w-lg)) var(--on-correct);
}
.learn-plate--fail { border-color: var(--wrong); background: var(--card); }
.learn-plate--fail .learn-plate__state { color: var(--wrong); }

.learn-by-topic { display: flex; flex-direction: column; gap: var(--sp-2); }
.learn-by-topic h2 { margin: 0; font-size: var(--fs-h2); }
.learn-by-topic h3 { margin: var(--sp-3) 0 var(--sp-2); color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-semi); letter-spacing: 0; }
.learn-tally { list-style: none; margin: 0; padding: 0; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.learn-tally li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); }
.learn-tally li + li { border-top: var(--bw) solid var(--line); }

.learn-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.learn-actions .learn-text-link { align-self: flex-start; }
.learn-caveat { margin: 0; max-width: var(--prose); color: var(--muted); font-size: var(--fs-small); }

@media (min-width: 45rem) {
  .learn-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .learn-actions .learn-text-link { align-self: center; }
}
/* 1024px: the topic tallies move to the left column, the verdict, plates and actions to the right. */
@media (min-width: 64rem) {
  .learn-result { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); grid-template-areas: "head head" "side body"; gap: var(--sp-6) var(--col-gap); align-items: start; }
  .learn-result-head { grid-area: head; }
  .learn-by-topic { grid-area: side; }
  .learn-result-body { grid-area: body; display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
}

/* 480px: smaller plates so "18 / 20" stays on one line. */
@media (max-width: 30rem) {
  .learn-plate { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .learn-plate__num { font-size: var(--fs-plate-narrow); }
}

/* ---------- account ---------- */
:root { --learn-acct-gap: var(--sp-6); /* between the groups of the page */ }

.learn-acct { display: flex; flex-direction: column; gap: var(--learn-acct-gap); }
.learn-acct-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.learn-acct-stack > * { margin: 0; }
.learn-acct-stack--wide { align-items: stretch; }
.learn-acct-title { margin: 0; font-size: var(--fs-h1); }
.learn-acct-meta { color: var(--muted); font-size: var(--fs-small); }

/* Under 1024px one column in the narrow order (Help before Sign out); the left box dissolves. */
.learn-acct-left { display: contents; }
.learn-acct-left > .learn-acct-title { order: 1; }
.learn-acct-left > .learn-acct-access { order: 2; }
.learn-acct-left > .learn-acct-methods { order: 3; }
.learn-acct-help { order: 4; }
.learn-acct-left > .learn-acct-leave { order: 5; }

.learn-acct-list { list-style: none; margin: 0; padding: 0; width: 100%; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); overflow: hidden; }
.learn-acct-list > li + li { border-top: var(--bw) solid var(--line); }
.learn-acct-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-height: var(--tap); padding: var(--sp-3) var(--sp-4); }
.learn-acct-item .learn-grow, .learn-grow { flex: 1 1 auto; font-weight: var(--fw-row); }
a.learn-acct-item { color: var(--ink); text-decoration: none; }
a.learn-acct-item:focus-visible { outline-offset: calc(-1 * var(--focus-w)); }
.learn-acct-item__go { color: var(--muted); }

.learn-faq { display: flex; flex-direction: column; width: 100%; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.learn-faq details + details { border-top: var(--bw) solid var(--line); }
.learn-faq summary { display: flex; align-items: center; min-height: var(--tap); padding: var(--sp-3) var(--sp-4); font-weight: var(--fw-row); cursor: pointer; }
.learn-faq summary::-webkit-details-marker { display: none; }
.learn-faq summary::after { content: "+"; margin-left: auto; padding-left: var(--sp-3); color: var(--muted); font-weight: var(--fw-bold); }
.learn-faq details[open] summary::after { content: "\2212"; }
.learn-faq summary:focus-visible { outline-offset: calc(-1 * var(--focus-w)); }
.learn-faq-answer { margin: 0; padding: 0 var(--sp-4) var(--sp-4); color: var(--muted); }

.learn-acct-leave { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.learn-acct-leave > * { margin: 0; }
.learn-line-error { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0; color: var(--wrong); font-size: var(--fs-small); font-weight: var(--fw-semi); }
.learn-line-error .learn-g { margin-top: var(--sp-hair); }
.learn-google { display: inline-flex; min-height: var(--tap); align-items: center; }

/* 1024px: the account page splits into two equal halves, Help on the right. */
@media (min-width: 64rem) {
  .learn-acct--halves { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--learn-acct-gap) var(--col-gap); align-items: start; }
  .learn-acct-left { display: flex; flex-direction: column; gap: var(--learn-acct-gap); min-width: 0; }
}

/* The access card: the state card, plus the paid look, the Extend row and the cancel link. */
.learn-access-stack { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); width: 100%; }
.learn-access-stack > * { margin: 0; }
.learn-access--unpaid .learn-btn { align-self: stretch; }
.learn-acct-num { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); }
.learn-access--paid .learn-state-card__title .learn-g { color: var(--correct); }
.learn-link-button { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; border: 0; background: none; font: inherit; font-weight: var(--fw-semi); color: var(--link); text-decoration: underline; cursor: pointer; }
.learn-access-extend { flex-wrap: nowrap; align-items: flex-start; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.learn-access-extend__title { display: block; font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.learn-access-extend__body { display: block; margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-text); }

/* ---------- practice round ---------- */
:root { --learn-done-plate-min: 11rem; }
.learn-round { display: flex; flex-direction: column; gap: var(--sp-5); padding-bottom: var(--sp-4); }
/* The round lays out its own full-width rows (bar, grid, plate), each with its own gutter, so the page column's padding is dropped. */
.site-main.learn-wrap:has(> .learn-round) { padding: 0; }
/* The bar's fill and rule run to the window edges, the way the header's fill does (an outset border image adds no scrolling). */
.learn-round-bar { position: sticky; top: 0; z-index: 5; border-bottom: var(--bw) solid var(--line); border-image: linear-gradient(var(--card) calc(100% - var(--bw)), var(--line) 0) 0 0 1 0 fill / 0 0 var(--bw) 0 / 0 100vmax; }
.learn-round-bar .learn-wrap { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--bar-h); }
.learn-leave { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--brand); font: inherit; font-size: var(--fs-nav); font-weight: var(--fw-semi); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.learn-round-grid, .learn-round-single, .learn-round > .learn-screen, .learn-done { width: 100%; max-width: var(--page); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.learn-round > .learn-screen { padding-top: var(--sp-6); }
/* The round's column gap already puts 1.25rem between the bar and the card. */
.learn-round > .learn-state-card, .learn-round > .learn-loading-line { margin: var(--sp-1) var(--gutter) 0; }
.learn-round-single { padding-top: var(--sp-4); }
.learn-round-grid { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); gap: var(--col-gap); align-items: start; padding-top: var(--sp-6); }

.learn-tools { margin-left: auto; display: flex; gap: var(--sp-2); }
.learn-iconbtn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: var(--bw) solid var(--muted); border-radius: var(--radius); background: var(--card); color: var(--ink); cursor: pointer; transition: background-color var(--dur) ease; }
.learn-iconbtn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--card); }
.learn-iconbtn:disabled { border-color: var(--muted); background: var(--sunken); color: var(--muted); cursor: default; }

.learn-round-main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.learn-counter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); min-height: var(--tap); }
.learn-counter { margin: 0; font-size: var(--fs-counter); font-weight: var(--fw-label); font-variant-numeric: tabular-nums; }
.learn-looking { margin: 0; color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-semi); }
.learn-lane { display: flex; align-items: center; height: var(--lane-now-h); margin: 0; }
.learn-lane > i { flex: 1 1 0; height: var(--lane-h); }
.learn-lane__done { background: var(--ink); }
.learn-lane__todo { background: linear-gradient(90deg, var(--lane-dash) 0 55%, var(--clear) 55% 100%); }
.learn-lane > i.learn-lane__now { height: var(--lane-now-h); margin: 0 var(--lane-gap); background: var(--signal); border: var(--bw-strong) solid var(--ink); }
.learn-stem { margin: 0; font-size: var(--fs-stem-narrow); font-weight: var(--fw-stem); line-height: var(--lh-stem); }
.learn-sign { align-self: flex-start; margin: 0; padding: var(--sp-4); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.learn-sign img { display: block; width: var(--sign-w); max-width: 100%; height: auto; }

.learn-options { display: grid; gap: var(--sp-3); }
.learn-option { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--tap); padding: var(--sp-3) var(--sp-4); border: var(--bw) solid var(--ink); border-radius: var(--radius); background: var(--card); color: var(--ink); font: inherit; line-height: var(--lh-tight); text-align: left; cursor: pointer; }
.learn-option:disabled { cursor: default; }
.learn-key { flex: none; display: inline-grid; place-items: center; width: var(--key); height: var(--key); border-radius: var(--radius-round); background: var(--ink); color: var(--card); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1; }
.learn-opt-text { flex: 1 1 auto; min-width: 0; }
.learn-mark { flex: none; display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-small); font-weight: var(--fw-label); }
.learn-option--right { border-color: var(--correct); background: var(--correct); color: var(--on-correct); box-shadow: inset 0 0 0 var(--rule-at-sm) var(--correct), inset 0 0 0 calc(var(--rule-at-sm) + var(--rule-w-sm)) var(--on-correct); }
.learn-option--right .learn-key { background: var(--on-correct); color: var(--correct); }
.learn-option--wrong { border-color: var(--wrong); box-shadow: inset 0 0 0 calc(var(--bw-wrong) - var(--bw)) var(--wrong); }
.learn-option--wrong .learn-mark { color: var(--wrong); }

.learn-verdict { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.learn-verdict > * { margin: 0; }
.learn-verdict-line { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-bold); }
.learn-verdict-line .learn-g { color: var(--wrong); }
.learn-verdict-line--right .learn-g { color: var(--on-correct); }
.learn-verdict-plate { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-hair) var(--sp-3); border-radius: var(--radius); background: var(--correct); color: var(--on-correct); font-weight: var(--fw-label); box-shadow: inset 0 0 0 var(--rule-at-sm) var(--correct), inset 0 0 0 calc(var(--rule-at-sm) + var(--rule-w-sm)) var(--on-correct); }
.learn-explanation { max-width: var(--prose); }
.learn-explanation--quiet, .learn-manual-basis { color: var(--muted); font-size: var(--fs-small); }
.learn-rule-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink); font-weight: var(--fw-semi); }
.learn-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-2); }

.learn-round-side { display: flex; flex-direction: column; gap: var(--sp-3); }
.learn-round-title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-bold); }
.learn-qmap-card { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-4); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.learn-qmap-card .learn-btn { align-self: flex-start; }
.learn-qmap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-2); }
.learn-cell { position: relative; display: grid; place-items: center; width: 100%; height: var(--tap); padding: 0; border: var(--bw) dashed var(--muted); border-radius: var(--radius); background: var(--card); color: var(--muted); font: inherit; font-size: var(--fs-cell); font-weight: var(--fw-num); font-variant-numeric: tabular-nums; cursor: pointer; }
.learn-cell:disabled { cursor: default; }
.learn-cell--right { border: var(--bw) solid var(--correct); background: var(--correct); color: var(--on-correct); box-shadow: inset 0 0 0 var(--rule-at-sm) var(--correct), inset 0 0 0 calc(var(--rule-at-sm) + var(--rule-w-sm)) var(--on-correct); }
.learn-cell--wrong { border: var(--bw-wrong) solid var(--wrong); color: var(--wrong); }
.learn-cell--wrong::before { content: ""; position: absolute; top: var(--sp-1); right: var(--sp-hair); width: var(--slash-w); height: var(--bw-strong); background: var(--wrong); transform: rotate(-45deg); }
.learn-cell[aria-current="step"]::after { content: ""; position: absolute; left: var(--sp-2); right: var(--sp-2); top: calc(100% + var(--sp-1)); height: var(--marker-h); background: var(--ink); }

.learn-done { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); padding-top: var(--sp-6); }
.learn-done > *, .learn-done-plate > * { margin: 0; }
.learn-done-plate { display: flex; flex-direction: column; gap: var(--sp-1); min-width: var(--learn-done-plate-min); padding: var(--sp-4) var(--sp-6) var(--sp-5); border: var(--bw-wrong) solid var(--ink); border-radius: var(--radius); background: var(--card); box-shadow: inset 0 0 0 var(--rule-at-lg) var(--card), inset 0 0 0 calc(var(--rule-at-lg) + var(--rule-w-lg)) var(--ink); }
.learn-done-plate b { font-size: var(--fs-plate); font-weight: var(--fw-num); font-variant-numeric: tabular-nums; letter-spacing: var(--track-num); line-height: 1; }
.learn-done-plate__of { font-size: var(--fs-plate-of); letter-spacing: 0; }
.learn-done-plate__label { font-weight: var(--fw-bold); }
.learn-done-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (max-width: 30rem) {
  .learn-done-plate b { font-size: var(--fs-plate-narrow); }
  .learn-done, .learn-done-actions { align-items: stretch; }
  .learn-done-actions .learn-btn { flex: 1 1 100%; }
}
@media (min-width: 64rem) {
  .learn-stem { font-size: var(--fs-stem); }
}
@media (hover: hover) {
  .learn-iconbtn:not([aria-pressed="true"]):not(:disabled):hover, .learn-cell:not(:disabled):not(.learn-cell--right):hover { background: var(--sunken); }
}

/* Time left of a timed mock test; the last minute turns it to the yellow plate. */
.learn-timer { margin-left: auto; padding: 0 var(--sp-2); border-radius: var(--radius); font-size: var(--fs-counter); font-weight: var(--fw-num); font-variant-numeric: tabular-nums; }
.learn-timer + .learn-tools { margin-left: var(--sp-2); }
.learn-timer--urgent { background: var(--signal); color: var(--on-signal); }
.learn-round-side .learn-timer { margin-left: 0; align-self: flex-start; }

/* Study: a concept card's text (requirement A21) */
.learn-card-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.learn-card-body > * { margin: 0; max-width: var(--prose); }
.learn-card-body ul { padding-left: var(--sp-5); }
button.learn-text-link { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: var(--fw-semi); cursor: pointer; align-self: flex-start; }
.learn-qrow--locked { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-3); }
/* ---------- redemption code page ---------- */
:root { --learn-redeem-col: 26.25rem; /* the form column, 420px */ }

.learn-redeem { display: flex; flex-direction: column; gap: var(--sp-6); }
.learn-redeem__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); min-width: 0; width: 100%; max-width: var(--learn-redeem-col); }
.learn-redeem__body > * { margin: 0; }
.learn-redeem__body h1 { font-size: var(--fs-h1); }
.learn-redeem__form { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); width: 100%; }
.learn-redeem__form > * { margin: 0; }
.learn-redeem__body > .learn-state-card { align-self: stretch; }
.learn-field-label { font-weight: var(--fw-semi); }
.learn-input {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  border: var(--bw) solid var(--muted);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
}
.learn-input:disabled { color: var(--muted); }
.learn-state-card--ok { border-left: var(--bw-row) solid var(--correct); }
.learn-state-card--ok .learn-state-card__title .learn-g { color: var(--correct); }
.learn-redeem__aside { margin: 0; color: var(--muted); font-size: var(--fs-small); }

/* 1024px: the form column keeps its width and the note moves beside it, level with the heading. */
@media (min-width: 64rem) {
  .learn-redeem { display: grid; grid-template-columns: var(--learn-redeem-col) minmax(0, 1fr); gap: var(--col-gap); align-items: start; }
  .learn-redeem__aside { padding-top: var(--sp-4); }
}
/* ---------- sign-in screen ---------- */
.learn-signin { display: flex; flex-direction: column; gap: var(--sp-6); }
.learn-signin__body { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-4); min-width: 0; width: 100%; max-width: var(--learn-redeem-col); }
.learn-signin__body > * { margin: 0; }
.learn-signin__title { font-size: var(--fs-h1); }
.learn-signin__text { color: var(--muted); }
.learn-signin__status { padding: var(--sp-3) var(--sp-4); background: var(--sunken); border-radius: var(--radius); font-weight: var(--fw-semi); }
.learn-signin__google { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.learn-signin__or { color: var(--muted); text-align: center; }
.learn-signin__form { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); width: 100%; }
.learn-signin__form > * { margin: 0; }
.learn-signin__code { letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.learn-signin__last { flex: none; color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
/* The send button fills the row; the last-used mark sits beside it. */
.learn-signin__row { display: flex; align-items: center; gap: var(--sp-3); }
.learn-signin__row .learn-btn { flex: 1 1 auto; min-width: 0; }
.learn-signin__links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.learn-signin__links .learn-link-button:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.learn-signin__legal { color: var(--muted); font-size: var(--fs-small); }
.learn-signin__turnstile:empty { display: none; }
.learn-signin__aside { margin: 0; color: var(--muted); font-size: var(--fs-small); }

/* 1024px: the form column keeps its width and the note moves beside it. */
@media (min-width: 64rem) {
  .learn-signin { display: grid; grid-template-columns: var(--learn-redeem-col) minmax(0, 1fr); gap: var(--col-gap); align-items: start; }
  .learn-signin__aside { padding-top: var(--sp-4); }
}
/* ---------- landing page ---------- */
.learn-landing { display: flex; flex-direction: column; gap: var(--sp-5); }
.learn-landing > * { margin: 0; }
.learn-landing__lede { color: var(--muted); }
.learn-landing__grid { display: flex; flex-direction: column; gap: var(--sp-6); }
.learn-landing__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sp-3); align-content: start; margin: 0; padding: 0; list-style: none; }
.learn-landing__tile { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.learn-landing__tile > * { margin: 0; }
.learn-landing__tile h2 { font-size: var(--fs-body); }
.learn-landing__tile p { color: var(--muted); }

/* The form on the landing page sits in a card; the code step has none. */
.learn-landing__grid:not(.learn-landing__grid--alone) .learn-signin--embedded { padding: var(--sp-6) var(--sp-5); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.learn-signin--embedded { width: 100%; max-width: var(--learn-redeem-col); }
/* The card is one column; the wide-screen two-column form-and-aside grid on .learn-signin would make its first track wider than the card's padded box and push the controls out. */
.learn-signin--embedded { display: flex; flex-direction: column; }
.learn-signin--embedded .learn-signin__body { max-width: none; }
.learn-signin--embedded .learn-signin__title { font-size: var(--fs-h2); }
.learn-signin--embedded .learn-signin__form { gap: var(--sp-2); }
@media (max-width: 30rem) {
  .learn-landing__grid:not(.learn-landing__grid--alone) .learn-signin--embedded { padding: var(--sp-5) var(--sp-4); }
  /* The code step has no card, but the sheet keeps the same inset on a phone. */
  .learn-landing__grid--alone .learn-signin--embedded { padding: var(--sp-5) var(--sp-4); }
}

/* 1024px: the form keeps its column and the offer sits beside it. */
@media (min-width: 64rem) {
  .learn-landing__grid:not(.learn-landing__grid--alone) { display: grid; grid-template-columns: var(--learn-redeem-col) minmax(0, 1fr); gap: var(--col-gap); align-items: start; }
}
/* ---------- price page ---------- */
.learn-pricing { display: flex; flex-direction: column; gap: var(--sp-6); }
.learn-pricing h1 { margin: 0; font-size: var(--fs-h1); }
.learn-pricing__left, .learn-pricing__right { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.learn-pricing__right > * { margin: 0; }
.learn-pricing__pitch { display: flex; flex-direction: column; gap: var(--sp-3); }
.learn-pricing__pitch > p { margin: 0; }
.learn-pricing__features { margin: 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.learn-pricing__plans { display: flex; flex-direction: column; gap: var(--sp-3); }
.learn-plan { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--card); cursor: pointer; }
.learn-plan--on { border-color: var(--brand); background: var(--brand-tint); }
.learn-plan input { margin-top: var(--sp-1); }
.learn-plan__body { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.learn-plan__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.learn-plan__name { font-weight: var(--fw-bold); }
.learn-plan__badge { padding: 0 var(--sp-2); border-radius: var(--radius); background: var(--sunken); font-size: var(--fs-small); font-weight: var(--fw-semi); }
.learn-plan__price { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
.learn-plan__total, .learn-plan__renews, .learn-pricing__note { color: var(--muted); font-size: var(--fs-small); }
.learn-pricing__links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-small); }
.learn-pricing__loading { margin: 0; color: var(--muted); }
.learn-checkout { padding: var(--sp-6); }
.learn-checkout-line { margin: 0; color: var(--muted); }
.learn-pricing__failed { margin: 0; color: var(--wrong); font-weight: 600; }

/* 1024px: the pitch sits beside the plan column. */
@media (min-width: 64rem) {
  .learn-pricing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--col-gap); align-items: start; }
  /* One block only (paid, unconfirmed, questions unreadable): 68% of the content column, in the middle, its content centred too. */
  .learn-pricing--single { display: flex; flex-direction: column; align-items: stretch; width: 68%; margin-inline: auto; text-align: center; }
  .learn-pricing--single .learn-state-card { max-width: none; align-items: center; }
  .learn-pricing--single .learn-state-card__title, .learn-pricing--single .learn-state-card__actions { justify-content: center; }
}
/* ---------- Mock test: start page, answering, replaced-on-another-device ---------- */
:root {
  --learn-part-gap: var(--sp-3); /* the break in the lane line and in the question grid between part 1 and part 2 */
  --learn-chosen-edge: 3px; /* a chosen answer in the mock test: the same weight as a wrong edge, in ink */
}

/* Shared on these screens */
.learn-page-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); max-width: var(--prose); }
.learn-page-stack > * { margin: 0; }
.learn-page-stack .learn-state-card { align-self: stretch; }
.learn-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

/* Start page: the facts list and the free-pool note */
.learn-exam-facts { list-style: none; margin: 0; padding: 0; align-self: stretch; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.learn-exam-facts li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); }
.learn-exam-facts li + li { border-top: var(--bw) solid var(--line); }
.learn-fact-name { font-weight: var(--fw-row); }
.learn-fact-value { color: var(--muted); font-variant-numeric: tabular-nums; }
.learn-free-pool { margin: 0; padding-left: var(--sp-4); border-left: var(--bw-row) solid var(--ink); }

/* Answering: the lane line keeps the two parts apart with a gap; there is no right or wrong in it, only answered or not. */
.learn-lane > i.learn-lane__part { flex: 0 0 var(--learn-part-gap); background: var(--clear); }
/* The part the question belongs to sits beside the counter; on a phone it takes its own line above it. */
.learn-part-name { margin: 0; color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-semi); }
@media (max-width: 35rem) {
  .learn-part-name { order: -1; flex-basis: 100%; }
}
/* A chosen answer: a thick ink edge and the neutral ground. No green, no red, no glyph: the exam gives no verdict. */
.learn-option[aria-pressed="true"] {
  background: var(--sunken);
  box-shadow: inset 0 0 0 calc(var(--learn-chosen-edge) - var(--bw)) var(--ink);
}

/* The question grid: part 1 and part 2 are two blocks; every cell can be pressed. */
.learn-qmap-parts { display: flex; flex-direction: column; gap: calc(var(--sp-4) + var(--learn-part-gap)); }
.learn-qmap-count { margin: 0; color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.learn-cell--answered { border: var(--bw) solid var(--ink); background: var(--sunken); color: var(--ink); }

/* Replaced on another device: the error card spans the column; under it the question stays as it was, nothing can be pressed. */
.learn-exam--ended .learn-state-card { max-width: none; }
.learn-exam--ended .learn-option,
.learn-exam--ended .learn-cell { pointer-events: none; cursor: default; }
/* ---------- Mistakes: sources under a row, the "not saved" tag, the Removed / Undo bar ---------- */
.learn-sources { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); color: var(--muted); font-size: var(--fs-small); }
.learn-source { display: inline-flex; align-items: center; gap: var(--sp-1); }
.learn-source--wrong .learn-g { color: var(--wrong); }
/* A removal that did not reach the server: the row stays, tagged with the dashed edge of something not done yet. */
.learn-unsaved-mark { display: inline-flex; align-items: center; padding: 0 var(--sp-2); border: var(--bw) dashed var(--ink); border-radius: var(--radius); color: var(--ink); font-weight: var(--fw-semi); }
.learn-qlist--locked .learn-qrow { color: var(--muted); }
.learn-col .learn-state-card { max-width: none; }
.learn-col .learn-state-card .learn-btn { align-self: auto; }
.learn-undo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding: var(--sp-2) var(--sp-4); border: var(--bw) solid var(--ink); border-radius: var(--radius); background: var(--sunken); font-weight: var(--fw-semi); }
.learn-undo p { margin: 0; }
.learn-mistake-detail .learn-back-link { margin-bottom: calc(-1 * var(--sp-2)); }