:root {
  --bg: #f4f4f2;
  --panel: #ffffff;
  --ink: #1d1d20;
  --muted: #6b6b70;
  --line: #e2e2df;
  --accent: #2f5c46;
  --accent-ink: #ffffff;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
  --sidebar-w: 300px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ---------------- Login ---------------- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.5rem; }
.login-card {
  display: flex; width: 100%; max-width: 780px; background: var(--panel);
  border-radius: 14px; overflow: hidden; box-shadow: var(--shadow);
}
.login-card.notfound { display: block; text-align: center; padding: 3rem; max-width: 420px; }
.cover {
  flex: 0 0 46%; background: linear-gradient(150deg, #2f5c46, #234636);
  color: #fff; display: flex; align-items: center; padding: 2.4rem;
}
.cover-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; opacity: .8; margin: 0 0 1rem; }
.cover-title { font-size: 1.55rem; line-height: 1.2; margin: 0 0 .8rem; font-weight: 700; }
.cover-subtitle { font-size: .9rem; opacity: .85; margin: 0; line-height: 1.4; }
.login-panel { flex: 1; padding: 2.6rem 2.2rem; }
.login-panel h2 { margin: 0 0 .3rem; font-size: 1.2rem; }
.login-org { color: var(--muted); margin: 0 0 1.4rem; font-size: .9rem; }
.login-panel input[type=password], .login-panel input[type=text] {
  width: 100%; padding: .8rem .9rem; font-size: 1rem; border: 1px solid var(--line);
  border-radius: 8px; margin-bottom: .9rem; background: #fbfbfa;
}
.login-panel input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.login-panel button {
  width: 100%; padding: .8rem; font-size: 1rem; font-weight: 600; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px;
  transition: filter .15s ease;
}
.login-panel button:hover { filter: brightness(1.08); }
.login-hint { color: var(--muted); font-size: .8rem; margin: 1.2rem 0 0; }
.login-error {
  background: #fdecec; color: #9b2020; border: 1px solid #f4c7c7;
  padding: .6rem .8rem; border-radius: 8px; font-size: .85rem; margin: 0 0 1rem;
}
@media (max-width: 640px) {
  .login-card { flex-direction: column; }
  .cover { flex-basis: auto; padding: 2rem; }
}

/* ---------------- Book viewer ---------------- */
.book-body { height: 100vh; overflow: hidden; }
.viewer { position: relative; display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: 56px 1fr;
  grid-template-areas: "sidebar topbar" "sidebar stage"; height: 100vh; }
.viewer.sidebar-collapsed { grid-template-columns: 0 1fr; }

.topbar { grid-area: topbar; display: flex; align-items: center; gap: .75rem;
  padding: 0 1rem; background: var(--panel); border-bottom: 1px solid var(--line); z-index: 3; }
.topbar .brand { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; margin-right: auto; }
.topbar button, .topbar .iconbtn {
  cursor: pointer; border: 1px solid var(--line); background: #fff; border-radius: 8px;
  height: 40px; min-width: 40px; padding: 0 .8rem; font-size: .9rem; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: background .15s ease, border-color .15s ease;
}
.topbar button:hover:not(:disabled), .topbar .iconbtn:hover { background: #f2f2ef; }
.topbar button:disabled { opacity: .4; cursor: default; }
.pagejump { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); }
.pagejump input { width: 64px; height: 40px; text-align: center; border: 1px solid var(--line);
  border-radius: 8px; font-size: .9rem; }
.pagejump input:focus { outline: 2px solid var(--accent); }

.stage { grid-area: stage; overflow: auto; background: #e9e9e6; display: flex;
  align-items: center; justify-content: center; padding: 1.5rem; }
.spread { display: flex; gap: 12px; align-items: flex-start; }
.spread .leaf {
  background: #fff; box-shadow: var(--shadow);
  min-height: 200px; min-width: 120px; position: relative;
}
.spread .leaf img { display: block; width: 100%; height: 100%; }
.spread .leaf.empty { background: transparent; box-shadow: none; }
.leaf .spinner {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: .8rem;
}

/* Sidebar */
.sidebar { grid-area: sidebar; background: var(--panel); border-right: 1px solid var(--line);
  overflow-y: auto; overflow-x: hidden; }
