/* =====================================================================
   CA DMV Prep — "Calm Field Guide" design system
   Hybrid of warm editorial + soft calm-study.
   Everything visual lives here. Edit tokens to re-skin the whole app.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* Warm editorial base */
  --sand-50:#faf6ee;   --sand-100:#f4ecdd;  --sand-200:#eadfc9;
  --ink:#26303d;       --ink-soft:#4a5568;  --muted:#7c8698;
  /* Accents */
  --amber:#c8872f;     --amber-soft:#e9c58a; --amber-bg:#f7ecd6;
  --lav:#8a86c4;       --lav-soft:#c9c6e8;   --lav-bg:#eceaf6;
  /* Semantic */
  --good:#2f8f6b;  --good-bg:#e3f3ec;  --bad:#c35563;  --bad-bg:#f8e7e9;

  --bg:var(--sand-50);
  --surface:#fffdf8;
  --surface-2:#f6efe2;
  --border:#e7ddc9;
  --text:var(--ink);
  --accent:var(--amber);
  --accent-2:var(--lav);

  --shadow-sm:0 1px 2px rgba(56,42,20,.05);
  --shadow:0 2px 6px rgba(56,42,20,.05), 0 14px 34px -16px rgba(56,42,20,.18);
  --shadow-lg:0 10px 50px -20px rgba(56,42,20,.3);
  --radius:20px;  --radius-sm:13px;

  --serif:'Fraunces','Georgia',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
[data-theme="dark"]{
  --ink:#ece6da; --ink-soft:#c3bcae; --muted:#938c7e;
  --amber:#e0a94b; --amber-soft:#8a6a2e; --amber-bg:#2c2415;
  --lav:#b2aef0; --lav-soft:#4b4878; --lav-bg:#211f33;
  --good:#54c79a; --good-bg:#13291f; --bad:#e68793; --bad-bg:#2d161a;
  --bg:#15140f; --surface:#1d1b14; --surface-2:#252218; --border:#332f22;
  --text:var(--ink); --accent:var(--amber); --accent-2:var(--lav);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 6px rgba(0,0,0,.4), 0 18px 40px -20px rgba(0,0,0,.7);
  --shadow-lg:0 10px 60px -22px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); background:var(--bg); color:var(--text);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 600px at 110% -10%, var(--amber-bg) 0%, transparent 55%),
                   radial-gradient(900px 500px at -10% 110%, var(--lav-bg) 0%, transparent 55%);
  background-attachment:fixed;
}
a{color:var(--accent);text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;line-height:1.15}
::selection{background:var(--amber-soft);color:var(--ink)}

