/* Built by tools/build.py from src/css. Edit the source files, not this one. */

/* ===== src/css/base.css ===== */
/* Base: colour tokens (light + dark), reset, typography and small shared utilities. */

/* ---------- Colour and font tokens ---------- */
:root {
  --bg: #f2f5f6; --surface: #ffffff; --ink: #132029; --muted: #51626c; --line: #d5dee2;
  --accent: #0b6a87; --accent-soft: #e1eff4; --on-accent: #ffffff;
  --hi: #8f5400; --hi-soft: #fbefd9;
  --ok: #17703f; --ok-soft: #e1f2e8; --bad: #b3261e; --bad-soft: #fbe6e4;
  --display: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* Dark theme: follows the system unless the reader picked light; or forced with data-theme="dark". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e161b; --surface: #15212a; --ink: #e2eaee; --muted: #95a8b3; --line: #263641;
    --accent: #5cbcda; --accent-soft: #12313d; --on-accent: #07202a;
    --hi: #e6ad4d; --hi-soft: #30250f;
    --ok: #52c98f; --ok-soft: #0f2b1f; --bad: #f27a6f; --bad-soft: #371917;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e161b; --surface: #15212a; --ink: #e2eaee; --muted: #95a8b3; --line: #263641;
  --accent: #5cbcda; --accent-soft: #12313d; --on-accent: #07202a;
  --hi: #e6ad4d; --hi-soft: #30250f;
  --ok: #52c98f; --ok-soft: #0f2b1f; --bad: #f27a6f; --bad-soft: #371917;
  color-scheme: dark;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box }
[hidden] { display: none !important }
img { max-width: 100% }
:root {
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; margin: 0 }
p { margin: 0 }
a { color: var(--accent); text-underline-offset: 2px }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0 }
h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); font-weight: 700; line-height: 1.02; letter-spacing: -.01em }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 700; line-height: 1.1 }
h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.2 }
code, .mono { font-family: var(--mono); font-size: .9em }
code { overflow-wrap: anywhere }
.eyebrow { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 }
.lede { max-width: 62ch; color: var(--muted); font-size: 1.05rem }

/* ---------- Small shared pieces ---------- */
.wrap { max-width: 72rem; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px) }
.callout { background: var(--accent-soft); border-radius: 10px; padding: 16px 18px; max-width: 80ch }

/* Little labels in notes and cards: KEY (amber), Your 2026 (blue), Practice (green) */
.tag { display: inline-block; font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: var(--hi-soft); color: var(--hi); padding: 1px 6px; border-radius: 4px; margin-right: 6px; vertical-align: 2px }
.tag.y { background: var(--accent-soft); color: var(--accent) }
.tag.p { background: var(--ok-soft); color: var(--ok) }

@media (max-width: 640px) {
  h2 { font-size: 1.55rem }
  .lede { font-size: 1rem }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important }
}

/* ===== src/css/layout.css ===== */
/* App shell: desktop sidebar, phone top bar + bottom tabs + "More" sheet, page sections,
   page transitions, the previous/next pager, the theme button and the back-to-top button. */

/* ---------- Brand mark ---------- */
.brand { display: inline-flex; align-items: center; gap: 8px; flex: none; text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 1.05rem }
.brand svg { width: 28px; height: 28px }
.brand .brand-bg { fill: var(--accent) }
.brand .brand-fg { fill: var(--on-accent) }
.brand span small { display: block; font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .06em; color: var(--muted); text-transform: uppercase }

/* ---------- Desktop sidebar (≥ 1024 px) ---------- */
.sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 248px; z-index: 25; display: flex; flex-direction: column; gap: 20px; padding: 22px 14px calc(16px + env(safe-area-inset-bottom, 0px)); border-right: 1px solid var(--line); background: var(--surface); overflow-y: auto }
.sidebar .brand { padding: 0 8px }
.side-nav { display: grid; gap: 2px }
.side-nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: .95rem; transition: background .15s, color .15s }
.side-nav a svg { width: 18px; height: 18px; flex: none }
.side-nav a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600 }
.side-foot { margin-top: auto; display: grid; gap: 10px }
.side-count { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line) }
.side-count b { font-family: var(--display); font-size: 1.9rem; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums }
.side-count span { font-size: .8rem; color: var(--muted) }
.sidebar .themebtn { justify-content: center; width: 100%; padding: 8px 12px }
main, footer { margin-left: 248px }
.topbar, .bottombar { display: none }
@media (hover: hover) { .side-nav a:not(.on):hover { background: var(--bg); color: var(--ink) } }

