/* ============================================================
   Medcue — platform shell (app chrome)
   A calm, academic, trustworthy medical-education aesthetic.
   The exam .sheet (see paper.css) stays a faithful black-on-white
   printed-exam replica; everything around it is the premium
   "platform" shell.
   System / Helvetica stack only. No external fonts. No build step.
   ============================================================ */

:root{
  /* ---- ink & surface ---- */
  --ink:#15171c;            /* primary text */
  --ink-2:#3b414d;          /* secondary text */
  --muted:#697184;          /* tertiary / captions */
  --paper:#fff;             /* the exam sheet + cards — never darkens */
  --bg:#eef0f4;             /* app canvas */
  --bg-2:#f6f7f9;           /* subtle fills, hovers */
  --line:#d7dae1;           /* hairline borders */
  --line-2:#c2c6cf;         /* slightly stronger borders */

  /* ---- brand accent (UI only — never on the paper body) ---- */
  --acc:#0f6b5c;            /* deep clinical teal-green */
  --acc-700:#0a5548;        /* pressed / darker */
  --acc-300:#7fb8ac;        /* light accent */
  --acc-tint:#e9f4f1;       /* accent-tinted surface */
  --acc-ink:#0c5347;        /* readable accent text on light (AA) */

  /* ---- semantic ---- */
  --correct:#1b7f4b; --correct-bg:#e7f5ed; --correct-line:#a9d8bd;
  --wrong:#c0392b;   --wrong-bg:#fbe9e6;   --wrong-line:#e6b3ab;
  --flag:#b8860b;    --flag-bg:#fbf3df;    --flag-line:#e6cf94;
  --chip:#2a2f3a;

  /* ---- spacing scale ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  /* ---- z-index scale ---- */
  --z-topbar:50; --z-fab:60; --z-qnav:70; --z-lightbox:100;
  /* ---- radii & elevation ---- */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(20,24,33,.05), 0 1px 3px rgba(20,24,33,.06);
  --sh-2:0 2px 6px rgba(20,24,33,.06), 0 6px 18px rgba(20,24,33,.08);
  --sh-3:0 8px 30px rgba(20,24,33,.14);
  --sh-paper:0 1px 2px rgba(20,24,33,.06), 0 10px 30px rgba(20,24,33,.10);

  /* ---- motion ---- */
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:.12s; --t:.18s; --t-slow:.28s;

  /* ---- layout ---- */
  --maxw:840px;
  --topbar-h:54px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Helvetica,Arial,"Liberation Sans",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.45;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
a{color:var(--acc-ink); text-underline-offset:2px}
a:hover{color:var(--acc-700)}

/* Global accessible focus ring (keyboard users) */
:focus-visible{
  outline:2.5px solid var(--acc);
  outline-offset:2px;
  border-radius:4px;
}
:focus:not(:focus-visible){outline:none}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:var(--z-topbar);
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px;
  min-height:var(--topbar-h);
  padding:7px 14px;
  padding-top:calc(7px + var(--safe-t));
  padding-left:calc(14px + var(--safe-l));
  padding-right:calc(14px + var(--safe-r));
  box-shadow:0 1px 0 rgba(20,24,33,.02), 0 4px 14px rgba(20,24,33,.04);
}
/* "← Papers" home button — scoped to topbar so it never collides with .home container */
.topbar .home{
  font-weight:700; cursor:pointer; color:var(--acc-ink);
  white-space:nowrap; border:1px solid transparent; background:none;
  font-size:14px; padding:7px 9px; border-radius:var(--r-sm);
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  min-height:38px;
  text-decoration:none; display:inline-flex; align-items:center;
}
.topbar .home:hover{background:var(--acc-tint); border-color:var(--acc-300)}
.topbar .home:active{background:#dcede8}

.topbar .runhead{
  flex:1; text-align:center;
  font-size:11.5px; font-weight:600; letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--ink-2);
  text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:0 4px;
  position:relative;
}
/* the academic "runhead" rule — thin accent underline, restrained */
.topbar .runhead::after{
  content:""; display:block; width:38px; height:2px;
  background:var(--acc); border-radius:2px;
  margin:4px auto 0; opacity:.85;
}

