/* INI-CET Coach: "Quiet Ink". A clean printed page that moves only when you do. See DESIGN.md. */
/* ---------- colour tokens ----------
   Paper neutrals with a faint ink tint, one ink-blue accent used once per screen.
   Status colours live on small marks only. Values are OKLCH; contrast verified in both modes (see DESIGN.md). */
:root {
  --color-bg: oklch(98.2% 0.003 280);
  --color-bg-subtle: oklch(95.6% 0.005 280);
  --color-surface: oklch(100% 0 0);
  --color-surface-elevated: oklch(100% 0 0);
  --color-text: oklch(22% 0.02 280);
  --color-text-secondary: oklch(44% 0.018 280);
  --color-text-muted: oklch(53% 0.014 280);
  --color-border: oklch(91% 0.006 280);
  --color-border-strong: oklch(64% 0.012 280);
  --color-accent: oklch(48% 0.16 277);
  --color-accent-hover: oklch(43% 0.16 277);
  --color-accent-soft: oklch(94.5% 0.028 277);
  --color-on-accent: oklch(99% 0.004 277);
  --color-success: oklch(50% 0.12 155);
  --color-success-soft: oklch(95% 0.035 155);
  --color-warning: oklch(53% 0.11 68);
  --color-warning-soft: oklch(95.5% 0.045 80);
  --color-error: oklch(53% 0.17 25);
  --color-error-soft: oklch(95% 0.03 20);
  --color-unseen: oklch(85% 0.008 280);
  --color-focus: var(--color-accent);
  --color-figure-bg: #fbfcfb; /* diagrams are drawn on light paper in both modes */
  --color-selected: var(--color-accent-soft);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --r-s: 12px;
  --r-m: 18px;
  --body: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --display: var(--body);
  --mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --gutter: 20px;
  --tabbar-h: 64px;
  color-scheme: light;
}
/* Dark is its own variant, not an inverse: surfaces get lighter as they rise; accents lift to stay legible. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: oklch(16% 0.01 280); --color-bg-subtle: oklch(19% 0.012 280); --color-surface: oklch(20.5% 0.013 280); --color-surface-elevated: oklch(24% 0.015 280);
    --color-text: oklch(94% 0.006 280); --color-text-secondary: oklch(76% 0.012 280); --color-text-muted: oklch(66% 0.014 280);
    --color-border: oklch(29% 0.014 280); --color-border-strong: oklch(52% 0.018 280);
    --color-accent: oklch(78% 0.1 280); --color-accent-hover: oklch(83% 0.08 280); --color-accent-soft: oklch(29% 0.055 280); --color-on-accent: oklch(17% 0.03 280);
    --color-success: oklch(78% 0.12 155); --color-success-soft: oklch(28% 0.045 155);
    --color-warning: oklch(83% 0.11 78); --color-warning-soft: oklch(30% 0.045 75);
    --color-error: oklch(75% 0.13 22); --color-error-soft: oklch(29% 0.05 20);
    --color-unseen: oklch(36% 0.012 280);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg: oklch(16% 0.01 280); --color-bg-subtle: oklch(19% 0.012 280); --color-surface: oklch(20.5% 0.013 280); --color-surface-elevated: oklch(24% 0.015 280);
    --color-text: oklch(94% 0.006 280); --color-text-secondary: oklch(76% 0.012 280); --color-text-muted: oklch(66% 0.014 280);
    --color-border: oklch(29% 0.014 280); --color-border-strong: oklch(52% 0.018 280);
    --color-accent: oklch(78% 0.1 280); --color-accent-hover: oklch(83% 0.08 280); --color-accent-soft: oklch(29% 0.055 280); --color-on-accent: oklch(17% 0.03 280);
    --color-success: oklch(78% 0.12 155); --color-success-soft: oklch(28% 0.045 155);
    --color-warning: oklch(83% 0.11 78); --color-warning-soft: oklch(30% 0.045 75);
    --color-error: oklch(75% 0.13 22); --color-error-soft: oklch(29% 0.05 20);
    --color-unseen: oklch(36% 0.012 280);
  color-scheme: dark;
}

/* ---------- base + mobile baseline ---------- */
* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none; /* no accidental pull-to-refresh mid-question */
  scrollbar-color: var(--color-border) transparent;
}
body {
  margin: 0; min-height: 100dvh; background: var(--color-bg); color: var(--color-text);
  font: 17px/1.55 var(--body); font-variant-numeric: tabular-nums; font-optical-sizing: auto;
}
::selection { background: var(--color-accent-soft); color: var(--color-text); }
main {
  max-width: 680px; margin: 0 auto;
  padding: 8px var(--gutter) calc(var(--tabbar-h) + 40px + env(safe-area-inset-bottom, 0px));
}
main:focus { outline: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.12; margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin: 40px 0 12px; }
h3 { font-size: 1rem; font-family: var(--body); font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 12px; text-wrap: pretty; }
a { color: var(--color-accent); text-underline-offset: 3px; }
.muted { color: var(--color-text-secondary); }
.faint { color: var(--color-text-muted); }
.small { font-size: 0.9rem; }
.tiny { font-size: 0.82rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 6px; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
button, a, [role="button"], .opt, .seg button, .tab {
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
input, select, textarea { font: inherit; font-size: 16px; padding: 10px 12px; border-radius: var(--r-s); border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); }
label { display: block; margin: 14px 0 6px; font-weight: 700; font-size: 0.92rem; }
svg.i { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: var(--r-s);
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border);
  font-weight: 700; text-decoration: none;
  transition: transform 120ms var(--ease-out), background-color 150ms ease, border-color 150ms ease;
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--color-accent); padding: 0 8px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn .meta { font-weight: 400; opacity: 0.85; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { border-color: var(--color-text-muted); }
  .btn.primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
  .row-link:hover { background: var(--color-surface); }
  .opt:not(:disabled):hover { border-color: var(--color-text-muted); }
}
.linkish { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- navigation ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; max-width: 680px; margin: 0 auto; padding: calc(10px + env(safe-area-inset-top, 0px)) var(--gutter) 6px; }
.brand { font-family: var(--display); font-weight: 800; color: var(--color-text); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; letter-spacing: -0.01em; }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface); border-top: 1px solid var(--color-border);
}
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: var(--r-s); color: var(--color-text-muted); text-decoration: none; font-size: 0.75rem; font-weight: 500; transition: transform 140ms var(--ease-out), color 150ms ease; }
.tab svg.i { stroke-width: 1.6; }
.tab[aria-current="page"] { color: var(--color-accent); font-weight: 700; }
.tab:active { transform: scale(0.95); }
@media (min-width: 760px) {
  .tabbar { position: static; display: flex; gap: 4px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; padding: 0; }
  .tab { flex-direction: row; gap: 8px; min-height: 44px; padding: 0 12px; font-size: 0.92rem; }
  .tab[aria-current="page"] { background: var(--color-surface); }
  main { padding-bottom: 64px; }
  .topbar { max-width: 820px; }
}

/* Study mode: no navigation, a way out, the question dominates. */
body.study .topbar, body.study .tabbar { display: none; }
body.study main { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
.session-head { position: sticky; top: 0; z-index: 10; background: var(--color-bg); margin: 0 calc(-1 * var(--gutter)); padding: calc(6px + env(safe-area-inset-top, 0px)) var(--gutter) 10px; }
.session-row { display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--color-text-secondary); margin-left: -10px; transition: transform 120ms var(--ease-out), background-color 150ms; }
.icon-btn:active { transform: scale(0.94); background: var(--color-bg-subtle); }
.track { flex: 1; height: 6px; border-radius: 3px; background: var(--color-bg-subtle); overflow: hidden; }
.track > i { display: block; height: 100%; background: var(--color-accent); transform-origin: left; transition: transform 320ms var(--ease-out); }
.count { font-family: var(--mono); font-size: 0.85rem; color: var(--color-text-secondary); min-width: 3.6em; text-align: right; }
.timer { font-family: var(--mono); font-weight: 600; font-size: 0.95rem; min-width: 4.2em; text-align: right; }
.timer.low { color: var(--color-error); }

