/* ============================================================================
   SAT Study — visual system.
   Every class name from the previous stylesheet is preserved. This file changes
   only how things look, never how anything behaves.

   The two accents are the hex values of the highlighters used in the original
   Practice Test 1 booklet, brightened for screen. Pink marks Reading and
   Writing, purple marks Math, throughout the app.
   ========================================================================= */

:root{
  --paper:#fffaf0;
  --canvas:#f5eddd;
  --panel:#eee2cc;
  --ink:#173659;
  --soft:#586574;
  --faint:#8f8a7c;
  --rule:#d8c7a7;
  --rule-soft:#eadfca;

  --pink:#a53630;
  --pink-deep:#842b28;
  --purple:#20466f;
  --purple-deep:#173659;
  --pink-wash:#f5e1dc;
  --purple-wash:#e3e9ef;

  --green:#129d6b;
  --green-wash:#e2f7ef;
  --red:#a53630;
  --red-wash:#f5e1dc;
  --amber:#a9803a;
  --amber-wash:#f4ead3;

  --accent:var(--pink);
  --grad:linear-gradient(135deg,#173659 0%,#28577f 100%);

  --sh-1:0 1px 2px rgba(23,23,26,.05), 0 2px 8px rgba(23,23,26,.04);
  --sh-2:0 2px 6px rgba(23,23,26,.06), 0 12px 28px rgba(23,23,26,.07);
  --sh-3:0 8px 24px rgba(23,23,26,.10), 0 32px 64px rgba(23,23,26,.10);

  --r-s:8px; --r-m:12px; --r-l:18px;

  --serif:"Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--canvas);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0;letter-spacing:-.015em}
button{font:inherit;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .1s}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--pink);outline-offset:2px;border-radius:4px}
a{color:var(--pink-deep)}