/* ---------- Phones and tablets (< 1024 px): top bar + bottom tabs ---------- */
@media (max-width: 1023px) {
  .sidebar { display: none }
  main, footer { margin-left: 0 }
  .topbar { display: flex; align-items: center; gap: 12px; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 25; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); background: var(--surface) }
  .topbar-title { flex: 1; margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.15rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .bottombar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--surface) }
  .bottombar a, .bottombar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; padding: 6px 2px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: .7rem; font-weight: 600; color: var(--muted); text-decoration: none; cursor: pointer }
  .bottombar svg { width: 22px; height: 22px }
  .bottombar .on { color: var(--accent); background: var(--accent-soft) }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) }
}
@media (max-width: 640px) { .brand span { display: none } }
@media (max-width: 360px) { .bottombar a, .bottombar button { font-size: .62rem } }

/* Frosted glass bars where the browser supports it */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (background: color-mix(in srgb, red 50%, transparent)) {
  .topbar, .bottombar { background: color-mix(in srgb, var(--surface) 80%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px) }
}

/* ---------- "More" sheet on phones ---------- */
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; background: rgba(4, 10, 14, .45) }
.sheet[hidden] { display: none }
.sheet-panel { width: 100%; display: grid; gap: 4px; padding: 8px 14px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; background: var(--surface); box-shadow: 0 -12px 32px rgba(0, 0, 0, .22); animation: sheetUp .24s cubic-bezier(.2, .7, .2, 1) both }
.sheet-grip { width: 42px; height: 4px; border-radius: 999px; background: var(--line); justify-self: center; margin: 6px 0 10px }
.sheet a { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 12px; text-decoration: none; color: var(--ink) }
.sheet a svg { width: 22px; height: 22px; color: var(--accent); flex: none }
.sheet a b { display: block; font-weight: 600 }
.sheet a small { display: block; color: var(--muted); font-size: .82rem }
.sheet a.on { background: var(--accent-soft) }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ---------- Pages ---------- */
section, .week { scroll-margin-top: calc(var(--navh, 54px) + 10px) }
section > .wrap { display: grid; gap: 22px; padding-block: 44px }
main > section.page { min-height: calc(100vh - var(--navh, 54px) - 190px) }
main > section.page > .wrap { padding-block: 34px 26px }
.sec-head { display: grid; gap: 6px }
.sec-head p { max-width: 68ch; color: var(--muted) }
footer .wrap { padding-block: 28px; color: var(--muted); font-size: .86rem }
@media (max-width: 640px) {
  section > .wrap { gap: 18px; padding-block: 32px }
  main > section.page > .wrap { padding-block: 24px 20px }
}

/* Page enter animation, or the View Transitions API where available */
.page.enter, .week.enter { animation: pageIn .32s cubic-bezier(.2, .7, .2, 1) both }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
main { view-transition-name: pagebody }
::view-transition-old(pagebody) { animation: vtOut .16s ease both }
::view-transition-new(pagebody) { animation: vtIn .32s cubic-bezier(.2, .7, .2, 1) both }
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px) } }
@keyframes vtIn { from { opacity: 0; transform: translateY(12px) } }
@media (prefers-reduced-motion: reduce) {
  .page.enter, .week.enter { animation: none }
  ::view-transition-old(pagebody), ::view-transition-new(pagebody) { animation: none }
  .sheet-panel { animation: none }
}

