/* Coast: the hosted dashboard's design, served as a file so the strict
   Content-Security-Policy stays (no inline styles anywhere).

   The world, from DESIGN.md (2026-09-13): no containers. Structure comes
   from spacing, hairlines and two type weights, never from boxes inside
   boxes. A warm off-white ground by default and one flat dark. One accent
   for links and the current thing, red only for a deadline, and every
   course is a 7px dot beside a name that stays ink. Inter
   throughout, with tabular numerals; monospace nowhere on the dashboard. */
/* Inter and Source Serif 4 (SIL OFL), self-hosted: the policy allows no font from
   another origin. Claude.ai's pairing in free faces (2026-09-29). */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(site-inter.woff2?v=3100e775e861) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url(coast-serif.woff2?v=f2ea9c12d2fe) format("woff2")}
:root{
  --ground:#faf9f6; --ink:#1c1b19;
  --dim:rgba(28,27,25,.64); --faint:rgba(28,27,25,.5);
  --hairline:rgba(28,27,25,.09); --rule:rgba(28,27,25,.16);
  --wash:rgba(28,27,25,.04);
  --accent:#1e88d0; --accent-ink:#166fae;
  --red:#c0392b; --red-wash:#fde8e4;
  --brass:#9a6200; --clear:#1a7a4a;
  --c1:#3a55d8; --c2:#1f9a5f; --c3:#d19a2b; --c4:#e0703f;
  --c5:#d94f86; --c6:#2aa3c8; --c7:#8b5cf6; --c8:#5f7fb8;
  /* A tint as TEXT (the next class's name): each darkened to 4.5:1 on its own band. */
  --c1-ink:#3a55d8; --c2-ink:#187649; --c3-ink:#87631c; --c4-ink:#af491c;
  --c5-ink:#bf2965; --c6-ink:#1d718b; --c7-ink:#753df4; --c8-ink:#4868a1;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --dur:200ms; --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light; accent-color:var(--accent);
}
:root:not([data-theme="light"]){@media(prefers-color-scheme:dark){
  --ground:#151514; --ink:#ecebe6;
  --dim:rgba(236,235,230,.6); --faint:rgba(236,235,230,.45);
  --hairline:rgba(236,235,230,.09); --rule:rgba(236,235,230,.16);
  --wash:rgba(236,235,230,.05);
  --accent:#7cc4ff; --accent-ink:#a3d6ff;
  --red:#ff8078; --red-wash:#3d1e1b;
  --brass:#f0b95a; --clear:#5fd39a;
  --c1:#8f9bff; --c2:#5fd39a; --c3:#f0c060; --c4:#ff9a6a;
  --c5:#ff7fae; --c6:#6fd0ea; --c7:#b59cff; --c8:#9fb4d8;
  --c1-ink:#8f9bff; --c2-ink:#5fd39a; --c3-ink:#f0c060; --c4-ink:#ff9a6a;
  --c5-ink:#ff7fae; --c6-ink:#6fd0ea; --c7-ink:#b59cff; --c8-ink:#9fb4d8;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --ground:#151514; --ink:#ecebe6;
  --dim:rgba(236,235,230,.6); --faint:rgba(236,235,230,.45);
  --hairline:rgba(236,235,230,.09); --rule:rgba(236,235,230,.16);
  --wash:rgba(236,235,230,.05);
  --accent:#7cc4ff; --accent-ink:#a3d6ff;
  --red:#ff8078; --red-wash:#3d1e1b;
  --brass:#f0b95a; --clear:#5fd39a;
  --c1:#8f9bff; --c2:#5fd39a; --c3:#f0c060; --c4:#ff9a6a;
  --c5:#ff7fae; --c6:#6fd0ea; --c7:#b59cff; --c8:#9fb4d8;
  --c1-ink:#8f9bff; --c2-ink:#5fd39a; --c3-ink:#f0c060; --c4-ink:#ff9a6a;
  --c5-ink:#ff7fae; --c6-ink:#6fd0ea; --c7-ink:#b59cff; --c8-ink:#9fb4d8;
  color-scheme:dark;
}
/* Text size: seven steps, one multiplier, every size below in rem. */
html{font-size:calc(100% * var(--type,1));scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
html[data-type="-3"]{--type:.82}html[data-type="-2"]{--type:.88}html[data-type="-1"]{--type:.94}
html[data-type="1"]{--type:1.07}html[data-type="2"]{--type:1.15}html[data-type="3"]{--type:1.25}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:.9375rem;line-height:1.5;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums}
::selection{background:color-mix(in srgb,var(--accent) 22%,transparent)}
a{color:var(--accent-ink);text-decoration:none;text-underline-offset:2px}
a:hover{color:var(--accent-ink);text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding-left:1.1em}
b,strong{font-weight:600}
.dim{color:var(--dim)}
/* Course tints: the dot before a name, the edge and wash of a week block. */
.ci-1{--tint:var(--c1);--tint-ink:var(--c1-ink)}.ci-2{--tint:var(--c2);--tint-ink:var(--c2-ink)}.ci-3{--tint:var(--c3);--tint-ink:var(--c3-ink)}.ci-4{--tint:var(--c4);--tint-ink:var(--c4-ink)}
.ci-5{--tint:var(--c5);--tint-ink:var(--c5-ink)}.ci-6{--tint:var(--c6);--tint-ink:var(--c6-ink)}.ci-7{--tint:var(--c7);--tint-ink:var(--c7-ink)}.ci-8{--tint:var(--c8);--tint-ink:var(--c8-ink)}
.cname::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--tint,var(--dim));margin-right:9px;vertical-align:1px}
/* ---- the page --------------------------------------------------------- */
.wrap{max-width:1440px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;
  padding:22px max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
/* .top on the setup pages (onboarding.py): the brand at the left, the
   account line at the right. On the dashboard the nav is the rail, and
   .wrap>.top is the date line alone. */
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:24px}
.top .lhs{display:contents}
.wrap>.top{display:flex;justify-content:flex-end;align-items:baseline}
/* School mail: the agent's report. The sender and date in the first column, subject and the agent's line in the middle, Open and Ask at the end. */
#mail .row .who{display:flex;flex-direction:column;gap:2px;white-space:normal}
#mail .row .who .dim{font-weight:400;font-size:.8125rem}
#mail .row .what{display:flex;flex-direction:column;gap:2px}
#mail .row .what .dim{font-size:.9375rem}
#mail .where{align-items:flex-start}
#mail .mdone{display:inline;margin:0}
.ask{font:inherit;font-size:.875rem;font-weight:600;color:var(--accent-ink);background:none;border:0;padding:0;cursor:pointer}
.ask:hover{color:var(--accent-ink);text-decoration:underline}
.ask.did{color:var(--dim)}
/* The ask box: a popover after the nav, one field and the agent's name, the
   input on the same rule as .btn. Sits by the rail's foot on a desktop and
   above the bottom bar on a phone; the ask button in the nav opens it. */
.askbtn{background:none;border-top:0;border-bottom:0;font-family:inherit}
.askbtn[aria-expanded=true]{color:var(--ink);font-weight:600}
.askbtn[aria-expanded=true] .tico{stroke-width:2.1}
.askbox{position:fixed;z-index:40;width:min(440px,calc(100vw - 24px));padding:12px;background:var(--ground);
  border:1px solid var(--rule);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.14)}
.askbox[hidden]{display:none}
.askbox .note{margin:0}
.settings .agentnote{margin:-6px 0 4px;font-size:.875rem}
form.chat{display:flex;gap:8px;align-items:stretch}
form.chat input{flex:1;min-width:0;font:inherit;color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:8px;padding:8px 12px}
form.chat input:focus{outline:none;border-color:var(--ink)}
form.chat button{font:inherit;font-weight:600;color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:8px;padding:8px 16px;cursor:pointer;white-space:nowrap}
form.chat button:hover{border-color:var(--ink)}
form.chat button.did{color:var(--dim)}
/* The ask box's answers, on the student's own Claude page (claude-ask.js, 2026-10-03). */
.askbox .asked{max-height:min(50vh,420px);overflow-y:auto;margin-top:10px;white-space:pre-wrap;overflow-wrap:anywhere}
.askbox .asked:empty{display:none}
.oldcopy{padding:12px 16px;margin:0;color:var(--ink);border-bottom:1px solid var(--rule)}
/* Ask as a /btw window on the student's own Claude or ChatGPT page (claude-ask.js; Ari, 2026-10-03,
   approved mock-up): the thread above the input, a footer of keys under it; a sheet from the bottom on a
   phone. Then, the same day: not modal and no scrim, dragged by its header to where the student wants it.
   Motion is opacity and transform only (decision 2026-09-29). */
.askbox.btw{left:0;right:0;top:14vh;bottom:auto;margin-inline:auto;z-index:61;width:min(640px,calc(100vw - 32px));
  max-height:min(72vh,640px);padding:0;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.12)}
.askbox.btw[hidden]{display:none}
.askbox.btw.moved{margin:0;right:auto;bottom:auto}
.btw-head{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 16px;border-bottom:1px solid var(--hairline);
  cursor:grab;user-select:none;touch-action:none}
.btw-head:active{cursor:grabbing}
.btw-title{flex:1;font-size:.8125rem;font-weight:600;color:var(--dim)}
.btw-close{font:inherit;font-size:.875rem;line-height:1;color:var(--dim);background:none;border:0;border-radius:6px;padding:4px 6px;cursor:pointer}
.btw-close:hover{background:var(--wash);color:var(--ink)}
.askbox.btw .asked{flex:0 1 auto;max-height:none;margin:0;padding:6px 16px 4px;overflow-y:auto}
.askbox.btw .asked .you{margin:14px 0 6px;font-size:.875rem;font-weight:400;color:var(--dim)}
.askbox.btw .asked .you:not(:first-child){padding-top:12px;border-top:1px solid var(--hairline)}
.askbox.btw .asked .who{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:.8125rem;font-weight:600}
.askbox.btw .asked .who::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brass)}
.askbox.btw .asked .said{line-height:1.55;font-size:.9375rem}
.askbox.btw .asked .said.live:not(.dim)::after{content:"";display:inline-block;width:7px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--ink);opacity:.55}
.askbox.btw .asked .handoff{margin:8px 0 10px;font:inherit;font-size:.875rem;font-weight:600;color:var(--accent-ink);background:none;border:1px solid var(--hairline);border-radius:999px;padding:6px 12px;cursor:pointer}
.askbox.btw .asked .mailbody{white-space:pre-wrap}
.askbox.btw form.chat{align-items:center;gap:10px;padding:14px 16px}
.askbox.btw.has-thread form.chat{border-top:1px solid var(--hairline)}
.askbox.btw form.chat input{border:0;padding:0;font-size:1.0625rem;background:transparent}
.askbox.btw form.chat input::placeholder{color:var(--faint)}
.askbox.btw form.chat button{font-size:0;padding:1px 6px;border-radius:5px;color:var(--faint)}
.askbox.btw form.chat button::before{content:"\23CE";font-size:.75rem}
.btw-foot{display:flex;gap:14px;align-items:center;padding:10px 16px;border-top:1px solid var(--hairline);font-size:.75rem;color:var(--faint)}
.btw-foot b{font-weight:500;color:var(--dim)}
.btw-foot .fresh{margin-left:auto;font:inherit;color:var(--dim);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
@media(prefers-reduced-motion:no-preference){
  .askbox.btw:not([hidden]){animation:btwin 180ms var(--ease)}
}
@keyframes btwin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:640px){
  .askbox.btw,.askbox.btw.moved{top:auto!important;left:0!important;right:0;bottom:0;width:auto;max-height:82vh;border-radius:16px 16px 0 0;border-bottom:0}
  .btw-head{cursor:default}
  .btw-foot .k{display:none}
}
.asked p{margin:0}
.asked .you{margin-top:12px;font-weight:600}
.asked .you:first-child{margin-top:0}
.asked .fresh{font:inherit;font-size:.875rem;color:var(--dim);background:none;border:0;padding:8px 0 0;cursor:pointer;text-decoration:underline}
/* School mail is a fold: its header is the summary line, a chevron at the right that turns when open. */
details.mfold>summary{cursor:pointer;list-style:none}
details.mfold>summary::-webkit-details-marker{display:none}
details.mfold>summary .shead span::after{content:" ›";display:inline-block;transition:transform .15s}
details.mfold[open]>summary .shead span::after{transform:rotate(90deg)}
details.mrest{margin-top:8px}
details.mrest>summary{cursor:pointer;color:var(--dim);font-size:.9375rem;list-style:none}
details.mrest>summary::-webkit-details-marker{display:none}
details.mrest>summary::after{content:" ›";color:var(--dim)}
.prof{display:block;font-size:.8125rem;color:var(--dim);margin-top:2px}
.prof a{color:var(--dim)}.prof a:hover{color:var(--accent-ink)}
.top .rhs{display:flex;align-items:center;justify-content:flex-end;gap:14px;position:relative}
.top .date{text-align:right}
.brand{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.brand:hover{text-decoration:none;color:var(--ink)}
/* The nav: a rail down the left of a desktop screen, the five sections as
   a bottom bar on a phone (Ari, 2026-09-15/16). Either way each button is
   an icon over its name; the checked radio's button is ink and 600, its
   icon a heavier stroke, and on the rail the accent marks its left edge. */
.rail{display:flex;align-items:center;justify-content:space-between}
.pgbtn{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--dim);cursor:pointer;
  font-size:max(11px,.6875rem);line-height:1.1;letter-spacing:-.01em;white-space:nowrap;
  padding:8px 4px;border-left:2px solid transparent;border-right:2px solid transparent}
.pgbtn:hover{color:var(--ink);text-decoration:none}
.tico{display:block;width:25px;height:25px}
/* Settings behind a three-line button at the top right of a phone (Ari,
   2026-09-16: the gear alone read as a sun). The menu holds the same label
   the rail pins at its foot on a desktop, where the button is hidden. */
.menuin{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.menubtn{display:none;width:34px;height:30px;place-items:center;border-radius:8px;cursor:pointer}
.menubtn::before{content:"";width:18px;height:2px;border-radius:1px;background:var(--ink);box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink)}
.menubtn:hover,.menuin:checked~.menubtn{background:var(--wash)}
.menuin:focus-visible~.menubtn{outline:2px solid var(--accent);outline-offset:1px}
/* The pages: one document, the checked radio picks the sections shown. */
.pgin{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
#pg-now:checked~.rail [for=pg-now],#pg-inbox:checked~.rail [for=pg-inbox],#pg-upload:checked~.rail [for=pg-upload],#pg-earn:checked~.rail [for=pg-earn],#pg-status:checked~.rail [for=pg-status],#pg-settings:checked~.rail [for=pg-settings]{color:var(--ink);font-weight:600}
#pg-now:checked~.rail [for=pg-now] .tico,#pg-inbox:checked~.rail [for=pg-inbox] .tico,#pg-upload:checked~.rail [for=pg-upload] .tico,#pg-earn:checked~.rail [for=pg-earn] .tico,#pg-status:checked~.rail [for=pg-status] .tico,#pg-settings:checked~.rail [for=pg-settings] .tico{stroke-width:2.1}
#pg-now:focus-visible~.rail [for=pg-now],#pg-inbox:focus-visible~.rail [for=pg-inbox],#pg-upload:focus-visible~.rail [for=pg-upload],#pg-earn:focus-visible~.rail [for=pg-earn],#pg-status:focus-visible~.rail [for=pg-status],#pg-settings:focus-visible~.rail [for=pg-settings]{outline:2px solid var(--accent);outline-offset:-2px}
/* A page of its own in this frame (Careers, plan 2026-10-01): its rail is links, and marks its own row. */
.rail a.pgbtn[aria-current]{color:var(--ink);font-weight:600}
.rail a.pgbtn[aria-current] .tico{stroke-width:2.1}
.rail a.pgbtn:hover,.rail a.clrow:hover{text-decoration:none}      /* a row that is a link hovers as a row, not as a link */
.rail a.pgbtn:not([aria-current]):hover{color:var(--dim)}
.rail a.clrow:hover,.rail a.pgbtn[aria-current]:hover{color:var(--ink)}
#pg-now:checked~.cols>section:not([data-page=now]){display:none}#pg-classes:checked~.cols>section:not([data-page=classes]){display:none}#pg-inbox:checked~.cols>section:not([data-page=inbox]){display:none}#pg-upload:checked~.cols>section:not([data-page=upload]){display:none}#pg-earn:checked~.cols>section:not([data-page=earn]){display:none}#pg-status:checked~.cols>section:not([data-page=status]){display:none}#pg-settings:checked~.cols>section:not([data-page=settings]){display:none}
.golab{color:var(--accent-ink);cursor:pointer}
.golab:hover{color:var(--accent-ink);text-decoration:underline}
.top .date{font-size:.9375rem;color:var(--dim);white-space:nowrap}
@media(max-width:1099px){.top .date{display:none}.wrap>.top{display:none}}   /* the dashboard's top line is the date alone */
.cols{display:flex;flex-direction:column;gap:44px;padding:40px 0 48px;flex:1}
.foot{font-size:.8125rem;color:var(--faint);padding:0 0 22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px}
.footnav{display:flex;gap:16px}
.sayin{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.saybox{display:none;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto}
.sayin:checked~.saybox{display:block}
.saybox .sayhead{margin:0 0 10px;font-weight:600}
.saybox p{margin:0}
.saybox form{display:flex;flex-direction:column;gap:12px}
.saypick{display:flex;flex-wrap:wrap;gap:6px 20px}
.saybox textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:8px;padding:10px 12px;resize:vertical}
.saybox small{color:var(--dim);font-size:.875rem}
.saybox button{font:inherit;font-weight:600;color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:8px;padding:8px 16px;cursor:pointer;align-self:flex-start}
.saybox button:hover{border-color:var(--ink)}
.sayin:checked~.rail .saybtn{color:var(--ink);font-weight:600}
.sayin:focus-visible~.rail .saybtn{outline:2px solid var(--accent);outline-offset:-2px}
.foot a,.foot form.inline button{font:inherit;font-weight:400;color:var(--dim);background:none;border:0;border-radius:0;padding:0;margin:0;cursor:pointer}
.foot a:hover,.foot form.inline button:hover{color:var(--ink);text-decoration:underline}
/* A section: a heading with a note at its right, on a rule, then rows. */
section{display:flex;flex-direction:column;min-width:0}
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:9px;border-bottom:1px solid var(--rule)}
.shead h2{font-size:1.125rem;font-weight:600;letter-spacing:-.01em}
.shead span,.shead a{font-size:.8125rem;color:var(--dim)}
.shead a{color:var(--accent-ink)}
.note{color:var(--dim);font-size:.9375rem;padding:13px 0 0}
/* The one thing that may take colour as a block: a condition under which
   the rest of the page is stale, or a deadline. */
.note.alarm{color:var(--red);background:var(--red-wash);border-left:3px solid var(--red);
  border-radius:0 6px 6px 0;padding:10px 14px}
.note.alarm a{color:inherit;text-decoration:underline}
/* The ended account's prompt (decision 2026-09-30): the alarm's colours above every tab, the words and one button. */
.ended{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px;color:var(--red);background:var(--red-wash);
  border-left:3px solid var(--red);border-radius:0 6px 6px 0;padding:14px 18px}
.ended p{margin:0;flex:1 1 22rem}
.ended a.btn{margin:0;color:var(--ground);background:var(--ink);border-color:var(--ink);text-decoration:none;white-space:nowrap}
.ended a.btn:hover{background:color-mix(in srgb,var(--ink) 86%,var(--ground))}
.note.offer{color:var(--ink);display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.note.offer form.inline{display:inline}
/* ---- Today ------------------------------------------------------------ */
.lead{gap:8px;background:color-mix(in srgb,var(--tint,var(--accent)) 14%,transparent);border-left:4px solid var(--tint,var(--accent));
  border-radius:0 12px 12px 0;padding:26px 28px}
/* The two counts under it: figure over label, a door each, spacing
   between them and no line. */
.acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:-28px}
.act{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;cursor:pointer;color:var(--ink);text-decoration:none;
  transition:background 180ms}
