/* ============================================================
   SECTION 45 — "Case File" design system
   Palette drawn from the physical artifacts of the exam:
   OMR sheet, red court-file thread, brass seal, bare-act paper.
   ============================================================ */

:root{
  --ink:#0B0F14;
  --file:#141C26;
  --file-2:#1B2532;
  --redtape:#D6294B;          /* brand red — borders, fills, rules */
  --redtape-t:#FF7D93;        /* red for TEXT — 7.88:1 on ink, passes AA at any size */
  --stamp:#2FBF71;
  --stamp-t:#2FBF71;          /* green for TEXT */
  --brass:#C9A227;
  --paper:#F2EEE4;
  --graphite:#5C6673;

  --bg:var(--ink);
  --surface:var(--file);
  --surface-2:var(--file-2);
  --text:#E8EDF3;
  --text-dim:#96A1AF;
  --rule:rgba(232,237,243,.12);
  --rule-strong:rgba(232,237,243,.22);

  --display:'Fraunces',Georgia,serif;
  --body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --r:14px;
  --r-sm:9px;
  --pad:clamp(16px,4vw,28px);
  --maxw:1100px;
  --ease:cubic-bezier(.22,1,.36,1);
}

[data-theme="light"]{
  --bg:var(--paper);
  --surface:#FFFFFF;
  --surface-2:#F7F3E9;
  --text:#141C26;
  --text-dim:#5C6673;
  --rule:rgba(20,28,38,.14);
  --rule-strong:rgba(20,28,38,.26);
  /* Brass at #C9A227 measures 2.09:1 on paper — unreadable. These darker
     variants keep the same hue and pass AA at body-text size. */
  --brass:#7A5F08;            /* 6.06:1 on white, 5.23:1 on paper */
  --brass-fill:#C9A227;       /* original, for large fills where text sits on top */
  --stamp:#146638;            /* 7.03:1 on white */
  --stamp-t:#146638;
  --redtape:#C0203F;
  --redtape-t:#B01C39;        /* 6.0:1 on white */
}

[data-contrast="high"]{
  --rule:currentColor;
  --text-dim:var(--text);
}
[data-contrast="high"][data-theme="dark"]{ --bg:#000; --text:#fff; }
[data-contrast="high"][data-theme="light"]{ --bg:#fff; --text:#000; }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background .3s var(--ease),color .3s var(--ease);
  overflow-x:hidden;          /* fallback for older browsers */
  overflow-x:clip;            /* `hidden` makes body a scroll container and breaks
                                 position:sticky on the topbar; `clip` does not */
  -webkit-tap-highlight-color:rgba(201,162,39,.18);
  overscroll-behavior-y:none; /* stop the rubber-band bounce revealing the page bg */
  text-size-adjust:100%;
}

/* the sticky header would otherwise cover anchor targets */
html{ scroll-padding-top:130px }
@media(min-width:821px){ html{ scroll-padding-top:80px } }
.mono{font-family:var(--mono);font-variant-ligatures:none}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;margin:0;letter-spacing:-.015em}

.skip{position:absolute;left:-9999px;top:0;background:var(--brass);color:#0B0F14;padding:10px 16px;z-index:200;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:4px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:18px;
  padding:12px max(var(--pad),env(safe-area-inset-left)) 12px max(var(--pad),env(safe-area-inset-right));
  padding-top:max(12px,env(safe-area-inset-top));
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
  transition:transform .28s var(--ease);
}
/* On phones the header costs ~115px of a 667px screen. Give it back while
   the user is reading, bring it straight back on any upward scroll. */
