/* ═══════════════════════════════════════════════════════════════
   Keen — design system
   Monochrome interface, one colour: the highlighter (--mark),
   reserved for mastery. See design_handoff_keen/brand-and-design-system.md
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* colour */
  --ground:#F1F2F5; --surface:#FFFFFF; --surface-2:#E7E9EE; --line:#D8DBE3;
  --ink:#171A21; --ink-soft:#5B6170; --on-ink:#FFFFFF;
  --mark:#D8E85C; --right:#2F7D5C; --wrong:#B3402F;
  /* support values used by the mocks */
  --rail-ground:#EDEEF2; --pip-empty:#DFE2E9; --meta:#8A9099;
  --row-line:#E1E4EA; --mark-half:#EEF2C4; --dot-idle:#C9CDD6;
  --surface-2-hover:#DDE0E7; --wrong-wash:#F7EFED; --wrong-line:#E4C9C3;
  --right-wash:#EBF2EE; --dim:#A2A8B3;

  /* type */
  --display:"Fraunces",Georgia,serif;
  --body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Martian Mono",ui-monospace,SFMono-Regular,monospace;
  --wonk:"SOFT" 0,"WONK" 1;

  /* space (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* shape + motion */
  --r-ctl:10px; --r-card:16px; --r-panel:18px; --r-sheet:22px; --r-pill:999px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --t-fast:140ms; --t-mid:180ms; --t-sweep:480ms;
}
@media (prefers-color-scheme:dark) {
  :root {
    --ground:#16181F; --surface:#1F222C; --surface-2:#282C38; --line:#333846;
    --ink:#ECEEF3; --ink-soft:#99A0B0; --on-ink:#16181F;
    --mark:#A8BC33; --right:#5FBF92; --wrong:#E8796A;
    --rail-ground:#1B1E27; --pip-empty:#2F3441; --meta:#7C8494;
    --row-line:#2A2F3B; --mark-half:#4A5326; --dot-idle:#3C4250;
    --surface-2-hover:#333949; --wrong-wash:#2E2022; --wrong-line:#4A2F2C;
    --right-wash:#1D2A26; --dim:#6B7382;
  }
}