/* ---------- Previous / next page pager ---------- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-block: 6px 40px }
.pg { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s }
.pg .l { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted) }
.pg .n { font-weight: 600 }
.pg.next { grid-column: 2; text-align: right }
@media (hover: hover) { .pg:hover { border-color: var(--accent); transform: translateY(-2px) } }
@media (max-width: 640px) { .pg { padding: 12px } }

/* ---------- Light / dark button ---------- */
.themebtn { flex: none; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-family: var(--mono); font-size: .82rem; line-height: 1.6; cursor: pointer; padding: 6px 12px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--accent) }
.themebtn svg { width: 15px; height: 15px; flex: none }
@media (hover: hover) { .themebtn:hover { background: var(--accent); color: var(--on-accent) } }
@media (max-width: 640px) {
  .themebtn { width: 42px; height: 42px; padding: 0; justify-content: center }
  .themebtn span { display: none }
  .themebtn svg { width: 18px; height: 18px }
}

/* ---------- Back-to-top button ---------- */
.totop { position: fixed; z-index: 30; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, .18); display: none; align-items: center; justify-content: center }
.totop svg { width: 20px; height: 20px }
.totop.show { display: inline-flex }
/* keep it clear of the phone bottom tabs */
@media (max-width: 1023px) { .totop { bottom: calc(env(safe-area-inset-bottom, 0px) + 86px) } }

/* ===== src/css/components.css ===== */
/* Shared components: buttons and chips, toolbars, question cards, info cards and tables.
   Used by several pages (practice, must-know, mock exams, numericals, resources). */

/* ---------- Buttons and filter chips ---------- */
.chip, .btn { font: inherit; font-family: var(--mono); font-size: .8rem; cursor: pointer; border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; background: var(--bg); color: var(--ink) }
.btn.big { font-size: .86rem; padding: 10px 18px; border-radius: 10px; text-decoration: none; display: inline-flex; align-items: center }
a.btn { text-decoration: none; display: inline-flex; align-items: center }
.btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft) }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); border-radius: 8px }
.btn.primary:disabled { opacity: .45; cursor: default }
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
.chip small { opacity: .75 }
.btn:active, .chip:active, .opt:active, .pal:active { transform: scale(.98) }

/* ---------- Action rows and running score ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between }
.actions .left { display: flex; flex-wrap: wrap; gap: 8px }
.score { font-family: var(--mono); font-size: .84rem; font-variant-numeric: tabular-nums; color: var(--muted) }
.score b { color: var(--ink) }

/* ---------- Question card (practice, must-know, mock exams) ---------- */
.qlist { display: grid; gap: 12px; scroll-margin-top: calc(var(--navh, 54px) + 12px) }
.q { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; display: grid; gap: 12px; min-width: 0 }
.q-meta { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px }
.q-meta .k { color: var(--hi) }
.q-meta .mine { color: var(--accent); font-weight: 600 }
.q-meta .rkn { color: var(--ink); font-weight: 600 }
.q-text { font-weight: 500; max-width: 80ch }
.opts { display: grid; gap: 7px }
.opt { font: inherit; text-align: left; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; cursor: pointer; width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; background: var(--bg); color: var(--ink) }
.opt .key { font-family: var(--mono); font-size: .8rem; color: var(--muted); padding-top: 2px }
.opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft) }
.opt.correct { border-color: var(--ok); background: var(--ok-soft) }
.opt.correct .key { color: var(--ok); font-weight: 600 }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft) }
.opt.wrong .key { color: var(--bad); font-weight: 600 }
.opt:disabled { cursor: default; color: var(--ink) }
.q-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.verdict { font-family: var(--mono); font-size: .8rem; font-weight: 600 }
.verdict.ok { color: var(--ok) }
.verdict.no { color: var(--bad) }
.verdict.rev { color: var(--hi) }
.why { font-size: .94rem; color: var(--ink); background: var(--bg); border-radius: 8px; padding: 10px 12px; max-width: 80ch }
.why b { font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; color: var(--muted); font-weight: 500; margin-right: 6px }

/* ---------- Info cards (formula sheet, resources) ---------- */
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 14px }
.fcard { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; display: grid; gap: 10px; align-content: start; min-width: 0 }
.fcard p, .fcard li { font-size: .95rem }
.fcard ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px }