/* ---------------------------------------------------------------- sign in */
.gate{max-width:412px;margin:0 auto;padding:0 22px;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center}
body:has(.gate){
  background:
    radial-gradient(1100px 620px at 12% -10%, #e2d2af 0%, rgba(226,210,175,0) 62%),
    radial-gradient(900px 560px at 92% 8%, #e6ded0 0%, rgba(230,222,208,0) 60%),
    radial-gradient(800px 700px at 60% 108%, #ead8b7 0%, rgba(234,216,183,0) 58%),
    var(--canvas);
}
.gate-hero{display:block;width:100%;height:auto;margin:0 0 22px;border:1px solid var(--rule);
  border-radius:var(--r-m);box-shadow:var(--sh-3)}
.gate>p{color:var(--soft);margin:0 0 26px;font-size:15.5px;max-width:34ch}
.gate form{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-l);
  padding:28px 28px 26px;box-shadow:var(--sh-3)}
.gate .err{color:var(--red);font-size:13.5px;margin-top:10px;min-height:19px;font-weight:500}
.gate .btn{width:100%;padding:13px;font-size:15px;margin-top:4px}

.fld{display:block;margin-bottom:16px}
.fld span{display:block;font-size:11.5px;color:var(--soft);margin-bottom:6px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.fld input,.fld select,.fld textarea{width:100%;padding:11px 13px;
  border:1.5px solid var(--rule);border-radius:var(--r-s);background:var(--paper);
  transition:border-color .15s,box-shadow .15s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--pink);
  box-shadow:0 0 0 4px var(--pink-wash)}
.fld textarea{min-height:82px;resize:vertical;font-family:var(--sans)}
.show-password{display:flex;align-items:center;gap:7px;margin-top:9px;color:var(--soft);
  font-size:12.5px;font-weight:500;cursor:pointer}
.show-password input{width:15px;height:15px;accent-color:var(--purple);cursor:pointer}

/* ------------------------------------------------------------------ shell */
.shell{display:flex;min-height:100vh}
.rail{width:246px;flex:0 0 246px;padding:24px 16px 20px;
  background:linear-gradient(180deg,#fffdfc 0%,var(--panel) 100%);
  border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:22px;
  position:sticky;top:0;height:100vh}
.brand{font-family:var(--serif);font-size:19px;line-height:1.2;padding:0 8px;letter-spacing:-.02em}
.brand::before{content:"";display:block;width:32px;height:32px;border-radius:10px;
  background:var(--grad);box-shadow:0 5px 14px rgba(255,77,126,.3);margin-bottom:12px}
.brand span{display:block;font-family:var(--sans);font-size:12px;color:var(--soft);
  margin-top:4px;font-weight:500;letter-spacing:0}
.countdown{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);
  padding:14px 16px;box-shadow:var(--sh-1)}
.countdown .n{font-family:var(--serif);font-size:40px;line-height:1;letter-spacing:-.04em;
  color:var(--pink-deep)}
.countdown .l{font-size:11.5px;color:var(--soft);margin-top:4px;font-weight:500}
nav{display:flex;flex-direction:column;gap:3px}
nav button{text-align:left;background:none;border:0;padding:9px 12px;border-radius:var(--r-s);
  color:var(--soft);font-size:14.5px;width:100%;font-weight:500}
nav button:hover{background:rgba(23,23,26,.05);color:var(--ink)}
nav button[aria-current=true]{background:var(--paper);color:var(--ink);font-weight:600;
  box-shadow:var(--sh-1)}
nav button.hero{background:var(--grad);color:#fff;font-weight:600;margin-bottom:10px;
  padding:12px;box-shadow:0 6px 18px rgba(255,77,126,.32)}
nav button.hero:hover{color:#fff;transform:translateY(-1px);
  box-shadow:0 9px 24px rgba(255,77,126,.42)}
nav button.hero[aria-current=true]{background:var(--grad);color:#fff}
.rail footer{margin-top:auto;font-size:11.5px;color:var(--soft);line-height:1.55;padding:0 8px}
.rail footer a{color:var(--pink-deep);font-weight:600;text-decoration:none}

main{flex:1;min-width:0;padding:44px 48px 100px;max-width:1060px}
.view{display:none}
.view.on{display:block;animation:rise .22s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h2.big{font-size:36px;letter-spacing:-.03em}
.lede{max-width:66ch;color:var(--soft);margin:10px 0 0;font-size:15.5px}
h3.sec{font-size:21px;margin:38px 0 12px;letter-spacing:-.02em}
h3.sec::after{content:"";display:block;width:34px;height:3px;border-radius:2px;
  background:var(--grad);margin-top:9px}
.muted{color:var(--soft)}
.small{font-size:13px}

/* ---------------------------------------------------------------- buttons */
.btn{background:var(--grad);color:#fff;border:0;padding:11px 20px;border-radius:var(--r-s);
  font-size:14.5px;font-weight:600;box-shadow:0 4px 14px rgba(255,77,126,.28);
  display:inline-block;text-decoration:none;text-align:center}
.btn:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(255,77,126,.38);color:#fff}
.btn:active{transform:none}
.btn.ghost{background:var(--paper);color:var(--ink);border:1.5px solid var(--rule);
  box-shadow:var(--sh-1)}
.btn.ghost:hover{background:var(--panel);border-color:#dcd7d2;color:var(--ink)}
.btn:disabled{opacity:.42;cursor:default;transform:none;box-shadow:none}
.row{display:flex;gap:11px;flex-wrap:wrap;align-items:center;margin-top:20px}

/* ----------------------------------------------------------------- today */
.today{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-l);
  padding:26px 28px;margin-top:24px;box-shadow:var(--sh-2);position:relative;overflow:hidden}
.today::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad)}
.today .wk{font-size:11.5px;color:var(--soft);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin-top:4px}
.today h3{font-size:25px;margin:8px 0 2px;letter-spacing:-.02em}
.today .goal{color:var(--soft);max-width:64ch;margin:8px 0 20px}
ul.tasks{list-style:none;margin:0;padding:0}
ul.tasks li{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:var(--r-s)}
ul.tasks li:hover{background:var(--panel)}
ul.tasks input{margin:4px 0 0;width:17px;height:17px;accent-color:var(--green);flex:0 0 auto}
ul.tasks label{flex:1;max-width:70ch;cursor:pointer}
ul.tasks li.done label{color:var(--faint);text-decoration:line-through}
.stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.stat{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);
  padding:16px 20px;box-shadow:var(--sh-1);min-width:130px;flex:1}
.stat .n{font-family:var(--serif);font-size:28px;line-height:1.1;letter-spacing:-.03em}
.stat .l{font-size:12px;color:var(--soft);margin-top:3px;font-weight:500}

/* ------------------------------------------------------------------ plan */
.week{border-bottom:1px solid var(--rule)}
.week>button{width:100%;background:none;border:0;padding:17px 8px;display:flex;gap:16px;
  align-items:baseline;text-align:left;border-radius:var(--r-s)}
.week>button:hover{background:var(--panel)}
.wnum{font-family:var(--serif);font-size:15px;color:var(--faint);width:62px;flex:0 0 62px;
  font-weight:600}
.wttl{font-family:var(--serif);font-size:18px;flex:1;letter-spacing:-.015em}
.wprog{font-size:12.5px;color:var(--soft);white-space:nowrap;font-weight:500}
.week .body{display:none;padding:2px 8px 20px 70px}
.week.open .body{display:block}
.week.current .wnum{color:var(--pink)}
.week.current .wttl{font-weight:700}
.week.skipped .wttl,.week.skipped .wnum{color:#c2bfba}
.week.skipped .wprog{font-style:italic}
.sess{margin-top:16px}
.sess h4{font-family:var(--sans);font-size:11px;color:var(--soft);margin:0 0 4px;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase}

/* -------------------------------------------------------------- practice */
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:14px;
  margin-top:22px}
.skill{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);
  border-left:4px solid var(--pink);padding:16px 18px;text-align:left;box-shadow:var(--sh-1)}