*,*::before,*::after { box-sizing:border-box; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font:400 16px/1.55 var(--body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul { margin:0; }
ul { list-style:none; padding:0; }
.hidden { display:none !important; }
.sr-only {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── shared type roles ───────────────────────────────────────── */
.label {
  font:600 11px/1.2 var(--body); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft);
}
.data { font:400 12px/1.2 var(--mono); letter-spacing:-.04em; color:var(--ink-soft); }
.small { font:400 14px/1.5 var(--body); color:var(--ink-soft); }
.kbd { font:400 11px/1.4 var(--mono); letter-spacing:-.04em; color:var(--meta); }

/* ── focus floor ─────────────────────────────────────────────── */
:focus-visible { outline:2px solid var(--ink); outline-offset:2px; border-radius:4px; }
:focus:not(:focus-visible) { outline:none; }
.skip {
  position:absolute; left:var(--s3); top:-60px; z-index:200;
  background:var(--ink); color:var(--on-ink); padding:var(--s3) var(--s4);
  border-radius:var(--r-ctl); font-weight:600; text-decoration:none;
  transition:top var(--t-fast) var(--ease);
}
.skip:focus { top:var(--s3); }

/* ═══ SIGNATURE: the highlighter sweep ═══════════════════════════
   A marker stroke behind the word, inset to the share of the
   Leitner ladder it has climbed. --pad scales with type size.     */
.sweep { position:relative; display:inline-block; }
.sweep-mark {
  position:absolute; left:calc(-1 * var(--pad,3px)); right:var(--inset,calc(100% + var(--pad,3px)));
  top:12%; bottom:2%; background:var(--mark); border-radius:2px;
  transition:right var(--t-sweep) var(--ease);
}
.sweep-mark.jump { transition:none; }   /* the sweep advances on a correct answer only */
.sweep-text { position:relative; }

/* ═══ box pips ══════════════════════════════════════════════════ */
.pips { display:flex; gap:3px; align-items:center; }
.pips span { width:var(--pip,6px); height:var(--pip,6px); border-radius:2px; background:var(--pip-empty); transition:background 320ms ease; }
.pips span.on { background:var(--mark); }
.pips span.fresh { box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--ink); }

/* ═══ shell ═════════════════════════════════════════════════════ */
.shell { display:grid; grid-template-columns:224px minmax(0,1fr); min-height:100vh; }
.rail {
  position:sticky; top:0; align-self:start; height:100vh;
  display:flex; flex-direction:column; gap:var(--s6);
  padding:var(--s5) var(--s4); border-right:1px solid var(--line);
  background:var(--rail-ground);
}
.brand { display:flex; flex-direction:column; gap:2px; padding:0 var(--s3); }
.brand-mark {
  font:600 30px/1 var(--display); font-variation-settings:var(--wonk),"opsz" 40;
  letter-spacing:-.02em;
}
.brand-sub { font:400 10px/1 var(--mono); letter-spacing:.02em; color:var(--ink-soft); }
.rail-nav { display:flex; flex-direction:column; gap:2px; }
.navlink {
  width:100%; text-align:left; border:0; background:transparent; color:var(--ink-soft);
  font:500 15px/1 var(--body); padding:var(--s3); min-height:44px; border-radius:var(--r-ctl);
  cursor:pointer; transition:background var(--t-fast),color var(--t-fast);
}
.navlink:hover { background:var(--surface-2); color:var(--ink); }
.navlink[aria-current="page"] {
  background:var(--surface); color:var(--ink); font-weight:600;
  box-shadow:inset 0 0 0 1px var(--line);
}
.rail-stats { margin-top:auto; display:flex; flex-direction:column; gap:var(--s4); padding:0 var(--s3); }
.railstat { display:flex; flex-direction:column; gap:var(--s1); }
.railstat .data { font-size:15px; font-weight:600; color:var(--ink); }

main { min-width:0; }
.view { display:none; }
.view.active { display:block; }
.view.pad { padding:var(--s6) var(--s6) var(--s8); max-width:1120px; }
#progress.pad, #settings.pad { max-width:calc(660px + var(--s6) * 2); }
@keyframes enter { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

.viewhead {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); margin-bottom:var(--s5);
}
.viewhead h1 {
  font:600 28px/1.1 var(--display); font-variation-settings:var(--wonk),"opsz" 36;
  letter-spacing:-.02em;
}
.card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:var(--s5); margin-bottom:var(--s4);
}
.card h2 { font:600 16px/1.3 var(--body); margin-bottom:var(--s2); }

/* ═══ controls ═══════════════════════════════════════════════════ */
.btn {
  border:1px solid transparent; border-radius:var(--r-ctl); cursor:pointer;
  font:600 15px/1 var(--body); padding:0 var(--s5); min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--t-fast),opacity var(--t-fast),color var(--t-fast);
}
.btn.primary { background:var(--ink); color:var(--on-ink); }
.btn.primary:hover:not(:disabled) { opacity:.85; }
.btn.secondary { background:var(--surface-2); color:var(--ink); border-color:var(--line); }
.btn.secondary:hover:not(:disabled) { background:var(--surface-2-hover); }
.btn.danger { background:var(--wrong); color:#fff; }
.btn.quiet {
  background:transparent; color:var(--ink-soft); padding:var(--s2) var(--s3);
  min-height:auto; font:500 14px/1 var(--body);
}
.btn.quiet:hover { color:var(--ink); text-decoration:underline; }
.btn:disabled { opacity:.45; cursor:default; }

.input {
  width:100%; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-ctl);
  padding:var(--s3) var(--s4); min-height:44px;
  font:400 16px/1.4 var(--body);
}
.input::placeholder { color:var(--ink-soft); }
.input.narrow { max-width:120px; }

