/* Course app — premium theme. Shared across courses; nothing here is subject-specific. */
:root,
[data-theme="midnight"] {
  --bg: #0b1220;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-solid: #141f36;
  --border: rgba(255, 255, 255, 0.09);
  --text: #e8edf7;
  --text-soft: #d5dcea;
  --muted: #8b97ad;
  --gold: #d4af5f;
  --gold-2: #a7853f;
  --gold-bright: #eccb84;
  --gold-soft: rgba(212, 175, 95, .45);
  --gold-wash: rgba(212, 175, 95, .07);
  --accent: #4f8ff7;
  --accent-wash: rgba(79, 143, 247, .12);
  --accent-chip: rgba(79, 143, 247, .08);
  --accent-chip-border: rgba(79, 143, 247, .2);
  --green: #3ecf8e;
  --red: #f36c6c;
  --overlay-1: rgba(255, 255, 255, .03);
  --overlay-2: rgba(255, 255, 255, .06);
  --overlay-3: rgba(255, 255, 255, .1);
  --overlay-hover: rgba(255, 255, 255, .065);
  --track-bg: rgba(255, 255, 255, .08);
  --divider: rgba(255, 255, 255, .05);
  --input-bg: rgba(0, 0, 0, .3);
  --switch-bg: rgba(0, 0, 0, .28);
  --glow-1: rgba(79, 143, 247, 0.14);
  --glow-2: rgba(212, 175, 95, 0.10);
  --hero-grad: linear-gradient(120deg, #17233f 0%, #101a30 55%, #16213a 100%);
  --card-grad-a: #1a2745;
  --card-grad-b: #121c33;
  --card-grad-c: #253355;
  --card-grad-d: #16223d;
  --selection: rgba(212, 175, 95, .35);
  --dark-ink: #17130b;
  --radius: 16px;
  --sidebar-w: 292px;
  font-size: 16px;
}

[data-theme="lavender"] {
  --bg: #f6f3fc;
  --panel: rgba(109, 40, 217, 0.045);
  --panel-solid: #ffffff;
  --border: rgba(109, 40, 217, 0.14);
  --text: #2c1a4d;
  --text-soft: #4a3670;
  --muted: #7c6a99;
  --gold: #8b5cf6;
  --gold-2: #6d28d9;
  --gold-bright: #6d28d9;
  --gold-soft: rgba(139, 92, 246, .45);
  --gold-wash: rgba(139, 92, 246, .10);
  --accent: #6366f1;
  --accent-wash: rgba(99, 102, 241, .14);
  --accent-chip: rgba(99, 102, 241, .09);
  --accent-chip-border: rgba(99, 102, 241, .24);
  --green: #16a34a;
  --red: #dc2626;
  --overlay-1: rgba(109, 40, 217, .035);
  --overlay-2: rgba(109, 40, 217, .06);
  --overlay-3: rgba(109, 40, 217, .09);
  --overlay-hover: rgba(109, 40, 217, .05);
  --track-bg: rgba(109, 40, 217, .08);
  --divider: rgba(109, 40, 217, .09);
  --input-bg: rgba(109, 40, 217, .045);
  --switch-bg: rgba(109, 40, 217, .06);
  --glow-1: rgba(139, 92, 246, 0.14);
  --glow-2: rgba(216, 180, 254, 0.28);
  --hero-grad: linear-gradient(120deg, #f4eefd 0%, #ece2fb 55%, #f6eefe 100%);
  --card-grad-a: #ffffff;
  --card-grad-b: #f3ecfd;
  --card-grad-c: #ffffff;
  --card-grad-d: #f3ecfd;
  --selection: rgba(139, 92, 246, .3);
  --dark-ink: #ffffff;
}

/* ---------------------------------------------------------------------
   Paper. A plain white page, with the course cards left exactly as they
   are on midnight.

   Page-level tokens are light, so the background, header, headings and
   body text read as a white site. The cards then re-declare the midnight
   tokens for their own subtree, the same trick .auth-gate uses further
   down this file, so everything inside a card keeps the dark treatment
   and the artwork still sits on a dark ground.
   ------------------------------------------------------------------ */
[data-theme="paper"] {
  --bg: #ffffff;
  --panel: rgba(15, 23, 42, 0.028);
  --panel-solid: #ffffff;
  --border: rgba(15, 23, 42, 0.11);
  --text: #16203a;
  --text-soft: #2e3a55;
  /* Darker than daylight's muted. This page is pure white rather than
     #f2f4fa, and the section labels are small uppercase text, which is
     where a weak grey stops being readable. */
  --muted: #4b586f;
  --gold: #b8862f;
  --gold-2: #8a6425;
  --gold-bright: #7d5310;
  --gold-soft: rgba(184, 134, 47, .5);
  --gold-wash: rgba(184, 134, 47, .10);
  --accent: #2f6fed;
  --accent-wash: rgba(47, 111, 237, .10);
  --accent-chip: rgba(47, 111, 237, .06);
  --accent-chip-border: rgba(47, 111, 237, .2);
  --green: #1f9d66;
  --red: #d33a3a;
  --overlay-1: rgba(15, 23, 42, .03);
  --overlay-2: rgba(15, 23, 42, .055);
  --overlay-3: rgba(15, 23, 42, .085);
  --overlay-hover: rgba(15, 23, 42, .045);
  --track-bg: rgba(15, 23, 42, .08);
  --divider: rgba(15, 23, 42, .085);
  --input-bg: rgba(15, 23, 42, .04);
  --switch-bg: rgba(15, 23, 42, .055);
  /* No wash on the page. White means white. */
  --glow-1: transparent;
  --glow-2: transparent;
  --hero-grad: linear-gradient(120deg, #f7f9fd 0%, #f1f4fa 55%, #f7f9fd 100%);
  --card-grad-a: #ffffff;
  --card-grad-b: #f4f6fb;
  --card-grad-c: #ffffff;
  --card-grad-d: #f4f6fb;
  --selection: rgba(184, 134, 47, .3);
  --dark-ink: #16203a;
}

/* The cards keep the midnight palette, scoped to themselves. */
[data-theme="paper"] .course-card {
  --panel: rgba(255, 255, 255, 0.045);
  --panel-solid: #141f36;
  --border: rgba(255, 255, 255, 0.09);
  --text: #e8edf7;
  --text-soft: #d5dcea;
  --muted: #8b97ad;
  --gold: #d4af5f;
  --gold-2: #a7853f;
  --gold-bright: #eccb84;
  --gold-soft: rgba(212, 175, 95, .45);
  --gold-wash: rgba(212, 175, 95, .07);
  --accent: #4f8ff7;
  --accent-wash: rgba(79, 143, 247, .12);
  --accent-chip: rgba(79, 143, 247, .08);
  --accent-chip-border: rgba(79, 143, 247, .2);
  --green: #3ecf8e;
  --red: #f36c6c;
  --overlay-1: rgba(255, 255, 255, .03);
  --overlay-2: rgba(255, 255, 255, .06);
  --overlay-3: rgba(255, 255, 255, .1);
  --overlay-hover: rgba(255, 255, 255, .065);
  --track-bg: rgba(255, 255, 255, .08);
  --divider: rgba(255, 255, 255, .05);
  --card-grad-a: #1a2745;
  --card-grad-b: #121c33;
  --card-grad-c: #253355;
  --card-grad-d: #16223d;
  --dark-ink: #17130b;
  color: var(--text);
}

/* A dark card on a white page needs a real edge and a shadow, or it
   floats. Midnight gets that contrast from the page behind it. */
[data-theme="paper"] .course-card {
  border-color: rgba(15, 23, 42, .14);
  box-shadow: 0 6px 20px rgba(15, 23, 42, .12);
}
[data-theme="paper"] .course-card:hover,
[data-theme="paper"] .course-card:focus-visible {
  border-color: var(--gold-soft);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .22);
}

[data-theme="daylight"] {
  --bg: #f2f4fa;
  --panel: rgba(15, 23, 42, 0.035);
  --panel-solid: #ffffff;
  --border: rgba(15, 23, 42, 0.10);
  --text: #1b2438;
  --text-soft: #33405c;
  --muted: #64748b;
  --gold: #c9973f;
  --gold-2: #8a6425;
  --gold-bright: #8a5a12;
  --gold-soft: rgba(201, 151, 63, .5);
  --gold-wash: rgba(201, 151, 63, .12);
  --accent: #2f6fed;
  --accent-wash: rgba(47, 111, 237, .12);
  --accent-chip: rgba(47, 111, 237, .07);
  --accent-chip-border: rgba(47, 111, 237, .22);
  --green: #1f9d66;
  --red: #d33a3a;
  --overlay-1: rgba(15, 23, 42, .035);
  --overlay-2: rgba(15, 23, 42, .06);
  --overlay-3: rgba(15, 23, 42, .09);
  --overlay-hover: rgba(15, 23, 42, .05);
  --track-bg: rgba(15, 23, 42, .08);
  --divider: rgba(15, 23, 42, .09);
  --input-bg: rgba(15, 23, 42, .045);
  --switch-bg: rgba(15, 23, 42, .06);
  --glow-1: rgba(47, 111, 237, 0.10);
  --glow-2: rgba(201, 151, 63, 0.14);
  --hero-grad: linear-gradient(120deg, #eef2fb 0%, #e6ecf9 55%, #eef1fa 100%);
  --card-grad-a: #ffffff;
  --card-grad-b: #eef1f8;
  --card-grad-c: #ffffff;
  --card-grad-d: #eef1f8;
  --selection: rgba(201, 151, 63, .3);
  --dark-ink: #1b2438;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, sans-serif;
  background:
    radial-gradient(1100px 600px at 85% -10%, var(--glow-1), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--glow-2), transparent 60%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
}

/* ---------- Auth gate ---------- */
.auth-gate {
  /* The login/sign-up screen always uses this warm cream palette, independent of
     whichever app theme (midnight/lavender/daylight) is active — first impression
     should be consistently light and welcoming regardless of a returning student's
     last-used theme. Reuses the same variable names as the rest of the CSS so every
     element inside (tabs, inputs, hints, banners) stays automatically readable. */
  --bg: #f7f0e0;
  --panel-solid: #fffaf0;
  --border: rgba(120, 98, 60, 0.18);
  --text: #3a2f1e;
  --text-soft: #4a3d28;
  --muted: #8a7859;
  --input-bg: rgba(120, 98, 60, 0.05);
  --switch-bg: rgba(120, 98, 60, 0.08);
  --gold: #c9973f;
  --gold-2: #8a6425;
  --gold-bright: #8a5a12;
  --gold-soft: rgba(201, 151, 63, .5);
  --gold-wash: rgba(201, 151, 63, .14);
  --dark-ink: #241a08;
  --glow-1: rgba(201, 151, 63, .12);
  --glow-2: rgba(139, 92, 246, .06);
  --green: #1f9d66;
  --red: #d33a3a;

  display: none; position: fixed; inset: 0; z-index: 1000;
  align-items: center; justify-content: center; padding: 20px;
  background:
    radial-gradient(1100px 600px at 85% -10%, var(--glow-1), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--glow-2), transparent 60%),
    var(--bg);
}
.auth-card {
  width: min(400px, 100%); background: var(--panel-solid); border: 1px solid var(--border);
  border-radius: 20px; padding: 32px 30px; box-shadow: 0 20px 60px rgba(120, 98, 60, .15);
}
.auth-logo { display: block; width: 100%; max-width: 220px; margin: 0 auto 22px; }
.auth-tabs { display: flex; background: var(--switch-bg); border: 1px solid var(--border); border-radius: 12px; padding: 4px; margin-bottom: 18px; }
.auth-tab { flex: 1; padding: 9px 0; border: 0; border-radius: 9px; cursor: pointer; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; transition: all .2s; }
.auth-tab.active { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: var(--dark-ink); }
.auth-invite-note { background: var(--gold-wash); border: 1px solid var(--gold-soft); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--text-soft); margin-bottom: 16px; }
.auth-error { color: var(--red); font-size: 13px; min-height: 0; }
.auth-error:not(:empty) { margin-bottom: 12px; }
.auth-hint { text-align: center; font-size: 13px; color: var(--muted); margin-top: 16px; }
.auth-hint a { color: var(--gold-bright); text-decoration: none; font-weight: 600; }
.auth-hint a:hover { text-decoration: underline; }

::selection { background: var(--selection); }

/* ---------- Theme toggle ---------- */
.theme-toggle {
  position: fixed; top: 20px; right: 26px; z-index: 300;
  display: flex; gap: 4px;
  background: var(--switch-bg); border: 1px solid var(--border);
  border-radius: 13px; padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}
.theme-toggle button {
  width: 36px; height: 36px; border: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 16px;
  display: grid; place-items: center; transition: all .18s;
}
.theme-toggle button:hover { background: var(--overlay-2); color: var(--text); }
.theme-toggle button.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--dark-ink); box-shadow: 0 2px 10px var(--gold-soft);
}