/* ---------- countdown (signature): mono numerals + one cell per day ---------- */
.strip { margin: 10px 0 4px; display: grid; gap: 12px; }
.countdown { display: flex; align-items: baseline; gap: 12px; }
.countdown .n { font: 600 clamp(3.4rem, 15vw, 4.4rem)/0.88 var(--mono); letter-spacing: -0.045em; color: var(--color-text); }
.countdown .t { color: var(--color-text-secondary); line-height: 1.3; font-size: 0.98rem; }
.countdown .t b { color: var(--color-text); display: block; }
.strip-cells { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.strip-cells span { height: 7px; border-radius: 2px; background: var(--color-border); }
.strip-cells span.past { background: var(--color-text-muted); opacity: 0.35; }
.strip-cells span.today { background: var(--color-accent); }
.strip-cells span.exam { background: var(--color-text); }

/* ---------- Today ---------- */
.greet { color: var(--color-text-secondary); margin: 18px 0 2px; }
.focus { margin: 24px 0 8px; padding: 20px; border-radius: var(--r-m); background: var(--color-surface); border: 1px solid var(--color-border); }
.focus .kind { font: 500 0.78rem/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 8px; }
.focus h1 { font-size: 1.9rem; letter-spacing: -0.025em; }
.focus .why { font-size: 1.05rem; color: var(--color-text); margin: 12px 0 6px; max-width: 58ch; }
.focus .gain { color: var(--color-text-secondary); font-size: 0.92rem; margin-bottom: 18px; }
.focus .btn { width: 100%; min-height: 54px; font-size: 1.05rem; border-radius: 14px; }
@media (min-width: 560px) { .focus .btn { width: auto; min-width: 260px; } }

.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.steps > li { border-bottom: 1px solid var(--color-border); }
.step { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 0; width: 100%; text-align: left; border-radius: 6px; transition: transform 140ms var(--ease-out); }
button.step:active { transform: scale(0.985); }
.step .side svg.i { color: var(--color-text-muted); width: 20px; height: 20px; }
.step .t { font-weight: 700; }
.step .w { grid-column: 1; color: var(--color-text-secondary); font-size: 0.92rem; }
.step .mins { grid-column: 1; }
.step .side { grid-row: 1 / span 3; grid-column: 2; display: flex; align-items: center; gap: 10px; }
.mins { color: var(--color-text-muted); font-size: 0.85rem; }
.step.done .t { color: var(--color-text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
details.later > summary { list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; justify-content: space-between; color: var(--color-text-secondary); font-weight: 700; border-bottom: 1px solid var(--color-border); }
details.later > summary::-webkit-details-marker { display: none; }
details.later[open] > summary .chev { transform: rotate(180deg); }
.chev { transition: transform 200ms var(--ease-out); }

.standing { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--color-bg-subtle); margin: 4px 0 14px; gap: 2px; }
.standing span { height: 100%; }
.s-LOCKED { background: var(--color-success); } .s-AT_RISK { background: var(--color-warning); } .s-WEAK { background: var(--color-error); } .s-UNSEEN { background: var(--color-unseen); }
.t-LOCKED { color: var(--color-success); } .t-AT_RISK { color: var(--color-warning); } .t-WEAK { color: var(--color-error); } .t-UNSEEN { color: var(--color-text-muted); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.legend li { display: grid; grid-template-columns: 12px 6.4em 1fr; gap: 10px; align-items: baseline; font-size: 0.92rem; }
.legend li > span:nth-child(2) { white-space: nowrap; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; transform: translateY(1px); }
.legend b { font-family: var(--mono); font-size: 0.95rem; font-weight: 600; }
.legend .m { color: var(--color-text-secondary); }

.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { border-bottom: 1px solid var(--color-border); }
.rows > li:first-child { border-top: 1px solid var(--color-border); }
.row { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; padding: 14px 0; }
.row .t { font-weight: 700; color: var(--color-text); text-decoration: none; }
.row .w { color: var(--color-text-secondary); font-size: 0.92rem; grid-column: 1; }
.row .side { grid-column: 2; grid-row: 1 / span 2; }
.row-link { display: block; text-decoration: none; color: inherit; border-radius: 6px; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--color-bg-subtle); color: var(--color-text-secondary); white-space: nowrap; }
.tag.LOCKED { background: var(--color-success-soft); color: var(--color-success); }
.tag.AT_RISK { background: var(--color-warning-soft); color: var(--color-warning); }
.tag.WEAK { background: var(--color-error-soft); color: var(--color-error); }
.tag svg.i { width: 14px; height: 14px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 6px 0 0; padding: 0; list-style: none; color: var(--color-text-secondary); font-size: 0.92rem; }
.facts b { color: var(--color-text); font-family: var(--mono); font-weight: 600; font-size: 1.05rem; }

/* ---------- first run ---------- */
.intro { margin: 34px 0 10px; }
.intro h1 { font-size: 2.15rem; letter-spacing: -0.025em; max-width: 14ch; }
.intro .lede { font-size: 1.08rem; margin: 16px 0 0; max-width: 52ch; }
.how { list-style: none; padding: 0; margin: 24px 0 8px; display: grid; gap: 14px; }
.how li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.how svg.i { color: var(--color-accent); margin-top: 2px; }
.subjects { display: grid; gap: 10px; margin: 26px 0 8px; }
.subject { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 18px 20px; border-radius: var(--r-m); border: 1px solid var(--color-border); background: var(--color-surface); text-align: left; transition: transform 120ms var(--ease-out), border-color 150ms; }
.subject:active { transform: scale(0.98); }
.subject .t { font-size: 1.15rem; font-weight: 700; }
.subject .w { color: var(--color-text-secondary); font-size: 0.9rem; grid-column: 1; }
.subject svg.i { grid-column: 2; grid-row: 1 / span 2; color: var(--color-accent); }
.subject.done { opacity: 0.6; }

/* ---------- question ---------- */
.form-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 18px 0 0; }
.form-line .f { font: 500 0.78rem/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-accent); }
.form-line .c { color: var(--color-text-secondary); font-size: 0.92rem; }
.ladder { display: flex; gap: 4px; margin: 8px 0 0; }
.ladder i { height: 4px; flex: 1; max-width: 34px; border-radius: 2px; background: var(--color-bg-subtle); }
.ladder i.done { background: var(--color-accent); opacity: 0.45; }
.ladder i.now { background: var(--color-accent); }
.stem:focus { outline: none; }
.stem { font-size: 1.17rem; font-weight: 500; line-height: 1.55; margin: 16px 0 22px; white-space: pre-wrap; max-width: 62ch; }
.qimg { margin: 0 0 20px; }
.qimg img { display: block; max-width: 100%; height: auto; border-radius: var(--r-m); border: 1px solid var(--color-border); background: var(--color-figure-bg); }
.qimg figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--color-text-secondary); }
.options { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.opt {
  display: grid; grid-template-columns: 30px 1fr 22px; gap: 12px; align-items: center; width: 100%; text-align: left;
  min-height: 56px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-surface);
  transition: transform 140ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, opacity 200ms ease;
}
.opt:active:not(:disabled) { transform: scale(0.98); }
.opt .l { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font: 600 0.85rem/1 var(--mono); color: var(--color-text-secondary); border: 1px solid var(--color-border); background: var(--color-bg); transition: background-color 150ms, color 150ms; }
.opt .mark svg.i { width: 20px; height: 20px; }
.opt[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.opt[aria-pressed="true"] .l { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.opt:disabled { cursor: default; }
.options.revealed .opt { opacity: 0.55; }
.options.revealed .opt.correct, .options.revealed .opt.wrong { opacity: 1; }
.opt.correct { border-color: var(--color-success); background: var(--color-success-soft); box-shadow: none; }
.opt.correct .l { background: var(--color-success); border-color: var(--color-success); color: var(--color-bg); }
.opt.correct .mark { color: var(--color-success); }
.opt.wrong { border-color: var(--color-error); background: var(--color-error-soft); box-shadow: none; }
.opt.wrong .l { background: var(--color-error); border-color: var(--color-error); color: var(--color-bg); }
.opt.wrong .mark { color: var(--color-error); }
.hidden-opts { border: 1px dashed var(--color-border); border-radius: var(--r-s); padding: 18px; color: var(--color-text-secondary); text-align: center; font-size: 0.95rem; }

/* pinned action bar: confidence, next */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface); border-top: 1px solid var(--color-border);
}
.actionbar .inner { max-width: 680px; margin: 0 auto; }
.actionbar .ask { font-weight: 700; margin: 0 0 10px; font-size: 0.98rem; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.actionbar .ask .faint { font-weight: 400; font-size: 0.85rem; }
.actionbar .two { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.seg button {
  min-height: 52px; border-radius: var(--r-s); border: 1px solid var(--color-border); background: var(--color-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2;
  font-weight: 700; font-size: 0.95rem; transition: transform 140ms var(--ease-out), background-color 150ms, border-color 150ms;
}
.seg button small { font-weight: 400; font-size: 0.72rem; color: var(--color-text-secondary); }
.seg button:active { transform: scale(0.96); background: var(--color-accent-soft); border-color: var(--color-accent); }
.seg button[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.seg button[aria-pressed="true"] small { color: inherit; }

/* why-wrong */
.why { margin: 22px 0 8px; }
.why h2 { margin: 0 0 4px; }
.choices { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.choice { width: 100%; text-align: left; min-height: 52px; padding: 12px 16px; border-radius: var(--r-s); border: 1px solid var(--color-border); background: var(--color-surface); font-weight: 700; transition: transform 120ms var(--ease-out), border-color 150ms, background-color 150ms; }
.choice:active { transform: scale(0.985); border-color: var(--color-accent); background: var(--color-accent-soft); }

/* feedback */
.verdict { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 22px 0 6px; font-family: var(--display); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.015em; }
.verdict .tag { font-family: var(--body); letter-spacing: 0; }
.verdict.good { color: var(--color-success); }
.verdict.bad { color: var(--color-error); }
.verdict svg.i { width: 26px; height: 26px; stroke-width: 2.2; }
.lesson { margin: 14px 0 18px; display: grid; gap: 18px; }
.lesson h3 { margin-bottom: 4px; font: 500 0.78rem/1.3 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-text-muted); }
.lesson p { margin: 0; }
.lesson .big { font-size: 1.08rem; }
.next-when { color: var(--color-text-secondary); font-size: 0.9rem; margin: 0 0 16px; }
details.more { border-top: 1px solid var(--color-border); }
details.more:last-of-type { border-bottom: 1px solid var(--color-border); }
details.more > summary { list-style: none; min-height: 50px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 700; }
details.more > summary::-webkit-details-marker { display: none; }
details.more[open] > summary .chev { transform: rotate(180deg); }
details.more > div { padding: 0 0 16px; }
details.more ul, details.more ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.locked-moment { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; margin: 14px 0 0; padding: 14px 16px; border-radius: var(--r-m); background: var(--color-success-soft); color: var(--color-text); }
.locked-moment svg.i { width: 30px; height: 30px; color: var(--color-success); stroke-width: 2; }
.locked-moment b { color: var(--color-success); }

/* ---------- repair ---------- */
.repair h1 { font-size: 1.55rem; margin-top: 8px; }
.repair .here { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r-s); background: var(--color-error-soft); font-size: 0.95rem; }
.one-thing { margin: 26px 0 0; }
.one-thing h2, .lesson-sec h2 { margin: 0 0 8px; font-size: 0.92rem; font-family: var(--body); font-weight: 700; color: var(--color-text-secondary); letter-spacing: 0; }
.one-thing p { font-size: 1.14rem; line-height: 1.6; color: var(--color-text); max-width: 62ch; }
.lesson-sec { margin: 28px 0 0; }
.lesson-sec ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.lesson-sec.trap ul { list-style: none; padding: 0; }
.lesson-sec.trap li { padding: 12px 14px; border-radius: var(--r-s); background: var(--color-warning-soft); }
.conf-pair { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-s); background: var(--color-surface); border: 1px solid var(--color-border); margin-top: 8px; }

/* ---------- notebook ---------- */
.nb-group h2 { display: flex; align-items: baseline; gap: 10px; }
.nb-group h2 .n { color: var(--color-text-muted); font-family: var(--body); font-weight: 400; font-size: 0.95rem; }
.nb-group .about { color: var(--color-text-secondary); font-size: 0.92rem; margin: -4px 0 10px; }
details.entry { border-bottom: 1px solid var(--color-border); }
details.entry:first-of-type { border-top: 1px solid var(--color-border); }
details.entry > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 22px; gap: 4px 12px; align-items: center; padding: 14px 0; min-height: 56px; }
details.entry > summary::-webkit-details-marker { display: none; }
details.entry > summary .t { font-weight: 700; }
details.entry > summary .w { color: var(--color-text-secondary); font-size: 0.92rem; grid-column: 1; }
details.entry > summary .chev { grid-column: 2; grid-row: 1 / span 2; color: var(--color-text-muted); }
details.entry[open] > summary .chev { transform: rotate(180deg); }
.entry-body { padding: 0 0 18px; display: grid; gap: 12px; }
.entry-body .remember { font-size: 1.02rem; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* ---------- progress ---------- */
.subj { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.subj:first-child { border-top: 1px solid var(--color-border); }
.subj .t { font-weight: 700; }
.subj .w { grid-column: 1; color: var(--color-text-secondary); font-size: 0.92rem; }
.subj .mini { grid-column: 2; grid-row: 1 / span 2; width: 96px; }
.bars { display: grid; gap: 12px; margin: 6px 0 0; }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 0.92rem; }
.bar-row .track { grid-column: 1 / -1; height: 6px; }
.spark { display: inline-flex; gap: 2px; align-items: flex-end; height: 18px; }
.spark span { width: 6px; background: var(--color-accent); border-radius: 1px; }
.subj .w, .bar-row .faint { font-variant-numeric: tabular-nums; }
.spark span.none { background: var(--color-border); height: 2px !important; }

/* ---------- practice ---------- */
.mode { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; width: 100%; text-align: left; padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.mode:first-child { border-top: 1px solid var(--color-border); }
.mode .t { font-weight: 700; }
.mode .w { color: var(--color-text-secondary); font-size: 0.92rem; grid-column: 1; }
.mode svg.i { grid-column: 2; grid-row: 1 / span 2; color: var(--color-text-muted); }
.mode { transition: transform 140ms var(--ease-out); }
.mode:active { transform: scale(0.985); }

/* ---------- misc ---------- */
.empty { padding: 24px 0; color: var(--color-text-secondary); }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50; background: var(--color-text); color: var(--color-bg); padding: 12px 16px; border-radius: var(--r-s); font-size: 0.95rem; max-width: calc(100vw - 32px); animation: fade 180ms ease-out both; }
.error { color: var(--color-error); }
.skeleton { height: 18px; border-radius: 6px; background: var(--color-bg-subtle); margin: 12px 0; width: 70%; animation: pulse 1.2s ease-in-out infinite; }
.scroll-x { overflow-x: auto; overscroll-behavior-x: contain; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
th { color: var(--color-text-secondary); font-weight: 400; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.stat { background: var(--color-surface); padding: 14px; border-radius: var(--r-s); }
.stat strong { display: block; font-family: var(--mono); font-weight: 600; font-size: 1.4rem; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); text-decoration: none; color: var(--color-text); }
.chip[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.row-wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.audio { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--color-accent); font-weight: 700; }
.audio[aria-busy="true"] { opacity: 0.6; }

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 50% { opacity: 0.5; } }
@keyframes draw { from { stroke-dashoffset: var(--len, 60); } to { stroke-dashoffset: 0; } }
.view-in { animation: rise 220ms var(--ease-out) both; }
/* Screen changes: native view transition, a short fade with a slight rise (main content only). */
main { view-transition-name: page; }
::view-transition-old(page) { animation: 120ms ease-out both fade-out; }
::view-transition-new(page) { animation: 220ms var(--ease-out) both rise; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
@keyframes fade-out { to { opacity: 0; } }
.options.enter > li { animation: rise 160ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 18ms); }
.reveal-in { animation: rise 180ms var(--ease-out) both; }
.locked-moment .shackle { stroke-dasharray: var(--len, 60); animation: draw 520ms var(--ease-out) 120ms both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; }
  .options.enter > li, .reveal-in, .toast, .view-in { animation: fade 120ms ease-out both !important; }
  .locked-moment .shackle { animation: none; stroke-dasharray: none; }
  .btn:active, .opt:active, .seg button:active, .choice:active, .subject:active, .icon-btn:active { transform: none !important; }
  .skeleton { animation: none; }
  ::view-transition-old(page), ::view-transition-new(page) { animation-duration: 120ms; animation-name: fade; }
  ::view-transition-old(page) { animation-name: fade-out; }
  .ring .arc { animation: none !important; }
}
@media (max-width: 359px) { :root { --gutter: 16px; } .seg button small { display: none; } }

/* reveal labels: correctness is never colour-only */
.opt .said { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; margin-top: 2px; }
.opt.correct .said { color: var(--color-success); }
.opt.wrong .said { color: var(--color-error); }
.opt .txt { display: grid; }
.icon-btn.sound { margin-left: 0; margin-right: -10px; }
.icon-btn.sound[aria-pressed="false"] { color: var(--color-text-muted); }
input[type="range"] { accent-color: var(--color-accent); min-height: 44px; padding: 0; border: 0; background: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-accent); }