/* ---------- Tables ---------- */
.tbl { overflow-x: auto }
table { border-collapse: collapse; width: 100%; font-size: .92rem; font-variant-numeric: tabular-nums }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top }
th { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500 }

@media (max-width: 640px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; padding-inline: 12px; padding-bottom: 2px }
  .chips::-webkit-scrollbar { display: none }
  .chip { flex: none }
  .chip, .btn { min-height: 42px; padding: 9px 14px }
  .actions { gap: 10px }
  .q { padding: 14px; gap: 10px }
  .opt { padding: 12px; min-height: 48px }
  .why { font-size: .92rem }
  .fcard { padding: 16px }
}

/* ===== src/css/pages/home.css ===== */
/* Home page: hero with countdown, exam facts ("ticket"), progress rings, study plan and page cards. */

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: center; padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(900px 280px at 100% 0%, var(--accent-soft), transparent 70%), var(--surface) }
.hero-net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none }
.hero-main { display: grid; gap: 14px; min-width: 0 }
.cta { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px }
.today-focus { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink); font-size: .9rem }
.today-focus .tf-l { font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent) }

/* Countdown card */
.countdown-card { display: grid; justify-items: center; gap: 4px; padding: 20px 16px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); text-align: center }
.cd-num { font-family: var(--display); font-size: 4.4rem; font-weight: 700; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums }
.cd-l { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.cd-d { font-weight: 600; font-size: .95rem }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (background: color-mix(in srgb, red 50%, transparent)) {
  .countdown-card { background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px) }
}

/* ---------- Exam facts strip ---------- */
.ticket { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); border: 1px dashed var(--line); border-radius: 10px; background: var(--bg) }
.ticket div { padding: 12px 16px; border-right: 1px dashed var(--line); min-width: 0 }
.ticket div:last-child { border-right: 0 }
.ticket dt { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.ticket dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums }
.ticket dd small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem }
#countdown { color: var(--accent) }

/* ---------- Progress cards with rings ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px }
.stat { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; align-content: start; padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s }
.stat .sx { display: grid; gap: 2px; min-width: 0 }
.stat .l { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.stat .v { font-family: var(--display); font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums }
.stat .s { font-size: .86rem; color: var(--muted) }
.ring { position: relative; width: 64px; height: 64px; display: block }
.ring svg:first-child { width: 64px; height: 64px; transform: rotate(-90deg) }
.ring .rt { fill: none; stroke: var(--bg); stroke-width: 7 }
.ring .rf { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.2, .7, .2, 1) }
.ring .lucide, .ring > i { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; color: var(--accent) }
.stat.good .rf { stroke: var(--ok) }
.stat.good .ring .lucide { color: var(--ok) }

/* ---------- Study plan ---------- */
.days { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px }
.day { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; display: grid; gap: 10px; align-content: start }
.day .when { font-family: var(--mono); font-size: .78rem; color: var(--accent); letter-spacing: .04em }
.day ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px }
.day.today { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.todaybadge { margin-left: 8px; font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); vertical-align: 1px }

/* ---------- "Pick a page" cards ---------- */
.kit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px }
.kitcard { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s }
.kitcard .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); margin-bottom: 4px }
.kitcard .ic svg { width: 20px; height: 20px }
.kitcard .k { font-family: var(--mono); font-size: .72rem; color: var(--accent); letter-spacing: .03em }
.kitcard h3 { font-size: 1.2rem }
.kitcard p { color: var(--muted); font-size: .92rem }
.kitcard .go { font-family: var(--mono); font-size: .8rem; color: var(--accent); padding-top: 4px }

@media (hover: hover) { .stat:hover, .kitcard:hover { border-color: var(--accent); transform: translateY(-2px) } }
@media (prefers-reduced-motion: reduce) { .ring .rf { transition: none } }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding: 20px }
  .countdown-card { grid-auto-flow: column; justify-content: start; justify-items: start; align-items: baseline; gap: 10px; padding: 12px 14px }
  .cd-num { font-size: 2.6rem }
}
@media (max-width: 640px) {
  .ticket { grid-template-columns: 1fr 1fr }
  .ticket div { border-right: 0; border-bottom: 1px dashed var(--line); padding: 10px 12px }
  .ticket div:nth-child(odd) { border-right: 1px dashed var(--line) }
  .ticket div:nth-last-child(-n+2) { border-bottom: 0 }
  .ticket dd { font-size: .92rem }
  .day { padding: 16px }
}