.act:hover{background:var(--wash)}
.act b{font-size:1.75rem;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.act span{font-size:.875rem;color:var(--dim)}
.lead:has(.ci-1){--tint:var(--c1);--tint-ink:var(--c1-ink)}.lead:has(.ci-2){--tint:var(--c2);--tint-ink:var(--c2-ink)}.lead:has(.ci-3){--tint:var(--c3);--tint-ink:var(--c3-ink)}.lead:has(.ci-4){--tint:var(--c4);--tint-ink:var(--c4-ink)}
.lead:has(.ci-5){--tint:var(--c5);--tint-ink:var(--c5-ink)}.lead:has(.ci-6){--tint:var(--c6);--tint-ink:var(--c6-ink)}.lead:has(.ci-7){--tint:var(--c7);--tint-ink:var(--c7-ink)}.lead:has(.ci-8){--tint:var(--c8);--tint-ink:var(--c8-ink)}
.lead .nextmeta b{color:var(--tint-ink,var(--ink))}
.lead h1{font-size:2.75rem;font-weight:700;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
.lead h1 .cname::before{display:none}
.lead h1 .cname{color:var(--tint-ink,var(--ink))}
.nextmeta{font-size:1.0625rem;display:flex;flex-wrap:wrap;gap:0 14px;align-items:baseline}
.nextmeta b{font-weight:600}
.nextmeta span{color:var(--dim)}
.summary{display:flex;flex-direction:column;gap:4px;margin-top:-8px}
.summary .sub{font-size:.9375rem;font-weight:600}
.pvmeta{font-size:.8125rem;color:var(--dim)}
/* The masthead (redesign 2026-09-25): the date in the serif (New York on
   Apple, Georgia elsewhere), the one place the page wears it, and the
   greeting under it in dim. It replaces the top line's date on Today. */
.hello .mastdate{font-family:var(--serif);font-size:2.75rem;font-weight:400;
  line-height:1.05;letter-spacing:-.01em}
.hello .hi{font-size:1.0625rem;color:var(--dim);margin-top:6px}
.hello{margin-bottom:-20px}
.pvsum,.pvnone{font-size:.9375rem;line-height:1.55;max-width:60ch;color:color-mix(in srgb,var(--ink) 78%,transparent)}
.pvnone{color:var(--dim)}
.vmemo{font-size:.75rem;color:var(--faint)}
/* The band's right column: what the next class's last session covered. */
.lastcls{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.lastcls .sub{font-size:.9375rem;font-weight:600}
.lastcls .pvsum{color:var(--dim)}
/* Your day, vertical (decision 2026-09-29, Today in two columns): the
   hours down the left, a row of 16px per quarter hour, the classes and the
   student's events as blocks in the lane beside them, the deadlines as red
   rules across it, now as a tag in the hours. Placed by class, since the
   CSP allows no inline style: .s<n> is the starting quarter, .d<n> the
   span, .h<hours> the window. The rows under it on a phone. */
.day{display:none;position:relative;grid-template-columns:64px minmax(0,1fr);padding-top:10px}
.day .hrs{grid-column:1;grid-row:1;display:grid;font-size:.75rem;color:var(--dim)}
.day .hrs>span{grid-row-end:span 4;border-top:1px solid var(--hairline);padding-top:2px;line-height:1}
.day ol{grid-column:2;grid-row:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr)}
/* One column: items that overlap share it side by side, the rest keep the full width (in-house review). */
.day ol>li{grid-column:1}
.day .lw2,.day .lw3,.day .lw4{justify-self:start}.day .lw2{width:calc(50% - 2px)}.day .lw3{width:calc(33.33% - 3px)}.day .lw4{width:calc(25% - 3px)}
.day .lw2.lx1{margin-left:calc(50% + 2px)}.day .lw3.lx1{margin-left:calc(33.33% + 1px)}.day .lw3.lx2{margin-left:calc(66.66% + 3px)}.day .lw4.lx1{margin-left:calc(25% + 1px)}.day .lw4.lx2{margin-left:calc(50% + 2px)}.day .lw4.lx3{margin-left:calc(75% + 3px)}
.day .blk{display:flex;flex-direction:column;gap:1px;min-width:0;padding:4px 8px;overflow:hidden;
  background:color-mix(in srgb,var(--tint,var(--dim)) 13%,transparent);border-left:3px solid var(--tint,var(--dim));
  border-radius:0 6px 6px 0}
.day .blk.own{--tint:var(--faint)}
.day .blk b{font-size:.8125rem;font-weight:600;line-height:1.25;color:var(--tint-ink,var(--ink));
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.day .blk span{font-size:.75rem;line-height:1.3;color:var(--dim)}
/* An event under an hour: its name and time on one line, the block no shorter than half an hour. */
.day .blk.pin{flex-direction:row;align-items:center;gap:6px;padding:0 8px}
.day .blk.pin b,.day .blk.pin span{line-height:15px}
.day .blk.pin b,.day .blk.pin span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.day .dls{position:relative;z-index:1;pointer-events:none}
.day .dl[title]{pointer-events:auto;cursor:default}   /* the merged tag's tooltip lists every title */
/* A deadline: a red-topped tag at the lane's right edge, on the ground, so it never runs through a class's text. */
.day .dl{grid-row-end:span 1;align-self:start;justify-self:end;max-width:75%;min-width:0;border-top:2px solid var(--red);
  border-radius:0 0 4px 4px;background:var(--ground);padding:1px 6px;font-size:.6875rem;font-weight:600;color:var(--red);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Now: a tag in the hours at its quarter, never a line through the lane,
   which hid the next class (Ari, 2026-09-28). */
.day .nowat{grid-column:1;grid-row:1;display:grid;position:relative;z-index:2;pointer-events:none}
.day .nowat span{grid-row-end:span 1;align-self:start;justify-self:start;margin-top:-8px;padding:1px 6px;border-radius:999px;
  background:var(--accent-ink);color:var(--ground);font-size:.625rem;font-weight:600;line-height:1.4;white-space:nowrap}
.day.h13 .hrs,.day.h13 ol,.day.h13 .nowat{grid-template-rows:repeat(52,12px)}.day.h14 .hrs,.day.h14 ol,.day.h14 .nowat{grid-template-rows:repeat(56,12px)}.day.h15 .hrs,.day.h15 ol,.day.h15 .nowat{grid-template-rows:repeat(60,12px)}.day.h16 .hrs,.day.h16 ol,.day.h16 .nowat{grid-template-rows:repeat(64,12px)}.day.h17 .hrs,.day.h17 ol,.day.h17 .nowat{grid-template-rows:repeat(68,12px)}.day.h18 .hrs,.day.h18 ol,.day.h18 .nowat{grid-template-rows:repeat(72,12px)}.day.h19 .hrs,.day.h19 ol,.day.h19 .nowat{grid-template-rows:repeat(76,12px)}.day.h20 .hrs,.day.h20 ol,.day.h20 .nowat{grid-template-rows:repeat(80,12px)}.day.h21 .hrs,.day.h21 ol,.day.h21 .nowat{grid-template-rows:repeat(84,12px)}.day.h22 .hrs,.day.h22 ol,.day.h22 .nowat{grid-template-rows:repeat(88,12px)}.day.h23 .hrs,.day.h23 ol,.day.h23 .nowat{grid-template-rows:repeat(92,12px)}.day.h24 .hrs,.day.h24 ol,.day.h24 .nowat{grid-template-rows:repeat(96,12px)}
.day .s1{grid-row-start:1}.day .s2{grid-row-start:2}.day .s3{grid-row-start:3}.day .s4{grid-row-start:4}.day .s5{grid-row-start:5}.day .s6{grid-row-start:6}.day .s7{grid-row-start:7}.day .s8{grid-row-start:8}.day .s9{grid-row-start:9}.day .s10{grid-row-start:10}.day .s11{grid-row-start:11}.day .s12{grid-row-start:12}.day .s13{grid-row-start:13}.day .s14{grid-row-start:14}.day .s15{grid-row-start:15}.day .s16{grid-row-start:16}.day .s17{grid-row-start:17}.day .s18{grid-row-start:18}.day .s19{grid-row-start:19}.day .s20{grid-row-start:20}.day .s21{grid-row-start:21}.day .s22{grid-row-start:22}.day .s23{grid-row-start:23}.day .s24{grid-row-start:24}.day .s25{grid-row-start:25}.day .s26{grid-row-start:26}.day .s27{grid-row-start:27}.day .s28{grid-row-start:28}.day .s29{grid-row-start:29}.day .s30{grid-row-start:30}.day .s31{grid-row-start:31}.day .s32{grid-row-start:32}.day .s33{grid-row-start:33}.day .s34{grid-row-start:34}.day .s35{grid-row-start:35}.day .s36{grid-row-start:36}.day .s37{grid-row-start:37}.day .s38{grid-row-start:38}.day .s39{grid-row-start:39}.day .s40{grid-row-start:40}.day .s41{grid-row-start:41}.day .s42{grid-row-start:42}.day .s43{grid-row-start:43}.day .s44{grid-row-start:44}.day .s45{grid-row-start:45}.day .s46{grid-row-start:46}.day .s47{grid-row-start:47}.day .s48{grid-row-start:48}.day .s49{grid-row-start:49}.day .s50{grid-row-start:50}.day .s51{grid-row-start:51}.day .s52{grid-row-start:52}.day .s53{grid-row-start:53}.day .s54{grid-row-start:54}.day .s55{grid-row-start:55}.day .s56{grid-row-start:56}.day .s57{grid-row-start:57}.day .s58{grid-row-start:58}.day .s59{grid-row-start:59}.day .s60{grid-row-start:60}.day .s61{grid-row-start:61}.day .s62{grid-row-start:62}.day .s63{grid-row-start:63}.day .s64{grid-row-start:64}.day .s65{grid-row-start:65}.day .s66{grid-row-start:66}.day .s67{grid-row-start:67}.day .s68{grid-row-start:68}.day .s69{grid-row-start:69}.day .s70{grid-row-start:70}.day .s71{grid-row-start:71}.day .s72{grid-row-start:72}.day .s73{grid-row-start:73}.day .s74{grid-row-start:74}.day .s75{grid-row-start:75}.day .s76{grid-row-start:76}.day .s77{grid-row-start:77}.day .s78{grid-row-start:78}.day .s79{grid-row-start:79}.day .s80{grid-row-start:80}.day .s81{grid-row-start:81}.day .s82{grid-row-start:82}.day .s83{grid-row-start:83}.day .s84{grid-row-start:84}.day .s85{grid-row-start:85}.day .s86{grid-row-start:86}.day .s87{grid-row-start:87}.day .s88{grid-row-start:88}.day .s89{grid-row-start:89}.day .s90{grid-row-start:90}.day .s91{grid-row-start:91}.day .s92{grid-row-start:92}.day .s93{grid-row-start:93}.day .s94{grid-row-start:94}.day .s95{grid-row-start:95}.day .s96{grid-row-start:96}
.day .d1{grid-row-end:span 1}.day .d2{grid-row-end:span 2}.day .d3{grid-row-end:span 3}.day .d4{grid-row-end:span 4}.day .d5{grid-row-end:span 5}.day .d6{grid-row-end:span 6}.day .d7{grid-row-end:span 7}.day .d8{grid-row-end:span 8}.day .d9{grid-row-end:span 9}.day .d10{grid-row-end:span 10}.day .d11{grid-row-end:span 11}.day .d12{grid-row-end:span 12}.day .d13{grid-row-end:span 13}.day .d14{grid-row-end:span 14}.day .d15{grid-row-end:span 15}.day .d16{grid-row-end:span 16}.day .d17{grid-row-end:span 17}.day .d18{grid-row-end:span 18}.day .d19{grid-row-end:span 19}.day .d20{grid-row-end:span 20}.day .d21{grid-row-end:span 21}.day .d22{grid-row-end:span 22}.day .d23{grid-row-end:span 23}.day .d24{grid-row-end:span 24}.day .d25{grid-row-end:span 25}.day .d26{grid-row-end:span 26}.day .d27{grid-row-end:span 27}.day .d28{grid-row-end:span 28}.day .d29{grid-row-end:span 29}.day .d30{grid-row-end:span 30}.day .d31{grid-row-end:span 31}.day .d32{grid-row-end:span 32}.day .d33{grid-row-end:span 33}.day .d34{grid-row-end:span 34}.day .d35{grid-row-end:span 35}.day .d36{grid-row-end:span 36}.day .d37{grid-row-end:span 37}.day .d38{grid-row-end:span 38}.day .d39{grid-row-end:span 39}.day .d40{grid-row-end:span 40}.day .d41{grid-row-end:span 41}.day .d42{grid-row-end:span 42}.day .d43{grid-row-end:span 43}.day .d44{grid-row-end:span 44}.day .d45{grid-row-end:span 45}.day .d46{grid-row-end:span 46}.day .d47{grid-row-end:span 47}.day .d48{grid-row-end:span 48}.day .d49{grid-row-end:span 49}.day .d50{grid-row-end:span 50}.day .d51{grid-row-end:span 51}.day .d52{grid-row-end:span 52}.day .d53{grid-row-end:span 53}.day .d54{grid-row-end:span 54}.day .d55{grid-row-end:span 55}.day .d56{grid-row-end:span 56}.day .d57{grid-row-end:span 57}.day .d58{grid-row-end:span 58}.day .d59{grid-row-end:span 59}.day .d60{grid-row-end:span 60}.day .d61{grid-row-end:span 61}.day .d62{grid-row-end:span 62}.day .d63{grid-row-end:span 63}.day .d64{grid-row-end:span 64}.day .d65{grid-row-end:span 65}.day .d66{grid-row-end:span 66}.day .d67{grid-row-end:span 67}.day .d68{grid-row-end:span 68}.day .d69{grid-row-end:span 69}.day .d70{grid-row-end:span 70}.day .d71{grid-row-end:span 71}.day .d72{grid-row-end:span 72}.day .d73{grid-row-end:span 73}.day .d74{grid-row-end:span 74}.day .d75{grid-row-end:span 75}.day .d76{grid-row-end:span 76}.day .d77{grid-row-end:span 77}.day .d78{grid-row-end:span 78}.day .d79{grid-row-end:span 79}.day .d80{grid-row-end:span 80}.day .d81{grid-row-end:span 81}.day .d82{grid-row-end:span 82}.day .d83{grid-row-end:span 83}.day .d84{grid-row-end:span 84}.day .d85{grid-row-end:span 85}.day .d86{grid-row-end:span 86}.day .d87{grid-row-end:span 87}.day .d88{grid-row-end:span 88}.day .d89{grid-row-end:span 89}.day .d90{grid-row-end:span 90}.day .d91{grid-row-end:span 91}.day .d92{grid-row-end:span 92}.day .d93{grid-row-end:span 93}.day .d94{grid-row-end:span 94}.day .d95{grid-row-end:span 95}.day .d96{grid-row-end:span 96}
@media(min-width:900px){.day{display:grid}#today{display:none}}
/* Needs you (redesign 2026-09-25): the three soonest things owed, when in
   words beside what, its course, the draft's state and two links. */
.need{display:grid;grid-template-columns:10.5em minmax(0,1fr);gap:4px 20px;padding:16px 0;border-bottom:1px solid var(--hairline)}
.need .nwhen{display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:600;color:var(--dim);margin:0;
  align-self:start;padding-top:2px}
.need.due-urgent .nwhen,.need.due-near .nwhen{color:var(--red)}
.need.due-week .nwhen{color:var(--brass)}
.need .nwhen .sico{width:14px;height:14px}
.need .nwhat{display:flex;flex-direction:column;gap:3px;min-width:0}
.need h3{font-size:1.0625rem;font-weight:600;line-height:1.3}
.need .ncourse{font-size:.875rem;color:var(--dim)}
.need .drafted{display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:600;color:var(--clear);margin-top:2px}
.need .drafted .sico{width:14px;height:14px}
.need .needs{font-size:.875rem;color:var(--dim);margin-top:2px}
.need .nlinks{margin-top:6px}
section.aside.stack{gap:44px}
.rows{display:flex;flex-direction:column}
.crow,.row{display:grid;gap:4px 20px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--hairline)}
.crow{grid-template-columns:8.5em minmax(0,1fr) auto}
.crow .when,.crow .where{font-size:.9375rem;color:var(--dim);white-space:nowrap}
.crow .where{text-align:right}
.crow .what{font-weight:600}
/* Life: a class in Today is a block in its course's tint, as in the week. */
.crow:has(.ci-1){--tint:var(--c1)}.crow:has(.ci-2){--tint:var(--c2)}.crow:has(.ci-3){--tint:var(--c3)}.crow:has(.ci-4){--tint:var(--c4)}
.crow:has(.ci-5){--tint:var(--c5)}.crow:has(.ci-6){--tint:var(--c6)}.crow:has(.ci-7){--tint:var(--c7)}.crow:has(.ci-8){--tint:var(--c8)}
#today .crow:not(.drow){background:color-mix(in srgb,var(--tint,var(--dim)) 13%,transparent);border:0;
  border-left:3px solid var(--tint,var(--dim));border-radius:0 6px 6px 0;padding:9px 12px;margin:3px 0}
#today .crow:not(.drow) .cname::before{display:none}
#due .row:hover,.course:hover{background:var(--wash)}
/* A deadline inside a day: red for the two facts that matter, no box. */
.drow .when{color:var(--red);font-weight:600}
.drow .what,.drow .what .cname{color:var(--red)}
.drow .what .cname::before{background:var(--red)}
/* Overnight and Assignments: course · what · links. */
.row{grid-template-columns:13em minmax(0,1fr) auto}
.row .who{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .what{min-width:0}
.row .where{display:flex;flex-wrap:wrap;gap:6px;font-size:.875rem;white-space:nowrap;justify-content:flex-end}
.row .where .dim{font-size:.875rem}
/* ---- Assignments: the rail, then when / what, as the local build ------ */
#due .row{grid-template-columns:9.5em minmax(0,1fr);gap:4px 20px;align-items:start;padding:16px 0}
#due .when{font-size:.9375rem;color:var(--dim);white-space:nowrap;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
#due .row.soon .when{color:var(--red);font-weight:600}
#due .row.soon.due-week .when{color:var(--brass)}
#due .cd{font-size:.75rem;font-weight:600;color:var(--red-wash);background:var(--red);border-radius:999px;padding:2px 9px}
#due .row.soon.due-week .cd{background:var(--brass);color:var(--ground)}
#due .what{display:flex;flex-direction:column;gap:3px;font-weight:400}
#due .title{font-weight:600;font-size:1.0625rem}
#due .drafted{font-size:.8125rem;font-weight:600;color:var(--clear)}
#due .cd,#due .drafted{display:inline-flex;align-items:center;gap:4px}
.sico{width:12px;height:12px;flex:none}
#due .needs{font-size:.9375rem;color:var(--dim)}
#due .who{font-size:.875rem;font-weight:400;color:var(--dim);margin-top:2px}
#due .where{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:6px}
/* Due time and points as tags beside the title, the countdown's pill (Ari, 2026-09-29). */
#due .tline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
#due .tag{display:inline-flex;font-size:.75rem;font-weight:600;color:var(--red-wash);background:var(--red);border-radius:999px;padding:2px 9px}
#due .row.soon.due-week .tag{background:var(--brass);color:var(--ground)}
#due .row.later .tag{background:var(--dim);color:var(--ground)}
/* Assignments in two groups (redesign 2026-09-25): the next seven days, then
   later, one compact line each. A group with nothing for the class picked hides. */
.railed .grp{display:flex;flex-direction:column}
.railed .grp+.grp{margin-top:32px}
.railed .grph{display:flex;align-items:baseline;gap:10px;font-size:1.125rem;font-weight:600;letter-spacing:-.01em;
  padding:10px 0 9px;border-bottom:1px solid var(--rule)}
.railed .grph span{font-size:.8125rem;font-weight:400;color:var(--dim)}
#due .row.later{padding:11px 0}
#due .row.later .needs{display:none}
/* A tab's title in the serif with one line under it (redesign 2026-09-25):
   Assignments here, Status's GPA line, Today's date. */
/* Notes and Review by week (redesign 2026-09-25): the same groups, the
   class rail reaching into them; the order control flips the weeks and
   the rows inside each, the heading staying on top. */
.railed .grp .wk:last-child{border-bottom:0}
#nt .grp.older .blurb{display:none}
.wkwhen .fresh{font-weight:600;color:var(--accent-ink)}
/* The next exam: larger, with its countdown. */
#rv .wk.next .ntitle{font-size:1.75rem;letter-spacing:-.02em;line-height:1.15;color:var(--tint-ink,var(--ink))}
#rv .wk .cd{display:inline-flex;align-items:center;gap:4px;width:max-content;font-size:.75rem;font-weight:600;
  color:var(--ground);background:var(--brass);border-radius:999px;padding:2px 9px}
#rv .wk.due-urgent .cd,#rv .wk.due-near .cd{background:var(--red)}
#rv .wk.due-later .cd{background:var(--dim)}
.pagehead{display:flex;flex-direction:column;gap:6px;margin-bottom:28px}
.pagehead h1,.gpa h1{font-family:var(--serif);font-size:2.75rem;font-weight:400;
  line-height:1.08;letter-spacing:-.01em}
.pagehead .hi{font-size:1.0625rem;color:var(--dim)}
/* ---- Classes ---------------------------------------------------------- */
.course{display:grid;grid-template-columns:16rem minmax(0,1fr);gap:4px 24px;padding:16px 0;
  border-bottom:1px solid var(--hairline)}
.course h3{font-size:.9375rem;font-weight:600}
.course .code{display:block;font-size:.8125rem;color:var(--dim);font-weight:400}
.course p{color:color-mix(in srgb,var(--ink) 78%,transparent);font-size:.9375rem}
.course .policy b{font-weight:600;color:var(--ink)}
.flags{color:var(--dim);font-size:.8125rem;margin-top:4px}
/* ---- Status ----------------------------------------------------------- */
.gpa h1{max-width:24ch}
.gpa h1 b{font-family:var(--sans);font-weight:600}
.gpa h1 b{color:var(--accent-ink)}
.srow .g.high{color:var(--clear)}
.gpa p{font-size:1.0625rem;color:color-mix(in srgb,var(--ink) 78%,transparent);max-width:62ch;margin-top:8px}
.grades{display:flex;flex-direction:column;margin-top:32px}
.ghead,.srow{display:grid;grid-template-columns:minmax(0,1.2fr) 6.5em minmax(10rem,15rem) minmax(0,1.1fr) minmax(0,1fr);gap:4px 28px;
  align-items:baseline;padding:13px 0;border-bottom:1px solid var(--hairline)}
.ghead{font-size:.8125rem;color:var(--dim);padding:0 0 8px;border-bottom-color:var(--rule)}
.srow .n{font-weight:600}
.srow .g{text-align:right;font-weight:600;white-space:nowrap}
.srow .g.none{color:var(--dim);font-weight:400}
.srow .g.low{color:var(--red)}
.srow .w{font-size:.8125rem;color:var(--dim)}
.srow .a{text-align:left}
.srow .a .att{display:flex;align-items:center;gap:5px;font-weight:600}
.srow .a .att .sico{width:13px;height:13px}
/* The letter large, the score under it; the bar from 50% to 100% with the
   letter's floor and the next letter's marked; absences as dots, the used
   ones filled (redesign 2026-09-25). Placed by class: the CSP. */
.srow .g b{display:block;font-size:1.75rem;font-weight:600;line-height:1.1}
.srow .g span{display:block;font-size:.8125rem;font-weight:400;color:var(--dim)}
.gbar{display:grid;grid-template-columns:repeat(50,minmax(0,1fr));height:34px;align-self:center}
.gbar::before{content:"";grid-row:1;grid-column:1/-1;height:8px;margin-top:6px;border-radius:4px;
  background:color-mix(in srgb,var(--ink) 9%,transparent)}
.gbar.empty::before{background:none;border:1px dashed var(--faint);box-sizing:border-box}
.gbar .fill{grid-row:1;grid-column-start:1;height:8px;margin-top:6px;border-radius:4px;background:var(--dim)}
.gbar.high .fill{background:var(--clear)}
.gbar.low .fill{background:var(--red)}
.gbar .tk.at{border-left-color:var(--faint)}
.gbar .tk{grid-row:1;height:34px;box-sizing:border-box;border-left:1px solid var(--ink);padding-left:3px;
  display:flex;align-items:flex-end;font-size:.6875rem;line-height:1;color:var(--dim);white-space:nowrap}
.gbar .e1{grid-column-end:span 1}.gbar .e2{grid-column-end:span 2}.gbar .e3{grid-column-end:span 3}.gbar .e4{grid-column-end:span 4}.gbar .e5{grid-column-end:span 5}.gbar .e6{grid-column-end:span 6}.gbar .e7{grid-column-end:span 7}.gbar .e8{grid-column-end:span 8}.gbar .e9{grid-column-end:span 9}.gbar .e10{grid-column-end:span 10}.gbar .e11{grid-column-end:span 11}.gbar .e12{grid-column-end:span 12}.gbar .e13{grid-column-end:span 13}.gbar .e14{grid-column-end:span 14}.gbar .e15{grid-column-end:span 15}.gbar .e16{grid-column-end:span 16}.gbar .e17{grid-column-end:span 17}.gbar .e18{grid-column-end:span 18}.gbar .e19{grid-column-end:span 19}.gbar .e20{grid-column-end:span 20}.gbar .e21{grid-column-end:span 21}.gbar .e22{grid-column-end:span 22}.gbar .e23{grid-column-end:span 23}.gbar .e24{grid-column-end:span 24}.gbar .e25{grid-column-end:span 25}.gbar .e26{grid-column-end:span 26}.gbar .e27{grid-column-end:span 27}.gbar .e28{grid-column-end:span 28}.gbar .e29{grid-column-end:span 29}.gbar .e30{grid-column-end:span 30}.gbar .e31{grid-column-end:span 31}.gbar .e32{grid-column-end:span 32}.gbar .e33{grid-column-end:span 33}.gbar .e34{grid-column-end:span 34}.gbar .e35{grid-column-end:span 35}.gbar .e36{grid-column-end:span 36}.gbar .e37{grid-column-end:span 37}.gbar .e38{grid-column-end:span 38}.gbar .e39{grid-column-end:span 39}.gbar .e40{grid-column-end:span 40}.gbar .e41{grid-column-end:span 41}.gbar .e42{grid-column-end:span 42}.gbar .e43{grid-column-end:span 43}.gbar .e44{grid-column-end:span 44}.gbar .e45{grid-column-end:span 45}.gbar .e46{grid-column-end:span 46}.gbar .e47{grid-column-end:span 47}.gbar .e48{grid-column-end:span 48}.gbar .e49{grid-column-end:span 49}.gbar .e50{grid-column-end:span 50}
.gbar .t1{grid-column-start:1}.gbar .t2{grid-column-start:2}.gbar .t3{grid-column-start:3}.gbar .t4{grid-column-start:4}.gbar .t5{grid-column-start:5}.gbar .t6{grid-column-start:6}.gbar .t7{grid-column-start:7}.gbar .t8{grid-column-start:8}.gbar .t9{grid-column-start:9}.gbar .t10{grid-column-start:10}.gbar .t11{grid-column-start:11}.gbar .t12{grid-column-start:12}.gbar .t13{grid-column-start:13}.gbar .t14{grid-column-start:14}.gbar .t15{grid-column-start:15}.gbar .t16{grid-column-start:16}.gbar .t17{grid-column-start:17}.gbar .t18{grid-column-start:18}.gbar .t19{grid-column-start:19}.gbar .t20{grid-column-start:20}.gbar .t21{grid-column-start:21}.gbar .t22{grid-column-start:22}.gbar .t23{grid-column-start:23}.gbar .t24{grid-column-start:24}.gbar .t25{grid-column-start:25}.gbar .t26{grid-column-start:26}.gbar .t27{grid-column-start:27}.gbar .t28{grid-column-start:28}.gbar .t29{grid-column-start:29}.gbar .t30{grid-column-start:30}.gbar .t31{grid-column-start:31}.gbar .t32{grid-column-start:32}.gbar .t33{grid-column-start:33}.gbar .t34{grid-column-start:34}.gbar .t35{grid-column-start:35}.gbar .t36{grid-column-start:36}.gbar .t37{grid-column-start:37}.gbar .t38{grid-column-start:38}.gbar .t39{grid-column-start:39}.gbar .t40{grid-column-start:40}.gbar .t41{grid-column-start:41}.gbar .t42{grid-column-start:42}.gbar .t43{grid-column-start:43}.gbar .t44{grid-column-start:44}.gbar .t45{grid-column-start:45}.gbar .t46{grid-column-start:46}.gbar .t47{grid-column-start:47}.gbar .t48{grid-column-start:48}.gbar .t49{grid-column-start:49}.gbar .t50{grid-column-start:50}
.dots{display:flex;align-items:center;gap:4px;margin:4px 0 2px}
.dots i{width:9px;height:9px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--faint)}
.dots i.u{background:var(--dim);border-color:var(--dim)}
.a:has(.att.brass) .dots i.u{background:var(--brass);border-color:var(--brass)}
.dots b{font-size:.75rem;font-weight:600;color:var(--brass)}
.srow .a .dim{display:block;font-size:.8125rem}
.att.brass{color:var(--brass)}
.att.clear{color:var(--clear)}
.ghead .r{text-align:right}
.ghead .r+div{text-align:left}
.gpa .notes{font-size:.8125rem;color:var(--dim);max-width:62ch;margin-top:10px}
/* ---- Settings --------------------------------------------------------- */
section[data-page=settings]{max-width:44rem}
section[data-page=settings] .shead{margin-top:40px}
.settings{display:flex;flex-direction:column}
.settings label{display:grid;grid-template-columns:12em minmax(0,1fr);gap:16px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--hairline)}
.settings label:has(input[type=checkbox]){grid-template-columns:auto minmax(0,1fr)}
.settings select,.settings input[type=range]{font:inherit;max-width:16rem}
/* A pasted lecture is long: its box takes the whole row (2026-09-29). */
.settings label:has(textarea){grid-template-columns:minmax(0,1fr);gap:8px}
.settings textarea{font:inherit;width:100%;box-sizing:border-box}
.settings .days{display:grid;grid-template-columns:12em minmax(0,1fr);gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--hairline)}
.settings .days label{display:inline-flex;gap:4px;margin-right:12px;padding:0;border:0;grid-template-columns:none}
.settings button,form.inline button,.btn{font:inherit;font-weight:600;color:var(--ink);background:transparent;
  border:1px solid var(--rule);border-radius:8px;padding:8px 16px;cursor:pointer;margin-top:16px;align-self:flex-start}
.settings button:hover,.btn:hover{border-color:var(--ink)}
section p+form,section form+p{margin-top:16px}
/* ---- lectures of the week, review, quizzes ---------------------------- */
/* ---- the class rail and the notes library (Classes) ------------------- */
.railin,.sortin,.openin{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.list{display:flex;flex-direction:column}
.emptynote{display:none}
.wk{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:20px;padding:18px 0;border-bottom:1px solid var(--hairline)}
.wk:hover{background:var(--wash)}
.wkwhen{font-size:.875rem;color:var(--dim);display:flex;flex-direction:column;gap:2px;padding-top:2px}
.wkbody{display:flex;flex-direction:column;gap:6px;max-width:66ch}
.ntitle{font-size:1.0625rem;font-weight:600;line-height:1.3}
.ncourse{font-size:.875rem;color:var(--dim)}
.upl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.upl input[type=file]{font-size:.875rem;max-width:100%}
/* The Transcribed tag beside a recorded lecture's title (decision 2026-10-01): the accent's ink on its wash. */
.rec{display:inline-flex;align-items:center;gap:4px;flex:none;vertical-align:middle;font-size:.75rem;font-weight:600;line-height:1.3;
  color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:999px;padding:2px 9px 2px 7px}
/* Where the title is one line, a long one is cut short before the tag is; on a phone it wraps and the tag follows it. */
@media(min-width:761px){
  .ntitle:has(.rec){display:flex;align-items:center;gap:8px}
  .ntitle .ttx{min-width:0;overflow:hidden;text-overflow:ellipsis}
}
.blurb{font-size:.9375rem;line-height:1.55;color:color-mix(in srgb,var(--ink) 78%,transparent)}
.nlinks{display:flex;gap:8px;font-size:.9375rem;margin-top:6px}
/* Every row's links are filled buttons, not words (Ari, 2026-09-29). */
.nlinks{align-items:center}
.nlinks a,.nlinks .golab,.nlinks .rdr>summary,.nlinks .ask,#due .where a,#due .where .ask,.row .where a,.row .where .golab,.row .where .ask{display:inline-flex;align-items:center;
  font:inherit;font-size:.875rem;font-weight:600;line-height:1.4;color:var(--ground);background:var(--accent-ink);border:0;border-radius:999px;
  padding:6px 14px;text-decoration:none;cursor:pointer;white-space:nowrap}
.nlinks a:hover,.nlinks .golab:hover,.nlinks .rdr>summary:hover,.nlinks .ask:hover,#due .where a:hover,#due .where .ask:hover,.row .where a:hover,.row .where .golab:hover,.row .where .ask:hover{
  color:var(--ground);background:color-mix(in srgb,var(--accent-ink) 82%,var(--ink));text-decoration:none}