.search-trigger {
  position: fixed; top: 20px; right: 168px; z-index: 300;
  width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--border);
  display: grid; place-items: center; cursor: pointer;
  background: var(--switch-bg); color: var(--muted);
  box-shadow: 0 8px 24px rgba(0,0,0,.22); backdrop-filter: blur(10px);
  transition: all .18s;
}
.search-trigger:hover { color: var(--text); background: var(--overlay-2); }

.search-overlay {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.search-overlay.open { display: flex; }
.search-box {
  width: min(560px, 90vw); max-height: 72vh; display: flex; flex-direction: column;
  background: var(--panel-solid); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
#search-input {
  width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font: inherit; font-size: 16px; padding: 12px 14px; flex-shrink: 0;
}
#search-input:focus { outline: none; border-color: var(--gold); }
.search-results { overflow-y: auto; margin-top: 12px; flex: 1; }
.search-result-item { padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background .15s; }
.search-result-item:hover { background: var(--overlay-2); }
.search-result-term { font-weight: 700; color: var(--gold-bright); font-size: 14.5px; }
.search-result-meta { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 1px; }
.search-result-def { font-size: 13px; color: var(--text-soft); margin-top: 3px; }
.search-hint { margin-top: 10px; font-size: 11.5px; color: var(--muted); text-align: right; flex-shrink: 0; }
.search-empty { padding: 24px 4px; text-align: center; color: var(--muted); font-size: 14px; }

.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 900; overflow: hidden; }
.confetti-piece {
  position: absolute; top: -20px; width: 9px; height: 14px; opacity: .9; border-radius: 2px;
  animation-name: confetti-fall; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(105vh) rotate(360deg); opacity: 0; }
}

/* ---------- Layout ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--overlay-1), transparent);
  border-right: 1px solid var(--border);
  padding: 28px 20px;
  overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--overlay-3); border-radius: 8px; }

.main { flex: 1; padding: 36px 48px 80px; max-width: 1060px; margin: 0 auto; width: 100%; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--overlay-3); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-soft); }

button:focus-visible, input:focus-visible, select:focus-visible, .unit-card:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* ---------- Brand ---------- */
.brand {
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  padding: 6px 4px 20px; margin-bottom: 12px;
  transition: transform .2s ease;
}
.brand:hover { transform: translateY(-2px); }
.brand-logo-full {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.25));
}
/* The logo's wordmark is dark navy — invert it to a light silhouette on dark themes so it stays legible. */
[data-theme="midnight"] .brand-logo-full {
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.4));
}

.copyright {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 10.5px; color: var(--muted); opacity: .75; line-height: 1.6;
}

/* ---------- View switch ---------- */
.seg-switch {
  display: flex; background: var(--switch-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 4px; margin-bottom: 22px;
}
.seg-switch button {
  flex: 1; padding: 9px 0; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600;
  transition: all .2s;
}
.seg-switch button.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--dark-ink); box-shadow: 0 2px 10px var(--gold-soft);
}

.lvl-chip {
  display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700;
  background: var(--accent-chip); border: 1px solid var(--accent-chip-border); color: var(--text);
  letter-spacing: .3px; vertical-align: middle;
}

/* ---------- Nav ---------- */
.nav-label { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin: 10px 6px 10px; }
.unit-nav { display: flex; flex-direction: column; gap: 6px; }
.unit-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent; transition: all .18s;
}
.unit-link:hover { background: var(--panel); }
.unit-link.active { background: var(--panel); border-color: var(--border); }
.unit-link .u-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-chip); font-size: 16px;
}
.unit-link .u-meta { min-width: 0; flex: 1; }
.unit-link .u-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unit-link .u-num { font-size: 11px; color: var(--muted); }
.unit-link .u-check { font-size: 12px; color: var(--green); }

.exit-test-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px; cursor: pointer; margin-top: 10px;
  border: 1px solid var(--gold-soft); background: var(--gold-wash); transition: all .18s;
}
.exit-test-link:hover { background: var(--overlay-hover); }
.exit-test-link.active { border-color: var(--gold); }
.exit-test-link .u-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-2)); font-size: 16px;
}
.exit-test-link .u-meta { min-width: 0; flex: 1; }
.exit-test-link .u-title { font-size: 13.5px; font-weight: 700; color: var(--gold-bright); }
.exit-test-link .u-num { font-size: 11px; color: var(--muted); }
.exit-test-link .u-check { font-size: 12px; color: var(--green); }

.teacher-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px; cursor: pointer; margin-top: 8px;
  border: 1px solid var(--border); background: var(--overlay-1); transition: all .18s;
}
.teacher-link:hover { background: var(--overlay-hover); }
.teacher-link.active { border-color: var(--accent); }
.teacher-link .u-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-chip); font-size: 15px;
}
.teacher-link .u-meta { min-width: 0; flex: 1; }
.teacher-link .u-title { font-size: 13.5px; font-weight: 700; }
.teacher-link .u-num { font-size: 10.5px; color: var(--muted); }

.sidebar-footer { margin-top: auto; padding-top: 20px; font-size: 11.5px; color: var(--muted); line-height: 1.6; }

/* ---------- Dashboard ---------- */
.hero {
  position: relative; z-index: 0; overflow: hidden;
  border-radius: 24px; padding: 44px 46px;
  background: var(--hero-grad);
  border: 1px solid var(--border);
  margin-bottom: 30px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 50px -20px rgba(0,0,0,.35);
}
.hero-art {
  position: absolute; top: 0; right: 0; height: 100%; width: 42%; z-index: -1;
  object-fit: cover; object-position: 35% center; pointer-events: none;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to right, transparent, black 60%);
  mask-image: linear-gradient(to right, transparent, black 60%);
}
[data-theme="daylight"] .hero-art, [data-theme="lavender"] .hero-art { opacity: .75; }
.hero .eyebrow { color: var(--gold-bright); font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; }
.hero h2 { font-size: 34px; font-weight: 800; line-height: 1.15; max-width: 560px; }
.hero p { color: var(--muted); margin-top: 12px; max-width: 540px; font-size: 15.5px; line-height: 1.6; }
.course-note {
  margin-top: 18px; max-width: 620px; font-size: 13.5px; line-height: 1.6; color: var(--text-soft);
  background: var(--gold-wash); border: 1px solid var(--gold-soft); border-radius: 12px; padding: 12px 16px;
}
.course-note strong { color: var(--gold-bright); }
.hero-stats { display: flex; gap: 34px; margin-top: 28px; }
.hero-stat .v { font-size: 26px; font-weight: 800; color: var(--gold-bright); }
.hero-stat .l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }

.review-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 24px; margin-top: 18px; box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.review-banner-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.review-banner-sub { color: var(--muted); font-size: 13.5px; }

