/* practice-style.css — shared visual language for every Unit 1 online-practice
   page. Deliberately its own system, not hub/'s theme (see practice-online/README.md
   for why this stays separate from the public student hub). Extracted from the
   original single-file prototype (practice-prototype-unit01-lesson01.html) so a
   style tweak doesn't mean editing 13 duplicated <style> blocks. */

:root{
  --bg:#f4f6fb; --card:#ffffff; --ink:#1b2233; --sub:#5b6478;
  --accent:#3457d5; --accent-ink:#ffffff;
  --good:#1f9d55; --good-bg:#e8f8ee;
  --bad:#c23b3b; --bad-bg:#fdeaea;
  --line:#e2e6f0;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#12141c; --card:#1b1f2b; --ink:#eef0f6; --sub:#a3aabd;
    --accent:#6d8bff; --accent-ink:#0c0e14;
    --good:#4fd884; --good-bg:#123322;
    --bad:#ff7b72; --bad-bg:#3a1a1a;
    --line:#2a2f40; }
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.wrap{width:100%;max-width:560px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:0 4px 24px rgba(0,0,0,.06);}
h1{font-size:1.1rem;margin:0 0 4px;}
.meta{color:var(--sub);font-size:.85rem;margin-bottom:20px;}
.dots{display:flex;gap:6px;margin-bottom:22px;}
.dot{flex:1;height:6px;border-radius:3px;background:var(--line);}
.dot.done{background:var(--accent);}
.dot.current{background:var(--accent);opacity:.5;}
label{display:block;font-size:.9rem;color:var(--sub);margin-bottom:6px;}
input[type=text]{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);
  background:transparent;color:var(--ink);font-size:1rem;}
input[type=text]:focus{outline:2px solid var(--accent);border-color:transparent;}
select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-size:1rem;}
select:focus{outline:2px solid var(--accent);border-color:transparent;}
#lessonList{max-height:320px;overflow-y:auto;margin-bottom:4px;}
.checkrow{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line);font-size:.92rem;cursor:pointer;}
.checkrow:last-child{border-bottom:none;}
.checkrow input[type=checkbox]{width:18px;height:18px;flex:0 0 auto;accent-color:var(--accent);}
.capnote{font-size:.8rem;color:var(--sub);background:var(--bg);border:1px dashed var(--line);border-radius:8px;padding:8px 10px;margin:10px 0;}
.qtext{font-size:1.05rem;line-height:1.5;margin:4px 0 18px;}
.choice{display:block;width:100%;text-align:left;padding:12px 14px;margin-bottom:10px;border-radius:10px;
  border:1px solid var(--line);background:transparent;color:var(--ink);font-size:.95rem;cursor:pointer;
  transition:border-color .15s;}
.choice:hover{border-color:var(--accent);}
.choice.picked{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;}
.choice.correct{background:var(--good-bg);border-color:var(--good);color:var(--good);font-weight:600;}
.choice.incorrect{background:var(--bad-bg);border-color:var(--bad);color:var(--bad);}
.choice[disabled]{cursor:default;}
.subitem{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);}
.subitem:last-child{border-bottom:none;}
.subitem .prompt{font-size:.92rem;flex:1;padding-right:12px;}
.toggle{display:flex;gap:6px;}
.toggle button{padding:7px 12px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:.82rem;cursor:pointer;}
.toggle button.picked{border-color:var(--accent);}
.toggle button.correct{background:var(--good-bg);border-color:var(--good);color:var(--good);}
.toggle button.incorrect{background:var(--bad-bg);border-color:var(--bad);color:var(--bad);}
.btnrow{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}
button.primary{background:var(--accent);color:var(--accent-ink);border:none;padding:11px 20px;border-radius:10px;
  font-size:.95rem;font-weight:600;cursor:pointer;}
button.primary:disabled{opacity:.4;cursor:not-allowed;}
button.ghost{background:transparent;color:var(--sub);border:1px solid var(--line);padding:11px 16px;border-radius:10px;
  font-size:.9rem;cursor:pointer;}
.feedback{margin-top:10px;font-size:.85rem;padding:10px 12px;border-radius:8px;}
.feedback.good{background:var(--good-bg);color:var(--good);}
.feedback.bad{background:var(--bad-bg);color:var(--bad);}
.center{text-align:center;}
.score{font-size:2.4rem;font-weight:700;margin:6px 0;}
.tiny{font-size:.78rem;color:var(--sub);margin-top:26px;text-align:center;}
.tiny a{color:var(--sub);cursor:pointer;text-decoration:underline;}
pre{white-space:pre-wrap;font-size:.72rem;background:var(--bg);padding:10px;border-radius:8px;max-height:180px;overflow:auto;}
.tag{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);
  background:transparent;border:1px solid var(--accent);padding:2px 8px;border-radius:999px;margin-bottom:10px;}