.topbar.tuck{ transform:translateY(-100%) }
@media(min-width:821px){ .topbar.tuck{ transform:none } }
@media (prefers-reduced-motion:reduce){ .topbar.tuck{ transform:none } }
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.brand-mark{font-family:var(--mono);font-weight:600;color:var(--brass);border:1.5px solid var(--brass);padding:2px 7px;border-radius:5px;font-size:13px}
.brand-word{font-family:var(--display);font-weight:600;letter-spacing:.06em;font-size:15px}
.topnav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.topnav a{
  text-decoration:none;font-size:14px;font-weight:500;color:var(--text-dim);
  padding:12px;min-height:44px;display:inline-flex;align-items:center;
  border-radius:99px;transition:.2s var(--ease);
}
.topnav a:hover{color:var(--text);background:var(--surface)}
.topnav a[aria-current="page"]{color:var(--brass);background:color-mix(in srgb,var(--brass) 14%,transparent)}
.topbar-right{display:flex;align-items:center;gap:8px;margin-left:8px}
.cd-mini{font-size:12px;color:var(--redtape-t);font-weight:600;white-space:nowrap}
.icon-btn{
  width:44px;height:44px;display:grid;place-items:center;border-radius:11px;
  background:var(--surface);border:1px solid var(--rule);cursor:pointer;
  text-decoration:none;font-size:15px;transition:.2s var(--ease);
}
.icon-btn:hover{border-color:var(--rule-strong)}
@media(max-width:820px){
  .brand-word{display:none}
  .cd-mini{display:none}                 /* the countdown lives on the home screen */
  .topnav{
    gap:0;order:3;width:100%;margin-left:0;margin-top:6px;padding-top:4px;
    border-top:1px solid var(--rule);
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;overscroll-behavior-x:contain;
  }
  .topnav::-webkit-scrollbar{display:none}
  .topnav a{padding:9px 11px;min-height:40px;font-size:13px;white-space:nowrap}
  .topbar{flex-wrap:wrap;padding-bottom:0;gap:10px}
  .topbar-right{margin-left:auto;gap:6px}
  .icon-btn{width:40px;height:40px}
  .authbtn{padding:9px 12px;font-size:12.5px}
}

/* ---------- layout ---------- */
main{min-height:70vh}
.wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(28px,6vw,64px) var(--pad)}
.wrap-narrow{max-width:760px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin:0 0 12px}
.lede{color:var(--text-dim);font-size:17px;max-width:62ch}
.stack>*+*{margin-top:14px}

/* ---------- hero: the number IS the hero ---------- */
.hero{
  min-height:calc(100vh - 66px);        /* fallback */
  min-height:calc(100svh - 66px);       /* correct on mobile: excludes browser chrome */
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:40px var(--pad) 56px;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 50% at 50% 42%,color-mix(in srgb,var(--brass) 9%,transparent),transparent 70%);
}
.hero>*{position:relative;z-index:1}
.hero-45{
  font-family:var(--display);font-weight:900;color:var(--brass);
  font-size:clamp(140px,30vw,340px);line-height:.82;letter-spacing:-.04em;
  margin:6px 0 0;
  animation:riseIn .9s var(--ease) both;
}
.hero-rule{width:min(420px,80%);height:1.5px;background:var(--brass);opacity:.45;margin:18px auto 22px}
.hero h1{font-size:clamp(26px,5.2vw,46px);max-width:16ch;margin:0 auto;animation:riseIn .9s .1s var(--ease) both}
.hero p.sub{color:var(--text-dim);margin:18px auto 0;max-width:48ch;font-size:16px}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.countdown{display:flex;gap:10px;justify-content:center;margin:30px 0 8px;flex-wrap:wrap}
.cd-cell{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);padding:10px 14px;min-width:70px}
.cd-cell b{display:block;font-family:var(--mono);font-size:24px;font-weight:600;line-height:1}
.cd-cell span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:99px;border:1.5px solid transparent;
  font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;
  transition:transform .18s var(--ease),background .18s,border-color .18s,opacity .18s;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--brass);color:#0B0F14;border-color:var(--brass)}