.review-ratings { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.rating-btn { color: #fff; font-weight: 700; }
.rating-again { background: #c0392b; }
.rating-hard { background: #c9761f; }
.rating-good { background: #2f8f5b; }
.rating-easy { background: #2a6fd6; }
.rating-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }

.cert-id { margin-top: 20px; font-size: 11px; color: var(--muted); letter-spacing: .3px; line-height: 1.6; word-break: break-all; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 2px 16px; }
.section-head h3 { font-size: 20px; font-weight: 700; }
.section-head .hint { color: var(--muted); font-size: 13px; }

.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.unit-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.unit-card:hover { transform: translateY(-4px); border-color: var(--gold-soft); background: var(--overlay-hover); box-shadow: 0 16px 34px -12px rgba(0,0,0,.28); }
.unit-card .top { display: flex; justify-content: space-between; align-items: flex-start; }
.unit-card .icon {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 22px;
  background: linear-gradient(135deg, var(--accent-chip), var(--gold-wash));
  border: 1px solid var(--border);
}
.unit-card h4 { font-size: 17px; font-weight: 700; }
.unit-card .sub { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.unit-card .unit-tag { font-size: 11px; color: var(--gold-bright); letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; }

.progress-ring { position: relative; width: 46px; height: 46px; }
.progress-ring svg { transform: rotate(-90deg); }
.progress-ring .pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--gold-bright); }

.bar { height: 6px; border-radius: 4px; background: var(--track-bg); overflow: hidden; }
.bar > div { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); transition: width .4s; }

/* ---------- Unit page ---------- */
.crumb { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; cursor: pointer; }
.crumb:hover { color: var(--gold-bright); }

.unit-head { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; }
.unit-head .big-icon {
  width: 74px; height: 74px; border-radius: 20px; display: grid; place-items: center; font-size: 36px;
  background: linear-gradient(135deg, var(--accent-chip), var(--gold-wash));
  border: 1px solid var(--border);
}
.unit-head h2 { font-size: 28px; font-weight: 800; }
.unit-head .sub { color: var(--muted); margin-top: 4px; }
.et-timer {
  font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--gold-bright); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 18px; background: var(--gold-wash); white-space: nowrap;
}
.et-timer.et-timer-warn { color: var(--red); border-color: rgba(220,60,60,.4); }

.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 28px; flex-wrap: wrap; }
.tabs button {
  background: none; border: 0; color: var(--muted); font: inherit; font-size: 14.5px; font-weight: 600;
  padding: 12px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  border-radius: 10px 10px 0 0; transition: color .15s, background .15s;
}
.tabs button:hover { color: var(--text); background: var(--overlay-1); }
.tabs button.active { color: var(--gold-bright); border-bottom-color: var(--gold); background: var(--gold-wash); }
.tabs button .done-dot { color: var(--green); margin-left: 5px; }

.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 28px; margin-bottom: 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  transition: box-shadow .2s ease;
}
.card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.card h4 { font-size: 17px; margin-bottom: 12px; font-weight: 700; }
.card p.lede { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head-row h4 { margin-bottom: 0; }

.objectives li { margin: 8px 0 8px 20px; line-height: 1.5; font-size: 15px; }
.objectives li::marker { color: var(--gold); }

/* ---------- Flashcards ---------- */
.flash-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.flashcard {
  width: min(560px, 100%); height: 270px; perspective: 1200px; cursor: pointer;
}
.flashcard .inner {
  position: relative; width: 100%; height: 100%;
  transition: transform .55s cubic-bezier(.4, .1, .2, 1); transform-style: preserve-3d;
}
.flashcard.flipped .inner { transform: rotateY(180deg); }
.flash-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 20px; padding: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  border: 1px solid var(--border);
}
.flash-front { background: linear-gradient(135deg, var(--card-grad-a), var(--card-grad-b)); }
.flash-front .term { font-size: 30px; font-weight: 800; color: var(--gold-bright); }
.flash-front .pos { color: var(--muted); font-size: 13px; margin-top: 8px; font-style: italic; }
.flash-front .tap { position: absolute; bottom: 18px; font-size: 12px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.flash-back { background: linear-gradient(135deg, var(--card-grad-c), var(--card-grad-d)); transform: rotateY(180deg); }
.flash-back .def { font-size: 17px; line-height: 1.55; }
.flash-back .ex { margin-top: 16px; color: var(--gold-bright); font-style: italic; font-size: 14.5px; line-height: 1.5; }
.flash-controls { display: flex; align-items: center; gap: 16px; }
.flash-count { color: var(--muted); font-size: 14px; min-width: 64px; text-align: center; }

.vocab-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.vocab-table th { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.vocab-table td { padding: 12px; border-bottom: 1px solid var(--divider); vertical-align: top; line-height: 1.5; }
.vocab-table td.t { color: var(--gold-bright); font-weight: 700; white-space: nowrap; }
.vocab-table td.p { color: var(--muted); font-style: italic; white-space: nowrap; }
.speak-btn {
  background: none; border: 0; cursor: pointer; font-size: 15px; opacity: .7;
  /* A 21x20 target is not reliably hittable with a thumb. */
  min-width: 44px; min-height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: inherit;
}
.speak-btn:hover { opacity: 1; }

/* ---------- Word list on a phone ----------
   The table is four columns with two of them nowrap, so on a 375px screen
   it grew to 414px and was clipped — the definition column simply ran off
   the side of the card and could not be reached. Below 620px each row
   becomes its own block instead, which reads better than sideways
   scrolling for a vocabulary list. */
@media (max-width: 620px) {
  .vocab-table, .vocab-table tbody, .vocab-table tr, .vocab-table td {
    display: block; width: 100%;
  }
  .vocab-table tr:first-child { display: none; }   /* the header row */
  .vocab-table tr {
    padding: 14px 0; border-bottom: 1px solid var(--divider);
    position: relative;
  }
  .vocab-table tr:last-child { border-bottom: 0; }
  .vocab-table td { padding: 0; border: 0; }
  /* Only the term has to keep clear of the speaker button. Reserving that
     space on every line would squeeze the definition for no reason. */
  .vocab-table td.t {
    font-size: 16.5px; white-space: normal; margin-bottom: 2px;
    padding-right: 52px;
  }
  .vocab-table td.p { white-space: normal; font-size: 13px; margin-bottom: 6px; }
  /* The speaker button holds the top-right corner of each entry. */
  .vocab-table td:first-child { position: absolute; top: 8px; right: 0; width: auto; }
}

/* ---------- Reading ---------- */
.reading-text p { line-height: 1.8; font-size: 15.5px; margin-bottom: 16px; color: var(--text-soft); }
.reading-text p::first-letter { color: var(--gold-bright); }

/* ---------- Quiz ---------- */
.quiz-q { margin-bottom: 24px; }
.quiz-q .qt { font-weight: 600; margin-bottom: 12px; font-size: 15.5px; line-height: 1.5; }
.quiz-q .qt .qnum { color: var(--gold-bright); margin-right: 8px; }
.quiz-section-head {
  font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--gold-bright); margin: 26px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.quiz-section-head:first-child { margin-top: 0; }
.quiz-section-note { color: var(--muted); font-size: 13.5px; margin: -6px 0 14px; line-height: 1.5; }

/* ---------- Exit Test ---------- */
.et-section-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 12px; }
.et-badge {
  font-size: 11.5px; font-weight: 700; letter-spacing: .5px; color: var(--dark-ink);
  background: linear-gradient(135deg, var(--gold), var(--gold-2)); padding: 3px 11px; border-radius: 20px;
}
.et-clip { border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; background: var(--overlay-1); }
.et-clip-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-size: 14.5px; }
.et-transcript { margin-bottom: 16px; font-size: 13.5px; color: var(--text-soft); }
.et-transcript summary { cursor: pointer; color: var(--gold-bright); font-weight: 600; margin-bottom: 8px; }
.et-transcript p { margin: 6px 0; line-height: 1.5; }
.et-writing-textarea {
  width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); font: inherit; font-size: 14.5px; padding: 14px 16px; resize: vertical; line-height: 1.6;
}
.et-writing-textarea:focus { outline: none; border-color: var(--gold); }
.et-checklist { margin-top: 18px; padding: 14px 18px; border-radius: 12px; background: var(--overlay-1); border: 1px solid var(--border); }
.et-checklist-title { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; color: var(--gold-bright); }
.opts { display: flex; flex-direction: column; gap: 8px; }
.opt {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 15px; border-radius: 12px; cursor: pointer;
  background: var(--overlay-1); border: 1px solid var(--border);
  font-size: 14.5px; transition: all .15s; line-height: 1.45;
}
.opt:hover { border-color: var(--gold-soft); }
.opt .letter {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center;
  background: var(--overlay-2); font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.opt.selected { border-color: var(--accent); background: var(--accent-wash); }
.opt.selected .letter { background: var(--accent); color: #fff; }
.opt.correct { border-color: var(--green); background: rgba(62,207,142,.12); }
.opt.correct .letter { background: var(--green); color: #06281a; }
.opt.wrong { border-color: var(--red); background: rgba(243,108,108,.10); }
.opt.wrong .letter { background: var(--red); color: #2b0c0c; }
.opt.disabled { pointer-events: none; }

/* ---------- Gap fill ---------- */
.gap-item { margin-bottom: 18px; font-size: 15.5px; line-height: 2; }
.gap-item .gnum { color: var(--gold-bright); font-weight: 700; margin-right: 8px; }
.gap-input {
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 9px;
  color: var(--text); font: inherit; font-size: 14.5px; padding: 6px 12px; width: 170px;
  margin: 0 6px; transition: border-color .15s;
}
.gap-input:focus { outline: none; border-color: var(--gold); }
.gap-input.ok { border-color: var(--green); background: rgba(62,207,142,.1); }
.gap-input.bad { border-color: var(--red); background: rgba(243,108,108,.08); }
.gap-answer { color: var(--green); font-size: 13px; margin-left: 8px; }

/* ---------- Word practice ---------- */
.word-bank { display: flex; flex-wrap: wrap; gap: 8px; }
.bank-chip {
  padding: 6px 13px; border-radius: 20px; font-size: 13.5px; font-weight: 600;
  background: var(--accent-chip); border: 1px solid var(--accent-chip-border); color: var(--text);
}
.match-list { display: flex; flex-direction: column; gap: 10px; }
.match-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.match-term { min-width: 170px; font-weight: 700; color: var(--gold-bright); font-size: 14.5px; }
.match-select {
  flex: 1; min-width: 220px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 9px;
  color: var(--text); font: inherit; font-size: 14px; padding: 8px 12px; transition: border-color .15s;
}
.match-select:focus { outline: none; border-color: var(--gold); }
.match-select.ok { border-color: var(--green); background: rgba(62,207,142,.1); }
.match-select.bad { border-color: var(--red); background: rgba(243,108,108,.08); }
.match-mark { width: 20px; font-weight: 800; font-size: 15px; text-align: center; }

/* ---------- Speaking ---------- */
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 16px; }
.role-card { background: var(--overlay-1); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.role-label { color: var(--gold-bright); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 8px; }
.role-brief { font-size: 14.5px; line-height: 1.55; }

/* ---------- Listening ---------- */
.listen-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.context-note { color: var(--muted); font-style: italic; margin-bottom: 18px; font-size: 14.5px; }
.dialogue { display: flex; flex-direction: column; gap: 12px; }
.turn {
  display: flex; gap: 14px; padding: 13px 16px; border-radius: 14px;
  background: var(--overlay-1); border: 1px solid transparent; transition: all .25s;
}
.turn.speaking { border-color: var(--gold); background: var(--gold-wash); box-shadow: 0 0 0 1px var(--gold-soft); }
.turn .avatar {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; color: #10182b;
}
.turn .who { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.turn .line { font-size: 15px; line-height: 1.55; }
.dialogue.hidden-script .line { filter: blur(6px); user-select: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 12px; padding: 11px 22px; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 700; transition: all .18s;
}
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: var(--dark-ink); box-shadow: 0 4px 16px var(--gold-soft); }
.btn-gold:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 8px 22px var(--gold-soft); }
.btn-gold:active { transform: translateY(0); filter: brightness(.98); }
.btn-ghost { background: var(--overlay-2); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--overlay-3); transform: translateY(-1px); }
.btn-ghost:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.quiz-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Results ---------- */
.result-banner {
  display: flex; align-items: center; gap: 18px;
  border-radius: var(--radius); padding: 20px 24px; margin-top: 20px;
  border: 1px solid var(--border); background: var(--overlay-1); animation: pop .3s ease;
}
.result-banner .score { font-size: 30px; font-weight: 800; color: var(--gold-bright); }
.result-banner .msg { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.result-banner.pass { border-color: rgba(62,207,142,.4); }
@keyframes pop { from { transform: scale(.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.lesson-video-wrap {
  position: relative; width: 100%; padding-top: 56.25%; margin-top: 16px;
  border-radius: 14px; overflow: hidden; background: #000;
}
.lesson-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.lesson-graphic {
  margin: 20px 0; padding: 18px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--border);
}
.lesson-graphic svg { width: 100%; height: auto; display: block; }
.lesson-graphic figcaption {
  margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; font-style: italic;
}
.lesson-section { margin-top: 20px; }
.lesson-section h5 {
  font-size: 14px; font-weight: 700; color: var(--gold-bright); text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 6px;
}
.lesson-section p { line-height: 1.7; }

.lesson-scenario {
  margin-top: 22px; padding: 18px 20px; border-radius: 14px;
  background: var(--accent-chip); border: 1px solid var(--accent-chip-border);
}
.lesson-scenario .part { margin-top: 14px; }
.lesson-scenario .part:first-child { margin-top: 0; }
.lesson-scenario h5 {
  font-size: 13px; font-weight: 700; color: var(--accent); text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 6px;
}
.lesson-scenario p { line-height: 1.7; }
.lesson-scenario .part-graphic {
  margin-top: 12px; padding: 14px; border-radius: 12px;
  background: var(--panel-solid); border: 1px solid var(--accent-chip-border);
}
.lesson-scenario .part-graphic svg { width: 100%; height: auto; display: block; }
.lesson-scenario .part-graphic figcaption {
  margin-top: 8px; font-size: 12.5px; color: var(--muted); text-align: center; font-style: italic;
}

/* Diagram text sits on faint tinted washes of its own colour, which drops the
   contrast just below WCAG AA. These overrides are scoped to the diagrams only,
   so the rest of the interface keeps its original palette. Both diagram types
   use a solid panel background so the contrast is predictable rather than
   depending on whatever card is behind them. */
.lesson-graphic { background: var(--panel-solid); }
.lesson-graphic svg,
.lesson-scenario .part-graphic svg {
  --accent: #5a96f7;
}
[data-theme="lavender"] .lesson-graphic svg,
[data-theme="lavender"] .lesson-scenario .part-graphic svg {
  --accent: #5558cf;
  --muted: #705f8a;
  --gold: #8356e7;
}
[data-theme="daylight"] .lesson-graphic svg,
[data-theme="daylight"] .lesson-scenario .part-graphic svg {
  --accent: #2962d1;
  --muted: #5c6b80;
  --gold: #916d2d;
}

.lesson-simple {
  margin-top: 22px; padding: 18px 20px; border-radius: 14px;
  background: var(--gold-wash); border: 1px dashed var(--gold-soft);
}
.lesson-simple h5 {
  font-size: 13px; font-weight: 700; color: var(--gold-bright); text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 10px;
}
.lesson-simple dl { margin: 0; }
.lesson-simple dt { font-weight: 700; color: var(--text); font-size: 14px; }
.lesson-simple dd { margin: 2px 0 12px; color: var(--text-soft); line-height: 1.6; font-size: 14px; }
.lesson-simple dd:last-child { margin-bottom: 0; }

.lesson-definitions {
  margin-top: 22px; padding: 18px 20px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--border);
}
.lesson-definitions h5 {
  font-size: 13px; font-weight: 700; color: var(--text); text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 10px;
}
.lesson-definitions dl { margin: 0; }
.lesson-definitions dt { font-weight: 700; color: var(--gold-bright); font-size: 14px; }
.lesson-definitions dd { margin: 2px 0 12px; color: var(--text-soft); line-height: 1.6; font-size: 14px; }
.lesson-definitions dd:last-child { margin-bottom: 0; }
.lesson-definitions .source-note {
  margin-top: 4px; font-size: 11.5px; color: var(--muted); font-style: italic;
}

.grammar-box {
  border-left: 3px solid var(--gold); padding: 16px 20px; border-radius: 0 14px 14px 0;
  background: var(--gold-wash); margin-bottom: 20px; line-height: 1.65; font-size: 15px;
}
.example-chip {
  display: block; padding: 10px 16px; margin: 8px 0; border-radius: 12px;
  background: var(--accent-chip); border: 1px solid var(--accent-chip-border);
  font-style: italic; font-size: 14.5px; line-height: 1.5;
}

.fade-in { animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Dashboard ---------- */
.dash-clock {
  display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--gold-bright);
  background: var(--gold-wash); border: 1px solid var(--gold-soft); border-radius: 12px;
  padding: 10px 18px; margin-bottom: 20px;
}
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: 18px; align-items: start; }

.profile-row { display: flex; align-items: center; gap: 14px; }
.profile-avatar {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 17px; color: var(--dark-ink);
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
}
.profile-name { font-size: 16px; font-weight: 700; }
.profile-email { color: var(--muted); font-size: 13px; margin-top: 2px; }
.profile-since { color: var(--muted); font-size: 12px; margin-top: 4px; }

.pr-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pr-meta { color: var(--muted); font-size: 13px; }
.pr-stats { display: flex; gap: 30px; margin-bottom: 22px; flex-wrap: wrap; }
.pr-stat .v { font-size: 24px; font-weight: 800; color: var(--gold-bright); }
.pr-stat .l { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.pr-table { font-size: 13.5px; }
.pr-table th, .pr-table td { white-space: nowrap; }

.cert-card, .teacher-print-doc { display: none; }

/* ---------- Teacher grading & communication ---------- */
.grading-row { margin-bottom: 10px; }
.grading-label { font-weight: 700; font-size: 14px; margin-bottom: 10px; color: var(--gold-bright); }
.grading-submission {
  background: var(--overlay-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; font-size: 14.5px; line-height: 1.6; margin-bottom: 12px; white-space: pre-wrap;
}
.grading-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.grading-controls input {
  width: 70px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font: inherit; font-size: 14px; padding: 6px 10px;
}
.grading-outof { color: var(--muted); font-size: 13px; }
.speaking-grade-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--divider);
}
.speaking-grade-unit { flex: 1; min-width: 180px; font-size: 14px; font-weight: 600; }
.speaking-score-input {
  width: 56px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font: inherit; font-size: 14px; padding: 6px 8px;
}
.speaking-fb-input {
  flex: 1; min-width: 140px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font: inherit; font-size: 13.5px; padding: 6px 10px;
}
.notes-list { display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow-y: auto; margin-bottom: 6px; }
.note-item { background: var(--overlay-1); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.note-date { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.note-text { font-size: 14px; line-height: 1.5; white-space: pre-wrap; }

/* ---------- Certificate ----------
   The certificate markup in app.js is a faithful copy of the Claude Design source and
   is laid out on that design's own 1650x2339px canvas. Rather than re-deriving every
   offset in mm, the whole canvas is scaled down to fit one A4 page. The design's aspect
   ratio (0.7054) is a hair narrower than A4 (0.7071), so it is fitted to the page HEIGHT
   — that keeps it on a single sheet, at the cost of ~0.5mm of margin at the sides. */
.cert-page {
  position: relative; width: 210mm; height: 296.5mm; margin: 0 auto; overflow: hidden;
  background: #fff;
}
.cert-design {
  position: absolute; top: 50%; left: 50%;
  /* 296.5mm ≈ 1120.6px at 96dpi; 1120.6 / 2339 = 0.4791 */
  transform: translate(-50%, -50%) scale(0.4791);
  transform-origin: center center;
}
.otc-cert-serif { color: #17233f; }

.doc-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.doc-brand-logo { width: 50px; height: 50px; object-fit: contain; flex-shrink: 0; }
.doc-brand-course { font-size: 15px; font-weight: 800; }
.doc-brand-level { font-size: 11.5px; color: var(--gold-bright); text-transform: uppercase; letter-spacing: .8px; margin-top: 2px; font-weight: 700; }

/* ---------- Printable worksheets ---------- */
.worksheet { display: none; }
.worksheet-head { border-bottom: 2px solid var(--gold); padding-bottom: 12px; margin-bottom: 18px; }
.worksheet-head h2 { font-size: 22px; font-weight: 800; }
.worksheet-meta { color: var(--muted); font-size: 13px; margin-top: 6px; }
.ws-gap { margin-bottom: 16px; font-size: 15px; line-height: 1.9; }
.ws-q { margin-bottom: 16px; }
.ws-qtext { font-weight: 600; margin-bottom: 6px; font-size: 15px; }
.ws-opt { margin: 0 0 4px 18px; font-size: 14.5px; }
.ws-match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 10px; }
.ws-col-title { font-weight: 700; color: var(--gold-bright); margin-bottom: 10px; text-transform: uppercase; font-size: 12.5px; letter-spacing: 1px; }
.ws-match-item { margin-bottom: 10px; font-size: 14.5px; line-height: 1.5; }
.ws-transcript p { margin-bottom: 10px; line-height: 1.6; font-size: 14.5px; }

/* ---------- Print ---------- */
@media print {
  /* Zero page margin so the certificate can be a true full-bleed A4 sheet; the other
     print areas get their margin back via padding on .print-area.active-print below. */
  @page { size: A4 portrait; margin: 0; }
  .sidebar, .theme-toggle, .seg-switch, .tabs { display: none !important; }
  body * { visibility: hidden; }
  .print-area.active-print, .print-area.active-print * { visibility: visible; }
  .print-area.active-print {
    display: block !important; position: absolute; top: 0; left: 0; width: 100%;
    background: #fff !important; color: #111 !important; border: none !important; box-shadow: none !important;
    padding: 15mm;
  }
  .print-area.active-print h2, .print-area.active-print h4, .print-area.active-print .pr-meta, .print-area.active-print .pr-stat .l,
  .print-area.active-print .cert-course, .print-area.active-print .cert-sub, .print-area.active-print .cert-date,
  .print-area.active-print .cert-text, .print-area.active-print td, .print-area.active-print th,
  .print-area.active-print p, .print-area.active-print .worksheet-meta, .print-area.active-print .ws-qtext,
  .print-area.active-print .ws-opt, .print-area.active-print .ws-gap, .print-area.active-print .ws-match-item,
  .print-area.active-print .ws-transcript p, .print-area.active-print .lede, .print-area.active-print .doc-brand-course {
    color: #111 !important;
  }
  .print-area.active-print .pr-stat .v, .print-area.active-print .cert-eyebrow, .print-area.active-print .cert-name,
  .print-area.active-print .ws-col-title, .print-area.active-print .doc-brand-level {
    color: #6d28d9 !important;
  }
  .print-area.active-print th, .print-area.active-print td { border-color: #ccc !important; }
  .print-area.active-print .worksheet-head { border-bottom-color: #6d28d9 !important; }
  .print-area.active-print .doc-brand { border-bottom-color: #ccc !important; }

  /* The certificate is a designed sheet: it must escape the generic "force black text
     on white" rules above, and every colour it carries is inline on the design markup,
     so the only thing needed here is to stop the cascade overriding those inline
     colours and to keep the whole thing on exactly one page. */
  html, body { margin: 0 !important; padding: 0 !important; }
  .cert-card.active-print {
    padding: 0 !important; margin: 0 !important; background: transparent !important;
    width: 210mm !important; height: 296.5mm !important; overflow: hidden !important;
    page-break-after: avoid; break-after: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .cert-card.active-print .cert-page {
    page-break-inside: avoid; break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* Inline styles already carry the right colours; `revert` lets them win back from the
     generic `color: #111 !important` rules without restating every shade. */
  .cert-card.active-print div,
  .cert-card.active-print p,
  .cert-card.active-print h2 { color: revert !important; }
}

@media (max-width: 900px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; }
  .main { padding: 24px 20px 60px; }
  .hero { padding: 30px 26px; }
  .hero h2 { font-size: 26px; }
  .theme-toggle { top: 12px; right: 12px; }
  .search-trigger { top: 12px; right: 154px; width: 40px; height: 40px; }
}

/* =====================================================================
   SPEAKING-FIRST SECTIONS
   Useful Language, Speak and Watch. Classic units never render these.
   ===================================================================== */

/* French gloss beneath an English instruction, A2 only. Deliberately
   quieter than the English so it reads as support, not as a translation
   the learner should rely on. */
.fr-gloss {
  display: block; margin-top: 3px;
  font-size: .88em; font-style: italic; color: var(--muted);
}

/* ---------- Watch ---------- */
.video-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  margin: 16px 0; border-radius: 12px; overflow: hidden;
  background: #000; border: 1px solid var(--border);
}
.video-frame iframe, .video-frame video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ---------- Useful Language ---------- */
.phrase-group { margin: 20px 0 0; }
.phrase-function {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--gold-bright);
  padding-bottom: 7px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.phrase-row, .drill-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 9px 10px; border-radius: 10px;
}
.phrase-row:hover, .drill-row:hover { background: var(--overlay-1); }

/* Big enough to hit on a phone without hunting for it: a learner taps
   these dozens of times per unit. */
.phrase-play {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--gold-soft); background: var(--gold-wash);
  color: var(--gold-bright); font-size: 12px; cursor: pointer;
  display: grid; place-items: center; transition: all .16s;
}
.phrase-play:hover {
  background: var(--gold); color: var(--dark-ink); border-color: var(--gold);
}
.phrase-play.played { border-color: var(--green); color: var(--green); }

.phrase-text { flex: 1; min-width: 0; }
.phrase-en { font-size: 15px; color: var(--text); }
.phrase-note {
  display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted);
}

/* ---------- Speak ---------- */
.drill { display: flex; flex-direction: column; gap: 2px; }

.respond-row {
  padding: 14px 0; border-bottom: 1px solid var(--divider);
}
.respond-row:last-child { border-bottom: 0; }
.respond-prompt {
  font-size: 15px; margin-bottom: 9px; padding-left: 13px;
  border-left: 3px solid var(--gold-soft); color: var(--text);
}
.respond-model {
  margin-top: 9px; padding: 11px 13px; border-radius: 9px;
  background: var(--accent-chip); border: 1px solid var(--accent-chip-border);
  font-size: 14.5px; color: var(--text-soft);
}

.roleplay .rp-label {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--gold-bright); margin-bottom: 5px;
}
.rp-situation {
  padding: 14px; border-radius: 11px; margin: 14px 0;
  background: var(--gold-wash); border: 1px solid var(--gold-soft);
  font-size: 15px;
}
.rp-roles {
  display: grid; gap: 12px; margin: 14px 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.rp-role {
  padding: 14px; border-radius: 11px;
  background: var(--overlay-1); border: 1px solid var(--border);
  font-size: 14.5px;
}
.rp-success {
  padding: 14px; border-radius: 11px; margin: 14px 0;
  background: color-mix(in srgb, var(--green) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
}
.rp-success ul { margin: 0; padding-left: 19px; font-size: 14.5px; }
.rp-success li { margin-bottom: 4px; }

/* The scaffolded role-play hands the learner the phrases. The freer one
   that follows deliberately does not. */
.rp-support { margin: 14px 0; }
.rp-support .rp-label {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--gold-bright); margin-bottom: 8px;
}
.rp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-chip {
  padding: 7px 12px; border-radius: 999px; font-size: 14px;
  background: var(--accent-chip); border: 1px solid var(--accent-chip-border);
  color: var(--text-soft);
}

.test-listen-row {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px;
}

/* ---------- Solo speaking task ---------- */
.solo-task {
  padding: 16px; border-radius: 12px; margin: 4px 0 16px;
  background: var(--gold-wash); border: 1px solid var(--gold-soft);
}
.solo-prompt { font-size: 15.5px; line-height: 1.65; }
.solo-timer {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 15px;
}
.solo-clock {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 20px;
  color: var(--text-soft);
}
.solo-timer.running .solo-clock { color: var(--gold-bright); }

@media (max-width: 620px) {
  .rp-roles { grid-template-columns: 1fr; }
  .phrase-row, .drill-row { padding: 8px 4px; }

  .match-select { min-height: 46px; }
}

/* ---------- Situation match ---------- */
.situation-item {
  padding: 15px 0; border-bottom: 1px solid var(--divider);
}
.situation-item:last-child { border-bottom: 0; }
.situation-text {
  font-size: 15px; margin-bottom: 11px; padding-left: 13px;
  border-left: 3px solid var(--gold-soft);
}
.situation-options { display: grid; gap: 7px; }
.situation-opt {
  text-align: left; padding: 11px 14px; border-radius: 10px;
  background: var(--overlay-1); border: 1px solid var(--border);
  color: var(--text); font: inherit; font-size: 14.5px; cursor: pointer;
  transition: all .15s;
}
.situation-opt:hover { background: var(--overlay-hover); border-color: var(--gold-soft); }
.situation-opt.right {
  background: color-mix(in srgb, var(--green) 16%, transparent);
  border-color: var(--green); color: var(--text);
}
.situation-opt.wrong {
  background: color-mix(in srgb, var(--red) 14%, transparent);
  border-color: var(--red);
}
.situation-opt:disabled { cursor: default; }

/* The playback speed control was removed deliberately. Audio plays at the
   speed it was recorded, because listening at 0.75 builds the ability to
   understand slowed speech, which nobody outside a classroom produces.
   Replay is unlimited; speed is not adjustable. */

/* ---------- Pronunciation check ---------- */
.say-check {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--overlay-1);
  font-size: 14px; cursor: pointer; line-height: 1;
  display: grid; place-items: center; transition: all .16s;
}
.say-check:hover { border-color: var(--accent); background: var(--accent-wash); }
.say-check.listening {
  border-color: var(--accent); background: var(--accent-wash);
  animation: mic-pulse 1.1s ease-in-out infinite;
}
.say-check.passed { border-color: var(--green); background:
  color-mix(in srgb, var(--green) 14%, transparent); }
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-wash); }
  50%      { box-shadow: 0 0 0 7px transparent; }
}

/* The result sits on its own line so a long message never squeezes the
   phrase it belongs to. */
.say-result {
  flex-basis: 100%; margin: 6px 0 0 46px;
  font-size: 13px; line-height: 1.5;
}
.say-result.listening { color: var(--accent); }
.say-result.good { color: var(--green); font-weight: 600; }
.say-result.near { color: var(--gold-bright); }
.say-result.bad  { color: var(--muted); }

.phrase-row, .drill-row { flex-wrap: wrap; }
.drill-text { flex: 1; min-width: 0; }

/* ---------- Touch targets ----------
   Last in the file on purpose. These elements are styled further up, and a
   media query adds no specificity, so an override placed earlier loses to
   the plain rule that follows it. Keep this block at the bottom. */
@media (max-width: 620px) {
  /* The two buttons a learner presses most in a speaking course. At 34px
     they sat under every touch-target guideline, and a missed tap on a
     phrase you are trying to repeat is disproportionately annoying. */
  .phrase-play, .say-check { width: 44px; height: 44px; font-size: 15px; }

}

/* ---------- Lesson tab: speaking-first blocks ----------
   The teaching tab. Denser than the practice tabs on purpose: this is the
   one place a learner reads rather than does.

   Figures reuse .lesson-graphic, which the classic courses already style,
   so a diagram looks the same wherever it appears. */
.expr-list { display: grid; gap: 14px; }
.expr {
  padding: 15px 16px; border-radius: 12px;
  background: var(--overlay-1); border: 1px solid var(--border);
}
.expr-head { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; margin-bottom: 6px; }
.expr-term { font-weight: 800; font-size: 16.5px; color: var(--gold-bright); }
.expr-pattern {
  font: 600 13px/1 ui-monospace, Consolas, monospace;
  padding: 5px 10px; border-radius: 7px;
  background: var(--accent-chip); border: 1px solid var(--accent-chip-border);
  color: var(--text-soft);
}
.expr-meaning { font-size: 14.5px; line-height: 1.6; color: var(--text-soft); }
.expr-examples { margin: 9px 0 0; padding-left: 19px; font-size: 14.5px; line-height: 1.7; }
.expr-examples li { margin-bottom: 3px; }
.expr-warning {
  margin-top: 11px; padding: 10px 12px; border-radius: 9px; font-size: 14px;
  background: color-mix(in srgb, var(--red) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
}

.rule-list { display: grid; gap: 15px; margin-top: 4px; }
.rule { padding-left: 15px; border-left: 3px solid var(--gold-soft); }
.rule-name { font-weight: 700; font-size: 15px; margin-bottom: 3px; }
/* The explanation of a rule, which sits above its examples. English for the
   Workplace writes it as `detail`; the Business Communication courses put
   the same thing in `note` below the examples. Both render. */
.rule-detail {
  margin-top: 5px; font-size: 14.5px; line-height: 1.65; color: var(--text-soft);
}
/* The plain-English gloss under a rule. It was authored from the start and
   never rendered, so every note in every course was invisible until now. */
.rule-note {
  margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--text-soft);
}

.watch-out {
  margin-top: 18px; padding: 14px; border-radius: 11px; font-size: 14.5px;
  background: var(--gold-wash); border: 1px solid var(--gold-soft);
}
.watch-out .rp-label {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--gold-bright); margin-bottom: 5px;
}

