/* SAT Studio - Warm Cards shell + Bluebook chamber (design system 2026-10-22) */
:root{
  --paper:#F5F0E6; --card:#FFFDF9; --recessed:#EBE4D6; --hover:#E2D9C8;
  --ink:#1E1B18; --ink2:#5C554E; --muted:#8C8277;
  --line:#E0D8C8; --rule:#C9BFA8;
  --terra:#C85A32; --terra-h:#B04A25; --terra-t:#F9ECE6; --terra-b:#E8C2B3;
  --green:#2D5A43; --green-h:#224634; --green-t:#E8F0EC; --green-b:#B5D1C2;
  --amber:#C88A28; --amber-t:#FDF4E3;
  --crim:#B83A32; --crim-t:#FBECEB; --crim-b:#E5B5B2;
  --slate:#3B5B76; --slate-t:#EBF0F5;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5}
button{font-family:var(--sans);cursor:pointer}
input,select{font-family:var(--sans);font-size:15px}
h1,h2,h3,.serif{font-family:var(--serif)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.hidden{display:none!important}

/* ---------- shell ---------- */
.topbar{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:10px 18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:20px;font-weight:700}
.brand .mark{width:30px;height:30px;flex:0 0 auto}
.pill-cohort{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--ink2);border:1px solid var(--rule);border-radius:99px;padding:2px 8px}
.tabs{display:flex;gap:4px;margin-left:8px;flex-wrap:wrap}
.tabs button{background:none;border:none;font-size:14.5px;font-weight:600;color:var(--ink2);padding:8px 12px;border-radius:8px}
.tabs button.on{color:var(--terra);background:var(--terra-t)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.countdown{font-family:var(--mono);font-size:13px;border:1px solid var(--rule);border-radius:99px;padding:4px 12px;background:var(--card)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.wrap{max-width:1060px;margin:0 auto;padding:22px 16px 70px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:16px}
.card h3{margin:0 0 6px;font-size:19px}
.sub{color:var(--ink2);font-size:13.5px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;border:1px solid var(--rule);background:var(--card);color:var(--ink);font-weight:600;font-size:14.5px;padding:10px 18px}
.btn.primary{background:var(--terra);border-color:var(--terra);color:#fff}
.btn.primary:hover{background:var(--terra-h)}
.btn.green{background:var(--green);border-color:var(--green);color:#fff}
.btn.ghost{background:none}
.btn:disabled{opacity:.45;cursor:default}
.btn.small{padding:6px 12px;font-size:13px}
.chip{display:inline-block;font-size:12px;font-weight:600;border-radius:99px;padding:3px 10px;background:var(--recessed);color:var(--ink2)}
.chip.terra{background:var(--terra-t);color:var(--terra)}
.chip.green{background:var(--green-t);color:var(--green)}
progress.bar{width:100%;height:8px;appearance:none}
progress.bar::-webkit-progress-bar{background:var(--recessed);border-radius:99px}
progress.bar::-webkit-progress-value{background:var(--green);border-radius:99px}
progress.bar::-moz-progress-bar{background:var(--green);border-radius:99px}

/* home */
.hero-date{font-family:var(--serif);font-size:24px;font-weight:700}
.taskrow{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:12px;background:var(--card)}
.taskrow .grow{flex:1}
.taskrow.done{background:var(--green-t);border-color:var(--green-b)}
.weekstrip{display:flex;gap:6px;margin-top:10px}
.daypill{flex:1;text-align:center;border-radius:10px;padding:8px 2px;background:var(--recessed);font-size:12px;color:var(--ink2)}
.daypill .dn{font-weight:700;font-size:13px;color:var(--ink)}
.daypill.done{background:var(--green);color:#fff}.daypill.done .dn{color:#fff}
.daypill.today{outline:2px solid var(--terra);background:var(--card)}
.daypill button{margin-top:4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}
.skillbar{height:8px;background:var(--recessed);border-radius:99px;overflow:hidden}
.skillbar>i{display:block;height:100%;background:var(--green)}
.skillbar>i.mid{background:var(--amber)}.skillbar>i.low{background:var(--crim)}

/* gate / setup */
.centerbox{max-width:520px;margin:6vh auto}
.field{margin:14px 0}
.field label{display:block;font-weight:600;font-size:13.5px;margin-bottom:6px}
.field input[type=text],.field input[type=date]{width:100%;padding:11px 12px;border:1px solid var(--rule);border-radius:10px;background:#fff}
input[type=range]{width:100%}

/* plan */
.planday{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.planday:last-child{border-bottom:none}
.switch{margin-left:auto;display:flex;gap:6px}
.switch button{border:1px solid var(--rule);background:var(--card);border-radius:99px;padding:4px 12px;font-size:13px;font-weight:600}
.switch button.on{background:var(--green);color:#fff;border-color:var(--green)}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.seg button{border:none;background:var(--card);padding:8px 14px;font-weight:600}
.seg button.on{background:var(--terra);color:#fff}

/* ---------- exam chamber (Bluebook) ---------- */
.exam{background:#fff;color:#000;min-height:100vh;display:flex;flex-direction:column;font-family:var(--sans)}
.exam-top{background:#F8F9FA;border-bottom:2px dashed #B9BEC4;display:flex;align-items:center;gap:12px;padding:8px 16px;flex-wrap:wrap}
.exam-top .ttl{font-weight:700;font-size:15px}
.exam-top .timerbox{margin:0 auto;text-align:center}
.exam-top .timer{font-family:var(--mono);font-weight:700;font-size:21px}
.hidebtn{border:1.5px solid #000;background:#fff;border-radius:99px;font-size:12px;padding:1px 12px;font-weight:600}
.toolbtn{background:none;border:none;font-size:13px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:1px;color:#000}
.exam-main{flex:1;display:flex;min-height:0}
.exam-passage{flex:1.05;padding:26px 30px;font-family:var(--serif);font-size:16.5px;line-height:1.65;overflow-y:auto;max-height:calc(100vh - 138px)}
.exam-passage .src{font-size:13px;color:#333;font-style:italic;margin-bottom:14px}
.exam-passage u{text-decoration:underline}
.exam-divider{width:14px;background:linear-gradient(90deg,transparent 6px,#C9CDD2 6px,#C9CDD2 8px,transparent 8px);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.exam-divider span{background:#1E1E1E;color:#fff;border-radius:5px;font-size:11px;padding:8px 2px}
.exam-q{flex:1;padding:22px 26px;overflow-y:auto;max-height:calc(100vh - 138px)}
.qstrip{background:#F0F2F5;border-bottom:2px dashed #B9BEC4;display:flex;align-items:center;gap:10px;padding:7px 10px;margin:-22px -26px 16px}
.qnum{background:#000;color:#fff;font-weight:700;padding:3px 9px;font-size:14px}
.markbtn{background:none;border:none;font-weight:600;font-size:13.5px;color:#000}
.markbtn.on{color:#D92B2B}
.abcbtn{margin-left:auto;background:#0050B3;color:#fff;border:none;border-radius:5px;font-weight:700;font-size:12px;padding:4px 8px;letter-spacing:.03em}
.qstem{font-family:var(--serif);font-size:16.5px;line-height:1.6;margin-bottom:16px}
.choice{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1.6px solid #9aa0a6;border-radius:10px;background:#fff;padding:12px 14px;margin-bottom:11px;font-size:15.5px;color:#000}
.choice .cl{width:29px;height:29px;flex:0 0 auto;border:1.8px solid #000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}
.choice.sel{border-color:#0050B3;background:#EAF1FB}
.choice.sel .cl{background:#0050B3;color:#fff;border-color:#0050B3}
.choice .xout{margin-left:auto;flex:0 0 auto;width:26px;height:26px;border:1.6px solid #666;border-radius:50%;background:#fff;font-size:12px;display:none;align-items:center;justify-content:center}
.exam.abc-on .choice .xout{display:flex}
.choice.elim{opacity:.45}
.choice.elim .ctext{text-decoration:line-through}
.undobtn{margin-left:auto;font-size:12.5px;font-weight:700;text-decoration:underline;background:none;border:none;display:none}
.choice.elim .undobtn{display:block}
.exam-bot{background:#F8F9FA;border-top:2px dashed #B9BEC4;display:flex;align-items:center;gap:10px;padding:9px 16px}
.exam-bot .who{font-weight:600;font-size:14px}
.qpill{margin:0 auto;background:#1E1E1E;color:#fff;border:none;border-radius:99px;font-weight:700;font-size:14px;padding:9px 20px}
.navbtn{background:#1A56C4;color:#fff;border:none;border-radius:99px;font-weight:700;font-size:14px;padding:9px 22px}
.navbtn.back{background:#fff;color:#1A56C4;border:1.8px solid #1A56C4}
.navgrid{position:fixed;inset:auto 0 64px 0;margin:0 auto;max-width:430px;background:#fff;border:1px solid #ccc;border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.25);padding:16px;z-index:60}
.navgrid .cells{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.navgrid .cell{border:1.6px solid #888;border-radius:6px;background:#fff;padding:7px 0;font-weight:600;position:relative}
.navgrid .cell.ans{background:#1E1E1E;color:#fff}
.navgrid .cell.cur{outline:3px solid #0050B3}
.navgrid .cell .flag{position:absolute;top:-5px;right:-3px;color:#D92B2B;font-size:11px}
@media(max-width:760px){
  .exam-main{flex-direction:column}
  .exam-passage{max-height:38vh;border-bottom:2px dashed #B9BEC4}
  .exam-q{max-height:none}
  .exam-divider{display:none}
}
/* preflight */
.modal{position:fixed;inset:0;background:rgba(30,27,24,.45);display:flex;align-items:center;justify-content:center;z-index:80;padding:16px}
.modal .mbox{background:var(--card);border-radius:16px;max-width:440px;width:100%;padding:26px}

/* ---------- review (warm) ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filters button{border:1px solid var(--rule);background:var(--card);border-radius:99px;padding:6px 13px;font-weight:600;font-size:13px}
.filters button.on{background:var(--ink);color:#fff}
.tilestrip{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px}
.tile{width:31px;height:31px;border-radius:7px;border:1px solid var(--rule);background:var(--card);font-family:var(--mono);font-size:13px;font-weight:700;position:relative}
.tile.ok{background:var(--green-t);border-color:var(--green-b);color:var(--green)}
.tile.bad{background:var(--crim-t);border-color:var(--crim-b);color:var(--crim)}
.tile.cur{outline:2.4px solid var(--ink)}
.tile .flagdot{position:absolute;top:-4px;right:-3px;color:var(--amber);font-size:10px}
.reviewgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:860px){.reviewgrid{grid-template-columns:1fr}}
.rpassage{font-family:var(--serif);font-size:16px;line-height:1.65}
.rpassage .evid{background:var(--terra-t);border-radius:3px;padding:0 2px}
.wtap{border-bottom:2px dotted var(--slate);cursor:pointer}
.choice-card{border:1.6px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:11px;background:var(--card)}
.choice-card .chead{display:flex;gap:9px;align-items:center;margin-bottom:5px}
.choice-card .cl2{width:27px;height:27px;border:1.6px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto}
.choice-card.correct{border-color:var(--green-b);background:var(--green-t)}
.choice-card.mine-wrong{border-color:var(--crim-b);background:var(--crim-t)}
.badge{font-size:11px;font-weight:800;letter-spacing:.05em;border-radius:5px;padding:2.5px 8px}
.badge.ok{background:var(--green);color:#fff}
.badge.bad{background:var(--crim);color:#fff}
.badge.dim{background:var(--recessed);color:var(--ink2)}
.why{font-size:14px;color:var(--ink2);line-height:1.55;margin-top:5px}
.why b{color:var(--ink)}
/* word popover */
.pop{position:fixed;z-index:90;width:min(340px,calc(100vw - 24px));background:var(--card);border:1px solid var(--rule);border-top:3.5px solid var(--slate);border-radius:12px;box-shadow:0 12px 32px rgba(30,27,24,.16);padding:15px 17px}
.pop .hw{font-family:var(--serif);font-size:22px;font-weight:700}
.pop .ipa{font-family:var(--mono);color:var(--muted);font-size:13px}

/* results / dashboard */
.bandbig{font-family:var(--mono);font-size:33px;font-weight:700}
table.matrix{width:100%;border-collapse:collapse;font-size:14px}
table.matrix td,table.matrix th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left}
.light{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:middle;margin-right:6px}
.light.g{background:var(--green)}.light.y{background:var(--amber)}.light.r{background:var(--crim)}
.flashcard{background:var(--card);border:1px solid var(--line);border-radius:16px;min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center;cursor:pointer}
.flashcard .fw{font-family:var(--serif);font-size:34px;font-weight:700}
textarea.summary{width:100%;min-height:170px;border:1px solid var(--rule);border-radius:10px;padding:12px;font-family:var(--mono);font-size:13px;background:#fff}
.disclaimer{font-size:12.5px;color:var(--ink2);background:var(--amber-t);border-radius:8px;padding:8px 12px;margin-top:10px}

/* print */
@media print{
  body{background:#fff}
  .topbar,.no-print{display:none!important}
  .printset{font-family:var(--serif);color:#000}
  .printset .pq{page-break-inside:avoid;border-bottom:1px solid #999;padding:12px 0}
}

.figimg { max-width: 100%; height: auto; display: block; margin: 10px auto; }
@media print { .figimg { max-height: 46vh; } }