.skill.math{border-left-color:var(--purple)}
.skill:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.skill .nm{font-family:var(--serif);font-size:16.5px;display:block;letter-spacing:-.015em}
.skill .mt{font-size:12px;color:var(--soft);margin-top:8px;display:flex;align-items:center;gap:9px}
.meter{flex:1;height:7px;background:var(--rule-soft);border-radius:4px;overflow:hidden;max-width:96px}
.meter i{display:block;height:100%;background:var(--green);border-radius:4px}
.meter.low i{background:var(--red)}
.meter.mid i{background:var(--amber)}

.qwrap{max-width:74ch;margin-top:20px}
.qmeta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-size:12.5px;color:var(--soft);border-bottom:1px solid var(--rule);padding-bottom:10px}
.qtag{display:inline-block;padding:3px 11px;border-radius:20px;background:var(--pink-wash);
  color:var(--pink-deep);font-weight:600;font-size:11.5px}
.qtag.math{background:var(--purple-wash);color:var(--purple-deep)}
.passage{font-family:var(--serif);font-size:17.5px;line-height:1.68;margin:22px 0;
  white-space:pre-wrap;color:#232327}
.passage u{text-decoration:none;
  background:linear-gradient(var(--pink-wash),var(--pink-wash));background-repeat:no-repeat;
  background-position:0 88%;background-size:100% 46%;box-shadow:inset 0 -1.5px 0 var(--pink)}
.qfig{margin:20px 0;text-align:center}
table.data{border-collapse:separate;border-spacing:0;margin:20px 0;font-size:14px;
  border:1px solid var(--rule);border-radius:var(--r-m);overflow:hidden;background:var(--paper)}
table.data caption{font-family:var(--serif);font-size:15px;margin-bottom:9px;
  caption-side:top;text-align:left}
table.data th,table.data td{border-bottom:1px solid var(--rule);padding:8px 14px;text-align:center}
table.data th{background:var(--panel);font-weight:700;font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--soft)}
table.data tr:last-child td{border-bottom:0}
table.data td:first-child,table.data th:first-child{text-align:left}
.stem{font-size:17px;margin:20px 0 16px;max-width:66ch;font-weight:500}
.choices{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.choice{display:flex;gap:13px;align-items:flex-start;border:1.5px solid var(--rule);
  padding:14px 16px;background:var(--paper);text-align:left;width:100%;
  border-radius:var(--r-m);font-size:15px}
.choice:hover:not(:disabled){border-color:var(--pink);background:#fffafb;transform:translateX(2px)}
.choice .ltr{font-family:var(--serif);width:20px;flex:0 0 20px;color:var(--faint);font-weight:600}
.choice.picked{border-color:var(--pink);background:var(--pink-wash)}
.choice.picked .ltr{color:var(--pink-deep)}
.choice.correct{border-color:var(--green);background:var(--green-wash)}
.choice.correct .ltr{color:var(--green)}
.choice.wrong{border-color:var(--red);background:var(--red-wash)}
.choice.wrong .ltr{color:var(--red)}
.choice:disabled{cursor:default;opacity:1;transform:none}
.verdict{margin-top:26px;border-top:1px solid var(--rule);padding-top:20px}
.verdict h4{font-size:20px;margin-bottom:8px}
.verdict h4.ok{color:var(--green)}
.verdict h4.no{color:var(--red)}
.verdict p{max-width:66ch;margin:0 0 12px}
.method{border-left:3px solid var(--purple);background:var(--purple-wash);padding:12px 16px;
  border-radius:0 var(--r-s) var(--r-s) 0;color:#4a2d63;font-size:14px;max-width:64ch;margin:16px 0}
details.allwhy{margin-top:8px}
details.allwhy summary{cursor:pointer;font-size:13.5px;color:var(--soft);font-weight:600}
details.allwhy ul{margin:12px 0 0;padding-left:18px;font-size:14px;color:var(--soft)}
details.allwhy li{margin-bottom:7px;max-width:64ch}
.sessbar{display:flex;gap:22px;font-size:13px;color:var(--soft);margin-top:6px}
.conf{display:flex;gap:9px;margin:16px 0 6px;flex-wrap:wrap;align-items:center}
.conf .lbl{font-size:13px;color:var(--soft);margin-right:4px;font-weight:500}
.conf button{border:1.5px solid var(--rule);background:var(--paper);padding:7px 16px;
  border-radius:22px;font-size:13.5px;font-weight:500}
.conf button:hover{border-color:var(--pink)}
.conf button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.notebox{margin-top:22px;background:var(--paper);border:1px solid var(--rule);
  border-left:4px solid var(--purple);border-radius:0 var(--r-m) var(--r-m) 0;
  padding:16px 18px;max-width:74ch;box-shadow:var(--sh-1)}
.notebox h5{font-family:var(--sans);font-size:11px;color:var(--soft);margin:0 0 8px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.notebox textarea{width:100%;min-height:74px;border:1.5px solid var(--rule);
  border-radius:var(--r-s);padding:10px 12px;font-family:var(--sans);font-size:14px;resize:vertical}
.notebox textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px var(--purple-wash)}
.notebox .n-status{font-size:12px;color:var(--soft);margin-top:7px;min-height:16px}

/* ------------------------------------------------------------ timed test */
.testbar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);
  padding:14px 18px;margin-top:16px;box-shadow:var(--sh-1);position:sticky;top:14px;z-index:5}
.clock{font-family:var(--serif);font-size:30px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.clock.low{color:var(--red);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55}}
.qnav{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 6px}
.qnav button{width:33px;height:31px;border:1.5px solid var(--rule);background:var(--paper);
  border-radius:var(--r-s);font-size:12.5px;color:var(--soft);font-weight:600}
.qnav button.done{background:var(--pink-wash);color:var(--pink-deep);border-color:var(--pink-wash)}
.qnav button.flag{border-color:var(--purple)}
.qnav button.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* -------------------------------------------------------- charts, tables */
.bars{margin-top:12px;max-width:660px}
.bar{display:flex;align-items:center;gap:13px;margin-bottom:9px;font-size:13.5px}
.bar .k{width:238px;flex:0 0 238px;color:var(--soft);font-weight:500}
.bar .t{flex:1;height:18px;background:var(--rule-soft);border-radius:9px;overflow:hidden}
.bar .t i{display:block;height:100%;border-radius:9px;background:var(--grad)}
.bar.math .t i{background:linear-gradient(135deg,var(--purple),#c084fc)}
.bar .v{width:62px;text-align:right;color:var(--soft);font-weight:600;font-size:12.5px}

form.log{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-l);
  padding:24px 26px;margin-top:22px;max-width:760px;box-shadow:var(--sh-1)}
form.log label{display:block;font-size:11px;color:var(--soft);margin-bottom:5px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase}
form.log input,form.log select{width:100%;padding:10px 12px;border:1.5px solid var(--rule);
  border-radius:var(--r-s);background:var(--paper)}
form.log input:focus,form.log select:focus{outline:none;border-color:var(--pink);
  box-shadow:0 0 0 4px var(--pink-wash)}
form.log .wide{grid-column:1/-1}

table.log,table.roster,table.ans{border-collapse:separate;border-spacing:0;width:100%;
  margin-top:14px;font-size:14px;background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh-1)}
table.log th,table.roster th,table.ans th{text-align:left;font-size:10.5px;color:var(--soft);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid var(--rule);padding:11px 12px;background:var(--panel)}
table.log td,table.roster td,table.ans td{border-bottom:1px solid var(--rule-soft);
  padding:13px 12px;vertical-align:top}
table.log tr:last-child td,table.roster tr:last-child td,table.ans tr:last-child td{border-bottom:0}
table.roster tr:hover td{background:#fffafb;cursor:pointer}
table.log tr.rw td:first-child{box-shadow:inset 3px 0 0 var(--pink)}
table.log tr.math td:first-child{box-shadow:inset 3px 0 0 var(--purple)}
.del{background:none;border:0;color:var(--faint);padding:3px 7px;border-radius:6px}
.del:hover{background:var(--red-wash);color:var(--red)}
.empty{background:var(--paper);border:1.5px dashed var(--rule);border-radius:var(--r-l);
  padding:34px;color:var(--soft);max-width:66ch;margin-top:22px;text-align:center}

/* ------------------------------------------------------------ cards, etc */
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-l);
  padding:24px 26px;margin-top:18px;max-width:74ch;box-shadow:var(--sh-1)}