.lex-why {
  margin-top: 11px; padding: 11px 13px; border-radius: 9px;
  font-size: 14px; line-height: 1.6;
}
.lex-why.good {
  background: color-mix(in srgb, var(--green) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
}
.lex-why.bad {
  background: var(--gold-wash); border: 1px solid var(--gold-soft);
}

@media (max-width: 620px) {
  .lesson-graphic { padding: 13px; }
  .expr-head { gap: 7px; }
}

/* A diagram scaled to a 375px screen puts its labels at about 5px tall,
   which is not a diagram, it is a smudge. Below 620px the figure scrolls
   inside its own box instead, so the drawing keeps a legible size and the
   page itself still never scrolls sideways. Last in the file so it beats
   the .lesson-graphic rules defined earlier. */
@media (max-width: 620px) {
  .lesson-graphic {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 13px;
  }
  .lesson-graphic svg { min-width: 500px; }
  .lesson-graphic figcaption { min-width: 0; }
  .lesson-graphic::after {
    content: "swipe the diagram sideways to see all of it";
    display: block; margin-top: 9px;
    font-size: 11.5px; font-style: italic; color: var(--muted);
    position: sticky; left: 0;
  }
}

/* ---------- Course sections ----------
   A course may run in named parts — B1 has twelve topic modules and then a
   Business Skills section. The heading marks where one ends and the next
   begins. In the sidebar it is a quiet label; in the unit grid it has to
   break the flow, so it spans every column. */
.unit-section-head {
  grid-column: 1 / -1;
  margin: 22px 0 10px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-bright);
  padding-bottom: 7px; border-bottom: 1px solid var(--gold-soft);
}
#sidebar-units .unit-section-head {
  margin: 20px 8px 8px;
  color: var(--muted); border-bottom-color: var(--border);
}
#sidebar-units .unit-section-head:first-child { margin-top: 4px; }

