/* oral-examiner — tokens and components lifted from docs-design/v3.html.
   The v3 "phone" frame is the app shell here: full viewport on a phone,
   a centred column on desktop. Light and dark follow the system. */
:root {
  --paper:#F7F4F1; --ink:#18212C; --muted:#5C6672; --card:#FFFFFF; --line:#E4DEDA; --soft:#EFEAE6;
  --grid:#F1DCD7; --pre:#2B63C9; --renal:#0F7F73; --post:#6A4BC4; --frame:#18212C; --other:#8A6D3B;
  --partial:#B86E00; --miss:#B23E26; --hit-bg:#EAF1FC; --ok:#0F7F73;
  --car:#0E1217; --car-ink:#E9EEF4; --car-muted:#8C97A4; --car-line:#262E3A; --car-soft:#1B2430;
  --display:"Frank Ruhl Libre", "Times New Roman", serif;
  --body:"IBM Plex Sans Hebrew", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper:#12161C; --ink:#E9EEF4; --muted:#9AA4B0; --card:#1A2029; --line:#2C3440; --soft:#222A35; --grid:#2A2124;
  --pre:#7FA8F0; --renal:#4FC2B3; --post:#AE96F2; --frame:#E9EEF4; --other:#D7B37A; --partial:#F0A93A; --miss:#F07C62; --hit-bg:#1D2B42; --ok:#4FC2B3; color-scheme:dark } }
:root[data-theme="dark"] {
  --paper:#12161C; --ink:#E9EEF4; --muted:#9AA4B0; --card:#1A2029; --line:#2C3440; --soft:#222A35; --grid:#2A2124;
  --pre:#7FA8F0; --renal:#4FC2B3; --post:#AE96F2; --frame:#E9EEF4; --other:#D7B37A; --partial:#F0A93A; --miss:#F07C62; --hit-bg:#1D2B42; --ok:#4FC2B3; color-scheme:dark }

* { -webkit-tap-highlight-color: transparent; }
html, body { height:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); line-height:1.6; overflow:hidden; }
[hidden] { display:none !important; }

/* ---------- shell ---------- */
.app { position:relative; height:100dvh; max-width:600px; margin:0 auto; background:var(--card); display:flex; flex-direction:column; overflow:hidden; }
@media (min-width: 640px) { .app { border-inline:1px solid var(--line); } }
.app.car { background:var(--car); color:var(--car-ink); }
.screen { flex:1; min-height:0; display:flex; flex-direction:column; }
.bar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:74px; box-sizing:border-box;
  padding:calc(12px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); }
.bar .t { font-weight:600; font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar .btns { display:flex; gap:8px; flex:none; }
.iconbtn { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:transparent; color:inherit; display:grid; place-items:center; cursor:pointer; flex:none; padding:0; }
.iconbtn svg { width:20px; height:20px; }
.iconbtn[aria-pressed="true"] { background:var(--ink); color:var(--card); border-color:var(--ink); }
.car .iconbtn[aria-pressed="true"] { background:var(--car-ink); color:var(--car); }
.scroll { flex:1; overflow-y:auto; overflow-x:hidden; min-width:0; min-height:0; padding:4px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)); display:flex; flex-direction:column; gap:16px; -webkit-overflow-scrolling:touch; }
/* Children of the scroll column never shrink: an overflow-x:auto wrapper (the lab table) would otherwise collapse to 0 height. */
.scroll > * { flex-shrink:0; }
.foot { padding:12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); }
.primary { min-height:56px; border-radius:16px; border:0; background:var(--ink); color:var(--card); font:600 17px var(--body); cursor:pointer; }
.primary:disabled { opacity:.5; cursor:default; }
.ghost { min-height:48px; border-radius:14px; border:1px solid var(--line); background:transparent; color:var(--ink); font:500 15px var(--body); cursor:pointer; }
.car .ghost { color:var(--car-ink); border-color:var(--car-line); }
.car .primary { background:var(--car-ink); color:var(--car); }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid var(--pre); outline-offset:2px; }
.label { font-size:12px; letter-spacing:.06em; color:var(--muted); font-weight:600; }
.hint { font-size:12.5px; color:var(--muted); text-align:center; }
.err { color:var(--miss); font-size:14px; line-height:1.5; margin:0; text-align:center; }
.steps { display:flex; gap:4px; }
.steps span { flex:1; height:5px; border-radius:3px; background:var(--line); }
.steps span.done { background:var(--ink); } .steps span.now { background:var(--pre); }
.car .steps span { background:var(--car-line); } .car .steps span.done { background:var(--car-ink); }
.qhead { font-family:var(--display); font-weight:700; font-size:23px; line-height:1.35; margin:0; text-wrap:balance; }
.big { font-family:var(--display); font-weight:900; font-size:30px; line-height:1.2; margin:0; text-wrap:balance; }
.tip { display:flex; gap:10px; align-items:flex-start; background:var(--soft); border-radius:14px; padding:12px 14px; font-size:14px; line-height:1.5; }
.tip svg { width:20px; height:20px; flex:none; margin-top:2px; }
.tip .x { margin-inline-start:auto; color:var(--muted); font-size:12px; white-space:nowrap; }

