/* ============================================================
   Step 1 Review — styles
   Theme is driven entirely by the CSS variables in :root.
   app.js overrides --accent / --bg / etc. per chosen theme.
   Semantic result colors (--red/--amber/--green) stay fixed.
   ============================================================ */
:root{
  /* default theme = Slate (calm). app.js may override these. */
  --bg:#0e1117; --panel:#171b22; --panel2:#1f242d; --line:rgba(255,255,255,.08);
  --txt:#eef1f6; --muted:#8a93a3;
  --accent:#7c9cff; --accent-dim:#6480d8;
  --accent-soft:rgba(124,156,255,.10); --accent-line:rgba(124,156,255,.30);
  --define:#d7b56a;
  /* fixed semantic colors */
  --red:#ff5d6c; --amber:#ffb454; --green:#46d98a; --blue:#6db6ff;
}
*{box-sizing:border-box}
html{height:100%}
body{
  margin:0;height:100dvh;overflow:hidden;display:flex;flex-direction:column;
  background:var(--bg);color:var(--txt);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none}
a{color:var(--blue)}

/* ---------- header ---------- */
header{flex:0 0 auto;background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid var(--line);
  padding:9px 14px;padding-top:max(9px,env(safe-area-inset-top))}
.bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.brand{font-weight:700;font-size:14px;white-space:nowrap}
.brand .dot{color:var(--accent)}
.count{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.count b{color:var(--green)}
.spacer{flex:1 1 auto}
.chip{border:1px solid var(--line);background:var(--panel);color:var(--muted);
  padding:5px 11px;border-radius:999px;font-size:12px;font-weight:600;transition:.12s;white-space:nowrap}
.chip:hover{color:var(--txt);border-color:rgba(255,255,255,.2)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#0b0d12}
.chip.on.red{background:var(--red);border-color:var(--red);color:#2a0a0e}
.chip.on.amber{background:var(--amber);border-color:var(--amber);color:#1a1a1a}
.chip.on.green{background:var(--green);border-color:var(--green);color:#062416}
.chip.on.flagchip{background:var(--amber);border-color:var(--amber);color:#1a1a1a}
select,input[type=search]{background:var(--panel);border:1px solid var(--line);color:var(--txt);
  border-radius:999px;padding:5px 11px;font-size:12px;outline:none;font-family:inherit}
input[type=search]{min-width:110px}
select:focus,input:focus{border-color:var(--accent)}

/* ---------- stage ---------- */
main{flex:1 1 auto;min-height:0;overflow:hidden;position:relative}
body.grid-mode main{overflow-y:auto;padding:14px}

/* FRONT */
.front{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px;display:flex}
.qcard{width:100%;max-width:820px;margin:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:20px;padding:24px 30px;
  display:flex;flex-direction:column;animation:pop .16s ease}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.qmeta{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.4px;margin-bottom:16px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.qmeta .qn{color:var(--accent);font-size:22px;font-weight:800}
.qmeta .qt{border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-size:10.5px;text-transform:uppercase}
.qmeta .boxbadge{margin-left:auto}
.stem{font-size:18.5px;line-height:1.62;color:var(--txt);margin-bottom:18px}
.exhibit{display:block;max-width:100%;max-height:46vh;margin:0 auto 18px;border-radius:12px;
  border:1px solid var(--line);background:#000;cursor:zoom-in}
.exhibit-cap{text-align:center;color:var(--accent-dim);font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin:-10px 0 16px}

/* choices = interactive answer buttons */
.choices{display:flex;flex-direction:column;gap:8px}
.choice{font-size:16px;color:#d7d7de;padding:11px 15px;border:1px solid var(--line);
  border-radius:11px;background:var(--panel2);line-height:1.45;text-align:left;
  display:flex;gap:9px;align-items:flex-start;transition:.12s;width:100%}
.choice:not(.locked):hover{border-color:var(--accent);background:color-mix(in srgb,var(--panel2) 85%,var(--accent))}
.choice .cl{color:var(--accent-dim);font-weight:800;flex:0 0 auto}
.choice .ctxt{flex:1 1 auto}
.choice .ck{flex:0 0 auto;font-weight:800;opacity:0;transition:.12s}
.choices.locked .choice{cursor:default}
.choice.correct{border-color:var(--green);background:rgba(70,217,138,.14);color:#eafff3}
.choice.correct .cl{color:var(--green)} .choice.correct .ck{opacity:1;color:var(--green)}
.choice.wrong{border-color:var(--red);background:rgba(255,93,108,.14);color:#ffeef0}
.choice.wrong .cl{color:var(--red)} .choice.wrong .ck{opacity:1;color:var(--red)}
.choice.dim{opacity:.5}
.fliphint{margin-top:20px;text-align:center;color:var(--accent-dim);font-size:12.5px;font-weight:700;letter-spacing:.6px}
.fliphint kbd{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:11px;color:var(--muted)}
.resultline{margin-top:16px;text-align:center;font-size:14px;font-weight:700;padding:9px 14px;border-radius:11px}
.resultline.ok{background:rgba(70,217,138,.12);color:var(--green);border:1px solid var(--green)}
.resultline.no{background:rgba(255,93,108,.12);color:var(--red);border:1px solid var(--red)}

/* BACK — 2 cols: [screenshot + First Aid] | [why + teaching] */
.back{height:100%;display:flex;gap:14px;padding:12px;animation:pop .16s ease}
.col{min-width:0;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.col-media{flex:0 0 46%}
.col-explain{flex:1 1 54%;padding-right:6px}
.colimg{width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:zoom-in;display:block}
.col .noimg{color:var(--muted);padding:40px;text-align:center;border:1px dashed var(--line);border-radius:10px}
@media(max-width:1100px){
  .back{flex-direction:column;overflow-y:auto}
  .col{flex:0 0 auto;height:auto;overflow:visible}
  .col-media,.col-explain{max-width:none}
  .col-explain{order:1}.col-media{order:2}
}
.whyhead{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.whyhead .qn{color:var(--accent);font-size:20px;font-weight:800}
.whyhead .concept{font-size:17px;font-weight:700;flex:1 1 160px;min-width:0}
.backbtn{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:11.5px;color:var(--muted);font-weight:700;white-space:nowrap}
.backbtn:hover{color:var(--accent);border-color:var(--accent)}
.tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tag{font-size:11px;font-weight:700;letter-spacing:.3px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);text-transform:uppercase}
.tag.res-Missed{color:var(--red);border-color:rgba(255,93,108,.4);background:rgba(255,93,108,.08)}
.tag.res-Guessed-Correct{color:var(--amber);border-color:rgba(255,180,84,.4);background:rgba(255,180,84,.08)}
.tag.res-Correct{color:var(--green);border-color:rgba(70,217,138,.4);background:rgba(70,217,138,.08)}

/* grade + progress controls on the back */
.gradebar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:10px 12px}
.gbtn{flex:1 1 auto;min-width:84px;border:1px solid var(--line);border-radius:10px;padding:9px 10px;
  font-size:13px;font-weight:800;background:var(--panel2);transition:.12s;text-align:center}
.gbtn.ok{color:var(--green)} .gbtn.ok:hover,.gbtn.ok.act{background:rgba(70,217,138,.16);border-color:var(--green)}
.gbtn.no{color:var(--red)} .gbtn.no:hover,.gbtn.no.act{background:rgba(255,93,108,.16);border-color:var(--red)}
.gbtn.reset{flex:0 0 auto;min-width:0;color:var(--muted);font-weight:700}
.gbtn.flag{flex:0 0 auto;min-width:0;color:var(--muted);font-weight:700}
.gbtn.flag.on{color:var(--amber);border-color:var(--amber);background:rgba(255,180,84,.12)}

/* progress meter (Leitner box + stats) */
.stat{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);font-weight:600;
  padding:2px 2px;flex-wrap:wrap}
.boxmeter{display:inline-flex;gap:3px;align-items:center}
.boxmeter i{width:9px;height:9px;border-radius:2px;background:var(--panel2);border:1px solid var(--line)}
.boxmeter i.fill{background:var(--accent);border-color:var(--accent)}
.boxmeter.mastered i.fill{background:var(--green);border-color:var(--green)}
.stat .sv{color:var(--txt)} .stat .ok{color:var(--green)} .stat .no{color:var(--red)}
.boxbadge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.boxbadge.mastered{color:var(--green);border-color:rgba(70,217,138,.4)}
.boxbadge .fl{color:var(--amber)}

/* note box (replaces the google doc) */
.notebox{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:10px 12px}
.notebox .why-label{color:var(--amber);margin-bottom:7px}
.notebox textarea{width:100%;min-height:62px;resize:vertical;background:var(--panel2);border:1px solid var(--line);
  border-radius:9px;color:var(--txt);font:14px/1.5 inherit;padding:9px 11px;outline:none}
.notebox textarea:focus{border-color:var(--accent)}
.notebox textarea::placeholder{color:var(--muted)}

.ansline{font-size:15px;font-weight:600;padding:10px 14px;border-radius:11px;background:var(--panel);border-left:3px solid var(--muted)}
.ansline.res-Missed{border-left-color:var(--red)} .ansline.res-Guessed-Correct{border-left-color:var(--amber)} .ansline.res-Correct{border-left-color:var(--green)}
.why-label{font-size:10.5px;font-weight:800;letter-spacing:1.4px;color:var(--accent-dim);text-transform:uppercase;margin-bottom:-4px}
.why{font-size:17px;line-height:1.58;color:var(--accent);font-weight:600;padding:14px 16px;border-radius:13px;
  background:var(--accent-soft);border:1px solid var(--accent-line)}
.why b,.why strong{color:var(--txt);font-weight:800}

/* long teaching (markdown) — headers near-white for calm reading; accent only as a structural bar */
.teach-label{font-size:10.5px;font-weight:800;letter-spacing:1.4px;color:var(--muted);text-transform:uppercase;margin:14px 0 -2px}
.teach{font-size:16px;line-height:1.72;color:#e7e7ee}
.teach h2,.teach h3{color:var(--txt);font-weight:800;line-height:1.35;margin:24px 0 9px;letter-spacing:.2px;
  padding-left:11px;border-left:3px solid var(--accent)}
.teach h2{font-size:19px}.teach h3{font-size:16.5px;border-left-color:var(--accent-dim)}
.teach>h2:first-child,.teach>h3:first-child{margin-top:4px}
.teach p{margin:10px 0}
.teach b,.teach strong{color:var(--txt);font-weight:800}
.teach em{color:var(--define);font-style:normal;font-weight:600}
.teach code{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:.92em}
.teach ul,.teach ol{margin:10px 0;padding-left:22px}
.teach li{margin:7px 0}
.teach blockquote{margin:18px 0 6px;padding:14px 16px;border-left:4px solid var(--accent);
  background:var(--accent-soft);border-radius:0 12px 12px 0;
  font-size:16.5px;line-height:1.6;color:var(--txt)}
.teach blockquote b,.teach blockquote strong{color:var(--accent)}
.teach table{border-collapse:collapse;width:100%;margin:14px 0;font-size:14.5px;background:var(--panel);border-radius:10px;overflow:hidden}
.teach th,.teach td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
.teach th{background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px}
.teach td b,.teach td strong{color:var(--txt)}
.teach a.faref{color:var(--accent);font-weight:700;cursor:pointer;white-space:nowrap;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.teach a.faref:hover{background:var(--accent-soft);border-radius:3px}
.fa-lab{margin-top:10px}
.blk .k{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin-bottom:3px}
.blk .v{font-size:13.5px;color:#d4d4dc}
.blk .v em{color:var(--define);font-style:normal}
.notes{background:rgba(109,182,255,.06);border:1px solid rgba(109,182,255,.25);border-radius:12px;padding:12px 14px}
.notes .why-label{color:var(--blue);margin-bottom:6px}
.notesbody{font-size:15px;line-height:1.6;color:#dbe6f2}
.notesbody b{color:var(--txt)}
details.more{border:1px solid var(--line);border-radius:11px;background:var(--panel);overflow:hidden}
details.more>summary{padding:10px 14px;font-size:12.5px;font-weight:700;color:var(--muted);list-style:none;cursor:pointer}
details.more>summary::-webkit-details-marker{display:none}
details.more[open]>summary{border-bottom:1px solid var(--line);color:var(--txt)}
.more-body{padding:12px 15px}
.qtext{font-size:13px;color:var(--muted);background:var(--panel2);border-radius:9px;padding:10px 12px;margin-bottom:12px;line-height:1.5}
.blist{list-style:none;padding:0;margin:0}
.blist li{position:relative;padding:6px 0 6px 18px;font-size:14px;line-height:1.5;border-top:1px solid var(--line)}
.blist li:first-child{border-top:none}
.blist li:before{content:"";position:absolute;left:3px;top:13px;width:5px;height:5px;border-radius:50%;background:var(--accent-dim)}
.blist li.sub{padding-left:0;font-weight:800;color:var(--blue);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.blist li.sub:before{display:none}
.blist b,.blist strong{color:var(--txt)}.blist em{color:var(--define);font-style:normal}

/* ---------- nav ---------- */
.nav{flex:0 0 auto;background:color-mix(in srgb,var(--bg) 95%,transparent);border-top:1px solid var(--line);
  padding:8px 14px;padding-bottom:max(8px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px}
.nbtn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--panel);border:1px solid var(--line);
  font-size:19px;display:grid;place-items:center;transition:.12s}
.nbtn:hover{border-color:var(--accent);color:var(--accent)} .nbtn:disabled{opacity:.3;cursor:default}
.progress{flex:1 1 auto}
.ptrack{height:5px;border-radius:3px;background:var(--panel2);overflow:hidden}
.pfill{height:100%;background:var(--accent);width:0;transition:width .2s}
.pmeta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:5px}
.jump{width:54px;text-align:center;font-variant-numeric:tabular-nums}

/* ---------- grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:11px}
.gcell{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--panel);text-align:left;padding:0;display:flex;flex-direction:column;transition:.12s;position:relative}
.gcell:hover{border-color:var(--accent);transform:translateY(-2px)}
.gcell .gimg{width:100%;aspect-ratio:16/10;object-fit:cover;background:#000;border-bottom:1px solid var(--line)}
.gcell .gcap{padding:7px 9px}
.gcell .gnum{font-weight:800;color:var(--accent);font-size:12.5px}
.gcell .gtit{font-size:11.5px;color:#d0d0d6;line-height:1.32;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle}
.gdot.res-Missed{background:var(--red)}.gdot.res-Guessed-Correct{background:var(--amber)}.gdot.res-Correct{background:var(--green)}
.gcell .gflag{position:absolute;top:6px;right:7px;font-size:13px}
.gcell .gmaster{position:absolute;top:6px;left:7px;font-size:12px;color:var(--green)}

/* zoom overlay */
.zoom{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.96);display:none;overflow:auto;padding:18px;text-align:center}
.zoom.on{display:block}
.zoom img{display:inline-block;max-width:none;width:auto;border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.12);cursor:zoom-in}
.zoom img.big{cursor:zoom-out}
.zoomclose{position:fixed;top:12px;right:16px;z-index:61;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:20px;display:none;place-items:center}
.zoom.on .zoomclose{display:grid}
.zoomhint{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:61;color:#cbd;
  font-size:11.5px;background:rgba(0,0,0,.6);padding:4px 11px;border-radius:999px;display:none}
.zoom.on .zoomhint{display:block}
.empty{display:grid;place-items:center;height:100%;color:var(--muted)}

/* toast */
.toast{position:fixed;left:50%;bottom:78px;transform:translateX(-50%) translateY(16px);z-index:70;
  background:var(--panel);border:1px solid var(--line);color:var(--txt);font-size:13px;font-weight:700;
  padding:9px 16px;border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:.2s}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:var(--green);color:var(--green)} .toast.no{border-color:var(--red);color:var(--red)}

@media(max-width:900px){
  .stem{font-size:17px}.why{font-size:16px}
  .qcard{padding:20px 18px}
}