[data-theme="light"] .btn-primary{background:var(--brass);color:#FFFFFF;border-color:var(--brass)}
.btn-primary:hover{background:color-mix(in srgb,var(--brass) 86%,#fff)}
.btn-ghost{background:transparent;border-color:var(--rule-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass)}
.btn-danger{background:transparent;border-color:var(--redtape);color:var(--redtape-t)}
.btn-block{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;justify-content:center}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:20px}
.grid{display:grid;gap:14px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* subject cards — weightage drives hierarchy */
.subj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:13px}
.subj{
  position:relative;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r);padding:17px;text-align:left;cursor:pointer;width:100%;
  transition:.22s var(--ease);display:flex;flex-direction:column;gap:9px;min-height:150px;
}
.subj:hover{border-color:var(--brass);transform:translateY(-3px)}
.subj.tier-high{grid-column:span 2}
@media(max-width:560px){.subj.tier-high{grid-column:span 1}.subj-grid{grid-template-columns:1fr 1fr}}
.subj-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.subj-w{font-family:var(--mono);font-size:30px;font-weight:600;line-height:1;color:var(--brass)}
.subj-w small{display:block;font-size:9px;letter-spacing:.12em;color:var(--text-dim);font-weight:400;margin-top:3px}
.subj h3{font-size:16px;font-family:var(--body);font-weight:600;letter-spacing:0;line-height:1.25}
.subj-meta{margin-top:auto;display:flex;gap:10px;align-items:center;font-size:11.5px;color:var(--text-dim);flex-wrap:wrap}
.pill{border:1px solid var(--rule);border-radius:99px;padding:2px 9px;font-size:11px;font-family:var(--mono)}
.pill.good{border-color:var(--stamp);color:var(--stamp)}
.pill.bad{border-color:var(--redtape);color:var(--redtape-t)}
.pill.brass{border-color:var(--brass);color:var(--brass)}
.arc{width:34px;height:34px;flex-shrink:0}
.seal{position:absolute;top:12px;right:12px;font-size:13px;color:var(--brass);opacity:.75}

/* ---------- OMR bubbles: the signature element ---------- */
.qcard{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:clamp(18px,4vw,30px)}
.qstem{font-size:clamp(16px,2.2vw,19px);line-height:1.6;margin:14px 0 24px;font-weight:500}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{
  display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;min-height:56px;
  background:transparent;border:1.5px solid var(--rule);border-radius:var(--r-sm);
  padding:14px 16px;cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease);
}
.opt:hover:not(:disabled){border-color:var(--rule-strong);background:var(--surface-2)}
.opt:disabled{cursor:default}
.bubble{
  position:relative;flex-shrink:0;width:28px;height:28px;border-radius:50%;
  border:2px solid var(--rule-strong);display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text-dim);
  overflow:hidden;transition:color .2s,border-color .2s;
}
.bubble::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--brass);transform:scale(0);transition:transform .18s var(--ease);
}
.opt[aria-checked="true"] .bubble{border-color:var(--brass);color:#0B0F14}
.opt[aria-checked="true"] .bubble::before{transform:scale(1)}
.bubble span{position:relative;z-index:1}
.opt-body{padding-top:3px;font-size:15px}

.opt.correct{border-color:var(--stamp);background:color-mix(in srgb,var(--stamp) 9%,transparent)}
.opt.correct .bubble{border-color:var(--stamp);color:#0B0F14}
.opt.correct .bubble::before{background:var(--stamp);transform:scale(1)}
.opt.wrong{border-color:var(--redtape);background:color-mix(in srgb,var(--redtape) 9%,transparent);animation:shake .34s}
.opt.wrong .bubble{border-color:var(--redtape);color:#fff}
.opt.wrong .bubble::before{background:var(--redtape);transform:scale(1)}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

/* ---------- explanation sheet ---------- */
.expl{
  margin-top:20px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--surface-2);padding:18px;animation:riseIn .38s var(--ease) both;
}
.expl-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.stampmark{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;
  border:2px solid currentColor;border-radius:5px;padding:3px 9px;transform:rotate(-3deg);
  animation:stampIn .3s var(--ease) both;
}
.stampmark.ok{color:var(--stamp)}
.stampmark.no{color:var(--redtape-t)}
@keyframes stampIn{from{opacity:0;transform:rotate(-14deg) scale(1.5)}to{opacity:1;transform:rotate(-3deg) scale(1)}}
.xp{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--brass)}
.cites{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:clamp(15px,2.4vw,19px);font-weight:600;
  padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.cite-new{color:var(--brass)}
.cite-old{color:var(--text-dim);font-weight:400}
.cite-arrow{color:var(--text-dim)}
.expl p{margin:14px 0 0;font-size:15px;line-height:1.62}
.locator{
  margin-top:14px;padding:11px 13px;border-left:3px solid var(--brass);
  background:color-mix(in srgb,var(--brass) 8%,transparent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:14px;
}
.trend{margin-top:12px;font-size:12.5px;color:var(--text-dim);font-family:var(--mono)}

/* ---------- practice chrome ---------- */
.prac-head{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.prac-head h2{font-size:19px;font-family:var(--body);font-weight:600;letter-spacing:0}
.timer{margin-left:auto;font-family:var(--mono);font-size:19px;font-weight:600;letter-spacing:.02em}
.timer.warn{color:var(--redtape-t);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.45}}
.progbar{height:5px;background:var(--rule);border-radius:99px;overflow:hidden;margin:14px 0 20px}
.progbar i{display:block;height:100%;background:var(--brass);transition:width .35s var(--ease)}

/* OMR strip */
.omr{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px}
.omr b{
  width:34px;height:34px;border-radius:6px;border:1px solid var(--rule);
  display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:400;
  color:var(--text-dim);cursor:pointer;transition:.16s;
}
.omr b.done{background:var(--brass);color:#0B0F14;border-color:var(--brass)}
.omr b.flag{border-color:var(--redtape);color:var(--redtape-t)}
.omr b.now{outline:2px solid var(--text);outline-offset:1px}

.qfoot{display:flex;gap:10px;margin-top:22px;align-items:center;flex-wrap:wrap}
.linkbtn{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:14px;
  padding:12px 8px;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--text)}

/* ---------- results / analytics ---------- */
.bigscore{font-family:var(--display);font-size:clamp(64px,15vw,120px);font-weight:900;line-height:.9;color:var(--brass)}
.stat{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:17px}
.stat b{display:block;font-family:var(--mono);font-size:27px;font-weight:600;line-height:1.15}
.stat span{font-size:12px;color:var(--text-dim);letter-spacing:.04em}
.stat small{display:block;margin-top:7px;font-size:12px;color:var(--text-dim)}

.bar45{position:relative;height:34px;background:var(--surface-2);border:1px solid var(--rule);border-radius:8px;overflow:hidden;margin:14px 0 8px}
.bar45 i{display:block;height:100%;background:linear-gradient(90deg,var(--brass),color-mix(in srgb,var(--brass) 60%,var(--stamp)));transition:width .6s var(--ease)}
.bar45 u{position:absolute;top:-4px;bottom:-4px;left:45%;width:2px;background:var(--redtape);text-decoration:none}
.bar45 u::after{content:"45";position:absolute;top:-17px;left:-8px;font-family:var(--mono);font-size:11px;color:var(--redtape-t)}

table{width:100%;border-collapse:collapse;font-size:14px}
@media(max-width:560px){
  /* narrow screens: scroll the table rather than squeezing or overflowing the page */
  main table{
    display:block;overflow-x:auto;white-space:nowrap;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  }
  main table th,main table td{padding:9px 8px}
}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--rule)}
th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);font-weight:600}
td.num{font-family:var(--mono);text-align:right}