/* ===== src/css/pages/notes.css ===== */
/* Week notes: week switcher, one week sheet at a time (label rail + body), the inline SVG
   diagrams (themed through the colour tokens), and the review / next-week footer. */

/* ---------- Week switcher ---------- */
.weeknav { display: flex; flex-wrap: wrap; gap: 6px }
.weeknav a { font-family: var(--mono); font-size: .8rem; text-decoration: none; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--surface) }
.weeknav a.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
.weeknav a.done:not(.on) { border-color: var(--ok); color: var(--ok) }

/* ---------- Week sheet ---------- */
.week { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; padding-block: 10px 0 }
.week .rail { display: grid; gap: 4px; align-content: start }
.week .num { font-family: var(--mono); font-size: 2.4rem; font-weight: 600; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums }
.week .lecs { font-family: var(--mono); font-size: .78rem; color: var(--muted) }
.week .body { display: grid; gap: 14px; min-width: 0 }
.week .body > * { min-width: 0 }
.notes { margin: 0; padding-left: 1.15em; display: grid; gap: 7px; max-width: 80ch }
.notes > li { min-width: 0 }
.notes li::marker { color: var(--muted) }
.notes li.new { list-style: none; margin-left: -1.15em; background: var(--accent-soft); border-radius: 8px; padding: 10px 12px }   /* "Your 2026" box */
.watchbtn { justify-self: start; gap: 8px }
.watchbtn svg { width: 16px; height: 16px }

/* Footer under each week: mark as reviewed + previous / next week */
.weekfoot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding-top: 18px; margin-top: 6px; border-top: 1px dashed var(--line) }
.wkpager { display: flex; gap: 8px; flex-wrap: wrap }
.reviewbtn[aria-pressed="true"] { background: var(--ok-soft); border-color: var(--ok); color: var(--ok) }

/* ---------- Diagrams: inline SVG; classes pick token colours ---------- */
figure.diag { margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 14px 14px 12px; max-width: 820px; display: grid; gap: 8px }
figure.diag .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch }
figure.diag figcaption { font-size: .9rem; color: var(--muted); max-width: 80ch }
figure.diag .hint { display: none; font-family: var(--mono); font-size: .7rem; color: var(--muted); margin: 0 }
.dg { display: block; width: 100%; height: auto; color: var(--muted) }
.dg text { font-family: var(--body); font-size: 13px; fill: var(--ink) }
.dg .t { font-weight: 600 }                                   /* title text */
.dg .k { font-size: 12.5px }                                  /* key text */
.dg .s { font-size: 11.5px; fill: var(--muted) }               /* small text */
.dg .m { font-family: var(--mono); font-size: 11px; fill: var(--muted) }   /* mono note */
.dg .b { fill: var(--surface); stroke: var(--line); stroke-width: 1.3 }     /* plain box */
.dg .h { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.4 } /* highlighted box */
.dg .a { stroke: var(--muted); stroke-width: 1.5; fill: none }               /* arrow line */

@media (max-width: 640px) {
  .week { grid-template-columns: 1fr; gap: 12px }
  .week .rail { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 12px }
  .week .num { font-size: 1.8rem }
  .weeknav { gap: 8px }
  .weeknav a { padding: 8px 11px }
  figure.diag { padding: 10px }
  figure.diag .hint { display: block }
  figure.diag .dg { min-width: 560px }
}

/* ===== src/css/pages/course-map.css ===== */
/* Course map: a poster with one row ("layer") per stage of the course and a vertical axis. */