.chips { display:flex; gap:var(--s2); flex-wrap:wrap; }
.chip {
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-soft);
  padding:7px var(--s3); border-radius:var(--r-pill);
  font:500 13px/1.2 var(--body); cursor:pointer; min-height:0;
  transition:background var(--t-fast),color var(--t-fast);
}
.chip:hover { color:var(--ink); }
.chip[aria-checked="true"] { background:var(--ink); color:var(--on-ink); border-color:var(--ink); }

.toolbar .chip { padding:var(--s2) var(--s3); }
.field { display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s4); }
.config-note { margin-top:var(--s2); color:var(--meta); }
.sync-state { margin-top:var(--s3); min-height:21px; }
.sync-state.err, .small.err { color:var(--wrong); }
#sync-conflict { margin-top:var(--s3); }
.acct-email { font-size:14px; color:var(--ink); }
.input:disabled { background:var(--surface-2); color:var(--ink-soft); cursor:default; }
.row-actions { display:flex; gap:var(--s3); margin-top:var(--s4); }
.file-label { position:relative; }

/* ═══ Today — the workbench ══════════════════════════════════════ */
#today.view.active {
  display:grid; height:100vh; min-height:0;
  grid-template-columns:320px minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"queue capture" "queue bench";
}
.capture {
  grid-area:capture; border-bottom:1px solid var(--line); background:var(--rail-ground);
  padding:18px var(--s6); display:flex; align-items:center; gap:26px;
}
.capture-head { display:none; align-items:center; justify-content:space-between; }
.capture-head .brand-mark { font-size:20px; font-variation-settings:var(--wonk),"opsz" 28; }
.capture-head-right { display:flex; align-items:center; gap:var(--s2); }
.streak-pill {
  display:inline-flex; align-items:center; gap:6px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 10px;
  font:400 11px/1 var(--mono); letter-spacing:-.04em; color:var(--ink-soft);
}
.streak-pill .dotmark { width:6px; height:6px; border-radius:var(--r-pill); background:var(--mark); }
.capture-head-right .data { font-size:11px; }
.capture-form { flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--s2); }
.capture-row { display:flex; gap:10px; }
.capture-row .input { flex:1; }
.capture-row .btn { flex:none; padding:0 20px; }
.capture-help { display:none; font:400 13px/1.5 var(--body); color:var(--ink-soft); }
.capture-chips:not(:empty) + .capture-help { display:block; }
.capture-chips { display:flex; flex-wrap:wrap; gap:7px; }
.capture-chips:empty { display:none; }
.wchip {
  display:inline-flex; align-items:center; gap:7px;
  font:400 17px/1.3 var(--display); font-variation-settings:var(--wonk),"opsz" 20;
  padding:6px var(--s3); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill);
}
.wchip .state { font:400 10px/1 var(--mono); }
.wchip.added .state { color:var(--right); }
.wchip.pending, .wchip.dupe { background:var(--surface-2); color:var(--ink-soft); }
.wchip.dupe .state { color:var(--ink-soft); }
.wchip.failed { background:var(--wrong-wash); border-color:var(--wrong-line); color:var(--wrong); }

.goal { display:flex; align-items:center; gap:var(--s4); padding-left:26px; border-left:1px solid var(--line); }
.ring { position:relative; width:80px; height:80px; display:flex; align-items:center; justify-content:center; }
.ring svg { position:absolute; inset:0; transform:rotate(-90deg); }
.ring-track { stroke:var(--pip-empty); }
.ring-fill { stroke:var(--mark); transition:stroke-dashoffset var(--t-sweep) var(--ease); }
.ring-label { position:relative; font-size:13px; letter-spacing:-.06em; color:var(--ink); }
.goal-copy { display:flex; flex-direction:column; gap:2px; }
.goal-copy .small { font-size:13px; }

.head-right { display:flex; align-items:baseline; gap:var(--s3); }
.workbench { position:relative; grid-area:bench; min-width:0; min-height:0; display:flex; flex-direction:column; padding:28px var(--s6); gap:22px; }
.workbench .viewhead { margin-bottom:0; }
.workbench .viewhead h1 { font-size:26px; font-variation-settings:var(--wonk),"opsz" 34; }

