/* ─── Feature cards ──────────────────────────────────────────────────────── */
.feature-card {
  border: 1px solid rgba(255,255,255,0.05);
  background: linear-gradient(148deg,
    rgba(15, 28, 52, 0.45) 0%,
    rgba(10, 18, 38, 0.22) 100%
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.18s ease;
}

.feature-card:hover {
  border-color: rgba(34,211,238,0.18);
  background: linear-gradient(148deg,
    rgba(15, 28, 52, 0.62) 0%,
    rgba(10, 18, 38, 0.38) 100%
  );
  transform: translateY(-1px);
}

.feature-card:focus-visible {
  outline: 2px solid rgba(103, 232, 249, 0.75);
  outline-offset: 3px;
  border-color: rgba(34, 211, 238, 0.35);
}

/* ─── Landing polish (generate view only — preview glow / gradient language) ─ */
#generate-workspace:not(.preview-mode) #gen-left-col > .hero-collapse:first-child h1.font-display {
  background: linear-gradient(118deg, rgb(248 250 252) 0%, rgb(165 243 253) 42%, rgb(186 230 253) 72%, rgb(147 197 253) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(34, 211, 238, 0.2));
  background-size: 200% 200%;
  animation: title-shimmer 8s ease-in-out infinite alternate;
}

#generate-workspace:not(.preview-mode) #gen-left-col > .hero-collapse:first-child .flex.justify-center p.text-xs.uppercase {
  text-shadow:
    0 0 18px rgba(34, 211, 238, 0.45),
    0 0 36px rgba(56, 189, 248, 0.2);
}

#generate-workspace:not(.preview-mode) #gen-left-col > .hero-collapse:first-child .hero-icon {
  box-shadow:
    0 0 3px 1px rgba(56, 189, 248, 0.14),
    0 0 44px -6px rgba(34, 211, 238, 0.38),
    0 0 88px -24px rgba(59, 130, 246, 0.22);
}

#generate-workspace:not(.preview-mode) #gen-left-col > .hero-collapse:first-child > p.text-slate-400 {
  text-shadow: 0 0 28px rgba(56, 189, 248, 0.12);
}

#generate-workspace:not(.preview-mode) #gen-form.glass-panel {
  border-color: rgba(56, 189, 248, 0.14);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 28px 56px -14px rgba(0, 0, 0, 0.5),
    0 0 64px -18px rgba(34, 211, 238, 0.16),
    0 0 100px -30px rgba(59, 130, 246, 0.1);
}

#generate-workspace:not(.preview-mode) #gen-form .form-glow::before {
  opacity: 0.78;
}

#generate-workspace:not(.preview-mode) #prompt {
  border-color: rgba(56, 189, 248, 0.20);
  background: linear-gradient(168deg, rgba(8, 20, 42, 0.9) 0%, rgba(4, 12, 30, 0.94) 100%);
  box-shadow:
    inset 0 1px 0 rgba(56, 189, 248, 0.06),
    0 0 28px -10px rgba(34, 211, 238, 0.10),
    0 0 52px -20px rgba(59, 130, 246, 0.06);
  caret-color: rgb(34, 211, 238);
}

#generate-workspace:not(.preview-mode) #prompt::placeholder {
  color: rgba(165, 230, 252, 0.48);
}

#generate-workspace:not(.preview-mode) #prompt:focus {
  border-color: rgba(34, 211, 238, 0.35);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.12),
    inset 0 1px 0 rgba(56, 189, 248, 0.08),
    0 0 32px -8px rgba(34, 211, 238, 0.18),
    0 0 56px -18px rgba(59, 130, 246, 0.10);
  outline: none;
}
#generate-workspace:not(.preview-mode) #prompt:focus-visible {
  border-color: rgba(34, 211, 238, 0.7);
  box-shadow:
    0 0 0 2px rgba(34, 211, 238, 0.4),
    inset 0 1px 0 rgba(56, 189, 248, 0.08),
    0 0 32px -8px rgba(34, 211, 238, 0.22),
    0 0 56px -18px rgba(59, 130, 246, 0.12);
  outline: none;
}

/* Quick-fill example buttons — translucent, beveled "glass tile" look. Colour is
   per-button via --accent-rgb (set inline in workspace_left.html), retiring the
   old fragile :nth-child palette. The resting FILL + border are UNSCOPED so they
   persist while the hero fades out in preview mode (the old inline gradient did
   the same); the bevel shadow + hover lift are scoped to the live generate view.

   These buttons live inside the blue .glass-panel #gen-form, so a NAÏVELY
   translucent fill let the panel's blue bleed through and washed every subject to
   the same blue (the reason an opaque var(--space-void) base was used before). To
   stay translucent yet keep each --accent-rgb hue legible, the fill now layers:
     1. a top white sheen      (the raised-glass highlight),
     2. a vertical accent tint (brighter at top → dimmer at base = the bevel),
     3. a translucent near-void base (rgba(1,4,14,.34)) that still knocks the blue
        panel back enough for the hue to read,
   over a `backdrop-filter: blur()+saturate()` that frosts the panel behind so the
   translucency looks intentional (frosted glass) and re-saturates the accent. The
   3D effect = top inset highlight + bottom inset shadow + outer drop shadow
   (raised), inverting to an inner pressed shadow on :active. */
