/* 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; }
  .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)); }