.score{display:flex; gap:6px; align-items:center}
.scorechip{
  background:var(--chip); color:#fff; border-radius:var(--r-pill);
  padding:5px 11px; font-size:12.5px; font-weight:700; white-space:nowrap;
  letter-spacing:.2px; line-height:1;
  display:inline-flex; align-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.scorechip.pct{background:var(--acc); color:#fff}

/* mono-ish count-up timer in the topbar */
.timerchip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bg-2); color:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:5px 11px;
  font-size:13px; font-weight:700; white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:.3px; line-height:1;
}
.timerchip[hidden]{display:none}
.timerchip::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--correct); box-shadow:0 0 0 3px var(--correct-bg);
}
.timerchip.paused::before{background:var(--muted); box-shadow:0 0 0 3px var(--bg-2)}
.timerchip.overtime{color:var(--wrong); border-color:var(--wrong-line); background:var(--wrong-bg)}
.timerchip.overtime::before{background:var(--wrong); box-shadow:0 0 0 3px var(--wrong-bg)}

/* primary accent Submit button in topbar */
.submitbtn{
  border:0; cursor:pointer; white-space:nowrap;
  background:linear-gradient(180deg,var(--acc),var(--acc-700));
  color:#fff; font:inherit; font-weight:700; font-size:13.5px;
  border-radius:var(--r-pill); padding:8px 16px; min-height:38px;
  box-shadow:0 1px 2px rgba(12,83,71,.35), 0 2px 8px rgba(12,83,71,.22);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), filter var(--t-fast) var(--ease);
}
.submitbtn:hover{filter:brightness(1.05); box-shadow:0 2px 4px rgba(12,83,71,.4), 0 6px 16px rgba(12,83,71,.26)}
.submitbtn:active{transform:translateY(1px)}

/* runhead is redundant on home/vault (the H1 names the screen) and too cramped on phones */
.topbar[data-view="home"] .runhead, .topbar[data-view="vault"] .runhead{display:none}
@media (max-width:520px){ .topbar .runhead{display:none} }
/* exam mode on phones: keep the Timer + Submit (what a candidate needs); drop the low-value score chips */
@media (max-width:640px){
  .topbar.exam .score .scorechip{display:none}
}
/* on very small screens the home button collapses to just its arrow to make room */
@media (max-width:400px){
  .topbar .home{font-size:0; gap:0; padding:7px 6px}
  .topbar .home::before{content:"\2190"; font-size:18px; line-height:1}
}

/* ============================================================
   COVER CONTROLS (platform layer on the sheet cover)
   mode picker (segmented control) + begin button
   ============================================================ */
.modepick{
  display:inline-flex; gap:0; margin:18px 0 4px;
  padding:4px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r);
  -webkit-user-select:none; user-select:none;
}
.modeopt{
  appearance:none; border:0; background:none; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; color:var(--ink-2);
  padding:9px 16px; border-radius:9px; min-height:38px;
  display:inline-flex; align-items:center; gap:7px;
  transition:color var(--t-fast) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.modeopt:hover:not(.active){color:var(--ink); background:rgba(255,255,255,.6)}
.modeopt.active{
  background:#fff; color:var(--acc-ink); font-weight:700;
  box-shadow:var(--sh-1);
}
.modeopt small{display:block; font-weight:500; font-size:11px; color:var(--muted)}
.modeopt.active small{color:var(--acc-ink); opacity:.8}

.beginbtn{
  display:block; width:100%; margin-top:24px;
  background:linear-gradient(180deg,var(--acc),var(--acc-700)); color:#fff; border:0;
  border-radius:var(--r); padding:16px; font-size:16px; font-weight:bold; cursor:pointer;
  letter-spacing:.3px;
  box-shadow:0 1px 2px rgba(12,83,71,.3), 0 6px 18px rgba(12,83,71,.22);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), filter var(--t-fast) var(--ease);
}
.beginbtn:hover{filter:brightness(1.05); box-shadow:0 2px 4px rgba(12,83,71,.34), 0 10px 26px rgba(12,83,71,.26)}
.beginbtn:active{transform:translateY(1px)}

/* ============================================================
   HOME — hero + paper picker
   ============================================================ */
.home{max-width:var(--maxw); margin:30px auto; padding:0 16px;
  padding-left:calc(16px + var(--safe-l)); padding-right:calc(16px + var(--safe-r));}
.home h1{
  font-size:27px; line-height:1.15; margin:8px 0 6px; letter-spacing:-.4px;
  color:var(--ink); font-weight:800;
}
.home .lede{color:var(--ink-2); margin:0 0 22px; font-size:15.5px; max-width:62ch; line-height:1.55}