.quick-fill {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, rgba(var(--accent-rgb), .20) 0%, rgba(var(--accent-rgb), .07) 100%),
    rgba(1, 4, 14, .34);
  border-color: rgba(var(--accent-rgb), .3);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  backdrop-filter: blur(12px) saturate(1.25);
}

#generate-workspace:not(.preview-mode) #gen-form .quick-fill {
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, .16),
    inset 0 -12px 20px -14px rgba(0, 0, 0, .4),
    0 0 14px -5px rgba(var(--accent-rgb), .18),
    0 9px 22px -15px rgba(0, 0, 0, .55);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

#generate-workspace:not(.preview-mode) #gen-form .quick-fill:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), .5);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, rgba(var(--accent-rgb), .3) 0%, rgba(var(--accent-rgb), .11) 100%),
    rgba(1, 4, 14, .3);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, .24),
    inset 0 -14px 22px -14px rgba(0, 0, 0, .42),
    0 0 22px -4px rgba(var(--accent-rgb), .4),
    0 16px 32px -16px rgba(0, 0, 0, .5);
}

#generate-workspace:not(.preview-mode) #gen-form .quick-fill:active {
  transform: translateY(0) scale(0.975);
  box-shadow:
    inset 0 2px 7px 0 rgba(0, 0, 0, .5),
    inset 0 1px 0 0 rgba(255, 255, 255, .1),
    0 4px 12px -8px rgba(0, 0, 0, .55);
  transition: transform 0.10s ease-out, box-shadow 0.10s ease-out;
}

@keyframes quick-fill-rebound {
  0%   { transform: scale(0.97); }
  60%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

#generate-workspace:not(.preview-mode) #gen-form .quick-fill.quick-fill-just-clicked {
  animation: quick-fill-rebound 0.40s cubic-bezier(0.16, 1, 0.3, 1);
}

#generate-workspace:not(.preview-mode) #submit-btn.btn-space-primary {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14) inset,
    0 4px 28px -4px rgba(34, 211, 238, 0.55),
    0 16px 52px -12px rgba(59, 130, 246, 0.38);
}

#generate-workspace:not(.preview-mode) #submit-btn.btn-space-primary:hover:not(:disabled) {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.17) inset,
    0 10px 40px -6px rgba(34, 211, 238, 0.62),
    0 22px 56px -12px rgba(99, 102, 241, 0.42);
}

#generate-workspace:not(.preview-mode) .hero-collapse.mt-14 .feature-card {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 44px -14px rgba(56, 189, 248, 0.1);
}

#generate-workspace:not(.preview-mode) .hero-collapse.mt-14 .feature-card:hover {
  transform: translateY(-2px);
}

#generate-workspace:not(.preview-mode) .hero-collapse.mt-14 .grid > .feature-card:nth-child(1):hover {
  border-color: rgba(167, 139, 250, 0.24);
  box-shadow: 0 14px 44px -12px rgba(167, 139, 250, 0.22);
}

#generate-workspace:not(.preview-mode) .hero-collapse.mt-14 .grid > .feature-card:nth-child(2):hover {
  border-color: rgba(34, 211, 238, 0.22);
  box-shadow: 0 14px 44px -12px rgba(34, 211, 238, 0.2);
}

#generate-workspace:not(.preview-mode) .hero-collapse.mt-14 .grid > .feature-card:nth-child(3):hover {
  border-color: rgba(52, 211, 153, 0.22);
  box-shadow: 0 14px 44px -12px rgba(52, 211, 153, 0.2);
}

/* Soften the hard Tailwind ring-1 outlines on feature-card icon boxes into a diffuse glow */
#generate-workspace:not(.preview-mode) .hero-collapse.mt-14 .grid > .feature-card:nth-child(1) > div:first-child {
  box-shadow: 0 0 0 0.5px rgba(167, 139, 250, 0.12), 0 0 10px -1px rgba(167, 139, 250, 0.28);
}
#generate-workspace:not(.preview-mode) .hero-collapse.mt-14 .grid > .feature-card:nth-child(2) > div:first-child {
  box-shadow: 0 0 0 0.5px rgba(34, 211, 238, 0.12), 0 0 10px -1px rgba(34, 211, 238, 0.25);
}
#generate-workspace:not(.preview-mode) .hero-collapse.mt-14 .grid > .feature-card:nth-child(3) > div:first-child {
  box-shadow: 0 0 0 0.5px rgba(52, 211, 153, 0.12), 0 0 10px -1px rgba(52, 211, 153, 0.25);
}