/* ---------------------------------------------------------------------
   Useful Language, reference layout (B1 and above)

   A2 keeps the drill rows with their play and microphone buttons. From B1
   the same data renders as a read-only box: functions across, phrases
   under each. Columns collapse to one on a phone rather than scrolling
   sideways, because this is text to read, not a figure to inspect.
   --------------------------------------------------------------------- */
.lang-ref {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px 26px;
  margin-top: 18px;
  padding: 20px 22px;
  background: var(--overlay-1);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.lang-ref-function {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold-bright);
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--gold-soft);
}
.lang-ref-list { list-style: none; margin: 0; padding: 0; }
.lang-ref-list li { margin: 0 0 12px; }
.lang-ref-list li:last-child { margin-bottom: 0; }
.lang-ref-phrase {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}
.lang-ref-note {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 620px) {
  .lang-ref { grid-template-columns: 1fr; gap: 18px; padding: 16px 15px; }
}

/* ---------------------------------------------------------------------
   Solo task: record yourself and listen back.
   Hidden until there is something to play, so the panel does not sit
   there empty inviting a press that does nothing.
   --------------------------------------------------------------------- */
.solo-rec { margin-top: 14px; }
.solo-playback { width: 100%; margin-bottom: 8px; }
.solo-rec-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.solo-rec-note.bad { color: var(--red); }
.solo-timer.running [data-solo-record] { border-color: var(--red); color: var(--red); }

