/* =====================================================================
   SaveMyImtiaz design system (v2)
   Design Stage A: only pages rendered with the "v2" layout use this
   (home + question pages). Everything is scoped under html.v2 so the
   other pages keep their old look until Stage B.
   ===================================================================== */

/* ---------- tokens: light ---------- */
:root {
  --c-bg: #F7F6F1;
  --c-surface: #FFFFFF;
  --c-surface-2: #EDF2EC;
  --c-brand: #174C3C;
  --c-brand-hover: #10392D;
  --c-on-brand: #FFFFFF;
  --c-text: #19251F;
  --c-text-2: #58645D;
  --c-border: #DDE2DA;
  --c-border-strong: #84918A;   /* checkbox / input outlines (3:1 on surface) */
  --c-gold: #B38A45;
  --c-gold-ink: #866530;      /* gold used as text: passes AA on surface, bg and the green-tint panels (audit 2026-10-23) */
  --c-focus: #246B50;
  --c-checked: #E6EFE8;
  --c-fire-bg: #FCE9E5;  --c-fire: #9C3529;
  --c-rec-bg: #FFF0D6;   --c-rec: #805313;
  --c-new-bg: #E5EDF9;   --c-new: #2855A0;
  --c-shadow: 25 37 31;

  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ar: "Cairo", "Segoe UI", Tahoma, sans-serif;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --t-fast: 150ms; --t-base: 220ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --wrap: 1120px;
  --pad: 16px;
}

/* ---------- tokens: dark (system preference, unless the student picked light) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #101713;
    --c-surface: #18221C;
    --c-surface-2: #202D24;
    --c-brand: #8FC6A5;
    --c-brand-hover: #B0D9BE;
    --c-on-brand: #101713;
    --c-text: #F0F2ED;
    --c-text-2: #B0BBB2;
    --c-border: #344239;
    --c-border-strong: #6E8075;
    --c-gold: #D7B675;
  --c-gold-ink: #D7B675;
    --c-gold-ink: #D7B675;
    --c-focus: #A4D8B4;
    --c-checked: #223529;
    --c-fire-bg: #422722;  --c-fire: #FFB4A8;
    --c-rec-bg: #3D301C;   --c-rec: #F0CA83;
    --c-new-bg: #202F49;   --c-new: #A9C8FF;
    --c-shadow: 0 0 0;
  }
}
/* ---------- tokens: dark (student's explicit choice) ---------- */
:root[data-theme="dark"] {
  --c-bg: #101713;
  --c-surface: #18221C;
  --c-surface-2: #202D24;
  --c-brand: #8FC6A5;
  --c-brand-hover: #B0D9BE;
  --c-on-brand: #101713;
  --c-text: #F0F2ED;
  --c-text-2: #B0BBB2;
  --c-border: #344239;
  --c-border-strong: #6E8075;
  --c-gold: #D7B675;
  --c-gold-ink: #D7B675;
  --c-focus: #A4D8B4;
  --c-checked: #223529;
  --c-fire-bg: #422722;  --c-fire: #FFB4A8;
  --c-rec-bg: #3D301C;   --c-rec: #F0CA83;
  --c-new-bg: #202F49;   --c-new: #A9C8FF;
  --c-shadow: 0 0 0;
}
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }

/* ---------- base (v2 pages only) ---------- */
html.v2 body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html.v2 #app { max-width: none; padding: 0; }
.v2 a { color: var(--c-brand); text-underline-offset: 3px; }
.v2 :focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 6px; }
.v2 h1, .v2 h2, .v2 h3 { margin: 0; }
.v2 p { margin: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
@media (min-width: 600px) { :root { --pad: 24px; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- preview banner ---------- */
.v2 .preview-bar {
  background: var(--c-fire-bg); color: var(--c-fire);
  font-size: 13px; font-weight: 600; text-align: center;
  padding: var(--s-2) var(--pad);
}

/* ---------- utilities ---------- */
.v2 [hidden] { display: none !important; }
.skip-link {
  position: absolute; left: var(--s-2); top: -64px; z-index: 100;
  background: var(--c-brand); color: var(--c-on-brand) !important; padding: 10px 16px; border-radius: var(--r-sm);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--s-2); }
html.v2.menu-open body { overflow: hidden; }
html.v2 { scroll-padding-top: 88px; }

/* =====================================================================
   SHARED HEADER + NAVIGATION
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-bg); border-bottom: 1px solid var(--c-border);
}
.header-bar { display: flex; align-items: center; gap: var(--s-6); height: 64px; }
.brand-link {
  display: inline-flex; align-items: center; gap: 10px; margin-right: auto;
  min-height: 44px; text-decoration: none; color: var(--c-brand); border-radius: var(--r-sm);
}
.brand-mark {
  position: relative; flex: none; width: 40px; height: 40px; overflow: hidden;
  border-radius: 10px; background: #F5F2E8; box-shadow: inset 0 0 0 1px rgb(25 37 31 / 0.08);
}
/* Crops the emblem (book + staff + arc) out of the supplied full logo image. */
.brand-mark img { position: absolute; max-width: none; width: 168px; height: auto; left: -10.6px; top: -9.9px; }
.wordmark {
  font-family: var(--font-serif); font-weight: 600; font-size: 21px; letter-spacing: -0.01em;
  color: var(--c-brand); line-height: 1; white-space: nowrap;
}
.logo { display: block; height: 36px; width: auto; max-width: 220px; object-fit: contain; }
.logo-dark { display: none; }
:root[data-theme="dark"] .has-dark-logo .logo-light { display: none; }
:root[data-theme="dark"] .has-dark-logo .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .has-dark-logo .logo-light { display: none; }
  :root:not([data-theme="light"]) .has-dark-logo .logo-dark { display: block; }
}

.main-nav { display: none; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--s-1); }
.v2 .nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: none;
  font: 500 15px/1 var(--font-ui); color: var(--c-text); text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.v2 .nav-link:hover { background: var(--c-surface-2); color: var(--c-brand); }
.v2 .nav-link.is-active { color: var(--c-brand); font-weight: 600; }
.v2 .nav-link.is-active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -12px; height: 2px;
  background: var(--c-gold); border-radius: 2px;
}
.nav-menu-btn svg { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.nav-menu-btn[aria-expanded="true"] { background: var(--c-surface-2); }
.nav-menu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-dropdown { position: relative; }
.menu {
  position: absolute; top: calc(100% + 12px); right: 0;
  width: min(300px, calc(100vw - 32px)); padding: var(--s-2);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
  box-shadow: 0 16px 40px rgb(var(--c-shadow) / 0.12), 0 2px 6px rgb(var(--c-shadow) / 0.06);
  animation: rise var(--t-fast) var(--ease) both;
}
.menu-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-text-2); padding: var(--s-2) var(--s-3) var(--s-1);
}
.menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.v2 .menu-link {
  display: flex; flex-direction: column; gap: 2px; padding: 10px var(--s-3);
  border-radius: var(--r-sm); text-decoration: none; color: var(--c-text);
}
.v2 .menu-link:hover, .v2 .menu-link[aria-current] { background: var(--c-surface-2); }
.menu-title { font-family: var(--font-serif); font-size: 19px; font-weight: 600; display: flex; align-items: center; gap: var(--s-2); }
.menu-meta { font-size: 13px; color: var(--c-text-2); }
.menu-meta.ready { color: var(--c-brand); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: var(--s-2); }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--c-border); border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--c-text); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.icon-btn:hover { border-color: var(--c-border-strong); background: var(--c-surface-2); }
.icon-btn svg { width: 20px; height: 20px; }

/* ---------- phone menu: a sheet that drops from under the header (2026-10-20) ----------
   The header stays (logo · theme · ×); the sheet is only as tall as its content, over a dimmed page.
   The three destinations as one row of tiles, then module cards. No divider lines; grouping comes from surfaces. */
.mobile-panel { position: absolute; top: 100%; left: 0; right: 0; height: 100vh; height: 100dvh; z-index: 100; }
.dr-scrim { position: absolute; inset: 0; background: rgb(8 14 11 / 0.58); opacity: 0; transition: opacity 260ms var(--m-ease, ease); touch-action: none; }
.drawer {
  position: relative; max-height: calc(100dvh - 64px); overflow: hidden; display: flex; flex-direction: column;
  background: var(--c-bg); border-bottom: 1px solid var(--c-border); border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.20);
  opacity: 0; transform: translateY(-14px); transition: opacity 220ms var(--m-ease, ease), transform 300ms var(--m-ease, ease);
}
.mobile-panel.is-open .dr-scrim { opacity: 1; }
.mobile-panel.is-open .drawer { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .dr-scrim, .drawer { transition: none; } }
/* the × in the header while the sheet is open */
html.menu-open .menu-toggle { background: var(--c-surface-2); border-color: var(--c-border-strong); }
.dr-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; width: 100%; max-width: 560px; margin: 0 auto; padding: var(--s-4) var(--pad, 16px) var(--s-5); display: grid; align-content: start; gap: var(--s-3); }

/* the three destinations, one row */
.dr-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.v2 .dr-tile {
  display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 76px; padding: 10px 6px;
  border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border);
  color: var(--c-text); text-decoration: none; text-align: center;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform 120ms var(--ease);
}
.dr-tile-ic { display: grid; place-items: center; color: var(--c-brand); }
.dr-tile-ic svg { width: 22px; height: 22px; }
.dr-tile-l { font-size: 14px; font-weight: 600; line-height: 1.2; }
@media (hover: hover) { .v2 .dr-tile:hover { border-color: var(--c-brand); } }
.v2 .dr-tile.is-active { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-brand); }
.v2 .dr-tile.is-active .dr-tile-ic { color: var(--c-on-brand); }
html.motion .dr-tile:active, html.motion a.dr-mod:active { transform: scale(0.975); }

/* modules */
.dr-label { margin: var(--s-4) 0 0 !important; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-2); }
.dr-mods { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.dr-mod {
  display: flex; align-items: center; gap: var(--s-3); min-height: 76px; padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: inset 3px 0 0 var(--c-brand);
  color: var(--c-text); text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), transform 120ms var(--ease);
}
.v2 a.dr-mod { color: var(--c-text); }
@media (hover: hover) { a.dr-mod:hover { border-color: var(--c-brand); } }
.dr-mod-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.dr-mod-name { font-family: var(--font-serif); font-size: 24px; font-weight: 600; line-height: 1.1; display: flex; align-items: center; gap: var(--s-2); }
.dr-mod-meta { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--c-text-2); line-height: 1.35; }
a.dr-mod .dr-mod-meta { color: var(--c-brand); font-weight: 600; }
.dr-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-brand); }
.dr-mod-go { flex: none; display: grid; place-items: center; min-width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-brand); }
.dr-mod-go svg { width: 18px; height: 18px; }
.dr-mod.is-here { border-color: var(--c-brand); background: var(--c-got-bg); }
.dr-here { padding: 0 10px; font-size: 12px; font-weight: 700; color: var(--c-brand); white-space: nowrap; }
.dr-mod.is-soon { background: transparent; border-style: dashed; box-shadow: none; color: var(--c-text-2); cursor: default; }
.dr-mod.is-soon .dr-mod-name { color: var(--c-text-2); }
.dr-soon { flex: none; padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-surface-2); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--c-text-2); }

/* short phones: tighter, so everything still fits without scrolling */
@media (max-height: 600px) {
  .dr-tile { min-height: 64px; }
  .dr-mod { min-height: 64px; }
  .dr-mod-name { font-size: 21px; }
}
@media (min-width: 880px) {
  .main-nav { display: block; }
  .menu-toggle, .mobile-panel { display: none !important; }
}

/* ---------- buttons ---------- */
.v2 .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 12px 22px; border-radius: var(--r-md);
  font: 600 16px/1.2 var(--font-ui); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; margin: 0;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.v2 .btn:active { transform: translateY(1px); }
.v2 .btn svg { width: 18px; height: 18px; flex: none; }
.v2 .btn-primary { background: var(--c-brand); color: var(--c-on-brand); }
.v2 .btn-primary:hover { background: var(--c-brand-hover); }
.v2 .btn-secondary { background: var(--c-surface); color: var(--c-brand); border-color: var(--c-border-strong); }
.v2 .btn-secondary:hover { background: var(--c-surface-2); }
.v2 .btn-quiet { background: transparent; color: var(--c-brand); border-color: var(--c-border); }
.v2 .btn-quiet:hover { background: var(--c-surface-2); border-color: var(--c-border-strong); }
.v2 .btn-block { width: 100%; }

/* ---------- labels ---------- */
.v2 .label {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px/1.3 var(--font-ui); letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--c-surface-2); color: var(--c-text-2); vertical-align: middle;
}
.v2 .label-status { background: var(--c-rec-bg); color: var(--c-rec); text-transform: uppercase; }

/* ---------- tags ---------- */
.v2 .tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.v2 .tag {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 0;
  max-width: 100%; padding: 4px 10px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; line-height: 1.45;
}
.v2 .tag > span { white-space: nowrap; }
.v2 .tag .tag-years { font-weight: 500; }
.v2 .tag-came-before { background: var(--c-fire-bg); color: var(--c-fire); }
.v2 .tag-recurring { background: var(--c-rec-bg); color: var(--c-rec); }
.v2 .tag-practice { background: var(--c-new-bg); color: var(--c-new); }

/* ---------- shared type ---------- */
.kicker-gold {
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-gold-ink); margin-bottom: var(--s-2) !important;
}
.section-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(26px, 4.2vw, 36px); line-height: 1.18; letter-spacing: -0.01em; }
.section-title:focus { outline: none; }
.section-sub { color: var(--c-text-2); font-size: 15px; max-width: 26em; }
.ar-inline { font-family: var(--font-ar); font-weight: 600; color: var(--c-text); }

/* =====================================================================
   HOME
   ===================================================================== */
.hero { padding: var(--s-12) 0 var(--s-16); }
.hero-grid { display: grid; gap: var(--s-10); }
@media (min-width: 960px) {
  .hero { padding: 88px 0 96px; }
  .hero-grid { grid-template-columns: 1.2fr 0.8fr; align-items: center; gap: 72px; }
}
.eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-text-2);
}
.eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--c-gold); flex: none; }
.display {
  margin-top: var(--s-5) !important;
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(34px, 6.2vw, 58px); line-height: 1.08; letter-spacing: -0.02em; color: var(--c-text);
}
.display .accent { color: var(--c-brand); }
.hero-lead { margin-top: var(--s-5) !important; font-size: 18px; line-height: 1.65; color: var(--c-text-2); max-width: 32em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.hero-facts {
  list-style: none; margin: var(--s-8) 0 0; padding: var(--s-5) 0 0; border-top: 1px solid var(--c-border);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); font-size: 14px; color: var(--c-text-2);
}
.hero-facts li { display: inline-flex; align-items: center; gap: 10px; }
.hero-facts li::before { content: ""; width: 6px; height: 6px; background: var(--c-gold); transform: rotate(45deg); flex: none; }

.method {
  position: relative; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--s-6) var(--s-6) var(--s-5); overflow: hidden;
}
.method::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c-gold); }
.method-label { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-2); }
.steps { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.step { display: flex; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--c-border); }
.step-n { flex: none; width: 24px; font-family: var(--font-serif); font-size: 28px; line-height: 1; color: var(--c-gold-ink); }
.step-title { display: block; font-weight: 600; font-size: 16px; }
.step-text { display: block; font-size: 15px; color: var(--c-text-2); margin-top: 2px; }
.method-tags { margin-top: var(--s-5) !important; }
.method-note { font-size: 13px; color: var(--c-text-2); margin-top: var(--s-3) !important; }

.band { background: var(--c-surface-2); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); padding: var(--s-12) 0; }
@media (min-width: 960px) { .band { padding: 80px 0; } }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-3) var(--s-6); margin-bottom: var(--s-8); }

.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-5); } }
.module-tile {
  display: flex; flex-direction: column; gap: var(--s-5); height: 100%;
  padding: var(--s-6); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  color: var(--c-text) !important; text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.module-tile:hover { border-color: var(--c-brand); box-shadow: 0 10px 28px rgb(var(--c-shadow) / 0.08); transform: translateY(-2px); }
.tile-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.tile-index { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--c-gold-ink); }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.status-on { color: var(--c-brand); }
.status-on::before { background: var(--c-brand); }
.status-off { color: var(--c-text-2); }
.status-off::before { border: 1.5px solid var(--c-border-strong); }
.tile-name {
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(34px, 5vw, 44px); line-height: 1.05; letter-spacing: -0.01em;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3);
}
.tile-rows { display: grid; border-top: 1px solid var(--c-border); }
.tile-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--c-border); font-size: 14px; }
.tile-k { font-weight: 600; }
.tile-v { color: var(--c-text-2); text-align: right; }
.tile-v.ready { color: var(--c-brand); font-weight: 600; }
.tile-cta { margin-top: auto; display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; color: var(--c-brand); }
.tile-cta svg { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
.module-tile:hover .tile-cta svg { transform: translateX(3px); }
.module-tile.is-soon .tile-name { color: var(--c-text-2); }
.module-tile.is-soon .tile-cta { color: var(--c-text-2); }

.about { padding: var(--s-12) 0; }
@media (min-width: 960px) { .about { padding: 88px 0; } }
.about-grid { display: grid; gap: var(--s-8); }
@media (min-width: 960px) { .about-grid { grid-template-columns: 0.8fr 1.2fr; gap: 72px; } }
.about-lead { margin-top: var(--s-4) !important; font-size: 17px; color: var(--c-text-2); max-width: 28em; }
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .features { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.features li { display: grid; gap: 6px; align-content: start; padding-top: var(--s-4); border-top: 2px solid var(--c-brand); }
.feature-title { font-weight: 600; font-size: 16px; }
.feature-title .ar-inline { font-size: 17px; }
.feature-text { font-size: 15px; color: var(--c-text-2); }
.sub-h { margin: var(--s-10) 0 var(--s-4) !important; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-2); }
.tagdefs { margin: 0; display: grid; gap: var(--s-4); }
.tagdef { display: grid; gap: 6px; }
@media (min-width: 640px) { .tagdef { grid-template-columns: 200px 1fr; align-items: baseline; gap: var(--s-4); } }
.tagdef dt { margin: 0; }
.tagdef dd { margin: 0; font-size: 15px; color: var(--c-text-2); }
.legend-note { margin-top: var(--s-5) !important; font-size: 14px; color: var(--c-text-2); }

.feedback-band { background: var(--c-surface); border-top: 1px solid var(--c-border); padding: var(--s-10) 0; }
.feedback-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-6); }
.feedback-title { font-family: var(--font-serif); font-size: 28px; font-weight: 600; }
.feedback-text { color: var(--c-text-2); flex: 1 1 260px; }
.feedback-soon { font-size: 14px; color: var(--c-text-2); }

#modules-h, #about-h { scroll-margin-top: 88px; }

/* =====================================================================
   SHARED FOOTER
   ===================================================================== */
.site-footer { background: var(--c-bg); border-top: 1px solid var(--c-border); padding: var(--s-12) 0 calc(var(--s-6) + env(safe-area-inset-bottom)); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8) var(--s-6); }
.footer-grid > :first-child, .footer-grid > :last-child { grid-column: 1 / -1; }
@media (min-width: 880px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; }
  .footer-grid > :first-child, .footer-grid > :last-child { grid-column: auto; }
}
.footer-brand { display: grid; gap: var(--s-2); align-content: start; }
.footer-wordmark { font-family: var(--font-serif); font-size: 21px; font-weight: 600; color: var(--c-brand); }
.footer-h { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-2); margin-bottom: var(--s-3) !important; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: 15px; }
.v2 .footer-link { color: var(--c-text); text-decoration: none; }
.v2 .footer-link:hover { color: var(--c-brand); text-decoration: underline; }
.footer-muted { font-size: 14px; color: var(--c-text-2); }
.footer-feedback { margin-top: var(--s-2) !important; font-size: 15px; }
.footer-bottom { margin-top: var(--s-10); padding-top: var(--s-5); border-top: 1px solid var(--c-border); font-size: 13px; color: var(--c-text-2); }
.site-footer.is-compact { padding: var(--s-5) 0 calc(var(--s-5) + env(safe-area-inset-bottom)); margin-top: var(--s-10); }
.footer-compact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-size: 14px; }
.footer-compact .footer-wordmark { font-size: 17px; }
.footer-spacer { flex: 1; }

/* =====================================================================
   QUESTION PAGE
   ===================================================================== */
.study { padding-top: var(--s-5); }
.study.wrap { max-width: 760px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 14px; }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--c-text-2); }
.crumbs li + li::before { content: "/"; color: var(--c-border-strong); }
.crumbs a { color: var(--c-text-2); text-decoration: none; padding: 6px 0; overflow-wrap: anywhere; }
.crumbs a:hover { color: var(--c-brand); text-decoration: underline; }
.crumbs [aria-current] { color: var(--c-text); font-weight: 500; }

.study-head { margin: var(--s-5) 0 var(--s-4); display: grid; gap: 6px; }
.study-kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.study-kicker .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--c-gold); }
.study-title { font-family: var(--font-serif); font-weight: 600; font-size: 22px; line-height: 1.3; }
@media (min-width: 768px) { .study-title { font-size: 26px; } }

.v2 .progress { display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); }
.progress-track { height: 4px; background: var(--c-border); border-radius: var(--r-pill); overflow: hidden; }
.progress-fill { display: block; height: 100%; background: var(--c-brand); border-radius: var(--r-pill); transition: width var(--t-base) var(--ease); }
.progress-text { font-size: 14px; color: var(--c-text-2); }

.qcard {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-4) 0;
}
@media (min-width: 600px) { .qcard { padding: var(--s-8) var(--s-8) 0; } }
.qcard-top { display: grid; gap: var(--s-3); }
.notice {
  display: flex; align-items: flex-start; gap: var(--s-2);
  font-size: 15px; color: var(--c-text); background: var(--c-surface-2);
  border-radius: var(--r-sm); padding: 10px 12px;
}
.notice svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--c-brand); }
.q-text {
  font-family: var(--font-ui); font-weight: 650; color: var(--c-text);
  font-size: 20px; line-height: 1.4; letter-spacing: -0.01em; margin-top: var(--s-2) !important;
}
@media (min-width: 768px) { .q-text { font-size: 22px; } }
.q-note { font-size: 14px; color: var(--c-text-2); }
.reveal-row { padding: var(--s-6) 0 var(--s-5); }
@media (min-width: 600px) { .reveal-row .btn { width: auto; min-width: 260px; } }

.q-section { padding: var(--s-6) 0 0; }
.q-section + .q-section { margin-top: var(--s-2); }
.q-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.q-h {
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-2);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.q-h::before { content: ""; width: 14px; height: 2px; background: var(--c-gold); border-radius: 2px; }
.q-h:focus { outline: none; }
.q-help { font-size: 14px; color: var(--c-text-2); }
.q-divider { height: 1px; background: var(--c-border); margin-top: var(--s-6); }

/* checklist (skeleton points) */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.check {
  display: flex; align-items: flex-start; gap: var(--s-3);
  min-height: 48px; padding: 12px; margin: 0 -12px;
  border-radius: var(--r-md); cursor: pointer;
  font-size: 17px; line-height: 1.55;
  transition: background-color var(--t-base) var(--ease);
}
.check:hover { background: var(--c-surface-2); }
.check:has(input:checked) { background: var(--c-checked); }
.check input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 24px; height: 24px; margin: 1px 0 0;
  border: 2px solid var(--c-border-strong); border-radius: 7px; background: var(--c-surface);
  display: grid; place-content: center; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.check input::before {
  content: ""; width: 12px; height: 12px; background: var(--c-on-brand);
  clip-path: polygon(14% 44%, 0 62%, 42% 100%, 100% 20%, 84% 4%, 40% 66%);
  transform: scale(0); transition: transform var(--t-fast) var(--ease);
}
.check input:checked { background: var(--c-brand); border-color: var(--c-brand); }
.check input:checked::before { transform: scale(1); }
.check input:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.check-text { min-width: 0; overflow-wrap: anywhere; }

.clarify {
  margin-top: var(--s-4); padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--c-border); font-size: 15px; color: var(--c-text-2);
}
.clarify b { color: var(--c-text); font-weight: 600; }
.source { margin-top: var(--s-4) !important; font-size: 14px; color: var(--c-text-2); }

/* key English phrases */
.phrases { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); border-left: 3px solid var(--c-brand); padding-left: var(--s-4); }
.phrases li { font-size: 17px; line-height: 1.55; color: var(--c-text); overflow-wrap: anywhere; }

/* Arabic */
.ar-toggle-row { padding: var(--s-6) 0 0; }
.v2 .btn-ar { font-family: var(--font-ar); font-size: 17px; font-weight: 600; }
.ar-panel {
  margin-top: var(--s-6);
  background: var(--c-surface-2); border-radius: var(--r-md);
  padding: var(--s-5) var(--s-5) var(--s-4);
  font-family: var(--font-ar); font-size: 18px; line-height: 1.95; color: var(--c-text);
  text-align: right; overflow-wrap: anywhere;
}
.ar-panel .ar-h { font-family: var(--font-ar); font-size: 15px; font-weight: 700; color: var(--c-brand); margin-bottom: var(--s-2); }
.ar-panel p + p { margin-top: var(--s-3); }
.ar-panel bdi { font-family: var(--font-ui); font-size: 0.92em; font-weight: 500; }
.ar-panel bdi.nw { white-space: nowrap; }   /* keep short English terms together; long ones may wrap */
@media (min-width: 600px) { .ar-panel { font-size: 19px; padding: var(--s-6); } }
.ar-panel + .ar-toggle-row { padding-top: var(--s-3); }

/* sticky recall bar */
.recall-bar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin: var(--s-6) calc(-1 * var(--s-4)) 0;
  padding: 12px var(--s-4) calc(12px + env(safe-area-inset-bottom));
  background: var(--c-surface); border-top: 1px solid var(--c-border);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
@media (min-width: 600px) { .recall-bar { margin: var(--s-8) calc(-1 * var(--s-8)) 0; padding-left: var(--s-8); padding-right: var(--s-8); } }
.recall-count { font-size: 15px; color: var(--c-text-2); white-space: nowrap; }
.recall-count strong { color: var(--c-text); font-weight: 650; font-variant-numeric: tabular-nums; }
@media (min-width: 400px) { .recall-bar .btn { min-width: 128px; } }
.qcard-pad { height: var(--s-5); }

/* done */
.done-card {
  text-align: center; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--s-10) var(--s-5) var(--s-6); display: grid; gap: var(--s-3);
}
.done-mark { width: 48px; height: 48px; margin: 0 auto var(--s-2); border-radius: 50%; display: grid; place-items: center; background: var(--c-surface-2); color: var(--c-brand); }
.done-mark svg { width: 24px; height: 24px; }
.done-title { font-family: var(--font-serif); font-size: 28px; font-weight: 600; }
.done-text { color: var(--c-text-2); font-size: 16px; margin-bottom: var(--s-3) !important; }
.done-actions { display: grid; gap: var(--s-3); max-width: 360px; width: 100%; margin: 0 auto; }

.empty-v2 {
  margin: var(--s-6) 0; padding: var(--s-8) var(--s-5); text-align: center; color: var(--c-text-2);
  background: var(--c-surface-2); border-radius: var(--r-lg);
}

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.enter { animation: rise var(--t-base) var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .v2 *, .v2 *::before, .v2 *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   MODULE PAGE
   ===================================================================== */
.page { padding-top: var(--s-6); padding-bottom: var(--s-12); }
@media (min-width: 960px) { .page { padding-top: var(--s-10); padding-bottom: var(--s-16); } }
.v2 .back-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 40px; padding: 8px 14px 8px 10px; margin-left: -2px;
  border: 1px solid var(--c-border); border-radius: var(--r-pill); background: var(--c-surface);
  font-size: 14px; font-weight: 600; color: var(--c-brand); text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.v2 .back-btn:hover { background: var(--c-surface-2); border-color: var(--c-border-strong); }
.v2 .back-btn svg { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.v2 .back-btn:hover svg { transform: translateX(-2px); }

.page-head { margin: var(--s-8) 0 var(--s-8); }
@media (min-width: 960px) { .page-head { margin: var(--s-10) 0; } }
.page-title { margin-top: 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.page-sub { margin-top: var(--s-4) !important; font-size: 17px; color: var(--c-text-2); max-width: 34em; }

.subject-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .subject-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .subject-grid { grid-template-columns: repeat(3, 1fr); } }
.subject-grid > li { display: flex; }
.subject-card {
  flex: 1; display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4); border-radius: var(--r-md);
  background: var(--c-surface); border: 1px solid var(--c-border);
  color: var(--c-text) !important; text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
@media (min-width: 768px) { .subject-card { padding: var(--s-6); } }
a.subject-card:hover { border-color: var(--c-brand); box-shadow: 0 8px 24px rgb(var(--c-shadow) / 0.08); transform: translateY(-2px); }
.subject-card.is-soon { background: transparent; border-style: dashed; }
.subject-top { display: flex; align-items: center; justify-content: space-between; min-height: 20px; }
.subject-index { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--c-gold-ink); }
.subject-arrow { color: var(--c-brand); display: inline-flex; }
.subject-arrow svg { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
a.subject-card:hover .subject-arrow svg { transform: translateX(3px); }
.subject-name { font-family: var(--font-serif); font-size: 23px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.subject-card.is-soon .subject-name { color: var(--c-text-2); }
.subject-meta { font-size: 14px; color: var(--c-text-2); }
.subject-meta.ready { color: var(--c-brand); font-weight: 600; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--s-3); }
.badge {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; line-height: 1.45;
}
.badge-on { background: var(--c-surface-2); color: var(--c-brand); box-shadow: inset 0 0 0 1px var(--c-brand); }
.badge-on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-brand); }
.badge-off { background: transparent; color: var(--c-text-2); box-shadow: inset 0 0 0 1px var(--c-border); font-weight: 500; }

/* =====================================================================
   SUBJECT PAGE (lecture list) + LECTURE PAGE
   ===================================================================== */
.page-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.page-nav .crumbs { min-width: 0; }

.lec-list {
  list-style: none; margin: 0; padding: 0;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden;
}
.lec-list > li + li { border-top: 1px solid var(--c-border); }
.lec-row {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 72px; padding: var(--s-4);
  color: var(--c-text) !important; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}
@media (min-width: 768px) { .lec-row { padding: var(--s-5) var(--s-6); gap: var(--s-5); } }
a.lec-row:hover { background: var(--c-surface-2); }
.lec-num {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 18px; font-weight: 600;
  background: var(--c-surface-2); color: var(--c-brand); box-shadow: inset 0 0 0 1px var(--c-border);
}
.lec-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lec-title { font-size: 17px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.lec-meta { font-size: 14px; color: var(--c-text-2); }
.lec-meta.ready { color: var(--c-brand); font-weight: 600; }
.lec-arrow { flex: none; color: var(--c-brand); display: inline-flex; }
.lec-arrow svg { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
a.lec-row:hover .lec-arrow svg { transform: translateX(3px); }
.lec-row.is-off { background: transparent; }
.lec-row.is-off .lec-num { background: transparent; color: var(--c-text-2); box-shadow: inset 0 0 0 1px var(--c-border); }
.lec-row.is-off .lec-title { color: var(--c-text-2); font-weight: 500; }

.set-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .set-grid { grid-template-columns: repeat(2, 1fr); } }
.set-grid > li { display: flex; }
.set-card {
  flex: 1; display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-5) var(--s-4); border-radius: var(--r-md);
  background: var(--c-surface); border: 1px solid var(--c-border);
  color: var(--c-text) !important; text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
@media (min-width: 768px) { .set-card { padding: var(--s-6); } }
.set-card:hover { border-color: var(--c-brand); box-shadow: 0 8px 24px rgb(var(--c-shadow) / 0.08); transform: translateY(-2px); }
.set-card.is-primary { border-color: var(--c-brand); box-shadow: inset 0 3px 0 var(--c-brand); }
.set-label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-ink); }
.set-title { font-family: var(--font-serif); font-size: 26px; font-weight: 600; line-height: 1.2; margin-top: var(--s-1); }
.set-sub { font-size: 15px; color: var(--c-text-2); }
.set-cta { margin-top: var(--s-4); display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; color: var(--c-brand); }
.set-cta svg { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
.set-card:hover .set-cta svg { transform: translateX(3px); }

.lec-how { margin-top: var(--s-10); padding-top: var(--s-2); border-top: 1px solid var(--c-border); max-width: 760px; }
.lec-how .sub-h { margin-top: var(--s-6) !important; }
.lec-how-text { font-size: 16px; color: var(--c-text-2); }
.page .empty-v2 { margin-top: var(--s-6); }

/* =====================================================================
   v3 — STUDENT EXPERIENCE (home, lecture start, study session, results)
   ===================================================================== */
:root {
  --c-got: #1E6B4A;   --c-got-bg: #E3F0E8;
  --c-miss: #8A4B12;  --c-miss-bg: #FBEEDD;
}
:root[data-theme="dark"] { --c-got: #9FD4B4; --c-got-bg: #1D3427; --c-miss: #F2C08A; --c-miss-bg: #3A2A17; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-got: #9FD4B4; --c-got-bg: #1D3427; --c-miss: #F2C08A; --c-miss-bg: #3A2A17; } }

.v2 .link-btn {
  background: none; border: 0; padding: 10px 4px; min-height: 44px; cursor: pointer;
  font: 600 15px/1.3 var(--font-ui); color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px;
}
.v2 .link-quiet { color: var(--c-text-2); font-weight: 500; }
.v2 .btn-lg { min-height: 54px; font-size: 17px; border-radius: var(--r-md); }

#how-h, #feedback-h { scroll-margin-top: 88px; }
#how-h:focus, #feedback-h:focus, #modules-h:focus { outline: none; }

/* ---------- lecture start ---------- */
.lecture-page .page-head { margin-bottom: var(--s-6); }
.start {
  max-width: 640px; padding: var(--s-6) var(--s-5); border-radius: var(--r-lg);
  background: var(--c-surface); border: 1px solid var(--c-border); position: relative; overflow: hidden;
}
.start::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c-brand); }
@media (min-width: 768px) { .start { padding: var(--s-8); } }
.start-label { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-ink); }
.facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s-2) var(--s-8); margin: var(--s-4) 0 0; }
.facts dt { font-size: 13px; color: var(--c-text-2); }
.facts dd { margin: 0; font-family: var(--font-serif); font-size: 26px; font-weight: 600; line-height: 1.2; }
.fact-note { font-size: 12px; }
@media (max-width: 420px) { .facts { grid-template-columns: repeat(2, auto); } .facts > div:last-child { grid-column: 1 / -1; } }
.start-evidence { display: flex; flex-wrap: wrap; gap: 6px var(--s-5); margin-top: var(--s-4) !important; font-size: 15px; color: var(--c-text); }
.start-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.start-actions .btn-primary { flex: 1 1 260px; }
.start-note { margin-top: var(--s-3) !important; font-size: 14px; color: var(--c-text-2); }
.extra-row {
  max-width: 640px; margin-top: var(--s-4); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); border-radius: var(--r-md); border: 1px solid var(--c-border);
  color: var(--c-text) !important; text-decoration: none; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.extra-row:hover { border-color: var(--c-brand); background: var(--c-surface); }
.extra-main { display: grid; gap: 2px; }
.extra-title { font-weight: 650; }
.extra-meta { font-size: 14px; color: var(--c-text-2); }
.extra-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--c-brand); white-space: nowrap; }
.extra-go svg { width: 18px; height: 18px; }
.lecture-page .lec-how { border-top: 0; margin-top: var(--s-8); }
.lecture-page .disclosure { margin-top: var(--s-4); }

/* ---------- study session ---------- */
html.in-session body { background: var(--c-bg); }
.study-bar { position: sticky; top: 0; z-index: 40; background: var(--c-bg); border-bottom: 1px solid var(--c-border); }
.study-bar-inner { max-width: 760px; margin: 0 auto; padding: 0 var(--pad); height: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3); }
.v2 .study-exit {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 8px;
  border-radius: var(--r-pill); color: var(--c-text-2); text-decoration: none; font-size: 15px; font-weight: 500;
}
.v2 .study-exit:hover { background: var(--c-surface-2); color: var(--c-text); }
.study-exit svg { width: 18px; height: 18px; }
.study-pos { font-size: 15px; font-weight: 600; color: var(--c-text); white-space: nowrap; }
.pos-of { color: var(--c-text-2); font-weight: 500; }
.pos-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-gold-ink); margin-right: 4px; }
.study-bar .icon-btn { justify-self: end; width: 40px; height: 40px; }
.study-progress { height: 3px; background: var(--c-border); }
.study-progress span { display: block; height: 100%; background: var(--c-brand); transition: width var(--t-base) var(--ease); }
.study-main { max-width: 760px; margin: 0 auto; padding: var(--s-5) var(--pad) var(--s-10); }
@media (min-width: 768px) { .study-main { padding-top: var(--s-8); } }

.study-q { display: grid; gap: var(--s-4); }
.q-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.v2 .why-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--c-border); background: transparent; color: var(--c-text-2); font: 500 13px/1.2 var(--font-ui); cursor: pointer;
}
.v2 .why-btn:hover, .v2 .why-btn[aria-expanded="true"] { border-color: var(--c-border-strong); color: var(--c-text); background: var(--c-surface); }
.why-btn svg { width: 15px; height: 15px; }
.why { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); font-size: 14px; }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.why-list li { display: grid; gap: 2px; }
.why-k { font-weight: 600; color: var(--c-text); }
.why-v { color: var(--c-text-2); }
.why-note { margin-top: var(--s-2) !important; color: var(--c-text-2); }
.review-note { display: flex; gap: var(--s-2); align-items: flex-start; font-size: 14px; color: var(--c-text-2); }
.review-note svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--c-gold-ink); }

.v2 .study-q .q-text {
  margin: var(--s-1) 0 0 !important; font-family: var(--font-ui); font-weight: 650; letter-spacing: -0.01em;
  font-size: 21px; line-height: 1.42; color: var(--c-text);
}
@media (min-width: 768px) { .v2 .study-q .q-text { font-size: 25px; } }
.study-q .q-text:focus { outline: none; }

.dots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dot { width: 22px; height: 6px; border-radius: 3px; background: var(--c-border); transition: background-color var(--t-base) var(--ease); }
.dot-got { background: var(--c-got); }
.dot-missed { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-miss); }
.dot-open { background: var(--c-gold); }

.pts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.pt { display: flex; gap: var(--s-3); align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); }
.pt-body { display: grid; gap: 2px; min-width: 0; }
.pt-text { font-size: 17px; line-height: 1.55; overflow-wrap: anywhere; }
.pt-state { font-size: 13px; font-weight: 600; }
.pt-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.pt-mark svg { width: 15px; height: 15px; }
.pt-got { background: var(--c-surface); border: 1px solid var(--c-border); }
.pt-got .pt-mark { background: var(--c-got-bg); color: var(--c-got); }
.pt-got .pt-state { color: var(--c-got); }
.pt-missed { background: var(--c-miss-bg); }
.pt-missed .pt-mark { background: var(--c-surface); color: var(--c-miss); }
.pt-missed .pt-state { color: var(--c-miss); }
.pt-open { background: var(--c-surface); border: 1.5px solid var(--c-brand); box-shadow: 0 6px 20px rgb(var(--c-shadow) / 0.06); }
.pt-open .pt-text { font-size: 18px; font-weight: 500; }
.pt-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--c-brand); color: var(--c-on-brand); font-size: 13px; font-weight: 700; margin-top: 1px; }
.saved-note { font-size: 13px; color: var(--c-miss); font-weight: 600; margin-top: calc(-1 * var(--s-2)) !important; }

.recall-prompt { padding: var(--s-5) 0 var(--s-1); border-top: 1px solid var(--c-border); display: grid; gap: var(--s-2); }
.recall-count-big { font-family: var(--font-serif); font-size: 24px; line-height: 1.3; }
.recall-count-big strong { color: var(--c-brand); font-weight: 600; }
.recall-ask { color: var(--c-text-2); font-size: 16px; }
.recall-ar { font-family: var(--font-ar); font-size: 16px; color: var(--c-gold-ink); font-weight: 600; text-align: right; }
.recall-next { font-size: 16px; color: var(--c-text-2); }
.hint { display: flex; flex-wrap: wrap; gap: 4px var(--s-2); align-items: baseline; padding: 10px 14px; border-radius: var(--r-md); border: 1px dashed var(--c-border-strong); font-size: 16px; }
.hint-k { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-gold-ink); }
.hint-k svg { width: 16px; height: 16px; }
.hint-v { color: var(--c-text); }

.dock { position: sticky; bottom: 0; z-index: 5; padding: var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--c-bg) 22%); display: grid; gap: var(--s-2); }
.dock:empty { display: none; }
.dock-minor { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.mark-ask { font-size: 15px; color: var(--c-text-2); text-align: center; }
.mark-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.v2 .btn-mark { min-height: 56px; font-size: 17px; border-radius: var(--r-md); }
.v2 .btn-mark svg { width: 20px; height: 20px; }
.v2 .btn-got { background: var(--c-brand); color: var(--c-on-brand); }
@media (hover: hover) and (pointer: fine) { .v2 .btn-got:hover { background: var(--c-brand-hover); } }
.v2 .btn-missed { background: var(--c-surface); color: var(--c-miss); border-color: var(--c-border-strong); }
@media (hover: hover) and (pointer: fine) { .v2 .btn-missed:hover { background: var(--c-miss-bg); } }

.q-result { padding-top: var(--s-4); border-top: 1px solid var(--c-border); font-family: var(--font-serif); font-size: 22px; line-height: 1.3; }
.q-result.is-all { color: var(--c-brand); }
.q-result:focus { outline: none; }
.phr { display: grid; gap: var(--s-3); }
.study-q .ar-panel { margin-top: 0; }
.v2 .ar-close {
  display: block; margin: var(--s-4) 0 0 auto; min-height: 44px; padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--c-border-strong); background: transparent; color: var(--c-text); font: 600 15px var(--font-ar); cursor: pointer;
}

/* ---------- interlude + results ---------- */
.outcome { display: grid; gap: var(--s-4); padding-top: var(--s-2); }
.outcome-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(28px, 6vw, 40px); line-height: 1.15; letter-spacing: -0.01em; }
.outcome-title:focus { outline: none; }
.outcome-text { font-size: 17px; color: var(--c-text-2); max-width: 34em; }
.score { margin: var(--s-2) 0 0; display: grid; gap: 0; border-top: 1px solid var(--c-border); }
.score > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--c-border); }
.score dt { font-size: 15px; color: var(--c-text-2); }
.score dd { margin: 0; font-size: 16px; }
.score strong { font-family: var(--font-serif); font-size: 26px; font-weight: 600; color: var(--c-brand); }
.score-main strong { font-size: 32px; }
.look-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.look { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: inset 3px 0 0 var(--c-miss); }
.look-q { font-weight: 600; font-size: 16px; line-height: 1.45; }
.look-m { font-size: 14px; color: var(--c-miss); }
.outcome .sub-h { margin: var(--s-4) 0 0 !important; }
.outcome-actions { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.outcome-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.outcome-row .btn { flex: 1 1 160px; }
.outcome-actions .link-btn { justify-self: center; }
.outcome-feedback { margin-top: var(--s-6) !important; padding-top: var(--s-4); border-top: 1px solid var(--c-border); font-size: 14px; color: var(--c-text-2); }

/* Keep the open point / result clear of the sticky action bar when scrolled into view. */
.study-q #pt-open, .study-q #q-result { scroll-margin-bottom: 190px; scroll-margin-top: 80px; }

/* The sticky action bar is for one-handed phone use; on wider screens it simply follows the content. */
/* the Next / Check bar stays pinned at the bottom on every screen size, so you never scroll to move on */

/* =====================================================================
   v4 — question types (MCQ | Written | OSPE), origins, MCQ + recall, Test yourself
   ===================================================================== */
.soon-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--c-text-2); box-shadow: inset 0 0 0 1px var(--c-border-strong); }

/* subject: type cards */
.type-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .type-grid { grid-template-columns: repeat(3, 1fr); } }
.type-grid > li { display: flex; }
.type-card {
  flex: 1; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border-radius: var(--r-lg);
  background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text) !important; text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
@media (min-width: 768px) { .type-card { padding: var(--s-6); } }
a.type-card:hover { border-color: var(--c-brand); box-shadow: 0 8px 24px rgb(var(--c-shadow) / 0.08); transform: translateY(-2px); }
.type-card.is-soon { background: transparent; border-style: dashed; }
.type-card.is-soon .type-name, .type-card.is-soon .type-icon { color: var(--c-text-2); }
.type-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--c-surface-2); color: var(--c-brand); }
.type-icon svg { width: 22px; height: 22px; }
.type-name { font-family: var(--font-serif); font-size: 30px; font-weight: 600; line-height: 1.1; margin-top: var(--s-2); }
.type-desc { font-size: 15px; color: var(--c-text-2); }
.type-counts { display: flex; flex-wrap: wrap; gap: 4px var(--s-3); font-size: 14px; color: var(--c-text-2); margin-top: var(--s-1); }
.type-counts span:not(.soon-pill):not(:last-child)::after { content: "·"; margin-left: var(--s-3); color: var(--c-border-strong); }
.type-go { margin-top: var(--s-3); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--c-brand); }
.type-go svg { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
a.type-card:hover .type-go svg, a.origin-card:hover .type-go svg { transform: translateX(3px); }

.test-band {
  margin-top: var(--s-8); padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); position: relative; overflow: hidden;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  display: grid; gap: var(--s-4); align-items: center;
}
@media (min-width: 768px) { .test-band { grid-template-columns: 1fr auto; padding: var(--s-8); } }
.test-band::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--c-gold); }
.test-title { font-family: var(--font-serif); font-size: 26px; font-weight: 600; line-height: 1.2; }
.test-text { font-size: 15px; color: var(--c-text-2); margin-top: var(--s-1) !important; max-width: 36em; }

/* type page: origin cards */
.origin-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .origin-grid { grid-template-columns: 1fr 1fr; } }
.origin-grid > li { display: flex; }
.origin-card {
  flex: 1; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-6) var(--s-5); border-radius: var(--r-lg);
  background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text) !important; text-decoration: none; position: relative; overflow: hidden;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.origin-card.is-past::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c-gold); }
a.origin-card:hover { border-color: var(--c-brand); box-shadow: 0 8px 24px rgb(var(--c-shadow) / 0.08); transform: translateY(-2px); }
.origin-card.is-soon { background: transparent; border-style: dashed; }
.origin-name { font-family: var(--font-serif); font-size: 26px; font-weight: 600; line-height: 1.15; }
.origin-desc { font-size: 15px; color: var(--c-text-2); }
.origin-count { font-weight: 600; font-size: 15px; color: var(--c-brand); margin-top: var(--s-1); }
.origin-sub { font-weight: 500; color: var(--c-text-2); }
.origin-card.is-soon .origin-count { color: var(--c-text-2); }

/* test setup */
.setup { max-width: 640px; }
.setup .sub-h { margin-top: var(--s-6) !important; }
.seg { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.v2 .seg-btn { min-height: 44px; min-width: 120px; padding: 8px 18px; border: 0; border-radius: 9px; background: transparent; color: var(--c-text-2); font: 600 16px var(--font-ui); cursor: pointer; }
.v2 .seg-btn[aria-checked="true"] { background: var(--c-surface); color: var(--c-brand); box-shadow: 0 1px 3px rgb(var(--c-shadow) / 0.12), inset 0 0 0 1px var(--c-border); }
.setup-note { margin-top: var(--s-3) !important; font-size: 14px; color: var(--c-text-2); max-width: 36em; }
.len-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); margin-top: var(--s-3); }
.v2 .len-btn {
  display: grid; gap: 2px; text-align: left; padding: var(--s-4); border-radius: var(--r-md); min-height: 76px;
  background: var(--c-surface); border: 1px solid var(--c-border-strong); color: var(--c-text); font: inherit; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.v2 .len-btn:hover { border-color: var(--c-brand); background: var(--c-surface-2); }
.len-btn.is-off { opacity: 0.55; border-style: dashed; cursor: default; }
.len-n { font-family: var(--font-serif); font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--c-brand); }
.len-btn.is-off .len-n { color: var(--c-text-2); }
.len-l { font-size: 14px; color: var(--c-text-2); }
.test-warn { margin-top: var(--s-3) !important; padding: 12px 14px; border-radius: var(--r-md); background: var(--c-rec-bg); color: var(--c-rec); font-size: 15px; }

/* question kind label */
.q-kind { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-gold-ink); margin-bottom: calc(-1 * var(--s-2)) !important; }

/* MCQ options */
.opts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.v2 .opt {
  width: 100%; display: flex; gap: var(--s-3); align-items: flex-start; text-align: left;
  padding: 12px 14px; min-height: 56px; border-radius: var(--r-md); cursor: pointer;
  background: var(--c-surface); border: 1.5px solid var(--c-border); color: var(--c-text); font: inherit;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
/* hover only with a real mouse: on phones the last tap "sticks" as hover on whatever option lands under the finger
   on the next question, which looks like a pre-selected answer */
@media (hover: hover) and (pointer: fine) { .v2 .opt:not(:disabled):hover { border-color: var(--c-border-strong); background: var(--c-surface-2); } }
.v2 .opt:disabled { cursor: default; }
.opt-letter { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--c-surface-2); color: var(--c-text-2); box-shadow: inset 0 0 0 1px var(--c-border); }
.opt-body { display: grid; gap: 4px; min-width: 0; }
.opt-text { font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.opt-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.opt-state svg { width: 15px; height: 15px; }
.opt-note { display: block; font-size: 14px; color: var(--c-text-2); line-height: 1.45; }
.v2 .opt.is-sel { border-color: var(--c-brand); background: var(--c-surface-2); }
.opt.is-sel .opt-letter { background: var(--c-brand); color: var(--c-on-brand); box-shadow: none; }
.v2 .opt.is-correct { border-color: var(--c-got); background: var(--c-got-bg); }
.opt.is-correct .opt-letter { background: var(--c-got); color: var(--c-surface); box-shadow: none; }
.opt.is-correct .opt-state { color: var(--c-got); }
.v2 .opt.is-wrong { border-color: var(--c-miss); background: var(--c-miss-bg); }
.opt.is-wrong .opt-letter { background: var(--c-miss); color: var(--c-surface); box-shadow: none; }
.opt.is-wrong .opt-state { color: var(--c-miss); }
.v2 .opt.is-dim .opt-text { color: var(--c-text-2); }
.explain { padding: var(--s-4); border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); display: grid; gap: var(--s-2); font-size: 16px; line-height: 1.6; }
.explain-src { font-size: 13px; color: var(--c-text-2); }
.dock-note { text-align: center; font-size: 14px; color: var(--c-text-2); }
.v2 .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* quick recall */
.answer-box { display: grid; gap: 4px; padding: var(--s-4); border-radius: var(--r-md); background: var(--c-surface); border: 1.5px solid var(--c-brand); scroll-margin-bottom: 190px; }
.answer-box.is-got { border-color: var(--c-got); background: var(--c-got-bg); }
.answer-box.is-missed { border-color: var(--c-miss); background: var(--c-miss-bg); }
.answer-k { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-gold-ink); }
.answer-v { font-size: 18px; font-weight: 600; line-height: 1.5; }

/* test results */
.breakdown { width: 100%; border-collapse: collapse; margin-top: var(--s-2); }
.breakdown caption { text-align: left; margin: 0 0 var(--s-2) !important; }
.breakdown th, .breakdown td { padding: 10px 0; border-bottom: 1px solid var(--c-border); font-size: 15px; vertical-align: top; }
.breakdown th { text-align: left; font-weight: 500; }
.breakdown td { text-align: right; font-weight: 700; white-space: nowrap; padding-left: var(--s-4); color: var(--c-brand); }
.bd-num { font-weight: 700; color: var(--c-gold-ink); margin-right: 6px; }
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.rv { border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--c-surface); }
.rv summary { display: flex; gap: var(--s-3); align-items: flex-start; padding: 12px 14px; cursor: pointer; list-style: none; min-height: 48px; }
.rv summary::-webkit-details-marker { display: none; }
.rv-mark { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.rv-mark svg { width: 14px; height: 14px; }
.rv.is-ok .rv-mark { background: var(--c-got-bg); color: var(--c-got); }
.rv.is-bad .rv-mark { background: var(--c-miss-bg); color: var(--c-miss); }
.rv-q { font-weight: 600; line-height: 1.45; }
.rv-n { color: var(--c-text-2); font-weight: 500; }
.rv-opts { list-style: none; margin: 0; padding: 0 14px; display: grid; gap: 6px; }
.rv-opts li { display: flex; gap: var(--s-2); align-items: flex-start; padding: 8px 10px; border-radius: var(--r-sm); font-size: 15px; }
.rv-opts li.is-correct { background: var(--c-got-bg); }
.rv-opts li.is-correct b { color: var(--c-got); }
.rv-opts li.is-wrong { background: var(--c-miss-bg); }
.rv-opts li.is-wrong b { color: var(--c-miss); }
.rv-opts .opt-letter { width: 24px; height: 24px; font-size: 12px; }
.rv-why { padding: var(--s-3) 14px 0; font-size: 15px; line-height: 1.6; }
.rv .explain-src { padding: 4px 14px 14px; }

.v2 .tag-formative { background: var(--c-surface-2); color: var(--c-brand); box-shadow: inset 0 0 0 1px var(--c-border); }


/* ---------- Test yourself hero (subject page) ---------- */
:root { --c-hero-bg: #174C3C; --c-hero-ink: #F7F6F1; --c-hero-muted: #CFDDD4; --c-hero-gold: #D7B675; --c-hero-line: rgb(247 246 241 / 0.18); }
:root[data-theme="dark"] { --c-hero-bg: #1F3D2F; --c-hero-ink: #F0F2ED; --c-hero-muted: #C2D2C7; --c-hero-gold: #E0C285; --c-hero-line: rgb(240 242 237 / 0.16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-hero-bg: #1F3D2F; --c-hero-ink: #F0F2ED; --c-hero-muted: #C2D2C7; --c-hero-gold: #E0C285; --c-hero-line: rgb(240 242 237 / 0.16); } }
.subject-head { margin-bottom: var(--s-5); }
.test-hero {
  position: relative; overflow: hidden; display: grid; gap: var(--s-6);
  padding: var(--s-8) var(--s-5); border-radius: var(--r-lg);
  background: var(--c-hero-bg); color: var(--c-hero-ink);
  box-shadow: 0 18px 40px rgb(var(--c-shadow) / 0.18);
}
@media (min-width: 900px) { .test-hero { grid-template-columns: 1.3fr 1fr; align-items: center; gap: var(--s-10); padding: var(--s-10); } }
.test-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c-hero-gold); }
.test-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 1px solid var(--c-hero-line); box-shadow: 0 0 0 40px rgb(255 255 255 / 0.03), 0 0 0 80px rgb(255 255 255 / 0.02); pointer-events: none; }
.test-hero-copy { position: relative; display: grid; gap: var(--s-3); }
.test-hero-kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-hero-gold); }
.test-hero-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(30px, 6vw, 44px); line-height: 1.1; letter-spacing: -0.015em; color: var(--c-hero-ink); }
.test-hero-text { font-size: 16px; line-height: 1.6; color: var(--c-hero-muted); max-width: 34em; }
.test-hero-ar { font-family: var(--font-ar); font-size: 17px; font-weight: 700; color: var(--c-hero-gold); text-align: right; }
@media (min-width: 900px) { .test-hero-ar { text-align: left; } }
.test-hero-actions { position: relative; display: grid; gap: var(--s-3); }
.v2 .hero-btn {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--s-3);
  padding: 14px 18px; min-height: 64px; border-radius: var(--r-md); text-decoration: none;
  border: 1.5px solid var(--c-hero-line); color: var(--c-hero-ink); background: rgb(255 255 255 / 0.04);
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.v2 .hero-btn:hover { border-color: var(--c-hero-gold); background: rgb(255 255 255 / 0.08); transform: translateY(-1px); }
.v2 .hero-btn.is-main { background: var(--c-hero-gold); border-color: var(--c-hero-gold); color: #19251F; }
.v2 .hero-btn.is-main:hover { filter: brightness(1.05); }
.hero-btn-l { grid-column: 1; font-size: 18px; font-weight: 700; }
.hero-btn-n { grid-column: 1; font-size: 14px; opacity: 0.85; }
.hero-btn svg { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; }
.hero-btn.is-off { opacity: 0.6; border-style: dashed; }
.v2 .hero-btn:focus-visible { outline: 2px solid var(--c-hero-gold); outline-offset: 3px; }
.section-label { margin: var(--s-10) 0 var(--s-4) !important; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-2); }

/* ---------- instant MCQ feedback: a quick, satisfying "pop" on the tapped answer ---------- */
@keyframes pop { 0% { transform: scale(0.97); } 55% { transform: scale(1.02); } 100% { transform: scale(1); } }
.v2 .opt.pop { animation: pop 180ms var(--ease) both; }
.v2 .opt.is-correct.pop { box-shadow: 0 0 0 4px rgb(30 107 74 / 0.18); }
.v2 .opt.is-wrong.pop { box-shadow: 0 0 0 4px rgb(138 75 18 / 0.18); }
.v2 .opt { transition: border-color 80ms linear, background-color 80ms linear; }

.section-how { font-size: 14px; font-weight: 600; color: var(--c-text); }


.try-again { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--c-gold-ink); background: var(--c-surface-2); border-radius: var(--r-pill); padding: 4px 12px; }
.try-again svg { width: 15px; height: 15px; }
.look-l { font-weight: 700; color: var(--c-gold-ink); margin-right: 2px; }
.v2 button.study-exit { background: none; border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 500; }
.v2 .study-exit span { white-space: nowrap; }


/* ---------- v5: written = write → show the answer → mark every point; quick checks ---------- */
.ans { display: grid; gap: var(--s-3); }
#ans-h { scroll-margin-top: 80px; }
.ans-help { font-size: 15px; color: var(--c-text-2); }
.aps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.ap { display: grid; gap: var(--s-3); padding: 12px 14px; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); }
.ap-main { display: flex; gap: var(--s-3); align-items: flex-start; min-width: 0; }
.ap-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface-2); color: var(--c-text); font-size: 13px; font-weight: 700; margin-top: 1px; }
.ap-text { font-size: 17px; line-height: 1.55; overflow-wrap: anywhere; min-width: 0; }
.ap-marks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.mk { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--c-border-strong); background: var(--c-bg); color: var(--c-text-2); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.mk svg { width: 17px; height: 17px; }
.mk:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.mk-got[aria-pressed="true"] { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-brand); }
.mk-missed[aria-pressed="true"] { background: var(--c-miss-bg); border-color: var(--c-miss); color: var(--c-miss); }
.ap-got { border-color: var(--c-got); }
.ap-got .ap-num { background: var(--c-got-bg); color: var(--c-got); }
.ap-missed { background: var(--c-miss-bg); border-color: transparent; }
.ap-missed .ap-num { background: var(--c-surface); color: var(--c-miss); }
.check-from { font-size: 14px; line-height: 1.45; color: var(--c-text-2); margin-bottom: calc(-1 * var(--s-2)) !important; }
@media (min-width: 560px) {
  .ap { grid-template-columns: 1fr auto; align-items: center; }
  .ap-marks { grid-template-columns: auto auto; }
}
.v2 .dock .btn[disabled] { opacity: 1; background: var(--c-surface-2); color: var(--c-text-2); border-color: var(--c-border); cursor: not-allowed; }

/* ---------- written: timed answering (v7, "exam sheet", 2026-10-19) ----------
   The question and its clock live on one sheet: question on top, clock + controls along the foot,
   and a strip on the top edge that drains with the time (green → gold → red). Pause is practice only. */
.wq-work { display: block; }
.wq-sheet {
  position: relative; overflow: clip;   /* clip, not hidden: hidden would break the sticky foot */
  display: grid; grid-template-rows: 1fr auto;
  min-height: calc(100vh - 150px); min-height: calc(100svh - 150px);
  margin: 0 calc(-1 * var(--pad)); padding: var(--s-6) var(--pad) 0;
  background: var(--c-surface); border-top: 1px solid var(--c-border);
}
.wq-strip { position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c-border); }
.wq-strip::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--tm-frac, 1) * 100%);
  background: var(--c-brand); transition: width 250ms linear, background-color 400ms ease;
}
.wq-sheet.is-low .wq-strip::after { background: var(--c-gold); }
.wq-sheet.is-end .wq-strip::after { background: var(--c-miss); }
.wq-main { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
/* the question sits in the middle of the sheet, not stranded at the top */
.v2 .wq-main > .q-text { margin-block: auto !important; padding-block: var(--s-6); }
.v2 .wq-work .q-text { font-size: 25px; line-height: 1.32; letter-spacing: -0.01em; }

/* the foot: sticky at the bottom of the screen while the question is long */
.wq-panel {
  position: sticky; bottom: 0; z-index: 5;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "tm status" "actions actions";
  align-items: center; gap: var(--s-3) var(--s-4);
  margin: var(--s-6) calc(-1 * var(--pad)) 0; padding: var(--s-4) var(--pad) calc(var(--s-4) + env(safe-area-inset-bottom));
  background: var(--c-surface); border-top: 1px solid var(--c-border);
}
.wq-panel .tm { grid-area: tm; }
.wq-status { grid-area: status; display: grid; gap: 2px; min-width: 0; }
.wq-state { margin: 0 !important; font-size: 16px; font-weight: 700; color: var(--c-text); }
.wq-sub { margin: 0 !important; font-size: 14px; color: var(--c-text-2); }
.wq-actions { grid-area: actions; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2); }
.wq-actions > :only-child { grid-column: 1 / -1; }
.wq-done { min-height: 56px; font-size: 16px; line-height: 1.25; white-space: normal; text-align: center; }
.wq-pause { min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; }
.wq-pause svg { width: 18px; height: 18px; }
.wq-pause.is-on { border-color: var(--c-gold); color: var(--c-gold-ink); }

/* the ring: depletes clockwise as time passes; gold in the last stretch, red in the final 10 seconds */
.tm { position: relative; flex: none; width: 68px; height: 68px; display: grid; place-items: center; }
.tm-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.tm-track { fill: none; stroke: var(--c-border); stroke-width: 7; }
.tm-bar {
  fill: none; stroke: var(--c-brand); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: calc((1 - var(--tm-frac, 1)) * 100);
  transition: stroke-dashoffset 250ms linear, stroke 400ms ease;
}
.tm-read { position: relative; display: grid; justify-items: center; text-align: center; line-height: 1; }
.tm-time { font: 700 16px/1 var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--c-text); transition: color 400ms ease; }
.tm-of { display: none; margin-top: 6px; font-size: 12.5px; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.tm.is-low .tm-bar { stroke: var(--c-gold); }
.tm.is-low .tm-time { color: var(--c-gold-ink); }
.tm.is-end .tm-bar { stroke: var(--c-miss); }
.tm.is-end .tm-time { color: var(--c-miss); }
/* paused: the clock goes quiet and gold, the sheet says so */
.wq-sheet.is-paused .tm-bar { stroke: var(--c-gold); opacity: 0.55; }
.wq-sheet.is-paused .tm-time { color: var(--c-gold-ink); animation: tm-blink 1.6s ease-in-out infinite; }
.wq-sheet.is-paused .wq-strip::after { background: var(--c-gold); opacity: 0.6; }
.wq-sheet.is-paused .wq-state { color: var(--c-gold-ink); }
@keyframes tm-blink { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .tm-bar, .tm-time, .wq-strip::after { transition: none; } .wq-sheet.is-paused .tm-time { animation: none; } }

/* Desktop / tablet: a card with breathing room; the foot is one row (ring · status · buttons). */
@media (min-width: 768px) {
  .wq-sheet {
    margin: 0; padding: var(--s-10) var(--s-10) 0; border: 1px solid var(--c-border); border-radius: var(--r-lg);
    min-height: clamp(400px, calc(100vh - 260px), 600px); min-height: clamp(400px, calc(100svh - 260px), 600px);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 18px 40px rgb(0 0 0 / 0.06);
  }
  .v2 .wq-work .q-text { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.18; letter-spacing: -0.02em; max-width: 20em; }
  .wq-work { padding-top: var(--s-4); }
  .wq-panel {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tm status actions"; gap: var(--s-6);
    margin: var(--s-8) calc(-1 * var(--s-10)) 0; padding: var(--s-5) var(--s-10);
    background: var(--c-surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg);
  }
  .tm { width: 104px; height: 104px; }
  .tm-track, .tm-bar { stroke-width: 6; }
  .tm-time { font-size: 26px; }
  .tm-of { display: block; }
  .wq-state { font-size: 17px; }
  .wq-actions { grid-template-columns: auto auto; }
  .wq-done { min-width: 250px; }
}
@media (min-width: 1024px) {
  .study-main:has(.wq-work), html:has(.wq-work) .study-bar-inner { max-width: 980px; }
  .wq-panel { grid-template-columns: auto minmax(200px, 1fr) auto; }
}
/* narrower desktops / tablets: one row would squeeze the status into a thin column, so it sits above the buttons */
@media (min-width: 768px) and (max-width: 1023px) {
  .wq-panel { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "tm status" "tm actions"; gap: var(--s-3) var(--s-6); }
  .wq-actions { justify-self: start; }
}
/* after the reveal */
.wq-timenote { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: 14px; font-weight: 600; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.wq-timenote svg { width: 17px; height: 17px; }
.wq-timenote.is-up { color: var(--c-gold-ink); }
.enter-ans { animation: rise 360ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .enter-ans { animation: none; } }
/* ---------- module page: past papers for the whole module + subjects; lecture page: MCQ | Written ---------- */
.module-past .section-label, .module-subjects .section-label { margin-bottom: var(--s-2) !important; }
.module-past .section-label { margin-top: var(--s-6) !important; }
.section-intro { margin: 0 0 var(--s-5) !important; font-size: 15px; line-height: 1.6; color: var(--c-text-2); max-width: 42em; }
@media (min-width: 720px) { .lec-types { grid-template-columns: repeat(2, 1fr); } }
.lecture-page .lec-types + .extra-row { margin-top: var(--s-4); }
.lec-how-text b { color: var(--c-text); font-weight: 600; }
.lec-how-text + .lec-how-text { margin-top: var(--s-3) !important; }

/* ---------- module page: the past-papers button (an "exam paper" with a DU stamp) ---------- */
:root { --pp-bg: #174C3C; --pp-text: #F7F6F1; --pp-text-2: #CFDDD4; --pp-rule: rgb(247 246 241 / 0.07); --pp-gold: #D7B675; --pp-cta-bg: #D7B675; --pp-cta-text: #1B2A22; }
:root[data-theme="dark"] { --pp-bg: #1F3A2E; --pp-text: #F0F2ED; --pp-text-2: #BFCBC2; --pp-rule: rgb(240 242 237 / 0.06); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pp-bg: #1F3A2E; --pp-text: #F0F2ED; --pp-text-2: #BFCBC2; --pp-rule: rgb(240 242 237 / 0.06); } }

.past-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5);
  margin: var(--s-6) 0 var(--s-2); padding: var(--s-6) var(--s-5);
  border-radius: var(--r-lg); background-color: var(--pp-bg); color: var(--pp-text) !important; text-decoration: none;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 14px 34px rgb(23 76 60 / 0.18);
}
.past-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--pp-gold); z-index: -1; }
.past-hero-title, .past-hero-text { margin: 0 !important; color: inherit; }
.past-hero-text { color: var(--pp-text-2); }
.past-hero-copy { display: grid; gap: var(--s-3); min-width: 0; }
.past-hero-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pp-gold); }
.past-hero-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(28px, 7vw, 34px); line-height: 1.1; letter-spacing: -0.015em; }
.past-hero-text { font-size: 15.5px; line-height: 1.6; color: var(--pp-text-2); max-width: 34em; }
.past-hero-stats { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.past-hero-stats > span { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid rgb(247 246 241 / 0.22); font-size: 14px; color: var(--pp-text-2); }
.past-hero-stats b { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--pp-text); }
.past-hero-cta {
  justify-self: start; text-decoration: none; transition: background-color var(--t-fast) var(--ease);
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: var(--r-pill);
  background: var(--pp-cta-bg); color: var(--pp-cta-text) !important; font-weight: 700; font-size: 16px;
}
.past-hero-cta svg { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
.past-hero-cta:hover { background: #E3C88E; }
.past-hero-cta:hover svg { transform: translateX(3px); }
.past-hero-cta:focus-visible { outline: 3px solid var(--pp-gold); outline-offset: 3px; }
/* the stamp */
.past-hero-side { position: absolute; top: 18px; right: 16px; pointer-events: none; }
.past-hero-stamp {
  display: grid; place-items: center; align-content: center; gap: 1px;
  width: 92px; height: 92px; border-radius: 50%;
  border: 2px solid var(--pp-gold); box-shadow: inset 0 0 0 5px var(--pp-bg), inset 0 0 0 6px rgb(215 182 117 / 0.55);
  color: var(--pp-gold); transform: rotate(-12deg); opacity: 0.9; text-transform: uppercase; text-align: center;
}
.stamp-top, .stamp-bot { font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; }
.stamp-mid { font-family: var(--font-serif); font-size: 20px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; }
.past-hero.is-soon { opacity: 0.7; }
@media (max-width: 420px) {
  .past-hero-side { top: 14px; right: 12px; }
  .past-hero-stamp { width: 74px; height: 74px; }
  .stamp-mid { font-size: 16px; }
  .stamp-top, .stamp-bot { font-size: 8px; }
  .past-hero-copy { padding-right: 64px; }
  .past-hero-copy > .past-hero-text, .past-hero-copy > .past-hero-stats { margin-right: -64px; }
}
@media (min-width: 720px) {
  .past-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--s-8); }
  .past-hero-title { font-size: clamp(34px, 3.4vw, 42px); }
  .past-hero-side { position: static; grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 0 var(--s-4); }
  .past-hero-stamp { width: 132px; height: 132px; }
  .stamp-mid { font-size: 28px; }
  .stamp-top, .stamp-bot { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .past-hero-cta, .past-hero-cta svg { transition: none; } }
.module-subjects .section-label { margin-top: var(--s-10) !important; }

/* subject page: one "Test yourself" button (type and length are chosen on the next page) */
.test-hero-actions:has(.test-start) { align-content: center; }
.hero-btn.test-start { min-height: 108px; padding: var(--s-5) var(--s-6); }
.hero-btn.test-start .hero-btn-l { font-family: var(--font-serif); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.hero-btn.test-start .hero-btn-n { font-size: 14.5px; }
.hero-btn.test-start svg { width: 24px; height: 24px; }

/* ---------- written answer v7: one compact checklist (2026-10-19) ----------
   Every point is one hairline row on a single sheet, with small ✓ / ✗ toggles on the right at every width,
   so a long answer stays short and skimmable. The Next bar stays pinned at the bottom (phone and desktop). */
.aps { gap: 0; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); overflow: hidden; }
.ap, .ap:is(.ap-got, .ap-missed) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: 9px 10px 9px 12px; border: 0; border-radius: 0; background: transparent; }
.ap + .ap { border-top: 1px solid var(--c-border); }
.ap-main { gap: 10px; }
.ap-num { width: 22px; height: 22px; font-size: 12px; margin-top: 2px; }
.ap-text { font-size: 16px; line-height: 1.5; }
.ap-marks { grid-template-columns: auto auto; gap: 6px; }
.mk { width: 40px; min-height: 40px; height: 40px; padding: 0; border-radius: 50%; }
.mk svg { width: 18px; height: 18px; }
.ap-got { background: var(--c-got-bg); }
.ap-missed { background: var(--c-miss-bg); }
.ap-missed .ap-text { color: var(--c-text); }
.dock-ans { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-4); }
.ans-tally { display: flex; align-items: center; gap: 10px; margin: 0 !important; font-size: 14px; color: var(--c-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ans-tally > span { display: inline-flex; align-items: center; gap: 3px; }
.ans-tally svg { width: 15px; height: 15px; }
.ans-tally .t-got { color: var(--c-got); font-weight: 700; }
.ans-tally .t-miss { color: var(--c-miss); font-weight: 700; }
@media (max-width: 400px) { .ans-tally > span:last-child { display: none; } }
/* small phones: the text gets the width (numbers off, slimmer toggles) */
@media (max-width: 479px) {
  .ap-num { display: none; }
  .ap, .ap:is(.ap-got, .ap-missed) { padding: 8px 8px 8px 12px; gap: var(--s-2); }
  .ap-text { font-size: 15.5px; line-height: 1.45; }
  .mk { width: 36px; min-height: 36px; height: 36px; }
  .ap-marks { gap: 4px; }
}
@media (min-width: 768px) {
  .ap { padding: 10px 12px 10px 16px; }
  .dock.dock-ans { position: sticky; bottom: 0; padding: var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--c-bg) 22%); }
  .dock-ans .btn { justify-self: end; min-width: 260px; }
}

/* ---------- written: the answer opens on the same sheet (2026-10-19) ----------
   After "I'm Done" the sheet stays: the question moves up and gets smaller, the answer appears inside,
   and the foot keeps the frozen clock with Retry + Next where Pause + "I'm Done" were. */
.wq-sheet.is-done { grid-template-rows: none; align-content: start; gap: var(--s-6); }
.v2 .wq-sheet.is-done .wq-main > .q-text { margin-block: 0 !important; padding-block: 0; font-size: 21px; line-height: 1.35; letter-spacing: -0.01em; }
.wq-sheet.is-done .wq-panel { margin-top: 0; }
.wq-sheet.is-done .wq-strip::after, .tm.is-frozen .tm-bar { transition: none; }
.wq-sheet.is-done .ans { display: grid; gap: var(--s-3); }
.wq-sheet.is-done .aps { background: var(--c-bg); }
.tm.is-frozen .tm-bar { stroke: var(--c-text-2); opacity: 0.6; }
.tm.is-frozen.is-end .tm-bar { stroke: var(--c-miss); opacity: 1; }
.tm.is-frozen .tm-time { color: var(--c-text-2); }
.wq-foot .wq-state { font-size: 15px; }
.wq-foot .ans-tally { gap: 12px; }
@media (min-width: 768px) {
  .v2 .wq-sheet.is-done .wq-main > .q-text { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.25; }
  .wq-sheet.is-done { gap: var(--s-8); }
  .wq-sheet.is-done .wq-panel { position: sticky; bottom: 0; }
}

/* marked points: the whole row turns green (got) or red (missed), with a bar on its left edge */
.aps .ap.ap-got { background: var(--c-got-bg); box-shadow: inset 4px 0 0 var(--c-got); }
.aps .ap.ap-missed { background: var(--c-miss-bg); box-shadow: inset 4px 0 0 var(--c-miss); }
.aps .ap.ap-got .ap-num { background: var(--c-got); color: var(--c-bg); }
.aps .ap.ap-missed .ap-num { background: var(--c-miss); color: var(--c-bg); }
.aps .ap.ap-got + .ap, .aps .ap.ap-missed + .ap, .aps .ap + .ap.ap-got, .aps .ap + .ap.ap-missed { border-top-color: transparent; }
@media (prefers-reduced-motion: no-preference) { .aps .ap { transition: background-color 160ms ease, box-shadow 160ms ease; } }

/* =====================================================================
   MOTION SYSTEM (2026-10-19)
   One easing, one distance, one stagger step everywhere. Everything here is gated by html.motion,
   which app.js sets only when the user hasn't asked for reduced motion (and IntersectionObserver exists).
   Without it, every element is simply visible: nothing depends on an animation to appear.
   ===================================================================== */
:root { --m-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --m-in: 560ms; --m-step: 70ms; --m-dist: 18px; --m-quick: 160ms; }
@keyframes rv-in { from { opacity: 0; transform: translateY(var(--m-dist)); } to { opacity: 1; transform: none; } }
@keyframes step-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 1. Scroll reveals: sections and groups rise in as they enter the screen, once (never re-hidden on the way up).
      "backwards" fill only: after the entrance the element is back to its own styles, so hovers keep working. */
html.motion .m-rv:not(.m-in) { opacity: 0; transform: translateY(var(--m-dist)); }
html.motion .m-rv.m-in { animation: rv-in var(--m-in) var(--m-ease) backwards; animation-delay: calc(var(--rv-i, 0) * var(--m-step)); }
/* scrolling up: the same rise, from above */
@keyframes rv-down { from { opacity: 0; transform: translateY(calc(-1 * var(--m-dist))); } to { opacity: 1; transform: none; } }
html.motion .m-rv.m-in.m-up { animation-name: rv-down; }
@media print { html.motion .m-rv { opacity: 1 !important; transform: none !important; animation: none !important; } }

/* 2. A new question: the card settles in; MCQ options follow one after another. */
html.motion .step-in > .study-q { animation: step-in 380ms var(--m-ease) backwards; }
html.motion .step-in .opts > li { animation: rv-in 420ms var(--m-ease) backwards; animation-delay: 140ms; }
html.motion .step-in .opts > li:nth-child(2) { animation-delay: 190ms; }
html.motion .step-in .opts > li:nth-child(3) { animation-delay: 240ms; }
html.motion .step-in .opts > li:nth-child(4) { animation-delay: 290ms; }
html.motion .step-in .opts > li:nth-child(n+5) { animation-delay: 340ms; }
/* the written answer opens point by point (short steps, so a long answer is ready within half a second) */
html.motion .enter-ans .ap { animation: rv-in 380ms var(--m-ease) backwards; animation-delay: calc(80ms + var(--i, 0) * 32ms); }
/* the row you just marked fills with its colour instead of snapping */
@keyframes mark-got { from { background-color: transparent; box-shadow: inset 0 0 0 var(--c-got); } }
@keyframes mark-miss { from { background-color: transparent; box-shadow: inset 0 0 0 var(--c-miss); } }
html.motion .aps .ap.just.ap-got { animation: mark-got 360ms var(--m-ease); }
html.motion .aps .ap.just.ap-missed { animation: mark-miss 360ms var(--m-ease); }
html.motion .aps .ap.just .mk[aria-pressed="true"] { animation: pop 240ms var(--m-ease); }
/* the session progress bar grows from where it was (app.js sets the new width a frame later) */
html.motion .study-progress span { transition: width 520ms var(--m-ease); }

/* 3. Scroll-aware chrome: the header lifts off the page once you've scrolled; on Home the nav underline follows the chapter. */
.site-header, .study-bar { transition: box-shadow 240ms var(--m-ease), border-color 240ms var(--m-ease); }
html.is-scrolled .site-header, html.is-scrolled .study-bar { box-shadow: 0 1px 0 var(--c-border), 0 10px 28px rgb(var(--c-shadow) / 0.10); border-bottom-color: transparent; }
html.motion.v2 .nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -12px; height: 2px;
  background: var(--c-gold); border-radius: 2px; transform: scaleX(0); transition: transform 320ms var(--m-ease);
}
html.motion.v2 .nav-link.is-active::after { transform: scaleX(1); }
html.motion.v2 .nav-link.is-active { transition: color 320ms var(--m-ease); }

/* 4. Microinteractions: a light press on everything tappable, arrows lean forward on hover. */
html.motion.v2 .btn { transition: background-color var(--m-quick) var(--m-ease), border-color var(--m-quick) var(--m-ease), color var(--m-quick) var(--m-ease), box-shadow var(--m-quick) var(--m-ease), transform 120ms var(--m-ease); }
html.motion.v2 .btn:active:not(:disabled) { transform: scale(0.98); }
html.motion.v2 .btn svg { transition: transform var(--m-quick) var(--m-ease); }
@media (hover: hover) { html.motion.v2 .btn:hover > svg:last-child:not(:first-child) { transform: translateX(3px); } }
html.motion .mk { transition: background-color var(--m-quick) var(--m-ease), border-color var(--m-quick) var(--m-ease), color var(--m-quick) var(--m-ease), transform 120ms var(--m-ease); }
html.motion .mk:active { transform: scale(0.9); }
html.motion :is(a.type-card, a.subject-card, a.hp-mode, a.lec-row, .len-btn, .seg-btn, .v2 .opt):active { transform: scale(0.985); transition-duration: 90ms; }

/* 5. Scroll-linked depth (where the browser supports scroll-driven animations; elsewhere nothing changes).
      Compositor-driven: no scroll listeners, no layout work. */
@supports (animation-timeline: view()) {
  /* the DU stamp turns a little as the past-papers card moves */
  @keyframes stamp-turn { from { transform: rotate(-18deg); } to { transform: rotate(-6deg); } }
  html.motion .past-hero-stamp { animation: stamp-turn linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
}

/* ---------- module page on phones: both sections visible from the first screen (2026-10-20) ----------
   An "on this page" index under the title names both parts (Past papers · Subjects 8); the past-papers card
   keeps its look but drops what a phone doesn't need; subjects become a two-column grid. Desktop unchanged. */
.section-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-text-2); font-size: 11.5px; letter-spacing: 0; vertical-align: 1px; }
.mod-jump { display: none; }
#past-h, #subjects-h { scroll-margin-top: 84px; }
#past-h:focus, #subjects-h:focus { outline: none; }
@media (max-width: 719px) {
  .page:has(.mod-jump) { padding-top: var(--s-4); }
  .page-head:has(.mod-jump) { margin: var(--s-4) 0 var(--s-4); }
  .page-head:has(.mod-jump) .kicker-gold { display: none; }   /* the title already says "Module" */
  .mod-jump { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-4); }
  .mod-jump button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px;
    border-radius: var(--r-pill); border: 1px solid var(--c-border-strong); background: var(--c-surface);
    color: var(--c-text); font: 600 14.5px/1 var(--font-ui); cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), transform 120ms var(--ease);
  }
  .mod-jump button svg { width: 17px; height: 17px; color: var(--c-gold-ink); flex: none; }
  .mod-jump-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--c-brand); color: var(--c-on-brand); font-size: 12px; font-weight: 700; }
  .mod-jump button:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
  html.motion .mod-jump button:active { transform: scale(0.97); }

  /* the past-papers card: same identity, less height */
  .past-hero { margin-top: 0; padding: var(--s-5) var(--s-4) var(--s-5) var(--s-5); gap: var(--s-4); }
  .past-hero-copy { gap: var(--s-2); }
  .past-hero-title { font-size: 27px; }
  .past-hero-text { font-size: 15px; line-height: 1.5; }
  .past-hero-more { display: none; }
  .past-hero-stats { gap: var(--s-4); }
  .past-hero-stats > span { padding: 0; border: 0; border-radius: 0; font-size: 14px; }
  .past-hero-stats b { font-size: 17px; }
  .past-hero-cta { min-height: 46px; }

  /* subjects: a two-column grid of compact cards */
  .module-subjects .section-label { margin-top: var(--s-6) !important; margin-bottom: var(--s-3) !important; }
  .module-subjects .section-intro { display: none; }   /* the cards say it: lectures ready / no lectures yet */
  .module-subjects .subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .module-subjects .subject-card { padding: var(--s-3) var(--s-3) var(--s-4); gap: 4px; }
  .module-subjects .subject-name { font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
  .module-subjects .subject-meta { font-size: 13px; }
  .module-subjects .badges { display: none; }
}

/* ---------- MCQ / Written / OSPE choices on phones: compact rows, all visible at once (2026-10-20) ----------
   Icon left, name + one-line description + counts in the middle, a round arrow right ("Start" is implied).
   OSPE stays visibly unavailable. The breadcrumb trail is dropped on phones: the back button above does its job. */
@media (max-width: 719px) {
  .page-nav .crumbs { display: none; }
  .page-head { margin: var(--s-5) 0 var(--s-5); }
  .page-head:has(+ .type-grid, + .module-past) .page-sub, .page-head + * .section-intro { font-size: 15px; line-height: 1.5; }
  .page-sub { font-size: 15px; line-height: 1.5; margin-top: var(--s-3) !important; }
  .type-grid { gap: var(--s-2); }
  .type-grid .type-card {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon name go" "desc desc go" "counts counts go";
    align-items: center; column-gap: var(--s-3); row-gap: 4px; padding: var(--s-3) var(--s-4) var(--s-4);
  }
  .type-grid .type-icon { grid-area: icon; width: 34px; height: 34px; border-radius: 10px; }
  .type-grid .type-icon svg { width: 19px; height: 19px; }
  .type-grid .type-name { grid-area: name; margin: 0; font-size: 22px; line-height: 1.15; }
  .type-grid .type-desc { grid-area: desc; font-size: 14px; line-height: 1.45; }
  .type-grid .type-counts { grid-area: counts; margin-top: 2px; font-size: 13px; }
  .type-grid .type-go { grid-area: go; margin: 0; width: 38px; height: 38px; justify-content: center; border-radius: var(--r-pill); background: var(--c-surface-2); font-size: 0; }
  .type-grid .type-go svg { width: 18px; height: 18px; }
  .type-grid .type-card.is-soon .soon-pill { font-size: 12px; padding: 3px 9px; }
}

/* ---------- subject page + written bar on phones (2026-10-20) ---------- */
@media (max-width: 719px) {
  /* Test yourself card: same look, less height, so "Lectures" and the first lectures show on the first screen */
  .test-hero { padding: var(--s-5) var(--s-5) var(--s-5); gap: var(--s-4); }
  .test-hero::after { width: 160px; height: 160px; right: -50px; top: -50px; }
  .test-hero-copy { gap: var(--s-2); }
  .test-hero-kicker { font-size: 12px; }
  .test-hero-title { font-size: 25px; }
  .test-hero-text { display: none; }   /* the button says it: "Choose MCQ or Written, then the length" */
  .test-hero-ar { font-size: 15.5px; }
  .hero-btn.test-start { min-height: 64px; padding: var(--s-3) var(--s-4); }
  .hero-btn.test-start .hero-btn-l { font-size: 21px; }
  .hero-btn.test-start .hero-btn-n { font-size: 13.5px; }
  .hero-btn.test-start svg { width: 20px; height: 20px; }
  .page-head.subject-head { margin: var(--s-4) 0 var(--s-4); }
  .test-hero + .section-label { margin-top: var(--s-6) !important; margin-bottom: var(--s-3) !important; }
  .lec-row { min-height: 64px; padding: var(--s-3) var(--s-4); gap: var(--s-3); }
  .lec-num { width: 34px; height: 34px; font-size: 16px; }
  .lec-title { font-size: 16px; }
  .lec-meta { font-size: 13px; }

  /* written: the pinned clock bar takes less of the screen (timer and answer views) */
  .wq-panel { gap: var(--s-2) var(--s-3); padding-top: var(--s-3); padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); }
  .wq-panel .tm { width: 50px; height: 50px; }
  .wq-panel .tm-time { font-size: 14px; }
  .wq-state { font-size: 15px; }
  .wq-sub { font-size: 13px; }
  .wq-done, .wq-pause { min-height: 48px; font-size: 15.5px; }
}

/* =====================================================================
   FEEDBACK (#/feedback), v3 2026-10-20: a guided list
   Every step is visible as a compact row (the length is never a mystery); one step is open at a time.
   Desktop: an editorial intro with live progress on the left, the steps on the right.
   Phones: the same list, full width; a tap answers and moves on, so the page stays short.
   ===================================================================== */
.fb-page { max-width: 1080px; }
.fb-shell { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 560px) and (max-width: 959px) { .fb-shell { max-width: 640px; margin: 0 auto; } }
@media (min-width: 960px) {
  .fb-shell { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; padding-top: var(--s-6); }
  .fb-intro { position: sticky; top: 112px; }
}

/* intro */
.fb-intro { display: grid; gap: var(--s-3); }
.fb-title { margin: 0 !important; font-family: var(--font-serif); font-weight: 600; font-size: clamp(27px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.015em; color: var(--c-text); text-wrap: balance; }
.fb-lead { margin: 0 !important; font-size: 16px; line-height: 1.6; color: var(--c-text-2); max-width: 30em; }

/* progress: one segment per question that applies */
.fb-prog { display: grid; gap: 8px; margin-top: var(--s-2); }
.fb-segs { display: flex; gap: 4px; max-width: 320px; }
.fb-seg { flex: 1; height: 4px; border-radius: 4px; background: var(--c-border-strong); transition: background-color 240ms var(--m-ease, ease); }
.fb-seg.is-done { background: var(--c-brand); }
.fb-prog-t { margin: 0 !important; font-size: 14px; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.fb-prog-t b { color: var(--c-text); }

/* the steps */
.fb-form { display: grid; gap: var(--s-4); min-width: 0; }
.fb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.fb-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: var(--c-text-2); box-shadow: inset 0 0 0 1.5px var(--c-border-strong);
}
.fb-num svg { width: 15px; height: 15px; }
.fb-step.is-answered .fb-num { background: var(--c-brand); color: var(--c-on-brand); box-shadow: none; }
.fb-step.is-open:not(.is-answered) .fb-num { color: var(--c-brand); box-shadow: inset 0 0 0 1.5px var(--c-brand); }
.fb-step.is-missing .fb-num { color: var(--c-gold-ink); box-shadow: inset 0 0 0 1.5px var(--c-gold); }

/* a closed step: one tappable row */
.fb-row {
  width: 100%; display: flex; align-items: center; gap: var(--s-3); min-height: 60px; padding: 10px var(--s-4);
  border-radius: var(--r-md); border: 1px solid var(--c-border); background: transparent; color: var(--c-text);
  font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
@media (hover: hover) { .fb-row:hover { background: var(--c-surface); border-color: var(--c-border-strong); } }
.fb-row:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.fb-row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fb-row-q { font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--c-text); }
.fb-row-a { font-size: 14px; line-height: 1.35; color: var(--c-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-step.is-answered .fb-row { background: var(--c-surface); }
.fb-step.is-answered .fb-row-q { font-size: 13.5px; font-weight: 500; color: var(--c-text-2); }
.fb-step.is-answered .fb-row-a { order: 2; font-size: 15.5px; font-weight: 600; color: var(--c-brand); }
.fb-step.is-missing .fb-row { border-color: var(--c-gold); }
.fb-step.is-missing .fb-row-a { color: var(--c-gold-ink); font-weight: 600; }
.fb-row-go { flex: none; font-size: 13px; font-weight: 600; color: var(--c-text-2); }

/* the open step */
.fb-open-in {
  padding: var(--s-4) var(--s-4) var(--s-3); border-radius: var(--r-lg);
  background: var(--c-surface); border: 1.5px solid var(--c-brand);
  box-shadow: 0 1px 2px rgb(var(--c-shadow) / 0.05), 0 12px 28px rgb(var(--c-shadow) / 0.08);
}
.fb-step.is-missing .fb-open-in { border-color: var(--c-gold); }
.fb-open-h { display: flex; align-items: flex-start; gap: var(--s-3); }
.fb-open-h .fb-num { margin-top: 1px; }
.fb-q { margin: 0 !important; font-family: var(--font-ui); font-size: 18px; font-weight: 650; line-height: 1.35; color: var(--c-text); }
.fb-q:focus { outline: none; }
.fb-body { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
@media (min-width: 560px) { .fb-body { padding-left: 40px; } }
.fb-hint { margin: calc(-1 * var(--s-1)) 0 0 !important; font-size: 13.5px; color: var(--c-text-2); }
.fb-need { margin: 0 !important; font-size: 14px; font-weight: 600; color: var(--c-gold-ink); }
.fb-step-foot { display: flex; justify-content: flex-end; margin-top: calc(-1 * var(--s-1)); }
.fb-next {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--c-brand); font: 600 15px/1 var(--font-ui); cursor: pointer;
}
.fb-next svg { width: 16px; height: 16px; }
@media (hover: hover) { .fb-next:hover { background: var(--c-surface-2); } }
.fb-next:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
/* moving on: the answered step folds into its summary row, the next one zooms in */
@keyframes fb-zoom-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes fb-fold { from { transform: scale(1.025); background-color: var(--c-got-bg); border-color: var(--c-brand); } }
html.motion .fb-open-in.just { animation: fb-zoom-in 320ms var(--m-ease) both; transform-origin: 50% 0; }
html.motion .fb-step.just-closed .fb-row { animation: fb-fold 360ms var(--m-ease); transform-origin: 50% 50%; }

/* answer controls (shared) */
.fb-ctl { display: grid; gap: 6px; }
.fb-opt { position: relative; display: flex; min-width: 0; }
.fb-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fb-opt-in {
  flex: 1; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 9px 12px;
  border-radius: var(--r-md); border: 1px solid var(--c-border-strong); background: var(--c-bg); color: var(--c-text);
  font-size: 15px; line-height: 1.3;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fb-opt-l { min-width: 0; overflow-wrap: anywhere; }
@media (hover: hover) { .fb-opt:hover .fb-opt-in { border-color: var(--c-brand); } }
.fb-opt input:focus-visible + .fb-opt-in { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.fb-opt input:checked + .fb-opt-in { border-color: var(--c-brand); background: var(--c-got-bg); }
html.motion .fb-opt:active .fb-opt-in { transform: scale(0.985); }
/* tick box (pick all) and radio dot (pick one) */
.fb-check, .fb-radio { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid var(--c-border-strong); background: var(--c-surface); transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.fb-check { border-radius: 6px; }
.fb-check svg { width: 13px; height: 13px; opacity: 0; color: var(--c-on-brand); }
.fb-radio { border-radius: 50%; }
.fb-opt input:checked + .fb-opt-in .fb-check { background: var(--c-brand); border-color: var(--c-brand); }
.fb-opt input:checked + .fb-opt-in .fb-check svg { opacity: 1; }
.fb-opt input:checked + .fb-opt-in .fb-radio { border-color: var(--c-brand); box-shadow: inset 0 0 0 4px var(--c-surface); background: var(--c-brand); }
/* pick all that apply: two columns (labels wrap to two lines on narrow phones) */
.fb-multi { grid-template-columns: 1fr 1fr; }
.fb-multi .fb-opt-in, .fb-grid .fb-opt-in { min-height: 50px; }
/* six short options: always two columns */
.fb-grid { grid-template-columns: 1fr 1fr; }
.fb-grid .fb-opt-in { min-height: 52px; font-size: 14.5px; }
/* two options: two equal buttons */
.fb-pair { grid-template-columns: 1fr 1fr; }
.fb-pair .fb-opt-in { justify-content: center; font-weight: 600; min-height: 48px; }
.fb-pair .fb-opt input:checked + .fb-opt-in { background: var(--c-brand); color: var(--c-on-brand); }
/* an ordered scale: one connected control, low → high */
.fb-scale { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--c-border-strong); border-radius: var(--r-md); overflow: hidden; background: var(--c-bg); }
.fb-scale .fb-opt + .fb-opt .fb-opt-in { border-left: 1px solid var(--c-border); }
.fb-scale .fb-opt-in { justify-content: center; text-align: center; border: 0; border-radius: 0; min-height: 56px; padding: 8px 6px; font-size: 14px; background: transparent; }
.fb-scale .fb-opt input:checked + .fb-opt-in { background: var(--c-brand); color: var(--c-on-brand); font-weight: 600; }
.fb-scale .fb-opt input:focus-visible + .fb-opt-in { outline-offset: -3px; }

/* note */
.fb-body textarea {
  width: 100%; min-height: 88px; padding: 12px 14px; border-radius: var(--r-md); resize: vertical;
  background: var(--c-bg); border: 1px solid var(--c-border-strong); color: var(--c-text); font: inherit; font-size: 16px; line-height: 1.5;
}
.fb-body textarea:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px rgb(var(--c-shadow) / 0.06); }

/* send */
.fb-send-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-3); }
.fb-msg { flex: 1 1 260px; margin: 0 !important; font-size: 14.5px; line-height: 1.45; color: var(--c-text-2); }
.fb-msg.is-bad { color: var(--c-miss); font-weight: 600; }
.fb-msg-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--c-gold-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fb-send { min-width: 220px; }
.fb-send[disabled] { opacity: 0.7; cursor: progress; }

/* sent */
.fb-done { display: grid; justify-items: start; gap: var(--s-3); padding: var(--s-8) 0; outline: none; max-width: 36em; }
.fb-done-mark { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--c-brand); color: var(--c-on-brand); margin-bottom: var(--s-2); }
.fb-done-mark svg { width: 26px; height: 26px; }
.fb-done-h { margin: 0 !important; font-family: var(--font-serif); font-weight: 600; font-size: clamp(30px, 5vw, 42px); line-height: 1.1; color: var(--c-text); }
.fb-done-text { margin: 0 0 var(--s-3) !important; font-size: 16.5px; line-height: 1.6; color: var(--c-text-2); }
html.motion .fb-done-mark { animation: pop 420ms var(--m-ease) both; }

/* phones */
@media (max-width: 559px) {
  .page.fb-page { padding-top: var(--s-4); }
  .fb-shell { gap: var(--s-5); }
  .fb-intro { gap: var(--s-2); }
  .fb-title { font-size: 26px; }
  .fb-lead { font-size: 14.5px; line-height: 1.5; }
  .fb-segs { max-width: none; }
  .fb-row { min-height: 56px; padding: 8px var(--s-3); }
  .fb-open-in { padding: var(--s-4) var(--s-3) var(--s-2); }
  .fb-q { font-size: 17px; }
  .fb-scale .fb-opt-in { font-size: 13px; padding: 6px 4px; }
  .fb-multi .fb-opt-in, .fb-grid .fb-opt-in { font-size: 14px; padding: 8px 10px; gap: 8px; }
  .fb-check, .fb-radio { width: 18px; height: 18px; }
  .fb-send { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .fb-seg { transition: none; } }

/* ---------- MCQ navigation: Back always there, Next when it's needed (2026-10-20) ----------
   One row: Back on the left (disabled on the first question), the way forward on the right — a Next button after a
   wrong answer or in review, or, after a right answer, a short "Correct · next question" bar that fills while it moves on.
   The row keeps the same height in every state, so nothing jumps. */
.nav-row { display: flex; align-items: center; gap: var(--s-3); min-height: 54px; }
.v2 .nav-back { flex: none; min-height: 50px; padding: 0 16px; gap: 6px; }
.v2 .nav-back svg { width: 18px; height: 18px; }
.v2 .dock .nav-back[disabled] { opacity: 0.4; background: transparent; color: var(--c-text-2); border-color: var(--c-border); cursor: not-allowed; }
.nav-next { flex: 1; }
.nav-fill { flex: 1; }
.nav-auto { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 54px; border-radius: var(--r-md); background: var(--c-got-bg); color: var(--c-got); font-weight: 700; font-size: 15.5px; }
.nav-auto-t { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.nav-auto-t svg { width: 18px; height: 18px; }
.nav-auto-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--c-got); transform-origin: 0 50%; animation: nav-fill var(--auto-ms, 1400ms) linear both; }
@keyframes nav-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .nav-auto-bar { animation: none; transform: scaleX(1); opacity: 0.5; } }
/* the quick-recall buttons sit above the Back row */
.dock .nav-row { margin-top: 0; }
/* review: a quiet tag in the bar; the answers stay exactly as they were */
.study-main.is-review .opt[disabled] { cursor: default; }

/* ---------- MCQ speed-run feel (2026-10-20) ----------
   Right answer: the pick pops and glows green, a quick 0.65 s bar, the card slides out left, the next slides in from
   the right with its options landing fast. Wrong answers and manual Next keep the calm entrance. */
@keyframes right-pop { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgb(var(--c-shadow) / 0); } 45% { transform: scale(1.03); box-shadow: 0 0 0 6px var(--c-got-bg); } 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } }
html.motion .v2 .opt.pop.is-correct, html.motion .opt.pop.is-correct { animation: right-pop 320ms var(--m-ease) both; }
@keyframes q-leave { to { opacity: 0; transform: translateX(-28px); } }
@keyframes q-enter-fast { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
html.motion .study-main > .study-q.is-leaving { animation: q-leave 140ms cubic-bezier(0.4, 0, 1, 1) both; }
html.motion .step-in.step-fast > .study-q { animation: q-enter-fast 200ms var(--m-ease) both; }
html.motion .step-in.step-fast .opts > li { animation: rv-in 220ms var(--m-ease) backwards; animation-delay: 60ms; }
html.motion .step-in.step-fast .opts > li:nth-child(2) { animation-delay: 90ms; }
html.motion .step-in.step-fast .opts > li:nth-child(3) { animation-delay: 120ms; }
html.motion .step-in.step-fast .opts > li:nth-child(n+4) { animation-delay: 150ms; }
.nav-auto-t { white-space: nowrap; }

/* =====================================================================
   HOME v5 (2026-10-20): a study start page
   Hero (one line of context, a two-line promise, one sentence) → modules as the centrepiece → one short band.
   A ready module is a deep-green "study panel" (same identity as the past-papers card): name + Open module,
   three facts, MCQ / Written / OSPE that start its past papers, then its ready subjects.
   A module that isn't ready is a quiet row, not a link. Desktop: hero left, modules right, on one screen.
   ===================================================================== */
.hp { padding: var(--s-6) 0 var(--s-8); }
.hp-grid { display: grid; gap: var(--s-6); }
.hp-hero { display: grid; gap: var(--s-3); align-content: start; }
.hp-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 !important; font-size: 13.5px; font-weight: 500; color: var(--c-text-2); }
.hp-eyebrow .nw { white-space: nowrap; }
.hp-eyebrow::before { content: ""; flex: none; width: 20px; height: 2px; border-radius: 2px; background: var(--c-gold); }
.hp-title { margin: 0 !important; font-family: var(--font-serif); font-weight: 600; font-size: clamp(30px, 8.2vw, 40px); line-height: 1.07; letter-spacing: -0.02em; color: var(--c-text); text-wrap: balance; }
.hp-title .accent { color: var(--c-brand); }
.hp-lead { margin: 0 !important; font-size: 15.5px; line-height: 1.55; color: var(--c-text-2); max-width: 30em; text-wrap: pretty; }

/* modules */
.hp-index { display: grid; gap: var(--s-3); min-width: 0; }
.hp-label { display: flex; align-items: center; gap: var(--s-3); margin: 0 !important; font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-2); }
.hp-label:focus { outline: none; }
.hp-label-n { margin-left: auto; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-text-2); }
.hp-modlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }

/* the ready module: a deep-green study panel */
.hp-mod.is-ready {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--s-4) var(--s-4) var(--s-4); border-radius: var(--r-lg);
  background: var(--pp-bg); color: var(--pp-text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 16px 36px rgb(23 76 60 / 0.18);
}
.hp-mod.is-ready::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--pp-gold); }
.hp-mod-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "status open" "name open";
  align-items: center; column-gap: var(--s-3); row-gap: 2px; padding: 4px 0 0;
  color: var(--pp-text) !important; text-decoration: none; border-radius: var(--r-md);
}
.hp-mod-head:focus-visible { outline: 3px solid var(--pp-gold); outline-offset: 4px; }
.hp-mod-status { grid-area: status; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pp-gold); }
.hp-dot { width: 7px; height: 7px; border-radius: 50%; background: #8FD1A8; box-shadow: 0 0 0 3px rgb(143 209 168 / 0.18); }
.hp-mod-name { grid-area: name; font-family: var(--font-serif); font-weight: 600; font-size: 42px; line-height: 1; letter-spacing: -0.02em; }
.hp-mod-open {
  grid-area: open; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid rgb(247 246 241 / 0.28); font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hp-mod-open svg { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .hp-mod-head:hover .hp-mod-open { background: rgb(247 246 241 / 0.10); border-color: rgb(247 246 241 / 0.5); }
  .hp-mod-head:hover .hp-mod-open svg { transform: translateX(3px); }
}

.hp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--s-4) 0 0; padding-top: var(--s-3); border-top: 1px solid rgb(247 246 241 / 0.16); }
.hp-stats > div { display: grid; gap: 2px; padding: 0 var(--s-3); min-width: 0; }
.hp-stats > div:first-child { padding-left: 0; }
.hp-stats > div + div { border-left: 1px solid rgb(247 246 241 / 0.16); }
.hp-stats dt { order: 2; font-size: 12px; line-height: 1.3; color: var(--pp-text-2); }
.hp-stats dd { order: 1; margin: 0; font-size: 24px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--pp-text); }

.hp-modes-wrap { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.hp-modes-h { margin: 0 !important; font-size: 12.5px; font-weight: 600; color: var(--pp-text-2); }
.hp-modes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.hp-modes > li { display: flex; }
.hp-mode {
  flex: 1; display: grid; align-content: center; justify-items: start; gap: 1px; min-height: 58px; padding: 8px 12px; border-radius: var(--r-md);
  background: var(--pp-cta-bg); color: var(--pp-cta-text) !important; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), transform 120ms var(--ease);
}
.hp-mode-l { font-size: 16.5px; font-weight: 700; line-height: 1.2; }
.hp-mode-n { font-size: 12.5px; font-weight: 500; line-height: 1.3; opacity: 0.82; }
@media (hover: hover) and (pointer: fine) { a.hp-mode:hover { background: #E3C88E; } }
a.hp-mode:focus-visible { outline: 3px solid var(--pp-text); outline-offset: 2px; }
.hp-mode.is-off { background: transparent; color: var(--pp-text-2) !important; box-shadow: inset 0 0 0 1px rgb(247 246 241 / 0.2); }

.hp-subs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: var(--s-4) 0 0 !important; padding-top: var(--s-3); border-top: 1px solid rgb(247 246 241 / 0.16); }
.hp-subs-k { font-size: 12.5px; font-weight: 600; color: var(--pp-text-2); }
.hp-sub {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--r-pill);
  background: rgb(247 246 241 / 0.09); color: var(--pp-text) !important; text-decoration: none; font-size: 14.5px; font-weight: 600;
}
.hp-sub span { font-weight: 500; color: var(--pp-text-2); }
.hp-sub svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .hp-sub:hover { background: rgb(247 246 241 / 0.16); } }
.hp-sub:focus-visible { outline: 3px solid var(--pp-gold); outline-offset: 2px; }

/* a module that isn't ready: quiet, finished, not a link */
.hp-mod.is-soon { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 64px; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); }
.hp-soon-main { display: grid; gap: 2px; min-width: 0; }
.hp-soon-text { font-size: 13.5px; line-height: 1.45; color: var(--c-text-2); }
.hp-soon-name { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--c-text-2); }
.hp-soon-pill { flex: none; white-space: nowrap; padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-surface-2); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--c-text-2); }

/* how it works: one short band */
.hp-how { padding: var(--s-8) 0 var(--s-10); border-top: 1px solid var(--c-border); }
.hp-how-inner { display: grid; gap: var(--s-4); }
.hp-how-title { margin: 0 !important; font-family: var(--font-serif); font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--c-text); }
.hp-how-title:focus { outline: none; }
.hp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.hp-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.hp-step-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--c-gold-ink); box-shadow: inset 0 0 0 1.5px var(--c-gold); }
.hp-step-b { display: grid; gap: 2px; }
.hp-step-t { font-size: 15.5px; font-weight: 650; line-height: 1.35; color: var(--c-text); }
.hp-step-x { font-size: 14.5px; line-height: 1.5; color: var(--c-text-2); }
.hp-how-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3) var(--s-6); margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
.hp-tags { flex: 1 1 320px; min-width: 0; }
.hp-tags summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 600; color: var(--c-brand); }
.hp-tags summary::-webkit-details-marker { display: none; }
.hp-tags summary svg { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.hp-tags[open] summary svg { transform: rotate(180deg); }
.hp-tags-body .tagdefs { margin: var(--s-2) 0 0; display: grid; gap: var(--s-3); }
.hp-tags-body .tagdef { display: grid; gap: 4px; }
.hp-tags-body .tagdef dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--c-text-2); }
.hp-tags-body .legend-note { margin-top: var(--s-3) !important; font-size: 13.5px; color: var(--c-text-2); }
.hp-fb { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 14.5px; color: var(--c-text-2); text-decoration: none; }
.hp-fb b { color: var(--c-brand); }
.hp-fb svg { width: 16px; height: 16px; color: var(--c-brand); transition: transform var(--t-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) { .hp-fb:hover b { text-decoration: underline; } .hp-fb:hover svg { transform: translateX(3px); } }

html.motion a.hp-mode:active, html.motion .hp-sub:active { transform: scale(0.97); }

/* small phones: the panel tightens, the modes stay three across */
@media (max-width: 380px) {
  .hp-mod-name { font-size: 36px; }
  .hp-mod-open { padding: 0 11px; font-size: 13.5px; }
  .hp-mode { padding: 8px 10px; }
  .hp-mode-l { font-size: 15.5px; }
  .hp-stats dd { font-size: 21px; }
}
/* tablets */
@media (min-width: 640px) {
  .hp { padding: var(--s-10) 0 var(--s-10); }
  .hp-grid, .hp-how-inner { max-width: 640px; margin-inline: auto; }
  .hp-title { font-size: 44px; }
  .hp-lead { font-size: 17px; }
  .hp-mod.is-ready { padding: var(--s-5) var(--s-6) var(--s-6); }
  .hp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
  .hp-step { grid-template-columns: 1fr; gap: var(--s-2); }
}
/* desktop: hero left, modules right, the whole start in one screen */
@media (min-width: 960px) {
  .hp { padding: 72px 0 80px; }
  .hp-grid { max-width: none; margin-inline: 0; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
  .hp-hero { gap: var(--s-4); }
  .hp-title { font-size: clamp(48px, 4.6vw, 64px); line-height: 1.02; }
  .hp-lead { font-size: 18px; line-height: 1.6; }
  .hp-mod-name { font-size: 52px; }
  .hp-stats dd { font-size: 28px; }
  .hp-mode { min-height: 64px; padding: 10px 16px; }
  .hp-mode-l { font-size: 17.5px; }
  .hp-how { padding: var(--s-10) 0 64px; }
  .hp-how-inner { max-width: none; margin-inline: 0; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 72px; row-gap: var(--s-4); }
  .hp-how-title { grid-row: 1 / span 2; font-size: 28px; }
  .hp-how-foot { grid-column: 2; }
}

/* ---------- home: module switcher on phones (2026-10-20) ----------
   Every module is named on the first screen as a tab (GIT · Ready | Endocrine · Coming soon); the chosen one's panel
   shows below. From 640px all panels are shown and the switcher goes away. */
.hp-tabs { display: none; }
@media (max-width: 639px) {
  .hp-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--c-surface-2); }
  .hp-tab {
    display: grid; justify-items: start; gap: 1px; min-height: 52px; padding: 7px 12px; border: 0; border-radius: calc(var(--r-md) - 3px);
    background: transparent; color: var(--c-text-2); font: inherit; text-align: left; cursor: pointer;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .hp-tab-name { font-family: var(--font-serif); font-size: 19px; font-weight: 600; line-height: 1.1; }
  .hp-tab-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
  .hp-tab .hp-dot { width: 6px; height: 6px; box-shadow: none; }
  .hp-tab.is-sel { background: var(--c-bg); color: var(--c-text); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 0 0 1px var(--c-border); }
  .hp-tab.is-sel.is-ready .hp-tab-st { color: var(--c-brand); }
  .hp-tab:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
  .hp-li:not(.is-sel) { display: none; }
  .hp-index { gap: var(--s-2); }
  .hp-label { display: none; }   /* the switcher is the heading now */
  /* the panel: a little tighter so it fits with the switcher */
  .hp-mod.is-ready { padding: var(--s-3) var(--s-4) var(--s-4); }
  .hp-mod-name { font-size: 38px; }
  .hp-stats { margin-top: var(--s-3); padding-top: var(--s-3); }
  .hp-stats dd { font-size: 22px; }
  .hp-stats dt { font-size: 11.5px; }
  .hp-stats > div { padding: 0 var(--s-2); }
  .hp-modes-wrap { margin-top: var(--s-3); }
  .hp-mode { min-height: 54px; }
  .hp-subs { margin-top: var(--s-3) !important; }
  .hp-mod.is-soon { min-height: 120px; align-items: flex-start; padding: var(--s-4); border-radius: var(--r-lg); }
  .hp-soon-name { font-size: 30px; }
  .hp-soon-text { font-size: 14.5px; max-width: 20em; }
}

/* ---------- past-papers card: the DU stamp never covers the title (2026-10-20) ----------
   Below 720px the stamp sits in the top-right corner, so the kicker and title keep a clear lane beside it
   at every width (the old rule only did this under 420px). The text and counts below run full width. */
@media (max-width: 719px) {
  .past-hero-copy { padding-right: 0; }
  .past-hero-copy > .past-hero-text, .past-hero-copy > .past-hero-stats { margin-right: 0; }
  .past-hero-side { top: 14px; right: 12px; }
  .past-hero-stamp { width: 80px; height: 80px; }
  .stamp-mid { font-size: 17px; }
  .stamp-top, .stamp-bot { font-size: 8.5px; }
  .past-hero-kicker, .past-hero-title, .past-hero-text { padding-right: 92px; }
}
@media (max-width: 420px) {
  .past-hero-stamp { width: 74px; height: 74px; }
  .past-hero-kicker, .past-hero-title, .past-hero-text { padding-right: 82px; }
}

/* ---------- home: "Choose how to revise" (2026-10-20) ----------
   Inside the study panel, each way in is a row that explains itself: what it is, what's inside, and what you
   choose next. Nothing on the home page starts questions directly. */
.hp-paths-wrap { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.hp-paths-h { margin: 0 !important; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pp-gold); }
.hp-paths { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.hp-path {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-3); border-radius: var(--r-md);
  background: rgb(247 246 241 / 0.07); box-shadow: inset 0 0 0 1px rgb(247 246 241 / 0.14);
  color: var(--pp-text) !important; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform 120ms var(--ease);
}
.hp-path-ic { align-self: start; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--pp-cta-bg); color: var(--pp-cta-text); }
.hp-path-ic svg { width: 19px; height: 19px; }
.hp-path-b { display: grid; gap: 3px; min-width: 0; }
.hp-path-t { font-size: 16.5px; font-weight: 700; line-height: 1.25; }
.hp-path-d { font-size: 13.5px; line-height: 1.45; color: var(--pp-text-2); }
.hp-path-m { font-size: 13px; font-weight: 600; color: var(--pp-gold); font-variant-numeric: tabular-nums; }
.hp-path-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgb(247 246 241 / 0.10); }
.hp-path-go svg { width: 17px; height: 17px; transition: transform var(--t-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .hp-path:hover { background: rgb(247 246 241 / 0.12); box-shadow: inset 0 0 0 1px rgb(215 182 117 / 0.6); }
  .hp-path:hover .hp-path-go svg { transform: translateX(3px); }
}
.hp-path:focus-visible { outline: 3px solid var(--pp-gold); outline-offset: 2px; }
html.motion .hp-path:active { transform: scale(0.985); }
@media (min-width: 960px) {
  .hp-path { padding: var(--s-4); gap: var(--s-4); }
  .hp-path-t { font-size: 17.5px; }
  .hp-path-d { font-size: 14.5px; }
}
@media (max-width: 639px) {
  .hp { padding-top: var(--s-5); }
  .hp-grid { gap: var(--s-5); }
  .hp-hero { gap: var(--s-2); }
  .hp-paths-wrap { margin-top: var(--s-3); }
  .hp-path { gap: var(--s-3); padding: 10px var(--s-3); }
  .hp-path-ic { width: 32px; height: 32px; border-radius: 9px; }
  .hp-path-ic svg { width: 17px; height: 17px; }
  .hp-path-t { font-size: 16px; }
  .hp-path-d { font-size: 13px; line-height: 1.4; }
  .hp-path-m { font-size: 12.5px; }
  .hp-path-go { width: 30px; height: 30px; }
}
/* wrong answer: the same moving-on bar, in red, and tappable ("tap to stay" keeps the question and shows Next) */
.nav-auto.is-wrong { border: 0; font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer; background: var(--c-miss-bg); color: var(--c-miss); }
.nav-auto.is-wrong .nav-auto-bar { background: var(--c-miss); }
.nav-auto.is-wrong:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }

/* =====================================================================
   SPEED PASS (2026-10-20): "everything needs to feel fast" — every transition roughly 40% shorter,
   staggers tighter, distances smaller. Same motion language, less waiting. Reduced motion still turns it off.
   ===================================================================== */
:root { --m-in: 300ms; --m-step: 35ms; --m-dist: 12px; --t-base: 160ms; }
html.motion .step-in > .study-q { animation-duration: 220ms; }
html.motion .step-in .opts > li { animation-duration: 200ms; animation-delay: 40ms; }
html.motion .step-in .opts > li:nth-child(2) { animation-delay: 60ms; }
html.motion .step-in .opts > li:nth-child(3) { animation-delay: 80ms; }
html.motion .step-in .opts > li:nth-child(4) { animation-delay: 100ms; }
html.motion .step-in .opts > li:nth-child(n+5) { animation-delay: 120ms; }
html.motion .step-in.step-fast > .study-q { animation-duration: 170ms; }
html.motion .step-in.step-fast .opts > li { animation-duration: 170ms; animation-delay: 30ms; }
html.motion .step-in.step-fast .opts > li:nth-child(2) { animation-delay: 50ms; }
html.motion .step-in.step-fast .opts > li:nth-child(3) { animation-delay: 70ms; }
html.motion .step-in.step-fast .opts > li:nth-child(n+4) { animation-delay: 90ms; }
html.motion .study-main > .study-q.is-leaving { animation-duration: 120ms; }
.enter-ans { animation-duration: 220ms; }
html.motion .enter-ans .ap { animation-duration: 220ms; animation-delay: calc(30ms + var(--i, 0) * 14ms); }
html.motion .aps .ap.just.ap-got, html.motion .aps .ap.just.ap-missed { animation-duration: 220ms; }
html.motion .aps .ap.just .mk[aria-pressed="true"] { animation-duration: 160ms; }
.v2 .opt.pop { animation-duration: 150ms; }
html.motion .v2 .opt.pop.is-correct, html.motion .opt.pop.is-correct { animation-duration: 220ms; }
html.motion .study-progress span { transition-duration: 280ms; }
html.motion.v2 .nav-link::after { transition-duration: 200ms; }
.dr-scrim { transition-duration: 160ms; }
.drawer { transition: opacity 150ms var(--m-ease, ease), transform 200ms var(--m-ease, ease); }
html.motion .fb-open-in.just { animation-duration: 200ms; }
html.motion .fb-step.just-closed .fb-row { animation-duration: 220ms; }
.fb-branch, .fb-branch.is-open { transition-duration: 200ms; }
html.motion .fb-done-mark { animation-duration: 260ms; }

/* =====================================================================
   MCQ ACTIVE RECALL (2026-10-20): think → reveal → eliminate → find it
   ===================================================================== */
/* 1. think first: the question alone, with a calm prompt (not an empty screen) */
.think {
  display: flex; align-items: flex-start; gap: var(--s-3); margin-top: var(--s-2); padding: var(--s-4);
  border-radius: var(--r-md); background: var(--c-surface); border: 1px dashed var(--c-border-strong);
}
.think-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--c-surface-2); color: var(--c-gold-ink); }
.think-ic svg { width: 20px; height: 20px; }
.think-b { display: grid; gap: 2px; }
.think-t { font-size: 16.5px; font-weight: 700; color: var(--c-text); }
.think-x { font-size: 14.5px; line-height: 1.45; color: var(--c-text-2); }
.think-go svg { width: 19px; height: 19px; }
.mcq-think .dock { display: grid; gap: var(--s-2); }

/* 2. the choices arrive */
html.motion .opts.opts-in > li { animation: rv-in 200ms var(--m-ease) backwards; }
html.motion .opts.opts-in > li:nth-child(2) { animation-delay: 30ms; }
html.motion .opts.opts-in > li:nth-child(3) { animation-delay: 60ms; }
html.motion .opts.opts-in > li:nth-child(n+4) { animation-delay: 90ms; }
.elim-note { display: flex; align-items: center; gap: 6px; margin: 0 0 calc(-1 * var(--s-1)) !important; font-size: 14px; font-weight: 600; color: var(--c-miss); }
.elim-note svg { width: 15px; height: 15px; }
.elim-note.is-start { color: var(--c-text-2); font-weight: 500; }

/* 3. eliminated: red, struck through, out of play — but still readable (with why) */
.v2 .opt.is-out { cursor: not-allowed; }
.v2 .opt.is-out .opt-text { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--c-miss); }
@keyframes elim-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 60% { transform: translateX(4px); } }
html.motion .v2 .opt.is-out.pop { animation: elim-shake 220ms var(--m-ease); }

/* 4. found it: the auto-advance bar stays green; after wrong tries it's tappable to stay and read */
.nav-auto.is-stay { border: 0; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.nav-auto.is-stay:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }

/* =====================================================================
   MCQ v3 (2026-10-20), after the user's reference: the question in its own outlined card; a "think first" panel
   whose bottom edge is the "Show options" button; full-width centred option rows; Reveal / Explain helpers below.
   ===================================================================== */
.mcq-g { gap: var(--s-3); }
.qcard {
  display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-5); border-radius: 20px;
  background: var(--c-surface); border: 2px solid var(--c-brand);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 10px 24px rgb(var(--c-shadow) / 0.06);
}
.qcard .q-text { margin: 0 !important; }
.v2 .qcard .q-text { font-size: 20px; line-height: 1.4; }
@media (min-width: 768px) { .v2 .qcard .q-text { font-size: 22px; } .qcard { padding: var(--s-5) var(--s-6) var(--s-6); } }

/* think first: one panel, the button is its bottom edge */
.think-panel { border-radius: 20px; background: var(--c-surface); border: 1px solid var(--c-border); overflow: hidden; }
.think-panel-b { display: grid; justify-items: center; gap: 10px; padding: var(--s-6) var(--s-4) var(--s-5); text-align: center; }
.think-panel .think-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface-2); color: var(--c-gold-ink); }
.think-panel .think-ic svg { width: 19px; height: 19px; }
.think-panel .think-t { margin: 0 !important; font-size: 16px; font-weight: 600; color: var(--c-text); }
.think-show {
  width: 100%; min-height: 56px; border: 0; border-top: 1px solid var(--c-border); background: transparent;
  font: 700 16px/1 var(--font-ui); color: var(--c-brand); cursor: pointer; transition: background-color var(--t-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .think-show:hover { background: var(--c-surface-2); } }
.think-show:focus-visible { outline: 3px solid var(--c-gold); outline-offset: -3px; }
html.motion .think-show:active { background: var(--c-surface-2); }

/* options: full-width, centred rows */
.gopts { gap: var(--s-2); }
.v2 .opt.gopt {
  display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 58px; padding: 12px 16px; text-align: center;
  border-radius: 16px; border: 1.5px solid transparent; background: var(--c-surface-2); color: var(--c-text);
  font: 600 16px/1.35 var(--font-ui);
}
@media (hover: hover) and (pointer: fine) { .v2 .opt.gopt:not(:disabled):hover { border-color: var(--c-brand); background: var(--c-surface-2); } }
.v2 .opt.gopt:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.gopt-text { overflow-wrap: anywhere; }
/* found it: a solid green row */
.v2 .opt.gopt.is-correct { background: var(--c-got-bg); border-color: var(--c-got); color: var(--c-got); opacity: 1; }
/* ruled out: quiet, struck through, with its "why not" */
.v2 .opt.gopt.is-out { background: transparent; border-color: var(--c-border); color: var(--c-text-2); opacity: 0.75; cursor: not-allowed; }
.v2 .opt.gopt.is-out .gopt-text { text-decoration: line-through; text-decoration-color: var(--c-miss); text-decoration-thickness: 1.5px; }
.gopt-state { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--c-miss); }
.gopt-state svg { width: 13px; height: 13px; }
.gopt-note { font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--c-text-2); max-width: 34em; }
.v2 .opt.gopt.is-dim { opacity: 0.5; }
.v2 .opt.gopt:disabled { cursor: default; }

/* helpers under the options */
.mcq-tools { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.mcq-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border-radius: var(--r-pill); border: 1px solid var(--c-border-strong); background: transparent; color: var(--c-text);
  font: 600 15px/1 var(--font-ui); cursor: pointer; transition: background-color var(--t-fast) var(--ease);
}
.mcq-tool svg { width: 17px; height: 17px; color: var(--c-gold-ink); }
@media (hover: hover) and (pointer: fine) { .mcq-tool:hover { background: var(--c-surface-2); } }
.mcq-tool.is-on { background: var(--c-surface-2); border-color: var(--c-gold); }
.mcq-tool:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
html.motion .mcq-tool:active { transform: scale(0.97); }
.mcq-g .elim-note { justify-content: center; margin: 0 !important; }
/* the hint (Explain): points at the idea, never names the answer */
.mcq-hint { padding: var(--s-4); border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-gold); }
.mcq-hint .q-h { color: var(--c-gold-ink); }
.mcq-hint p { margin: var(--s-2) 0 0 !important; font-size: 15.5px; line-height: 1.55; color: var(--c-text); }
.mcq-tools:has(> :only-child) { grid-template-columns: 1fr; }

/* ---------- subject page: two clear ways to test yourself (2026-10-20) ---------- */
.test-hero-actions:has(.test-one) { display: grid; gap: var(--s-3); align-content: center; }
.v2 .hero-btn.test-one { width: 100%; font: inherit; text-align: left; cursor: pointer; background: transparent; color: var(--c-hero-ink); border: 1.5px solid rgb(247 246 241 / 0.35); }
.v2 .hero-btn.test-one .hero-btn-n { color: var(--c-hero-muted); opacity: 1; }
@media (hover: hover) and (pointer: fine) { .v2 .hero-btn.test-one:hover { background: rgb(255 255 255 / 0.08); border-color: var(--c-hero-gold); } }
#lectures-h { scroll-margin-top: 84px; }
#lectures-h:focus { outline: none; }
@media (max-width: 719px) {
  .test-hero-text { display: block; font-size: 14.5px; line-height: 1.5; }
  .hero-btn.test-start { min-height: 60px; }
}

/* =====================================================================
   RESULTS v2 (2026-10-20): a deep-green result card (session · status · one figure · heading · bar), then ONE
   main action chosen from the real state, quiet secondary links, and the short "needs work" list.
   ===================================================================== */
.rs { display: grid; gap: var(--s-5); max-width: 640px; margin: 0 auto; }
.rs-card {
  position: relative; overflow: hidden; isolation: isolate; display: grid; gap: var(--s-4);
  padding: var(--s-5) var(--s-5) var(--s-5); border-radius: var(--r-lg);
  background: var(--pp-bg); color: var(--pp-text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 16px 36px rgb(23 76 60 / 0.18);
}
.rs-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--pp-gold); }
.rs-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-width: 0; }
.rs-kicker { margin: 0 !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pp-gold); }
.rs-chip { flex: none; padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; background: rgb(143 209 168 / 0.16); color: #A9DDBC; }
.rs-paused .rs-chip { background: rgb(215 182 117 / 0.18); color: var(--pp-gold); }
.rs-empty .rs-chip { background: rgb(247 246 241 / 0.10); color: var(--pp-text-2); }

.rs-hero { display: grid; gap: 4px; }
.rs-fig { display: flex; align-items: baseline; gap: 2px; margin: 0 !important; font-family: var(--font-serif); font-weight: 600; line-height: 0.95; font-variant-numeric: lining-nums tabular-nums; }
.rs-fig-n { font-size: 72px; letter-spacing: -0.03em; color: var(--pp-text); }
.rs-perfect .rs-fig-n { color: #A9DDBC; }
.rs-fig-d { font-size: 30px; color: var(--pp-text-2); }
.rs-fig-l { margin: 0 0 var(--s-3) !important; font-size: 14px; font-weight: 600; color: var(--pp-text-2); }
.rs-h { margin: 0 !important; font-family: var(--font-serif); font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; color: var(--pp-text); }
.rs-h:focus { outline: none; }
.rs-line { margin: 4px 0 0 !important; font-size: 15.5px; line-height: 1.55; color: var(--pp-text-2); max-width: 34em; }
.rs-ar { margin: var(--s-2) 0 0 !important; font-family: var(--font-ar); font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--pp-gold); text-align: left; }

/* the bar: one segment per question; the legend underneath gives the counts */
.rs-bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; height: 12px; margin-top: var(--s-1); }
.rs-seg { border-radius: 3px; background: rgb(247 246 241 / 0.14); }
.rs-seg.is-first { background: #8FD1A8; }
.rs-seg.is-more { background: var(--pp-gold); }
.rs-seg.is-skim { background: rgb(247 246 241 / 0.42); }
html.motion .rs-seg { animation: rs-seg-in 260ms var(--m-ease) backwards; animation-delay: calc(80ms + var(--i, 0) * 14ms); transform-origin: 50% 100%; }
@keyframes rs-seg-in { from { opacity: 0; transform: scaleY(0.2); } }
.rs-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--s-2); margin: 0; }
.rs-key { display: grid; gap: 2px; min-width: 0; padding-left: 12px; position: relative; }
.rs-key::before { content: ""; position: absolute; left: 0; top: 6px; width: 7px; height: 7px; border-radius: 2px; background: rgb(247 246 241 / 0.25); }
.rs-key.is-first::before { background: #8FD1A8; } .rs-key.is-more::before { background: var(--pp-gold); } .rs-key.is-skim::before { background: rgb(247 246 241 / 0.5); }
.rs-key dd { order: -1; margin: 0; font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--pp-text); }
.rs-key dt { font-size: 12.5px; line-height: 1.3; color: var(--pp-text-2); }
.rs-key.is-zero dd { color: var(--pp-text-2); }

/* what next */
.rs-next { display: grid; gap: var(--s-2); }
.rs-main { justify-content: center; }
.rs-main-t { display: grid; justify-items: center; gap: 1px; }
.rs-main-sub { font-size: 13px; font-weight: 500; opacity: 0.85; }
.rs-note { margin: 0 !important; font-size: 13.5px; color: var(--c-text-2); text-align: center; }
.rs-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px var(--s-5); }
.rs-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; font: 600 14.5px/1.3 var(--font-ui); color: var(--c-brand); text-decoration: none; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .rs-link:hover { text-decoration: underline; text-underline-offset: 3px; } }
.rs-link:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; border-radius: 4px; }

/* the "needs work" list */
.rs-list { display: grid; gap: var(--s-2); }
.rs-list-h { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-2) 0 0 !important; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-2); }
.rs-list-h span { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--c-surface-2); font-size: 12px; letter-spacing: 0; }
.rs .outcome-feedback { text-align: center; }

@media (min-width: 640px) {
  .rs-card { padding: var(--s-6) var(--s-8) var(--s-6); gap: var(--s-5); }
  .rs-fig-n { font-size: 96px; }
  .rs-fig-d { font-size: 38px; }
  .rs-h { font-size: 34px; }
  .rs-bar { height: 14px; }
}
@media (max-width: 380px) { .rs-fig-n { font-size: 60px; } .rs-key dd { font-size: 19px; } .rs-keys { gap: 6px; } }
/* =====================================================================
   RESULTS v3 "ALIVE" (2026-10-20): the result is one instrument on the deep-green card.
   Outer thick arc = right first time (of what was finished); inner thin arc = how much of the set was finished.
   Final values are written inline, so without motion (or after the first play) everything simply sits at its value.
   Reveal (html.motion, first render only): card 0 ms · ticks 150 · outer arc 400 (tier speed) · inner arc 700 ·
   message 850 · satellites 1150+ · reward burst / pulse at the arc end (excellent, perfect) · main action 1500.
   ===================================================================== */
.rx {
  --rx-a: #8FD1A8; --rx-a2: #8FD1A8; --rx-i: rgb(247 246 241 / 0.72); --rx-d: 1300ms; --rx-tick: rgb(247 246 241 / 0.16);
  position: relative; overflow: hidden; isolation: isolate; display: grid; gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-5); border-radius: var(--r-lg);
  background: var(--pp-bg); color: var(--pp-text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 18px 40px rgb(23 76 60 / 0.22);
}
.rx::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--pp-gold); z-index: 1; }
.rx-perfect { --rx-a: #E3C688; --rx-a2: #F1DDAE; --rx-d: 1100ms; --rx-tick: rgb(227 198 136 / 0.24); }
.rx-excellent { --rx-a: #A9DDBC; --rx-a2: #D7B675; --rx-d: 1100ms; }
.rx-low { --rx-a: #A3BDB0; --rx-a2: #A3BDB0; --rx-i: rgb(247 246 241 / 0.5); --rx-d: 1600ms; --rx-tick: rgb(247 246 241 / 0.11); }
.rx-paused { --rx-a: #8FD1A8; --rx-i: #D7B675; }
.rx-empty { --rx-tick: rgb(247 246 241 / 0.12); }

/* depth: two soft light pools behind everything, drifting very slowly (transform only) */
.rx-glow { position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; filter: blur(40px); opacity: 0.5; }
.rx-glow-a { top: -18%; left: -16%; background: radial-gradient(circle, rgb(143 209 168 / 0.32), transparent 65%); }
.rx-glow-b { bottom: -30%; right: -20%; background: radial-gradient(circle, rgb(215 182 117 / 0.22), transparent 65%); }
.rx-perfect .rx-glow-b, .rx-excellent .rx-glow-b { opacity: 0.85; }
.rx-low .rx-glow, .rx-empty .rx-glow { opacity: 0.3; }

.rx .rs-top { position: relative; }
.rx-dial { position: relative; justify-self: center; width: min(196px, 56vw); aspect-ratio: 1; }
.rx-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rx-ticks line { stroke: var(--rx-tick); stroke-width: 1.4; stroke-linecap: round; }
.rx-ticks, .rx-arc, .rx-orbit { transform-box: view-box; transform-origin: 120px 120px; }
.rx-track, .rx-arc { fill: none; }
.rx-track-o { stroke: rgb(247 246 241 / 0.09); stroke-width: 12; }
.rx-track-i { stroke: rgb(247 246 241 / 0.08); stroke-width: 4; }
.rx-arc { transform: rotate(-90deg); stroke-linecap: round; }
.rx-arc-o { stroke: var(--rx-a); stroke-width: 12; stroke-dasharray: var(--v) 100; filter: drop-shadow(0 0 6px rgb(0 0 0 / 0.18)); }
.rx-arc-i { stroke: var(--rx-i); stroke-width: 4; stroke-dasharray: var(--v) 100; }
.rx-arc.is-zero { visibility: hidden; }
.rx-orbit { transform: rotate(var(--deg)); }
.rx-orbit circle { fill: var(--rx-a2); stroke: var(--pp-bg); stroke-width: 2.5; }
.rx-sparks circle { fill: var(--rx-a2); opacity: 0; transform-box: view-box; transform-origin: 120px 120px; }

.rx-centre { position: absolute; inset: 18%; display: grid; place-content: center; justify-items: center; text-align: center; gap: 1px; }
.rx-num { display: flex; align-items: baseline; font-family: var(--font-serif); font-weight: 600; font-size: 46px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; color: var(--pp-text); }
.rx-perfect .rx-num { color: #F1DDAE; }
.rx-unit { font-size: 0.48em; margin-left: 1px; color: var(--pp-text-2); letter-spacing: 0; }
.rx-l { font-size: 11.5px; font-weight: 700; line-height: 1.25; color: var(--pp-text); max-width: 11em; }
.rx-s { font-size: 11px; line-height: 1.3; color: var(--pp-text-2); }

.rx-key { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; margin: calc(-1 * var(--s-1)) 0 0 !important; font-size: 11.5px; color: var(--pp-text-2); }
.rx-k { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rx-key i { display: inline-block; width: 14px; border-radius: 2px; }
.rx-key .k-o { height: 5px; background: var(--rx-a); }
.rx-key .k-i { height: 2px; background: var(--rx-i); }

.rx-msg { position: relative; text-align: center; display: grid; justify-items: center; }
.rx-msg .rs-ar { text-align: center; margin-top: 2px !important; }
.rx .rs-h { font-size: 25px; }
.rx .rs-line { font-size: 14.5px; }

.rx-sats { position: relative; list-style: none; margin: 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--pp-rule); display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--s-2); }
.rx-sat { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rx-sat svg { flex: none; width: 28px; height: 28px; overflow: visible; }
.rx-sat svg circle { fill: none; stroke-width: 4; transform-box: view-box; transform-origin: 18px 18px; transform: rotate(-90deg); }
.rx-sat .t { stroke: rgb(247 246 241 / 0.12); }
.rx-sat .a { stroke: rgb(247 246 241 / 0.5); stroke-dasharray: var(--p) 100; stroke-linecap: round; }
.rx-sat.is-first .a { stroke: #8FD1A8; } .rx-sat.is-more .a { stroke: var(--pp-gold); } .rx-sat.is-left .a { stroke: rgb(247 246 241 / 0.35); }
.rx-sat.is-zero .a { visibility: hidden; }
.rx-sat-b { display: grid; min-width: 0; }
.rx-sat-n { font-size: 19px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--pp-text); }
.rx-sat-l { font-size: 11.5px; line-height: 1.25; color: var(--pp-text-2); }
.rx-sat.is-zero .rx-sat-n { color: var(--pp-text-2); }

/* ---- the reveal: first render only, never on a re-render (.is-shown) ---- */
html.motion .rx:not(.is-shown) { animation: rx-in 320ms var(--m-ease) backwards; }
html.motion .rx:not(.is-shown) .rx-ticks { animation: rx-ticks 700ms var(--m-ease) 150ms backwards; }
html.motion .rx:not(.is-shown) .rx-arc-o { animation: rx-draw var(--rx-d) cubic-bezier(.22,.8,.24,1) 400ms backwards; }
html.motion .rx:not(.is-shown) .rx-arc-i { animation: rx-draw 900ms cubic-bezier(.22,.8,.24,1) 700ms backwards; }
html.motion .rx:not(.is-shown) .rx-orbit { animation: rx-orbit var(--rx-d) cubic-bezier(.22,.8,.24,1) 400ms backwards; }
html.motion .rx:not(.is-shown) .rx-centre { animation: rx-fade 360ms var(--m-ease) 300ms backwards; }
html.motion .rx:not(.is-shown) .rx-key { animation: rx-fade 360ms var(--m-ease) 900ms backwards; }
html.motion .rx:not(.is-shown) .rx-msg { animation: rx-rise 420ms var(--m-ease) 850ms backwards; }
html.motion .rx:not(.is-shown) .rx-sat { animation: rx-rise 360ms var(--m-ease) backwards; }
html.motion .rx:not(.is-shown) .rx-sat:nth-child(1) { animation-delay: 1150ms; }
html.motion .rx:not(.is-shown) .rx-sat:nth-child(2) { animation-delay: 1240ms; }
html.motion .rx:not(.is-shown) .rx-sat:nth-child(3) { animation-delay: 1330ms; }
html.motion .rx:not(.is-shown) .rx-sat:nth-child(4) { animation-delay: 1420ms; }
html.motion .rx:not(.is-shown) .rx-sat .a { animation: rx-draw 600ms var(--m-ease) 1250ms backwards; }
html.motion .rx-glow-a { animation: rx-drift-a 18s ease-in-out infinite alternate; }
html.motion .rx-glow-b { animation: rx-drift-b 22s ease-in-out infinite alternate; }
/* excellent / perfect: one burst of sparks off the arc end and one glow pulse, then stillness */
html.motion .rx:not(.is-shown) .rx-sparks circle { animation: rx-spark 760ms cubic-bezier(.2,.7,.3,1) backwards; animation-delay: calc(1380ms + var(--k) * 14ms); }
.rx-perfect .rx-dial::after, .rx-excellent .rx-dial::after { content: ""; position: absolute; inset: -6%; border-radius: 50%; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px var(--rx-a2), 0 0 34px 6px rgb(227 198 136 / 0.45); }
html.motion .rx-perfect:not(.is-shown) .rx-dial::after, html.motion .rx-excellent:not(.is-shown) .rx-dial::after { animation: rx-pulse 900ms ease-out 1450ms; }
/* nothing answered: the empty rings breathe three times, then rest */
html.motion .rx-empty:not(.is-shown) .rx-track { animation: rx-breathe 1600ms ease-in-out 300ms 3; }
/* the main action is gently pointed at once the result has landed (it is clickable from the start) */
html.motion .rs:has(.rx:not(.is-shown)) .rs-main { animation: rx-call 700ms var(--m-ease) 1500ms; }
html.motion .rs:has(.rx:not(.is-shown)) .rs-next .rs-note,
html.motion .rs:has(.rx:not(.is-shown)) .rs-more { animation: rx-fade 300ms var(--m-ease) 600ms backwards; }

@keyframes rx-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
@keyframes rx-ticks { from { opacity: 0; transform: rotate(-40deg) scale(0.92); } }
@keyframes rx-draw { from { stroke-dasharray: 0 100; } }
@keyframes rx-orbit { from { transform: rotate(0deg); opacity: 0; } 12% { opacity: 1; } }
@keyframes rx-fade { from { opacity: 0; } }
@keyframes rx-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes rx-spark {
  0% { opacity: 0; transform: rotate(calc(var(--deg-end, 0deg) + var(--a))) translateY(-96px) scale(0.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--deg-end, 0deg) + var(--a))) translateY(calc(-96px - var(--d) * 0.55)) scale(0.2); }
}
@keyframes rx-pulse { 0% { opacity: 0; transform: scale(0.94); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.08); } }
@keyframes rx-breathe { 50% { stroke: rgb(247 246 241 / 0.2); } }
@keyframes rx-call { 40% { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(23 76 60 / 0.3); } }
@keyframes rx-drift-a { to { transform: translate(14%, 10%) scale(1.08); } }
@keyframes rx-drift-b { to { transform: translate(-12%, -8%) scale(1.1); } }

/* desktop: instrument on the left, message and counts on the right */
@media (min-width: 720px) {
  .rs:has(.rx) { max-width: 760px; }
  .rx { grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: "top top" "dial msg" "key sats"; column-gap: var(--s-6); row-gap: var(--s-4); padding: var(--s-5) var(--s-6) var(--s-6); }
  .rx .rs-top { grid-area: top; }
  .rx-dial { grid-area: dial; width: 250px; align-self: center; }
  .rx-key { grid-area: key; margin: 0 !important; align-self: start; flex-direction: column; gap: 4px; }
  .rx-msg { grid-area: msg; align-self: center; text-align: left; justify-items: start; }
  .rx-msg .rs-ar { text-align: left; }
  .rx-sats { grid-area: sats; align-self: start; }
  .rx .rs-h { font-size: 34px; }
  .rx .rs-line { font-size: 15.5px; }
  .rx-num { font-size: 60px; }
  .rx-l { font-size: 13px; } .rx-s { font-size: 12px; }
}
@media (max-width: 719px) {
  /* phone first screen: instrument, message, counts and the main action together */
  .rs:has(.rx) { gap: var(--s-4); }
  .rx { gap: 10px; padding: var(--s-3) var(--s-4) var(--s-4); }
  .rx-dial { width: min(170px, 48vw); }
  .rx-num { font-size: 36px; }
  .rx-l { font-size: 11px; max-width: 9.5em; } .rx-s { font-size: 10.5px; }
  .rx .rs-h { font-size: 23px; }
  .rx-msg .rs-line { margin-top: 2px !important; font-size: 14px; line-height: 1.45; }
  .rx-msg .rs-ar { font-size: 16px; line-height: 1.5; }
  .rx-sats { padding-top: 10px; }
  .rx-sat-l { font-size: 11px; }
}
@media (max-width: 380px) { .rx-num { font-size: 40px; } .rx .rs-h { font-size: 22px; } .rx-sat svg { width: 24px; height: 24px; } .rx-sat-n { font-size: 17px; } }

/* the doctor's IMP list (tahdidat al-doctor): gold, a strong signal but not a past exam */
.v2 .tag-doctor-imp { background: rgb(215 182 117 / 0.18); color: var(--c-gold-ink); box-shadow: inset 0 0 0 1px rgb(215 182 117 / 0.45); }
.tag-ar { font-family: var(--font-ar); font-weight: 700; margin-inline-start: 2px; }


/* =====================================================================
   HOME v6 (user, 2026-10-20): "Choose your module".
   Nothing is open at first: each module is a big cover (name, full name, status, facts, a quiet line drawing).
   Picking one folds the covers into a slim switcher and unfolds that module's panel underneath, in place.
   Picked state: switcher + one panel. Coming back to the home page keeps the choice (in memory only).
   ===================================================================== */
.hp-label-step { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; letter-spacing: 0; color: var(--c-gold-ink); box-shadow: inset 0 0 0 1.5px var(--c-gold); }
.hp-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--s-3); }
.hp-cov {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-rows: auto auto auto 1fr auto; justify-items: start; text-align: left; gap: 2px;
  min-height: 236px; padding: var(--s-4); border-radius: var(--r-lg); border: 0; font: inherit; cursor: pointer;
  transition: min-height 280ms var(--ease), padding 280ms var(--ease), box-shadow 200ms var(--ease), transform 140ms var(--ease), opacity 200ms var(--ease);
}
.hp-cov.is-ready { background: var(--pp-bg); color: var(--pp-text); box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 16px 36px rgb(23 76 60 / 0.2); }
.hp-cov.is-ready::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--pp-gold); }
.hp-cov.is-soon { background: var(--c-surface); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-border); }
.hp-cov-art { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; fill: none; stroke-width: 2.2; stroke-linecap: round; transition: opacity 240ms var(--ease), transform 280ms var(--ease); }
.hp-cov.is-ready .hp-cov-art { stroke: rgb(215 182 117 / 0.42); }
.hp-cov.is-soon .hp-cov-art { stroke: var(--c-border); stroke-dasharray: 5 6; }
.hp-cov-st { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.hp-cov.is-ready .hp-cov-st { color: var(--pp-gold); }
.hp-cov.is-soon .hp-cov-st { color: var(--c-text-2); }
.hp-cov-name { margin-top: var(--s-2); font-family: var(--font-serif); font-weight: 600; font-size: 46px; line-height: 0.95; letter-spacing: -0.02em; transition: font-size 280ms var(--ease), margin 280ms var(--ease); }
.hp-cov.is-soon .hp-cov-name { color: var(--c-text-2); }
.hp-cov-full { font-size: 14px; line-height: 1.3; opacity: 0.8; transition: opacity 200ms var(--ease); }
.hp-cov-foot { grid-row: 5; align-self: end; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.hp-cov-facts { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hp-cov.is-ready .hp-cov-facts { color: var(--pp-text-2); }
.hp-cov.is-soon .hp-cov-facts { color: var(--c-text-2); }
.hp-cov-go { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; transition: transform 200ms var(--ease), opacity 200ms var(--ease); }
.hp-cov.is-ready .hp-cov-go { background: var(--pp-cta-bg); color: var(--pp-cta-text); }
.hp-cov.is-soon .hp-cov-go { box-shadow: inset 0 0 0 1px var(--c-border); color: var(--c-text-2); }
.hp-cov-go svg { width: 18px; height: 18px; }
.hp-cov:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }

html.motion .hp-cov:active { transform: scale(0.985); }

/* picked: the covers become a slim switcher (name + status in one line) */
.hp-pick.is-picked { gap: var(--s-2); }
.hp-pick.is-picked .hp-cov { min-height: 58px; padding: 10px var(--s-4); grid-template-columns: auto 1fr; grid-template-rows: auto; align-items: center; column-gap: var(--s-3); }
.hp-pick.is-picked .hp-cov-name { grid-row: 1; grid-column: 1; margin: 0; font-size: 24px; }
.hp-pick.is-picked .hp-cov-st { grid-row: 1; grid-column: 2; justify-self: end; font-size: 10.5px; }
.hp-pick.is-picked .hp-cov-full, .hp-pick.is-picked .hp-cov-foot { display: none; }
.hp-pick.is-picked .hp-cov-art { opacity: 0.35; height: 100%; }
.hp-pick.is-picked .hp-cov:not(.is-sel) { opacity: 0.72; box-shadow: inset 0 0 0 1px var(--c-border); }
.hp-pick.is-picked .hp-cov.is-ready:not(.is-sel) { background: var(--c-surface); color: var(--c-text); }
.hp-pick.is-picked .hp-cov.is-ready:not(.is-sel) .hp-cov-st { color: var(--c-brand); }
.hp-pick.is-picked .hp-cov.is-ready:not(.is-sel) .hp-cov-art { stroke: var(--c-border); }
.hp-pick.is-picked .hp-cov.is-ready:not(.is-sel)::before { opacity: 0; }
.hp-pick.is-picked .hp-cov.is-soon.is-sel { opacity: 1; box-shadow: inset 0 0 0 2px var(--c-text-2); }
@media (hover: hover) and (pointer: fine) { .hp-pick.is-picked .hp-cov:not(.is-sel):hover { opacity: 1; } }

/* only the chosen module's panel shows; nothing before a choice */
.hp-li:not(.is-sel) { display: none; }
.hp-mod.is-ready .hp-mod-status { display: none; }   /* the switcher already says Ready */
.hp-mod.is-ready .hp-mod-name { font-size: 30px; }
.hp-mod.is-soon { min-height: 120px; align-items: flex-start; padding: var(--s-4); border-radius: var(--r-lg); }
.hp-soon-name { font-size: 26px; }

/* the unfold: the panel opens from the switcher, its parts follow (≈300 ms) */
html.motion .hp-li.is-new > * { animation: hp-unfold 300ms var(--ease) both; transform-origin: 50% 0; }
html.motion .hp-li.is-new .hp-stats > div, html.motion .hp-li.is-new .hp-paths-h, html.motion .hp-li.is-new .hp-paths > li { animation: hp-part 260ms var(--ease) both; }
html.motion .hp-li.is-new .hp-stats > div:nth-child(2) { animation-delay: 40ms; }
html.motion .hp-li.is-new .hp-stats > div:nth-child(3) { animation-delay: 80ms; }
html.motion .hp-li.is-new .hp-paths-h { animation-delay: 90ms; }
html.motion .hp-li.is-new .hp-paths > li:nth-child(1) { animation-delay: 120ms; }
html.motion .hp-li.is-new .hp-paths > li:nth-child(2) { animation-delay: 170ms; }
@keyframes hp-unfold { from { opacity: 0; transform: translateY(-10px) scaleY(0.94); clip-path: inset(0 0 60% 0 round 16px); } to { clip-path: inset(0 0 0 0 round 16px); } }
@keyframes hp-part { from { opacity: 0; transform: translateY(8px); } }

/* phones: two covers side by side, compact enough that the hero, both covers and their facts fit the first screen */
@media (max-width: 639px) {
  .hp-label { display: flex; }
  .hp-pick { gap: var(--s-2); }
  .hp-cov { min-height: 200px; padding: var(--s-3); }
  .hp-cov-name { font-size: 36px; }
  .hp-cov-full { font-size: 12.5px; }
  .hp-cov-facts { font-size: 12px; line-height: 1.3; }
  .hp-cov-go { width: 32px; height: 32px; }
  .hp-pick.is-picked .hp-cov { min-height: 52px; padding: 8px var(--s-3); }
  .hp-pick.is-picked .hp-cov-name { font-size: 21px; }
  .hp-pick.is-picked .hp-cov-st { font-size: 0; gap: 0; }   /* just the dot on phones */
  .hp-pick.is-picked .hp-cov.is-soon .hp-cov-st::after { content: "Soon"; font-size: 10.5px; letter-spacing: 0.1em; }
  .hp-mod.is-ready .hp-mod-name { font-size: 26px; }
}
/* desktop: the hero stays put while the right column opens */
@media (min-width: 960px) {
  .hp-grid { align-items: start; }
  .hp-hero { padding-top: 56px; }
  .hp-cov { min-height: 300px; padding: var(--s-5); }
  .hp-cov-name { font-size: 60px; }
  .hp-cov-full { font-size: 15px; }
}
.hp-cov.is-long .hp-cov-name { font-size: 34px; }
@media (max-width: 639px) { .hp-cov.is-long .hp-cov-name { font-size: 27px; padding-top: 6px; } }
@media (min-width: 960px) { .hp-cov.is-long .hp-cov-name { font-size: 46px; } }
.hp-pick.is-picked .hp-cov.is-long .hp-cov-name { font-size: 21px; padding-top: 0; }
@media (min-width: 640px) { .hp-pick.is-picked .hp-cov.is-long .hp-cov-name { font-size: 24px; } }
.hp-mod.is-ready .hp-mod-name { font-size: 26px; line-height: 1.1; }
@media (max-width: 639px) { .hp-mod.is-ready .hp-mod-name { font-size: 22px; } }
.hp-mod.is-soon { background: repeating-linear-gradient(135deg, transparent 0 10px, rgb(127 127 127 / 0.04) 10px 20px), var(--c-surface); border-style: dashed; }

/* =====================================================================
   MODULE PAGE: Past papers | Subjects switcher (user, 2026-10-20). Students only saw the past-papers card and
   missed the subjects below, so both ways are named as two big tabs under the title; the chosen one shows
   underneath, swapped in place (≈260 ms). Under the past-papers card a quiet line points to Subjects too.
   ===================================================================== */
.mod-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: var(--s-5) 0 var(--s-4); padding: 6px; border-radius: calc(var(--r-lg) + 2px); background: var(--c-surface-2); box-shadow: inset 0 0 0 1px var(--c-border); }
.mod-tab {
  display: flex; align-items: center; gap: var(--s-3); min-height: 64px; padding: 10px var(--s-4); border: 0; border-radius: var(--r-lg);
  background: transparent; color: var(--c-text-2); font: inherit; text-align: left; cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.mod-tab-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-border); transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.mod-tab-ic svg { width: 19px; height: 19px; }
.mod-tab-b { display: grid; gap: 1px; min-width: 0; }
.mod-tab-l { font-family: var(--font-serif); font-size: 21px; font-weight: 600; line-height: 1.15; color: var(--c-text); }
.mod-tab-m { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mod-tab.is-sel { background: var(--c-bg); color: var(--c-brand); box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 20px rgb(0 0 0 / 0.06), inset 0 0 0 1.5px var(--c-brand); }
.mod-tab.is-sel .mod-tab-ic { background: var(--c-brand); color: var(--c-on-brand); box-shadow: none; }
.mod-tab:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .mod-tab:not(.is-sel):hover { background: rgb(127 127 127 / 0.06); color: var(--c-text); } }
.mod-pane:not(.is-sel) { display: none; }
.mod-pane .past-hero { margin-top: 0; }
html.motion .mod-pane.is-new { animation: mod-pane-in 260ms var(--ease) both; }
@keyframes mod-pane-in { from { opacity: 0; transform: translateY(10px); } }
.mod-hint { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: var(--s-3); min-height: 44px; padding: 0 2px; border: 0; background: none; font: 500 15px/1.4 var(--font-ui); color: var(--c-text-2); text-align: left; cursor: pointer; }
.mod-hint b { font-weight: 700; color: var(--c-brand); }
.mod-hint svg { width: 16px; height: 16px; color: var(--c-brand); transition: transform var(--t-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) { .mod-hint:hover b { text-decoration: underline; text-underline-offset: 3px; } .mod-hint:hover svg { transform: translateX(3px); } }
.mod-hint:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; border-radius: 4px; }
#mp-subjects .section-label { margin-top: 0; }
@media (max-width: 639px) {
  .mod-tabs { margin: var(--s-3) 0 var(--s-3); padding: 4px; gap: 4px; }
  .mod-tab { min-height: 56px; padding: 8px 10px; gap: var(--s-2); }
  .mod-tab-ic { width: 32px; height: 32px; border-radius: 9px; }
  .mod-tab-ic svg { width: 17px; height: 17px; }
  .mod-tab-l { font-size: 17px; }
  .mod-tab-m { font-size: 11.5px; }
}
/* Subjects (left, this page) | Past papers (right, a link straight to the past papers page) */
.mod-tabs a.mod-tab { text-decoration: none; position: relative; }
.mod-tab-go { margin-left: auto; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--pp-bg); color: var(--pp-text); transition: transform var(--t-fast) var(--ease); }
.mod-tab-go svg { width: 16px; height: 16px; }
.mod-tabs a.mod-tab .mod-tab-ic { background: var(--pp-bg); color: var(--pp-gold); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .mod-tabs a.mod-tab:hover .mod-tab-go { transform: translateX(3px); } }
html.motion .mod-tabs a.mod-tab:active { transform: scale(0.985); }
.mod-tab[aria-disabled="true"] { opacity: 0.6; cursor: default; }
span.mod-tab { cursor: default; }
@media (max-width: 639px) { .mod-tab-go { width: 26px; height: 26px; } .mod-tab-go svg { width: 14px; height: 14px; } }
@media (max-width: 639px) { .mod-tab-ic, .mod-tab-du { display: none; } .mod-tab { padding: 8px 12px; } .mod-tab-l { white-space: nowrap; } }
@media (max-width: 639px) { #mp-past .section-intro { display: none; } }
@media (max-width: 639px) { #mp-test > .section-intro { display: none; } }
@media (max-width: 639px) { #mp-test .setup-note { display: none; } }

/* HOME v7 (user, 2026-10-20): covers are direct links to the module page. No arrow button, no unfold.
   Hover / focus: the cover lifts, its colour shifts, the drawing drifts, and an "Open →" cue slides in. */
a.hp-cov { text-decoration: none; }
a.hp-cov.is-ready { color: var(--pp-text) !important; }
a.hp-cov.is-soon { color: var(--c-text) !important; }
.hp-cov { transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background-color 220ms var(--ease); will-change: transform; }
.hp-cov-cue { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; opacity: 0; transform: translateX(-8px); transition: opacity 200ms var(--ease), transform 220ms var(--ease); }
.hp-cov-cue::after { content: "→"; font-size: 16px; line-height: 1; transition: transform 220ms var(--ease); }
.hp-cov.is-ready .hp-cov-cue { color: var(--pp-gold); }
.hp-cov.is-soon .hp-cov-cue { color: var(--c-brand); }
.hp-cov-art { transition: transform 420ms var(--ease), opacity 300ms var(--ease), stroke 300ms var(--ease); }
.hp-cov-name { transition: color 220ms var(--ease), letter-spacing 300ms var(--ease); }
/* touch screens: the cue is always shown, so the cover still reads as tappable */
@media (hover: none) { .hp-cov-cue { opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine) {
  .hp-cov:hover, .hp-cov:focus-visible { transform: translateY(-6px); }
  .hp-cov.is-ready:hover, .hp-cov.is-ready:focus-visible { background-color: #1E5C49; box-shadow: 0 0 0 2px var(--pp-gold), 0 26px 50px rgb(23 76 60 / 0.32); }
  .hp-cov.is-soon:hover, .hp-cov.is-soon:focus-visible { background-color: var(--c-surface-2); box-shadow: inset 0 0 0 2px var(--c-brand), 0 22px 44px rgb(0 0 0 / 0.08); }
  .hp-cov:hover .hp-cov-cue, .hp-cov:focus-visible .hp-cov-cue { opacity: 1; transform: none; }
  .hp-cov:hover .hp-cov-cue::after { transform: translateX(3px); }
  .hp-cov.is-ready:hover .hp-cov-art { transform: translateX(-18px) scale(1.04); stroke: rgb(215 182 117 / 0.7); }
  .hp-cov.is-soon:hover .hp-cov-art { transform: translateY(-6px) scale(1.04); stroke: var(--c-brand); opacity: 0.5; }
  .hp-cov.is-soon:hover .hp-cov-name { color: var(--c-text); }
  .hp-cov:hover .hp-cov-name { letter-spacing: -0.01em; }
}
html.motion .hp-cov:active { transform: translateY(-2px) scale(0.985); transition-duration: 90ms; }
@media (prefers-reduced-motion: reduce) { .hp-cov, .hp-cov-cue, .hp-cov-art, .hp-cov-name { transition: none; } .hp-cov:hover { transform: none; } }
@media (max-width: 639px) { .hp-cov-cue { display: none; } }

/* HOME covers (user, 2026-10-20): plain at rest; they fill with the deep green only on hover / focus / tap. */
.hp-pick .hp-cov, .hp-pick .hp-cov.is-ready, .hp-pick .hp-cov.is-soon {
  background-color: var(--c-surface); color: var(--c-text) !important;
  box-shadow: inset 0 0 0 1px var(--c-border), 0 1px 2px rgb(0 0 0 / 0.04);
  transition: transform 220ms var(--ease), box-shadow 260ms var(--ease), background-color 260ms var(--ease), color 260ms var(--ease);
}
.hp-pick .hp-cov::before { opacity: 0; transition: opacity 260ms var(--ease); }
.hp-pick .hp-cov .hp-cov-st, .hp-pick .hp-cov .hp-cov-name, .hp-pick .hp-cov .hp-cov-full, .hp-pick .hp-cov .hp-cov-facts, .hp-pick .hp-cov .hp-cov-cue { transition: color 260ms var(--ease), opacity 200ms var(--ease), transform 220ms var(--ease); }
.hp-pick .hp-cov.is-ready .hp-cov-st { color: var(--c-brand); }
.hp-pick .hp-cov .hp-cov-name { color: var(--c-text); }
.hp-pick .hp-cov.is-soon .hp-cov-name { color: var(--c-text-2); }
.hp-pick .hp-cov .hp-cov-full, .hp-pick .hp-cov .hp-cov-facts { color: var(--c-text-2); opacity: 1; }
.hp-pick .hp-cov .hp-cov-art { stroke: var(--c-border); }
.hp-pick .hp-cov.is-ready .hp-cov-art { stroke-dasharray: none; }
.hp-pick .hp-cov .hp-cov-cue { color: var(--c-brand); }

/* the green state */
.hp-pick .hp-cov.is-on { background-color: var(--pp-bg); color: var(--pp-text) !important; box-shadow: 0 0 0 2px var(--pp-gold), 0 26px 50px rgb(23 76 60 / 0.3); }
.hp-pick .hp-cov.is-on::before { opacity: 1; }
.hp-pick .hp-cov.is-on .hp-cov-st { color: var(--pp-gold); }
.hp-pick .hp-cov.is-on .hp-cov-name { color: var(--pp-text); }
.hp-pick .hp-cov.is-on .hp-cov-full, .hp-pick .hp-cov.is-on .hp-cov-facts { color: var(--pp-text-2); }
.hp-pick .hp-cov.is-on .hp-cov-art { stroke: rgb(215 182 117 / 0.65); opacity: 1; }
.hp-pick .hp-cov.is-on .hp-cov-cue { color: var(--pp-gold); }
@media (hover: hover) and (pointer: fine) {
  .hp-pick .hp-cov:hover, .hp-pick .hp-cov:focus-visible { background-color: var(--pp-bg); color: var(--pp-text) !important; box-shadow: 0 0 0 2px var(--pp-gold), 0 26px 50px rgb(23 76 60 / 0.3); }
  .hp-pick .hp-cov:hover::before, .hp-pick .hp-cov:focus-visible::before { opacity: 1; }
  .hp-pick .hp-cov:hover .hp-cov-st, .hp-pick .hp-cov:focus-visible .hp-cov-st { color: var(--pp-gold); }
  .hp-pick .hp-cov:hover .hp-cov-name, .hp-pick .hp-cov:focus-visible .hp-cov-name { color: var(--pp-text); }
  .hp-pick .hp-cov:hover .hp-cov-full, .hp-pick .hp-cov:hover .hp-cov-facts, .hp-pick .hp-cov:focus-visible .hp-cov-full, .hp-pick .hp-cov:focus-visible .hp-cov-facts { color: var(--pp-text-2); }
  .hp-pick .hp-cov:hover .hp-cov-art, .hp-pick .hp-cov:focus-visible .hp-cov-art { stroke: rgb(215 182 117 / 0.65); opacity: 1; }
  .hp-pick .hp-cov:hover .hp-cov-cue, .hp-pick .hp-cov:focus-visible .hp-cov-cue { color: var(--pp-gold); }
}
.hp-pick .hp-cov:active { background-color: var(--pp-bg); color: var(--pp-text) !important; box-shadow: 0 0 0 2px var(--pp-gold), 0 26px 50px rgb(23 76 60 / 0.3); }
.hp-pick .hp-cov:active::before { opacity: 1; }
.hp-pick .hp-cov:active .hp-cov-st { color: var(--pp-gold); }
.hp-pick .hp-cov:active .hp-cov-name { color: var(--pp-text); }
.hp-pick .hp-cov:active .hp-cov-full, .hp-pick .hp-cov:active .hp-cov-facts { color: var(--pp-text-2); }
.hp-pick .hp-cov:active .hp-cov-art { stroke: rgb(215 182 117 / 0.65); opacity: 1; }
.hp-pick .hp-cov:active .hp-cov-cue { color: var(--pp-gold); }


/* =====================================================================
   HOME: HOW IT WORKS (user, 2026-10-20: its own section, creative). A full-width deep-green band, clearly a
   different section from the hero. Three steps joined by a gold path that draws itself in; each step carries a
   small picture of what you'll actually see (step 3 plays one wrong pick, then the right one, once).
   ===================================================================== */
.hw { position: relative; isolation: isolate; overflow: hidden; border-top: 0; padding: 72px 0 80px;
  background: var(--pp-bg); color: var(--pp-text); }
.hw::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 100% 0%, rgb(215 182 117 / 0.16), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgb(143 209 168 / 0.12), transparent 60%),
    radial-gradient(circle at 1px 1px, rgb(247 246 241 / 0.07) 1px, transparent 1.5px) 0 0 / 22px 22px; }
.hw::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--pp-gold); }
.hw-inner { display: grid; gap: 48px; }
.hw-head { display: grid; gap: var(--s-3); max-width: 760px; }
.hw-eyebrow { margin: 0 !important; display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pp-gold); }
.hw-eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--pp-gold); }
.hw-title { margin: 0 !important; font-family: var(--font-serif); font-weight: 600; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; letter-spacing: -0.02em; color: var(--pp-text); text-wrap: balance; }
.hw-title span { color: #A9DDBC; }
.hw-title:focus { outline: none; }

/* the steps and the path joining them */
.hw-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.hw-steps::before { content: ""; position: absolute; z-index: 0; top: 22px; left: 22px; right: calc(33.33% - 22px);
  border-top: 2px dashed rgb(215 182 117 / 0.55); transform-origin: 0 50%; }
html.motion .hw-steps::before { transform: scaleX(0); transition: transform 900ms cubic-bezier(.22,.8,.24,1) 150ms; }
html.motion .hw-steps:has(> .m-in)::before { transform: scaleX(1); }
.hw-step { position: relative; z-index: 1; display: grid; grid-template-rows: auto auto auto 1fr; gap: var(--s-2); align-content: start; }
.hw-n { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: var(--s-3); border-radius: 50%;
  background: var(--pp-bg); box-shadow: inset 0 0 0 2px var(--pp-gold), 0 0 0 6px var(--pp-bg);
  font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--pp-gold); }
.hw-t { margin: 0 !important; font-family: var(--font-serif); font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--pp-text); }
.hw-x { margin: 0 !important; font-size: 15px; line-height: 1.55; color: var(--pp-text-2); max-width: 30em; }

/* the little pictures */
.hw-mini { align-self: end; display: grid; gap: 8px; margin-top: var(--s-4); padding: 14px; min-height: 132px; align-content: center;
  border-radius: var(--r-md); background: rgb(247 246 241 / 0.05); box-shadow: inset 0 0 0 1px rgb(247 246 241 / 0.12); }
.hw-mini-mods { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.hw-mm { display: grid; gap: 2px; padding: 12px; border-radius: 10px; background: #F7F6F1; color: #1B2A22; box-shadow: 0 6px 16px rgb(0 0 0 / 0.18); }
.hw-mm b { font-family: var(--font-serif); font-size: 21px; font-weight: 600; line-height: 1; }
.hw-mm i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6B6F68; }
.hw-mm.is-ready { background: #1E5C49; color: #F7F6F1; box-shadow: 0 0 0 2px var(--pp-gold), 0 10px 22px rgb(0 0 0 / 0.25); transform: translateY(-4px); }
.hw-mm.is-ready i { color: var(--pp-gold); }
.hw-mm:not(.is-ready) { opacity: 0.75; }
.hw-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: rgb(247 246 241 / 0.08); }
.hw-seg span { padding: 8px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 700; text-align: center; color: var(--pp-text-2); }
.hw-seg .is-on { background: #F7F6F1; color: #1B2A22; }
.hw-types { display: flex; flex-wrap: wrap; gap: 6px; }
.hw-types span { padding: 5px 11px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; background: var(--pp-cta-bg); color: var(--pp-cta-text); }
.hw-types .is-off { background: transparent; color: var(--pp-text-2); box-shadow: inset 0 0 0 1px rgb(247 246 241 / 0.25); }
.hw-q { display: grid; gap: 6px; padding: 2px 2px 4px; }
.hw-q i { display: block; height: 7px; border-radius: 4px; background: rgb(247 246 241 / 0.3); }
.hw-q i + i { width: 62%; }
.hw-opt { position: relative; display: flex; align-items: center; justify-content: center; min-height: 32px; border-radius: 9px; font-size: 13px; font-weight: 700;
  background: rgb(247 246 241 / 0.08); color: var(--pp-text-2); box-shadow: inset 0 0 0 1px rgb(247 246 241 / 0.16); }
.hw-opt svg { width: 14px; height: 14px; vertical-align: -2px; }
.hw-opt.is-wrong { color: #E8B4A6; text-decoration: line-through; text-decoration-thickness: 1.5px; background: rgb(232 180 166 / 0.08); box-shadow: inset 0 0 0 1px rgb(232 180 166 / 0.35); }
.hw-opt.is-right { background: #8FD1A8; color: #10301F; box-shadow: none; }
.hw-loop { justify-self: start; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; color: var(--pp-gold); box-shadow: inset 0 0 0 1px rgb(215 182 117 / 0.45); }
/* step 3 plays once when it comes into view: a wrong pick is ruled out, then the right one lights up */
html.motion .hw-step.m-in .hw-opt.is-wrong { animation: hw-wrong 500ms var(--ease) 500ms both; }
html.motion .hw-step.m-in .hw-opt.is-right { animation: hw-right 420ms var(--ease) 1100ms both; }
html.motion .hw-step.m-in .hw-loop { animation: hw-fade 360ms var(--ease) 1500ms both; }
html.motion .hw-step.m-in .hw-mm.is-ready { animation: hw-lift 420ms var(--ease) 450ms both; }
html.motion .hw-step.m-in .hw-seg .is-on { animation: hw-fade 300ms var(--ease) 500ms both; }
@keyframes hw-wrong { from { color: var(--pp-text-2); text-decoration-color: transparent; background: rgb(247 246 241 / 0.08); box-shadow: inset 0 0 0 1px rgb(247 246 241 / 0.16); } }
@keyframes hw-right { from { background: rgb(247 246 241 / 0.08); color: var(--pp-text-2); transform: scale(0.97); } 60% { transform: scale(1.03); } }
@keyframes hw-fade { from { opacity: 0; } }
@keyframes hw-lift { from { transform: none; box-shadow: 0 6px 16px rgb(0 0 0 / 0.18); background: #F7F6F1; color: #1B2A22; } }

/* the foot: tags on show, feedback as one gold button */
.hw-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: end; padding-top: 32px; border-top: 1px solid rgb(247 246 241 / 0.14); }
.hw-tags { display: grid; gap: var(--s-2); min-width: 0; }
.hw-tags-h { margin: 0 !important; font-size: 13px; font-weight: 600; color: var(--pp-text-2); }
.hw-tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hw-tag-row .tag { box-shadow: 0 0 0 1px rgb(247 246 241 / 0.12); }
.hw .hp-tags summary { color: var(--pp-gold); min-height: 36px; }
.hw .hp-tags-body { margin-top: var(--s-2); padding: var(--s-4); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); }
.hw-fb { display: grid; justify-items: end; gap: 6px; text-decoration: none; }
.hw-fb-k { font-size: 13.5px; color: var(--pp-text-2); }
.hw-fb-b { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); background: var(--pp-cta-bg); color: var(--pp-cta-text); font-weight: 700; font-size: 16px; transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.hw-fb-b svg { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) { .hw-fb:hover .hw-fb-b { background: #E3C88E; } .hw-fb:hover .hw-fb-b svg { transform: translateX(3px); } }
.hw-fb:focus-visible { outline: none; } .hw-fb:focus-visible .hw-fb-b { outline: 3px solid var(--pp-text); outline-offset: 3px; }

/* tablets and phones: the path runs down the left, through the numbers */
@media (max-width: 899px) {
  .hw { padding: 52px 0 56px; }
  .hw-inner { gap: 36px; }
  .hw-steps { grid-template-columns: 1fr; gap: 28px; padding-left: 62px; }
  .hw-steps::before { top: 10px; bottom: 30px; left: 22px; right: auto; border-top: 0; border-left: 2px dashed rgb(215 182 117 / 0.55); transform-origin: 50% 0; }
  html.motion .hw-steps::before { transform: scaleY(0); }
  html.motion .hw-steps:has(> .m-in)::before { transform: scaleY(1); }
  .hw-n { position: absolute; left: -62px; top: -4px; margin: 0; }
  .hw-mini { min-height: 0; max-width: 420px; }
  .hw-foot { grid-template-columns: 1fr; align-items: start; }
  .hw-fb { justify-items: start; }
}
@media (max-width: 480px) {
  .hw-steps { padding-left: 54px; }
  .hw-n { left: -54px; width: 40px; height: 40px; font-size: 18px; }
  .hw-steps::before { left: 19px; }
  .hw-t { font-size: 21px; }
  .hw-x { font-size: 14.5px; }
}
.hw-tag-row .tag-doctor-imp { background: #F3E6C6; color: #6B4E12; box-shadow: none; }

/* =====================================================================
   HOME: two full-screen sections with a transition between them (user, 2026-10-20).
   1) Hero + modules fill the first screen, with a "How it works ↓" cue at the bottom.
   2) "How it works" is a sheet that slides up over it: it starts lower, a little smaller and rounded,
      and flattens into place as you scroll; the first section eases back and dims as it leaves.
   Scroll-linked where the browser supports it (animation-timeline), otherwise a one-time slide-in.
   ===================================================================== */
.hp { position: relative; min-height: calc(100svh - 64px); display: grid; align-content: center; padding-bottom: 96px !important; }
.hp-next { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-2); text-decoration: none; }
.hp-next-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--c-border); color: var(--c-brand); }
.hp-next-ic svg { width: 18px; height: 18px; }
html.motion .hp-next-ic { animation: hp-bob 1.8s ease-in-out 1.2s 3; }
@keyframes hp-bob { 50% { transform: translateY(5px); } }
@media (hover: hover) and (pointer: fine) { .hp-next:hover { color: var(--c-brand); } .hp-next:hover .hp-next-ic { box-shadow: inset 0 0 0 1.5px var(--c-brand); } }
.hp-next:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 4px; border-radius: 8px; }

.hw { min-height: 100svh; display: grid; align-content: center; border-radius: 0; box-shadow: 0 -24px 60px rgb(0 0 0 / 0.18); transform-origin: 50% 0; }
.hp-grid { transform-origin: 50% 30%; }

/* scroll-linked (app.js sets --p on the sheet: 0 = just entering, 1 = in place; --q on the hero: 0 = on screen, 1 = gone) */
html.motion .hw { transform: translateY(calc((1 - var(--p, 1)) * 80px)) scale(calc(0.93 + 0.07 * var(--p, 1))); border-radius: calc((1 - var(--p, 1)) * 48px) calc((1 - var(--p, 1)) * 48px) 0 0; will-change: transform; }
html.motion .hp-grid { transform: translateY(calc(var(--q, 0) * 40px)) scale(calc(1 - 0.06 * var(--q, 0))); opacity: calc(1 - 0.6 * var(--q, 0)); }
html.motion .hp-next { opacity: calc(1 - 2.5 * var(--q, 0)); }@media (max-width: 639px) {
  .hp { min-height: calc(100svh - 60px); padding-bottom: 84px !important; }
  .hp-next { bottom: 16px; }
  .hw { min-height: 0; }
}

/* =====================================================================
   HEADER v2 (user, 2026-10-20: "the navigation bar isn't organized well").
   Three zones: brand left · the pages as one centred pill group (Home · Modules · How it works) · actions right
   (Feedback, Buy me a coffee when configured, theme). The page you're on is a raised white pill in the group.
   ===================================================================== */
@media (min-width: 880px) {
  .header-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-4); }
  .brand-link { justify-self: start; margin-right: 0; }
  .main-nav { justify-self: center; }
  .header-actions { justify-self: end; }

}
.hdr-btn { display: none; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-pill); font: 600 14.5px/1 var(--font-ui); text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform 120ms var(--ease); }
.hdr-btn svg { width: 18px; height: 18px; flex: none; }
.hdr-fb { color: var(--c-text) !important; box-shadow: inset 0 0 0 1px var(--c-border-strong, var(--c-border)); }
.hdr-fb.is-active { color: var(--c-brand) !important; box-shadow: inset 0 0 0 1.5px var(--c-brand); }
.hdr-coffee { background: var(--pp-cta-bg); color: var(--pp-cta-text) !important; }
@media (hover: hover) and (pointer: fine) { .hdr-fb:hover { box-shadow: inset 0 0 0 1.5px var(--c-brand); color: var(--c-brand) !important; } .hdr-coffee:hover { background: #E3C88E; } }
.hdr-btn:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
html.motion .hdr-btn:active { transform: scale(0.97); }
.header-actions .icon-btn { width: 40px; height: 40px; }
@media (min-width: 880px) { .hdr-btn { display: inline-flex; } }
@media (min-width: 880px) and (max-width: 1099px) { .hdr-coffee span { display: none; } .hdr-coffee { padding: 0 11px; } .v2 .nav-list .nav-link { padding: 0 12px; } }
/* phone menu: the coffee link as one gold button under the modules */
.dr-coffee { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; margin-top: var(--s-4); border-radius: var(--r-md);
  background: var(--pp-cta-bg); color: var(--pp-cta-text) !important; font-weight: 700; font-size: 16px; text-decoration: none; }
.dr-coffee svg { width: 20px; height: 20px; }

/* Support menu (InstaPay first, Buy Me a Coffee for abroad) */
.hdr-support { position: relative; }
.hdr-support .hdr-btn { border: 0; cursor: pointer; }
.hdr-support .hdr-btn[aria-expanded="true"] { background: #E3C88E; }
.sup-menu { width: min(340px, calc(100vw - 32px)); padding: var(--s-4); }
.sup { display: grid; gap: var(--s-2); }
.sup-h { margin: 0 !important; font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--c-text); }
.sup-x, .sup-how { margin: 0 !important; font-size: 14px; line-height: 1.5; color: var(--c-text-2); }
.sup-how { font-size: 13px; }
.sup-addr { display: flex; align-items: center; gap: var(--s-2); margin: 4px 0; padding: 6px 6px 6px 12px; border-radius: var(--r-md); background: var(--c-surface-2); box-shadow: inset 0 0 0 1px var(--c-border); }
.sup-addr code { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 700 15px/1.3 var(--font-ui); color: var(--c-brand); background: none; }
.sup-copy { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--c-brand); color: var(--c-on-brand); font: 700 13.5px/1 var(--font-ui); cursor: pointer; }
.sup-copy svg { width: 15px; height: 15px; }
.sup-copy.is-done { background: var(--c-got, #2F7A4F); }
.sup-copy:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.sup-alt { margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--c-brand); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .sup-alt:hover { text-decoration: underline; text-underline-offset: 3px; } }
.dr-support { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-border); }
.sup-addr { flex-wrap: nowrap; }
.sup-k { flex: none; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-on-brand); background: var(--c-brand); }
.sup-menu { width: min(320px, calc(100vw - 32px)); }

/* =====================================================================
   HEADER v3 (user, 2026-10-20: "looks mid"). Lighter: a see-through blurred bar, plain links with a small gold
   marker under the page you're on (it grows in on hover), Feedback as the one solid button, a quiet theme toggle.
   ===================================================================== */
.site-header { background: color-mix(in srgb, var(--c-bg) 84%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: color-mix(in srgb, var(--c-border) 70%, transparent); }
.header-bar { height: 68px; }
.wordmark { font-size: 22px; }
@media (min-width: 880px) {
  .nav-list { gap: 6px; }
  .v2 .nav-list .nav-link { height: 40px; padding: 0 14px; border-radius: 10px; background: none; font: 500 15px/1 var(--font-ui); color: var(--c-text-2); letter-spacing: 0.005em; }
  .v2 .nav-list .nav-link::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px; background: var(--c-gold);
    transform: scaleX(0); opacity: 0; transition: transform 220ms var(--ease), opacity 220ms var(--ease); }
  .v2 .nav-list .nav-link.is-active { color: var(--c-text); font-weight: 600; }
  .v2 .nav-list .nav-link.is-active::after { transform: scaleX(1); opacity: 1; }
  .v2 .nav-list .nav-link:hover { background: none; color: var(--c-text); }
  .v2 .nav-list .nav-link:hover::after { transform: scaleX(0.6); opacity: 0.6; }
  .v2 .nav-list .nav-link.is-active:hover::after { transform: scaleX(1); opacity: 1; }
  .v2 .nav-list .nav-menu-btn[aria-expanded="true"] { background: var(--c-surface-2); color: var(--c-text); }
  .v2 .nav-list .nav-link:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
}
/* Feedback: the one solid button; Support stays gold beside it */
.hdr-fb { background: var(--c-brand); color: var(--c-on-brand) !important; box-shadow: none; }
.hdr-fb.is-active { color: var(--c-on-brand) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand) 25%, transparent); }
@media (hover: hover) and (pointer: fine) { .hdr-fb:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--c-brand) 30%, transparent); color: var(--c-on-brand) !important; filter: brightness(1.06); } }
/* the theme toggle: quiet, no outline */
.header-actions .icon-btn { border-color: transparent; background: transparent; color: var(--c-text-2); }
@media (hover: hover) and (pointer: fine) { .header-actions .icon-btn:hover { background: var(--c-surface-2); color: var(--c-text); } }
.header-actions { gap: 6px; }
.header-actions .hdr-btn + .hdr-btn { margin-left: 2px; }


/* =====================================================================
   ABOUT (#/about): why SaveMyImtiaz exists, for the Faculty of Medicine, Damietta University.
   A deep-green opening, the story in two short paragraphs, four "ours" points, live numbers, a feedback call.
   ===================================================================== */
.ab { display: grid; gap: 72px; padding-bottom: 80px; }
.ab-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--pp-bg); color: var(--pp-text); padding: 88px 0 80px; }
.ab-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(55% 90% at 100% 0%, rgb(215 182 117 / 0.18), transparent 60%), radial-gradient(circle at 1px 1px, rgb(247 246 241 / 0.07) 1px, transparent 1.5px) 0 0 / 22px 22px; }
.ab-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--pp-gold); }
.ab-hero-in { display: grid; gap: var(--s-4); max-width: 820px; }
.ab-kicker { margin: 0 !important; display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pp-gold); }
.ab-kicker::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--pp-gold); }
.ab-title { margin: 0 !important; font-family: var(--font-serif); font-weight: 600; font-size: clamp(36px, 6vw, 68px); line-height: 1.02; letter-spacing: -0.025em; color: var(--pp-text); text-wrap: balance; }
.ab-title span { color: #A9DDBC; }
.ab-lead { margin: 0 !important; max-width: 36em; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--pp-text-2); }
.ab-ar { margin: 0 !important; font-family: var(--font-ar); font-size: 22px; font-weight: 700; color: var(--pp-gold); text-align: left; }

.ab-h { margin: 0 0 var(--s-5) !important; font-family: var(--font-serif); font-size: clamp(26px, 3vw, 36px); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; color: var(--c-text); }
.ab-why { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-8); }
.ab-why .ab-h { margin-bottom: 0 !important; }
.ab-why-body { display: grid; gap: var(--s-4); }
.ab-why-body p { margin: 0 !important; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.6; color: var(--c-text); }
.ab-why-body p:first-child { color: var(--c-text-2); }

.ab-pts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.ab-pt { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-border); transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
.ab-pt-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--s-2); border-radius: 12px; background: var(--pp-bg); color: var(--pp-gold); }
.ab-pt-ic svg { width: 21px; height: 21px; }
.ab-pt-t { margin: 0 !important; font-family: var(--font-serif); font-size: 21px; font-weight: 600; color: var(--c-text); }
.ab-pt-x { margin: 0 !important; font-size: 14.5px; line-height: 1.55; color: var(--c-text-2); }
@media (hover: hover) and (pointer: fine) { .ab-pt:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px var(--c-brand), 0 18px 36px rgb(0 0 0 / 0.07); } }

.ab-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 var(--s-5); border-radius: var(--r-lg); background: var(--c-surface-2); box-shadow: inset 0 0 0 1px var(--c-border); }
.ab-stats > div { display: grid; gap: 4px; padding: var(--s-5) var(--s-6); }
.ab-stats > div + div { border-left: 1px solid var(--c-border); }
.ab-stats dt { order: 2; font-size: 13.5px; font-weight: 600; color: var(--c-text-2); }
.ab-stats dd { order: 1; margin: 0; font-family: var(--font-serif); font-size: clamp(36px, 4vw, 52px); font-weight: 600; line-height: 1; color: var(--c-brand); font-variant-numeric: lining-nums tabular-nums; }
.ab-now-x { margin: 0 !important; max-width: 40em; font-size: 17px; line-height: 1.6; color: var(--c-text); }

.ab-cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-6); border-radius: var(--r-lg); background: var(--pp-bg); color: var(--pp-text); }
.ab-cta-h { margin: 0 0 4px !important; font-family: var(--font-serif); font-size: 26px; font-weight: 600; color: var(--pp-text); }
.ab-cta-x { margin: 0 !important; font-size: 15px; color: var(--pp-text-2); }
.ab-cta-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); background: var(--pp-cta-bg); color: var(--pp-cta-text) !important; font-weight: 700; text-decoration: none; }
.ab-cta-btn svg { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) { .ab-cta-btn:hover { background: #E3C88E; } .ab-cta-btn:hover svg { transform: translateX(3px); } }
.ab-cta-btn:focus-visible { outline: 3px solid var(--pp-text); outline-offset: 3px; }

@media (max-width: 899px) {
  .ab { gap: 52px; }
  .ab-hero { padding: 56px 0 52px; }
  .ab-why { grid-template-columns: 1fr; gap: var(--s-3); }
  .ab-pts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ab-pts { grid-template-columns: 1fr; gap: var(--s-3); }
  .ab-pt { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); padding: var(--s-4); }
  .ab-pt-ic { grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0; }
  .ab-stats > div { padding: var(--s-4); }
  .ab-stats dt { font-size: 12px; }
  .ab-cta-in { padding: var(--s-5); }
}
.dr-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dr-tiles .dr-tile-l { font-size: 12.5px; }

/* ABOUT v2 (user, 2026-10-20): effort, a free pilot, built together */
.ab-h-light { color: var(--pp-text); }
.ab-made { position: relative; isolation: isolate; overflow: hidden; padding: 80px 0; background: var(--pp-bg); color: var(--pp-text); }
.ab-made::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(50% 80% at 0% 100%, rgb(143 209 168 / 0.12), transparent 60%), radial-gradient(circle at 1px 1px, rgb(247 246 241 / 0.07) 1px, transparent 1.5px) 0 0 / 22px 22px; }
.ab-made-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.ab-made-head { display: grid; gap: var(--s-3); position: sticky; top: 100px; }
.ab-made-head .ab-h { margin: 0 !important; }
.ab-made-x { margin: 0 !important; font-size: 17px; line-height: 1.6; color: var(--pp-text-2); }
.ab-mks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; position: relative; }
.ab-mks::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; border-left: 2px dashed rgb(215 182 117 / 0.5); }
.ab-mk { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); align-items: start; padding: 12px 0; }
.ab-mk-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--pp-bg); box-shadow: inset 0 0 0 2px var(--pp-gold), 0 0 0 5px var(--pp-bg); font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: var(--pp-gold); }
.ab-mk-b { display: grid; gap: 3px; padding: 4px 18px 14px; border-radius: var(--r-md); }
.ab-mk-b b { font-size: 17px; font-weight: 700; color: var(--pp-text); }
.ab-mk-b span { font-size: 15px; line-height: 1.5; color: var(--pp-text-2); }
.ab-stats-dark { grid-column: 1 / -1; margin: var(--s-4) 0 0; background: rgb(247 246 241 / 0.05); box-shadow: inset 0 0 0 1px rgb(247 246 241 / 0.14); }
.ab-stats-dark > div + div { border-left-color: rgb(247 246 241 / 0.14); }
.ab-stats-dark dt { color: var(--pp-text-2); }
.ab-stats-dark dd { color: var(--pp-gold); }

.ab-free-card { position: relative; display: grid; gap: var(--s-3); max-width: 900px; padding: 40px; border-radius: 24px; background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-border), 0 24px 50px rgb(0 0 0 / 0.06); }
.ab-free-card .ab-h { margin: 0 !important; }
.ab-badge { justify-self: start; padding: 5px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; background: var(--pp-cta-bg); color: var(--pp-cta-text); }
.ab-free-x { margin: 0 !important; max-width: 44em; font-size: 16.5px; line-height: 1.65; color: var(--c-text); }
.ab-free-x + .ab-free-x { color: var(--c-text-2); }
.ab-road { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; position: relative; }
.ab-road::before { content: ""; position: absolute; left: 7px; right: 33%; top: 7px; border-top: 2px solid var(--c-border); }
.ab-road li { position: relative; display: grid; gap: 4px; padding: 26px 16px 0 0; }
.ab-road li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--c-surface); box-shadow: inset 0 0 0 2px var(--c-border-strong, var(--c-border)); }
.ab-road li.is-now::before { background: var(--c-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-brand) 22%, transparent); }
.ab-road b { font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-2); }
.ab-road li.is-now b { color: var(--c-brand); }
.ab-road span { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--c-text); }

.ab-together { display: grid; gap: var(--s-5); }
.ab-tog-head { display: grid; gap: var(--s-2); max-width: 760px; }
.ab-tog-head .ab-h { margin: 0 !important; }
.ab-tog-x { margin: 0 !important; font-size: 17px; line-height: 1.6; color: var(--c-text-2); }
.ab-asks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.ab-ask { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-border); }
.ab-ask-you { font-size: 15.5px; font-weight: 700; line-height: 1.4; color: var(--c-text); }
.ab-ask-arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-surface-2); color: var(--c-gold-ink); }
.ab-ask-arrow svg { width: 16px; height: 16px; }
.ab-ask-us { font-size: 14.5px; line-height: 1.45; color: var(--c-brand); font-weight: 600; }

@media (max-width: 899px) {
  .ab-made { padding: 56px 0; }
  .ab-made-in { grid-template-columns: 1fr; gap: var(--s-5); }
  .ab-made-head { position: static; }
  .ab-asks { grid-template-columns: 1fr; }
  .ab-free-card { padding: var(--s-6) var(--s-5); }
}
@media (max-width: 560px) {
  .ab-ask { grid-template-columns: 1fr; gap: 6px; }
  .ab-ask-arrow { display: none; }
  .ab-road { grid-template-columns: 1fr; gap: var(--s-3); padding-left: 28px; }
  .ab-road::before { left: 7px; right: auto; top: 8px; bottom: 8px; border-top: 0; border-left: 2px solid var(--c-border); }
  .ab-road li { padding: 0; }
  .ab-road li::before { left: -28px; top: 2px; }
  .ab-stats-dark { grid-template-columns: 1fr 1fr 1fr; }
}

/* ABOUT v3 (user's own copy, 2026-10-20) */
.ab-why { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.ab-why-body p:first-child { color: var(--c-text); }
.ab-goal { position: relative; margin-top: var(--s-2) !important; padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: var(--c-surface-2); box-shadow: inset 4px 0 0 var(--c-gold);
  font-family: var(--font-serif); font-size: clamp(21px, 2.3vw, 28px) !important; font-weight: 600; line-height: 1.3 !important; color: var(--c-text) !important; }
.ab-goal span { display: block; margin-bottom: 4px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-ink); }
.ab-diff .ab-h { margin-bottom: var(--s-2) !important; }
.ab-sub { margin: 0 0 var(--s-5) !important; max-width: 40em; font-size: 17px; line-height: 1.6; color: var(--c-text-2); }
.ab-star { font-size: 20px; line-height: 1; }
.ab-mods { margin: var(--s-5) 0 0 !important; font-size: 16px; font-weight: 600; color: var(--c-brand); }
.ab-free-now { font-weight: 600; color: var(--c-text) !important; }
.ab-tog-note { margin: 0 !important; font-size: 15.5px; line-height: 1.6; color: var(--c-text-2); max-width: 44em; }
.ab-shape .ab-cta-in { align-items: flex-end; padding: var(--s-8) var(--s-8); }
.ab-cta-b { display: grid; gap: var(--s-2); max-width: 46em; }
.ab-cta-b .ab-cta-h { font-size: clamp(26px, 3vw, 34px); }
@media (max-width: 560px) {
  .ab-goal { padding: var(--s-4) var(--s-5); }
  .ab-shape .ab-cta-in { padding: var(--s-6) var(--s-5); align-items: flex-start; }
}

/* =====================================================================
   WRITTEN MASTERY v2 (2026-10-20): Back on written screens, and the self-contained quick-check card
   ===================================================================== */
.wq-prev { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--s-2); min-height: 40px; padding: 0 10px 0 4px; border: 0; background: none; font: 600 14px/1 var(--font-ui); color: var(--c-text-2); cursor: pointer; border-radius: 8px; }
.wq-prev svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .wq-prev:hover { color: var(--c-brand); } }
.wq-prev:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.wq-back { min-width: 52px; padding: 0 14px; }
.wq-back svg { width: 18px; height: 18px; }
.wq-actions:has(.wq-back) { grid-template-columns: auto auto minmax(0, 1fr); }
@media (min-width: 768px) { .wq-actions:has(.wq-back) { grid-template-columns: auto auto auto; } }

.check-q { display: grid; gap: var(--s-3); }
.ck-ctx { display: grid; gap: 4px; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--c-surface-2); box-shadow: inset 3px 0 0 var(--c-gold); }
.ck-ctx-k { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-2); }
.ck-ctx-q { font-family: var(--font-serif); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--c-text); }
.ck-ctx-part { font-size: 14px; line-height: 1.5; color: var(--c-text-2); }
.ck-ctx-part b { color: var(--c-brand); text-transform: capitalize; }
.ck-h { margin: var(--s-2) 0 0 !important; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-gold-ink); }
.ck-h:focus { outline: none; }
.ck-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.ck-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.ck-item:not(:has(.ck-n)) { grid-template-columns: minmax(0, 1fr); }
.ck-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; font-weight: 700; color: var(--c-gold-ink); box-shadow: inset 0 0 0 1.5px var(--c-gold); }
.ck-b { display: grid; gap: var(--s-2); min-width: 0; }
.ck-q { margin: 0 !important; font-size: clamp(19px, 2.4vw, 23px); font-weight: 650; line-height: 1.35; color: var(--c-text); }
.ck-ans { display: grid; gap: 6px; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-border); }
.ck-ans.is-got { box-shadow: inset 0 0 0 1.5px var(--c-got, #2F7A4F); }
.ck-ans.is-missed { box-shadow: inset 0 0 0 1.5px var(--c-gold); }
.ck-ans-k { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-2); }
.ck-ans-v { font-size: 16.5px; font-weight: 600; line-height: 1.45; color: var(--c-text); }
.ck-marks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: 4px; }
.ck-mk { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 0; border-radius: var(--r-md); font: 700 14.5px/1.2 var(--font-ui); cursor: pointer;
  background: var(--c-surface-2); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-border); transition: background-color 150ms var(--ease), color 150ms var(--ease); }
.ck-mk svg { width: 16px; height: 16px; }
.ck-mk.is-got[aria-pressed="true"] { background: var(--c-got, #2F7A4F); color: #fff; box-shadow: none; }
.ck-mk.is-missed[aria-pressed="true"] { background: var(--c-gold); color: #2A2111; box-shadow: none; }
.ck-mk:disabled { cursor: default; opacity: 0.85; }
.ck-mk:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.ck-tip { margin: 0 0 var(--s-2) !important; font-size: 13.5px; line-height: 1.5; color: var(--c-text-2); }
.ck-tip b { color: var(--c-text); }

/* =====================================================================
   RESULTS v3 (user, 2026-10-20: "the percentage and the two circles are confusing").
   A plain headline ("3 of 4 right on the first try") over a map of the set: one tile per question, in order,
   coloured by how it went, with a legend that names every colour. Tiles fill in one by one, once.
   ===================================================================== */
.rq { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: none !important; }
.rq > * { grid-area: auto !important; }
.rq-viz { display: grid; gap: var(--s-4); }
.rq-head { display: grid; gap: 2px; }
.rq-big { margin: 0 !important; display: flex; align-items: baseline; gap: 6px; font-family: var(--font-serif); font-weight: 600; line-height: 1; color: var(--pp-text); font-variant-numeric: lining-nums tabular-nums; }
.rq-n { font-size: 64px; letter-spacing: -0.03em; }
.rq-of { font-size: 30px; color: var(--pp-text-2); }
.rx-perfect .rq-n { color: #F1DDAE; }
.rq-l { margin: 4px 0 0 !important; font-size: 17px; font-weight: 700; color: var(--pp-text); }
.rq-sub { margin: 0 !important; font-size: 13.5px; color: var(--pp-text-2); }

.rq-map { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rq-map.is-few { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); max-width: 460px; }
.rq-map.is-mid { grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); }
.rq-map.is-many { grid-template-columns: repeat(auto-fill, minmax(22px, 1fr)); gap: 4px; }
.rq-t { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 9px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rq-map.is-few .rq-t { border-radius: 12px; font-size: 16px; }
.rq-map.is-many .rq-t { border-radius: 6px; }
.rq-map.is-many .rq-t span { display: none; }
.rq-t.is-first { background: #8FD1A8; color: #10301F; }
.rq-t.is-more { background: var(--pp-gold); color: #2A2111; }
.rq-t.is-skim { background: rgb(247 246 241 / 0.16); color: var(--pp-text); box-shadow: inset 0 0 0 1.5px rgb(247 246 241 / 0.5); }
.rq-t.is-left { background: transparent; color: rgb(247 246 241 / 0.45); box-shadow: inset 0 0 0 1.5px rgb(247 246 241 / 0.22); }
.rq-t.is-left::after { content: ""; position: absolute; inset: 4px; border-radius: inherit; border: 1.5px dashed rgb(247 246 241 / 0.12); }
.rx-low .rq-t.is-first { background: #A3BDB0; }

.rq-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rq-lg { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--pp-text-2); }
.rq-lg i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.rq-lg b { font-size: 15px; color: var(--pp-text); font-variant-numeric: tabular-nums; }
.rq-lg.is-first i { background: #8FD1A8; } .rq-lg.is-more i { background: var(--pp-gold); }
.rq-lg.is-skim i { background: rgb(247 246 241 / 0.16); box-shadow: inset 0 0 0 1.5px rgb(247 246 241 / 0.5); }
.rq-lg.is-left i { box-shadow: inset 0 0 0 1.5px rgb(247 246 241 / 0.35); }

/* the reveal (first render only): the headline rises, tiles fill in one by one, the legend follows */
html.motion .rq:not(.is-shown) .rq-head { animation: rx-rise 420ms var(--m-ease) 120ms backwards; }
html.motion .rq:not(.is-shown) .rq-t { animation: rq-pop 300ms cubic-bezier(.2,.9,.3,1.25) backwards; animation-delay: calc(260ms + var(--i) * 26ms); }
html.motion .rq:not(.is-shown) .rq-t.is-left { animation-name: rx-fade; animation-duration: 400ms; }
html.motion .rq:not(.is-shown) .rq-legend { animation: rx-fade 360ms var(--m-ease) 900ms backwards; }
html.motion .rq:not(.is-shown) .rx-msg { animation: rx-rise 420ms var(--m-ease) 650ms backwards; }
/* perfect and excellent: one gold shimmer runs across the tiles; nothing answered: the empty tiles breathe once */
html.motion .rx-perfect:not(.is-shown) .rq-t.is-first, html.motion .rx-excellent:not(.is-shown) .rq-t.is-first {
  animation: rq-pop 300ms cubic-bezier(.2,.9,.3,1.25) backwards, rq-shine 700ms ease-out both; animation-delay: calc(260ms + var(--i) * 26ms), calc(1250ms + var(--i) * 35ms); }
html.motion .rx-empty:not(.is-shown) .rq-t.is-left { animation: rq-breathe 1400ms ease-in-out calc(300ms + var(--i) * 20ms) 1; }
@keyframes rq-pop { from { opacity: 0; transform: scale(0.55); } }
@keyframes rq-shine { 40% { background: #F1DDAE; box-shadow: 0 0 0 3px rgb(241 221 174 / 0.35); transform: translateY(-2px); } }
@keyframes rq-breathe { 50% { box-shadow: inset 0 0 0 1.5px rgb(247 246 241 / 0.5); } }

@media (min-width: 720px) {
  .rq { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) !important; column-gap: var(--s-8); align-items: center; }
  .rq > .rs-top { grid-column: 1 / -1 !important; }
  .rq .rx-msg { text-align: left; justify-items: start; }
  .rq .rx-msg .rs-ar { text-align: left; }
  .rq-n { font-size: 80px; }
}
@media (max-width: 719px) {
  .rq-viz { gap: var(--s-3); }
  .rq-n { font-size: 56px; }
  .rq-of { font-size: 26px; }
  .rq .rx-msg { text-align: left; justify-items: start; }
  .rq .rx-msg .rs-ar { text-align: left; }
}

/* =====================================================================
   RESULTS v4 — SCORE REPORT (user, 2026-10-20): like a question-bank score report.
   Card: score % + caption + meter + verdict | stats (answered, first try, more tries, time). Then by lecture
   (bars) and question by question (rows with result + time). Played in once; nothing replays on re-render.
   ===================================================================== */
.rp { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: none !important; }
.rp > * { grid-area: auto !important; }
.rp-main { display: grid; gap: var(--s-4); }
.rp-score { display: grid; gap: 4px; justify-items: start; }
.rp-big { margin: 0 !important; display: flex; align-items: baseline; font-family: var(--font-serif); font-weight: 600; font-size: 72px; line-height: 0.95; letter-spacing: -0.03em; color: var(--pp-text); font-variant-numeric: lining-nums tabular-nums; }
.rp-big.is-none { color: var(--pp-text-2); }
.rp-pct { font-size: 0.45em; margin-left: 2px; color: var(--pp-text-2); letter-spacing: 0; }
.rx-perfect .rp-big { color: #F1DDAE; }
.rp-cap { margin: 2px 0 0 !important; font-size: 14.5px; line-height: 1.4; color: var(--pp-text-2); }
.rp-meter { position: relative; width: 100%; max-width: 360px; height: 8px; margin-top: 8px; border-radius: 8px; background: rgb(247 246 241 / 0.12); overflow: hidden; }
.rp-meter span { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); border-radius: inherit; background: #8FD1A8; }
.rx-perfect .rp-meter span, .rx-excellent .rp-meter span { background: linear-gradient(90deg, #8FD1A8, var(--pp-gold)); }
.rx-low .rp-meter span { background: #A3BDB0; }
.rp-verdict { margin-top: 8px; padding: 4px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; background: rgb(247 246 241 / 0.1); color: var(--pp-text); }
.rx-perfect .rp-verdict, .rx-excellent .rp-verdict { background: var(--pp-gold); color: #2A2111; }

.rp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; border-radius: var(--r-md); overflow: hidden; background: rgb(247 246 241 / 0.12); }
.rp-stat { display: grid; gap: 2px; padding: 12px 14px; background: var(--pp-bg); }
.rp-stat dd { order: 1; margin: 0; font-family: var(--font-serif); font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--pp-text); font-variant-numeric: tabular-nums; }
.rp-stat dt { order: 2; font-size: 12.5px; color: var(--pp-text-2); }
.rp-of { font-size: 0.6em; color: var(--pp-text-2); }
.rp-stat.is-first dd { color: #A9DDBC; } .rp-stat.is-more dd { color: var(--pp-gold); }

.rp-sec { display: grid; gap: var(--s-2); }
.rp-lecs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rp-lec { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; align-items: center; gap: var(--s-3); }
.rp-lec-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--c-text-2); }
.rp-lec-t b { color: var(--c-text); }
.rp-bar { position: relative; height: 8px; border-radius: 8px; background: var(--c-surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--c-border); }
.rp-bar span { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); background: var(--c-brand); border-radius: inherit; }
.rp-lec-n { font-size: 13.5px; font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; }
.rp-lec-n i { font-style: normal; font-weight: 500; color: var(--c-text-2); }

.rp-qs { list-style: none; margin: 0; padding: 0; display: grid; border-radius: var(--r-md); overflow: hidden; box-shadow: inset 0 0 0 1px var(--c-border); }
.rp-q { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: 12px 14px; background: var(--c-surface); }
.rp-q + .rp-q { border-top: 1px solid var(--c-border); }
.rp-q-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-q.is-first .rp-q-n { background: color-mix(in srgb, var(--c-brand) 16%, transparent); color: var(--c-brand); }
.rp-q.is-more .rp-q-n { background: color-mix(in srgb, var(--c-gold) 22%, transparent); color: var(--c-gold-ink); }
.rp-q.is-skim .rp-q-n { box-shadow: inset 0 0 0 1px var(--c-border); color: var(--c-text-2); }
.rp-q-b { display: grid; gap: 2px; min-width: 0; }
.rp-q-t { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--c-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rp-q-m { font-size: 12.5px; color: var(--c-text-2); }
.rp-q-r { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 13px; font-weight: 700; }
.rp-q-r svg { width: 15px; height: 15px; }
.rp-q.is-first .rp-q-r { color: var(--c-brand); } .rp-q.is-more .rp-q-r { color: var(--c-gold-ink); } .rp-q.is-skim .rp-q-r { color: var(--c-text-2); }
.rp-left { margin: 0 !important; font-size: 13.5px; color: var(--c-text-2); }

html.motion .rp:not(.is-shown) .rp-score { animation: rx-rise 420ms var(--m-ease) 100ms backwards; }
html.motion .rp:not(.is-shown) .rp-meter span { animation: rp-grow 900ms cubic-bezier(.22,.8,.24,1) 300ms backwards; }
html.motion .rp:not(.is-shown) .rp-verdict { animation: rx-fade 300ms var(--m-ease) 1000ms backwards; }
html.motion .rp:not(.is-shown) .rp-stat { animation: rx-rise 360ms var(--m-ease) backwards; }
html.motion .rp:not(.is-shown) .rp-stat:nth-child(1) { animation-delay: 300ms; } html.motion .rp:not(.is-shown) .rp-stat:nth-child(2) { animation-delay: 380ms; }
html.motion .rp:not(.is-shown) .rp-stat:nth-child(3) { animation-delay: 460ms; } html.motion .rp:not(.is-shown) .rp-stat:nth-child(4) { animation-delay: 540ms; }
html.motion .rp:not(.is-shown) .rx-msg { animation: rx-rise 420ms var(--m-ease) 600ms backwards; }
html.motion .rs:has(.rp:not(.is-shown)) .rp-bar span { animation: rp-grow 800ms cubic-bezier(.22,.8,.24,1) 700ms backwards; }
@keyframes rp-grow { from { width: 0; } }

@media (min-width: 720px) {
  .rp-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s-8); }
  .rp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-big { font-size: 96px; }
  .rp .rx-msg { text-align: left; justify-items: start; padding-top: var(--s-4); border-top: 1px solid rgb(247 246 241 / 0.12); }
  .rp .rx-msg .rs-ar { text-align: left; }
}
@media (max-width: 719px) {
  .rp .rx-msg { text-align: left; justify-items: start; }
  .rp .rx-msg .rs-ar { text-align: left; }
  .rp-big { font-size: 64px; }
  .rp-stat { padding: 10px 12px; } .rp-stat dd { font-size: 22px; }
  .rp-lec { grid-template-columns: minmax(0, 1fr) 70px auto; }
  .rp-q { padding: 10px 12px; gap: var(--s-2); }
  .rp-q-r span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
}

/* =====================================================================
   MCQ FEEDBACK v2 (user, 2026-10-20: "responsive red when wrong, responsive green when right, for dopamine").
   Wrong: the option flashes solid red and shakes, the card's edge flashes red, then it settles as a red, struck-out row.
   Right: the option pops solid green with a ripple, a tick draws in and sparks fly out; the card glows green.
   All under 0.6 s (the right answer still moves on at 0.65 s). Reduced motion: colours only, no movement.
   ===================================================================== */
:root { --c-wrong: #D63B3B; --c-wrong-bg: #FCE8E8; --c-right: #1E9E5F; --c-right-bg: #E2F5EA; }
:root[data-theme="dark"] { --c-wrong: #FF6B6B; --c-wrong-bg: #3A1B1D; --c-right: #4FD08F; --c-right-bg: #163526; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-wrong: #FF6B6B; --c-wrong-bg: #3A1B1D; --c-right: #4FD08F; --c-right-bg: #163526; } }

/* settled states */
.v2 .opt.gopt.is-out { background: var(--c-wrong-bg); border-color: color-mix(in srgb, var(--c-wrong) 45%, transparent); color: var(--c-wrong); opacity: 1; }
.v2 .opt.gopt.is-out .gopt-text { text-decoration-color: var(--c-wrong); text-decoration-thickness: 2px; }
.v2 .opt.gopt.is-out .gopt-state { color: var(--c-wrong); }
.v2 .opt.gopt.is-out .gopt-note { color: var(--c-text-2); }
.v2 .opt.gopt.is-correct { position: relative; background: var(--c-right); border-color: var(--c-right); color: #fff; box-shadow: 0 10px 28px color-mix(in srgb, var(--c-right) 35%, transparent); }
:root[data-theme="dark"] .v2 .opt.gopt.is-correct { color: #0B2618; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v2 .opt.gopt.is-correct { color: #0B2618; } }
.v2 .elim-note { color: var(--c-wrong); }

/* wrong: flash solid red, shake, settle */
html.motion.v2 .opt.gopt.is-out.pop { animation: fx-wrong 460ms cubic-bezier(.36,.07,.19,.97) both; }
@keyframes fx-wrong {
  0% { background: var(--c-wrong); color: var(--c-on-wrong); border-color: var(--c-wrong); transform: translateX(0) scale(1.01); }
  15% { transform: translateX(-9px); } 30% { transform: translateX(8px); } 45% { transform: translateX(-6px); }
  60% { transform: translateX(4px); background: var(--c-wrong); color: var(--c-on-wrong); } 75% { transform: translateX(-2px); }
  100% { transform: none; }
}
html.motion .qcard.fx-wrong { animation: fx-card-wrong 520ms ease-out; }
@keyframes fx-card-wrong { 0%, 30% { box-shadow: 0 0 0 3px var(--c-wrong), 0 0 26px color-mix(in srgb, var(--c-wrong) 35%, transparent); border-color: var(--c-wrong); } }
html.motion.v2 .elim-note { animation: rx-fade 220ms ease-out; }

/* right: pop, ripple, tick, sparks */
html.motion.v2 .opt.gopt.is-correct.fx-hit { animation: fx-right 420ms cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes fx-right { 0% { transform: scale(0.97); background: var(--c-right-bg); color: var(--c-right); } 45% { transform: scale(1.045); } 100% { transform: none; } }
html.motion.v2 .opt.gopt.is-correct.fx-hit::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-right) 60%, transparent); animation: fx-ripple 620ms ease-out 80ms both; }
@keyframes fx-ripple { to { box-shadow: 0 0 0 18px transparent; } }
.fx-tick { position: absolute; left: 16px; top: 50%; width: 26px; height: 26px; margin-top: -13px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 0.22); }
.fx-tick svg { width: 16px; height: 16px; stroke-dasharray: 24; stroke-dashoffset: 0; }
html.motion .fx-tick { animation: fx-tick-in 300ms cubic-bezier(.2,.9,.3,1.4) 60ms both; }
html.motion .fx-tick svg { animation: fx-draw 320ms ease-out 140ms both; }
@keyframes fx-tick-in { from { transform: scale(0); } }
@keyframes fx-draw { from { stroke-dashoffset: 24; } }
.fx-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.fx-burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-right); opacity: 0; }
.fx-burst i:nth-child(3n) { background: #F2C14E; width: 6px; height: 6px; }
.fx-burst i:nth-child(3n+1) { border-radius: 2px; }
html.motion .fx-burst i { animation: fx-spark 560ms cubic-bezier(.15,.7,.3,1) both; animation-delay: calc(40ms + var(--k) * 8ms); }
@keyframes fx-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-70px) scale(0.4); } }
html.motion .qcard.fx-right { animation: fx-card-right 560ms ease-out; }
@keyframes fx-card-right { 0%, 35% { box-shadow: 0 0 0 3px var(--c-right), 0 0 30px color-mix(in srgb, var(--c-right) 40%, transparent); border-color: var(--c-right); } }
.v2 .opt.gopt.is-correct .gopt-text { position: relative; }
@media (prefers-reduced-motion: reduce) { .fx-burst { display: none; } }
.v2 .opt.gopt.is-correct.fx-hit, .v2 .opt.gopt.is-correct { padding-left: 52px; padding-right: 52px; }


/* =====================================================================
   ALIVE TAPS + AUTO-REVEAL (user, 2026-10-20)
   ===================================================================== */
/* every press sinks a little and a soft ripple spreads from the finger */
.tap-host { position: relative; }
.tap-fx { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.tap-fx span { position: absolute; border-radius: 50%; background: currentColor; opacity: 0.16; transform: scale(0); animation: tap-ripple 560ms cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes tap-ripple { to { transform: scale(1); opacity: 0; } }
html.motion .is-pressed { transform: scale(0.965) !important; transition: transform 80ms ease-out !important; }
html.motion :is(button, .btn, a.hp-cov, a.type-card, a.lec-row, a.subject-card, a.hdr-btn, a.dr-tile, a.dr-mod, a.subj-chip, a.ab-cta-btn, a.hw-fb, a.hp-path, a.past-hero-cta, .menu-link) { -webkit-tap-highlight-color: transparent; }
html.motion :is(a.hp-cov, a.type-card, a.lec-row, a.subject-card).is-pressed { transform: scale(0.98) !important; }

/* the Arabic explanation, offered at the top of the answer */
.ans-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.ans-head .q-h { margin: 0 !important; }
.ar-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  font: 700 15px/1 var(--font-ar); background: var(--c-gold); color: #2A2111; box-shadow: 0 6px 16px color-mix(in srgb, var(--c-gold) 30%, transparent); transition: transform 120ms var(--ease), filter 120ms var(--ease); }
.ar-pill.is-on { background: transparent; color: var(--c-gold-ink); box-shadow: inset 0 0 0 1.5px var(--c-gold); }
@media (hover: hover) and (pointer: fine) { .ar-pill:hover { filter: brightness(1.06); } }
.ar-pill:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.ans .ar-panel { margin: var(--s-3) 0 var(--s-3); }
html.motion .ar-panel.enter { animation: ar-open 320ms cubic-bezier(.2,.8,.3,1) both; }
@keyframes ar-open { from { opacity: 0; transform: translateY(-6px); clip-path: inset(0 0 100% 0 round 14px); } to { clip-path: inset(0 0 0 0 round 14px); } }
/* the hint drops in under the helpers */
html.motion .mcq-hint { animation: ar-open 300ms cubic-bezier(.2,.8,.3,1) both; }

/* Arabic explanation: a full-width bar between the instructions and the points (user, 2026-10-20: the right-hand pill felt off) */
.ar-bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); width: 100%; margin: var(--s-3) 0 var(--s-3); padding: 12px 16px; border: 0; border-radius: var(--r-md); cursor: pointer; text-align: left;
  background: color-mix(in srgb, var(--c-gold) 14%, var(--c-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-gold) 45%, transparent); color: var(--c-text); transition: background-color 150ms var(--ease); }
.ar-bar-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--c-gold); color: #2A2111; }
.ar-bar-ic svg { width: 18px; height: 18px; }
.ar-bar-t { font: 700 17px/1.2 var(--font-ar); color: var(--c-text); }
.ar-bar-s { font-size: 13px; color: var(--c-text-2); justify-self: start; }
.ar-bar-chev svg { width: 18px; height: 18px; color: var(--c-gold-ink); transition: transform 200ms var(--ease); }
.ar-bar.is-on { border-radius: var(--r-md) var(--r-md) 0 0; margin-bottom: 0; }
.ar-bar.is-on .ar-bar-chev svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .ar-bar:hover { background: color-mix(in srgb, var(--c-gold) 22%, var(--c-surface)); } }
.ar-bar:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.ans .ar-bar.is-on + .ar-panel { margin: 0 0 var(--s-3); border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-gold) 45%, transparent); }
@media (max-width: 480px) { .ar-bar { grid-template-columns: auto minmax(0, 1fr) auto; } .ar-bar-s { display: none; } }

/* =====================================================================
   WRITTEN MARKS v2 (user, 2026-10-20: "a lil more responsive but NOT as much as the MCQ; keep it calm").
   ✓: the button fills green with a small pop and its tick draws in; a green edge slides down the row, the row warms.
   ✗: the button fills red with a small pop; the row tints soft red with a 3 px nudge (no shake, no sparks, no buzz).
   ~250 ms; tapping again just replays it (nothing stacks up).
   ===================================================================== */
.aps .ap { position: relative; }
.aps .ap.ap-got { background: color-mix(in srgb, var(--c-right) 11%, var(--c-surface)); box-shadow: none; }
.aps .ap.ap-missed { background: color-mix(in srgb, var(--c-wrong) 9%, var(--c-surface)); box-shadow: none; }
.aps .ap::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: transparent; transform-origin: 50% 0; }
.aps .ap.ap-got::before { background: var(--c-right); }
.aps .ap.ap-missed::before { background: var(--c-wrong); }
.aps .ap.ap-got .ap-num { background: var(--c-right); color: #fff; }
.aps .ap.ap-missed .ap-num { background: var(--c-wrong); color: #fff; }
.mk-got[aria-pressed="true"] { background: var(--c-right); border-color: var(--c-right); color: #fff; }
.mk-missed[aria-pressed="true"] { background: var(--c-wrong); border-color: var(--c-wrong); color: #fff; }
:root[data-theme="dark"] :is(.mk-got, .mk-missed)[aria-pressed="true"], :root[data-theme="dark"] .aps .ap:is(.ap-got, .ap-missed) .ap-num { color: #0F1512; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.mk-got, .mk-missed)[aria-pressed="true"], :root:not([data-theme="light"]) .aps .ap:is(.ap-got, .ap-missed) .ap-num { color: #0F1512; } }

html.motion .aps .ap.just.ap-got { animation: wm-got 260ms ease-out; }
html.motion .aps .ap.just.ap-missed { animation: wm-miss 260ms ease-out; }
html.motion .aps .ap.just::before { animation: wm-edge 240ms cubic-bezier(.2,.8,.3,1); }
html.motion .aps .ap.just .mk[aria-pressed="true"] { animation: wm-pop 240ms cubic-bezier(.2,.9,.3,1.35); }
html.motion .aps .ap.just .mk-got[aria-pressed="true"] svg { stroke-dasharray: 24; animation: fx-draw 260ms ease-out 40ms both; }
@keyframes wm-got { from { background: var(--c-surface); } }
@keyframes wm-miss { from { background: var(--c-surface); transform: translateX(0); } 35% { transform: translateX(3px); } to { transform: none; } }
@keyframes wm-edge { from { transform: scaleY(0); } }
@keyframes wm-pop { 0% { transform: scale(0.85); } 55% { transform: scale(1.12); } 100% { transform: none; } }

/* Hint → Why (user, 2026-10-20: the swap was easy to miss). The hint card turns into the Why card in place. */
.explain.from-hint { position: relative; border-color: var(--c-right) !important; box-shadow: inset 4px 0 0 var(--c-right); }
.why-swap { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--s-2) !important; font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.why-swap svg { width: 14px; height: 14px; }
.why-was, .why-now { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill); }
.why-was { color: var(--c-gold-ink); background: color-mix(in srgb, var(--c-gold) 16%, transparent); text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: 0.75; }
.why-arrow { display: inline-flex; color: var(--c-text-2); }
.why-now { color: var(--c-right); background: color-mix(in srgb, var(--c-right) 14%, transparent); }
html.motion .explain.is-morph { animation: why-morph 600ms ease-out; }
html.motion .explain.is-morph .why-was { animation: why-was 420ms ease-out both; }
html.motion .explain.is-morph .why-arrow { animation: rx-fade 200ms ease-out 200ms both; }
html.motion .explain.is-morph .why-now { animation: why-now 360ms cubic-bezier(.2,.9,.3,1.3) 260ms both; }
html.motion .explain.is-morph > p:not(.why-swap) { animation: rx-fade 320ms ease-out 200ms both; }
@keyframes why-morph { 0% { border-color: var(--c-gold); box-shadow: inset 4px 0 0 var(--c-gold); } 100% { } }
@keyframes why-was { from { text-decoration-color: transparent; opacity: 1; } }
@keyframes why-now { from { opacity: 0; transform: scale(0.7); } }

/* The Why card stands out every time an answer is done (user, 2026-10-20: "so people realise there is a why") */
.explain.is-why { position: relative; border: 1px solid color-mix(in srgb, var(--c-right) 45%, var(--c-border)); background: color-mix(in srgb, var(--c-right) 7%, var(--c-surface)); box-shadow: inset 4px 0 0 var(--c-right); }
.explain.is-why .why-now { font-size: 12.5px; }
html.motion .explain.is-fresh { animation: why-in 520ms cubic-bezier(.2,.8,.3,1) both; }
html.motion .explain.is-fresh .why-now { animation: why-now 360ms cubic-bezier(.2,.9,.3,1.3) 160ms both; }
@keyframes why-in { 0% { opacity: 0; transform: translateY(10px); } 60% { opacity: 1; box-shadow: inset 4px 0 0 var(--c-right), 0 0 0 4px color-mix(in srgb, var(--c-right) 25%, transparent); } 100% { transform: none; } }

/* the question card anchors its own small overlays */
.qcard { position: relative; }
.pos-left { color: var(--c-text-2); font-weight: 500; }
@media (max-width: 380px) { .pos-left { display: none; } }

/* the gliding cards never widen the page */
.study-main { overflow-x: clip; }
html.in-session body { overflow-x: clip; }


/* RIGHT ANSWER v3 (user, 2026-10-21: on iPhone the green burst "zoomed" the page). Everything now stays inside
   the option's own box: no scale-up, the ripple runs inside, sparks are clipped, and the page can never widen. */
html.in-session, html.in-session body { overflow-x: clip; max-width: 100%; }
@supports not (overflow: clip) { html.in-session, html.in-session body { overflow-x: hidden; } }
.v2 .opt.gopt { overflow: hidden; }
html.motion.v2 .opt.gopt.is-correct.fx-hit { animation: fx-right2 380ms ease-out both; }
@keyframes fx-right2 { 0% { background: var(--c-right-bg); color: var(--c-right); } 35% { filter: brightness(1.12); } 100% { filter: none; } }
html.motion.v2 .opt.gopt.is-correct.fx-hit::after { inset: 0; border-radius: inherit; box-shadow: none; background: radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.35), transparent 60%); animation: fx-ripple-in 520ms ease-out both; }
@keyframes fx-ripple-in { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.fx-burst { display: none; }
html.motion .qcard.fx-right { animation: fx-card-right 520ms ease-out; }

/* iPhone zoom, part 2 (user, 2026-10-21): two quick taps on options (a wrong pick, then the next) were read by
   iOS as a double-tap and zoomed the page in. manipulation turns off double-tap zoom only; pinch zoom still works.
   Softer glow on the right answer (user: "reduce the glow a lil"). */
html, button, a, .opt, .btn { touch-action: manipulation; }
/* the real "zoom" (user screenshot, 2026-10-21): the one-line "Found it · tap to stay and read why" was wider than
   a phone and pushed the whole column past the screen edge as the answer appeared. It may now wrap and shrink. */
.nav-auto { min-width: 0; padding: 6px 12px; }
.nav-auto-t { white-space: normal; text-align: center; line-height: 1.25; min-width: 0; }
.nav-auto-t svg { flex: none; }
@media (max-width: 420px) { .nav-auto, .nav-auto.is-stay, .nav-auto.is-wrong { font-size: 14px; } }
.v2 .opt.gopt.is-correct { box-shadow: 0 4px 12px color-mix(in srgb, var(--c-right) 18%, transparent); }
@keyframes fx-card-right { 0%, 35% { box-shadow: 0 0 0 2px var(--c-right), 0 0 14px color-mix(in srgb, var(--c-right) 22%, transparent); border-color: var(--c-right); } }

/* WHAT MAKES THIS DIFFERENT (home, user 2026-10-21, v4): its own FULL-SCREEN section straight after the deep-green
   "How it works" band, on the page background (the colour change marks the boundary). The message leads; the research
   is one small picture (two bars) plus linked citations, never the main content. Desktop: message | proof side by side. */
.hd { position: relative; min-height: 100svh; display: grid; align-items: center; padding: 96px 0 56px; background: var(--c-bg); }
.hd-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hd-msg { display: grid; gap: 18px; justify-items: start; }
.hd-eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold-ink); }
.hd-eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--c-gold); }
.hd-title { margin: 0 !important; font-family: var(--font-serif); font-weight: 600; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -0.02em; color: var(--c-text); text-wrap: balance; }
.hd-title span { color: var(--c-brand); }
.hd-title:focus { outline: none; }
#diff-h { scroll-margin-top: 96px; }
.hd-lead { margin: 0; max-width: 30em; font-size: 18px; line-height: 1.6; color: var(--c-text-2); }
.hd-ar { margin: 0; font-family: Cairo, var(--font-sans); font-size: 19px; font-weight: 600; line-height: 1.6; color: var(--c-gold-ink); }
.hd-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; margin-top: 4px; border-radius: var(--r-pill); background: var(--c-brand); color: var(--c-surface) !important; font-weight: 700; font-size: 15.5px; text-decoration: none; transition: transform 160ms ease, background-color 160ms ease; }
.hd-cta svg { width: 18px; height: 18px; }
.hd-cta:hover { transform: translateY(-1px); background: var(--c-brand-hover); }
.hd-cta:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }
/* the proof: one card, one picture */
.hd-proof { margin: 0; display: grid; gap: 14px; padding: 24px; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-border); }
.hd-proof-h { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-2); }
.hd-bars { display: grid; gap: 10px; }
.hd-bar { display: grid; grid-template-columns: 92px minmax(0, 1fr) 48px; align-items: center; gap: 12px; }
.hd-bar-l { font-size: 14.5px; font-weight: 600; color: var(--c-text-2); }
.hd-bar-t { height: 14px; border-radius: 999px; background: var(--c-surface-2); overflow: hidden; }
.hd-bar-f { display: block; height: 100%; width: calc(var(--v) * 1%); border-radius: inherit; background: var(--c-border-strong); }
.hd-bar-n { font-family: var(--font-serif); font-size: 22px; font-weight: 600; text-align: right; color: var(--c-text-2); }
.hd-bar.is-on .hd-bar-l { color: var(--c-text); }
.hd-bar.is-on .hd-bar-f { background: var(--c-brand); }
.hd-bar.is-on .hd-bar-n { color: var(--c-brand); }
.hd-proof-x, .hd-more { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--c-text-2); }
.hd-more { padding-top: 12px; border-top: 1px solid var(--c-border); font-size: 12.5px; }
.hd-proof a { color: var(--c-gold-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.hd-proof a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hd-proof a:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; border-radius: 3px; }
@media (max-width: 860px) {
  .hd { padding: 84px 0 28px; }
  .hd-inner { grid-template-columns: 1fr; gap: 24px; }
  .hd-msg { gap: 12px; }
  .hd-title { font-size: 32px; }
  .hd-lead { font-size: 16px; }
  .hd-ar { font-size: 16.5px; }
  .hd-cta { order: 9; }
  .hd-proof { padding: 18px; gap: 10px; }
  .hd-bar { grid-template-columns: 84px minmax(0, 1fr) 42px; gap: 10px; }
  .hd-bar-n { font-size: 19px; }
}
/* short phones (375 × 667): keep the whole section on one screen */
@media (max-width: 860px) and (max-height: 720px) {
  .hd { padding: 72px 0 10px; }
  .hd-inner { gap: 16px; }
  .hd-msg { gap: 8px; }
  .hd-title { font-size: 28px; }
  .hd-lead { font-size: 15px; line-height: 1.5; }
  .hd-ar { font-size: 15.5px; line-height: 1.5; }
  .hd-cta { min-height: 44px; }
  .hd-proof { padding: 14px 16px; gap: 8px; }
  .hd-proof-x { font-size: 12.5px; }
  .hd-more { padding-top: 8px; font-size: 12px; }
}.hd-ar { text-wrap: balance; max-width: 26em; }
/* proof card v2 (user: "I'd be confused at what I'm looking at"): a plain headline says the finding, one sentence sets
   up the experiment, then each bar reads "who · how much they remembered" with the bar underneath */
.hd-proof-t { margin: -6px 0 0; font-family: var(--font-serif); font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--c-text); }
.hd-bars { gap: 14px; margin-top: 2px; }
.hd-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 6px; column-gap: 12px; }
.hd-bar-l { grid-column: 1; grid-row: 1; font-size: 15px; }
.hd-bar-n { grid-column: 2; grid-row: 1; display: inline-flex; align-items: baseline; gap: 6px; font-size: 22px; line-height: 1; }
.hd-bar-n small { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--c-text-2); }
.hd-bar-t { grid-column: 1 / -1; grid-row: 2; height: 12px; }
.hd-src { margin: 0; font-size: 13px; color: var(--c-text-2); }
@media (max-width: 860px) {
  .hd-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .hd-proof-t { font-size: 20px; }
  .hd-bar-n { font-size: 19px; }
}
@media (max-width: 860px) and (max-height: 720px) {
  .hd-proof-t { font-size: 18px; }
  .hd-proof-x { font-size: 12.5px; line-height: 1.45; }
  .hd-bars { gap: 8px; }
  .hd-bar { row-gap: 4px; }
  .hd-bar-t { height: 10px; }
}
@media (max-width: 860px) and (max-height: 720px) { .hd-proof { gap: 6px; } }
/* the second study is one link, whole sentence tappable (user 2026-10-21) */
a.hd-more { display: block; color: var(--c-text-2) !important; font-weight: 400 !important; white-space: normal !important; text-decoration: none; }
a.hd-more b { color: var(--c-gold-ink); font-weight: 600; white-space: nowrap; }
a.hd-more:hover span { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) and (max-height: 720px) { .hd-inner { gap: 12px; } .hd-msg { gap: 6px; } .hd-title { font-size: 26px; } .hd-cta { min-height: 42px; margin-top: 2px; } .hd-proof { padding: 12px 14px; } }

@media (max-width: 480px) { .nav-row.has-skip .nav-back { padding: 0; width: 54px; min-width: 54px; justify-content: center; } .nav-row.has-skip .nav-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .nav-row.has-skip .nav-auto-t { font-size: 14px; } }

/* QUESTION → QUESTION v2 (user, 2026-10-21: "stiff, the next one pops in suddenly"). One continuous motion:
   the answered question glides left and fades (220 ms, eases in), the page returns to the top while nothing is
   visible, then the next question glides in from the right and settles (340 ms, long soft ease-out); its options
   follow a beat later, one after another. */
@keyframes q-leave2 { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-44px); } }
@keyframes q-enter2 { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@keyframes opt-enter2 { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
html.motion .study-main > .study-q.is-leaving { animation: q-leave2 220ms cubic-bezier(.55,0,.75,.4) both; pointer-events: none; }
html.motion .step-in.step-fast > .study-q { animation: q-enter2 340ms cubic-bezier(.16,1,.3,1) both; animation-duration: 340ms; }
html.motion .step-in.step-fast .opts > li { animation: opt-enter2 300ms cubic-bezier(.16,1,.3,1) backwards; animation-duration: 300ms; animation-delay: 90ms; }
html.motion .step-in.step-fast .opts > li:nth-child(2) { animation-delay: 130ms; }
html.motion .step-in.step-fast .opts > li:nth-child(3) { animation-delay: 170ms; }
html.motion .step-in.step-fast .opts > li:nth-child(n+4) { animation-delay: 210ms; }
/* softer arrival: less front-loaded than an expo curve, so it glides rather than snaps (user: "pops in suddenly") */
html.motion .step-in.step-fast > .study-q { animation: q-enter2 400ms cubic-bezier(.25,.75,.35,1) both; animation-duration: 400ms; }
html.motion .step-in.step-fast .opts > li { animation-timing-function: cubic-bezier(.25,.75,.35,1); animation-duration: 340ms; }

/* NEXT IS THE MAIN BUTTON (user, 2026-10-21): after an answer the bottom row is ← · [ Next → ] · Stay.
   Next is the big solid button in the middle; the countdown fills along its bottom edge, so it reads as
   "going on by itself, tap to go now". Stay is small and quiet: it stops the countdown to read the why. */
.nav-go { position: relative; flex: 1; min-width: 0; min-height: 54px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-md);
  background: var(--c-brand); color: var(--c-surface); font: inherit; font-weight: 700; font-size: 17px; cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--c-brand) 28%, transparent); transition: transform 120ms ease, background-color 150ms ease; }
.nav-go-t { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; }
.nav-go-t svg { width: 20px; height: 20px; transition: transform 150ms ease; }
.nav-go-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: rgb(255 255 255 / 0.55); transform-origin: 0 50%; animation: nav-fill var(--auto-ms, 1600ms) linear both; }
@media (hover: hover) and (pointer: fine) { .nav-go:hover { background: var(--c-brand-hover); } .nav-go:hover .nav-go-t svg { transform: translateX(3px); } }
.nav-go:active { transform: scale(0.97); }
.nav-go:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.nav-stay { flex: none; min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text-2); font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; transition: transform 120ms ease, color 150ms ease, border-color 150ms ease; }
.nav-stay svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .nav-stay:hover { color: var(--c-text); border-color: var(--c-text-2); } }
.nav-stay:active { transform: scale(0.95); }
.nav-stay:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
html.motion .nav-go { animation: go-in 240ms cubic-bezier(.2,.8,.3,1.15) both; }
@keyframes go-in { from { opacity: 0; transform: scale(0.94); } }
@media (prefers-reduced-motion: reduce) { .nav-go-bar { animation: none; transform: scaleX(1); opacity: 0.5; } }
@media (max-width: 480px) { .nav-stay { padding: 0 12px; } }

/* RECOVERY QUESTION (user, 2026-10-21): a missed written point comes back as its own MCQ-style question. The written
   question it came from is one compact, quiet line above the follow-up question (two lines at most). */
.rc-from { margin: 2px 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.45; color: var(--c-text-2); }
.rc-from-k { font-weight: 700; color: var(--c-gold-ink); margin-right: 4px; }
.rc-from-k::after { content: ":"; }

/* FLASHCARD (user, 2026-10-21): a missed written point. Both faces share one grid cell (the card keeps the height
   of the taller face, so nothing jumps when it turns); the flip is a 3D turn on the Y axis. */
.fc { perspective: 1400px; margin: 4px 0 6px; }
.fc-in { display: grid; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: none; }
.fc.is-flipped .fc-in { transform: rotateY(180deg); }
html.motion .fc.fc-anim .fc-in { animation: fc-flip 520ms cubic-bezier(.3,.7,.25,1) both; }
@keyframes fc-flip { from { transform: rotateY(0); } 55% { transform: rotateY(196deg); } to { transform: rotateY(180deg); } }
.fc-face { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; gap: 12px;
  min-height: 220px; padding: 24px 22px 20px; border-radius: var(--r-lg); background: var(--c-surface); border: 1.5px solid var(--c-border); color: var(--c-text); text-align: left;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.08); }
.fc-back { transform: rotateY(180deg); border-color: color-mix(in srgb, var(--c-brand) 45%, var(--c-border)); }
button.fc-front { font: inherit; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { button.fc-front:hover { transform: translateY(-2px); border-color: var(--c-brand); box-shadow: 0 12px 30px rgb(0 0 0 / 0.12); } }
button.fc-front:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }
.fc-k { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-ink); }
.fc-front .q-text { margin: 0 !important; }
.fc-tap { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--c-text-2); }
.fc-tap svg { width: 15px; height: 15px; }
.fc-a { margin: 0; font-family: var(--font-serif); font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--c-text); }
.fc-pt { margin: 0; display: grid; gap: 3px; padding-top: 10px; border-top: 1px solid var(--c-border); font-size: 14.5px; line-height: 1.5; color: var(--c-text-2); }
.fc-pt span { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-2); }
.fc.is-got .fc-back { border-color: var(--c-right); box-shadow: inset 4px 0 0 var(--c-right), 0 8px 24px rgb(0 0 0 / 0.08); }
.fc.is-missed .fc-back { border-color: color-mix(in srgb, var(--c-wrong) 60%, var(--c-border)); box-shadow: inset 4px 0 0 var(--c-wrong), 0 8px 24px rgb(0 0 0 / 0.08); }
.fc-flip svg { width: 18px; height: 18px; }
@media (max-width: 560px) { .fc-face { min-height: 190px; padding: 20px 18px 16px; } .fc-a { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .fc.fc-anim .fc-in { animation: none !important; } }

/* FLASHCARD v2 (user, 2026-10-21): just the card, filling the screen. Its height is fixed (the room under it is kept
   for the buttons that appear after the flip), so it never resizes while it turns. It invites a tap: on desktop it
   glows and lifts on hover; on phones (no hover) it breathes a soft glow and "Tap to flip" pulses. */
.fc-q { display: flex; flex-direction: column; gap: 14px; }
.fc-q .fc { margin: 0; height: clamp(300px, calc(100svh - 300px), 640px); }
.fc-q .fc-in, .fc-q .fc-face { height: 100%; min-height: 0; }
.fc-q .fc-face { justify-content: space-between; padding: 26px 24px 22px; border-radius: 22px; }
.fc-q .fc-front { align-items: stretch; }
.fc-q .fc-front .q-text { margin: auto 0 !important; font-size: clamp(22px, 5.6vw, 32px); line-height: 1.25; text-align: center; text-wrap: balance; }
.fc-q .fc-k { display: inline-flex; align-items: center; gap: 6px; }
.fc-q .fc-k svg { width: 14px; height: 14px; }
.fc-q .fc-tap { margin: 0 auto; font-size: 14px; color: var(--c-brand); }
.fc-q .fc-back { justify-content: center; gap: 16px; }
.fc-q .fc-a { font-size: clamp(22px, 5.4vw, 30px); text-align: center; text-wrap: balance; }
.fc-q .fc-pt { text-align: center; }
.fc-q .fc-back .explain-src { text-align: center; }
/* the invitation to tap */
.fc-q button.fc-front { background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c-brand) 9%, var(--c-surface)), var(--c-surface) 60%);
  transition: transform 220ms cubic-bezier(.2,.8,.3,1), box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease; }
@media (hover: hover) and (pointer: fine) {
  .fc-q button.fc-front:hover { transform: translateY(-4px); border-color: var(--c-brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-brand) 18%, transparent), 0 22px 50px color-mix(in srgb, var(--c-brand) 26%, transparent); }
  .fc-q button.fc-front:hover .fc-tap { color: var(--c-text); }
}
.fc-q button.fc-front:active { transform: scale(0.98); }
html.motion .fc-q .fc:not(.is-flipped) button.fc-front { animation: fc-breathe 2.6s ease-in-out infinite; }
html.motion .fc-q .fc:not(.is-flipped) .fc-tap { animation: fc-tap 2.6s ease-in-out infinite; }
@keyframes fc-breathe { 0%, 100% { box-shadow: 0 8px 24px rgb(0 0 0 / 0.08); border-color: var(--c-border); }
  50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand) 14%, transparent), 0 14px 34px color-mix(in srgb, var(--c-brand) 18%, transparent); border-color: color-mix(in srgb, var(--c-brand) 55%, var(--c-border)); } }
@keyframes fc-tap { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@media (hover: hover) and (pointer: fine) { html.motion .fc-q button.fc-front:hover { animation: none; } }
.fc-dock { margin-top: 0; }
.fc-dock .mark-ask { margin: 0 0 8px; text-align: center; }
@media (max-width: 560px) { .fc-q .fc { height: clamp(280px, calc(100svh - 290px), 560px); } .fc-q .fc-face { padding: 22px 18px 18px; } }

/* FLASHCARD BACK v2 (user, 2026-10-21: explain, don't repeat): the answer, then WHY (the lecture explanation) and
   WHERE IT FITS (that part of the model answer, this point highlighted). Centred when it fits; scrolls inside the
   card when it doesn't (auto margins instead of centring, so nothing is ever cut off at the top). */
.fc-q .fc-back { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; gap: 14px; }
.fc-q .fc-back > :first-child { margin-top: auto; }
.fc-q .fc-back > :last-child { margin-bottom: auto; }
.fc-q .fc-back .fc-k { align-self: center; }
.fc-sec { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--c-surface-2); text-align: left; }
.fc-sk { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-gold-ink); }
.fc-sk svg { width: 14px; height: 14px; }
.fc-why { margin: 0; font-size: 15px; line-height: 1.55; color: var(--c-text); }
.fc-fit { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fc-fit li { position: relative; padding: 5px 8px 5px 20px; border-radius: 8px; font-size: 14px; line-height: 1.45; color: var(--c-text-2); }
.fc-fit li::before { content: ""; position: absolute; left: 8px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.fc-fit li.is-this { color: var(--c-text); font-weight: 600; background: color-mix(in srgb, var(--c-brand) 16%, transparent); box-shadow: inset 3px 0 0 var(--c-brand); }
.fc-fit li.is-this::before { background: var(--c-brand); opacity: 1; }
.fc-dock .ar-bar { margin-bottom: 10px; }
@media (max-width: 560px) { .fc-why { font-size: 14.5px; } .fc-fit li { font-size: 13.5px; } }
/* the Arabic explanation inside the back of the flashcard (it scrolls with the card) */
.fc-ar { display: grid; gap: 10px; }
.fc-ar .ar-bar { margin: 0; }
.fc-ar .ar-panel { margin: 0; text-align: right; }
/* the buttons under a flashcard never cover it (normal flow, not stuck to the screen bottom); a little more room on phones */
.fc-q .dock { position: static; }
@media (max-width: 560px) { .fc-q .fc { height: clamp(280px, calc(100svh - 312px), 560px); } }

/* FLASHCARD RESULT (user, 2026-10-21): the card answers the tap, holds a beat, then glides on by itself.
   Recalled: a small pop with a green glow and a "✓ Recalled" stamp. Didn't recall: a short shake, a red tint and
   "↻ Comes back later". The stamp floats over the card (it does not turn with it). */
.fc { position: relative; }
.fc-stamp { position: absolute; z-index: 3; top: 14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px;
  border-radius: var(--r-pill); font-weight: 800; font-size: 14px; white-space: nowrap; pointer-events: none; color: #fff; box-shadow: 0 8px 22px rgb(0 0 0 / 0.22); }
.fc-stamp svg { width: 16px; height: 16px; }
.fc.is-got .fc-stamp { background: var(--c-right); }
.fc.is-missed .fc-stamp { background: var(--c-wrong); }
.fc.is-got .fc-back { background: color-mix(in srgb, var(--c-right) 10%, var(--c-surface)); }
.fc.is-missed .fc-back { background: color-mix(in srgb, var(--c-wrong) 9%, var(--c-surface)); }
html.motion .fc.fc-hit .fc-stamp { animation: fc-stamp-in 320ms cubic-bezier(.2,.9,.3,1.35) both; }
@keyframes fc-stamp-in { from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.7); } }
html.motion .fc.is-got.fc-hit .fc-in { animation: fc-got 520ms cubic-bezier(.2,.8,.3,1) both; }
@keyframes fc-got { 0% { transform: rotateY(180deg) scale(1); } 35% { transform: rotateY(180deg) scale(1.035); } 100% { transform: rotateY(180deg) scale(1); } }
html.motion .fc.is-got.fc-hit .fc-back { animation: fc-glow 700ms ease-out both; }
@keyframes fc-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-right) 55%, transparent); } 40% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-right) 22%, transparent), 0 18px 44px color-mix(in srgb, var(--c-right) 30%, transparent); } 100% { box-shadow: inset 4px 0 0 var(--c-right), 0 8px 24px rgb(0 0 0 / 0.08); } }
html.motion .fc.is-missed.fc-hit .fc-in { animation: fc-shake 420ms cubic-bezier(.36,.07,.19,.97) both; }
@keyframes fc-shake { 0%, 100% { transform: rotateY(180deg) translateX(0); } 20% { transform: rotateY(180deg) translateX(9px); } 40% { transform: rotateY(180deg) translateX(-8px); } 60% { transform: rotateY(180deg) translateX(5px); } 80% { transform: rotateY(180deg) translateX(-3px); } }
@media (prefers-reduced-motion: reduce) { .fc.fc-hit .fc-in, .fc.fc-hit .fc-back, .fc.fc-hit .fc-stamp { animation: none !important; } }

/* SESSION HEADER (user, 2026-10-21): the main header's look, made for a session. See-through blurred bar.
   Desktop: brand (home) · centred trail of links (GIT › Physiology › Lecture 1) + a gold chip for what you're
   doing (Written / MCQ) · progress pill, End session, theme. Phones (< 760 px): logo · a two-line title (subject,
   then "Lecture 1 · Written"; tap = back to it) · progress pill · ✕ · theme. A link out of a started session asks
   once: a red "Leave? Tap again" bubble under it. */
.v2 .study-bar.sb2 { position: sticky; top: 0; z-index: 50; height: auto; padding: 0; border-bottom: 1px solid color-mix(in srgb, var(--c-border) 70%, transparent);
  background: color-mix(in srgb, var(--c-bg) 84%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.sb2-in { max-width: 1160px; margin: 0 auto; padding: 0 var(--pad); height: 64px; display: flex; align-items: center; gap: 14px; }
.sb2 button { font: inherit; }
.sb2-brand { position: relative; flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r-sm); }
.sb2-brand .brand-mark { width: 36px; height: 36px; border-radius: 9px; }
.sb2-brand .brand-mark img { width: 152px; left: -9.6px; top: -9px; }
.sb2-brand .wordmark { font-size: 19px; }
.sb2-trail { flex: 1; min-width: 0; display: flex; justify-content: center; }
.sb2-trail ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; min-width: 0; }
.sb2-trail li { display: flex; align-items: center; min-width: 0; }
.sb2-crumb { position: relative; height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--c-text-2); font-size: 14.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease; }
.sb2-trail li:nth-last-child(3) .sb2-crumb { color: var(--c-text); font-weight: 600; }
.sb2-sep { padding: 0 2px; color: var(--c-border-strong); font-size: 16px; }
.sb2-kind { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); white-space: nowrap;
  background: color-mix(in srgb, var(--c-gold) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-gold) 45%, transparent); color: var(--c-gold-ink); font-size: 13px; font-weight: 700; }
.sb2-kind svg { width: 15px; height: 15px; }
.sb2-title { display: none; }
.sb2-right { flex: none; display: flex; align-items: center; gap: 8px; }
.v2 .sb2-prog { margin: 0; display: inline-flex; align-items: baseline; gap: 4px; height: 34px; align-items: center; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--c-surface-2); box-shadow: inset 0 0 0 1px var(--c-border); font-size: 14px; font-weight: 700; color: var(--c-text); white-space: nowrap; }
.v2 .sb2-prog .pos-of { font-weight: 500; color: var(--c-text-2); }
.sb2-end { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--c-border-strong); color: var(--c-text); font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: background-color 150ms ease, box-shadow 150ms ease, color 150ms ease; }
.sb2-end svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) {
  .sb2-crumb:hover { background: var(--c-surface-2); color: var(--c-brand); }
  .sb2-end:hover { background: color-mix(in srgb, var(--c-wrong) 12%, transparent); box-shadow: inset 0 0 0 1.5px var(--c-wrong); color: var(--c-wrong); }
  .sb2-brand:hover .wordmark { color: var(--c-brand-hover); }
}
.sb2 button:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
/* the ask before leaving a started session */
.sb2 .is-armed { position: relative; }
.sb2 .is-armed::after { content: "Leave? Tap again"; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 60; padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--c-wrong); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 20px rgb(0 0 0 / 0.25); pointer-events: none; }
.sb2-brand.is-armed::after { left: 0; transform: none; }
html.motion .sb2 .is-armed::after { animation: sb2-ask 200ms cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes sb2-ask { from { opacity: 0; translate: 0 -4px; } }
.sb2-crumb.is-armed, .sb2-title.is-armed { color: var(--c-wrong) !important; }
/* tablets: a smaller trail */
@media (max-width: 1020px) { .sb2-brand .wordmark { display: none; } .sb2-crumb { padding: 0 7px; font-size: 14px; } }
/* phones: logo · two-line title · progress · ✕ · theme */
@media (max-width: 760px) {
  .sb2-in { height: 58px; gap: 8px; }
  .sb2-trail { display: none; }
  .sb2-title { display: grid; flex: 1; min-width: 0; padding: 4px 6px; border: 0; border-radius: var(--r-sm); background: none; text-align: left; cursor: pointer; line-height: 1.2; }
  .sb2-t1 { font-size: 12px; font-weight: 600; color: var(--c-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb2-t2 { font-size: 15px; font-weight: 700; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb2-title.is-armed::after { left: 6px; transform: none; }
  .sb2-right { gap: 4px; }
  .v2 .sb2-prog { height: 30px; padding: 0 10px; font-size: 13px; }
  .v2 .sb2-prog .pos-left { display: none; }
  .v2 .sb2-prog .pos-tag { display: none; }
  .sb2-end { width: 40px; padding: 0; justify-content: center; }
  .sb2-end span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* SESSION HEADER v2 (user, 2026-10-21): the header's bottom edge is the progress line (green gradient, no glow: kept
   light so scrolling stays smooth on phones); progress words in a pill (the ring was dropped). Phones: logo · SUBJECT
   over "L1 [MCQ]" · pill · ✕ · theme. */
.sb2 .sb2-edge { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; margin: 0; background: color-mix(in srgb, var(--c-text) 8%, transparent); }
.sb2 .sb2-edge span { display: block; height: 100%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c-brand) 55%, transparent), var(--c-brand)); transition: width 500ms cubic-bezier(.2,.8,.3,1); }
.sb2-kind-sm { height: 22px; padding: 0 8px; gap: 4px; font-size: 11.5px; vertical-align: 1px; }
.sb2-kind-sm svg { width: 12px; height: 12px; }
@media (max-width: 760px) {
  .sb2-in { height: 60px; gap: 10px; }
  .sb2-brand .brand-mark { width: 38px; height: 38px; border-radius: 11px; }
  .sb2-brand .brand-mark img { width: 160px; left: -10px; top: -9.5px; }
  .sb2-title { gap: 2px; }
  .sb2-t1 { font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; }
  .sb2-t2 { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; }
  .sb2-end { width: 42px; height: 42px; }
}
/* NEXT COUNTDOWN v2 (user, 2026-10-21: "the line under Next isn't clear"): the whole button fills from left to right
   as it counts down, so it is obvious it is about to move on by itself. */
.nav-go-bar { top: 0; bottom: 0; height: auto !important; background: rgb(255 255 255 / 0.24) !important; border-radius: inherit; }
.nav-go-t { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .nav-go-bar { opacity: 0.35; } }
/* phones: the pill says just "1/20" so the title keeps its room (the full words stay for screen readers) */
.sb2-prog-s { display: none; }
.sb2-prog-s i { font-style: normal; font-weight: 500; color: var(--c-text-2); }
@media (max-width: 760px) {
  .v2 p.sb2-prog { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
  .v2 .sb2-prog-s { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; font-size: 14px; }
}

/* TEXT ON SOLID GREEN / RED (audit 2026-10-21): white text on the solid right-answer green was 1.95:1 in dark mode
   and 3.44:1 in light mode (the readable minimum for normal text is 4.5:1); white on red was 2.78:1 in dark mode.
   Dark ink on green: 8.4:1 dark, 4.8:1 light. Red: white in light (4.6:1), dark ink in dark (6.6:1). */
:root { --c-on-right: #0b2416; --c-on-wrong: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-on-wrong: #2a0b0b; } }
:root[data-theme="dark"] { --c-on-wrong: #2a0b0b; }
.v2 .opt.gopt.is-correct { color: var(--c-on-right); }
.aps .ap.ap-got .ap-num, .mk-got[aria-pressed="true"] { color: var(--c-on-right); }
.aps .ap.ap-missed .ap-num, .mk-missed[aria-pressed="true"] { color: var(--c-on-wrong); }
.fc.is-got .fc-stamp { color: var(--c-on-right); }
.fc.is-missed .fc-stamp { color: var(--c-on-wrong); }
.sb2 .is-armed::after { color: var(--c-on-wrong); }

/* =====================================================================
   TABLE + CASE questions (2026-10-22). The doctor's table as in the lecture; blanks are numbered; only the table
   scrolls sideways (never the page), with the row labels pinned. A case: the scenario, its questions, and after the
   reveal the answer points under each question.
   ===================================================================== */
/* v2 (UX audit, 2026-10-22): exam = numbers on writing lines; review = the table itself is the marking sheet. */
.tq { container: tq / inline-size; margin: var(--s-4) 0 var(--s-2); min-width: 0; max-width: 100%; }
.tq-brief { margin: 0 0 var(--s-2); font-size: 14px; color: var(--c-text-2); }
.tq-brief b { color: var(--c-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.tq-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-border); background: var(--c-surface); max-width: 100%; }
.tq-scroll:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.tq-t { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 15px; line-height: 1.45; text-align: left; }
.tq.can-stack .tq-t { min-width: calc((var(--tq-cols, 3) - 1) * 170px + 110px); }
.tq-t th, .tq-t td { padding: 12px 14px; vertical-align: top; border-bottom: 1px solid var(--c-border); border-right: 1px solid var(--c-border); }
.tq-t tr > :last-child { border-right: 0; }
.tq-t tbody tr:last-child > * { border-bottom: 0; }
.tq-t thead th { background: var(--c-surface-2); color: var(--c-brand); font-weight: 700; font-size: 13.5px; vertical-align: bottom; }
.tq-t tbody th { background: var(--c-surface-2); color: var(--c-brand); font-weight: 700; font-size: 14px; width: 1%; min-width: 84px; }
.tq.has-rowheads .tq-t tr > :first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--c-border); }
.tq-text { display: block; }
.tq-text + .tq-text { margin-top: 6px; }
/* EXAM: a blank is its number on a writing line, nothing that looks typeable */
.tq-blank { display: flex; align-items: flex-end; gap: 10px; min-height: 34px; }
.tq-blank::after { content: ""; flex: 1; min-width: 32px; margin-bottom: 6px; border-bottom: 1.5px dotted color-mix(in srgb, var(--c-text-2) 60%, transparent); }
.tq-blank + .tq-blank { margin-top: 4px; }
.tq-n { flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; background: color-mix(in srgb, var(--c-gold) 14%, transparent); color: var(--tq-n-ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-gold) 75%, transparent); }
:root { --tq-n-ink: color-mix(in srgb, var(--c-gold-ink) 72%, var(--c-text)); }   /* light: AA on the gold tint */
:root[data-theme="dark"] { --tq-n-ink: var(--c-gold-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tq-n-ink: var(--c-gold-ink); } }
/* REVIEW: each answer opens in place, the doctor's words with its own ✓ / ✗ */
.tq-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; margin: 0 -8px; padding: 8px 8px 8px 11px; border-radius: 10px; box-shadow: inset 3px 0 0 transparent; transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.tq-item + .tq-item { margin-top: 6px; }
.tq-item .tq-n { margin-top: 1px; }
.tq-ans { flex: 1 1 150px; min-width: 0; color: var(--c-text); }
.tq-marks { flex: none; display: flex; gap: 6px; margin-left: auto; }
.tq-marks .mk { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; background: var(--c-bg); border: 1px solid var(--c-border-strong); color: var(--c-text-2); }
.tq-marks .mk-got[aria-pressed="true"] { background: var(--c-right); border-color: var(--c-right); color: var(--c-on-right); }
.tq-marks .mk-missed[aria-pressed="true"] { background: var(--c-wrong); border-color: var(--c-wrong); color: var(--c-on-wrong); }
.tq-marks .mk:disabled { opacity: 0.55; cursor: default; }
.tq-item.is-open { background: color-mix(in srgb, var(--c-gold) 7%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--c-gold) 65%, transparent); }
.tq-item.is-got { background: color-mix(in srgb, var(--c-right) 9%, transparent); box-shadow: inset 3px 0 0 var(--c-right); }
.tq-item.is-missed { background: color-mix(in srgb, var(--c-wrong) 9%, transparent); box-shadow: inset 3px 0 0 var(--c-wrong); }
.tq-item.is-got .tq-n { background: var(--c-right); color: var(--c-on-right); box-shadow: none; }
.tq-item.is-missed .tq-n { background: var(--c-wrong); color: var(--c-on-wrong); box-shadow: none; }
html.motion .tq-item.just { animation: tq-just 260ms var(--ease); }
@keyframes tq-just { from { transform: scale(0.985); } to { transform: none; } }
.tq-cap { margin-top: 6px; font-size: 12.5px; color: var(--c-text-2); }
.ans-tally .t-left { color: var(--c-gold-ink); font-weight: 700; }
.ans-tally { flex-wrap: wrap; }
.t-jump { font-size: 13.5px; white-space: nowrap; }
.t-jump svg { width: 14px; height: 14px; vertical-align: -2px; }
/* NARROW: 3+ answer columns become one block per row label, each answer labelled with its column (no side-scrolling,
   the row's comparison stays together). 2 answer columns stack below 440 px; a single answer column always stays a table. */
@container tq (max-width: 600px) {
  .tq.can-stack .tq-scroll { overflow: visible; }
  .tq.can-stack .tq-t, .tq.can-stack .tq-t tbody, .tq.can-stack .tq-t tr, .tq.can-stack .tq-t th, .tq.can-stack .tq-t td { display: block; width: auto; min-width: 0; }
  .tq.can-stack .tq-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tq.can-stack.has-rowheads .tq-t tr > :first-child { position: static; box-shadow: none; }
  .tq.can-stack .tq-t tbody th { padding: 9px 14px; border-right: 0; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; }
  .tq.can-stack .tq-t td { border-right: 0; padding: 10px 14px 12px; }
  .tq.can-stack .tq-t td::before { content: attr(data-col); display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: var(--c-brand); }
  .tq.can-stack .tq-t tbody tr:not(:last-child) > td:last-child { border-bottom: 1px solid var(--c-border); }
  .tq.can-stack .tq-t tbody tr:last-child > td:last-child { border-bottom: 0; }
  /* exam: the column label sits beside its writing line(s), so a row of three answers stays short */
  .tq.can-stack:not(.is-revealed) .tq-t td { display: grid; grid-template-columns: minmax(96px, 38%) 1fr; column-gap: 12px; align-items: end; padding: 8px 14px; }
  .tq.can-stack:not(.is-revealed) .tq-t td::before { grid-column: 1; grid-row: 1 / span 9; align-self: center; margin: 0; }
  .tq.can-stack:not(.is-revealed) .tq-t td > * { grid-column: 2; }
}
/* 2 answer columns: the same stacking, only on the narrowest screens (the cells can no longer hold an answer and its ✓ / ✗) */
@container tq (max-width: 440px) {
  .tq.can-stack-sm .tq-scroll { overflow: visible; }
  .tq.can-stack-sm .tq-t, .tq.can-stack-sm .tq-t tbody, .tq.can-stack-sm .tq-t tr, .tq.can-stack-sm .tq-t th, .tq.can-stack-sm .tq-t td { display: block; width: auto; min-width: 0; }
  .tq.can-stack-sm .tq-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tq.can-stack-sm.has-rowheads .tq-t tr > :first-child { position: static; box-shadow: none; }
  .tq.can-stack-sm .tq-t tbody th { padding: 9px 14px; border-right: 0; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; }
  .tq.can-stack-sm .tq-t td { border-right: 0; padding: 10px 14px 12px; }
  .tq.can-stack-sm .tq-t td::before { content: attr(data-col); display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: var(--c-brand); }
  .tq.can-stack-sm .tq-t tbody tr:not(:last-child) > td:last-child { border-bottom: 1px solid var(--c-border); }
  .tq.can-stack-sm .tq-t tbody tr:last-child > td:last-child { border-bottom: 0; }
  /* exam: the column label sits beside its writing line(s), so a row of three answers stays short */
  .tq.can-stack-sm:not(.is-revealed) .tq-t td { display: grid; grid-template-columns: minmax(96px, 38%) 1fr; column-gap: 12px; align-items: end; padding: 8px 14px; }
  .tq.can-stack-sm:not(.is-revealed) .tq-t td::before { grid-column: 1; grid-row: 1 / span 9; align-self: center; margin: 0; }
  .tq.can-stack-sm:not(.is-revealed) .tq-t td > * { grid-column: 2; }
}
.wq-main .tq { margin-bottom: 0; }
.ans .tq { margin: var(--s-3) 0 var(--s-4); }

.cs { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); background: var(--c-surface-2); box-shadow: inset 3px 0 0 var(--c-gold); text-align: left; }
.cs-k { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--s-2); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-gold-ink); }
.cs-k svg { width: 16px; height: 16px; }
.cs-text p { margin: 0 0 var(--s-2); font-size: 16px; line-height: 1.6; color: var(--c-text); }
.cs-text p:last-child { margin-bottom: 0; }
.cs-asks { margin: var(--s-3) 0 0; padding: var(--s-3) 0 0 1.4em; border-top: 1px solid var(--c-border); display: grid; gap: 6px; font-weight: 600; color: var(--c-text); }
.cs.is-compact { padding: var(--s-3) var(--s-4); }
.cs.is-compact .cs-text p { font-size: 14.5px; line-height: 1.5; color: var(--c-text-2); }
.cs-ans + .cs-ans { margin-top: var(--s-4); }
.cs-ans-h { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 var(--s-2); font-size: 15.5px; font-weight: 700; line-height: 1.4; color: var(--c-text); }
.cs-ans-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-brand); color: var(--c-on-brand); font-size: 12.5px; }
.fc-fit b { color: var(--c-brand); font-weight: 700; margin-right: 4px; }
.v2 .tag-lecture-case { background: var(--c-rec-bg); color: var(--c-rec); }
.type-grid.cases-one { grid-template-columns: minmax(0, 1fr); }

/* three tabs (subjects with cases) still fit a phone: labels may wrap onto two lines */
@media (max-width: 639px) {
  .mod-tabs.has-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mod-tabs.has-3 .mod-tab { padding: 8px 8px; }
  .mod-tabs.has-3 .mod-tab-l { font-size: 15px; white-space: normal; }
  .mod-tabs.has-3 .mod-tab-m { font-size: 11px; }
  .tq-t { font-size: 14px; }
  .tq-t th, .tq-t td { padding: 9px 10px; }
  .cs { padding: var(--s-3); }
  .cs-text p { font-size: 15px; }
}
@media (min-width: 640px) { .mod-tabs.has-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* REVIEW v3 (user, 2026-10-22: "looks really bad… you need to scroll"): one dense line per answer, number · the
   doctor's text · ✓ ✗ on the right, no card around it (just a thin edge); phones keep the column name in a narrow
   left column; the review foot is slimmer. Measured: phone 1700 → see commit; desktop 920 → see commit. */
.tq.is-revealed .tq-t td { padding: 6px 10px; }
.tq.is-revealed .tq-t th { padding: 8px 10px; }
.tq-item { flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0 -4px; padding: 4px 4px 4px 9px; border-radius: 8px; }
.tq-item + .tq-item { margin-top: 2px; }
.tq-item.is-open { background: transparent; box-shadow: inset 2px 0 0 color-mix(in srgb, var(--c-gold) 55%, transparent); }
.tq-item.is-got { background: color-mix(in srgb, var(--c-right) 10%, transparent); box-shadow: inset 3px 0 0 var(--c-right); }
.tq-item.is-missed { background: color-mix(in srgb, var(--c-wrong) 10%, transparent); box-shadow: inset 3px 0 0 var(--c-wrong); }
.tq-item .tq-n { min-width: 21px; height: 21px; padding: 0 5px; font-size: 11.5px; margin-top: 0; }
.tq-ans { flex: 1 1 0; min-width: 0; font-size: 14.5px; line-height: 1.35; }
.tq-marks { gap: 4px; }
.tq-marks .mk { width: 32px; height: 32px; min-height: 32px; }
.tq-marks .mk svg { width: 15px; height: 15px; }
@media (pointer: coarse) { .tq-marks .mk { width: 36px; height: 36px; min-height: 36px; } }
@container tq (max-width: 600px) {
  .tq.can-stack.is-revealed .tq-t td { padding: 3px 10px; }
  .tq.can-stack.is-revealed .tq-t td::before { content: none; }
  .tq.can-stack.is-revealed .tq-col { display: inline; }
  .tq.can-stack.is-revealed .tq-t tbody th { padding: 6px 10px; }
}
@container tq (max-width: 440px) {
  .tq.can-stack-sm.is-revealed .tq-t td { padding: 3px 10px; }
  .tq.can-stack-sm.is-revealed .tq-t td::before { content: none; }
  .tq.can-stack-sm.is-revealed .tq-col { display: inline; }
  .tq.can-stack-sm.is-revealed .tq-t tbody th { padding: 6px 10px; }
}
/* the review foot: the frozen clock adds nothing the "You finished in …" line doesn't say */
.wq-sheet.is-done .wq-foot { gap: 6px var(--s-4); }
@media (min-width: 768px) {
  .wq-sheet.is-done .wq-foot { padding-top: var(--s-3); padding-bottom: var(--s-3); }
  .wq-sheet.is-done .wq-foot .tm { width: 64px; height: 64px; }
  .wq-sheet.is-done .wq-foot .tm-time { font-size: 17px; }
  .wq-sheet.is-done .wq-foot .tm-of { display: none; }
}
@media (max-width: 767px) {
  .wq-sheet.is-done .wq-foot { grid-template-columns: minmax(0, 1fr); grid-template-areas: "status" "actions"; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .wq-sheet.is-done .wq-foot .tm { display: none; }
  .wq-sheet.is-done .wq-foot .wq-state { font-size: 13px; font-weight: 600; color: var(--c-text-2); }
  .wq-sheet.is-done .wq-foot .ans-tally { font-size: 13.5px; gap: 8px; }
  .wq-sheet.is-done .wq-foot .wq-actions .btn { min-height: 44px; padding-block: 0; }
  .wq-sheet.is-done .wq-foot .wq-pause span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wq-sheet.is-done .wq-foot .wq-pause { padding-inline: 14px; }
}
/* the column name inside an answer's line: only when the table is stacked (otherwise the column header says it) */
.tq-col { display: none; margin-right: 6px; font-size: 12px; font-weight: 700; color: var(--c-brand); }
.tq-col::after { content: " ·"; color: var(--c-text-2); font-weight: 400; }

/* REVIEW v3b (user, 2026-10-22): the table holds compact answer lines (tap one to mark or change it); ONE marking bar
   in the sticky foot asks about the current answer and moves on by itself. No per-answer buttons → no tall table. */
button.tq-item { width: calc(100% + 8px); border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; background: transparent; }
.tq-item { min-height: 34px; padding: 5px 6px 5px 9px; }
.tq-item .tq-state { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: auto; }
.tq-item .tq-state svg { width: 16px; height: 16px; }
.tq-item.is-got .tq-state { color: var(--c-right); }
.tq-item.is-missed .tq-state { color: var(--c-wrong); }
.tq-item.is-cur { background: color-mix(in srgb, var(--c-gold) 16%, transparent); box-shadow: inset 3px 0 0 var(--c-gold), inset 0 0 0 1.5px color-mix(in srgb, var(--c-gold) 70%, transparent); }
.tq-item.is-cur .tq-n { background: var(--c-gold); color: #1c1406; box-shadow: none; }
button.tq-item:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { button.tq-item:not(.is-cur):hover { background: color-mix(in srgb, var(--c-text) 5%, transparent); } }
/* the marking bar */
.tq-tray { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
.tq-tray-q { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--c-text-2); line-height: 1.3; }
.tq-tray-q b { color: var(--c-text); }
.tq-tray-q .tq-n { background: var(--c-gold); color: #1c1406; box-shadow: none; }
.tq-tray .btn { min-height: 48px; gap: 8px; justify-content: center; padding-inline: 10px; white-space: nowrap; font-weight: 700; border: 1.5px solid var(--c-border-strong); background: var(--c-bg); color: var(--c-text); }
.tq-tray .btn svg { width: 18px; height: 18px; }
.tq-tray .tq-yes { background: var(--c-right); border-color: var(--c-right); color: var(--c-on-right); }
.tq-tray .tq-no.is-on { background: var(--c-wrong); border-color: var(--c-wrong); color: var(--c-on-wrong); }
.tq-tray .tq-yes.is-on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-right) 35%, transparent); }
.ans-tally .t-jump { margin-left: auto; }
@media (min-width: 768px) { .wq-sheet.is-done .wq-foot:has(.tq-tray) { grid-template-columns: auto minmax(0, 1fr) minmax(300px, 1.25fr); grid-template-areas: "tm status actions"; } }
@media (max-width: 767px) {
  .wq-sheet.is-done .wq-foot:has(.tq-tray) .wq-state { display: none; }
  .tq-tray-q { font-size: 13px; }
}

/* REVIEW v4 (user, 2026-10-22: "not obvious whether it asked about the point or the whole question"; phone list
   "needs big improvement"). Desktop: the answer being marked stands out, the others step back, and the bar quotes it.
   Phones: one answer at a time in a big card + a map of the table (a dot per answer). */
.tq.is-marking .tq-item:not(.is-cur) { opacity: 0.5; }
.tq.is-marking .tq-item:not(.is-cur):hover { opacity: 0.85; }
.tq-item { transition: opacity 180ms var(--ease), background-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.tq-item.is-cur { opacity: 1; background: color-mix(in srgb, var(--c-gold) 24%, transparent); box-shadow: inset 0 0 0 2px var(--c-gold), 0 0 0 4px color-mix(in srgb, var(--c-gold) 22%, transparent); }
.tq-item.is-cur .tq-ans { font-weight: 600; }
/* the bar: which answer, the answer itself, then the question */
.tq-tray-q { align-items: flex-start; }
.tq-tray-q > .tq-n { margin-top: 2px; }
.tq-tray-t { display: grid; gap: 2px; min-width: 0; }
.tq-tray-place { font-size: 12px; font-weight: 700; color: var(--c-brand); }
.tq-tray-a { font-size: 15px; font-weight: 600; color: var(--c-text); quotes: "“" "”"; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tq-tray-ask { font-size: 13px; color: var(--c-text-2); }
.tq-tray-ask b { color: var(--c-gold-ink); }
.tq-full { display: block; margin: var(--s-3) auto 0; font-size: 14px; }
/* phones: the card + the map */
.tq-focus { margin-top: var(--s-3); display: grid; gap: var(--s-3); }
.tq-card { padding: 14px 16px 16px; border-radius: 14px; background: var(--c-surface); box-shadow: inset 0 0 0 2px var(--c-gold), 0 6px 20px rgb(0 0 0 / 0.12); }
.tq-card.is-got { box-shadow: inset 0 0 0 2px var(--c-right), 0 6px 20px rgb(0 0 0 / 0.12); }
.tq-card.is-missed { box-shadow: inset 0 0 0 2px var(--c-wrong), 0 6px 20px rgb(0 0 0 / 0.12); }
.tq-card-k { display: flex; justify-content: space-between; align-items: center; margin: 0; font-size: 12.5px; color: var(--c-text-2); letter-spacing: 0.02em; }
.tq-card-k b { color: var(--c-gold-ink); font-variant-numeric: tabular-nums; }
.tq-card-v { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.tq-card.is-got .tq-card-v { color: var(--c-right); }
.tq-card.is-missed .tq-card-v { color: var(--c-wrong); }
.tq-card-v svg { width: 14px; height: 14px; }
.tq-card-place { margin: 6px 0 4px; font-size: 13px; font-weight: 700; color: var(--c-brand); }
.tq-card-a { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--c-text); }
.tq-map { padding: 10px; border-radius: 12px; background: var(--c-surface-2); }
.tq-map-grid { display: grid; gap: 5px; align-items: stretch; }
.tq-map-h { align-self: end; padding: 0 2px 2px; font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--c-brand); }
.tq-map-r { align-self: center; font-size: 11.5px; font-weight: 700; color: var(--c-text-2); }
.tq-map-c { display: flex; flex-wrap: wrap; gap: 5px; align-content: center; min-height: 40px; padding: 5px; border-radius: 8px; background: var(--c-surface); }
.tq-chip { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--c-gold) 70%, transparent); background: transparent; color: var(--tq-n-ink); font: inherit; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: transform 150ms var(--ease), background-color 150ms var(--ease); }
.tq-chip.is-got { background: var(--c-right); border-color: var(--c-right); color: var(--c-on-right); }
.tq-chip.is-missed { background: var(--c-wrong); border-color: var(--c-wrong); color: var(--c-on-wrong); }
.tq-chip.is-cur { background: var(--c-gold); border-color: var(--c-gold); color: #1c1406; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 35%, transparent); transform: scale(1.08); }
.tq-chip:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.tq-card-ask { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--c-border); font-size: 13.5px; color: var(--c-text-2); }
.tq-card-ask b { color: var(--c-gold-ink); }
/* small phones: dots side by side in a cell, a tighter card, so card + map + bar fit a 568 px screen */
@media (max-width: 380px) {
  .tq-chip { width: 26px; height: 26px; font-size: 12px; }
  .tq-map { padding: 8px; }
  .tq-map-c { gap: 4px; min-height: 34px; padding: 4px; }
  .tq-card { padding: 12px 14px 12px; }
  .tq-card-a { font-size: 17px; }
}
@media (max-height: 700px) and (max-width: 640px) {
  .tq-focus { gap: var(--s-2); }
  .tq-card-ask { margin-top: 6px; padding-top: 6px; }
  .tq-map-c { min-height: 32px; }
}

/* ANSWER LOOK (user, 2026-10-22: "make it obvious it is an answer, stop repeating the design of the questions").
   Questions = bold sans-serif headline, gold accents. Answers = a labelled MODEL ANSWER slip: green tint, a green bar
   on the left, the doctor's words in the serif reading face. The recall question sits under the slip, apart. */
.tq-card { background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-border), 0 6px 20px rgb(0 0 0 / 0.12); }
.tq-card.is-got { box-shadow: inset 0 0 0 2px var(--c-right), 0 6px 20px rgb(0 0 0 / 0.12); }
.tq-card.is-missed { box-shadow: inset 0 0 0 2px var(--c-wrong), 0 6px 20px rgb(0 0 0 / 0.12); }
.tq-card-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-brand); }
.tq-card-tag svg { width: 15px; height: 15px; }
.tq-card-tag b { color: var(--c-brand); }
.tq-slip { margin-top: 10px; padding: 10px 14px 12px 16px; border-radius: 10px; background: color-mix(in srgb, var(--c-brand) 13%, var(--c-surface)); box-shadow: inset 4px 0 0 var(--c-brand); }
.tq-slip-place { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--c-text-2); }
.tq-slip .tq-card-a { margin: 0; font-family: var(--font-serif); font-size: 20px; font-weight: 500; line-height: 1.35; letter-spacing: 0; color: var(--c-text); }
.tq-card-ask { margin-top: 12px; padding-top: 0; border-top: 0; font-size: 14px; }
/* the desktop bar quotes the answer the same way */
.tq-tray-place { color: var(--c-brand); text-transform: none; }
.tq-tray-a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 2px 0; padding: 4px 10px 5px 12px; border-radius: 8px; background: color-mix(in srgb, var(--c-brand) 13%, var(--c-surface)); box-shadow: inset 3px 0 0 var(--c-brand); font-family: var(--font-serif); font-size: 16px; font-weight: 500; color: var(--c-text); }
@media (max-width: 380px) { .tq-slip .tq-card-a { font-size: 18px; } .tq-slip { padding: 8px 12px 10px 14px; } }

/* ANSWER v2 (user, 2026-10-22: "make it stand out, look different than everything else, like glowing"): the place is
   a path of two pills (column › row); the answer is a glowing slip that eases in, then breathes softly. */
.tq-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.tq-where-col, .tq-where-row { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.tq-where-col { background: color-mix(in srgb, var(--c-brand) 18%, transparent); color: var(--c-brand); }
.tq-where-row { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-brand) 55%, transparent); color: var(--c-text); }
.tq-where-sep { color: var(--c-text-2); font-weight: 700; }
.tq-slip { position: relative; margin-top: 10px; padding: 14px 16px 15px 18px; border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-right) 20%, var(--c-surface)), color-mix(in srgb, var(--c-right) 8%, var(--c-surface)));
  box-shadow: inset 4px 0 0 var(--c-right), 0 0 0 1px color-mix(in srgb, var(--c-right) 55%, transparent), 0 0 22px color-mix(in srgb, var(--c-right) 30%, transparent); }
.tq-slip .tq-card-a { font-family: var(--font-serif); font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--c-text); }
html.motion .tq-slip { animation: tq-slip-in 420ms cubic-bezier(.2,.8,.2,1) both, tq-slip-glow 2.6s ease-in-out 450ms infinite alternate; }
@keyframes tq-slip-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes tq-slip-glow {
  from { box-shadow: inset 4px 0 0 var(--c-right), 0 0 0 1px color-mix(in srgb, var(--c-right) 55%, transparent), 0 0 14px color-mix(in srgb, var(--c-right) 22%, transparent); }
  to { box-shadow: inset 4px 0 0 var(--c-right), 0 0 0 1px color-mix(in srgb, var(--c-right) 80%, transparent), 0 0 30px color-mix(in srgb, var(--c-right) 45%, transparent); } }
/* desktop bar: the same path and a glowing slip */
.tq-tray-t .tq-where { margin: 2px 0 2px; }
.tq-tray-t .tq-where-col, .tq-tray-t .tq-where-row { min-height: 20px; padding: 1px 8px; font-size: 11.5px; }
.tq-tray-a { background: linear-gradient(135deg, color-mix(in srgb, var(--c-right) 18%, var(--c-surface)), color-mix(in srgb, var(--c-right) 7%, var(--c-surface))); box-shadow: inset 3px 0 0 var(--c-right), 0 0 0 1px color-mix(in srgb, var(--c-right) 50%, transparent), 0 0 16px color-mix(in srgb, var(--c-right) 25%, transparent); font-size: 17px; font-weight: 600; }
@media (max-width: 380px) { .tq-slip .tq-card-a { font-size: 19px; } }

/* MAP DOT v4 (user, 2026-10-22: v2 beat "too much", v3 "toned it down a lot"): the middle. Unmarked dots stay quiet
   grey rings; the current dot is a filled gold dot, larger, with a clear glow that swells and fades (1.8 s) while it
   grows a touch, like a calm heartbeat. No ring going out. Reduced motion: the same dot, still. */
.tq-chip { position: relative; border-color: color-mix(in srgb, var(--muted) 45%, transparent); color: var(--muted); }
.tq-chip.is-cur {
  z-index: 1; color: #1c1406; border-color: #f5c451; transform: scale(1.16);
  background: radial-gradient(circle at 35% 30%, #ffe4a0, var(--c-gold) 65%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 30%, transparent), 0 0 10px color-mix(in srgb, var(--c-gold) 45%, transparent);
}
html.motion .tq-chip.is-cur { animation: tq-calm 1.8s ease-in-out infinite; }
@keyframes tq-calm {
  0%, 100% { transform: scale(1.12); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-gold) 30%, transparent), 0 0 7px color-mix(in srgb, var(--c-gold) 35%, transparent); }
  50% { transform: scale(1.2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-gold) 25%, transparent), 0 0 16px color-mix(in srgb, var(--c-gold) 55%, transparent); }
}

/* MARK FEEDBACK (user, 2026-10-22: like the MCQs): a tap answers back once, under 0.6 s, motion only (the colours are
   there anyway). Recalled = a soft green glow that rises and fades smoothly (about 1 s, eased in and out, no snap); Didn't recall = the MCQ-style shake with a
   brief red glow. On phones the card and the dot just marked answer; on desktop the answer line in the table. */
html.motion .tq-chip.just.is-got { animation: tq-dot-got 900ms cubic-bezier(.22, 1, .36, 1); }
html.motion .tq-chip.just.is-missed { animation: tq-dot-miss 420ms var(--ease); }
html.motion .tq-focus.fb-got .tq-card { animation: tq-card-got 1100ms ease-in-out; }
html.motion .tq-focus.fb-missed .tq-card { animation: tq-card-miss 420ms var(--ease); }
html.motion .tq-item.just.is-got { animation: tq-line-got 1000ms ease-in-out; }
html.motion .tq-item.just.is-missed { animation: tq-line-miss 420ms var(--ease); }
@keyframes tq-dot-got { 0% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } 35% { transform: scale(1.12); box-shadow: 0 0 14px 3px color-mix(in srgb, var(--c-right) 45%, transparent); } 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } }
@keyframes tq-dot-miss { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); box-shadow: 0 0 10px color-mix(in srgb, var(--c-wrong) 50%, transparent); } }
@keyframes tq-card-got { 0%, 100% { box-shadow: inset 0 0 0 1px var(--c-border), 0 6px 20px rgb(0 0 0 / 0.12), 0 0 0 0 transparent, 0 0 0 transparent; } 30% { box-shadow: inset 0 0 0 1px var(--c-border), 0 6px 20px rgb(0 0 0 / 0.12), 0 0 0 2px color-mix(in srgb, var(--c-right) 80%, transparent), 0 0 24px color-mix(in srgb, var(--c-right) 35%, transparent); } }
@keyframes tq-card-miss { 0%, 100% { transform: none; } 18% { transform: translateX(-6px); box-shadow: 0 0 0 2px var(--c-wrong), 0 0 18px color-mix(in srgb, var(--c-wrong) 30%, transparent); } 42% { transform: translateX(5px); } 66% { transform: translateX(-3px); } 85% { transform: translateX(1px); } }
@keyframes tq-line-got { 0% { box-shadow: inset 3px 0 0 var(--c-right), 0 0 0 0 transparent, 0 0 0 transparent; } 30% { box-shadow: inset 3px 0 0 var(--c-right), 0 0 0 2px color-mix(in srgb, var(--c-right) 75%, transparent), 0 0 16px color-mix(in srgb, var(--c-right) 35%, transparent); } 100% { box-shadow: inset 3px 0 0 var(--c-right), 0 0 0 0 transparent, 0 0 0 transparent; } }
@keyframes tq-line-miss { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }

/* ONE EXPERIENCE ON EVERY SCREEN (user, 2026-10-22: "mobile and desktop and all screens have similar experiences").
   The table list (desktop, and "See the whole table" on phones) now speaks the same language as the phone's map:
   - answers you haven't marked stay fully readable (user: "they should only become transparent once you checked"):
     neutral rows with a quiet grey number; only answers already marked fade back;
   - the answer being asked about is the only gold thing, with the same calm heartbeat as the current map dot;
   - the desktop bar answers a tap like the phone card: the quoted answer glows green / the bar shakes. */
.tq.is-marking .tq-item:not(.is-cur) { opacity: 1; }
.tq.is-marking .tq-item:is(.is-got, .is-missed):not(.is-cur) { opacity: 0.5; }
.tq.is-marking .tq-item:is(.is-got, .is-missed):not(.is-cur):hover { opacity: 0.85; }
.tq.is-revealed .tq-item.is-open:not(.is-cur) { background: transparent; box-shadow: inset 0 0 0 1px var(--c-border); }
.tq.is-revealed .tq-item.is-open:not(.is-cur) .tq-n { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--muted) 45%, transparent); }
html.motion .tq.is-marking .tq-item.is-cur { animation: tq-line-calm 1.8s ease-in-out infinite; }
html.motion .tq.is-marking .tq-item.is-cur .tq-n { animation: tq-n-calm 1.8s ease-in-out infinite; }
@keyframes tq-line-calm {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--c-gold), 0 0 0 2px color-mix(in srgb, var(--c-gold) 18%, transparent), 0 0 6px color-mix(in srgb, var(--c-gold) 15%, transparent); }
  50% { box-shadow: inset 0 0 0 2px var(--c-gold), 0 0 0 4px color-mix(in srgb, var(--c-gold) 24%, transparent), 0 0 16px color-mix(in srgb, var(--c-gold) 35%, transparent); }
}
@keyframes tq-n-calm { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
html.motion .tq-tray.fb-got .tq-tray-a { animation: tq-tray-got 1000ms ease-in-out; }
html.motion .tq-tray.fb-missed .tq-tray-q { animation: tq-line-miss 420ms var(--ease); }
@keyframes tq-tray-got {
  0%, 100% { box-shadow: inset 3px 0 0 var(--c-right), 0 0 0 1px color-mix(in srgb, var(--c-right) 50%, transparent), 0 0 16px color-mix(in srgb, var(--c-right) 25%, transparent); }
  30% { box-shadow: inset 3px 0 0 var(--c-right), 0 0 0 2px color-mix(in srgb, var(--c-right) 85%, transparent), 0 0 28px color-mix(in srgb, var(--c-right) 45%, transparent); }
}

/* FLASHCARD TURN (user, 2026-10-22: "you can't flip it back to see the question"). Once flipped, the card turns both
   ways: tap the back (anywhere but its own buttons and the Arabic panel) or "See the question" to turn it to the
   question; tap the question to turn it to the answer again. Same 3D turn as the first flip, both ways. */
.fc-k-row { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; }
.fc-turn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--c-border-strong); background: transparent; color: var(--c-text-2); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; cursor: pointer; }
.fc-turn svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .fc-turn:hover { color: var(--c-text); border-color: var(--c-brand); } }
.fc-turn:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.fc.is-flipped .fc-back[data-act="turn"] { cursor: pointer; }
html.motion .fc.fc-anim-back .fc-in { animation: fc-flip 520ms cubic-bezier(.3,.7,.25,1) both; }
html.motion .fc.fc-anim-front .fc-in { animation: fc-flip-front 520ms cubic-bezier(.3,.7,.25,1) both; }
@keyframes fc-flip-front { from { transform: rotateY(180deg); } 55% { transform: rotateY(-16deg); } to { transform: rotateY(0); } }
@media (prefers-reduced-motion: reduce) { .fc.fc-anim-back .fc-in, .fc.fc-anim-front .fc-in { animation: none !important; } }

/* MCQ "Why" in Egyptian Arabic (user, 2026-10-22: replaces the English whys). Reads like the Arabic panel: Cairo,
   right-aligned, roomy lines; medical terms stay English inside (isolated so the bidi keeps their order). */
.why-ar { font-family: var(--font-ar); font-size: 17px; line-height: 1.9; color: var(--c-text); text-align: right; }
.why-ar p { margin: 0; }
.why-ar p + p { margin-top: var(--s-2); }
@media (min-width: 600px) { .why-ar { font-size: 18px; } }
.rv-why .why-ar { margin-top: 4px; font-size: 16px; }

/* WHERE IT FITS says what it's about (user, 2026-10-22: "EM of what?"): the written question the card comes from,
   in plain text, then the part / table row / case question it belongs to. Readable without the card's question. */
.fc-ctx { margin: 0; font-size: 14.5px; line-height: 1.4; font-weight: 600; color: var(--c-text); }
.fc-ctx-k { display: inline-block; margin-right: 4px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 1px; color: var(--c-text-2); background: color-mix(in srgb, var(--c-text) 8%, transparent); }
.fc-ctx-part { margin: 0; font-size: 13px; color: var(--c-text-2); }
.fc-ctx-part b { color: var(--c-gold-ink); font-weight: 700; }
.fc-ctx + .fc-fit, .fc-ctx-part + .fc-fit { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--c-border); }
/* a cell the doctor left for a picture only shows a dash, in the table and in the phone map (user, 2026-10-22) */
.tq-map-dash { display: inline-grid; place-items: center; width: 26px; height: 26px; color: var(--muted); }

/* MCQ Why (user, 2026-10-22): English again, with the Egyptian Arabic behind the same gold bar as written answers */
.explain .why-ar-bar { display: grid; gap: 8px; margin-top: 12px; }
.explain .why-ar-bar .ar-panel { margin-top: 0; }
.v2 .tag-lecture-mcq { background: var(--c-rec-bg); color: var(--c-rec); }

/* (user, 2026-10-22) after the answer, every other option explains itself: dim the option, keep its note readable */
.v2 .opt.gopt.is-dim { opacity: 1; }
.v2 .opt.gopt.is-dim .gopt-text { opacity: 0.55; }
.v2 .opt.gopt.is-dim .gopt-note { display: block; margin-top: 4px; color: var(--c-text-2); }
.nav-go.is-stay .nav-go-t svg { width: 18px; height: 18px; }

/* four tabs (a subject with cases AND an OSPE tab, 2026-10-22): one row on wide screens, 2 × 2 on phones so every
   label stays readable (has-3 still sets the compact padding and type sizes) */
.mod-tabs.has-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 639px) { .mod-tabs.has-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* PAST-PAPER NOTE (user, 2026-10-22): the recalled wording / answer next to what the lecture says, after the answer.
   Gold edge when the recall is uncertain. The same box on every screen size. */
.pnote { margin-top: var(--s-3); padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--c-border); border-left: 3px solid var(--c-text-2); font-size: 14.5px; color: var(--c-text-2); }
.pnote p { margin: 0; }
.pnote p + p { margin-top: 6px; }
.pnote-h { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--c-text); }
.pnote-h svg { width: 16px; height: 16px; flex: none; }
.pnote-tag { margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--c-rec-bg); color: var(--c-rec); }
.pnote.is-unsure { border-left-color: var(--c-gold); }
.pnote q { font-style: italic; }
.pnote b { color: var(--c-text); font-weight: 600; }

/* OSPE PICTURES (user, 2026-10-23): the practical picture beside the question on wide screens, above it on phones and
   tablets; tap to zoom (a full-screen view, tap the picture again for a 2× closer look). Arrows are drawn by the page,
   in the gold accent with a dark outline so they show on pink and purple stains alike. */
.ospe-fig { margin: 0; }
.ospe-zoom { display: block; width: 100%; padding: 0; border: 1px solid var(--c-border); border-radius: var(--r-md); background: #0b0f0d; overflow: hidden; cursor: zoom-in; position: relative; }
/* the box IS the picture's shape (aspect-ratio from its width/height), capped in height, centred: arrows never drift */
.ospe-pic { --maxh: 52vh; position: relative; display: block; line-height: 0; margin: 0 auto; aspect-ratio: var(--ar); width: min(100%, calc(var(--maxh) * var(--ar))); }
.ospe-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ospe-zoom-ic { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .62); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.ospe-zoom-ic svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) { .ospe-zoom:hover { border-color: var(--c-gold); } }
.ospe-zoom:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
/* the arrow: its tip sits on the point; the shaft trails behind, turned by --a */
.ospe-arrow { position: absolute; width: 58px; height: 18px; transform: translate(-100%, -50%) rotate(var(--a)); transform-origin: 100% 50%; pointer-events: none;
  background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 18'%3E%3Cpath d='M2 9h40' stroke='%23111' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M38 2l18 7-18 7z' fill='%23111' stroke='%23111' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M3 9h38' stroke='%23F2C14E' stroke-width='3.5' stroke-linecap='round'/%3E%3Cpath d='M39.5 4.5l13.5 4.5-13.5 4.5z' fill='%23F2C14E'/%3E%3C/svg%3E"); }
/* wide screens: picture left (sticky), question and options right */
@media (min-width: 900px) {
  .study-main:has(.has-fig) { max-width: 1180px; }
  .study-q.has-fig { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--s-6); align-items: start; }
  .study-q.has-fig > * { grid-column: 2; }
  .study-q.has-fig > .ospe-fig { grid-column: 1; grid-row: 1 / span 12; position: sticky; top: 84px; }
  .study-q.has-fig > .dock { grid-column: 1 / -1; }
  .study-q.has-fig .ospe-pic { --maxh: calc(100vh - 170px); }
}
/* phones: the picture first, compact enough that the question shows under it on the first screen */
@media (max-width: 640px) { .ospe-pic { --maxh: 40vh; } }
/* zoomed view */
.ospe-lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(0, 0, 0, .95); opacity: 0; transition: opacity .2s var(--m-ease, ease); overflow: auto; padding: 48px 12px 40px; }
.ospe-lightbox.is-open { opacity: 1; }
.ospe-lb-in { max-width: 100%; }
.ospe-lightbox .ospe-pic { cursor: zoom-in; }
.ospe-lightbox .ospe-pic { --maxh: calc(100vh - 110px); width: min(calc(100vw - 24px), calc(var(--maxh) * var(--ar))); }
.ospe-lightbox.is-close { place-items: start; }
.ospe-lightbox.is-close .ospe-pic { cursor: zoom-out; }
.ospe-lightbox.is-close .ospe-pic { width: 200vw; }
.ospe-lightbox.is-close .ospe-lb-in { margin: auto; }
.ospe-lightbox.is-close .ospe-arrow { width: 90px; height: 28px; }
.ospe-lb-x { position: fixed; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.ospe-lb-x svg { width: 22px; height: 22px; }
.ospe-lb-tip { position: fixed; left: 0; right: 0; bottom: 10px; margin: 0; text-align: center; color: rgba(255, 255, 255, .75); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ospe-lightbox { transition: none; } }

/* no tap-flash or text-selection on the picture; the picture never animates in on its own (only with its question) */
.ospe-zoom, .ospe-pic img { -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-drag: none; }

/* FIT ONE SCREEN ON PHONES (user, 2026-10-23: "the whole thing should fit the screen, no unnecessary scrolling").
   OSPE: picture + question + "think first" + Show options all on the first screen; once the options are out the picture
   steps down so they fit too (it can always be zoomed). Written / case timed screen: a compact title and clock foot. */
@media (max-width: 640px) {
  .study-q.has-fig { gap: 10px; }
  .study-q.has-fig .ospe-pic { --maxh: max(170px, calc(100svh - 370px)); transition: width .3s var(--m-ease, ease); }
  .study-q.has-fig.is-opts .ospe-pic { --maxh: max(130px, calc(100svh - 560px)); }
  .study-q.has-fig .qcard { padding: 12px 14px; }
  .study-q.has-fig .qcard .q-text { font-size: 19px; line-height: 1.3; }
  .study-q.has-fig .think-panel { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; }
  .study-q.has-fig .think-panel-b { display: flex; align-items: center; gap: 8px; padding: 0; flex: 1; min-width: 0; }
  .study-q.has-fig .think-ic { width: 28px; height: 28px; flex: none; }
  .study-q.has-fig .think-t { margin: 0; font-size: 15px; text-align: left; }
  .study-q.has-fig .think-show { flex: none; width: auto; min-height: 44px; padding: 0 16px; border-radius: var(--r-md); border-top: 0; }
  .study-q.has-fig .dock { padding-top: 6px; padding-bottom: 6px; }
  .study-q.has-fig .opt { min-height: 46px; padding-top: 10px; padding-bottom: 10px; }
  .wq-work .wq-sheet { padding-top: 12px; }
  .wq-work .q-text { font-size: 20px; line-height: 1.3; padding: 4px 0; }
  .wq-work .wq-main { gap: 10px; }
  .wq-work .wq-panel { gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .wq-work .wq-sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wq-work .wq-actions .btn-lg { min-height: 46px; padding-top: 8px; padding-bottom: 8px; font-size: 15px; }
  .wq-work .wq-done { white-space: nowrap; }
}
/* the frame hugs the picture (no black bars beside a shorter picture), on every screen */
.ospe-zoom { width: fit-content; max-width: 100%; margin: 0 auto; }
@media (max-width: 640px) {
  .study-q.has-fig.is-opts .ospe-pic { --maxh: max(120px, calc(100svh - 575px)); }
  .study-q.has-fig .gopts { gap: 6px; }
  .study-q.has-fig .mcq-tools { margin-top: 0; }
}
@media (max-width: 640px) {
  .study-q.wq-work .wq-sheet .wq-main .q-text { font-size: 20px; line-height: 1.3; padding: 2px 0 0; min-height: 0; }
  .study-q.wq-work .wq-main .cs { margin-top: 4px; }
}
@media (max-width: 640px) { .v2 .wq-main:has(.cs) > .q-text, .v2 .wq-main:has(.tq) > .q-text { margin-block: 0 !important; } }

/* LEAVE THIS EXAM? (browser Back in a started session) — same card style as the site, both themes, every screen */
.leave-dlg { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .18s var(--m-ease, ease); }
.leave-dlg.is-open { opacity: 1; }
.leave-card { width: min(420px, 100%); padding: 20px; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); transform: translateY(8px); transition: transform .18s var(--m-ease, ease); }
.leave-dlg.is-open .leave-card { transform: none; }
.leave-card h2 { margin: 0 0 6px; font-size: 20px; color: var(--c-text); }
.leave-card p { margin: 0 0 16px; color: var(--c-text-2); font-size: 15px; line-height: 1.45; }
.leave-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.leave-acts .btn { flex: 1 1 140px; min-height: 46px; }
.leave-go:hover { color: var(--c-wrong); border-color: var(--c-wrong); }
@media (prefers-reduced-motion: reduce) { .leave-dlg, .leave-card { transition: none; } }

/* a picture that is still arriving: a calm placeholder, then the whole picture fades in once (no half-drawn picture) */
.ospe-pic img { transition: opacity .2s var(--m-ease, ease); }
.ospe-pic.is-loading img { opacity: 0; }
.ospe-pic.is-loading { background: linear-gradient(100deg, #10171300 30%, rgba(255, 255, 255, .06) 50%, #10171300 70%) #0f1612; background-size: 220% 100%; animation: ospe-wait 1.2s linear infinite; }
.ospe-pic.is-loading .ospe-arrow { opacity: 0; }
@keyframes ospe-wait { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .ospe-pic.is-loading { animation: none; } .ospe-pic img { transition: none; } }

/* SUPPORT v2 (user, 2026-10-23: "make it pop, make it good looking") */
.sup-menu { width: min(340px, calc(100vw - 24px)); padding: 0 !important; overflow: hidden; border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 0 0 1px var(--c-border); transform-origin: top right; }
.sup-menu:not([hidden]) { animation: sup-in .22s var(--m-ease, ease) both; }
@keyframes sup-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.sup { display: grid; gap: 12px; }
.sup-menu .sup { padding-bottom: 16px; }
.sup-top { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; color: #2B2111;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #F1DCA8 0%, #D9B46A 55%, #C69A4E 100%); }
.sup-top::after { content: ""; position: absolute; right: -18px; bottom: -26px; width: 110px; height: 110px; border-radius: 50%; border: 14px solid rgba(255, 255, 255, .16); }
.sup-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .55); box-shadow: 0 6px 16px rgba(120, 85, 20, .25); }
.sup-ic svg { width: 24px; height: 24px; color: #6B4E1C; }
.sup-tt { min-width: 0; }
.sup-kick { margin: 0 !important; font: 800 11px/1.2 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(43, 33, 17, .7); }
.sup .sup-h { margin: 2px 0 0 !important; font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: #2B2111; }
.sup .sup-x { padding: 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--c-text-2); }
.sup-ticket { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 14px; padding: 12px 12px 12px 16px; border-radius: 14px;
  background: var(--c-surface-2); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-gold) 55%, transparent); }
.sup-ticket::before, .sup-ticket::after { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--c-surface); }
.sup-ticket::before { left: -7px; } .sup-ticket::after { right: -7px; }
.sup-tk-l { flex: 1; min-width: 0; display: grid; gap: 4px; padding-right: 10px; border-right: 1.5px dashed color-mix(in srgb, var(--c-gold) 45%, transparent); }
.sup-ticket .sup-k { justify-self: start; padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #2B2111; background: var(--c-gold); }
.sup-code { overflow-wrap: anywhere; font: 700 16px/1.3 var(--font-ui); color: var(--c-text); background: none; }
.sup-ticket.is-soon .sup-code { color: var(--c-text-2); font-weight: 600; font-size: 15px; }
.sup-soon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 14%, transparent); }
.sup-soon svg { width: 20px; height: 20px; }
.sup-ticket .sup-copy { height: 42px; padding: 0 16px; background: var(--c-gold); color: #2B2111; box-shadow: 0 4px 12px color-mix(in srgb, var(--c-gold) 35%, transparent); }
@media (hover: hover) and (pointer: fine) { .sup-ticket .sup-copy:hover { filter: brightness(1.06); } }
.sup .sup-how { padding: 0 18px; margin: -4px 0 0 !important; font-size: 12.5px; color: var(--c-text-2); }
/* the header button: a soft shine passes over it now and then; the cup tips when you point at it */
.hdr-coffee { position: relative; overflow: hidden; }
.hdr-coffee::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); animation: sup-shine 6s ease-in-out 2s infinite; pointer-events: none; }
@keyframes sup-shine { 0%, 82% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (hover: hover) and (pointer: fine) { .hdr-coffee:hover svg { transform: rotate(-12deg); } }
.hdr-coffee svg { transition: transform .2s var(--m-ease, ease); }
/* the phone menu: the same card, framed */
.dr-support { padding: 0 !important; overflow: hidden; border-radius: 18px !important; }
.dr-support .sup { padding-bottom: 16px; }
@media (prefers-reduced-motion: reduce) { .sup-menu:not([hidden]), .hdr-coffee::after { animation: none; } }
.sup-menu.is-fading { animation: none; opacity: 0; transform: translateY(-4px) scale(.98); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
/* SESSION HEADER, mid widths (user, 2026-10-24: the trail ran over the OSPE chip and the progress pill).
   The trail can never spill: long crumbs truncate. From 761 to 1100 px the two-line title replaces the trail. */
.sb2-trail ol { overflow: hidden; }
.sb2-crumb { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 761px) and (max-width: 1100px) {
  .sb2-trail { display: none; }
  .sb2-title { display: grid; flex: 1; min-width: 0; gap: 2px; padding: 4px 6px; border: 0; border-radius: var(--r-sm); background: none; text-align: left; cursor: pointer; line-height: 1.2; }
  .sb2-t1 { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb2-t2 { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; color: var(--c-text); white-space: nowrap; overflow: hidden; }
  .sb2-title.is-armed::after { left: 6px; transform: none; }
  .v2 .sb2-prog .pos-left { display: none; }
}
/* the short "0/27" pill is for phones only: above 760 px the full pill shows alone (it was doubled, 2026-10-24) */
@media (min-width: 761px) { .v2 .sb2-prog-s { display: none; } }
/* (user, 2026-10-26: buttons shook while scrolling on iPad) touch screens: no :active scaling at all; the press is the
   JS one (is-pressed), which waits a moment and is cancelled as soon as the finger moves or the page scrolls */
@media (hover: none) {
  html.motion :is(button, a, .btn, .opt, .mk, .hp-cov, .nav-go, .nav-stay, .fc-front):active:not(.is-pressed) { transform: none !important; }
}
/* OSPE PICTURES, ONE SIZE (user, 2026-10-26: "I need the images to be the same size" + small screens). Every picture sits
   in the same frame (same height on a given screen); the picture is fitted inside it at its own shape, so the arrows still
   land where they should, and the dark frame fills the rest. */
.study-q.has-fig { --fh: min(52vh, 520px); }
.study-q.has-fig .ospe-zoom { width: 100%; height: var(--fh); display: flex; align-items: center; justify-content: center; }
.study-q.has-fig .ospe-pic { width: min(100%, calc(var(--fh) * var(--ar))); max-height: var(--fh); margin: 0; }
@media (min-width: 900px) { .study-q.has-fig { --fh: min(calc(100vh - 190px), 560px); } }
@media (min-width: 641px) and (max-width: 899px) { .study-q.has-fig { --fh: min(44vh, 460px); } }
@media (max-width: 640px) {
  .study-q.has-fig { --fh: max(190px, min(40svh, calc(100svh - 380px))); }
  .study-q.has-fig.is-opts { --fh: max(140px, calc(100svh - 570px)); }
}
/* GROUPED ANSWERS (user, 2026-10-26 "table answer system"): each group's points under its own heading, side by side
   with the heading on wide screens (like a two-column table), stacked on phones */
.apg-wrap { display: grid; gap: 10px; }
.apg { display: grid; grid-template-columns: minmax(120px, 0.32fr) 1fr; gap: 0; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; background: var(--c-surface); }
.apg-h { margin: 0; padding: 12px 14px; font-size: 14px; font-weight: 700; color: var(--c-brand); background: color-mix(in srgb, var(--c-brand) 8%, var(--c-surface)); border-right: 1px solid var(--c-border); display: flex; align-items: center; }
.apg .aps { margin: 0; border: 0; border-radius: 0; }
@media (max-width: 640px) {
  .apg { grid-template-columns: 1fr; }
  .apg-h { border-right: 0; border-bottom: 1px solid var(--c-border); padding: 8px 12px; }
}

/* grouped answers: each item starts with a capital, whatever the data says (2026-10-26) */
.apg .ap-text::first-letter { text-transform: uppercase; }
.w-why { border-left-color: var(--c-gold, #c9a227); }

/* Lecture summary (user, 2026-10-27): a button on the lecture page + a reading page of short notes */
.lec-sum { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--c-gold); border-radius: 16px; background: color-mix(in srgb, var(--c-gold) 10%, var(--c-surface)); color: var(--c-text); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.lec-sum:hover, .lec-sum:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 20px var(--c-shadow); }
.lec-sum-k { flex: none; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-gold-ink); padding: 6px 10px; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-gold); }
.lec-sum-t { flex: 1; font-size: 15px; line-height: 1.4; }
.lec-sum-go { flex: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--c-brand); }
.lec-sum-go svg { width: 16px; height: 16px; }
.summary-page { max-width: 820px; }
.sum-lead { margin: 8px 0 0; color: var(--c-text-2); font-size: 16px; line-height: 1.55; }
.sum-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.sum-toc a { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); text-decoration: none; }
.sum-toc a:hover { border-color: var(--c-brand); color: var(--c-brand); }
.sum-sec { margin: 18px 0; padding: 18px 20px; border: 1px solid var(--c-border); border-radius: 16px; background: var(--c-surface); scroll-margin-top: 90px; }
.sum-h { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 19px; line-height: 1.3; }
.sum-n { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-brand); color: var(--c-on-brand); font-size: 14px; font-weight: 700; }
.sum-exam { display: inline-block; margin: 0 0 10px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--c-fire-bg); color: var(--c-fire); }
.sum-pts { margin: 0; padding-left: 20px; display: grid; gap: 7px; font-size: 15.5px; line-height: 1.55; }
.sum-pts strong { color: var(--c-brand); }
.sum-ar { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--c-gold) 9%, var(--c-surface)); border-right: 3px solid var(--c-gold); font-size: 15.5px; line-height: 1.8; }
.sum-end { margin: 26px 0 10px; padding: 18px 20px; border-radius: 16px; background: var(--c-surface-2); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sum-end p { margin: 0 auto 0 0; font-weight: 700; }
@media (max-width: 640px) {
  .lec-sum { flex-wrap: wrap; padding: 14px; gap: 8px 10px; }
  .lec-sum-t { flex-basis: 100%; order: 3; font-size: 14px; }
  .lec-sum-go { margin-left: auto; }
  .sum-sec { padding: 14px; }
  .sum-h { font-size: 17px; }
  .sum-pts { font-size: 15px; }
  .sum-toc { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .sum-toc a { flex: none; }
  .sum-end p { flex-basis: 100%; }
}

/* (user, 2026-10-27) the OSPE picture keeps one size: it never shrinks when the options open or when you scroll / zoom */
.study-q.has-fig { --fh: 460px; }
.study-q.has-fig.is-opts { --fh: 460px; }
@media (min-width: 641px) and (max-width: 899px) { .study-q.has-fig, .study-q.has-fig.is-opts { --fh: 400px; } }
@media (max-width: 640px) { .study-q.has-fig, .study-q.has-fig.is-opts { --fh: 250px; } }
.study-q.has-fig .ospe-pic, .study-q.has-fig.is-opts .ospe-pic { --maxh: var(--fh); transition: none; }

/* (user, 2026-10-27) the InstaPay address always fits on one line */
.sup-code { overflow-wrap: normal; white-space: nowrap; font-size: 15px; letter-spacing: -.01em; }
.sup-ticket { padding-left: 14px; gap: 8px; }
.sup-ticket .sup-copy { padding: 0 12px; }
@media (max-width: 380px) { .sup-code { font-size: 13.5px; } .sup-ticket .sup-copy span { display: none; } }

/* (user, 2026-10-27: "see those empty spaces") big screens: the home hero starts near the top instead of floating
   in a tall empty screen, and the page uses more of the width */
@media (min-width: 1100px) {
  .hp { min-height: clamp(560px, calc(100svh - 64px), 780px); align-content: start; padding-top: clamp(48px, 9vh, 110px) !important; }
}
@media (min-width: 1500px) { :root { --wrap: 1280px; } }
@media (min-width: 960px) { .wrap.hp-grid { margin-inline: auto; max-width: var(--wrap); } }

/* (user, 2026-10-27: "the sections don't fit, it feels too zoomed in") laptop screens: How it works fits one screen */
@media (min-width: 960px) and (max-height: 960px) {
  .hw { padding: 76px 0 36px; }
  .hw-inner { gap: 26px; }
  .hw-title { font-size: clamp(26px, 2.8vw, 36px); }
  .hw-n { width: 38px; height: 38px; margin-bottom: 4px; }
  .hw-t { font-size: 20px; }
  .hw-x { font-size: 14px; line-height: 1.5; }
  .hw-mini { min-height: 100px; margin-top: 8px; padding: 12px; }
  .hw-foot { padding-top: 16px; }
  .hw-fb-b { min-height: 42px; }
}

/* (user, 2026-10-27, iPhone) the phone menu scrolls, and its end clears Safari's floating bottom bar */
.drawer { display: block; overflow: hidden; }
.drawer .dr-body { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }

/* (user, 2026-10-27) OSPE on phones: "Think of the answer first" gets a full line, Show options its own row */
@media (max-width: 640px) {
  .study-q.has-fig .think-panel { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; }
  .study-q.has-fig .think-panel-b { justify-content: center; }
  .study-q.has-fig .think-t { text-align: center; white-space: nowrap; font-size: 15.5px; }
  .study-q.has-fig .think-show { width: 100%; min-height: 46px; justify-content: center; border-top: 1px solid var(--c-border); border-radius: var(--r-md); }
}

/* Auto-next switch (student feedback + user, 2026-10-27): above the question on every MCQ / OSPE screen, always visible.
   On = answers move on by themselves (countdown); Off = a plain Next waits. Saved on the device like the theme. */
.auto-row { display: flex; justify-content: flex-end; margin-bottom: -4px; }
.auto-sw { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px 4px 14px; border: 1.5px solid var(--c-border-strong); border-radius: 999px; background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.auto-sw:hover { border-color: var(--c-brand); }
.auto-sw:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.auto-sw.is-on { border-color: var(--c-brand); background: var(--c-checked); }
.auto-sw-k { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--c-border-strong); transition: background .18s ease; flex: none; }
.auto-sw-k::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .18s ease; }
.auto-sw.is-on .auto-sw-k { background: var(--c-brand); }
.auto-sw.is-on .auto-sw-k::after { transform: translateX(14px); }
.auto-sw-v { min-width: 2em; font-size: 13px; color: var(--c-text-2); }
.auto-sw.is-on .auto-sw-v { color: var(--c-brand); }
@media (prefers-reduced-motion: reduce) { .auto-sw, .auto-sw-k, .auto-sw-k::after { transition: none; } }

/* five tabs (user, 2026-10-27: a Past papers tab on every subject; Lectures | Past papers | OSPE | Case scenarios |
   Mixed exam): one row on wide screens; below that 3 + 2 in two rows, so a phone's first screen still shows the content */
.mod-tabs.has-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 899px) {
  .mod-tabs.has-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mod-tabs.has-5 .mod-tab { grid-column: span 2; }
  .mod-tabs.has-5 .mod-tab:nth-child(n+4) { grid-column: span 3; }
}

/* QUICK NOTE (user, 2026-10-27): Full feedback | Quick note switch, and the note card */
.fb-sw { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--c-surface-2); border: 1px solid var(--c-border); justify-self: start; }
.fb-sw-b { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 999px; color: var(--c-text-2); font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.fb-sw-b:hover { color: var(--c-text); }
.fb-sw-b.is-on { background: var(--c-surface); color: var(--c-brand); box-shadow: 0 1px 3px rgb(var(--c-shadow) / 0.12); }
.fb-sw-b:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.fb-note-form { display: grid; gap: var(--s-4); }
.fb-note-card { display: grid; gap: 10px; padding: var(--s-5); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
.fb-note-l { margin: 0 !important; font-weight: 700; font-size: 16px; color: var(--c-text); }
.fb-note-l + .fb-hint { margin-top: -6px !important; }
.fb-note-opt { font-weight: 500; font-size: 13px; color: var(--c-text-2); margin-left: 6px; }
.fb-note-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
@media (max-width: 480px) { .fb-note-kinds { grid-template-columns: minmax(0, 1fr); } .fb-note-card { padding: var(--s-4); } }
.fb-note-card textarea {
  width: 100%; min-height: 150px; padding: 12px 14px; border-radius: var(--r-md); resize: vertical;
  background: var(--c-bg); border: 1px solid var(--c-border-strong); color: var(--c-text); font: inherit; font-size: 16px; line-height: 1.5;
}
.fb-note-card textarea:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px rgb(var(--c-shadow) / 0.06); }
.fb-done-acts { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.fb-done-text[lang="ar"] { font-size: 17px; }

/* (user, 2026-10-27) two ways to support: InstaPay in purple, Vodafone Cash in red, each with its mark beside the name */
.sup-ticket.is-ip { --pm: #5B2C86; --pm-text: #5B2C86; }
.sup-ticket.is-vf { --pm: #E60000; --pm-text: #C40000; }
:root[data-theme="dark"] .sup-ticket.is-ip { --pm: #7A45AE; --pm-text: #C7A3EC; }
:root[data-theme="dark"] .sup-ticket.is-vf { --pm-text: #FF7A7A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sup-ticket.is-ip { --pm: #7A45AE; --pm-text: #C7A3EC; } :root:not([data-theme="light"]) .sup-ticket.is-vf { --pm-text: #FF7A7A; } }
.sup-ticket.is-ip, .sup-ticket.is-vf { background: color-mix(in srgb, var(--pm) 7%, var(--c-surface-2)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pm) 50%, transparent); }
.sup-ticket.is-ip .sup-tk-l, .sup-ticket.is-vf .sup-tk-l { border-right-color: color-mix(in srgb, var(--pm) 40%, transparent); }
.sup-ticket .sup-k:has(.sup-logo) { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; color: var(--pm-text); font-size: 11.5px; letter-spacing: .08em; }
.sup-logo { flex: none; width: 20px; height: 20px; border-radius: 6px; }
.is-vf .sup-logo { border-radius: 50%; }
.sup-ticket.is-ip .sup-copy, .sup-ticket.is-vf .sup-copy { background: var(--pm); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--pm) 35%, transparent); }
.sup-ticket.is-ip .sup-copy.is-done, .sup-ticket.is-vf .sup-copy.is-done { background: var(--c-got, #2F7A4F); }
.sup-ticket.is-ip .sup-soon { color: var(--pm-text); background: color-mix(in srgb, var(--pm) 14%, transparent); }
.sup-ticket.is-vf .sup-code { letter-spacing: .04em; }


/* results (user, 2026-10-27): Review · Try again · Exit as real buttons in one tidy row */
.rs-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; max-width: 560px; margin-inline: auto; width: 100%; }
.rs-btn { min-height: 48px; gap: 8px; justify-content: center; font-weight: 700; }
.rs-btn svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .rs-exit:hover { border-color: var(--c-wrong); color: var(--c-wrong); } }

/* Skip (user, 2026-10-27): a quiet link under the written controls and under a flashcard */
.wq-skip, .fc-skip { justify-self: center; align-self: center; margin: 2px auto 0; min-height: 36px; font-size: 13.5px; font-weight: 600; color: var(--c-text-2); }
.wq-skip span { font-weight: 500; opacity: .8; }
.wq-panel .wq-skip { grid-column: 1 / -1; }
.fc-dock .fc-skip { display: block; }
@media (hover: hover) and (pointer: fine) { .wq-skip:hover, .fc-skip:hover { color: var(--c-text); } }
.rp-stat.is-skip dd { color: var(--c-text-2); }

/* (user, 2026-10-27: "a big box and small text and timer") phones, timed written screen: the question reads big and
   the clock is the centre of the screen (big ring, time in large figures) above the two buttons, so the sheet is
   filled with what matters instead of empty space. Cases and tables keep the compact foot (their text needs room). */
@media (max-width: 640px) {
  .study-q.wq-work .wq-sheet:not(.is-done):not(:has(.cs, .tq)) .wq-main .q-text { font-size: 24px; line-height: 1.3; letter-spacing: -0.012em; }
  .wq-sheet:not(.is-done):not(:has(.cs, .tq)) .wq-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tm" "status" "actions"; justify-items: center; text-align: center; gap: 10px; padding-top: 16px; }
  .wq-sheet:not(.is-done):not(:has(.cs, .tq)) .wq-panel .tm { width: 118px; height: 118px; }
  .wq-sheet:not(.is-done):not(:has(.cs, .tq)) .wq-panel .tm-time { font-size: 30px; }
  .wq-sheet:not(.is-done):not(:has(.cs, .tq)) .wq-panel .tm-of { display: block; margin-top: 4px; font-size: 12.5px; }
  .wq-sheet:not(.is-done):not(:has(.cs, .tq)) .wq-panel .tm-read { display: grid; justify-items: center; }
  .wq-sheet:not(.is-done):not(:has(.cs, .tq)) .wq-panel .wq-actions { width: 100%; }
  .wq-sheet:not(.is-done):not(:has(.cs, .tq)) .wq-state { font-size: 14px; color: var(--c-text-2); font-weight: 600; }
  .wq-sheet:not(.is-done) .wq-skip { min-height: 30px; margin-top: -2px; font-size: 13px; }
}
/* (user, 2026-10-27: "it should still be visible after solving") the same switch, small, right above Next / Stay */
.auto-row.is-dock { margin: 0 0 6px; }
.auto-row.is-dock .auto-sw { min-height: 30px; padding: 2px 10px 2px 12px; font-size: 13px; background: var(--c-surface); }
.auto-row.is-dock .auto-sw-k { width: 30px; height: 18px; }
.auto-row.is-dock .auto-sw-k::after { width: 14px; height: 14px; }
.auto-row.is-dock .auto-sw.is-on .auto-sw-k::after { transform: translateX(12px); }
/* the past-paper note opens on a tap (closed: one line) */
summary.pnote-h { list-style: none; cursor: pointer; min-height: 28px; }
summary.pnote-h::-webkit-details-marker { display: none; }
.pnote-chev { margin-left: auto; display: inline-grid; transition: transform .2s var(--ease); }
.pnote-chev svg { width: 16px; height: 16px; }
.pnote[open] .pnote-chev { transform: rotate(180deg); }
.pnote[open] summary.pnote-h { margin-bottom: 6px; }

/* (user, 2026-10-27: "the phone view needs a ton of work… reduce the image size for phones") OSPE on phones: a smaller
   picture (tap to zoom for detail) that hugs its frame, and before an answer the bar under the options (only Back /
   Exit in it) scrolls with the page instead of covering the options. Everything fits the first screen. */
@media (max-width: 640px) {
  .study-q.has-fig, .study-q.has-fig.is-opts { --fh: 190px; }
  .study-q.has-fig .ospe-zoom { width: fit-content; max-width: 100%; margin-inline: auto; }
  .study-q.has-fig .auto-row:not(.is-dock) { margin-bottom: -8px; }
  .study-q.has-fig .auto-row:not(.is-dock) .auto-sw { min-height: 32px; font-size: 13px; }
  .study-q.has-fig .qcard { padding-top: 12px; padding-bottom: 12px; }
}
@media (max-width: 900px) { .dock:has(.nav-fill) { position: static; box-shadow: none; } }

/* (user, 2026-10-27: "you shouldn't be able to scroll in flashcards on phones… make it fit") phones: a taller card,
   a tighter back (the answer, at most three lines of where it fits, a short why), nothing scrolls inside it */
@media (max-width: 560px) {
  .fc-q .fc { height: clamp(300px, calc(100svh - 268px), 600px); }
  .fc-q .fc-back { overflow: hidden; gap: 10px; padding: 18px 16px 14px; }
  .fc-q .fc-back .fc-a { font-size: 19px; line-height: 1.3; }
  .fc-q .fc-sec { padding: 9px 11px; gap: 4px; }
  .fc-q .fc-why { font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .fc-q .fc-ctx { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
  .fc-q .fc-fit li { font-size: 13px; line-height: 1.35; padding-block: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .fc-q .fc-back .explain-src { display: none; }
  .fc-q .dock { gap: 6px; padding-top: 8px; }
  .fc-q .mark-ask { margin: 0; font-size: 14px; }
  .fc-q .fc-skip { min-height: 30px; }
}

/* (user, 2026-10-27: "scrolling / buttons are shaky on phones, tablets, iPads") touch screens: the sticky bars are solid
   (a blurred see-through bar is redrawn on every scroll frame on iOS and stutters), and nothing moves on a sticky :hover */
@media (hover: none) {
  .site-header, .sb2 { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--c-bg) !important; }
  .opt:hover, .btn:hover, .as-row:hover, .lec-row:hover, .type-card:hover, .subject-card:hover { transform: none !important; }
}

/* =====================================================================
   WRITTEN v3 (user, 2026-10-27: "the written look has so much potential… how the answers are organised, how they are
   checked… find the perfect balance"). Calm and organised: the answer is ONE card that reads like a corrected exam
   paper, the check happens on the line you are reading, a meter in the foot fills as you go. Few colours, each with
   one job: brand green = structure, gold = the point being checked, green / red = recalled / not recalled.
   ===================================================================== */

/* ---- the timed screen fills the phone screen exactly (no scroll) and the question sits in the middle ---- */
#app:has(.wq-sheet:not(.is-done)) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
#app:has(.wq-sheet:not(.is-done)) > .study-main { flex: 1 0 auto; display: flex; flex-direction: column; padding-bottom: 0; }
.study-q.wq-work:has(> .wq-sheet:not(.is-done)) { flex: 1 0 auto; display: flex; flex-direction: column; }
.wq-sheet:not(.is-done) { flex: 1 0 auto; min-height: 0; }
.wq-sheet:not(.is-done):not(:has(.cs, .tq)) .wq-main { justify-content: center; align-items: center; text-align: center; }
.wq-sheet:not(.is-done):not(:has(.cs, .tq)) .wq-main .q-top .tags { justify-content: center; }
.v2 .wq-sheet:not(.is-done):not(:has(.cs, .tq)) .wq-main > .q-text { margin-block: 0 !important; max-width: 30ch; text-wrap: balance; }

/* ---- the answer screen: the page background, cards on it ---- */
.wa .wq-sheet.is-done { display: block; min-height: 0; margin: 0; padding: 4px 0 0; background: transparent; border-top: 0; overflow: visible; }
.wa .wq-sheet.is-done > * + * { margin-top: 16px; }
.v2 .wa .wq-sheet.is-done .wq-main > .q-text { font-size: 20px; line-height: 1.35; color: var(--c-text); }
@media (min-width: 768px) { .v2 .wa .wq-sheet.is-done .wq-main > .q-text { font-size: 24px; } }
.wa .wq-main { gap: 8px; }
.wa-time { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 2px 0 0 !important; padding: 4px 10px; border-radius: 999px;
  font: 600 13px/1.2 var(--font-ui); color: var(--c-text-2); background: var(--c-surface-2); }
.wa-time svg { width: 14px; height: 14px; }
.wq-sheet.is-end .wa-time { color: var(--c-miss); background: var(--c-miss-bg); }

/* ---- the MODEL ANSWER card ---- */
.wa-card { display: block !important; border-radius: 18px; overflow: hidden; background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-border), 0 8px 24px rgb(var(--c-shadow) / .06); }
.wa-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: var(--c-brand); color: var(--c-on-brand); }
.wa-h { margin: 0 !important; font: 800 12.5px/1.2 var(--font-ui) !important; letter-spacing: .14em; text-transform: uppercase; color: inherit !important; }
.wa-n { font: 600 12.5px/1 var(--font-ui); opacity: .85; }
.wa-help { margin: 0 !important; padding: 10px 18px; font-size: 13.5px; color: var(--c-text-2); border-bottom: 1px solid var(--c-border); background: color-mix(in srgb, var(--c-brand) 4%, var(--c-surface)); }
.wa-card > .tq, .wa-card > .tq-focus { margin: 14px; }
.wa-card > .tq-full { margin: 0 14px 12px; }

/* the sheet inside the card */
.as { --as-k: minmax(96px, 32%); margin: 0; }
.as-cols { display: grid; grid-template-columns: 28px var(--as-k) minmax(0, 1fr) 22px; gap: 0 14px; padding: 9px 18px; font: 700 11.5px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-text-2); border-bottom: 1px solid var(--c-border); background: color-mix(in srgb, var(--c-brand) 4%, var(--c-surface)); }
.as-cols span:first-child { grid-column: 2; }
.as-sec + .as-sec { border-top: 1px solid var(--c-border); }
.as-gh { display: flex; align-items: center; gap: 8px; margin: 0 !important; padding: 10px 18px 8px; font: 800 11.5px/1.3 var(--font-ui) !important; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-brand) !important; background: color-mix(in srgb, var(--c-brand) 7%, var(--c-surface)); border-bottom: 1px solid var(--c-border); }
.as-gh.is-ask { text-transform: none; letter-spacing: 0; font-size: 15px !important; font-weight: 700 !important; color: var(--c-text) !important; line-height: 1.35; align-items: flex-start; }
.as-ask-n { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; background: var(--c-brand); color: var(--c-on-brand); font-size: 12px; font-weight: 800; }
.as-row { position: relative; transition: background-color 200ms var(--ease), opacity 200ms var(--ease); }
.as-row + .as-row { border-top: 1px solid color-mix(in srgb, var(--c-border) 75%, transparent); }
.as-row.is-cont { border-top-color: transparent; }
.as-row.is-cont .as-hit { padding-top: 0; }
.as-hit { display: grid; grid-template-columns: 28px minmax(0, 1fr) 22px; align-items: baseline; gap: 0 14px; width: 100%; margin: 0; padding: 13px 18px; border: 0; background: transparent;
  font: inherit; color: var(--c-text); text-align: left; border-radius: 0; }
.as.is-keyed .as-hit { grid-template-columns: 28px var(--as-k) minmax(0, 1fr) 22px; }
.as.is-keyed .as-row.is-wide .as-v { grid-column: 2 / 4; }
button.as-hit { cursor: pointer; }
button.as-hit:focus-visible { outline: 2px solid var(--c-gold); outline-offset: -3px; }
.as-n { display: inline-grid; place-items: center; align-self: start; width: 24px; height: 24px; border-radius: 50%; font: 700 11.5px/1 var(--font-ui); color: var(--c-text-2); background: var(--c-surface-2); }
.as-k { font: 650 15px/1.4 var(--font-ui); color: var(--c-brand); }
.as-v { font-family: var(--font-serif); font-size: 17px; line-height: 1.45; color: var(--c-text); }
.as.is-keyed .as-v::first-letter { text-transform: uppercase; }
.as-st { display: inline-grid; place-items: center; align-self: start; width: 22px; height: 22px; border-radius: 50%; }
.as-st svg { width: 13px; height: 13px; stroke-width: 3; }
.as-row.is-got .as-st { background: var(--c-right); color: var(--c-on-right); }
.as-row.is-missed .as-st { background: var(--c-wrong); color: var(--c-on-wrong); }
.as-row.is-got .as-n { color: var(--c-right); background: color-mix(in srgb, var(--c-right) 14%, transparent); }
.as-row.is-missed .as-n { color: var(--c-wrong); background: color-mix(in srgb, var(--c-wrong) 14%, transparent); }
@media (hover: hover) and (pointer: fine) { .as-row:not(.is-cur) button.as-hit:hover { background: color-mix(in srgb, var(--c-text) 4%, transparent); } }
/* while checking, what is done steps back so the open point stands out */
.as.is-marking .as-row:is(.is-got, .is-missed):not(.is-cur) { opacity: .55; }
/* the open point: gold, with its two buttons right under the text */
.as-row.is-cur { opacity: 1; background: color-mix(in srgb, var(--c-gold) 11%, var(--c-surface)); box-shadow: inset 4px 0 0 var(--c-gold); }
.as-row.is-cur .as-n { background: var(--c-gold); color: #1c1406; }
.as-row.is-cur .as-v { font-weight: 500; }
.as-check { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 18px 14px calc(18px + 28px + 14px); }
.as-ask { grid-column: 1 / -1; font-size: 13px; color: var(--c-text-2); }
.as-ask b { color: var(--c-gold-ink); }
.as-check button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 12px; border-radius: 12px; font: 700 14.5px/1 var(--font-ui); cursor: pointer;
  transition: transform 120ms var(--ease), background-color 150ms var(--ease); }
.as-check button svg { width: 16px; height: 16px; }
.as-no { border: 1.5px solid color-mix(in srgb, var(--c-wrong) 55%, var(--c-border)); background: var(--c-surface); color: var(--c-wrong); }
.as-yes { border: 1.5px solid var(--c-right); background: var(--c-right); color: var(--c-on-right); }
.as-no.is-on { background: var(--c-wrong); color: var(--c-on-wrong); border-color: var(--c-wrong); }
@media (hover: hover) and (pointer: fine) { .as-no:hover { background: color-mix(in srgb, var(--c-wrong) 8%, var(--c-surface)); } .as-yes:hover { filter: brightness(1.05); } }
.as-check button:active { transform: scale(.97); }
.as-check button:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
/* all checked: reads like a corrected paper, the lines not recalled tinted */
.as.is-checked .as-row.is-missed { background: color-mix(in srgb, var(--c-wrong) 7%, var(--c-surface)); box-shadow: inset 3px 0 0 var(--c-wrong); }
.as.is-checked .as-row.is-got { box-shadow: inset 3px 0 0 var(--c-right); }
/* a point just checked answers back once */
html.motion .as-row.just.is-got { animation: wa-got 650ms ease-out; }
html.motion .as-row.just.is-missed { animation: wa-miss 360ms var(--ease); }
@keyframes wa-got { from { background: color-mix(in srgb, var(--c-right) 22%, var(--c-surface)); } }
@keyframes wa-miss { 0%, 100% { transform: none; } 30% { transform: translateX(-3px); } 70% { transform: translateX(3px); } }

/* ---- the result, once everything is checked ---- */
.wa-result { display: flex !important; align-items: center; gap: 14px; margin: 0 !important; padding: 14px 16px; border-radius: 16px; font-size: 14.5px !important; line-height: 1.45;
  background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-border), inset 4px 0 0 var(--c-gold); color: var(--c-text); }
.wa-result p { margin: 0; }
.wa-score { flex: none; font: 700 30px/1 var(--font-serif); color: var(--c-text); }
.wa-score i { font-style: normal; font-size: 18px; color: var(--c-text-2); }
.wa-result.is-all { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-right) 50%, var(--c-border)), inset 4px 0 0 var(--c-right); background: color-mix(in srgb, var(--c-right) 7%, var(--c-surface)); }
.wa-result.is-all .wa-score { color: var(--c-right); }
.wa-result.is-low { box-shadow: 0 0 0 1px var(--c-border), inset 4px 0 0 var(--c-wrong); }

/* ---- understand it: Arabic, why, key phrases, past-paper note ---- */
.wa-more { display: grid; gap: 10px; }
.wa-k { margin: 0 !important; font: 800 11.5px/1.2 var(--font-ui) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-2) !important; }
.wa-more .ar-bar { margin: 0; }
.wa-phr { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-border); }
.wa-phr .phrases { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wa-phr .phrases li { margin: 0; padding: 4px 10px; border: 0; border-radius: 999px; font-family: var(--font-serif); font-style: italic; font-size: 14.5px; color: var(--c-text); background: var(--c-surface-2); }
.wa-phr .phrases li::before { display: none; }
.wa-more .pnote { margin-top: 0; background: var(--c-surface); }

/* ---- the foot: a meter (one segment per point) + what is left + the buttons ---- */
.wa .wq-sheet.is-done .wq-foot.wa-foot { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: none; align-items: center; gap: 10px 18px;
  margin: 16px calc(-1 * var(--pad)) 0; padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom)); background: var(--c-bg); border-top: 1px solid var(--c-border); }
.wa-foot > * { grid-area: auto !important; }
.wa-prog { display: grid; gap: 7px; min-width: 0; }
.wm { display: flex; gap: 3px; height: 7px; }
.wm-s { flex: 1; border-radius: 4px; background: var(--c-border); transition: background-color 250ms var(--ease); }
.wm-s.is-got { background: var(--c-right); }
.wm-s.is-missed { background: var(--c-wrong); }
.wm-s.is-cur { background: var(--c-gold); }
.wa-tally { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 !important; font-size: 13.5px; color: var(--c-text-2); }
.wa-tally b { color: var(--c-text); }
.wa-tally .wa-got { color: var(--c-right); font-weight: 600; }
.wa-tally .wa-miss { color: var(--c-wrong); font-weight: 600; }
.wa-tally .t-jump { min-height: 32px; padding: 0 2px; margin-left: auto; font-size: 13.5px; }
.wa-foot .wq-actions { display: flex; gap: 8px; }
.wa-foot .wq-actions .btn-lg { min-height: 48px; }
.wa-foot.has-tray { grid-template-columns: minmax(0, 1fr); }
.wa .wq-sheet.is-done .wq-foot.wa-foot.has-tray { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) {
  .wa .wq-sheet.is-done .wq-foot.wa-foot { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 10px; }
  .wa-foot .wq-actions { width: 100%; }
  .wa-foot .wq-actions .wq-done { flex: 1; }
  .wa-foot .wq-actions .wq-pause span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wa-head, .wa-help { padding-inline: 14px; }
  .as { --as-k: minmax(80px, 34%); }
  .as-hit, .as.is-keyed .as-hit { gap: 0 10px; padding: 12px 14px; grid-template-columns: 24px minmax(0, 1fr) 20px; }
  .as.is-keyed .as-hit { grid-template-columns: 24px var(--as-k) minmax(0, 1fr) 20px; }
  .as-cols { grid-template-columns: 24px var(--as-k) minmax(0, 1fr) 20px; gap: 0 10px; padding-inline: 14px; }
  .as-gh { padding-inline: 14px; }
  .as-n { width: 22px; height: 22px; }
  .as-k { font-size: 14px; }
  .as-v { font-size: 16px; }
  .as-check { padding: 0 14px 12px; }
}
@media (max-width: 400px) {
  .as.is-keyed .as-hit { grid-template-columns: 24px minmax(0, 1fr) 20px; }
  .as.is-keyed .as-hit .as-k, .as.is-keyed .as-hit .as-v { grid-column: 2; }
  .as.is-keyed .as-hit .as-st { grid-column: 3; grid-row: 1; }
  .as.is-keyed .as-row.is-cont .as-k { display: none; }
  .as-cols { display: none; }
}
@media (prefers-reduced-motion: reduce) { .as-row, .wm-s, .as-check button { transition: none; } }
.wa-phr .phrases { border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
.wa-phr .phrases li { border: 0 !important; box-shadow: none !important; line-height: 1.35; }
.wa .wq-sheet.is-done { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; }
.wa .wq-sheet.is-done .wq-strip { display: none; }

/* ---- WRITTEN v4 (user, 2026-10-27: titles too blended · no fading when checked · less overwhelming) ----
   The card body holds the sections as boxed blocks with gaps between them; each has a clear title bar. A checked
   point keeps full colour: its number becomes a solid ✓ / ✗ and the line is tinted. While checking, only the
   section being checked is open; the others are one tidy line each. */
.as { display: grid; gap: 10px; padding: 12px; background: color-mix(in srgb, var(--c-brand) 3%, var(--c-surface)); }
.as-sec { border-radius: 14px; overflow: hidden; background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-border); }
.as-sec + .as-sec { border-top: 0; }
.as-gh, button.as-gh { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 !important; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--c-border);
  background: color-mix(in srgb, var(--c-brand) 10%, var(--c-surface)); font: 700 15.5px/1.3 var(--font-ui) !important; letter-spacing: 0; text-transform: none;
  color: var(--c-text) !important; text-align: left; }
.as-gh::before { content: ""; flex: none; width: 4px; height: 18px; border-radius: 2px; background: var(--c-brand); }
.as-gh.is-ask::before { display: none; }
.as-gh.is-ask { align-items: flex-start; font-size: 15px !important; }
.as-gt { flex: 1; min-width: 0; }
.as-gs { flex: none; display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--font-ui); color: var(--c-text-2); }
.as-gs svg { width: 13px; height: 13px; stroke-width: 3; }
.as-gs-got, .as-gs-miss { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.as-gs-got { color: var(--c-right); }
.as-gs-miss { color: var(--c-wrong); }
.as-chev { display: inline-grid; transition: transform .2s var(--ease); }
.as-chev svg { width: 16px; height: 16px; stroke-width: 2; }
button.as-gh { cursor: pointer; }
button.as-gh[aria-expanded="true"] .as-chev { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { button.as-gh:hover { background: color-mix(in srgb, var(--c-brand) 15%, var(--c-surface)); } }
button.as-gh:focus-visible { outline: 2px solid var(--c-gold); outline-offset: -2px; }
.as-sec.is-folded .as-gh { border-bottom: 0; }
.as-sec.is-folded.is-next .as-gh { background: var(--c-surface); color: var(--c-text-2) !important; }
.as-sec.is-folded.is-next .as-gh::before { background: var(--c-border-strong); }
.as-sec.is-folded.is-done .as-gh { background: var(--c-surface); }
.as-sec.is-here { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c-gold) 70%, var(--c-border)); }
.as-sec.is-here .as-gh::before { background: var(--c-gold); }
.as-cols { padding-inline: 14px; }
/* rows: number column + name + answer (no separate state column) */
.as-hit { grid-template-columns: 26px minmax(0, 1fr); gap: 0 12px; padding: 12px 14px; }
.as.is-keyed .as-hit { grid-template-columns: 26px var(--as-k) minmax(0, 1fr); }
.as.is-keyed .as-row.is-wide .as-v { grid-column: 2 / -1; }
.as-cols { grid-template-columns: 26px var(--as-k) minmax(0, 1fr); gap: 0 12px; }
.as-st { display: none; }
.as-n { width: 26px; height: 26px; }
.as-n svg { width: 14px; height: 14px; stroke-width: 3; }
/* checked: full colour, a solid mark and a light tint (never faded) */
.as.is-marking .as-row:is(.is-got, .is-missed):not(.is-cur) { opacity: 1; }
.as-row.is-got { background: color-mix(in srgb, var(--c-right) 8%, var(--c-surface)); box-shadow: inset 3px 0 0 var(--c-right); }
.as-row.is-missed { background: color-mix(in srgb, var(--c-wrong) 8%, var(--c-surface)); box-shadow: inset 3px 0 0 var(--c-wrong); }
.as-row.is-got .as-n { background: var(--c-right); color: var(--c-on-right); }
.as-row.is-missed .as-n { background: var(--c-wrong); color: var(--c-on-wrong); }
.as-row.is-cur { box-shadow: inset 4px 0 0 var(--c-gold); }
/* the open point: just the two buttons under it, lined up with the text */
.as-check { padding: 0 14px 13px calc(14px + 26px + 12px); }
.as-ask { display: none; }
@media (max-width: 640px) {
  .wa-card .as { padding: 8px; gap: 8px; }
  .as-hit, .as.is-keyed .as-hit { padding: 11px 12px; gap: 0 10px; grid-template-columns: 24px minmax(0, 1fr); }
  .as.is-keyed .as-hit { grid-template-columns: 24px var(--as-k) minmax(0, 1fr); }
  .as-cols { grid-template-columns: 24px var(--as-k) minmax(0, 1fr); gap: 0 10px; padding-inline: 12px; }
  .as-n { width: 24px; height: 24px; }
  .as-gh, button.as-gh { padding: 10px 12px; font-size: 15px !important; }
  .as-check { padding: 0 12px 12px; }
}
@media (max-width: 400px) {
  .as.is-keyed .as-hit { grid-template-columns: 24px minmax(0, 1fr); }
  .as.is-keyed .as-hit .as-k, .as.is-keyed .as-hit .as-v { grid-column: 2; }
}

/* =====================================================================
   WRITTEN v5: THE MODEL ANSWER AS A DOCUMENT (2026-10-27, the user's redesign brief)
   One surface for the answer, nothing nested inside it. Section titles are academic subheadings; each marking point is
   one line whose ring fills when ticked (tick what you recalled). After "Done checking" the missed lines carry an amber
   "Review" mark in place. Colour, one meaning each: gold = labels, brand = recalled, amber = to review.
   ===================================================================== */
.ma-card { display: block !important; margin: 0; padding: 18px 22px 8px; border-radius: 18px; background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-border); }
.ma-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 4px; }
.ma-kick { margin: 0 !important; font: 800 12px/1.3 var(--font-ui) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--c-gold-ink) !important; }
.ma-hint { margin: 0 !important; font-size: 13.5px; color: var(--c-text-2); }
.ma-sec + .ma-sec { margin-top: 20px; }
.ma-h { margin: 0 0 2px !important; padding: 8px 0 7px; font: 600 19px/1.3 var(--font-serif) !important; color: var(--c-text) !important; border-bottom: 1px solid var(--c-border); letter-spacing: 0; }
.ma-h.is-ask { display: flex; align-items: flex-start; gap: 10px; font: 700 16px/1.4 var(--font-ui) !important; }
.ma-h-n { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; font-size: 12.5px; font-weight: 800; color: var(--c-gold-ink); box-shadow: inset 0 0 0 1.5px var(--c-gold); }
.ma-cols { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); gap: 0 16px; margin: 8px 0 0 !important; padding: 0 0 6px 40px; font: 700 11.5px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-2); border-bottom: 1px solid var(--c-border); }
.ma-list { list-style: none; margin: 0; padding: 0; }
.ma-pt { margin: 0; }
.ma-pt + .ma-pt { border-top: 1px solid color-mix(in srgb, var(--c-border) 65%, transparent); }
.ma-pt.is-cont { border-top-color: transparent; }
.ma-hit { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 0 16px; width: calc(100% + 12px); min-height: 48px; margin: 0 -6px; padding: 12px 6px;
  border: 0; border-radius: 10px; background: transparent; font: inherit; color: var(--c-text); text-align: left; transition: background-color 160ms var(--ease); }
button.ma-hit { cursor: pointer; }
.ma-pt.is-cont .ma-hit { padding-top: 4px; }
.ma-mark { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 1.75px var(--c-border-strong); color: var(--c-on-brand);
  transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.ma-mark svg { width: 14px; height: 14px; stroke-width: 3; }
.ma-body { display: block; min-width: 0; }
.ma.is-keyed .ma-body { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); gap: 2px 16px; }
.ma.is-keyed .is-wide .ma-v { grid-column: 1 / -1; }
.ma-k { font: 600 15px/1.5 var(--font-ui); color: var(--c-text); padding-top: 1px; }
.ma-v { font-family: var(--font-serif); font-size: 17.5px; line-height: 1.5; color: var(--c-text); overflow-wrap: anywhere; }
.ma.is-keyed .ma-v::first-letter { text-transform: uppercase; }
.ma-tag { align-self: start; margin-top: 3px; padding: 3px 9px; border-radius: 999px; font: 700 11px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--c-miss); background: var(--c-miss-bg); }
/* ticked = recalled */
.ma-pt.is-got .ma-hit { background: color-mix(in srgb, var(--c-brand) 7%, transparent); }
.ma-pt.is-got .ma-mark { background: var(--c-brand); box-shadow: none; }
/* after Done: what was not ticked is to review */
.ma-pt.is-miss .ma-mark { box-shadow: inset 0 0 0 1.75px var(--c-miss); }
.ma-pt.is-miss .ma-hit { background: color-mix(in srgb, var(--c-miss-bg) 70%, transparent); }
@media (hover: hover) and (pointer: fine) {
  button.ma-hit:hover { background: color-mix(in srgb, var(--c-text) 5%, transparent); }
  .ma-pt.is-got button.ma-hit:hover { background: color-mix(in srgb, var(--c-brand) 11%, transparent); }
  .ma:not(.is-checked) .ma-pt:not(.is-got) button.ma-hit:hover .ma-mark { box-shadow: inset 0 0 0 1.75px var(--c-brand); }
}
button.ma-hit:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 0; }
button.ma-hit:active .ma-mark { transform: scale(.92); }

/* the result line: what happens next, said once */
.ma-result { display: block !important; margin: 14px 0 0 !important; padding: 12px 16px; border-radius: 12px; font-size: 15px !important; line-height: 1.5; color: var(--c-text);
  background: var(--c-surface); box-shadow: inset 3px 0 0 var(--c-gold), 0 0 0 1px var(--c-border); }

/* supporting study material, after the answer */
.ma-more { display: grid; gap: 12px; margin-top: 22px; }
.ma-more .ar-bar { margin: 0; }
.ma-more .pnote { margin-top: 0; background: var(--c-surface); }
.ma-phr { display: grid; gap: 8px; }
.ma-phrases { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; list-style: none; }
.ma-phrases li { margin: 0; padding: 5px 12px; border-radius: 999px; font-family: var(--font-serif); font-style: italic; font-size: 15px; line-height: 1.35; color: var(--c-text); background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-border); }

/* the foot: one progress line + the buttons */
.wa .wq-sheet.is-done .wq-foot.ma-foot { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap;
  margin: 18px calc(-1 * var(--pad)) 0; padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom)); background: var(--c-bg); border-top: 1px solid var(--c-border); }
.ma-foot > * { grid-area: auto !important; }
.ma-tally { margin: 0 !important; font-size: 15px; color: var(--c-text-2); }
.ma-tally b { font-size: 17px; color: var(--c-text); }
.ma-tally-miss { color: var(--c-miss); font-weight: 600; }
.ma-foot .wq-actions { display: flex; gap: 8px; margin: 0; }
.ma-foot .wq-actions .btn-lg { min-height: 48px; }
.ma-done { min-width: 210px; }

/* the doctor's tables use the same toggle: a cell you recalled is ticked, the rest are marked Review after Done */
.ma-card .tq { margin: 8px 0 12px; }
.ma-card .tq-item.is-open { background: transparent; box-shadow: inset 0 0 0 1px var(--c-border); opacity: 1; }
.ma-card .tq-item.is-got { background: color-mix(in srgb, var(--c-brand) 9%, transparent); box-shadow: inset 3px 0 0 var(--c-brand); opacity: 1; }
.ma-card .tq-item.is-got .tq-n { background: var(--c-brand); color: var(--c-on-brand); }
.ma-card .tq-item.is-got .tq-state { color: var(--c-brand); }
.ma-card .tq-item.is-missed { background: color-mix(in srgb, var(--c-miss-bg) 75%, transparent); box-shadow: inset 3px 0 0 var(--c-miss); opacity: 1; }
.ma-card .tq-item.is-missed .tq-n { background: var(--c-miss); color: var(--c-surface); }
.ma-card .tq-item.is-missed .tq-state { width: auto; font: 700 10.5px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--c-miss); }

@media (max-width: 640px) {
  .ma-card { padding: 14px 14px 4px; border-radius: 16px; }
  .ma-hit { gap: 0 12px; padding: 12px 6px; }
  .ma-v { font-size: 16.5px; }
  .ma-h { font-size: 18px !important; }
  .wa .wq-sheet.is-done .wq-foot.ma-foot { padding-top: 10px; }
  .ma-foot .wq-actions { flex: 1 1 100%; }
  .ma-foot .wq-actions .ma-done, .ma-foot .wq-actions .wq-done { flex: 1; min-width: 0; }
  .ma-foot .wq-actions .wq-pause span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 520px) {
  .ma.is-keyed .ma-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ma.is-keyed .ma-pt.is-cont .ma-k { display: none; }
  .ma-cols { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ma-hit, .ma-mark { transition: none; } }
/* once checked, only what is to review stands out; recalled lines keep just their tick */
.ma.is-checked .ma-pt.is-got .ma-hit { background: transparent; }
.ma.is-checked .ma-hit { grid-template-columns: 24px minmax(0, 1fr) 66px; }
.ma.is-checked .ma-tag { justify-self: end; }
@media (max-width: 640px) { .ma.is-checked .ma-hit { grid-template-columns: 24px minmax(0, 1fr) auto; } }
.ma-screen:has(.ma-foot.is-checked) .tq-item.is-got { background: transparent; }
@media (max-width: 640px) {
  .ma.is-checked .ma-hit { grid-template-columns: 24px minmax(0, 1fr); }
  .ma-tag { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 7px; }
}
/* (2026-10-28) the model answer never waits on an entrance animation: it is the content, it must always be visible */
.ma-card.enter-ans, .ma-screen .enter-ans { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ---- (user, 2026-10-28: "responsiveness when you correct… like the MCQ: green when correct and vice versa") ----
   The same colours as the MCQs: a recalled point is GREEN (its ring fills and pops, the line flashes green), a missed
   one is RED once checking is done (each missed line flashes red and shakes a little, one after another, then settles
   tinted red with "Review"). Only background, ring and position move: the text is always visible. */
.ma-pt.is-got .ma-mark { background: var(--c-right); color: var(--c-on-right); box-shadow: none; }
.ma-pt.is-got .ma-hit { background: color-mix(in srgb, var(--c-right) 9%, transparent); }
.ma.is-checked .ma-pt.is-got .ma-hit { background: transparent; }
.ma.is-checked .ma-pt.is-got .ma-mark { background: var(--c-right); }
.ma-pt.is-miss .ma-mark { box-shadow: inset 0 0 0 1.75px var(--c-wrong); }
.ma-pt.is-miss .ma-hit { background: color-mix(in srgb, var(--c-wrong) 9%, transparent); box-shadow: inset 3px 0 0 var(--c-wrong); }
.ma-tag { color: var(--c-wrong); background: color-mix(in srgb, var(--c-wrong) 14%, transparent); }
.ma-tally-miss { color: var(--c-wrong); }
@media (hover: hover) and (pointer: fine) {
  .ma-pt.is-got button.ma-hit:hover { background: color-mix(in srgb, var(--c-right) 14%, transparent); }
  .ma:not(.is-checked) .ma-pt:not(.is-got) button.ma-hit:hover .ma-mark { box-shadow: inset 0 0 0 1.75px var(--c-right); }
}
html.motion .ma-pt.just.is-got .ma-hit { animation: ma-flash-got 600ms ease-out; }
html.motion .ma-pt.just.is-got .ma-mark { animation: ma-pop 320ms cubic-bezier(.3, 1.6, .5, 1); }
html.motion .ma-screen.just-done .ma-pt.is-miss .ma-hit { animation: ma-flash-miss 620ms ease-out both, ma-shake 360ms ease-in-out; animation-delay: calc(var(--k, 0) * 70ms); }
@keyframes ma-flash-got { 0% { background: color-mix(in srgb, var(--c-right) 34%, transparent); } 100% { background: color-mix(in srgb, var(--c-right) 9%, transparent); } }
@keyframes ma-flash-miss { 0% { background: color-mix(in srgb, var(--c-wrong) 34%, transparent); } 100% { background: color-mix(in srgb, var(--c-wrong) 9%, transparent); } }
@keyframes ma-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@keyframes ma-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* the doctor's tables: the same colours */
.ma-card .tq-item.is-got { background: color-mix(in srgb, var(--c-right) 10%, transparent); box-shadow: inset 3px 0 0 var(--c-right); }
.ma-card .tq-item.is-got .tq-n { background: var(--c-right); color: var(--c-on-right); }
.ma-card .tq-item.is-got .tq-state { color: var(--c-right); }
.ma-card .tq-item.is-missed { background: color-mix(in srgb, var(--c-wrong) 10%, transparent); box-shadow: inset 3px 0 0 var(--c-wrong); }
.ma-card .tq-item.is-missed .tq-n { background: var(--c-wrong); color: var(--c-on-wrong); }
.ma-card .tq-item.is-missed .tq-state { color: var(--c-wrong); }
html.motion .ma-card .tq-item.just.is-got { animation: ma-flash-got 600ms ease-out; }
html.motion .ma-screen.just-done .tq-item.is-missed { animation: ma-flash-miss 620ms ease-out both, ma-shake 360ms ease-in-out; animation-delay: calc(var(--k, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) { .ma-pt .ma-hit, .ma-pt .ma-mark, .tq-item { animation: none !important; } }

/* ---- (user, 2026-10-28) ✓ / ✗ on the right of every point, as before, besides tapping the line ----
   The whole line (li) carries the colour now, so the buttons sit inside the green / red. */
.ma .ma-pt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 10px; margin: 0 -6px; padding-right: 6px; border-radius: 10px; }
.ma .ma-pt .ma-hit { width: auto; margin: 0; background: transparent !important; box-shadow: none !important; }
.ma-ox { display: flex; gap: 6px; padding-top: 9px; }
.ma-o, .ma-x { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1.5px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text-2); cursor: pointer;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease), transform 120ms var(--ease); }
.ma-o svg, .ma-x svg { width: 16px; height: 16px; stroke-width: 2.6; }
@media (hover: hover) and (pointer: fine) { .ma-o:hover { border-color: var(--c-right); color: var(--c-right); } .ma-x:hover { border-color: var(--c-wrong); color: var(--c-wrong); } }
.ma-o:active, .ma-x:active { transform: scale(.9); }
.ma-o:focus-visible, .ma-x:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.ma-o.is-on { background: var(--c-right); border-color: var(--c-right); color: var(--c-on-right); }
.ma-x.is-on { background: var(--c-wrong); border-color: var(--c-wrong); color: var(--c-on-wrong); }
/* the line's colour */
.ma .ma-pt.is-got { background: color-mix(in srgb, var(--c-right) 9%, transparent); }
.ma.is-checked .ma-pt.is-got { background: transparent; }
.ma .ma-pt.is-miss { background: color-mix(in srgb, var(--c-wrong) 9%, transparent); box-shadow: inset 3px 0 0 var(--c-wrong); }
@media (hover: hover) and (pointer: fine) { .ma .ma-pt:not(.is-got):not(.is-miss):hover { background: color-mix(in srgb, var(--c-text) 4%, transparent); } }
/* the tag sits under the answer text; the right column holds the buttons */
.ma.is-checked .ma-hit, .ma .ma-hit { grid-template-columns: 24px minmax(0, 1fr); }
.ma .ma-tag { grid-column: 2; grid-row: 2; justify-self: start !important; margin-top: 7px; }
/* feedback, MCQ-style: green flash + pop on recalled, red flash + shake on not recalled */
html.motion .ma .ma-pt.just.is-got { animation: ma-flash-got 600ms ease-out; }
html.motion .ma .ma-pt.just.is-miss { animation: ma-flash-miss 620ms ease-out, ma-shake 360ms ease-in-out; }
html.motion .ma .ma-pt.just .ma-o.is-on, html.motion .ma .ma-pt.just .ma-x.is-on { animation: ma-pop 320ms cubic-bezier(.3, 1.6, .5, 1); }
html.motion .ma-screen.just-done .ma .ma-pt.is-miss { animation: ma-flash-miss 620ms ease-out, ma-shake 360ms ease-in-out; animation-delay: calc(var(--k, 0) * 70ms); }
html.motion .ma .ma-pt .ma-hit { animation: none !important; }
@media (max-width: 640px) {
  .ma .ma-pt { gap: 0 6px; }
  .ma-ox { gap: 5px; padding-top: 8px; }
  .ma-o, .ma-x { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .ma .ma-pt, .ma-o, .ma-x { animation: none !important; transition: none; } }
/* (user, 2026-10-28: "remove these circles") no ring on the left; the answer starts at the edge, ✓ / ✗ on the right */
.ma .ma-hit, .ma.is-checked .ma-hit { grid-template-columns: minmax(0, 1fr); padding-left: 8px; }
.ma .ma-tag { grid-column: 1; }
.ma-cols { padding-left: 8px; }
.ma-mark { display: none; }
/* (user, 2026-10-28: "titles need a different look, like a filled colour") section titles are filled gold bars: clearly headings, never answers */
.ma-h, .ma-h.is-ask { display: flex; align-items: center; gap: 10px; margin: 0 -6px 6px !important; padding: 9px 12px !important; border: 0 !important; border-radius: 10px;
  background: color-mix(in srgb, var(--c-gold) 22%, var(--c-surface)); font: 700 14.5px/1.35 var(--font-ui) !important; letter-spacing: .02em; color: var(--c-text) !important; }
.ma-h::before { content: ""; flex: none; width: 4px; align-self: stretch; border-radius: 2px; background: var(--c-gold); }
.ma-h.is-ask::before { display: none; }
.ma-h-n { background: var(--c-gold); color: #1c1406; box-shadow: none; }
.ma-sec + .ma-sec { margin-top: 18px; }
/* (user, 2026-10-28: "make it similar to the Sabin vs Salk table, I like it") each section is a bordered block like the
   doctor's tables: its title is the header row (the table header colours: soft surface + brand green bold), its points the rows */
.ma-sec { border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; }
.ma-sec + .ma-sec { margin-top: 14px; }
.ma-h, .ma-h.is-ask { margin: 0 !important; padding: 10px 14px !important; border-radius: 0; border: 0 !important; border-bottom: 1px solid var(--c-border) !important;
  background: var(--c-surface-2); color: var(--c-brand) !important; font: 700 14px/1.35 var(--font-ui) !important; letter-spacing: .01em; }
.ma-h::before { display: none; }
.ma-h-n { background: var(--c-brand); color: var(--c-on-brand); }
.ma-sec .ma-list { padding: 0; }
.ma .ma-sec .ma-pt { margin: 0; border-radius: 0; padding-right: 10px; }
.ma .ma-sec .ma-pt .ma-hit { padding-left: 14px; }
.ma-sec .ma-pt + .ma-pt { border-top: 1px solid var(--c-border); }
.ma-sec .ma-pt.is-cont { border-top-color: color-mix(in srgb, var(--c-border) 40%, transparent); }
.ma-sec:not(:has(.ma-h)) { border: 0; border-radius: 0; overflow: visible; }
.ma-sec:not(:has(.ma-h)) .ma-pt { margin: 0 -6px; border-radius: 10px; }
/* (user, 2026-10-28: "when you mark it I want it filled, the colour is too transparent") marked points get a solid-looking fill */
.ma .ma-pt.is-got, .ma .ma-sec .ma-pt.is-got { background: color-mix(in srgb, var(--c-right) 20%, var(--c-surface)); box-shadow: inset 4px 0 0 var(--c-right); }
.ma .ma-pt.is-miss, .ma .ma-sec .ma-pt.is-miss { background: color-mix(in srgb, var(--c-wrong) 18%, var(--c-surface)); box-shadow: inset 4px 0 0 var(--c-wrong); }
.ma .ma-pt:not(.is-got):not(.is-miss):hover { background: transparent; }
.ma .ma-hit { cursor: default; }
.ma-tally-left { color: var(--c-text-2); }
.ma-o:disabled, .ma-x:disabled { cursor: default; opacity: .85; }
.ap-text .ap-k { font-weight: 700; color: var(--c-text); }
/* (Anatomy review, 2026-10-28: a point without a group was squeezed into the narrow heading column) a group with no
   heading uses the full width */
.apg.is-nohead { grid-template-columns: 1fr; }
.apg.is-nohead .aps { grid-column: 1 / -1; }
/* (2026-10-28) the model answer never depends on an animation to be visible: it slides in, but never starts hidden */
@keyframes ans-in { from { transform: translateY(6px); } to { transform: none; } }
.enter-ans { animation: ans-in 220ms var(--ease) both !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) { .enter-ans { animation: none !important; } }
html.motion .enter-ans .ap { animation-name: ans-in !important; }
/* (user, 2026-10-28: "there is a scrolling bug on phones") phones and touch tablets: no scroll-driven home effect (the
   How it works sheet that rose, scaled and rounded on every scroll frame while the first screen eased back). It
   fought the finger and stuttered; the page now simply scrolls, same layout, no motion tied to scrolling. */
@media (hover: none), (max-width: 900px) {
  html.motion .hw { transform: none !important; border-radius: 0 !important; will-change: auto !important; box-shadow: none; }
  html.motion .hp-grid { transform: none !important; opacity: 1 !important; }
  html.motion .hp-next { opacity: 1 !important; }
}
/* (user, 2026-10-28: the phone menu could run past the bottom of the screen, so its last links could not be reached)
   the sheet is fixed right under the header (measured on open) and exactly fills the rest of the screen; it scrolls inside */
.mobile-panel { position: fixed; top: var(--menu-top, 68px); left: 0; right: 0; height: auto; bottom: 0; }
.mobile-panel .drawer { max-height: 100%; display: flex; flex-direction: column; }
.mobile-panel .drawer .dr-body { max-height: none; flex: 1 1 auto; min-height: 0; }   /* (its end still clears Safari's floating bottom bar: the 96 px padding above stays) */
/* (user, 2026-10-28, iPhone in Telegram: the Support card in the phone menu was cut off) the sheet's grid squeezed its
   rows to fit the screen instead of letting the sheet scroll: every row keeps its full height now, and the sheet scrolls */
.mobile-panel .drawer .dr-body { grid-auto-rows: max-content; grid-template-rows: none; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); }
.mobile-panel .drawer .dr-body > * { min-height: min-content; }
/* (user, 2026-10-28: "when I say phones I mean all touch screens") html.touch = any touch screen (iPads in desktop mode
   and in-app browsers included, which the hover / pointer queries can miss): the same touch rules as above */
html.touch .hp-cov-cue { opacity: 1; transform: none; }
html.touch.motion :is(button, a, .btn, .opt, .mk, .hp-cov, .nav-go, .nav-stay, .fc-front):active:not(.is-pressed) { transform: none !important; }
html.touch .site-header, html.touch .sb2 { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--c-bg) !important; }
html.touch :is(.opt, .btn, .as-row, .lec-row, .type-card, .subject-card):hover { transform: none !important; }
html.touch.motion .hw { transform: none !important; border-radius: 0 !important; will-change: auto !important; box-shadow: none; }
html.touch.motion .hp-grid { transform: none !important; opacity: 1 !important; }
html.touch.motion .hp-next { opacity: 1 !important; }
/* the timed written / case screen fills the screen exactly: it fades in without the 12 px rise, which made the page
   scrollable (and bounce on iOS) for the moment it played */
@keyframes step-fade { from { opacity: 0; } to { opacity: 1; } }
html.motion .step-in > .study-q.wq-work:has(> .wq-sheet:not(.is-done)) { animation-name: step-fade; }
/* (user, 2026-10-28, Telegram on iPhone and iPad) in-app browsers lay the page under their own see-through top bar and
   stick our header just below it, so the page showed through above the header. On touch screens the header (and the
   session bar) carry their own background up past the top edge, so that strip is always the header's colour. */
html.touch .site-header::before, html.touch .study-bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 240px; background: var(--c-bg); pointer-events: none; }
.preview-bar { position: relative; z-index: 60; }   /* TEST only: stays above the header's strip */
/* feedback: while FormSubmit is slow, a calm line appears under Sending… after 5 s (user, 2026-10-28: "lagging on Sending") */
@keyframes fb-slow-in { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
.fb-slow { color: var(--c-text-2, inherit); animation: fb-slow-in 250ms ease 5s both; }
/* "Enumerate N" (user, 2026-10-29): the answer says plainly that any N of the points is full marks */
.ans-pick { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--c-gold, #b8913f) 14%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--c-gold, #b8913f) 40%, transparent); font-size: 14.5px; line-height: 1.45; }
/* (user, 2026-10-29, Pathology review: "make the pictures in OSPE look neat and remove the black") the frame hugs the
   picture on every screen: no dark bars beside a tall or wide picture. The picture keeps its one height per screen
   class (460 / 400 / 190 px), only narrower when the column is too narrow for it. */
.study-q.has-fig .ospe-zoom { width: fit-content; max-width: 100%; height: auto; margin-inline: auto; background: transparent; }
.study-q.has-fig .ospe-pic { width: calc(var(--fh) * var(--ar)); max-width: 100%; max-height: none; }
/* SUPPORT ON PHONES (user, 2026-10-29: "make the support button present at all times… a compressed version that shows
   the coffee only"): under 880 px the Support button stays in the header as a round gold cup beside the theme toggle;
   its menu opens as a card across the screen, right under the header (top measured on open, --sup-top). */
@media (max-width: 879px) {
  .header-actions .hdr-coffee { display: inline-flex; width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
  .header-actions .hdr-coffee span { display: none; }
  .header-actions .hdr-coffee svg { width: 19px; height: 19px; }
  .hdr-support .sup-menu { position: fixed; top: var(--sup-top, 72px); left: 12px; right: 12px; width: auto; max-height: calc(100dvh - var(--sup-top, 72px) - 12px); overflow-y: auto; transform-origin: top center; z-index: 120; }
}
/* the narrowest phones (≤ 374 px): with the Support cup in the header too, the wordmark and buttons tighten a little */
@media (max-width: 374px) {
  .site-header .brand-link { gap: 7px; }
  .site-header .brand-mark { width: 34px; height: 34px; }
  .site-header .brand-mark img { width: 143px; left: -9px; top: -8.4px; }
  .site-header .wordmark { font-size: 19px !important; }
  .header-actions { gap: 2px !important; }
  .header-actions .icon-btn, .header-actions .hdr-coffee { width: 36px !important; height: 36px !important; }
}
/* a correction the doctor made to his own slide (user, 2026-10-30): gold edge, so it reads as "the lecture says X, but…" */
.clarify.is-correction { border-left: 3px solid var(--c-gold); background: color-mix(in srgb, var(--c-gold) 10%, var(--c-surface)); }

/* TELEGRAM (user, 2026-10-30): header pill in Telegram blue (desktop), a full row in the phone menu, a footer link */
.hdr-tg { background: #229ED9; color: #fff !important; }
.hdr-tg .tg-logo circle { fill: #fff; } .hdr-tg .tg-logo path { fill: #229ED9; }
@media (hover: hover) and (pointer: fine) { .hdr-tg:hover { background: #1b8cc2; } }
@media (min-width: 880px) and (max-width: 1099px) { .hdr-tg span { display: none; } .hdr-tg { padding: 0 11px; } }
.tg-logo { width: 18px; height: 18px; flex: none; }
.dr-tg { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); text-decoration: none; color: var(--c-text);
  background: color-mix(in srgb, #229ED9 10%, var(--c-surface)); border: 1px solid color-mix(in srgb, #229ED9 35%, transparent); }
.dr-tg .tg-logo { width: 32px; height: 32px; }
.dr-tg-t { display: grid; gap: 2px; flex: 1; min-width: 0; font-size: 13.5px; color: var(--c-text-2); }
.dr-tg-t b { font-size: 15.5px; color: var(--c-text); }
.dr-tg > svg:last-child { width: 18px; height: 18px; color: #229ED9; flex: none; }
/* hardest-first lecture list (user, 2026-10-30): a small chip on the first and the last lecture */
.lec-tier { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; }
.lec-tier.is-hardest { background: color-mix(in srgb, var(--c-miss, #c0392b) 14%, var(--c-surface)); color: var(--c-miss, #c0392b); }
.lec-tier.is-lightest { background: color-mix(in srgb, var(--c-brand) 12%, var(--c-surface)); color: var(--c-brand); }
/* the desktop header Telegram button is a round icon (a wide pill pushed the header past the nav on laptops) */
.header-actions .hdr-tg { width: 40px; padding: 0; justify-content: center; border-radius: 50%; }
.header-actions .hdr-tg .tg-logo { width: 20px; height: 20px; }
/* laptop / tablet-landscape widths: with the Telegram icon the header actions need a little more room */
@media (min-width: 880px) and (max-width: 1199px) { .hdr-coffee span { display: none; } .hdr-coffee { padding: 0 11px; } }
@media (min-width: 880px) and (max-width: 1023px) { .v2 .nav-list .nav-link { padding: 0 8px; } .header-actions { gap: 2px !important; } .hdr-fb { padding: 0 12px; } .site-header .wordmark { font-size: 21px; } }
/* TELEGRAM ON PHONES (user, 2026-10-30: "I want the telegram here… so phone users see it and join"): the same round blue
   icon as on desktop, beside the Support cup; the narrowest phones tighten the wordmark and buttons so nothing overlaps */
@media (max-width: 879px) {
  .header-actions .hdr-tg { display: inline-flex; width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
}
@media (max-width: 374px) {
  .header-actions .hdr-tg { width: 34px !important; height: 34px !important; }
  .header-actions .icon-btn, .header-actions .hdr-coffee { width: 34px !important; height: 34px !important; }
  .site-header .wordmark { font-size: 17px !important; }
  .site-header .brand-mark { width: 30px; height: 30px; }
  .site-header .brand-mark img { width: 126px; left: -8px; top: -7.4px; }
  .site-header .brand-link { gap: 6px; }
}
/* phone header with four round buttons (Telegram, Support, theme, menu): sized so it always fits */
@media (max-width: 430px) {
  .site-header .header-bar { gap: 8px; }
  .header-actions { gap: 4px !important; }
  .header-actions .hdr-tg, .header-actions .hdr-coffee, .header-actions .icon-btn { width: 36px !important; height: 36px !important; }
  .header-actions .hdr-tg .tg-logo, .header-actions .hdr-coffee svg, .header-actions .icon-btn svg { width: 18px; height: 18px; }
  .site-header .wordmark { font-size: 18px !important; }
  .site-header .brand-mark { width: 32px; height: 32px; }
  .site-header .brand-mark img { width: 134px; left: -8.5px; top: -7.9px; }
  .site-header .brand-link { gap: 6px; min-width: 0; }
}
@media (max-width: 359px) {
  .header-actions { gap: 2px !important; }
  .header-actions .hdr-tg, .header-actions .hdr-coffee, .header-actions .icon-btn { width: 32px !important; height: 32px !important; }
  .header-actions .hdr-tg .tg-logo, .header-actions .hdr-coffee svg, .header-actions .icon-btn svg { width: 16px; height: 16px; }
  .site-header .wordmark { font-size: 15px !important; }
  .site-header .brand-mark { width: 28px; height: 28px; }
  .site-header .brand-mark img { width: 118px; left: -7.4px; top: -6.9px; }
  .site-header .brand-link { gap: 5px; }
}
/* desktop header order (user, 2026-10-30: "the placement isn't the best"): the labelled pills together (Feedback, Support),
   then the round icons together (Telegram, theme), with a little more room before the icons */
@media (min-width: 880px) { .header-actions .hdr-tg { margin-left: 6px; } }
/* SUMMARY v2 (user, 2026-10-30: "the tag is overlapping… needs to be well organized"): a card per section, the title and
   its exam chip on one line, then term | what-to-know rows with hairline dividers; phones stack each row */
.sum-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 12px; }
.sum-head .sum-h { margin: 0; }
.sum-head .sum-exam { margin: 0; display: inline-flex; align-items: center; white-space: nowrap; }
.sum-rows { margin: 0; display: grid; border-top: 1px solid var(--c-border); }
.sum-row { display: grid; grid-template-columns: minmax(150px, 32%) 1fr; gap: 4px 18px; padding: 11px 2px; border-bottom: 1px solid var(--c-border); align-items: baseline; }
.sum-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.sum-k { margin: 0; font-weight: 700; font-size: 15px; color: var(--c-brand); line-height: 1.4; }
.sum-v { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--c-text); }
.sum-v strong { color: var(--c-text); font-weight: 700; }
.sum-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.sum-list li { position: relative; padding-left: 16px; }
.sum-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-gold); }
@media (max-width: 560px) {
  .sum-row { grid-template-columns: 1fr; gap: 3px; padding: 10px 0; }
  .sum-k { font-size: 13.5px; letter-spacing: .01em; }
  .sum-v { font-size: 15px; }
}
/* (user, 2026-10-30, Telegram's in-app browser again: the page showed above the header) the strip above the sticky
   header and session bar now applies on EVERY device, not only touch screens: some in-app browsers (Telegram on
   desktop / tablets) don't report touch. In a normal browser the strip sits above the top edge, off screen. */
.site-header::before, .study-bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 240px; background: var(--c-bg); pointer-events: none; }
/* IN-APP BROWSERS v3 (user, 2026-10-30, Telegram: "when you scroll the navigation bar drops and you can see the page
   above it"): the cover above the sticky bars is now part of their OWN box, not a pseudo-element hanging outside it
   (iOS moves a sticky bar's box while scrolling and can leave or cut anything outside it). The bar grows 240 px upward
   (padding-top), filled with the page colour, sticks at top: -240px so its visible part sits exactly where it did,
   and a matching negative margin keeps the layout unchanged. */
:root { --strip: 240px; }
.site-header, .study-bar {
  padding-top: var(--strip) !important; margin-top: calc(-1 * var(--strip)); top: calc(-1 * var(--strip)) !important;
  background-image: linear-gradient(var(--c-bg), var(--c-bg)); background-size: 100% var(--strip); background-repeat: no-repeat;
}
html .site-header::before, html .study-bar::before, html.touch .site-header::before, html.touch .study-bar::before { content: none !important; }
/* TABLE NEXT ON PHONES (user, 2026-10-30: "add a next button for phone users in table questions so they can skip it"):
   the sticky marking bar holds Didn't recall | Recalled it, and under them a full-width Next; on wider screens the
   count line above already has Next, so this one is phones only */
.tq-next { display: none; }
@media (max-width: 640px) {
  .tq-tray { flex-wrap: wrap; }
  .tq-tray .tq-next { display: flex; grid-column: 1 / -1; flex-basis: 100%; justify-content: center; align-items: center; gap: 6px; min-height: 36px; margin-top: 2px; font-size: 14.5px; font-weight: 700; }
  .tq-tray .tq-next svg { width: 16px; height: 16px; }
  .tq-next-h { font-weight: 500; color: var(--c-text-2); font-size: 12.5px; }
}
@media (max-width: 640px) {
  .tq-tray .tq-next { text-decoration: none; border: 1px solid var(--c-border-strong, var(--c-border)); border-radius: var(--r-pill); min-height: 40px; color: var(--c-text); background: var(--c-surface); }
  .tq-tray .tq-next .tq-next-h { text-decoration: none; }
}

/* LEARN THE SLIDES (user, 2026-11-05): whole practical slides with numbered boxes. Nothing here is positioned with
   transform, so the tap effects can never move a box. The picture is always white, so its boxes use fixed colours. */
.slide-page .page-nav { margin-bottom: var(--s-2); }
.sl-title { margin-bottom: var(--s-3); }
.sl-title .kicker-gold { margin: 0 0 2px; }
.sl-h1 { margin: 0; font-size: clamp(20px, 5.4vw, 28px); line-height: 1.2; font-weight: 700; color: var(--c-text); overflow-wrap: anywhere; }
.sl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.sl-fig { margin: 0; min-width: 0; }
.sl-pic { --maxh: 46svh; background: #fff; border-radius: var(--r-md); outline: 1px solid var(--c-border); }
.sl-pic img { border-radius: var(--r-md); }
.sl-pic { container-type: inline-size; }
.sl-pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.sl-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sl-lines line { stroke: #111; stroke-width: 1.3; }
.sl-lines line.sl-h { stroke: #fff; stroke-width: 3.2; stroke-linecap: round; }
.sl-lines circle { fill: #111; stroke: #fff; stroke-width: 1.2; }
.sl-ln.is-last line:not(.sl-h) { stroke: #c9820a; stroke-width: 2; }
.sl-ln.is-last circle { fill: #e0a526; }
.sl-anchor { position: absolute; left: 50%; top: 0; width: 0; height: 0; display: flex; align-items: center; justify-content: center; z-index: 2; }
.sl-anchor.is-l { justify-content: flex-end; }
.sl-anchor.is-r { justify-content: flex-start; }
.sl-box { position: relative; flex: none; min-width: 30px; min-height: 24px; padding: 0 2px; border: 1.5px solid #222; border-radius: 4px; background: #fff; color: #111; font-family: var(--font-ui); font-weight: 700; font-size: 13px; line-height: 1; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sl-box::after { content: ""; position: absolute; inset: -6px -2px; }   /* an easier target for a finger */
.sl-box-t { display: none; }
.sl-box.is-open, .sl-box.is-measure { width: calc(var(--bw, .3) * 100cqw); min-width: 0; min-height: 0; padding: 3px 6px; border-radius: 6px; font-size: calc(var(--f, .03) * 100cqw); font-weight: 700; line-height: 1.12; text-align: center; overflow-wrap: normal; }
.sl-box.is-open .sl-box-n, .sl-box.is-measure .sl-box-n { display: none; }
.sl-box.is-open .sl-box-t, .sl-box.is-measure .sl-box-t { display: block; }
/* (user, 2026-11-05: a filled box covers the image) a revealed label is only text: nothing behind it, a thin white outline keeps it readable */
.sl-box.is-open { background: #1f7a4d; border-color: #1f7a4d; color: #fff; z-index: 1; }
.sl-box.is-open.is-last { box-shadow: 0 0 0 2px #e0a526; background: #ffd65c; border-color: #e0a526; color: #2b2000; }
html.motion .sl-box.is-open.is-last { animation: sl-reveal .28s var(--m-ease, ease); }
@keyframes sl-reveal { from { opacity: .35; } to { opacity: 1; } }
.sl-ln.is-open line:not(.sl-h) { stroke: #1f7a4d; stroke-width: 2; }
.sl-ln.is-open circle { fill: #1f7a4d; }
.sl-box.is-last { box-shadow: 0 0 0 3px #e0a526; z-index: 2; }
.sl-box:focus-visible { outline: 3px solid #e0a526; outline-offset: 1px; z-index: 3; }
.ospe-lightbox.is-slide .ospe-lb-tip { left: 12px; right: 12px; bottom: 10px; padding: 9px 12px; border-radius: 8px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 14px; }
.ospe-lightbox.is-slide .ospe-lb-tip.is-on { background: #1f7a4d; font-weight: 700; font-size: 15.5px; }
.ospe-lightbox.is-slide { padding-bottom: 72px; }
.sl-side { min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.sl-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sl-rows.is-one { grid-template-columns: minmax(0, 1fr); }
.sl-row { width: 100%; min-height: 56px; height: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); text-align: left; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sl-num { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; border: 1.5px solid var(--c-text); font-weight: 700; font-size: 14px; }
.sl-name { min-width: 0; font-size: 13.5px; line-height: 1.25; color: var(--c-text-2); overflow-wrap: anywhere; }
.sl-row.is-open { background: rgba(31, 122, 77, .14); border-color: #1f7a4d; }
.sl-row.is-open .sl-name { color: var(--c-text); font-weight: 700; }
.sl-row.is-open .sl-num { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
.sl-row.is-last { border-color: #e0a526; box-shadow: inset 0 0 0 1px #e0a526; }
.sl-row:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
@media (max-width: 360px) { .sl-row { min-height: 66px; } .sl-name { font-size: 13px; } }
.sl-tools { display: flex; gap: 8px; }
.sl-tool { flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sl-tool svg { width: 16px; height: 16px; }
.sl-go { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; text-align: center; }
.sl-go svg { width: 18px; height: 18px; flex: none; }
.sl-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sl-pg { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; min-width: 0; }
.sl-pg svg { width: 16px; height: 16px; flex: none; }
.ospe-lightbox .sl-pic { outline: 0; }
.ospe-lightbox .sl-pic { cursor: default; }
.ospe-lightbox.is-close .sl-pic { cursor: default; }
@media (min-width: 640px) {
  .sl-grid { grid-template-columns: minmax(0, 3fr) minmax(240px, 2fr); align-items: start; gap: var(--s-5); }
  .sl-fig { position: sticky; top: 84px; }
  .sl-pic { --maxh: clamp(260px, calc(100svh - 290px), 620px); }
  .sl-rows { grid-template-columns: minmax(0, 1fr); }
  .sl-row { min-height: 48px; }
  .sl-name { font-size: 15px; }
}
@media (hover: hover) and (pointer: fine) {
  .sl-box:not(.is-open):hover { border-color: #e0a526; }
  .sl-row:hover { background: var(--c-surface-2); }
}
@media (prefers-reduced-motion: reduce) { .sl-box, .sl-row { transition: none; } }
@media (min-width: 640px) and (max-height: 500px) { .sl-pic { --maxh: calc(100svh - 90px); } .sl-fig { top: 64px; } }
.auto-row.has-slide-back { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.study-q .auto-row.has-slide-back { margin-bottom: 4px; }
.study-q .auto-row.has-slide-back .auto-sw { min-height: 32px; font-size: 13px; padding-inline: 8px; }
.sl-qback.btn { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 2px 10px; font-size: 13px; white-space: nowrap; }
.sl-qback svg { width: 15px; height: 15px; flex: none; }

/* ZOOM v2 (user, 2026-11-05): the whole picture first, then pinch / double-tap / + −; a small see-through button on each picture */
.ospe-zoom-ic { top: 8px; right: 8px; bottom: auto; left: auto; width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, .42); pointer-events: none; }
.ospe-zoom-ic svg { width: 17px; height: 17px; }
.sl-zoom { position: absolute; top: 6px; right: 6px; z-index: 3; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .42); color: #fff; cursor: zoom-in; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sl-zoom svg { width: 18px; height: 18px; }
.sl-zoom:focus-visible { outline: 3px solid #e0a526; outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .sl-zoom:hover { background: rgba(0, 0, 0, .68); } }
.ospe-lightbox { display: block; padding: 0; overflow: hidden; background: #000; touch-action: none; overscroll-behavior: contain; user-select: none; -webkit-user-select: none; }
.ospe-lightbox .ospe-lb-in { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; }
.ospe-lightbox .ospe-lb-in.is-anim { transition: transform .18s var(--m-ease, ease); }
.ospe-lightbox .ospe-pic, .ospe-lightbox .sl-pic { max-width: none; cursor: grab; }
.ospe-lightbox .ospe-pic img { -webkit-user-drag: none; pointer-events: none; }
.ospe-lightbox .sl-zoom, .ospe-lightbox .ospe-zoom-ic { display: none; }
.ospe-lb-zm { position: fixed; right: 10px; top: 62px; z-index: 2; display: grid; gap: 8px; }
.ospe-lb-zm button { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(0, 0, 0, .62); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; touch-action: manipulation; }
.ospe-lb-x { z-index: 2; background: rgba(0, 0, 0, .62); border: 1px solid rgba(255, 255, 255, .35); }
.ospe-lb-tip { z-index: 2; pointer-events: none; }

/* When a slide's questions end (user, 2026-11-05: "it has so much more potential"): where you are, and the next slide itself */
.sl-done { width: 100%; max-width: 560px; margin: var(--s-4) auto; display: flex; flex-direction: column; gap: 14px; }
.sl-done-top { display: flex; align-items: center; gap: 12px; }
.sl-done-ok { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--c-brand); color: var(--c-on-brand); font-size: 22px; font-weight: 700; }
.sl-done-ok svg { width: 24px; height: 24px; }
html.motion .sl-done-ok { animation: sl-pop .4s var(--m-ease, ease) both; }
@keyframes sl-pop { from { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } to { transform: scale(1); } }
.sl-done-tx { min-width: 0; }
.sl-done .sl-done-h { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 700; color: var(--c-text); outline: 0; overflow-wrap: anywhere; }
.sl-done .sl-done-t { margin: 2px 0 0; color: var(--c-text-2); font-size: 14px; }
.sl-done-prog { display: grid; gap: 6px; }
.sl-done-pl { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; color: var(--c-text-2); }
.sl-done-bar { height: 6px; border-radius: 999px; background: var(--c-surface-2); overflow: hidden; }
.sl-done-bar span { display: block; height: 100%; border-radius: inherit; background: var(--c-brand); }
.sl-next { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); border: 1.5px solid var(--c-brand); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text) !important; text-decoration: none; overflow: hidden; min-height: 148px; }
.sl-next-pic { display: block; background: #fff; min-width: 0; }
.sl-next-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sl-next-b { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 12px; }
.sl-next-k { font-size: 12px; font-weight: 700; color: var(--c-gold-text, var(--c-text-2)); }
.sl-next-t { font-size: 17px; line-height: 1.22; font-weight: 700; overflow-wrap: anywhere; }
.sl-next-n { font-size: 13px; color: var(--c-text-2); margin-bottom: 8px; }
.sl-next-go { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 6px 10px; border-radius: var(--r-md); background: var(--c-brand); color: var(--c-on-brand); font-weight: 700; font-size: 15px; }
.sl-next-go svg { width: 16px; height: 16px; flex: none; }
@media (hover: hover) and (pointer: fine) { a.sl-next:hover { background: var(--c-surface-2); } }
.sl-end { display: grid; gap: 8px; padding: 14px; border: 1.5px solid var(--c-brand); border-radius: var(--r-md); background: var(--c-surface); }
.sl-end .sl-end-h { margin: 0; font-size: 17px; font-weight: 700; color: var(--c-text); }
.sl-end .sl-end-t { margin: 0 0 4px; font-size: 14.5px; color: var(--c-text-2); }
.sl-done-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sl-done-a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; text-align: center; }
.sl-done-a svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 359px) { .sl-next-t { font-size: 15.5px; } .sl-done-a { font-size: 14px; padding-inline: 8px; } }
@media (prefers-reduced-motion: reduce) { html.motion .sl-done-ok { animation: none; } }
/* (user, 2026-11-05: "looks very small on desktop") from tablet width up the finish page is a real page: a big next-slide card with the whole picture */
@media (min-width: 760px) {
  .study-main:has(> .sl-done) { max-width: 1060px; }
  .sl-done { max-width: 980px; margin: clamp(24px, 5vh, 56px) auto; gap: 22px; }
  .sl-done-ok { width: 60px; height: 60px; }
  .sl-done-ok svg { width: 32px; height: 32px; }
  .sl-done-top { gap: 16px; }
  .sl-done .sl-done-h { font-size: 32px; }
  .sl-done .sl-done-t { font-size: 17px; }
  .sl-done-pl { font-size: 15px; }
  .sl-done-bar { height: 8px; }
  .sl-next { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); min-height: clamp(300px, 46vh, 460px); border-width: 2px; }
  .sl-next-pic { position: relative; }
  .sl-next-pic img { position: absolute; inset: 0; object-fit: contain; }
  .sl-next-b { padding: 28px; gap: 8px; justify-content: center; }
  .sl-next-k { font-size: 14px; }
  .sl-next-t { font-size: 30px; line-height: 1.15; }
  .sl-next-n { font-size: 16px; margin-bottom: 18px; }
  .sl-next-go { margin-top: 0; min-height: 56px; font-size: 18px; }
  .sl-next-go svg { width: 20px; height: 20px; }
  .sl-end { padding: 28px; gap: 12px; }
  .sl-end .sl-end-h { font-size: 26px; }
  .sl-end .sl-end-t { font-size: 17px; }
  .sl-done-a { min-height: 56px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { html.motion .sl-box.is-open.is-last { animation: none; } }

/* Flashcard placement (user, 2026-11-05: "the placement looks so wrong" on phones). The back reads like the front: its label row
   along the top, the answer in the middle of the free space, where it fits along the bottom (the old top / bottom auto margins
   relied on the last child, which is hidden on phones, so everything sank to the bottom). Back and Skip share one row. */
.fc-q .fc-back { justify-content: flex-start; }
.fc-q .fc-back > :first-child { margin-top: 0; align-self: stretch; flex: none; }
.fc-q .fc-back > :last-child { margin-bottom: 0; }
.fc-q .fc-back .fc-a { margin-block: auto; flex: none; }
.fc-q .fc-back .fc-sec { flex: none; }
.fc.is-got .fc-back .fc-k-row, .fc.is-missed .fc-back .fc-k-row { visibility: hidden; }   /* the stamp sits in that row; a tap on the card still turns it */
.fc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fc-foot .nav-row { min-height: 0; flex: none; }
.fc-foot .nav-fill { display: none; }
.fc-dock .fc-foot .fc-skip { margin: 0; flex: none; }
@media (max-width: 560px) {
  .study-main:has(.fc-q) { padding-bottom: 12px; }
  .fc-q { gap: 10px; }
  .fc-q .fc { height: clamp(290px, calc(100svh - 262px), 600px); }
  .fc-q .btn-mark { min-height: 50px; padding-inline: 8px; gap: 6px; white-space: nowrap; font-size: 16px; }
  .fc-foot .nav-back, .fc-foot .btn-secondary { min-height: 42px; padding-block: 6px; }
}

/* =====================================================================
   READ MODE + OVERVIEW (students, 2026-11-06: see the questions without solving them, and look back mid-set)
   ===================================================================== */
/* the quiet line under a set's cards */
.rd-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 14px 2px 0; font-size: 14.5px; color: var(--c-text-2); }
.rd-links svg { width: 18px; height: 18px; color: var(--c-gold-ink); flex: none; }
.rd-links a { font-weight: 700; color: var(--c-brand); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--c-brand) 35%, transparent); }
.rd-links a:hover { text-decoration-color: var(--c-brand); }
.rd-dot { color: var(--c-border-strong); }
/* the page */
.read-page { max-width: 860px; }
.rd-lead { margin: 8px 0 0; color: var(--c-text-2); font-size: 16px; line-height: 1.55; }
.rd-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.rd-seg .seg-btn { min-height: 40px; padding: 0 14px; }
.rd-solve { white-space: nowrap; }
.rd-idx { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.rd-idx button { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); cursor: pointer; }
.rd-idx button:hover { border-color: var(--c-brand); color: var(--c-brand); }
.rd-list { display: grid; gap: 16px; margin-top: 18px; }
.rd-group { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 -4px; font-size: 18px; font-weight: 800; color: var(--c-text); scroll-margin-top: 90px; outline: none; }
.rd-group:first-child { margin-top: 0; }
.rd-group span { font-size: 13px; font-weight: 600; color: var(--c-text-2); white-space: nowrap; }
.rd-q { position: relative; padding: 18px 20px 20px; border: 1px solid var(--c-border); border-radius: 18px; background: var(--c-surface); scroll-margin-top: 90px; min-width: 0; }
.rd-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rd-n { flex: none; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--c-surface-2); color: var(--c-text-2); font-size: 13px; font-weight: 800; }
.rd-top .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-q .q-kind { margin: 10px 0 0; }
.rd-stem { margin: 10px 0 0; font-size: 18px; line-height: 1.45; font-weight: 700; color: var(--c-text); }
.rd-q .ospe-fig { margin: 12px 0 0; max-width: 520px; position: static; }
.rd-q .cs { margin-top: 12px; }
/* MCQ options: the right one green, every other with its note */
.rd-opts { list-style: none; display: grid; gap: 8px; margin: 14px 0 0; padding: 0; }
.rd-opt { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--c-border); background: var(--c-surface); font-size: 15.5px; line-height: 1.4; color: var(--c-text-2); }
.rd-opt-t { display: flex; align-items: flex-start; gap: 8px; }
.rd-opt.is-right { border-color: var(--c-right); background: var(--c-right); color: var(--c-on-right); font-weight: 700; }
.rd-tick { flex: none; display: inline-flex; margin-top: 2px; }
.rd-tick svg { width: 17px; height: 17px; }
.rd-note { display: block; margin-top: 5px; font-size: 13.5px; color: var(--c-text-2); }
.rd-ans { margin-top: 14px; }
.rd-ans > .explain { margin: 0; }
.rd-ans .explain p { margin: 0 0 8px; }
.rd-ans-k { margin: 4px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-right); }
.rd-ans .aps { margin: 0; }
.rd-ans .clarify, .rd-ans .explain-src { margin-top: 12px; }
.rd-ar { margin: 10px 0; }
.rd-ar .ar-panel { margin-top: 8px; }
.rd-ans .tq { margin: 4px 0 0; }
.rd-recall { margin: 0 0 10px; font-size: 16px; }
.rd-q .rd-show { display: none; margin-top: 14px; }
.rd-show svg { width: 17px; height: 17px; }
/* Hide answers: each answer opens with a tap; the options stay neutral until then */
.rd-list.is-covered .rd-q:not(.is-open) .rd-ans { display: none; }
.rd-list.is-covered .rd-q:not(.is-open) .rd-show { display: inline-flex; }
.rd-list.is-covered .rd-q:not(.is-open) .rd-opt.is-right { border-color: var(--c-border); background: var(--c-surface); color: var(--c-text); font-weight: 400; }
.rd-list.is-covered .rd-q:not(.is-open) .rd-tick,
.rd-list.is-covered .rd-q:not(.is-open) .rd-note { display: none; }
html.motion .rd-list.is-covered .rd-q.is-open .rd-ans { animation: rdIn .28s ease-out both; }
@keyframes rdIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rd-end { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 28px 0 8px; padding: 18px 20px; border-radius: 18px; background: var(--c-surface-2); }
.rd-end p { flex: 1 1 100%; margin: 0 0 4px; font-weight: 700; }
@media (max-width: 560px) {
  .rd-q { padding: 14px 14px 16px; border-radius: 16px; }
  .rd-stem { font-size: 16.5px; }
  .rd-bar { flex-direction: column; align-items: stretch; }
  .rd-seg { display: grid; grid-template-columns: 1fr 1fr; }
  .rd-solve { justify-content: center; }
  .rd-opt { font-size: 15px; padding: 10px 12px; }
}

/* OVERVIEW: the header button, the sheet, and the "looking back" bar */
.sb2-ov { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 11px; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--c-border-strong); color: var(--c-text); font: inherit; font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: background-color 150ms ease, box-shadow 150ms ease, color 150ms ease; }
.sb2-ov svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) { .sb2-ov:hover { background: var(--c-surface-2); box-shadow: inset 0 0 0 1.5px var(--c-brand); color: var(--c-brand); } }
@media (max-width: 1100px) {
  .sb2-ov { position: relative; width: 40px; padding: 0; justify-content: center; }
  .sb2-ov span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 760px) { .sb2-ov { width: 42px; height: 42px; } }
@media (max-width: 380px) { .sb2-ov, .sb2 .sb2-end { width: 36px; height: 36px; } }
html.ov-open, html.ov-open body { overflow: hidden; }
.ov-sheet { position: fixed; inset: 0; z-index: 190; display: flex; justify-content: flex-end; }
.ov-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.38); }
.ov-panel { position: relative; display: flex; flex-direction: column; width: min(440px, 100%); height: 100%; padding: 18px 18px 20px; background: var(--c-bg); box-shadow: -12px 0 40px rgb(0 0 0 / 0.22); overflow-y: auto; overscroll-behavior: contain; }
html.motion .ov-panel { animation: ovIn .26s cubic-bezier(.2,.8,.3,1) both; }
html.motion .ov-scrim { animation: ovFade .2s ease-out both; }
@keyframes ovIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ovUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ovFade { from { opacity: 0; } to { opacity: 1; } }
.ov-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ov-h { margin: 0; font-size: 22px; font-weight: 800; outline: none; }
.ov-sum { margin: 6px 0 0; font-size: 14.5px; font-weight: 700; color: var(--c-text); }
.ov-help { margin: 4px 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--c-text-2); }
.ov-list { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.ov-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-surface); color: var(--c-text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.ov-row:hover { border-color: var(--c-brand); }
.ov-row:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.ov-row.is-live { border-color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 9%, var(--c-surface)); }
.ov-row.is-viewing { border-color: var(--c-brand); box-shadow: inset 3px 0 0 var(--c-brand); }
.ov-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--c-surface-2); font-size: 12.5px; font-weight: 800; color: var(--c-text-2); }
.ov-th { flex: none; width: 44px; height: 34px; object-fit: cover; border-radius: 6px; background: var(--c-surface-2); }
.ov-t { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ov-st { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.ov-st svg { width: 12px; height: 12px; }
.ov-st.is-done { background: var(--c-got-bg); color: var(--c-got); }
.ov-st.is-back { background: var(--c-miss-bg); color: var(--c-miss); }
.ov-st.is-now { background: var(--c-gold); color: #241a00; }
.ov-locked { display: flex; gap: 8px; align-items: flex-start; margin: 14px 2px 0; font-size: 13.5px; line-height: 1.45; color: var(--c-text-2); }
.ov-locked svg { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.ov-live { margin-top: 16px; justify-content: center; }
@media (max-width: 640px) {
  .ov-sheet { align-items: flex-end; }
  .ov-panel { width: 100%; height: auto; max-height: 86svh; border-radius: 20px 20px 0 0; padding: 14px 14px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgb(0 0 0 / 0.22); }
  html.motion .ov-panel { animation-name: ovUp; }
  .ov-panel::before { content: ""; display: block; flex: none; width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 4px; background: var(--c-border-strong); }
  .ov-live { position: sticky; bottom: 0; }
}
.ov-back { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; max-width: 760px; margin: 0 auto 12px; padding: 10px 12px 10px 14px; border-radius: 14px;
  border: 1px solid var(--c-gold); background: color-mix(in srgb, var(--c-gold) 10%, var(--c-surface)); font-size: 14px; font-weight: 700; color: var(--c-text); }
.ov-back > span { display: inline-flex; align-items: center; gap: 7px; }
.ov-back svg { width: 16px; height: 16px; }
.ov-back-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--c-brand); color: var(--c-on-brand); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
@media (max-width: 560px) { .ov-back { font-size: 13px; } .ov-back-btn { flex: 1 1 100%; justify-content: center; } }
/* read mode: one fixed picture size per screen, like the sessions (its width can't depend on its frame) */
.rd-q .ospe-pic { --maxh: 380px; width: min(calc(var(--maxh) * var(--ar)), calc(100vw - 80px), 680px); }
@media (min-width: 641px) and (max-width: 899px) { .rd-q .ospe-pic { --maxh: 340px; } }
@media (max-width: 640px) { .rd-q .ospe-pic { --maxh: 230px; width: min(calc(var(--maxh) * var(--ar)), calc(100vw - 64px)); } }
.rd-q .ospe-fig { max-width: none; }
.rd-q .ospe-zoom { margin: 0; }
.rd-q .q-kind { margin: 12px 0 2px; }
.rd-q .q-kind + .rd-stem, .rd-q .ospe-fig + .rd-stem { margin-top: 8px; }
.rd-q .ospe-fig + .rd-stem { margin-top: 14px; }

/* READ MODE ENTRY v2 (user, 2026-11-06: "the button feels hidden… so much potential"): its own card under the set's cards.
   A deep-green panel (like the How it works band), a tiny picture of an answer already open, one big button per set. */
.rde { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px 24px; margin: 18px 0 0; padding: 22px 24px; border-radius: 20px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c-hero-bg) 82%, #3fae76) 0%, var(--c-hero-bg) 55%, color-mix(in srgb, var(--c-hero-bg) 82%, #000) 100%); color: #fff;
  box-shadow: 0 10px 28px rgb(23 76 60 / 0.28); }
.rde::after { content: ""; position: absolute; inset: auto -60px -80px auto; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c-gold) 38%, transparent), transparent); z-index: -1; pointer-events: none; }
/* the little picture: a question line, three options, the right one green and ticked, an eye */
.rde-art { position: relative; display: grid; gap: 6px; width: 112px; padding: 12px 12px 14px; border-radius: 14px; background: rgb(255 255 255 / 0.96); box-shadow: 0 8px 20px rgb(0 0 0 / 0.22); transform: rotate(-4deg); }
.rde-l { display: block; height: 8px; width: 78%; border-radius: 4px; background: #1d2b24; opacity: .85; margin-bottom: 3px; }
.rde-o { display: flex; align-items: center; gap: 4px; height: 13px; border-radius: 5px; background: #e9ece9; }
.rde-o.is-right { background: #1f9d55; color: #fff; padding-left: 4px; }
.rde-o.is-right svg { width: 9px; height: 9px; }
.rde-o.is-right i { display: block; height: 4px; width: 46%; border-radius: 2px; background: rgb(255 255 255 / .75); }
.rde-eye { position: absolute; right: -12px; top: -12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-gold); color: #241a00; box-shadow: 0 4px 10px rgb(0 0 0 / .25); transform: rotate(4deg); }
.rde-eye svg { width: 18px; height: 18px; }
html.motion .rde-art { animation: rdeFloat 5s ease-in-out infinite; }
html.motion .rde-o.is-right { animation: rdeGlow 2.6s ease-in-out infinite; }
@keyframes rdeFloat { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-4px); } }
@keyframes rdeGlow { 0%, 100% { box-shadow: 0 0 0 0 rgb(31 157 85 / 0); } 50% { box-shadow: 0 0 0 4px rgb(31 157 85 / .25); } }
.rde-txt { min-width: 0; }
.rde-k { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgb(255 255 255 / .14); color: var(--c-hero-gold, #f2cf7a); font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.rde-k svg { width: 15px; height: 15px; }
.rde-h { margin: 8px 0 4px; font-size: 22px; line-height: 1.2; font-weight: 800; color: #fff; }
.rde-d { margin: 0; max-width: 46ch; font-size: 14.5px; line-height: 1.5; color: rgb(255 255 255 / .82); }
.rde-go { display: grid; gap: 10px; min-width: 210px; }
.rde-btn { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px 10px 10px; border-radius: 14px; background: #fff; color: #14251c; text-decoration: none;
  box-shadow: 0 4px 12px rgb(0 0 0 / .18); transition: transform .16s ease, box-shadow .16s ease; }
.rde-btn:hover, .rde-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 22px rgb(0 0 0 / .25); }
.rde-btn:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.rde-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, #1f9d55 14%, #fff); color: #17633a; }
.rde-ic svg { width: 19px; height: 19px; }
.rde-bt { flex: 1; display: grid; line-height: 1.2; }
.rde-bt b { font-size: 15.5px; font-weight: 800; }
.rde-bt small { font-size: 12.5px; font-weight: 600; color: #5d6b63; }
.rde-ar { flex: none; display: inline-flex; color: #17633a; transition: transform .16s ease; }
.rde-ar svg { width: 18px; height: 18px; }
.rde-btn:hover .rde-ar { transform: translateX(3px); }
:root[data-theme="dark"] .rde-btn { background: #f4f6f3; }
@media (max-width: 900px) {
  .rde { grid-template-columns: auto 1fr; }
  .rde-go { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); min-width: 0; }
}
@media (max-width: 560px) {
  .rde { gap: 14px 16px; padding: 18px 16px 16px; border-radius: 18px; }
  .rde-art { width: 78px; padding: 9px 9px 10px; gap: 5px; align-self: start; margin-top: 4px; }
  .rde-l { height: 6px; } .rde-o { height: 10px; }
  .rde-eye { width: 28px; height: 28px; right: -10px; top: -10px; } .rde-eye svg { width: 15px; height: 15px; }
  .rde-h { font-size: 19px; margin-top: 6px; }
  .rde-d { font-size: 13.5px; }
  .rde-go { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rde-go.is-one { grid-template-columns: 1fr; }
  .rde-btn { min-height: 52px; padding: 8px 10px 8px 8px; gap: 8px; }
  .rde-ic { width: 32px; height: 32px; }
  .rde-ar { display: none; }
}
.rde .rde-btn, .rde .rde-btn b { color: #14251c; }
.rde .rde-btn small { color: #5d6b63; }
/* read mode: a light shimmer while a picture loads (never a black box), then it fades in */
.rd-q .ospe-zoom { background: var(--c-surface-2); }
.rd-q .ospe-pic.is-loading { background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%) var(--c-surface-2); background-size: 220% 100%; animation: ospe-wait 1.2s linear infinite; }
:root[data-theme="dark"] .rd-q .ospe-pic.is-loading { background-image: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .08) 50%, transparent 70%); }
.rd-q .ospe-pic.is-loading img { opacity: 0; }
.rd-q .ospe-pic img { transition: opacity .25s ease; }

/* READ MODE OPTIONS v2 (user, 2026-11-06: the wrong options "blend" with the right one; confusing until you focus).
   At a glance: ONE green answer with "Correct answer"; every wrong option is ruled out like in the exam (red ✗, struck
   through, faded, no box), its note still easy to read. */
.rd-opts { gap: 6px; }
.rd-opt { display: block; padding: 8px 12px; border: 0; border-radius: 12px; background: none; color: var(--c-text-2); font-weight: 400; }
.rd-opt-t { display: flex; align-items: center; gap: 10px; }
.rd-mk { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.rd-mk svg { width: 13px; height: 13px; }
.rd-opt:not(.is-right) .rd-mk { background: color-mix(in srgb, var(--c-wrong) 13%, transparent); color: var(--c-wrong); }
.rd-opt:not(.is-right) .rd-txt { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, var(--c-wrong) 55%, transparent); opacity: .72; }
.rd-opt:not(.is-right) .rd-note { margin: 3px 0 0 34px; color: var(--c-text-2); }
.rd-opt.is-right { padding: 13px 14px; border: 2px solid var(--c-right); background: var(--c-right-bg); color: var(--c-text); font-weight: 700; box-shadow: 0 4px 14px color-mix(in srgb, var(--c-right) 18%, transparent); margin-bottom: 4px; }
.rd-opt.is-right .rd-mk { width: 26px; height: 26px; background: var(--c-right); color: #fff; }
.rd-opt.is-right .rd-mk svg { width: 15px; height: 15px; }
.rd-txt { flex: 1; min-width: 0; }
.rd-badge { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--c-right); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
:root[data-theme="dark"] .rd-opt.is-right .rd-mk, :root[data-theme="dark"] .rd-badge { color: #0b2416; }
/* the right answer first in reading order would give it away when answers are hidden, so it keeps its place; it just
   stands out. Hide answers: every option plain and equal until "Show the answer". */
.rd-list.is-covered .rd-q:not(.is-open) .rd-opt { padding: 11px 14px; border: 1px solid var(--c-border); background: var(--c-surface); box-shadow: none; color: var(--c-text); font-weight: 400; margin: 0; }
.rd-list.is-covered .rd-q:not(.is-open) .rd-txt { text-decoration: none; opacity: 1; }
.rd-list.is-covered .rd-q:not(.is-open) .rd-mk,
.rd-list.is-covered .rd-q:not(.is-open) .rd-badge { display: none; }
/* (user, 2026-11-06: with answers hidden "the right choice is clear, its transparent") every option the same colour and
   weight, and a screen reader no longer hears "(wrong)" until the answer is shown */
.rd-list.is-covered .rd-q:not(.is-open) .rd-opt.is-right { color: var(--c-text); font-weight: 400; }
.rd-list.is-covered .rd-q:not(.is-open) .rd-opt .sr-only { display: none; }
@media (max-width: 560px) {
  .rd-badge { padding: 3px 8px; font-size: 10.5px; }
  .rd-opt.is-right { padding: 11px 12px; }
}
/* (2026-11-06) a very wide picture (e.g. 2.2:1) never runs past its column: it scales down, keeping its shape */
.ospe-pic { max-width: 100%; }

/* DARK MODE GLOW v2 (user, 2026-11-06: "reduce the glow a lil on dark mode"): about half the glow in the dark theme,
   whose green and gold are brighter. Light mode is unchanged. */
@keyframes fx-card-right-dk { 0%, 35% { box-shadow: 0 0 0 2px var(--c-right), 0 0 8px color-mix(in srgb, var(--c-right) 12%, transparent); border-color: var(--c-right); } }
@keyframes why-in-dk { 0% { opacity: 0; transform: translateY(10px); } 60% { opacity: 1; box-shadow: inset 4px 0 0 var(--c-right), 0 0 0 2px color-mix(in srgb, var(--c-right) 14%, transparent); } 100% { transform: none; } }
@keyframes fc-glow-dk { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-right) 30%, transparent); } 40% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-right) 12%, transparent), 0 10px 24px color-mix(in srgb, var(--c-right) 14%, transparent); } 100% { box-shadow: inset 4px 0 0 var(--c-right), 0 8px 24px rgb(0 0 0 / 0.08); } }
@keyframes fc-breathe-dk { 0%, 100% { box-shadow: 0 8px 24px rgb(0 0 0 / 0.08); border-color: var(--c-border); } 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-brand) 8%, transparent), 0 10px 22px color-mix(in srgb, var(--c-brand) 9%, transparent); border-color: color-mix(in srgb, var(--c-brand) 40%, var(--c-border)); } }
@keyframes tq-slip-glow-dk { from { box-shadow: inset 4px 0 0 var(--c-right), 0 0 0 1px color-mix(in srgb, var(--c-right) 40%, transparent), 0 0 8px color-mix(in srgb, var(--c-right) 10%, transparent); } to { box-shadow: inset 4px 0 0 var(--c-right), 0 0 0 1px color-mix(in srgb, var(--c-right) 55%, transparent), 0 0 16px color-mix(in srgb, var(--c-right) 20%, transparent); } }
@keyframes tq-calm-dk { 0%, 100% { transform: scale(1.12); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-gold) 18%, transparent), 0 0 4px color-mix(in srgb, var(--c-gold) 20%, transparent); } 50% { transform: scale(1.2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 15%, transparent), 0 0 9px color-mix(in srgb, var(--c-gold) 30%, transparent); } }
@keyframes rdeGlow-dk { 0%, 100% { box-shadow: 0 0 0 0 rgb(31 157 85 / 0); } 50% { box-shadow: 0 0 0 3px rgb(31 157 85 / .14); } }
html.motion:root[data-theme="dark"] .qcard.fx-right { animation-name: fx-card-right-dk; }
html.motion:root[data-theme="dark"] .explain.is-fresh { animation-name: why-in-dk; }
html.motion:root[data-theme="dark"] .fc.is-got.fc-hit .fc-back { animation-name: fc-glow-dk; }
html.motion:root[data-theme="dark"] .fc-q .fc:not(.is-flipped) button.fc-front { animation-name: fc-breathe-dk; }
:root[data-theme="dark"] .tq-slip { box-shadow: inset 4px 0 0 var(--c-right), 0 0 0 1px color-mix(in srgb, var(--c-right) 40%, transparent), 0 0 12px color-mix(in srgb, var(--c-right) 14%, transparent); }
html.motion:root[data-theme="dark"] .tq-slip { animation-name: tq-slip-in, tq-slip-glow-dk; }
:root[data-theme="dark"] .tq-chip.is-cur { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-gold) 22%, transparent), 0 0 6px color-mix(in srgb, var(--c-gold) 28%, transparent); }
html.motion:root[data-theme="dark"] .tq-chip.is-cur { animation-name: tq-calm-dk; }
:root[data-theme="dark"] .rde { box-shadow: 0 8px 22px rgb(0 0 0 / 0.28); }
:root[data-theme="dark"] .rde::after { opacity: .45; }
html.motion:root[data-theme="dark"] .rde-o.is-right { animation-name: rdeGlow-dk; }
:root[data-theme="dark"] .rd-opt.is-right { box-shadow: 0 2px 8px color-mix(in srgb, var(--c-right) 9%, transparent); }
@media (prefers-color-scheme: dark) {
html.motion:root:not([data-theme="light"]) .qcard.fx-right { animation-name: fx-card-right-dk; }
html.motion:root:not([data-theme="light"]) .explain.is-fresh { animation-name: why-in-dk; }
html.motion:root:not([data-theme="light"]) .fc.is-got.fc-hit .fc-back { animation-name: fc-glow-dk; }
html.motion:root:not([data-theme="light"]) .fc-q .fc:not(.is-flipped) button.fc-front { animation-name: fc-breathe-dk; }
:root:not([data-theme="light"]) .tq-slip { box-shadow: inset 4px 0 0 var(--c-right), 0 0 0 1px color-mix(in srgb, var(--c-right) 40%, transparent), 0 0 12px color-mix(in srgb, var(--c-right) 14%, transparent); }
html.motion:root:not([data-theme="light"]) .tq-slip { animation-name: tq-slip-in, tq-slip-glow-dk; }
:root:not([data-theme="light"]) .tq-chip.is-cur { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-gold) 22%, transparent), 0 0 6px color-mix(in srgb, var(--c-gold) 28%, transparent); }
html.motion:root:not([data-theme="light"]) .tq-chip.is-cur { animation-name: tq-calm-dk; }
:root:not([data-theme="light"]) .rde { box-shadow: 0 8px 22px rgb(0 0 0 / 0.28); }
:root:not([data-theme="light"]) .rde::after { opacity: .45; }
html.motion:root:not([data-theme="light"]) .rde-o.is-right { animation-name: rdeGlow-dk; }
:root:not([data-theme="light"]) .rd-opt.is-right { box-shadow: 0 2px 8px color-mix(in srgb, var(--c-right) 9%, transparent); }
}
/* (2026-11-06, full review) the smallest phones: the Overview button took the title's room (it read "PAT…"); the round
   buttons and the pill shrink, gaps tighten, and the MCQ / Written chip is left out there (the title still names the lecture) */
@media (max-width: 380px) {
  .sb2-in { gap: 6px; }
  .sb2-right { gap: 2px; }
  .sb2 .sb2-ov, .sb2 .sb2-end, .sb2 [data-ui="theme"] { width: 34px; height: 34px; }
  .v2 .sb2 .sb2-prog { height: 28px; padding: 0 7px; font-size: 12px; }
  .sb2-t2 .sb2-kind-sm { display: none; }
}
@media (max-width: 380px) { .sb2-t1 { font-size: 10.5px; letter-spacing: .02em; } .sb2-title { padding: 4px 2px; } }

/* ---------- WRITTEN PLAYBOOK v4 (user, 2026-11-07: "put urself in a students shoes who is revising for his exam in 4 days").
   Page 0 = the lecture on one sheet; then the loop; then one annotated page per exam question. Pages, not a scroll. */
.pb-type .type-icon { color: var(--c-brand); }
.lec-types:has(.pb-type) { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.bk-wrap { max-width: 1100px; }
.bk { max-width: 980px; margin: 6px auto 0; }
.bk-page { display: flex; flex-direction: column; min-height: calc(100svh - 236px); padding: 22px 40px 18px; border-radius: 20px; border: 1px solid var(--c-border); background: var(--c-surface);
  box-shadow: 0 1px 0 var(--c-border), 0 22px 50px -24px var(--c-shadow), 0 3px 10px var(--c-shadow); }
.bk-run { display: flex; justify-content: space-between; gap: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-2); }
.bk-run span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-run-c { flex: none; font-family: var(--font-serif); font-size: 14px; letter-spacing: 0; color: var(--c-gold-ink); }
.bk-segs { display: flex; gap: 4px; margin: 10px 0 0; }
.v2 .bk-segs a { flex: 1; height: 4px; border-radius: 4px; background: var(--c-border); }
.v2 .bk-segs a.is-past { background: color-mix(in srgb, var(--c-brand) 45%, var(--c-border)); }
.v2 .bk-segs a.is-cur { background: var(--c-gold); }
.bk-body { flex: 1; padding: 20px 0 6px; }
html.motion .bk.turn-next .bk-page { animation: pbr-next 280ms var(--m-ease) both; }
html.motion .bk.turn-prev .bk-page { animation: pbr-prev 280ms var(--m-ease) both; }
@keyframes pbr-next { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes pbr-prev { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
.bk-kicker { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gold-ink); }
.bk-h { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 27px; line-height: 1.2; }
.bk-h3 { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 23px; line-height: 1.2; }
.bk-intro { margin: 6px 0 0; color: var(--c-text-2); line-height: 1.5; }
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-src { font-size: 13px; color: var(--c-text-2); }
.pb-shape-chip { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--c-brand); color: var(--c-brand); font-size: 12.5px; font-weight: 800; }
.sh-min { flex: none; font-size: 12.5px; font-weight: 700; color: var(--c-text-2); }
/* page 0: the lecture on one sheet */
.sh-title { margin: 8px 0 0; font-family: var(--font-serif); font-weight: 600; font-size: 38px; line-height: 1.08; letter-spacing: -.01em; }
.sh-lead { margin: 10px 0 0; max-width: 62ch; font-family: var(--font-serif); font-size: 18px; line-height: 1.55; color: var(--c-text-2); }
.sh-time { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--c-gold) 12%, var(--c-surface)); font-size: 14.5px; line-height: 1.45; }
.sh-time svg { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--c-gold-ink); }
.sh-list { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: sh; }
.sh-list li { counter-increment: sh; }
.sh-list li + li { border-top: 1px solid var(--c-border); }
.v2 a.sh-row { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 14px 4px 14px 40px; color: var(--c-text); text-decoration: none; }
.sh-row::before { content: counter(sh); position: absolute; left: 4px; top: 11px; font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--c-gold-ink); }
.sh-q { grid-column: 1; font-weight: 700; line-height: 1.35; }
.sh-row:hover .sh-q { color: var(--c-brand); }
.sh-tags { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.sh-tag { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.sh-tag.is-doc { background: color-mix(in srgb, var(--c-gold) 18%, transparent); color: var(--c-gold-ink); font-family: var(--font-ar); }
.sh-tag.is-past { background: color-mix(in srgb, var(--c-wrong) 10%, transparent); color: var(--c-wrong); }
.sh-frame { grid-column: 1 / -1; font-size: 14px; font-weight: 700; color: var(--c-brand); }
.sh-frame i { font-style: normal; color: var(--c-gold-ink); }
.sh-hook { grid-column: 1 / -1; font-family: var(--font-serif); font-style: italic; font-size: 16.5px; line-height: 1.45; color: var(--c-text-2); }
.sh-row.is-quiet .sh-q { font-weight: 600; color: var(--c-text-2); }
.v2 a.pbr-howto { display: inline-flex; align-items: center; gap: 6px; margin: 16px 0 0; font-weight: 700; color: var(--c-gold-ink); text-decoration: none; }
.pbr-howto svg { width: 17px; height: 17px; }
.pbr-howto:hover span { text-decoration: underline; }
/* the loop page: diagram | how to read it */
.lp { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 36px; align-items: start; }
.lp-side { padding-top: 46px; }
.lp-cap { margin: 0 0 12px; font-family: var(--font-serif); font-size: 17.5px; line-height: 1.55; }
.lp-k { margin: 16px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-gold-ink); }
.lp-qs { margin: 0; padding-left: 22px; }
.lp-qs li { margin: 6px 0; line-height: 1.4; }
.v2 .lp-qs a { color: var(--c-brand); font-weight: 700; text-decoration: none; }
.lp-qs a:hover { text-decoration: underline; }
.dg { position: relative; margin: 16px 0 0; padding-right: 46px; }
.dg-main { display: grid; justify-items: center; }
.dg-node { width: min(420px, 100%); padding: 10px 14px; border-radius: 14px; text-align: center; border: 1.5px solid var(--c-brand); background: var(--c-surface); }
.dg-node.is-start { border-style: dashed; }
.dg-node.is-gland { background: var(--c-brand); color: var(--c-on-brand, #fff); }
.dg-node.is-end { background: color-mix(in srgb, var(--c-right) 12%, var(--c-surface)); border-color: var(--c-right); }
.dg-t { margin: 0; font-weight: 700; line-height: 1.35; }
.dg-ar { position: relative; display: block; width: 2px; height: 22px; background: var(--c-brand); }
.dg-ar::after { content: ""; position: absolute; left: -5px; bottom: -2px; border: 6px solid transparent; border-top-color: var(--c-brand); border-bottom: 0; }
.dg-fan, .dg-join { position: relative; width: 100%; height: 22px; }
.dg-fan::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 11px; margin-left: -1px; background: var(--c-brand); }
.dg-fan::after { content: ""; position: absolute; left: 16.66%; right: 16.66%; top: 11px; height: 11px; border: 2px solid var(--c-brand); border-bottom: 0; border-radius: 8px 8px 0 0; }
.dg-join::before { content: ""; position: absolute; left: 16.66%; right: 16.66%; top: 0; height: 11px; border: 2px solid var(--c-brand); border-top: 0; border-radius: 0 0 8px 8px; }
.dg-join::after { content: ""; position: absolute; left: 50%; top: 11px; width: 2px; height: 11px; margin-left: -1px; background: var(--c-brand); }
.dg-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.dg-organ { padding: 10px 11px; border-radius: 12px; border: 1px solid var(--c-border); background: color-mix(in srgb, var(--c-brand) 5%, var(--c-surface)); }
.dg-oh { margin: 0 0 4px; font-weight: 800; color: var(--c-brand); }
.dg-ot { margin: 2px 0 0; font-size: 13.5px; line-height: 1.35; }
.dg-back { position: absolute; right: 0; top: 64px; bottom: 22px; width: 34px; border: 2px dashed var(--c-gold); border-left: 0; border-radius: 0 16px 16px 0; }
.dg-back::before { content: ""; position: absolute; left: -8px; top: -7px; border: 6px solid transparent; border-right-color: var(--c-gold); border-left: 0; }
.dg-back-t { position: absolute; right: -6px; top: 50%; transform: translate(50%, -50%) rotate(90deg); white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: var(--c-surface); font-size: 12px; font-weight: 800; color: var(--c-gold-ink); }
/* one question = one annotated page */
.qa-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.qa-q { margin: 12px 0 0; font-family: var(--font-serif); font-weight: 600; font-size: 27px; line-height: 1.2; }
.qa-line { margin: 14px 0 0; padding: 10px 16px; border-left: 3px solid var(--c-gold); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--c-gold) 10%, var(--c-surface)); font-family: var(--font-serif); font-size: 18px; line-height: 1.5; }
.qa-line-k { display: block; margin-bottom: 2px; font-family: var(--font-ui); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-gold-ink); }
.an { margin: 18px 0 0; }
.an-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0 26px; padding: 10px 0; }
.an-row + .an-row { border-top: 1px dashed var(--c-border); }
.an-ans { padding-left: 16px; border-left: 2px solid color-mix(in srgb, var(--c-wrong) 30%, transparent); }
.an-g { margin: 0 0 4px; font-size: 15px; font-weight: 800; color: var(--c-brand); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c-brand) 45%, transparent); text-underline-offset: 4px; }
.an-ans ol { margin: 0; padding-left: 24px; }
.an-ans li { margin: 4px 0; padding-left: 3px; font-size: 16px; line-height: 1.55; }
.an-ans li::marker { font-family: var(--font-serif); font-weight: 600; color: var(--c-text-2); }
.an-note { align-self: start; font-family: var(--font-serif); font-size: 16px; line-height: 1.5; color: var(--c-text); }
.an-note-k { display: block; margin-bottom: 2px; font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-brand); }
.qa-watch { margin: 18px 0 0; padding-left: 14px; border-left: 2px solid var(--c-wrong); }
.qa-watch-k { margin: 0 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-wrong); }
.qa-watch ul { margin: 0; padding-left: 18px; }
.qa-watch li { margin: 4px 0; font-size: 15px; line-height: 1.5; }
.bk-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 0; }
.v2 a.pb-practise { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--c-brand); color: var(--c-brand); font-weight: 800; text-decoration: none; }
.pb-practise svg { width: 16px; height: 16px; }
.v2 a.pb-practise:hover { background: color-mix(in srgb, var(--c-brand) 8%, transparent); }
.v2 a.pb-practise.is-small { min-height: 34px; padding: 0 12px; font-size: 14px; margin-top: 6px; }
.pb-table { margin: 18px 0 0; }
.pb-table-h { margin: 0 0 8px; font-weight: 800; font-size: 15px; }
.pb-table-in { overflow-x: auto; border-radius: 12px; border: 1px solid var(--c-border); }
.pb-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pb-table th, .pb-table td { padding: 8px 12px; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; line-height: 1.4; }
.pb-table thead th { background: color-mix(in srgb, var(--c-brand) 9%, var(--c-surface)); font-size: 13px; }
.pb-table tbody th { font-weight: 800; color: var(--c-brand); }
.pb-table tr:last-child > * { border-bottom: 0; }
/* the closing page */
.cl { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; }
.bk-quick { list-style: none; margin: 12px 0 0; padding: 0; }
.bk-quick li { padding: 12px 0; }
.bk-quick li + li { border-top: 1px solid var(--c-border); }
.bk-quick-q { margin: 0; font-weight: 700; line-height: 1.4; }
.bk-quick-f { margin: 5px 0 0; font-family: var(--font-serif); font-size: 16.5px; line-height: 1.5; color: var(--c-text-2); }
.bk-marks { margin: 12px 0 0; padding-left: 22px; }
.bk-marks li { margin: 9px 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.55; }
.bk-marks li::marker { color: var(--c-gold-ink); }
/* turning, always in reach */
.pbr-turns { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; gap: 10px; margin: 12px 0 0; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--c-bg) 70%, transparent); }
.pbr-turn { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 48%; min-height: 54px; padding: 8px 16px; border-radius: 16px; text-decoration: none; transition: transform .15s ease; }
.pbr-turn svg { flex: none; width: 18px; height: 18px; }
.pbr-turn-b { display: grid; min-width: 0; }
.pbr-turn-k { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pbr-turn-t { font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2 a.pbr-turn.is-prev { border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); }
.v2 a.pbr-turn.is-next { margin-left: auto; background: var(--c-brand); color: var(--c-on-brand, #fff); text-align: right; box-shadow: 0 6px 16px -6px var(--c-shadow); }
.pbr-turn.is-next .pbr-turn-t { opacity: .85; }
.pbr-turn:hover { transform: translateY(-1px); }
.pbr-turn.is-none { visibility: hidden; }
/* How to?: one short sheet */
.pbr { max-width: 760px; margin: 6px auto 0; }
.pbr-sheet { padding: 24px 44px 22px; border-radius: 20px; border: 1px solid var(--c-border); background: var(--c-surface); box-shadow: 0 22px 50px -24px var(--c-shadow), 0 3px 10px var(--c-shadow); }
.pbr-run { display: flex; justify-content: space-between; padding-bottom: 9px; border-bottom: 1px solid var(--c-border); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-2); }
.pbr-body { padding-top: 18px; }
.pbr-title { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 34px; line-height: 1.12; }
.pbr-lead { margin: 10px 0 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.55; color: var(--c-text-2); }
.pbr-how-list { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: how; }
.pbr-how-list li { counter-increment: how; position: relative; padding: 12px 0 12px 44px; font-family: var(--font-serif); font-size: 17.5px; line-height: 1.6; }
.pbr-how-list li + li { border-top: 1px solid var(--c-border); }
.pbr-how-list li::before { content: counter(how); position: absolute; left: 4px; top: 8px; font-size: 27px; font-weight: 600; color: var(--c-gold-ink); }
@media (max-width: 860px) {
  .lp, .cl { grid-template-columns: 1fr; }
  .lp-side { padding-top: 0; }
  /* phones: the why sits under its part, a small tinted line */
  .an-row { grid-template-columns: 1fr; }
  .an-note { margin: 6px 0 0 18px; padding: 7px 11px; border-radius: 10px; background: color-mix(in srgb, var(--c-brand) 7%, transparent); font-size: 15px; }
  .an-note.is-empty { display: none; }
}
@media (max-width: 640px) {
  .bk-page { min-height: calc(100svh - 220px); padding: 16px 16px 12px; border-radius: 18px; }
  .bk-body { padding-top: 14px; }
  .sh-title { font-size: 30px; }
  .sh-lead { font-size: 16.5px; }
  .v2 a.sh-row { grid-template-columns: 1fr; padding-left: 34px; }
  .sh-tags { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .qa-q { font-size: 22px; }
  .qa-line { font-size: 16.5px; }
  .an-ans li { font-size: 15.5px; }
  .dg { padding-right: 38px; }
  .dg-back { width: 28px; top: 58px; }
  .dg-node { padding: 8px 10px; }
  .dg-t { font-size: 14.5px; }
  .dg-split { gap: 5px; }
  .dg-organ { padding: 8px 7px; }
  .dg-oh { font-size: 13.5px; }
  .dg-ot { font-size: 12.5px; }
  .pbr-turn { min-height: 52px; padding: 8px 12px; }
  .pbr-sheet { padding: 16px 18px; }
  .pbr-title { font-size: 28px; }
  .pbr-how-list li { font-size: 16.5px; padding-left: 38px; }
}
@media (max-width: 640px) {
  .is-sheet .bk-kicker { display: none; }
  .sh-title { margin-top: 0; font-size: 26px; }
  .sh-lead { margin-top: 6px; font-size: 15.5px; line-height: 1.5; }
  .sh-time { margin-top: 10px; padding: 8px 12px; font-size: 13.5px; }
  .sh-list { margin-top: 8px; }
  .v2 a.sh-row { padding: 12px 2px 12px 32px; }
  .sh-row::before { top: 9px; font-size: 20px; }
  .sh-hook { font-size: 15.5px; }
}
@media (max-width: 860px) { .an-note { font-size: 14.5px; line-height: 1.45; padding: 6px 10px; } .an-note-k { font-size: 10.5px; } }
/* v4.1 (user, 2026-11-07: "the organizing and sectioning of info could be better"): topic sections on the sheet, named parts */
.is-sheet .bk-body { counter-reset: sh; }
.sh-list { counter-reset: none; }
.sh-sec { margin-top: 18px; }
.sh-sec-h { display: flex; align-items: center; gap: 10px; margin: 0; padding-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-brand); border-bottom: 2px solid color-mix(in srgb, var(--c-brand) 25%, transparent); }
.sh-sec .sh-list { margin-top: 0; }
.qa-parts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 14px 0 0; }
.qa-parts-k { width: 100%; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-2); }
.qa-part { padding: 4px 11px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--c-brand) 35%, var(--c-border)); background: color-mix(in srgb, var(--c-brand) 6%, var(--c-surface)); font-size: 14px; font-weight: 700; color: var(--c-brand); }
.qa-parts i { font-style: normal; color: var(--c-text-2); }
@media (max-width: 640px) { .qa-part { padding: 3px 9px; font-size: 13px; } .qa-parts { gap: 5px 6px; } .qa-parts-k { font-size: 10.5px; } }
/* diagrams with 2–4 branches; table answers */
.dg-split { grid-template-columns: repeat(var(--dg-n, 3), minmax(0, 1fr)); }
.dg-fan::after, .dg-join::before { left: var(--dg-edge, 16.66%); right: var(--dg-edge, 16.66%); }
.an-table { margin: 0 0 6px; }
.an-table td { font-size: 16px; font-weight: 700; text-align: center; }
/* v4.2 (user, 2026-11-07: "you shouldn't just be bashed with all that"; "the tags are too close"; "take advantage of wide
   screens rather than making it lengthy… for iPads and desktops") */
.cv { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px 48px; align-items: center; min-height: 100%; padding: 2% 0; }
.cv-meta { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 15px; color: var(--c-text-2); }
.cv-meta svg { width: 17px; height: 17px; color: var(--c-gold-ink); }
.v2 a.cv-start { display: inline-flex; align-items: center; gap: 10px; margin: 20px 0 0; min-height: 50px; padding: 0 24px; border-radius: 999px; background: var(--c-brand); color: var(--c-on-brand, #fff); font-weight: 800; font-size: 16px; text-decoration: none; box-shadow: 0 8px 20px -8px var(--c-shadow); }
.cv-start svg { width: 18px; height: 18px; }
.cv-start:hover { transform: translateY(-1px); }
.v2 a.cv-alt { display: block; margin: 14px 0 0; font-size: 14.5px; color: var(--c-text-2); text-decoration: underline; text-underline-offset: 3px; }
.cv-main .pbr-howto { margin-top: 10px; }
.cv-map { list-style: none; margin: 0; padding: 18px 20px; border-radius: 18px; background: color-mix(in srgb, var(--c-brand) 5%, var(--c-surface)); border: 1px solid var(--c-border); counter-reset: cv; }
.cv-map li { counter-increment: cv; position: relative; padding: 11px 0 11px 36px; }
.cv-map li + li { border-top: 1px solid var(--c-border); }
.cv-map li::before { content: counter(cv); position: absolute; left: 2px; top: 8px; font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--c-gold-ink); }
.cv-map-t { display: block; font-weight: 700; line-height: 1.35; }
.cv-map-s { display: block; font-size: 13.5px; color: var(--c-text-2); }
/* the one sheet: topic sections side by side */
.sh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px 22px; margin-top: 16px; align-items: start; }
.sh-grid .sh-sec { margin: 0; }
.sh-cards { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.v2 a.sh-card { display: grid; gap: 8px; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.sh-card:hover { border-color: var(--c-brand); transform: translateY(-1px); }
.sh-card .sh-q { font-weight: 700; line-height: 1.35; }
.sh-card .sh-tags { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px 8px; }
.sh-card .sh-tags:empty { display: none; }
.sh-card .sh-frame { font-size: 13.5px; line-height: 1.45; }
.sh-card .sh-hook { font-size: 15px; line-height: 1.45; }
/* tags on question pages: their own row, real gaps */
.qa-top { flex-wrap: wrap; row-gap: 8px; }
.bk-chips { gap: 8px; }
/* wide screens: the bar sits under the page, never over it */
@media (min-width: 861px) { .pbr-turns { position: static; background: none; padding-bottom: 0; } }
@media (max-width: 860px) {
  .cv { grid-template-columns: 1fr; align-items: start; gap: 20px; }
  .pbr-turns { background: var(--c-bg); box-shadow: 0 -1px 0 var(--c-border); margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}
.sh-card .sh-q, .sh-card .sh-tags, .sh-card .sh-frame, .sh-card .sh-hook { grid-column: 1; grid-row: auto; }
.v2 a.sh-card { grid-template-columns: minmax(0, 1fr); }
/* iPads (700–860 px) get the wide layout too (user, 2026-11-07: "for ipads and desktops") */
@media (min-width: 700px) and (max-width: 860px) {
  .an-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0 20px; }
  .an-note { margin: 0; padding: 0; background: none; font-size: 15px; }
  .an-note.is-empty { display: block; }
  .lp { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .lp-side { padding-top: 46px; }
  .cl { grid-template-columns: 1fr 1fr; }
  .cv { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
}
/* v4.3 (user, 2026-11-07, screenshot: arrows to the empty sides, a cross on the empty bottom): the book uses the screen's
   width, and a page is only as tall as what is on it */
.bk-wrap { max-width: var(--wrap, 1280px); }
.bk { max-width: none; }
.bk-page { min-height: 0; }
.cv { min-height: 0; padding: 8px 0 4px; }
@media (min-width: 1100px) {
  .bk-page { padding: 26px 48px 22px; }
  .cv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; }
  .sh-title { font-size: 44px; }
  .an-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0 40px; }
  .sh-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
/* (user, 2026-11-07: "the tags above the questions are sitting too close") */
.qa-top { align-items: flex-start; }
.qa-top .bk-chips { gap: 10px 10px; }
.qa-top .bk-chips > * { margin: 0; }
.qa-q { margin-top: 18px; }
.sh-card .sh-tags { gap: 8px 10px; }
/* slide lines follow the practical's own path (polylines) */
.sl-lines polyline { fill: none; stroke: #111; stroke-width: 1.3; stroke-linejoin: round; }
.sl-lines polyline.sl-h { stroke: #fff; stroke-width: 3.2; stroke-linecap: round; }
.sl-ln.is-last polyline:not(.sl-h) { stroke: #c9820a; stroke-width: 2; }
.sl-ln.is-open polyline:not(.sl-h) { stroke: #1f7a4d; stroke-width: 2; }
/* (user, 2026-11-07: "the buttons on iPads and phones sometimes twitch or shake vertically") on touch screens a quick tap
   made the button sink and spring back within ~170 ms, and a button that redraws the screen (✓ / ✗) was swapped mid-sink:
   on touch the press keeps only its ripple, nothing moves */
html.touch .is-pressed, html.touch.motion .is-pressed, html.touch.motion :is(a.hp-cov, a.type-card, a.lec-row, a.subject-card).is-pressed { transform: none !important; }

/* slide arrowheads (user, 2026-11-07: like the practical, each line ends in a point on its structure) */
.sl-lines polygon.sl-ah { fill: #111; stroke: none; }
.sl-lines polygon.sl-h.sl-ah { fill: #fff; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; }
.sl-ln.is-last polygon.sl-ah:not(.sl-h) { fill: #c9820a; }
.sl-ln.is-open polygon.sl-ah:not(.sl-h) { fill: #1f7a4d; }

/* ===== Playbook v6 (user, 2026-11-07, "Feedback and Complete Redesign"): one page per exam question:
   understand it → write it from memory → check what you missed, with the fix right there. ===== */
.qa-top { margin-bottom: 4px; }
.qa-q { margin-top: 22px; }
/* parts: a question heading, the points, the why beside it; MCQ extras apart and quieter */
.qp-k { margin: 0 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-gold-ink); }
.qp-h { margin: 0 0 6px; font-family: var(--font-ui); font-size: 16.5px; font-weight: 800; line-height: 1.35; color: var(--c-brand); }
.qp .an-ans { border-left-color: color-mix(in srgb, var(--c-brand) 30%, transparent); }
.qp-x { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 8px 0 0 16px; padding: 7px 11px; border-radius: 10px; border: 1px dashed var(--c-border); font-size: 14px; line-height: 1.45; color: var(--c-text-2); }
.qp-x-k { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-2); }
.qp-x-t { color: var(--c-text); }
.qp-x-t + .qp-x-t::before { content: "·"; margin-right: 10px; color: var(--c-text-2); }
.qa-src { margin: 14px 0 0; }
/* stages: only what this step needs is on the page */
.qa .qw-write, .qa .qw-check { display: none; }
.qa[data-stage="write"] .qa-learn, .qa[data-stage="check"] .qa-learn { display: none; }
.qa[data-stage="write"] .qw-start, .qa[data-stage="check"] .qw-start { display: none; }
.qa[data-stage="write"] .qw-write { display: block; }
.qa[data-stage="check"] .qw-check { display: block; }
html.motion .qa[data-stage="write"] .qw-write, html.motion .qa[data-stage="check"] .qw-check { animation: qw-in .26s var(--m-ease, ease) both; }
@keyframes qw-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* the practice card */
.qw { margin: 26px 0 4px; padding: 18px 20px 20px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--c-brand) 28%, var(--c-border)); background: color-mix(in srgb, var(--c-brand) 5%, var(--c-surface)); }
.qa[data-stage="write"] .qw, .qa[data-stage="check"] .qw { margin-top: 18px; }
.qw-k { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-brand); }
.qw-t { margin: 6px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--c-text); max-width: 62ch; }
.qw-btn { display: inline-flex; align-items: center; gap: 9px; margin: 14px 0 0; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--c-brand); color: var(--c-on-brand, #fff); font: inherit; font-size: 15.5px; font-weight: 800; cursor: pointer; }
.qw-btn svg { width: 17px; height: 17px; }
.qw-link { margin: 14px 0 0; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--c-text-2); font: inherit; font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.qw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.qw-row .pb-practise { margin-top: 14px; }
.qw-prompts { margin: 12px 0 0; padding-left: 26px; counter-reset: none; }
.qw-prompts li { margin: 9px 0; padding-left: 4px; font-family: var(--font-serif); font-size: 18px; line-height: 1.45; }
.qw-prompts li::marker { font-weight: 600; color: var(--c-gold-ink); }
.pb-table.is-blank td { height: 34px; }
.pb-blank { display: inline-block; width: 70%; min-width: 40px; border-bottom: 1.5px dotted var(--c-text-2); }
/* check: one row per part; a tap marks it missed and opens its fix */
.qc-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.qc-tog { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--c-border); border-left: 4px solid color-mix(in srgb, var(--c-right) 55%, var(--c-border)); border-radius: 12px; background: var(--c-surface); color: var(--c-text); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.qc-tog:hover { border-color: color-mix(in srgb, var(--c-wrong) 45%, var(--c-border)); }
.qc-main { display: block; min-width: 0; }
.qc-h { display: block; font-weight: 800; line-height: 1.35; color: var(--c-brand); }
.qc-pts { display: block; margin-top: 6px; }
.qc-pt { display: flex; gap: 7px; margin: 3px 0; font-size: 15px; line-height: 1.5; }
.qc-n { flex: none; min-width: 18px; font-family: var(--font-serif); font-weight: 600; color: var(--c-text-2); }
.qc-state { align-self: center; font-size: 13px; font-weight: 800; white-space: nowrap; }
.qc-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--c-right); }
.qc-ok svg { width: 14px; height: 14px; }
.qc-no { display: none; padding: 4px 10px; border-radius: 999px; background: var(--c-wrong); color: var(--c-on-wrong, #fff); }
.qc.is-miss .qc-tog { border-left-color: var(--c-wrong); background: color-mix(in srgb, var(--c-wrong) 6%, var(--c-surface)); }
.qc.is-miss .qc-ok { display: none; }
.qc.is-miss .qc-no { display: inline-block; }
.qc.is-miss .qc-h { color: var(--c-wrong); }
.qc-fix { margin: 8px 0 2px 14px; padding: 12px 14px; border-left: 3px solid var(--c-gold); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--c-gold) 9%, var(--c-surface)); }
html.motion .qc-fix:not([hidden]) { animation: qw-in .24s var(--m-ease, ease) both; }
.qc-r { margin: 0; font-family: var(--font-serif); font-size: 16.5px; line-height: 1.55; }
.qc-r-k, .qc-again-q { display: block; margin-bottom: 3px; font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-gold-ink); }
.qc-again { margin-top: 12px; }
.qc-again-q { text-transform: none; letter-spacing: 0; font-size: 14.5px; color: var(--c-text); }
.qc-show { min-height: 40px; padding: 0 16px; border: 1px solid var(--c-gold); border-radius: 999px; background: var(--c-surface); color: var(--c-gold-ink); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.qc-again-a { margin: 4px 0 0; padding-left: 24px; }
.qc-again-a li { margin: 3px 0; font-size: 15px; line-height: 1.5; }
.qc-sum { margin: 14px 0 0; font-weight: 700; color: var(--c-right); }
.qc-sum.is-miss { color: var(--c-text); }
@media (max-width: 640px) {
  .qw { padding: 15px 14px 16px; border-radius: 16px; }
  .qw-btn { width: 100%; justify-content: center; }
  .qw-prompts li { font-size: 16.5px; }
  .qc-tog { padding: 11px 12px; gap: 8px; }
  .qc-pt { font-size: 14.5px; }
  .qc-fix { margin-left: 6px; }
  .qp-x { margin-left: 6px; }
}
@media (prefers-reduced-motion: reduce) { .qc-tog { transition: none; } }
/* `.v2 h2` zeroed these margins, so the tags sat on the question (user, 2026-11-07: "the tags are too close", twice) */
.v2 .qa-q { margin-top: 24px; }
.v2 .qp-h { margin-bottom: 6px; }
@media (max-width: 640px) { .v2 .qa-q { margin-top: 18px; } }
/* a missed part hides its points: the fix explains it again, then "Once more" is a real try before "Show it" */
.qc.is-miss .qc-pts { display: none; }

/* ===== Playbook v7 (user, 2026-11-07): hooks on demand, a neutral check per point, one more try on the missed ones ===== */
.bk-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 14px; }
.v2 .bk-top a { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.bk-top a svg { width: 16px; height: 16px; }
.v2 .bk-top a.bk-top-exit:hover { border-color: var(--c-wrong); color: var(--c-wrong); }
/* learn: a part = its question + points; a bulb beside a point opens its hook */
.hk-tip { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 14px; color: var(--c-text-2); }
.hk-tip svg { flex: none; width: 17px; height: 17px; color: var(--c-gold-ink); }
.qa-learn .an { margin-top: 8px; }
.qp { padding: 14px 0 10px; }
.qp + .qp { border-top: 1px dashed var(--c-border); }
.qp.is-sub { padding-top: 6px; border-top: 0; }
.qp-pts { margin: 0; padding-left: 26px; }
.qp-pt { margin: 5px 0; padding-left: 3px; }
.qp-pt::marker { font-family: var(--font-serif); font-weight: 600; color: var(--c-text-2); }
.qp-row { display: flex; align-items: flex-start; gap: 10px; }
.qp-t { flex: 1; min-width: 0; font-size: 16px; line-height: 1.55; }
.hk-btn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -3px; border: 1px solid transparent; border-radius: 10px; background: color-mix(in srgb, var(--c-gold) 10%, transparent); color: var(--c-gold-ink); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.hk-btn svg { width: 18px; height: 18px; }
.hk-btn:hover, .hk-btn.is-on { border-color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 22%, transparent); }
.hk { margin: 6px 0 8px; padding: 10px 13px; border-left: 3px solid var(--c-gold); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--c-gold) 10%, var(--c-surface)); font-family: var(--font-serif); font-size: 16.5px; line-height: 1.55; color: var(--c-text); }
html.motion .hk:not([hidden]) { animation: qw-in .22s var(--m-ease, ease) both; }
.hk-k { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-gold-ink); }
.hk-k svg { width: 14px; height: 14px; }
.qp-x { margin-left: 0; }
.qa-timed { display: inline-flex; align-items: center; gap: 5px; margin-left: 14px; color: var(--c-text-2); font-weight: 700; }
.qa-timed svg { width: 14px; height: 14px; }
/* the write card leads; skipping it is the quiet choice */
.qw { padding: 22px; }
.qw-big { min-height: 54px; padding: 0 28px; font-size: 16.5px; box-shadow: 0 10px 24px -12px var(--c-shadow); }
.qw-start .qw-big { margin-top: 16px; }
.v2 a.qw-skip { display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 0 18px; color: var(--c-text-2); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.qw-skip svg { width: 15px; height: 15px; }
.v2 a.qw-skip:hover { color: var(--c-brand); }
.v2 a.qw-next { text-decoration: none; }
.qw-next svg { width: 18px; height: 18px; }
.v2 a.qw-next.is-quiet { background: var(--c-surface); color: var(--c-brand); border: 1.5px solid var(--c-brand); box-shadow: none; }
.qw-write .qw-big { margin-top: 18px; }
.qa .qw-retry { display: none; }
.qa[data-stage="retry"] .qa-learn, .qa[data-stage="retry"] .qw-start { display: none; }
.qa[data-stage="retry"] .qw-retry { display: block; }
html.motion .qa[data-stage="retry"] .qw-retry { animation: qw-in .26s var(--m-ease, ease) both; }
/* check: neutral rows, one per point, under their part's question */
.qc-part { margin-top: 16px; }
.qc-part > .qc-h { margin: 0 0 6px; font-weight: 800; color: var(--c-brand); }
.qc-list { margin: 0; gap: 8px; }
.qc-tog { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-left: 1px solid var(--c-border); }
.qc-tog:hover { border-color: color-mix(in srgb, var(--c-wrong) 50%, var(--c-border)); }
.qc-n { font-family: var(--font-serif); font-weight: 600; color: var(--c-text-2); min-width: 20px; }
.qc-t { font-size: 15.5px; line-height: 1.5; }
.qc-state { padding: 4px 11px; border-radius: 999px; border: 1px dashed var(--c-border); color: var(--c-text-2); font-size: 12.5px; font-weight: 800; }
.qc.is-miss .qc-tog { border-color: var(--c-wrong); background: color-mix(in srgb, var(--c-wrong) 6%, var(--c-surface)); }
.qc.is-miss .qc-state { border: 0; background: var(--c-wrong); color: var(--c-on-wrong, #fff); }
.qc.is-miss .qc-n { color: var(--c-wrong); }
.qc .hk { margin-left: 14px; }
.qc-end { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--c-border); }
.qc-end .qc-sum { width: 100%; margin: 0; color: var(--c-text); font-weight: 700; }
.qc-end .qw-btn { margin-top: 12px; }
/* one more try */
.qr-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.qr { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--c-border); background: var(--c-surface); }
.qr-q { margin: 0; font-weight: 800; font-size: 16px; line-height: 1.4; }
.qr-show { margin-top: 10px; min-height: 42px; padding: 0 18px; border: 1px solid var(--c-brand); border-radius: 999px; background: var(--c-surface); color: var(--c-brand); font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; }
.qr-a { margin-top: 10px; }
.qr-ans { margin: 0; padding: 8px 12px; border-left: 3px solid var(--c-right); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--c-right) 8%, var(--c-surface)); font-size: 15.5px; line-height: 1.5; }
.qr-hook { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--c-gold); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--c-gold) 10%, var(--c-surface)); font-family: var(--font-serif); font-size: 16px; line-height: 1.5; }
.qr-rate { display: flex; gap: 10px; margin-top: 12px; }
.qr-rate button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px; font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; }
.qr-rate svg { width: 15px; height: 15px; }
.qr-got { border: 0; background: var(--c-right); color: var(--c-on-right, #fff); }
.qr-not { border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); }
.qr-done { display: none; align-items: center; gap: 8px; margin: 0; color: var(--c-right); font-weight: 700; }
.qr-done svg { flex: none; width: 16px; height: 16px; }
.qr.is-got { padding: 10px 14px; border-color: color-mix(in srgb, var(--c-right) 40%, var(--c-border)); }
.qr.is-got > :not(.qr-done) { display: none; }
.qr.is-got .qr-done { display: flex; }
.qr.is-not { border-color: var(--c-gold); }
.qr.is-not .qr-rate { display: none; }
.qr-sum { margin: 14px 0 0; font-weight: 700; }
.qw-retry .qw-next { margin-top: 14px; }
@media (max-width: 640px) {
  .bk-top { margin-bottom: 10px; }
  .v2 .bk-top a { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .qw { padding: 16px 14px; }
  .qw-big { width: 100%; justify-content: center; }
  .v2 a.qw-skip { display: flex; justify-content: center; margin: 12px 0 0; }
  .qw-next { width: 100%; justify-content: center; }
  .qp-pts { padding-left: 22px; }
  .qp-t { font-size: 15.5px; }
  .hk { font-size: 15.5px; }
  .qc-tog { padding: 9px 10px; gap: 8px; }
  .qc-t { font-size: 15px; }
  .qc .hk { margin-left: 6px; }
  .qr-rate button { flex: 1; justify-content: center; }
}

.qc-yes { display: none; }
.qc.is-miss .qc-ask { display: none; }
.qc.is-miss .qc-yes { display: inline; }
@media (max-width: 640px) { .qc-state { padding: 3px 9px; font-size: 12px; } }

/* v8 (user, 2026-11-07: "a generalized explanation… so I'm trying to understand and memorize rather than read and memorize") */
.qa-ex { margin: 18px 0 4px; padding: 16px 20px 6px; border-radius: 16px; background: color-mix(in srgb, var(--c-gold) 9%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--c-gold) 30%, var(--c-border)); }
.qa-ex-k { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-gold-ink); }
.qa-ex-k svg { width: 15px; height: 15px; }
.qa-ex p:not(.qa-ex-k) { margin: 0 0 12px; font-family: var(--font-serif); font-size: 17.5px; line-height: 1.6; color: var(--c-text); max-width: 72ch; }
.qa-ex strong { color: var(--c-brand); }
@media (max-width: 640px) { .qa-ex { padding: 13px 14px 4px; } .qa-ex p:not(.qa-ex-k) { font-size: 16.5px; } }
.qa-ex + .qa-parts { margin-top: 20px; }
.qa-parts + .hk-tip { margin-top: 12px; }

/* (user, 2026-11-07) the actions sit on the right; Try it timed is a real button; the Next button kept its text colour */
.qw-start { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 28px; }
.qw-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.qw-start .qw-acts .qw-big { margin-top: 0; }
.qw-alt { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 16px; }
.v2 a.qw-timed { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--c-brand); background: var(--c-surface); color: var(--c-brand); font-weight: 800; font-size: 14.5px; text-decoration: none; }
.qw-timed svg { width: 16px; height: 16px; }
.v2 .qw-alt a.qw-skip { margin: 0; }
.v2 a.qw-btn, .v2 a.qw-btn:hover, .v2 a.qw-btn:visited { color: var(--c-on-brand, #fff); text-decoration: none; }
.v2 a.qw-next.is-quiet, .v2 a.qw-next.is-quiet:hover { color: var(--c-brand); }
.qw-write .qw-big { display: flex; margin-left: auto; }
.qc-end { justify-content: flex-end; }
.qc-end .qc-sum { text-align: left; }
.qc-end .qc-sum:empty { display: none; }
.qw-retry > .qw-next { display: flex; width: max-content; margin-left: auto; }
@media (max-width: 640px) {
  .qw-start { grid-template-columns: 1fr; }
  .qw-acts { align-items: stretch; }
  .qw-alt { justify-content: space-between; }
  .qw-write .qw-big, .qw-retry > .qw-next { width: 100%; }
  .qc-end .qw-btn { width: 100%; }
}

/* the main hook: given to the question once; each point's bulb holds only its piece (user, 2026-11-07) */
.qa-mh { margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--c-gold) 60%, var(--c-border)); background: color-mix(in srgb, var(--c-gold) 7%, var(--c-surface)); }
.qa-mh-t { margin: 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.55; }
.qa-mh + .hk-tip { margin-top: 10px; }
.qw-mh { margin-top: 14px; }
.qw-mh-b { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1px dashed var(--c-gold); border-radius: 999px; background: color-mix(in srgb, var(--c-gold) 8%, var(--c-surface)); color: var(--c-gold-ink); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.qw-mh-b svg { width: 16px; height: 16px; }
.qw-mh-t { margin: 0; padding: 10px 14px; border-left: 3px solid var(--c-gold); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--c-gold) 10%, var(--c-surface)); font-family: var(--font-serif); font-size: 16.5px; line-height: 1.55; }
@media (max-width: 640px) { .qa-mh { padding: 10px 12px; } .qa-mh-t { font-size: 16px; } }

/* v10 (user, 2026-11-07): back to the Why beside each part and the part-level fix; the check stays neutral */
.qc-p .qc-tog { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 14px; }
.qc-p .qc-state { align-self: start; margin-top: 2px; }
.qc-p .qc-h { display: block; font-weight: 800; color: var(--c-brand); }
.qc-p.is-miss .qc-h { color: var(--c-wrong); }
.qc-p .qc-fix { margin: 8px 0 2px 14px; }
.qw-check .qc-list { gap: 10px; }
/* the MCQ extras: their own box, clearly not part of the written answer ("too blended / not seen") */
.qp-mcq { grid-column: 1 / -1; margin: 10px 0 2px 16px; padding: 10px 14px 10px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, #3a6fb0 45%, var(--c-border)); background: color-mix(in srgb, #3a6fb0 8%, var(--c-surface)); }
.qp-mcq-k { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #2f5f9c; }
.qp-mcq-k svg { width: 15px; height: 15px; }
.qp-mcq ul { margin: 0; padding-left: 18px; }
.qp-mcq li { margin: 3px 0; font-size: 15px; line-height: 1.5; color: var(--c-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qp-mcq-k { color: #8fb6ea; } }
:root[data-theme="dark"] .qp-mcq-k { color: #8fb6ea; }
@media (max-width: 640px) { .qp-mcq { margin-left: 6px; } .qc-p .qc-fix { margin-left: 6px; } }

/* the loop's boxes (user review, 2026-11-07: "the info isn't arranged well inside the boxes"): the heading on its own
   line with a rule under it, each item its own row with a marker and a hanging indent, so a wrapped line reads as the
   same item, never as a new one */
.dg-organ { display: flex; flex-direction: column; padding: 11px 12px 12px; }
.dg-oh { margin: 0 0 7px; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--c-brand) 25%, var(--c-border)); line-height: 1.25; }
.dg-ot { position: relative; margin: 0; padding: 4px 0 4px 14px; line-height: 1.32; text-wrap: pretty; }
.dg-ot + .dg-ot { border-top: 1px dashed color-mix(in srgb, var(--c-border) 80%, transparent); }
.dg-ot::before { content: ""; position: absolute; left: 1px; top: calc(4px + 0.66em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--c-brand); opacity: .7; }
@media (max-width: 640px) {
  .dg-organ { padding: 8px 8px 9px; }
  .dg-oh { margin-bottom: 5px; padding-bottom: 5px; }
  .dg-ot { padding: 3px 0 3px 11px; }
  .dg-ot::before { width: 5px; height: 5px; top: calc(3px + 0.66em - 2.5px); left: 0; }
}

/* ═══════════ PLAYBOOK LOOK v11 (user, 2026-11-08: "it looks so ass rn… do some research") ═══════════
   From the research: COHERENCE (cut extra labels and lines), SIGNALING (the parts numbered and big, callouts for the
   why / traps / MCQ), body text ~17 px at 1.6 line height and up to ~68 characters, one part at a time (segmenting),
   and a Cornell-like page: the cue question, the notes, the summary line. Behaviour unchanged; scoped to the playbook. */
:root { --pb-band: #174C3C; --pb-band-2: #1F5E4A; --pb-on-band: #FFFFFF; --pb-why: #F1F6F2; --pb-why-ink: #174C3C; --pb-shadow: 0 1px 2px rgb(25 37 31 / .05), 0 18px 48px -18px rgb(25 37 31 / .18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pb-band: #1D3A2D; --pb-band-2: #24473A; --pb-on-band: #F0F2ED; --pb-why: #1E2B23; --pb-why-ink: #A9D6BA; --pb-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 18px 48px -18px rgb(0 0 0 / .6); } }
:root[data-theme="dark"] { --pb-band: #1D3A2D; --pb-band-2: #24473A; --pb-on-band: #F0F2ED; --pb-why: #1E2B23; --pb-why-ink: #A9D6BA; --pb-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 18px 48px -18px rgb(0 0 0 / .6); }

/* the page: a sheet of paper, not a boxed form */
.v2 .bk-page { border: 0; border-radius: 26px; box-shadow: var(--pb-shadow); padding: 28px 56px 30px; }
.v2 .bk-run { font-size: 11px; letter-spacing: .14em; color: color-mix(in srgb, var(--c-text-2) 80%, transparent); }
.v2 .bk-segs { gap: 3px; margin-top: 12px; }
.v2 .bk-segs a { height: 3px; }
.v2 .bk-body { padding-top: 26px; }

/* header: the question is the title; the one line is a pull quote; the parts are a numbered stepper */
.v2 .qa-top { margin-bottom: 0; }
.v2 .pb-shape-chip { border: 0; background: color-mix(in srgb, var(--c-brand) 10%, transparent); padding: 4px 11px; }
.v2 .bk-page .qa-q { max-width: 34ch; margin-top: 16px; font-size: clamp(25px, 3vw, 34px); line-height: 1.16; letter-spacing: -0.015em; text-wrap: balance; }
.v2 .qa-line { position: relative; max-width: 62ch; margin: 18px 0 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--c-gold); border-radius: 0; background: none; font-size: 20px; font-style: italic; line-height: 1.45; color: var(--c-text); }
.v2 .qa-line-k { font-style: normal; margin-bottom: 4px; letter-spacing: .12em; }
.v2 .qa-parts { counter-reset: qp; gap: 8px; margin: 22px 0 0; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--c-brand) 5%, var(--c-surface)); }
.v2 .qa-parts-k { margin-bottom: 2px; letter-spacing: .12em; }
.v2 .qa-parts > i { display: none; }
.v2 .qa-part { counter-increment: qp; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 0; border-radius: 999px; background: var(--c-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-brand) 22%, var(--c-border)); color: var(--c-text); font-size: 14px; font-weight: 700; }
.v2 .qa-part::before { content: counter(qp); display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c-brand); color: var(--c-on-brand); font-size: 12px; font-weight: 800; }

/* the parts: big number, the cue question, the points, the why as a soft card beside */
.v2 .qa-learn .an { counter-reset: part; margin-top: 10px; }
.v2 .qa-learn .an-row.qp { counter-increment: part; grid-template-columns: 40px minmax(0, 1.55fr) minmax(0, 1fr); column-gap: 0; padding: 26px 0 4px; border: 0; }
.v2 .qa-learn .an-row.qp + .an-row.qp { border-top: 0; }
.v2 .qa-learn .an-row.qp::before { content: counter(part); grid-column: 1; grid-row: 1 / span 2; align-self: start; display: grid; place-items: center; width: 30px; height: 30px; margin-top: 1px; border-radius: 10px; background: color-mix(in srgb, var(--c-brand) 12%, transparent); color: var(--c-brand); font-family: var(--font-serif); font-size: 17px; font-weight: 700; }
.v2 .qa-learn .an-row.qp > .an-ans { grid-column: 2; padding-right: 28px; }
.v2 .qa-learn .an-row.qp > .an-note { grid-column: 3; }
.v2 .qa-learn .an-row.qp > .qp-mcq { grid-column: 2 / span 2; }
.v2 .qa-learn .qp-k { margin-bottom: 4px; letter-spacing: .12em; }
.v2 .qa-learn .qp-h { margin: 2px 0 10px; font-family: var(--font-serif); font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; color: var(--c-text); }
.v2 .qa-learn .qp-pts { max-width: 68ch; padding-left: 24px; }
.v2 .qa-learn .qp-pts li { margin: 0 0 8px; padding-left: 4px; font-size: 16.5px; line-height: 1.6; }
.v2 .qa-learn .qp-pts li::marker { color: var(--c-brand); font-weight: 800; }
.v2 .qa-learn .an-note { padding: 14px 16px 15px; border-radius: 16px; background: var(--pb-why); font-family: var(--font-ui); font-size: 15.5px; line-height: 1.6; color: var(--c-text); }
.v2 .qa-learn .an-note.is-empty { background: none; padding: 0; }
.v2 .qa-learn .an-note-k { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11px; letter-spacing: .12em; color: var(--pb-why-ink); }
.v2 .qa-learn .an-note-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-gold); }
.v2 .qa-learn .qp-mcq { margin-top: 12px; }

/* traps: a callout of its own */
.v2 .qa-watch { margin: 28px 0 0 40px; padding: 14px 18px; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--c-wrong) 7%, var(--c-surface)); }
.v2 .qa-watch-k { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; letter-spacing: .12em; }
.v2 .qa-watch-k::before { content: "!"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--c-wrong); color: var(--c-surface); font-size: 12px; font-weight: 900; letter-spacing: 0; }
.v2 .qa-watch li { font-size: 15.5px; line-height: 1.55; }
.v2 .qa-src { margin-left: 40px; }

/* the write card: the page ends on one strong band (the next thing to do) */
.v2 .qa[data-stage="learn"] .qw { margin-top: 34px; padding: 26px 30px; border: 0; border-radius: 22px; background: linear-gradient(135deg, var(--pb-band), var(--pb-band-2)); color: var(--pb-on-band); }
.v2 .qa[data-stage="learn"] .qw .qw-k { color: color-mix(in srgb, var(--pb-on-band) 72%, transparent); letter-spacing: .12em; }
.v2 .qa[data-stage="learn"] .qw .qw-t { color: var(--pb-on-band); font-size: 17px; line-height: 1.5; max-width: 42ch; }
.v2 .qa[data-stage="learn"] .qw .qw-big { background: var(--pb-on-band); color: var(--pb-band); box-shadow: 0 8px 22px -10px rgb(0 0 0 / .5); }
.v2 .qa[data-stage="learn"] .qw .qw-big svg { color: var(--pb-band); }
.v2 .qa[data-stage="learn"] .qw a.qw-timed { background: transparent; border-color: color-mix(in srgb, var(--pb-on-band) 55%, transparent); color: var(--pb-on-band); }
.v2 .qa[data-stage="learn"] .qw a.qw-skip, .v2 .qa[data-stage="learn"] .qw a.qw-skip:hover { color: color-mix(in srgb, var(--pb-on-band) 80%, transparent); }

/* cover: a big title, a meta line, and the contents as a numbered timeline */
.v2 .cv-main .sh-title { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -0.02em; }
.v2 .cv-main .sh-lead { max-width: 46ch; font-size: 18px; line-height: 1.55; }
.v2 .cv-meta { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c-gold) 12%, var(--c-surface)); }
.v2 .cv-map { position: relative; padding: 22px 22px 22px 18px; border: 0; border-radius: 22px; background: color-mix(in srgb, var(--c-brand) 5%, var(--c-surface)); }
.v2 .cv-map li { padding: 10px 0 10px 50px; }
.v2 .cv-map li + li { border-top: 0; }
.v2 .cv-map li::before { left: 4px; top: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-surface); box-shadow: 0 0 0 2px var(--c-brand); font-size: 15px; color: var(--c-brand); z-index: 1; }
.v2 .cv-map li:not(:last-child)::after { content: ""; position: absolute; left: 18px; top: 40px; bottom: -8px; width: 2px; background: color-mix(in srgb, var(--c-brand) 25%, transparent); }
.v2 .cv-map li:first-child::before { background: var(--c-brand); color: var(--c-on-brand); }
.v2 .cv-map-t { font-size: 16px; }

/* close page: easy marks as cards */
.v2 .bk-marks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; padding: 0; list-style: none; }
.v2 .bk-marks li { margin: 0; padding: 13px 15px; border-radius: 14px; background: color-mix(in srgb, var(--c-gold) 8%, var(--c-surface)); font-size: 15px; line-height: 1.55; }

/* tablets: the why sits under the points, still a soft card */
@media (max-width: 860px) {
  .v2 .bk-page { padding: 22px 26px 24px; }
  .v2 .qa-learn .an-row.qp { grid-template-columns: 36px minmax(0, 1fr); }
  .v2 .qa-learn .an-row.qp > .an-ans { padding-right: 0; }
  .v2 .qa-learn .an-row.qp > .an-note, .v2 .qa-learn .an-row.qp > .qp-mcq { grid-column: 2; margin: 6px 0 0; }
  .v2 .qa-learn .an-note { font-size: 15px; padding: 12px 14px; }
  .v2 .qa-learn .an-note.is-empty { display: none; }
}
/* phones */
@media (max-width: 640px) {
  .v2 .bk-page { padding: 16px 16px 18px; border-radius: 20px; }
  .v2 .bk-body { padding-top: 18px; }
  .v2 .qa-line { font-size: 17.5px; padding-left: 16px; }
  .v2 .qa-parts { padding: 12px; }
  .v2 .qa-part { font-size: 13px; }
  .v2 .qa-learn .an-row.qp { grid-template-columns: 30px minmax(0, 1fr); padding-top: 22px; }
  .v2 .qa-learn .an-row.qp::before { width: 24px; height: 24px; font-size: 14px; border-radius: 8px; }
  .v2 .qa-learn .an-row.qp { grid-template-columns: 28px minmax(0, 1fr); }
  .v2 .qa-learn .qp-pts { padding-left: 18px; }
  .v2 .qa-learn .qp-h { font-size: 18.5px; }
  .v2 .qa-learn .qp-pts { padding-left: 20px; }
  .v2 .qa-learn .qp-pts li { font-size: 16px; }
  .v2 .qa-watch { margin-left: 0; }
  .v2 .qa-src { margin-left: 0; }
  .v2 .qa[data-stage="learn"] .qw { padding: 20px 18px; border-radius: 18px; }
  .v2 .qa[data-stage="learn"] .qw .qw-t { font-size: 16px; }
}
.v2 .qa-learn .an-row.qp > .an-ans { border-left: 0; padding-left: 0; margin-left: 0; }

/* ═══════════ PLAYBOOK COURSE PLAYER (user, 2026-11-08) ═══════════
   Wide screens: a sticky contents sidebar beside the page (AMBOSS / course-player pattern: always see where you are and
   what is left). Smaller screens: the same list behind a "Contents" pill between Previous and Exit. */
.bk-top { position: relative; align-items: center; gap: 10px; }
.tc-m { position: static; }
.tc-m > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface); font-size: 14px; font-weight: 700; color: var(--c-text); cursor: pointer; }
.tc-m > summary::-webkit-details-marker { display: none; }
.tc-m > summary svg { width: 16px; height: 16px; color: var(--c-brand); }
.tc-m > summary b { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c-brand) 10%, transparent); font-size: 12px; color: var(--c-brand); }
.tc-m[open] > summary { border-color: var(--c-brand); }
.tc-sheet { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; max-height: min(70vh, 560px); overflow: auto; padding: 16px; border-radius: 20px; background: var(--c-surface); box-shadow: 0 18px 48px -12px rgb(var(--c-shadow) / .35), 0 0 0 1px var(--c-border); }

.tc-head { margin: 0 0 12px; }
.v2 a.tc-cover { display: block; font-family: var(--font-serif); font-size: 19px; font-weight: 600; line-height: 1.25; color: var(--c-text); text-decoration: none; }
.v2 a.tc-cover:hover { color: var(--c-brand); }
.tc-prog { display: grid; gap: 6px; margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--c-text-2); }
.tc-bar { display: block; height: 5px; border-radius: 5px; background: var(--c-border); overflow: hidden; }
.tc-bar i { display: block; height: 100%; border-radius: 5px; background: var(--c-brand); transition: width .4s var(--m-ease, ease); }
.tc-g { margin: 14px 0 4px; padding: 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gold-ink); }
.tc-l { list-style: none; margin: 0; padding: 0; }
.v2 a.tc-i { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 9px; padding: 7px 8px; border-radius: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--c-text-2); text-decoration: none; }
.v2 a.tc-i:hover { background: color-mix(in srgb, var(--c-brand) 6%, transparent); color: var(--c-text); }
.tc-dot { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c-border-strong); }
.tc-dot svg { width: 12px; height: 12px; }
.v2 a.tc-i.is-done { color: var(--c-text); }
.v2 a.tc-i.is-done .tc-dot { background: var(--c-brand); box-shadow: none; color: var(--c-on-brand); }
.v2 a.tc-i.is-cur { background: color-mix(in srgb, var(--c-brand) 11%, var(--c-surface)); color: var(--c-brand); }
.v2 a.tc-i.is-cur .tc-dot { box-shadow: inset 0 0 0 5px var(--c-brand); }

@media (min-width: 1100px) {
  .bk-wrap.has-toc .bk-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 0 28px; align-items: start; }
  .tc-side { position: sticky; top: 84px; max-height: calc(100svh - 104px); overflow: auto; padding: 18px 12px 18px 14px; border-radius: 22px; background: var(--c-surface); box-shadow: var(--pb-shadow); scrollbar-width: thin; }
  .bk-wrap.has-toc .tc-m { display: none; }
  .bk-wrap.has-toc .bk-segs { display: none; }
  .bk-wrap.has-toc .bk { margin-top: 0; }
}
@media (max-width: 1099.98px) { .tc-side { display: none; } }
@media (max-width: 420px) { .tc-m > summary span { display: none; } .tc-m > summary { padding: 0 12px; } }
/* beside the sidebar the page column is narrower: until it is roomy, the Why sits under the points */
@media (min-width: 1100px) and (max-width: 1379.98px) {
  .bk-wrap.has-toc .v2 .bk-page, .v2 .bk-wrap.has-toc .bk-page { padding: 26px 36px 28px; }
  .v2 .bk-wrap.has-toc .qa-learn .an-row.qp { grid-template-columns: 40px minmax(0, 1fr); }
  .v2 .bk-wrap.has-toc .qa-learn .an-row.qp > .an-ans { padding-right: 0; }
  .v2 .bk-wrap.has-toc .qa-learn .an-row.qp > .an-note, .v2 .bk-wrap.has-toc .qa-learn .an-row.qp > .qp-mcq { grid-column: 2; margin: 8px 0 0; }
  .v2 .bk-wrap.has-toc .qa-learn .an-note.is-empty { display: none; }
}

/* SCROLL CALM (user, 2026-11-09: "when you scroll one thing stays stuck and the other thing scrolls… it's irritating",
   worst in the playbook): only the top bar stays pinned (and the answer bars at the bottom of a session). Nothing beside the
   content is pinned any more, the playbook contents scroll with the page (no second scroll area inside it), and the home
   page no longer changes shape while scrolling. */
.tc-side { position: static !important; top: auto !important; max-height: none !important; overflow: visible !important; }
.study-q.has-fig > .ospe-fig, .sl-fig, .fb-intro, .ab-made-head { position: static !important; top: auto !important; }
html.motion .hw, html.motion .hp-grid, html.motion .hp-next { transform: none !important; opacity: 1 !important; border-radius: 0; will-change: auto; }