/* mascot */
.mascot { display: block; border-radius: 24%; background: #8f8cc0; flex: none; }
.intro-owl { margin: 0 0 22px; }
.empty-state { display: grid; justify-items: start; gap: 14px; padding: 18px 0 8px; }
.empty-owl { margin-bottom: 4px; }
.focus .empty-owl { margin-bottom: 16px; }
.summary-head { margin-top: 26px; }
.locked-moment { grid-template-columns: 52px 1fr; }
.locked-moment .lock-owl { animation: owl-in 320ms var(--ease-out) both; }
@keyframes owl-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .locked-moment .lock-owl { animation: fade 120ms ease-out both; } }

/* theme: a plain icon button in the top bar, a segmented control in Settings */
.topbar { gap: 12px; }
.topbar-toggle { display: flex; align-items: center; }
.theme-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--color-text-secondary); margin-right: -8px; transition: transform 140ms var(--ease-out), color 150ms; }
.theme-btn .ring-o { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-border); display: grid; place-items: center; }
.theme-btn svg.i { width: 17px; height: 17px; }
.theme-btn:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .theme-btn:hover { color: var(--color-text); } }
@media (min-width: 760px) { .topbar .tabbar { margin-left: auto; } }
.segctl { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--color-bg-subtle); border: 1px solid var(--color-border); }
.segctl button { min-height: 44px; padding: 0 18px; border-radius: 10px; font-weight: 700; font-size: 0.95rem; color: var(--color-text-secondary); transition: transform 140ms var(--ease-out), background-color 150ms, color 150ms; }
.segctl button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 2px oklch(20% 0.02 280 / 0.12), 0 0 0 1px var(--color-border); }
.segctl button:active { transform: scale(0.96); }