/* =====================================================================
   Writing (B2 and above). The brief, the drafting box, the model answer
   and the self-check list.
   ===================================================================== */
.writing-brief {
  margin-top: 16px;
  border: 1px solid var(--gold-soft);
  background: var(--gold-wash);
  border-radius: 12px;
  padding: 14px 16px;
}
.writing-brief-row { display: flex; gap: 14px; padding: 6px 0; font-size: 14.5px; }
.writing-brief-row + .writing-brief-row { border-top: 1px solid var(--gold-soft); }
.writing-brief-row .k {
  flex: 0 0 74px; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; padding-top: 3px;
}
.writing-brief-row .v { flex: 1 1 auto; }
.writing-points { margin: 0; padding-left: 18px; }
.writing-points li { margin: 3px 0; line-height: 1.5; }

.writing-input {
  width: 100%; margin-top: 4px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); color: var(--text);
  font-family: inherit; font-size: 15px; line-height: 1.65; resize: vertical;
}
.writing-input:focus { outline: 2px solid var(--gold-soft); outline-offset: 1px; }

.writing-count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.writing-count.short { color: var(--muted); }
.writing-count.ok    { color: var(--good, #2e7d5b); font-weight: 700; }
.writing-count.long  { color: var(--warn, #b4762a); font-weight: 700; }

.writing-privacy { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.writing-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.writing-model {
  margin-top: 18px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
}
.writing-model-head {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.writing-model-subject { font-size: 14.5px; margin-bottom: 10px; }
.writing-model-body p { margin: 0 0 10px; line-height: 1.7; font-size: 15px; }
.writing-why { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.writing-why-head { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.writing-why ul { margin: 0; padding-left: 18px; }
.writing-why li { margin: 5px 0; line-height: 1.6; font-size: 14.5px; color: var(--text-soft); }

.writing-checklist { list-style: none; margin: 14px 0 0; padding: 0; }
.writing-checklist li + li { margin-top: 4px; }
.writing-checklist label {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px; border-radius: 10px; cursor: pointer; line-height: 1.55;
}
.writing-checklist label:hover { background: var(--overlay-1); }
.writing-checklist input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; cursor: pointer; }

@media (max-width: 620px) {
  .writing-brief-row { flex-direction: column; gap: 4px; }
  .writing-brief-row .k { flex-basis: auto; }
}

/* The explanation under a quiz question, revealed once answers are
   checked or shown. Only questions that carry a `why` render one. */
.quiz-why {
  margin: 10px 0 0 var(--qnum-indent, 34px);
  padding: 10px 14px;
  border-left: 3px solid var(--gold-soft);
  background: var(--gold-wash);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
}
@media (max-width: 620px) {
  .quiz-why { margin-left: 0; }
}


/* =====================================================================
   THE EXAM RUNNER

   A practice paper is not a lesson and should not look like one. The
   card chrome stays so it sits inside the platform, but the reading
   column is set for sustained reading and the clock is fixed to the
   top of the viewport, because a candidate who has to scroll to find
   out how long is left will stop checking.

   Everything here uses the existing tokens, so it follows the theme
   with the rest of the platform.
   ===================================================================== */

.exam-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--panel-solid); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 20px; margin-bottom: 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,.10);
}
.exam-bar b { font-size: 16px; }
.exam-bar .hint { display: block; margin-top: 2px; }

.exam-clock {
  font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 700;
  letter-spacing: .5px; color: var(--text); padding: 4px 14px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--overlay-1);
}
/* Colour only. A modal at minute 55 of 60 costs more than it warns. */
.exam-clock.warn   { color: var(--gold-bright); border-color: var(--gold-soft); }
.exam-clock.urgent { color: var(--red); border-color: var(--red); }

.exam-intro .exam-facts { list-style: none; padding: 0; margin: 18px 0 22px; }
.exam-facts li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--divider); font-size: 15px;
}
.exam-facts li:last-child { border-bottom: 0; font-weight: 700; }
.exam-facts span { color: var(--text-soft); }

.exam-part > h4 {
  font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--gold-bright); margin: 0 0 16px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.exam-group { margin-bottom: 30px; }
.exam-group:last-child { margin-bottom: 0; }

.exam-instructions {
  font-weight: 600; font-size: 14.5px; line-height: 1.6;
  background: var(--accent-wash); border-left: 3px solid var(--accent);
  padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 0 0 18px;
}

/* The passage. Narrower than the card, because a 90 character line is
   hard to read and the Reading paper is sixty minutes of it. */
.exam-passage {
  max-width: 68ch; margin: 0 0 26px;
  font-size: 16px; line-height: 1.75;
}
.exam-passage p { margin: 0 0 15px; }
.exam-passage p:last-child { margin-bottom: 0; }

/* A map, plan, diagram or chart. Scrolls inside itself rather than
   pushing the page sideways on a phone. */
.exam-figure { margin: 0 0 20px; overflow-x: auto; }
.exam-figure svg { display: block; min-width: 460px; border-radius: 8px; }
.exam-figure figcaption {
  font-size: 13px; color: var(--text-soft); margin-top: 8px; text-align: center;
}

/* The lettered key for a matching or headings task. */
.match-key {
  list-style: none; padding: 14px 18px; margin: 0 0 20px;
  background: var(--overlay-1); border: 1px solid var(--border); border-radius: 8px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 20px;
}
.match-key li { font-size: 14.5px; line-height: 1.5; }
.match-key b {
  display: inline-block; min-width: 20px; color: var(--gold-bright); font-weight: 800;
}
.match-select {
  background: var(--input-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 12px; font-size: 15px; min-width: 220px;
}

.gap-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gap-limit {
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  color: var(--text-soft); white-space: nowrap;
}

/* True/False/Not Given sits on one row. Three options, never two. */
.opts.tfng { display: flex; gap: 10px; flex-wrap: wrap; }
.opts.tfng .opt { flex: 0 0 auto; min-width: 118px; text-align: center; }

.exam-actions { display: flex; justify-content: flex-end; margin: 24px 0 40px; }

.exam-result .result-score {
  font-size: 46px; font-weight: 800; line-height: 1.1; color: var(--gold-bright);
}
.result-breakdown { list-style: none; padding: 0; margin: 20px 0; }
.result-breakdown li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--divider); font-size: 15px;
}
.review-given  { color: var(--red); font-weight: 600; }
.review-should { color: var(--green); font-weight: 600; }
.review-why    { font-size: 14px; color: var(--text-soft); line-height: 1.65; margin-top: 6px; }