.card h4{font-family:var(--serif);font-size:19px;margin:0 0 10px;letter-spacing:-.015em}
.card ol,.card ul{margin:12px 0 0;padding-left:20px}
.card li{margin-bottom:8px;max-width:66ch}
.why{font-size:13.5px;color:var(--soft);border-left:3px solid var(--purple);
  background:var(--purple-wash);padding:11px 14px;border-radius:0 var(--r-s) var(--r-s) 0;margin-top:16px}
.fx{font-family:var(--serif);background:var(--panel);padding:2px 8px;border-radius:5px;white-space:nowrap}
.set{max-width:62ch}
.set input[type=date]{padding:10px 12px;border:1.5px solid var(--rule);border-radius:var(--r-s)}
.warn{border-left:3px solid var(--amber);background:var(--amber-wash);padding:13px 16px;
  border-radius:0 var(--r-s) var(--r-s) 0;font-size:14px;color:#6b4a08;margin-top:20px}
.err{color:var(--red);font-size:13.5px;min-height:19px;font-weight:500}

/* ------------------------------------------------------------------ SWOT */
.swot{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:20px}
.quad{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-l);
  padding:20px 22px;border-top:4px solid var(--rule);box-shadow:var(--sh-1)}
.quad.s{border-top-color:var(--green)} .quad.w{border-top-color:var(--red)}
.quad.o{border-top-color:var(--purple)} .quad.t{border-top-color:var(--amber)}
.quad h4{font-size:11.5px;margin-bottom:12px;font-family:var(--sans);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.quad .item{border-top:1px solid var(--rule-soft);padding:13px 0}
.quad .item:first-of-type{border-top:0;padding-top:0}
.quad .it{font-family:var(--serif);font-size:16.5px;letter-spacing:-.015em}
.quad .ev{font-size:12.5px;color:var(--soft);margin:4px 0 6px}
.quad .ac{font-size:13.5px}
.quad .none{color:var(--faint);font-size:13.5px}

.pill{display:inline-block;font-size:11px;padding:3px 10px;border-radius:20px;
  background:var(--panel);color:var(--soft);margin:0 5px 4px 0;font-weight:600}
.pill.alert{background:var(--red-wash);color:var(--red)}
.pill.ok{background:var(--green-wash);color:var(--green)}
.up{color:var(--green);font-weight:600} .down{color:var(--red);font-weight:600}
.snote{background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--purple);
  border-radius:0 var(--r-m) var(--r-m) 0;padding:15px 18px;margin-top:12px;max-width:78ch;
  box-shadow:var(--sh-1)}