/* ---- grouped paper sections + responsive card grid ---- */
.homegroup{margin:0 0 24px}
.homegroup:first-of-type{margin-top:4px}
.grouphd{margin:0 0 12px}
.homegroup h2{
  font-size:13.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--acc-ink); margin:0; display:flex; align-items:center; gap:9px;
}
.homegroup h2::before{content:""; width:14px; height:2px; background:var(--acc); border-radius:2px; flex:none}
.grpcount{
  font-size:11px; font-weight:700; color:var(--muted); background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:1px 8px; letter-spacing:0; line-height:1.6;
}
.groupsub{margin:4px 0 0 23px; font-size:13px; color:var(--muted); line-height:1.45}
.cardgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-3); align-items:stretch}
.cardgrid .card{margin:0; height:100%; display:flex; flex-direction:column}
.cardgrid .cardfoot{margin-top:auto; padding-top:var(--s-4)}
@media (max-width:680px){ .cardgrid{grid-template-columns:1fr} .groupsub{margin-left:0} }

/* paper card — clickable container (no inner button; tidy single-baseline footer) */
.card{
  position:relative;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  margin:0 0 var(--s-3); box-shadow:var(--sh-1); overflow:hidden;
  padding:var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 4px);
  cursor:pointer; font:inherit; color:inherit;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
a.card{text-decoration:none; color:inherit}
.card:hover{border-color:var(--acc-300); box-shadow:var(--sh-2); transform:translateY(-1px)}
.card:focus-visible{outline:none; box-shadow:inset 0 0 0 2.5px var(--acc)}
.card.ishidden{opacity:.7}
.card.ishidden:hover{opacity:.92}
/* accent "spine" that warms up on hover — the academic-platform tell */
.card::before{
  content:""; position:absolute; left:0; top:var(--s-4); bottom:var(--s-4); width:3px;
  background:var(--line); border-radius:0 3px 3px 0; transition:background var(--t) var(--ease);
}
.card:hover::before, .card:focus-visible::before{background:var(--acc)}

.card .t{font-weight:700; font-size:18px; letter-spacing:-.2px; color:var(--ink)}
.card .s{color:var(--muted); margin-top:4px; font-size:14px; line-height:1.5}

/* footer: pills on the left, actions on the right, one baseline — no empty band */
.cardfoot{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-top:var(--s-4)}
.footpills{display:flex; gap:var(--s-2); flex-wrap:wrap; align-items:center; min-width:0}
.cardacts{display:flex; gap:var(--s-2); flex:none}