/* inline confirm (no window.confirm) */
.confirm { display:flex; align-items:center; gap:8px; background:var(--soft); border-radius:14px; padding:10px 14px; font-size:14px; flex-wrap:wrap; }
.car .confirm { background:var(--car-soft); }
.confirm span { flex:1; min-width:12ch; }
.confirm button { min-height:40px; padding:0 14px; }
.confirm .danger { background:var(--miss); color:#fff; border:0; }
.confirm.qa { border:1px solid var(--pre); background:var(--hit-bg); }
.iconbtn[aria-pressed="true"]#ask-btn, .iconbtn[aria-pressed="true"]#car-ask-btn { background:var(--pre); border-color:var(--pre); color:#fff; }

/* banner: reconnecting / errors inside a screen */
.banner { display:flex; gap:10px; align-items:center; background:var(--soft); border-radius:14px; padding:12px 14px; font-size:14px; line-height:1.5; }
.banner svg { width:20px; height:20px; flex:none; }
.banner.bad { color:var(--miss); }
.car .banner { background:var(--car-soft); color:var(--car-ink); }

/* ---------- onboarding / help ---------- */
.onb { gap:18px; padding-top:30px; }
.onb ol { margin:0; padding-inline-start:22px; display:flex; flex-direction:column; gap:14px; font-size:16px; }
.onb li b { display:block; }
.onb li span { color:var(--muted); font-size:14px; }
.mini-trace { height:64px; border-radius:12px; border:1px solid var(--line); background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:12px 12px; }
.mini-trace svg { width:100%; height:100%; display:block; }

/* ---------- home ---------- */
.case { border:1px solid var(--line); border-radius:20px; padding:18px; display:flex; flex-direction:column; gap:10px; }
.case h2 { font-family:var(--display); font-size:24px; font-weight:900; margin:0; line-height:1.15; }
.meta { color:var(--muted); font-size:14px; }
.seg { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.seg button { min-height:48px; border:0; background:transparent; color:var(--muted); font:600 15px var(--body); cursor:pointer; }
.seg button[aria-pressed="true"] { background:var(--ink); color:var(--card); }
.segnote { font-size:13.5px; color:var(--muted); min-height:40px; }
.hist { display:flex; align-items:flex-end; gap:10px; height:70px; }
.hist div { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-family:var(--mono); font-size:12px; color:var(--muted); }
.hist i { width:100%; background:var(--line); border-radius:4px 4px 0 0; }
.hist i.ok { background:var(--ok); }
.hist div:last-child { color:var(--ink); }
.empty { border:1px dashed var(--line); border-radius:14px; padding:16px; color:var(--muted); font-size:14px; text-align:center; }
.stamp { align-self:flex-start; border:2.5px solid var(--ok); color:var(--ok); border-radius:8px; padding:4px 12px; font-family:var(--display); font-weight:900; font-size:20px; transform:rotate(-6deg); letter-spacing:.04em; }
.stamp.gold { border-color:var(--partial); color:var(--partial); }

/* sign-in + account */
.google-btn { display:flex; align-items:center; justify-content:center; gap:12px; text-decoration:none; }
.google-btn svg { width:22px; height:22px; background:#fff; border-radius:50%; padding:3px; box-sizing:content-box; flex:none; }
.auth-err { background:var(--paper); border:1px solid var(--line); border-inline-start:4px solid var(--miss, #c2412d); border-radius:12px; padding:12px 14px; margin:0; font-size:15px; }
.meta.small { font-size:13px; }
.linkbtn { background:none; border:0; color:var(--muted); font:500 14px var(--body); text-decoration:underline; cursor:pointer; padding:8px 0; align-self:center; }
.avatar { font:700 17px var(--body); }
.account-panel { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.account-panel .who { display:flex; flex-direction:column; min-width:0; }
.account-panel .who span { color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; text-align:end; }
.account-panel .ghost { flex:none; padding:0 16px; }
.keyform { display:flex; flex-direction:column; gap:12px; }
.keyform input { min-height:52px; border:1px solid var(--line); border-radius:14px; padding:0 14px; font:16px var(--mono); background:var(--paper); color:var(--ink); direction:ltr; text-align:left; }

/* ---------- connecting ---------- */
.center { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:20px; }
.ring { width:120px; height:120px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; position:relative; }
.ring::before { content:""; position:absolute; inset:18px; border-radius:50%; background:var(--soft); animation:breathe 2.4s infinite ease-in-out; }
.ring svg { position:relative; width:36px; height:36px; }
.ring.level::before { transition:transform .1s linear; animation:none; transform:scale(var(--lvl, .9)); }
@keyframes breathe { 0%,100%{transform:scale(.88)} 50%{transform:scale(1)} }
.quote { font-family:var(--display); font-size:22px; line-height:1.4; max-width:22ch; margin:0; }

/* ---------- passage / step ---------- */
.status { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); min-height:24px; }
.status.turn { color:var(--ok); font-weight:600; }
.status .dot { width:10px; height:10px; border-radius:50%; background:var(--ok); animation:breathe 1.6s infinite; flex:none; }
.eqz { display:flex; gap:3px; align-items:flex-end; height:16px; flex:none; }
.eqz i { width:3px; background:var(--pre); border-radius:2px; animation:eq 1s infinite ease-in-out; }
.eqz i:nth-child(2){animation-delay:.2s} .eqz i:nth-child(3){animation-delay:.4s} .eqz i:nth-child(4){animation-delay:.1s}
@keyframes eq { 0%,100%{height:4px} 50%{height:16px} }
.passage p { margin:0 0 8px; line-height:1.75; font-size:15.5px; white-space:pre-wrap; }
.passage p:last-child { margin-bottom:0; }
.passage img { width:100%; height:auto; border-radius:12px; border:1px solid var(--line); background:#fff; display:block; margin-top:8px; }
table.labs { width:100%; border-collapse:collapse; font-size:14px; }
table.labs th { text-align:right; font-weight:600; padding:7px 4px; border-bottom:2px solid var(--line); font-size:12.5px; color:var(--muted); }
table.labs td { padding:7px 4px; border-bottom:1px solid var(--line); }
table.labs td.v, table.labs th.v { font-family:var(--mono); text-align:left; direction:ltr; }
table.labs td.hi { color:var(--miss); font-weight:600; }
.labs-wrap { overflow-x:auto; }
.labs-foot { font-size:13.5px; color:var(--muted); margin:6px 0 0; font-family:var(--mono); direction:ltr; text-align:left; }
.listen { flex:1 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--muted); min-height:180px; }
.listen .ring { width:150px; height:150px; }
.timer { font-family:var(--mono); font-size:14px; color:var(--muted); }

/* chips (practice) */
.chips { display:flex; flex-direction:column; gap:10px; }
.chip { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:14px; border:1px solid var(--line); }
.chip .nm { font-weight:600; display:flex; align-items:center; gap:8px; min-width:0; font-size:14px; }
.chip .nm span.txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip .sw { width:10px; height:10px; border-radius:50%; flex:none; background:currentColor; }
.dots { display:flex; gap:5px; direction:ltr; flex-wrap:wrap; justify-content:flex-end; max-width:50%; }
.dots i { width:12px; height:12px; border-radius:50%; border:2px solid var(--line); box-sizing:border-box; }
.dots i.p { border-color:currentColor; background:transparent; }
.dots i.f { border-color:transparent; background:currentColor; }
.chip.full { border-color:currentColor; }
/* live text from the second ear: what you said, as you say it */
.said { font-size:16.5px; line-height:1.7; color:var(--ink); min-height:28px; padding:10px 12px; border-radius:12px; background:var(--soft); border-right:3px solid var(--line); }
.said:empty { display:none; }
.said mark { color:#fff; border-radius:5px; padding:0 4px; background:var(--other); }
.said mark.pre { background:var(--pre); } .said mark.renal { background:var(--renal); } .said mark.post { background:var(--post); }
.said mark.frame { background:var(--frame); color:var(--paper); } .said mark.other { background:var(--other); }

/* mock panel (?mock=1) */
.mock { border:1px dashed var(--pre); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:10px; background:var(--soft); width:100%; box-sizing:border-box; text-align:right; }
.mock .lbl { font-size:12px; color:var(--pre); font-weight:600; letter-spacing:.06em; }
.mock .read { font-size:14px; line-height:1.6; max-height:160px; overflow:auto; white-space:pre-wrap; margin:0; flex-shrink:0; }
.mock textarea { width:100%; box-sizing:border-box; min-height:90px; border:1px solid var(--line); border-radius:12px; padding:10px; font:14px var(--body); background:var(--card); color:var(--ink); resize:vertical; }
.car .mock { background:var(--car-soft); } .car .mock textarea { background:var(--car); color:var(--car-ink); border-color:var(--car-line); }

/* ---------- car ---------- */
/* "safe center": when the buttons make the content taller than the screen it scrolls from the top instead of clipping the pulse */
.car .scroll { align-items:center; justify-content:safe center; text-align:center; gap:22px; }
.car .bar .t { color:var(--car-muted); }
.car .iconbtn { border-color:var(--car-line); }
.car .foot { border-color:var(--car-line); }
.car .hint { color:var(--car-muted); }
.pulse { width:210px; height:210px; border-radius:50%; border:2px solid var(--car-line); display:grid; place-items:center; position:relative; flex:none; }
.pulse::before { content:""; position:absolute; inset:28px; border-radius:50%; background:var(--car-soft); animation:breathe 3s infinite ease-in-out; }
.pulse.dashed { border-style:dashed; }
.pulse.live::before { background:#1F3A4A; }
.pulse div { position:relative; display:flex; flex-direction:column; align-items:center; }
.pulse small { font-size:13px; color:var(--car-muted); letter-spacing:.08em; }
.pulse span { font-family:var(--display); font-size:64px; font-weight:900; line-height:1; }
.cardots { display:flex; gap:12px; width:100%; justify-content:center; flex-wrap:wrap; }
.cardots div { display:flex; flex-direction:column; gap:6px; align-items:center; font-size:13px; color:var(--car-muted); min-width:84px; max-width:110px; }
.cardots .r { width:64px; height:64px; border-radius:50%; border:4px solid var(--car-line); display:grid; place-items:center; font-family:var(--mono); color:var(--car-ink); font-size:18px; }
.cardots .r.done { border-color:var(--renal); }
.car .say { font-size:21px; line-height:1.45; max-width:19ch; margin:0; }
.car .say.q { color:#9FC0FF; }
.car .say.muted { font-size:17px; color:var(--car-muted); }

/* home: the car switch */
.switch { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; text-align:right; border:1px solid var(--line); border-radius:16px; padding:12px 14px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.switch .sw-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.switch .sw-text b { font-weight:600; font-size:15px; }
.switch .sw-text span { font-size:13px; color:var(--muted); line-height:1.45; }
.switch .sw-knob { flex:none; width:46px; height:28px; border-radius:14px; background:var(--line); position:relative; transition:background .2s; }
.switch .sw-knob::after { content:""; position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%; background:var(--card); box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
.switch[aria-checked="true"] .sw-knob { background:var(--ok); }
.switch[aria-checked="true"] .sw-knob::after { transform:translateX(-18px); }

/* ---------- drill ---------- */
.ticks { display:flex; gap:6px; flex-wrap:wrap; }
.ticks i { width:18px; height:18px; border-radius:50%; border:2px solid var(--line); box-sizing:border-box; display:grid; place-items:center; font-size:11px; font-style:normal; }
.ticks i.now { border-color:var(--pre); }
.ticks i.ok { background:var(--ok); border-color:var(--ok); color:#fff; }
.ticks i.part { background:var(--partial); border-color:var(--partial); color:#fff; }
.ticks i.no { background:var(--miss); border-color:var(--miss); color:#fff; }
#mode-seg button[data-mode="drill"] small { font-size:11px; color:inherit; opacity:.75; margin-inline-start:4px; }

/* ---------- marking / between ---------- */
#s-between .score .num.wait { color:var(--muted); font-size:48px; }
/* provisional state: a moving spinner on top, everything below greyed until the grade lands */
.thinking { display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink); background:var(--hit-bg); border-radius:12px; padding:10px 12px; line-height:1.4; }
.spin { width:18px; height:18px; flex:none; border-radius:50%; border:2.5px solid var(--line); border-top-color:var(--pre); animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
#s-between.provisional .score, #s-between.provisional .verdict, #s-between.provisional .model, #s-between.provisional .miss-list { opacity:.55; filter:grayscale(.6); }
#s-between.provisional .score .num::after { content:" זמני"; font:600 12px var(--body); color:var(--muted); letter-spacing:0; }
/* the grade is final, the narrative (quotes, gaps, mistakes) is still coming: a quiet line, no spinner */
.thinking.soft { background:var(--soft); color:var(--muted); }
/* "טעויות" (owner 2026-10-19, 8): what he said that was wrong — its own muted-red frame, apart from the misses */
.mistakes { border:1px solid color-mix(in srgb, var(--miss) 45%, transparent); border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; font-size:14px; line-height:1.5; }
.mistakes .label { color:var(--miss); }
.mistakes .mrow { display:flex; flex-direction:column; gap:2px; }
.mistakes .mrow .mq { font-weight:600; }
.mistakes .mrow .why { color:var(--muted); font-size:13.5px; }
.mistakes.sum { margin:2px 0 8px; font-size:13px; padding:8px 10px; gap:6px; }
/* "כרטיסים חדשים לחזרה" (owner 11): the personalised cards' topics, small */
.newcards { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12.5px; color:var(--muted); }
.newcards .topic { border:1px solid var(--line); border-radius:999px; padding:2px 10px; color:var(--ink); }
.newcards .topic.soon { border-style:dashed; color:var(--muted); }
/* the cards mode while frozen */
.seg button.soon { opacity:.55; cursor:not-allowed; }
.seg button.soon small { margin-inline-start:4px; font-size:11px; border:1px dashed currentColor; border-radius:999px; padding:0 6px; }
/* the development board: one column per status, stacked on the phone; colour = status */
.board-lead { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
.board-sum { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
.board-sum a { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px; border-radius:14px; background:var(--soft); color:inherit; text-decoration:none; font-size:12px; text-align:center; line-height:1.3; }
.board-sum a b { font:700 22px var(--display); color:var(--bc); }
.bcol { display:flex; flex-direction:column; gap:10px; }
.bcol + .bcol { margin-top:6px; }
.bcol h3 { margin:6px 0 0; font:700 17px var(--display); display:flex; align-items:center; gap:8px; }
.bcol h3 i { width:10px; height:10px; border-radius:50%; background:var(--bc); flex:none; }
.bcol h3 span { font:500 13px var(--mono); color:var(--muted); }
.bcard { border:1px solid var(--line); border-inline-start:4px solid var(--bc); border-radius:14px; padding:12px 14px; background:var(--card); display:flex; flex-direction:column; gap:6px; }
.bcard b { font-size:15.5px; line-height:1.45; }
.bcard p { margin:0; font-size:14px; line-height:1.6; color:var(--ink); white-space:pre-line; }
.bcard .bnote { font-size:12.5px; color:var(--bc); font-weight:600; }
.bcard .bdate { font:500 11.5px var(--mono); color:var(--muted); }
.bfoot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bcopy { min-height:34px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink); font:500 13px var(--body); cursor:pointer; }
.bcopy.ok { border-color:var(--ok); color:var(--ok); }
.bcol.done .bcard { opacity:.78; }
.bcol .bempty { font-size:13px; color:var(--muted); padding:4px 2px; }
.bmore { align-self:flex-start; }
.st-idea { --bc:var(--post); } .st-fix { --bc:#C2622F; } .st-doing { --bc:var(--pre); } .st-done { --bc:var(--ok); }
/* the update block at the bottom of the home screen */
.update { display:flex; flex-direction:column; gap:8px; padding-top:8px; border-top:1px solid var(--line); }
.update .hint { text-align:center; font-family:var(--mono); font-size:12px; }
.update a.banner { color:inherit; text-decoration:none; border:1px solid var(--pre); }
.skiprow { display:flex; gap:8px; }
.skiprow button { flex:1; min-height:44px; font-size:14px; }
.tabs { display:flex; border-bottom:1px solid var(--line); }
.tabs button { flex:1; background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; padding:10px 4px; font:600 14px var(--body); color:var(--muted); cursor:pointer; min-height:44px; }
.tabs button[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--ink); }
/* list tab: a group row opens into its checklist */
.vrow { cursor:pointer; }
.vrow .chev { font-size:12px; color:var(--muted); transition:transform .15s; }
.vrow[aria-expanded="true"] .chev { transform:rotate(90deg); }
.vrow .mono.live { color:var(--muted); }
.vlist { grid-column:1 / -1; display:flex; flex-direction:column; gap:8px; padding:4px 0 6px; }
.vlist .item .txt b.why { display:block; font-weight:400; font-size:12.5px; color:var(--muted); }
.vlist .item .txt .tag { font-size:11px; color:var(--partial); border:1px solid currentColor; border-radius:999px; padding:0 6px; margin-inline-start:6px; vertical-align:middle; }
.vlist .item.unknown svg { color:var(--line); }
/* model-answer tab: the ideal answer, every scored span coloured by verdict */
.model { font-size:15.5px; line-height:1.85; white-space:pre-wrap; }
.model mark { border-radius:5px; padding:0 4px; color:inherit; background:transparent; border-bottom:2px solid var(--line); }
.model mark.said { background:color-mix(in srgb, var(--ok) 18%, transparent); border-bottom-color:var(--ok); }
.model mark.partly { background:color-mix(in srgb, var(--partial) 22%, transparent); border-bottom-color:var(--partial); }
.model mark.missed { background:color-mix(in srgb, var(--miss) 16%, transparent); border-bottom-color:var(--miss); text-decoration:none; }
.model .edition { margin-top:12px; font-size:13.5px; line-height:1.6; color:var(--muted); border-top:1px solid var(--line); padding-top:10px; white-space:normal; }
.model .edition b { color:var(--ink); font-weight:600; }
.model .cite { display:inline-block; background:none; border:0; padding:0 2px; color:var(--pre); font:600 12px var(--mono); vertical-align:super; cursor:pointer; min-height:0; }
.model .cite:disabled { color:var(--muted); cursor:default; }
.cite-box { position:sticky; bottom:8px; background:var(--card); border:1px solid var(--pre); border-radius:14px; padding:12px 14px 12px 36px; box-shadow:0 8px 24px rgba(0,0,0,.14); font-size:14px; line-height:1.6; display:flex; flex-direction:column; gap:6px; }
.cite-box blockquote { margin:0; font-style:italic; direction:ltr; text-align:left; unicode-bidi:plaintext; border-inline-start:3px solid var(--pre); padding-inline-start:10px; max-height:40vh; overflow:auto; }
.cite-box .cite-src { font-size:12.5px; color:var(--muted); }
.cite-box .cite-src a { color:var(--pre); }
.cite-box .cite-x { position:absolute; top:8px; left:8px; width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer; min-height:0; }
.struct { grid-template-columns:repeat(auto-fit, minmax(60px, 1fr)); }
.model .legend { display:flex; gap:12px; font-size:12px; color:var(--muted); margin-bottom:8px; flex-wrap:wrap; }
.model .legend i.sw { display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-2px; margin-inline-end:4px; flex:none; }
#s-between .foot { flex-direction:row; }
#s-between .foot button { flex:1; }
.score { display:flex; align-items:center; gap:18px; }
.score .num { font-family:var(--display); font-size:76px; font-weight:900; line-height:1; letter-spacing:-.02em; }
.score .num small { font-size:30px; }
.score .num.wait { color:var(--muted); font-size:48px; }
.split { display:flex; flex-direction:column; gap:6px; font-size:14px; flex:1; }
.split div { display:flex; justify-content:space-between; gap:8px; }
.mono { font-family:var(--mono); }
.verdict { display:flex; flex-direction:column; }
.vrow { display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; }
.vrow .bar2 { grid-column:1 / -1; height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
.vrow .bar2 i { display:block; height:100%; }
.miss-list { font-size:14px; color:var(--muted); line-height:1.6; }
.miss-list b { color:var(--miss); font-weight:600; }
.miss-list b.s { color:var(--ink); }
.qrows { display:flex; flex-direction:column; }
.qrow { display:grid; grid-template-columns:28px 1fr auto; gap:4px 10px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); background:none; border-inline:0; border-top:0; color:inherit; font:inherit; text-align:right; cursor:pointer; min-height:56px; width:100%; }
.qrow .k { font-family:var(--mono); color:var(--muted); }
.qrow .s { font-family:var(--mono); font-weight:500; }
.qrow .s.wait { color:var(--muted); }
.qrow .s.bad { color:var(--miss); }
.qrow .nm { font-size:14.5px; line-height:1.4; }
.cap { grid-column:2 / -1; justify-self:start; font-size:12px; color:var(--miss); border:1px solid currentColor; border-radius:999px; padding:2px 8px; max-width:100%; box-sizing:border-box; }
.verdict1 { font-family:var(--display); font-size:21px; line-height:1.4; margin:0; }

/* ---------- detail ---------- */
.grp { display:flex; flex-direction:column; gap:8px; }
.grp h3 { margin:0; font-size:15px; display:flex; justify-content:space-between; gap:8px; }
.grp h3 .mono { font-weight:500; color:var(--muted); flex:none; }
.item { display:grid; grid-template-columns:22px 1fr; gap:4px 8px; font-size:14px; line-height:1.5; }
.item svg { width:18px; height:18px; margin-top:2px; }
.q { grid-column:2; font-size:13px; color:var(--muted); border-inline-start:2px solid var(--line); padding-inline-start:8px; }
.item.ok svg { color:var(--renal); } .item.part svg { color:var(--partial); } .item.no svg { color:var(--miss); }
.item.no .txt { color:var(--muted); }
.item .dis { grid-column:2; justify-self:start; font-size:12.5px; color:var(--pre); background:none; border:0; padding:4px 0; cursor:pointer; font-family:inherit; min-height:32px; }
.struct { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; }
.struct div { border-radius:10px; padding:8px 4px; text-align:center; font-size:11.5px; border:1px solid var(--line); line-height:1.3; }
.struct div.y { background:var(--hit-bg); border-color:transparent; font-weight:600; }
/* the full-screen editor (dispute / typed answer): fills the app, so the keyboard shrinks it instead of covering it */
.editor { position:absolute; inset:0; background:var(--card); z-index:4; display:flex; flex-direction:column; }
.car .editor { background:var(--car); color:var(--car-ink); }
.editor-body { flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; padding:8px 16px 0; }
.editor-body textarea { flex:1; min-height:120px; width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:14px; padding:12px; font:16px/1.6 var(--body); background:var(--paper); color:var(--ink); resize:none; }
.car .editor-body textarea { background:var(--car-soft); color:var(--car-ink); border-color:var(--car-line); }
/* answer actions: "סיים" → "שלח" / "המשך להקליט", "כתוב תשובה" (owner 2026-10-19) */
.actrow { display:flex; gap:10px; flex-wrap:wrap; }
.actrow .act { flex:1 1 40%; min-height:52px; font-size:16px; }
.caracts { display:flex; flex-direction:column; gap:10px; width:100%; }
.caracts .act { min-height:58px; font-size:19px; font-weight:600; border-radius:18px; }
.caracts .act.small { min-height:44px; font-size:15px; font-weight:500; }
/* hidden structure (owner 2026-10-19): a veiled group shows no title and no dots until it is heard */
.chip.veiled { color:var(--muted); border-style:dashed; }
.chip.veiled .nm span.txt { letter-spacing:.3em; }
.chip.revealing, .cardots div.revealing { animation:revealIn .6s ease-out; }
.vrow.veiled { color:var(--muted); cursor:default; }
.car .cardots div.veiled { opacity:.55; }
@keyframes revealIn { from { transform:scale(.96); background:var(--hit-bg); } to { transform:none; } }

@media (prefers-reduced-motion: reduce) { .eqz i, .ring::before, .pulse::before, .status .dot { animation:none; } }