#generate-workspace:not(.preview-mode) #gen-left-col > .hero-collapse:first-child .subject-badge {
  box-shadow: 0 0 16px -4px rgba(56, 189, 248, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  #generate-workspace:not(.preview-mode) #gen-form .quick-fill:hover {
    transform: none;
  }

  #generate-workspace:not(.preview-mode) #gen-form .quick-fill:active,
  #generate-workspace:not(.preview-mode) #gen-form .quick-fill.quick-fill-just-clicked {
    animation: none;
    transform: none;
  }

  #generate-workspace:not(.preview-mode) .hero-collapse.mt-14 .feature-card:hover {
    transform: translateY(-1px);
  }
}

/* ─── Subject badges ─────────────────────────────────────────────────────── */
.subject-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 500;
  vertical-align: 0.1em;
  white-space: nowrap;
  line-height: 1.35;
}

.subject-badge-igcse-physics,
.subject-badge-a-level-physics,
.subject-badge-ap-physics-1,
.subject-badge-ap-physics-2,
.subject-badge-ap-physics-c-mech,
.subject-badge-ap-physics-c-em {
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.25);
  color: rgb(165 243 253);
}

.subject-badge-igcse-computer-science,
.subject-badge-a-level-computer-science,
.subject-badge-ap-computer-science-a,
.subject-badge-ap-computer-science-principles {
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.25);
  color: rgb(221 214 254);
}

.subject-badge-igcse-mathematics,
.subject-badge-a-level-mathematics,
.subject-badge-ap-calculus-ab,
.subject-badge-ap-calculus-bc,
.subject-badge-ap-precalculus {
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.25);
  color: rgb(191 219 254);
}

/* Statistics — indigo tone within the maths blue family (like Further Maths). */
.subject-badge-ap-statistics {
  background: rgba(129, 140, 248, 0.12);
  border: 1px solid rgba(129, 140, 248, 0.25);
  color: rgb(199 210 254);
}

/* Further Mathematics — same blue family as Mathematics, a deeper indigo tone
   so the two A-Level maths stay distinguishable. */
.subject-badge-a-level-further-mathematics {
  background: rgba(129, 140, 248, 0.12);
  border: 1px solid rgba(129, 140, 248, 0.25);
  color: rgb(199 210 254);
}

.subject-badge-igcse-biology,
.subject-badge-a-level-biology,
.subject-badge-ap-biology,
.subject-badge-ap-environmental-science {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: rgb(110 231 183);
}

.subject-badge-igcse-chemistry,
.subject-badge-a-level-chemistry,
.subject-badge-ap-chemistry {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: rgb(125 211 252);
}

/* Business & Economics — a cool teal pair, kept very similar so the two commerce
   subjects blend with the cool palette. Business teal-400; Economics a lighter
   teal-300 (distinct from Physics's cyan). */
.subject-badge-igcse-business-studies,
.subject-badge-a-level-business {
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.25);
  color: rgb(153 246 228);
}

.subject-badge-igcse-economics,
.subject-badge-a-level-economics,
.subject-badge-ap-macroeconomics,
.subject-badge-ap-microeconomics {
  background: rgba(94, 234, 212, 0.12);
  border: 1px solid rgba(94, 234, 212, 0.25);
  color: rgb(153 246 228);
}

/* AP Human Geography — amber-gold (its own earthy family, distinct from the cool sciences). */
.subject-badge-ap-human-geography {
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.25);
  color: rgb(253 224 71);
}

/* AP 2-D Art and Design — pink (its own creative family). */
.subject-badge-ap-art-2d {
  background: rgba(236, 72, 153, 0.12);
  border: 1px solid rgba(236, 72, 153, 0.25);
  color: rgb(249 168 212);
}

/* AP Drawing — burnt sienna (sanguine/sepia, the classic drawing media). */
.subject-badge-ap-drawing {
  background: rgba(194, 65, 12, 0.14);
  border: 1px solid rgba(194, 65, 12, 0.3);
  color: rgb(253 186 116);
}

/* ─── Hero icon float ────────────────────────────────────────────────────── */
.hero-icon {
  animation: float 7s ease-in-out infinite;
}

/* Pause decorative animations in background tabs */
html.doc-background-paused .space-aurora,
html.doc-background-paused .space-stars,
html.doc-background-paused .space-stars::after,
html.doc-background-paused .star,
html.doc-background-paused .form-glow::before,
html.doc-background-paused .hero-icon,
html.doc-background-paused #gen-left-col > .hero-collapse:first-child h1.font-display {
  animation-play-state: paused;
}

/* Keyframes float / title-shimmer / hero-in / hero-in-fade now live in the bundled
   03-core-ui.css (.site-hero module) so every page has them; the rules below reuse them. */