/* ---------- paywall ---------- */
.paywall{border:1.5px solid var(--brass);background:color-mix(in srgb,var(--brass) 6%,var(--surface));border-radius:var(--r);padding:clamp(20px,4vw,32px);text-align:center}
.price{font-family:var(--display);font-size:clamp(46px,10vw,76px);font-weight:900;color:var(--brass);line-height:1}
.ticks{list-style:none;padding:0;margin:20px auto;max-width:420px;text-align:left;display:flex;flex-direction:column;gap:9px}
.ticks li{display:flex;gap:11px;font-size:14.5px;align-items:flex-start}
.ticks li::before{content:"—";color:var(--brass);font-family:var(--mono);flex-shrink:0}

/* ---------- watermark ---------- */
.watermark{
  position:fixed;bottom:calc(8px + env(safe-area-inset-bottom));left:0;right:0;
  text-align:center;z-index:5;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--text);opacity:.06;pointer-events:none;user-select:none;text-transform:uppercase;
}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));
  transform:translate(-50%,220%);
  background:var(--surface);border:1px solid var(--brass);color:var(--text);
  padding:12px 20px;border-radius:99px;font-size:14px;z-index:120;
  transition:transform .34s var(--ease),opacity .2s,visibility .2s;
  max-width:90vw;text-align:center;
  /* 140% left ~9px of the pill peeking above the fold as a stray rounded square.
     Belt and braces: move further AND take it out of the paint entirely. */
  opacity:0;visibility:hidden;pointer-events:none;
}
.toast.show{transform:translate(-50%,0);opacity:1;visibility:visible}