/* pills / progress treatment — neutral pill has NO dot; only .done is dotted */
.card .pill{
  font-size:12px; font-weight:600; background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:4px 11px; color:var(--ink-2); white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px; line-height:1;
}
.card .pill.done{background:var(--correct-bg); color:#136b3d; border-color:var(--correct-line)}
.card .pill.done::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--correct); flex:none}
/* locked-content pill — accent tint + padlock glyph */
.card .pill.lockpill{background:var(--acc-tint); color:var(--acc-ink); border-color:var(--acc-300)}
.card .pill.lockpill::before{
  content:""; width:11px; height:11px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230c5347' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* card action buttons — demoted: quiet by default, Delete reds only on hover */
.mini{
  border:1px solid transparent; background:none; border-radius:var(--r-sm);
  padding:6px 11px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  color:var(--muted); min-height:32px;
  text-decoration:none; display:inline-flex; align-items:center;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mini:hover{border-color:var(--line); background:var(--bg-2); color:var(--ink)}
.mini:active{background:#eceef2}
.mini.danger{color:var(--muted)}
.mini.danger:hover{border-color:var(--wrong-line); background:var(--wrong-bg); color:var(--wrong)}

.showhidden{display:block; margin:10px 0 4px; font-size:13.5px; color:var(--ink-2)}
.hiddenwrap{margin-top:10px}

.resetbtn{
  display:block; width:100%; margin-top:12px; background:#fff; color:var(--acc-ink);
  border:1.5px solid var(--acc); border-radius:var(--r); padding:13px; font:inherit;
  font-size:15px; font-weight:bold; cursor:pointer;
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.resetbtn:hover{background:var(--acc-tint)}
.resetbtn:active{transform:translateY(1px)}

/* generic toolbar + buttons */
.toolbar{display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 8px; align-items:center}
.btn{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:10px 15px; cursor:pointer; font:inherit; font-weight:700; font-size:14px;
  color:var(--ink); min-height:40px;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn:hover{border-color:var(--line-2); background:var(--bg-2); box-shadow:var(--sh-1)}
.btn:active{background:#eceef2}
.btn.danger{color:var(--wrong)}
.btn.danger:hover{border-color:var(--wrong-line); background:var(--wrong-bg)}
/* the "show N hidden" toggle reads as a quiet link-button, not a primary */
.btn.showhidden{
  background:none; border:0; border-radius:var(--r-sm); padding:8px 4px;
  font-weight:600; font-size:13.5px; color:var(--acc-ink); min-height:34px;
}
.btn.showhidden:hover{background:var(--acc-tint); box-shadow:none; text-decoration:underline}

.foot{
  max-width:var(--maxw); margin:0 auto 50px;
  padding:18px 16px calc(18px + var(--safe-b));
  color:var(--muted); font-size:12.5px; text-align:center; line-height:1.6;
}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--ink-2)}

/* ============================================================
   AUTH FORMS (signup / login / forgot / reset)
   ============================================================ */
.authwrap{
  max-width:430px; margin:44px auto 60px; padding:0 16px;
  padding-left:calc(16px + var(--safe-l)); padding-right:calc(16px + var(--safe-r));
}
.authcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); padding:28px 26px;
  position:relative; overflow:hidden;
}
/* accent top rule — mirrors the results-head treatment */
.authcard::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,var(--acc),var(--acc-700));
}
.authcard h1{font-size:22px; line-height:1.2; margin:2px 0 4px; letter-spacing:-.3px; font-weight:800}
.authcard .authsub{color:var(--muted); font-size:14px; margin:0 0 20px; line-height:1.5}
.field{margin:0 0 14px}
.field label{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:6px;
}
.field input{
  width:100%; border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff;
  padding:11px 13px; font:inherit; font-size:15px; color:var(--ink); min-height:44px;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input::placeholder{color:var(--muted)}
.field input:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-tint)}
.field .hint{font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.45}
.autherr{
  background:var(--wrong-bg); border:1px solid var(--wrong-line); color:#7a2018;
  border-radius:var(--r-sm); padding:10px 13px; font-size:13.5px; margin:0 0 14px; line-height:1.45;
}
.authok{
  background:var(--correct-bg); border:1px solid var(--correct-line); color:#136b3d;
  border-radius:var(--r-sm); padding:10px 13px; font-size:13.5px; margin:0 0 14px; line-height:1.45;
}
.authbtn{
  display:block; width:100%; margin-top:18px;
  background:linear-gradient(180deg,var(--acc),var(--acc-700)); color:#fff; border:0;
  border-radius:var(--r); padding:13px; font:inherit; font-size:15px; font-weight:bold; cursor:pointer;
  letter-spacing:.2px; min-height:46px;
  box-shadow:0 1px 2px rgba(12,83,71,.3), 0 6px 18px rgba(12,83,71,.22);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), filter var(--t-fast) var(--ease);
}
.authbtn:hover{filter:brightness(1.05); box-shadow:0 2px 4px rgba(12,83,71,.34), 0 10px 26px rgba(12,83,71,.26)}
.authbtn:active{transform:translateY(1px)}
.authalt{text-align:center; font-size:13.5px; color:var(--muted); margin-top:16px; line-height:1.5}

/* ============================================================
   LOCKED STATE — upgrade gate for free-tier users
   Apply .locked to a .card (or any container); the content dims,
   and a .lockpanel (lock glyph + copy + CTA) sits on top.
   ============================================================ */