body:not(.page-entered) #generate-workspace:not(.preview-mode)
  #gen-left-col > .hero-collapse:first-child p.uppercase {
  animation: hero-in 0.28s ease 0ms both;
}
body:not(.page-entered) #generate-workspace:not(.preview-mode)
  #gen-left-col > .hero-collapse:first-child h1 {
  animation: hero-in 0.28s ease 80ms both;
}
body:not(.page-entered) #generate-workspace:not(.preview-mode)
  #gen-left-col > .hero-collapse:first-child > p.text-slate-400 {
  animation: hero-in 0.28s ease 160ms both;
}
body:not(.page-entered) #generate-workspace:not(.preview-mode) #gen-form.glass-panel {
  animation: hero-in 0.28s ease 260ms both;
}
body:not(.page-entered) #generate-workspace:not(.preview-mode)
  .hero-collapse.mt-14 .feature-card:nth-child(1) {
  animation: hero-in 0.28s ease 380ms both;
}
body:not(.page-entered) #generate-workspace:not(.preview-mode)
  .hero-collapse.mt-14 .feature-card:nth-child(2) {
  animation: hero-in 0.28s ease 440ms both;
}
body:not(.page-entered) #generate-workspace:not(.preview-mode)
  .hero-collapse.mt-14 .feature-card:nth-child(3) {
  animation: hero-in 0.28s ease 500ms both;
}

/* Feature-card icon settle on first paint — keyframe lives in 04-generation.css */
body:not(.page-entered) #generate-workspace:not(.preview-mode)
  .hero-collapse.mt-14 .feature-card:nth-child(1) > div:first-child {
  animation: icon-settle-in 0.20s cubic-bezier(0.34, 1.56, 0.64, 1) 460ms both;
}
body:not(.page-entered) #generate-workspace:not(.preview-mode)
  .hero-collapse.mt-14 .feature-card:nth-child(2) > div:first-child {
  animation: icon-settle-in 0.20s cubic-bezier(0.34, 1.56, 0.64, 1) 520ms both;
}
body:not(.page-entered) #generate-workspace:not(.preview-mode)
  .hero-collapse.mt-14 .feature-card:nth-child(3) > div:first-child {
  animation: icon-settle-in 0.20s cubic-bezier(0.34, 1.56, 0.64, 1) 580ms both;
}

/* ─── Subject badge hover glow ───────────────────────────────────────────── */
.subject-badge {
  transition: filter 0.15s ease;
  cursor: default;
}

.subject-badge-igcse-computer-science:hover,
.subject-badge-a-level-computer-science:hover { filter: brightness(1.18) drop-shadow(0 0 6px rgba(167, 139, 250, 0.45)); }
.subject-badge-igcse-physics:hover,
.subject-badge-a-level-physics:hover          { filter: brightness(1.18) drop-shadow(0 0 6px rgba(34, 211, 238, 0.45)); }
.subject-badge-igcse-chemistry:hover,
.subject-badge-a-level-chemistry:hover        { filter: brightness(1.18) drop-shadow(0 0 6px rgba(56, 189, 248, 0.45)); }
.subject-badge-igcse-mathematics:hover,
.subject-badge-a-level-mathematics:hover      { filter: brightness(1.18) drop-shadow(0 0 6px rgba(96, 165, 250, 0.45)); }
.subject-badge-a-level-further-mathematics:hover { filter: brightness(1.18) drop-shadow(0 0 6px rgba(129, 140, 248, 0.45)); }
.subject-badge-igcse-biology:hover,
.subject-badge-a-level-biology:hover          { filter: brightness(1.18) drop-shadow(0 0 6px rgba(16, 185, 129, 0.45)); }
.subject-badge-igcse-business-studies:hover,
.subject-badge-a-level-business:hover         { filter: brightness(1.18) drop-shadow(0 0 6px rgba(45, 212, 191, 0.45)); }
.subject-badge-igcse-economics:hover,
.subject-badge-a-level-economics:hover        { filter: brightness(1.18) drop-shadow(0 0 6px rgba(94, 234, 212, 0.45)); }

/* ─── Practice subject card ─────────────────────────────────────────────────
   Per-subject accent driven by a CSS variable so one rule set covers all cards.
   Each slug below picks the accent RGB used by the icon, hover border/gradient,
   arrow, and focus ring. Palette mirrors .subject-badge-* in this file. */