/* ---------- App layout ---------- */
.app{display:grid;grid-template-columns:312px 1fr;min-height:100vh}
.sidebar{
  background:color-mix(in srgb,var(--surface) 86%,transparent);
  backdrop-filter:blur(8px);
  border-right:1px solid var(--border);
  padding:26px 20px;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.main{padding:46px clamp(20px,5.5vw,70px);max-width:920px;margin:0 auto;width:100%}

/* ---------- Brand ---------- */
.brand{display:flex;align-items:center;gap:13px;margin-bottom:4px}
.brand .logo{
  width:46px;height:46px;border-radius:14px;flex:none;
  background:linear-gradient(145deg,var(--amber),var(--amber-soft));
  display:grid;place-items:center;color:#fff;font-family:var(--serif);font-weight:600;font-size:19px;
  box-shadow:var(--shadow-sm);
}
.brand h1{font-size:19px;margin:0}
.brand p{margin:1px 0 0;font-size:11.5px;color:var(--muted);font-weight:500;font-family:var(--sans);letter-spacing:.02em}

/* ---------- Overall progress ---------- */
.overall{margin:22px 0 8px;padding:16px;background:var(--surface-2);border-radius:16px;display:flex;align-items:center;gap:15px;border:1px solid var(--border)}
.ring{position:relative;width:60px;height:60px;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring .pct{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;font-weight:700;font-family:var(--sans)}
.overall .lbl{font-size:12px;color:var(--muted);font-family:var(--sans)}
.overall .lbl b{display:block;color:var(--text);font-size:13.5px;font-family:var(--sans);font-weight:600;margin-bottom:1px}

/* ---------- Coverage map ---------- */
.coverage-title{font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);margin:20px 8px 10px;font-weight:700;font-family:var(--sans)}
.navlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.navitem{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid transparent;background:none;
  padding:10px 12px;border-radius:13px;color:var(--text);font-size:13.5px;font-weight:500;font-family:var(--sans);transition:all .14s}
.navitem:hover{background:var(--surface-2);border-color:var(--border)}
.navitem.active{background:var(--surface);border-color:var(--amber-soft);box-shadow:var(--shadow-sm)}
.navitem.active .ico{background:linear-gradient(145deg,var(--amber),var(--amber-soft));color:#fff}
.navitem .ico{width:30px;height:30px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;flex:none;font-size:15px;transition:.14s}
.navitem .txt{flex:1;min-width:0}
.navitem .txt b{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navitem .txt small{display:block;font-size:10.5px;color:var(--muted);font-weight:500}
.navitem .status{font-size:12px;flex:none;color:var(--muted)}
.navitem .status.done{color:var(--good)}
.navitem .status .scorepill{font-weight:700}

.side-actions{margin-top:22px;display:flex;flex-direction:column;gap:9px}
.save-note{font-size:11px;color:var(--muted);text-align:center;min-height:15px;font-family:var(--sans);transition:opacity .3s}

/* ---------- Buttons ---------- */
.btn{border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--sans);
  padding:11px 16px;border-radius:13px;font-weight:600;font-size:13.5px;transition:.14s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(145deg,var(--amber),color-mix(in srgb,var(--amber) 80%,var(--lav)));color:#fff;border-color:transparent;box-shadow:var(--shadow-sm)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent}
.btn.block{width:100%}
.btn.lg{padding:14px 24px;font-size:15px;border-radius:15px}

/* ---------- Page head ---------- */
.view{animation:rise .34s cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pagehead{margin-bottom:30px}
.pagehead .kicker{font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;font-family:var(--sans)}
.pagehead h2{font-size:clamp(28px,4.5vw,40px);margin:8px 0 10px}
.pagehead .sub{color:var(--ink-soft);margin:0;max-width:60ch;font-size:16px}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px 28px;box-shadow:var(--shadow);margin-bottom:20px}
.card h3{margin:0 0 12px;font-size:21px}
.card p{margin:0 0 14px;color:var(--ink-soft)}
.card p strong{color:var(--text)}
.lead{font-size:16.5px;color:var(--ink-soft)}

/* ---------- Figure / illustration ---------- */
.figure{background:linear-gradient(170deg,var(--surface-2),var(--surface));border:1px solid var(--border);
  border-radius:16px;padding:22px;margin:18px 0;text-align:center}
.figure svg{max-width:100%;height:auto;display:block;margin:0 auto}
.figure .cap{font-size:12.5px;color:var(--muted);margin-top:12px;font-style:italic}

/* ---------- Key facts & chips ---------- */
.keyfacts{display:grid;gap:10px;margin:18px 0}
.fact{display:flex;gap:14px;align-items:center;padding:13px 16px;background:var(--surface-2);border-radius:13px;border-left:3px solid var(--accent)}
.fact .n{font-family:var(--serif);font-weight:600;font-size:21px;color:var(--accent);flex:none;min-width:84px;text-align:center}
.fact .d{font-size:13.5px}
.chips{display:flex;flex-wrap:wrap;gap:11px;margin:18px 0}
.chip{background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:14px 18px;min-width:128px;box-shadow:var(--shadow-sm);flex:1}
.chip b{display:block;font-family:var(--serif);font-size:23px;color:var(--accent);line-height:1}
.chip span{font-size:12px;color:var(--muted);display:block;margin-top:5px}

/* ---------- Callouts ---------- */
.callout{display:flex;gap:13px;padding:15px 18px;border-radius:14px;margin:18px 0;font-size:14px}
.callout.tip{background:var(--good-bg);border:1px solid color-mix(in srgb,var(--good) 28%,transparent)}
.callout.trap{background:var(--bad-bg);border:1px solid color-mix(in srgb,var(--bad) 28%,transparent)}
.callout.note{background:var(--lav-bg);border:1px solid color-mix(in srgb,var(--lav) 30%,transparent)}
.callout .ei{font-size:20px;flex:none;line-height:1.4}
.callout b{display:block;margin-bottom:3px;font-family:var(--sans)}
.callout .ct{color:var(--ink-soft)}

/* ---------- Quiz ---------- */
.quizbar{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.qmeta{font-size:13px;color:var(--muted);font-weight:600;font-family:var(--sans);white-space:nowrap}
.qprogress{flex:1;height:9px;background:var(--surface-2);border-radius:99px;overflow:hidden;min-width:120px;border:1px solid var(--border)}
.qprogress i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--lav));transition:width .35s cubic-bezier(.2,.7,.2,1)}
.question h3{font-size:22px;line-height:1.35;margin:0 0 22px;font-family:var(--serif)}
.options{display:flex;flex-direction:column;gap:12px}
.opt{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1.5px solid var(--border);border-radius:15px;
  background:var(--surface);font-size:15px;text-align:left;transition:.14s;color:var(--text);font-family:var(--sans)}
.opt:hover:not(:disabled){border-color:var(--accent);transform:translateX(3px)}
.opt .mk{width:28px;height:28px;border-radius:9px;border:1.5px solid var(--border);display:grid;place-items:center;
  font-weight:700;font-size:13px;flex:none;color:var(--muted);font-family:var(--sans);transition:.14s}
.opt.correct{border-color:var(--good);background:var(--good-bg)}
.opt.correct .mk{background:var(--good);border-color:var(--good);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg)}
.opt.wrong .mk{background:var(--bad);border-color:var(--bad);color:#fff}
.opt:disabled{cursor:default}
.explain{margin-top:18px;padding:16px 18px;border-radius:14px;background:var(--lav-bg);
  font-size:14px;border-left:3px solid var(--accent-2);display:none;color:var(--ink-soft)}
.explain.show{display:block;animation:rise .25s}
.explain b{color:var(--accent-2);font-family:var(--sans)}
.quiznav{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:12px}

/* ---------- Result ---------- */
.result{text-align:center;padding:34px 20px}
.result .big{font-family:var(--serif);font-size:60px;font-weight:600;letter-spacing:-1px;line-height:1}
.result .verdict{font-size:21px;font-weight:600;margin:10px 0;font-family:var(--serif)}
.result .pass{color:var(--good)}.result .fail{color:var(--bad)}
.result .rsub{color:var(--muted);font-size:14px;margin-bottom:4px}
.resbar{height:16px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin:22px auto;max-width:440px;border:1px solid var(--border)}
.resbar i{display:block;height:100%;transition:width .6s cubic-bezier(.2,.7,.2,1)}

/* ---------- Dashboard topic grid ---------- */
.topgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:16px;margin-top:10px}
.topcard{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:22px;
  box-shadow:var(--shadow);text-align:left;transition:.18s;color:var(--text);position:relative;overflow:hidden}