/* summary score ring: the one bigger moment */
.ring { display: block; width: 132px; height: 132px; }
.ring .track-c { stroke: var(--color-border); }
.ring .arc { stroke: var(--color-success); animation: ring-fill 700ms var(--ease-out) 120ms both; }
.ring text { fill: var(--color-text); font-family: var(--mono); font-weight: 600; }
@keyframes ring-fill { from { stroke-dashoffset: var(--circ); } }
.summary-top { display: flex; align-items: center; gap: 18px; margin-top: 26px; }

/* sign in: no navigation, one narrow form */
body.auth .tabbar, body.auth #theme-mini { display: none; }
body.auth .brand { pointer-events: none; }
body.auth .stage { display: none; }
/* ---------- sign-in: clinical & quiet ----------
   Near-black page, one slow soft light behind a restrained glass sheet. Small owl mark + wordmark, tight corners
   (sheet 24, controls 10), mono field labels, a white primary action. Brand tokens unchanged. */
body.auth .topbar { display: none; }
body.auth main { max-width: none; margin: 0; padding: 0; }
body.auth { --scene: #05060b; --sheet: rgba(17, 18, 28, .72); --sheet-edge: rgba(255, 255, 255, .08); --field: rgba(255, 255, 255, .04);
  --field-edge: rgba(255, 255, 255, .12); --label: #8a8ea3; --primary: #eef0ff; --on-primary: #0b0c14; background: var(--scene); }
.auth-scene { position: relative; isolation: isolate; min-height: 100dvh; display: grid; place-items: center; align-content: center; gap: 20px;
  padding: calc(32px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
/* one soft light, drifting very slowly — the only motion on the page */
.auth-light { position: absolute; z-index: -1; inset: -20%; pointer-events: none;
  background: radial-gradient(38% 32% at 42% 40%, rgba(143, 155, 255, .16), transparent 70%),
              radial-gradient(30% 26% at 62% 62%, rgba(121, 195, 255, .07), transparent 70%);
  filter: blur(20px); animation: auth-drift 38s ease-in-out infinite alternate; }
@keyframes auth-drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.06); } }
.glass { position: relative; background: var(--sheet); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--sheet-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 80px rgba(0, 0, 0, .45); }
.auth-card { width: min(100%, 384px); border-radius: 24px; padding: 28px 24px 24px; animation: auth-card-in 380ms var(--ease-out) both; }
.auth-head { margin-bottom: 24px; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; font-weight: 700; font-size: .9375rem; letter-spacing: -0.005em; }
.auth-brand .auth-owl { width: 28px; height: 28px; border-radius: 8px; }
.auth-card h1 { font-size: 1.625rem; line-height: 1.15; letter-spacing: -0.02em; margin: 0; font-weight: 700; }
.auth-sub { margin: 6px 0 0; color: var(--color-text-secondary); font-size: .9375rem; line-height: 1.45; }
#g-err:empty, #au-err:empty { display: none; }
#g-err, #au-err { margin: 10px 0 0; }
.or-rule { display: flex; align-items: center; gap: 12px; margin: 18px 0 2px; color: var(--label); font: 500 .6875rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--sheet-edge); }
#auth-form { display: grid; }
#auth-form label { margin: 16px 0 8px; color: var(--label); font: 500 .6875rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
#auth-form input { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 10px; font: inherit; font-size: 1rem; color: var(--color-text);
  background: var(--field); border: 1px solid var(--field-edge); outline: none; transition: border-color 160ms ease, box-shadow 160ms ease; }
#auth-form input:focus-visible { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.auth-hint { margin: 8px 0 0; font-size: .8125rem; color: var(--label); }
.auth-go { margin-top: 24px; min-height: 46px; border: 0; border-radius: 10px; font: 700 .9375rem/1 var(--body); cursor: pointer;
  color: var(--on-primary); background: var(--primary); transition: transform 160ms var(--ease-out), opacity 160ms ease; }
.auth-go:hover { opacity: .92; }
.auth-go:active { transform: scale(.985); }
.auth-go:disabled { opacity: .6; cursor: progress; }
/* "Continue with Google": Google's branding (G mark, #131314 dark / #FFFFFF light fill, their border and text colours) */
.auth-google { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px;
  border-radius: 10px; border: 1px solid #8e918f; background: #131314; color: #e3e3e3; cursor: pointer;
  font: 500 .9375rem/1 Roboto, var(--body); transition: transform 160ms var(--ease-out), background-color 160ms ease; }