.practice-card {
  --accent-rgb: 148, 163, 184;
  transition: border-color 0.15s ease, background-image 0.15s ease;
}
.practice-card[data-subject="igcse_physics"],
.practice-card[data-subject="a_level_physics"]          { --accent-rgb:  34, 211, 238; }
.practice-card[data-subject="igcse_computer_science"],
.practice-card[data-subject="a_level_computer_science"] { --accent-rgb: 167, 139, 250; }
.practice-card[data-subject="igcse_mathematics"],
.practice-card[data-subject="a_level_mathematics"]      { --accent-rgb:  96, 165, 250; }
.practice-card[data-subject="a_level_further_mathematics"] { --accent-rgb: 129, 140, 248; }
.practice-card[data-subject="igcse_biology"],
.practice-card[data-subject="a_level_biology"]          { --accent-rgb:  16, 185, 129; }
.practice-card[data-subject="igcse_chemistry"],
.practice-card[data-subject="a_level_chemistry"]        { --accent-rgb: 56, 189, 248; }
.practice-card[data-subject="igcse_business_studies"],
.practice-card[data-subject="a_level_business"]         { --accent-rgb: 45, 212, 191; }
.practice-card[data-subject="igcse_economics"],
.practice-card[data-subject="a_level_economics"]        { --accent-rgb: 94, 234, 212; }
/* AP (College Board) — each reuses its family accent, matching the A-Level row. */
.practice-card[data-subject="ap_physics_1"],
.practice-card[data-subject="ap_physics_2"],
.practice-card[data-subject="ap_physics_c_mech"],
.practice-card[data-subject="ap_physics_c_em"]          { --accent-rgb:  34, 211, 238; }
.practice-card[data-subject="ap_computer_science_a"],
.practice-card[data-subject="ap_computer_science_principles"] { --accent-rgb: 167, 139, 250; }
.practice-card[data-subject="ap_precalculus"],
.practice-card[data-subject="ap_calculus_ab"],
.practice-card[data-subject="ap_calculus_bc"]           { --accent-rgb:  96, 165, 250; }
.practice-card[data-subject="ap_statistics"]            { --accent-rgb:  56, 189, 248; }
.practice-card[data-subject="ap_biology"]               { --accent-rgb:  16, 185, 129; }
.practice-card[data-subject="ap_chemistry"]             { --accent-rgb: 168, 85, 247; }
.practice-card[data-subject="ap_environmental_science"] { --accent-rgb: 132, 204,  22; }
.practice-card[data-subject="ap_microeconomics"],
.practice-card[data-subject="ap_macroeconomics"]        { --accent-rgb: 94, 234, 212; }
.practice-card[data-subject="ap_human_geography"]       { --accent-rgb: 234, 179,   8; }
.practice-card[data-subject="ap_art_2d"]                { --accent-rgb: 236,  72, 153; }
.practice-card[data-subject="ap_drawing"]               { --accent-rgb: 194,  65,  12; }
.practice-card[data-subject="ap_cybersecurity"]         { --accent-rgb: 148, 163, 184; }
.practice-card[data-subject="ap_us_history"],
.practice-card[data-subject="ap_world_history"],
.practice-card[data-subject="ap_european_history"]      { --accent-rgb: 217, 119,   6; }
.practice-card[data-subject="ap_english_language"],
.practice-card[data-subject="ap_english_literature"]    { --accent-rgb: 251, 113, 133; }
.practice-card[data-subject="ap_psychology"]            { --accent-rgb: 232, 121, 249; }

/* Cards are laid out with Tailwind's `flex`, whose `display: flex` BEATS the UA sheet's
   `[hidden] { display: none }` — so a card hidden via the attribute (the landing page's
   role-gated tool tiles, toggled by account.js) would still render. Make `hidden`
   authoritative, as 13-account.css has to for the header chips. */
.practice-card[hidden] { display: none; }

.practice-card-icon-bg { background-color: rgba(var(--accent-rgb), 0.12); }
.practice-card-icon    { color: rgb(var(--accent-rgb)); }
.practice-card-arrow   { transition: transform 0.15s ease, color 0.15s ease; }

.practice-card:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  background-image: linear-gradient(to bottom, rgba(var(--accent-rgb), 0.08), rgba(255, 255, 255, 0.02));
}
.practice-card:hover .practice-card-arrow {
  color: rgb(var(--accent-rgb));
  transform: translateX(2px);
}
.practice-card:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.6);
  outline-offset: 1px;
}

/* ─── /know topic page: the "Interactive lessons on this topic" rows ──────────
   Each row carries its own --accent-rgb (know.py gives every lesson its own hue,
   drifting from the topic's), so hover/focus tint in that lesson's colour rather
   than one shared cyan. Lives here because know/topic.html already loads this
   sheet for .practice-card-icon-bg — 17-learn.css (which owns the visually
   similar .lx-lesson-link) is a /learn-only sheet and keys off --lx-accent. */
.know-lesson-link:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  background-color: rgba(var(--accent-rgb), 0.08);
}
.know-lesson-link:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.6);
  outline-offset: 1px;
}