.topcard::after{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--amber),var(--lav));opacity:0;transition:.18s}
.topcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.topcard:hover::after{opacity:1}
.topcard .tc-ico{font-size:30px}
.topcard h4{margin:12px 0 5px;font-size:17px}
.topcard p{font-size:13px;color:var(--muted);margin:0 0 16px;font-family:var(--sans);line-height:1.5}
.topcard .tc-foot{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;font-family:var(--sans)}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--surface-2);color:var(--muted);font-family:var(--sans)}
.badge.v{background:var(--good-bg);color:var(--good)}
.badge.done{background:var(--good);color:#fff}

/* ---------- Cheat sheet table ---------- */
.cheatgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.cheatcard{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow-sm)}
.cheatcard h4{font-size:14px;margin:0 0 12px;display:flex;align-items:center;gap:8px;font-family:var(--sans);text-transform:uppercase;letter-spacing:.05em;font-size:11.5px;color:var(--muted)}
.cheatrow{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px dashed var(--border);font-size:13.5px}
.cheatrow:first-of-type{border-top:none}
.cheatrow .cv{font-family:var(--serif);font-weight:600;color:var(--accent);white-space:nowrap}

/* ---------- Mobile ---------- */
.topbar-mobile{display:none}
@media(max-width:880px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;z-index:40;width:300px;transform:translateX(-100%);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
  .sidebar.open{transform:none}
  .main{padding:28px 20px 60px}
  .topbar-mobile{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:13px 16px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30}
  .topbar-mobile strong{font-family:var(--serif);font-size:16px}
  .scrim{display:none;position:fixed;inset:0;background:rgba(20,15,5,.45);z-index:35;backdrop-filter:blur(2px)}
  .scrim.show{display:block}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}