.panel {
  flex:1; touch-action:pan-y; min-height:0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-panel); padding:30px; display:flex; flex-direction:column; gap:20px;
}
.panel-meta { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); }
.panel-meta-left { display:flex; align-items:center; gap:10px; }
.panel-meta .data { font-size:11px; color:var(--meta); }
.verdict { font:600 11px/1.2 var(--body); letter-spacing:.08em; text-transform:uppercase; }
.verdict.ok { color:var(--right); }
.verdict.no { color:var(--wrong); }
.panel-word {
  align-self:flex-start;
  font:400 62px/1.05 var(--display); font-variation-settings:var(--wonk),"opsz" 100;
  letter-spacing:-.03em; --pad:6px; word-break:break-word;
}
.panel-word .sweep-mark { top:16%; bottom:6%; }
.panel-def { max-width:560px; font:400 18px/1.5 var(--body); }
.panel-ex { max-width:560px; min-height:24px; font:italic 400 16px/1.5 var(--body); color:var(--ink-soft); }
.panel-actions { margin-top:auto; display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.panel-actions .btn { min-height:48px; padding:0 26px; }
.panel-actions .btn.secondary { padding:0 22px; color:var(--ink-soft); }
.panel-actions .btn.secondary:hover:not(:disabled) { color:var(--ink); }
.panel.advance { animation:advance var(--t-mid) var(--ease); }
.panel.settle { transition:transform var(--t-mid) var(--ease); }
@keyframes advance { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

.panel-empty { flex:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--s4); }
.panel-empty p { max-width:420px; font-size:16px; color:var(--ink-soft); }

/* queue column */
.queue { grid-area:queue; border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.queue-head { padding:22px 20px 14px; display:flex; flex-direction:column; gap:var(--s3); border-bottom:1px solid var(--line); }
.queue-title { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2); }
.queue-title h2 { font:600 16px/1.3 var(--body); }
.queue-head .chips { gap:6px; }
.queue-list { flex:1; overflow:auto; padding:6px var(--s3) var(--s3); }
.qrow {
  width:100%; text-align:left; border:0; background:transparent; border-radius:var(--r-ctl);
  padding:10px var(--s2); display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:10px; align-items:center; cursor:pointer; font-family:var(--body);
  color:var(--ink); transition:background var(--t-fast);
}
.qrow:hover { background:var(--surface-2); }
.qrow.current { background:var(--surface); }
.qrow-main { min-width:0; display:flex; flex-direction:column; gap:2px; }
.qrow-term, .qrow-def { display:block; }
.qrow-term { font:400 19px/1.25 var(--display); font-variation-settings:var(--wonk),"opsz" 24; }
.qrow-term .sweep-mark { top:14%; bottom:4%; }
.qrow-def { font:400 13px/1.4 var(--body); color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qrow-right { display:flex; flex-direction:column; align-items:flex-end; gap:var(--s1); }
.qrow-right .data { font-size:10px; color:var(--meta); }
.queue-empty { padding:var(--s4) var(--s2); font-size:14px; color:var(--ink-soft); }

/* ═══ Words ══════════════════════════════════════════════════════ */
.toolbar { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s4); }
.toolbar .input { flex:1; min-width:200px; }
.range-inputs { display:inline-flex; align-items:center; gap:var(--s2); color:var(--ink-soft); }
.range-inputs input {
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r-ctl); padding:var(--s2) var(--s3); font:400 13px/1.2 var(--body);
}
.colkey {
  display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; align-items:baseline;
  gap:var(--s4); padding:0 var(--s2) var(--s2); border-bottom:1px solid var(--line);
}
.colkey .right { text-align:right; }
.colkey-spacer { width:44px; }