/* ─── Quick-fill 2-col grid on mobile: last button spans full width if alone ── */
@media (max-width: 639px) {
  .quick-fill:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ─── Learn subtopic content: markdown-rendered Core/Supplement table ──────── */
.learn-content-body {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  color: rgb(255, 255, 255);                       /* white — normal body text */
  background-color: rgb(3, 9, 26);                 /* darker navy — higher contrast */
  font-size: 1.0625rem;
  line-height: 1.7;
}
/* Subtopic disclosure (folded by default; chevron rotates on open). */
.learn-subtopic-chevron { transition: transform .2s ease; }
.learn-subtopic[open] > summary .learn-subtopic-chevron { transform: rotate(90deg); }
/* Interleaved per-section unit: each section is a collapsed fold whose summary is the
   numbered heading. The <h2> sits in a flex summary row, so neutralise the UA serif/margin;
   sized a touch above the row default (the text-sm version read as "too small"). */
.learn-unit { position: relative; }                /* anchor the syllabus toggle onto the headline */
.learn-unit > summary { min-height: 2.75rem; }     /* stable headline height so the toggle centres */
.learn-unit-title {
  font-family: inherit;                            /* sans, not the UA serif h2 default */
  font-size: 1.0625rem;                            /* 17px — bigger than the row default */
  font-weight: 600;
  margin: 0;
}
/* Tiny figure preview on the COLLAPSED section header — so figures are visible at a glance
   without opening every fold. Hidden once the section is open (the full figure shows in the
   body). cover crops to a neat tile; white bg sits behind transparent SVG/PNG diagrams. */
.learn-unit-thumb {
  flex: none;
  width: 2.75rem;
  height: 2rem;
  object-fit: cover;
  border-radius: 0.3rem;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.learn-unit[open] > summary .learn-unit-thumb { display: none; }
/* The "Syllabus" toggle lives in the open section body, but its summary is lifted onto the
   headline row (right of the title, left of the section chevron) — so it appears only once the
   section is open, and closed it adds ~0 height so the handout body sits right under the
   headline. text-[11px] isn't in the compiled Tailwind, so size/position live here. */
.learn-syllabus-fold { margin-bottom: 0; }
.learn-syllabus-fold[open] { margin-bottom: 0.75rem; }
.learn-syllabus-summary {
  position: absolute;
  top: 0;
  right: 2.5rem;                                    /* clear the section chevron */
  height: 2.75rem;                                 /* match the headline → vertical centre */
  font-size: 0.6875rem;                            /* 11px — small, subtle */
  font-weight: 500;
  letter-spacing: 0.02em;
}
/* Handout/Vocabulary download buttons lift onto the TOPIC title row (same trick as the syllabus
   toggle): they live at the top of the open topic body but are absolutely positioned onto the
   summary, right of the title and left of the topic chevron — so they appear only once the topic
   is open and cost no extra row. (3.25rem = h-7 badge + py-3, the topic summary's height.) */
.learn-topic-rel {
  position: relative;
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;  /* handout font, everywhere in the box */
  /* Darker than the page (better contrast) but keep depth: a dark top→bottom gradient instead of a
     flat fill, a lit top edge + drop shadow for the raised/glass 3D look (backdrop-blur + border
     come from the Tailwind classes and stay). */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.36));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
              0 12px 30px -14px rgba(0, 0, 0, 0.6);
}
.learn-topic-rel > summary { min-height: 3.25rem; }
.learn-topic-tools {
  position: absolute;
  top: 0;
  right: 3rem;                                     /* clear the topic chevron */
  height: 3.25rem;                                 /* match the topic summary → vertical centre */
}
/* Long-title safety: when a unit/topic is open, the absolute syllabus toggle / download buttons
   overlay the right of the headline — reserve room so a long heading can't slide under them. */
.learn-unit[open] > summary .learn-unit-title { padding-right: 5.5rem; }
.learn-topic-rel[open] > summary .learn-topic-title { padding-right: 12rem; }
/* Topics that also carry a "View Slides" button need a third slot in the lifted tools row;
   reserve generously so a long heading can't slide under the three buttons. */
.learn-topic-rel.learn-topic-has-slides[open] > summary .learn-topic-title { padding-right: 21rem; }
/* Match the slides button height to the handout/vocab download buttons (py-1) so all three
   align on the lifted row (the shared .slides-launch macro is py-1.5, a touch taller). */
/* The lifted tools row is only 3.25rem tall, so the chips in it are shorter than the
   same buttons elsewhere. Every chip in the row must agree, or the odd one out reads as
   a different control: "Watch lesson" stood 30px beside 26px neighbours. */
.learn-topic-tools .slides-launch,
.learn-topic-tools .video-launch { padding-top: 0.25rem; padding-bottom: 0.25rem; }
/* Phones: three buttons won't share the narrow title row, so drop the tools group into normal
   flow just under the summary and give the heading its full width back. Scoped to has-slides so
   the existing two-button (handout/vocab) topics keep their lifted row unchanged. */
@media (max-width: 639px) {
  .learn-topic-rel.learn-topic-has-slides .learn-topic-tools {
    position: static;
    height: auto;
    margin-top: 0.5rem;
    justify-content: flex-end;
  }
  .learn-topic-rel.learn-topic-has-slides[open] > summary .learn-topic-title { padding-right: 0; }
}
.learn-content-body table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  line-height: 1.55;
}
.learn-content-body thead th {
  text-align: left;
  font-weight: 600;
  color: rgb(165, 243, 252);                       /* cyan-200 */
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.03);
}
.learn-content-body tbody td {
  vertical-align: top;
  padding: 0.7rem 0.85rem;
  color: rgb(255, 255, 255);                       /* white — match body */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.learn-content-body tbody tr:nth-child(odd) td {
  background-color: rgba(255, 255, 255, 0.015);
}
.learn-content-body tbody tr:last-child td {
  border-bottom: none;
}
.learn-content-body tbody td:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
/* Syllabus learning-objectives (the content_body macro — NOT handouts) render in
   near-white slate-100 to match the A-Level numbered-list benchmark. IGCSE
   subjects whose objectives are tables would otherwise inherit the yellow body. */
.learn-content-body--syllabus,
.learn-content-body--syllabus tbody td {
  color: rgb(241, 245, 249);                       /* slate-100 — matches .learn-content-body ol */
}
.learn-content-body .math.inline,
.learn-content-body .math.block {
  color: rgb(255, 255, 255);                       /* white — formulas and numbers */
}

/* AP College Board CED "Required Course Content" — its native three columns
   (Enduring Understanding | Learning Objective | Essential Knowledge), built by
   web/ap_syllabus_table.py. The Enduring-Understanding cell rowspans its Learning
   Objectives. Wrapped so the wide table scrolls on phones instead of crushing. */
.ap-ced-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0.15rem 0;
}
.learn-content-body table.ap-ced {
  min-width: 640px;                                 /* scroll rather than crush the 3 columns on phones */
}
.learn-content-body table.ap-ced th,
.learn-content-body table.ap-ced td {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
}
.learn-content-body table.ap-ced th:last-child,
.learn-content-body table.ap-ced td:last-child { border-right: none; }
.learn-content-body table.ap-ced td { padding: 0.7rem 0.85rem; }
.learn-content-body table.ap-ced td > :first-child { margin-top: 0; }
.learn-content-body table.ap-ced td > :last-child { margin-bottom: 0; }
.learn-content-body table.ap-ced td p { margin: 0 0 0.4rem; }
/* The spanning Enduring-Understanding cell — faint sky wash so the grouping reads
   at a glance; its code label (and each Learning-Objective code) in sky-300. */