.poster { margin-top: 34px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 24px; display: grid; gap: 18px; scroll-margin-top: calc(var(--navh, 54px) + 10px) }
.poster-body { display: grid; grid-template-columns: 34px minmax(0, 1fr) 240px; gap: 14px; align-items: stretch }
.axis { display: flex; flex-direction: column; align-items: center; gap: 8px }
.axis span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.axis i { flex: 1; width: 4px; border-radius: 999px; background: linear-gradient(var(--accent), var(--hi)) }
.layers { display: grid; gap: 8px; min-width: 0 }
.layer { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line) }
.layer .ln b { display: block; font-family: var(--display); font-size: 1.08rem; font-weight: 700; line-height: 1.2 }
.layer .ln span { font-size: .8rem; color: var(--muted) }
.lc { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0 }
.pc { display: inline-flex; gap: 7px; align-items: baseline; font-size: .86rem; line-height: 1.35; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); text-decoration: none; min-width: 0 }
.pc i { font-style: normal; font-family: var(--mono); font-size: .72rem; font-weight: 600; color: var(--accent); flex: none }

@media (hover: hover) { .pc:hover { border-color: var(--accent) } }
@media (max-width: 900px) {
  .poster-body { grid-template-columns: minmax(0, 1fr) }
  .axis { display: none }
}
@media (max-width: 640px) {
  .poster { padding: 16px }
  .layer { grid-template-columns: 1fr; gap: 8px }
  .pc { padding: 8px 10px }
}

/* ===== src/css/pages/numericals.css ===== */
/* Numericals: formula cards and the step-by-step worked examples with fold-out workings. */

pre.f { margin: 0; font-family: var(--mono); font-size: .84rem; line-height: 1.55; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow-x: auto; white-space: pre }

/* ---------- Worked examples ---------- */
.wx-head { margin-top: 34px }
.wgroup { display: grid; gap: 10px; margin-top: 22px }
.wgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 14px; align-items: start }
.wx { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; display: grid; gap: 8px; align-content: start; min-width: 0 }
.wx .wmeta { display: flex; align-items: center; gap: 4px }
.wx h4 { margin: 0; font-size: 1.05rem; line-height: 1.3 }
.wx .wq { margin: 0; font-size: .95rem }

/* "Show the working" toggle */
.wsol { min-width: 0 }
.wsol summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-family: var(--mono); font-size: .8rem; color: var(--accent) }
.wsol summary::-webkit-details-marker { display: none }
.wsol summary::before { content: ""; width: 0; height: 0; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s }
.wsol[open] summary::before { transform: rotate(90deg) }

/* Numbered steps, each with its calculation */
.wsteps { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: ws; display: grid; gap: 10px }
.wsteps li { counter-increment: ws; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: .93rem; line-height: 1.45 }
.wsteps li::before { content: counter(ws); width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-family: var(--mono); font-size: .72rem; font-weight: 600; display: grid; place-items: center }
.wsteps li > div { min-width: 0 }
.calc { display: block; margin-top: 5px; font-family: var(--mono); font-size: .84rem; line-height: 1.6; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; overflow-x: auto; white-space: pre }
.wans { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--ok-soft); color: var(--ok); font-weight: 600; font-size: .95rem }
.wtrap { margin: 8px 0 0; font-size: .9rem; color: var(--bad) }

@media (max-width: 640px) { pre.f { font-size: .78rem } }

/* ===== src/css/pages/practice.css ===== */
/* Practice bank (filter toolbar + paging) and the Must-know list (grouped by week). */

.toolbar { display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px }
.qpager { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.qpager:empty { display: none }

/* Must-know groups */
.repgroup { display: grid; gap: 4px }
.repgroup h3 { font-size: 1.05rem; font-family: var(--mono); font-weight: 600; letter-spacing: .02em; color: var(--accent); padding-top: 18px }
.repgroup .qlist { padding-top: 6px }

@media (max-width: 640px) {
  .toolbar { padding: 12px }
  .repgroup h3 { padding-top: 12px }
}

/* ===== src/css/pages/mock-exams.css ===== */
/* Mock exams: paper picker, the sticky exam bar with timer, question palette and the result screen. */

/* ---------- Paper picker ---------- */
.papers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px }
.paper { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; display: grid; gap: 8px; align-content: start }
.paper .src { color: var(--muted); font-size: .93rem }
.paper .best { font-family: var(--mono); font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums }
.paper .best b { color: var(--ink) }
.paper .btn { justify-self: start }
.startrow { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px }