.rows { display:flex; flex-direction:column; }
.group-label { padding:14px 0 6px; }
.group-label:first-child { padding-top:6px; }
.wordrow {
  display:grid; grid-template-columns:minmax(0,1fr) auto auto auto;
  grid-template-areas:"main pips next menu";
  align-items:center; gap:var(--s4);
  padding:var(--s3) var(--s2); border-bottom:1px solid var(--line);
}
.wordrow-main { grid-area:main; }
.wordrow > .pips { grid-area:pips; }
.wordrow-right { grid-area:next; }
.rowmenu { grid-area:menu; }
.wordrow:last-child { border-bottom:0; }
.wordrow:hover { background:var(--surface); }
.wordrow-term {
  font:400 20px/1.25 var(--display); font-variation-settings:var(--wonk),"opsz" 24;
  letter-spacing:-.01em;
}
.wordrow-def {
  font:400 14px/1.5 var(--body); color:var(--ink-soft); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wordrow-main { min-width:0; }
.wordrow-right { display:flex; flex-direction:column; align-items:flex-end; gap:2px; white-space:nowrap; }
.wordrow-right .iv { font:400 12px/1.2 var(--mono); letter-spacing:-.04em; color:var(--ink-soft); }
.wordrow-right .iv.due { font-weight:600; color:var(--ink); }
.wordrow-right .iv-m { display:none; font:400 10px/1.2 var(--mono); letter-spacing:-.04em; color:var(--ink-soft); }
.wordrow-right .iv-m.due { font-weight:600; color:var(--ink); }
.wordrow-right .iv-m.claimed { font-weight:600; color:var(--ink); }
.wordrow-right .iv-m.misses { color:var(--wrong); }
.wordrow-right .tally { font:400 10px/1.2 var(--mono); letter-spacing:-.04em; color:var(--meta); }
.wordrow-right > .pips { display:none; }
.rowmenu {
  border:0; background:transparent; color:var(--ink-soft); cursor:pointer;
  min-width:44px; min-height:44px; border-radius:var(--r-ctl);
  line-height:1; font:400 14px/1 var(--body);
  opacity:0; transition:opacity var(--t-fast),color var(--t-fast);
}
.rowmenu { pointer-events:none; }
.wordrow:hover .rowmenu, .wordrow.open .rowmenu, .rowmenu:focus-visible {
  opacity:1; pointer-events:auto; background:var(--surface-2);
}
.rowmenu:hover { color:var(--wrong); }

.empty {
  padding:var(--s6) 0; color:var(--ink-soft); font-size:15px;
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3);
}

/* ═══ Progress ═══════════════════════════════════════════════════ */
.statpair { display:none; gap:10px; margin-bottom:var(--s4); }
.statcard {
  flex:1; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s1);
}
.statval { font:600 26px/1.1 var(--display); font-variation-settings:var(--wonk),"opsz" 34; }

.ladder { display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s2); align-items:end; margin-top:var(--s4); }
.rung { display:flex; flex-direction:column; gap:var(--s2); text-align:center; }
.rung-bar { height:88px; background:var(--surface-2); border-radius:var(--r-ctl); display:flex; align-items:flex-end; overflow:hidden; }
.rung-fill { width:100%; background:var(--mark); border-radius:var(--r-ctl); transition:height var(--t-sweep) var(--ease); }
.rung-n { font:600 15px/1 var(--body); }
.rung-l { font:400 10px/1.2 var(--mono); letter-spacing:-.04em; color:var(--ink-soft); }
.rung-l.short { display:none; }

.heatmap { display:grid; grid-template-rows:repeat(7,10px); grid-auto-flow:column; gap:3px; margin:var(--s4) 0; overflow-x:auto; }
.heatcell { width:10px; height:10px; border-radius:2px; background:var(--surface-2); }
.heatcell.half { background:var(--mark-half); }
.heatcell.full { background:var(--mark); }

.sliprow { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); padding:var(--s3) var(--s2); border-bottom:1px solid var(--line); }
.sliprow:last-child { border-bottom:0; }
.sliprow .term { font:400 20px/1.25 var(--display); font-variation-settings:var(--wonk),"opsz" 24; }
.sliprow .data { color:var(--wrong); }
#drill-btn { margin-top:var(--s4); min-height:44px; border-radius:12px; font-size:14px; padding:0 var(--s4); }
.btn.save { margin-bottom:var(--s4); }