.viewer.sidebar-collapsed .sidebar { display: none; }
.sidebar-head {
  padding: .75rem .5rem .75rem 1rem; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.sidebar-head h1 { font-size: 1rem; margin: 0; font-weight: 700; }
.sidebar-head .sidebar-close {
  flex: 0 0 auto; height: 40px; width: 40px; min-width: 40px; padding: 0;
  font-size: 1.3rem; line-height: 1; border: 1px solid transparent; background: transparent;
  color: var(--muted); border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.sidebar-head .sidebar-close:hover { background: #eef4f0; color: var(--ink); border-color: var(--line); }
.toc { padding: .5rem 0 2rem; }
.toc .tier > button.tier-head {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: .7rem 1rem; font-weight: 700; font-size: .9rem; color: var(--ink);
  display: flex; align-items: center; gap: .5rem;
}
.toc .tier > button.tier-head:hover { background: #f6f6f4; }
.toc .tier-head .chev { transition: transform .15s ease; font-size: .7rem; color: var(--muted); }
.toc .tier.collapsed .tier-head .chev { transform: rotate(-90deg); }
.toc .tier.collapsed .sections { display: none; }
.toc .tier-page { margin-left: auto; font-size: .72rem; color: var(--muted); font-weight: 500; }
.toc .sections { list-style: none; margin: 0; padding: 0 0 .4rem; }
.toc .sections li { font-size: .82rem; line-height: 1.3; }
.toc .sections a {
  display: flex; gap: .5rem; padding: .4rem 1rem .4rem 1.6rem; color: var(--ink);
  text-decoration: none; align-items: baseline; cursor: pointer;
}
.toc .sections a:hover { background: #eef4f0; }
.toc .sections a.active { background: #e3efe8; font-weight: 600; }
.toc .sections a .sec-page { margin-left: auto; color: var(--muted); font-size: .72rem; }
.toc .sections li.no-page { color: var(--muted); padding: .4rem 1rem .4rem 1.6rem;
  display: flex; gap: .5rem; cursor: default; }
.toc .sections li.no-page .dot { color: #c3c3bf; }

@media (max-width: 900px) {
  .viewer { grid-template-columns: 1fr; grid-template-areas: "topbar" "stage"; }
  .sidebar { position: fixed; top: 56px; bottom: 0; left: 0; width: min(86vw, 340px);
    z-index: 20; box-shadow: var(--shadow); transform: translateX(-105%); transition: transform .2s ease; }
  .viewer.sidebar-open .sidebar { transform: translateX(0); display: block; }
  .scrim { display: none; }
  .viewer.sidebar-open .scrim { display: block; position: fixed; inset: 56px 0 0 0; background: rgba(0,0,0,.3); z-index: 15; }
}

/* ---------------- Toolbar: view mode + zoom groups ---------------- */
.topbar .toolgroup {
  display: inline-flex; align-items: center; gap: .25rem;
  padding-left: .5rem; margin-left: .1rem;
  border-left: 1px solid var(--line);
}
.topbar .toolgroup.viewmode { gap: 0; }
.topbar .iconbtn.seg { border-radius: 0; margin-left: -1px; }
.topbar .toolgroup.viewmode .iconbtn.seg:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.topbar .toolgroup.viewmode .iconbtn.seg:last-child { border-radius: 0 8px 8px 0; }
.topbar .iconbtn.textbtn { font-size: .8rem; padding: 0 .6rem; min-width: 0; }
.topbar .zoomlevel {
  min-width: 46px; text-align: center; font-size: .8rem; color: var(--muted);
  font-variant-numeric: tabular-nums; user-select: none;
}
/* Pressed / active state for toggle buttons (aria-pressed=true). */
.topbar .iconbtn[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.topbar .iconbtn[aria-pressed="true"]:hover { background: var(--accent); filter: brightness(1.05); }

/* ---------------- Stage: zoom & pan ---------------- */
/* K4: centre PER AXIS. .fit-x means the spread fits horizontally (keep it
   horizontally centred); .fit-y means it fits vertically. The stage defaults
   to centred both ways; when an axis overflows we switch THAT axis to start
   alignment so the overflow is reachable by scroll, while the other axis stays
   centred. This fixes "Width then zoom out shrinks to the left": content
   narrower than the viewport keeps .fit-x and stays centred. */
.stage:not(.fit-x) { justify-content: flex-start; }
.stage:not(.fit-y) { align-items: flex-start; }
.stage.grabbing { cursor: grabbing; }
.spread.pannable { cursor: grab; }
.stage.grabbing .spread.pannable { cursor: grabbing; }
/* JS sets an explicit pixel width/height on .spread for zooming; the leaves and
   their images must fill that box so scaling is exact. */
.spread { width: auto; height: auto; flex: 0 0 auto; }
.spread .leaf { flex: 1 1 0; min-width: 0; min-height: 0; }
.spread .leaf img { width: 100%; height: 100%; object-fit: contain; }
.spread .leaf.empty { flex: 1 1 0; }

@media (max-width: 900px) {
  /* Double spread is unavailable on narrow screens; the toggle is hidden by JS.
     Keep the zoom group compact and let native pinch-zoom handle touch. */
  .topbar { gap: .4rem; padding: 0 .6rem; }
  .topbar .brand { font-size: .85rem; }
  .topbar .toolgroup.zoomgroup { padding-left: .35rem; }
  .topbar .iconbtn.textbtn { padding: 0 .45rem; }
}

/* ---------------- Sidebar: front matter, tiers, subpages ---------------- */
/* Chevron rotation handled by textual glyph in JS (▸/▾); keep it muted. */
.toc .tier-head .chev, .toc .fm-head .chev {
  font-size: .7rem; color: var(--muted); width: 1em; display: inline-block; text-align: center;
}
.toc .tier-head .tier-title { flex: 1 1 auto; }

/* Front Matter collapsible group at the very top of the contents list. */
.toc .frontmatter > button.fm-head {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: .7rem 1rem; font-weight: 700; font-size: .9rem; color: var(--ink);
  display: flex; align-items: center; gap: .5rem;
  border-bottom: 1px solid var(--line);
}
.toc .frontmatter > button.fm-head:hover { background: #f6f6f4; }
.toc .frontmatter.collapsed .fm-sections { display: none; }

/* The passive grey page number on a tier header is NOT a link (change 5). */
.toc .tier-page { margin-left: auto; padding-left: .5rem; font-size: .72rem;
  color: var(--muted); font-weight: 500; }

/* First entry inside a tier: "Learning Tier Contents" (change 7). */
.toc .sections li.tier-contents-link a { font-weight: 600; }

/* Exercise subpages (LSQ) — OneNote-subpage feel: indented, smaller, lighter. */
.toc .sections li.subpages { padding: 0; }
.toc .sections ul.subpage-list { list-style: none; margin: 0; padding: 0; }
.toc .sections ul.subpage-list li { font-size: .76rem; }
.toc .sections a.subpage {
  padding: .28rem 1rem .28rem 2.6rem; color: var(--muted);
}
.toc .sections a.subpage:hover { background: #eef4f0; color: var(--ink); }
.toc .sections a.subpage .sec-page { font-size: .68rem; }
.toc .sections li.subpage.no-page {
  color: var(--muted); padding: .28rem 1rem .28rem 2.6rem;
  display: flex; gap: .5rem; cursor: default; font-size: .76rem;
}

/* ---------------- Quiz layer: sidebar launcher, popup, grid, keypad ------ */
/* K3 redesign: the bottom sheet + per-quiz tabs are gone. Quizzes open in a
   centred modal launched from the sidebar "Check Your Answers" group. Grid,
   keypad, maths rendering and marking styles are shared with the old layout. */
:root { --ok: #2f7d46; --no: #b23b3b; }

.toc .sections a.quizlink .sec-page { margin-left: .5rem; }
.toc .sections a.quizlink { color: var(--accent); }
.toc .sections a.quizlink:hover { color: var(--ink); }

/* ---- F1: two plain launcher rows below Learning Tier 5 ("Enter Your Answers"
   and "Answers"). Styled like a tier header (same weight, size, padding) but
   they do NOT collapse — no chevron, no sub-list. ---- */
.toc .answers-launcher .answers-row {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: .7rem 1rem; font-weight: 700; font-size: .9rem; color: var(--ink);
  display: flex; align-items: center; gap: .5rem; text-decoration: none;
  font-family: inherit;
}
.toc .answers-launcher .answers-row:hover { background: #f6f6f4; }
.toc .answers-launcher .answers-title { flex: 1 1 auto; }
.toc .answers-launcher .answers-row .sec-page { margin-left: auto; color: var(--muted); font-size: .72rem; font-weight: 600; }

/* ---- K6: Sign out row, anchored at the sidebar footer ---- */
.sidebar { display: flex; flex-direction: column; }
.sidebar .toc { flex: 1 1 auto; }
.sidebar-foot { margin: 0; border-top: 1px solid var(--line); flex: 0 0 auto; }
.signout-row {
  width: 100%; display: flex; align-items: center; gap: .6rem; cursor: pointer;
  padding: .8rem 1rem; background: none; border: 0; color: var(--ink);
  font-size: .86rem; font-weight: 600; text-align: left;
  transition: background .15s ease;
}
.signout-row:hover { background: #fdecec; color: #9b2020; }
.signout-icon { display: inline-flex; color: var(--muted); }
.signout-row:hover .signout-icon { color: #9b2020; }

/* ---- K3: centred quiz modal ---- */
.quiz-modal { position: fixed; inset: 0; z-index: 40; }
.quiz-modal[hidden] { display: none; }
.quiz-modal-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.quiz-dialog {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 90vw; height: 85vh; max-width: 1400px;
  background: var(--panel); border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,.28);
  display: flex; flex-direction: column;
}
.quiz-dialog-head {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .8rem .6rem 1rem; border-bottom: 1px solid var(--line);
}
/* F3: "Select:" label sits left of the dropdown; the dropdown fits its content
   (roughly the longest option title + chrome) rather than filling the header. */
.quiz-select-wrap { flex: 0 0 auto; min-width: 0; display: flex; align-items: center; gap: .5rem; }
.quiz-select-label { font-size: .82rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.quiz-select {
  width: auto; max-width: 300px; min-width: 200px; padding: .5rem .7rem; font-size: .92rem; font-weight: 600;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer;
}
.quiz-select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.quiz-close {
  width: 40px; height: 40px; min-width: 40px; border: 1px solid transparent;
  background: transparent; color: var(--muted); border-radius: 8px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.quiz-close:hover { background: #eef4f0; color: var(--ink); border-color: var(--line); }

.quiz-dialog-body { flex: 1 1 auto; display: flex; min-height: 0; }

/* Left pane (~55%): the quiz's book page. */
.quiz-page-pane {
  flex: 0 0 55%; max-width: 55%; display: flex; flex-direction: column;
  border-right: 1px solid var(--line); background: #e9e9e6; min-width: 0;
}
.quiz-page-scroll { flex: 1 1 auto; overflow: auto; display: flex; justify-content: center; padding: 1rem; }
.quiz-page-leaf { width: 100%; max-width: 720px; background: #fff; box-shadow: var(--shadow); align-self: flex-start; position: relative; }
.quiz-page-leaf img { display: block; width: 100%; height: auto; }
.quiz-page-missing { padding: 2rem 1.5rem; color: var(--muted); font-size: .85rem; text-align: center; }
.quiz-page-bar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .5rem; border-top: 1px solid var(--line); background: var(--panel);
}
.quiz-page-bar .iconbtn {
  cursor: pointer; border: 1px solid var(--line); background: #fff; border-radius: 8px;
  height: 36px; min-width: 36px; padding: 0 .5rem; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.quiz-page-bar .iconbtn:hover:not(:disabled) { background: #f2f2ef; }
.quiz-page-bar .iconbtn:disabled { opacity: .4; cursor: default; }
.quiz-page-label { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 3.5rem; text-align: center; }

/* Right pane (~45%): questions + keypad + pinned submit. */
.quiz-answer-pane { flex: 1 1 45%; min-width: 0; display: flex; flex-direction: column; }
.quiz-meta { margin: 0; padding: .6rem 1rem 0; font-size: .74rem; color: var(--muted); flex: 0 0 auto; }
.quiz-body { flex: 1 1 auto; overflow-y: auto; padding: .7rem 1rem 1rem; min-height: 0; min-width: 0; }

/* Q6: question grid — one column is fine in the answer pane. */
.quiz-grid {
  display: grid; grid-template-columns: 1fr; gap: .6rem; align-items: start;
}
.quiz-q {
  padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 10px; background: #fbfbfa;
}
.quiz-q-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.quiz-q-num { font-weight: 700; font-size: .84rem; }
.quiz-skip-tag {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .05rem .4rem; border-radius: 999px; color: var(--muted); background: #f0f0ee; border: 1px solid var(--line);
}
.quiz-input {
  width: 100%; padding: .5rem .6rem; font-size: .95rem; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; font-variant-numeric: tabular-nums;
}
.quiz-input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.quiz-input:disabled { background: #f3f3f1; color: var(--ink); }
.quiz-skip-note { margin: 0; font-size: .76rem; color: var(--muted); font-style: italic; }
.quiz-q.skip { opacity: .7; }

/* Multi-part question block: inline labelled parts (a) (b), wrap as needed. */
.quiz-q.multipart .quiz-parts { display: flex; flex-wrap: wrap; gap: .5rem .7rem; }
.quiz-part { display: flex; align-items: center; gap: .35rem; flex: 1 1 44%; min-width: 120px; }
.quiz-part-label { font-weight: 700; font-size: .8rem; color: var(--muted); }
.quiz-input-part { width: auto; flex: 1 1 auto; min-width: 60px; }
.quiz-skip-inline { font-size: .7rem; color: var(--muted); font-style: italic; }
.quiz-part-model, .quiz-part-verdict { font-size: .8rem; }

/* Revealed model answer + verdict (after submit). */
.quiz-model { margin-top: .4rem; font-size: .82rem; background: #f6f6f4; border: 1px solid var(--line);
  border-radius: 8px; padding: .35rem .55rem; }
.quiz-model[hidden], .quiz-part-model[hidden], .quiz-verdict[hidden], .quiz-part-verdict[hidden] { display: none; }
.quiz-model-label { font-weight: 700; }
.quiz-verdict { margin-top: .35rem; font-size: .85rem; }
.quiz-verdict .v-ok, .quiz-part-verdict .v-ok { color: var(--ok); font-weight: 700; }
.quiz-verdict .v-no, .quiz-part-verdict .v-no { color: var(--no); font-weight: 700; }
.quiz-body.marked .quiz-q.right { border-color: #cfe4d6; background: #f2f9f4; }
.quiz-body.marked .quiz-q.wrong { border-color: #f0cccc; background: #fdf3f3; }

/* Self-mark control (revealed on submit, beside the model answer). */
.quiz-selfmark { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); }
.quiz-mark-right, .quiz-mark-wrong {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer;
  background: #fff; font-size: .9rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.quiz-mark-right { color: var(--ok); }
.quiz-mark-wrong { color: var(--no); }
.quiz-q.selfright .quiz-mark-right, .quiz-part.selfright .quiz-mark-right { background: #e6f2ea; border-color: #cfe4d6; }
.quiz-q.selfwrong .quiz-mark-wrong, .quiz-part.selfwrong .quiz-mark-wrong { background: #fbe9e9; border-color: #f0cccc; }

/* Q10: stacked fractions + superscripts (renderMathHtml output). */
.qz-frac { display: inline-flex; flex-direction: column; text-align: center; vertical-align: middle;
  line-height: 1; margin: 0 .1em; }
.qz-frac .qz-num { border-bottom: 1px solid currentColor; padding: 0 .2em .05em; }
.qz-frac .qz-den { padding: .05em .2em 0; }
.qz-mixed { display: inline-flex; align-items: center; gap: .12em; }
.qz-pow sup { font-size: .72em; }

/* F4: Keypad — a NORMAL block at the bottom of the answer-pane column, below the
   scrollable questions area. It never overlays the questions and never clips at
   the right edge: symbols and digits are stacked full-width grids (not two
   side-by-side grids that get squeezed in the ~45% answer pane). box-sizing +
   min-width:0 keep every cell inside the pane at any width. */
.quiz-keypad {
  flex: 0 0 auto; border-top: 1px solid var(--line); background: #f7f7f5;
  box-sizing: border-box; min-width: 0; overflow: hidden;
}
.qkp-inner { display: flex; flex-direction: column; gap: .5rem; padding: .6rem 1rem; box-sizing: border-box; min-width: 0; }
.qkp-preview {
  flex: 0 0 auto; min-height: 1.9rem; font-size: 1.05rem; padding: .3rem .5rem;
  color: var(--ink); display: flex; align-items: center; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; box-sizing: border-box;
}
.qkp-preview.empty::before { content: "Preview"; color: var(--muted); font-size: .8rem; }
/* Column stack: the symbol row (4 wide) sits above the digit grid (3 wide);
   both span the full pane width so the digits 7 8 9 / 4 5 6 / 1 2 3 / 0 . / bksp
   are always fully visible. */
.qkp-keys { display: flex; flex-direction: column; gap: .45rem; align-items: stretch; min-width: 0; }
.qkp-sym { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 40px; gap: .35rem; width: 100%; min-width: 0; }
.qkp-num { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 40px; gap: .35rem; width: 100%; min-width: 0; }
.qkp-key {
  width: 100%; height: 100%; min-width: 0; box-sizing: border-box;
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  font-size: .9rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.qkp-key:hover { background: #eef4f0; border-color: var(--accent); }
.qkp-key:active { background: #e2ede6; }
.qkp-key .qz-frac { font-size: .68rem; }
/* K1: the exponent key hosts the SVG placeholder glyph. */
.qkp-key-exp svg { display: block; }
.qkp-back { color: var(--no); } /* F4: sits in the 0 . bksp row, single cell */

/* Footer: submit (pinned at the bottom of the answer pane) / try-again / result. */
.quiz-foot { flex: 0 0 auto; border-top: 1px solid var(--line); padding: .7rem 1rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.quiz-submit {
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px;
  padding: .6rem 1.1rem; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.quiz-submit[hidden] { display: none; }
.quiz-submit:hover { filter: brightness(1.08); }
.quiz-retake {
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  padding: .6rem 1.1rem; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.quiz-retake[hidden] { display: none; }
.quiz-retake:hover { background: #f2f2ef; }
.quiz-result { font-size: .9rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Narrow: the popup goes near-fullscreen and the two panes stack (page on top,
   answers below), so the whole flow stays usable on a phone. */
@media (max-width: 900px) {
  .quiz-dialog { width: 96vw; height: 92vh; }
  .quiz-dialog-body { flex-direction: column; }
  .quiz-page-pane { flex: 0 0 42%; max-width: 100%; border-right: 0; border-bottom: 1px solid var(--line); }
  .quiz-answer-pane { flex: 1 1 auto; }
  .quiz-part { flex: 1 1 100%; }
}
@media (max-width: 700px) {
  .qkp-sym { grid-template-columns: repeat(4, 1fr); }
  .qkp-num { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------- Member & landing (added 5 Aug 2026 — Booster Course) ---- */
.landing-body { background: var(--bg); }
.landing { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem 3rem; }
.landing-hero {
  background: linear-gradient(150deg, #2f5c46, #234636); color: #fff;
  border-radius: 14px; padding: 2.8rem 2.4rem; box-shadow: var(--shadow);
}
.landing-hero h1 { margin: 0 0 .8rem; font-size: 2rem; line-height: 1.15; }
.landing-tagline { margin: 0 0 1.6rem; font-size: 1.02rem; line-height: 1.55; opacity: .92; max-width: 46rem; }
.landing-cta-row { display: flex; gap: .8rem; flex-wrap: wrap; margin: 0; align-items: center; }
.btn-primary {
  display: inline-block; background: #fff; color: var(--accent);
  border-radius: 10px; padding: .75rem 1.3rem; font-weight: 700;
  text-decoration: none; font-size: .95rem; border: 0; cursor: pointer;
}
.landing-what .btn-primary, .member-card .btn-primary {
  background: var(--accent); color: var(--accent-ink);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-quiet { color: #fff; opacity: .85; text-decoration: underline; font-size: .9rem; }
.landing-what {
  background: var(--panel); border-radius: 14px; box-shadow: var(--shadow);
  padding: 2rem 2.4rem; margin-top: 1.4rem;
}
.landing-what h2 { font-size: 1.1rem; margin: 1.4rem 0 .6rem; }
.landing-what h2:first-child { margin-top: 0; }
.landing-what ul { margin: 0; padding-left: 1.2rem; }
.landing-what li { margin: .45rem 0; line-height: 1.5; font-size: .95rem; }
.landing-anchor {
  margin: 1.6rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line);
  font-weight: 600; color: var(--accent);
}
.landing-foot { text-align: center; margin-top: 1.6rem; font-size: .85rem; color: var(--muted); }
.landing-foot a { color: var(--muted); }

.member-card { display: block; max-width: 480px; }
.member-card .login-panel { padding: 2.2rem 2.2rem; }
.member-card label { display: block; font-size: .82rem; color: var(--muted); margin: .8rem 0 .25rem; }
.member-card input[type=email], .member-card input[type=text], .member-card input[type=password] {
  width: 100%; padding: .65rem .75rem; font-size: 1rem;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
.member-card input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.member-card form button[type=submit] { margin-top: 1.1rem; }
.member-status { line-height: 1.5; }
.member-notice {
  background: #fff8e6; border: 1px solid #eadfb8; color: #6b5b1f;
  padding: .6rem .8rem; border-radius: 8px; font-size: .88rem; line-height: 1.45;
}
.btn-quiet-btn {
  background: none; border: 1px solid var(--line); border-radius: 8px;
  padding: .55rem 1rem; font-size: .85rem; color: var(--muted); cursor: pointer;
}
.btn-quiet-btn:hover { border-color: var(--accent); color: var(--accent); }
.member-signout { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.info-card { max-width: 640px; }
.info-panel h2 { margin-top: 0; }
.info-panel p { line-height: 1.6; font-size: .95rem; }

/* ---------------- Guided course (members, added 5 Aug 2026) ---------------- */
.course-body { background: var(--bg); }
.course-wrap { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem 3rem; }
.course-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.course-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--muted); margin: 0 0 .4rem; font-weight: 700; }
.course-kicker a { color: var(--muted); text-decoration: none; }
.course-kicker a:hover { color: var(--ink); }
.course-head h1 { margin: 0 0 .4rem; font-size: 1.9rem; }
.course-sub { margin: 0; color: var(--muted); line-height: 1.5; }
.course-links { display: flex; gap: 1rem; font-size: .88rem; padding-top: .4rem; white-space: nowrap; }
.course-links a { color: var(--muted); }
.course-links a:hover { color: var(--accent); }
.continue-row { margin: 1.4rem 0 1.8rem; }
.continue-row .btn-primary {
  display: inline-block; background: var(--accent); color: #fff; border-radius: 999px;
  padding: .85rem 1.6rem; font-weight: 700; font-size: 1.05rem; text-decoration: none;
}
.continue-row .btn-primary:hover { filter: brightness(1.08); }

.tier-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tier-card {
  position: relative; display: flex; flex-direction: column; gap: .35rem;
  background: var(--panel); border-radius: 16px; padding: 1.2rem 1.2rem 1.1rem 1.45rem;
  box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease; overflow: hidden;
}
.tier-card:hover { transform: translateY(-2px); }
.tier-band { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--tier); }
.tier-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tier); }
.tier-title { font-size: 1.12rem; font-weight: 700; line-height: 1.3; }
.tier-progress { font-size: .82rem; color: var(--muted); }
.tier-progress.tier-complete { color: var(--accent); font-weight: 700; }

.tier-head h1 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tier-chip {
  background: var(--tier); color: #fff; font-size: .8rem; font-weight: 700;
  border-radius: 999px; padding: .3rem .8rem; letter-spacing: .04em;
}
.step-list { margin-top: 1.4rem; display: flex; flex-direction: column; gap: .55rem; }
.step-row {
  display: flex; align-items: center; gap: .9rem; background: var(--panel);
  border-radius: 12px; padding: .8rem 1rem; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow);
}
.step-row:hover { outline: 2px solid var(--accent); }
.step-tick {
  width: 26px; height: 26px; border-radius: 999px; border: 2px solid var(--line);
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  font-size: .9rem; color: #fff;
}
.step-done .step-tick { background: var(--accent); border-color: var(--accent); }
.step-done .step-tick::after { content: "\2713"; }
.step-done .step-name { color: var(--muted); }
.step-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.step-name { font-weight: 600; line-height: 1.35; }
.step-meta { font-size: .78rem; color: var(--muted); }
.step-dot { width: 12px; height: 12px; border-radius: 999px; margin-left: auto; flex: 0 0 auto; }
.step-dot-green { background: #5AA32C; }
.step-dot-orange { background: #E07E14; }
.step-dot-yellow { background: #E4C51B; }

/* Course-mode reader sidebar */
.course-side .course-side-head { display: flex; align-items: center; justify-content: space-between; }
.course-back { font-weight: 700; color: var(--tier, var(--accent)); text-decoration: none; font-size: .95rem; }
.course-back:hover { text-decoration: underline; }
.course-side-body { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .65rem; overflow-y: auto; }
.course-side-kind { margin: 0; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 700; color: var(--tier, var(--accent)); }
.course-side-title { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.course-side-pages { margin: 0 0 .4rem; color: var(--muted); font-size: .85rem; }
.course-quiz-zone { display: flex; flex-direction: column; gap: .5rem; }
.course-quiz-btn {
  background: var(--tier, var(--accent)); color: #fff; border: 0; border-radius: 999px;
  padding: .8rem 1rem; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.course-quiz-btn:hover { filter: brightness(1.08); }
.course-done-btn {
  background: none; border: 2px solid var(--tier, var(--accent)); color: var(--tier, var(--accent));
  border-radius: 999px; padding: .7rem 1rem; font-size: .95rem; font-weight: 700; cursor: pointer;
}
.course-done-btn:hover { background: var(--tier, var(--accent)); color: #fff; }
.course-side-nav { display: flex; justify-content: space-between; font-size: .85rem; margin-top: .3rem; }
.course-side-nav a { color: var(--muted); text-decoration: none; }
.course-side-nav a:hover { color: var(--ink); }
.course-side-links { font-size: .8rem; color: var(--muted); margin: .4rem 0 0; }
.course-side-links a { color: var(--muted); }

/* Tier colour classes (inline styles are blocked by CSP). */
.tier-c1 { --tier: #2E9FD0; }
.tier-c2 { --tier: #5AA32C; }
.tier-c3 { --tier: #E07E14; }
.tier-c4 { --tier: #C99B06; }
.tier-c5 { --tier: #2F5C46; }

/* Dashboard v2 (Kamran's three-row structure, 5 Aug 2026) */
.course-section-title { font-size: 1.15rem; margin: 2rem 0 .9rem; }
.course-section-title:first-of-type { margin-top: 1.2rem; }
.btn-continue { font-size: .95rem; padding: .7rem 1.3rem; }
.continue-row[hidden] { display: none; }

/* Scoped sidebar (tile-filtered reader) */
.tier-call { --tier: #1d1d20; }
.scoped-head { display: flex; align-items: center; justify-content: space-between; }
.scoped-toc { padding: 1rem 1rem 1.4rem; overflow-y: auto; }
.scoped-tier { margin: 0 0 .45rem; }
.scoped-title { margin: 0 0 .2rem; font-size: 1.15rem; line-height: 1.3; }
.scoped-mode { margin: 0 0 .8rem; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tier, var(--accent)); }
.scoped-list { list-style: none; margin: 0; padding: 0; }
.scoped-list .tocrow a { display: flex; justify-content: space-between; gap: .6rem; padding: .55rem .4rem; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: .95rem; line-height: 1.35; cursor: pointer; }
.scoped-list .tocrow a:hover { background: var(--muted); }
.scoped-list .sec-page { color: var(--muted-foreground, #6b6b70); font-size: .8rem; white-space: nowrap; }

/* All-tiers scoped sidebar: colour-coded tier headings */
.scoped-heading {
  margin: 1.1rem 0 .3rem; padding: 0 .4rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tier, var(--muted-foreground, #6b6b70));
}
.scoped-heading:first-child { margin-top: 0; }
.scoped-side.tier-call .scoped-title { font-size: 1.05rem; }