:root {
  --bg: #f3f5f8; --surface: #ffffff; --ink: #17212b; --muted: #58677a; --line: #d9dfe7;
  --accent: #2b4c9b; --accent-ink: #ffffff; --ok: #2e7d5b; --ok-bg: #e5f3ec; --bad: #b23b3b; --bad-bg: #f8e6e6;
  --flag: #c3861a; --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #11171e; --surface: #19212b; --ink: #e5eaf0; --muted: #9aa8b8; --line: #2c3743;
    --accent: #8ea8ec; --accent-ink: #0f1622; --ok: #6cc59b; --ok-bg: #16302a; --bad: #ef8a8a; --bad-bg: #3a1f22; --flag: #e5ae4b; }
}
*, *::before, *::after { box-sizing: inherit; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 17px/1.5 var(--sans); -webkit-text-size-adjust: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }

header#top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; padding: .7rem 1.1rem; background: var(--bg); border-bottom: 1px solid var(--line); }
.brand { background: none; border: 0; padding: 0; cursor: pointer; font: 600 1.15rem/1 var(--serif); letter-spacing: .01em; }
#usernav { display: flex; gap: .9rem; align-items: center; color: var(--muted); font-size: .92rem; }
.link { background: none; border: 0; padding: .2rem 0; color: var(--accent); cursor: pointer; }
.primary { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; padding: .65rem 1.1rem; cursor: pointer; font-weight: 700; }
.quiet { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .9rem; cursor: pointer; }
.quiet[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.quiet:disabled, .primary:disabled { opacity: .45; cursor: default; }

main { max-width: 46rem; margin: 0 auto; padding: 1.25rem 1.1rem 7rem; }
h1 { font: 600 1.7rem/1.2 var(--serif); margin: .4rem 0 1rem; }
h2 { font: 600 1.2rem/1.3 var(--serif); margin: 1.8rem 0 .6rem; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

/* sign-in */
.signin { max-width: 22rem; margin: 12vh auto 0; }
.signin h1 { font-size: 2.3rem; margin-bottom: .2rem; }
.field { display: grid; gap: .3rem; margin: 1rem 0; }
.field input, textarea, select { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .65rem .75rem; width: 100%; }
.err { color: var(--bad); min-height: 1.5em; }

/* home */
.search { display: flex; gap: .5rem; margin-bottom: .6rem; }
.search input { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .7rem .8rem; }
.statline { color: var(--muted); font-size: .95rem; margin: 0 0 1rem; }
.decks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.deck { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; padding: .8rem .2rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.deck:hover .deck-name { color: var(--accent); }
.deck-name { font-weight: 700; }
.deck-meta { color: var(--muted); font-size: .9rem; text-align: right; white-space: nowrap; }
.bar { grid-column: 1 / -1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; }
.bar .b-ok { background: var(--ok); } .bar .b-bad { background: var(--bad); opacity: .6; }
.modes { display: flex; gap: .4rem; flex-wrap: wrap; margin: .4rem 0 1rem; }
.modes .quiet { padding: .35rem .75rem; font-size: .92rem; }

/* card */
.cardhead { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; color: var(--muted); font-size: .92rem; margin-bottom: .6rem; }
.stem { font: 400 1.18rem/1.6 var(--serif); margin: 0 0 1.2rem; }
.stem p:first-child { margin-top: 0; }
.opts { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.opt { display: grid; grid-template-columns: 2.4rem 1fr; align-items: start; width: 100%; text-align: left; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: .75rem .9rem .75rem 0; cursor: pointer; line-height: 1.45; }
.opt .L { font: 600 1.05rem/1.4 var(--serif); text-align: center; color: var(--muted); }
.opt:hover:not(:disabled) { border-color: var(--accent); }
.opt:disabled { cursor: default; }
.opt.is-key { border-color: var(--ok); background: var(--ok-bg); box-shadow: inset 4px 0 0 var(--ok); }
.opt.is-key .L { color: var(--ok); }
.opt.is-wrong { border-color: var(--bad); background: var(--bad-bg); box-shadow: inset 4px 0 0 var(--bad); }
.opt.is-wrong .L { color: var(--bad); }
.verdict { margin: 1.1rem 0 .4rem; font-weight: 700; }
.verdict.ok { color: var(--ok); } .verdict.bad { color: var(--bad); }
.expl { font: 400 1.02rem/1.65 var(--serif); border-top: 1px solid var(--line); margin-top: .8rem; padding-top: .6rem; overflow-wrap: anywhere; }
.expl table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; font: .92rem/1.4 var(--sans); }
.expl td, .expl th { border: 1px solid var(--line); padding: .35rem .5rem; vertical-align: top; }
.note { margin-top: 1.2rem; }
.note textarea { min-height: 4.5rem; }
.flagged { color: var(--flag); }

.actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; background: var(--bg); border-top: 1px solid var(--line);
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px)); }
.actions-in { max-width: 46rem; margin: 0 auto; display: flex; gap: .5rem; justify-content: space-between; }
.actions .mid { display: flex; gap: .5rem; }
@media (max-width: 480px) {
  .actions-in, .actions .mid { gap: .3rem; }
  .actions .quiet { padding: .55rem .6rem; font-size: .95rem; }
  .modes { flex-wrap: nowrap; overflow-x: auto; margin-right: -1.1rem; padding-right: 1.1rem; }
  .modes .quiet { white-space: nowrap; }
}