/* ---------- confetti ---------- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:110;overflow:hidden}
.confetti i{position:absolute;width:8px;height:14px;top:-20px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.15}}

/* ---------- navigator ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.chip{
  border:1.5px solid var(--rule);background:transparent;border-radius:99px;
  padding:11px 16px;min-height:44px;cursor:pointer;font-size:13.5px;
  font-family:var(--mono);transition:.18s;
}
.chip:hover{border-color:var(--rule-strong)}
.chip[aria-pressed="true"]{border-color:var(--brass);color:var(--brass);background:color-mix(in srgb,var(--brass) 12%,transparent)}
.chip.ok{border-color:var(--stamp);color:var(--stamp)}
.chip.no{border-color:var(--redtape);color:var(--redtape-t)}
input[type="text"],input[type="number"],select{
  background:var(--surface-2);border:1.5px solid var(--rule);color:var(--text);
  border-radius:var(--r-sm);padding:12px 14px;font:inherit;width:100%;
}
input:focus,select:focus{border-color:var(--brass);outline:none}
input::placeholder{color:var(--text-dim);opacity:.75}
/* Chrome/Safari repaint autofilled fields with their own background, which made
   the username box look different from the password box. Force ours back. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 100px var(--surface-2) inset;
  box-shadow:0 0 0 100px var(--surface-2) inset;
  caret-color:var(--text);
  transition:background-color 9999s ease-in-out 0s;
}
input[type="password"]{ letter-spacing:.06em;font-family:var(--body) }
label.fld{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim);margin-bottom:7px}

/* ---------- misc ---------- */
.foot{border-top:1px solid var(--rule);
  padding:26px var(--pad) calc(60px + env(safe-area-inset-bottom));display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap;font-size:13px;color:var(--text-dim);max-width:var(--maxw);margin:40px auto 0}
.foot a{margin-left:16px}
.fine{font-size:11.5px;max-width:60ch;margin:8px 0 0;opacity:.8}
.empty{text-align:center;padding:56px 20px;color:var(--text-dim)}
hr.rule{border:0;border-top:1px solid var(--rule);margin:28px 0}
.split{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* landscape phone: the full-height hero would push the CTA off screen */
@media(max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding:32px var(--pad) 40px}
  .hero-45{font-size:clamp(88px,17vw,150px)}
  .countdown{margin:18px 0 4px}
}

/* very narrow (320px) */
@media(max-width:360px){
  .cd-cell{min-width:60px;padding:9px 10px}
  .cd-cell b{font-size:20px}
  .opt{gap:11px;padding:13px 12px}
  .opt-body{font-size:14.5px}
  .btn{padding:13px 20px;font-size:14.5px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- auth chip in the top bar ---------- */
.authbtn{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-size:13px;font-weight:600;padding:7px 14px;border-radius:99px;
  border:1.5px solid var(--rule-strong);color:var(--text);white-space:nowrap;
  transition:.2s var(--ease);max-width:170px;overflow:hidden;text-overflow:ellipsis;
}
.authbtn:hover{border-color:var(--brass);color:var(--brass)}
.authbtn.in{border-color:var(--brass);color:var(--brass);background:color-mix(in srgb,var(--brass) 10%,transparent)}
.authbtn.in::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--stamp);flex-shrink:0}
@media(max-width:520px){.authbtn{max-width:110px;padding:7px 10px}}