.snote .meta{font-size:11px;color:var(--soft);margin-bottom:7px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase}
.snote .body{white-space:pre-wrap;font-size:15px;font-family:var(--serif)}
.snote .q{font-size:13px;color:var(--soft);font-style:italic;margin-top:9px}

.modal{position:fixed;inset:0;background:rgba(23,23,26,.42);display:flex;align-items:flex-start;
  justify-content:center;padding:6vh 18px;z-index:40;overflow:auto}
.modal .sheet{background:var(--paper);max-width:520px;width:100%;padding:28px 30px;
  border-radius:var(--r-l);box-shadow:var(--sh-3)}
.modal h3{font-size:22px;margin-bottom:4px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--rule);margin:22px 0 0;flex-wrap:wrap}
.tabs button{background:none;border:0;padding:11px 16px;color:var(--soft);font-size:14.5px;
  border-bottom:2.5px solid transparent;margin-bottom:-1px;font-weight:500}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--pink);font-weight:700}
.kv{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.kv>div{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);
  padding:15px 18px;box-shadow:var(--sh-1);min-width:120px;flex:1}
.kv div span{display:block;font-size:11.5px;color:var(--soft);font-weight:500}
.kv div b{font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:-.03em;
  display:block;margin-bottom:2px}

/* ---------------------------------------------------------- answer entry */
.optbtn{border:1.5px solid var(--rule);background:var(--paper);padding:7px 15px;
  border-radius:var(--r-s);margin-right:6px;font-size:14px;min-width:42px;font-weight:600;
  color:var(--soft)}