/* ------------------------------------------------------------------
   SPEAKING

   Nothing here is marked. It is a paper to read aloud from and a
   clock for the long turn, so it is styled to be read from at arm's
   length rather than filled in.
   ------------------------------------------------------------------ */

.speak-part { margin-bottom: 30px; }
.speak-part h5 {
  font-size: 15px; font-weight: 700; margin: 0 0 6px; color: var(--text);
}
.speak-part > .hint { display: block; margin-bottom: 14px; line-height: 1.6; }

.speak-topic { margin-bottom: 16px; }
.speak-topic b {
  display: block; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gold-bright); margin-bottom: 6px;
}
.speak-topic ul, .speak-qs { margin: 0; padding-left: 22px; }
.speak-topic li, .speak-qs li { font-size: 15.5px; line-height: 1.9; }

/* The cue card looks like a card, because it is one. */
.cue-card {
  background: var(--overlay-1); border: 1px solid var(--gold-soft);
  border-radius: var(--radius); padding: 22px 24px; margin: 4px 0 14px;
}
.cue-prompt { font-size: 18px; font-weight: 700; margin: 0 0 12px; line-height: 1.45; }
.cue-lead { font-size: 14.5px; color: var(--text-soft); margin: 0 0 8px; }
.cue-card ul { margin: 0; padding-left: 22px; }
.cue-card li { font-size: 15.5px; line-height: 1.9; }
.cue-card li:last-child { font-weight: 600; }

.speak-timer {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--divider);
}
.speak-clock {
  font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600;
  color: var(--text-soft);
}

.exam-descriptors, .exam-checklist { padding-left: 22px; margin: 12px 0 20px; }
.exam-descriptors li { font-size: 15px; line-height: 1.75; margin-bottom: 12px; }
.exam-descriptors b { color: var(--gold-bright); }
.exam-checklist li { font-size: 14.5px; line-height: 1.8; color: var(--text-soft); }

@media (max-width: 620px) {
  .exam-bar { padding: 11px 14px; }
  .exam-clock { font-size: 20px; padding: 3px 10px; }
  .exam-passage { font-size: 15.5px; }
  .match-key { grid-template-columns: 1fr; }
  .match-select { min-width: 100%; }
  .opts.tfng .opt { flex: 1 1 100%; }
}

/* The exam gap input carries a placeholder that spells out the word
   limit, and the course-wide .gap-input width truncated it to
   "no more than one worc". Widened here only, so the lesson engine
   keeps the size it was designed with. */
.exam-q .gap-input { min-width: 270px; flex: 0 1 340px; }
@media (max-width: 620px) {
  .exam-q .gap-input { min-width: 0; flex: 1 1 100%; }
}


/* =====================================================================
   EXAM UNIT TABS

   Exam Tips, Technique, the marked practice, and the writing and
   speaking tasks. The pattern throughout is a claim followed by the
   reason for it, set smaller and quieter, because the reason is what
   makes the claim stick and it is also what a learner skips.
   ===================================================================== */

.exam-tips, .technique-steps { padding-left: 0; margin: 0; list-style: none; counter-reset: n; }
.exam-tips > li, .technique-steps > li {
  counter-increment: n;
  position: relative; padding: 0 0 18px 44px; margin-bottom: 18px;
  border-bottom: 1px solid var(--divider);
}
.exam-tips > li:last-child, .technique-steps > li:last-child {
  border-bottom: 0; padding-bottom: 0; margin-bottom: 0;
}
.exam-tips > li::before, .technique-steps > li::before {
  content: counter(n);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  color: var(--dark-ink); background: var(--gold);
}
.tip-line, .step-line { font-weight: 700; font-size: 15.5px; line-height: 1.55; margin-bottom: 7px; }
.tip-why, .step-detail { font-size: 14.5px; line-height: 1.7; color: var(--text-soft); }

.exam-notthis { padding-left: 0; margin: 0; list-style: none; }
.exam-notthis li {
  position: relative; padding-left: 26px; margin-bottom: 11px;
  font-size: 15px; line-height: 1.6;
}
.exam-notthis li::before {
  content: "✕"; position: absolute; left: 0; top: 0;
  color: var(--red); font-weight: 800; font-size: 13px;
}

/* The worked example. A table of three rows, because the whole value of
   it is seeing the question, the input and the answer side by side. */
.worked-card { border-color: var(--gold-soft); }
.worked-row {
  display: grid; grid-template-columns: 165px 1fr; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--divider);
  font-size: 15px; line-height: 1.6;
}
.worked-row span {
  font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--text-soft); padding-top: 3px;
}
.worked-answer { font-weight: 700; color: var(--gold-bright); font-size: 17px; }

/* The band descriptors. Band 6 and band 7 quoted, then the gap between
   them named, because the gap is the only part a candidate can act on. */
.band-list { list-style: none; padding: 0; margin: 0; }
.band-list > li {
  padding: 16px 0; border-bottom: 1px solid var(--divider);
}
.band-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.band-list > li > b {
  display: block; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gold-bright); margin-bottom: 10px;
}
.band-row {
  display: grid; grid-template-columns: 66px 1fr; gap: 12px;
  font-size: 14px; line-height: 1.65; color: var(--text-soft); margin-bottom: 8px;
}
.band-row span { font-weight: 700; color: var(--text); }
.band-gap {
  margin-top: 10px; padding: 11px 14px; font-size: 14.5px; line-height: 1.7;
  background: var(--accent-wash); border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}

/* The model answer. Set as prose, and visibly a specimen rather than
   something the learner wrote. */
.model-card { border-color: var(--gold-soft); }
.model-body {
  max-width: 66ch; font-size: 16px; line-height: 1.8;
  padding-left: 16px; border-left: 3px solid var(--gold-soft);
}
.model-body p { margin: 0 0 14px; }
.model-body p:last-child { margin-bottom: 0; }
.model-card h5, .exam-part h5 {
  font-size: 12px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--gold-bright); margin: 24px 0 12px;
}
.model-why { padding-left: 22px; margin: 0; }
.model-why li { font-size: 14.5px; line-height: 1.75; margin-bottom: 11px; color: var(--text-soft); }

.model-inline { padding: 18px 20px; margin: 14px 0 0; }
.model-q { font-weight: 700; font-size: 15px; margin: 0 0 8px; }
.model-a {
  font-size: 15.5px; line-height: 1.75; margin: 0 0 10px;
  padding-left: 16px; border-left: 3px solid var(--gold-soft);
}

.task-prompt {
  font-size: 16.5px; line-height: 1.7; font-weight: 500;
  padding: 18px 20px; margin: 0;
  background: var(--overlay-1); border: 1px solid var(--border); border-radius: 8px;
}