#due .where .ask.did,.nlinks .ask.did,.row .where .ask.did{background:var(--dim)}
.nlinks .rdr .rd::after{color:inherit}
@media(max-width:899px){
  /* The rail as one button and a menu: the button names the class chosen,
     the menu is the same labels, dropped over the list until a pick. */
  .wk{grid-template-columns:minmax(0,1fr)}
}
/* ---- Folders on Notes and Review (decision 2026-09-17) -------------------
   Radio buttons before the railed block; a row of labels under the heading,
   the open one underlined in ink; each folder is its own .list and the rail's
   counts are rendered once per folder (.fn), the open folder's shown. */
.foldin{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.folders{display:flex;align-items:center;gap:12px;margin:2px 0 10px}
/* The tabs as one pill bar, the open one raised (decision 2026-09-30, a class's tabs as dated lists). */
.ftabs{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--wash);min-width:0;overflow-x:auto;scrollbar-width:none}
.ftabs::-webkit-scrollbar{display:none}
.folder{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:999px;color:var(--dim);cursor:pointer;
  white-space:nowrap;font-size:.8125rem;font-weight:600;line-height:1.3}
.folder:hover{color:var(--ink)}
/* A phone has no room for six pills (Ari, 2026-09-30): one control names the open tab and opens the list. */
.fcur{display:none}
.fcur .fn{display:none}
@media(max-width:760px){
  .folders{flex-wrap:wrap}
  .fcur{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:10px 14px;border-radius:12px;background:var(--wash);
    font-size:.9375rem;font-weight:600;color:var(--ink);cursor:pointer}
  .fcur .sico{margin-left:auto;width:16px;height:16px;color:var(--dim)}
  .fcur .fn .fcount{margin-left:8px;font-weight:500}
  #fmenu:focus-visible+.fcur{outline:2px solid var(--accent);outline-offset:1px}
  #fmenu:checked+.fcur .sico{transform:rotate(180deg)}
  .ftabs{display:none;order:3;flex-basis:100%;flex-direction:column;gap:0;padding:6px;border-radius:14px;overflow:visible}
  #fmenu:checked~.ftabs{display:flex}
  .ftabs .folder{justify-content:space-between;padding:10px 12px;border-radius:10px;font-size:.9375rem}
}
.folder .fcount{font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--faint)}
.ankinote{margin-top:12px}
/* ---- Review: the papers, the flashcards, the week's quizzes ------------- */
/* Classes: the order control, the per-course document row, and the notes read in place. */
.nlinks{flex-wrap:wrap}
.nlinks>.rdr[open]{flex-basis:100%}
.nbody{margin-top:10px;font-size:.9688rem;line-height:1.65;color:var(--ink)}
.nbody h1,.nbody h2,.nbody h3,.nbody h4{font-weight:600;line-height:1.3;margin:18px 0 6px}
.nbody h1,.nbody h2{font-size:1rem}.nbody h3,.nbody h4{font-size:.9375rem}
.nbody p{margin:0 0 .9em}.nbody ul,.nbody ol{margin:0 0 .9em;padding-left:1.2em}.nbody li{margin:0 0 .25em}
.nbody pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8125rem;background:var(--wash);padding:10px;border-radius:6px}
.nbody code{font-size:.875em}.nbody blockquote{margin:0 0 .9em;padding-left:12px;border-left:2px solid var(--hairline);color:var(--dim)}
.nbody img{max-width:100%;height:auto;display:block;margin:6px 0 16px}
.nbody table{border-collapse:collapse;margin:0 0 .9em}.nbody td,.nbody th{border:1px solid var(--hairline);padding:3px 8px;text-align:left}
.selftest{display:flex;flex-direction:column;margin:18px 0 6px}
.tkl{font-weight:600}
.rdr{margin-top:2px}
.rdr summary{cursor:pointer;color:var(--accent-ink);font-weight:600;list-style:none;font-size:.9375rem}
.rdr summary::-webkit-details-marker{display:none}
.rdr .rd::after{content:" ›";color:var(--dim)}
.rdr .cl{display:none}
.rdr[open] .rd{display:none}
.rdr[open] .cl{display:inline}
/* A quiz question (redesign 2026-09-30): its number hanging, the question, its
   options lettered, and the answer in ink behind a button that says Show answer. */
.qs{display:flex;flex-direction:column;margin-top:14px}
.q{display:grid;grid-template-columns:1.6em minmax(0,1fr);column-gap:6px;padding:16px 0;border-top:1px solid var(--hairline)}
.qs>.q:first-child{border-top:0;padding-top:4px}
.q>*{grid-column:2}
.q>.qn{grid-column:1;color:var(--dim);font-variant-numeric:tabular-nums;font-size:.9375rem;line-height:1.6}
.qq{color:var(--ink);font-weight:600;font-size:1rem;line-height:1.5}
.qq,.qcs li,.qa{overflow-wrap:anywhere}   /* a long formula or link wraps rather than widening the page */
.q .qcs{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.q .qcs li{display:grid;grid-template-columns:1.5em minmax(0,1fr);margin:0;color:var(--ink);font-size:.9375rem;line-height:1.5}
.qcs b{color:var(--dim);font-weight:600}
.qr{margin-top:10px}
.qr>summary{display:inline-flex;align-items:center;gap:6px;width:max-content;list-style:none;cursor:pointer;white-space:nowrap;
  font-size:.875rem;font-weight:600;line-height:1.4;color:var(--ink);background:var(--wash2);border-radius:999px;padding:6px 14px}
.qr>summary::-webkit-details-marker{display:none}
.qr>summary:hover{background:color-mix(in srgb,var(--ink) 14%,transparent)}
.qr>summary:focus-visible{border-radius:999px}
.qr>summary .sico{width:14px;height:14px;stroke-width:2.2}
.qr[open]>summary .sico{transform:rotate(180deg)}
.qr .ha,.qr[open] .sa{display:none}
.qr[open] .ha{display:inline}
.qa{margin-top:10px;padding:2px 0 2px 12px;border-left:2px solid var(--accent);color:var(--ink);font-size:.9375rem;line-height:1.55}
.qal{display:block;font-size:.8125rem;font-weight:600;color:var(--dim);margin-bottom:2px}
@media(prefers-reduced-motion:no-preference){
  .qr>summary .sico{transition:transform 180ms var(--ease)}
  .qr[open]>.qa{animation:qain 180ms var(--ease) both}
}
@keyframes qain{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
/* ---- other pages: the editor, review, legal --------------------------- */
main.page,main.legal{max-width:44rem;margin:2rem auto;padding:0 max(20px,env(safe-area-inset-right)) 3rem;line-height:1.55}
main.page h1,main.legal h1{font-size:1.75rem;font-weight:600;letter-spacing:-.02em;margin-bottom:12px}
main.page pre{white-space:pre-wrap;overflow-wrap:anywhere}   /* the task prompts: wrap, never a sideways scroll */
main.page h2,main.legal h2{font-size:1.0625rem;font-weight:600;margin:28px 0 8px}
main.page p,main.legal p{margin:8px 0}
textarea.editor{width:100%;font:.875rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);
  background:transparent;border:1px solid var(--rule);border-radius:8px;padding:12px}
.preview{border-top:1px solid var(--rule);padding-top:16px}
form.inline{display:inline}
main.page button,main.page input[type=submit]{font:inherit;font-weight:600;color:var(--ink);background:transparent;
  border:1px solid var(--rule);border-radius:8px;padding:8px 16px;cursor:pointer}
.banner{background:var(--red-wash);color:var(--red);padding:10px 14px;border-radius:6px}
/* ---- the setup page: the dashboard's shape ---------------------------- */
main.page .setup{margin:-2rem 0 0}
.setup .top{padding:22px 0 0}
.setup section{margin-top:40px}
.setup .steps{list-style:none;padding:0;margin:0}
.setup .step,.setup .opt{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:16px;padding:16px 0;
  border-bottom:1px solid var(--hairline)}
.setup .step.now{padding:24px 0 28px}
.setup .opt{grid-template-columns:minmax(0,1fr) auto;align-items:start}
.setup .opt .act{display:flex;gap:8px;padding-top:2px}
.setup .mark{width:24px;height:24px;border-radius:50%;border:1px solid var(--rule);display:grid;place-items:center;
  font-size:.8125rem;font-weight:600;color:var(--dim);font-variant-numeric:tabular-nums;margin-top:1px}
.setup .now .mark{border-color:var(--accent);color:var(--accent-ink);margin-top:6px}
.setup .done .mark{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--ground)}
.setup .done .mark::before{content:"";width:6px;height:10px;border:solid var(--ground);border-width:0 2px 2px 0;
  transform:translateY(-1px) rotate(45deg)}
main.page .setup .step h2,main.page .setup .opt h2{font-size:1.0625rem;font-weight:600;margin:0 0 4px}
main.page .setup .now h2{font-size:1.75rem;letter-spacing:-.02em;line-height:1.15;margin:0 0 8px}
.setup .todo h2{color:var(--dim)}
main.page .setup .body p{margin:0 0 10px;color:var(--dim)}
.setup .now .body p{font-size:1.0625rem}
main.page .setup .body p:last-child{margin-bottom:0}
main.page .setup .done .body p{margin-bottom:0}
.setup .body b{color:var(--ink)}
.setup .body p[role=alert]{color:var(--red)}
.setup code{font:.8125rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.setup .copy{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:start;
  border:1px solid var(--rule);border-radius:8px;padding:8px 8px 8px 12px;margin:0 0 10px}
.setup .copy code,.setup .copy pre{margin:0;padding:6px 0;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.setup .copy pre{font:.8125rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;max-height:14rem;overflow:auto}
.setup .copybtn{padding:6px 12px;font-size:.875rem}
.setup .copybtn.did{color:var(--accent-ink);border-color:var(--accent)}
.setup .copybtn.primary.did{color:var(--ground);background:var(--accent-ink);border-color:var(--accent-ink)}
.setup ul.classes{list-style:none;margin:0 0 10px;padding:0;color:var(--ink)}
.setup ul.classes li{padding:4px 0;border-bottom:1px solid var(--rule)}
.setup ul.classes li:last-child{border-bottom:0}
.setup ol.how{margin:0 0 12px;padding-left:1.25rem;color:var(--dim)}
.setup ol.how li{margin:0 0 4px}
.setup .now ol.how{font-size:1.0625rem}
.setup .pick{margin:0 0 4px}
.setup .pick label{display:flex;gap:12px;align-items:center;font-weight:600;color:var(--ink)}
.setup .pick select{font:inherit;color:var(--ink);background:var(--ground);border:1px solid var(--rule);border-radius:8px;padding:8px 12px}
.setup .pick select:focus{outline:none;border-color:var(--accent)}
.setup .pick button{margin:0 0 0 8px}
.setup .agent{padding:14px 0 4px}
.setup .copy.prompt{display:block;border:0;padding:0}
.setup .copy.prompt details{margin-top:8px;color:var(--dim)}
.setup .copy.prompt summary{cursor:pointer}
.setup .tokenform{display:flex;gap:8px;margin:0 0 10px}
.setup .tokenform input,.setup .payout input{flex:1;min-width:0;font:inherit;color:var(--ink);background:transparent;
  border:1px solid var(--rule);border-radius:8px;padding:11px 14px}
.setup .tokenform input:focus,.setup .payout input:focus{outline:none;border-color:var(--accent)}
.setup .primary{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--ground);padding:11px 20px}
.setup .primary:hover{background:color-mix(in srgb,var(--accent-ink) 82%,var(--ink));border-color:color-mix(in srgb,var(--accent-ink) 82%,var(--ink))}
.setup a.btn{display:inline-block;color:var(--ink);text-decoration:none;font-weight:600;border:1px solid var(--rule);border-radius:8px;padding:8px 16px}
.setup a.btn:hover{border-color:var(--ink)}
.setup a.btn.primary{color:var(--ground);border-color:var(--accent-ink)}
.setup a.btn.primary:hover{border-color:color-mix(in srgb,var(--accent-ink) 82%,var(--ink))}
.setup .quiet{display:block;margin-top:12px}
.setup .quiet button,.setup .done .body button{color:var(--dim);border-color:transparent;padding-left:0}
.setup .quiet button:hover,.setup .done .body button:hover{color:var(--ink);border-color:transparent}
.setup form.inline{margin-right:8px}
.setup .payout{display:flex;align-items:stretch;gap:8px;max-width:26rem;margin-top:10px}
.setup .payout button{padding:9px 16px}
/* A free month is paid to nobody: the box goes, Save stays, and the handle is still sent. */
.reward:has(input[value=month]:checked)+.payout input{display:none}
.setup .more{margin:10px 0 0}
.setup .body>h3{margin:26px 0 4px}
.setup .more summary{cursor:pointer;color:var(--accent-ink);font-weight:600;list-style:none}
.setup .more summary::-webkit-details-marker{display:none}
.setup .more summary::before{content:"+";display:inline-block;width:14px;color:var(--dim)}
.setup .more[open] summary::before{content:"\2013"}
.setup .more[open] summary{margin-bottom:8px}
.setup .rules{padding-left:1.2em;color:var(--dim)}
.setup .rules li{margin:4px 0}
.setup .tail{margin:36px 0 0}
.setup .tail:empty{display:none}
.setup .foot{margin-top:56px;padding-top:14px;border-top:1px solid var(--hairline)}
.setup .foot .footnav{display:flex;gap:16px;align-items:baseline}
/* The Canvas step's clip beside its list; above it on a phone, where the student watches before leaving for Canvas. */
.setup .watchdo{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:24px;align-items:start}
.setup .clipbox video{width:100%;height:auto;border:1px solid var(--hairline);border-radius:8px;background:var(--ground)}
.setup .clippair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.setup .clippair figure{margin:0}.setup .clippair figcaption{margin-top:2px;font-size:.8125rem;color:var(--dim)}
.setup .agent .clipbox{max-width:360px;margin:12px 0}
.setup .clipctl{margin-top:6px;padding:4px 0;border:0;background:none;color:var(--dim);font:inherit;font-size:.8125rem;
  text-decoration:underline;cursor:pointer}
@media(max-width:599px){.setup .opt{grid-template-columns:minmax(0,1fr)}.setup .opt .act{padding-top:8px}
  .setup .tokenform{flex-direction:column}
  .setup .watchdo{grid-template-columns:minmax(0,1fr);gap:12px}.setup .watchdo .clipbox{order:-1}
  .setup .clippair{grid-template-columns:minmax(0,1fr)}}
/* ---- the connector pages: consent, handoff, refusal ------------------- */
.connect{max-width:30rem;margin:clamp(24px,10vh,96px) auto 0;display:flex;flex-direction:column}
.connect .brand{align-self:flex-start;margin-bottom:56px}
.page .connect h1{font-size:2.5rem;line-height:1.08;letter-spacing:-.03em;margin:0 0 16px;text-wrap:balance}
.connect .lede{font-size:1.0625rem;color:var(--dim);margin:0;text-wrap:pretty}
.connect .lede+.lede{margin-top:12px}
.connect .terms{list-style:none;padding:0;margin:32px 0 0;border-top:1px solid var(--rule)}
.connect .terms li{padding:13px 0;border-bottom:1px solid var(--hairline);color:var(--dim);font-size:.9375rem;line-height:1.5}
.connect .terms b{color:var(--ink)}
.connect form{display:flex;align-items:center;gap:6px;margin:32px 0 0}
.connect .primary{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--ground);padding:11px 20px}
.connect .primary:hover{background:color-mix(in srgb,var(--accent-ink) 82%,var(--ink));border-color:color-mix(in srgb,var(--accent-ink) 82%,var(--ink))}
.connect .quiet{color:var(--dim);border-color:transparent;padding:11px 14px}
.connect .quiet:hover{color:var(--ink)}
.connect .who{font-size:.8125rem;color:var(--faint);margin:20px 0 0}
.connect .account{font-size:1rem;color:var(--dim);margin:0 0 20px}
.connect .account b{color:var(--ink)}
.connect .account .quiet{padding:0;margin-left:4px;font-size:inherit;text-decoration:underline}
.connect .foot{display:flex;justify-content:flex-start;gap:16px;font-size:.8125rem;color:var(--faint);margin:64px 0 0;padding:0}
.connect .foot a{color:var(--faint)}
.connect .foot a:hover{color:var(--ink);text-decoration:underline}
@media(max-width:599px){.page .connect h1{font-size:2rem}.connect form{flex-direction:column;align-items:stretch}.connect .quiet{padding:6px 0}}
/* ---- layout by width -------------------------------------------------- */
/* The rail: fixed to the left edge of the screen, the brand at the top,
   Settings at the bottom, a hairline on its right (Ari, 2026-09-16, after
   Canvas). On a desktop, and on a phone held sideways (480px tall or less),
   where the bottom bar took a sixth of the height; the rail scrolls. */