/* ---------- While sitting a paper ---------- */
.exambar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--navh, 54px)); z-index: 15; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between }
.exambar .who { font-family: var(--mono); font-size: .8rem; color: var(--muted) }
.timer { font-family: var(--mono); font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums }
.timer.low { color: var(--bad) }
.exam-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 14px; align-items: start }
.navbtns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between }
.navbtns div { display: flex; flex-wrap: wrap; gap: 8px }

/* Question palette (side panel) */
.side { display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px }
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 5px }
.pal { font: inherit; font-family: var(--mono); font-size: .78rem; height: 34px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums }
.pal.ans { background: var(--accent-soft); border-color: var(--accent) }
.pal.flag { box-shadow: inset 0 -3px 0 var(--hi) }
.pal.cur { outline: 2px solid var(--ink); outline-offset: 1px }
.pal.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok) }
.pal.no { background: var(--bad-soft); border-color: var(--bad); color: var(--bad) }
.pal.rev { background: var(--hi-soft); border-color: var(--hi); color: var(--hi) }
.legend { font-family: var(--mono); font-size: .7rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px }

/* ---------- Result screen ---------- */
.result { display: grid; gap: 18px }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: grid; gap: 2px }
.tile .v { font-family: var(--display); font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums }
.tile .l { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted) }
.pill { display: inline-block; font-family: var(--mono); font-size: .8rem; font-weight: 600; padding: 2px 10px; border-radius: 999px }
.pill.ok { background: var(--ok-soft); color: var(--ok) }
.pill.no { background: var(--bad-soft); color: var(--bad) }

@media (max-width: 820px) { .exam-grid { grid-template-columns: 1fr } }
@media (max-width: 640px) {
  .exambar { padding: 8px 10px; gap: 6px 10px; border-radius: 0; margin-inline: -16px; border-inline: 0 }
  .exambar .name { display: none }
  .exambar .who { font-size: .76rem }
  .timer { font-size: 1.15rem }
  .palette { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px }
  .pal { height: 42px }
  .navbtns .btn { flex: 1 1 auto }
  .navbtns div { flex: 1 1 100% }
  .tile { padding: 12px 14px }
  .tile .v { font-size: 1.55rem }
  .papers .startrow .btn { flex: 1 1 auto }
}

/* ===== src/css/pages/videos.css ===== */
/* Videos: playback-speed bar and one card per week. */

.vbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px }
.vcard { display: grid; gap: 10px; align-content: start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); scroll-margin-top: calc(var(--navh, 0px) + 14px) }
.vcard.focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.vhead { display: flex; align-items: center; gap: 12px }
.vhead > div { flex: 1; min-width: 0 }
.vhead h3 { font-size: 1.08rem; line-height: 1.25 }
.vnum { flex: none; font-family: var(--mono); font-weight: 600; font-size: .85rem; color: var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 6px 8px }
.vmeta { font-family: var(--mono); font-size: .74rem; color: var(--muted) }
.vcard video { display: block; width: 100%; aspect-ratio: 16/9; border-radius: 10px; background: #0e161b }

/* Placeholder for a week whose video isn't published yet */
.vsoon { display: grid; place-items: center; gap: 6px; aspect-ratio: 16/9; border-radius: 10px; border: 1px dashed var(--line); background: var(--bg); color: var(--muted); font-family: var(--mono); font-size: .82rem; text-align: center }
.vsoon svg { width: 26px; height: 26px }

/* ===== src/css/pages/reference.css ===== */
/* Reference pages: the last-minute traps list and the resources / sources list. */

.traps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none }
.traps li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .95rem }
.traps li b { font-weight: 600 }

.src { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; max-width: 85ch }
.src li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: grid; gap: 4px }
.src li span { color: var(--muted); font-size: .93rem }