.auth-google .g-mark { width: 18px; height: 18px; flex: none; }
.auth-google:hover { background: #1b1b1d; }
.auth-google:active { transform: scale(.985); }
.auth-google:focus-visible, .auth-go:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.auth-google:disabled { opacity: .7; cursor: progress; }
.auth-switch { margin: 20px 0 0; font-size: .875rem; color: var(--color-text-secondary); }
.auth-switch .linkish { color: var(--color-accent); }
.auth-legal { display: flex; gap: 8px; margin: 0; font-size: .75rem; color: var(--label); }
.auth-legal a { color: inherit; text-underline-offset: 3px; }
@keyframes auth-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* light theme */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body.auth { --scene: #f6f6f9; --sheet: rgba(255, 255, 255, .78); --sheet-edge: rgba(20, 22, 40, .08); --field: #fff;
    --field-edge: rgba(20, 22, 40, .14); --label: #6b6e80; --primary: #14151f; --on-primary: #fff; }
  :root:not([data-theme="dark"]) .auth-google { background: #fff; border-color: #747775; color: #1f1f1f; }
  :root:not([data-theme="dark"]) .glass { box-shadow: 0 1px 2px rgba(20, 22, 40, .05), 0 24px 60px rgba(30, 32, 70, .10); }
  :root:not([data-theme="dark"]) .auth-light { opacity: .6; }
}
:root[data-theme="light"] body.auth { --scene: #f6f6f9; --sheet: rgba(255, 255, 255, .78); --sheet-edge: rgba(20, 22, 40, .08); --field: #fff;
  --field-edge: rgba(20, 22, 40, .14); --label: #6b6e80; --primary: #14151f; --on-primary: #fff; }
:root[data-theme="light"] .auth-google { background: #fff; border-color: #747775; color: #1f1f1f; }
@media (prefers-reduced-transparency: reduce) { .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--color-surface); } }
@media (prefers-contrast: more) { .glass { border-color: var(--color-border-strong); } #auth-form input { border-color: var(--color-border-strong); } }
@media (prefers-reduced-motion: reduce) { .auth-card { animation-duration: 1ms; } .auth-light { animation: none; } }
@media (min-width: 700px) { .auth-card { padding: 36px 32px 28px; } }

/* answer from memory */
.recall { margin: -6px 0 18px; }
.recall label { margin: 0 0 6px; font-size: 0.9rem; }
.recall input { width: 100%; }
.recall-said { margin: -8px 0 16px; font-size: 0.95rem; }
.recall-check { margin: 4px 0 16px; padding: 14px 16px; border-radius: var(--r-s); background: var(--color-surface); border: 1px solid var(--color-border); }
.recall-check p { margin: 0; }
.rc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; transform: translateY(-1px); background: var(--color-unseen); }
.rc-match { background: var(--color-success); } .rc-no_match { background: var(--color-error); } .rc-unsure { background: var(--color-warning); }

/* ---------- my map ---------- */
.map-subjects { margin: 18px 0 12px; display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.map-filter { margin: 0 0 12px; }
.map-filter .chip { gap: 8px; font-size: 0.9rem; }
.map-filter .chip b { font-family: var(--mono); font-weight: 500; }
.map-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.map-wrap { border-radius: var(--r-m); background: var(--color-surface); border: 1px solid var(--color-border); padding: 10px 6px; }
svg.map { display: block; width: 100%; height: auto; touch-action: manipulation; cursor: pointer; }
.map-sys text { font: 500 8.5px var(--mono); fill: var(--color-text-muted); text-anchor: middle; letter-spacing: .02em; }
.ml { stroke: var(--color-border-strong); stroke-width: 1; opacity: 0; transition: opacity 180ms ease; }
.ml.confused { stroke: var(--color-error); stroke-dasharray: 3 2.4; }
.mn { stroke: var(--color-surface); stroke-width: 1.5; transition: opacity 180ms ease, r 180ms var(--ease-out); animation: map-in 380ms var(--ease-out) both; animation-delay: calc(var(--i) * 6ms); }
.mn.s-LOCKED { fill: var(--color-success); } .mn.s-AT_RISK { fill: var(--color-warning); } .mn.s-WEAK { fill: var(--color-error); } .mn.s-UNSEEN { fill: var(--color-unseen); }
.mn.hi { stroke: var(--color-text); stroke-width: 1.2; }
.mn.faded { opacity: .15; }
svg.map.has-sel .mn:not(.sel):not(.near) { opacity: .25; }
svg.map .ml.on { opacity: .9; }
.mn.sel { stroke: var(--color-accent); stroke-width: 2.6; r: 9.5; }
@keyframes map-in { from { opacity: 0; } }
.map-card { margin-top: 14px; padding: 18px; border-radius: var(--r-m); background: var(--color-surface); border: 1px solid var(--color-border); animation: rise 200ms var(--ease-out) both; }
.mc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mc-head .t { font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.mc-ladder { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 0.85rem; color: var(--color-text-muted); }
.mc-ladder span { display: inline-flex; align-items: center; gap: 6px; }
.mc-ladder i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); }
.mc-ladder .done { color: var(--color-text); }
.mc-ladder .done i { background: var(--color-success); border-color: var(--color-success); }
@media (prefers-reduced-motion: reduce) { .mn, .map-card { animation: none; } }
a.row.row-link { display: grid; } /* row links keep the two-line row layout */

/* 3D brain (always a dark stage: glowing points read best on near-black) */
.map-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.map-mode button { padding: 0 14px; min-height: 40px; font-size: 0.88rem; }
.brain-wrap { position: relative; height: min(68vh, 560px); min-height: 360px; border-radius: var(--r-m); overflow: hidden; background: #05060b; touch-action: none; }
.brain-wrap canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; }
.brain-wrap canvas:active { cursor: grabbing; }
.brain-legend { position: absolute; left: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 6px 12px; font: 500 11.5px var(--mono); color: rgba(235,238,255,.7); pointer-events: none; z-index: 1; }
.brain-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; box-shadow: 0 0 8px currentColor; }
.lobe { position: absolute; left: 0; top: 0; font: 600 12.5px var(--body); letter-spacing: .02em; color: rgba(235,238,255,.85); padding: 4px 10px; border-radius: 999px; background: rgba(12,14,26,.55); border: 1px solid rgba(255,255,255,.12); pointer-events: none; white-space: nowrap; z-index: 1; will-change: transform, opacity; }
@media (min-width: 760px) { .brain-wrap { height: 600px; } }
.map-subjects button { padding: 0 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) { .map-subjects button { font-size: 0.82rem; padding: 0 4px; } }

/* ===================== Brain-first shell (iPad first) ===================== */
.stage { position: fixed; inset: 0; z-index: 0; background: #04050a; }
.stage canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; }
body.no-3d .stage { background: radial-gradient(ellipse 60% 50% at 50% 45%, #1b1f45, #04050a 70%); }
body.mode-study .stage, body.mode-study .tabbar, body.mode-study .sheet-close { display: none; }
body.mode-hub .topbar, body.mode-sheet .topbar { display: none; }
body.mode-hub, body.mode-sheet { background: #04050a; overflow: hidden; }
.stage .lobe { position: absolute; left: 0; top: 0; font: 600 13px var(--body); letter-spacing: .01em; color: rgba(238,240,255,.9); padding: 5px 12px; border-radius: 999px; background: rgba(12,14,28,.55); border: 1px solid rgba(255,255,255,.14); pointer-events: none; white-space: nowrap; }
body.mode-sheet .stage .lobe { opacity: .3 !important; }

/* dark-glass tokens: everything inside the HUD reads light-on-dark */
.hud, .tabbar {
  --color-text: #eef0ff; --color-text-secondary: rgba(238,240,255,.74); --color-text-muted: rgba(238,240,255,.56);
  --color-border: rgba(255,255,255,.14); --color-border-strong: rgba(255,255,255,.3); --color-surface: rgba(255,255,255,.07); --color-bg: rgba(8,10,22,.6); --color-bg-subtle: rgba(255,255,255,.1);
  --color-accent: #8f9bff; --color-accent-hover: #a7b0ff; --color-on-accent: #0b0d1c; --color-accent-soft: rgba(143,155,255,.18);
  --color-success: #7dffc4; --color-success-soft: rgba(125,255,196,.15); --color-warning: #ffc46b; --color-warning-soft: rgba(255,184,77,.16);
  --color-error: #ff8a95; --color-error-soft: rgba(255,95,109,.16); color: var(--color-text);
}
.hud-glass { background: rgba(10,12,26,.66); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255,255,255,.11); border-radius: 24px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.6); }

/* hub: main becomes a transparent layer; only HUD pieces take touches */
body.mode-hub main { position: fixed; inset: 0; max-width: none; margin: 0; padding: 0; pointer-events: none; z-index: 2; }
.hud > * { pointer-events: auto; }
.hud-top { position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); left: 24px; right: 24px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.hud-brand { display: grid; gap: 2px; }
.hud-brand b { font: 800 22px/1.1 var(--display); letter-spacing: -.02em; }
.hud-brand span { font: 500 13px var(--mono); color: var(--color-text-muted); }
.hud-stats { display: flex; gap: 10px; align-items: center; }
.hud-pill { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px 0 12px; border-radius: 999px; background: rgba(10,12,26,.66); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); text-decoration: none; color: inherit; }
.hud-pill b { font: 600 20px var(--mono); letter-spacing: -.02em; }
.hud-pill span { font-size: 13px; color: var(--color-text-muted); }
.hud-pill svg.i { width: 24px; height: 24px; }
.hud-pill.streak svg.i { color: rgba(238,240,255,.45); }
.hud-pill.streak.on svg.i { color: #ff9a3c; fill: rgba(255,154,60,.35); filter: drop-shadow(0 0 8px rgba(255,140,40,.8)); }
.hud-pill.streak.stake svg.i { color: #ffc46b; }
.hud-pill.streak.pop { animation: flame-pop 900ms var(--ease-out) both; }
@keyframes flame-pop { 30% { transform: scale(1.18); } 60% { transform: scale(.96); } }
.hud-icon { width: 52px; padding: 0; justify-content: center; }
.ring-s { width: 30px; height: 30px; }
.ring-s .bg { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 4; }
.ring-s .fg { fill: none; stroke: #8f9bff; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 600ms var(--ease-out); }
.hud-pill.goal.on .ring-s .fg { stroke: #7dffc4; }
.hud-hint { flex-basis: 100%; text-align: right; margin: 0; font-size: 13px; color: var(--color-text-muted); }

.hud-lit { position: absolute; right: 24px; top: calc(140px + env(safe-area-inset-top, 0px)); width: 300px; padding: 20px; }
.lit-big { display: flex; align-items: center; gap: 14px; }
.lit-big b { font: 600 46px/1 var(--mono); letter-spacing: -.05em; color: #fff; text-shadow: 0 0 24px rgba(125,255,196,.35); }
.lit-big span { font-size: 14px; line-height: 1.3; color: var(--color-text-secondary); }
.lit-big small { color: var(--color-text-muted); font-size: 12px; }
.lit-lobes { display: grid; gap: 6px; margin-top: 16px; }
.lobe-row { display: grid; grid-template-columns: 96px 1fr 38px; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 12px; font-size: 14px; text-align: left; color: var(--color-text-secondary); transition: background-color 150ms; }
.lobe-row.all { grid-template-columns: 1fr; color: var(--color-text-muted); font-size: 13px; }
.lobe-row[aria-pressed="true"] { background: rgba(143,155,255,.16); color: #fff; }
.lobe-row .bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.lobe-row .bar i { display: block; height: 100%; background: linear-gradient(90deg, #7dffc4, #8f9bff); border-radius: 3px; min-width: 2px; }
.lobe-row b { font: 500 13px var(--mono); text-align: right; }
.lit-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.lit-badges span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(125,255,196,.12); color: #7dffc4; }
.lit-badges svg.i { width: 13px; height: 13px; }
.lit-help { margin: 14px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--color-text-muted); }

.hud-next { position: absolute; left: 24px; bottom: calc(108px + env(safe-area-inset-bottom, 0px)); width: min(440px, calc(100vw - 48px)); padding: 22px; }
.hud-next .kicker { font: 500 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.hud-next h2 { margin: 8px 0 8px; font-size: 1.6rem; letter-spacing: -.02em; }
.hud-next p { margin: 0 0 16px; color: var(--color-text-secondary); font-size: .98rem; }
.next-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.next-row .btn { min-height: 52px; padding: 0 26px; }
.next-subjects { display: flex; flex-wrap: wrap; gap: 10px; }
.hud .btn.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); box-shadow: 0 10px 30px -10px rgba(143,155,255,.8); }
.hud .btn:not(.primary) { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--color-text); }
.hud .linkish { color: #b7c0ff; }

.hud-card { position: absolute; right: 24px; bottom: calc(108px + env(safe-area-inset-bottom, 0px)); width: 380px; padding: 20px; animation: rise 220ms var(--ease-out) both; }
.hud-card .card-x { position: absolute; top: 8px; right: 8px; margin: 0; }
.hud-card .mc-head { padding-right: 36px; }
.hud-no3d { position: absolute; left: 24px; top: 50%; color: var(--color-text-secondary); }

/* dock */
.tabbar { position: fixed; left: 50%; right: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 6;
  display: flex; gap: 4px; padding: 6px; border-radius: 26px; background: rgba(10,12,26,.72); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 20px 50px -16px rgba(0,0,0,.7); }
.tabbar .tab { flex-direction: row; gap: 8px; min-height: 52px; padding: 0 18px; border-radius: 20px; font-size: .92rem; color: var(--color-text-muted); }
.tabbar .tab[aria-current="page"] { background: rgba(143,155,255,.18); color: #fff; }
.tabbar .tab svg.i { width: 22px; height: 22px; }

/* sheet: every other screen is a panel over the brain */
body.mode-sheet main { position: fixed; z-index: 3; max-width: none; margin: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--color-bg); box-shadow: 0 0 80px rgba(0,0,0,.55); animation: sheet-in 320ms var(--ease-out) both; }
.sheet-close { display: none; }
body.mode-sheet .sheet-close { display: grid; place-items: center; position: fixed; z-index: 4; width: 44px; height: 44px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); }
body.mode-sheet .sheet-close svg.i { width: 20px; height: 20px; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px); } }
/* iPad landscape and desktop: right-hand panel, brain stays visible on the left */
@media (min-width: 900px) and (orientation: landscape) {
  body.mode-sheet main { top: 0; right: 0; bottom: 0; width: min(580px, 48vw); padding: calc(28px + env(safe-area-inset-top, 0px)) 36px calc(40px + env(safe-area-inset-bottom, 0px)); border-left: 1px solid rgba(255,255,255,.08); }
  @keyframes sheet-in { from { opacity: 0; transform: translateX(40px); } }
  body.mode-sheet .sheet-close { top: calc(18px + env(safe-area-inset-top, 0px)); right: 20px; }
  body.mode-sheet .tabbar { left: calc((100vw - min(580px, 48vw)) / 2); }
  body.mode-sheet .actionbar { left: auto; width: min(580px, 48vw); }
}
/* portrait iPad and phones: bottom sheet */
@media not ((min-width: 900px) and (orientation: landscape)) {
  body.mode-sheet main { left: 0; right: 0; bottom: 0; top: calc(64px + env(safe-area-inset-top, 0px)); border-radius: 26px 26px 0 0; padding: 26px var(--gutter) calc(120px + env(safe-area-inset-bottom, 0px)); }
  body.mode-sheet .sheet-close { top: calc(76px + env(safe-area-inset-top, 0px)); right: 14px; }
  .hud-lit { left: 24px; right: 24px; width: auto; top: calc(150px + env(safe-area-inset-top, 0px)); padding: 14px 16px; }
  .lit-big b { font-size: 34px; }
  .lit-lobes { grid-template-columns: repeat(3, 1fr); }
  .lobe-row { grid-template-columns: 1fr 34px; grid-template-areas: "n p" "b b"; padding: 6px 10px; }
  .lobe-row > span:first-child { grid-area: n; } .lobe-row .bar { grid-area: b; } .lobe-row b { grid-area: p; }
  .lobe-row.all, .lit-help, .lit-badges { display: none; }
  .hud-next, .hud-card { left: 16px; right: 16px; width: auto; }
  .hud.has-card .hud-next { display: none; }
  .hud-top { left: 16px; right: 16px; }
  .hud-hint { text-align: left; }
}
@media (max-width: 600px) {
  .tabbar .tab { padding: 0 10px; flex-direction: column; gap: 2px; font-size: .68rem; min-height: 50px; }
  .tabbar { left: 12px; right: 12px; transform: none; justify-content: space-between; }
  .hud-pill span { display: none; }
  .hud-lit { top: calc(132px + env(safe-area-inset-top, 0px)); }
  .lit-big span small { display: none; }
  .lobe-row { font-size: 12px; }
  .hud-next h2 { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { body.mode-sheet main, .hud-card { animation: none; } }
@media (max-width: 600px) {
  .hud-hint, .lit-lobes { display: none; }
  .hud-lit { top: calc(124px + env(safe-area-inset-top, 0px)); left: auto; right: 16px; width: 190px; padding: 10px 14px; border-radius: 18px; }
  .lit-big { gap: 10px; } .lit-big b { font-size: 26px; } .lit-big span { font-size: 12px; }
}
.hud.has-card .hud-lit { display: none; }

/* real-anatomy brain: Know it / Use it */
.stage .lobe.hemi { font-size: 14px; padding: 6px 14px; }
.stage .lobe.hemi[data-side="L"] b { color: #9fd3ff; }
.stage .lobe.hemi[data-side="R"] b { color: #ffc583; }
.lit-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lit-trio div { display: grid; gap: 2px; }
.lit-trio b { font: 600 30px/1 var(--mono); letter-spacing: -.04em; }
.lit-trio span { font-size: 12.5px; color: var(--color-text-muted); }
.lit-trio .k b { color: #9fd3ff; text-shadow: 0 0 18px rgba(121,195,255,.4); }
.lit-trio .u b { color: #ffc583; text-shadow: 0 0 18px rgba(255,177,94,.4); }
.lit-trio .l b { color: #7dffc4; text-shadow: 0 0 18px rgba(125,255,196,.4); }
.split-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-top: 14px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); color: var(--color-text-secondary); font-size: 14px; }
.split-btn[aria-pressed="true"] { background: rgba(143,155,255,.18); color: #fff; border-color: rgba(143,155,255,.4); }
.split-btn svg.i { width: 20px; height: 20px; }
.halves { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.half { border-radius: 14px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); display: grid; gap: 2px; }
.half b { font-size: 14px; } .half span { font-size: 12.5px; color: var(--color-text-muted); }
.half.know.on { border-color: rgba(121,195,255,.55); background: rgba(121,195,255,.1); } .half.know.on b { color: #9fd3ff; }
.half.use.on { border-color: rgba(255,177,94,.55); background: rgba(255,177,94,.1); } .half.use.on b { color: #ffc583; }
.spines { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; font-style: normal; }
.spines em { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.spines em.right { background: #7dffc4; box-shadow: 0 0 6px #7dffc4; } .spines em.wrong { background: #ff5f6d; }
.hud-credit { position: absolute; right: 24px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); margin: 0; font: 500 10.5px var(--mono); color: rgba(238,240,255,.35); pointer-events: none; }
@media (max-width: 1000px) { .hud-credit { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 600px) { .lit-trio b { font-size: 20px; } .lit-trio span { font-size: 10.5px; } .split-btn, .lit-trio .l { display: none; } .lit-trio { grid-template-columns: 1fr 1fr; } }

/* knowledge-graph lens on the brain */
.stage .bt { position: absolute; left: 0; top: 0; z-index: 3; width: min(330px, calc(100% - 24px)); padding: 14px 16px; border-radius: 18px; pointer-events: none;
  background: rgba(10,12,26,.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 50px -16px rgba(0,0,0,.7); color: #eef0ff; font: 14px/1.4 var(--body); }
.bt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bt-head b { font-size: 15px; line-height: 1.3; }
.bt-chip { flex: none; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(238,240,255,.75); }
.bt-chip.s-LOCKED { background: rgba(125,255,196,.16); color: #7dffc4; } .bt-chip.s-AT_RISK { background: rgba(255,184,77,.18); color: #ffc46b; }
.bt-chip.s-WEAK { background: rgba(255,95,109,.18); color: #ff8a95; } .bt-chip.hub { background: rgba(160,175,255,.18); color: #c3cbff; }
.bt-sub { margin-top: 3px; font: 500 11.5px var(--mono); color: rgba(238,240,255,.55); }
.bt-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 10px; }
.bt-ladder span { text-align: center; font-size: 11px; padding: 4px 0; border-radius: 7px; background: rgba(255,255,255,.06); color: rgba(238,240,255,.45); }
.bt-ladder span.on { background: rgba(255,255,255,.18); color: #fff; font-weight: 700; }
.bt-pace { margin-top: 10px; font-size: 13px; font-weight: 600; }
.bt-pace.lag { color: #ff8a95; } .bt-pace.ok { color: #7dffc4; }
.bt-sides { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font: 500 11.5px var(--mono); color: rgba(238,240,255,.5); }
.bt-sides .k { color: #9fd3ff; } .bt-sides .u { color: #ffc583; } .bt-sides .l { color: #7dffc4; } .bt-sides .d { color: #fff; }
.stage .bl { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; white-space: nowrap; font: 600 11.5px var(--body); color: rgba(238,240,255,.92);
  padding: 3px 8px; border-radius: 8px; background: rgba(10,12,26,.6); border: 1px solid rgba(255,255,255,.1); }
.lit-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.lit-actions .split-btn { margin-top: 0; font-size: 13px; padding: 0 10px; }
.lag-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 10px #ff4d5e; flex: none; }
.split-btn.lag[aria-pressed="true"] { background: rgba(255,77,94,.16); border-color: rgba(255,77,94,.5); color: #fff; }
@media (max-width: 600px) { .lit-actions { display: none; } }


/* ---------- Mock exam: the INI-CET computer-based test ----------
   Deliberately looks like the exam-hall software, not like the app: light grey and white panels, a blue banner,
   plain sans-serif, radio buttons, square buttons, the standard palette legend. Always light, like the real screen. */
body.mock main { max-width: none; padding: 0; }
body.mock { background: #eef0f3; }
.cbt-shell, .cbt-confirm { --cb-blue: #1f4e8c; --cb-blue2: #2f6db5; --cb-line: #c9cfd8; --cb-bg: #eef0f3; --cb-text: #1d2330; --cb-green: #2e9e48; --cb-red: #d9534f; --cb-violet: #6f42c1;
  color-scheme: light; color: var(--cb-text); font: 15px/1.5 Arial, Helvetica, system-ui, sans-serif; }
.cbt-shell { background: var(--cb-bg); min-height: 100dvh; }
.cbt-shell * { letter-spacing: normal; }
.cbt-banner { background: var(--cb-blue); color: #fff; padding: calc(10px + env(safe-area-inset-top, 0px)) 18px 10px; display: flex; align-items: center; }
.cbt-exam { display: flex; align-items: baseline; gap: 12px; }
.cbt-exam b { font-size: 1.25rem; letter-spacing: 0.04em; }
.cbt-exam span { font-size: 0.9rem; opacity: 0.85; }
.cbt-shell h1, .cbt-shell h2, .cbt-shell label, .cbt-shell button { font-family: Arial, Helvetica, system-ui, sans-serif; }
.cbt-banner { height: calc(48px + env(safe-area-inset-top, 0px)); box-sizing: border-box; }
/* the paper fills the screen; only the question text scrolls, so the answer buttons never leave view */
.cbt { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "bar side" "q side";
  height: calc(100dvh - 48px - env(safe-area-inset-top, 0px)); overflow: hidden; }
.cbt-bar { grid-area: bar; display: flex; align-items: stretch; justify-content: space-between; background: #fff; border-bottom: 1px solid var(--cb-line); }
.cbt-tabs { display: flex; overflow-x: auto; }
.cbt-tab { padding: 10px 16px; font-size: 0.88rem; border-right: 1px solid var(--cb-line); color: #7a8191; white-space: nowrap; }
.cbt-tab.on { background: var(--cb-blue2); color: #fff; font-weight: 700; }
.cbt-tab.done { color: #5b6170; background: #f3f4f6; }
.cbt-time { display: flex; align-items: center; gap: 6px; padding: 0 16px; font-size: 0.95rem; white-space: nowrap; }
.cbt-time b { font: 700 1.05rem/1 'Courier New', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.cbt-time b.low { color: var(--cb-red); }
.cbt-q { grid-area: q; display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--cb-line); min-width: 0; min-height: 0; }
.cbt-qhead { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--cb-line); background: #f7f8fa; }
.cbt-qhead h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.cbt-qmeta { font-size: 0.82rem; color: #5b6170; margin-right: auto; }
.cbt-palbtn { display: none; }
.cbt-qbody { flex: 1; min-height: 0; padding: 18px 22px 24px; overflow-y: auto; }
.cbt-stem { font-size: 1.02rem; margin: 0 0 18px; white-space: pre-wrap; max-width: 75ch; }
.cbt-shell .qimg { max-width: 520px; }
.cbt-opts { display: grid; gap: 4px; max-width: 75ch; }
.cbt-opt { font-weight: 400; display: grid; grid-template-columns: 22px 22px 1fr; gap: 6px; align-items: start; padding: 9px 10px; border-radius: 3px; cursor: pointer; min-height: 44px; }
.cbt-opt:hover { background: #f1f5fb; }
.cbt-opt input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--cb-blue2); }
.cbt-opt:has(input:checked) { background: #e8f0fb; }
.cbt-ol { font-weight: 700; }
.cbt-actions, .cbt-nav { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid var(--cb-line); background: #f7f8fa; }
.cbt-actions > div, .cbt-nav > div { display: flex; gap: 8px; flex-wrap: wrap; }
.cbt-nav { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.cbt-btn { font: 600 0.9rem/1 Arial, Helvetica, sans-serif; min-height: 40px; padding: 0 16px; border: 1px solid #aeb5c1; border-radius: 3px; background: #fff; color: var(--cb-text); cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.cbt-btn:hover:not(:disabled) { background: #f1f3f6; }
.cbt-btn:active:not(:disabled) { transform: translateY(1px); }
.cbt-btn:disabled { opacity: 0.5; cursor: default; }
.cbt-btn.save { background: var(--cb-green); border-color: var(--cb-green); color: #fff; }
.cbt-btn.save:hover { background: #278a3e; }
.cbt-btn.primary, .cbt-btn.submit { background: var(--cb-blue2); border-color: var(--cb-blue2); color: #fff; }
.cbt-btn.primary:hover:not(:disabled), .cbt-btn.submit:hover { background: var(--cb-blue); }
.cbt-btn.sm { min-height: 34px; padding: 0 12px; }
.cbt-side { grid-area: side; background: #fff; border-left: 1px solid var(--cb-line); display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.cbt-cand { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--cb-line); }
.cbt-cand b { display: block; font-size: 0.95rem; } .cbt-cand span { font-size: 0.8rem; color: #5b6170; }
.cbt-photo { width: 64px; height: 76px; border: 1px solid var(--cb-line); background: #f3f4f6; display: grid; place-items: center; flex: none; }
.cbt-photo svg { width: 40px; height: 40px; fill: none; stroke: #9aa2b1; stroke-width: 1.5; }
.cbt-close { display: none; margin-left: auto; font-size: 1.6rem; line-height: 1; background: none; border: 0; color: #5b6170; width: 44px; height: 44px; }
.cbt-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 8px; padding: 12px 14px; font-size: 0.76rem; color: #2a3140; border-bottom: 1px solid var(--cb-line); }
.cbt-legend .lg-am { grid-column: 1 / -1; }
.cbt-legend-inst { max-width: 560px; margin: 10px 0 4px; border: 1px solid var(--cb-line); background: #fff; }
.lg { display: flex; align-items: center; gap: 8px; }
.cbt-palhead { background: var(--cb-blue2); color: #fff; font-weight: 700; font-size: 0.9rem; padding: 8px 14px; }
.cbt-choose { margin: 0; padding: 8px 14px 0; font-size: 0.82rem; font-weight: 700; color: #2a3140; }
.cbt-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 10px 14px 18px; }
/* the standard palette shapes */
.pq { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 4px; font: 700 0.78rem/1 Arial, Helvetica, sans-serif; font-style: normal;
  border: 1px solid #aeb5c1; background: #e9ebef; color: #1d2330; border-radius: 3px; position: relative; flex: none; }
.cbt-grid .pq { height: 42px; cursor: pointer; font-size: 0.85rem; }
.pq.na { background: #e8562a; border-color: #c94418; color: #fff; border-radius: 14px 14px 3px 3px; }
.pq.an { background: #2e9e48; border-color: #23843a; color: #fff; border-radius: 3px 3px 14px 14px; }
.pq.wr { background: #d9534f; border-color: #c13d39; color: #fff; }
.pq.mr, .pq.am { background: #6f42c1; border-color: #5a32a3; color: #fff; border-radius: 50%; }
.cbt-grid .pq.mr, .cbt-grid .pq.am { width: 42px; justify-self: center; }
.pq.am::after { content: '✓'; position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; background: #2e9e48; color: #fff; font-size: 10px; line-height: 16px; text-align: center; border: 1px solid #fff; }
.pq.now { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1f4e8c; }
/* instructions page */
.cbt-inst { max-width: 980px; margin: 0 auto; background: #fff; border: 1px solid var(--cb-line); border-top: 0; padding: 18px 26px 22px; }
.cbt-inst h1 { font-size: 1.2rem; margin: 0; text-align: center; }
.cbt-inst-sub { text-align: center; margin: 2px 0 14px; font-size: 0.88rem; color: #5b6170; }
.cbt-inst ol { padding-left: 22px; display: grid; gap: 8px; font-size: 0.94rem; }
.cbt-note { font-size: 0.85rem; color: #5b6170; border-top: 1px solid var(--cb-line); padding-top: 12px; }
.cbt-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; padding: 12px; background: #f7f8fa; border: 1px solid var(--cb-line); cursor: pointer; }
.cbt-agree input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.cbt-inst-foot { display: flex; justify-content: space-between; margin-top: 16px; }
/* submit dialog */
.cbt-confirm { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(20, 24, 33, 0.45); color-scheme: light; }
.cbt-confirm .box { width: min(760px, 100%); background: #fff; color: #1d2330; border: 1px solid #aeb5c1; font: 15px/1.45 Arial, Helvetica, sans-serif; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.cf-title { background: #1f4e8c; color: #fff; font-weight: 700; padding: 10px 16px; }
.cf-table { width: calc(100% - 32px); margin: 16px; border-collapse: collapse; font-size: 0.85rem; }
.cf-table th, .cf-table td { border: 1px solid #c9cfd8; padding: 7px 6px; text-align: center; }
.cf-table th { background: #f3f4f6; font-weight: 700; color: #1d2330; }
.cf-q { margin: 0 16px; text-align: center; font-weight: 700; }
.cf-btns { display: flex; justify-content: center; gap: 12px; padding: 16px; }
.cf-btns .cbt-btn { min-width: 90px; justify-content: center; }
/* narrow screens (iPad portrait, phones): the palette slides in from the right */
@media (max-width: 900px) {
  .cbt { grid-template-columns: 1fr; grid-template-areas: "bar" "q"; }
  .cbt-actions .cbt-btn, .cbt-nav .cbt-btn { padding: 0 12px; }
  .cbt-palbtn { display: inline-flex; }
  .cbt-side { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); z-index: 30; box-shadow: -10px 0 40px rgba(0,0,0,.25); transform: translateX(105%); transition: transform 240ms var(--ease-out); }
  .cbt-side.open { transform: none; }
  .cbt-close { display: block; }
  .cbt-bar { flex-direction: column; }
  .cbt-time { padding: 8px 16px; justify-content: flex-end; border-top: 1px solid var(--cb-line); }
  .cf-table { font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) { .cbt-side { transition: none; } }
.mock-legend { margin: 6px 0 16px; }
.mock-result { padding-top: 22px; }
.mr-score { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 10px; }
.mr-score b { font: 700 3.2rem/1 var(--mono); letter-spacing: -0.03em; }
.mr-score span { font: 500 1.3rem/1 var(--mono); color: var(--color-text-muted); }
.mr-brain { margin-top: 18px; gap: 10px; }
.mr-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.mr-table th { text-align: left; font-weight: 600; color: var(--color-text-muted); font-size: 0.82rem; padding: 6px 0; }
.mr-table td { padding: 10px 0; border-top: 1px solid var(--color-border); font-variant-numeric: tabular-nums; }
.mr-table th:not(:first-child), .mr-table td:not(:first-child) { text-align: right; }
#mr-list { margin-top: 12px; }
.mr-q summary .t { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.mr-q .options { margin: 0; }
.mr-q .opt { cursor: default; }
.mr-concept { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 4px; }
.mr-concept .linkish { display: inline-flex; align-items: center; gap: 6px; }
.mock-past .mono { font-family: var(--mono); font-weight: 600; }
/* the brain HUD while a mock lens is on */
.hud-mock .mk { font-weight: 700; }
.hud-mock .mk.r { color: #7dffc4; } .hud-mock .mk.w { color: #ff8a95; } .hud-mock .mk.s { color: #b9bfe6; }
.bt-mock { margin-top: 6px; font-size: 0.8rem; }
.bt-mock .right { color: #7dffc4; } .bt-mock .wrong { color: #ff8a95; } .bt-mock .skipped { color: #b9bfe6; }
/* "asked before in INI-CET" tags */
.asked-dot { width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); background: #ffd166; box-shadow: 0 0 10px #ffd166; flex: none; }
.split-btn.asked[aria-pressed="true"] { background: rgba(255,209,102,.16); border-color: rgba(255,209,102,.55); color: #fff; }
.lit-actions .split-btn.asked { grid-column: 1 / -1; }
.asked-line { margin: 6px 0 0; font-size: 0.8rem; color: #ffd166; }
.bt-asked { margin-top: 6px; font-size: 0.78rem; color: #ffd166; }
.asked-box { margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--color-border); border-left: 3px solid var(--color-warning); border-radius: var(--r-s); background: var(--color-bg-subtle); }
.asked-box ul { margin: 6px 0; padding-left: 18px; display: grid; gap: 4px; font-size: 0.92rem; }
/* zoom buttons on the brain (for touch without pinch-habit, and for a clear way back) */
.hud-zoom { position: absolute; right: 24px; bottom: calc(44px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 6px; pointer-events: auto; }
.hud-zoom button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font: 600 1.3rem/1 var(--body); color: #eef0ff;
  background: rgba(16,18,34,.62); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform 120ms var(--ease-out), background-color 150ms; }
.hud-zoom button:hover { background: rgba(40,44,80,.75); }
.hud-zoom button:active { transform: scale(0.94); }
.hud-zoom svg.i { width: 20px; height: 20px; }
@media (max-width: 1000px) { .hud-zoom { flex-direction: column; right: 14px; bottom: auto; top: 50%; transform: translateY(-50%); } }
/* ---------- moving between the brain and the other screens ----------
   brain → screen: the HUD fades at once (the tap is answered), the sheet slides in with its content;
   screen → brain: the sheet slides back out the way it came, then the HUD fades in; the brain eases behind both. */
.hud { animation: hud-in 260ms var(--ease-out) backwards; }
.hud.hud-out { opacity: 0; transform: scale(0.99); transition: opacity 140ms ease-out, transform 140ms ease-out; pointer-events: none; }
@keyframes hud-in { from { opacity: 0; } }
body.mode-sheet main.sheet-out { animation: sheet-out 200ms cubic-bezier(0.4, 0, 1, 1) both; }
@keyframes sheet-out { to { opacity: 0; transform: translateY(32px); } }
@media (min-width: 900px) and (orientation: landscape) { @keyframes sheet-out { to { opacity: 0; transform: translateX(48px); } } }
.tabbar { transition: left 320ms var(--ease-out); }
.stage .lobe { transition: opacity 260ms ease-out; }
.sheet-close { animation: fade 200ms ease-out 120ms both; }
@media (prefers-reduced-motion: reduce) { .hud, .sheet-close { animation: none; } .hud.hud-out { transition: none; } .tabbar { transition: none; } }
/* attempt-or-skip rule */
.rule-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin-top: 10px; }
.rule-table th { text-align: left; font-weight: 600; font-size: 0.8rem; color: var(--color-text-muted); padding: 6px 6px 6px 0; }
.rule-table td { padding: 10px 6px 10px 0; border-top: 1px solid var(--color-border); font-variant-numeric: tabular-nums; }
.verdict { font-size: 0.8rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.v-attempt { color: var(--color-success); background: var(--color-success-soft); }
.v-skip { color: var(--color-error); background: var(--color-error-soft); }
.v-border { color: var(--color-warning); background: var(--color-warning-soft); white-space: normal; }
.v-unknown { color: var(--color-text-muted); background: var(--color-bg-subtle); }
.mr-strategy { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--r-s); background: var(--color-bg-subtle); }
.mr-strategy p { margin: 6px 0 0; }
/* seven subjects: compact rows, and the panel scrolls inside itself instead of running under the dock */
.hud-lit { max-height: calc(100dvh - 140px - 110px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.hud-lit::-webkit-scrollbar { display: none; }
.lit-lobes { gap: 2px; }
.lobe-row { min-height: 36px; }