.optbtn:hover{border-color:var(--pink);color:var(--ink)}
.optbtn[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.optbtn.blank{color:var(--faint);font-size:12.5px;font-weight:500}
.optbtn.blank[aria-pressed=true]{background:var(--faint);border-color:var(--faint);color:#fff}
label.gs{display:flex;gap:7px;align-items:center;font-size:12.5px;color:var(--soft);
  cursor:pointer;white-space:nowrap}
label.gs input{accent-color:var(--purple)}
.ansline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
input.qnote{width:100%;max-width:440px;margin-top:8px;padding:6px 10px;font-size:13px;
  border:1.5px solid transparent;border-bottom:1.5px dashed var(--rule);border-radius:6px;
  background:transparent;color:var(--soft)}
input.qnote:focus{outline:none;border:1.5px solid var(--purple);background:var(--paper);
  color:var(--ink);box-shadow:0 0 0 4px var(--purple-wash)}
input.qnote.has{color:var(--ink);border-bottom-color:var(--purple)}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);
  color:#fff;padding:12px 22px;border-radius:24px;font-size:14.5px;font-weight:500;
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:50;box-shadow:var(--sh-3)}
.toast.on{opacity:1}

@media (prefers-reduced-motion:reduce){
  .view.on{animation:none}
  .clock.low{animation:none}
  .btn:hover,.skill:hover,.choice:hover:not(:disabled){transform:none}
}

@media (max-width:880px){
  .shell{flex-direction:column}
  .rail{width:auto;flex:none;border-right:0;border-bottom:1px solid var(--rule);
    position:static;height:auto}
  nav{flex-direction:row;flex-wrap:wrap}
  nav button{width:auto}
  main{padding:26px 18px 80px}
  h2.big{font-size:29px}
  form.log{grid-template-columns:1fr}
  .bar .k{width:130px;flex:0 0 130px}
  .testbar{position:static}
}