/* ═══ Review overlay ═════════════════════════════════════════════ */
.review {
  position:fixed; inset:0; z-index:120; background:var(--ground);
  display:flex; flex-direction:column; padding:var(--s5);
  animation:enter var(--t-mid) var(--ease);
}
.review-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); }
.dotrail { display:flex; gap:3px; flex-wrap:wrap; justify-content:center; }
.dot { width:16px; height:3px; border-radius:2px; background:var(--dot-idle); }
.dot.on { background:var(--ink); }
.review-body {
  flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px; width:100%; max-width:620px; margin:0 auto; text-align:center; overflow:auto;
}
.review-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); }
.review-actions { display:flex; gap:var(--s3); }
.review-actions .btn { padding:14px 28px; }

.review-prompt { font:400 19px/1.45 var(--body); color:var(--ink-soft); max-width:460px; }
.choices { display:flex; flex-direction:column; gap:var(--s2); width:100%; max-width:460px; }
.choice {
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  border-radius:12px; padding:14px var(--s4); min-height:52px; cursor:pointer;
  display:flex; align-items:center; gap:var(--s3); text-align:left; font-family:var(--body);
  transition:background var(--t-fast),border-color var(--t-fast);
}
.choice .n { font:400 11px/1 var(--mono); color:var(--ink-soft); }
.choice .t { font:400 19px/1.2 var(--display); font-variation-settings:var(--wonk),"opsz" 24; }
.choice .yours { margin-left:auto; font:600 10px/1.2 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--right); }
.choice .yours.no { color:var(--wrong); }
.choice:hover:not(:disabled) { background:var(--surface-2); }
.choice:disabled { cursor:default; }
.choice.dim { color:var(--dim); }
.choice.dim .n, .choice.dim .t { color:var(--dim); }
.choice.correct { border-color:var(--right); box-shadow:inset 0 0 0 1px var(--right); color:var(--ink); }
.choice.correct .n { color:var(--right); }
.choice.correct .t { color:var(--ink); }

.review-word {
  font:400 58px/1 var(--display); font-variation-settings:var(--wonk),"opsz" 100;
  letter-spacing:-.03em; --pad:6px; word-break:break-word;
}
.review-word .sweep-mark { top:16%; bottom:6%; }
.review-verdict { display:flex; align-items:center; gap:10px; }
.review-verdict .rule { width:1px; height:12px; background:var(--dot-idle); }
.review-def { max-width:460px; font:400 17px/1.5 var(--body); }
.review-ex { max-width:460px; font:italic 400 15px/1.5 var(--body); color:var(--ink-soft); }
.review-ex u { text-decoration:none; border-bottom:1px solid var(--dot-idle); }
.review-done { display:flex; flex-direction:column; align-items:center; gap:var(--s4); }
.review-done h2 { font:600 32px/1.1 var(--display); font-variation-settings:var(--wonk),"opsz" 40; letter-spacing:-.02em; }

/* desktop/phone split for the two verdict surfaces and the swipe chrome */
.verdict-desk { display:flex; flex-direction:column; align-items:center; gap:20px; }

/* phone: swipe-to-grade chrome on the Today card */
.swipe-hints { display:flex; gap:var(--s2); margin-top:var(--s1); }
.swipe-hints span {
  display:inline-flex; align-items:center; gap:6px; font:400 11px/1 var(--mono);
  letter-spacing:-.04em; border-radius:var(--r-pill); padding:7px 10px;
}
.hint-no { color:var(--wrong); background:var(--wrong-wash); }
.hint-ok { color:var(--right); background:var(--right-wash); }
.edge {
  position:absolute; top:50%; font:600 11px/1.3 var(--body); letter-spacing:.08em;
  text-transform:uppercase; writing-mode:vertical-rl; opacity:.4; transition:opacity var(--t-fast);
}
.edge { opacity:0; }
.edge.live { opacity:.4; }
.edge.armed { opacity:1; }
.edge-no { left:18px; transform:translateY(-50%); rotate:180deg; color:var(--wrong); }
.edge-ok { right:18px; transform:translateY(-50%); color:var(--right); }