@media(min-width:700px),(max-width:699px) and (max-height:480px){
  :root{--railw:80px}
  .rail{position:fixed;left:0;top:0;bottom:0;z-index:30;width:calc(var(--railw) + env(safe-area-inset-left));
    flex-direction:column;align-items:stretch;justify-content:flex-start;overflow-y:auto;
    padding:20px 0 max(14px,env(safe-area-inset-bottom)) env(safe-area-inset-left);
    background:var(--ground);border-right:1px solid var(--hairline)}
  .rail .brand{text-align:center;margin-bottom:24px}
  .rail .tabs{display:flex;flex-direction:column;gap:2px}
  .rail>.menu{margin-top:auto;display:flex;flex-direction:column}
  .menu [href='/careers']{display:none}   /* Careers is under Upload in the rail; the menu's copy is the phone's */
  .rail a.pgbtn[aria-current]{border-left-color:var(--accent)}
  .askbox{left:calc(var(--railw) + env(safe-area-inset-left) + 12px);bottom:24px}
  #pg-now:checked~.rail [for=pg-now],#pg-inbox:checked~.rail [for=pg-inbox],#pg-upload:checked~.rail [for=pg-upload],#pg-earn:checked~.rail [for=pg-earn],#pg-status:checked~.rail [for=pg-status],#pg-settings:checked~.rail [for=pg-settings]{border-left-color:var(--accent)}
  /* Centred in the space to the right of the rail, not in the whole
     screen: the left margin is the rail's width or half the slack past
     1440px, whichever is more. Padded alike on both sides. */
  .wrap{max-width:1440px;margin-left:max(calc(var(--railw) + env(safe-area-inset-left)),calc((100vw + var(--railw) + env(safe-area-inset-left) - 1440px) / 2));margin-right:0;
    padding-left:40px;padding-right:max(40px,env(safe-area-inset-right))}
}
@media(min-width:900px){
  .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);column-gap:96px;row-gap:44px;
    align-content:start;padding-top:56px}
  section{grid-column:1}
  section.aside{grid-column:2}
  section.wide,section[data-page=classes],section[data-page=inbox],section[data-page=status]{grid-column:1/-1}
  .lead{margin-bottom:12px}
  .aside .crow{grid-template-columns:6em minmax(0,1fr)}
  .aside .crow .where{grid-column:2;text-align:left;font-size:.8125rem}
  .lead h1{font-size:2.5rem}
  .gpa{grid-column:1/-1}
}
@media(max-width:899px){
  .lead h1{font-size:2rem}
  .hello .mastdate{font-size:2rem}
  .need{grid-template-columns:minmax(0,1fr)}
  .crow{grid-template-columns:auto minmax(0,1fr)}
  .crow .where{grid-column:2;text-align:left;font-size:.8125rem}
  .row{grid-template-columns:minmax(0,1fr)}
  .row .where{justify-content:flex-start}
  #due .row{grid-template-columns:minmax(0,1fr)}
  #due .when{flex-direction:row;align-items:center}
  #due .where{justify-content:flex-start}
  .course,.ghead,.srow{grid-template-columns:minmax(0,1fr)}
  .pagehead h1,.gpa h1{font-size:2rem}
  .ghead{display:none}
  .srow .g,.srow .a{text-align:left}
  .top{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
  .top .rhs{margin-left:auto;gap:8px}
}
/* Upright: the rail's brand and the three-line button share the top row,
   Settings in the menu under the button; the five sections leave it for the
   bottom of the screen, where a thumb is: icons over names, the way a phone
   app does it (Ari, 2026-09-15). Sideways, above. */
@media(max-width:699px) and (min-height:481px){
  .rail{position:relative;justify-content:flex-start;gap:4px}
  .rail .askbtn{margin-left:auto;flex-direction:row;gap:6px;padding:4px 8px;border:0;border-radius:8px;font-size:.875rem}
  .rail .askbtn .tico{width:22px;height:22px}
  .menubtn{display:grid}
  .menu{display:none;position:absolute;top:calc(100% + 4px);right:0;z-index:31;min-width:180px;padding:6px;flex-direction:column;
    background:var(--ground);border:1px solid var(--rule);border-radius:10px;box-shadow:0 8px 24px rgba(28,27,25,.12)}
  .menuin:checked~.menu{display:flex}
  .menu .pgbtn{flex-direction:row;gap:10px;border:0;padding:9px 10px;border-radius:6px;font-size:.9375rem}
  .menu .pgbtn:hover{background:var(--wash)}
  .tabs [href='/careers']{display:none}
  /* A floating pill (Ari, 2026-09-29, after rit3zh's tab bar): icons only,
     the current one in a pill of its own. No name beside it (Ari, 2026-09-30:
     the bar was getting cluttered); the page says its own name instead (.phh).
     No backdrop blur: motion stripped to light says no blur on anything. */
  .tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;position:fixed;z-index:30;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));
    transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:5px;border-radius:27px;
    background:var(--ground);background:color-mix(in srgb,var(--ground) 94%,transparent);
    border:1px solid var(--rule);box-shadow:0 10px 30px rgba(0,0,0,.18)}
  .tabs .pgbtn{flex:none;flex-direction:row;justify-content:center;gap:6px;min-width:46px;min-height:44px;padding:0 12px;border:0;border-radius:999px;font-size:.9375rem}
  .tabs .pgbtn>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tabs .pgbtn[aria-current]{background:var(--wash);color:var(--ink);font-weight:600}
  .askbox{left:12px;right:12px;width:auto;bottom:calc(84px + env(safe-area-inset-bottom))}
  /* The reserve hangs off the dashboard's own footer, not every .foot:
     the setup pages (onboarding.py) share the class and have no bar, and
     a bare .foot rule left 84px of dead white under "Start Coast". */
  .wrap>.foot{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:no-preference){
  .pgbtn,a,#due .row,.course{transition:color var(--dur),border-color var(--dur),background-color var(--dur)}
  .pgbtn:active{transform:scale(.98)}
}
@media print{
  .top,.rail,.foot{display:none}
  body{background:#fff;color:#000}
}

/* Settings' Connections: the setup page's own blocks, as plain rows. The
   section carries .setup so the `.setup <thing>` rules -- copy buttons, the
   class list, numbered how-tos, disclosure triangles -- reach them.
   The rules for headings and body text do NOT: they are scoped
   `main.page .setup ...`, and the dashboard's main is `main.cols`, so they
   are restated here rather than widened, which would reach every page.
   The rest is the difference: no numbered marker column. */
.conns .conn{padding:16px 0;border-bottom:1px solid var(--hairline)}
.conns .conn:last-child{border-bottom:0}
.conns .opt{padding:16px 0}
.conns .conn h3,.conns .opt h2{font-size:1.0625rem;font-weight:600;margin:0 0 4px}
.conns .body p{margin:0 0 10px;color:var(--dim)}
.conns .body p:last-child{margin-bottom:0}
.conns ol.how{color:var(--dim)}

/* ---- The sky-blue blend (decision 2026-09-29) ------------------------- */
/* After Claude and Codex: a text sidebar with the classes under the
   sections, the display lines in the serif, Today in one column, and Runs,
   one row per item with its state. The ground, the blue and the red stay. */
:root{--serif:"Source Serif 4",ui-serif,"New York",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.lead h1{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
.shead h2{font-family:var(--serif);font-weight:500;font-size:1.375rem;letter-spacing:0}
.lead{border-left:0;border-radius:14px;background:color-mix(in srgb,var(--tint,var(--accent)) 10%,transparent)}
@media(min-width:900px){
  #pg-now:checked~.cols{grid-template-columns:minmax(0,1120px);justify-content:center}
}
/* The sidebar from 1100px on a screen taller than a phone held sideways:
   below that the 80px rail keeps the other tabs their width (in-house review). */
@media(min-width:1100px) and (min-height:481px){
  :root{--railw:232px}
  .rail{padding-left:8px;padding-right:8px}
  .rail .brand{text-align:left;padding:0 12px;font-family:var(--serif);font-weight:500;font-size:1.375rem}
  .rail .pgbtn{flex-direction:row;gap:10px;padding:7px 12px;border:0;border-radius:8px;font-size:.875rem;line-height:1.3}
  .rail .pgbtn .tico{width:18px;height:18px}
  .rail .pgbtn:hover{background:var(--wash)}
  .rail a.pgbtn[aria-current]{background:var(--wash)}
  #pg-now:checked~.rail [for=pg-now],#pg-inbox:checked~.rail [for=pg-inbox],#pg-upload:checked~.rail [for=pg-upload],#pg-earn:checked~.rail [for=pg-earn],#pg-status:checked~.rail [for=pg-status],#pg-settings:checked~.rail [for=pg-settings]{background:var(--wash)}
  /* Classes hold everything (decision 2026-09-29): a class is a row, its dot and its name. */
  /* The classes fold under their head (decision 2026-10-01): the panel's one row goes 0fr to 1fr, so no
     height is measured; the chevron flips from a v to a ^. A folded class is out of reach of a reader too. */
  .rail .rclin{display:block;position:absolute;opacity:0;width:0;height:0;pointer-events:none}
  .rail .rclsh{display:flex;align-items:center;justify-content:space-between;cursor:pointer;border-radius:8px;
    font-size:.8125rem;color:var(--faint);padding:14px 12px 4px;margin:0}
  .rail .rclsh:hover{color:var(--dim)}
  .rail .rclin:focus-visible+.rclsh{outline:2px solid var(--accent);outline-offset:-2px}
  .rail .rclin:checked+.rclsh .sico{transform:scaleY(-1)}
  .rail .rclpanel{display:grid;grid-template-rows:0fr}
  .rail .rclin:checked~.rclpanel{grid-template-rows:1fr}
  .rail .rclinner{display:flex;flex-direction:column;gap:2px;min-height:0;overflow:hidden;opacity:0;visibility:hidden}
  .rail .rclin:checked~.rclpanel .rclinner{opacity:1;visibility:visible}
  .rail .rcl .cn{display:none}
  .rail .rcl .cfull{position:static;width:auto;height:auto;clip:auto;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rail .rcl .cdot{width:18px;height:18px}
}

/* ---- Classes hold everything (decision 2026-09-29) --------------------
   The nav lists the classes; a class opens one page of six tabs. The tab
   radios (clf-*), the class radios (cl-*) and the order box sit with the
   page radios before the nav, so these rules reach the nav and the page
   with `~`. Twelve classes at most carry a rule. */
/* The full name is read aloud at every width and shown from 1100px; the short code is only seen. */
.rclsh,.rclin{display:none}
.rclpanel,.rclinner{display:contents}   /* below the sidebar's width the classes sit in the rail as before */
@media(min-width:1100px) and (min-height:481px) and (prefers-reduced-motion:no-preference){
  .rail .rclsh .sico{transition:transform 250ms var(--ease)}
  .rail .rclpanel{transition:grid-template-rows 250ms var(--ease)}
  .rail .rclinner{transition:opacity 250ms var(--ease),visibility 0s 250ms}
  .rail .rclin:checked~.rclpanel .rclinner{transition:opacity 250ms var(--ease)}
}
.rcl .cfull{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cdot{display:grid;place-items:center;width:25px;height:25px}
.cdot::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--tint,var(--dim))}
.rcl .cn{max-width:4.5em;overflow:hidden;text-overflow:ellipsis}
#pg-classes:checked~#cl-all:checked~.rail .rcl.kall,#pg-classes:checked~#cl-1:checked~.rail .rcl.k1,#pg-classes:checked~#cl-2:checked~.rail .rcl.k2,#pg-classes:checked~#cl-3:checked~.rail .rcl.k3,#pg-classes:checked~#cl-4:checked~.rail .rcl.k4,#pg-classes:checked~#cl-5:checked~.rail .rcl.k5,#pg-classes:checked~#cl-6:checked~.rail .rcl.k6,#pg-classes:checked~#cl-7:checked~.rail .rcl.k7,#pg-classes:checked~#cl-8:checked~.rail .rcl.k8,#pg-classes:checked~#cl-9:checked~.rail .rcl.k9,#pg-classes:checked~#cl-10:checked~.rail .rcl.k10,#pg-classes:checked~#cl-11:checked~.rail .rcl.k11,#pg-classes:checked~#cl-12:checked~.rail .rcl.k12{color:var(--ink);font-weight:600}
#cl-all:focus-visible~.rail .rcl.kall,#cl-1:focus-visible~.rail .rcl.k1,#cl-2:focus-visible~.rail .rcl.k2,#cl-3:focus-visible~.rail .rcl.k3,#cl-4:focus-visible~.rail .rcl.k4,#cl-5:focus-visible~.rail .rcl.k5,#cl-6:focus-visible~.rail .rcl.k6,#cl-7:focus-visible~.rail .rcl.k7,#cl-8:focus-visible~.rail .rcl.k8,#cl-9:focus-visible~.rail .rcl.k9,#cl-10:focus-visible~.rail .rcl.k10,#cl-11:focus-visible~.rail .rcl.k11,#cl-12:focus-visible~.rail .rcl.k12{outline:2px solid var(--accent);outline-offset:-2px}
#pg-classes:focus-visible~.rail .rcl.kall,#cl-sort:focus-visible~.cols .sortbtn{outline:2px solid var(--accent);outline-offset:-2px}
#clf-assignments:checked~.cols #cl .list:not(.f-assignments),#clf-lectures:checked~.cols #cl .list:not(.f-lectures),#clf-weeks:checked~.cols #cl .list:not(.f-weeks),#clf-cards:checked~.cols #cl .list:not(.f-cards),#clf-quizzes:checked~.cols #cl .list:not(.f-quizzes),#clf-exams:checked~.cols #cl .list:not(.f-exams){display:none}
#clf-assignments:checked~.cols .folders [for='clf-assignments'],#clf-lectures:checked~.cols .folders [for='clf-lectures'],#clf-weeks:checked~.cols .folders [for='clf-weeks'],#clf-cards:checked~.cols .folders [for='clf-cards'],#clf-quizzes:checked~.cols .folders [for='clf-quizzes'],#clf-exams:checked~.cols .folders [for='clf-exams']{color:var(--ink);background:var(--ground);box-shadow:0 1px 2px rgba(0,0,0,.18)}
#clf-assignments:checked~.cols .fcur .fn-assignments,#clf-lectures:checked~.cols .fcur .fn-lectures,#clf-weeks:checked~.cols .fcur .fn-weeks,#clf-cards:checked~.cols .fcur .fn-cards,#clf-quizzes:checked~.cols .fcur .fn-quizzes,#clf-exams:checked~.cols .fcur .fn-exams{display:inline}
#clf-assignments:focus-visible~.cols .folders [for='clf-assignments'],#clf-lectures:focus-visible~.cols .folders [for='clf-lectures'],#clf-weeks:focus-visible~.cols .folders [for='clf-weeks'],#clf-cards:focus-visible~.cols .folders [for='clf-cards'],#clf-quizzes:focus-visible~.cols .folders [for='clf-quizzes'],#clf-exams:focus-visible~.cols .folders [for='clf-exams']{outline:2px solid var(--accent);outline-offset:1px}
.pagehead .ph,.folders .fcount{display:none}
/* The line counts every class, so it shows under All classes only (in-house review). */
#cl-1:checked~.cols .pagehead .ph.k1,#cl-2:checked~.cols .pagehead .ph.k2,#cl-3:checked~.cols .pagehead .ph.k3,#cl-4:checked~.cols .pagehead .ph.k4,#cl-5:checked~.cols .pagehead .ph.k5,#cl-6:checked~.cols .pagehead .ph.k6,#cl-7:checked~.cols .pagehead .ph.k7,#cl-8:checked~.cols .pagehead .ph.k8,#cl-9:checked~.cols .pagehead .ph.k9,#cl-10:checked~.cols .pagehead .ph.k10,#cl-11:checked~.cols .pagehead .ph.k11,#cl-12:checked~.cols .pagehead .ph.k12{display:inline}
#cl-all:checked~.cols .folders .fcount.kall,#cl-1:checked~.cols .folders .fcount.k1,#cl-2:checked~.cols .folders .fcount.k2,#cl-3:checked~.cols .folders .fcount.k3,#cl-4:checked~.cols .folders .fcount.k4,#cl-5:checked~.cols .folders .fcount.k5,#cl-6:checked~.cols .folders .fcount.k6,#cl-7:checked~.cols .folders .fcount.k7,#cl-8:checked~.cols .folders .fcount.k8,#cl-9:checked~.cols .folders .fcount.k9,#cl-10:checked~.cols .folders .fcount.k10,#cl-11:checked~.cols .folders .fcount.k11,#cl-12:checked~.cols .folders .fcount.k12{display:inline}
#cl-1:checked~.cols #cl .row:not(.k1),#cl-1:checked~.cols #cl .wk:not(.k1),#cl-1:checked~.cols #cl .grp:not(:has(.k1)){display:none}#cl-2:checked~.cols #cl .row:not(.k2),#cl-2:checked~.cols #cl .wk:not(.k2),#cl-2:checked~.cols #cl .grp:not(:has(.k2)){display:none}#cl-3:checked~.cols #cl .row:not(.k3),#cl-3:checked~.cols #cl .wk:not(.k3),#cl-3:checked~.cols #cl .grp:not(:has(.k3)){display:none}#cl-4:checked~.cols #cl .row:not(.k4),#cl-4:checked~.cols #cl .wk:not(.k4),#cl-4:checked~.cols #cl .grp:not(:has(.k4)){display:none}#cl-5:checked~.cols #cl .row:not(.k5),#cl-5:checked~.cols #cl .wk:not(.k5),#cl-5:checked~.cols #cl .grp:not(:has(.k5)){display:none}#cl-6:checked~.cols #cl .row:not(.k6),#cl-6:checked~.cols #cl .wk:not(.k6),#cl-6:checked~.cols #cl .grp:not(:has(.k6)){display:none}#cl-7:checked~.cols #cl .row:not(.k7),#cl-7:checked~.cols #cl .wk:not(.k7),#cl-7:checked~.cols #cl .grp:not(:has(.k7)){display:none}#cl-8:checked~.cols #cl .row:not(.k8),#cl-8:checked~.cols #cl .wk:not(.k8),#cl-8:checked~.cols #cl .grp:not(:has(.k8)){display:none}#cl-9:checked~.cols #cl .row:not(.k9),#cl-9:checked~.cols #cl .wk:not(.k9),#cl-9:checked~.cols #cl .grp:not(:has(.k9)){display:none}#cl-10:checked~.cols #cl .row:not(.k10),#cl-10:checked~.cols #cl .wk:not(.k10),#cl-10:checked~.cols #cl .grp:not(:has(.k10)){display:none}#cl-11:checked~.cols #cl .row:not(.k11),#cl-11:checked~.cols #cl .wk:not(.k11),#cl-11:checked~.cols #cl .grp:not(:has(.k11)){display:none}#cl-12:checked~.cols #cl .row:not(.k12),#cl-12:checked~.cols #cl .wk:not(.k12),#cl-12:checked~.cols #cl .grp:not(:has(.k12)){display:none}
#cl-1:checked~.cols #cl .list:not(:has(.k1))>.emptynote{display:block}#cl-2:checked~.cols #cl .list:not(:has(.k2))>.emptynote{display:block}#cl-3:checked~.cols #cl .list:not(:has(.k3))>.emptynote{display:block}#cl-4:checked~.cols #cl .list:not(:has(.k4))>.emptynote{display:block}#cl-5:checked~.cols #cl .list:not(:has(.k5))>.emptynote{display:block}#cl-6:checked~.cols #cl .list:not(:has(.k6))>.emptynote{display:block}#cl-7:checked~.cols #cl .list:not(:has(.k7))>.emptynote{display:block}#cl-8:checked~.cols #cl .list:not(:has(.k8))>.emptynote{display:block}#cl-9:checked~.cols #cl .list:not(:has(.k9))>.emptynote{display:block}#cl-10:checked~.cols #cl .list:not(:has(.k10))>.emptynote{display:block}#cl-11:checked~.cols #cl .list:not(:has(.k11))>.emptynote{display:block}#cl-12:checked~.cols #cl .list:not(:has(.k12))>.emptynote{display:block}
#cl-all:checked~.cols #cl .coursedoc{display:none}
/* Assignments (Ari, 2026-09-29): across every class it is the due list alone, no tabs. */
#cl-all:checked~.cols section[data-page=classes] .folders,#cl-all:checked~.cols #cl .list:not(.f-assignments){display:none}
.rcl.kall .cn{max-width:none}
/* The phone's one Classes icon and the panel of classes it grows (Ari, 2026-09-29). */
.clsbtn,.clpanel{display:none}
#due:not(:has(.row))>.emptynote,#rv .list:not(:has(.wk))>.emptynote,#nt .list:not(:has(.wk))>.emptynote{display:block}
/* Newest or oldest first, on the two notes tabs only. */
.folders .sortbtn{display:none;margin-left:auto;align-self:center;padding:0 4px;cursor:pointer;color:var(--dim);font-size:.8125rem;white-space:nowrap}
.folders .sortbtn:hover{color:var(--ink)}
.sortbtn::after{content:"newest first ↓"}
#cl-sort:checked~.cols .sortbtn::after{content:"oldest first ↑"}
#clf-lectures:checked~.cols .folders .sortbtn,#clf-weeks:checked~.cols .folders .sortbtn{display:inline}
#cl-sort:checked~.cols #nt .list{flex-direction:column-reverse}
#cl-sort:checked~.cols #nt .grp{flex-direction:column-reverse}
#cl-sort:checked~.cols #nt .grp>.grph{order:1}
#cl-sort:checked~.cols #nt .list>.coursedoc{order:1}
@media(min-width:700px),(max-width:699px) and (max-height:480px){
  #pg-classes:checked~#cl-all:checked~.rail .rcl.kall,#pg-classes:checked~#cl-1:checked~.rail .rcl.k1,#pg-classes:checked~#cl-2:checked~.rail .rcl.k2,#pg-classes:checked~#cl-3:checked~.rail .rcl.k3,#pg-classes:checked~#cl-4:checked~.rail .rcl.k4,#pg-classes:checked~#cl-5:checked~.rail .rcl.k5,#pg-classes:checked~#cl-6:checked~.rail .rcl.k6,#pg-classes:checked~#cl-7:checked~.rail .rcl.k7,#pg-classes:checked~#cl-8:checked~.rail .rcl.k8,#pg-classes:checked~#cl-9:checked~.rail .rcl.k9,#pg-classes:checked~#cl-10:checked~.rail .rcl.k10,#pg-classes:checked~#cl-11:checked~.rail .rcl.k11,#pg-classes:checked~#cl-12:checked~.rail .rcl.k12{border-left-color:var(--accent)}
}
@media(min-width:1100px) and (min-height:481px){
  #pg-classes:checked~#cl-all:checked~.rail .rcl.kall,#pg-classes:checked~#cl-1:checked~.rail .rcl.k1,#pg-classes:checked~#cl-2:checked~.rail .rcl.k2,#pg-classes:checked~#cl-3:checked~.rail .rcl.k3,#pg-classes:checked~#cl-4:checked~.rail .rcl.k4,#pg-classes:checked~#cl-5:checked~.rail .rcl.k5,#pg-classes:checked~#cl-6:checked~.rail .rcl.k6,#pg-classes:checked~#cl-7:checked~.rail .rcl.k7,#pg-classes:checked~#cl-8:checked~.rail .rcl.k8,#pg-classes:checked~#cl-9:checked~.rail .rcl.k9,#pg-classes:checked~#cl-10:checked~.rail .rcl.k10,#pg-classes:checked~#cl-11:checked~.rail .rcl.k11,#pg-classes:checked~#cl-12:checked~.rail .rcl.k12{background:var(--wash);border-left-color:transparent}
}
/* A phone: Today, Assignments, Inbox, Classes, Status; the classes live behind the one icon. */
@media(max-width:699px) and (min-height:481px){
  .rail .rcl:not(.kall){display:none}
  .rail .clsbtn{display:flex}
  #pg-classes:checked~#cl-all:not(:checked)~.rail .clsbtn{color:var(--ink);font-weight:600}
  #pg-classes:checked~#cl-all:not(:checked)~.rail .clsbtn .tico{stroke-width:2.1}
  .railin:not(#cl-all):focus-visible~.rail .clsbtn{outline:2px solid var(--accent);outline-offset:-2px}
  .tabs:has(#clmenu:focus-visible) .clsbtn{outline:2px solid var(--accent);outline-offset:-2px}
  /* Classes grows the pill upward into a panel of the classes; a pick opens it. */
  .tabs:has(#clmenu:checked){width:min(360px,calc(100% - 24px))}
  .tabs:has(#clmenu:checked) .clsbtn{color:var(--ink)}
  #clmenu:checked~.clpanel{display:block;order:-1;flex-basis:100%;max-height:60vh;overflow-y:auto;padding:6px 4px 4px}
  .clph{margin:0 10px 4px;font-size:.8125rem;color:var(--dim)}
  .clrow{display:flex;align-items:center;min-height:44px;padding:0 10px;border-radius:14px;color:var(--ink);cursor:pointer}
  .clrow:hover{background:var(--wash)}
  #pg-classes:checked~#cl-1:checked~.rail .clrow.k1,#pg-classes:checked~#cl-2:checked~.rail .clrow.k2,#pg-classes:checked~#cl-3:checked~.rail .clrow.k3,#pg-classes:checked~#cl-4:checked~.rail .clrow.k4,#pg-classes:checked~#cl-5:checked~.rail .clrow.k5,#pg-classes:checked~#cl-6:checked~.rail .clrow.k6,#pg-classes:checked~#cl-7:checked~.rail .clrow.k7,#pg-classes:checked~#cl-8:checked~.rail .clrow.k8,#pg-classes:checked~#cl-9:checked~.rail .clrow.k9,#pg-classes:checked~#cl-10:checked~.rail .clrow.k10,#pg-classes:checked~#cl-11:checked~.rail .clrow.k11,#pg-classes:checked~#cl-12:checked~.rail .clrow.k12{background:var(--wash);font-weight:600}
}
/* Delete my account: two presses, the warning under the first (decision 2026-09-29) */
.delacct{margin-top:12px}.delacct summary{display:inline-block;list-style:none;cursor:pointer}
.delacct summary::-webkit-details-marker{display:none}.delacct[open] summary{margin-bottom:8px}
.delacct p{color:var(--dim)}.delacct a{margin-left:12px}
/* Settings, System Settings' way (2026-09-29): categories on the left, one on the right; on a phone
   the list, then the category with a back link. Radios read with :has(), like the pages. No boxes:
   rows on hairlines, label left and control right. */
.stin{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.sttitle{font-size:1.5rem;margin:0 0 12px}
.stabbar{display:flex;flex-direction:column;gap:2px}
.stabbar label{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:var(--ink);cursor:pointer}
.stabbar .tico{width:18px;height:18px;flex:none;color:var(--dim)}
.stin:checked+label{background:var(--wash);font-weight:600}.stin:checked+label .tico{color:var(--accent)}
.stin:focus-visible+label{outline:2px solid var(--accent);outline-offset:-2px}
.stback{display:none;color:var(--accent);margin:0 0 6px;text-decoration:none}
.cols:has(#st-subscription:checked)>section[data-page=settings][id]:not(#subscription){display:none}.cols:has(#st-connectors:checked)>section[data-page=settings][id]:not(#connectors){display:none}.cols:has(#st-schedule:checked)>section[data-page=settings][id]:not(#schedule){display:none}.cols:has(#st-syllabi:checked)>section[data-page=settings][id]:not(#syllabi){display:none}.cols:has(#st-appearance:checked)>section[data-page=settings][id]:not(#appearance){display:none}.cols:has(#st-account:checked)>section[data-page=settings][id]:not(#account){display:none}
section[data-page=settings] .settings label,section[data-page=settings] .settings .days{grid-template-columns:minmax(0,1fr) auto}
section[data-page=settings] .settings select{justify-self:end}
/* In px, not rem: the slider sets the root size, and its own track does not grow with it (Ari, 2026-10-01). */
section[data-page=settings] .settings input[type=range]{justify-self:end;width:192px}
.settings label.switch{grid-template-columns:minmax(0,1fr) auto}
input[role=switch]{appearance:none;-webkit-appearance:none;margin:0;width:42px;height:26px;border-radius:13px;
  background:var(--hairline);position:relative;cursor:pointer;justify-self:end}
input[role=switch]::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25)}
input[role=switch]:checked{background:var(--accent)}input[role=switch]:checked::after{transform:translateX(16px)}
input[role=switch]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:no-preference){input[role=switch],input[role=switch]::after{transition:.18s ease}}
section[data-page=settings] .days label{position:relative;border:1px solid var(--hairline);border-radius:999px;
  padding:4px 10px;margin:0 6px 6px 0;cursor:pointer}
section[data-page=settings] .days input{position:absolute;opacity:0;width:0;height:0}
section[data-page=settings] .days label:has(input:checked){border-color:var(--accent);color:var(--ink);font-weight:600}
section[data-page=settings] .days label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
@media(min-width:900px){
  #pg-settings:checked~.cols{grid-template-columns:200px minmax(0,1fr);column-gap:56px}
  #pg-settings:checked~.cols>section[data-page=settings]{max-width:none}     /* to the content edge, flush (2026-10-03) */
  #pg-settings:checked~.cols>.stabs{grid-column:1;grid-row:1/span 9;align-self:start;position:sticky;top:24px}
  #pg-settings:checked~.cols>section[data-page=settings][id]{grid-column:2;grid-row:1}
  .cols:has(#st-home:checked)>section[data-page=settings][id]:not(.stabs+section){display:none}
  .cols:has(#st-home:checked) .stabbar label:first-of-type{background:var(--wash);font-weight:600}
  .cols:has(#st-home:checked) .stabbar label:first-of-type .tico{color:var(--accent)}
}
@media(max-width:899px){
  .cols:has(#st-home:checked)>section[data-page=settings][id]{display:none}
  .cols:has(.stin:not(#st-home):checked)>.stabs{display:none}
  .stabbar{gap:0}.stabbar label{padding:14px 2px;border-radius:0;border-bottom:1px solid var(--hairline)}
  .stabbar label::after{content:'\203A';margin-left:auto;color:var(--dim);font-size:1.25rem;line-height:1}
  .stin:checked+label{background:none;font-weight:400}
  .stback{display:inline-block}
  section[data-page=settings] .shead:has(.stback){flex-direction:column;align-items:flex-start;gap:4px}
  section[data-page=settings] .settings .days{grid-template-columns:minmax(0,1fr);gap:8px}
}

/* ---- Today in two columns (decision 2026-09-29) ------------------------
   The next item centred at the top; the day down the left; Ready for you
   and Assignments as cards on the right: the one place the dashboard draws
   boxes, by Ari's choice. A phone stacks the band and its notices, the day,
   Ready for you, Assignments. */
.lead{display:flex;flex-direction:column;align-items:center;text-align:center}
.lead .nextmeta{justify-content:center}
.lead .lastcls{max-width:62ch;margin-top:14px}
.lead .lastcls .nlinks{justify-content:center}
.lead.next-own,.lead.next-due{--tint:var(--dim);--tint-ink:var(--ink)}
.lead.next-due h1,.lead.next-due .nextmeta b{color:var(--red)}
.tright{display:flex;flex-direction:column;gap:16px;min-width:0}
.tright>section{border:1px solid var(--rule);border-radius:14px;padding:16px 20px}
.tright>section .shead{margin-top:0}
@media(min-width:900px){
  /* One twelve-column grid for the cards and the sheets under them (decision 2026-10-03,
     flush layout): the day takes the first four, like Next above it, Finn's side the other
     eight, one 16px gap across and down, and the day ends where the right column does,
     scrolling in its own sheet. */
  .todaycols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:stretch}
  .tleft{grid-column:span 4;display:flex;min-width:0}
  .tright{grid-column:span 8}
  .tleft>#yourday{flex:1;display:flex;flex-direction:column;min-height:320px}
  .tleft>#yourday .day{flex:1 1 0;min-height:0;overflow-y:auto;scrollbar-width:none}
  .tleft>#yourday .day::-webkit-scrollbar{display:none}
  #pg-now:checked~.cols{row-gap:16px}
}
@media(max-width:899px){
  /* Your day second, straight under the next-class band (Ari, 2026-09-29):
     the columns dissolve into the page so the day can rise above the rest. */
  .todaycols,.tleft,.tright{display:contents}
  /* The exam strip and every notice (Canvas token, no run, the free week) stay with the band,
     above the day's grid: the grid is a screen tall on a phone (in-house review 2026-09-30). */
  .cols>.hello,.cols>.lead,.cols>.examcd,.cols>section.wide:has(>.note){order:-2}#yourday{order:-1}#needs{order:1}.todaycols section:not([id]){order:5}
}

/* ---- Today, the taste pass (decision 2026-09-29) ------------------------
   Your day reads as a calendar: a card like its neighbours, hour lines
   across the whole lane with the label centred on its line, a faint
   half-hour, blocks on an opaque tint with rounded corners and a 3px inset
   bar, what has ended at half strength, and now as a tag in the hours with
   a thin line that runs behind the blocks, so it never hides one
   (Ari, 2026-09-28). */
.tleft>section{border:1px solid var(--rule);border-radius:14px;padding:16px 20px}
.tleft>section .shead{margin-top:0}
.day{grid-template-columns:56px minmax(0,1fr);padding-top:14px;overflow:hidden}
.day .hrs{grid-column:1/-1;position:relative;z-index:0}
.day .hrs>span{position:relative;border-top:0;padding:0 10px 0 0;margin-top:-.45em;font-size:.6875rem;line-height:1;
  color:var(--dim);text-align:right;width:56px}
.day .hrs>span::before{content:"";position:absolute;left:56px;right:0;top:.45em;border-top:1px solid var(--hairline);width:2000px}
.day .hrs>span::after{content:"";position:absolute;left:56px;top:calc(2rem + .45em);width:2000px;
  border-top:1px dashed color-mix(in srgb,var(--hairline) 70%,transparent)}
.day .nowat{z-index:1}
.day .lane{position:relative;z-index:2}
.day .dls{z-index:3}
.day .blk{margin:1px 0 1px 6px;padding:5px 10px 5px 12px;border-left:0;border-radius:8px;
  background:color-mix(in srgb,var(--tint,var(--dim)) 15%,var(--ground));box-shadow:inset 3px 0 0 var(--tint,var(--dim))}
.day .blk.own{--tint:var(--dim);background:color-mix(in srgb,var(--ink) 6%,var(--ground))}
.day .blk.pin{padding:0 10px 0 12px}
.day .dl.past{opacity:.55}
/* Ended: paler, not see-through, so the hour lines stay behind it. */
.day .blk.past{background:color-mix(in srgb,var(--tint,var(--dim)) 6%,var(--ground));
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--tint,var(--dim)) 45%,var(--ground))}
.day .blk.past b,.day .blk.past span{color:var(--faint)}
/* A short item keeps its name; the time gives way first. */
.day .blk.pin b{flex:0 1 auto;min-width:3em}
.day .blk.pin span{flex:1 1 0;min-width:0}
.day .dl{border-radius:0 0 6px 6px}
.day .nowat span{justify-self:end;position:relative;margin:-8px 4px 0 0}
.day .nowat span::before{content:"";position:absolute;left:calc(100% + 4px);top:50%;width:2000px;
  border-top:1.5px solid var(--accent);opacity:.6}
.note.offer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.note.offer form.inline{display:inline-flex}
.note.offer .btn,.note.offer button{margin:0}

/* ---- Your day, as Google Calendar draws a day (decision 2026-09-29) ------
   Ari: "make it look like google calendar". The day's name over its date
   in a filled circle; 48px an hour; "9 AM" in a grey gutter centred on its
   line, the first one hidden; plain hour lines and a line down the gutter;
   events as solid chips in their course's ink with ground-coloured text,
   4px corners, the title bold and the time under it; the student's own
   events in the accent, as Google gives your own calendar its blue; what
   has ended pale. Now is a dot and a line in the accent, not Google's red
   (red is a deadline here), behind the chips so it never covers a class. */
.dayhead{display:none}
@media(min-width:900px){
  .dayhead{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:4px 0 6px 56px;padding-left:8px}
}
.dayhead span{font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink)}
.dayhead b{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--accent-ink);
  color:var(--ground);font-size:1.25rem;font-weight:500}
.day{padding-top:8px}
.day .hrs>span{font-size:.625rem;color:var(--dim);letter-spacing:.02em;padding-right:8px}
.day .hrs>span:first-child{color:transparent}
.day .hrs>span::before{border-top-color:var(--rule)}
.day .hrs>span::after{display:none}
.day::before{content:"";position:absolute;left:56px;top:8px;bottom:0;border-left:1px solid var(--rule)}
.day .blk{margin:0 4px 1px 4px;padding:3px 8px;border-radius:4px;box-shadow:0 0 0 1px var(--ground);
  background:var(--tint-ink,var(--accent-ink))}
.day .blk b,.day .blk span{color:var(--ground)}
.day .blk b{font-size:.75rem;font-weight:600;line-height:1.3}
.day .blk span{font-size:.6875rem;line-height:1.3;opacity:.9}
.day .blk.own{--tint:var(--accent);--tint-ink:var(--accent-ink);background:var(--accent-ink)}
.day .blk.pin{padding:0 8px}
.day .blk.pin b,.day .blk.pin span{line-height:22px}
.day .blk.past{background:color-mix(in srgb,var(--tint-ink,var(--accent-ink)) 22%,var(--ground));box-shadow:0 0 0 1px var(--ground)}
.day .blk.past b,.day .blk.past span{color:var(--tint-ink,var(--accent-ink));opacity:1}
.day .dl{border:1px solid var(--red);border-radius:4px;padding:0 6px;margin-right:4px;line-height:1.5}
.day .nowat span{font-size:0;padding:0;width:10px;height:10px;border-radius:50%;margin:-5px -5px 0 0;background:var(--accent-ink)}
.day .nowat span::before{left:10px;top:4px;border-top:2px solid var(--accent-ink);opacity:1}
/* ---- Motion (decision 2026-09-29, from transitions.dev) -----------------
   Folds open and close, the notes arrive through a skeleton, a label swaps
   in place, Done draws a check, the switch bounces, a wrong entry shakes,
   and the current tab's wash slides to the next. Every one only under
   no-preference; the script checks the same query before it animates. */
.skel{display:flex;flex-direction:column;gap:12px;padding:6px 0 14px}
.skel i{display:block;height:.75em;border-radius:4px;background:var(--wash);width:92%}
.skel i:nth-child(2){width:78%}.skel i:nth-child(3){width:86%}.skel i:nth-child(4){width:54%}
.tcheck{display:inline-block;vertical-align:-3px;color:var(--clear)}
.tcheck svg{display:block;width:16px;height:16px;overflow:visible}
.tcheck path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mstatus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
@media(prefers-reduced-motion:no-preference){
  .skel i{animation:tpulse 1s ease-in-out infinite}
  .shimmer{background:linear-gradient(90deg,var(--dim) 0 40%,var(--ink) 50%,var(--dim) 60% 100%) 100% 0/400% 100% no-repeat;
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:tshimmer 2s linear infinite}
  .tcheck{animation:tcheck 200ms var(--ease) both}
  .tcheck path{stroke-dasharray:20;stroke-dashoffset:20;animation:tdraw 250ms var(--ease) 60ms forwards}
  input[role=switch].moved::after{transition:none;animation:toff 350ms cubic-bezier(.34,1.35,.64,1) both}
  input[role=switch].moved:checked::after{animation-name:ton}
  .tshake{animation:tshake 280ms linear}
  /* A row's › leans toward where it goes on hover. */
  details.mrest>summary::after,.rdr .rd::after,.stabbar label::after{transition:transform 350ms var(--ease)}
  details.mrest>summary:hover::after,.rdr summary:hover .rd::after,.stabbar label:hover::after{transform:translateX(2px)}
  /* A study day just picked: its check pops in. */
  section[data-page=settings] .days label.picked:has(input:checked)::before{animation:tpick 300ms cubic-bezier(.34,1.35,.64,1) both}
  .toast{animation:ttoastin 300ms cubic-bezier(.34,1.3,.64,1) both}   /* rises in, already reading Saved */
  .toast.out{animation:ttoastout 250ms ease-in both}
  .ttip{transition:opacity 50ms ease-out,transform 50ms ease-out}
  .ttip.on{transition:opacity 150ms ease-out,transform 150ms ease-out}
  .ttip.on.glide{transition:opacity 150ms ease-out,transform 150ms ease-out,left 160ms var(--ease),top 160ms var(--ease)}
}
@keyframes tpick{from{transform:rotate(45deg) scale(0)}}
@keyframes ttoastin{from{opacity:0;transform:translate(-50%,16px)}}
@keyframes ttoastout{to{opacity:0;transform:translate(-50%,12px)}}
details.mrest>summary::after,.rdr .rd::after{display:inline-block;content:"\203A";margin-left:.3em}   /* inline-block drops a leading space */
/* A picked study day carries a check before its name. */
section[data-page=settings] .days label:has(input:checked)::before{content:"";display:inline-block;width:4px;height:8px;
  margin:0 7px 2px 1px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
/* "Saved", once, after any Save: a note that rises from the foot and leaves. */
.toast{position:fixed;z-index:50;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);
  padding:8px 16px;border-radius:999px;background:var(--ink);color:var(--ground);font-size:.875rem;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.14);pointer-events:none}
@media(max-width:699px) and (min-height:481px){.toast{bottom:calc(72px + env(safe-area-inset-bottom))}}
/* A calendar block's tooltip: one box, above the block, that glides to the next. */
.ttip{position:fixed;z-index:50;pointer-events:none;max-width:280px;padding:5px 9px;border-radius:6px;
  background:var(--ink);color:var(--ground);font-size:.8125rem;line-height:1.35;
  opacity:0;transform:translate(-50%,-100%) scale(.98)}
.ttip.on{opacity:1;transform:translate(-50%,-100%)}
.ttip.below.on{transform:translate(-50%,0)}.ttip.below{transform:translate(-50%,0) scale(.98)}
@keyframes tpulse{50%{opacity:.5}}
@keyframes tshimmer{to{background-position:0 0}}
@keyframes tcheck{from{opacity:0;transform:scale(.6)}}
@keyframes tdraw{to{stroke-dashoffset:0}}
@keyframes ton{0%{transform:none}55%{transform:translateX(17px)}100%{transform:translateX(16px)}}
@keyframes toff{0%{transform:translateX(16px)}55%{transform:translateX(-1px)}100%{transform:none}}
@keyframes tshake{
  0%{transform:none;animation-timing-function:var(--ease)}
  28.57%{transform:translateX(6px);animation-timing-function:var(--ease)}
  57.14%{transform:translateX(-6px);animation-timing-function:var(--ease)}
  78.57%{transform:translateX(4px);animation-timing-function:var(--ease)}
  100%{transform:none}}
/* In-house review, 2026-09-29: a 23:59 deadline takes the last row, and its tag
   (about 18px on a 12px row) was cut by overflow:hidden; room under the day for it.
   Ended chips at 12% keep their ink at AA; a one-quarter chip's line fits its 11px. */
.day{padding-bottom:12px}
.day .blk.past{background:color-mix(in srgb,var(--tint-ink,var(--accent-ink)) 12%,var(--ground))}
.day .blk.pin.d1 b,.day .blk.pin.d1 span{line-height:11px}

/* The Inbox (decision 2026-09-29): its count on the rail, and Coast's message as written. */
.pgbtn .badge{margin-left:auto;min-width:1.35em;padding:0 .4em;border-radius:999px;background:var(--accent);color:var(--ground);
  font-size:.72rem;font-weight:600;line-height:1.35em;text-align:center}

/* ---- Ready for you and the exam countdown (decision 2026-09-29) ---------
   Ready for you heads the right column: a row per thing only the student
   can finish, its title, course, kind and when, and one Open button. The
   next exam within the week is a strip under the band, its countdown a
   pill in the deadline colours. */
#ready .row.rdy{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:10px 0}
#ready .what{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;min-width:0}
#ready .what b{flex:1 0 100%;font-weight:600}
#ready .what .cname,#ready .rkind{font-size:.8125rem;color:var(--dim)}
#ready a.open{display:inline-block;padding:5px 14px;border-radius:8px;background:var(--accent-ink);color:var(--ground);
  font-size:.875rem;font-weight:600;text-decoration:none}
#ready a.open:hover{background:color-mix(in srgb,var(--accent-ink) 82%,var(--ink))}
@media(prefers-reduced-motion:no-preference){#ready a.open:active{transform:scale(.97)}}
.examcd p{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;padding:12px 18px;
  border:1px solid var(--rule);border-radius:14px}
.examcd .cd{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;font-size:.8125rem;
  font-weight:600;background:var(--brass);color:var(--ground)}
.examcd.due-now .cd,.examcd.due-near .cd{background:var(--red)}
.examcd.due-later .cd{background:var(--dim)}
.examcd b{font-size:1.0625rem}
.examcd .cname{color:var(--dim)}
.examcd a{margin-left:auto;font-weight:600}
@media(max-width:899px){#ready{order:0}}

/* ---- Today's blocks are soft sheets (decision 2026-09-29) ---------------
   From the motion-tabs menu Ari liked: each block on Today is a rounded
   sheet a shade off the ground, a hairline edge, a lit top edge and a soft
   shadow; rows inside lose their rules and take a round icon and a wash on
   hover; buttons are pills, the first action solid ink. The ground, the
   rail and the phone bar do not change, and nothing is drawn behind. */
:root{--sheet:rgba(255,255,255,.78);--sheet-edge:rgba(28,27,25,.07);--sheet-hi:rgba(255,255,255,.9);
  --sheet-shadow:0 1px 2px rgba(28,27,25,.04),0 10px 30px rgba(28,27,25,.06);--wash2:rgba(28,27,25,.06)}
:root:not([data-theme="light"]){@media(prefers-color-scheme:dark){
  --sheet:rgba(255,255,255,.045);--sheet-edge:rgba(255,255,255,.07);--sheet-hi:rgba(255,255,255,.08);
  --sheet-shadow:0 10px 30px rgba(0,0,0,.28);--wash2:rgba(255,255,255,.08)}}
:root[data-theme="dark"]{--sheet:rgba(255,255,255,.045);--sheet-edge:rgba(255,255,255,.07);--sheet-hi:rgba(255,255,255,.08);
  --sheet-shadow:0 10px 30px rgba(0,0,0,.28);--wash2:rgba(255,255,255,.08)}
.lead,.examcd p,.tleft>section,.tright>section{background-color:var(--sheet);border:.5px solid var(--sheet-edge);
  border-radius:28px;box-shadow:inset 0 .5px 0 var(--sheet-hi),var(--sheet-shadow)}
/* The band: lit from its top by its own tint, red for a deadline. */
.lead{padding:34px 24px 30px;background-image:radial-gradient(120% 140% at 50% 0%,
  color-mix(in srgb,var(--glow,var(--tint,var(--accent))) 16%,transparent),transparent 62%)}
.lead.next-due{--glow:var(--red)}
.lead .lastcls{background:var(--wash);border-radius:18px;padding:14px 16px;text-align:left}
.examcd p{border-radius:999px;padding:10px 12px 10px 10px}
.examcd .cd{padding:5px 11px}
.examcd p a{padding:8px 16px;border-radius:999px;background:var(--wash2);color:var(--ink);text-decoration:none}
.note.offer button{border-radius:999px;padding:9px 16px;border:.5px solid var(--sheet-edge);background:var(--sheet);
  box-shadow:var(--sheet-shadow);color:var(--ink);font-weight:600}
.tleft>section,.tright>section{padding:24px;border-radius:20px}
.todaycols .shead{border-bottom:0}
#ready .row.rdy,.need{border-bottom:0;border-radius:14px;margin:0 -12px;padding:12px;transition:background-color 180ms}
#ready .row.rdy:hover,.need:hover{background-color:var(--wash)}
#ready .row.rdy{grid-template-columns:36px minmax(0,1fr) auto;column-gap:14px}
.need{grid-template-columns:36px minmax(0,1fr) auto;column-gap:14px;align-items:start}
#ready .row.rdy::before,.need::before{content:"";width:36px;height:36px;border-radius:50%;background:var(--wash2) no-repeat center/17px}
#ready .row.rdy::before{align-self:center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E")}
.need::before{grid-column:1;grid-row:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.need .nwhat{grid-column:2;grid-row:1}
.need .nwhen{grid-column:3;grid-row:1;justify-content:flex-end;white-space:nowrap;margin-top:2px}
#ready a.open,.need .nlinks a{border-radius:999px;padding:7px 16px;background:var(--wash2);color:var(--ink)}
#ready a.open:hover,.need .nlinks a:hover{background:color-mix(in srgb,var(--ink) 14%,transparent)}
#ready .shead+.row.rdy a.open,.need .nlinks a:first-child{background:var(--ink);color:var(--ground)}
#ready .shead+.row.rdy a.open:hover,.need .nlinks a:first-child:hover{background:color-mix(in srgb,var(--ink) 85%,var(--ground))}
@media(max-width:899px){.examcd p{border-radius:22px}}
/* A 375px phone leaves the title too little room beside a nowrap due time: the time goes above it. */
@media(max-width:520px){.need .nwhen{grid-column:2;grid-row:1;justify-content:flex-start}.need .nwhat{grid-row:2}.need::before{grid-row:1/3}}

/* ---- Your day as the mockup drew it (decision 2026-09-29) ---------------
   Ari chose the soft-sheets mockup's day over the Google Calendar look, on a
   phone too: the date in a small ink circle with its weekday beside it, hour
   labels at the left on hairlines, classes as soft tinted blocks with a
   coloured left edge, a red now-line from a dot, a deadline a red dot with
   its title. The grid, slots and markup are unchanged. */
.dayhead{display:flex;flex-direction:row;align-items:center;gap:12px;margin:6px 0 14px;padding-left:0}
.dayhead b{order:-1;width:40px;height:40px;background:var(--ink);color:var(--ground);font-size:18px;font-weight:600}
.dayhead span{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--dim)}
.day{display:grid;grid-template-columns:44px minmax(0,1fr);padding-top:8px}
#today{display:none}
.day::before{display:none}
.day .hrs>span{text-align:left;padding:0;font-size:12px;letter-spacing:0;color:var(--faint)}
.day .hrs>span:first-child{color:var(--faint)}
.day .hrs>span::before{left:44px;border-top:.5px solid var(--hairline)}
/* The 8px from the hour line is the lanes' padding, not each block's margin-left, which reset the
   side-by-side lanes (.lw<n>.lx<i>) on the student's own events and overlapped lane two (review 2026-09-30). */
.day ol{padding-left:8px}
.day .blk{margin:1px 0}   /* weaker than .lw<n>.lx<i>, so a lane's margin-left still wins */
.day .blk,.day .blk.own{padding:5px 12px;border-radius:14px;
  background:color-mix(in srgb,var(--tint,var(--dim)) 16%,transparent);box-shadow:inset 3px 0 0 var(--tint,var(--dim))}
.day .blk.own{--tint:var(--dim)}
.day .blk b{color:var(--ink);font-size:.875rem;font-weight:600}
.day .blk span{color:var(--dim);font-size:.78rem;opacity:1}
.day .blk.pin{padding:0 12px}
.day .blk.past{background:color-mix(in srgb,var(--tint,var(--dim)) 16%,transparent);opacity:.55}
.day .blk.past b{color:var(--ink)}.day .blk.past span{color:var(--dim)}
/* A deadline stays a tag at the lane's right edge, on the ground, so it never runs through a class's
   text (review 2026-09-30); at most 55% wide, so a class's time and room show beside it, the
   whole title in its tooltip. The mockup's red dot leads its title. */
.day .dl{position:relative;justify-self:end;margin-right:4px;border:0;border-radius:999px;background:var(--ground);
  max-width:55%;padding:1px 8px 1px 20px;box-shadow:0 1px 3px rgba(0,0,0,.14);color:var(--ink);font-size:.84rem;font-weight:600;line-height:1.3}
.day .dl::before{content:"";position:absolute;left:8px;top:calc(.35em + 1px);width:8px;height:8px;border-radius:50%;background:var(--red)}
.day .blk a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.day .nowat span{justify-self:end;width:8px;height:8px;margin:-4px -4px 0 0;background:var(--red)}
.day .nowat span::before{left:8px;top:3px;border-top:1.5px solid var(--red)}

/* ---- Today leads with what to do (decision 2026-09-30) -------------------
   Two cards on top, whatever comes next on the calendar and then Do next; under
   them the day down the left and one sheet on the right, Needs you, Study
   today and What the agent did, each a short list in the Inbox's manner. On a phone
   the cards, then that sheet, then the day. */
.tlead{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin:0}
/* On a laptop the cards sit on the sheets' twelve columns (decision 2026-10-03, flush layout):
   four each, and the last takes what is left, so its edges meet the sheets under it. */
@media(min-width:900px){
  .tlead{grid-template-columns:repeat(12,minmax(0,1fr))}
  .tlead>.tcard{grid-column:span 4}
  .tlead>.tcard:nth-child(3):last-child{grid-column:span 8}
  .tlead>.tcard:nth-child(2):last-child{grid-column:1/-1}
}
.tcard{background-color:var(--sheet);border:.5px solid var(--sheet-edge);border-radius:20px;
  box-shadow:inset 0 .5px 0 var(--sheet-hi),var(--sheet-shadow);padding:24px;display:flex;flex-direction:column;gap:6px;min-width:0}
.tk{margin:0;font-size:.8125rem;font-weight:600;color:var(--faint)}
.tk span{color:var(--accent-ink);margin-left:6px}
.tcard h2{font-family:var(--serif);font-weight:400;font-size:1.625rem;line-height:1.2;margin:0;border:0;padding:0;overflow-wrap:anywhere}
.tcard h2 .cname::before{display:none}
.tsub{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;font-size:.875rem;color:var(--dim)}
.tlast{margin:4px 0 0;font-size:.875rem;color:var(--dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tlast b{color:var(--ink);font-weight:600;margin-right:6px}
.tact{margin:auto 0 0;padding-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.tact a,.tact .ask,.tact .golab,:is(#side,#lastnight) .tna a{border:0;border-radius:999px;padding:6px 14px;background:var(--wash2);color:var(--ink);
  font:inherit;font-weight:600;font-size:.8125rem;line-height:1.4;text-decoration:none;white-space:nowrap;cursor:pointer}
.tdo .tact>:first-child,:is(#side,#lastnight) .tna>a:first-child{background:var(--ink);color:var(--ground)}
.tact .ask.did{background:var(--dim);color:var(--ground)}
.tright>#side,.tright>#lastnight{padding:24px}
:is(#side,#lastnight) .tlist{list-style:none;margin:0;padding:0}
:is(#side,#lastnight) .tn{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:center;padding:9px 10px;margin:0 -10px;border-radius:12px}
:is(#side,#lastnight) .tn:hover{background-color:var(--wash)}
:is(#side,#lastnight) .tnt{font-weight:600;font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#side,#lastnight) .tna{grid-row:1/3;grid-column:2;display:flex;gap:6px}
:is(#side,#lastnight) .tna a{padding:5px 12px}
:is(#side,#lastnight) .tnm{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;font-size:.8125rem;color:var(--dim);min-width:0}
:is(#side,#lastnight) .cd{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 8px 2px 6px;font-size:.75rem;font-weight:600;
  color:var(--red-wash);background:var(--red)}
:is(#side,#lastnight) .due-week .cd{background:var(--brass);color:var(--ground)}
:is(#side,#lastnight) .due-later .cd{background:var(--wash2);color:var(--dim)}
:is(#side,#lastnight) .state{display:inline-flex;align-items:center;gap:3px;color:var(--faint)}
:is(#side,#lastnight) .state.st-ready{color:var(--clear);font-weight:600}
:is(#side,#lastnight) .tmore{margin:4px 0 0;font-size:.8125rem}
:is(#side,#lastnight) .tnight{margin:0;font-size:.875rem;color:var(--dim)}
:is(#side,#lastnight) .tsaid{margin:10px 0 4px;font-size:.875rem;color:var(--ink);overflow-wrap:anywhere}
/* What the agent did (decision 2026-10-03): its own sheet above Needs you, headed like Your day. */
:is(#side,#lastnight) .shead span{font-size:.8125rem;color:var(--faint)}
/* What Finn did past four rows (2026-10-03): the rest behind Show all, opened in place. */
#lastnight .tall>summary{list-style:none;cursor:pointer;width:max-content;margin-top:6px;font-size:.8125rem;font-weight:600;color:var(--accent-ink)}
#lastnight .tall>summary::-webkit-details-marker{display:none}
#lastnight .tall .cl,#lastnight .tall[open] .rd{display:none}
#lastnight .tall[open] .cl{display:inline}
#lastnight .tsaid{font-family:var(--serif);font-style:italic;color:var(--dim);font-size:.9375rem;line-height:1.45}
/* The agent's card beside Next and Do next (decision 2026-10-03): a dot for its state, the
   count as the headline, why it needs a press, and Run Finn now as the one solid button. */
.tfinn .tk .live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--clear);margin:0 6px 1px 0;vertical-align:middle}
.tfinn .tk .live.warn{background:var(--brass)}
.tfinn .twarn{margin:10px 0 0;font-size:.875rem;color:var(--brass)}
.tfinn .twarn a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.tfinn .tact{padding-top:14px}
.tfinn .tact .btn,.tfinn .tact .ask,.tfinn .tact .runq{border:0;border-radius:999px;padding:10px 20px;background:var(--ink);color:var(--ground);
  font:inherit;font-weight:600;font-size:.9375rem;line-height:1.4;text-decoration:none;cursor:pointer}
.tfinn .runline{align-self:center;font-size:.8125rem;color:var(--dim)}
/* Run Finn now on the Claude page (2026-10-03): a ring turns while Finn works; when the run is filed
   it fades, still turning, as a check draws in its place. Opacity, transform and stroke only. */
.tfinn .tact .runq{display:inline-flex;align-items:center;gap:8px}
.tfinn .tact .runq:disabled{cursor:default}
.rspin svg{display:block;width:16px;height:16px;overflow:visible}
.rspin circle,.rspin path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rspin circle{stroke-dasharray:12 28;transform-box:fill-box;transform-origin:center}
.rspin path{stroke-dasharray:20;stroke-dashoffset:20}
.runq.done .rspin circle{opacity:0}
.runq.done .rspin path{stroke-dashoffset:0}
@media(prefers-reduced-motion:no-preference){
  .runq.running .rspin circle{animation:rspin 800ms linear infinite;transition:opacity 150ms ease-out}
  .runq.done .rspin path{stroke-dashoffset:20;animation:tdraw 250ms var(--ease) 100ms forwards}
}
@keyframes rspin{to{transform:rotate(1turn)}}
.tfinn .thint{margin:8px 0 0;font-size:.8125rem;color:var(--faint)}
/* The weekend review in Next's place (2026-10-03): a row per class, its chapters and count, and Review. */
.twk{list-style:none;margin:8px 0 0;padding:0}
.twk li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:8px 0;border-top:.5px solid var(--sheet-edge)}
.twk li:first-child{border-top:0}
.twk .cname{font-weight:600;font-size:.9375rem}
.twk .what{grid-column:1;font-size:.8125rem;color:var(--dim);overflow-wrap:anywhere}
.twk .golab{grid-row:1/3;grid-column:2;border-radius:999px;padding:6px 14px;background:var(--ink);color:var(--ground);
  font-weight:600;font-size:.8125rem;cursor:pointer;white-space:nowrap}
@media(max-width:899px){
  .cols>.tlead{order:-3}.todaycols #yourday{order:-2}.todaycols #lastnight,.todaycols #side{order:-1}
  .tlead>.tcard:nth-child(odd of .tcard):last-child{grid-column:1/-1}   /* an odd card out spans the row, not half of it */
  .tcard h2{font-size:1.375rem}
  :is(#side,#lastnight) .tna>a:not(:first-child){display:none}
}

/* ---- Assignments as a dated list (decision 2026-09-30) ------------------
   The older dated list, in the Inbox's manner: full width, no sheet. One
   line on a laptop: the date in its deadline colour with the countdown under
   it, the ink title with its class, due time and points, the draft's state,
   then the buttons, the first solid ink. No filter: each row says its own state. */
/* No title in sight (Ari, 2026-09-30): the rail names the page and carries the
   week's count. The heading is kept for a screen reader, here and on the Inbox. */
#due .ahead{display:flex;margin:0 0 6px}
#due .ahead h2,section[data-page=inbox] .shead h2{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#cl-all:checked~.cols .pagehead{display:none}
/* On a phone the bar is icons alone (decision 2026-09-30), so the page says its own name:
   Today's is its own line, Assignments and the Inbox show the heading they kept. */
.phh{display:none}
@media(max-width:699px) and (min-height:481px){
  .phh,#cl-all:checked~.cols #due .ahead h2,section[data-page=inbox] .shead h2{display:block;position:static;width:auto;height:auto;
    overflow:visible;clip-path:none;white-space:normal;margin:0 0 16px;
    font-family:var(--serif);font-size:2rem;font-weight:400;line-height:1.08;letter-spacing:-.01em}
  section[data-page=inbox] .shead{flex-wrap:wrap}
  #cl-all:checked~.cols section[data-page=earn] .pagehead{display:flex;margin-bottom:16px}   /* Earn's name, hidden with every .pagehead above */
}
#due .grp+.grp{margin-top:8px}
#due .grph{font-size:.8125rem;font-weight:600;color:var(--faint);border:0;padding:0;margin:16px 0 4px;letter-spacing:0}
#due .grph span{color:var(--faint);font-weight:400}
#due .row,#due .row.later{display:grid;grid-template-columns:8.5rem minmax(0,1fr) 9rem auto;gap:16px;align-items:center;
  border:0;border-radius:12px;margin:0 -12px;padding:10px 12px;min-height:48px}
#due .row:hover{background-color:var(--wash)}
#due .when{font-size:.875rem;gap:4px}
#due .row.later .when{color:var(--dim)}
#due .cd{font-size:.75rem;padding:2px 8px 2px 6px}
#due .row .what{flex-direction:column;gap:2px;min-width:0}
#due .row .what .title{font-size:.9375rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#due .row .what .title::before{display:none}
#due .row.later .what .title{font-weight:500}
#due .meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;font-size:.8125rem;color:var(--dim)}
#due .meta .who{display:flex;align-items:center;gap:6px;margin:0;font-size:inherit}
#due .meta .who::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tint,var(--dim))}
#due .meta .tag,#due .row.soon.due-week .meta .tag,#due .row.later .meta .tag{display:inline;background:none;color:var(--dim);padding:0;font-size:inherit;font-weight:400}
#due .state{display:inline-flex;align-items:center;gap:4px;font-size:.8125rem;color:var(--faint);white-space:nowrap}
#due .state.st-ready{color:var(--clear);font-weight:600}
#due .state.st-staged{color:var(--dim)}
#due .row .where{display:flex;gap:6px;justify-content:flex-end;align-items:center;margin:0;flex-wrap:nowrap}
#due .row .where a,#due .row .where .ask{border-radius:999px;padding:5px 12px;background:var(--wash2);color:var(--ink);
  font-weight:600;font-size:.8125rem;border:0}
#due .row .where a:first-child{background:var(--ink);color:var(--ground)}
#due .row .where .ask.did{background:var(--dim);color:var(--ground)}
@media(max-width:760px){
  /* A phone shows less (Ari, 2026-09-30: too much to look at): two lines a
     deadline, the title with the Doc and the Canvas page, then the countdown
     (the date under Later), the class and the draft's state when there is
     one. The due time, points, the agent's button and "Not staged yet" wait
     for a wider screen. */
  #due .row,#due .row.later{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"title title where" "when meta state";
    gap:4px 10px;align-items:center;min-height:0;padding:12px}
  #due .row .what{display:contents}
  #due .row .what .title{grid-area:title;white-space:normal}
  #due .row .meta{grid-area:meta;min-width:0}
  #due .row .meta .who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #due .row .meta .tag,#due .row.soon.due-week .meta .tag,#due .row.later .meta .tag{display:none}
  #due .row .when{grid-area:when;flex-direction:row;align-items:center}
  #due .row.soon .when{font-size:0;gap:0}
  #due .row.soon .when .cd{font-size:.75rem}
  #due .state{grid-area:state;justify-self:end}
  #due .state.st-open{display:none}
  #due .row .where{grid-area:where;align-self:start}
  #due .row .where>:last-child:not(:first-child){display:none}     /* the agent's button, always last after the Canvas page */
}

/* ---- The Inbox as a dense list (decision 2026-09-30) ---------------------
   The page's full width, no sheet. A row is one line on a laptop: the
   source's round icon (Coast's mark, a class's megaphone, an envelope),
   where from in words over who, the subject and its line cut to one line,
   the time, then the buttons, Done solid ink. Coast's warnings are a strip
   on top. All, Coast, Canvas and Email are radios the stylesheet reads. */
section[data-page=inbox] .shead{display:flex;border-bottom:0;margin:0 0 16px}
.ibfin{position:absolute;opacity:0;pointer-events:none}
.ibf{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--wash)}
.ibf label{font-size:.8125rem;font-weight:600;color:var(--dim);padding:6px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.ibf label b{font-weight:500;color:var(--faint);margin-left:2px}
#ibf-all:checked~.shead [for=ibf-all],#ibf-coast:checked~.shead [for=ibf-coast],
#ibf-canvas:checked~.shead [for=ibf-canvas],#ibf-email:checked~.shead [for=ibf-email]{background:var(--ground);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.18)}
#ibf-all:focus-visible~.shead [for=ibf-all],#ibf-coast:focus-visible~.shead [for=ibf-coast],
#ibf-canvas:focus-visible~.shead [for=ibf-canvas],#ibf-email:focus-visible~.shead [for=ibf-email]{outline:2px solid var(--accent);outline-offset:1px}
#ibf-coast:checked~.ibbody [data-src]:not([data-src=coast]),#ibf-canvas:checked~.ibbody [data-src]:not([data-src=canvas]),
#ibf-email:checked~.ibbody [data-src]:not([data-src=email]),
#ibf-coast:checked~.ibbody .ibday:not(:has([data-src=coast])),#ibf-canvas:checked~.ibbody .ibday:not(:has([data-src=canvas])),
#ibf-email:checked~.ibbody .ibday:not(:has([data-src=email])){display:none}
section[data-page=inbox] .ibday h3{font-size:.8125rem;font-weight:600;color:var(--faint);margin:18px 0 4px;padding:0 12px}
section[data-page=inbox] .row{display:grid;grid-template-columns:28px 11rem minmax(0,1fr) 5.5rem auto;gap:14px;align-items:center;
  border:0;border-radius:12px;margin:0 -12px;padding:8px 12px;min-height:44px;transition:background-color 180ms}
section[data-page=inbox] .row:hover{background-color:var(--wash)}
section[data-page=inbox] .row::before{content:"";width:28px;height:28px;border-radius:50%;background:var(--wash) no-repeat center/15px}
section[data-page=inbox] .src-coast::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7'%3E%3Cpath d='M4.2 6.2A2.2 2.2 0 0 1 6.4 4h11.2a2.2 2.2 0 0 1 2.2 2.2v8.2a2.2 2.2 0 0 1-2.2 2.2H10l-4.4 3.6v-3.6H6.4a2.2 2.2 0 0 1-2.2-2.2z'/%3E%3C/svg%3E")}
section[data-page=inbox] .src-canvas::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7'%3E%3Cpath d='M4 10v4h3l6 4V6L7 10z'/%3E%3Cpath d='M16.5 9a4 4 0 0 1 0 6'/%3E%3C/svg%3E")}
section[data-page=inbox] .src-mail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E")}
section[data-page=inbox] .row .who{display:flex;flex-direction:column;min-width:0;font-size:.8125rem;line-height:1.3;font-weight:400;color:var(--dim)}
section[data-page=inbox] .row .who .src{color:var(--ink);font-weight:600}
section[data-page=inbox] .row .who>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
section[data-page=inbox] .row .who .cname{color:var(--dim);font-weight:400}
section[data-page=inbox] .row .what{display:flex;gap:10px;align-items:baseline;min-width:0;white-space:nowrap}
section[data-page=inbox] .row .what b{font-weight:600;color:var(--ink);flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis}
section[data-page=inbox] .row .what .dim{font-size:.9375rem;overflow:hidden;text-overflow:ellipsis}
section[data-page=inbox] .row .msg{white-space:pre-line}
/* A line opens to its full text (Ari, 2026-09-30): the one line is the summary of a details, and the
   whole message is under it. Open, the subject wraps and the cut line gives way to the whole one. */
section[data-page=inbox] .row details.what{display:block;white-space:normal}
section[data-page=inbox] .row details.what>summary{display:flex;gap:10px;align-items:baseline;min-width:0;white-space:nowrap;
  list-style:none;cursor:pointer;border-radius:6px}
section[data-page=inbox] .row details.what>summary::-webkit-details-marker{display:none}
section[data-page=inbox] .row details.what>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
section[data-page=inbox] .row details.what[open]>summary{white-space:normal}
section[data-page=inbox] .row details.what[open]>summary b{max-width:none}
section[data-page=inbox] .row details.what[open]>summary .dim{display:none}
section[data-page=inbox] .row .full{margin:4px 0 2px;font-size:.9375rem;line-height:1.5;color:var(--dim);overflow-wrap:anywhere}
section[data-page=inbox] .row:has(details.what[open]){align-items:start}
/* The whole row opens it, not only its words (Ari, 2026-09-30): the summary's hit area is stretched over the
   row. Only the buttons sit above it: a click on the opened text closes it again, the same as anywhere else. */
section[data-page=inbox] .row:has(details.what){position:relative;cursor:pointer}
section[data-page=inbox] .row details.what>summary::after{content:"";position:absolute;inset:0;border-radius:12px}
section[data-page=inbox] .row:has(details.what) .where{position:relative;z-index:1}
section[data-page=inbox] .row time{font-size:.8125rem;color:var(--faint);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
section[data-page=inbox] .row .where{display:flex;gap:6px;justify-content:flex-end;align-items:center}
section[data-page=inbox] .row .where form{display:inline-flex;margin:0}
section[data-page=inbox] .row .where a,section[data-page=inbox] .row .where button{border:0;border-radius:999px;padding:5px 12px;
  background:var(--wash);color:var(--ink);font-weight:600;font-size:.8125rem;text-decoration:none;white-space:nowrap}
section[data-page=inbox] .row .where form button{background:var(--ink);color:var(--ground)}
section[data-page=inbox] .row.pin{grid-template-columns:28px minmax(0,1fr) auto;background:var(--wash);margin:0 0 6px;padding:10px 12px}
section[data-page=inbox] .row.pin::before{background-color:var(--ground)}
section[data-page=inbox] .row.pin .what{white-space:normal;display:block;font-size:.9375rem}
section[data-page=inbox] .row.pin .what .src{margin-right:6px}
section[data-page=inbox] details.mrest{margin-top:16px}
section[data-page=inbox] details.mrest>summary{padding:8px 0;font-size:.875rem}
section[data-page=inbox] details.mrest>summary span{color:var(--faint);margin-left:4px}
@media (max-width:760px){
  .ibf{width:100%;justify-content:space-between}
  .ibf label{padding:6px 8px}
  section[data-page=inbox] .row{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"ic who time" "ic what what" "ic where where";
    gap:2px 12px;align-items:start;padding:10px 12px}
  section[data-page=inbox] .row::before{grid-area:ic}
  section[data-page=inbox] .row .who{grid-area:who;flex-direction:row;gap:6px}
  section[data-page=inbox] .row time{grid-area:time}
  section[data-page=inbox] .row .what{grid-area:what;flex-direction:column;gap:1px;white-space:normal}
  section[data-page=inbox] .row .what b{max-width:none}
  section[data-page=inbox] .row details.what>summary{flex-direction:column;gap:1px;white-space:normal}
  section[data-page=inbox] .row .what .dim{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  section[data-page=inbox] .row .where{grid-area:where;justify-content:flex-start;margin-top:6px}
  section[data-page=inbox] .row.pin{grid-template-areas:"ic what" "ic where";grid-template-columns:28px minmax(0,1fr)}
}

/* ---- A class's tabs as dated lists (decision 2026-09-30) -----------------
   Lecture notes, Week summaries, Flashcards, Quizzes and Mock exams in the Assignments
   manner: full width, no sheet, small grey group headings; a row is the when
   on the left (with New, or an exam's countdown), the ink title with its
   line under it, then the buttons, the first solid ink. Notes and a quiz
   open under their row. The class's name is the page's title, so a row does
   not repeat it. Flashcards is a list of decks in the same manner, its when
   the deck's state (due today, or not). The Classes list on a phone is one
   sheet of rows. */
.cpick{background-color:var(--sheet);
  border:.5px solid var(--sheet-edge);border-radius:28px;box-shadow:inset 0 .5px 0 var(--sheet-hi),var(--sheet-shadow);
  padding:22px 24px;margin:18px 0 0}
#nt .wk:hover,#rv .wk:hover{background-color:var(--wash)}
#nt .grp,#rv .f-quizzes .grp{margin:0 0 8px}
#nt .grph,#rv .f-quizzes .grph{display:flex;align-items:baseline;gap:8px;font-size:.8125rem;font-weight:600;color:var(--faint);
  border:0;padding:0;margin:16px 0 4px;letter-spacing:0}
#nt .grph span,#rv .f-quizzes .grph span{font-size:.8125rem;color:var(--faint);font-weight:400}
#nt .wk,#rv .f-quizzes .wk,#rv .f-exams .wk,#rv .f-cards .wk{display:grid;grid-template-columns:8.5rem minmax(0,1fr) auto;
  grid-template-areas:"when title links" "when blurb links";column-gap:16px;row-gap:2px;align-items:center;border:0;
  border-radius:12px;margin:0 -12px;padding:10px 12px;min-height:48px;transition:background-color 180ms}
#nt .wkwhen,#rv .f-quizzes .wkwhen,#rv .f-exams .wkwhen,#rv .f-cards .wkwhen{grid-area:when;align-items:flex-start;text-align:left;gap:4px;
  font-size:.875rem;font-weight:500;color:var(--dim);padding:0}
#rv .f-exams .wk.next .wkwhen{color:var(--brass);font-weight:600}
#rv .f-exams .wk.next.due-urgent .wkwhen,#rv .f-exams .wk.next.due-near .wkwhen{color:var(--red)}
#nt .wkbody,#rv .f-quizzes .wkbody,#rv .f-exams .wkbody,#rv .f-cards .wkbody{display:contents}
#nt .ntitle,#rv .f-quizzes .ntitle,#rv .f-exams .ntitle,#rv .f-cards .ntitle,#rv .f-exams .wk.next .ntitle{grid-area:title;margin:0;font-size:.9375rem;
  font-weight:600;letter-spacing:0;line-height:1.3;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rv .f-quizzes .ntitle{grid-row:1/3}
#nt .ncourse,#rv .f-quizzes .ncourse,#rv .f-exams .ncourse,#rv .f-cards .ncourse{display:none}
#nt .blurb,#rv .f-exams .blurb,#rv .f-cards .blurb{grid-area:blurb;margin:0;font-size:.8125rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#nt .nlinks,#rv .f-exams .nlinks,#rv .f-cards .nlinks,#rv .f-quizzes .wkbody>.rdr{grid-area:links;margin:0;display:flex;flex-wrap:wrap;gap:6px;
  justify-content:flex-end;align-items:center}
#nt .nlinks>a,#rv .f-exams .nlinks>a,#rv .f-cards .nlinks>a,#nt .nlinks .rdr>summary,#rv .f-quizzes .wkbody>.rdr>summary{border-radius:999px;padding:5px 12px;
  background:var(--wash2);color:var(--ink);font-weight:600;font-size:.8125rem;border:0;cursor:pointer}
#nt .nlinks>:first-child:is(a),#rv .f-exams .nlinks>:first-child:is(a),#rv .f-cards .nlinks>:first-child:is(a),#rv .f-quizzes .wkbody>.rdr>summary{background:var(--ink);color:var(--ground)}
#rv .f-quizzes .wkbody>.rdr>summary{display:inline-flex;width:max-content}
/* Closed, the quiz's hidden body still takes a flex gap in Chrome, which left Show quiz 6px short of the edge. */
#rv .f-quizzes .wkbody>.rdr:not([open]){gap:0}
/* The buttons stand in columns down the list (Ari, 2026-10-01): Doc, Quiz and Edit one width, Read notes
   the width Close notes takes, so a row of two and a row of three share their edges; and the reader's
   own top margin is off, which sat Read notes a pixel under its neighbours. */
#nt .nlinks>a{min-width:3.5rem;justify-content:center}
#nt .nlinks>.rdr{margin-top:0}
#nt .nlinks>.rdr>summary{width:7rem;justify-content:center}
/* A week's summary stands in the date column like every row, as the week it covers (decision 2026-10-03, flush layout). */
/* On a class's page an assignment does not name the class either. */
#cl-all:not(:checked)~.cols #due .meta .who{display:none}
/* Opened, the notes or the quiz take the row's full width under it. */
#nt .nlinks:has(details[open]),#rv .f-quizzes .wkbody>.rdr[open]{grid-column:1/-1;grid-row:1/4;position:relative;
  justify-content:flex-end;align-content:flex-start;pointer-events:none}
/* The buttons keep their place at the row's right, Close notes last among them; the notes start under the row's two lines. */
#nt .nlinks:has(details[open])>*,#rv .f-quizzes .wkbody>.rdr[open]>*{pointer-events:auto}
#nt .nlinks:has(details[open])>a:last-of-type{margin-right:calc(7rem + 6px)}
#nt .nlinks>.rdr[open]{flex-basis:100%;margin-top:30px}
#nt .nlinks>.rdr[open]>summary{position:absolute;top:0;right:0;width:7rem;justify-content:center}
/* Level with the buttons: the title and the when take a button's height on the row's first line. */
#nt .wk:has(.nlinks details[open]) .ntitle,#rv .f-quizzes .wk:has(.wkbody>.rdr[open]) .ntitle{min-height:28px;display:flex;
  align-items:center;align-self:start;grid-row:1}
#nt .wk:has(.nlinks details[open]) .wkwhen,#rv .f-quizzes .wk:has(.wkbody>.rdr[open]) .wkwhen{min-height:28px;justify-content:center;
  align-self:start;grid-row:1/3}
#rv .f-quizzes .wkbody>.rdr[open]{display:block}
#rv .f-quizzes .wkbody>.rdr[open]>summary{display:flex;margin-left:auto}
#rv .f-quizzes .wkbody>.rdr[open]>.qs{margin-top:30px}
/* With no line under it (an older week hides it), the title takes both lines, level with its when and buttons. */
#nt .grp.older .ntitle,#nt .wkbody:not(:has(.blurb)) .ntitle{grid-row:1/3}
.cpick h1{margin:0 0 6px}
.cpick label{border:0;border-radius:14px;margin:0 -12px;padding:12px}
.cpick label:hover{background:var(--wash)}
@media(max-width:760px){
  #nt .wk,#rv .f-quizzes .wk,#rv .f-exams .wk,#rv .f-cards .wk{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"title links" "when when" "blurb blurb";align-items:start}
  #nt .wkwhen,#rv .f-quizzes .wkwhen,#rv .f-exams .wkwhen,#rv .f-cards .wkwhen{flex-direction:row;align-items:center;gap:8px}
  #nt .ntitle,#rv .f-quizzes .ntitle,#rv .f-exams .ntitle,#rv .f-cards .ntitle,#rv .f-exams .wk.next .ntitle{white-space:normal}
  #rv .f-quizzes .ntitle,#nt .grp.older .ntitle,#nt .wkbody:not(:has(.blurb)) .ntitle{grid-row:auto}
  /* On a phone the opened notes or quiz go under the whole row, the buttons in a line above them. */
  #nt .nlinks:has(details[open]),#rv .f-quizzes .wkbody>.rdr[open]{grid-row:4;position:static;justify-content:flex-start;padding-top:0;margin-top:8px;pointer-events:auto}
  #nt .nlinks:has(details[open])>a:last-of-type{margin-right:0}
  #nt .nlinks>.rdr[open]{margin-top:0}
  #nt .nlinks>.rdr[open]>summary{position:static;width:max-content}
  #nt .wk:has(.nlinks details[open]) .ntitle,#rv .f-quizzes .wk:has(.wkbody>.rdr[open]) .ntitle{grid-area:title;min-height:0}
  #nt .wk:has(.nlinks details[open]) .wkwhen,#rv .f-quizzes .wk:has(.wkbody>.rdr[open]) .wkwhen{grid-area:when;min-height:0;align-self:auto;justify-content:flex-start}
  #rv .f-quizzes .wkbody>.rdr[open]>summary{margin-left:0}
  #rv .f-quizzes .wkbody>.rdr[open]>.qs{margin-top:8px}
}
/* A deck's when is its state: due today in the accent, or not due. */
#rv .f-cards .wk.due .wkwhen{color:var(--accent-ink);font-weight:600}
#rv .f-cards .ankinote{margin:14px 0 0}


/* ---- Settings after Claude's own settings (decision 2026-09-29) ----------
   Ari: "have a look at how you (Claude) display your own settings, we use you
   as reference". The section list stays at the left on the ground; each
   section is a sheet; a setting is a row, its name at the left with a dim
   line under it and its control at the right (a quiet dropdown, the theme as
   a segmented control), rows split by hairlines; buttons are pills. */
section[data-page=settings][id]{background-color:var(--sheet);border:.5px solid var(--sheet-edge);border-radius:28px;
  box-shadow:inset 0 .5px 0 var(--sheet-hi),var(--sheet-shadow);padding:22px 28px 26px}
section[data-page=settings][id] .shead{border-bottom:0;margin:0 0 6px}
section[data-page=settings][id] .shead h2{font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:0}
.sttitle{font-family:var(--sans);font-size:.8125rem;font-weight:500;color:var(--dim);margin:6px 10px 8px}
.stabbar label{border-radius:10px;padding:8px 10px;color:var(--dim)}
.stabbar label:hover{background:var(--wash)}
.stin:checked+label{background:var(--wash2);color:var(--ink);font-weight:500}
.stin:checked+label .tico{color:var(--ink)}
section[data-page=settings] .settings>.segrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
section[data-page=settings] .settings>label,section[data-page=settings] .settings>.days,section[data-page=settings] .settings>.segrow{padding:14px 0;
  border-bottom:.5px solid var(--hairline)}
section[data-page=settings] .settings>label:last-of-type{border-bottom:0}
section[data-page=settings] .settings .agentnote{margin:-10px 0 6px;font-size:.8125rem;color:var(--dim);max-width:34rem}
section[data-page=settings] .settings select{appearance:none;-webkit-appearance:none;border:0;background:transparent
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center/14px;
  padding:4px 22px 4px 8px;text-align:right;color:var(--ink);font-weight:500;cursor:pointer;border-radius:8px}
section[data-page=settings] .settings select:hover{background-color:var(--wash)}
section[data-page=settings] .settings input[type=range]{accent-color:var(--ink)}
/* The agent's name (2026-10-01): a text field worn as the selects beside it are. */
section[data-page=settings] .settings input[name=agent_name]{font:inherit;font-weight:500;color:var(--ink);background:var(--wash);
  border:0;border-radius:8px;padding:4px 8px;text-align:right;justify-self:end;width:12rem;max-width:100%}
section[data-page=settings] .settings>button,section[data-page=settings] form.inline button,section[data-page=settings] .delacct>summary{
  border-radius:999px;padding:8px 18px;border:0;background:var(--wash2);color:var(--ink);font-weight:600}
section[data-page=settings] .settings>button{align-self:flex-start;margin-top:14px;background:var(--ink);color:var(--ground)}
section[data-page=settings] .delacct>summary{color:var(--red)}
/* Careers' set-up, under the jobs (plan 2026-10-01, slice 1): a plain column until S3 folds it. */
.car{max-width:44rem}
.car h2{font-size:1rem;font-weight:600;margin:32px 0 8px}
.car ul{list-style:none;margin:0;padding:0}
.car li{padding:12px 0;border-bottom:.5px solid var(--hairline);line-height:1.45}
.car li .dim{font-size:.875rem}
.car form{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:12px 0}
.car textarea,.car input[type=url],.cnow .carpost{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--rule);
  border-radius:8px;padding:8px 12px;width:100%;box-sizing:border-box}
.car button{font:inherit;font-weight:600;color:var(--ink);background:var(--wash2);border:0;border-radius:999px;
  padding:8px 18px;cursor:pointer}
.car label{display:flex;flex-direction:column;gap:4px;width:100%;font-size:.875rem;color:var(--dim)}
.car label input:not([type=checkbox]):not([type=radio]){font:inherit;color:var(--ink);background:transparent;border:1px solid var(--rule);
  border-radius:8px;padding:8px 12px}
.car .carkinds{display:flex;flex-wrap:wrap;gap:6px 20px}
.car .carkind{flex-direction:row;align-items:center;width:auto;color:var(--ink)}
.car .carwhy{font-size:.875rem;color:var(--ink)}
.car .carhow{margin:12px 0}
.car .carhow summary{cursor:pointer;font-weight:600}
.car .carhow ol{margin:8px 0;padding-left:1.4em}
.car .carhow ol li{padding:4px 0;border-bottom:0}
#resume .csetb ul{margin:4px 0 12px}
#resume .csetb li{padding:6px 0;border-bottom:0}
.car input[type=file]{font:inherit;color:var(--ink);max-width:100%}
.car label textarea{font-size:1rem}
.car form .carkind{align-items:flex-start;line-height:1.4}
/* ---- Careers as a list and a reading pane (plan 2026-10-01, S2) --------
   The jobs are the Inbox's rows, grouped by what the student does next, each
   with its state in a few words. Everything about a job is a pane beside the
   list: Today's sheet. A job is one element holding its row and its pane
   (.cjob, display:contents), the row a link to the job's own fragment, so the
   pane shown is the one the address names (:target): no script, no page load,
   and a save comes back to the job it was made on. With none named a laptop
   shows the first job; a phone shows the list, and a picked job takes the
   screen with a way back. The pane beside its list is Careers' own: every
   other page opens a thing in place. */
#careers .pagehead{margin-bottom:22px}
#careers .pagehead h1{font-size:2rem}
#careers .pagehead .hi{font-size:.9375rem}
#careers>.shead{display:flex;align-items:center;border-bottom:0;margin:0 0 12px;padding:0;position:relative}
#careers .cask{margin:0 0 16px}
.csplit{display:grid;grid-template-columns:minmax(0,24rem) minmax(0,1fr);column-gap:40px;row-gap:0;align-items:start}
.cjob{display:contents}
.cjg{grid-column:1;font-size:.8125rem;font-weight:600;color:var(--faint);margin:18px 0 4px;padding:0 12px}
.cjg:first-child{margin-top:0}
.cjg span{font-weight:400;margin-left:4px}
a.cj{grid-column:1;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;align-items:center;border-radius:12px;
  margin:0 -12px;padding:8px 12px;min-height:44px;color:var(--ink);transition:background-color 180ms}
a.cj:hover{background-color:var(--wash);color:var(--ink);text-decoration:none}
a.cj::before{content:"";grid-row:1/3;width:28px;height:28px;border-radius:50%;background:var(--wash) no-repeat center/15px}
a.cj.st-ready::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
a.cj.st-writing::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E")}
a.cj.st-check::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E")}
a.cj.st-new::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E")}
a.cj.st-sent::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 3.5 10 14'/%3E%3Cpath d='M20.5 3.5 14 20.5l-4-6.5-6.5-4z'/%3E%3C/svg%3E")}
a.cj.st-left::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E")}
#careers .what{display:flex;flex-direction:column;gap:1px;min-width:0}
#careers .what b{font-weight:600;font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#careers .what .meta{font-size:.8125rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.cj.st-sent .what b{font-weight:500;color:var(--dim)}
#careers .state{font-size:.8125rem;color:var(--dim);white-space:nowrap}
#careers .state.st-ready{color:var(--clear);font-weight:600}
#careers .state.st-check,#careers .state.st-left{color:var(--brass);font-weight:600}
a.cj .state{grid-column:2;font-size:.75rem}
/* The pane spans every row of the list (a span past the 200 jobs the page shows), so the rows keep their own heights. */
.cpane{display:none;grid-column:2;grid-row:1/span 300;position:sticky;top:24px;background-color:var(--sheet);
  border:.5px solid var(--sheet-edge);border-radius:28px;box-shadow:inset 0 .5px 0 var(--sheet-hi),var(--sheet-shadow);padding:24px 30px 22px}
.cjob:target>.cpane{display:block}
.cjob:target>a.cj{background-color:var(--wash2)}
.cpane .tsub{justify-content:space-between}
.cpane .state.st-ready::before{content:"";display:inline-block;width:4px;height:9px;margin:0 8px 1px 2px;border:solid var(--clear);
  border-width:0 2px 2px 0;transform:rotate(45deg)}
.cwhy .cflag{font-size:inherit}
.cpane .state:not(.st-ready)::before{content:"";display:inline-block;vertical-align:-3px;width:14px;height:14px;margin-right:6px;background:no-repeat center/14px}
.cpane .state.st-writing::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E")}
.cpane .state.st-check::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E")}
.cpane .state.st-left::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E")}
.cpane .state.st-new::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E")}
.cpane .state.st-sent::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 3.5 10 14'/%3E%3Cpath d='M20.5 3.5 14 20.5l-4-6.5-6.5-4z'/%3E%3C/svg%3E")}
#careers :is(.cpane,.cjhb) h3{font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1.2;margin:8px 0 2px;overflow-wrap:anywhere}
#careers :is(.cpane,.cjhb) h3 a{color:var(--ink)}
.cco{margin:0 0 14px;color:var(--dim);font-size:.9375rem}
.cwhy{margin:0 0 6px;font-size:.9375rem;line-height:1.5}
#careers h3+.cwhy,#careers h3+.cnext,#careers h3+.csteps{margin-top:12px}   /* a pasted job names no company */
.cnext{margin:0 0 10px;font-size:.9375rem;color:var(--ink)}
.cnow{margin:0 0 10px;font-size:.9375rem}
.cfind{margin:0 0 14px;font-size:.9375rem;color:var(--ink)}
.cfind code{font-size:.875rem;background:var(--wash2);border-radius:6px;padding:2px 6px}
.cnow .carpost{display:block;width:100%;box-sizing:border-box;margin:0 0 8px;min-height:6em}
.csteps{list-style:none;margin:8px 0 0;padding:0}
.csteps li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;
  border-top:.5px solid var(--hairline);font-size:.9375rem;line-height:1.45}
.csteps li::before{content:"";width:16px;height:16px;background:no-repeat center/16px}
.csteps li.done::before{width:5px;height:10px;margin:0 0 2px 5px;border:solid var(--clear);border-width:0 2px 2px 0;transform:rotate(45deg);background:none}
.csteps li.cwait::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E")}
.csteps li.cfill::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='M8 9h8M8 13h8M8 17h4'/%3E%3C/svg%3E")}
.csteps li.csend::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 3.5 10 14'/%3E%3Cpath d='M20.5 3.5 14 20.5l-4-6.5-6.5-4z'/%3E%3C/svg%3E")}
.csteps li.csaid::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.2v.3'/%3E%3C/svg%3E")}
.csteps b{font-weight:600}
/* The ask is in its line for Copy to take, out of sight (coast.js reads the code beside the button). */
.cfillask code{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#careers .csteps .cfillask a{background:var(--ink);color:var(--ground)}
#careers .cdo button.did{background:var(--dim);color:var(--ground)}
.cdo{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center;margin:0}
#careers .cdo a,#careers .cdo button,#careers .carlab button,#careers .cpaste button,#careers .cnow button,#careers .cfind button{font:inherit;border:0;border-radius:999px;padding:5px 12px;
  background:var(--wash2);color:var(--ink);font-weight:600;font-size:.8125rem;text-decoration:none;white-space:nowrap;cursor:pointer}
#careers .carlab button[aria-pressed=true],#careers .cpaste button,#careers .cnow button{background:var(--ink);color:var(--ground)}
#careers .carlab{display:flex;gap:6px;margin:0}
.cfoot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin:0;padding-top:12px;
  border-top:.5px solid var(--hairline);font-size:.8125rem}
#careers details>summary{list-style:none;cursor:pointer}
#careers details>summary::-webkit-details-marker{display:none}
#careers summary:focus-visible,a.cj:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.cpaste textarea,.cpaste input{font:inherit;font-size:.875rem;color:var(--ink);background:var(--wash);border:0;border-radius:12px;
  padding:10px 12px;width:100%;box-sizing:border-box}
.cback{display:none;font-size:.875rem;font-weight:600;margin-bottom:10px}
/* Paste a posting: a pill at the list's right, its box opening under the head. */
.cpaste{margin-left:auto}
.cpaste>summary{border-radius:999px;padding:7px 14px;background:var(--wash2);font-weight:600;font-size:.8125rem}
.cpaste>form{position:absolute;right:0;top:calc(100% + 8px);z-index:3;width:min(32rem,100%);display:flex;flex-direction:column;gap:8px;
  align-items:flex-end;margin:0;background-color:var(--ground);border:.5px solid var(--sheet-edge);border-radius:22px;
  box-shadow:var(--sheet-shadow);padding:14px;box-sizing:border-box}
/* Hidden: a fold of rows, each opening in place with what a pane holds. */
.carhid{margin:18px 0 0}
.carhid>summary{font-size:.8125rem;font-weight:600;color:var(--faint);padding:0 12px}
.cjh{border-radius:12px;margin:0 -12px;padding:8px 12px}
.cjh:hover,.cjh[open]{background-color:var(--wash)}
.cjh>summary b{font-weight:500;color:var(--dim)}
.cjhb{max-width:44rem;padding:4px 0 6px}
#careers .cjhb h3{font-size:1.25rem}
.cabout{margin-top:36px;padding-top:14px;border-top:.5px solid var(--hairline);font-size:.8125rem;color:var(--dim)}
.cabout>summary span{color:var(--accent-ink);font-weight:600;margin-left:10px}
@media(min-width:1100px){          /* no job named in the address: a laptop shows the first */
  .csplit:not(:has(.cjob:target)) .cjob:first-of-type>.cpane{display:block}
  .csplit:not(:has(.cjob:target)) .cjob:first-of-type>a.cj{background-color:var(--wash2)}
}
@media(max-width:1099px){          /* one column: the list, and a picked job takes the screen, as a flashcard does */
  .csplit{grid-template-columns:minmax(0,1fr)}
  .cpane{grid-column:1;grid-row:auto;position:static;border-radius:22px;padding:20px 20px 18px}
  .cback{display:inline-block}
  #careers:has(.cjob:target) :is(.pagehead,.shead,.cline,.cask,.cjg,a.cj,.carhid,.csetup,.cabout){display:none}
  .csteps li{grid-template-columns:18px minmax(0,1fr)}
  .csteps .cdo{grid-column:2;justify-content:flex-start}
  .cpaste>form{left:0;right:0;width:auto}
}
/* ---- Careers' set-up (decision 2026-10-02, the set-up opens above the jobs)
   One line above the jobs says where the set-up stands and opens on it: one
   sheet of four folds, each a round icon, a heading over a line of where it
   stands, and what waits on the student in brass. A fold opens on its form,
   Settings' rows: the name on the left, the control on the right. The line is
   open by itself when a fold is: nothing set up yet, or something just saved. */
.cline{margin:-6px 0 26px}
.cline>summary{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:var(--wash);
  font-size:.875rem;color:var(--dim);transition:background-color 180ms}
.cline>summary:hover{background-color:var(--wash2)}
.cline>summary>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:auto}
.cline>summary>b:first-child{color:var(--ink);font-weight:600}
.cline>summary::after{content:"";flex:none;width:6px;height:6px;margin:-4px 4px 0;border-right:1.6px solid var(--faint);
  border-bottom:1.6px solid var(--faint);transform:rotate(45deg)}
.cline[open]>summary::after{transform:rotate(225deg);margin-top:3px}
.cline[open]>summary{margin-bottom:12px}
.cflag{color:var(--brass);font-weight:600;font-size:.8125rem;white-space:nowrap}
.csetup{background-color:var(--sheet);border:.5px solid var(--sheet-edge);border-radius:28px;
  box-shadow:inset 0 .5px 0 var(--sheet-hi),var(--sheet-shadow);padding:6px 28px}
.cset{border-bottom:.5px solid var(--hairline)}
.cset:last-child{border-bottom:0}
.cset>summary{display:grid;grid-template-columns:28px minmax(0,1fr) auto 14px;gap:2px 14px;align-items:center;padding:14px 0}
.cset>summary::before{content:"";grid-column:1;grid-row:1/3;width:28px;height:28px;border-radius:50%;background:var(--wash) no-repeat center/15px}
#search>summary::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E")}
#resume>summary::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4 4V20a.5.5 0 0 1-.5.5h-10A.5.5 0 0 1 7 20z'/%3E%3Cpath d='M14 3.5v4h4'/%3E%3C/svg%3E")}
#answers>summary::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='M8 9h8M8 13h8M8 17h4'/%3E%3C/svg%3E")}
#alerts>summary::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2h-15z'/%3E%3Cpath d='M10 20.5a2 2 0 0 0 4 0'/%3E%3C/svg%3E")}
.cset>summary h2{grid-column:2;margin:0;font:600 .9375rem/1.3 var(--sans);letter-spacing:0}
.cset>summary .meta{grid-column:2;grid-row:2;font-size:.8125rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cset>summary .cflag{grid-column:3;grid-row:1/3}
.cset>summary::after{content:"";grid-column:4;grid-row:1/3;justify-self:center;width:6px;height:6px;margin-top:-4px;
  border-right:1.6px solid var(--faint);border-bottom:1.6px solid var(--faint);transform:rotate(45deg)}
.cset[open]>summary::after{transform:rotate(225deg);margin-top:3px}
.csetb.car{max-width:none;padding:0 0 20px 42px}
.csetb>:first-child{margin-top:0}
.csetb>p{max-width:44rem}
:is(#search,#answers) .csetb form{gap:0;align-items:stretch;margin:0}
:is(#search,#answers) .csetb form>label:not(.carkind){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);gap:16px;
  align-items:center;padding:11px 0;border-bottom:.5px solid var(--hairline);font-size:.9375rem;color:var(--ink)}
:is(#search,#answers) .csetb form>label input:not([type=checkbox]){border:0;background:var(--wash);font-weight:500;text-align:right;padding:6px 10px}
:is(#search,#answers) .csetb select{appearance:none;-webkit-appearance:none;justify-self:end;max-width:100%;font:inherit;font-weight:600;
  font-size:.8125rem;color:var(--ink);border:0;border-radius:999px;background:var(--wash2);padding:7px 14px;cursor:pointer}
:is(#search,#answers) .csetb form>:is(.carkinds,.carkind){padding:11px 0;border-bottom:.5px solid var(--hairline);font-size:.9375rem}
:is(#search,#answers) .csetb form>span:last-child{margin-top:14px}
.csetb form[action='/careers/profile'] button,.csetb form[action='/careers/answers'] button,.csetb form[action='/careers/facts'] button,
.csetb form[action='/careers/edits'] button{background:var(--ink);color:var(--ground)}
#resume .csetb>form[action^='/careers/resume']{display:inline-flex;flex-direction:row;flex-wrap:wrap;align-items:center;margin:6px 10px 6px 0}   /* the file and its two buttons on a line */
/* A choice of a few is pills, the chosen ones solid ink, as Settings' nights. */
.csetb .carkinds .carkind{position:relative;border-radius:999px;background:var(--wash2);color:var(--dim);padding:5px 12px;
  font-size:.8125rem;font-weight:500;cursor:pointer}
.csetb .carkinds .carkind:has(input:checked){background:var(--ink);color:var(--ground);font-weight:600}
.csetb .carkinds .carkind input{position:absolute;opacity:0;width:0;height:0}
.csetb .carkinds .carkind:has(:focus-visible){outline:2px solid var(--accent);outline-offset:1px}
.csetb .carkinds{gap:6px}
@media(max-width:760px){
  .cline>summary{flex-wrap:wrap}
  .cline>summary>span{flex:1 1 100%;order:3;white-space:normal}
  .csetb.car{padding-left:0}
  .csetup{border-radius:22px;padding:4px 18px}
  .cset>summary{grid-template-columns:28px minmax(0,1fr) 14px}
  .cset>summary .meta{white-space:normal}
  .cset>summary .cflag{grid-column:2;grid-row:3}
  .cset>summary::after{grid-column:3}
  :is(#search,#answers) .csetb form>label:not(.carkind){grid-template-columns:minmax(0,1fr);gap:6px}
  :is(#search,#answers) .csetb form>label input:not([type=checkbox]){text-align:left}
  :is(#search,#answers) .csetb select{justify-self:start}
}
/* The admin pages (decision 2026-09-30): plain tables at the page's full width, no sheet. */
.page:has(.adm){max-width:1240px}
.adm h2{font-size:1rem;font-weight:600;margin:32px 0 8px}
.adm .strip{margin:0 0 6px;color:var(--dim)}
.adm .strip b{color:var(--ink)}
.adm table{border-collapse:collapse;width:100%;font-size:.875rem;margin:8px 0 28px}
.adm th,.adm td{text-align:left;padding:9px 16px 9px 0;border-bottom:.5px solid var(--hairline);vertical-align:top}
.adm th{font-weight:600;color:var(--dim)}
.adm .facts{width:auto}
.adm .facts th{white-space:nowrap;padding-right:28px}
.adm ul,.adm ol{margin:0;padding-left:20px}
.adm .funnel{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 28px}
.adm .find{display:flex;gap:8px;max-width:26rem;margin:0 0 8px}
.adm .find input{flex:1;min-width:0;font:inherit;color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:8px;padding:8px 12px}
.adm .find button{font:inherit;font-weight:600;color:var(--ink);background:var(--wash2);border:0;border-radius:999px;padding:8px 18px;cursor:pointer}
.adm{overflow-x:auto}
.adm :is(th,td):has(>[type=checkbox]){width:1px;padding-right:12px}
.adm ul+.admact{margin-top:14px}
.adm .admacts{display:flex;flex-direction:column;gap:10px;max-width:34rem}
.adm .admact{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0}
.adm .admact textarea,.adm .admact input[type=date],.adm .admact input[name=email]{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:8px;padding:8px 12px}
.adm .admact textarea{flex:1 1 100%;min-width:0}
.adm .admact button{font:inherit;font-weight:600;color:var(--ink);background:var(--wash2);border:0;border-radius:999px;padding:8px 18px;cursor:pointer}
.adm .admact [name=action][value=delete]~button{color:var(--red)}
.adm blockquote{margin:10px 0;padding:8px 14px;border-left:3px solid var(--rule);color:var(--ink);white-space:pre-wrap}
.adm .did{color:var(--accent-ink);font-weight:600}
/* The redesign of 2026-10-02: a row of links on every page, the counts as figures, the list's filters as the
   Inbox's pill bar (links: the filter is the server's), why an account needs a look in brass on its row,
   an account's facts and actions in groups with Delete apart. Still plain pages, still no sheet. */
.adm .admnav{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 22px;font-size:.875rem}
.adm .admnav a{font-weight:600;color:var(--dim);text-decoration:none;padding:6px 12px;border-radius:999px}
.adm .admnav form{margin-left:auto}
.adm .admnav a:hover{color:var(--ink)}
.adm .admnav a[aria-current]{color:var(--ink);background:var(--wash2)}
.adm .admfig{display:flex;flex-wrap:wrap;gap:14px 40px;margin:6px 0 12px}
.adm .admfig div{display:flex;flex-direction:column-reverse}
.adm .admfig dt{font-size:.8125rem;color:var(--dim)}
.adm .admfig dd{margin:0;font-size:1.75rem;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.adm .admfig .cut{padding-left:40px;border-left:.5px solid var(--rule)}
.adm .funnel{gap:4px 0;font-size:.875rem;color:var(--dim);margin-top:10px}
.adm .funnel b{color:var(--ink)}
.adm .funnel li:not(:last-child)::after{content:"\203A";color:var(--faint);margin:0 12px}
.adm .why{display:block;color:var(--brass);font-size:.8125rem;margin-top:2px}
.adm .admlook .why{display:inline;margin-left:10px}
.adm .admlook{list-style:none;padding:0;font-size:.875rem}
.adm .admlook li{padding:9px 0;border-bottom:.5px solid var(--hairline)}
.adm .admbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 4px}
.adm .admbar .find{flex:1 1 15rem;max-width:22rem;margin:0}
.adm .admshow{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:18px;background:var(--wash)}
.adm .admshow a{font-size:.8125rem;font-weight:600;color:var(--dim);text-decoration:none;padding:6px 12px;border-radius:999px;white-space:nowrap}
.adm .admshow a b{font-weight:500;color:var(--faint);margin-left:2px}
.adm .admshow a:hover{color:var(--ink)}
.adm .admshow a[aria-current]{background:var(--ground);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.adm .admlist tr:hover td{background:var(--wash)}
.adm .admlist :is(th,td):not(:nth-child(2)){white-space:nowrap}
.adm #sel{max-width:44rem}
.adm .admact button.quiet{background:transparent;color:var(--dim);padding-inline:4px;margin-left:auto}
.adm .admact button.quiet:hover{color:var(--ink);text-decoration:underline}
.adm .admcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:0 44px;align-items:start}
.adm .admcols>section{grid-column:auto}
.adm .admcols .facts{width:100%;margin-bottom:8px}
.adm .admcols .facts th{width:1px}
.adm .admcols+p{margin:6px 0 0}
.adm .admdel{max-width:34rem;margin:32px 0 0;border-top:.5px solid var(--rule)}
.adm .admdel h2{margin-top:20px}
.adm .admdel p{margin:0 0 12px;font-size:.875rem}
.adm :is(.admnav,.admshow) a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media(max-width:1100px){.adm .admlist :is(th,td):nth-child(n+6){display:none}}
@media(max-width:700px){
  .adm .x{display:none}
  .adm .admlist td:nth-child(3){white-space:normal;min-width:6.5rem}
  .adm .admnav a{padding:6px 9px}
  .adm .admfig{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 8px}
  .adm .admfig .cut{grid-column:1/span 2;padding-left:0;border-left:0}
  .adm .admfig .cut+div{grid-column:3/span 3}
  .adm .admfig dd{font-size:1.375rem}
  .adm .admbar .find{max-width:none}
  .adm .admact button.quiet{margin-left:0}
}
/* Earn (decision 2026-09-30): one sheet under the page's name, a Settings section's sheet and pills. */
section[data-page=earn]{max-width:44rem}
#earn .earn{background-color:var(--sheet);border:.5px solid var(--sheet-edge);border-radius:28px;
  box-shadow:inset 0 .5px 0 var(--sheet-hi),var(--sheet-shadow);padding:22px 28px 26px}
#earn h2{font-size:1rem;font-weight:600;margin:0 0 6px}
#earn .earn>p{color:var(--dim);margin:0 0 14px}
#earn .copy{margin-bottom:6px}
#earn button{font:inherit;border-radius:999px;padding:8px 18px;border:0;background:var(--wash2);color:var(--ink);font-weight:600;cursor:pointer;margin:0}
#earn .reward{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:14px 0;margin:0;border-bottom:.5px solid var(--hairline)}
#earn .payout{max-width:none;margin:14px 0 0}
#earn .friends{list-style:none;margin:16px 0 0;padding:0}
#earn .friends li{padding:12px 0;border-top:.5px solid var(--hairline);color:var(--dim)}
#earn .friends b{color:var(--ink);font-weight:600;margin-right:10px}
#earn .earn>.dim{margin:16px 0 0}
@media(min-width:900px){#pg-earn:checked~.cols{grid-template-columns:minmax(0,44rem)}}
#account .account{padding:14px 0;border-bottom:.5px solid var(--hairline);margin:0 0 14px}
#account form.inline{margin-right:8px}
#syllabi .course{border:0;border-bottom:.5px solid var(--hairline);padding:14px 0;margin:0}
#syllabi .course:last-of-type{border-bottom:0}
#syllabi .course h3{font-size:1rem;font-weight:600}
#syllabi .course .code{color:var(--dim);font-weight:400;font-size:.8125rem;margin-left:8px}
#syllabi .course p{font-size:.875rem;color:var(--dim);margin:2px 0 0}
/* Nights: pill toggles, the chosen ones solid ink. */
section[data-page=settings] .days label{border:0;border-radius:999px;background:var(--wash2);color:var(--dim);padding:5px 11px;font-weight:500}
section[data-page=settings] .days label:has(input:checked){background:var(--ink);color:var(--ground);font-weight:600}
/* The theme as a segmented control: system, light, dark. */
.seg{display:inline-flex;justify-self:end;gap:2px;padding:3px;border-radius:10px;background:var(--wash2)}
section[data-page=settings] .settings .seg label{display:grid;grid-template-columns:none;gap:0;place-items:center;padding:0;border:0;width:34px;height:28px;
  border-radius:8px;color:var(--dim);cursor:pointer}
.seg input{position:absolute;opacity:0;width:0;height:0}
section[data-page=settings] .settings .seg label:has(input:checked){background:var(--sheet);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.seg label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:1px}
.seg svg{width:17px;height:17px}
/* ---- The chosen pill slides (decision 2026-09-30) ------------------------
   Where a pill marks one choice out of several (the Inbox and Upload filters,
   the theme, a class's tabs on a laptop, the phone's bar), the script puts one .slide in the bar, sizes it
   to the chosen label and takes the label's own ground away (.sliding).
   Without the script the label keeps its ground. Only the ground moves, 150 ms;
   the words and the page change at once. */
.ibf,.seg{position:relative}
.slide{display:none;position:absolute;top:0;left:0;pointer-events:none}
.ibf.sliding>.slide,.seg.sliding>.slide{display:block}
.ibf.sliding>label,.seg.sliding>label{position:relative;background:none!important;box-shadow:none!important}
.ibf>.slide{border-radius:999px;background:var(--ground);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.seg>.slide{border-radius:8px;background:var(--sheet);box-shadow:0 1px 2px rgba(0,0,0,.12)}
/* A class's tabs are a bar only above a phone's width; under it they are a dropdown, which stays as it is. */
@media(min-width:761px){
  .ftabs{position:relative}
  .ftabs.sliding>.slide{display:block;border-radius:999px;background:var(--ground);box-shadow:0 1px 2px rgba(0,0,0,.18)}
  .ftabs.sliding>label{position:relative;background:none!important;box-shadow:none!important}
}
@media(max-width:699px) and (min-height:481px){
  .tabs.sliding>.slide{display:block;border-radius:999px;background:var(--wash)}
  .tabs.sliding>.pgbtn{position:relative;transition-property:color}
  .tabs.sliding>.pgbtn[aria-current]{background:none}
}
@media(prefers-reduced-motion:no-preference){
  .slide.go{transition:transform 150ms var(--ease),width 150ms var(--ease)}
}
@media(max-width:899px){
  .stabs .stabbar{background-color:var(--sheet);border:.5px solid var(--sheet-edge);border-radius:22px;
    box-shadow:inset 0 .5px 0 var(--sheet-hi),var(--sheet-shadow);padding:4px 14px}
  .stabbar label{border-radius:0;color:var(--ink)}
  .stabbar label:last-of-type{border-bottom:0}
  section[data-page=settings][id]{padding:18px 20px 22px}
}

/* ---- Setup as one soft sheet per step (redesign 2026-09-30) -------------
   After HeyClicky's tour card and the soft sheets of Today: the current step
   is one centred sheet (Today's --sheet tokens), the steps are a progress line
   across the top, headings in the serif, buttons pills with the main one in
   solid ink, choices as tiles. Scoped to .wizard, so Settings' rows, which
   reuse the same blocks inside .setup, keep their own look. */
main.page .setup.wizard{max-width:none;margin-top:-2rem}
main.page:has(.wizard){max-width:60rem}
.wizard .top{display:flex;align-items:center;justify-content:space-between;gap:24px}
.wizard .brand{font-family:var(--serif);font-weight:500;font-size:1.375rem}
.wizard .progress{list-style:none;margin:0;padding:0;display:flex;gap:22px;font-size:.8125rem;color:var(--dim)}
.wizard .progress li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.wizard .top .rhs{display:none}
.wizard .progress .pm{width:22px;height:22px;border-radius:50%;border:1px solid var(--rule);display:grid;place-items:center;font-weight:600;font-size:.6875rem}
.wizard .progress .now{color:var(--ink);font-weight:600}
.wizard .progress .now .pm{border:2px solid var(--accent);color:var(--accent-ink)}
.wizard .progress .done .pm{background:var(--ink);border-color:var(--ink)}
.wizard .progress .done .pm::before{content:"";width:5px;height:9px;border:solid var(--ground);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.wizard>section{max-width:55rem;margin:40px auto 0}
.wizard .shead{display:flex;justify-content:flex-end;border:0;padding:0;margin:0 0 10px;color:var(--dim)}
.wizard .shead :is(h1,h2){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wizard .step,.wizard .step.now{display:block;border:0}
.wizard .step .mark{display:none}
.wizard .step.now{background-color:var(--sheet);border:.5px solid var(--sheet-edge);border-radius:28px;
  box-shadow:inset 0 .5px 0 var(--sheet-hi),var(--sheet-shadow);padding:40px 44px}
main.page .wizard .step.now h2{font-family:var(--serif);font-weight:500;font-size:2.375rem;letter-spacing:-.02em;margin:0 0 10px}
.wizard .step.done{padding:0 4px 16px}
main.page .wizard .step.done h2{display:none}
.wizard .step.done .body p{font-size:.875rem}
.wizard ul.classes{display:flex;flex-wrap:wrap;gap:6px 16px;margin:6px 0 0;font-size:.875rem}
.wizard ul.classes li{border:0;padding:0;display:flex;align-items:center;gap:7px}
.wizard ul.classes li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
main.page .wizard button,.wizard a.btn{border-radius:999px;padding:12px 20px;font-weight:600}
.wizard button.quiet{display:inline-block;margin:0 0 0 6px;color:var(--dim)}
.wizard .primary,.wizard a.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.wizard .primary:hover,.wizard a.btn.primary:hover{background:color-mix(in srgb,var(--ink) 86%,var(--ground));border-color:var(--ink)}
.wizard .tokenform input{border-radius:999px;padding:12px 18px;background:var(--ground)}
.wizard ol.how{list-style:none;padding:0;color:var(--ink);counter-reset:how}
.wizard ol.how[start="3"]{counter-reset:how 2}.wizard ol.how[start="4"]{counter-reset:how 3}
.wizard ol.how li{counter-increment:how;position:relative;padding:3px 0 0 40px;margin:0 0 12px;min-height:28px}
.wizard ol.how li::before{content:counter(how);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;
  background:var(--wash2);display:grid;place-items:center;font-weight:600;font-size:.8125rem}
.wizard .clipbox{position:relative}
.wizard .clipbox video{border-radius:20px;border:.5px solid var(--sheet-edge);background:var(--ground)}
.wizard .clipctl{position:absolute;left:12px;bottom:18px;margin:0;padding:7px 13px;font-size:.8125rem;text-decoration:none;
  color:var(--ink);background:var(--ground);border:.5px solid var(--sheet-edge);box-shadow:var(--sheet-shadow)}
.wizard .clippair figcaption{margin-top:6px}
/* The two quick questions: tiles, the chosen one ringed in the accent. */
.wizard .questions fieldset{border:0;padding:0;margin:0 0 22px}
.wizard .questions legend{font-weight:600;margin:0 0 10px;padding:0}
/* Meet Finn (2026-10-01): the name, as the token's field is drawn. */
.wizard .questions input[name=agent_name]{font:inherit;color:var(--ink);border:1px solid var(--rule);border-radius:999px;
  padding:12px 18px;background:var(--ground);width:100%;max-width:20rem;box-sizing:border-box}
.wizard .choice{display:flex;align-items:center;gap:14px;padding:16px 18px;margin:0 0 10px;border-radius:20px;cursor:pointer;
  background:var(--ground);border:.5px solid var(--rule)}
.wizard .choice:has(input:checked){box-shadow:0 0 0 2px var(--accent);border-color:transparent}
.wizard .choice input{margin:0 0 0 auto;accent-color:var(--accent);width:18px;height:18px}
.wizard .choice .ci{width:40px;height:40px;border-radius:50%;background:var(--wash2);display:grid;place-items:center;flex:none}
.wizard .choice .ct{display:flex;flex-direction:column;gap:2px}
.wizard .choice .ct .dim{font-size:.875rem;color:var(--dim)}
.wizard .trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wizard .choice.small{margin:0}
.wizard .questions p button[name=skip]{border-color:transparent;background:none}
/* The first run: Due this week and Ready for you, side by side. */
.wizard .firstrun{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0}
.wizard .frs{background-color:var(--ground);border:.5px solid var(--sheet-edge);border-radius:22px;padding:18px 14px 8px}
.wizard .frs h3{font-family:var(--serif);font-weight:500;font-size:1.25rem;margin:0 0 6px;padding:0 8px}
.wizard ul.due,.wizard ul.ready{list-style:none;margin:0;padding:0}
.wizard .due li,.wizard .ready li{display:flex;align-items:center;gap:12px;padding:10px 8px;border:0;border-radius:14px}
.wizard .due li:hover,.wizard .ready li:hover{background:var(--wash)}
.wizard .due b,.wizard .ready .rt{flex:1;min-width:0}
.wizard .ri{width:34px;height:34px;border-radius:50%;background:var(--wash2);display:grid;place-items:center;flex:none;color:var(--dim)}
.wizard .cd{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:.75rem;border-radius:999px;padding:4px 10px;
  background:var(--brass);color:var(--ground)}
.wizard .cd.soon{background:var(--red)}
.wizard .ready .btn{padding:8px 14px;font-size:.875rem}
.wizard .ready li.first .btn,.wizard .ready li.first .copybtn{background:var(--ink);border-color:var(--ink);color:var(--ground)}
@media(max-width:599px){
  .wizard .progress{gap:6px}.wizard .progress .pl{display:none}
  .wizard .progress .pm{width:auto;height:4px;min-width:28px;border-radius:2px;border:0;background:var(--rule);font-size:0}
  .wizard .progress .now .pm{background:var(--accent);border:0}.wizard .progress .done .pm{background:var(--ink)}
  .wizard .progress .done .pm::before{display:none}
  .wizard .top .rhs{display:none}
  .wizard>section{margin-top:22px}
  .wizard .step.now{padding:24px 18px;border-radius:24px}
  main.page .wizard .step.now h2{font-size:1.875rem}
  .wizard .firstrun{grid-template-columns:minmax(0,1fr)}
  .wizard .trio{gap:8px}.wizard .choice.small{flex-direction:column;gap:6px;padding:12px 6px;font-size:.875rem}
  .wizard .choice.small input{margin:0}
}
.wizard form[data-feed-tab] .primary{background:transparent;color:var(--ink);border-color:var(--rule)}

/* Assignments across every class never goes blank (in-house review 2026-09-30): All with a
   notes or quiz tab still checked (a keyboard pick, a link with no class) shows Assignments. */
#cl-all:checked~.cols #cl .list.f-assignments{display:flex}

/* ---- Upload (decision 2026-09-30) -------------------------------------
   One soft sheet to drop files on or paste into, Coast's guess of each file
   to check, then what was uploaded as the Inbox's dense list. The sheet is
   the page's one surface. Every control is native and every switch a
   checkbox or radio the stylesheet reads, so it works with script off. */
section[data-page=upload]{display:flex;flex-direction:column;gap:36px}
section[data-page=upload] .pagehead{margin-bottom:0}
/* "No title on the Inbox or Assignments" hides every .pagehead while All classes is picked,
   which is the usual state; Upload's title and its one line of what the page is for stay. */
#cl-all:checked~.cols section[data-page=upload] .pagehead{display:flex}
section[data-page=upload] .pagehead h1{font-size:2rem}
section[data-page=upload] .pagehead .hi{font-size:.9375rem;max-width:60ch}
.upsheet{position:relative;background-color:var(--sheet);border:.5px solid var(--sheet-edge);border-radius:28px;
  box-shadow:inset 0 .5px 0 var(--sheet-hi),var(--sheet-shadow);padding:8px}
.upnone{color:var(--dim);padding:18px 20px}
.upform{margin:0}
.uptwo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.updrop{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;
  padding:30px 28px;border-radius:22px;min-height:232px}
.updrop .upico{width:44px;height:44px;border-radius:50%;background:var(--wash2);display:grid;place-items:center;color:var(--dim)}
.updrop .upico svg{width:21px;height:21px}
.updrop h2{font-family:var(--serif);font-weight:500;font-size:1.375rem;line-height:1.25}
.updrop h2 .narrow{display:none}
.updrop p{color:var(--dim);max-width:44ch}
.upbtns{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:2px}
.upbtn{appearance:none;border:0;border-radius:999px;padding:9px 18px;font:inherit;font-weight:600;font-size:.875rem;
  background:var(--wash2);color:var(--ink);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.upbtn:hover{background:color-mix(in srgb,var(--ink) 14%,transparent)}
.upbtn.pri{background:var(--ink);color:var(--ground)}
.upbtn.pri:hover{background:color-mix(in srgb,var(--ink) 85%,var(--ground))}
.upbtn:active{transform:scale(.98)}
/* With script the picker sends the form by itself: its styled label shows, and the plain input and its button go. */
.upbtn.uppick{display:none}
.upform input[type=file]{font-size:.875rem;max-width:100%}
.upform[data-js] .uppick{display:inline-flex}
.upform[data-js] input[type=file]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.upform[data-js] .upsend{display:none}
.upform[data-js] input[type=file]:focus-visible~.uppick{outline:2px solid var(--accent);outline-offset:3px}
.uppaste{display:flex;flex-direction:column;gap:8px;padding:26px 24px 22px 28px;border-left:1px solid var(--hairline)}
.uppaste label{font-weight:600}
.uppaste textarea{width:100%;min-height:112px;resize:vertical;border:1px solid var(--rule);border-radius:14px;padding:11px 13px;
  font:inherit;color:var(--ink);background:var(--ground)}
.uppaste textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.uppaste .uphelp{font-size:.8125rem;color:var(--dim)}
.uppaste .upbtns{justify-content:space-between}
/* A file dragged over the page: the sheet is the target, in the accent. Sending: the sheet waits. */
.upsheet.over{outline:2px solid var(--accent);outline-offset:-2px;background-color:color-mix(in srgb,var(--accent) 8%,var(--sheet))}
.upsheet.over .upico{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-ink)}
.upsheet.over .uppaste{opacity:.35}
.upsheet.busy{pointer-events:none}
.upsheet.busy .upbtns,.upsheet.busy .uppaste{opacity:.4}
/* One line of news on top of the sheet. */
.upsaid{display:flex;align-items:center;gap:9px;margin:6px 6px 0;padding:11px 16px;border-radius:18px;background:var(--wash)}
.upsaid .sico{width:16px;height:16px;flex:none;color:var(--clear)}
/* The check: Coast's guess for each file, each part a control. */
.upcheck{margin:0;padding:18px 20px 16px}
.upcheck>h2{font-family:var(--serif);font-weight:500;font-size:1.375rem;margin:2px 0 2px}
.upcheck>.dim{margin-bottom:10px}
.upcheck.upleft{padding:8px 20px 4px;border-bottom:1px solid var(--hairline)}
.uprows{list-style:none;margin:0;padding:0}
.uprow{display:grid;grid-template-columns:36px minmax(0,1fr) auto 28px;column-gap:14px;align-items:center;
  padding:11px 12px;margin:0 -12px;border-radius:14px}
.uprow:hover{background:var(--wash)}
.kico{width:36px;height:36px;border-radius:50%;background:var(--wash2);display:grid;place-items:center;color:var(--dim)}
.kico svg{width:17px;height:17px}
.upname{min-width:0;display:flex;flex-direction:column;line-height:1.35}
.upname b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upname span{font-size:.8125rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uprow.bad .upname span{color:var(--brass)}
.upmore,.upin,.updef{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.updef{padding:0;border:0}
.upsum{display:none}
.upguess{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.chip{position:relative;display:inline-flex;align-items:center;border-radius:999px;background:var(--wash2);
  font-size:.8125rem;font-weight:600;color:var(--ink);white-space:nowrap}
.chip select,.chip input{appearance:none;-webkit-appearance:none;border:0;background:none;font:inherit;color:inherit;
  padding:7px 28px 7px 12px;border-radius:999px;cursor:pointer;max-width:13rem;text-overflow:ellipsis}
.chip input[type=date]{padding-right:12px}
.chip:has(select)::after{content:"";position:absolute;right:11px;top:50%;width:6px;height:6px;margin-top:-5px;
  border-right:1.6px solid var(--dim);border-bottom:1.6px solid var(--dim);transform:rotate(45deg);pointer-events:none}
.chip:hover{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.chip:has(:focus-visible){outline:2px solid var(--accent);outline-offset:1px}
.chip select:focus-visible,.chip input:focus-visible{outline:0}
/* The class picked wears its course's dot; none picked is brass, and the words say so too. */
.upcls::before{content:"";position:absolute;left:12px;width:7px;height:7px;border-radius:50%;background:var(--tint,var(--dim));pointer-events:none}
.upcls select{padding-left:27px}
.upcls:has(option.ci-1:checked){--tint:var(--c1)}.upcls:has(option.ci-2:checked){--tint:var(--c2)}
.upcls:has(option.ci-3:checked){--tint:var(--c3)}.upcls:has(option.ci-4:checked){--tint:var(--c4)}
.upcls:has(option.ci-5:checked){--tint:var(--c5)}.upcls:has(option.ci-6:checked){--tint:var(--c6)}
.upcls:has(option.ci-7:checked){--tint:var(--c7)}.upcls:has(option.ci-8:checked){--tint:var(--c8)}
.upcls:has(option[value='']:checked){background:color-mix(in srgb,var(--brass) 14%,transparent);color:var(--brass)}
.upcls:has(option[value='']:checked)::before{display:none}
.upcls:has(option[value='']:checked)::after{border-color:var(--brass)}
.upcls:has(option[value='']:checked) select{padding-left:12px}
/* A syllabus has no day. */
.uprow:has(option[value=syllabus]:checked) .upwhen,.uprow:has(option[value=material]:checked) .upwhen{visibility:hidden}
.upx{appearance:none;border:0;background:none;width:28px;height:28px;border-radius:50%;color:var(--faint);cursor:pointer;
  display:grid;place-items:center;padding:0}
.upx:hover{background:var(--wash2);color:var(--ink)}
.upx svg{width:14px;height:14px}
/* A file Coast will not take: one dim line, no controls. */
.uprow.no .upname b{color:var(--dim);font-weight:400}
.uprow.no .kico{background:none;border:1px dashed var(--rule)}
.uprow.no .upguess{font-size:.8125rem;color:var(--dim);white-space:normal;text-align:right;max-width:36rem}
.upfoot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:10px;padding-top:14px;border-top:1px solid var(--hairline)}
.upfoot p{color:var(--dim);font-size:.875rem;margin-right:auto}
.upadd{margin:0 20px 12px}
.upadd>summary{display:inline-block;list-style:none;cursor:pointer;color:var(--dim);font-size:.875rem;padding:4px 0}
.upadd>summary::-webkit-details-marker{display:none}
.upadd>summary:hover{color:var(--ink);text-decoration:underline}
.upadd[open]>summary{margin-bottom:6px}
.upadd .uptwo{border-top:1px solid var(--hairline)}
.upadd .updrop{min-height:0;padding-left:0}
/* On a laptop the three parts sit in columns, so a file with no day still lines up. */
@media(min-width:900px){
  section[data-page=upload]{grid-column:1/-1}
  .uprow:not(.no) .upguess{display:grid;grid-template-columns:10.5rem 13rem 9.25rem}
  .uprow .chip,.uprow .chip select,.uprow .chip input{width:100%;max-width:none}
}
/* What was uploaded. */
.uplist{position:relative}
.uplist .shead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;border-bottom:0;margin:0 0 12px}
.uplist .shead h2{font-family:var(--serif);font-weight:500;font-size:1.375rem;margin:0}
.uplist .shead>span{font-size:.875rem;font-weight:600;color:var(--dim);margin-right:auto}
#upf-all:checked~.shead [for=upf-all],#upf-lecture:checked~.shead [for=upf-lecture],
#upf-syllabus:checked~.shead [for=upf-syllabus],#upf-material:checked~.shead [for=upf-material]{background:var(--ground);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.18)}
#upf-all:focus-visible~.shead [for=upf-all],#upf-lecture:focus-visible~.shead [for=upf-lecture],
#upf-syllabus:focus-visible~.shead [for=upf-syllabus],#upf-material:focus-visible~.shead [for=upf-material]{outline:2px solid var(--accent);outline-offset:1px}
#upf-lecture:checked~.upbody [data-k]:not([data-k=lecture]),#upf-syllabus:checked~.upbody [data-k]:not([data-k=syllabus]),
#upf-lecture:checked~.upbody .upday:not(:has([data-k=lecture])),#upf-syllabus:checked~.upbody .upday:not(:has([data-k=syllabus])),
#upf-material:checked~.upbody [data-k]:not([data-k=material]),#upf-material:checked~.upbody .upday:not(:has([data-k=material])){display:none}
.upday h3{font-size:.8125rem;font-weight:600;color:var(--faint);margin:18px 0 4px;padding:0 12px}
.upday:first-child h3{margin-top:4px}
.upempty{color:var(--dim);margin:0;max-width:60ch}
.upitem{position:relative;display:grid;grid-template-columns:28px 11rem minmax(0,1fr) 5.5rem 5rem;gap:0 14px;align-items:center;
  padding:9px 12px;margin:0 -12px;border-radius:12px}
.upitem:hover,.upitem:has(.upin:checked){background:var(--wash)}
.upitem .kico{width:28px;height:28px;background:var(--wash)}
.upitem .kico svg{width:15px;height:15px}
.upitem .who{display:flex;flex-direction:column;min-width:0;font-size:.8125rem;line-height:1.3;color:var(--dim)}
.upitem .who b{color:var(--ink)}
.upitem .who>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upitem .what{display:flex;gap:10px;align-items:baseline;min-width:0;white-space:nowrap}
.upitem .what b{flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis}
.upitem .what .st{color:var(--dim);overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;gap:5px;min-width:0}
.upitem .what .st .sico{width:14px;height:14px;flex:none}
.upitem .what .st.ok .sico{color:var(--clear)}
.upitem .what .st.golab{color:var(--accent-ink)}
.upitem time{font-size:.8125rem;color:var(--faint);text-align:right;white-space:nowrap}
.upitem .where{display:flex;justify-content:flex-end}
.upchg{border-radius:999px;padding:5px 12px;background:var(--wash);color:var(--ink);font-weight:600;font-size:.8125rem;cursor:pointer;white-space:nowrap}
.upitem:hover .upchg{background:var(--wash2)}
.upin:focus-visible~.where .upchg{outline:2px solid var(--accent);outline-offset:1px}
/* Change: the row opens into the controls it was filed with, and Remove asks once more. */
.upedit{display:none;grid-column:2/-1;margin:10px 0 2px;flex-wrap:wrap;gap:8px;align-items:center}
.upin:checked~.upedit{display:flex}
.upedit .chip{background:var(--ground)}
.upedit .upnote{font-size:.8125rem;color:var(--dim);margin-right:auto}
.uprm{display:flex;align-items:center;gap:10px;font-size:.8125rem;color:var(--dim)}
.uprm>summary{list-style:none;cursor:pointer;padding:9px 10px}
.uprm>summary::-webkit-details-marker{display:none}
.uprm>summary:hover{color:var(--ink);text-decoration:underline}
.uprm[open]>summary{display:none}
.uprm[open]{flex-basis:100%;order:9;justify-content:flex-end}
/* A phone: a guess is one line of words, the controls behind its chevron; a row of the list is two lines. */
@media(max-width:899px){
  section[data-page=upload]{gap:28px}
  section[data-page=upload] .pagehead h1{font-size:1.625rem}
  .upsheet{border-radius:24px;padding:6px}
  .uptwo{grid-template-columns:minmax(0,1fr)}
  .updrop{min-height:0;padding:20px 18px 18px;gap:10px}
  .updrop .upico,.updrop h2 .wide{display:none}
  .updrop h2 .narrow{display:inline}
  .uppaste{border-left:0;border-top:1px solid var(--hairline);padding:16px 18px}
  .uppaste textarea{min-height:84px}
  .upcheck{padding:14px 14px 12px}
  .upadd{margin:0 14px 10px}
  .uprow{grid-template-columns:36px minmax(0,1fr) 28px;grid-template-areas:"ic name x" "ic sum sum" "guess guess guess";
    row-gap:0;align-items:start;margin:0 -6px;padding:10px 6px}
  .uprow .kico{grid-area:ic}.uprow .upname{grid-area:name}.uprow .upx{grid-area:x}
  .uprow:not(.bad) .upname span{display:none}
  .uprow.bad .upname span{white-space:normal}
  .uprow.bad .upsum{margin-top:0}
  .upsum{grid-area:sum;display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--dim);min-width:0;
    margin-top:-7px;padding:2px 0 4px;cursor:pointer}
  .upsum>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .upsum::after{content:"";flex:none;width:6px;height:6px;margin:-3px 6px 0 2px;border-right:1.6px solid var(--dim);
    border-bottom:1.6px solid var(--dim);transform:rotate(45deg)}
  .upmore:checked~.upsum::after{transform:rotate(-135deg);margin-top:3px}
  .upmore:focus-visible~.upsum{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
  .uprow .upguess{grid-area:guess;display:none;justify-content:flex-start;flex-wrap:wrap;padding:8px 0 4px 50px}
  .upmore:checked~.upguess{display:flex}
  .uprow.no .upguess{grid-area:sum;display:block;padding:0;text-align:left;max-width:none}
  .chip select{max-width:9.5rem}
  .upfoot .upbtn.pri{flex:1;justify-content:center}
  .upf{width:100%;justify-content:space-between}
  .uplist .shead>span{margin-right:0}
  .upitem{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"ic who where" "ic what what" "ic edit edit";
    gap:2px 12px;align-items:start;padding:10px 12px}
  .upitem .kico{grid-area:ic}
  .upitem .who{grid-area:who;flex-direction:row;gap:6px}
  .upitem time{display:none}
  .upitem .what{grid-area:what;flex-direction:column;gap:1px;white-space:normal}
  .upitem .what b{max-width:none}
  .upitem .where{grid-area:where;align-self:start;margin-top:-3px}
  .upedit{grid-area:edit;grid-column:auto}
  .upedit .upnote{flex-basis:100%}
}
/* ---- A flashcard is one soft sheet (decision 2026-09-30) ------------------
   /review: the place and a progress line, then one sheet with where the card
   is from, the question in the serif (a long or many-part one as text), its
   choices as rows and the answer under a rule once Show answer is pressed.
   The grades wait under the sheet until then, each naming when the card
   returns. pre-line is here and never an inline style: the policy blocks
   one, and the choices ran together on one line (Ari, 2026-09-30). Shown
   at once, no fade: Show answer is pressed for every card (Motion). */
.fc{max-width:40rem;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.fctop{display:flex;justify-content:space-between;align-items:baseline;font-size:.9375rem;color:var(--dim)}
.fctop a{color:var(--dim);text-decoration:none;font-weight:600}
.fctop a:hover{color:var(--ink)}
.fcn{font-variant-numeric:tabular-nums}
.fcbar{appearance:none;-webkit-appearance:none;display:block;width:100%;height:3px;border:0;border-radius:3px;
  background:var(--wash2);overflow:hidden}
.fcbar::-webkit-progress-bar{background:var(--wash2)}
.fcbar::-webkit-progress-value{background:var(--accent)}
.fcbar::-moz-progress-bar{background:var(--accent)}
main.page .fcnote{margin:0;font-size:.875rem;color:var(--dim)}
.fcsheet{background-color:var(--sheet);border:.5px solid var(--sheet-edge);border-radius:28px;
  box-shadow:inset 0 .5px 0 var(--sheet-hi),var(--sheet-shadow);padding:28px 30px 30px;min-height:19rem;
  display:flex;flex-direction:column}
main.page .fcfrom{margin:0 0 18px;font-size:.875rem;color:var(--dim)}
main.page .fcq{margin:0;font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.3;letter-spacing:-.01em;
  white-space:pre-line;overflow-wrap:anywhere}
main.page .fcq.long{font-family:var(--sans);font-size:1.125rem;line-height:1.5;letter-spacing:0}
.fccs{list-style:none;margin:18px 0 0;padding:0}
.fccs li{display:grid;grid-template-columns:1.6em minmax(0,1fr);padding:9px 0;border-top:1px solid var(--hairline);
  line-height:1.45;overflow-wrap:anywhere}
.fccs li b{color:var(--dim);font-weight:600}
.fcd{margin-top:auto}
.fcd>summary{list-style:none;cursor:pointer;width:max-content;margin:24px auto 0;font-weight:600;color:var(--ground);
  background:var(--ink);border-radius:999px;padding:11px 22px}
.fcd>summary::-webkit-details-marker{display:none}
/* Open, the same button hides the answer again (Ari, 2026-09-30), quieter; the grades go with it. */
.fcd[open]>summary{color:var(--ink);background:var(--wash2)}
.fcd .ha,.fcd[open] .sa{display:none}
.fcd[open] .ha{display:inline}
.fca{margin-top:22px;padding-top:20px;border-top:1px solid var(--rule)}
main.page .fca h2{font-size:.8125rem;font-weight:600;color:var(--dim);margin:0 0 6px}
main.page .fca p{margin:0;font-size:1.0625rem;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.fcg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.fc:not(:has(.fcd[open])) .fcg{display:none}
/* A deck gone through again: Previous and Next where the grades would be, and no grades. */
.fcnav{display:flex;justify-content:space-between;gap:10px}
.fcnav a{color:var(--ink);text-decoration:none;font-weight:600;background:var(--sheet);border:.5px solid var(--sheet-edge);
  border-radius:999px;box-shadow:var(--sheet-shadow);padding:11px 20px}
.fcnav a:hover{background:var(--wash2)}
main.page .fcg button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px;font-weight:400;
  background:var(--sheet);border:.5px solid var(--sheet-edge);border-radius:18px;box-shadow:var(--sheet-shadow)}
main.page .fcg button:hover{background:var(--wash2)}
.fcg b{font-weight:600;font-size:1rem}
.fcg .bad b{color:var(--red)}
.fcg .easy b{color:var(--clear)}
main.page .fchint{margin:0;text-align:center;font-size:.8125rem;color:var(--faint)}
.fcno{text-align:center;margin-top:8px}   /* clear of the grades: it retires the card */
main.page .fcno button{border:0;padding:6px 10px;font-weight:400;font-size:.875rem;color:var(--dim);text-decoration:underline;
  text-underline-offset:3px}
main.page .fcno button:hover{color:var(--ink)}
.fcdone{align-items:center;justify-content:center;text-align:center}
main.page .fcdone h1{font-family:var(--serif);font-weight:500;font-size:2rem;margin:0 0 4px}
.fcdone p{color:var(--dim)}
@media(max-width:599px){.fcsheet{padding:22px 20px 24px;border-radius:24px;min-height:16rem}main.page .fcq{font-size:1.3125rem}
  main.page .fcq.long{font-size:1.0625rem}.fcg{gap:8px}main.page .fcg button{padding:11px 4px;border-radius:16px}.fchint{display:none}}
/* ---- Setup hands over to Today (decision 2026-10-01, transitions.dev's
   thinking states). One line, centred on the ground; the sizer holds the
   longest state so the box never changes width. The swap moves opacity and
   transform only, no blur (decision 2026-09-29); the shimmer sweeps the
   glyphs alone and is the one loop here, a one-off moment's loading mark. */
.opening{min-height:70vh;display:grid;place-items:center}
main.page .t-think{position:relative;display:inline-block;text-align:center;margin:0}
.t-think-sizer{display:block;visibility:hidden;white-space:nowrap}
.t-think-text{position:absolute;top:0;left:0;right:0;display:block;color:var(--dim);white-space:nowrap}
@media(prefers-reduced-motion:no-preference){
  .t-think-text{transition:transform 150ms ease-in-out,opacity 150ms ease-in-out;will-change:transform,opacity}
  .t-think-text::before{content:attr(data-text);content:attr(data-text) / "";position:absolute;inset:0;pointer-events:none;
    background-image:linear-gradient(90deg,transparent 0%,transparent 40%,var(--ink) 50%,transparent 60%,transparent 100%);
    background-size:400% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;animation:t-think-shimmer 2000ms linear infinite}
  .t-think-text.is-exit{transform:translateY(-8px);opacity:0}
  .t-think-text.is-enter-start{transition:none;transform:translateY(8px);opacity:0}
}
@keyframes t-think-shimmer{0%{background-position:100% 0}100%{background-position:0% 0}}

/* ---- Flush layout (decision 2026-10-03) ----------------------------------
   An empty list says so in a line short enough to read, not across the page. */
section[data-page=inbox] .note,.note.emptynote{max-width:60ch}

/* ---- The member card (plan 2026-10-03) -------------------------------------
   Story-sized, drawn on a canvas by member-card.js. On screen it tilts toward
   the pointer with a glare (Transitions.dev "Card hover tilt"); the saved PNG
   is drawn flat. The outer .t-tilt is the flat hit area and never transforms;
   touch-action:none sits on the card alone, so the page still scrolls. */
.mcard{display:flex;flex-direction:column;align-items:center}
.mcard h1{align-self:flex-start}
.mcard .t-tilt{width:min(100%,calc(70vh * 9 / 16));touch-action:none}
.mcard canvas,.mcard #mimg{display:block;width:100%;height:auto}
.mcard canvas[hidden],.mcard #mimg[hidden]{display:none}
.mact{display:flex;gap:16px;align-items:center}
:root{
  --tilt-perspective:1000px;
  --tilt-return:1000ms; --tilt-return-ease:cubic-bezier(.22,1,.36,1);
  --tilt-follow:400ms; --tilt-follow-ease:cubic-bezier(.22,1,.36,1);
  --tilt-glare-opacity:.32; --tilt-glare-fade:300ms; --tilt-glare-ease:cubic-bezier(.22,1,.36,1);
}
.t-tilt-card{position:relative;border-radius:12px;overflow:hidden;
  transform:perspective(var(--tilt-perspective)) rotateX(var(--tilt-rx,0deg)) rotateY(var(--tilt-ry,0deg));
  transform-style:preserve-3d;transition:transform var(--tilt-return) var(--tilt-return-ease);will-change:transform}
.t-tilt-card.is-tilting{transition:transform var(--tilt-follow) var(--tilt-follow-ease)}
.t-tilt-glare{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:
    radial-gradient(circle 95px at var(--tilt-gx,50%) var(--tilt-gy,50%),rgba(255,255,255,.48),rgba(255,255,255,.06) 52%,rgba(255,255,255,0) 84%),
    radial-gradient(circle 200px at var(--tilt-gx,50%) var(--tilt-gy,50%),rgba(255,255,255,.22),rgba(255,255,255,.04) 58%,rgba(255,255,255,0) 78%),
    radial-gradient(circle 360px at var(--tilt-gx,50%) var(--tilt-gy,50%),rgba(255,255,255,.10),rgba(255,255,255,0) 88%);
  transition:opacity var(--tilt-glare-fade) var(--tilt-glare-ease)}
.t-tilt.is-hover .t-tilt-glare{opacity:var(--tilt-glare-opacity)}
@media (prefers-reduced-motion:reduce){.t-tilt-card{transform:none!important;transition:none!important}}