/* ---------- admin page ---------- */
.admin-wrap{max-width:960px;margin:0 auto;padding:clamp(24px,5vw,52px) var(--pad)}
.uline{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.uline:last-child{border-bottom:0}
.uline .un{font-family:var(--mono);font-size:14px;font-weight:600}
.uline .um{font-size:12.5px;color:var(--text-dim)}
.uline .ua{margin-left:auto;display:flex;gap:8px}
.mini{padding:11px 15px;min-height:44px;font-size:13px;border-radius:99px;
  border:1.5px solid var(--rule-strong);background:transparent;cursor:pointer;color:var(--text)}
.mini:hover{border-color:var(--brass);color:var(--brass)}
.mini.del:hover{border-color:var(--redtape);color:var(--redtape-t)}
.codebox{
  background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:14px;font-family:var(--mono);font-size:12px;white-space:pre-wrap;word-break:break-all;
  max-height:280px;overflow:auto;color:var(--text);
}
.warnbox{border:1.5px solid var(--redtape);border-radius:var(--r);padding:18px;background:color-mix(in srgb,var(--redtape) 7%,transparent)}
.fldrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}

/* ---------- explicit answer lines in explanations ----------
   The green highlight on the option is enough on the question screen, but
   review screens have no options to highlight — so the answer is stated. */
.ansline{
  margin:12px 0 0;font-size:14.5px;line-height:1.5;
  padding-left:13px;border-left:2px solid var(--stamp);
}
.ansline-k{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-dim);margin-bottom:3px;
}
.ansline.chose{ border-left-color:var(--redtape);color:var(--text-dim) }
.expl .ansline:first-of-type{ margin-top:14px }

/* ---------- admin panel on a phone ---------- */
@media(max-width:560px){
  .fldrow{grid-template-columns:1fr}
  .uline{align-items:flex-start}
  .uline .ua{margin-left:0;width:100%;margin-top:10px}
  .uline .ua .mini{flex:1}
  .codebox{font-size:11px;max-height:200px}
  .admin-wrap{padding-left:16px;padding-right:16px}
}

/* ---------- app views on a phone ---------- */
@media(max-width:560px){
  .prac-head{gap:10px}
  .prac-head h2{font-size:17px}
  .timer{font-size:17px}
  .expl{padding:15px}
  .cites{font-size:15px;gap:8px}
  .bigscore{margin:8px 0}
  .stat b{font-size:23px}
  .btn-row{gap:10px}
  .btn-row .btn{flex:1 1 auto;min-width:0}
  .grid{gap:11px}
  .qcard{padding:16px}
  /* long statute names and citations must never push the layout wide */
  .qstem,.opt-body,.expl p,.ansline{overflow-wrap:anywhere}
}

/* ---------- tablets ---------- */
@media(min-width:561px) and (max-width:900px){
  .wrap{padding-left:26px;padding-right:26px}
  .subj-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}

/* ---------- exam picker on the home page ---------- */
.exam-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;
}
.examcard{
  display:flex;flex-direction:column;gap:7px;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:18px;transition:.22s var(--ease);min-height:210px;
}
a.examcard:hover{ border-color:var(--brass);transform:translateY(-3px) }
.examcard.is-building,.examcard.is-planned{ opacity:.62 }
.examcard.is-live{ border-color:color-mix(in srgb,var(--brass) 45%,var(--rule)) }
.examcard-top{ display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap }
.examcard-top > div{ display:flex;gap:6px;flex-wrap:wrap }
.examcard-days{ font-size:12px;color:var(--redtape-t);font-weight:600;white-space:nowrap }
.examcard h3{ font-family:var(--body);font-size:19px;font-weight:600;letter-spacing:0;margin:4px 0 0 }
.examcard-full{ font-size:11.5px;color:var(--text-dim);margin:0;line-height:1.4 }
.examcard-hook{ font-family:var(--display);font-size:15px;color:var(--brass);margin:6px 0 0;line-height:1.3 }
.examcard-blurb{ font-size:13px;color:var(--text-dim);margin:4px 0 0;line-height:1.5 }
.examcard-foot{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;
}
.examcard-go{ color:var(--brass);font-weight:600 }
@media(max-width:560px){
  .exam-grid{ grid-template-columns:1fr }
  .examcard{ min-height:0 }
}

/* ---------- resume banner ---------- */
.resume-card{
  border-color:var(--brass);
  background:color-mix(in srgb,var(--brass) 6%,var(--surface));
  margin:22px 0;
}