/* ask sheet */
.sheet { position: fixed; z-index: 10; right: 0; top: 0; bottom: 0; width: min(28rem, 100%); background: var(--surface); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (max-width: 700px) { .sheet { top: auto; height: 82%; width: 100%; border-left: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.thread { flex: 1; overflow-y: auto; padding: .8rem 1rem; }
.msg-q { font-weight: 700; margin: 1rem 0 .3rem; }
.msg-a { font: 1rem/1.6 var(--serif); white-space: pre-wrap; }
.msg-label { font-size: .85rem; color: var(--muted); margin: .4rem 0; }
.msg-label.warn { color: var(--flag); }
.cite-none { opacity: .45; cursor: default; }
.cite { display: inline-block; min-width: 1.4em; text-align: center; font: 700 .75rem/1.4 var(--sans); color: var(--accent); border: 1px solid var(--line); border-radius: 4px; padding: 0 .2rem; margin: 0 .1rem; cursor: pointer; background: none; }
.passages { margin: .5rem 0 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.passage { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .65rem; font-size: .9rem; }
.passage summary { cursor: pointer; color: var(--muted); }
.passage.hl { border-color: var(--accent); }
.passage p { white-space: pre-wrap; margin: .4rem 0 0; }
.passage .open { display: inline-block; margin-top: .35rem; color: var(--accent); font-weight: 700; font-size: .9rem; text-decoration: none; }
.passage .open:hover { text-decoration: underline; }
.ask-form { border-top: 1px solid var(--line); padding: .7rem 1rem; display: grid; gap: .5rem; }
.ask-src { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.ask-src .grow { flex: 1; }
.ask-row { display: flex; gap: .5rem; }
.ask-row .primary { flex: 1; }
#mic[aria-pressed="true"] { border-color: var(--bad); color: var(--bad); }
.ask-src .quiet { padding: .3rem .7rem; font-size: .9rem; }

#toast { position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: .5rem .9rem;
  border-radius: 8px; font-size: .92rem; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 20; }
#toast.on { opacity: 1; }
.spinner { color: var(--muted); font-style: italic; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* citation preview */
.preview { position: fixed; z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.22); display: flex; flex-direction: column; overflow: hidden; }
.preview.pv-sheet { left: 0; right: 0; bottom: 0; max-height: 78%; border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
.pv-head { padding: .7rem .9rem .4rem; display: grid; gap: .15rem; }
.pv-body { overflow: auto; padding: 0 .9rem; flex: 1; }
.pv-thumb { display: block; width: 100%; max-height: 340px; overflow: auto; padding: 0; margin: 0 0 .5rem; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; cursor: zoom-in; position: relative; text-align: left; }
.pv-page { position: relative; margin: 0 auto; }
.pv-page canvas { display: block; width: 100%; height: 100%; }
.pv-quote { font: .92rem/1.5 var(--serif); color: var(--muted); border-left: 3px solid var(--flag); padding-left: .6rem; margin: .2rem 0 .7rem; }
.pv-acts { display: flex; gap: .5rem; padding: .6rem .9rem .8rem; border-top: 1px solid var(--line); }
.pv-acts .primary { flex: 1; }
.textLayer { position: absolute; inset: 0; overflow: clip; line-height: 1; text-size-adjust: none; transform-origin: 0 0; z-index: 0; }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; transform-origin: 0% 0%; }
.textLayer span.markedContent { top: 0; height: 0; }
.textLayer .endOfContent { display: none; }
.textLayer span.hl { background: rgb(255 200 0 / .45); border-radius: 2px; }

/* ================= Themes (2026-09-24): Paper (day), Graphite (night), Supreme Epic =================
   Automatic = Paper or Graphite from the device's light/dark setting; Account → Theme overrides per device
   (html[data-theme]). Everything above is the original layout; this block only restyles it. */
:root, html[data-theme="paper"] {
  --bg: #F4EEE3; --surface: #FBF8F2; --surface2: #EDE5D6; --line: #D8CDB9; --ink: #2A241D; --muted: #5E5446; --dim: #8A7E6C;
  --accent: #8C2F39; --accent-ink: #FBF8F2; --ok: #3F6B3A; --ok-bg: #E4EBD8; --bad: #A33B2B; --bad-bg: #F3DDD5; --flag: #A8741A;
  --expl: #3A3229; --hl: rgb(255 200 0 / .45);
  --serif: 'Literata', Georgia, serif; --sans: 'Literata', Georgia, serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --caps: none; --track: .02em; color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme]) {
  --bg: #0E0F11; --surface: #17191C; --surface2: #202328; --line: #2C3036; --ink: #ECEEF1; --muted: #A0A6AF; --dim: #6B727C;
  --accent: #4F8CFF; --accent-ink: #08101F; --ok: #3DBE8B; --ok-bg: #10261E; --bad: #F2706A; --bad-bg: #2D1614; --flag: #E5AE4B;
  --expl: #CDD2D9; --serif: 'Inter', system-ui, sans-serif; --sans: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  --caps: none; --track: .02em; color-scheme: dark; } }
html[data-theme="graphite"] {
  --bg: #0E0F11; --surface: #17191C; --surface2: #202328; --line: #2C3036; --ink: #ECEEF1; --muted: #A0A6AF; --dim: #6B727C;
  --accent: #4F8CFF; --accent-ink: #08101F; --ok: #3DBE8B; --ok-bg: #10261E; --bad: #F2706A; --bad-bg: #2D1614; --flag: #E5AE4B;
  --expl: #CDD2D9; --serif: 'Inter', system-ui, sans-serif; --sans: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  --caps: none; --track: .02em; color-scheme: dark;
}
html[data-theme="epic"] {
  --bg: #121924; --surface: #1A2432; --surface2: #22303F; --line: #2E3E50; --ink: #E7ECF3; --muted: #8FA0B4; --dim: #63758A;
  --accent: #C9A227; --accent-ink: #171207; --ok: #5FA88A; --ok-bg: #16302A; --bad: #C4645F; --bad-bg: #33201F; --flag: #D9B23A;
  --expl: #D5DDE7; --serif: 'Newsreader', Georgia, serif; --sans: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --caps: uppercase; --track: .09em; color-scheme: dark;
}
body { font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--accent); }

/* header */
header#top { max-width: 780px; margin: 0 auto; padding: 24px 20px 14px; background: var(--bg); }
.brand { font: 500 23px/1.2 var(--serif); color: var(--ink); letter-spacing: 0; }
.brand em { font-style: italic; color: var(--accent); }
#usernav { font: 11px var(--mono); letter-spacing: var(--track); text-transform: var(--caps); color: var(--dim); gap: 8px; }
#usernav .link { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--muted);
  border: 1px solid var(--line); border-radius: 100px; padding: 6px 14px; }
#usernav .link:hover { color: var(--ink); border-color: var(--dim); }
main { max-width: 780px; padding: 18px 20px 130px; }
h1 { font: 500 23px/1.3 var(--serif); }
h2 { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: 26px 0 12px; }
.muted { color: var(--muted); }

/* buttons: chips and accent primary */
.quiet { font: 11px var(--mono); letter-spacing: var(--track); text-transform: var(--caps); background: none; color: var(--muted);
  border: 1px solid var(--line); border-radius: 100px; padding: 6px 13px; transition: .15s; }
.quiet:hover:not(:disabled) { border-color: var(--dim); color: var(--ink); }
.quiet[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.primary { font: 600 12px var(--mono); letter-spacing: var(--track); text-transform: var(--caps); background: var(--accent);
  color: var(--accent-ink); border-radius: 9px; padding: 13px 18px; }
.link { color: var(--accent); }

/* inputs */
.field { font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.field input, textarea, select, .search input { background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; font: 15px var(--sans); letter-spacing: 0; text-transform: none; }
.field input:focus, textarea:focus, .search input:focus { outline: none; border-color: var(--accent); }
::placeholder { color: var(--dim); }

/* sign-in */
.signin h1 { font: 500 34px/1.2 var(--serif); }
.signin .primary { width: 100%; }

/* home: stats line + deck cards */
.statline { font: 12px var(--mono); color: var(--muted); }
.decks { border-top: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.deck { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 14px 15px;
  grid-template-columns: 1fr auto; gap: 8px; transition: .15s; }
.deck:hover { border-color: var(--dim); background: var(--surface2); }
.deck:hover .deck-name { color: var(--ink); }
.deck-name { font: 500 15px/1.3 var(--sans); }
.deck-meta { font: 11px var(--mono); color: var(--dim); }
.bar { height: 3px; background: var(--surface2); }
.bar .b-bad { opacity: 1; }
@media (max-width: 600px) { .decks { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } main, header#top { padding-left: 15px; padding-right: 15px; } }

/* question card */
.cardhead { font: 12px var(--mono); color: var(--dim); }
.cardhead > span:first-child { color: var(--accent); letter-spacing: .06em; }
.stem { font: 400 20px/1.55 var(--serif); margin-bottom: 22px; }
.opts { gap: 9px; }
.opt { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 13px 15px 13px 0;
  font: 16px/1.45 var(--sans); color: var(--ink); transition: .15s; grid-template-columns: 2.4rem 1fr; }
.opt .L { font: 12px/1.9 var(--mono); color: var(--dim); }
.opt:hover:not(:disabled) { border-color: var(--dim); background: var(--surface2); }
.opt.is-key { border-color: var(--ok); background: var(--ok-bg); box-shadow: none; }
.opt.is-wrong { border-color: var(--bad); background: var(--bad-bg); box-shadow: none; }
.verdict { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin: 24px 0 12px; }
.expl { font: 16px/1.7 var(--serif); color: var(--expl); border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; }
.expl b, .expl strong { color: var(--ink); font-weight: 600; }
.expl table { font: 14px/1.4 var(--sans); }
.flagged { color: var(--flag); }

/* bottom bar: fades into the page, Next is the accent button */
.actions { background: linear-gradient(to top, var(--bg) 68%, transparent); border-top: 0; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); }
.actions-in { max-width: 780px; gap: 10px; }
.actions #prev, .actions #next { flex: 1; background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 9px;
  padding: 13px; font: 12px var(--mono); letter-spacing: var(--track); text-transform: var(--caps); }
.actions #next { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; flex: 2; }
.actions #prev:disabled, .actions #next:disabled { opacity: .3; }
.actions .mid { align-items: center; }
@media (max-width: 480px) { .actions #prev, .actions #next { padding: 13px 8px; } .actions .mid .quiet { padding: 6px 9px; font-size: 10.5px; } }

/* ask sheet, citations, previews */
.sheet, .preview { background: var(--surface); border-color: var(--line); }
.sheet-head { font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.msg-q { font: 500 15px var(--sans); color: var(--muted); }
.msg-a { font: 16px/1.6 var(--serif); }
.msg-label { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.cite { color: var(--accent); border-color: var(--line); font-family: var(--mono); }
.passage { background: var(--bg); border-color: var(--line); }
.passage.hl { border-color: var(--accent); }
.passage .open { color: var(--accent); }
.pv-quote { border-left-color: var(--accent); }
#toast { background: var(--ink); color: var(--bg); border: 0; font: 12px var(--mono); }
/* ================= Home grouping · Today · Progress · Mock exam (2026-09-24) ================= */
/* Today card */
.today { margin: 0 0 18px; }
.today-go { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; padding: 16px 18px; color: var(--ink); }
.today-go:hover:not(:disabled) { background: var(--surface2); }
.today-go:disabled { opacity: .6; cursor: default; border-color: var(--line); }
.today-title { font: 500 18px/1.3 var(--serif); color: var(--accent); }
.today-title::before { content: "▶ "; font-size: .8em; }
.today-sub { font: 12px/1.5 var(--mono); color: var(--muted); }
.today-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.bud { font: 11px var(--mono); color: var(--muted); display: flex; gap: 6px; align-items: center; }
.bud select, .prow select, .prow input { width: auto; padding: 5px 9px; border-radius: 100px; font: 12px var(--mono); }
/* grouped deck sections */
.grp { margin: 0 0 14px; border-top: 1px solid var(--line); }
.grp > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  flex-wrap: wrap; padding: 14px 2px 10px; }
.grp > summary::-webkit-details-marker { display: none; }
.grp > summary::before { content: "▸"; color: var(--dim); margin-right: -4px; transition: transform .15s; display: inline-block; }
.grp[open] > summary::before { transform: rotate(90deg); }
.grp-name { font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); flex: 1; }
.grp-meta { font: 11px var(--mono); color: var(--dim); }
.grp-meta b { color: var(--accent); font-weight: 600; }
.grp.more .grp { border-top: 0; margin-left: 10px; }
.grp .decks { padding-bottom: 6px; }
.deck { grid-template-columns: 1fr auto; }
.deck-tags { display: flex; gap: 4px; justify-content: flex-end; align-items: flex-start; }
.tag { font: 600 10px var(--mono); border-radius: 100px; padding: 2px 7px; white-space: nowrap; }
.tag.due { background: var(--accent); color: var(--accent-ink); }
.tag.flag { border: 1px solid var(--flag); color: var(--flag); }
.deck-meta.r { text-align: right; }
.statline .link { font: inherit; padding: 0; }
/* confidence chips + schedule note */
.kchips { display: flex; gap: 6px; align-items: center; margin: -8px 0 14px; }
.klab { font: 11px var(--mono); color: var(--dim); margin-right: 2px; }
.schednote { font: 11px var(--mono); color: var(--dim); margin: -6px 0 0; }
/* dashboard */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 6px 0; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 14px 15px; }
.tv { font: 400 30px/1.1 var(--serif); color: var(--ink); }
.tv small { font-size: 14px; color: var(--muted); margin-left: 2px; }
.tl { font: 11px/1.4 var(--mono); color: var(--dim); margin-top: 6px; }
.tl b { color: var(--accent); font-weight: 500; }
.dcard { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 14px 15px; }
.prow { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font: 12px var(--mono); color: var(--muted); }
.prow label { display: flex; gap: 8px; align-items: center; }
.prow-note { font: 12px/1.6 var(--mono); color: var(--muted); margin: 12px 0 0; }
.prow-note b { color: var(--ink); }
.okt { color: var(--ok); } .not { color: var(--bad); }
/* This week's plan (25 Oct 2026): the Home card, the "from your week plan" line, and the planner */
.wk-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; padding: 16px 18px; border-radius: 14px;
  background: var(--accent); color: #fff; }
.wk-card > div { flex: 1 1 260px; display: flex; flex-direction: column; gap: 3px; }
.wk-card b { font: 600 19px/1.2 var(--display, var(--serif)); }
.wk-card span { font-size: 13px; opacity: .92; }
.wk-card .primary { background: #fff; color: var(--accent); border-color: #fff; }
.wk-from { font-size: 12px; color: var(--muted); margin-left: 8px; }
.wp h2 { font-size: 16px; margin: 0 0 4px; }
.wp-sec { margin-top: 14px; }
.wp-add { display: inline-flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 13px; color: var(--muted); }
.wp-short { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 10px; }
.wp-scroll { overflow-x: auto; }
.wp-t { width: 100%; min-width: 700px; border-collapse: separate; border-spacing: 5px; font-size: 14px; }
.wp-t th { font-weight: 600; text-align: center; }
.wp-t th small, .wp-t td small { display: block; font-size: 11px; font-weight: 400; color: var(--dim); }
.wp-t tbody th { text-align: left; font-weight: 500; color: var(--muted); white-space: nowrap; }
.wp-t th.wp-today { color: var(--accent); }
.wp-t th.wp-past { opacity: .6; }
.wp-t select, .wp-n { width: 100%; min-height: 38px; box-sizing: border-box; text-align: center; font: inherit; }
.wp-t td { text-align: center; }
.wp-off { color: var(--dim); background: color-mix(in srgb, var(--line) 35%, transparent); border-radius: 8px; }
.wp-tot td { background: color-mix(in srgb, var(--line) 45%, transparent); border-radius: 8px; padding: 6px 2px; }
.wp-sum { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.wp-sum > div { flex: 1 1 300px; display: flex; flex-direction: column; gap: 2px; }
.wp-sum b { font: 600 18px/1.25 var(--display, var(--serif)); }
.wp-rem { display: flex; gap: 8px; align-items: center; min-height: 44px; font-size: 14px; }
.wp-rem input { width: 18px; height: 18px; accent-color: var(--accent); }
/* Learning modules + Reference tabs (25 Oct 2026) */
.lm-tile { cursor: default; }
.lm-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.btn-s { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; text-decoration: none; color: var(--ink); background: var(--surface); }
.btn-s:hover { border-color: var(--accent); color: var(--accent); }
.wn-tabs { margin: 8px 0 14px; }
.wp .ptabs, .wn-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.wp .ptab, .wn-tabs .ptab { min-height: 36px; padding: 0 14px; font-size: 12px; }
/* mock exam setup: where the questions come from, and the deck picker (25 Oct 2026) */
h3.msh { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin: 16px 0 8px; }
.msrcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 14px; }
.msrc { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; min-height: 44px; box-sizing: border-box; }
.msrc:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.msrc input { margin-top: 3px; accent-color: var(--accent); }
.msrc b { display: block; }
.msrc small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
#mdecks { margin-bottom: 14px; }
.mdg { border: 1px solid var(--line); border-radius: 10px; margin-top: 8px; }
.mdg summary { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 40px; cursor: pointer; }
.mdg summary .muted { margin-left: auto; }
.mdall { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.mdl { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 14px; padding: 4px 12px 10px; max-height: 300px; overflow-y: auto; }
.mdl label { display: flex; gap: 8px; align-items: center; min-height: 34px; font-size: 14px; }
.mdl input, .mdall input { accent-color: var(--accent); }
.fc { display: flex; gap: 3px; align-items: flex-end; height: 54px; margin-top: 14px; }
.fcb { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; }
.fcf { background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; }
.fcb span { position: absolute; bottom: -15px; left: 0; font: 10px var(--mono); color: var(--dim); }
.fcl { font: 11px/1.5 var(--mono); color: var(--dim); margin: 18px 0 0; }
.dcard > .fcl:first-child { margin-top: 0; }
h3.sub { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin: 16px 0 6px; }
.topics { padding: 4px 0; }
.trow { display: grid; grid-template-columns: 1fr 90px 56px; gap: 2px 12px; align-items: center; width: 100%; background: none; border: 0;
  border-bottom: 1px solid var(--line); padding: 10px 15px; color: var(--ink); text-align: left; cursor: pointer; font-family: var(--sans); }
.trow:last-child { border-bottom: 0; }
.trow:hover { background: var(--surface2); }
.trow .tn { font-size: 15px; font-weight: 500; grid-column: 1; grid-row: 1; }
.trow .spark { grid-column: 2; grid-row: 1 / 5; align-self: center; }
.spark path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; } .spark circle { fill: var(--accent); }
.trow .tp { font: 15px var(--mono); text-align: right; grid-column: 3; grid-row: 1 / 5; }
.tp.bad { color: var(--bad); } .tp.good { color: var(--ok); } .tp.dim { color: var(--dim); }
.trow .tm, .tm { font: 11px var(--mono); color: var(--dim); grid-column: 1; }
.tcov { grid-column: 1; height: 3px; background: var(--surface2); border-radius: 2px; overflow: hidden; display: block; margin-top: 3px; }
.tcov span { display: block; height: 100%; background: var(--dim); }
.cbar { display: grid; grid-template-columns: 170px 1fr 120px; gap: 10px; align-items: center; margin: 8px 0; font: 12px var(--mono); color: var(--muted); }
.cbar small { color: var(--dim); }
.cb { height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; }
.cf { display: block; height: 100%; background: var(--ok); border-radius: 4px; } .cf.warn { background: var(--bad); }
.cv { color: var(--ink); text-align: right; }
.heat { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: column; grid-template-rows: repeat(7, 11px); gap: 3px; }
.hd { display: block; width: 100%; height: 11px; border-radius: 2px; background: var(--accent); }
.mrow { display: flex; gap: 14px; align-items: baseline; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 8px 0; cursor: pointer; font: 12px var(--mono); color: var(--muted); text-align: left; }
.mrow b { color: var(--ink); font-size: 15px; }
.mrow:hover b { color: var(--accent); }
.bprow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.bprow small { display: block; font: 10.5px var(--mono); color: var(--dim); margin-top: 2px; }
.bpin { white-space: nowrap; font: 12px var(--mono); color: var(--dim); }
.bp input { width: 64px; padding: 4px 7px; text-align: right; margin-right: 4px; font: 13px var(--mono); }
.acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
/* mock exam */
.mockbar { position: sticky; top: var(--shl-top, 0px); z-index: 3; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--bg);
  padding: 8px 0 10px; border-bottom: 1px solid var(--line); font: 12px var(--mono); color: var(--muted); }
.mockbar .mt { font: 500 17px var(--serif); color: var(--ink); }
.mtime { font: 600 15px var(--mono); color: var(--accent); margin-left: auto; letter-spacing: .06em; }
.mtime.low { color: var(--bad); }
.primary.small { padding: 7px 14px; font-size: 11px; }
.ticks { display: flex; gap: 2px; flex-wrap: wrap; margin: 12px 0 16px; }
.tick { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line); background: var(--surface); padding: 0; cursor: pointer; }
.tick.done { background: var(--dim); border-color: var(--dim); }
.tick.flag { box-shadow: inset 0 -3px 0 var(--flag); }
.tick.here { outline: 2px solid var(--accent); outline-offset: 1px; }
.opt.is-picked { border-color: var(--accent); background: var(--surface2); }
.opt.is-picked .L { color: var(--accent); }
.cardhead .quiet { padding: 4px 11px; }
@media (max-width: 560px) { .cbar { grid-template-columns: 100px 1fr 84px; } .trow { grid-template-columns: 1fr 64px 48px; } .trow .spark { width: 64px; } }

/* [Source: …] citations inside explanations */
.srcs { display: inline; }
.cite.src { display: inline-block; font: 500 11px/1.5 var(--mono); letter-spacing: 0; color: var(--accent); background: var(--surface);
  border: 1px solid var(--line); border-radius: 100px; padding: 1px 8px; margin: 2px 3px 2px 0; cursor: pointer; vertical-align: 1px;
  white-space: normal; text-align: left; min-width: 0; }
.cite.src:hover { border-color: var(--accent); }
.cite.src.found::before { content: "▤ "; }
.cite.src.doc { color: var(--muted); }
.cite.src.none { color: var(--dim); border-style: dashed; cursor: help; }
.cite.src.busy { opacity: .55; }

/* ================= More themes + header controls (2026-09-26) ================= */
html[data-theme="cpaper"] {        /* Claude Paper: the artifact's light theme */
  --bg: #FAF9F5; --surface: #FFFFFF; --surface2: #F0EEE6; --line: #DEDBD0; --ink: #141413; --muted: #5E5D59; --dim: #87867F;
  --accent: #C15F3C; --accent-ink: #FFFFFF; --ok: #3D7A57; --ok-bg: #E4EFE7; --bad: #B5453A; --bad-bg: #F7E4DF; --flag: #A8741A;
  --expl: #2B2A27; --serif: 'Newsreader', Georgia, serif; --sans: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --caps: uppercase; --track: .09em; color-scheme: light; }
html[data-theme="clinical"] {
  --bg: #F5F7F8; --surface: #FFFFFF; --surface2: #EEF2F3; --line: #D6DEE1; --ink: #16232A; --muted: #4E626B; --dim: #7C8E96;
  --accent: #0F766E; --accent-ink: #FFFFFF; --ok: #15803D; --ok-bg: #E3F4E8; --bad: #B42318; --bad-bg: #FBE7E5; --flag: #B45309;
  --expl: #1F2E36; --serif: 'Source Serif 4', Georgia, serif; --sans: 'Inter', system-ui, sans-serif; --mono: 'Inter', system-ui, sans-serif;
  --caps: none; --track: .02em; color-scheme: light; }
html[data-theme="epiclight"] {     /* Supreme Epic Light: the original cream + brass */
  --bg: #F5F3EC; --surface: #FFFFFF; --surface2: #EFEBE1; --line: #D9D3C6; --ink: #1C2129; --muted: #586573; --dim: #7A8592;
  --accent: #8F6F0E; --accent-ink: #FFFFFF; --ok: #2C7A57; --ok-bg: #E1F0E7; --bad: #B3423C; --bad-bg: #F7E3E1; --flag: #A8741A;
  --expl: #2A313B; --serif: 'Newsreader', Georgia, serif; --sans: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --caps: uppercase; --track: .09em; color-scheme: light; }
html[data-theme="cgraphite"] {     /* Claude Graphite: the artifact's dark theme */
  --bg: #262624; --surface: #30302E; --surface2: #393936; --line: #4A4945; --ink: #F5F4EE; --muted: #C2C0B6; --dim: #9A988F;
  --accent: #D97757; --accent-ink: #FFFFFF; --ok: #7BB38F; --ok-bg: #26332B; --bad: #E0786A; --bad-bg: #3B2723; --flag: #E5AE4B;
  --expl: #E4E2DA; --serif: 'Newsreader', Georgia, serif; --sans: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --caps: uppercase; --track: .09em; color-scheme: dark; }
html[data-theme="forest"] {
  --bg: #0F1A17; --surface: #16241F; --surface2: #1E2F29; --line: #2B4038; --ink: #E6EDE8; --muted: #9DB2A7; --dim: #6C8479;
  --accent: #D08C4F; --accent-ink: #1A0F06; --ok: #7CC49A; --ok-bg: #173126; --bad: #E07A6A; --bad-bg: #35201C; --flag: #E5AE4B;
  --expl: #D3DED7; --serif: 'Newsreader', Georgia, serif; --sans: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --caps: uppercase; --track: .09em; color-scheme: dark; }
html[data-theme="contrast"] {
  --bg: #000000; --surface: #111111; --surface2: #1C1C1C; --line: #6E6E6E; --ink: #FFFFFF; --muted: #E0E0E0; --dim: #BDBDBD;
  --accent: #FFD400; --accent-ink: #000000; --ok: #5CE08A; --ok-bg: #0B2A16; --bad: #FF7A7A; --bad-bg: #3A0F0F; --flag: #FFD400;
  --expl: #FFFFFF; --serif: 'Atkinson Hyperlegible', system-ui, sans-serif; --sans: 'Atkinson Hyperlegible', system-ui, sans-serif; --mono: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --caps: none; --track: .02em; color-scheme: dark; }
html[data-theme="contrast"] body { font-size: 16px; }
html[data-theme="paper"], html[data-theme="graphite"], html[data-theme="epic"] { /* already defined above */ }
/* header: back + brand on the left, theme switch + account on the right */
header#top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
header#top .hl, header#top .hr { display: flex; align-items: center; gap: 10px; min-width: 0; }
.backbtn { padding: 6px 12px; }
.themeflip { padding: 4px 10px; font-size: 13px; line-height: 1.3; }
/* theme picker (Account) */
.throw { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.thopt { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 12px; color: var(--ink); font: 14px var(--sans); cursor: pointer; }
.thopt[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.thsw { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); }
.thsw i { flex: 1; }

/* Weeks (study group) */
.grp-flat { margin: 0 0 16px; }
.grp-flat h2 { margin: 6px 0 10px; }
.deck.deck-now { border-color: var(--accent); }
.deck-meta.wide { grid-column: 1 / -1; opacity: .85; }

.srcnote { font: 11px var(--mono); color: var(--dim); margin: 0 4px 0 0; }

/* Passes (Start next pass + pass history) and the in-page dialog */
.passn { font: 600 11px var(--mono); color: var(--accent); margin-left: auto; align-self: center; letter-spacing: .06em; }
.plog { margin: 0 0 14px; font: 12px/1.7 var(--mono); color: var(--muted); border-top: 1px dashed var(--line); padding-top: 8px; }
.plog > summary { cursor: pointer; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.plrow { padding: 3px 0; }
.plrow b { color: var(--ink); }
.plw { margin-left: 6px; padding: 2px 10px; color: var(--bad); border-color: var(--bad); }
.dlg-ov { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.dlg { background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; padding: 18px 20px; width: min(520px, 100%); color: var(--ink); }
.dlg h2 { margin: 0 0 10px; color: var(--accent); }
.dlg-body { font: 14px/1.6 var(--sans); }
.dlg-body p { margin: 10px 0 0; color: var(--muted); }
.dlg .acts { justify-content: flex-end; }

/* ---- High-yield summaries (artifact v4.8, ported 27 Sep) ---- */
.hyhome { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; width: 100%; text-align: left; margin: .2rem 0 1rem;
  padding: .75rem .9rem; border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.hyhome:hover { border-color: var(--accent); }
.hyhome-t { font-weight: 700; }
.hyhome-m { color: var(--muted); font-size: .88rem; }
.hycrumb { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0 0 .8rem; }
.hycrumb [aria-pressed="true"], .hycur { font-weight: 700; color: var(--accent); }
.hysep { color: var(--muted); }
.hysrch { display: flex; align-items: center; gap: .6rem; }
.hyn { color: var(--muted); font-size: .88rem; white-space: nowrap; }
.hyitem { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: .7rem .9rem .3rem; margin: 0 0 .9rem; }
.hycap { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.hyk { color: var(--accent); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hyopen { margin-left: auto; font-size: .85rem; padding: .25rem .7rem; }
.hystem { font: 400 .95rem/1.5 var(--serif); color: var(--muted); margin: .35rem 0 0; }
.hytbl { margin-top: .4rem; }
.hymaster { border: 1px solid var(--ok); border-radius: 10px; background: var(--surface); padding: .7rem .9rem; margin: 0 0 1.1rem; }

/* ---- Continue (artifact parity, 27 Sep) ---- */
.contgo { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; width: 100%; text-align: left; margin: .2rem 0 1rem;
  padding: .75rem .9rem; border: 1px solid var(--accent); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.contgo:hover { background: var(--bg); }
.contgo-t { font-weight: 700; color: var(--accent); }
.contgo-m { color: var(--muted); font-size: .88rem; }

/* ---- home dashboard (dash_ui.css) sits above the folded deck groups ---- */
.grp-h { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 1.4rem 0 .4rem; }


/* ================= Aurora (27 Sep 2026): the default light + dark look, and the page inside the app frame ================= */
html[data-theme="aurora"] {
  --bg: #F6F7FB; --surface: #FFFFFF; --surface2: #F0F2F7; --line: #E4E7EE; --ink: #15171C; --muted: #5E6474; --dim: #9AA0AE;
  --accent: #3D6FE0; --accent-ink: #FFFFFF; --ok: #23835B; --ok-bg: #E3F3EB; --bad: #C8433A; --bad-bg: #FBE7E5; --flag: #C27C12;
  --expl: #262A33; --serif: 'Newsreader', Georgia, serif; --display: 'Instrument Serif', Georgia, serif; --sans: 'Inter', system-ui, sans-serif;
  --ui: 'Inter', system-ui, sans-serif; --mono: 'Inter', system-ui, sans-serif; --caps: none; --track: .01em; color-scheme: light;
  --g1: #E7D9FF; --g2: #FAD4E8; --g3: #CFE2FF; --g4: #FFD9D4; }
html[data-theme="auroradark"] {
  --bg: #12151B; --surface: #1A1E26; --surface2: #222733; --line: #2B303C; --ink: #EEF0F5; --muted: #A5ACBB; --dim: #6E7585;
  --accent: #7EA2F5; --accent-ink: #0B1020; --ok: #6CCB9B; --ok-bg: #16301F; --bad: #EE7B70; --bad-bg: #3A1C19; --flag: #E3AE55;
  --expl: #D5DAE3; --serif: 'Newsreader', Georgia, serif; --display: 'Instrument Serif', Georgia, serif; --sans: 'Inter', system-ui, sans-serif;
  --ui: 'Inter', system-ui, sans-serif; --mono: 'Inter', system-ui, sans-serif; --caps: none; --track: .01em; color-scheme: dark;
  --g1: #3A2C5C; --g2: #4E2B40; --g3: #223A5E; --g4: #4D2C2A; }
html[data-theme="aurora"] body { background: radial-gradient(1000px 520px at 40% -180px, rgba(84, 132, 236, .30), transparent 72%) no-repeat, var(--bg); }
html[data-theme="auroradark"] body { background: radial-gradient(1000px 520px at 40% -180px, rgba(70, 110, 220, .26), transparent 72%) no-repeat, var(--bg); }
html[data-theme^="aurora"] h1 { font: 400 32px/1.15 var(--display); letter-spacing: -.01em; }
html[data-theme^="aurora"] h2 { font: 600 13px var(--sans); letter-spacing: .01em; text-transform: none; color: var(--muted); }
html[data-theme^="aurora"] .quiet { border-radius: 999px; font: 500 12.5px var(--sans); padding: 7px 14px; }
html[data-theme^="aurora"] .primary { border-radius: 999px; font: 600 13px var(--sans); }
html[data-theme^="aurora"] .deck, html[data-theme^="aurora"] .opt, html[data-theme^="aurora"] .hyitem { border-radius: 14px; }
html[data-theme^="aurora"] .actions #prev, html[data-theme^="aurora"] .actions #next { border-radius: 999px; font: 600 13px var(--sans); }
html[data-theme^="aurora"] .actions #next { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* the page inside the frame: dashboards and lists use the width; a question keeps a reading width */
.shl-content > main#view { max-width: 1080px; margin: 0 auto; padding: 6px 0 120px; }
html.readmode .shl-content > main#view { max-width: 780px; }
.sheet { z-index: 60; }
#toast { z-index: 70; }
@media (min-width: 1024px) { .actions { left: 244px; } }
.dsh-admin { text-align: center; margin: 0; }

/* position bar on question screens (app.js spineHtml; same look as the artifact's spine) */
.spine{display:flex;gap:2px;height:30px;align-items:flex-end;margin:10px 0 6px;overflow-x:auto;scrollbar-width:none;padding-top:3px}
.spine::-webkit-scrollbar{display:none}
.spine .tick{flex:1 0 6px;min-width:6px;max-width:26px;height:14px;padding:0;border:0;border-radius:2px;background:var(--line);cursor:pointer;transition:height .15s}
.spine .tick:hover{filter:brightness(.92)}
.spine .tick.ok{background:var(--ok);height:22px}.spine .tick.no{background:var(--bad);height:22px}.spine .tick.sn{background:var(--muted);height:18px;opacity:.55}
.spine .tick.here{height:30px;background:var(--accent)}
.spine .tick.fy{box-shadow:inset 0 3px 0 0 #D9B23A}.spine .tick.fo{box-shadow:inset 0 3px 0 0 #D0813C}.spine .tick.fr{box-shadow:inset 0 3px 0 0 #C4645F}
.spstats{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.spstats b{color:var(--ink)}.spstats .okt b{color:var(--ok)}.spstats .not b{color:var(--bad)}
@media (pointer:coarse){.spine{height:34px}.spine .tick{min-width:8px}.spine .tick.here{height:34px}}

/* ---- card extras (29 Sep 2026, from the artifact): flags · note · badges · versions · verdict panels · pins · grading ---- */
#view > :not(.actions){zoom:var(--se-fs,1)}
.cardhead .ch-r{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.flagrow{display:inline-flex;gap:7px;align-items:center}
.flagdot{width:17px;height:17px;border-radius:50%;border:2px solid;background:transparent;cursor:pointer;padding:0;opacity:.55;transition:opacity .12s,transform .12s}
.flagdot:hover{opacity:1;transform:scale(1.12)}
.flagdot.y{border-color:#D9B23A}.flagdot.o{border-color:#D0813C}.flagdot.r{border-color:#C4645F}
.flagdot.on{opacity:1}.flagdot.on.y{background:#D9B23A}.flagdot.on.o{background:#D0813C}.flagdot.on.r{background:#C4645F}
@media (pointer:coarse){.flagdot{width:22px;height:22px}}
.flagpick{margin-top:6px}.flagpick button{display:inline-flex;align-items:center;gap:6px}
.flagpick .flagdot,.flagpick .flagdot:hover{width:10px;height:10px;border-width:0;cursor:inherit;transform:none;flex:none}
.flagpick button:disabled{opacity:.45}
.notebtn{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;font-size:14px;padding:0;line-height:1}
.notebtn.on{color:var(--accent);border-color:var(--accent)}
.notewrap{margin:4px 0 14px}
.notehd{display:flex;justify-content:space-between;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.notesv{color:var(--ok);text-transform:none;letter-spacing:0}
.noteta{width:100%;min-height:110px;box-sizing:border-box;background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--ink);font:inherit;font-size:15px;line-height:1.55;padding:11px 13px;resize:vertical}
.noteta:focus{outline:none;border-color:var(--accent)}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.bdg{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--line);border-radius:5px;padding:2px 8px;color:var(--muted);background:none;line-height:1.5}
.bdg.ood,.bdg.rev{border-color:var(--bad);color:var(--bad)}
.bdg.readj,.bdg.dd,.bdg.kept{border-color:var(--ok);color:var(--ok)}
.bdg.dk,.bdg.mr{border-color:var(--flag);color:var(--flag)}
button.bdg.versbdg{cursor:pointer;border-color:var(--accent);color:var(--accent);text-transform:none;letter-spacing:.02em;font-size:12px}
.verssheet{position:fixed;z-index:60;top:0;right:0;bottom:0;width:min(440px,92vw);background:var(--surface);border-left:1px solid var(--line);box-shadow:-18px 0 42px rgba(0,0,0,.25);display:flex;flex-direction:column}
.vershd{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.vershd span{flex:1}
.versbody{overflow-y:auto;padding:14px 16px 28px;flex:1}
.vershint{font-size:13px;color:var(--muted);margin:0 0 14px}
.versit{border:1px solid var(--line);border-radius:10px;padding:12px 13px;margin-bottom:12px}
.versrel{display:flex;gap:8px;align-items:baseline;margin-bottom:5px}.versk{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.versid{font-size:11px;color:var(--muted)}.versid.off{font-style:italic;opacity:.7}
.verswhy{font-size:12.5px;color:var(--muted);margin:0 0 8px}.versq{font-size:15px;line-height:1.5;margin-bottom:8px}
.versopt{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;padding:4px 7px;border-radius:6px;color:var(--muted)}
.versopt .L{font-size:11px;min-width:14px}.versopt.k{background:var(--ok-bg);color:var(--ink)}.versmark{margin-left:auto;font-size:10px;text-transform:uppercase;color:var(--ok)}
.versnone{font-size:12.5px;font-style:italic;color:var(--muted)}.versgo{margin-top:8px}
@media (max-width:760px){.verssheet{top:auto;left:0;width:auto;max-height:82vh;border-left:0;border-top:1px solid var(--line);border-radius:14px 14px 0 0}}
details.ai{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
details.ai summary{cursor:pointer;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
details.ai[open] summary{color:var(--accent);margin-bottom:6px}
.nlmv{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:4px;font-size:10.5px;letter-spacing:.06em}
.nlmv-correct{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok)}
.nlmv-incorrect{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad)}
.nlmv-flawed,.nlmv-dated{color:var(--flag);border:1px solid var(--flag)}
.nlmv-indeterminate{color:var(--muted);border:1px solid var(--line)}
.nlmc{margin-left:8px;font-size:10.5px;color:var(--muted);text-transform:none}
.gradebar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 4px}
.grade{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:10px 18px;font:inherit;font-weight:600;cursor:pointer}
.grade.ok:hover,.grade.ok.sel{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.grade.no:hover,.grade.no.sel{border-color:var(--bad);color:var(--bad);background:var(--bad-bg)}
.grade:disabled{cursor:default}.grade:disabled:not(.sel){opacity:.45}
.phist{margin-top:16px;padding-top:10px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.phist .pl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pinned{margin-top:16px;border-left:3px solid var(--ok);padding:2px 0 2px 12px}
/* explainer videos for a question (30 Oct 2026) */
.cvids{margin-top:16px;display:flex;flex-direction:column;gap:6px}
.cvids-h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cvid{display:flex;gap:10px;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);text-decoration:none}
.cvid:hover{border-color:var(--accent)}
.cvid-i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--bg);font-size:11px}
.cvid b{display:block;font-weight:600;font-size:14px}.cvid small{color:var(--muted);font-size:12px}
.pin-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ok)}
.pin-x{font-size:12px;text-transform:none;letter-spacing:0}
.pin-q{font-size:13px;color:var(--muted);margin:4px 0}
.pin-body p{margin:0 0 8px}.pin-body ul{margin:0 0 8px 18px}
.passtabs{display:inline-flex;gap:5px;flex-wrap:wrap;margin-right:6px}
.ptab{font:inherit;font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:none;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer}
.ptab[aria-pressed="true"]{color:var(--ink);border-color:var(--accent)}
.spstats{align-items:center}
.ask-acts{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 2px}
/* explanation blocks written by the adjudication desks (counter-explanation, teaching point, high-yield table, key revisions) */
.expl .counter,.expl .teach,.expl .hiyield,.expl .cqa,.expl .counter-old,.expl .teach-old,.expl .hiyield-old{margin-top:16px;padding:10px 13px;border-radius:8px;border:1px solid var(--line)}
.expl .counter{border-left:3px solid var(--flag)}
.expl .teach{border-left:3px solid var(--ok)}
.expl .hiyield{border-left:3px solid var(--accent);overflow-x:auto}
.expl .cqa{border-left:3px solid #8e7cc3;background:rgba(142,124,195,.08)}
.expl .counter-h,.expl .teach-h,.expl .hy-h,.expl .cqa-h,.expl .counter-h-old{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin-bottom:6px;color:var(--flag)}
.expl .teach .counter-h,.expl .teach-h{color:var(--ok)}
.expl .hiyield .counter-h,.expl .hy-h{color:var(--accent)}
.expl .cqa-h{color:#8e7cc3}
.expl .counter table,.expl .teach table,.expl .hiyield table{width:100%;border-collapse:collapse;margin:8px 0;font-size:13.5px}
.expl .counter td,.expl .counter th,.expl .teach td,.expl .teach th,.expl .hiyield td,.expl .hiyield th{border:1px solid var(--line);padding:5px 8px;vertical-align:top;text-align:left}
.expl .krev{padding:8px 11px;border-radius:6px;margin:0 0 12px;font-size:13.5px}
.expl .krev-revised{background:var(--bad-bg);border-left:3px solid var(--bad)}
.expl .krev-set,.expl .krev-pair{background:var(--ok-bg);border-left:3px solid var(--ok)}
.expl .krev-disputed,.expl .krev-folded{background:var(--surface);border-left:3px solid var(--flag)}
.expl .krev-src{color:var(--muted);font-size:12px}
.expl .nlm-pending{display:none}
.expl details.origexp,.expl details.readj-old{margin:10px 0}
.expl details.origexp summary,.expl details.readj-old summary{cursor:pointer;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.expl .cqa-chip{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:4px;font-size:10.5px;border:1px solid #8e7cc3;color:#8e7cc3}
.expl .rw-note{margin-top:6px;font-size:13px;color:var(--muted)}
.ask-chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 4px}
.ask-nb{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);margin:4px 0 6px}
.ask-nb select{font:inherit;font-size:13px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:4px 8px;max-width:70vw}
/* read-aloud player + hands-free (voice.js) */
#tts-vm[aria-pressed="true"]{color:var(--ok);border-color:var(--ok)}
#tts-vm.vm-listening{animation:vmpulse 1.1s ease-in-out infinite}
@keyframes vmpulse{0%,100%{box-shadow:0 0 0 0 rgba(61,190,139,0)}50%{box-shadow:0 0 0 5px rgba(61,190,139,.28)}}
.se-vm .stem,.se-vm #after{cursor:pointer}
@media (max-width:420px){
  .actions{padding-left:12px;padding-right:12px}
  .actions-in{min-width:0}.actions #prev,.actions #next{min-width:0}
  .actions .mid button{padding:6px 8px;font-size:12.5px}
}
/* facts to remember (hy.js renderFacts) */
.factlink{margin:-6px 0 10px}
.fact-card{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:18px 18px 14px;margin:6px 0 18px}
.fact-cue{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;line-height:1.45}
.fact-t{white-space:pre-wrap;font-size:16px;line-height:1.6;color:var(--ink);margin:4px 0 8px}
.fact-m{font-size:12.5px;color:var(--muted)}
.fact-list{list-style:none;padding:0;margin:8px 0}
.fact-list li{border-top:1px solid var(--line);padding:10px 0}
.fact-list .fact-cue{margin-bottom:4px}.fact-list .fact-t{font-size:14.5px;margin:0 0 4px}
.fact-list .link{margin-left:8px}
.againrow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
/* Review Courses 2026 (courses.js) */
.crs-grid .deck{cursor:pointer}
.crs-grp{margin:18px 0 0}.crs-grp h2{font-size:15px;margin:0 0 6px;color:var(--muted);text-transform:none;letter-spacing:0}
.crs-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.crs-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:10px 12px;font:inherit;color:var(--ink);cursor:pointer}
.crs-list .crs-row:first-child{border-top:0}
.crs-row:hover{background:var(--bg)}.crs-row.on{background:var(--bg);font-weight:600}
.crs-row[hidden],.crs-grp[hidden]{display:none}
.crs-ic{flex:0 0 auto;min-width:46px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.04em;border-radius:6px;padding:3px 6px;background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.crs-ic.t-video,.crs-ic.t-audio{color:var(--accent);border-color:var(--accent)}
.crs-nm{flex:1;min-width:0;overflow-wrap:anywhere}
.crs-meta{flex:0 0 auto;font-size:12px;color:var(--muted)}
.crs-prog{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 7px}
.crs-prog.done{color:var(--ok);border-color:var(--ok)}
.crs-title{margin-bottom:2px}
.crs-media{display:block;width:100%;max-height:70vh;background:#000;border-radius:12px;margin:12px 0 8px}
audio.crs-media{background:none}
.crs-ctl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 6px}.crs-ctl .grow{flex:1}
.crs-err{margin:6px 0}

/* review-course years (Home + #/courses) */
.crs-home { margin-top: 1.5rem; }
.crs-year { margin: 1.25rem 0; }
.crs-empty { padding: .9rem 1rem; border: 1px dashed var(--line, #ccc); border-radius: 10px; }

/* review courses by topic, with thumbnails (30 Sep) */
.crs-switch{display:flex;gap:6px;margin:10px 0 4px}
.crs-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0}.crs-tools .search{flex:1;min-width:220px;margin:0}
.crs-jump{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:thin}
.crs-chip{flex:0 0 auto;font:inherit;font-size:12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:4px 10px;cursor:pointer;white-space:nowrap}
.crs-chip:hover{border-color:var(--accent)}
.crs-topic{margin:22px 0 0;scroll-margin-top:calc(var(--shl-top,0px) + 12px)}.crs-topic[hidden],.crs-lec[hidden]{display:none}
.crs-topic>h2{font-size:17px;margin:0 0 8px}
.crs-lec{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:12px 12px 10px;margin:0 0 10px}
.crs-lec header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 8px}
.crs-lec h3{font-size:15px;margin:0}
.crs-from{font-size:12px;color:var(--muted)}
.crs-seen{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.crs-seen.all{color:var(--ok);border-color:var(--ok)}
.crs-strip{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.crs-tile{flex:0 0 172px;display:flex;flex-direction:column;gap:4px;text-align:left;background:none;border:0;padding:0;font:inherit;color:var(--ink);cursor:pointer}
.crs-tile.sm{flex-basis:132px;opacity:.9}
.crs-th{position:relative;display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,var(--surface)),var(--bg))}
.crs-tile:hover .crs-th,.crs-tile:focus-visible .crs-th{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.crs-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.crs-tile.t-video .crs-th img{object-position:center}
.crs-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:10px;text-align:center;font-size:13px;font-weight:650;line-height:1.25;color:var(--ink)}
.crs-badge{position:absolute;left:6px;bottom:6px;font-size:10px;font-weight:800;letter-spacing:.04em;background:rgba(0,0,0,.72);color:#fff;border-radius:5px;padding:2px 6px}
.crs-tile.t-video .crs-badge,.crs-tile.t-audio .crs-badge{background:var(--accent)}
.crs-done{position:absolute;right:6px;top:6px;font-size:10px;font-weight:700;background:var(--ok);color:#fff;border-radius:5px;padding:1px 6px}
.crs-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.35)}.crs-bar i{display:block;height:100%;background:var(--accent)}
.crs-tl{font-size:12px;line-height:1.3;overflow-wrap:anywhere}
.crs-sz{font-size:11px;color:var(--muted);margin-top:-3px}
.crs-res{margin-top:6px}.crs-res summary{cursor:pointer;font-size:13px;color:var(--muted);padding:4px 0}.crs-res .crs-list{margin-top:6px}
@media (max-width:600px){.crs-tile{flex-basis:140px}.crs-tile.sm{flex-basis:112px}}
/* tables in explanations and the High-yield pages (Yousef, 30 Sep — they crushed on iPad): app.js tidyText() puts each
   table in a .tblwrap scroll box; words never split mid-word; source chips inside cells are short ("DSM-5-TR · p. 518") */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.expl .tblwrap>table,.tblwrap>table{display:table;width:100%;min-width:600px;max-width:none;margin:0;border-collapse:collapse;font:14px/1.5 var(--sans)}
.tblwrap th,.tblwrap td{overflow-wrap:normal;word-break:normal;hyphens:manual;padding:9px 11px;vertical-align:top;text-align:left;
  border:0;border-bottom:1px solid var(--line)}
.tblwrap th+th,.tblwrap td+td{border-left:1px solid var(--line)}
.tblwrap thead th,.tblwrap tr:first-child>th{background:var(--surface2);font:600 12.5px/1.35 var(--sans);color:var(--muted)}
.tblwrap tbody tr:last-child>td{border-bottom:0}
.tblwrap tbody tr:nth-child(even)>td{background:color-mix(in srgb,var(--surface2) 45%,transparent)}
.tblwrap td:first-child{min-width:8.5em;max-width:13em;font-weight:600;color:var(--ink)}
.tblwrap th:first-child{min-width:8.5em}
.tblwrap .srcs{display:inline}
.tblwrap .cite.src{border-radius:6px;white-space:nowrap;font-size:10.5px;line-height:1.6;padding:0 6px;margin:4px 4px 0 0;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;vertical-align:baseline}
.tblwrap .srcnote{display:inline-block;font-size:10.5px}
.tblwrap sub,.tblwrap sup,.expl sub,.expl sup{font-size:.72em;line-height:0}
@media (max-width:600px){.tblwrap>table{min-width:540px;font-size:13px}.tblwrap th,.tblwrap td{padding:7px 9px}}
/* wide tables (3 Nov 2026; app.js tableCards/tableBar): two columns always fit; 3+ columns are cards on a phone; a table
   that still doesn't fit has its scroll bar pinned above it, under the toolbar and the card header */
.wnotes table.tb-narrow,.wnotes table.tb-stack{display:table;width:100%}
/* a box that scrolls sideways would hold the pinned bar inside it: the table scrolls itself instead */
.expl .hiyield:has(.tbbox),.st-part>.expl:has(.tbbox){overflow:visible}
.tbbox{margin:10px 0}
.tbbox>.tblwrap{margin:0}
.expl .tblwrap>table.tb-narrow,.tblwrap>table.tb-narrow{min-width:0}
.tb-top{position:sticky;top:calc(var(--tb-top,var(--shl-top,0px)) + 4px);z-index:4;display:flex;align-items:center;gap:6px;margin:0 0 6px;
  padding:4px;border-radius:10px;background:var(--bg);border:1px solid var(--line);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.tb-top[hidden]{display:none}
.tb-go{flex:none;width:30px;height:24px;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:11px;line-height:1;cursor:pointer;padding:0}
.tb-go:hover{border-color:var(--accent);color:var(--accent)}
.tb-track{flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;height:14px;border-radius:7px;background:color-mix(in srgb,var(--line) 55%,transparent);
  scrollbar-width:auto;scrollbar-color:var(--muted) transparent}
.tb-track>div{height:1px}
.tb-track::-webkit-scrollbar{height:14px}
.tb-track::-webkit-scrollbar-thumb{background:var(--muted);border-radius:7px;border:3px solid transparent;background-clip:padding-box}
@media (max-width:699px){
  table.tb-stack{display:block!important;min-width:0!important;width:100%!important;border:0!important;overflow:visible!important}
  table.tb-stack>thead,table.tb-stack tr.tb-head{display:none!important}
  table.tb-stack>tbody,table.tb-stack tr,table.tb-stack td,table.tb-stack th{display:block!important}
  table.tb-stack tr{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:0 0 8px;background:var(--surface)}
  table.tb-stack td,table.tb-stack th{border:0!important;padding:2px 0!important;background:none!important;min-width:0!important;max-width:none!important;width:auto!important}
  table.tb-stack tr>*+*{margin-top:7px}
  table.tb-stack tr>:first-child{font-weight:600;color:var(--ink)}
  table.tb-stack td[data-h]:not(:first-child)::before{content:attr(data-h);display:block;font:600 11px/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:1px}
  .tblwrap:has(>table.tb-stack){border:0;background:none;overflow:visible}
  .tbbox:has(table.tb-stack)>.tb-top{display:none}
  .wnotes td,.wnotes th{overflow-wrap:anywhere}
  .wnotes table.tb-stack td:first-child{overflow-wrap:normal}
  table.tb-stack tr.lf-cur{background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
}
/* pinned card header (Yousef, 30 Sep): title · passes · position bar · "N of M" stay under the toolbar; compact once stuck */
.cardtop{position:sticky;top:var(--shl-top,0px);z-index:20;background:var(--bg);
  transition:box-shadow .15s}
.cardtop.stuck{box-shadow:0 8px 14px -12px rgba(0,0,0,.45);border-bottom:1px solid var(--line)}
.cardtop h1{transition:font-size .15s,margin .15s}
.cardtop.stuck h1{font-size:1.15rem;margin:.35rem 0 .1rem;line-height:1.25}
.cardtop.stuck .modes{margin:0}
.cardtop.stuck .modes .quiet{padding:3px 10px;font-size:12px}
.cardtop.stuck .plog{display:none}
.cardtop.stuck .spine{margin:4px 0 2px}
.cardtop.stuck .spstats{margin:0 0 4px;font-size:11px}
.cardtop.stuck .cardhead{margin-bottom:.35rem}
html:has(.cardtop){scroll-padding-top:calc(var(--shl-top,0px) + var(--cardtop-h,0px) + 8px)}
/* first sign-in (2 Oct): help under the sign-in form, one-time welcome screen */
.signin-help{margin-top:14px;line-height:1.5}
.welcome{max-width:40rem}
.welcome ul{padding-left:1.2em;line-height:1.6}
.welcome li{margin:6px 0}
/* "Not quite. Want to ask the library why?" after a wrong answer (replaces auto-explain, 30 Sep) */
.askpop{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:60;
  width:max-content;max-width:min(460px,92vw);display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;
  background:var(--surface);color:var(--ink);border:1px solid var(--accent);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.25)}
.askpop span{flex:1 1 180px}
.askpop .askpop-yes{border-color:var(--accent);color:var(--accent)}
/* which bank you're studying, in the toolbar; tap to switch (2 Oct) */
.bankpill{flex:0 0 auto;align-self:center;font:600 12px/1 var(--sans);padding:7px 10px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--line);background:var(--surface);color:var(--muted,inherit)}
.bankpill.full{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
/* the consolidated card under a merged-away Anki version (Full bank, 30 Sep) */
.hostgo{margin:12px 0 0}
.hostgo button{border-color:var(--accent);color:var(--accent);white-space:normal;text-align:left}
.hostcard{margin-top:22px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:12px 14px;background:var(--surface)}
.hostcard .hc-h{font:600 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.hostcard .hc-stem{font-size:1rem;margin:0 0 8px}
.hostcard .hc-opts{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:4px}
.hostcard .hc-opt{display:flex;gap:10px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;font-size:.92rem}
.hostcard .hc-opt.is-key{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
/* search inside the open deck + the question list (2 Oct 2026) */
.dsres { display: flex; flex-direction: column; max-height: min(60vh, 520px); overflow-y: auto; }
.dsres-h { font-size: .8rem; color: var(--muted); padding: .5rem .8rem; }
.dsres-it, .ql-it { display: flex; gap: .6rem; align-items: baseline; width: 100%; text-align: left; background: none; border: 0;
  border-top: 1px solid var(--line); padding: .55rem .8rem; color: var(--ink); cursor: pointer; font: inherit; font-size: .9rem; line-height: 1.4; }
.dsres-it:hover, .dsres-it:focus-visible, .ql-it:hover, .ql-it:focus-visible { background: color-mix(in srgb, var(--accent) 9%, transparent); outline: none; }
.dsres-it mark { background: color-mix(in srgb, var(--flag) 35%, transparent); color: inherit; border-radius: 2px; }
.dstx, .ql-tx { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* module search (30 Oct 2026): passages with their section, the find bar, highlights in the module */
.mf-it { flex-direction: column; gap: .15rem; text-decoration: none; }
a.dsres-it, a.dsres-all { text-decoration: none; display: flex; }
.mf-where { font-size: .74rem; font-weight: 600; color: var(--accent); letter-spacing: .01em; }
.ml-mh { font-weight: 650; font-size: .86rem; padding: .6rem .8rem .3rem; border-top: 1px solid var(--line); }
.ml-res .ml-mod { border: 1px solid var(--line); border-radius: 12px; margin: .7rem 0; overflow: hidden; background: var(--card, transparent); }
.ml-res .ml-mod > summary { cursor: pointer; padding: .7rem .9rem; }
.ml-res .dsres { max-height: none; }
.mf-bar { position: sticky; top: calc(var(--shl-top, 0px) + 6px); z-index: 30; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin: 0 0 .8rem; padding: .35rem .5rem .35rem .8rem; border: 1px solid var(--accent); border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg, #fff)); box-shadow: 0 8px 22px -14px rgba(0,0,0,.4); font-size: .9rem; }
.mf-bar .mf-q { font-weight: 600; overflow-wrap: anywhere; }
.mf-bar .mf-n { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: auto; }
.mf-bar button { min-width: 2.2rem; }
mark.mf-hit { background: color-mix(in srgb, var(--flag, #C9A227) 38%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.mf-blk { scroll-margin-top: calc(var(--shl-top, 0px) + 70px); }
.mf-cur { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.mf-cur mark.mf-hit { background: color-mix(in srgb, var(--flag, #C9A227) 70%, transparent); }
.qnum { flex: 0 0 auto; min-width: 2.4em; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .82rem; }
.dsres-all { border: 0; border-top: 1px solid var(--line); background: none; color: var(--accent); font: inherit; font-size: .88rem;
  padding: .6rem .8rem; text-align: left; cursor: pointer; }
.dsdot { flex: 0 0 auto; width: .6rem; height: .6rem; border-radius: 50%; border: 1.5px solid var(--muted); transform: translateY(.05rem); }
.dsdot.ok { background: var(--ok); border-color: var(--ok); }
.dsdot.no { background: var(--bad); border-color: var(--bad); }
.dsdot.sn { background: var(--muted); }
.dsdot.fy { box-shadow: 0 0 0 2px #D9B23A; } .dsdot.fo { box-shadow: 0 0 0 2px #D0813C; } .dsdot.fr { box-shadow: 0 0 0 2px #C4645F; }
.dsbar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .35rem 0; padding: .4rem .7rem; font-size: .88rem;
  border: 1px solid var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.qlbtn { margin-left: .5rem; font-size: .85rem; }
.qlwrap { position: fixed; inset: 0; z-index: 70; }
.ql-back { position: absolute; inset: 0; background: rgb(0 0 0 / .35); }
.qlist { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); border-left: 1px solid var(--line); box-shadow: -14px 0 36px rgb(0 0 0 / .25);
  padding-top: env(safe-area-inset-top, 0px); }
.ql-h { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .8rem 1rem .5rem; }
.ql-x { padding: .3rem .6rem; }
.ql-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; padding: 0 1rem .7rem; }
.ql-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ql-go { display: flex; gap: .4rem; align-items: center; font-size: .85rem; color: var(--muted); }
.ql-go input { width: 4.5em; font: inherit; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
.ql-list { flex: 1; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom, 0px); }
.ql-it.here { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ql-it.here .qnum { color: var(--accent); font-weight: 700; }
.ql-empty { padding: 1rem; }
@media (max-width: 760px) {
  .qlist { top: auto; left: 0; width: auto; max-height: 82vh; border-left: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0;
    box-shadow: 0 -14px 36px rgb(0 0 0 / .3); }
}

/* Today's plan editor + slots (3 Oct 2026) */
.plan-dlg { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; }
.pl-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.pl-top h2 { margin: 0; }
.pl-pre { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .8rem 0 .4rem; }
.pl-num { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.pl-num > div { display: flex; flex-direction: column; min-width: 0; }
.pl-step { display: flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.pl-step input { width: 4.2em; text-align: center; font: inherit; padding: .35rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
.pl-step .quiet { padding: .35rem .7rem; }
.pl-grp { display: flex; gap: .5rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--line); }
.pl-est { margin: .5rem 0 1rem; padding: .55rem .75rem; border-radius: 8px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.plan-dlg h3 { font-size: 1rem; margin: .6rem 0 .5rem; }
.pl-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.pl-chip { font: inherit; font-size: .88rem; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; }
.pl-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pl-chip[aria-pressed="true"] .muted { color: inherit; opacity: .8; }
.pl-chip:disabled { opacity: .45; cursor: default; }
.pl-rvtag, .pg-rv { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; padding: .05rem .4rem; border-radius: 4px;
  border: 1px solid var(--ok); color: var(--ok); }
.pl-chip[aria-pressed="true"] .pl-rvtag { border-color: currentColor; color: inherit; }
.pg-rv { margin-left: .4rem; }
/* NotebookLM explainer videos (3 Oct 2026): the link on a topic tile, and each video's one-line summary */
.pg-vid { margin-left: .4rem; font-size: .72rem; padding: .05rem .45rem; border-radius: 4px; border: 1px solid var(--accent);
  color: var(--accent); white-space: nowrap; cursor: pointer; }
.pg-vid:hover, .pg-vid:focus-visible { background: var(--accent); color: var(--accent-ink); }
.pg-dn:has(.pg-vid) { flex-wrap: wrap; row-gap: 4px; }       /* narrow tiles (phones): the link drops under the name */
.crs-about { margin: .2rem 0 .5rem; }
/* What to review (6 Oct 2026) */
.ins-dlg h3 { margin: 1rem 0 .3rem; font-size: 1rem }
.ins-scope { margin: .3rem 0 .6rem; flex-wrap: wrap }
.ins-g { padding: .65rem .1rem .65rem .7rem; border-left: 3px solid var(--line, rgba(127,127,127,.3)); margin: .5rem 0 }
.ins-g.t-review { border-left-color: var(--bad) } .ins-g.t-shaky { border-left-color: var(--flag, #c9952f) }
.ins-g.t-solid { border-left-color: var(--ok) }
.ins-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem }
.ins-tier { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; padding: .05rem .4rem; border-radius: 4px; border: 1px solid currentColor }
.t-review .ins-tier { color: var(--bad) } .t-shaky .ins-tier { color: var(--flag, #c9952f) } .t-solid .ins-tier { color: var(--ok) } .t-few .ins-tier { color: var(--muted) }
.ins-acts { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem }
.ins-acts .quiet, .ins-vids .quiet { font-size: .82rem; padding: .25rem .55rem }
.ins-src { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ins-more { margin-top: .8rem } .ins-more summary { cursor: pointer; font-weight: 600 }
/* carry-over question on the dashboard's plan card (6 Oct 2026) */
.dsh-carry { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: .7rem 0 .2rem; padding: .6rem .75rem;
  border: 1px solid var(--accent); border-radius: 10px }
.dsh-carry > span:first-child { flex: 1 1 14rem }
.dsh-carry-b { display: flex; gap: .4rem; flex-wrap: wrap }
/* Past days (6 Oct 2026) */
.dayl { list-style: none; margin: 1rem 0; padding: 0 }
.dayr { display: grid; grid-template-columns: 9.5rem 1fr auto; gap: .3rem 1rem; align-items: center; padding: .7rem 0;
  border-top: 1px solid var(--line, rgba(127,127,127,.2)) }
.dayr.now .dayr-h b { color: var(--accent) }
.dayr-h { display: flex; flex-direction: column; line-height: 1.25 }
.dayr-m { min-width: 0 }
.dayr-a { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end }
@media (max-width: 640px) { .dayr { grid-template-columns: 1fr } .dayr-a { justify-content: flex-start } }
/* Make a video (Explainer Videos, admin only) */
.vm { margin: .8rem 0 1.4rem; padding: .9rem 1rem; border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: 12px; }
.vm-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.vm h3 { margin: 1rem 0 .4rem; font-size: 1rem; }
.vm-item { padding: .7rem 0; border-top: 1px solid var(--line, rgba(127,127,127,.2)); }
.vm-item .field { display: block; margin: .4rem 0; }
.vm-item input:not([type]), .vm-item .vm-title, .vm-item select, .vm-item textarea { width: 100%; box-sizing: border-box; }
.vm-item textarea { font: inherit; font-size: .85rem; }
.vm-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 600px) { .vm-row { grid-template-columns: 1fr; } }
.vm-on { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.vm-go { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding-top: .7rem; border-top: 1px solid var(--line, rgba(127,127,127,.2)); }
.vm-jobs { list-style: none; margin: 0; padding: 0; }
.vm-job { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; padding: .45rem 0; border-top: 1px solid var(--line, rgba(127,127,127,.15)); }
.vm-js { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: .05rem .4rem; border-radius: 4px; border: 1px solid currentColor; }
.vm-job.s-done .vm-js { color: var(--ok); } .vm-job.s-error .vm-js { color: var(--bad); }
.vm-job.s-generating .vm-js, .vm-job.s-downloading .vm-js, .vm-job.s-queued .vm-js { color: var(--accent); }
.vm-jt { font-weight: 600; }
/* Make your own video: the kinds of video (7 Oct 2026) */
.vm-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .45rem; margin: .6rem 0 .8rem; }
.vm-tpl { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: left; padding: .55rem .7rem;
  border: 1px solid var(--line, rgba(127,127,127,.3)); border-radius: 10px; background: var(--surface); color: inherit; cursor: pointer; font: inherit; }
.vm-tpl[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.vm-tpl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#vmtopic { width: 100%; box-sizing: border-box; font-size: 1rem; }
.vm-full textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: .85rem; }
.vm-head .quiet { white-space: nowrap; }
.pl-rv { margin: 1rem 0 .4rem; }
.pl-rv summary { cursor: pointer; font-weight: 600; }
.dsh-slots { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 .2rem; }
.dsh-slot { position: relative; overflow: hidden; display: inline-flex; gap: .4rem; align-items: baseline; padding: .35rem .7rem;
  border: 1px solid var(--line); border-radius: 8px; font-size: .85rem; }
.dsh-slot b { font-variant-numeric: tabular-nums; }
.dsh-slot i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--ok); }

/* QA fixes (3 Oct 2026) */
.img-miss { display: inline-block; margin: .4rem 0; padding: .35rem .6rem; font-size: .82rem; color: var(--muted);
  border: 1px dashed var(--line); border-radius: 6px; }
/* phones: the search suggestions use the whole toolbar width, not just the search box beside the bank pill */
@media (max-width: 1023px) {
  .shl-bar .shl-stack { position: static; }
  .shl-bar .shl-results { left: 10px; right: 10px; top: calc(100% + 4px); }
}

/* the original Anki explanation, folded under the adjudication / teaching / summary (3 Oct 2026) */
details.anki-exp { margin: 1.1rem 0 .4rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
details.anki-exp > summary { cursor: pointer; padding: .6rem .9rem; font-weight: 600; font-size: .92rem; color: var(--muted); list-style: revert; }
details.anki-exp[open] > summary { border-bottom: 1px solid var(--line); color: var(--ink); }
details.anki-exp > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.anki-exp-body { padding: .4rem .9rem .8rem; }
.anki-exp-body img { max-width: 100%; height: auto; }

/* toolbar: Back · search · bank pill · Read aloud — the pill gets its own column, so Read aloud no longer wraps
   onto a third row on phones (3 Oct 2026) */
.shl-bar:has(.bankpill) { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.bankpill .bp-s { display: none; }
@media (max-width: 699px) {
  .bankpill { padding: 7px 8px; }
  .bankpill .bp-l { display: none; }
  .bankpill .bp-s { display: inline; }
}
.pg-ref { color: var(--muted); font-size: .85em; }
.pl-warn { color: var(--bad); font-weight: 600; }
.pl-inc { display: inline-flex; gap: .35rem; align-items: center; margin-top: .3rem; font-size: .88rem; }
.pl-wk .pl-step .ptab { margin-left: .2rem; }
.pl-step button:disabled, .pl-step input:disabled { opacity: .45; }
@media (max-width: 520px) { .pl-num { flex-wrap: wrap; } .pl-num .pl-step { margin-left: auto; } }
#vmform .field { display: block; margin: .4rem 0; } #vmform .field select { width: 100%; box-sizing: border-box; }

/* admin usage panel on the dashboard (7 Oct 2026; app.js usagePanel) */
.dsh .usg{margin-top:14px}
.usg-wrap{overflow-x:auto;margin-top:6px}
.usg-t{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
.usg-t th{text-align:left;font-weight:500;font-size:.75rem;color:var(--d-mut);padding:4px 8px;border-bottom:1px solid var(--d-line);white-space:nowrap}
.usg-t td{padding:6px 8px;border-bottom:1px solid var(--d-line);white-space:nowrap}
.usg-t td small{color:var(--d-mut)}
.usg-t td.nm{font-weight:600}
.usg-t td.st{color:var(--d-mut);white-space:normal;min-width:12rem}
.usg-t tfoot td{border-bottom:0;color:var(--d-mut);font-size:.8rem}
.usg-t tr.usg-none td{color:var(--d-dim)}
.usg-on{color:var(--d-ok);font-weight:600}
.usg-warn{color:var(--d-warn)}
.usg-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--d-ok);margin-right:6px;vertical-align:1px;box-shadow:0 0 0 3px color-mix(in srgb,var(--d-ok) 25%,transparent)}

/* video / audio overview choice in the make forms (7 Oct 2026) */
.vm-out { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
.vm-out label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; white-space: nowrap; }
.vm-out label[hidden] { display: none; }
.vm-out select { width: auto; padding: .25rem .4rem; }

/* Explainers: All / Video / Audio filter and Listen in a row (7 Oct 2026) */
.vid-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: .4rem 0 .8rem; }
.vid-bar .crs-switch { margin: 0; }
.crs-seq { margin: .2rem 0 .5rem; color: var(--accent, #2f6f8f); font-weight: 600; }

/* Voice mode (8 Oct 2026): toolbar switch + floating status bar */
.shl-voice.on { color: #fff; background: var(--accent, #2f6f8f); border-color: transparent; }
.vmbar { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: .6rem; max-width: min(720px, calc(100vw - 24px)); padding: .5rem .6rem .5rem .8rem;
  background: var(--surface, #fff); color: var(--ink, #222); border: 1px solid var(--line, rgba(127,127,127,.3)); border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18); font-size: .88rem; }
.vmbar .vmdot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted, #999); flex: none; }
.vmbar.listening .vmdot { background: #d33; animation: vmpulse 1.1s ease-in-out infinite; }
.vmbar.speaking .vmdot { background: var(--accent, #2f6f8f); }
.vmbar.paused .vmdot { background: var(--flag, #C9A227); }
.vmbar .vmmain { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.vmbar .vmst { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vmbar .vmtx { color: var(--muted, #777); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vmbar .vmtx:empty { display: none; }
.vmbar button { flex: none; padding: .25rem .6rem; }
@keyframes vmpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(221,51,51,.5); } 50% { box-shadow: 0 0 0 6px rgba(221,51,51,0); } }

/* Discussion on each question (8 Oct 2026) */
.disc { margin: 1.2rem 0 .4rem; padding-top: .8rem; border-top: 1px solid var(--line, rgba(127,127,127,.25)); }
.disc-btn { font-weight: 600; }
.disc-body { margin-top: .7rem; }
.dthread { margin: .5rem 0 .8rem; }
.dc { padding: .55rem .7rem; border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: 10px; background: var(--surface, transparent); }
.dc.kw { border-color: var(--flag, #C9A227); }
.dkids { margin: .35rem 0 0 1.2rem; padding-left: .7rem; border-left: 2px solid var(--line, rgba(127,127,127,.25)); display: grid; gap: .35rem; }
.dc-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.dc-kw { font-size: .75rem; font-weight: 600; color: var(--flag, #9a7b2f); }
.dc-b { margin: .3rem 0; line-height: 1.5; overflow-wrap: anywhere; }
.dc-a { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.dc-r { border: 1px solid var(--line, rgba(127,127,127,.3)); background: transparent; border-radius: 999px; padding: .05rem .5rem; font-size: .85rem; cursor: pointer; }
.dc-r.on { border-color: var(--accent, #2f6f8f); background: color-mix(in srgb, var(--accent, #2f6f8f) 14%, transparent); }
.dform { margin-top: .6rem; display: grid; gap: .4rem; }
.dform textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.dform-a { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.dform-a .grow { flex: 1; }
.dkw-l { display: inline-flex; align-items: center; gap: .35rem; }
.dreplying { margin: 0; color: var(--muted, #777); }
.disc-feed { margin-top: 14px; }
.dfeed { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.dfi { display: grid; gap: .1rem; width: 100%; text-align: left; background: transparent; border: 1px solid var(--d-line, rgba(127,127,127,.25)); border-radius: 8px; padding: .45rem .6rem; cursor: pointer; color: inherit; font: inherit; }
.dfi-s { display: block; font-size: .9rem; }
.ddisp { display: flex; gap: .6rem; align-items: flex-start; justify-content: space-between; border: 1px solid var(--flag, #C9A227); border-radius: 8px; padding: .45rem .6rem; }
.ddisp > div { display: grid; gap: .15rem; min-width: 0; }
.dd-b { font-size: .85rem; font-style: italic; overflow-wrap: anywhere; }
.dd-a { display: flex; gap: .3rem; flex: none; flex-wrap: wrap; justify-content: flex-end; }

/* Voice button in the toolbar (8 Oct 2026): one more grid column; icon only on phones */
.shl-bar:has(.shl-voice:not([hidden])) { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.shl-bar:has(.bankpill):has(.shl-voice:not([hidden])) { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
@media (max-width: 699px) { .shl-voice span { display: none; } }

/* Lessons (12 Oct 2026): a video or audio overview from Got wrong / Mix-ups */
.ls-tabs { display: flex; gap: .4rem; margin: .2rem 0 1rem; }
.ls-top { border: 1px solid var(--line); border-radius: 12px; margin: 0 0 .8rem; background: var(--surface); }
.ls-top > summary { cursor: pointer; padding: .7rem .9rem; display: flex; gap: .6rem; align-items: center; list-style: none; }
.ls-top > summary::-webkit-details-marker { display: none; }
.ls-top > summary b { flex: 1; }
.ls-sub { padding: .2rem .9rem .6rem; border-top: 1px solid var(--line); }
.ls-sub h3 { font-size: .95rem; margin: .6rem 0 .3rem; display: flex; gap: .5rem; align-items: center; }
.ls-pt { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; padding: .4rem 0; border-bottom: 1px dashed var(--line); }
.ls-pt:last-child { border-bottom: 0; }
.ls-pt input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; }
.ls-pt .t { font-weight: 600; }
.ls-pt details { grid-column: 2; font-size: .88rem; }
.ls-pt details summary { cursor: pointer; color: var(--muted); }
.ls-pt details p { margin: .35rem 0; line-height: 1.45; }
.ls-pt .ex { color: var(--muted); font-size: .82rem; margin: .2rem 0 0 1rem; }
.ls-tag { font-size: .72rem; padding: .05rem .45rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.ls-tag.cov { border-color: var(--accent); color: var(--accent); }
.ls-bar { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .8rem .9rem; margin-top: 1.2rem; scroll-margin-top: 1rem; }
/* mobile fix (13 Oct 2026): only a one-line pill stays pinned; the full options panel sits at the end of the page */
.ls-page { padding-bottom: 5.5rem; }
.ls-dock { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 6;
  display: flex; align-items: center; gap: .6rem; max-width: calc(100vw - 24px); padding: .45rem .5rem .45rem .9rem; border-radius: 999px;
  background: var(--ink); color: var(--bg); box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: .9rem; white-space: nowrap; transition: opacity .15s; }
.ls-dock.off { opacity: 0; pointer-events: none; }
.ls-dock button { font: inherit; font-weight: 600; border: 0; border-radius: 999px; padding: .4rem .8rem; background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.ls-dock button[disabled] { opacity: .5; }
@media (max-width: 560px) { .ls-opts { grid-template-columns: 1fr; } .ls-bar .row .ptab { white-space: normal; text-align: left; } }
.ls-bar .row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .3rem 0; }
.ls-bar input[type=text] { flex: 1; min-width: 12rem; font: inherit; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg, transparent); color: var(--ink); }
.ls-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .45rem; margin: .4rem 0; }
.ls-opt { text-align: left; font: inherit; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .65rem; background: none; color: var(--ink); cursor: pointer; }
.ls-opt b { display: block; font-size: .9rem; }
.ls-opt span { display: block; font-size: .8rem; color: var(--muted); line-height: 1.35; margin-top: .15rem; }
.ls-opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ls-sum { font-size: .85rem; color: var(--muted); }

/* Lessons: points that already have an explainer can't be ticked (13 Oct 2026) */
.ls-pt.ls-done .t { color: var(--muted); }
.ls-pt.ls-done input { opacity: .45; cursor: not-allowed; }

/* Week teaching notes (13 Oct 2026): merged TEACHING sections as one reading document */
.wn-deck .deck-name { font-weight: 700; }
.wnotes { max-width: 52rem; line-height: 1.6; }
.wnotes h1 { margin-bottom: .2rem; }
.wnotes h2 { margin: 2.2rem 0 .6rem; padding-top: .8rem; border-top: 2px solid var(--line); scroll-margin-top: calc(var(--shl-top, 0px) + 12px); }
.wnotes h3 { margin: 1.5rem 0 .4rem; scroll-margin-top: calc(var(--shl-top, 0px) + 12px); }
.wnotes ul, .wnotes ol { padding-left: 1.3rem; }
.wnotes li { margin: .2rem 0; }
.wnotes table { border-collapse: collapse; margin: .6rem 0; font-size: .92rem; display: block; overflow-x: auto; }
.wnotes th, .wnotes td { border: 1px solid var(--line); padding: .35rem .55rem; text-align: left; vertical-align: top; }
.wnotes th { background: color-mix(in srgb, var(--accent, #2f6f8f) 10%, transparent); }
.wnotes .wn-conflict { border-left: 3px solid var(--flag, #C9A227); background: color-mix(in srgb, var(--flag, #C9A227) 10%, transparent); padding: .4rem .7rem; border-radius: 6px; }
.wnotes .wn-src { color: var(--muted); font-size: .82rem; margin: .4rem 0 .1rem; }
.wnotes .wn-q { font-size: .82rem; margin: .1rem 0 1rem; display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; color: var(--muted); }
.wnotes .wn-q a { border: 1px solid var(--line); border-radius: 999px; padding: 0 .45rem; text-decoration: none; color: var(--accent, #2f6f8f); font-variant-numeric: tabular-nums; }
.wn-toc { display: grid; gap: .15rem; padding: .7rem .9rem; margin: 1rem 0 1.4rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.wn-toc a { text-decoration: none; color: inherit; font-size: .92rem; }
.wn-toc a.l2 { font-weight: 700; margin-top: .4rem; }
.wn-toc a.l3 { padding-left: 1rem; color: var(--muted); }
.wnotes h2.wn-parth { font-size: 1.5rem; border-top: 3px solid var(--accent, #2f6f8f); }
.wnotes h3 { font-size: 1.2rem; margin-top: 1.8rem; }
.wnotes h4 { font-size: 1.02rem; margin: 1.3rem 0 .35rem; }
.wnotes a.wn-qi { color: var(--accent, #2f6f8f); text-decoration: none; border-bottom: 1px dotted currentColor; font-variant-numeric: tabular-nums; }

/* gaps to look up (13 Oct 2026) */
.gp-link { margin-left: auto; }
.hycrumb .gp-link { font-size: .85rem; }
.gp-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0; }
.gp-bar select, .gp-bar input[type=search] { min-width: 0; flex: 1 1 9rem; max-width: 16rem; }
.gp-found { font-size: .9rem; display: flex; gap: .3rem; align-items: center; }
.gp-grp h3 { margin: 1.4rem 0 .4rem; font-size: 1.05rem; }
.gp-items { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.gp-item { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.gp-item.done { opacity: .6; }
.gp-item.done b { text-decoration: line-through; }
.gp-tick input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; }
.gp-body { flex: 1; min-width: 0; }
.gp-what { font-size: .92rem; margin: .15rem 0 .25rem; }
.gp-item .wn-q { font-size: .8rem; margin: .1rem 0 .3rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.gp-item .wn-q a { border: 1px solid var(--line); border-radius: 999px; padding: 0 .45rem; text-decoration: none; color: var(--accent, #2f6f8f); }
.gp-note { width: 100%; box-sizing: border-box; font: inherit; font-size: .85rem; padding: .25rem .45rem; border: 1px dashed var(--line); border-radius: 6px; background: transparent; color: inherit; resize: vertical; }
.gp-kind { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .05rem .4rem; border-radius: 999px; border: 1px solid currentColor; }
.gp-kind.k-MISSING { color: #b4442f; } .gp-kind.k-THIN { color: #8a6d1f; } .gp-kind.k-CONFLICT { color: #C9A227; }
.gp-kind.k-UNSOURCED { color: var(--muted); } .gp-kind.k-NOTEACH { color: #5b6fb3; }
@media (prefers-color-scheme: dark) { .gp-kind.k-MISSING { color: #e58a76; } .gp-kind.k-THIN { color: #d9b95c; } .gp-kind.k-NOTEACH { color: #9aaae6; } }
.gp-acts { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .35rem; }
.gp-acts button { font-size: .82rem; }
.gp-badge { font-size: .68rem; font-weight: 700; padding: 0 .35rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); margin-left: .2rem; }
.gp-badge.ok { color: #2e7d4f; border-color: currentColor; } .gp-badge.part { color: #8a6d1f; border-color: currentColor; }
.gp-look { margin-top: .5rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg, transparent); }
.gp-look .msg-a { margin: .3rem 0 .5rem; }
.gp-verdict { margin: 0 0 .3rem; }
.gp-verdict.v-answered b { color: #2e7d4f; } .gp-verdict.v-partly b { color: #8a6d1f; } .gp-verdict.v-not b { color: #b4442f; }
.gp-cands .gp-used { border-left: 3px solid #2e7d4f; padding-left: .45rem; }
.gp-snip { color: var(--muted); margin: .15rem 0; }
.gp-prompt { width: 100%; box-sizing: border-box; font: inherit; font-size: .88rem; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; margin: .2rem 0; }
.gp-nb { max-width: 100%; }
.gp-flash { outline: 2px solid var(--accent, #2f6f8f); outline-offset: 3px; transition: outline-color .6s; }
@media (prefers-color-scheme: dark) { .gp-badge.ok, .gp-verdict.v-answered b { color: #6fcf97; } .gp-badge.part, .gp-verdict.v-partly b { color: #d9b95c; } .gp-verdict.v-not b { color: #e58a76; } .gp-cands .gp-used { border-left-color: #6fcf97; } }

/* guideline overviews (15 Oct 2026) */
.gl-h2{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin:22px 0 8px}
.gl-frame{width:100%;border:0;border-radius:10px;background:transparent}

/* teaching notes by topic (15 Oct 2026) */
.wnotes h2 .tn-wk{font-size:.72rem;font-weight:400;margin-left:.6rem;vertical-align:middle}

.tn-list .decks { border-top: 0; margin-top: .4rem; }
.tn-list .deck-meta.wide { grid-column: 1 / -1; text-align: left; white-space: normal; font-size: .82rem; }

/* library answers on the Gaps page (16 Oct 2026) */
.gp-tbl{border-collapse:collapse;margin:.4rem 0;font-size:.9rem;display:block;overflow-x:auto}
.gp-tbl th,.gp-tbl td{border:1px solid var(--line);padding:.25rem .5rem;text-align:left;vertical-align:top}
.gp-tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--line);border-radius:3px;padding:0 .3rem;margin-left:.2rem;opacity:.8}

/* learning modules (16 Oct 2026) */
.md-mod .md-meta { color: var(--muted, #666); font-size: .92rem; }
.md-mod .md-src { color: var(--muted, #666); font-size: .85rem; margin-top: .8rem; }
.md-mod .md-tag { display: inline-block; font-size: .7rem; padding: 0 .35rem; margin-left: .2rem; border-radius: 4px; border: 1px solid var(--line); color: var(--muted, #666); vertical-align: .1em; }
.md-mod .md-tag.md-unv { border-color: var(--flag, #C9A227); }
.md-mod .md-xref { font-weight: 600; }
.md-mod .md-top { text-align: right; font-size: .8rem; margin: 1.2rem 0 -1.4rem; }
.md-mod .md-top a { color: var(--muted, #666); }
.md-toc { margin: .8rem 0 1.4rem; }
.md-toc summary { cursor: pointer; }
.md-toc a { display: block; padding: .15rem 0; }

/* modules links from week notes and gaps (17 Oct 2026) */
.wn-mods { max-width: 52rem; margin: .4rem 0 1rem; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: .92rem; }
.wn-mods a { font-weight: 600; }
.gp-mod { display: inline-block; margin: .25rem 0; font-size: .85rem; font-weight: 600; text-decoration: none; }
.gp-mod.ok::before { content: "✓ "; }

/* module lectures (17 Oct 2026) */
.lec { margin: .6rem 0 1rem; padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.lec summary { cursor: pointer; }
.lec-bar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: .6rem 0; }
.lec-bar audio { width: min(100%, 420px); }
/* knowledge checks: one three-way choice (26 Oct 2026) */
.lec-mode { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.lec-mode label { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; font-size: 13px; cursor: pointer; color: var(--muted); }
.lec-mode label + label { border-left: 1px solid var(--line); }
.lec-mode input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lec-mode label:has(input:checked) { background: var(--accent); color: var(--accent-ink, #fff); font-weight: 600; }
.lec-mode label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.lec-ch { margin: .2rem 0 0; columns: 2 18rem; }
.lec-sec { font-weight: 700; font-size: .85rem; margin: .5rem 0 .1rem; break-after: avoid; }
.lec-it { break-inside: avoid; }
.lec-ch button { text-align: left; padding: .1rem .2rem; }
.lec-ch button.on { font-weight: 700; }
.lec-h2 { font-size: .9rem; margin-left: .4rem; vertical-align: middle; }

/* topic page (17 Oct 2026) */
.tp { max-width: 60rem; }
.tp h1 { margin: .2rem 0 1rem; }
.tp-q { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 1rem 1.1rem 1.1rem; }
.tp-qhead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.tp-qhead h2 { margin: 0; }
.tp-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--line) 70%, transparent); overflow: hidden; margin: .7rem 0 .9rem; }
.tp-bar span { display: block; height: 100%; background: var(--accent, #2f6f8f); border-radius: 99px; }
.tp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.tp-stats div { display: flex; flex-direction: column; }
.tp-stats b { font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tp-stats span { font-size: .82rem; color: var(--muted, #666); }
.tp-acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.tp-h { margin: 1.6rem 0 .6rem; font-size: 1.05rem; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .7rem; }
.tp-card { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; }
.tp-card:hover, .tp-card:focus-visible { border-color: var(--accent, #2f6f8f); }
.tp-card b { font-size: 1rem; }
.tp-ic { font-size: 1.2rem; }
@media (max-width: 560px) { .tp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* dashboard: raise your readiness (17 Oct 2026) */
.dsh-focus { margin-top: 14px; }
.dsh-fr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--d-line, var(--line)); }
.dsh-fr:first-of-type { border-top: 0; }
.dsh-fn { all: unset; cursor: pointer; display: flex; flex-direction: column; min-width: 0; }
.dsh-fn b { font-size: .98rem; }
.dsh-fn span { font-size: .8rem; color: var(--d-muted, var(--muted)); }
.dsh-fn:hover b, .dsh-fn:focus-visible b { text-decoration: underline; }
.dsh-gain { font-weight: 700; font-size: 1.05rem; color: var(--d-acc, var(--accent)); font-variant-numeric: tabular-nums; }
.dsh-fa { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .dsh-fr { grid-template-columns: minmax(0, 1fr) auto; } .dsh-fa { grid-column: 1 / -1; justify-content: flex-start; } }

/* polish (17 Oct 2026): tile text never truncates — name first, details underneath */
.decks .deck { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.decks .deck .deck-meta { white-space: normal; text-align: left; overflow-wrap: anywhere; }
.tp-ic { color: var(--accent, #2f6f8f); display: inline-flex; margin-bottom: 4px; }
.tp-h { text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--muted, #666); font-weight: 600; }

/* phone header (17 Oct 2026): two rows — back and the round buttons on top, search and ask full width under them */
@media (max-width: 699px) {
  .shl .shl-bar.shl-bar {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "back gap voice bank read" "stack stack stack stack stack";
    row-gap: 8px;
  }
  .shl .shl-bar .shl-back { grid-area: back; }
  .shl .shl-bar .shl-voice { grid-area: voice; }
  .shl .shl-bar .bankpill { grid-area: bank; }
  .shl .shl-bar .shl-read { grid-area: read; }
  .shl .shl-bar .shl-stack { grid-area: stack; }
  .shl .shl-bar .shl-f { height: 40px; }
  .shl .shl-bar .shl-f input { font-size: 16px; }   /* 16px stops iOS zooming into the field */
}

/* ---------- study music (17 Oct 2026) ---------- */
.mus-mini { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 7; display: flex; align-items: center; gap: 4px;
  max-width: min(360px, calc(100vw - 32px)); padding: 6px 6px 6px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); box-shadow: 0 6px 22px rgba(0, 0, 0, .14); }
.mus-mini[hidden] { display: none; }
html.readmode .mus-mini { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.mus-b { all: unset; box-sizing: border-box; width: 36px; height: 36px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer; color: var(--ink); }
.mus-b:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.mus-b:focus-visible, .mus-now:focus-visible, .mus-cn:focus-visible, .mus-tr:focus-visible, .mus-mode:focus-visible, .mus-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mus-pp, .mus-big { background: var(--accent); color: var(--accent-ink); }
.mus-pp:hover, .mus-big:hover { background: var(--accent); filter: brightness(1.08); }
.mus-now { all: unset; cursor: pointer; min-width: 0; flex: 1; display: flex; flex-direction: column; padding: 0 6px; line-height: 1.25; }
.mus-now b, .mus-now span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mus-now b { font-size: .88rem; font-weight: 600; }
.mus-now span { font-size: .75rem; color: var(--muted); }
@media (max-width: 640px) { .mus-mini { left: 12px; right: 12px; max-width: none; } }

.mus-page { max-width: 760px; }
.mus-lede { margin: .2rem 0 1rem; max-width: 60ch; }
.mus-empty { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); }
.mus-empty b { color: var(--ink); }
.mus-empty p { margin: .3rem 0 0; }
.mus-empty code, .mus-foot code { overflow-wrap: anywhere; }
.mus-np { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 14px 16px; margin-bottom: 1.1rem; display: grid; gap: 10px; }
.mus-k { display: block; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.mus-np-t b { font-size: 1.15rem; overflow-wrap: anywhere; }
.mus-ctl { display: flex; align-items: center; gap: 6px; }
.mus-big { width: 46px; height: 46px; }
.mus-tg { color: var(--muted); margin-left: auto; }
.mus-tg.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mus-seek { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.mus-seek input, .mus-vol input { width: 100%; accent-color: var(--accent); }
.mus-time { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mus-opts { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.mus-vol, .mus-sl { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.mus-vol { flex: 1 1 180px; }
.mus-sl select { font: inherit; font-size: .85rem; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.mus-modes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: .8rem; }
.mus-mode { all: unset; cursor: pointer; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; font-size: .92rem; display: inline-flex; gap: 8px; align-items: center; }
.mus-mode span { font-weight: 500; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mus-mode.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.mus-mode.on span { color: inherit; opacity: .75; }
.mus-all { all: unset; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; font-size: .88rem; font-weight: 600; color: var(--accent); margin: 0 0 .8rem; }
.mus-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 8px; }
.mus-cat { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.mus-cat.open { border-color: var(--accent); }
.mus-cat.live .mus-cn b::after { content: " ·  playing"; font-weight: 500; font-size: .78rem; color: var(--accent); }
.mus-cn { all: unset; cursor: pointer; flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 4px 0; }
.mus-cn[disabled] { cursor: default; opacity: .6; }
.mus-cn span { font-size: .8rem; color: var(--muted); }
.mus-cp { color: var(--accent); border: 1px solid var(--line); }
.mus-list { margin-top: .4rem; }
.mus-list ol { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.mus-list li + li { border-top: 1px solid var(--line); }
.mus-tr { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; gap: 8px; align-items: center; padding: 10px 14px; }
.mus-tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.mus-tr.on { color: var(--accent); font-weight: 600; }
.mus-foot { margin-top: 1.2rem; }
body:has(.mus-mini:not([hidden])) { padding-bottom: 76px; }   /* room under the page so the music player never hides the last row */

/* toolbar (17 Oct 2026): Back · bank pill · search/ask · Voice · Music · Read aloud. Flex on wider screens so a hidden
   button leaves no gap; phones keep two rows, the round buttons on top with the bank pill beside Back. */
@media (min-width: 700px) {
  .shl .shl-bar.shl-bar { display: flex; }
  .shl .shl-bar > .shl-stack { flex: 1 1 auto; }
  .shl .shl-bar > .bankpill { align-self: flex-start; margin-top: 11px; }
}
.shl-music.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
@media (max-width: 699px) {
  .shl .shl-bar.shl-bar {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "back bank gap voice music read" "stack stack stack stack stack stack";
  }
  .shl .shl-bar .shl-music { grid-area: music; }
  .shl .shl-bar .bankpill { justify-self: start; }
  .shl-music span { display: none; }
}
/* study music panel under the toolbar button (17 Oct 2026) */
.mus-pop { position: fixed; right: 16px; z-index: 45; width: min(440px, calc(100vw - 24px)); overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); color: var(--ink); box-shadow: 0 14px 40px rgba(0, 0, 0, .2); }
.mus-pop .mus-page { max-width: none; }
.mus-ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mus-ph b { font-size: 1rem; }
.mus-pop .mus-np { padding: 12px; margin-bottom: .8rem; }
.mus-pop .mus-cats { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.mus-pop .mus-foot { font-size: .78rem; }
@media (max-width: 699px) { .mus-pop { left: 12px; right: 12px; width: auto; } }

/* ---------- lecture follow-along (18 Oct 2026): a slim dock + transcript, calm by design ---------- */
.lfa { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 8;
  width: min(760px, calc(100vw - 24px)); border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .14); overflow: hidden; }
.lfa[hidden] { display: none; }
@media (min-width: 1024px) { .lfa { left: calc(50% + 140px); width: min(760px, calc(100vw - 320px)); } }   /* centred on the page, not the menu */
.lfa-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; }
.lfa-b, .lfa-t, .lfa-back { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; }
.lfa-b { width: 38px; height: 38px; flex: none; color: var(--ink); }
.lfa-ff svg { transform: scaleX(-1); }      /* forward 10 s: the back arrow, mirrored (26 Oct 2026) */
.lfa-b:hover, .lfa-t:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.lfa-pp { background: var(--accent); color: var(--accent-ink); }
.lfa-pp:hover { background: var(--accent); filter: brightness(1.08); }
.lfa-now { all: unset; cursor: pointer; flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 6px; line-height: 1.25; }
.lfa-now b, .lfa-now span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lfa-now b { font-size: .9rem; font-weight: 600; }
.lfa-now span { font-size: .76rem; color: var(--muted); }
.lfa-t { height: 36px; padding: 0 12px; font-size: .85rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); }
.lfa-t.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lfa-back { height: 34px; padding: 0 12px; font-size: .82rem; font-weight: 600; color: var(--accent-ink); background: var(--accent); flex: none; }
.lfa-back[hidden] { display: none; }
.lfa-b:focus-visible, .lfa-t:focus-visible, .lfa-back:focus-visible, .lfa-now:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lfa-panel { position: relative; border-bottom: 1px solid var(--line); }
.lfa-panel[hidden] { display: none; }
.lfa-lines { max-height: min(34vh, 300px); overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 40%; scroll-padding: 40%;
  font-family: var(--serif, Georgia, serif); font-size: 1.04rem; line-height: 1.6; }
.lfa-lines:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lfa-l { margin: 0 0 .7rem; padding: .3rem .55rem; border-radius: 9px; transition: opacity .45s ease, background-color .45s ease, filter .45s ease; cursor: pointer; }
.lfa-l.lfa-past { opacity: .42; }
.lfa-l.lfa-next { opacity: .6; }
.lfa-l.lfa-cur { opacity: 1; background: color-mix(in srgb, var(--accent) 9%, transparent); }
.lfa-l.lfa-hid { filter: blur(5px); user-select: none; }
.lfa-s { margin-left: 1.2rem; font-style: italic; }
.lfa-who { display: block; font-family: var(--sans, system-ui); font-style: normal; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: .1rem; }
.lfa-p { font-family: var(--sans, system-ui); font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: 10px; cursor: default; }
.lfa-pbar { flex: 1; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; font-style: normal; }
.lfa-pbar i { display: block; height: 100%; width: 0; background: var(--accent); }
.lfa-p:not(.lfa-cur) .lfa-pbar i { width: 0 !important; }
.lfa-note { font-family: var(--sans, system-ui); font-size: .85rem; color: var(--muted); margin: 0 0 .6rem; }
.lfa-pback { position: absolute; right: 12px; bottom: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.lfa-untimed .lfa-l { opacity: 1; cursor: default; }
/* the module page while following: room under the text for the dock; the section being taught is marked quietly */
html.lfa-on body { padding-bottom: calc(var(--lfa-h, 0px) + 24px); }
html.lfa-on .mus-mini { bottom: calc(var(--lfa-h, 0px) + 24px); }
.md-mod h2 { scroll-margin-top: calc(var(--shl-top, 0px) + 12px); }
.md-mod h2.md-now { background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 8px; padding: .15rem .5rem; margin-left: -.5rem; margin-right: -.5rem; transition: background-color .45s ease; }
.md-mod h2.md-now::after { content: "Now teaching"; display: inline-block; margin-left: .6rem; vertical-align: .25em; font: 600 .68rem/1 var(--sans, system-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 699px) {
  .lfa { bottom: max(8px, env(safe-area-inset-bottom, 0px)); width: calc(100vw - 16px); border-radius: 14px; }
  .lfa-t span { display: none; } .lfa-t { width: 36px; padding: 0; }
  .lfa-lines { max-height: 30vh; padding: 14px 14px 40%; font-size: 1rem; }
  html.lfa-on .mus-mini { left: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .lfa-l, .md-mod h2.md-now { transition: none; } }

/* ---------- read-aloud dock (18 Oct 2026): the same calm follow-along as the lecture dock ---------- */
.ttsbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 9;
  width: min(720px, calc(100vw - 24px)); border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .14); overflow: hidden; }
@media (min-width: 1024px) { .ttsbar { left: calc(50% + 140px); width: min(720px, calc(100vw - 320px)); } }
html.readmode .ttsbar { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
html.lfa-on .ttsbar { bottom: calc(var(--lfa-h, 0px) + 22px); }
.tts-main { display: flex; align-items: center; gap: 4px; padding: 8px 10px; }
.ttsbar .ttsb, .tts-back, .tts-chip { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; }
.ttsbar .ttsb { width: 36px; height: 36px; flex: none; color: var(--ink); }
.ttsbar .ttsb:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.ttsbar .ttsplay { width: 40px; height: 40px; background: var(--accent); color: var(--accent-ink); }
.ttsbar .ttsplay:hover { background: var(--accent); filter: brightness(1.08); }
.tts-info { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 6px; line-height: 1.25; }
.tts-info b, .tts-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tts-info b { font-size: .9rem; font-weight: 600; }
.tts-info span { font-size: .76rem; color: var(--muted); }
.tts-back { height: 34px; padding: 0 12px; font-size: .82rem; font-weight: 600; color: var(--accent-ink); background: var(--accent); flex: none; }
.tts-back[hidden], .tts-opts[hidden] { display: none; }
.ttsbar .ttsb:focus-visible, .tts-back:focus-visible, .tts-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tts-opts { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.tts-opts label { display: flex; align-items: center; gap: 6px; }
.ttssel { font: inherit; font-size: .82rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.tts-chip { height: 32px; padding: 0 12px; font-size: .82rem; font-weight: 600; color: var(--ink); border: 1px solid var(--line); }
.tts-chip:hover { border-color: var(--accent); }
html.tts-on body { padding-bottom: calc(var(--tts-clear, 0px) + 16px); }
html.tts-on .mus-mini { bottom: calc(var(--tts-clear, 0px) + 8px); }
/* focus: what's being read stays full, the rest of the read text dims, the sentence being read gets a soft tint */
.se-blk { transition: opacity .45s ease; }
.se-follow .se-blk:not(.se-reading):not(.se-anc) { opacity: .5; }
.se-reading.se-all { background: color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 6px; }
::highlight(se-sent) { background-color: color-mix(in srgb, var(--accent) 16%, transparent); }
.se-blk { cursor: default; }
html.tts-on #after .se-blk, html.tts-on .md-mod .se-blk { cursor: pointer; }
@media (max-width: 699px) {
  .ttsbar { width: calc(100vw - 16px); bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
  .ttsbar .ttsb { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .se-blk { transition: none; } }
/* lecture follow-along in the notes (18 Oct 2026): the note being taught stays full with a soft tint, the rest of its section dims */
.lf-blk { transition: opacity .45s ease, background-color .45s ease; }
html.lf-follow .lf-blk:not(.lf-cur) { opacity: .5; }
.lf-cur { background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 6px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); }
@media (prefers-reduced-motion: reduce) { .lf-blk { transition: none; } }
/* lecture: where you are (19 Oct 2026) */
.lec-where { color: var(--muted); }
.lec-prog { display: block; height: 4px; margin: .45rem 0 .1rem; border-radius: 2px; background: var(--line); overflow: hidden; }
.lec-prog[hidden] { display: none; }
.lec-prog i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; }
.lec-n { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.lec-it.done .lec-n::after { content: " ✓"; color: var(--ok); }
.lec-it.done button { color: var(--muted); }
.lec-it.here { background: color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 8px; padding: .2rem .4rem; margin: .1rem -.4rem; }
.lec-it.here button { font-weight: 700; color: var(--accent); }
.lec-here { display: block; font-size: .78rem; color: var(--accent); font-weight: 600; margin: .1rem 0 .15rem 1.6rem; }
.lec-here i { display: block; height: 3px; margin-top: .25rem; border-radius: 2px; background: color-mix(in srgb, var(--accent) 22%, transparent); overflow: hidden; }
.lec-here i i { margin: 0; height: 100%; width: 0; background: var(--accent); }
.usg-pgy { font: inherit; font-size: .82rem; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }

.usg-trk { font: inherit; font-size: .78rem; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); max-width: 13rem; }

/* ---------- resident app (23 Oct 2026) ---------- */
.rh { max-width: 980px; }
.rh-who { margin: -.2rem 0 1rem; }
.rh-h { margin: 1.8rem 0 .3rem; font-size: 1.25rem; }
.rh-g { margin: 1.1rem 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.rh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .6rem; margin-top: .7rem; }
.rh-tile { display: flex; flex-direction: column; gap: .15rem; padding: .8rem .95rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; }
.rh-tile:hover, .rh-tile:focus-visible { border-color: var(--accent); }
.rh-tile b { font-size: 1rem; }
.rh-cont { display: inline-flex; flex-direction: column; gap: .1rem; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; margin-top: .4rem; }
.rh-cont:hover { border-color: var(--accent); }
.rh-qb { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem 1rem; align-items: center; margin: 2rem 0 .5rem; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; }
.rh-qb span:not(.rh-go) { grid-column: 1; color: var(--muted); font-size: .9rem; }
.rh-qb .rh-go { grid-row: 1 / span 2; grid-column: 2; color: var(--accent); font-weight: 600; }
.rh-qb:hover { border-color: var(--accent); }
.usg-wr { font-size: .78rem; color: var(--muted); white-space: nowrap; margin-left: .3rem; }
#viewas { font: inherit; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }

/* usage table in Account (24 Oct 2026): one control per column, compact and centred; the app's form rule makes
   every select full-width with big padding, which pushed these rows out of line */
.usg-t td, .usg-t th { vertical-align: middle; }
.usg-t td.ctl { padding-top: 4px; padding-bottom: 4px; }
.usg-t .ctr { text-align: center; }
.usg-t select.usg-pgy, .usg-t select.usg-trk { width: auto; min-width: 0; margin: 0; padding: 3px 6px; font-size: .82rem; line-height: 1.3; border-radius: 6px; height: auto; }
.usg-t select.usg-trk { max-width: 15rem; }
.usg-t input.usg-w { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); vertical-align: middle; }

/* Mark for review · Question discussions · Edit mode (25 Oct 2026) */
.disc-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.mark-btn.on { color: #b4442f; border-color: currentColor; }
.shl-edit.on { outline: 2px solid var(--accent, #2f6f8f); outline-offset: 1px; }
.editpill { position: fixed; right: 14px; bottom: 14px; z-index: 60; border: 1px solid var(--accent, #2f6f8f); background: var(--surface); color: var(--accent, #2f6f8f);
  border-radius: 999px; padding: .35rem .8rem; font: inherit; font-size: .85rem; font-weight: 700; box-shadow: 0 2px 10px rgba(0,0,0,.15); cursor: pointer; }
.edq { margin-left: .3rem; font-size: .82rem; }
.edtag { margin-left: .3rem; font-size: .7rem; }
body.ed-open { overflow: hidden; }
.ed-ov { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.45); display: flex; justify-content: center; align-items: flex-start; padding: 3vh 12px; overflow-y: auto; }
.ed-box { background: var(--bg, #fff); color: inherit; width: min(920px, 100%); border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.3); display: flex; flex-direction: column; max-height: 94vh; }
.ed-h, .ed-f { display: flex; gap: .6rem; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ed-f { border-bottom: 0; border-top: 1px solid var(--line); }
.ed-h .grow, .ed-f .grow, .dlg-a .grow { flex: 1; }
.ed-body { padding: .6rem 1rem 1rem; overflow-y: auto; }
.ed-l { display: block; font-weight: 700; font-size: .85rem; margin: .9rem 0 .3rem; }
.ed-rich, .ed-raw { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .65rem; background: var(--surface); color: inherit; min-height: 2.4rem; }
.ed-rich:focus, .ed-raw:focus { outline: 2px solid var(--accent, #2f6f8f); outline-offset: 1px; }
.ed-raw { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; min-height: 6rem; resize: vertical; }
.ed-e.ed-rich { min-height: 14rem; }
.ed-opts { display: grid; gap: .4rem; }
.ed-opt { display: flex; gap: .4rem; align-items: flex-start; }
.ed-opt .ed-ot { flex: 1; min-height: 2rem; }
.ed-key { display: flex; gap: .25rem; align-items: center; padding-top: .45rem; cursor: pointer; }
.ed-del { padding: .2rem .45rem; }
.ed-log { margin-top: 1rem; }
.mk-card .mk-who { display: grid; gap: .45rem; margin-bottom: .6rem; }
.mk-r { font-size: .92rem; margin: .1rem 0 0 .2rem; }
.mk-q { border-top: 1px solid var(--line); padding-top: .6rem; }
.mk-opts .is-key { font-weight: 700; }
.mk-expl summary { cursor: pointer; font-weight: 700; margin: .5rem 0; }
.dlist .dfi { width: 100%; text-align: left; }
.dlg textarea { width: 100%; box-sizing: border-box; font: inherit; margin: .6rem 0; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg, transparent); color: inherit; resize: vertical; }
.dlg h3 { margin: 0 0 .3rem; }
.dlg-a { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.mk-opts { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .25rem; }
.mk-opts li { display: flex; gap: .55rem; align-items: baseline; padding: .25rem .4rem; border-radius: 6px; }
.mk-opts li.is-key { background: color-mix(in srgb, #2e7d4f 12%, transparent); }
.mk-opts .L { font-weight: 700; min-width: 1.2rem; }

/* first/second pass targets in the plan editors (27 Oct 2026) */
.pl-tg { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 .6rem; padding: .55rem .75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); font-size: .92rem; }
.wp-tg { margin: 0 0 .5rem; font-size: .95rem; }
/* Progress → Done before the app (27 Oct 2026) */
.bf summary { cursor: pointer; font-weight: 600; margin: .3rem 0; }
.bf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .35rem 1.2rem; margin: .6rem 0; }
.bf-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem 0; border-bottom: 1px solid var(--line); }
.bf-row small { display: block; }
.bf-in { display: flex; gap: .3rem; align-items: center; }
.bf-in input { width: 4.6rem; }

/* Edit mode: pick a part, then delete or move it; the explanation's sections (27 Oct 2026) */
.ed-tools { position: sticky; top: -.6rem; z-index: 2; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0 -1rem; padding: .5rem 1rem;
  background: var(--bg, #fff); border-bottom: 1px solid var(--line); }
.ed-tools .grow { flex: 1; }
.ed-tsel { min-width: 0; flex: 1 1 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-tools button:disabled, .ed-sec button:disabled { opacity: .35; }
.ed-danger { color: #b3261e; }
.ed-rich .ed-sel { outline: 2px dashed #b3261e; outline-offset: 2px; background: rgba(179,38,30,.06); }
.ed-secs { display: grid; gap: .25rem; margin-bottom: .45rem; }
.ed-sec { display: flex; gap: .25rem; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: .15rem .3rem; background: var(--surface); }
.ed-sec.on { border-color: #b3261e; }
.ed-secn { flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: inherit; font: inherit; font-size: .85rem; padding: .3rem .25rem; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-sec .quiet.small { padding: .2rem .5rem; }

/* Stale adjudications page (27 Oct 2026) */
.st-card { display: grid; gap: .5rem; }
.st-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.st-head .grow, .st-kh .grow { flex: 1; }
.st-q summary { cursor: pointer; font-size: .92rem; }
.st-k { border-top: 1px solid var(--line); padding-top: .45rem; }
.st-kh { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.st-ok { color: #1e7d3a; font-weight: 600; }
.st-no { color: #b3261e; font-weight: 700; }
.st-cmp summary { cursor: pointer; margin: .3rem 0; }
.st-two { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.st-two > div { min-width: 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; padding: .4rem .6rem; }
.st-cap { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .7; margin-bottom: .3rem; }
.st-v { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; border-top: 1px solid var(--line); padding-top: .45rem; }
.st-pr { margin: .5rem 0; }
.st-pt { width: 100%; box-sizing: border-box; font: inherit; font-size: .85rem; }
@media (max-width: 760px) { .st-two { grid-template-columns: 1fr; } }
.st-nball, .st-nbq { display: inline-flex; gap: .35rem; align-items: center; }
.st-nball select, .st-nbq select { max-width: 16rem; }
.st-sum { margin: .1rem 0; font-size: .9rem; }
.st-sum.ok { color: #1e7d3a; }
.st-sum.warn { color: #9a4b00; }
.st-box { border: 1px solid var(--line); border-radius: 10px; padding: .45rem .6rem; display: grid; gap: .3rem; }
.st-part > summary { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; cursor: pointer; padding: .2rem 0; }
.st-part > summary .grow { flex: 1; }
.st-part.bad > summary .st-pn { color: #b3261e; }
.st-part > .expl { border-left: 3px solid var(--line); padding-left: .6rem; margin: .3rem 0 .5rem; overflow-x: auto; }
.st-pn { font-weight: 600; font-size: .9rem; }
.st-vctl { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; }
.st-vctl .grow { flex: 1; }
.st-vctl select { max-width: 14rem; }
.st-done { color: #1e7d3a; }

/* NotebookLM verification box (verify.js) */
.vfy-in { padding: 4px 0 2px; }
.vfy-note { font-size: .85em; color: var(--muted); margin: 0 0 8px; }
.vfy-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.vfy-tag { display: inline-block; font-size: .8em; font-weight: 600; padding: 1px 8px; border-radius: 999px; margin-left: 4px; }
.vfy-tag.ok { background: var(--ok-bg); color: var(--ok); }
.vfy-tag.bad { background: var(--bad-bg); color: var(--bad); }
.vfy-tag.unsure { background: rgba(128,128,128,.15); color: inherit; }
.vfy-p { margin: 4px 0 10px; }
.vfy-pl { display: block; font-size: .85em; font-weight: 600; margin: 6px 0; }
.vfy-pl textarea { display: block; width: 100%; box-sizing: border-box; font: inherit; font-weight: 400; margin-top: 3px; }
.vfy-res { border-top: 1px solid var(--line, rgba(128,128,128,.25)); padding: 8px 0 4px; }
.vfy-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vfy-h .muted.small { font-size: .8em; }
.vfy-b { margin-top: 4px; }

.vfy-shared { margin-bottom: 8px; }
.vfy-qi { margin: 0 0 14px; }
.vfy-opts li.k { font-weight: 600; }

/* notification bell and list (28 Oct 2026) */
.shl-bell { position: relative; }
.bell-n { position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--bad); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; box-sizing: border-box; }
.notif-pop { max-height: min(70vh, 560px); }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif + .notif { border-top: 1px solid var(--line); }
.notif button { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; border: 0; padding: 10px 6px 10px 14px; color: inherit; font: inherit; cursor: pointer; border-radius: 10px; position: relative; }
.notif button:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.notif.unread button::before { content: ""; position: absolute; left: 3px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.notif-t { font-weight: 600; font-size: .92rem; }
.notif.unread .notif-t { color: var(--ink); }
.notif:not(.unread) .notif-t { font-weight: 500; }
.notif-b { font-size: .85rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.notif-w { font-size: .78rem; color: var(--muted); }
@media (max-width: 699px) {
  .shl .shl-bar.shl-bar { grid-template-columns: auto auto minmax(0, 1fr) auto auto auto auto; grid-template-areas: "back bank gap voice bell music read" "stack stack stack stack stack stack stack"; }
  .shl .shl-bar .shl-bell { grid-area: bell; }
}

/* Merged versions desk (restore.js) */
.rs-it { margin: 0 0 18px; }
.rs-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.rs-read { font-size: .9rem; margin: 0 0 10px; }
.rs-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.rs-side { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.rs-side h3 { margin: 0 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rs-q { margin-bottom: 6px; }
.rs-sec { border-top: 1px solid var(--line); padding: 10px 0 4px; }
.rs-sh { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.rs-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }   /* left: Question 1, right: Question 2 */
.rs-cols.rs-off { opacity: .4; }
.rs-lab { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.rs-ed, .rs-ro { max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: .88rem; min-height: 60px; }
.rs-ed { background: var(--surface); outline: none; }
.rs-ed:focus { border-color: var(--accent); }
.rs-ro table, .rs-ed table { font-size: .8rem; }
/* Question 1 (the merged version) / Question 2 (the consolidated card): numbered badges and pick-one choices */
.rs-n { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .35em; border-radius: 999px; font-size: .78rem;
  font-weight: 700; color: #fff; background: var(--accent); letter-spacing: 0; text-transform: none; vertical-align: middle; }
.rs-n.n2 { background: var(--flag, #A8741A); }
.rs-n.nn { background: var(--ok); }
.rs-n.n0 { background: var(--muted); }
.rs-side.s1 { border-left: 4px solid var(--accent); }
.rs-side.s2 { border-left: 4px solid var(--flag, #A8741A); }
.rs-side h3 { text-transform: none; letter-spacing: 0; font-size: .9rem; color: inherit; }
.rs-side .rs-who { display: block; font-weight: 400; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.rs-side.sel { box-shadow: 0 0 0 2px var(--accent) inset; }
.rs-side.s2.sel { box-shadow: 0 0 0 2px var(--flag, #A8741A) inset; }
.rs-keep { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: .88rem; cursor: pointer; }
.rs-choice { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.rs-choice label { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px 4px 6px; font-size: .85rem; cursor: pointer; }
.rs-choice label.on { border-color: var(--accent); background: var(--surface); font-weight: 600; }
.rs-choice input { margin: 0; }
.rs-col { border-radius: 10px; padding: 6px; border: 2px solid transparent; min-width: 0; }
.rs-col.sel { border-color: var(--accent); }
.rs-col.c2.sel { border-color: var(--flag, #A8741A); }
.rs-col.cn2.sel { border-color: var(--flag, #A8741A); }
.rs-col:not(.sel) .rs-ed, .rs-col:not(.sel) .rs-ro { opacity: .6; }
.rs-col .rs-lab { text-transform: none; letter-spacing: 0; font-size: .82rem; color: inherit; font-weight: 600; }
.rs-col .rs-lab .muted { font-weight: 400; }
.rs-warn { font-size: .85rem; color: var(--bad); margin: 0 0 6px; }
.rs-sum { font-size: .9rem; margin: 10px 0 0; }
/* Merge editor: the Final version (built from blocks) and the versions to take parts from */
.rf-final { border: 2px solid var(--accent); border-radius: 10px; padding: 8px 10px; margin: 4px 0 8px; background: var(--surface); }
.rf-fh { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 6px; }
.rf-fa { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: .85rem; }
.rf-b { display: flex; gap: 6px; align-items: flex-start; padding: 3px 0; }
.rf-b .rf-body { flex: 1; min-width: 0; border: 1px dashed transparent; border-radius: 6px; padding: 2px 6px; outline: none; min-height: 1.4em; font-size: .9rem; }
.rf-b .rf-body:hover { border-color: var(--line); }
.rf-b .rf-body:focus { border-color: var(--accent); border-style: solid; }
.rf-b.rf-li .rf-body::before { content: "• "; }
.rf-b.rf-li2 { padding-left: 22px; }
.rf-b.rf-li2 .rf-body::before { content: "◦ "; }
.rf-b .rf-body:empty::after { content: "Type here…"; color: var(--muted); }
.rf-tools { display: inline-flex; gap: 2px; white-space: nowrap; opacity: .55; }
.rf-b:hover .rf-tools, tr:hover .rf-tools { opacity: 1; }
.rf-tools .link, .rf-tc .link { padding: 0 3px; font-size: .9rem; }
.rf-t { width: 100%; border-collapse: collapse; font-size: .82rem; margin: 4px 0; }
.rf-t td, .rf-t th { border: 1px solid var(--line); padding: 4px 6px; vertical-align: top; text-align: left; }
.rf-edit td[contenteditable], .rf-edit th[contenteditable] { outline: none; }
.rf-edit td[contenteditable]:focus, .rf-edit th[contenteditable]:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.rf-edit td[contenteditable]:empty::after { content: "…"; color: var(--muted); }
.rf-tc { width: 1%; white-space: nowrap; border: none !important; }
.rf-ac { width: 1%; border: none !important; padding: 2px !important; }
.rf-add { border: 1px solid var(--accent); color: var(--accent); background: none; border-radius: 6px; width: 1.7em; height: 1.7em; line-height: 1; cursor: pointer; font-weight: 700; padding: 0; flex: none; }
.rf-add:hover { background: var(--accent); color: var(--accent-ink); }
.rf-used { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; color: var(--ok); font-weight: 700; flex: none; }
.rf-s { display: flex; gap: 6px; align-items: flex-start; padding: 2px 0; font-size: .86rem; }
.rf-s.rf-li > div::before { content: "• "; }
.rf-s.rf-li2 { padding-left: 18px; }
.rf-s.rf-li2 > div::before { content: "◦ "; }
.rf-srcs > summary { cursor: pointer; margin: 4px 0; color: var(--muted); }
.rf-src { max-height: 420px; }
@media (max-width: 999px) { .rs-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 699px) { .rs-pair { grid-template-columns: minmax(0, 1fr); } }
/* Merged versions: one collapsible block per kept NotebookLM run */
.rf-run { border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; margin: 4px 0; }
.rf-run > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.rf-run[open] > summary { margin-bottom: 4px; }

/* who's online (30 Oct 2026; presence.js): bubbles in the toolbar, a list with emojis, an emoji floating in */
.pres { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 8px; border-radius: 14px;
  border: 1px solid var(--s-line, var(--line)); background: var(--s-card, var(--surface)); color: var(--s-ink, var(--ink)); box-shadow: var(--s-shadow, none); cursor: pointer; }
.pres.pr-none { color: var(--muted); }
.pr-b { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 8%, transparent); font: 600 12.5px/1 var(--sans, inherit); }
.pres.pr-none .pr-b { background: none; padding: 0 2px; }
.pr-b.pr-away, .pr-list li.pr-away { opacity: .5; }
.pr-av { --h: 210; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 12px/1 var(--sans, inherit); font-style: normal;
  color: #fff; background: hsl(var(--h) 55% 45%); box-shadow: 0 0 0 2px var(--s-card, var(--surface)); position: relative; }
.pr-b:not(.pr-away) .pr-av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--s-card, var(--surface)); }
.pr-more { font: 600 12px/1 var(--sans, inherit); color: var(--muted); padding: 0 2px; }
.pres-pop { max-height: min(70vh, 560px); width: min(380px, calc(100vw - 24px)); }
.pr-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 12px; }
.pr-list li { display: flex; gap: 10px; align-items: flex-start; }
.pr-av.pr-big { width: 36px; height: 36px; font-size: 15px; }
.pr-who { min-width: 0; display: grid; gap: 2px; }
.pr-who > span { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.pr-emo { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pr-emo button { font-size: 18px; line-height: 1; width: 36px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; padding: 0; }
.pr-emo button:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.pr-emo button:disabled { opacity: .4; cursor: default; }
.pr-inv { display: flex; gap: 8px; align-items: center; font-size: .88rem; border-top: 1px solid var(--line); padding-top: 10px; }
.pr-fly { position: fixed; left: 50%; top: calc(var(--shl-top, 60px) + 24px); z-index: 60; transform: translateX(-50%); display: grid; justify-items: center; gap: 4px;
  pointer-events: none; animation: pr-up 3.2s ease-out forwards; }
.pr-fe { font-size: 64px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25)); }
.pr-ff { font: 600 13px/1 var(--sans, inherit); background: var(--ink); color: var(--bg); padding: 5px 10px; border-radius: 999px; }
@keyframes pr-up { 0% { opacity: 0; transform: translate(-50%, 40px) scale(.6); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
  25% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .pr-fly { animation: pr-fade 3.2s linear forwards; } @keyframes pr-fade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } } }
@media (max-width: 1023px) { .pr-n { display: none; } .pr-b { padding: 0; background: none; } .pres { gap: 0; } .pres .pr-b + .pr-b { margin-left: -8px; } }
@media (max-width: 699px) {
  .pres { height: 40px; border-radius: 12px; padding: 0 6px; }
  .shl .shl-bar .pres { grid-area: gap; justify-self: end; }
}

/* study together (30 Oct 2026; group.js) */
.g-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 0; padding: 7px 10px; border-radius: 12px; font-size: .85rem;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
.g-strip .g-mode { color: var(--muted); }
.g-strip .g-act { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.view > .g-strip, #view > .g-strip { margin: 0 0 12px; }
.opt.g-held { outline: 2px dashed var(--accent); outline-offset: 2px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.g-wait { margin: 10px 0; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); font-size: .92rem; }
.g-picks { margin: 10px 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.g-picks .g-ph, .g-pop .g-ph { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.g-picks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.g-picks li b { display: inline-block; min-width: 1.6em; }
.g-picks li.g-right { color: var(--ok); font-weight: 600; }
.g-pop { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 10px; }
.g-pop p { margin: 0 0 8px; }
.g-row { display: flex; gap: 6px; flex-wrap: wrap; }
.g-tag { font-weight: 500; font-size: .75rem; color: var(--accent); margin-left: 4px; }
.g-in { font-size: .78rem; color: var(--ok); }
.g-pb { justify-self: start; margin-top: 2px; }
.pr-b.pr-grp .pr-av { box-shadow: 0 0 0 2px var(--s-card, var(--surface)), 0 0 0 4px var(--accent); }
.g-invite { position: fixed; z-index: 61; left: 50%; top: calc(var(--shl-top, 60px) + 12px); transform: translateX(-50%); width: min(460px, calc(100vw - 24px));
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 14px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0, 0, 0, .22); }
/* study together: where the host is reading, and the chip to catch up after scrolling yourself (31 Oct 2026) */
.g-here { box-shadow: -10px 0 0 -6px var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); transition: background .3s; position: relative; }
.g-catch { position: fixed; z-index: 55; left: 50%; bottom: 84px; transform: translateX(-50%); padding: 9px 16px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--accent-ink, #fff); font: 600 14px/1 var(--sans, inherit); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); cursor: pointer; }
/* group voice (31 Oct 2026; gvoice.js) */
.g-voice { flex-basis: 100%; }
.gv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.gv-n { font-size: .82rem; color: var(--muted); }
.gv-p { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .82rem; font-weight: 600; transition: box-shadow .15s, border-color .15s; }
.gv-p small { font-weight: 400; color: var(--muted); }
.gv-p.v-talk { border-color: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 35%, transparent); }
/* the call bar: on screen on every page while in a call (2 Nov 2026) */
.gv-bar { position: fixed; z-index: 58; left: 50%; transform: translateX(-50%); bottom: calc(72px + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: calc(100vw - 24px);
  display: grid; gap: 6px; padding: 8px 10px; border-radius: 16px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
.gv-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.gv-p i { font-style: normal; display: none; }
.gv-b { min-height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 13px/1 var(--sans, inherit); cursor: pointer; }
.gv-b[aria-pressed="true"] { color: var(--bad); border-color: var(--bad); }
.gv-end { background: var(--bad); border-color: var(--bad); color: #fff; }
.gv-tip { font-size: .8rem; color: var(--muted); text-align: center; }
.gv-call .g-catch { bottom: 136px; }
.gv-call #toast { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 560px) { .gv-p .gv-name { display: none; } .gv-p i { display: inline; } }
.g-hostrow { margin-top: 8px; align-items: center; }
/* the Study room page (2 Nov 2026; room.js) */
.room { max-width: 720px; margin: 0 auto; display: grid; gap: 14px; padding-bottom: 120px; }
.room h1 { margin: 0; }
.room-c { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); min-width: 0; }
.room-c h2 { margin: 0 0 6px; font-size: 1.05rem; }
.room-c p { margin: 0 0 10px; }
.room-go { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.room-people, .room-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.room-people li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.room-people li button { margin-left: auto; }
.room-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.room-dot.on { background: var(--ok); }
.room-dot.away { background: var(--muted); }
.room-s { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.room-s:first-child { border-top: 0; padding-top: 0; }
.room-s > div:first-child { min-width: 0; flex: 1 1 220px; overflow-wrap: anywhere; }
.room-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.room-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 12px 0 8px; }
.room-form label { display: grid; gap: 3px; font-size: .85rem; flex: 1 1 180px; min-width: 0; }
.room-form input { width: 100%; box-sizing: border-box; }
/* Topics index and "Part of" links (31 Oct 2026) */
.tpx-tile .tpx-open { display: grid; gap: 3px; color: inherit; text-decoration: none; }
.tpx-tile .tpx-open:hover b { text-decoration: underline; }
.tpx-tile .tpx-open span { font-size: .88rem; color: var(--muted); }
.partof { margin: 6px 0 12px; font-size: .88rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.partof a { font-weight: 600; }
.pg-rh + .partof { padding: 0 4px; }

/* lecture transcripts (31 Oct 2026) */
.lec-hits{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.tx-body{max-height:50vh;overflow-y:auto;position:relative;margin-top:8px}
.tx-line{display:flex;gap:10px;width:100%;box-sizing:border-box;overflow-wrap:anywhere;text-align:left;background:none;border:0;border-radius:8px;padding:6px 8px;color:var(--ink);font:inherit;font-size:14px;line-height:1.5;cursor:pointer}
.tx-line[hidden]{display:none}
.tx-line:hover{background:var(--surface)}
.tx-line.on{background:var(--surface);box-shadow:inset 3px 0 0 var(--accent)}
.tx-at{flex:none;width:58px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;padding-top:2px}
/* Day to Day mode (3 Nov 2026; d2d.js) */
.d2d { max-width: 820px; margin: 0 auto; padding-bottom: 80px; }
.d2d h1 { margin: .2rem 0 .4rem; }
.d2d-note { font-size: .82rem; color: var(--muted); margin: .4rem 0 1rem; }
.d2d-search { display: flex; gap: 8px; margin: 0 0 14px; }
.d2d-search input { flex: 1; min-width: 0; }
.d2d-secs { display: grid; gap: 14px; }
.d2d-sec { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); min-width: 0; }
.d2d-sec h2 { margin: 0 0 2px; font-size: 1.1rem; }
.d2d-sec h2 a { color: inherit; text-decoration: none; }
.d2d-list { display: grid; gap: 2px; margin: 6px 0; }
.d2d-row { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; padding: 9px 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.d2d-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.d2d-row > span:last-child { grid-column: 1 / -1; font-size: .86rem; color: var(--muted); }
.d2d-row > b { grid-column: 1; }
.d2d-draft { display: inline-block; justify-self: start; align-self: center; font: 600 10.5px/1 var(--sans, inherit); letter-spacing: .05em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; color: var(--flag, #9a6a00); border: 1px solid currentColor; vertical-align: middle; }
.d2d-more { font-size: .86rem; }
.d2d-h { font-size: 1.05rem; margin: 1.2rem 0 .4rem; }
.d2d-meta { font-size: .82rem; color: var(--muted); margin: 0 0 1rem; }
.d2d-body { line-height: 1.6; overflow-wrap: break-word; }
.d2d-body h2 { font-size: 1.15rem; margin: 1.4rem 0 .4rem; }
.d2d-body h3 { font-size: 1rem; margin: 1.1rem 0 .3rem; }
.d2d-body table { border-collapse: collapse; width: 100%; margin: .6rem 0; font-size: .92rem; }
.d2d-body th, .d2d-body td { border: 1px solid var(--line); padding: .4rem .55rem; text-align: left; vertical-align: top; }
.d2d-body th { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.d2d-body .d2d-key { padding: 10px 14px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-radius: 0 10px 10px 0; margin: .8rem 0; }
.d2d-body .d2d-warn { padding: 10px 14px; border-left: 3px solid var(--bad); background: color-mix(in srgb, var(--bad) 6%, var(--surface)); border-radius: 0 10px 10px 0; margin: .8rem 0; }
.d2d-body .d2d-forms a { font-weight: 600; }
.d2d-src { font-size: .85rem; color: var(--muted); padding-left: 1.3rem; }
.d2d-src li { margin: .2rem 0; overflow-wrap: anywhere; }
.d2d-tool { margin: 1rem 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.d2d-tool-h { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between; align-items: baseline; position: sticky; top: calc(var(--shl-top, 0px) + 4px); background: var(--surface); padding: 4px 0; z-index: 2; }
.d2d-tot { font: 700 1.05rem/1.2 var(--sans, inherit); color: var(--accent); }
.d2d-read { margin: .2rem 0 .6rem; font-weight: 600; }
.d2d-item { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 8px 0; min-width: 0; }
.d2d-item legend { font-weight: 600; padding: 0; font-size: .92rem; }
.d2d-opts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.d2d-opts button { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 40px; max-width: 220px; padding: 6px 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 700 13px/1.2 var(--sans, inherit); cursor: pointer; text-align: left; }
.d2d-opts button small { font-weight: 400; font-size: 11.5px; color: var(--muted); }
.d2d-opts button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
@media (max-width: 600px) { .d2d-opts button { max-width: 100%; flex: 1 1 calc(50% - 5px); } .d2d-search { flex-direction: column; } }
.d2d-qtc { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
.d2d-qtc label { display: grid; gap: 3px; font-size: .85rem; flex: 1 1 140px; }
.d2d-qtc input { width: 100%; box-sizing: border-box; }
.d2d .d2d-sec h2 { font: 600 1.2rem/1.3 var(--sans, inherit); text-transform: none; letter-spacing: 0; color: var(--ink); }
.d2d .d2d-sec h2 a:hover { color: var(--accent); }
.d2d-qtc select { width: 100%; box-sizing: border-box; }
.d2d-copy { margin: .8rem 0 .3rem; }
pre.d2d-tpl { white-space: pre-wrap; overflow-wrap: anywhere; font: .86rem/1.5 var(--mono, ui-monospace, monospace); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0 0 1rem; }

/* Day to Day search (5 Nov 2026): the toolbar search, Ask and exam buttons are hidden on Day to Day pages; this box replaces them */
html.d2d-page .shl-bar .shl-stack, html.d2d-page .shl-bar .bankpill, html.d2d-page .shl-bar .shl-voice { display: none !important; }
.d2d-sbar { position: relative; margin: 0 0 14px; }
.d2d-sbar .d2d-search { margin: 0; }
.d2d-sbar:not(.big) .d2d-search input { min-height: 38px; }
.d2d-sug { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: min(70vh, 520px); overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); box-shadow: 0 14px 40px rgba(0, 0, 0, .2); }
.d2d-sug[hidden] { display: none; }
.d2d-sug .d2d-hitrow.on, .d2d-sug .d2d-hitrow:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.d2d-hitrow mark, .d2d-body mark.d2d-hit { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.d2d-sect { grid-column: 2; justify-self: end; font: 600 10.5px/1.6 var(--sans, inherit); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.d2d-all { display: block; width: 100%; text-align: left; margin-top: 4px; padding: 8px 10px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--accent); font: 600 .88rem var(--sans, inherit); cursor: pointer; }
.d2d-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.d2d-quick a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font: 600 .84rem/1.2 var(--sans, inherit); }
.d2d-quick a:hover { border-color: var(--accent); color: var(--accent); }

/* ================= Reading options (5 Nov 2026, Account → Reading; classes set by seTheme in index.html) ================= */
.acc-opt { display: inline-flex; align-items: center; gap: 7px; }
.acc-sw { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.acc-own { background: conic-gradient(#3D6FE0, #0F766E, #C9A227, #BE3358, #3D6FE0); }
/* line spacing: #view sets it for everything that inherits; text blocks with their own line-height are listed */
html.lh-r #view, html.lh-r #view :is(p, li, td, th, dd, dt, blockquote, .stem, .opt, .expl, .fact-t, .d2d-body, .wnotes, .dc-b) { line-height: 1.8; }
html.lh-l #view, html.lh-l #view :is(p, li, td, th, dd, dt, blockquote, .stem, .opt, .expl, .fact-t, .d2d-body, .wnotes, .dc-b) { line-height: 2.05; word-spacing: .06em; }
html.lh-r #view .opt .L, html.lh-l #view .opt .L { line-height: 1.6; }
/* density: Compact */
html.dn-c main { padding-top: .6rem; }
html.dn-c #view h1 { margin: .2rem 0 .55rem; }
html.dn-c #view h2 { margin: 1.1rem 0 .4rem; }
html.dn-c .stem { margin-bottom: .75rem; }
html.dn-c .opts { gap: 5px; }
html.dn-c .opt { padding-top: .42rem; padding-bottom: .42rem; }
html.dn-c .expl { margin-top: 14px; padding-top: 12px; }
html.dn-c .deck { padding: .45rem .2rem; }
html.dn-c .modes { margin: .25rem 0 .65rem; gap: .3rem; }
html.dn-c .tp-q { padding: .65rem .8rem .75rem; }
html.dn-c .dsh { margin-bottom: 11px; }
html.dn-c .dsh-stat { padding: 10px 12px 9px; }
html.dn-c .dsh-t { padding: 11px 13px; }
@media (min-width: 1024px) { html.dn-c .shl-it { padding-top: 6px; padding-bottom: 6px; } }
/* density: Comfortable */
html.dn-s main { padding-top: 1.7rem; }
html.dn-s #view h2 { margin: 2.3rem 0 .8rem; }
html.dn-s .stem { margin-bottom: 1.6rem; }
html.dn-s .opts { gap: 13px; }
html.dn-s .opt { padding-top: 1rem; padding-bottom: 1rem; }
html.dn-s .expl { margin-top: 30px; padding-top: 26px; }
html.dn-s .deck { padding: 1.05rem .2rem; }
html.dn-s .modes { margin: .6rem 0 1.3rem; gap: .55rem; }
html.dn-s .tp-q { padding: 1.35rem 1.4rem 1.45rem; }
html.dn-s .dsh { margin-bottom: 24px; }
html.dn-s .dsh-stat { padding: 20px 21px 19px; }
html.dn-s .dsh-t { padding: 21px 23px; }
@media (min-width: 1024px) { html.dn-s .shl-it { padding-top: 12px; padding-bottom: 12px; } }
/* Account: the text-size % and the reminder time sit with their buttons, not pushed to the far right (5 Nov 2026) */
#fsval, #remind .passn { margin-left: 0; }
#fsval { min-width: 3.2em; text-align: center; }
#remind label.passn { display: inline-flex; align-items: center; gap: 6px; }
#remind label.passn select { width: auto; }
/* on phones the Reading and Theme choices wrap instead of scrolling sideways, so every option is visible */
#readbox .modes, #themebox .modes { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; }
.acc-opt[aria-pressed="true"] .acc-sw { box-shadow: 0 0 0 2px var(--accent-ink); }


/* ================= Queen's (Yousef, 4 Nov 2026): Queen's Blue #002452, Gold #FABD0F, Red #B90E31 =================
   A light theme (blue buttons) and a dark one (gold buttons), each with the tricolour band along the top;
   the sign-in screen carries the band and the Queen's Blue title whatever the theme. */
html[data-theme="queens"] {
  --bg: #F7F8FB; --surface: #FFFFFF; --surface2: #EEF1F6; --line: #D6DCE6; --ink: #0F1B2D; --muted: #4A5870; --dim: #7C889B;
  --accent: #002452; --accent-ink: #FFFFFF; --ok: #2B7A47; --ok-bg: #E2F2E8; --bad: #B90E31; --bad-bg: #FBE4E8; --flag: #9A6B00;
  --expl: #1C283B; --serif: 'Newsreader', Georgia, serif; --sans: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --caps: none; --track: .02em; color-scheme: light; --q-blue: #002452; --q-gold: #FABD0F; --q-red: #B90E31; }
html[data-theme="queensdark"] {
  --bg: #0A1628; --surface: #11213A; --surface2: #182B47; --line: #263B5C; --ink: #EEF2F8; --muted: #A9B6CA; --dim: #71819A;
  --accent: #FABD0F; --accent-ink: #1A1300; --ok: #6CCB8E; --ok-bg: #12301F; --bad: #F2788C; --bad-bg: #3A1520; --flag: #FABD0F;
  --expl: #D9E1EC; --serif: 'Newsreader', Georgia, serif; --sans: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --caps: none; --track: .02em; color-scheme: dark; --q-blue: #2F5EA8; --q-gold: #FABD0F; --q-red: #D4324F; }
html[data-theme^="queens"] body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, var(--q-blue) 0 33.4%, var(--q-gold) 33.4% 66.7%, var(--q-red) 66.7%); }
html[data-theme="queens"] h1 { color: var(--q-blue); }

/* sign-in screen: the Queen's Psychiatry crest, Queen's Blue title (gold on dark themes) and a tricolour rule, whatever the theme */
.signin .qcrest { display: block; width: 78px; height: auto; margin: 0 0 14px; }
.signin h1 { color: #002452; margin-bottom: .45rem; }
html[data-tone="dark"] .signin h1 { color: #FABD0F; }
.signin .qband { display: flex; height: 5px; width: 96px; border-radius: 3px; overflow: hidden; margin: 0 0 18px; }
.signin .qband i { flex: 1; }
.signin .qband i:nth-child(1) { background: #002452; }
.signin .qband i:nth-child(2) { background: #FABD0F; }
.signin .qband i:nth-child(3) { background: #B90E31; }
html[data-tone="dark"] .signin .qband i:nth-child(1) { background: #2F5EA8; }
.signin .primary { background: #002452; border-color: #002452; color: #FFFFFF; }
html[data-tone="dark"] .signin .primary { background: #FABD0F; border-color: #FABD0F; color: #1A1300; }

/* a selected pill keeps its light text while hovered (4 Nov 2026: hover set it to --ink, unreadable on Queen's blue) */
.quiet[aria-pressed="true"]:hover:not(:disabled) { color: var(--accent-ink); border-color: var(--accent); }

.d2d-tool-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .8rem; }
.d2d-tool-sub { margin: 1rem 0 .3rem; font-size: 1rem; }