.learn-content-body table.ap-ced td.ap-eu {
  background-color: rgba(56, 189, 248, 0.045);
}
.learn-content-body table.ap-ced td.ap-eu strong,
.learn-content-body table.ap-ced td.ap-lo p:first-child strong:first-child {
  color: rgb(125, 211, 252);                        /* sky-300 — the EU / LO code label */
  font-weight: 600;
}
/* Essential-Knowledge list: tighten so the bullets sit close inside the cell. */
.learn-content-body table.ap-ced td.ap-ek ul { margin: 0; padding-left: 1.05rem; }
.learn-content-body table.ap-ced td.ap-ek > ul > li { margin-bottom: 0.4rem; }
.learn-content-body table.ap-ced td.ap-ek > ul > li:last-child { margin-bottom: 0; }
.learn-content-body table.ap-ced td.ap-ek ul ul { margin: 0.25rem 0 0; }
/* AP history CEDs print ILLUSTRATIVE EXAMPLES in the page's margin rail rather
   than inside a column. They are real course content, so they follow the table
   as their own aside instead of being folded into the last cell. */
.learn-content-body .ap-ced-extras {
  margin: 0.6rem 0 0.15rem;
  padding: 0.6rem 0.85rem;
  border-left: 2px solid rgba(56, 189, 248, 0.35);
  background-color: rgba(56, 189, 248, 0.035);
  border-radius: 0 0.35rem 0.35rem 0;
}
.learn-content-body .ap-ced-extras > :first-child { margin-top: 0; }
.learn-content-body .ap-ced-extras > :last-child { margin-bottom: 0; }
.learn-content-body .ap-ced-extras p strong { color: rgb(125, 211, 252); font-weight: 600; }
.learn-content-body .ap-ced-extras ul { margin: 0.35rem 0 0; padding-left: 1.05rem; }
.learn-content-body .ap-ced-extras ul ul { margin: 0.2rem 0 0.35rem; }

/* Textbook figures: white padded card so dark/transparent line art stays legible on navy. */
.learn-content-body img {
  display: block;
  max-width: min(100%, 44rem);   /* responsive shrink + ceiling for the widest figures */
  height: auto;                  /* wins over the inline height attr → aspect ratio preserved under clamp */
  box-sizing: border-box;        /* white-card padding counts within the injected width */
  margin: 1.25rem auto 0;
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.5rem;
}
/* Italic caption directly after a figure (image + *caption* on consecutive lines, no blank line). */
.learn-content-body img + em {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  font-style: italic;
  color: rgb(148, 163, 184);                       /* slate-400 */
  margin: 0.35rem 0 0.75rem;
}
/* H3 sub-section headers (IGCSE Physics 1.5.1, 1.5.2, …) between tables. */
.learn-content-body h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: rgb(165, 243, 252);                       /* cyan-200 */
}
.learn-content-body h3:first-child {
  margin-top: 0;
}
/* A-Level numbered list of learning outcomes. */
.learn-content-body ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin: 0;
  color: rgb(241, 245, 249);                       /* slate-100 */
}
.learn-content-body ol > li {
  margin: 0.35rem 0;
  padding-left: 0.25rem;
}
.learn-content-body ol > li::marker {
  color: rgb(148, 163, 184);                       /* slate-400 */
  font-variant-numeric: tabular-nums;
}
/* Handout markdown elements (handouts use ##/###/#### + paragraphs, bullets, inline + fenced code). */
.learn-content-body h2 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: rgb(165, 243, 252);                       /* cyan-200 — matches h3 family */
}
.learn-content-body h2:first-child { margin-top: 0; }
.learn-content-body h4 {
  margin-top: 1rem;
  margin-bottom: 0.35rem;
  font-size: 1.0rem;
  font-weight: 700;
  color: rgb(255, 255, 255);                       /* white — sub-subsection heading */
}
.learn-content-body p { margin: 0.75rem 0; }
.learn-content-body p:first-child { margin-top: 0; }
.learn-content-body p:last-child { margin-bottom: 0; }
.learn-content-body ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: 0.75rem 0;
}
.learn-content-body ul > li {
  margin: 0.35rem 0;
  padding-left: 0.25rem;
}
.learn-content-body ul > li::marker {
  color: rgb(148, 163, 184);                       /* slate-400 */
}
.learn-content-body strong {
  font-weight: 700;
  color: rgb(253, 224, 71);                        /* yellow-300 — emphasis brighter than body */
}
.learn-content-body em { font-style: italic; }
.learn-content-body code {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 0.92em;
  color: rgb(255, 255, 255);                       /* white — inline code */
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.25rem;
  padding: 0.05rem 0.35rem;
}
.learn-content-body pre {
  margin: 0.85rem 0;
  padding: 0.85rem 1rem;
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  overflow-x: auto;
  font-size: 0.95rem;
  line-height: 1.5;
}
.learn-content-body pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 1em;
  color: rgb(255, 255, 255);                       /* white — fenced code blocks */
}

