/* unrami HQ — Polka look from unrami mail: paper, ink, one red accent, Fraunces wordmark,
   Archivo Narrow UI, Newsreader prose. Dark partner follows the system setting. */
:root{
  --paper:#F6F2EA; --panel:#FFFFFF; --ink:#26211E; --soft:#6E655C; --faint:#9A9087; --rule:#E2D9CC; --rule-2:#D3C8B8;
  --hot:#D5212E; --hot-soft:#FBE3E3; --teach:#1F8A5C; --teach-soft:#E1F1E8; --ta:#2D5DA8; --ta-soft:#E3ECF8;
  --warn:#9A5B00; --warn-soft:#FBEFD9; --bad:#B3261E;
  --k-notes:#2D5DA8; --k-handout:#6E655C; --k-quiz:#C2410C; --k-homework:#7C3AED; --k-exam:#D5212E; --k-practice:#B4536B; --k-worksheet:#0F766E; --k-activity:#A16207; --k-solutions:#475569; --k-syllabus:#1F8A5C;
  --shadow:0 1px 2px rgba(38,33,30,.06),0 10px 30px rgba(38,33,30,.07);
  --ui:"Archivo Narrow","Arial Narrow",system-ui,sans-serif; --prose:"Newsreader",Georgia,serif; --word:"Fraunces",Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace; --paperserif:"STIX Two Text","Times New Roman",serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#17110F; --panel:#211A17; --ink:#F1E9DF; --soft:#B9AEA2; --faint:#8C8177; --rule:#382D28; --rule-2:#4A3C35;
  --hot:#FF5A5F; --hot-soft:#3A1B1C; --teach:#4CC08A; --teach-soft:#15301F; --ta:#7FA8F0; --ta-soft:#1B2640;
  --warn:#E8B04E; --warn-soft:#3A2C12; --bad:#FF8A80; --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35); color-scheme:dark;
}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--ui);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 12px 12px,rgba(213,33,46,.13) 2.2px,transparent 2.6px);background-size:28px 28px;background-attachment:fixed}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
a{color:inherit}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wordmark{font:600 26px/1 var(--word);letter-spacing:-.01em;text-transform:lowercase}
.wordmark b{color:var(--hot);font-weight:600}
.label{font:600 11px var(--ui);text-transform:uppercase;letter-spacing:.14em;color:var(--soft)}
.why{color:var(--soft);font:400 16px/1.45 var(--prose);margin:4px 0 0}
.muted{color:var(--soft)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.stack{display:flex;flex-direction:column;gap:12px}
.spacer{flex:1}

/* buttons */
.go{border:0;border-radius:999px;background:var(--ink);color:var(--paper);padding:11px 22px;font:600 14px var(--ui);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.go:hover{filter:brightness(1.15)}
.go[disabled]{opacity:.45;cursor:not-allowed}
.go.hot{background:var(--hot);color:#fff}
.ghost{border:1px solid var(--rule-2);background:var(--panel);border-radius:999px;padding:9px 16px;font:500 14px var(--ui);cursor:pointer;white-space:nowrap}
.ghost:hover{border-color:var(--soft)}
a.ghost,a.go{text-decoration:none;display:inline-flex;align-items:center}
.ghost.sm,.go.sm{padding:6px 12px;font-size:12.5px}
.link{border:0;background:none;padding:0;color:var(--soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* fields */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field>span{font:600 11px var(--ui);text-transform:uppercase;letter-spacing:.12em;color:var(--soft)}
.field input,.field select,.field textarea,.inp{width:100%;padding:10px 12px;border:1px solid var(--rule-2);border-radius:8px;background:var(--panel)}
.field textarea{min-height:70px;resize:vertical;font-family:var(--prose);font-size:16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
/* the flexibility card's groups (homework, quizzes, late homework); a row of days wraps rather than hiding the last days */
.flexgrp{display:grid;gap:12px;padding:16px 0 4px;border-top:1px solid var(--rule)}
.flexgrp:first-child{border-top:0;padding-top:0}
.flexgrp[hidden]{display:none}
.flexgrp h3{margin:0;font:600 17px var(--ui)}
/* (its own class: "wk" is the calendar's week column, which stacks its contents in a column) */
.seg.daypick{display:flex;flex-direction:row;flex-wrap:wrap;width:max-content;max-width:100%;border-radius:14px}
.seg.daypick button{min-height:40px;padding:6px 14px}
.msg{font-size:14px;padding:10px 12px;border-radius:8px;background:var(--warn-soft);color:var(--ink)}
.msg.err{background:var(--hot-soft);color:var(--bad)}
.msg.ok{background:var(--teach-soft)}
.wdiff del.wdel{background:var(--hot-soft);color:var(--bad);text-decoration:line-through}
.wdiff ins.wins{background:var(--teach-soft);color:var(--ink);text-decoration:none;font-weight:600}

/* sign in */
.center-screen{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.signin{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:32px 28px;box-shadow:var(--shadow)}
.signin h1{font:600 28px/1.15 var(--word);margin:18px 0 4px}

/* wizard */
.wiz{min-height:100%;display:flex;flex-direction:column}
.wiz-top{display:flex;align-items:center;gap:16px;padding:18px 24px}
.progress{height:3px;background:var(--rule);position:relative}
.progress i{position:absolute;inset:0 auto 0 0;background:var(--hot);transition:width .6s cubic-bezier(.22,.61,.36,1)}
.wiz-stage{flex:1;display:flex;justify-content:center;padding:28px 16px 48px;overflow:hidden}
.card{width:100%;max-width:620px;background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.card.wide{max-width:980px}
.card h2{font:600 27px/1.18 var(--word);margin:0;text-wrap:balance}
.card .body{margin-top:20px;display:flex;flex-direction:column;gap:14px}
.card .foot{margin-top:24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.slide-in{animation:slin .6s cubic-bezier(.22,.61,.36,1)}
.slide-back{animation:slback .6s cubic-bezier(.22,.61,.36,1)}
@keyframes slin{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes slback{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
.choices{display:grid;gap:10px}
.choice{display:flex;gap:14px;align-items:flex-start;text-align:left;border:1px solid var(--rule-2);border-radius:10px;background:var(--panel);padding:14px 16px;cursor:pointer;position:relative;transition:opacity .2s,box-shadow .2s}
.choice:hover{border-color:var(--soft)}
.choice[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--hot);border-color:var(--hot)}
.choice[aria-pressed="true"]::after{content:"✓";position:absolute;right:14px;top:12px;color:var(--hot);font-weight:700;animation:pop .3s}
@keyframes pop{from{transform:scale(.4)}to{transform:scale(1)}}
.choices.picked .choice[aria-pressed="false"]{opacity:.6}
.choice b{font:600 17px var(--ui);display:block}
.choice small{color:var(--soft);font-size:14px;display:block;margin-top:2px}
.role-tag{font:600 11px var(--ui);letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.role-tag.teaching{background:var(--teach-soft);color:var(--teach)}
.role-tag.ta{background:var(--ta-soft);color:var(--ta)}

.known{border:1px dashed var(--rule-2);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;font-size:15px;background:var(--paper)}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.checks li{display:flex;gap:12px;align-items:flex-start;padding:10px 14px;border-top:1px solid var(--rule);font-size:15px}
.checks li:first-child{border-top:0}
.checks li.missing,.checks li.problem{background:var(--hot-soft)}
.checks p{margin:3px 0 0;font:14.5px/1.4 var(--prose);color:var(--soft)}
.checks .ev{font-style:italic}
.ck{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--ui);margin-top:1px}
.ck.ok{background:var(--teach-soft);color:var(--teach)} .ck.no{background:var(--hot);color:#fff} .ck.na{background:var(--rule);color:var(--soft)}
.tag.req{background:var(--hot);color:#fff}
.agentnow{margin:12px 0 0;font:16px/1.4 var(--prose);color:var(--ink)}
/* grade breakdown */
.wrow{display:grid;grid-template-columns:minmax(0,1fr) 92px 150px auto 34px;gap:8px;align-items:center}
.wrow .gfor{white-space:nowrap}
.wrow .seg.gfor button{padding:8px 11px}
.seg.gfor button[data-v="0"][aria-pressed="true"],.gtogs .seg button[data-v="0"][aria-pressed="true"]{background:var(--rule);color:var(--ink)}  /* the usual way stays quiet; "for completion" is the one that stands out */
.wcomp{margin:8px 0 0;font-size:14px;color:var(--soft)}
.gtogs{display:grid;gap:8px;margin-top:8px}
.gtogs .grow{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.gtogs .gname{font-weight:600}
.wcomp:empty{display:none}
.wcomp .says{display:block;margin:3px 0;font-style:italic;color:var(--ink);quotes:"“" "”"}  /* the syllabus's own sentence, one to a line */
.gcred{display:flex;gap:6px 10px;align-items:center;flex-wrap:wrap}  /* how a row graded for completion gives its credit: asked under the row, once it is marked */
.wrow .gcred{grid-column:1 / -1}
.gtogs .grow .gcred{flex-basis:100%}
.gcred .ghint{font-size:13px}
.wrow input,.wrow select{padding:9px 10px;border:1px solid var(--rule-2);border-radius:8px;background:var(--panel);width:100%}
.wrow .pct{position:relative}
.wrow .pct::after{content:"%";position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--faint)}
/* the midterm block (a syllabus of wording 4): one weight for the midterms, set with − and +, and how they count */
.mblock{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--rule);border-radius:10px}
.mbhead{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.mbhead .wfix{font-weight:600}
.mblock .stepper output{min-width:92px;text-align:center}
.mblock p{margin:0}
.wrow .wshare::after{content:none}
.wrow .wshare output{display:block;padding:9px 10px;color:var(--soft)}
.ranks{display:grid;gap:6px}
.rank{display:flex;gap:12px;align-items:center;justify-content:space-between;max-width:420px}
.x{border:0;background:none;color:var(--faint);font-size:18px;cursor:pointer;border-radius:6px}
.x:hover{color:var(--bad);background:var(--hot-soft)}
.bar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--rule)}
.bar i{display:block;height:100%}
.bar .p{background:var(--ink)} .bar .u{background:var(--faint)}
.meter{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;font-variant-numeric:tabular-nums}
.meter b{font-weight:700}
.ok-c{color:var(--teach)} .warn-c{color:var(--warn)} .bad-c{color:var(--bad)}
.addrow{display:flex;gap:6px;flex-wrap:wrap}

/* packages */
.pkg{border:1px solid var(--rule-2);border-radius:12px;padding:14px 16px;background:var(--panel)}
.pkg[data-on="true"]{box-shadow:inset 0 0 0 2px var(--ink)}
.pkg header{display:flex;gap:12px;align-items:flex-start}
.pkg header input{margin-top:5px;width:18px;height:18px;accent-color:var(--hot)}
.pkg h3{margin:0;font:600 18px var(--ui)}
.pkg .tags{display:flex;gap:6px;margin-top:2px}
.tag{font:600 10.5px var(--ui);letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:1px 7px;background:var(--rule);color:var(--soft)}
.tag.rec{background:var(--teach-soft);color:var(--teach)} .tag.req{background:var(--ink);color:var(--paper)}
.pkg details{margin-top:8px}
.pkg summary{cursor:pointer;color:var(--soft);font-size:14px}
.clause{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--rule);font-size:14.5px}
.clause:first-of-type{border-top:0}
.clause p{margin:2px 0 0;color:var(--soft);font:14px/1.45 var(--prose)}

/* app shell */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:12px 24px;padding-top:calc(12px + env(safe-area-inset-top,0px));background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.topbar select{border:1px solid var(--rule-2);border-radius:999px;background:var(--panel);padding:7px 12px;font-weight:600}
.tabs{display:flex;gap:4px}
.tabs button{border:0;background:none;padding:7px 12px;border-radius:999px;cursor:pointer;color:var(--soft);font-weight:600}
.tabs button[aria-current="page"]{background:var(--ink);color:var(--paper)}
main{padding:24px;max-width:1280px;margin:0 auto}

/* home: one question from the checklist */
.home{min-height:calc(100vh - 70px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px 16px 80px}
.nextcard{width:min(680px,100%);background:var(--panel);border:1px solid var(--rule);border-radius:18px;padding:30px 32px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.nextcard.enter{animation:rise .5s cubic-bezier(.22,.61,.36,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.nextcard h1{font:600 clamp(26px,3.4vw,34px)/1.15 var(--word);margin:0;text-wrap:balance}
.nextcard .sub{font:400 17px/1.45 var(--prose);color:var(--soft);margin:-4px 0 0}
.nextcard .answer{width:100%;border:1px solid var(--rule-2);border-radius:12px;padding:12px 14px;font:400 17px/1.45 var(--prose);background:var(--paper);resize:vertical}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.parts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;counter-reset:none}
.part{width:100%;text-align:left;border:1px solid var(--rule-2);background:var(--panel);border-radius:10px;padding:11px 14px;font:500 16px/1.35 var(--prose);cursor:pointer}
.part:hover,.part:focus-visible{border-color:var(--ink);background:var(--paper)}
.parts li.lv1 .part{font-weight:600;font-variant:small-caps;letter-spacing:.02em}
.parts li.lv2{padding-left:22px}
.parts li.lv2 .part{padding:8px 12px;font-size:15px}
.paper .numsec{text-align:center;font-variant:small-caps;font-weight:400;font-size:16px}
.paper .thm{margin:6px 0}
.row.small{font-size:14px;gap:16px}
.working{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--soft)}
.working .line{height:3px;background:var(--rule);border-radius:2px;overflow:hidden;position:relative}
.working .line i{position:absolute;inset:0 auto 0 0;width:30%;background:var(--ink);border-radius:2px;animation:slide 1.4s ease-in-out infinite}
@keyframes slide{0%{left:-30%}100%{left:100%}}
#receipt{width:min(680px,100%)}
.result{text-align:left;background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:12px 16px;display:flex;gap:12px;align-items:center}
.result .rtitle{font:500 17px var(--prose);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file.draft{color:var(--soft);font-style:italic}
.file.draft::after{content:" · draft";font:600 10px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--warn);font-style:normal}
.bigbox{position:relative;display:flex;align-items:flex-end;gap:8px;background:var(--panel);border:1px solid var(--rule-2);border-radius:18px;padding:10px 10px 10px 18px}
.bigbox textarea{flex:1;border:0;background:transparent;resize:none;min-height:44px;max-height:220px;font:400 17px/1.45 var(--prose);padding:6px 0;outline:none}
.send{width:40px;height:40px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);cursor:pointer;display:grid;place-items:center;flex:none}
.send[disabled]{opacity:.35}
@media (prefers-reduced-motion:reduce){.nextcard.enter,.working .line i{animation:none}.slide-in,.slide-back{animation:none}}

/* calendar: hub + one week per line */
.hub{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;margin-bottom:18px}
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow)}
.panel h2{font:600 24px/1.15 var(--word);margin:0}
.facts{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin-top:12px;font-size:15px}
.facts dt{color:var(--soft)} .facts dd{margin:0;font-variant-numeric:tabular-nums}
.weekrow{display:grid;grid-template-columns:170px repeat(5,minmax(0,1fr));gap:0;background:var(--panel);border:1px solid var(--rule);border-radius:14px;margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow)}
.weekrow.now{box-shadow:inset 3px 0 0 var(--hot),var(--shadow)}
.wk{padding:12px 14px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:4px}
.wk b{font:600 17px var(--word)} .wk span{font-size:12.5px;color:var(--soft);font-variant-numeric:tabular-nums}
.wk textarea{border:0;background:transparent;resize:none;font:14px/1.35 var(--prose);color:var(--ink);padding:0;min-height:52px}
.wk textarea:focus{outline:1px dashed var(--rule-2)}
.day{padding:10px 10px 14px;border-right:1px solid var(--rule);min-height:220px;display:flex;flex-direction:column;gap:6px;position:relative}
.day:last-child{border-right:0}
.day.off{background:repeating-linear-gradient(135deg,transparent 0 8px,var(--rule) 8px 9px)}
.day.nomeet{background:color-mix(in srgb,var(--paper) 55%,var(--panel))}
.day.today{box-shadow:inset 0 -3px 0 var(--hot)}
.dhead{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--soft);font-variant-numeric:tabular-nums}
.dhead b{color:var(--ink);font-weight:700}
.badge{font:700 10.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;border-radius:4px;padding:1px 6px}
.badges{display:inline-flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.badge.exam{background:var(--hot);color:#fff}.badge.hol{background:var(--rule);color:var(--soft)}.badge.cls{background:var(--teach-soft);color:var(--teach)}
.folder{display:flex;flex-direction:column;gap:2px}
.marks{display:flex;flex-direction:column;gap:3px}
.mk{display:flex;align-items:center;gap:5px;font:600 12px/1.25 var(--ui)}
.mk svg{width:15px;height:15px;flex:none}
.mk.assign{color:var(--k-homework)}
.mk.assign.planned{font-style:italic;opacity:.75}
button.mk{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
button.mk.planned{opacity:.9;font-style:italic;border:1px dashed currentColor;border-radius:8px;padding:3px 7px;width:fit-content;max-width:100%}
button.mk.planned:hover,button.mk.planned:focus{opacity:1;background:var(--paper);font-style:normal}
button.mk.hwdrag{cursor:grab;touch-action:pan-y}
.hwdragging,.hwdragging *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.day.hwno{opacity:.45}
.day.hwdrop{box-shadow:inset 0 0 0 2px var(--k-homework)}
button.mk.notes{color:var(--k-notes)}button.mk[data-open]:hover{text-decoration:underline}
.mk.due{color:var(--hot)}
.mk.quiz{color:var(--k-quiz)} .mk.exam{color:var(--k-exam)} .mk.other{color:var(--soft)}
.fhead{display:flex;align-items:center;gap:5px;font:700 11px var(--ui);letter-spacing:.08em;text-transform:uppercase}
.fhead svg{width:16px;height:16px;flex:none}
.file{border:0;background:none;text-align:left;padding:2px 0 2px 21px;font:14px/1.3 var(--prose);cursor:pointer;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file:hover{text-decoration:underline}
.file svg,.folder svg{width:16px;height:16px;flex:none;vertical-align:-3px}
.drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:34px 16px;border:1.5px dashed var(--rule-2);border-radius:14px;background:var(--paper);cursor:pointer;text-align:center}
.drop:hover,.drop.over{border-color:var(--ink);background:var(--panel)}
.drop b{font:600 17px var(--ui)}
.sfiles{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.sfiles li{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.sfiles .file{padding-left:0}
.dg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}
.dg section.wide{grid-column:1/-1}
.dg ul,.dg ol{margin:4px 0 0;padding-left:20px;font:15px/1.45 var(--prose)}
.dg p{margin:4px 0 0;font:15px/1.45 var(--prose)}
.wklist li::marker{font:600 13px var(--ui);color:var(--soft)}
.weekplan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
@media (max-width:640px){.dg,.weekplan{grid-template-columns:minmax(0,1fr)}}
.addday{position:absolute;right:6px;bottom:6px;width:24px;height:24px;border-radius:50%;border:1px dashed var(--rule-2);background:var(--panel);color:var(--soft);cursor:pointer;opacity:0;transition:opacity .15s}
.day:hover .addday,.addday:focus{opacity:1}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin:6px 0 14px;font-size:13px;color:var(--soft)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend svg{width:16px;height:16px}

/* document viewer */
#overlay:empty{display:none}
.ov{position:fixed;inset:0;z-index:20;background:rgba(20,15,12,.5);display:flex;justify-content:center;align-items:flex-start;padding:24px 16px;overflow:auto}
.sheet{width:100%;max-width:1180px;background:var(--panel);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.sheet-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--rule)}
.sheet-head input.title{flex:1;min-width:200px;border:0;background:transparent;font:600 20px var(--word);padding:4px}
.seg{display:inline-flex;border:1px solid var(--rule-2);border-radius:999px;overflow:hidden}
.seg button{border:0;background:var(--panel);padding:6px 12px;cursor:pointer;font-weight:600;font-size:13px;color:var(--soft)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.sheet-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.sheet-side{border-left:1px solid var(--rule);padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.srcnote{margin:0;padding:10px 16px;font-size:13.5px;line-height:1.45;color:var(--soft);border-bottom:1px solid var(--rule)}
textarea.src{width:100%;min-height:70vh;border:0;padding:16px;font:12.5px/1.55 var(--mono);background:var(--paper);resize:vertical;white-space:pre;tab-size:2}
.paperwrap{background:#E4DED3;padding:18px;overflow:auto;max-height:78vh}
@media (prefers-color-scheme:dark){.paperwrap{background:#0E0A09}}
.paper{background:#fffefb;color:#16181c;max-width:680px;margin:0 auto;padding:44px 56px 40px;box-shadow:0 2px 10px rgba(0,0,0,.18);font:15px/1.5 var(--paperserif);min-height:500px;position:relative}
.paper .ph{display:flex;justify-content:space-between;font-size:12.5px;border-bottom:.5px solid #999;padding-bottom:3px;margin-bottom:22px;color:#333}
.paper .tblock{text-align:center;margin:4px auto 10px;max-width:5in}
.paper .tblock .u{font-variant:small-caps;font-size:23px}
.paper .tblock .c{font-variant:small-caps;font-size:15px;margin-top:6px;line-height:1.35}
.paper .tblock hr{border:0;border-top:.8px solid #333;margin:8px 0 0}
.paper .sc{font-variant:small-caps}.paper .center{text-align:center}.paper .right{text-align:right}
.paper h3{font:600 17px var(--paperserif);margin:18px 0 6px}.paper h4{font:600 15px var(--paperserif);margin:14px 0 4px}
.paper ul,.paper ol{margin:6px 0;padding-left:26px}
.paper table{border-collapse:collapse;margin:6px auto;font-size:14px}
.paper td,.paper th{padding:3px 10px;vertical-align:top;text-align:left}
.paper table.ruled td{border:1px solid #555}
.paper .gap-s{height:6px}.paper .gap-m{height:12px}.paper .gap-l{height:20px}.paper .pbreak{height:8px}
.paper .newpage{border-top:1px dashed #b7b7b7;margin:26px -56px 22px}
.paper .fig{border:1px dashed #aaa;color:#777;font:12px var(--mono);padding:14px;text-align:center;margin:8px auto;max-width:360px}
.paper .solution{border-left:3px solid #7a3fb0;background:#f6f0fb;padding:6px 10px;margin:6px 0}
.paper .solution::before{content:"Solution";display:block;font:700 10px var(--ui);text-transform:uppercase;letter-spacing:.08em;color:#7a3fb0}
.paper .instblock{border:1px solid #c9b3e3;background:#faf6fe;border-radius:4px;padding:6px 10px;margin:8px 0}
.paper .instblock::before{content:"Instructor only";display:block;font:700 10px var(--ui);text-transform:uppercase;letter-spacing:.08em;color:#7a3fb0}
.paper .blank{display:inline-block;border-bottom:1px solid #222;min-width:1.5in;height:1em}
.paper .mathblock{overflow-x:auto;margin:6px 0}
.paper .foot{position:absolute;right:56px;bottom:14px;font-size:12px;color:#444}
.paper code{font:12.5px var(--mono)} .paper a{color:#1f4bb8}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;font-size:14px;z-index:40;box-shadow:var(--shadow)}
.menu{position:absolute;z-index:30;background:var(--panel);border:1px solid var(--rule-2);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;min-width:210px}
.menu button{border:0;background:none;text-align:left;padding:8px 10px;border-radius:8px;cursor:pointer;display:flex;gap:8px;align-items:center}
.menu button:hover{background:var(--paper)}
.menu .menu-sep{height:1px;background:var(--rule-2);margin:4px 2px}.menu .menu-head{font:600 11px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);padding:4px 10px 2px}
.menu svg{width:16px;height:16px}

@media (max-width:980px){
  .hub,.sheet-body{grid-template-columns:minmax(0,1fr)}
  .sheet-side{border-left:0;border-top:1px solid var(--rule)}
  .weekrow{grid-template-columns:minmax(0,1fr)}
  .wk{border-right:0;border-bottom:1px solid var(--rule)}
  .day{border-right:0;border-bottom:1px solid var(--rule);min-height:0}
  .day.nomeet:not(:has(.file)){display:none}
}
@media (max-width:640px){
  .grid2,.grid3{grid-template-columns:minmax(0,1fr)}
  .wrow{grid-template-columns:minmax(0,1fr) 80px 34px}
  .wrow select{grid-column:1 / span 2;grid-row:2}
  .wrow .x{grid-column:3;grid-row:2}
  .wrow .gfor{grid-column:1 / -1;grid-row:3;justify-self:start}
  .wrow .seg.gfor button,.gtogs .seg button,.gcred .seg button{min-height:44px}
  .wrow .gcred{grid-row:4}
  .gtogs .grow .gcred{flex-basis:auto}  /* the row is a column here: the credit sits under the choice at its own height */
  .gtogs .grow{flex-direction:column;align-items:flex-start;gap:6px}  /* every row the same: the name, then its choice under it */
  .wrow .gfor:empty{display:none}
  .wrow + .wrow{margin-top:6px;padding-top:12px;border-top:1px solid var(--rule)}
  .card{padding:22px 18px}
  main{padding:16px}
  .topbar{padding-inline:16px;flex-wrap:wrap}
  .paper{padding:26px 20px}.paper .newpage{margin-inline:-20px}
}

/* instructor protection: three rules on top, Standard / Maximum at the bottom */
.prules{display:grid;gap:10px}
.prule{border:1px solid var(--rule-2);border-radius:12px;padding:12px 16px;background:var(--panel)}
.prule h3{margin:0 0 6px;font:600 17px var(--ui)}
.prule p{margin:4px 0 0;font:15px/1.45 var(--prose)}
.prule .tag{margin-right:4px;vertical-align:1px}
.tag.hot{background:var(--hot);color:#fff}
.tag.ok{background:var(--teach-soft);color:var(--teach)}
/* the syllabus report card */
.rsec{border:1px solid var(--rule-2);border-radius:12px;padding:14px 16px;background:var(--panel)}
.rsec>header{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.rsec h3{margin:0;font:600 18px var(--ui)}
.optin{display:flex;gap:10px;align-items:flex-start;margin-top:12px;cursor:pointer}
.optin input{margin-top:4px;width:18px;height:18px;accent-color:var(--hot);flex:none}
.optin b{font:600 16px var(--ui);display:block} .optin small{color:var(--soft);font-size:14px;display:block}
.changes summary{cursor:pointer;font:600 15px var(--ui);margin:10px 0 8px}
@media (max-width:560px){.ppick{grid-template-columns:1fr}}

/* package cards: the unrami landing page's plans (square, heavy rule, offset shadow; dashed when not offered) */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:4px 0 8px}
.plans.two{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px}
.plan{font:inherit;text-align:left;color:var(--ink);background:var(--panel);border:3px solid var(--ink);border-radius:0;box-shadow:6px 6px 0 var(--ink);
  padding:22px 18px 18px;min-height:230px;display:flex;flex-direction:column;cursor:pointer;transition:transform .12s,box-shadow .12s}
.plan:hover{transform:translate(-1px,-1px);box-shadow:7px 7px 0 var(--ink)}
.plan[aria-pressed="true"]{background:var(--hot-soft);border-color:var(--hot);box-shadow:6px 6px 0 var(--hot)}
.plan .ptag{margin:0 0 12px;font:700 12px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.plan .pprice,.plan .pslot{height:62px;margin:0 0 14px}
.plan .pprice{font:400 clamp(24px,2.6vw,30px)/1 'Archivo Black',system-ui,sans-serif;letter-spacing:-.02em}
.plan .pprice small{display:block;margin:6px 0 0;font:500 14px var(--ui);letter-spacing:0;color:var(--soft)}
.plan .pnote{margin:0;font:14px/1.5 var(--prose);color:var(--soft);flex:1}
.plan .pick{margin-top:14px;align-self:flex-start;font:700 12px var(--ui);letter-spacing:.12em;text-transform:uppercase;border:2px solid var(--ink);padding:4px 10px}
.plan[aria-pressed="true"] .pick{background:var(--hot);border-color:var(--hot);color:#fff}
.plan.nope{background:transparent;box-shadow:none;border:3px dashed var(--ink);cursor:default}
.plan.nope:hover{transform:none}
.plan .pslot{display:flex;align-items:center}
.plan .stamp{display:inline-block;font:400 15px 'Archivo Black',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;border:3px solid var(--ink);padding:5px 10px;transform:rotate(-4deg);white-space:nowrap}
details.rsec>summary{display:flex;gap:12px;align-items:flex-start;cursor:pointer;list-style:none}
details.rsec>summary::-webkit-details-marker{display:none}
@media (max-width:760px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}.plan{min-height:0}}
@media (max-width:420px){.plans,.plans.two{grid-template-columns:1fr}}

/* the desk's rules */
.rules .rule{list-style:none}.rules .rhead{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}.rules .rule p{margin:4px 0 0;font-size:14.5px}.rules .rule .ev{color:var(--muted);font-style:italic}

/* what the desk read: collapsible sections */
.dgsec{border-top:1px solid var(--line);padding:6px 0}.dgsec summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}.dgsec summary::before{content:"▸";font-size:12px;color:var(--muted)}.dgsec[open] summary::before{content:"▾"}.dgsec ul,.dgsec ol,.dgsec p{margin:6px 0 0 18px}

.dgl{list-style:none;padding:0;margin:6px 0 0}.dgl li{padding:3px 0}.dgl li.row{gap:6px;flex-wrap:wrap}.dgl .inp.sm{padding:4px 8px;font-size:14px}.dgl .pct .inp.sm{width:70px}.wklist.dgl{list-style:decimal;padding-left:26px}.wklist.dgl input{width:100%}

/* editable facts in the wizard's preview */
.paper .hqv{border-bottom:1.5px dotted var(--hot);cursor:pointer;padding:0 1px}.paper .hqv:hover,.paper .hqv:focus{background:color-mix(in srgb,var(--hot) 12%,transparent);outline:none}.paper .hqv input{font:inherit}

.pubplan{list-style:none;padding:0;margin:0}.pubplan li{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--line);font-size:14.5px}.pubplan li svg{width:18px;height:18px;flex:none}

/* how do you prepare? */
.personas{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:8px}
.persona{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--rule);border-radius:12px;cursor:pointer;font-size:14px}
.persona:hover{border-color:var(--ink)}.persona.on{border-color:var(--hot);background:var(--hot-soft)}
.persona input{position:absolute;opacity:0;width:0;height:0}.persona span{color:var(--soft);font-size:13px;line-height:1.35}
.mi{font-size:15px}.mi mjx-container{font-size:110%}
table.rubric{width:100%;border-collapse:collapse;font-size:14px}table.rubric td,table.rubric th{padding:4px 6px;border-top:1px solid var(--line);text-align:left;vertical-align:top}

.choices.designs .choice{align-items:flex-start}.choices.designs .choice small{white-space:normal;line-height:1.35}

/* the Problems tab: the tree on the left, the problem on the right */
.bankpage{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:18px;padding:18px 22px;align-items:start}
.banknav{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:12px}
.banknav details.book{margin-top:8px}.banknav details.book>summary{cursor:pointer;padding:6px 4px;font-size:15px}
.banknav details.bsec{margin-left:10px}.banknav details.bsec>summary{cursor:pointer;padding:4px 4px;font-size:14px;color:var(--ink-2)}
.banknav .plist{list-style:none;margin:2px 0 4px 8px;padding:0}
.banknav .pitem{display:flex;gap:6px;align-items:center;width:100%;text-align:left;border:0;background:none;padding:4px 8px;border-radius:8px;font:13.5px var(--ui);cursor:pointer;color:inherit}
.banknav .pitem:hover{background:var(--paper)}.banknav .pitem.on{background:color-mix(in srgb,var(--hot) 14%,transparent);font-weight:600}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#bbb;flex:none}.dot.easy{background:#4c9a5b}.dot.medium{background:#d9a13b}.dot.hard{background:#c8473f}
.bankview{min-width:0}.pcard{background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:18px 22px}
.pcard .pstmt{font-size:16px}.pcard .pfig svg{max-width:360px}.pcard .tag.on{background:var(--hot);color:#fff}.pcard .pver.on{background:var(--hot);color:#fff;border-color:var(--hot)}
.tag.easy{background:#e3f2e6;color:#2b6b3a}.tag.medium{background:#fbf0d9;color:#8a5b0c}.tag.hard{background:#fae0de;color:#8f2a24}
/* the modular set: each problem in the preview carries a menu */
.paper .pblock{position:relative;border-radius:6px;margin:0 -12px;padding:2px 12px}
.paper .pblock:hover{background:color-mix(in srgb,var(--hot) 6%,transparent)}
.paper .pbtn{position:absolute;left:-46px;top:2px;border:1px solid var(--rule-2);background:var(--panel);border-radius:999px;padding:2px 7px;font:11px var(--ui);cursor:pointer;display:flex;gap:4px;align-items:center;opacity:.4;white-space:nowrap}
.paper .pblock:hover .pbtn,.paper .pbtn:focus{opacity:1}
.prow .pmenu{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:center;font-size:14px;text-align:left;max-width:100%}
.prow .pbrief{flex-basis:100%;min-width:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* an uploaded sheet's problems, as the sheet names them, once they are in the bank */
.sheetlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sheetlist li{display:flex;flex-direction:column;gap:2px;min-width:0}
.sheetlist .sbrief{font:14px/1.4 var(--prose);color:var(--soft);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sheetlist .shown{font-size:12.5px;color:var(--soft)}.sheetlist .shown.matched{color:var(--ok,#2b6b3a)}.sheetlist .shown.new{color:var(--ink)}  /* new is not a failure: plain ink, not grey (review b2) */
.sheetlist summary{display:flex;flex-direction:column;gap:2px;cursor:pointer;list-style:none;min-width:0}.sheetlist summary::-webkit-details-marker{display:none}
.sheetlist summary b::after{content:" ▸";color:var(--soft);font-weight:400}.sheetlist details[open] summary b::after{content:" ▾"}
.sheetlist details[open] .sbrief{display:none}
.sheetlist .skey{font:14px/1.45 var(--prose);color:var(--ink);padding:6px 0 2px 10px;border-left:2px solid var(--rule-2);margin-top:4px;overflow-wrap:anywhere}
.sheetlist .skey p{margin:0 0 6px}.sheetlist .skey ol{margin:0 0 6px;padding-left:20px}
.sheettext{padding:20px 24px}.sheettext pre{white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.5 var(--prose);color:var(--ink);margin:12px 0 0}
.menu.picker .pkbrief{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.menu.picker{min-width:380px;max-width:460px;padding:8px}.menu.picker .pklist{max-height:50vh;overflow:auto;margin-top:6px}
.menu.picker button{align-items:flex-start;line-height:1.3}
@media (max-width:980px){.bankpage{grid-template-columns:minmax(0,1fr)}.banknav{position:static;max-height:40vh}}

/* the lecture skeleton */
.sksec{border:1px solid var(--rule);border-radius:10px;padding:8px 10px;margin-bottom:6px}
.skitem{display:flex;gap:8px;align-items:baseline;padding:3px 4px;border-radius:6px;font-size:14px;cursor:pointer}
.skitem:hover{background:var(--paper)}.skitem.on{background:color-mix(in srgb,var(--hot) 8%,transparent)}
.skitem.heading{font-weight:600;margin-top:4px}.skitem.covered .sktitle,.skitem.skipped .sktitle{color:var(--ink-2);text-decoration:line-through}
/* the last class's unfinished items: first, ticked, greyed, locked (jt, 2026-10-01) */
.skcarry{border:1px dashed var(--rule-2);border-radius:10px;padding:8px 10px;margin-bottom:6px;background:var(--paper)}
.skcarry .label{margin-bottom:2px}
.skitem.locked{opacity:.55;cursor:not-allowed}.skitem.locked:hover{background:transparent}.skitem.locked input{cursor:not-allowed}
/* starting a day's notes: upload your own, write with HQ, or skip the class */
.sheet.nchoice{max-width:620px;margin-top:8vh;padding:20px 22px;overflow:visible;display:flex;flex-direction:column;gap:14px}
.nchead{display:flex;align-items:baseline;gap:12px}.nchead h2{margin:0;font-size:21px;flex:1;min-width:0}
.ncbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ncbtns .choice small{display:block;margin-top:4px;color:var(--ink-2)}
@media (max-width:560px){.ncbtns{grid-template-columns:1fr}}
.ncfoot{display:flex;justify-content:flex-end}.ncfoot .link{font-size:13px;color:var(--ink-2)}
.mk.skip{color:var(--ink-2);font-style:italic}.link.unskip{font-size:12px;padding:0 4px}
/* the after-class popup: did you finish the notes? */
.sheet.cover{max-width:560px;margin-top:8vh;padding:20px 22px;overflow:visible}
.sheet.cover h2{margin:0 0 12px;font-size:21px;line-height:1.3}
.sheet.cover .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cvlist{list-style:none;margin:10px 0 12px;padding:0;display:flex;flex-direction:column;gap:4px;max-height:55vh;overflow:auto}
.cvlist .cvhead{font-weight:600;margin-top:6px}
.cvit{width:100%;display:flex;gap:8px;align-items:baseline;text-align:left;border:1px solid var(--rule-2);background:var(--panel);color:var(--ink);border-radius:8px;padding:8px 12px;font:inherit;font-size:15px;cursor:pointer}
.cvit:hover,.cvit:focus-visible{border-color:var(--ink);background:var(--paper)}
.skkind{font:600 11px var(--ui);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);min-width:86px}
.skmeta{font-size:12.5px;margin-left:auto;white-space:nowrap}
.skimp{font:600 10.5px var(--ui);text-transform:uppercase;letter-spacing:.05em;padding:1px 6px;border-radius:999px;background:var(--paper);color:var(--ink-2)}.skimp.i1{background:#e3f2e6;color:#2b6b3a}.skimp.i3{opacity:.6}
.skrec{display:flex;gap:8px;align-items:baseline;padding:8px 10px;border:1px solid var(--rule);border-radius:10px;cursor:pointer;font-size:14px}.skrec.on{border-color:var(--hot);background:color-mix(in srgb,var(--hot) 8%,transparent)}
.skseq{margin:0;padding-left:22px;max-height:34vh;overflow:auto}.skseq li{display:flex;gap:8px;align-items:baseline;padding:3px 4px;font-size:14px}.skseq li.heading{font-weight:600;margin-top:4px}.skseq .link{padding:0 4px}

/* upload walkthrough: the note under a field. Muted: from your syllabus. Hot: our recommendation. Green: already the good option. */
.pv,.field>.pv{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 7px;margin:5px 0 0;font:400 13px/1.4 var(--ui);color:var(--soft);text-transform:none;letter-spacing:0}
.pv>b{font:600 10.5px var(--ui);letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:1px 7px;background:var(--rule);color:var(--soft);white-space:nowrap}
.pv-rec>b{background:var(--hot-soft);color:var(--hot)}
.pv-good>b{background:var(--teach-soft);color:var(--teach)}
.pv .pvt{color:var(--ink);font-weight:600}
.pv q{font:italic 14px/1.4 var(--prose);color:var(--soft)}
.pv i{font:italic 14px/1.4 var(--prose)}
.pv .must{font:600 10.5px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--hot)}
.pv .pvuse{font-size:13px}
.pv.used>b{background:var(--teach-soft);color:var(--teach)}
.clause .pv{margin-top:3px}
.pv .pvl{font-weight:600;color:var(--ink);min-width:118px}
.pvlist{display:flex;flex-direction:column;gap:2px;margin-top:-4px}
.sandbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:10px 14px;border:1.5px dashed var(--hot);border-radius:12px;font-size:14px;background:var(--panel)}
.conn{display:block;width:min(680px,100%);margin:0}.conn>summary{cursor:pointer}.conn-body{display:flex;flex-direction:column;gap:10px;margin-top:10px}.conn .stack{display:flex;flex-direction:column;gap:8px}
.sandbar.quiet{border-style:solid;border-color:var(--rule);background:transparent}

/* ================================================================== designing an exam, a quiz, a worksheet (assess.js)
   The landing's and the finder's language inside HQ's paper: panels with a mono bar, atom chips (skill teal, prerequisite
   ochre), one red accent, motion only where something changed. */
:root{--a-step:#2D5DA8;--a-tool:#0F766E;--a-check:#A16207;--a-step-soft:#E3EAF6;--a-tool-soft:#DDF0EC;--a-check-soft:#F5ECD9;--a-easy:#6BAF7B;--a-medium:#D9A441;--a-hard:#C8453C}
@media (prefers-color-scheme:dark){:root{--a-step:#7EA6F2;--a-tool:#3CC4AE;--a-check:#E2B455;--a-step-soft:#17233A;--a-tool-soft:#0F2A27;--a-check-soft:#2E2412;--a-easy:#4FA56A;--a-medium:#C9973A;--a-hard:#E0605A}}
.wiz button:active:not([disabled]),.amenu-pop button:active{transform:translateY(1px) scale(.98)}
.wiz .go,.wiz .ghost,.wiz .choice{transition:transform .08s,filter .15s,border-color .15s,box-shadow .2s,opacity .2s}
.wiz-stage.railed{display:flex;justify-content:center;align-items:flex-start;gap:22px;overflow:visible;overflow-x:clip}
.wiz-stage.railed>.card{flex:1 1 auto;min-width:0}
.wz-rail{flex:0 0 280px;position:sticky;top:16px;background:var(--panel);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.rl-head{display:flex;align-items:center;gap:10px}
.rl-kind{display:inline-flex;align-items:center;gap:8px;font:600 11px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.rl-kind svg{width:20px;height:20px}
.rl-overall{margin-left:auto;font:700 26px/1 var(--ui);font-variant-numeric:tabular-nums;padding:6px 10px;border-radius:10px;background:var(--paper)}
.rl-overall.ok{color:var(--teach)}.rl-overall.mid{color:var(--warn)}.rl-overall.low{color:var(--bad)}
.rl-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0}
.rl-facts dt{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding-top:2px}
.rl-facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.rl-sep{height:1px;background:var(--rule)}
.rl-line{font-variant-numeric:tabular-nums}
.rl-scores{display:grid;gap:6px}
.rl-score{display:grid;grid-template-columns:92px minmax(0,1fr) 26px;gap:8px;align-items:center;font-size:13px}
.rl-score b{text-align:right;font-variant-numeric:tabular-nums}
.rl-bar,.abar{height:6px;border-radius:3px;background:var(--rule);overflow:hidden;display:block}
.rl-bar i,.abar i{display:block;height:100%;border-radius:3px;transition:width .5s cubic-bezier(.22,.61,.36,1)}
.rl-bar i.ok,.abar i.ok{background:var(--teach)}.rl-bar i.mid,.abar i.mid{background:var(--a-medium)}.rl-bar i.low,.abar i.low{background:var(--hot)}
.rl-bands{display:grid;gap:4px}
.rl-bl{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:center;font:500 11px var(--mono);color:var(--faint)}
.bbar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--rule)}
.bbar i,.rl-legend i{display:block;height:100%;transition:width .5s cubic-bezier(.22,.61,.36,1)}
.b-easy{background:var(--a-easy)}.b-medium{background:var(--a-medium)}.b-hard{background:var(--a-hard)}
.rl-legend{display:flex;flex-wrap:wrap;gap:4px 10px;font:500 11px var(--mono);color:var(--faint)}
.rl-legend span{display:inline-flex;align-items:center;gap:4px}.rl-legend i{width:8px;height:8px;border-radius:2px}
.rl-warn{margin:0;color:var(--warn);font-weight:600}.rl-ok{margin:0;color:var(--teach);font-weight:600}
.rl-src{margin:0;font:500 11px var(--mono);color:var(--faint)}
@media (max-width:980px){
  .wiz-stage.railed{flex-direction:column;align-items:stretch;padding-top:14px}
  .wz-rail{position:static;flex:none;order:-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 18px;padding:12px 14px}
  .wz-rail .rl-head,.wz-rail .rl-sep,.wz-rail .rl-line,.wz-rail .rl-src,.wz-rail .rl-warn,.wz-rail .rl-ok{grid-column:1/-1}
}
@media (max-width:620px){.wz-rail{grid-template-columns:minmax(0,1fr)}.wz-rail .rl-bands{display:none}.wiz .card{padding:20px 16px}.wiz .card h2{font-size:23px}.wiz-top{padding:14px 16px;gap:10px;flex-wrap:wrap}}

.aworking{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--soft)}
.aworking .line{width:64px;height:3px;background:var(--rule);border-radius:2px;overflow:hidden;position:relative;display:inline-block}
.aworking .line i{position:absolute;inset:0 auto 0 0;width:40%;background:var(--hot);border-radius:2px;animation:aslide 1.2s ease-in-out infinite}
@keyframes aslide{from{left:-40%}to{left:100%}}
.arec{margin:0;font-size:14.5px;line-height:1.45}
.arec .tag{vertical-align:1px}
.achoices button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.awhen input[type=date]{min-height:42px}

.apanel{border:1px solid var(--rule);border-radius:14px;background:var(--panel);overflow:hidden;transition:opacity .2s}
.apanel.loading{opacity:.55}
.apanel-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--rule);font:500 12px var(--mono);color:var(--soft);background:var(--paper)}
.apanel-bar .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apanel-bar .state{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:var(--hot-soft);color:var(--hot);white-space:nowrap}
.apanel-body{padding:14px;display:flex;flex-direction:column;gap:10px}
.aweeks{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.aweeks li{display:flex;flex-wrap:wrap;gap:4px 12px;padding:6px 0;border-top:1px solid var(--rule);font-size:14.5px}
.aweeks li:first-child{border-top:0}
.aweeks li b{min-width:62px}
.atested{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.atested li{display:flex;gap:8px;align-items:center;font-size:14.5px}.atested svg{width:18px;height:18px;flex:none}
.atested .muted{margin-left:auto;font-size:13px}

.achips{display:flex;flex-wrap:wrap;gap:5px}
.tok{display:inline-flex;align-items:center;gap:6px;font:600 11.5px/1 var(--mono);letter-spacing:.01em;padding:6px 8px;border-radius:6px;border:1px solid transparent;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tok b{font-weight:700;font-size:10.5px}
.tok.tool{background:var(--a-tool-soft);color:var(--a-tool);border-color:color-mix(in srgb,var(--a-tool) 25%,transparent)}
.tok.check{background:var(--a-check-soft);color:var(--a-check);border-color:color-mix(in srgb,var(--a-check) 25%,transparent)}
.tok.tested{position:relative;padding-right:14px}
.tok.tested::after{content:"";position:absolute;right:5px;top:5px;width:5px;height:5px;border-radius:50%;background:var(--a-step)}
.tok.dup{box-shadow:inset 0 0 0 1.5px var(--hot)}
.tok.dup b{color:var(--hot)}

.triple{display:flex;flex-direction:column;gap:8px}
.tribar{display:flex;height:22px;border-radius:6px;overflow:hidden;background:var(--rule)}
.tribar i{display:flex;align-items:center;justify-content:center;font:600 11px var(--mono);color:#fff;font-style:normal;transition:width .35s cubic-bezier(.22,.61,.36,1);min-width:0;overflow:hidden}
.t-easy{background:var(--a-easy)}.t-medium{background:var(--a-medium)}.t-hard{background:var(--a-hard)}
.t-seen{background:var(--a-step)}.t-similar{background:var(--a-tool)}.t-new{background:var(--hot)}

.alist{display:grid;gap:12px}
.acard{border:1px solid var(--rule);border-radius:14px;background:var(--panel);box-shadow:0 1px 0 rgba(38,33,30,.04);overflow:hidden;position:relative;transition:opacity .2s,border-color .2s}
.acard:focus-within{border-color:var(--rule-2)}
.acard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--a-medium)}
.acard[data-band="easy"]::before{background:var(--a-easy)}.acard[data-band="hard"]::before{background:var(--a-hard)}
.acard.busy{opacity:.55;pointer-events:none}
.acard.busy::after{content:"";position:absolute;left:0;top:0;height:2px;width:30%;background:var(--hot);animation:aslide 1.2s ease-in-out infinite}
.acard-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 14px 10px 18px;border-bottom:1px solid var(--rule);background:var(--paper)}
.anum{font:700 13px/1 var(--mono);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);flex:none}
.atopic{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:48ch}
.ameta{font:500 12px var(--mono);color:var(--faint);white-space:nowrap}
.acard .tag s{opacity:.6;margin-left:3px}
.amenu{font-weight:600}
.astmt{padding:14px 18px 6px 18px;font:16.5px/1.55 var(--paperserif);overflow-x:auto}
.astmt p{margin:0 0 8px}
.astmt table{margin:6px auto}
.astmt ol,.astmt ul{margin:6px 0 0;padding-left:26px}
.afig svg{max-width:340px;height:auto}
.afoot{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;padding:6px 18px 12px}
.aflags{display:flex;flex-wrap:wrap;gap:4px}
.aflags span{font:500 11.5px var(--mono);color:var(--soft);background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:3px 8px}
.asol{border-top:1px solid var(--rule);padding:8px 18px 10px}
.asol summary{cursor:pointer;color:var(--soft);font-size:14px}
.asol ol{margin:8px 0 4px;padding-left:22px;font:15px/1.5 var(--paperserif)}
.asol p{margin:0;font-size:14px}

.menu.amenu-pop{padding:6px;max-height:min(70vh,560px);overflow:auto;z-index:60}
.menu.amenu-pop .mh{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:8px 10px 4px}
.menu.amenu-pop button{align-items:flex-start;line-height:1.3;width:100%}
.menu.amenu-pop button small{display:block;color:var(--soft);font-size:12.5px;margin-top:2px;white-space:normal}
.menu.amenu-pop button:focus-visible,.menu.amenu-pop button:focus{background:var(--paper);outline:2px solid var(--hot);outline-offset:-2px}
.menu.amenu-pop button[aria-disabled="true"]{opacity:.45;cursor:default}
.menu.amenu-pop button.danger b{color:var(--bad)}
.amenu-pop .dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;margin-top:5px;background:var(--a-medium)}
.amenu-pop .dot.easy{background:var(--a-easy)}.amenu-pop .dot.hard{background:var(--a-hard)}

.acheck{display:flex;flex-direction:column;gap:16px}
.acheck-scores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ascore{border:1px solid var(--rule);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:var(--panel)}
.ascore.overall{background:var(--paper)}
.ascore small{color:var(--soft);font-size:12.5px;line-height:1.35}
.anum2{font:700 22px/1 var(--ui);font-variant-numeric:tabular-nums}
.anum2.ok{color:var(--teach)}.anum2.mid{color:var(--warn)}.anum2.low{color:var(--bad)}
.awarn{list-style:none;margin:0;padding:0;border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.awarn li{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid var(--rule);font-size:14.5px}
.awarn li:first-child{border-top:0}
.awarn .wk{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--warn)}
.awarn li.w-overtested .wk{color:var(--hot)}.awarn li.w-cascade .wk{color:var(--a-step)}.awarn li.w-coverage .wk{color:var(--a-tool)}
.aatoms{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px}
.aatoms th,.aatoms td{text-align:left;padding:6px 8px;border-top:1px solid var(--rule)}
.aatoms th{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);border-top:0}
.aatoms tr.over td{color:var(--bad);font-weight:600}
@media (max-width:760px){.acheck-scores{grid-template-columns:repeat(2,minmax(0,1fr))}.awarn li{grid-template-columns:minmax(0,1fr)}.awarn li .go{justify-self:start}}

.anote{border-left:3px solid var(--hot);background:var(--paper);border-radius:0 10px 10px 0;padding:10px 14px}
.anote p{margin:4px 0 0;font:15.5px/1.45 var(--prose)}
.apts{width:100%;border-collapse:collapse;font-size:14.5px}
.apts th,.apts td{padding:7px 8px;border-top:1px solid var(--rule);text-align:left;vertical-align:middle}
.apts th{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);border-top:0}
.apts td.n,.apts th.n{text-align:right;width:92px}
.apts input{width:72px;text-align:right;padding:6px 8px;font-variant-numeric:tabular-nums}
.apts tfoot td{font-weight:600}
.asteps{display:flex;flex-wrap:wrap;gap:3px}
.asteps span{font:600 11.5px var(--mono);padding:3px 6px;border-radius:5px;background:var(--a-step-soft);color:var(--a-step);font-variant-numeric:tabular-nums}
.afin p{margin:3px 0 0}
@media (max-width:620px){.apts td:nth-child(4),.apts th:nth-child(4){display:none}.atopic{max-width:26ch}.acard-bar{padding-left:14px}}
@media (prefers-reduced-motion:reduce){.aworking .line i,.acard.busy::after{animation:none}.rl-bar i,.abar i,.bbar i,.tribar i{transition:none}}
.astmt table{border-collapse:collapse;font-size:15px}.astmt table td{padding:3px 14px;text-align:center}.astmt table.ruled td{border:1px solid var(--rule-2)}
.aprereq summary{cursor:pointer;font-size:13.5px;color:var(--soft);margin-top:4px}.aprereq .achips{margin-top:6px}
/* the notes studio: lecture notes step by step (one question per screen, a summary rail beside it) */
:root{--r-mot:#2D5DA8; --r-mot-soft:#E3ECF8; --r-non:#7C3AED; --r-non-soft:#EFE7FD; --r-chk:#9A5B00; --r-chk-soft:#FBEFD9; --r-con:#0F766E; --r-con-soft:#DDF0EC; --sunk:#EFE9DF}
@media (prefers-color-scheme:dark){:root{--r-mot:#7FA8F0; --r-mot-soft:#1B2640; --r-non:#B794F6; --r-non-soft:#2A1D45; --r-chk:#E8B04E; --r-chk-soft:#3A2C12; --r-con:#3CC4AE; --r-con-soft:#0F2A27; --sunk:#1B1512}}
.studio-ov{padding:0;background:var(--paper);align-items:stretch;position:absolute;min-height:100%;overflow:visible}
body:has(.studio-ov) #app{display:none}
.studio{width:100%;min-height:100%;display:flex;flex-direction:column}
.st-top{display:flex;align-items:center;gap:14px;padding:14px 22px;flex-wrap:wrap}
.st-what{display:inline-flex;gap:8px;align-items:center;font:500 15px var(--ui);color:var(--soft)}.st-what svg{width:20px;height:20px}.st-what b{color:var(--ink);font-weight:600}
.st-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start;max-width:1400px;width:100%;margin:0 auto;padding:18px 22px 60px}
.st-card,.st-card.wide{max-width:none;width:100%;order:1}.st-card.busy{opacity:.6;pointer-events:none;transition:opacity .2s}
.st-rail{order:0;position:static;background:var(--panel);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow);padding:6px 0}
.st-rail>summary{list-style:none;display:flex;gap:10px;align-items:baseline;padding:10px 16px 6px;cursor:default}.st-rail>summary::-webkit-details-marker{display:none}
.st-sumline{display:none;font-size:13px;color:var(--soft)}
.rail{list-style:none;margin:0;padding:0 8px 6px;counter-reset:r}
.rail li button{display:grid;gap:1px;width:100%;text-align:left;border:0;background:none;border-radius:10px;padding:8px 10px 8px 34px;position:relative;cursor:pointer;transition:background .2s}
.rail li button::before{counter-increment:r;content:counter(r);position:absolute;left:8px;top:9px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--rule-2);font:600 10.5px/15px var(--ui);text-align:center;color:var(--soft);background:var(--panel)}
.rail li button:not([disabled]):hover{background:var(--paper)}
.rail li button[disabled]{cursor:default}
.rail li.at button{background:color-mix(in srgb,var(--hot) 7%,transparent)}.rail li.at button::before{border-color:var(--hot);background:var(--hot);color:#fff}
.rail .rv{font:500 14px/1.35 var(--ui);color:var(--ink);overflow-wrap:anywhere}
.where{display:grid;gap:8px;border:1px solid var(--rule);border-radius:12px;padding:12px 14px;background:var(--sunk)}
.wh{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;font-size:14.5px;align-items:baseline}
.wh-d{font:600 10.5px var(--ui);text-transform:uppercase;letter-spacing:.12em;color:var(--soft)}
.chip{display:inline-flex;align-items:center;gap:5px;font:600 12px/1.2 var(--ui);padding:3px 8px;border-radius:6px;background:var(--rule);color:var(--soft);margin:1px 0;animation:pop .3s}
.chip.ok{background:var(--teach-soft);color:var(--teach)}.chip.warn{background:var(--warn-soft);color:var(--warn)}.chip.tool{background:var(--r-con-soft);color:var(--r-con)}
.chip i{font-style:normal;font-weight:500;opacity:.8}
.skchips{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}.chip.sk{background:var(--r-con-soft);color:var(--r-con);font-size:11px;padding:2px 6px;max-width:100%}
.chip.sk.planned{background:none;border:1px dashed currentColor}.chip.sk.more{background:var(--rule);color:var(--soft)}
button.chip.sk.more{border:0;cursor:pointer;min-height:28px;padding:4px 10px;position:relative}
@media (pointer:coarse){button.chip.sk.more::after{content:"";position:absolute;inset:-8px -6px}}  /* a finger gets a 44px target around the 28px chip (review b2 S4) */
button.chip.sk.more:hover,button.chip.sk.more:focus-visible{color:var(--ink);outline:2px solid var(--rule-2);outline-offset:1px}
.day.skopen{overflow-y:auto;overscroll-behavior:contain;padding-bottom:40px}  /* a day whose "+N" skills are open keeps its size and scrolls inside on a desktop (jt, 2026-10-04); on a phone it grows. The room at the bottom keeps the day's "+" off "Fewer" */
.rtick{margin-left:4px;font-size:11px;color:var(--teach)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.chip.role.r-motivation{background:var(--r-mot-soft);color:var(--r-mot)}.chip.role.r-non-example{background:var(--r-non-soft);color:var(--r-non)}
.chip.role.r-concept-check{background:var(--r-chk-soft);color:var(--r-chk)}.chip.role.r-contrast{background:var(--r-con-soft);color:var(--r-con)}
.meter .mbar{height:10px;border-radius:5px;background:var(--rule);overflow:hidden;display:flex}
.meter .mbar i{display:block;background:var(--ink);transition:width .45s cubic-bezier(.22,.61,.36,1)}.meter .mbar s{display:block;background:var(--hot);text-decoration:none}
.meter .row{margin-top:6px}.mnum{font:600 22px/1 var(--word);font-variant-numeric:tabular-nums}
.flash{animation:flash 1.2s}
details.sksec>summary{cursor:pointer;padding:2px 0}details.sksec:not([open]){opacity:.85}.skx{font-size:13px;margin:6px 4px 2px}.skdone{font-size:13px;margin:4px 4px 6px;display:block}
@keyframes flash{0%{box-shadow:0 0 0 3px color-mix(in srgb,var(--hot) 45%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
.stc .adds{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.stc .pv{margin-top:6px}
.st-other select{max-width:360px}
.bookq{border-left:3px solid var(--hot);padding:4px 0 4px 14px}.bookq p{margin:4px 0 0;font:15.5px/1.5 var(--prose);color:var(--soft)}.bookq .from b{color:var(--ink);font-family:var(--ui);font-size:14px}
.acards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.acard{border:1px solid var(--rule-2);border-top-width:3px;border-radius:12px;background:var(--panel);padding:12px 14px;display:flex;flex-direction:column;gap:8px;transition:opacity .25s,box-shadow .25s,border-color .25s;opacity:.62;animation:land .45s cubic-bezier(.22,.61,.36,1) both}
.acard.on{opacity:1;box-shadow:var(--shadow);border-top-color:var(--kc)}
.acard header,.acard footer{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.acard .mins{font:600 12px var(--mono);color:var(--soft)}
.acard .abody{margin:0;font:15px/1.45 var(--prose);flex:1;overflow-wrap:anywhere}
.acard .src{font:500 11.5px var(--mono);color:var(--faint);overflow-wrap:anywhere}
.tog{border:1px solid var(--rule-2);background:var(--panel);border-radius:999px;padding:5px 14px;font:600 12px var(--ui);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.tog[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tog[aria-pressed="true"]::before{content:"✓ "}
@keyframes land{from{opacity:0;transform:translateY(8px)}}
.tbar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--rule);gap:2px}
.tbar i{display:block;min-width:3px;background:var(--soft);transition:flex .4s}.tbar i.rest{background:transparent}
.kd{font:600 10.5px var(--ui);text-transform:uppercase;letter-spacing:.07em;padding:2px 7px;border-radius:5px;background:var(--rule);color:var(--soft);white-space:nowrap}
.k-definition{--kc:var(--r-non)}.k-theorem{--kc:var(--ink)}.k-procedure{--kc:var(--r-chk)}.k-example{--kc:var(--r-mot)}.k-checkpoint{--kc:var(--r-con)}.k-remark,.k-figure,.k-summary,.k-heading{--kc:var(--soft)}
.r-motivation{--kc:var(--r-mot)}.r-non-example{--kc:var(--r-non)}.r-concept-check{--kc:var(--r-chk)}.r-contrast{--kc:var(--r-con)}
.kd[class*="k-"],.kd[class*="r-"]{color:var(--kc);background:color-mix(in srgb,var(--kc) 13%,transparent)}
.tbar i[class*="k-"],.tbar i[class*="r-"]{background:var(--kc)}
.tl{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tl>li{border:1px solid var(--rule);border-radius:10px;background:var(--panel);padding:6px 10px;outline-offset:2px;transition:transform .2s,box-shadow .2s}
.tl>li:focus-visible{outline:2px solid var(--hot)}
.tl-h{display:flex;gap:10px;align-items:center;background:var(--sunk)!important;font-size:14px}
.tl-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tl-t{font:500 15px/1.3 var(--ui);min-width:0;flex:1 1 180px}
.tl-ctl{display:inline-flex;gap:6px;align-items:center;margin-left:auto}
.clock{font:500 12px var(--mono);color:var(--faint);min-width:52px;font-variant-numeric:tabular-nums}
.grip{cursor:grab;color:var(--faint);touch-action:none;user-select:none;padding:4px 2px;font-size:13px;letter-spacing:-2px}
.dragging{cursor:grabbing}.tl>li.drag{opacity:.55;box-shadow:var(--shadow);transform:scale(.99)}
.tl>li.drop-above{box-shadow:0 -3px 0 var(--hot)}.tl>li.drop-below{box-shadow:0 3px 0 var(--hot)}
.step{display:inline-flex;align-items:center;border:1px solid var(--rule-2);border-radius:999px;overflow:hidden}
.step button{border:0;background:none;width:28px;height:26px;cursor:pointer;font-size:15px}.step button:hover{background:var(--paper)}
.step b{font:600 13px var(--mono);min-width:24px;text-align:center}
.tl-a{display:flex;gap:10px;align-items:center;padding:4px 0 4px 16px;font-size:13px;border-left:2px solid var(--kc);margin:3px 0 3px 8px;flex-wrap:wrap}
.mark{margin:6px 0 2px 26px;font:14px/1.45 var(--prose);color:var(--soft);padding:6px 10px;border-radius:8px}
.mark b{font:600 10.5px var(--ui);text-transform:uppercase;letter-spacing:.1em;margin-right:6px}
.m-vocabulary{background:var(--r-mot-soft)}.m-vocabulary b{color:var(--r-mot)}.m-misreading{background:var(--hot-soft)}.m-misreading b{color:var(--hot)}
.samples{display:flex;gap:6px;flex-wrap:wrap}
.samples button{font:500 13px/1 var(--ui);padding:8px 12px;border-radius:999px;border:1px solid var(--rule-2);background:transparent;color:var(--soft);cursor:pointer;transition:color .2s,border-color .2s}
.samples button:hover{color:var(--ink);border-color:var(--ink)}.samples button.used{border-style:dashed}
.wpanel{border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:var(--panel)}
.wpanel .panel-bar{display:flex;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--rule);font:500 12.5px var(--mono);color:var(--soft)}
.wpanel .panel-bar .t{flex:1}
.state{font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:var(--rule);color:var(--soft)}
.state.live{background:var(--hot-soft);color:var(--hot)}.state.live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px;animation:blink 1.1s steps(2) infinite}
.state.ok{background:var(--teach-soft);color:var(--teach)}.state.bad{background:var(--hot-soft);color:var(--bad)}
@keyframes blink{50%{opacity:.2}}
.wbar{height:3px;background:var(--rule)}.wbar i{display:block;height:100%;width:0;background:var(--hot);transition:width .5s cubic-bezier(.22,.61,.36,1)}
.wlist{list-style:none;margin:0;padding:8px 14px 12px;display:grid;gap:2px}
.wlist li{display:flex;gap:10px;align-items:center;padding:5px 0;font-size:14px;border-bottom:1px dashed var(--rule)}
.wlist li:last-child{border-bottom:0}
.wdot{width:10px;height:10px;border-radius:50%;border:2px solid var(--rule-2);flex:none;transition:background .3s,border-color .3s}
.wlist .wn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wlist .ws{font:500 12px var(--mono);color:var(--faint);white-space:nowrap}
.w-writing .wdot{border-color:var(--hot);animation:blink 1.1s steps(2) infinite}.w-writing .ws{color:var(--hot)}
.w-written .wdot,.w-cached .wdot,.w-bank .wdot,.w-statement .wdot{background:var(--teach);border-color:var(--teach)}
.w-failed .wdot{background:var(--warn);border-color:var(--warn)}
.w-missing .wdot{border-color:var(--warn);border-style:dashed}.w-missing .ws{color:var(--warn)}  /* a slot the notes mark for you to draft: not filled, not a failure */
.excards{display:grid;gap:12px}
.excard{border:1px solid var(--rule-2);border-radius:12px;padding:12px 14px;background:var(--panel);display:grid;gap:8px;animation:land .45s both;transition:opacity .2s}
.excard.busy{opacity:.55}
.excard header{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.excard header .muted{font-size:13px}
.excard .exb{margin:0;font:15.5px/1.5 var(--prose);overflow-wrap:anywhere}
.excard .exwhole{font:15px/1.5 var(--prose);overflow-wrap:anywhere;max-width:100%;overflow-x:auto}.excard .exmore{justify-self:start}  /* the whole example, opened from its card */
.later{border:1px solid var(--rule);border-radius:12px;padding:12px 14px;background:var(--sunk)}.later p{margin:6px 0 0;font:15px/1.5 var(--prose)}
@media (max-width:860px){
  .st-body{grid-template-columns:minmax(0,1fr);padding:12px 12px 40px;gap:12px}
  .st-rail{order:0;position:static}.st-rail>summary{cursor:pointer;padding:10px 14px}.st-rail:not([open]) .st-sumline{display:inline}
  .st-rail>summary::after{content:"▾";margin-left:auto;color:var(--soft)}.st-rail[open]>summary::after{content:"▴"}
  .st-top{padding:10px 14px}.st-what>span{display:none}
  .wh{grid-template-columns:minmax(0,1fr)}
  .acards{grid-template-columns:minmax(0,1fr)}
  .skmeta{margin-left:0;white-space:normal}.skitem{flex-wrap:wrap}
  .mark{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.acard,.excard,.chip,.flash{animation:none}.tbar i,.meter .mbar i,.wbar i{transition:none}}
/* the wizard on the rating (teaching/DIFFICULTY-AND-EXPOSURE.md): core skills, packaging, the rating on each card, the exam reserve */
:root{--p-straight:#6BAF7B;--p-standard:#D9A441;--p-involved:#C8453C}
@media (prefers-color-scheme:dark){:root{--p-straight:#4FA56A;--p-standard:#C9973A;--p-involved:#E0605A}}
.t-straightforward,.p-straightforward{background:var(--p-straight)}.t-standard,.p-standard{background:var(--p-standard)}.t-involved,.p-involved{background:var(--p-involved)}
.alist>.acard{opacity:1;animation:none;padding:0;display:block;border:1px solid var(--rule);border-radius:14px;box-shadow:0 1px 0 rgba(38,33,30,.04)}
.askills{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.askills li{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(60px,1fr) 30px;grid-template-areas:"name bar num" "meta meta meta";gap:0 10px;align-items:center;padding:6px 8px;border-radius:8px}
.askills li:hover{background:var(--paper)}
.askills li.pre{opacity:.85}
.askills label{grid-area:name;display:flex;align-items:center;gap:8px;cursor:pointer;min-width:0}
.askills input{width:18px;height:18px;accent-color:var(--hot);flex:none}
.askills .skname{font-weight:600;overflow-wrap:anywhere}
.askbar{grid-area:bar;height:6px;border-radius:3px;background:var(--rule);overflow:hidden;display:block}
.askbar i{display:block;height:100%;border-radius:3px}.askbar i.e{background:var(--a-easy)}.askbar i.m{background:var(--a-medium)}.askbar i.h{background:var(--a-hard)}
.asknum{grid-area:num;text-align:right;font:600 13px var(--mono);font-variant-numeric:tabular-nums}
.askills .askmeta{grid-area:meta;font:500 11.5px var(--mono);color:var(--faint);padding-left:26px;white-space:normal;margin:0}
.arating{font:700 15px/1 var(--mono);font-variant-numeric:tabular-nums;border:1px solid var(--rule-2);background:var(--panel);border-radius:8px;padding:5px 8px;cursor:pointer;color:var(--ink)}
.arating small{font-weight:500;font-size:10.5px;color:var(--faint);margin-left:1px}
.arating[aria-expanded="true"]{border-color:var(--ink);background:var(--paper)}
.tag.reserved{background:var(--hot-soft);color:var(--hot)}
.tag.slot-straightforward{background:color-mix(in srgb,var(--p-straight) 18%,transparent);color:var(--ink)}
.tag.slot-standard{background:color-mix(in srgb,var(--p-standard) 20%,transparent);color:var(--ink)}
.tag.slot-involved{background:color-mix(in srgb,var(--p-involved) 18%,transparent);color:var(--ink)}
.abreak{padding:10px 18px;border-bottom:1px solid var(--rule);background:var(--paper)}
.abreak p{margin:6px 0 0;font-size:13px}
.abreak-t{border-collapse:collapse;font-size:13.5px;min-width:min(100%,360px)}
.abreak-t th{text-align:left;font-weight:500;color:var(--soft);padding:2px 16px 2px 0}
.abreak-t td{text-align:right;font:600 13px var(--mono);font-variant-numeric:tabular-nums}
.abreak-t tr.res th,.abreak-t tr.res td{border-top:1px dashed var(--rule-2);padding-top:5px}
.abreak-t tr.tot th,.abreak-t tr.tot td{border-top:1px solid var(--rule-2);color:var(--ink);font-weight:700;padding-top:5px}
.aorigin{display:flex;flex-wrap:wrap;gap:4px 14px;padding:8px 18px 0;font-size:13.5px;color:var(--soft)}
.aorigin b{color:var(--ink)}
.afrom{color:var(--teach);font-weight:600}
.aflag{color:var(--warn);font-weight:600}
.rline{position:relative;display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--a-easy),var(--a-medium) 50%,var(--a-hard));opacity:.9}
.rline i{position:absolute;top:-3px;width:3px;height:14px;border-radius:2px;transform:translateX(-50%);transition:left .4s cubic-bezier(.22,.61,.36,1)}
.rline i.rmean{background:var(--ink);box-shadow:0 0 0 2px var(--panel)}
.rline i.rmean.low{background:var(--hot)}
.rline i.rtarget{top:auto;bottom:-9px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:6px solid var(--ink);border-radius:0;background:none}
.rl-bl>b{font:600 12px var(--mono);color:var(--ink)}
.rl-bands .rl-bl:first-child{grid-template-columns:44px minmax(0,1fr) 28px;margin-bottom:6px}
.arsum{display:grid;gap:10px;padding:12px 14px;border:1px solid var(--rule);border-radius:12px;background:var(--paper)}
.arsum>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:center;font-size:14px}
.arsum>div:first-child{grid-template-columns:150px minmax(0,1fr) auto}
.rline.big{height:10px;margin:0 6px 8px}
.tok.miss{background:var(--hot-soft);color:var(--hot);border-color:color-mix(in srgb,var(--hot) 25%,transparent)}
.brate{font:600 11px var(--mono);color:var(--soft);margin-left:4px}
.pitem .tag.reserved{font-size:9px;padding:0 5px;margin-left:4px}
.prate{display:grid;gap:8px}
.prate .abreak-t{margin-top:4px}
.pexpo{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:14px}
.pexpo li{display:flex;flex-wrap:wrap;gap:4px 10px}
.pexpo .muted{font:500 12px var(--mono)}
@media (max-width:620px){.arsum>div,.arsum>div:first-child{grid-template-columns:minmax(0,1fr)}.askills li{grid-template-columns:minmax(0,1fr) 30px;grid-template-areas:"name num" "bar bar" "meta meta";gap:4px 10px}.askbar{margin-left:26px}.askills .askmeta{padding-left:26px}.abreak{padding:10px 14px}.aorigin{padding:8px 14px 0}}
@media (prefers-reduced-motion:reduce){.rline i{transition:none}}


/* ── the course plan as blocks (jt, 2026-09-29): the term's calendar alone, the blocks as bands on the meeting days */
:root{--cp-1:#2D5DA8;--cp-2:#0F766E;--cp-3:#7C3AED;--cp-4:#A16207;--cp-5:#1F8A5C;--cp-6:#475569;--cp-7:#4F46E5;--cp-8:#65730F;--cp-review:#8A7F74}
@media (prefers-color-scheme:dark){:root{--cp-1:#7FA8F0;--cp-2:#3CC4AE;--cp-3:#B794F6;--cp-4:#E2B455;--cp-5:#4CC08A;--cp-6:#9AA8BC;--cp-7:#A5A8F5;--cp-8:#BACB5A;--cp-review:#B9AEA2}}
.card.xwide{max-width:1320px}
.cp-top{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.cp-meter{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:6px}
.cp-meter .bar i.p{background:var(--ink)} .cp-meter .bar i.o{background:var(--bad)}
.cp-meter p{margin:0;font-size:15px;font-variant-numeric:tabular-nums}
.cp-src{font-size:13.5px;color:var(--soft);margin:0}
.cp-warns{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cp-warns li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14.5px;padding:8px 12px;border-radius:8px;background:var(--hot-soft);color:var(--ink)}
.cp-warns li.warn{background:var(--warn-soft)}
.cp-warns li.note{background:transparent;border:1px dashed var(--rule-2);color:var(--soft)}
.cp-warns li span{flex:1 1 240px}
.cp-help{font-size:13.5px;color:var(--soft);margin:0}
.cp-help kbd{font:600 11.5px var(--mono);border:1px solid var(--rule-2);border-bottom-width:2px;border-radius:4px;padding:0 4px;background:var(--panel);color:var(--ink)}
/* the calendar: a fixed width shared by the meeting days, so a cell is one meeting whatever the course */
/* a fixed grid (jt: "the calendar should be fixed"): a week is always --cp-days wide, shared by the days the course meets less
   the thin gaps where a weekday without class would be, so a twice-a-week lecture's days are twice a four-day course's */
.cp-cal{--cp-wk:88px;--cp-days:800px;--cp-skip:8px;--cw:calc((var(--cp-days) - var(--k,0) * var(--cp-skip)) / var(--n,5));overflow-x:auto;overscroll-behavior-x:contain;padding:2px 2px 6px;margin:0 -2px}
.cp-cal-in{width:max-content}
.cp-cal .weekrow{margin-bottom:6px;border-radius:10px;width:max-content}
.cp-cal .wk{padding:8px 10px;border-right:1px solid var(--rule);border-bottom:0}.cp-cal .wk b{font-size:15px}.cp-cal .wk span{font-size:11.5px}
.cp-cal .day{height:90px;min-height:0;padding:6px 0 8px;overflow:visible;gap:4px;border-right:1px solid var(--rule);border-bottom:0}
/* a title running on over the block's next cells (fitTitles sets the room it has) */
.cp-band.cont-r:has(.cp-run){overflow:visible;z-index:2} .cp-band.cont-r .cp-btop:has(.cp-run){overflow:visible}
.cp-band .cp-run{position:relative;z-index:3;flex:0 0 auto;width:max-content;overflow:hidden;text-overflow:ellipsis}
.cp-cal .day:last-child{border-right:0}
.cp-cal .day.nomeet{min-height:0}
.cp-cal .day.exam{background:color-mix(in srgb,var(--hot-soft) 60%,var(--panel))}
.cp-cal .dhead{padding:0 8px}
.cp-skip{background:repeating-linear-gradient(180deg,var(--rule) 0 3px,transparent 3px 7px) center/1px 100% no-repeat,var(--paper);border-right:1px solid var(--rule)}
.cp-bands{display:flex;gap:2px;min-height:50px;margin-top:auto;padding:0 3px}
.cp-band{position:relative;z-index:1;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;min-width:0;border-radius:6px;background:color-mix(in srgb,var(--bc) 20%,var(--panel));border-left:4px solid var(--bc);display:flex;flex-direction:column;justify-content:center;gap:3px;padding:4px 6px;overflow:hidden;cursor:grab;container-type:inline-size}
.cp-band:active{cursor:grabbing}
/* a block that goes on into the next cell (across the day's rule, or the thin gap of a weekday without class) has a flat, open edge */
.cp-band.cont-l{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-4px;padding-left:10px}
.cp-band.cont-r{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-4px}
.cp-band.review{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--bc) 22%,var(--panel)) 0 6px,var(--panel) 6px 9px)}
.cp-band.bad{box-shadow:inset 0 0 0 2px var(--bad)}
.cp-band.free{background:transparent;border:1px dashed var(--rule-2);color:var(--faint);cursor:default;align-items:center}
.cp-band.free span{font:600 11px var(--mono)}
.cp-band.drop-before{box-shadow:inset 4px 0 0 var(--ink),inset 0 0 0 2px var(--ink)} .cp-band.drop-after{box-shadow:inset -4px 0 0 var(--ink),inset 0 0 0 2px var(--ink)}
.cp-band.drop-in,.cp-opt.drop-in,.cp-cal.drop-in{outline:2px dashed var(--ink);outline-offset:-2px}
.cp-cal .day.drop-day{box-shadow:inset 0 0 0 2px var(--hot)}
.cp-dragging,.cp-dragging *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.cp-ghost{position:fixed;z-index:1000;pointer-events:none;display:flex;flex-direction:column;gap:1px;max-width:260px;padding:6px 10px;border-radius:8px;
  background:var(--panel);border:1px solid var(--rule-2);border-left:4px solid var(--bc);box-shadow:0 6px 18px rgba(0,0,0,.18);font:13px var(--ui);color:var(--ink)}
.cp-ghost b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cp-ghost span{color:var(--soft);font-size:12px}
.cp-ghost.nope span{color:var(--faint)}
.cp-saved{font-size:13px}
.cp-btop{display:flex;align-items:center;gap:3px;min-width:0;height:22px}
.cp-name{flex:1 1 auto;min-width:0;border:1px solid transparent;border-radius:5px;background:none;padding:0 4px;margin-left:-4px;font:600 13px/20px var(--ui);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:text;color:var(--ink)}
.cp-name i{font-style:normal;color:var(--soft);margin-left:4px;opacity:0}
.cp-name:hover,.cp-name:focus-visible{border-color:color-mix(in srgb,var(--bc) 55%,transparent);background:color-mix(in srgb,var(--panel) 70%,transparent)}
.cp-name:hover i,.cp-name:focus i{opacity:1}
.cp-tin{flex:1;min-width:0;border:1px solid var(--bc);border-radius:5px;background:var(--panel);padding:0 5px;font:600 13px/20px var(--ui)}
.cp-bt{font:600 12px/20px var(--ui);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cp-kt{flex:none;border:1px solid color-mix(in srgb,var(--bc) 45%,transparent);border-radius:999px;background:var(--panel);font:700 9.5px/16px var(--ui);letter-spacing:.06em;text-transform:uppercase;padding:0 6px;color:var(--soft);cursor:pointer}
.cp-kt:hover{color:var(--ink);border-color:var(--bc)}
.cp-more{flex:none;border:0;border-radius:5px;background:none;width:22px;height:20px;cursor:pointer;color:var(--soft);font:700 14px/1 var(--ui);padding:0}
.cp-more:hover{background:var(--panel);color:var(--ink)}
@container (max-width:130px){.cp-kt{display:none}.cp-name i{display:none}}
@container (max-width:70px){.cp-more{display:none}}
.cp-bchips{display:flex;gap:3px;min-width:0;align-items:center;height:20px}
.cp-bchips .cp-chip{padding:0 6px;height:20px;align-items:center;background:color-mix(in srgb,var(--panel) 80%,transparent);flex:0 1 auto;min-width:0;overflow:hidden}
.cp-bchips .spacer{min-width:2px}
.cp-bchips .cp-chip b{font:600 11.5px var(--mono)} .cp-bchips .cp-chip span{max-width:12ch;font-size:12px}
.cp-chips{display:flex;flex-wrap:wrap;gap:5px;min-height:28px}
.cp-chip{border:1px solid var(--rule-2);background:var(--paper);border-radius:999px;padding:2px 9px;font:500 13px var(--ui);cursor:pointer;display:inline-flex;gap:5px;align-items:baseline;max-width:100%}
.cp-chip b{font:600 12.5px var(--mono)}
.cp-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22ch;color:var(--soft)}
.cp-chip i{font-style:normal;font-weight:700;color:var(--soft)}
.cp-chip:hover{border-color:var(--soft)} .cp-chip:hover i{color:var(--ink)}
.cp-chip.off{opacity:.55;border-style:dashed} .cp-chip{touch-action:manipulation;-webkit-touch-callout:none}
.cp-chip.bad{border-color:var(--bad);background:var(--hot-soft);color:var(--bad)} .cp-chip.bad span{color:var(--bad)}
.cp-grip{position:absolute;right:0;top:0;bottom:0;width:12px;border:0;padding:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--bc) 60%,transparent));cursor:ew-resize;touch-action:none}
.cp-grip::after{content:"";position:absolute;right:3px;top:10px;bottom:10px;border-right:2px solid var(--bc)}
.cp-grip:focus-visible{outline:2px solid var(--hot);outline-offset:-2px}
.cp-hint .cp-grip{animation:cp-hint .8s ease-in-out 3;background:linear-gradient(90deg,transparent,var(--hot))}
.cp-hint .cp-grip::after{border-right-color:#fff}
@keyframes cp-hint{50%{width:22px;opacity:.6}}
@media (prefers-reduced-motion:reduce){.cp-hint .cp-grip{animation:none}}
.cp-over{font-size:13px;color:var(--bad);margin:-6px 0 0}
/* the optional topics, under the calendar */
.cp-opt{border:1px dashed var(--rule-2);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.cp-opt-h{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline}
.cp-opt-h h3{margin:0;font:600 15px var(--ui)} .cp-opt-h span{font-size:13.5px}
.cp-opt .cp-chips:empty::after{content:"Every section is in the plan.";font-size:13px;color:var(--faint);align-self:center}
.cp-full{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}.cp-full span{flex:1 1 280px}
@media (max-width:640px){
  .cp-cal{--cp-wk:64px}
  .cp-cal .wk{padding:6px}.cp-cal .wk b{font-size:13.5px}.cp-cal .wk span{font-size:10.5px}
  .cp-cal .dhead{padding:0 5px;font-size:11.5px}.cp-cal .badge{font-size:9px;padding:0 3px}
}
.cp-cal .day.nomeet:not(:has(.file)){display:flex}

/* the TA's page (jt, 2026-09-29): the weeks' prep on top, the calendar in the centre, the syllabus and office hours below */
.tanext{margin:0 auto 16px}
.taprep{margin-bottom:18px}
.taprep h2{font-size:22px}
.taweeks{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:0}
.taweek{display:grid;grid-template-columns:190px minmax(0,1fr) auto;gap:16px;align-items:start;padding:12px 0;border-top:1px solid var(--rule)}
.tawhen{display:flex;flex-direction:column;gap:2px}
.tawhen b{font:600 17px var(--word)}.tawhen span{font-size:13px;font-variant-numeric:tabular-nums}
.tawhat p{margin:4px 0 0;font:15px/1.4 var(--prose);color:var(--soft)}
.tastate{display:inline-block;font:700 11px var(--ui);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:2px 9px}
.tastate.waiting{background:var(--warn-soft);color:var(--warn)}
.tastate.todo{background:var(--hot-soft);color:var(--hot)}
.tastate.ready{background:var(--teach-soft);color:var(--teach)}
.tafiles{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px}
.tafiles .file{padding-left:0;max-width:260px}
.taact{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.taact .link{font-size:13.5px}
.mk.ws{color:var(--k-worksheet)}
.tahub{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}
@media (max-width:980px){.tahub{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){
  .taweek{grid-template-columns:minmax(0,1fr);gap:8px}
  .taact{flex-direction:row;flex-wrap:wrap;align-items:center}
}

/* the diff shown by "Ask for a change" before anything is written */
.askdiff{max-height:40vh;overflow:auto;background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:10px 12px;font:12.5px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.askdiff .add{color:var(--ok-c, #1a7f37);background:color-mix(in srgb, var(--ok-c, #1a7f37) 10%, transparent)}
.askdiff .del{color:var(--bad-c, #b42318);background:color-mix(in srgb, var(--bad-c, #b42318) 10%, transparent);text-decoration:line-through}
.askdiff .hunk{color:var(--muted)}
/* the TA's section-notes choices (jt, 2026-09-30: options, no free text) */
.opts{display:grid;gap:8px;margin-top:6px}
.opt{display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid var(--rule-2);border-radius:10px;background:var(--panel);padding:10px 40px 10px 14px;cursor:pointer;position:relative;font:inherit;color:inherit}
.opt:hover{border-color:var(--soft)}
.opt[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--hot);border-color:var(--hot)}
.opt[aria-pressed="true"]::after{content:"✓";position:absolute;right:14px;top:10px;color:var(--hot);font-weight:700}
.opt .muted{font-size:13px}

/* the notes studio's Read step (jt, 2026-09-30): what the notes will say, before the approach is chosen */
.st-split{display:grid;gap:14px}
.st-livewrap .label{margin:0 0 6px}
.st-read{max-height:62vh;overflow:auto;padding:18px 22px;border:1px solid var(--rule);border-radius:10px;background:var(--panel)}
.st-read .st-rsec{font:600 18px var(--word);margin:14px 0 4px}.st-read .st-rsec:first-child{margin-top:0}
.st-read .st-rhead{font:600 15px var(--ui);margin:12px 0 2px;color:var(--soft)}
.st-read .st-ritem{margin:8px 0 12px}.st-read .st-rlabel{font:600 13px var(--ui);color:var(--soft);margin-bottom:2px}
.st-read .st-rsrc{font-size:12.5px;margin:2px 0 0}

/* jt, 2026-09-30: the "Your class" summary moves from the right side to a strip across the top, so the content list and the
   live preview get the full width. Wide screens: one row of steps; narrow screens keep the collapsible panel. */
@media (min-width:861px){
  .st-rail{padding:4px 6px}.st-rail>summary{display:none}
  .st-rail .rail{display:flex;flex-wrap:wrap;gap:2px;padding:0}
  .st-rail .rail li{flex:1 1 150px;min-width:0}
  .st-rail .rail li button{height:100%}
}
@media (min-width:1000px){.st-split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}.st-livewrap{position:sticky;top:12px}}
.st-read.st-live{max-height:72vh}

/* the preview's cards (jt, 2026-09-30): one per item, a summary, and a lined area as large as the text it puts in the notes */
.st-read.st-live{background:var(--sunk);padding:12px 14px}
.st-read .st-rsec{font:600 17px var(--word);margin:10px 2px 6px}
.st-read .st-rhead{font:600 13px var(--ui);letter-spacing:.02em;color:var(--soft);margin:12px 4px 4px}
.pvcard{background:var(--panel);border:1px solid var(--rule);border-left:4px solid var(--pvc,var(--rule-2));border-radius:10px;padding:10px 14px 10px;margin:0 0 10px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.pvcard.k-definition,.pvcard.k-theorem,.pvcard.k-procedure{--pvc:var(--k-notes,#3b5ba5)}
.pvcard.k-example,.pvcard.k-checkpoint{--pvc:var(--k-worksheet,#2f7a5a)}
.pvcard.k-remark,.pvcard.k-figure,.pvcard.k-summary{--pvc:var(--rule-2)}
.pvcard header{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.pvcard .pvkind{font:700 11px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.pvcard .pvtitle{font:600 15px var(--ui);flex:1 1 auto;min-width:0}
.pvcard .pvmin{font:500 12px var(--mono);color:var(--faint)}
.pvcard .pvsum{margin:6px 0 8px;font:15.5px/1.5 var(--prose)}
.pvcard .pvbody{position:relative;height:calc(var(--lines) * 1.35em);min-height:2.7em;border-radius:6px;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(1.35em - 5px),color-mix(in srgb,var(--rule) 70%,transparent) calc(1.35em - 5px),color-mix(in srgb,var(--rule) 70%,transparent) calc(1.35em - 1px),transparent calc(1.35em - 1px));opacity:.9}
.pvcard .pvlen{position:absolute;right:6px;bottom:2px;font:500 11.5px var(--ui);color:var(--faint);background:var(--panel);padding:0 4px;border-radius:4px}
.pvcard .pvopen{font-size:13px;margin-top:4px}
.pvcard .pvfull{margin-top:6px;font-size:15px}
.pvcard .pvnone{margin:0;font-size:13px}
.pvcard .pvtoggle{font-size:12.5px;margin-left:4px}
.pvcard.small{padding-bottom:8px}.pvcard.small .pvsum{margin-bottom:0}
.pvcard .pvfull{margin-top:6px;font-size:15px}
/* TikZ figures drawn live in previews (latex.js drawFigures): on white, since TeX draws black on transparent */
.tikzfig{border:1px dashed var(--rule,#aaa);color:var(--faint,#777);font:12px var(--mono);padding:14px;text-align:center;margin:10px auto;max-width:420px;border-radius:6px}
.tikzfig.drawn{border:0;padding:10px;background:#fff;max-width:100%;width:fit-content}
.tikzfig img.tikzimg{display:block;max-width:100%;height:auto;margin:0 auto}
.newbuild{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:2000;display:flex;gap:12px;align-items:center;background:var(--ink,#222);color:var(--paper,#fff);padding:10px 14px;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.25);font:14px/1.3 var(--f-ui,system-ui)}.newbuild span{white-space:nowrap}.newbuild button.sm{background:#fff;color:#222;border:0;border-radius:6px;padding:6px 12px;font-weight:600;cursor:pointer}.newbuild .link{color:#fff;opacity:.85;white-space:nowrap;background:none;border:0;text-decoration:underline;cursor:pointer}
@media (max-width:640px){.newbuild span{white-space:normal}}
.dfixed{font:600 13px/1 var(--f-ui,system-ui);color:var(--soft,#555);padding:7px 10px;border:1px solid var(--rule,#ddd);border-radius:999px;white-space:nowrap}  /* a file's type and day: fixed, shown, not edited */
/* ------------------------------------------------------------------ exam dates (jt, 2026-10-01): a vertical marker on each exam's day */
.exm{position:absolute;left:0;top:0;bottom:0;width:24px;border:0;background:none;padding:0;cursor:pointer;z-index:2;border-radius:10px 0 0 10px}
.exm:hover{background:color-mix(in srgb,var(--hot) 9%,transparent)}
.exm:focus-visible{outline:2px solid var(--hot);outline-offset:-2px}
.exm-bar{position:absolute;left:8px;top:6px;bottom:6px;width:6px;border-radius:3px;background:linear-gradient(to bottom,var(--hot) var(--fill),color-mix(in srgb,var(--hot) 22%,var(--panel)) var(--fill));box-shadow:0 0 0 1px color-mix(in srgb,var(--hot) 40%,transparent)}
.exm-bar::before{content:"";position:absolute;left:-3px;top:-2px;width:12px;height:12px;border-radius:50%;background:var(--hot)}
.exm:hover .exm-bar{width:8px;left:7px}
.exm-tag{border:0;background:var(--hot);color:#fff;font:700 11.5px/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;border-radius:4px;padding:1px 6px;cursor:pointer;align-self:flex-start;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.exm-tag:hover{filter:brightness(1.1)}
.exm-nolec{margin:0;font-size:12.5px;color:var(--soft)}
.day.hasexam{padding-left:30px}
.day.hasexam .dhead{gap:6px;flex-wrap:wrap}
.cp-cal .day.hasexam{padding-left:30px}
.cp-exnote{margin:auto 0 0;font-size:12px;color:var(--soft)}
.exmenu{min-width:230px}
.exmenu .exm-mh{padding-top:6px}
.exmenu .exm-tick{display:inline-block;width:14px;color:var(--hot);font-weight:800}
.exmenu .exm-note{margin:4px 10px 6px;color:var(--soft);font-size:13.5px;max-width:240px}
.exmenu .exm-rm{color:var(--bad)}
.exlist{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.exlist li{border:1px solid var(--rule-2);background:var(--panel);border-radius:999px;padding:0;font-size:14px;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.exlist li.muted{padding:4px 12px}
.exlist li b{color:var(--hot)} .exlist li.wait{border-style:dashed;border-color:var(--hot)}
.exrow{border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:999px;padding:4px 12px;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;min-height:32px}
.exrow:hover{background:color-mix(in srgb,var(--hot) 9%,transparent)}
.exrow:focus-visible{outline:2px solid var(--hot);outline-offset:1px}
.exlist q{font-style:italic;color:var(--soft)}
.exhint{margin:0;color:var(--soft);font-size:14px}
.exnext{margin:0}
.excal{display:flex;flex-direction:column;gap:6px;max-width:860px}
.exw{display:grid;grid-template-columns:76px repeat(var(--n,5),minmax(0,1fr));gap:6px}
.exw.fin{grid-template-columns:76px minmax(0,1fr);margin-top:6px;padding-top:8px;border-top:1px dashed var(--rule-2)}
.exfin{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.exfin.one{grid-template-columns:minmax(0,260px)}
.exw-k{display:flex;flex-direction:column;justify-content:center;font-size:12px;color:var(--soft);font-variant-numeric:tabular-nums}
.exw-k b{font:600 15px var(--word);color:var(--ink)}
.exd{position:relative;border:1px solid var(--rule);border-radius:10px;background:var(--panel);min-height:88px;padding:6px 8px;text-align:left;display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--ink)}
.exd-h{font-size:12.5px;color:var(--soft);font-variant-numeric:tabular-nums}.exd-h b{color:var(--ink)}
.exd-why{margin-top:auto;font-size:12px;color:var(--soft);line-height:1.25}
.exd.pick{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.exd.pick:hover,.exd.pick:focus-visible{border-color:var(--hot);box-shadow:0 0 0 1px var(--hot)}
.exd-add{margin-top:auto;color:var(--hot);font-weight:700;font-size:12.5px;opacity:.85;transition:opacity .15s}  /* always readable: a phone has no hover, the day says what a tap does */
.exd.pick:hover .exd-add,.exd.pick:focus-visible .exd-add,.exd.pick.mv .exd-add{opacity:1}
.exd.pick.mv{border-style:dashed;border-color:var(--hot)}
.exd.has.moving{outline:2px dashed var(--hot);outline-offset:2px}
.exd.sug{border:2px dashed var(--hot);padding:5px 7px}
.exd-sug{font:700 10.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--hot)}
.exd.has{padding-left:30px;border-color:color-mix(in srgb,var(--hot) 55%,var(--rule));background:color-mix(in srgb,var(--hot-soft) 55%,var(--panel))}
.exd.off{background:repeating-linear-gradient(135deg,var(--panel) 0 8px,var(--rule) 8px 9px);color:var(--soft)}
.exd.nomeet{background:transparent;border-style:dashed;opacity:.55}
.exd.none{visibility:hidden}
.exfixed{list-style:none;padding:0;margin:4px 0 6px;display:flex;flex-direction:column;gap:4px}
.exfixed li{border-left:4px solid var(--hot);padding:2px 0 2px 10px;font-size:15px}
.exfix{display:block;padding:8px 0;font-size:15px}
.exgrade{font-size:14px;margin:2px 0 0}
/* the calendar: the Exams line's buttons, a move in progress, the grade's line after an exam change */
.exlinebox .exline{color:var(--ink);font-variant-numeric:tabular-nums;padding:5px 0;display:inline-block}
.exlinebox .exline.bad-c{color:var(--bad)}
.exmoving{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:35;width:min(92vw,620px);margin:0;box-shadow:var(--shadow);border:1px solid var(--hot)}  /* at the foot of the window while the new day is found: never under the top bar (a phone's is tall) */
.exmoving .link,.exgradeissue .link,.exfiledate .link,.exnext .link{color:var(--ink);font-weight:600}
.exgradeissue,.exfiledate{margin:10px 0 0}
.mk.exmovehere{border:1px dashed var(--hot);background:var(--panel);color:var(--hot);border-radius:8px;padding:5px 8px;cursor:pointer;font-weight:700}
.mk.exmovehere:hover,.mk.exmovehere:focus-visible{background:color-mix(in srgb,var(--hot) 10%,var(--panel))}
.toast.act{display:flex;gap:12px;align-items:center;max-width:min(92vw,640px);border-radius:14px}
.toast.act button{border:1px solid currentColor;background:none;color:inherit;font:700 13px var(--ui);border-radius:999px;padding:4px 12px;cursor:pointer;flex:none}
@media (prefers-color-scheme:dark){.exm-tag{color:var(--paper)}}  /* the dark theme's red is light: dark letters on it */
/* a grade row the exam dates step owns: its name and type are shown, not edited */
.wrow .wfix{display:block;padding:9px 10px;border:1px dashed var(--rule-2);border-radius:8px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wrow .wfix.kind{color:var(--soft);font-size:14px}
.wrow.exrow .wfix:first-child{border-left:4px solid var(--hot)}
/* (exrow is also the class of the exam list's buttons above: a grade row is no button, and stands in the columns of the other rows) */
.wrow.exrow{display:grid;gap:8px;align-items:center;padding:0;border-radius:0;cursor:default;min-height:0}
.wrow.exrow:hover{background:none}
/* a number picked with − and + (no typing) */
.stepper{display:inline-flex;align-items:center;gap:0;border:1px solid var(--rule-2);border-radius:10px;background:var(--panel);overflow:hidden;align-self:flex-start}
.stepper button{border:0;background:none;color:var(--ink);font:700 20px/1 var(--ui);width:44px;height:42px;cursor:pointer}
.stepper button:hover:not(:disabled){background:color-mix(in srgb,var(--hot) 10%,transparent)}
.stepper button:focus-visible{outline:2px solid var(--hot);outline-offset:-2px}
.stepper button:disabled{opacity:.3;cursor:default}
.stepper output{min-width:92px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;padding:0 6px;border-left:1px solid var(--rule);border-right:1px solid var(--rule);line-height:42px}
@media (max-width:640px){.wrow.exrow .wfix.kind,.wrow.exrow span.x{display:none}}  /* a phone: the row's name already says what it is */
@media (max-width:640px){.wrow.exrow .gfor{grid-row:2}.wrow.exrow .gcred{grid-row:3}}  /* ...so its second line is the grading buttons: nothing is left on a line of its own to open a second gap (16px where every other gap is 8px) */
@media (max-width:640px){.wrow + .wrow.exrow{padding-top:12px}}  /* (the space over a row that follows another, as every row has there) */
@media (max-width:640px){
  .exw{grid-template-columns:44px repeat(var(--n,5),minmax(0,1fr));gap:4px}
  .exw.fin{grid-template-columns:44px minmax(0,1fr)}
  .exfin{gap:4px}
  .exw-k b{font-size:13px} .exw-k span{display:none}
  .exd{min-height:84px;padding:5px 5px;font-size:12px}
  .exd.has{padding-left:24px}
  .exm{width:22px}.exm-bar{left:7px}
  .exm-tag{font-size:10.5px;padding:1px 4px}
  .exd-why{font-size:11px}
}

/* the letter-grade scheme picker (jt, 2026-10-01; the UI designer's scheme-picker). New rules only, built from HQ's
   tokens; no rule above is changed. Prefix: sp- */
.sp-root{display:flex;flex-direction:column;gap:14px;min-width:0}
.sp-notes{display:flex;flex-direction:column;gap:8px}.sp-notes:empty{display:none}.sp-notes .msg{margin:0}
.sp-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:0}
.sp-presets .opt{padding:10px 30px 10px 12px;min-height:44px}
.sp-presets .opt[aria-pressed="true"]::after{right:10px;top:8px}
.sp-presets .opt b{font:600 16px/1.2 var(--ui)}
.sp-presets .opt .muted{font-size:12.5px;line-height:1.35;font-variant-numeric:tabular-nums}
.sp-ptag{margin-top:3px;line-height:1}
#sp-h:focus{outline:none}
.sp-own{margin:0;font-size:14px;color:var(--soft);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.sp-exists{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.sp-exists .seg button{min-height:36px;padding:6px 14px;font-size:14px}
.sp-exists .tog{min-height:36px}
.card .foot .go[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
/* the picture: the whole scale, then a close-up whose lines can be dragged */
.sp-pic{display:flex;flex-direction:column;gap:4px;border:1px solid var(--rule);border-radius:12px;padding:12px 14px 10px;background:var(--paper)}
.sp-cap{display:flex;justify-content:space-between;gap:10px;font:500 11px var(--mono);color:var(--faint);letter-spacing:.02em}
.sp-overwrap{position:relative;padding:3px 0}
.sp-over{position:relative;height:12px;border-radius:3px;background:var(--rule);overflow:hidden}
.sp-over i{position:absolute;top:0;bottom:0;transition:left .35s cubic-bezier(.22,.61,.36,1),width .35s cubic-bezier(.22,.61,.36,1)}
.sp-win{position:absolute;top:0;bottom:0;border:1.5px solid var(--ink);border-radius:4px;pointer-events:none;transition:left .35s cubic-bezier(.22,.61,.36,1)}
.sp-track{position:relative;height:52px;margin-top:36px;border-radius:6px;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.sp-track.near{cursor:ew-resize}
.sp-band{position:absolute;top:0;bottom:0;display:grid;place-items:center;overflow:hidden;font:600 13px/1 var(--ui);color:var(--ink);
  transition:left .35s cubic-bezier(.22,.61,.36,1),width .35s cubic-bezier(.22,.61,.36,1),background .2s}
.sp-band.fA{background:color-mix(in srgb,var(--ink) 22%,var(--panel))}
.sp-band.fB{background:color-mix(in srgb,var(--ink) 15%,var(--panel))}
.sp-band.fC{background:color-mix(in srgb,var(--ink) 9%,var(--panel))}
.sp-band.fD{background:color-mix(in srgb,var(--ink) 4%,var(--panel))}
.sp-band.fF{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--rule) 6px 7px);color:var(--soft)}
.sp-band.on{background:var(--hot-soft);box-shadow:inset 0 -3px 0 var(--hot)}
.sp-band:first-child{border-radius:6px 0 0 6px}
.sp-thumb{position:absolute;top:-8px;bottom:-9px;width:22px;margin-left:-11px;border-radius:6px;pointer-events:none;z-index:1;transition:left .35s cubic-bezier(.22,.61,.36,1)}
.sp-thumb::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:2px;background:var(--ink);border-radius:1px}
.sp-thumb::after{content:"";position:absolute;left:5px;bottom:0;width:12px;height:12px;border-radius:50%;background:var(--panel);border:2px solid var(--ink)}
.sp-thumb.on{z-index:3}
.sp-thumb.on::before{background:var(--hot);width:3px;left:9.5px}
.sp-thumb.on::after{background:var(--hot);border-color:var(--hot)}
.sp-thumb:focus-visible{outline:2px solid var(--hot);outline-offset:1px;z-index:5}
.sp-tv{position:absolute;left:50%;bottom:calc(100% + 1px);transform:translateX(-50%);font:600 11px/1 var(--mono);color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap;padding:2px 3px;border-radius:5px}
.sp-thumb.hi .sp-tv{bottom:calc(100% + 15px)}
.sp-thumb.on .sp-tv{background:var(--hot);color:#fff;font-size:12px;padding:3px 6px;z-index:4}
.sp-pic.dragging .sp-band,.sp-pic.dragging .sp-thumb,.sp-pic.dragging .sp-over i{transition:none}
.sp-axis{position:relative;height:16px;margin-top:10px;font:500 11px/1 var(--mono);color:var(--faint)}
.sp-axis span{position:absolute;top:4px;transform:translateX(-50%)}
.sp-axis span::before{content:"";position:absolute;left:50%;top:-5px;height:4px;border-left:1px solid var(--rule-2)}
.sp-axis span:first-child{transform:none}.sp-axis span:first-child::before{left:0}
.sp-axis span:last-child{transform:translateX(-100%)}.sp-axis span:last-child::before{left:100%}
.sp-keys{margin:2px 0 0;font-size:13px;color:var(--soft)}
.sp-keys kbd{font:600 11.5px var(--mono);border:1px solid var(--rule-2);border-bottom-width:2px;border-radius:4px;padding:0 4px;background:var(--panel);color:var(--ink)}
@media (hover:none) and (pointer:coarse){.sp-kb{display:none}}
/* move a line: one small button per grade, and one editor for the grade that is picked */
.sp-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px;align-items:start}
.sp-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.sp-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sp-chips.plain{grid-template-columns:repeat(auto-fit,minmax(74px,1fr))}
.sp-chip{display:flex;justify-content:space-between;align-items:baseline;gap:6px;min-height:44px;padding:8px 11px;border:1px solid var(--rule-2);border-radius:10px;background:var(--panel);cursor:pointer;text-align:left;color:inherit}
.sp-chip:hover{border-color:var(--soft)}
.sp-chip .g{font:600 16px/1.2 var(--ui)}
.sp-chip .v{font:500 13.5px/1.2 var(--mono);font-variant-numeric:tabular-nums;color:var(--soft)}
.sp-chip[aria-expanded="true"]{border-color:var(--hot);background:var(--hot-soft);box-shadow:inset 3px 0 0 var(--hot)}
.sp-chip[aria-expanded="true"] .v{color:var(--ink)}
.sp-chip.narrow .v{color:var(--warn);font-weight:700}
.sp-f{margin:0;font:400 14.5px/1.4 var(--prose);color:var(--soft)}
.sp-f b{font:600 14px var(--ui);color:var(--warn)}
.sp-ed{display:flex;flex-direction:column;gap:10px;border:1px solid var(--rule-2);border-radius:12px;padding:12px 14px;background:var(--panel)}
.sp-ed.empty{border-style:dashed;background:transparent}
.sp-ed.empty p{margin:0;font:400 14.5px/1.4 var(--prose);color:var(--soft)}
.sp-now{margin:-4px 0 0;font:400 15px/1.35 var(--prose);font-variant-numeric:tabular-nums}
.sp-now b{font:700 13px var(--ui);color:var(--warn)}
.sp-stepper{display:inline-flex;align-items:stretch;width:fit-content;border:1px solid var(--rule-2);border-radius:999px;overflow:hidden;background:var(--panel)}
.sp-stepper button{width:56px;min-height:48px;border:0;background:none;font:600 24px/1 var(--ui);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.sp-stepper button:hover{background:var(--paper)}
.sp-stepper button:active{background:var(--rule)}
.sp-stepper button[aria-disabled="true"]{opacity:.32;cursor:not-allowed;background:none}
.sp-sel{position:relative;display:flex;border-left:1px solid var(--rule-2);border-right:1px solid var(--rule-2)}
.sp-sel::after{content:"▾";position:absolute;right:11px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:14px;color:var(--soft)}
.sp-sel select{-webkit-appearance:none;appearance:none;border:0;border-radius:0;background:var(--panel);font:700 22px/1 var(--ui);font-variant-numeric:tabular-nums;text-align:center;text-align-last:center;padding:0 30px 0 16px;min-width:116px;cursor:pointer;color:inherit}
.sp-stepper button:focus-visible,.sp-sel select:focus-visible{outline-offset:-3px}
.sp-lim{margin:0;font:400 14.5px/1.4 var(--prose);color:var(--soft)}
.sp-lim.stop{color:var(--ink)}
.sp-moveby{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.sp-moveby .seg button{min-width:48px;min-height:34px}
/* what the syllabus will say: a cut from the printed page (always paper white, like .paper) */
.sp-well{background:#E4DED3;border-radius:10px;padding:12px}
@media (prefers-color-scheme:dark){.sp-well{background:#0E0A09}}
.sp-excerpt{background:#fffefb;color:#16181c;box-shadow:0 2px 10px rgba(0,0,0,.18);padding:18px 22px;font:15px/1.5 var(--paperserif)}
.sp-excerpt h4{font:600 15px var(--paperserif);margin:0 0 4px}
.sp-excerpt p{margin:0;transition:opacity .15s}
.sp-excerpt .muted{color:#6E655C}
.sp-excerpt mark{background:#fbe3e3;color:inherit;padding:0 1px;border-radius:2px}
.sp-cur{box-shadow:inset 0 -2px 0 #c8402f}
.sp-wait{opacity:.5}
.sp-reads{font:15px/1.5 var(--prose)}
.sp-reads p{margin:0}
.sp-check{margin:0}
.sp-diff{display:flex;flex-direction:column;gap:8px}
.sp-diff .checks p b{color:var(--ink);font-family:var(--ui)}
/* after a change to a scale that students may already have */
.sp-stale{list-style:none;margin:0;padding:0}
.sp-stale li{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 0;border-top:1px solid var(--rule)}
.sp-stale li:first-child{border-top:0}
.sp-stale b{font:600 17px var(--word)}
.sp-stale p{margin:4px 0 0;font:15px/1.4 var(--prose);color:var(--soft)}
/* the picker opened later: a layer over the page it was opened from, dressed as the wizard is */
.sp-layer{position:fixed;inset:0;z-index:20;overflow:auto;overscroll-behavior:contain;background-color:var(--paper);background-image:radial-gradient(circle at 12px 12px,rgba(213,33,46,.13) 2.2px,transparent 2.6px);background-size:28px 28px}
/* the door: the letter-grades sentence in the syllabus preview is one underlined value */
.paper .hqv:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
@media (max-width:760px){
  .sp-two{grid-template-columns:minmax(0,1fr)}
  .sp-stale li{grid-template-columns:minmax(0,1fr);gap:8px}
}
@media (max-width:620px){
  .sp-pic{padding:10px 8px 8px;margin-inline:-6px}
  .sp-excerpt{padding:14px 16px}
  .sp-thumb::after{width:9px;height:9px;left:6.5px}
  #sp-apnote .link,#sp-under .link,.sp-own .link,.sp-check .link{display:inline-block;padding:11px 0;min-height:44px}
  .sp-stepper button{width:60px;min-height:52px}
  .sp-exists .seg button,.sp-exists .tog{min-height:44px}
  .sp-moveby .seg button{min-height:44px;min-width:56px}
  .sp-card .foot .go,.sp-card .foot .ghost,.sp-stale .ghost{min-height:44px}
  .sp-chip{padding:8px 9px}
  .sp-layer .wiz-top .link{display:inline-block;padding:11px 0;min-height:44px}
}
@media (prefers-reduced-motion:reduce){.sp-band,.sp-thumb,.sp-over i,.sp-win,.sp-excerpt p{transition:none}}

#sp-exnote:empty,#sp-apnote:empty,#sp-under:empty,#sp-check:empty{display:none}

/* "Tell the class?": asked once where a file's push to Canvas is reported (the Canvas card, a file's own page). Prefix: an- */
.an{border:1px solid var(--rule-2);border-radius:12px;background:var(--panel);padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.an.in{animation:rise .5s cubic-bezier(.22,.61,.36,1)}   /* only when the block first appears or its state changes, never on a redraw */
.an h3{margin:0;font:600 20px/1.2 var(--word);text-wrap:balance}
.an h3:focus,.an-m:focus,.an-res:focus,.an.quiet p:focus,.an-cv p:focus{outline:none}
.an-m{margin:0}
.an-sub{margin:-4px 0 0;font:400 15px/1.4 var(--prose);color:var(--soft)}
.an-pre{border:1px solid var(--rule-2);border-radius:10px;overflow:hidden;background:var(--panel);transition:opacity .15s}
.an-pre.wait{opacity:.55}   /* a line was switched: the old preview dims until the server's new one is here */
.an-prebar{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;padding:7px 12px;border-bottom:1px solid var(--rule);background:var(--paper);font:500 11.5px/1.3 var(--mono);color:var(--soft)}
.an-prebar .link{font:500 13px var(--ui);min-height:24px}
.an-msg{padding:12px 14px 6px;overflow-wrap:anywhere}
.an-title{font:700 18px/1.25 var(--ui);margin:0 0 8px}
.an-body p,.an-body ul{margin:0 0 8px;font:16px/1.45 var(--ui)}
.an-body ul{padding-left:20px}
.an-a{color:var(--ta);text-decoration:underline;text-underline-offset:2px}
.an-lines{list-style:none;margin:0;padding:0;border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.an-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:9px 12px;border-top:1px solid var(--rule)}
.an-lines li:first-child{border-top:0}
.an-lines p{margin:0;font:15px/1.4 var(--prose);overflow-wrap:anywhere}
.an-lines .pv{margin:0;grid-column:1}
.an-lines .tog,.an-lines .dfixed{grid-column:2;grid-row:1 / span 2;justify-self:end;min-height:32px;font-family:var(--ui)}
.an-lines .dfixed{display:inline-flex;align-items:center}
.an-lines li.off p{color:var(--soft)}
.an-lines li.off{background:var(--paper)}
.an-lines .tog[aria-checked="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.an-lines .tog[aria-checked="true"]::before{content:"✓ "}
.an [aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.an-when{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.an-when legend{padding:0;margin:0 0 6px;font:600 11px var(--ui);text-transform:uppercase;letter-spacing:.14em;color:var(--soft)}
.an-when label{position:relative;display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border:1px solid var(--rule-2);border-radius:999px;background:var(--panel);font:600 14px var(--ui);cursor:pointer}
.an-when input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.an-when label:has(input:checked){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.an-when label:has(input:focus-visible){outline:2px solid var(--hot);outline-offset:2px}
.an-when label:has(input:disabled){opacity:.5;cursor:not-allowed}   /* a day that already has its three */
.an .actions{margin-top:2px;align-items:center}
.an .actions .go,.an .actions .ghost{white-space:normal;text-align:center}
.an .row.small{min-height:24px}
.an-res{margin:0;font:400 15.5px/1.45 var(--prose);overflow-wrap:anywhere}
.an-res b{font-family:var(--ui);font-weight:600}
.an.quiet{border-style:dashed;background:transparent;padding:10px 14px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:14.5px}
.an.quiet p{margin:0;color:var(--soft)}
.an-q{display:flex;flex-direction:column;gap:8px}
.an-q:empty{display:none}
.an-cv{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:14.5px}
.an-cv:empty{display:none}
.an-cv p{margin:0;color:var(--soft)}
@media (max-width:620px){
  .an{padding:12px}
  .an-lines li{grid-template-columns:minmax(0,1fr)}
  .an-lines .tog,.an-lines .dfixed{grid-column:1;grid-row:auto;justify-self:start;margin-top:4px;min-height:40px}
  .an .actions .go,.an .actions .ghost{min-height:44px}
  .an-when label{min-height:44px}
  .an .link,.an-cv .link{min-height:44px;display:inline-flex;align-items:center}
  .an a.ghost.sm,.an .ghost.sm,.an-cv .ghost.sm{min-height:44px;display:inline-flex;align-items:center}
  .an-prebar .link{min-height:44px}
}
@media (prefers-reduced-motion:reduce){.an.in{animation:none}.an-pre{transition:none}}
/* scans read by the instructor's own Claude: the scan sheet, "The reading" on the file's page, "Your Claude" (reader brief item 3) */
.scnfoot{justify-content:flex-start}
.ocsent{margin:0;padding:8px 12px;border-left:3px solid var(--rule-2);background:var(--paper);font-size:15px}
.ocsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ocstep{display:flex;flex-direction:column;gap:6px;align-items:flex-start}.ocstep p{margin:0}
.ocstep.off{opacity:.5}.ocstep.done>b::after{content:" ✓";color:var(--hot)}
.ocaddr{display:block;max-width:100%;overflow-wrap:anywhere;padding:8px 10px;border:1px solid var(--rule-2);border-radius:8px;background:var(--paper);font:13px var(--mono);user-select:all}
.rdprob{margin:0;padding-left:18px;font-size:14px}
/* the Canvas tab (#/canvas/<course>): a rail of its pages beside the page; one row per thing of the ledger */
.cv{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;max-width:1140px;margin:0 auto;padding:24px 16px 64px;align-items:start}
.cv-page{max-width:860px;display:flex;flex-direction:column;gap:14px;min-width:0}
.cv-page h1{font:600 32px/1.15 var(--word);margin:0}
.cv-sub{font:400 17px/1.45 var(--prose);color:var(--soft);margin:-4px 0 0}
.cv-rail{display:flex;flex-direction:column;gap:2px;position:sticky;top:16px}
.cv-rail a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;text-decoration:none;color:var(--soft);font-weight:600}
.cv-rail a:hover{background:var(--panel)}
.cv-rail a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.cv-rail a[aria-current="page"] .tag{background:var(--paper);color:var(--ink)}
.cv-railsel{display:none}
.cv-look{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;padding:8px 12px;border:1px solid var(--rule);border-radius:12px;font-size:14px}
.cv-sec{display:flex;flex-direction:column;gap:8px}.cv-sec h2{font:600 20px/1.2 var(--word);margin:10px 0 0;display:flex;gap:12px;align-items:baseline}.cv-sec h2 .link{font:500 13px var(--ui)}
.cv-rows{display:flex;flex-direction:column;gap:8px}
.cv-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;gap:14px;align-items:start;background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:12px 14px}
.cv-row p{margin:2px 0 0}.cv-what{display:flex;gap:10px;align-items:flex-start}.cv-what input{margin-top:4px;width:18px;height:18px}
.cv-kind{font-size:13px}.cv-state{display:flex;flex-direction:column;gap:4px;font-size:14px;min-width:0}.cv-state ul{margin:4px 0 0 18px;padding:0}
.cv-tells .label{margin-right:4px}
.cv-acts{display:flex;flex-direction:column;gap:6px;align-items:flex-end}.cv-acts .muted{font-size:13px;text-align:right}
.cv-bad,.link.cv-bad{color:var(--bad)}
.cv-st{display:inline-block;width:fit-content;font:700 11px var(--ui);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:2px 9px;background:var(--rule);color:var(--soft);border:1.5px solid transparent}
.cv-st.ok{background:var(--teach-soft);color:var(--teach)}
.cv-st.held{background:transparent;border:1.5px dashed var(--rule-2);font-style:italic}
.cv-st.warn{background:var(--warn-soft);color:var(--warn)}
.cv-st.hand{background:var(--panel);border-color:var(--warn);color:var(--warn)}
.cv-st.gone{background:transparent;border:1.5px dashed var(--soft)}
.cv-st.bad{background:var(--hot-soft);color:var(--bad)}
.cv-pv{border:1px solid var(--rule-2);border-radius:10px;background:var(--panel);padding:14px 16px;font:16px/1.5 var(--prose);display:flex;flex-direction:column;gap:6px;overflow-x:auto}
.cv-pv p{margin:0}.cv-pv table{border-collapse:collapse;font-variant-numeric:tabular-nums}.cv-pv th,.cv-pv td{border:1px solid var(--rule);padding:4px 8px;text-align:left}
.cv-cap{font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--soft)}
.cv-plain{white-space:pre-wrap}
.sheet.cv-sheet{max-width:720px;margin-top:6vh}.cv-sheetbody{padding:16px 18px;display:flex;flex-direction:column;gap:10px}.cv-sheetbody .actions,.cv-rep .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cv-panels{display:flex;flex-direction:column;gap:12px}.cv-panels .panel h2{font-size:20px;margin-bottom:6px}
.cv-card{display:flex;flex-direction:column;gap:8px}.cv-card h3{margin:0;font:600 17px var(--word)}
.cv-week{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:4px 0}.cv-week .label{min-width:64px}
.cv-choice{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0}
.cv-tab{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid var(--rule)}
.cv-link{display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:6px 0}
.cv-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.cv-groups{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;background:var(--panel);border-radius:12px;overflow:hidden}
.cv-groups th,.cv-groups td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule);font-size:14.5px}
.cv-groups tr.cv-bracket td{font-weight:600;border-left:2px solid var(--rule-2)}
.cv-groups tr.cv-block td:first-child{padding-left:26px;border-left:2px solid var(--rule-2)}
.cv-weigh{border-left:4px solid var(--hot);display:flex;flex-direction:column;gap:8px}.cv-weigh h2{font-size:20px}
.cv-points{max-width:220px}
.cv-tog{margin:8px 0 4px}
.clause.cv-item{margin-left:24px}
@media (max-width:980px){.cv{grid-template-columns:minmax(0,1fr)}.cv-rail{display:none}.cv-railsel{display:flex}}
@media (max-width:720px){.cv-row{grid-template-columns:minmax(0,1fr)}.cv-acts{align-items:flex-start}.cv-acts .muted{text-align:left}.cv-two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .tabs{flex-wrap:wrap;row-gap:4px}.tabs button{min-height:44px}
  .cv-page button,.cv-page select,.cv-rail a,.cv-railsel select{min-height:44px}
}

/* the Office hours tab: its two views, and the house rules (2026-10-03) */
.ohbar{margin:4px 0 12px}
.hrules{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:14px}
.hrule .choices{margin-top:4px}
.sylrules{margin-top:6px;gap:10px}
details.cset{margin-top:10px}
details.cset summary{cursor:pointer;font-size:14px;color:var(--soft)}
/* Settings (#/settings): the account's own things, a rail of sections beside the page; on a phone the rail is a wrapped row */
.st-page{display:grid;grid-template-columns:200px minmax(0,760px);gap:28px;justify-content:center;padding:8px 24px 64px}
.st-rail{position:sticky;top:16px;align-self:start;display:flex;flex-direction:column;gap:2px}
.st-rail a{padding:6px 10px;border-radius:8px;text-decoration:none;color:var(--soft);font-size:15px}
.st-rail a[aria-current="true"]{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.st-rail a.st-danger{color:var(--bad)}
.st-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.st-head h1{font:600 34px/1.1 var(--word);margin:0}
.st-head p{margin:6px 0 0;color:var(--soft)}
.st-sec{scroll-margin-top:16px}
.st-sec h2:focus,.st-head h1:focus{outline:none}  /* headings focused by the page (a deep link, a rail press): the rail marks where you are */
.st-sec .row.st-top{justify-content:space-between;align-items:baseline;flex-wrap:wrap}
.st-state{font-size:14px;padding:2px 10px;border-radius:999px;background:var(--teach-soft);color:var(--teach);font-weight:600;white-space:nowrap}
.st-state.off{background:var(--paper);color:var(--soft);border:1px solid var(--rule)}
.st-state.busy{background:var(--warn-soft);color:var(--warn)}
.st-state.bad{background:var(--hot-soft);color:var(--bad)}
.st-why{font:16px/1.45 var(--prose);color:var(--soft);margin:6px 0 12px}
.st-list{list-style:none;margin:0;padding:0}
.st-list li{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:10px 0;border-top:1px solid var(--rule)}
.st-list li:first-child{border-top:0}
.st-list b{min-width:110px}
.st-list .st-meets{flex:1 1 180px;min-width:0}
.st-danger-panel{border:1.5px solid var(--bad)}
.st-danger-panel h2{color:var(--bad)}
.ghost.bad{color:var(--bad);border-color:var(--bad)}
.sheet.st-ask{max-width:560px}
.go.st-wipego{background:var(--bad);color:#fff}
@media (prefers-color-scheme:dark){.go.st-wipego{color:var(--paper)}}  /* the dark theme's red is light: dark letters on it (as .exm-tag) */
@media (max-width:820px){.st-page{grid-template-columns:minmax(0,1fr);padding:4px 16px 48px;gap:14px}
  .st-rail{position:static;flex-direction:row;flex-wrap:wrap;gap:4px}.st-rail a{padding:4px 8px;font-size:14px;border:1px solid var(--rule)}
  .st-head h1{font-size:28px}.st-page .panel{padding:16px}}