/* phone: verdict sheet */
#review-sheet { flex:none; }
.sheet {
  background:var(--surface); border-top:1px solid var(--line); border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  padding:20px; display:flex; flex-direction:column; gap:14px;
  box-shadow:0 -10px 30px rgba(20,24,32,.10);
  margin:0 -20px calc(-1 * var(--s5));
}
.sheet-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.sheet-head .pipset { display:flex; align-items:center; gap:var(--s2); }
.sheet-word {
  align-self:flex-start; font:400 36px/1.05 var(--display); font-variation-settings:var(--wonk),"opsz" 60;
  letter-spacing:-.025em; --pad:4px; word-break:break-word;
}
.sheet-word .sweep-mark { top:16%; bottom:6%; }
.sheet-ex { font:italic 400 14px/1.5 var(--body); color:var(--ink-soft); }
.sheet-actions { display:flex; gap:10px; }
.sheet-actions .btn { min-height:50px; border-radius:12px; }
.sheet-actions .btn.primary { flex:1; }

/* ═══ dialog + toast ═════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center;
  padding:var(--s5); background:rgba(23,26,33,.35);
}
.modal-card {
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:var(--s5); animation:pop var(--t-mid) var(--ease);
}
@keyframes pop { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:none} }
.modal-title { font:600 20px/1.3 var(--body); margin-bottom:var(--s2); }
.modal-card .row-actions .btn { flex:1; }

.toast {
  position:fixed; left:50%; bottom:var(--s5); z-index:180; transform:translateX(-50%);
  background:var(--ink); color:var(--on-ink); border-radius:var(--r-ctl);
  padding:var(--s3) var(--s5); font:500 14px/1.4 var(--body); max-width:min(90vw,420px);
  animation:rise var(--t-fast) var(--ease);
}
.toast.err { background:var(--wrong); color:#fff; }
@keyframes rise { from{opacity:0;transform:translate(-50%,8px)} to{opacity:1;transform:translate(-50%,0)} }
.toast.out { animation:sink var(--t-fast) var(--ease) forwards; }
@keyframes sink { from{opacity:1;transform:translate(-50%,0)} to{opacity:0;transform:translate(-50%,8px)} }

/* ═══ phone ══════════════════════════════════════════════════════ */
.tabbar { display:none; }
@media (max-width:899px) {
  .shell { grid-template-columns:1fr; }
  .rail { display:none; }
  .view.pad { padding:10px 20px 96px; }
  #progress.pad, #settings.pad { max-width:none; }
  .viewhead h1 { font-size:26px; font-variation-settings:var(--wonk),"opsz" 34; }
  .card { padding:18px; }
  .statpair { display:flex; }
  .ladder { gap:6px; }
  .rung { gap:6px; }
  .rung-bar { height:70px; border-radius:8px; }
  .rung-fill { border-radius:8px; }
  .rung-n { font-size:13px; }
  .rung-l { display:none; }
  .rung-l.short { display:block; font-size:9px; }
  #drill-btn { align-self:flex-start; }
  .colkey, .toolbar .dates, .range-inputs { display:none !important; }

  /* Today — capture, then the word, then the queue */
  #today.view.active {
    display:flex; flex-direction:column; height:100vh;
    padding-bottom:calc(66px + env(safe-area-inset-bottom));
  }
  .capture { padding:var(--s2) 20px 14px; gap:10px; flex-direction:column; align-items:stretch; }
  .capture-head { display:flex; }
  .capture-label { display:none; }
  .capture-row { gap:var(--s2); }
  .capture-row .input {
    min-height:46px; border-radius:12px; border-color:var(--ink);
    padding:12px 14px; line-height:1.3;
  }
  .capture-row .btn {
    min-height:46px; border-radius:12px; padding:0 18px;
    background:var(--ink); color:var(--on-ink); border-color:var(--ink);
  }
  .capture-row .btn:hover:not(:disabled) { background:var(--ink); opacity:.85; }
  .goal { display:none; }

  .workbench { flex:none; padding:var(--s4) 20px 0; gap:var(--s3); }
  .workbench .viewhead { display:none; }
  .panel { flex:none; padding:20px; gap:14px; }
  .panel-meta-left { gap:var(--s2); }
  .panel-meta .data { font-size:10px; }
  .panel-word { font-size:40px; font-variation-settings:var(--wonk),"opsz" 60; --pad:5px; }
  .panel-def { font-size:16px; }
  .panel-ex { font-size:14px; min-height:22px; }
  .panel-actions { gap:10px; }
  .panel-actions .btn { flex:1; min-height:50px; border-radius:12px; padding:0 var(--s3); font-size:16px; }
  .panel-actions .btn.secondary { font-size:15px; padding:0 var(--s3); }
  .panel-actions .kbd { display:none; }
  .edge, .swipe-hints { display:flex; }

  .queue { border-right:0; padding:var(--s4) 20px 0; min-height:0; flex:1; }
  .queue-head { padding:0 0 10px; border-bottom:0; gap:10px; }
  .queue-title h2 {
    font:600 11px/1.2 var(--body); letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-soft);
  }
  #queue-count { font-size:11px; }
  .queue-head .chip { font-size:12px; }
  .queue-list { padding:0; }
  .qrow { border-radius:0; border-bottom:1px solid var(--row-line); padding:10px 6px; }
  .qrow-term { font-size:18px; font-variation-settings:var(--wonk),"opsz" 22; }
  .qrow-def { font-size:12px; }

  /* Words — grouped by return date, one meta line per row */
  #search { border-radius:12px; }
  .toolbar .chips { gap:7px; }
  .toolbar .chip { padding:var(--s2) 13px; }
  .wordrow {
    grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"main next menu";
    gap:var(--s3); padding:11px 0; border-bottom:1px solid var(--row-line);
  }
  .wordrow:hover { background:transparent; }
  .wordrow[role="button"] { cursor:pointer; }
  .wordrow.open { background:var(--surface); border-radius:var(--r-ctl); padding-left:var(--s2); padding-right:var(--s2); }
  .wordrow > .pips { display:none; }
  .wordrow-term .sweep-mark { top:14%; bottom:4%; }
  .wordrow-def { font:400 13px/1.4 var(--body); }
  .wordrow-right { gap:3px; }
  .wordrow-right .pips { display:flex; }
  .wordrow-right .iv, .wordrow-right .tally { display:none; }
  .wordrow-right .iv-m { display:block; }

  /* Review — choices stay, the verdict rises as a sheet */
  .review { padding:10px 20px var(--s5); }
  .review-body { max-width:none; }
  .review-body.answered { justify-content:flex-start; align-items:stretch; }
  .review-body.answered .review-prompt { max-width:none; }
  .review-body.answered ~ .review-foot { display:none; }
  .dot { width:14px; }
  .verdict-desk { display:none; }

  .tabbar {
    position:fixed; left:0; right:0; bottom:0; z-index:110; display:grid;
    grid-template-columns:repeat(4,1fr); gap:var(--s1);
    background:var(--surface); border-top:1px solid var(--line);
    padding:10px 20px env(safe-area-inset-bottom);
  }
  .tabbtn {
    border:0; background:transparent; color:var(--ink-soft); cursor:pointer;
    min-height:46px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; font:500 11px/1 var(--body);
  }
  .tabmark { width:18px; height:3px; border-radius:2px; background:var(--pip-empty); }
  .tabbtn[aria-current="page"] { color:var(--ink); font-weight:600; }
  .tabbtn[aria-current="page"] .tabmark { background:var(--ink); }
}
/* desktop: the flat table, the two-column choices, the replaced verdict */
@media (min-width:900px) {
  .group-label { display:none; }
  .edge, .swipe-hints, #review-sheet, .sheet-actions .btn.bury { display:none; }
  .toolbar .states { display:none; }
  .choices { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); max-width:560px; }
  .review-body.answered .choices, .review-body.answered .review-prompt { display:none; }
  .review-body.answered { justify-content:center; }
}

@media (max-width:360px) {
  .capture-row { flex-direction:column; }
  .capture-row .btn { width:100%; }
}

/* ═══ reduced motion ═════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}