.passage-title {
  font-size: 19px; font-weight: 700; margin: 22px 0 14px; text-align: center;
}

/* Marking. Green and red on the explanation itself, not on the option,
   so the reason is what the eye lands on. */
.quiz-why.was-right { border-left: 3px solid var(--green); padding-left: 13px; }
.quiz-why.was-wrong { border-left: 3px solid var(--red);   padding-left: 13px; }

@media (max-width: 620px) {
  .worked-row, .band-row { grid-template-columns: 1fr; gap: 5px; }
  .model-body { font-size: 15.5px; }
}

/* =====================================================================
   WRITING AND SPEAKING SUBMISSION

   The answer box is the point of the tab, so it is the biggest thing
   on it. The report that follows is colour-coded by what it costs the
   candidate rather than by how alarming it sounds.
   ===================================================================== */

.answer-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.word-count {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px;
  padding: 4px 12px; border-radius: 6px; border: 1px solid var(--border);
}
.word-count.under { color: var(--red); border-color: var(--red); }
.word-count.over  { color: var(--green); border-color: var(--green); }
.answer-clock {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 17px;
  color: var(--text-soft); margin-left: auto;
}
.answer-clock.warn   { color: var(--gold-bright); }
.answer-clock.urgent { color: var(--red); }

.answer-box {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: var(--input-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; font-size: 16px; line-height: 1.75;
  font-family: inherit; min-height: 320px;
}
.answer-box:focus { outline: none; border-color: var(--gold-soft); }
.answer-actions { display: flex; gap: 12px; margin-top: 14px; }

/* The model is hidden until the candidate opens it. Showing it beside
   an empty answer box, under the words "write yours first", is an
   instruction nobody follows. */
.model-reveal > summary {
  cursor: pointer; font-size: 15px; padding: 6px 0;
  color: var(--text-soft); list-style: none;
}
.model-reveal > summary::-webkit-details-marker { display: none; }
.model-reveal > summary::before { content: "▸ "; color: var(--gold-bright); }
.model-reveal[open] > summary::before { content: "▾ "; }
.model-reveal > summary b { color: var(--text); }
.model-reveal[open] > summary { margin-bottom: 16px; }

/* The report. */
.report-card { border-color: var(--gold-soft); }
.report-counts {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px;
}
.report-counts li {
  text-align: center; padding: 12px 8px;
  background: var(--overlay-1); border: 1px solid var(--border); border-radius: 8px;
}
.report-counts b {
  display: block; font-size: 21px; font-variant-numeric: tabular-nums;
  color: var(--gold-bright); line-height: 1.2;
}
.report-counts span { font-size: 11px; color: var(--text-soft); line-height: 1.35; display: block; margin-top: 4px; }

.report-findings { list-style: none; padding: 0; margin: 0 0 20px; }
.report-findings > li {
  padding: 14px 16px; margin-bottom: 12px; border-radius: 8px;
  background: var(--overlay-1); border-left: 3px solid var(--border);
}
.report-findings > li.sev-stop    { border-left-color: var(--red); }
.report-findings > li.sev-serious { border-left-color: var(--gold-bright); }
.report-findings > li.sev-note    { border-left-color: var(--text-soft); }
.report-findings > li.sev-good    { border-left-color: var(--green); }
.report-head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 7px; flex-wrap: wrap; }
.report-sev {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
}
.sev-stop    .report-sev { color: var(--red); }
.sev-serious .report-sev { color: var(--gold-bright); }
.sev-note    .report-sev { color: var(--text-soft); }
.sev-good    .report-sev { color: var(--green); }
.report-crit { font-size: 13px; font-weight: 700; color: var(--text); }
.report-found { font-size: 15px; line-height: 1.6; margin-bottom: 6px; }
.report-do    { font-size: 14.5px; line-height: 1.7; color: var(--text-soft); }

/* The recorder. */
.rec-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rec-clock {
  font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600; color: var(--text-soft);
}
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--border); }
.rec-dot.live { background: var(--red); animation: recpulse 1.4s ease-in-out infinite; }
@keyframes recpulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.rec-transcript {
  margin-top: 16px; padding: 14px 16px; border-radius: 8px;
  background: var(--overlay-1); border: 1px solid var(--border);
}
.rec-transcript b {
  display: block; font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--text-soft); margin-bottom: 8px;
}
.rec-transcript p { margin: 0; font-size: 15px; line-height: 1.7; }

@media (max-width: 620px) {
  .answer-clock { margin-left: 0; }
  .report-counts { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   Grammar tables: the form table and the common-mistakes table.

   Both come from the lesson format Robleh supplied as the model for
   English for the Workplace: a form is easier to read as a grid than as
   prose, and a wrong/right pair teaches faster than a warning does.
   Gated on the data, so a unit without them renders exactly as before.
   ===================================================================== */
.gtable-wrap { margin-top: 16px; overflow-x: auto; }
.gtable {
  width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.6;
  min-width: 520px;
}
.gtable th {
  text-align: left; padding: 9px 12px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.gtable td {
  padding: 11px 12px; vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.gtable tr:last-child td { border-bottom: 0; }
.gtable-key { font-weight: 700; white-space: nowrap; }
.gtable-alt { color: var(--text-soft); }

.gerrors { margin-top: 22px; }
.gerrors h5 {
  margin: 0 0 2px; font-size: 15px; font-weight: 700;
}
.gerr-wrong {
  color: var(--red); text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--red) 55%, transparent);
}
.gerr-right { font-weight: 700; color: var(--gold-bright); }

@media (max-width: 620px) {
  .gtable { min-width: 460px; font-size: 14px; }
  .gtable-key { white-space: normal; }
}

/* Tables inside a lesson section. Same visual language as .gtable, but
   the first column is the term being taught, so it carries the weight. */
.ltable-wrap { margin: 14px 0 4px; overflow-x: auto; }
.ltable {
  width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.6;
  min-width: 520px;
}
.ltable th {
  text-align: left; padding: 9px 12px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.ltable td {
  padding: 11px 12px; vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.ltable tr:last-child td { border-bottom: 0; }
.ltable-key { font-weight: 700; color: var(--gold-bright); }

/* The boxed aside a lesson section can end on: USEFUL LANGUAGE, or a
   grammar point that belongs with the table above it rather than with
   the grammar block further down. */
.lesson-callout {
  margin-top: 15px; padding: 13px 15px; border-radius: 11px; font-size: 14.5px;
  line-height: 1.65;
  background: var(--gold-wash); border: 1px solid var(--gold-soft);
}
.lesson-callout .rp-label {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--gold-bright); margin-bottom: 5px;
}

@media (max-width: 620px) {
  .ltable { min-width: 460px; font-size: 14px; }
}

/* =====================================================================
   The email checker's report, and the fill-the-gaps email.

   Both belong to the writing tab that Logistics and Banking never had.
   The report is deliberately not a score: each finding is what was
   found and what to do about it, coloured by how much it matters.
   ===================================================================== */
.writing-feedback { margin-top: 18px; }
.wf-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.wf-counts { font-size: 13px; color: var(--muted); }
.wf-item {
  padding: 11px 13px; border-radius: 10px; margin-bottom: 9px;
  border-left: 3px solid var(--border); background: var(--overlay-1);
}
.wf-major { border-left-color: var(--red);   background: color-mix(in srgb, var(--red) 8%, transparent); }
.wf-minor { border-left-color: var(--gold);  background: var(--gold-wash); }
.wf-note  { border-left-color: var(--accent); background: var(--accent-chip); }
.wf-good  { border-left-color: var(--green); background: color-mix(in srgb, var(--green) 9%, transparent); }
.wf-crit {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 4px;
}
.wf-found { font-size: 14.5px; font-weight: 700; line-height: 1.5; margin-bottom: 4px; }
.wf-do { font-size: 14px; line-height: 1.6; color: var(--text-soft); }

/* The coverage score. Deliberately quieter than a grade would be: one
   number, the parts behind it, and a line saying what it is not. */
.wf-cov {
  padding: 14px 16px; margin-bottom: 16px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--overlay-1);
}
.wf-cov-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.wf-cov-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
}
.wf-cov-score { font-size: 26px; font-weight: 800; line-height: 1; }
.wf-cov-of { font-size: 14px; font-weight: 600; color: var(--muted); }
.wf-cov-bar {
  height: 7px; border-radius: 999px; overflow: hidden;
  background: var(--overlay-2, var(--border)); margin: 10px 0 12px;
}
.wf-cov-bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--gold-bright); transition: width .35s ease;
}
.wf-cov-parts { list-style: none; margin: 0; padding: 0; }
.wf-cov-parts li {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13.5px; padding: 3px 0;
}
.wf-cov-part { color: var(--text-soft); }
.wf-cov-frac { font-weight: 700; white-space: nowrap; }
.wf-cov-note {
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted);
}

.egap-box {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px;
  padding: 12px; border-radius: 10px;
  background: var(--overlay-2); border: 1px solid var(--border);
}
.egap-word {
  padding: 4px 11px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: var(--gold-wash); border: 1px solid var(--gold-soft);
  color: var(--gold-bright);
}
.egap-email {
  padding: 16px 18px; border-radius: 11px; line-height: 2.3; font-size: 15px;
  background: var(--overlay-1); border: 1px solid var(--border);
}
.egap-input {
  display: inline-block; width: 140px; margin: 0 3px;
  padding: 3px 8px; border-radius: 7px; font: inherit; font-size: 14.5px;
  background: var(--input-bg); color: var(--text);
  border: 1px solid var(--border);
}
.egap-input:focus { outline: none; border-color: var(--gold-soft); }
.egap-input.ok  { border-color: var(--green); }
.egap-input.bad { border-color: var(--red); }
.egap-answer { margin-left: 5px; font-size: 13.5px; color: var(--green); }

/* The lesson aim that opens a writing section. Set slightly apart from
   the teaching cards below it, because it is orientation rather than
   content: what this is for, and what you will be able to do after it. */
.writing-aim { border-left: 3px solid var(--gold-soft); }
.writing-aim h4 { color: var(--gold-bright); }