.locked{position:relative; cursor:default}
.locked:hover{transform:none; border-color:var(--line); box-shadow:var(--sh-1)}
.locked:hover::before{background:var(--line)}
.locked > :not(.lockpanel){
  opacity:.5; filter:saturate(.6);
  pointer-events:none; -webkit-user-select:none; user-select:none;
}
.lockpanel{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; text-align:center; padding:18px;
  background:rgba(246,247,249,.62); border-radius:inherit;
  -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px);
}
.lockglyph{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:var(--acc-tint)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230c5347' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")
    no-repeat center/18px 18px;
  border:1px solid var(--acc-300);
}
.locktxt{font-size:13px; font-weight:600; color:var(--ink-2); max-width:34ch; line-height:1.45}
.upgradebtn{
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--acc),var(--acc-700)); color:#fff;
  border:0; border-radius:var(--r-pill); padding:9px 18px; min-height:40px;
  font:inherit; font-weight:700; font-size:13.5px; cursor:pointer; text-decoration:none;
  box-shadow:0 1px 2px rgba(12,83,71,.35), 0 2px 8px rgba(12,83,71,.22);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), filter var(--t-fast) var(--ease);
}
.upgradebtn:hover{filter:brightness(1.05); color:#fff; box-shadow:0 2px 4px rgba(12,83,71,.4), 0 6px 16px rgba(12,83,71,.26)}
.upgradebtn:active{transform:translateY(1px)}

/* ============================================================
   SAVE STAR + REVISION VAULT
   ============================================================ */
.savedbtn-top{
  border:1px solid var(--line); background:#fff; border-radius:var(--r-pill);
  padding:6px 12px; font:inherit; font-weight:700; font-size:13px;
  color:var(--acc-ink); cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px; min-height:38px;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.savedbtn-top:hover{border-color:var(--acc-300); background:var(--acc-tint)}
.savedbtn-top #savedCount{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  background:var(--acc); color:#fff; border-radius:var(--r-pill);
  font-size:11px; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums;
}

/* per-question ☆ save star */
.savebtn{
  float:right; margin:-2px 0 4px 12px; border:0; background:none; color:#c9a23a;
  font-size:23px; line-height:1; cursor:pointer; padding:2px 4px; border-radius:8px;
  transition:transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.savebtn.on{color:var(--acc)}
.savebtn:hover{transform:scale(1.14); background:var(--bg-2)}
.savebtn:active{transform:scale(1.02)}

/* per-question flag (sits beside .savebtn) */
.flagbtn{
  float:right; margin:-2px 0 4px 8px; border:0; background:none; color:var(--muted);
  font-size:19px; line-height:1; cursor:pointer; padding:3px 5px; border-radius:8px;
  transition:transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.flagbtn:hover{color:var(--flag); background:var(--flag-bg); transform:scale(1.1)}
.flagbtn.on{color:var(--flag)}
.flagbtn.on:hover{color:#9a710a}

.revgroup{margin:8px 0 4px}
.revgrouph{
  font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.8px;
  font-weight:700; margin:24px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line);
}
.revcard{
  background:#fff; border:1px solid var(--line); border-left:4px solid #c9a23a;
  border-radius:var(--r); padding:15px 17px; margin:0 0 12px; box-shadow:var(--sh-1);
  transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.revcard:hover{box-shadow:var(--sh-2)}
.revmeta{font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.2px}
.revans{color:#136b3d; font-weight:bold; margin:8px 0 4px}
.revpearl{font-size:14px; line-height:1.5; color:var(--ink-2)}
.revfig{font-size:12.5px; color:var(--muted); margin-top:6px}
.revreveal{transition:filter var(--t-slow) var(--ease)}
.revreveal.blurred{filter:blur(6px); cursor:pointer; -webkit-user-select:none; user-select:none}
.revactions{display:flex; gap:8px; margin-top:13px}
.revactions .btn{padding:7px 13px; font-size:13px; min-height:36px}

/* Revision Vault filtering */
.revsearch{
  flex:1 1 200px; min-width:160px;
  border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff;
  padding:10px 14px 10px 36px; font:inherit; font-size:14px; color:var(--ink);
  min-height:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23697184' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:12px 50%;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.revsearch::placeholder{color:var(--muted)}
.revsearch:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-tint)}

.revfilter{
  border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff;
  padding:10px 14px; font:inherit; font-size:14px; font-weight:600; color:var(--ink);
  min-height:40px; cursor:pointer;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.revfilter:hover{border-color:var(--line-2)}
.revfilter:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-tint)}
/* chip variant of .revfilter, if rendered as buttons */
button.revfilter{font-weight:600; color:var(--ink-2)}
button.revfilter.active{background:var(--acc); border-color:var(--acc); color:#fff}

/* ============================================================
   QUESTION NAVIGATOR  (FAB + slide-up panel)
   ============================================================ */
.qnav-fab{
  position:fixed; z-index:var(--z-fab);
  right:calc(18px + var(--safe-r)); bottom:calc(18px + var(--safe-b));
  width:54px; height:54px; border:0; border-radius:50%; cursor:pointer;
  background:linear-gradient(180deg,var(--acc),var(--acc-700)); color:#fff;
  font-size:18px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(12,83,71,.36), 0 10px 28px rgba(20,24,33,.22);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), filter var(--t-fast) var(--ease);
}
.qnav-fab:hover{filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 6px 16px rgba(12,83,71,.4), 0 14px 34px rgba(20,24,33,.26)}
.qnav-fab:active{transform:translateY(0)}

/* the slide-up / overlay panel */
.qnav{
  position:fixed; z-index:var(--z-qnav); inset:auto 0 0 0;
  background:#fff; border-top:1px solid var(--line);
  border-radius:18px 18px 0 0;
  box-shadow:0 -10px 40px rgba(20,24,33,.22);
  padding:14px 18px calc(18px + var(--safe-b));
  padding-left:calc(18px + var(--safe-l)); padding-right:calc(18px + var(--safe-r));
  max-height:72vh; overflow:auto; -webkit-overflow-scrolling:touch;
  transform:translateY(100%);
  transition:transform var(--t-slow) var(--ease);
  margin:0 auto; max-width:560px;
}
.qnav.open{transform:translateY(0)}
/* grab handle */
.qnav::before{
  content:""; display:block; width:42px; height:5px; border-radius:3px;
  background:var(--line-2); margin:0 auto 12px;
}
.qnav-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:15px; font-weight:700; color:var(--ink); margin-bottom:4px;
}
.qnav-close{
  border:1px solid var(--line); background:#fff; border-radius:var(--r-sm);
  width:36px; height:36px; cursor:pointer; font-size:18px; line-height:1;
  color:var(--ink-2); display:flex; align-items:center; justify-content:center;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.qnav-close:hover{background:var(--bg-2); border-color:var(--line-2); color:var(--ink)}

.qnav-legend{
  display:flex; flex-wrap:wrap; gap:12px 16px;
  margin:10px 0 14px; font-size:12px; color:var(--muted);
}
.qnav-legend span{display:inline-flex; align-items:center; gap:6px}
.qnav-legend span::before{
  content:""; width:13px; height:13px; border-radius:4px;
  border:1.5px solid var(--line-2); background:#fff;
}
.qnav-legend .lg-answered::before{background:var(--bg-2); border-color:var(--line-2)}
.qnav-legend .lg-correct::before{background:var(--correct-bg); border-color:var(--correct)}
.qnav-legend .lg-wrong::before{background:var(--wrong-bg); border-color:var(--wrong)}
.qnav-legend .lg-flagged::before{background:var(--flag-bg); border-color:var(--flag)}
.qnav-legend .lg-current::before{background:#fff; border-color:var(--acc); box-shadow:0 0 0 2px var(--acc-tint)}

.qnav-grid{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:4px;
}
.qnav-cell{
  position:relative;
  width:2.4rem; height:2.4rem; min-width:2.4rem;
  border:1.5px solid var(--line-2); border-radius:9px; background:#fff;
  font:inherit; font-weight:700; font-size:13px; color:var(--ink-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.qnav-cell:hover{transform:translateY(-1px); border-color:var(--acc-300)}
.qnav-cell.is-answered{background:var(--bg-2); color:var(--ink); border-color:var(--line-2)}
.qnav-cell.is-correct{background:var(--correct-bg); color:#136b3d; border-color:var(--correct)}
.qnav-cell.is-wrong{background:var(--wrong-bg); color:var(--wrong); border-color:var(--wrong)}
.qnav-cell.is-flagged{border-color:var(--flag)}
/* flag corner dot — combines with answered/correct/wrong states */
.qnav-cell.is-flagged::after{
  content:""; position:absolute; top:-3px; right:-3px;
  width:9px; height:9px; border-radius:50%;
  background:var(--flag); border:1.5px solid #fff;
}
.qnav-cell.is-current{
  border-color:var(--acc); color:var(--acc-ink);
  box-shadow:0 0 0 2.5px var(--acc-tint);
}
/* navigator footer: two equal in-row buttons, never the floating pill */
.qnav-foot{display:flex; gap:var(--s-2); margin-top:var(--s-4)}
.qnav-foot .btn{flex:1; justify-content:center; text-align:center}
.qnav-foot .jumpnext{
  position:static; transform:none; left:auto; bottom:auto; z-index:auto;
  background:#fff; color:var(--ink-2); border:1px solid var(--line); box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none; padding:9px 14px; font-weight:600;
}
.qnav-foot .jumpnext::after{content:""}
.qnav-foot .jumpnext:hover{background:var(--bg-2); transform:none; border-color:var(--line-2)}

/* ============================================================
   RESULTS SCREEN
   ============================================================ */
.results{max-width:var(--maxw); margin:30px auto; padding:0 16px;
  padding-left:calc(16px + var(--safe-l)); padding-right:calc(16px + var(--safe-r));}
.results-head{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); padding:22px 22px; margin-bottom:18px;
  position:relative; overflow:hidden;
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
}
.results-head::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,var(--acc),var(--acc-700));
}
.results-score{font-size:44px; font-weight:800; line-height:1; color:var(--ink); letter-spacing:-1.5px; font-variant-numeric:tabular-nums}
.results-of{font-size:22px; font-weight:700; color:var(--muted)}
.results-pct{font-size:30px; font-weight:800; line-height:1; color:var(--acc-ink); font-variant-numeric:tabular-nums}
.results-time{font-size:13.5px; color:var(--ink-2); font-weight:600; margin-left:auto}

/* per-category / per-section breakdown rows */
.bd-row{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:6px 12px; padding:11px 2px; border-bottom:1px solid var(--line);
  font-size:14px;
}
.bd-row:last-child{border-bottom:0}
.bd-row .bd-label{font-weight:600; color:var(--ink)}
.bd-row .bd-val{font-variant-numeric:tabular-nums; color:var(--ink-2); font-weight:700; font-size:13px}
.bd-bar{
  grid-column:1 / -1; height:8px; border-radius:var(--r-pill);
  background:var(--bg-2); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line);
}
.bd-bar > i{
  display:block; height:100%; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--correct),#2a9d63);
  transition:width var(--t-slow) var(--ease);
}
.bd-bar.low > i{background:linear-gradient(90deg,var(--wrong),#d6594a)}
.bd-bar.mid > i{background:linear-gradient(90deg,var(--flag),#d9a31f)}
/* JS renders the fill as a <span>; mirror the <i> styling + ramp */
.bd-bar > span{display:block; height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--correct),#2a9d63); transition:width var(--t-slow) var(--ease)}
.bd-bar.low > span{background:linear-gradient(90deg,var(--wrong),#d6594a)}
.bd-bar.mid > span{background:linear-gradient(90deg,var(--flag),#d9a31f)}
.bd-row .bd-num{font-variant-numeric:tabular-nums; color:var(--ink-2); font-weight:700; font-size:13px}
.results-jump .rj-n{font-weight:700; color:var(--muted); min-width:30px; font-variant-numeric:tabular-nums}
.results-jump .rj-txt{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.results-jump .rj-tag{color:var(--muted); font-size:12.5px; white-space:nowrap}

.results-actions{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 8px}
.results-actions .btn{flex:1 1 auto; text-align:center; justify-content:center}

.results-list{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  margin-top:16px; overflow:hidden;
}
.results-list a{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--line);
  color:var(--ink); text-decoration:none; font-size:14px;
  transition:background var(--t-fast) var(--ease);
}
.results-list a:last-child{border-bottom:0}
.results-list a:hover{background:var(--bg-2)}
.results-list a::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--wrong); flex:none;
}
.results-list a.is-correct::before{background:var(--correct)}
.results-list a .rl-n{font-weight:700; color:var(--muted); min-width:28px; font-variant-numeric:tabular-nums}

/* "next unanswered" subtle floating affordance */
.jumpnext{
  position:fixed; z-index:55;
  left:50%; transform:translateX(-50%);
  bottom:calc(18px + var(--safe-b));
  background:rgba(21,23,28,.92); color:#fff;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:0; border-radius:var(--r-pill); cursor:pointer;
  padding:10px 18px; font:inherit; font-weight:700; font-size:13.5px;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:var(--sh-3);
  transition:transform var(--t) var(--ease), background var(--t-fast) var(--ease);
}
.jumpnext::after{content:"↓"; font-size:14px}
.jumpnext:hover{background:#000; transform:translateX(-50%) translateY(-2px)}
.jumpnext:active{transform:translateX(-50%) translateY(0)}
/* inline variant, when placed in flow rather than fixed */
.jumpnext.inline{position:static; transform:none; display:inline-flex; margin:6px 0}
.jumpnext.inline:hover{transform:translateY(-1px)}

/* ============================================================
   TOAST (informational, non-blocking) + motion
   ============================================================ */
.toast{
  position:fixed; left:50%; bottom:calc(22px + var(--safe-b)); z-index:var(--z-lightbox);
  transform:translateX(-50%) translateY(8px);
  background:rgba(21,23,28,.95); color:#fff; font-size:13.5px; font-weight:600;
  padding:11px 18px; border-radius:var(--r-pill); box-shadow:var(--sh-3);
  max-width:88vw; text-align:center; pointer-events:none; opacity:0;
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion: no-preference){
  .results{animation:resultsIn var(--t-slow) var(--ease) both}
  @keyframes resultsIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .qnav{transition:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:640px){
  body{font-size:15.5px}
  .home h1{font-size:23px}
  .home .lede{font-size:15px}
  .topbar{gap:8px; padding-left:calc(12px + var(--safe-l)); padding-right:calc(12px + var(--safe-r))}
  .topbar .runhead{font-size:10.5px; letter-spacing:.4px}
  .card .t{font-size:17px}
  .results-pct{font-size:46px}
  .qnav-cell{width:2.4rem; height:2.4rem}
}
@media (max-width:380px){
  /* keep the runhead from crowding out the controls on tiny phones */
  .topbar .runhead{font-size:0; }
  .topbar .runhead::after{margin-top:0}
}

/* ============================================================
   DARK CHROME — app shell only; the exam sheet stays white.
   Pages opt in by putting class "shell-dark" on <body>. The .sheet
   (paper.css) re-pins the light palette tokens on itself, so nothing
   printed on the paper is affected. W4 polish may extend this block.
   ============================================================ */
@media (prefers-color-scheme: dark){
  .shell-dark{
    --bg:#111318; --bg-2:#1a1d24;
    --line:#2a2e38; --line-2:#39404d;
    --ink:#e7e9ee; --ink-2:#b7bdc9; --muted:#8c93a3;
    --acc-tint:rgba(15,107,92,.20);
    --acc-300:#3f7d70;
    --acc-ink:#7cc7b6;           /* readable accent text on dark (AA) */
    --sh-1:0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.32);
    --sh-2:0 2px 6px rgba(0,0,0,.32), 0 6px 18px rgba(0,0,0,.36);
    --sh-3:0 8px 30px rgba(0,0,0,.5);
    background:var(--bg);
    color-scheme:dark;
  }
  .shell-dark a:hover{color:#9ad8c9}
  .shell-dark :focus-visible{outline-color:#3fa08d}
  .shell-dark .topbar{
    background:rgba(17,19,24,.86);
    box-shadow:0 1px 0 rgba(0,0,0,.25), 0 4px 14px rgba(0,0,0,.3);
  }
  .shell-dark .topbar .home:active{background:rgba(15,107,92,.28)}
  .shell-dark .card,
  .shell-dark .authcard,
  .shell-dark .revcard,
  .shell-dark .results-head,
  .shell-dark .results-list,
  .shell-dark .qnav,
  .shell-dark .qnav-close,
  .shell-dark .qnav-cell,
  .shell-dark .btn,
  .shell-dark .savedbtn-top,
  .shell-dark .revsearch,
  .shell-dark .revfilter,
  .shell-dark .resetbtn,
  .shell-dark .field input{background:var(--bg-2)}
  .shell-dark .btn:hover,
  .shell-dark .qnav-close:hover,
  .shell-dark .mini:hover{background:#232833}
  .shell-dark .btn:active,
  .shell-dark .mini:active{background:#272d39}
  .shell-dark .qnav-cell{border-color:var(--line-2)}
  .shell-dark .qnav-cell.is-flagged::after{border-color:var(--bg-2)}
  .shell-dark .qnav-legend span::before{background:var(--bg-2)}
  .shell-dark .qnav-legend .lg-current::before{background:var(--bg-2)}
  .shell-dark .lockpanel{background:rgba(17,19,24,.6)}
  .shell-dark .lockglyph{
    background-color:rgba(15,107,92,.25);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237cc7b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
  }
  .shell-dark .card .pill{background:var(--bg-2)}
  .shell-dark .card .pill.lockpill{
    background:rgba(15,107,92,.2);
    color:var(--acc-ink);
  }
  .shell-dark .card .pill.lockpill::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237cc7b6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
  }
}