/* ─── On-page per-handout vocab glossary list ──────────────────────────────────
   Mirrors .learn-content-body table (fixed columns, cyan header, dividers) so the
   term list reads as part of the handout, not a cramped 14/11px afterthought.
   Kept in the page's sans UI font (matches the "VOCABULARY" label + Train button it
   sits with, and pinyin tone-marks scan cleanly) — switch font-family to
   'Source Serif 4', Georgia, serif here if you'd rather it match the prose. */
.learn-vocab-table {
  width: auto;                         /* hug content — don't stretch columns to fill the box */
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto;                  /* each column sizes to its own content (below) */
  font-size: 1rem;                     /* up from text-sm (14px) */
  line-height: 1.5;
}
/* Every column hugs its own content — a natural gap comes from the cell padding, and the table
   (width:auto above) doesn't stretch anything wider than necessary. Long terms wrap (break-word
   below) rather than forcing a huge column or overflowing on a narrow (mobile) width. */
.learn-vocab-table col.col-en,
.learn-vocab-table col.col-zh,
.learn-vocab-table col.col-py { width: auto; }
.learn-vocab-table thead th {
  text-align: left;
  font-size: 0.78rem;                  /* up from text-[11px]; small-caps column label */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(165, 243, 252);          /* cyan-200 — matches .learn-content-body header */
  padding: 0 0.85rem 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.learn-vocab-table tbody td {
  vertical-align: top;
  padding: 0.5rem 0.85rem 0.5rem 0;
  color: rgb(241, 245, 249);          /* slate-100 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  overflow-wrap: break-word;          /* long terms wrap when squeezed, but never collapse the column's min width */
}
.learn-vocab-table thead th:last-child,
.learn-vocab-table tbody td:last-child { padding-right: 0; }
.learn-vocab-table tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, 0.015); }
.learn-vocab-table tbody tr:last-child td { border-bottom: none; }
.learn-vocab-table tbody td:nth-child(2) { font-size: 1.075rem; }       /* CJK optically larger */
.learn-vocab-table tbody td:nth-child(3) { color: rgb(148, 163, 184); } /* pinyin muted (slate-400) */
/* Hand-picked concept icon before the English term (same map as Morning Reading; built by
   web/templating.py:vocab_icon). The per-row COLOUR is set INLINE by that helper (mixed hues,
   cycled by row index), so it can't be lost if this sheet is edited; here we only size/space
   the glyph. Web only; the vocab PDFs render greyscale on a separate path. */
.learn-vocab-table .vocab-icon {
  display: inline-block;
  width: 1.25em; height: 1.25em;      /* a touch bigger for legibility */
  margin-right: 0.6em;                /* a bit more breathing room before the word */
  vertical-align: -0.25em;            /* centre the larger glyph on the text */
}
.learn-vocab-table .vocab-icon svg { display: block; width: 100%; height: 100%; }
/* Hanging indent on the term column — see the twin rule in 17-learn.css for the why.
   Keep the two copies in step: this sheet serves /know, that one /learn. */
.learn-vocab-table tbody td:first-child {
  padding-left: 1.85em;
  text-indent: -1.85em;
}

/* Learn hero styling moved to the shared .site-hero module (bundled 03-core-ui.css);
   /know now renders via the partials/hero.html macro, and reduced-motion is handled
   once for .site-hero in the bundled 10-accessibility-motion.css. */

/* ─── Deep-linked subject cards (/eXam/practice#<slug>) ──────────────────────
   The home page's per-subject Practice button links here rather than to the take-page,
   so the visitor picks a topic before a question is drawn. The site header is
   `sticky top-0`, so without headroom the card lands UNDER it — and this must be CSS,
   not a JS offset: the browser performs its own anchor jump on arrival, before the
   landing's script runs, so a JS-only fix would be visibly corrected a beat late. */
.practice-subject-anchor { scroll-margin-top: 5.5rem; }