/* Self-hosted faces — the prototype pulls these same families from Google. */
/* General Sans (Fontshare, ITF Free Font License) — the brand face. Variable,
   self-hosted only: Fontshare has no Google-style always-on CDN we'd rely on. */
@font-face { font-family:'General Sans'; src:url('/static/fonts/generalsans.woff2') format('woff2');
  font-weight:200 700; font-display:swap; }
@font-face { font-family:'General Sans'; src:url('/static/fonts/generalsans-italic.woff2') format('woff2');
  font-weight:200 700; font-style:italic; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('/static/fonts/bricolage.woff2') format('woff2');
  font-weight:200 800; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/static/fonts/jbmono.woff2') format('woff2');
  font-weight:100 800; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/static/fonts/inter.woff2') format('woff2');
  font-weight:400 700; font-display:swap; }
@font-face { font-family:'Lexend'; src:url('/static/fonts/lexend.woff2') format('woff2');
  font-weight:400 700; font-display:swap; }

/* ============================================================================
   clutchh — Clutchh Blue.

   The stylesheet below IS docs/ui-prototype-clutchh-blue.html's, adopted verbatim
   as the base layer: the prototype is the source of truth for every surface it
   covers, so its rules are not merged into older ones — they replace them.
   Resolved to the shipped configuration: Bold canvas, floating sheet, one blue.

   Only two things sit outside it: the self-hosted @font-face rules above (the
   prototype pulls the same families from Google), and the app-only surfaces at
   the end — auth gate, onboarding, document preview, tour and the rest, which the
   six-view prototype has no counterpart for. They are appended last so they can
   add what the prototype doesn't cover and never override what it does.

   Deviations are recorded in PORT-NOTES.md.
   ========================================================================== */

/* ============================================================================
   CLUTCHH BLUE — round 3
   · BOLD blue canvas by default (picker kept in the PROTO badge)
   · editor = floating white sheet on the blue canvas (Antonio's v9 design)
   · sidebar statuses = tiny dot + colored word, no pill backgrounds
   · Settings = the real app's exact layout (§Settings v3), colors only
   · Docs-style generalized editor toolbar
   ========================================================================== */
:root {
  /* canvas — BOLD blue (Antonio's pick) */
  --paper:#dfeafa; --paper-2:#cbdcf4; --bubble:#a8c4ec; --surface:#ffffff; --surface-2:#eef4fd;
  --line:#cddcf1; --line-soft:#dae6f6;
  --ink-1:#16181d; --ink-2:#3f434c; --ink-25:#666c78; --ink-3:#717886; --ink-4:#a3a9b8;
  --ink-rgb:22,24,29;
  --border:rgba(var(--ink-rgb),.08); --border-strong:rgba(var(--ink-rgb),.16);
  --blue-50:#eff4ff; --blue-100:rgba(37,99,235,.12); --blue-400:#5a8bff;
  --blue-500:#2563eb; --blue-600:#1d4ed8; --blue-outline:#b9cdf3;
  --grad-primary:linear-gradient(135deg,#3d78ff 0%,#1e4fd6 100%);
  --grad-primary-hover:linear-gradient(135deg,#2f6bff 0%,#1a45c0 100%);
  --shadow-primary-btn:0 6px 16px -4px rgba(47,107,255,.55);
  --green-100:rgba(63,174,106,.14); --green-ink:#2f8a5b; --green-500:#3fae6a;
  --butter-100:#f5e4c8; --butter-ink:#9a6a12;
  --amber-100:rgba(224,145,42,.14); --amber-ink:#9a6a12;
  --red-100:rgba(224,96,58,.14); --red-ink:#c14a26; --red-600:#b91c1c; --red-500:#e0603a;
  --surface-hover:rgba(var(--ink-rgb),.05);
  --shadow-card:0 1px 2px rgba(21,25,40,.05),0 1px 0 rgba(21,25,40,.02);
  --shadow-sheet:0 2px 6px rgba(21,40,80,.06),0 22px 48px -28px rgba(21,40,80,.28);
  --shadow-raised:0 12px 30px -20px rgba(20,28,50,.35);
  --ease:cubic-bezier(0.2,0.8,0.2,1);
  --r-pill:999px;
  --font-ui:"General Sans","Bricolage Grotesque",-apple-system,"Segoe UI","Helvetica Neue",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:light;
}
html[data-theme="dark"] {
  color-scheme:dark;
  --paper:#14171f; --paper-2:#1b1f28; --bubble:#28303f; --surface:#20242f; --surface-2:#1b1f28;
  --line:rgba(231,233,238,.08); --line-soft:rgba(231,233,238,.08);
  --ink-1:#e7e9ee; --ink-2:#c5cad4; --ink-25:#9ba1ae; --ink-3:#848a98; --ink-4:#4a5060;
  --ink-rgb:231,233,238;
  --border:rgba(var(--ink-rgb),.08); --border-strong:rgba(var(--ink-rgb),.16);
  --blue-50:rgba(90,139,255,.14); --blue-100:rgba(90,139,255,.2);
  --blue-400:#7da2ff; --blue-500:#5a8bff; --blue-600:#4a77f2; --blue-outline:rgba(90,139,255,.4);
  --grad-primary:linear-gradient(135deg,#6b97ff 0%,#4a77f2 100%);
  --grad-primary-hover:linear-gradient(135deg,#7da2ff 0%,#5a86ff 100%);
  --shadow-primary-btn:0 6px 16px -6px rgba(90,139,255,.4);
  --green-100:rgba(129,201,149,.15); --green-ink:#81c995;
  --butter-100:rgba(233,196,106,.15); --butter-ink:#e9c46a;
  --amber-100:rgba(233,180,92,.15); --amber-ink:#e9b45c;
  --red-100:rgba(242,139,130,.15); --red-ink:#f28b82; --red-600:#f28b82; --red-500:#f28b82;
  --surface-hover:rgba(var(--ink-rgb),.06);
  --shadow-card:0 1px 2px rgba(0,0,0,.2);
  --shadow-sheet:0 2px 6px rgba(0,0,0,.3),0 22px 48px -28px rgba(0,0,0,.5);
  --shadow-raised:0 10px 26px -18px rgba(0,0,0,.5);
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body { font-family:var(--font-ui); background:var(--paper); color:var(--ink-1);
  -webkit-font-smoothing:antialiased; overflow:hidden; }
button { font-family:inherit; }

/* ---------- shared ---------- */
.btn { display:inline-flex; align-items:center; gap:7px; border-radius:var(--r-pill);
  font:600 13px/1 var(--font-ui); padding:0 18px; height:38px; cursor:pointer;
  border:1.5px solid transparent; transition:all .15s var(--ease); white-space:nowrap; }
.btn.sm { height:32px; padding:0 14px; font-size:12.5px; }
.btn.primary { background:var(--grad-primary); color:#fff; box-shadow:var(--shadow-primary-btn); }
.btn.primary:hover { background:var(--grad-primary-hover); transform:translateY(-1px); }
.btn.secondary { background:var(--surface); color:var(--ink-1); border-color:var(--blue-outline); }
.btn.secondary:hover { border-color:var(--blue-500); }
.btn.dark { background:var(--ink-1); color:var(--paper); }
html[data-theme="dark"] .btn.dark { background:var(--grad-primary); color:#fff; }
.mono-label { font:500 10.5px/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }

/* ---------- frame ---------- */
main { height:100vh; display:flex; flex-direction:column; }
header.top { flex:none; display:flex; align-items:center; gap:10px; padding:10px 18px;
  background:var(--paper); border-bottom:1px solid var(--line); }
/* The header mark IS the logo, in live text: uppercase, the artwork's own 10deg
   lean, and the brand blue on the same two letters. It used to be lowercase with
   a blue bar swiped under it — a different mark from the one on the sign-in
   screen and the website, which is how a product ends up looking like two
   products. Live text rather than the PNG so it follows the theme and stays
   crisp at any zoom. */
.wordmark { position:relative; display:inline-block; font-weight:800; font-size:18px;
  letter-spacing:-.02em; text-transform:uppercase; padding:0 3px; transform:skewX(-10deg); }
.wordmark span { color:var(--ink-1); }
.wordmark i { font-style:normal; color:#005dfd; }
html[data-theme="dark"] .wordmark span { color:#fff; }
/* The artwork's blue is mixed for paper. On the dark canvas it sits too close to
   the background and buzzes, so the mark takes the theme's already-lifted blue —
   the same one every other accent in dark mode uses. */
html[data-theme="dark"] .wordmark i { color:var(--blue-500); }
.hdr-sep { color:var(--ink-4); font-size:14px; }
.hdr-course { font:600 13.5px/1 var(--font-ui); color:var(--ink-2); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
header .sp { flex:1; }
.chip { display:inline-flex; align-items:center; gap:6px; font:600 11.5px/1 var(--font-ui);
  color:var(--ink-2); background:var(--surface); border:1.5px solid var(--blue-outline);
  border-radius:var(--r-pill); height:28px; padding:0 13px; cursor:pointer; white-space:nowrap;
  transition:border-color .15s var(--ease); }
.chip:hover { border-color:var(--blue-500); color:var(--ink-1); }
.chip .dot { width:6px; height:6px; border-radius:50%; background:var(--green-500); }
/* the Auto chip's switch stays text-height so both header pills match */
.chip .toggle.mini { width:24px; height:12px; }
.chip .toggle.mini span { top:2px; left:2px; width:8px; height:8px; }
.chip .toggle.mini.on span { left:14px; }
.viewport { flex:1; min-height:0; position:relative; }
.view { position:absolute; inset:0; display:none; }
.view.on { display:flex; }

/* ---------- dock ---------- */
.dockwrap { position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:60; }
.dock { display:flex; align-items:center; gap:2px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 8px;
  box-shadow:var(--shadow-raised); }
.dockbtn { position:relative; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--ink-3); border-radius:var(--r-pill); cursor:pointer;
  transition:background .15s var(--ease), color .15s var(--ease); }
.dockbtn:hover { background:var(--surface-hover); color:var(--ink-1); }
.dockbtn.active { background:var(--blue-100); color:var(--blue-600); }
.dock-sep { width:1px; height:20px; background:var(--line); margin:0 4px; }
.reddot { display:none; position:absolute; top:5px; right:6px; width:7px; height:7px; border-radius:50%;
  background:var(--red-500); border:2px solid var(--surface); }
.reddot.show { display:block; }

/* ---------- workspace ---------- */
/* Registered custom props so pane widths TRANSITION smoothly (collapse + snap) */
@property --wsL { syntax:'<length>'; inherits:true; initial-value:288px; }
@property --wsR { syntax:'<length>'; inherits:true; initial-value:300px; }
.workspace { flex:1; min-height:0; display:grid;
  grid-template-columns:var(--wsL) 5px minmax(240px,1fr) 5px var(--wsR);
  transition:--wsL .32s var(--ease); }
.workspace.dragging { transition:none; }
.workspace.dir-collapsed { --wsL:0px; }
.ws-resize { cursor:col-resize; position:relative; }
.ws-resize::after { content:""; position:absolute; inset:0 1.5px; border-radius:2px;
  background:transparent; transition:background .15s var(--ease); }
.ws-resize:hover::after, .ws-resize.dragging::after { background:var(--blue-400); }
.workspace.dir-collapsed .ws-resize.left { pointer-events:none; }
.ws-dir { border-right:1px solid var(--line); background:var(--paper); display:flex; flex-direction:column;
  min-width:0; overflow:hidden; opacity:1; transition:opacity .25s var(--ease); }
.workspace.dir-collapsed .ws-dir { opacity:0; border-right:none; }
/* collapse toggle — lives IN the sidebar, next to the course pill; a floating
   reopen button appears at the editor's top-left only while collapsed */
.collapse-btn { flex:none; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--blue-outline); background:var(--surface); color:var(--ink-2);
  border-radius:10px; cursor:pointer; transition:all .15s var(--ease); }
.collapse-btn:hover { border-color:var(--blue-500); color:var(--blue-600); }
.crsdrop { display:flex; align-items:center; gap:8px; position:relative; }
.crsdrop .crsdrop-btn { flex:1; min-width:0; }
#dirOpen { display:none; }
.workspace.dir-collapsed ~ #dirOpen, .workspace.dir-collapsed #dirOpen { display:flex; }
/* auto-hiding overlay scrollbar — invisible until you actually scroll */
.ws-scroll::-webkit-scrollbar { width:9px; }
.ws-scroll::-webkit-scrollbar-track { background:transparent; }
.ws-scroll::-webkit-scrollbar-thumb { background:transparent; border-radius:8px;
  border:2.5px solid transparent; background-clip:padding-box; }
.ws-scroll.scrolling::-webkit-scrollbar-thumb { background:rgba(var(--ink-rgb),.28); background-clip:padding-box; }
.ws-scroll { flex:1; overflow-y:auto; padding:6px 10px 90px; }
.crsdrop { padding:12px 12px 4px; }
.crsdrop-btn { display:flex; align-items:center; gap:8px; width:100%; background:var(--grad-primary);
  color:#fff; border:none; border-radius:14px; padding:11px 14px; font:600 13px/1 var(--font-ui);
  cursor:pointer; box-shadow:var(--shadow-primary-btn); }
.crsdrop-btn .rdot { width:7px; height:7px; border-radius:50%; background:#fff; opacity:.9; }
.crsdrop-btn .lbl { flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crsdrop-btn .chev { opacity:.8; font-size:10px; }
/* bubble week groups */
.mod { margin-bottom:7px; }
.mod-head { display:flex; align-items:center; gap:8px; width:100%; background:var(--bubble);
  border:none; border-radius:13px; padding:10px 13px; cursor:pointer; text-align:left;
  transition:background .15s var(--ease); }
.mod-head:hover { background:var(--blue-100); }
.mod-head .chev { flex:none; font-size:11px; color:var(--ink-2); transition:transform .15s var(--ease); }
.mod.closed .mod-head .chev, .mod.closing .mod-head .chev { transform:rotate(-90deg); }
.mod-head .mt { flex:1; font:700 12px/1.3 var(--font-ui); color:var(--ink-2);
  text-transform:uppercase; letter-spacing:.04em; }
.mod-head .wk-add { flex:none; width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  border:none; border-radius:7px; background:rgba(var(--ink-rgb),.07); color:var(--ink-3);
  font-size:14px; font-weight:700; cursor:pointer; opacity:1; background:var(--surface); color:var(--blue-600); border-radius:7px; }
.mod-head:hover .wk-add, .wk-add:hover { background:var(--blue-500); color:#fff; }
.mod-body { padding:5px 2px 1px; }
.mod.closed .mod-body { display:none; }
.del { display:block; cursor:pointer; }
.del .di-row { display:flex; align-items:center; gap:9px; min-width:0; padding:8px 11px 8px 13px;
  border:1.5px solid transparent; border-radius:12px; }
.del:hover .di-row { background:var(--surface-hover); }
.del.sel .di-row { background:var(--surface); border-color:var(--blue-500); box-shadow:var(--shadow-card); }
.di-ic { flex:none; font-size:12px; }
.di-t { flex:1; min-width:0; font:600 13px/1.35 var(--font-ui); color:var(--ink-25);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.del.sel .di-t { color:var(--ink-1); }
.di-due { flex:none; font:500 9px/1 var(--font-mono); color:var(--ink-4); }
.di-due.soon { color:var(--red-600); font-weight:600; }
/* status = tiny dot + colored word (v9 style, no pill background) */
.di-sub { display:flex; align-items:center; gap:6px; padding:3px 11px 6px 34px;
  font:500 10px/1 var(--font-mono); letter-spacing:.03em; }
.di-sub .sdot { width:7px; height:7px; border-radius:50%; flex:none; }
.st-rev { color:var(--green-ink); } .st-rev .sdot { background:var(--green-500); }
.st-drf { color:var(--amber-ink); } .st-drf .sdot { background:#dd9021; }
.st-not { color:var(--ink-4); } .st-not .sdot { background:transparent; border:1.5px solid var(--ink-4); }
/* per-assignment materials drawer — collapsed by default so the list stays simple */
.matdrawer-head { display:flex; align-items:center; gap:7px; width:100%; background:none; border:none; cursor:pointer;
  padding:4px 11px 5px 32px; font:500 11px/1.3 var(--font-ui); color:var(--ink-4); border-radius:9px; text-align:left; }
.matdrawer-head:hover { color:var(--ink-2); background:var(--surface-hover); }
.matdrawer-head .chev { flex:none; font-size:8px; color:var(--ink-4); transition:transform .15s var(--ease); }
.matdrawer.open:not(.closing) .matdrawer-head .chev { transform:rotate(90deg); }
.matdrawer-head .mcount { margin-left:auto; font:400 8px/1 var(--font-mono); color:var(--ink-4); }
.matdrawer .matdrawer-body { display:none; }
.matdrawer.open .matdrawer-body { display:block; }
.matdrawer .mrow { padding-left:40px; }
.mrow { display:flex; align-items:center; gap:7px; padding:5px 11px 5px 26px; border-radius:9px; cursor:pointer; }
.mrow:hover { background:var(--surface-hover); }
.mtag { flex:none; font:500 8px/1 var(--font-mono); color:var(--ink-3);
  background:rgba(var(--ink-rgb),.06); border-radius:5px; padding:2.5px 5px; }
.mtag.nt { color:var(--blue-600); background:var(--blue-100); }
.mname { flex:1; min-width:0; font:400 11.5px/1.3 var(--font-ui); color:var(--ink-25);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msize { flex:none; font:400 8px/1 var(--font-mono); color:var(--ink-4); }
.badge-new { font:600 8.5px/1.3 var(--font-mono); background:var(--blue-100); color:var(--blue-600);
  padding:1.5px 6px; border-radius:var(--r-pill); }
.mod.coursemats { border-top:1px solid var(--line); margin-top:10px; padding-top:10px; }
.mod.coursemats .mod-head { background:transparent; }
.mod.coursemats .mod-head:hover { background:var(--surface-hover); }
.mod.coursemats .mod-head .mt { text-transform:none; letter-spacing:0; font:700 12.5px/1.3 var(--font-ui); }
.matadd, .addweek { padding:7px 12px; font:600 11.5px/1.3 var(--font-ui); color:var(--ink-4); cursor:pointer;
  border-radius:9px; }
.matadd:hover, .addweek:hover { color:var(--blue-600); background:var(--surface-hover); }

/* editor — a floating white SHEET on the blue canvas (Antonio's v9 design) */
.ws-edit { background:var(--paper); display:flex; flex-direction:column; min-width:0; position:relative; }
.ed-meta { flex:none; display:flex; align-items:center; gap:12px; padding:13px 26px 9px; flex-wrap:wrap; }
.ed-meta .sp { flex:1; }
.tbadge { font:600 9.5px/1.3 var(--font-mono); padding:3.5px 9px; border-radius:var(--r-pill);
  text-transform:uppercase; letter-spacing:.04em; background:var(--blue-100); color:var(--blue-600); }
.em-status { font:400 12.5px/1 var(--font-ui); color:var(--ink-3); }
.em-brief { font:600 12.5px/1 var(--font-ui); color:var(--blue-500); background:none; border:none; cursor:pointer; padding:0; }
.em-brief:hover { color:var(--blue-600); }
/* assignment brief panel (Show instructions) */
.spec { display:none; margin:4px 12px 2px; padding:12px 16px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:12px; font:400 12.5px/1.55 var(--font-ui); color:var(--ink-2); }
.spec.open { display:block; }
.spec .spec-h { font:700 9.5px/1 var(--font-mono); letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:6px; }
/* mini calendar popover — ported from the current UI (its date picker everywhere) */
.minical { position:fixed; z-index:130; background:var(--surface); border:1px solid var(--border-strong); border-radius:11px;
  box-shadow:var(--shadow-raised); padding:9px 11px 10px; }
.minical .cal-head { display:flex; align-items:center; margin-bottom:6px; }
.minical .cal-head b { font:700 11.5px/1 var(--font-ui); color:var(--ink-1); }
.minical .cal-nav { margin-left:auto; display:flex; gap:6px; }
.minical .cal-nav button { border:none; background:none; cursor:pointer; color:var(--ink-4);
  font-size:9px; padding:2px 3px; line-height:1; }
.minical .cal-nav button:hover { color:var(--ink-1); }
.minical .cal-grid { display:grid; grid-template-columns:repeat(7,21px); gap:1px; }
.minical .cal-dow span { text-align:center; font:600 8px/16px var(--font-mono); color:var(--ink-4); }
.minical .cal-day { width:21px; height:19px; border:none; background:none; cursor:pointer;
  font:400 9.5px/19px var(--font-mono); color:var(--ink-2); border-radius:5px; text-align:center; padding:0; }
.minical .cal-day:hover { background:var(--blue-50); }
.minical .cal-day.adj { color:var(--ink-4); cursor:default; pointer-events:none; }
.minical .cal-day.sel { box-shadow:inset 0 0 0 1px var(--blue-500); color:var(--blue-600); }
/* add-to-week dialog — the current UI's centered dialog, blue theme */
.dlg-ov { position:fixed; inset:0; z-index:120; background:rgba(20,28,50,.35); display:flex;
  align-items:center; justify-content:center; }
.dlg { width:400px; max-width:92vw; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow-raised); padding:16px 18px; }
.dlg-h { display:flex; align-items:center; justify-content:space-between; font:400 14px/1.3 var(--font-ui);
  margin-bottom:12px; }

/* ===== cloud restore (fresh machine pulling the account's backup) ===== */
.restore-card { width:340px; text-align:center; padding:26px 22px 24px; }
.restore-h { font:700 17px/1.3 var(--font-ui); color:var(--ink-1); margin:8px 0 14px; }
.restore-spin { width:22px; height:22px; margin:0 auto 12px; border-radius:50%;
  border:2.5px solid var(--blue-outline); border-top-color:var(--blue-500);
  animation:restoreSpin .8s linear infinite; }
.restore-p { font:500 11px/1.5 var(--font-mono); color:var(--ink-3); }
@keyframes restoreSpin { to { transform:rotate(360deg); } }
.dlg-types { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-bottom:13px; }
.dlg-type { font:600 11px/1.2 var(--font-ui); padding:8px 6px; text-align:center; border-radius:10px;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-2); cursor:pointer; }
.dlg-type.on { background:var(--blue-500); color:#fff; border-color:transparent; }
.dlg-lbl { display:block; font:600 9.5px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); margin:10px 0 5px; }
.dlg-lbl i { font-style:normal; text-transform:none; letter-spacing:0; color:var(--ink-4); }
.dlg input[type=text], .dlg input[type=date] { width:100%; font:400 12.5px/1.3 var(--font-ui); color:var(--ink-1);
  background:var(--surface-2); border:1.5px solid var(--line); border-radius:10px; padding:9px 11px; outline:none; }
.dlg input:focus { border-color:var(--blue-500); }
.dlg-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:15px; }
/* inline add-week mini form */
.miniform { padding:4px 12px 8px; }
/* note→assignment picker list */
.nt-pickl { display:flex; flex-direction:column; gap:4px; max-height:300px; overflow-y:auto; }
.nt-pick { display:block; width:100%; text-align:left; border:none; background:none; font:500 12.5px/1.4 var(--font-ui);
  color:var(--ink-1); padding:10px 11px; border-radius:10px; cursor:pointer; }
.nt-pick:hover { background:var(--surface-hover); }
.nt-pick.on { background:var(--blue-50); color:var(--blue-600); font-weight:600; }
/* needs checklist — what this item is missing before Chad can do a good job */
.needspanel { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:4px 12px 2px; }
.ck { font:600 10px/1 var(--font-mono); letter-spacing:.04em; padding:6px 11px; border-radius:var(--r-pill); }
.ck.ok { background:var(--green-100); color:var(--green-ink); }
.ck.off { background:rgba(var(--ink-rgb),.06); color:var(--ink-4); }
button.ck { border:none; cursor:pointer; font-family:var(--font-mono); }
button.ck.off:hover { background:rgba(var(--ink-rgb),.11); color:var(--ink-2); }
.ck-due { font:600 10px/1 var(--font-mono); letter-spacing:.04em; padding:6px 11px; border-radius:var(--r-pill);
  background:var(--red-100); color:var(--red-ink); border:none; cursor:pointer; }
.ck-due:hover { background:var(--red-ink); color:#fff; }
.ck-assume { font:600 10px/1 var(--font-mono); letter-spacing:.04em; padding:6px 11px; border-radius:var(--r-pill);
  background:none; color:var(--blue-600); border:1px solid var(--blue-outline); cursor:pointer; }
.ck-assume:hover { border-color:var(--blue-500); }
/* auto-queue note */
.autonote { margin:6px 12px 2px; padding:9px 13px; border:1px dashed var(--blue-outline); border-radius:11px;
  font:400 11.5px/1.5 var(--font-ui); color:var(--blue-600); background:var(--blue-50); }
/* "Chad filled gaps" strip — amber, collapsed by default */
.flagstrip { margin:6px 12px 2px; background:var(--butter-100); border:1px solid rgba(221,144,33,.35);
  border-radius:12px; overflow:hidden; }
.flag-head { display:flex; align-items:center; gap:9px; padding:10px 13px; cursor:pointer; }
.flag-warn { flex:none; }
.flag-htext { flex:1; font:400 12px/1.45 var(--font-ui); color:var(--ink-2); }
.flag-htext b { color:var(--ink-1); }
.flag-review { flex:none; font:600 10.5px/1 var(--font-mono); color:var(--amber-ink); }
.flag-body { border-top:1px solid rgba(221,144,33,.25); }
.flag-row { display:flex; align-items:center; gap:9px; padding:9px 13px; }
.flag-row + .flag-row { border-top:1px solid rgba(221,144,33,.15); }
.flag-t { flex:1; font:400 11.5px/1.45 var(--font-ui); color:var(--ink-2); }
.flag-act { flex:none; border:none; background:var(--surface); color:var(--blue-600);
  font:600 9.5px/1 var(--font-mono); padding:6px 10px; border-radius:var(--r-pill); cursor:pointer; }
.flag-keep { flex:none; border:none; background:none; color:var(--ink-3);
  font:600 9.5px/1 var(--font-mono); padding:6px 8px; border-radius:var(--r-pill); cursor:pointer; }
.flag-keep:hover { background:var(--surface); }
/* incomplete-draft card */
.provcard { position:relative; display:flex; gap:11px; margin:6px 12px 2px; padding:12px 34px 13px 14px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
  font:400 12px/1.55 var(--font-ui); color:var(--ink-2); }
.provcard b { color:var(--ink-1); }
.prov-list { margin:5px 0 0 16px; }
.prov-list li { margin:2px 0; }
.prov-x { position:absolute; right:8px; top:8px; border:none; background:none; color:var(--ink-4);
  font-size:11px; cursor:pointer; padding:3px 5px; border-radius:6px; }
.prov-x:hover { color:var(--ink-1); background:var(--surface-hover); }
/* sidebar status: incomplete = amber outline dot; queued = blue */
.st-inc { color:var(--amber-ink); } .st-inc .sdot { background:transparent; border:1.5px solid #dd9021; }
.st-q { color:var(--blue-600); } .st-q .sdot { background:var(--blue-500); }
/* course dropdown menu */
.crsmenu { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-raised); padding:5px; display:none; }
.crsmenu.open { display:block; }
.crsmenu button { display:flex; align-items:center; gap:8px; width:100%; border:none; background:none;
  text-align:left; font:600 12px/1.3 var(--font-ui); color:var(--ink-1); padding:9px 10px;
  border-radius:9px; cursor:pointer; }
.crsmenu button:hover { background:var(--surface-hover); }
.crsmenu .cdot { flex:none; width:7px; height:7px; border-radius:50%; }
/* a message the student typed to Chad */
.umsg { align-self:flex-end; max-width:85%; background:var(--grad-primary); color:#fff;
  font:400 12.5px/1.5 var(--font-ui); padding:9px 13px; border-radius:14px 14px 4px 14px; }
.em-due { font:400 12.5px/1 var(--font-ui); color:var(--ink-3); }
/* autosave status — no Save button; the sheet saves itself, undo/redo is the revert path */
/* Fixed slot: "Saving…" / "Saved · just now" / "Saved" are different widths,
   and letting the label reflow shoved the whole meta row sideways per keystroke. */
.autosave { font:500 9.5px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-4); transition:color .2s;
  min-width:104px; text-align:right; flex:none; }
.autosave.busy { color:var(--blue-600); }
.autosave.done { color:var(--green-ink); }
.em-sep { color:var(--ink-4); }
.ed-meta .sp { flex:1; }
/* Google-Docs-style toolbar — Docs' compact pill bar, working controls */
.toolbar { flex:none; display:flex; align-items:center; gap:0; margin:2px 12px 0; padding:4px 6px;
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:17px;
  /* WRAP whenever the buttons outgrow the pane — they used to spill over
     Chad's panel at mid widths (live report, twice). */
  flex-wrap:wrap; row-gap:2px;
  overflow:visible; position:relative; z-index:5; }
.tbtn { flex:none; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:3px;
  border:none; background:transparent; color:var(--ink-2); font:500 12px/1 var(--font-ui);
  height:26px; min-width:25px; padding:0 4px; border-radius:5px; cursor:pointer; user-select:none; }
.tbtn:hover { background:rgba(var(--ink-rgb),.07); color:var(--ink-1); }
.tbtn.on { background:#d3e3fd; color:#0b57d0; }
html[data-theme="dark"] .tbtn.on { background:var(--blue-100); color:var(--blue-400); }
.tbtn svg { display:block; }
.tbtn .caret { font-size:7px; color:var(--ink-3); margin-left:1px; }
.tbtn.chipd { padding:0 6px; font-weight:500; }
.tbtn .acolor { display:inline-flex; flex-direction:column; align-items:center; line-height:1; font-weight:700; font-size:12px; }
.tbtn .acolor i { display:block; width:13px; height:3px; background:#e0603a; border-radius:2px; margin-top:1px; }
.tsep { flex:none; width:1px; height:16px; background:rgba(var(--ink-rgb),.14); margin:0 3px; }
/* word count lives IN the bar (right edge); when the pane gets narrow it hides
   instead of overflowing — the editor pane is a size container */
.ws-edit { container-type:inline-size; }
.tb-wc { margin-left:auto; flex:none; font:400 10px/1 var(--font-mono); color:var(--ink-3);
  white-space:nowrap; padding:0 4px 0 8px; }
@container (max-width: 790px){ .tb-wc { display:none; } }
/* Export lives IN the word bar (replaces print) — small dark chip, distinct */
.tbtn.export { background:var(--ink-1); color:var(--paper); font-weight:600; padding:0 9px; border-radius:7px; }
.tbtn.export:hover { background:var(--blue-600); color:#fff; }
html[data-theme="dark"] .tbtn.export { background:var(--grad-primary); color:#fff; }
.tbtn.export .caret { color:inherit; opacity:.7; }
/* toolbar popovers (zoom / style / color / align) */
.tpop { position:absolute; top:calc(100% + 6px); left:0; z-index:50; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-raised);
  padding:5px; display:none; min-width:120px; }
.tpop.open { display:block; }
.tpop button { display:flex; align-items:center; gap:8px; width:100%; border:none; background:transparent;
  color:var(--ink-1); font:500 12.5px/1 var(--font-ui); padding:8px 10px; border-radius:7px;
  cursor:pointer; text-align:left; white-space:nowrap; }
.tpop button:hover { background:var(--surface-hover); }
.tpop.colors { display:none; grid-template-columns:repeat(5,22px); gap:5px; padding:8px; min-width:0; }
.tpop.colors.open { display:grid; }
.tpop.colors button { width:22px; height:22px; border-radius:6px; padding:0; border:1px solid rgba(var(--ink-rgb),.15); }
.tpop.arow { display:none; padding:5px; min-width:0; }
.tpop.arow.open { display:flex; gap:2px; }
.tpop.arow button { width:30px; justify-content:center; padding:7px 0; }
/* the sheet — bigger page, actually editable */
.ed-scroll { flex:1; overflow-y:auto; padding:12px 16px 72px; }
.sheet { --zoom:1; max-width:1160px; margin:0 auto; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-sheet); padding:44px 72px 72px; min-height:100%;
  outline:none; font-size:calc(15px * var(--zoom)); }
.sheet h1 { font:700 1.93em/1.18 var(--font-ui); letter-spacing:-.025em; margin-bottom:.65em; color:var(--ink-1); }
.sheet h2 { font:700 1.4em/1.25 var(--font-ui); letter-spacing:-.02em; margin:1em 0 .45em; color:var(--ink-1); }
.sheet h3 { font:700 1.15em/1.3 var(--font-ui); margin:.9em 0 .4em; color:var(--ink-1); }
.sheet p { font:400 1em/1.75 var(--font-ui); color:var(--ink-2); margin-bottom:.95em; }
.sheet ul, .sheet ol { margin:0 0 .95em 1.6em; color:var(--ink-2); line-height:1.75; }
.sheet ul.checklist { list-style:none; margin-left:1.35em; }
.sheet ul.checklist li::before { content:"☐"; margin-right:.55em; color:var(--ink-3); }
.sheet a { color:var(--blue-500); }

/* Chad panel — blue tint + white receipt cards */
.ws-ai { border-left:1px solid var(--line); background:var(--paper); display:flex; flex-direction:column; min-width:0; }
.ai-head { flex:none; display:flex; align-items:center; gap:7px; padding:14px; border-bottom:1px solid var(--line); }
.ai-live { width:8px; height:8px; border-radius:50%; background:var(--green-500); }
.ai-head b { font:700 14px/1 var(--font-ui); }
.ai-count { flex:1; text-align:right; font:400 9.5px/1 var(--font-mono); letter-spacing:.06em; color:var(--ink-4); }
/* Start this chat over — quiet until you look for it, same as the floating panel's. */
.ai-clear { flex:none; border:1px solid rgba(var(--ink-rgb),.14); background:transparent;
  color:var(--ink-3); cursor:pointer; padding:4px 9px; border-radius:var(--r-pill);
  font:500 10px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  transition:color .15s var(--ease), border-color .15s var(--ease); }
.ai-clear:hover { color:var(--blue-600); border-color:var(--blue-500); }
.msgs { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
.receipt { display:flex; align-items:flex-start; gap:8px; background:var(--surface);
  border:1px solid var(--line); border-radius:13px; padding:10px 12px;
  font:400 12.5px/1.5 var(--font-ui); color:var(--ink-2); box-shadow:var(--shadow-card); }
.receipt .rc-check { color:var(--green-ink); font-weight:700; }
.receipt.active { background:var(--surface); border-color:var(--blue-500); color:var(--blue-600); }
.receipt .rc-dot { width:8px; height:8px; border-radius:50%; background:var(--blue-500); margin-top:4px;
  animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.composer { flex:none; padding:14px; }
.composer .bar { background:var(--surface); border:1.5px solid var(--blue-outline); border-radius:18px;
  padding:12px 12px 10px; box-shadow:var(--shadow-card); }
.composer textarea { display:block; width:100%; min-height:24px; border:none; outline:none; resize:none;
  background:transparent; font:400 14px/1.5 var(--font-ui); color:var(--ink-1); }
.cmp-row { display:flex; align-items:center; gap:4px; margin-top:9px; }
.cmp-icon { width:32px; height:32px; border-radius:50%; border:none; background:transparent;
  color:var(--ink-3); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.cmp-icon:hover { background:var(--surface-hover); color:var(--ink-1); }
.cmp-sp { flex:1; }
.cmp-send { width:32px; height:32px; border-radius:50%; border:none; background:var(--grad-primary);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--shadow-primary-btn); }

/* ---------- calendar (structure unchanged, colors from tokens) ---------- */
.calwrap { flex:1; display:flex; flex-direction:column; padding:18px 22px 84px; gap:12px; min-height:0; }
/* full width — the right-edge button cluster must reach the tasks column
   (a leftover margin-right:262px stranded it over the grid) */
.calbar { flex:none; display:flex; align-items:center; gap:14px; }
.cnav { display:flex; align-items:center; gap:6px; }
.stepbtn { width:30px; height:30px; border-radius:8px; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--ink-2); font-size:14px; cursor:pointer; }
.stepbtn:hover { border-color:var(--blue-500); }
.calmonth { font:700 16px/1 var(--font-ui); min-width:130px; text-align:center; }
.cal-title { flex:1; text-align:center; font:800 22px/1 var(--font-ui); letter-spacing:-.02em; }
/* Month/Week toggle — the current UI's style (mono uppercase, dark active pill) */
.seg { display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:3px; }
.seg button { border:none; background:transparent; font:500 11px/1 var(--font-mono); letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3); padding:8px 16px; border-radius:8px; cursor:pointer; }
.seg button.on { background:var(--ink-1); color:var(--paper); }
.calmain { flex:1; display:flex; gap:12px; min-height:0; }
/* boxy outlined grid: EVERY day renders a box — adjacent-month days included */
.calgrid { flex:1; display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:1fr; gap:6px;
  min-height:0; padding:8px; background:rgba(255,255,255,.45); border:1px solid var(--line);
  border-radius:16px; }
html[data-theme="dark"] .calgrid { background:rgba(255,255,255,.03); }
.cd { font:500 10px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  padding:4px 6px; align-self:end; }
.cc { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:7px 8px;
  min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:4px; box-shadow:var(--shadow-card); }
.cc.mut { background:var(--surface-2); box-shadow:none; }
.cc.mut .dn { color:var(--ink-4); }
.cc.today { border:1.5px solid var(--blue-500); }
.cc .dn { font:600 11px/1 var(--font-mono); color:var(--ink-3); }
.cc.today .dn { color:var(--blue-600); }
/* the day + is always faintly there (so it's discoverable), full strength on hover */
.cc-add { position:absolute; top:4px; right:5px; width:18px; height:18px; border:none; border-radius:6px;
  background:var(--blue-100); color:var(--blue-600); font:700 12px/1 var(--font-ui); cursor:pointer;
  opacity:.35; transition:opacity .12s; display:flex; align-items:center; justify-content:center; }
.cc:hover .cc-add, .cc-add:hover { opacity:1; }
.cc-add:hover { background:var(--blue-500); color:#fff; }
/* custom entries can be removed right on the chip */
.calchip .chip-x { flex:none; margin-left:auto; font-size:8px; opacity:0; cursor:pointer; padding:1px 3px; }
.calchip:hover .chip-x { opacity:.6; }
.calchip .chip-x:hover { opacity:1; color:var(--red-ink); }
/* week view: one tall row for the current week, every item visible */
.calgrid.week { grid-auto-rows:auto; grid-template-rows:auto 1fr; }
.calgrid.week .cc { gap:5px; padding:9px 9px; }
.calgrid.week .cc .dn { font-size:12px; margin-bottom:2px; }
.cmore { margin-top:auto; align-self:flex-start; font:600 9.5px/1.3 var(--font-mono); color:var(--ink-3);
  padding:2px 6px; border-radius:5px; cursor:pointer; }
.cc:hover .cmore, .cmore:hover { background:var(--blue-100); color:var(--blue-600); }
/* ===== coursicle-style week grid + class times ===== */
/* quiet toolbar: range on the left, small blue text actions, text tabs */
.calbar.quiet { display:flex; align-items:center; gap:14px; }
.calbar.quiet .sp { flex:1; }
.calbar.quiet .calmonth { font:800 16px/1 var(--font-ui); letter-spacing:-.01em; }
.stepbtn.ghost { border:none; background:transparent; box-shadow:none; color:var(--ink-3);
  font-size:17px; width:26px; height:26px; }
.stepbtn.ghost:hover { color:var(--ink-1); background:var(--surface-hover); border-radius:8px; }
.calacts { display:flex; align-items:center; gap:16px; }
.callink { font:600 12.5px/1 var(--font-ui); color:var(--blue-600); cursor:pointer;
  padding:6px 2px; border-radius:6px; white-space:nowrap; }
.callink:hover { text-decoration:underline; }
.caltabs { display:flex; gap:2px; background:rgba(var(--ink-rgb),.06); border-radius:var(--r-pill); padding:3px; }
.caltabs button { border:none; background:transparent; cursor:pointer; color:var(--ink-3);
  font:600 11.5px/1 var(--font-ui); padding:6px 13px; border-radius:var(--r-pill); }
.caltabs button.on { background:var(--surface); color:var(--ink-1); box-shadow:var(--shadow-card); }
/* the month joins the white sheet: hairline cells, no boxes, blue today dot */
.calgrid:not(.cwk) { background:var(--surface); border:none; box-shadow:var(--shadow-card);
  border-radius:18px; padding:12px 14px 16px; gap:0; }
.calgrid:not(.cwk) .cd { font:600 11.5px/1 var(--font-ui); letter-spacing:0; text-transform:none;
  color:var(--ink-3); text-align:center; padding:6px 0 8px; }
.calgrid:not(.cwk) .cc { background:transparent; border:none; border-radius:0; box-shadow:none;
  border-top:1px solid rgba(var(--ink-rgb),.06); border-left:1px solid rgba(var(--ink-rgb),.045); }
.calgrid:not(.cwk) .cc:nth-child(7n+8) { border-left:none; }
.calgrid:not(.cwk) .cc.today { border:none; border-top:1px solid rgba(var(--ink-rgb),.06);
  border-left:1px solid rgba(var(--ink-rgb),.045); background:rgba(47,107,255,.045); border-radius:10px; }
.calgrid:not(.cwk) .cc .dn { font:600 11px/1 var(--font-ui); color:var(--ink-3); }
.calgrid:not(.cwk) .cc.today .dn { display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; background:var(--blue-500); color:#fff; }
/* The week is a floating WHITE sheet — airy, near-borderless, flat pastel
   blocks. Deliberately lighter than the app's blue canvas: this page mirrors
   the schedule apps students already know, in clutchh's own build. */
.calgrid.cwk { background:var(--surface); border:none; box-shadow:var(--shadow-card);
  border-radius:18px; padding:14px 16px 18px; gap:0 0;
  overflow-y:auto; }   /* a short window scrolls INSIDE the sheet — nothing spills onto the canvas */
.cwk .cd.cwk-d { font:600 11.5px/1 var(--font-ui); letter-spacing:0; text-transform:none;
  color:var(--ink-3); text-align:center; align-self:center; padding:6px 0 10px; }
.cwk .cd.cwk-d.today { color:var(--blue-600); }
.cwk .cc.cwk-ad { background:transparent; border:none; box-shadow:none; border-radius:0;
  padding:2px 4px 6px; }
.cwk .cc.cwk-ad.today { border:none; }
.cwk .cwk-col { border-left:1px solid rgba(var(--ink-rgb),.045); }
.cwk .cwk-line { background:rgba(var(--ink-rgb),.045); }
.cwk .cwk-h { font:500 10.5px/1 var(--font-ui); color:rgba(var(--ink-rgb),.38); }
.calchip.banner { justify-content:center; border:none; color:rgba(20,22,29,.82);
  font-weight:600; }
.calchip.banner .t { flex:none; }
.cwk { position:relative; }
.cwk-adlbl { font:500 10px/1 var(--font-mono); color:var(--ink-3); text-transform:uppercase;
  letter-spacing:.06em; align-self:center; justify-self:center; }
.cc.cwk-ad { min-height:34px; padding-right:24px; }   /* chips never sit under the + */
.cc.cwk-ad .cc-add { top:50%; transform:translateY(-50%); opacity:.55; }
.cc.cwk-ad .cc-add:hover { opacity:1; }
.cc.cwk-ad .calchip .chip-x { opacity:.55; font-size:10px; }   /* remove is visible, not a secret */
.cc.cwk-ad .calchip:hover .chip-x { opacity:1; }
.cwk-hours { position:relative; }
.cwk-h { position:absolute; right:8px; transform:translateY(-6px);
  font:500 10px/1 var(--font-mono); color:var(--ink-3); white-space:nowrap; }
.cwk-col { position:relative; border-left:1px solid rgba(var(--ink-rgb),.06); }
.cwk-line { position:absolute; left:0; right:0; height:1px; background:rgba(var(--ink-rgb),.05); }
/* left/width are set per block so two classes on the same hour sit side by side;
   `right` would fight that, so the default width covers the column instead. */
.cwk-block { position:absolute; left:3px; width:calc(100% - 6px); border-radius:12px; padding:7px 10px;
  overflow:hidden; cursor:pointer; color:rgba(20,22,29,.88);
  transition:filter .15s var(--ease); }
.cwk-block:hover { filter:brightness(.96); }
.cwk-block b { display:block; font:700 12px/1.3 var(--font-ui); }
.cwk-block span { display:block; font:500 10.5px/1.35 var(--font-ui); opacity:.7;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cwk-empty { position:absolute; left:0; right:0; bottom:14px; text-align:center;
  font:400 13px/1.5 var(--font-ui); color:var(--ink-3); pointer-events:none; }
.calmeet { font:600 9.5px/1.5 var(--font-ui); color:rgba(20,22,29,.78); border-radius:6px;
  padding:2px 6px; margin-top:3px; cursor:pointer; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
/* An online class's weekly drop ("new lectures post Tuesdays 7pm") — an outline,
   never a filled block, because there is no class to be in. */
.calmeet.post { background:transparent; border:1px dashed; color:var(--ink-25);
  font-weight:500; }
.cwk-post { position:absolute; left:2px; right:2px; z-index:2; height:0; }
.cwk-post::before { content:''; position:absolute; left:0; right:0; top:0;
  border-top:1.5px dashed var(--pc, var(--ink-4)); opacity:.9; }
.cwk-post i { position:absolute; left:-3px; top:-3px; width:6px; height:6px;
  border-radius:50%; background:var(--pc, var(--ink-3)); }
.cwk-post span { position:absolute; left:6px; top:-14px; font:600 9.5px/1 var(--font-ui);
  color:var(--ink-25); background:var(--surface); padding:2px 5px; border-radius:4px;
  white-space:nowrap; max-width:calc(100% - 10px); overflow:hidden; text-overflow:ellipsis; }
/* "clutchh couldn't find when these meet" — a count on the Class times button, so
   the ask is always in reach and never covers the day it is asking about. */
.ct-missing { display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; margin-left:6px; padding:0 4px; border-radius:99px;
  background:var(--butter-100); color:var(--butter-ink); font:700 10px/1 var(--font-mono);
  font-style:normal; vertical-align:1px; }
.ctm-note { font:400 11.5px/1.5 var(--font-ui); color:var(--ink-3); margin:-2px 0 6px 13px; }
.ctm-q { font:600 11px/1.5 var(--font-mono); color:var(--blue-500); cursor:help;
  text-decoration:underline dotted; }
.cdot2 { display:inline-block; width:7px; height:7px; border-radius:50%; flex:none;
  margin-right:4px; vertical-align:1px; }
/* class-times editor — a white sheet, not the dark subscribe card (whose
   descendant p rules would wash every course name out to cream-on-white) */
.submodal.ctm { width:660px; background:var(--surface); color:var(--ink-1);
  max-height:80vh; overflow-y:auto; }
.submodal.ctm p { color:var(--ink-1); }
.submodal.ctm .tt { font:800 18px/1.3 var(--font-ui); color:var(--ink-1); }
.submodal.ctm .tm { color:var(--ink-25); font-size:13px; line-height:1.5; }
.submodal.ctm .ctm-cn { color:var(--ink-1); }
.ctm-course { padding:16px 2px 14px; border-top:1px solid rgba(var(--ink-rgb),.07); }
.ctm-course:first-child { border-top:none; }
.ctm-course.focus { background:rgba(47,107,255,.05); border-radius:12px; padding:16px 12px 14px; border-top:none; }
.ctm-cn { display:flex; align-items:center; gap:9px; font:700 14px/1.3 var(--font-ui); margin-bottom:10px; }
.ctm-cn .cdot2 { width:13px; height:13px; border-radius:4px; margin-right:2px; }
.ctm-add { margin-left:auto; font:600 11.5px/1 var(--font-ui); border:none;
  background:rgba(47,107,255,.1); color:var(--blue-600); border-radius:var(--r-pill);
  padding:7px 13px; cursor:pointer; }
.ctm-add:hover { background:rgba(47,107,255,.18); }
.ctm-row { display:flex; align-items:center; gap:9px; padding:5px 0; flex-wrap:wrap; }
.ctm-days { display:inline-flex; gap:4px; }
.ctm-day { width:27px; height:27px; border-radius:50%; border:none;
  background:rgba(var(--ink-rgb),.07); color:var(--ink-2); font:600 10px/1 var(--font-ui); cursor:pointer;
  transition:background .12s var(--ease); }
.ctm-day:hover { background:rgba(var(--ink-rgb),.14); }
.ctm-day.on { background:var(--blue-500); color:#fff; }
.ctm-t { font:500 12.5px/1 var(--font-ui); border:1px solid rgba(var(--ink-rgb),.14);
  border-radius:var(--r-pill); padding:6px 9px; background:var(--surface); color:var(--ink-1); }
.ctm-dash { color:var(--ink-3); }
.ctm-loc { flex:1; min-width:110px; font:400 12.5px/1 var(--font-ui); border:1px solid rgba(var(--ink-rgb),.14);
  border-radius:var(--r-pill); padding:7px 11px; background:var(--surface); color:var(--ink-1); }
.ctm-x { border:none; background:transparent; color:var(--ink-4); cursor:pointer; font-size:11px;
  width:22px; height:22px; border-radius:50%; }
.ctm-x:hover { color:var(--red-ink,#a4321f); background:var(--red-100,#fbe4e1); }
.ctm-foot { display:flex; justify-content:flex-end; margin-top:16px; position:sticky; bottom:0;
  padding-top:8px; background:linear-gradient(transparent, var(--surface) 40%); }
/* week chrome: two-line headers, today wash + underline, now line, chevrons */
.cwk .cd.cwk-d { display:flex; flex-direction:column; gap:2px; line-height:1.2; }
.cwk .cd.cwk-d span { font:500 11px/1 var(--font-ui); color:var(--ink-3); }
.cwk .cd.cwk-d b { font:700 12.5px/1 var(--font-ui); color:var(--ink-2); }
.cwk .cd.cwk-d.today span, .cwk .cd.cwk-d.today b { color:var(--blue-600); }
.cwk .cd.cwk-d.today { position:relative; }
.cwk .cd.cwk-d.today::after { content:''; position:absolute; left:18%; right:18%; bottom:2px;
  height:3px; border-radius:3px; background:var(--blue-500); }
.cwk-col.today { background:rgba(47,107,255,.05); }
.cwk-now { position:absolute; left:0; right:0; z-index:3; pointer-events:none; }
.cwk-now i { position:absolute; left:-3px; top:-3px; width:7px; height:7px; border-radius:50%;
  background:#e2483d; }
.cwk-now::before { content:''; position:absolute; left:0; right:0; top:0; height:1.5px; background:#e2483d; opacity:.75; }
.cwk-now span { position:absolute; right:4px; top:-8px; background:#e2483d; color:#fff;
  font:700 9px/1 var(--font-ui); padding:3px 7px; border-radius:4px; }

.calmain { position:relative; }
/* the slide-in add panel (their New Event pattern, clutchh skin) */
.calpanel { position:absolute; left:0; top:0; bottom:0; width:300px; z-index:20;
  overflow-wrap:anywhere;
  background:var(--surface); border-radius:18px; box-shadow:var(--shadow-overlay);
  padding:18px 18px 16px; display:flex; flex-direction:column; gap:9px; overflow-y:auto; }
.calpanel.right { left:auto; right:0; }
.cwk-col.today.flash { animation:cwkFlash 1.1s ease; }
@keyframes cwkFlash { 0%,55% { background:rgba(47,107,255,.16); } 100% { background:rgba(47,107,255,.05); } }
.calpanel-x { position:absolute; right:12px; top:12px; color:var(--ink-3); cursor:pointer;
  font-size:13px; padding:4px 6px; border-radius:6px; }
.calpanel-x:hover { background:var(--surface-hover); color:var(--ink-1); }
.cp-head { display:flex; align-items:center; gap:9px; font:800 17px/1.2 var(--font-ui); color:var(--ink-1); }
.cp-sq { width:16px; height:16px; border-radius:5px; flex:none; }
.cp-l { font:650 13px/1.3 var(--font-ui); letter-spacing:0; text-transform:none;
  color:var(--ink-1); margin-top:6px; }
.cp-sub { font:400 10.5px/1.3 var(--font-ui); text-transform:none; letter-spacing:0; color:var(--ink-3); font-style:normal; }
.cp-customize { font:500 11.5px/1.5 var(--font-ui); color:var(--blue-600); font-style:normal; cursor:pointer; }
.cp-customize:hover { text-decoration:underline; }
.cp-remrow { display:flex; align-items:center; gap:6px; padding:3px 0; flex-wrap:nowrap; }
.cp-remlbl { flex:none; font:500 11px/1 var(--font-ui); color:var(--ink-2);
  border:1px solid rgba(var(--ink-rgb),.14); border-radius:8px; padding:7px 7px; }
.cp-remrow input { flex:none; width:44px; font:500 12px/1 var(--font-ui); border:1px solid rgba(var(--ink-rgb),.14);
  border-radius:8px; padding:6px 5px; background:var(--surface); color:var(--ink-1); }
.cp-remrow select { flex:1; min-width:0; font:500 11.5px/1 var(--font-ui); border:1px solid rgba(var(--ink-rgb),.14);
  border-radius:8px; padding:6px 3px; background:var(--surface); color:var(--ink-1); }
.cp-remrow .cp-remx { flex:none; }
.cp-rems { overflow:hidden; }
.cp-remx { color:var(--ink-4); cursor:pointer; font-size:11px; padding:3px 5px; border-radius:6px; }
.cp-remx:hover { color:var(--red-ink,#a4321f); background:var(--red-100,#fbe4e1); }
/* Reminder rows reused inside Settings — the wide panel would stretch the
   unit select across the card; keep it reading like a sentence. */
.stg-panel .cp-remrow select { flex:none; width:110px; }
.stg-panel .cp-remrow { max-width:340px; }
.cp-remadd { display:inline-block; font:500 12px/1.6 var(--font-ui); color:var(--blue-600); cursor:pointer; }
.cp-remadd:hover { text-decoration:underline; }
.cp-due { display:flex; align-items:center; justify-content:space-between; cursor:pointer; text-align:left; }
.cp-due .cp-cal { color:var(--ink-3); }
.mn-h { display:block; font:400 10.5px/1.3 var(--font-ui); color:var(--ink-3); }
.calacts { display:flex; align-items:center; gap:7px; }
.calact { font:650 12px/1 var(--font-ui); color:var(--blue-600); background:rgba(47,107,255,.1);
  border-radius:var(--r-pill); padding:9px 14px; cursor:pointer; white-space:nowrap;
  transition:background .15s var(--ease); }
.calact:hover { background:rgba(47,107,255,.18); }
.calact.primary { color:#fff; background:var(--grad-primary); box-shadow:var(--shadow-primary-btn); }
.calact.primary:hover { filter:brightness(1.06); }
.calact svg { vertical-align:-2px; margin-right:3px; }
.calact.ghost { background:var(--surface); color:var(--ink-1);
  box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.14); }
.calact.ghost:hover { background:var(--surface-hover); }
.tf-menu { background:var(--surface); border-radius:12px; box-shadow:var(--shadow-overlay);
  padding:6px; width:185px; z-index:1600; display:flex; flex-direction:column;
  animation:popIn var(--dur-pop,.16s) var(--ease) both; }
.calright { display:flex; flex-direction:column; gap:10px; min-height:0; }
.calright-acts { display:flex; gap:8px; }
.calright-acts .calact { flex:none; padding:10px 16px; }

.tf-opt { display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:8px;
  font:550 12.5px/1 var(--font-ui); color:var(--ink-1); cursor:pointer; }
.tf-opt:hover { background:var(--surface-hover); }
.tf-opt.on { background:rgba(47,107,255,.07); }
.tf-opt .tf-check { margin-left:auto; color:var(--blue-600); font-weight:700; }
.tf-menu .tf-sq { display:inline-block; width:12px; height:12px; border-radius:4px; flex:none; }
.todo-filter { display:flex; align-items:center; gap:8px; cursor:pointer; flex:1; min-width:0;
  margin:0 2px 0 10px;
  border:none; border-radius:12px; padding:10px 12px; background:var(--blue-100);
  font:700 14px/1 var(--font-ui); color:var(--blue-600); position:relative;
  box-shadow:inset 0 0 0 1.5px rgba(47,107,255,.25);
  transition:background .15s var(--ease), box-shadow .15s var(--ease); }
.todo-filter:hover { background:rgba(47,107,255,.22); box-shadow:inset 0 0 0 1.5px rgba(47,107,255,.45); }
.todo-filter .tf-sq { width:15px; height:15px; border-radius:5px; flex:none; }
.todo-filter .tf-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.todo-filter .tf-car { margin-left:auto; color:var(--blue-600); font-size:12px; }
.exportmenu .tf-sq { display:inline-block; width:11px; height:11px; border-radius:3.5px; margin-right:4px; vertical-align:-1px; }
.ctm-until { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:6px;
  padding:10px 12px; background:rgba(47,107,255,.05); border-radius:10px;
  font:600 12.5px/1.3 var(--font-ui); color:var(--ink-1); }
.ctm-until input { font:500 12.5px/1 var(--font-ui); border:1px solid rgba(var(--ink-rgb),.14);
  border-radius:8px; padding:6px 8px; background:var(--surface); color:var(--ink-1); }
.ctm-untilhint { font:400 10.5px/1.3 var(--font-ui); color:var(--ink-3); flex-basis:100%; }
.cp-in { font:400 13.5px/1.3 var(--font-ui); border:1px solid rgba(var(--ink-rgb),.16);
  border-radius:9px; padding:8px 10px; background:var(--surface); color:var(--ink-1); width:100%; }
.cp-in:focus { outline:none; box-shadow:var(--focus-ring); }
.cp-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cp-pill { font:500 12.5px/1 var(--font-ui); border:1px solid rgba(var(--ink-rgb),.16);
  border-radius:var(--r-pill); padding:7px 12px; background:var(--surface); color:var(--ink-1);
  /* fixed width: WebKit's focused time control grows a stepper, and the row
     reflow made the Add button visibly jump — nothing may resize this pill */
  width:112px; min-width:112px; text-align:center; box-sizing:border-box; }
.cp-row { flex-wrap:nowrap; }
.cp-time { cursor:pointer; }
.cp-time.dis { opacity:.45; pointer-events:none; }
.tp-card { display:flex; align-items:center; gap:6px; background:var(--surface); border-radius:12px;
  box-shadow:var(--shadow-overlay); padding:10px 12px; width:210px; z-index:1600;
  animation:popIn var(--dur-pop,.16s) var(--ease) both; }
.tp-card select { font:600 14px/1 var(--font-ui); border:1px solid rgba(var(--ink-rgb),.14);
  border-radius:9px; padding:7px 6px; background:var(--surface); color:var(--ink-1); }
.tp-c { font:700 14px/1 var(--font-ui); color:var(--ink-3); }
.tp-ap { display:inline-flex; background:rgba(var(--ink-rgb),.07); border-radius:9px; padding:2px; margin-left:2px; }
.tp-ap button { border:none; background:transparent; cursor:pointer; font:700 10.5px/1 var(--font-ui);
  color:var(--ink-3); padding:6px 8px; border-radius:7px; }
.tp-ap button.on { background:var(--blue-500); color:#fff; }
.cp-pill.sel { max-width:170px; }
.cp-freq { font:500 12px/1 var(--font-ui); border:1px solid rgba(var(--ink-rgb),.16);
  border-radius:var(--r-pill); padding:8px 13px; background:var(--surface); color:var(--ink-1); cursor:pointer; }
.cp-freq:hover { background:var(--surface-hover); }
.cp-go { margin-top:8px; border:none; cursor:pointer; height:44px; border-radius:var(--r-pill);
  background:var(--grad-primary); color:#fff; font:700 13.5px/1 var(--font-ui);
  box-shadow:var(--shadow-primary-btn); }
/* Deleting the entry you are looking at: present, never competing with Save. */
.cp-del { margin-top:8px; border:1px solid var(--border-strong); background:transparent; cursor:pointer;
  height:40px; border-radius:var(--r-pill); color:var(--red-ink); font:600 12.5px/1 var(--font-ui);
  transition:background 120ms var(--ease), border-color 120ms var(--ease); }
.cp-del:hover { background:var(--red-100); border-color:var(--red-ink); }
.cp-mini { padding:6px 0 2px; }
.mm-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.mm-head b { font:800 14.5px/1 var(--font-ui); }
.mm-head b i { font-style:normal; font-weight:500; color:var(--ink-2); }
.mm-nav { color:var(--blue-500); cursor:pointer; padding:2px 9px; border-radius:6px; font-size:16px; }
.mm-nav:hover { background:var(--surface-hover); }
.mm-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px 1px; text-align:center; }
.mm-dow { font:600 10px/1.8 var(--font-ui); color:var(--ink-3); }
.mm-day { font:500 12px/2.1 var(--font-ui); color:var(--ink-1); border-radius:50%;
  cursor:pointer; width:26px; height:26px; margin:0 auto; }
.mm-day.mut { color:var(--ink-4); cursor:default; }
.mm-day:not(.mut):hover { background:var(--surface-hover); }
.mm-day.on { background:var(--blue-500); color:#fff; }
/* Coursicle-style event/task forms (white sheet modal) */
.cmod .cm-grid { display:grid; grid-template-columns:86px 1fr; gap:10px 12px; align-items:center; margin-top:12px; }
.cm-l { font:500 11px/1 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }
.cm-in { font:400 13.5px/1.3 var(--font-ui); border:1px solid rgba(var(--ink-rgb),.16);
  border-radius:9px; padding:8px 10px; background:var(--surface); color:var(--ink-1); width:100%; }
.cm-in:focus { outline:none; box-shadow:var(--focus-ring); }
.cm-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cm-row .cm-in { width:auto; }
.cm-dash { color:var(--ink-3); }
.cm-check { display:inline-flex; align-items:center; gap:6px; font:400 13px/1.3 var(--font-ui);
  color:var(--ink-2); cursor:pointer; }
.cm-check input { accent-color:var(--blue-500); }
.cm-swatches { display:flex; gap:6px; flex-wrap:wrap; }
.cm-sw { position:relative; width:26px; height:26px; border-radius:8px; border:none; cursor:pointer; }
.cm-sw.on::after { content:'✓'; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font:800 12px/1 var(--font-ui); color:rgba(20,22,29,.75); }
/* event block delete confirm */
.em-nodraft { font:500 11.5px/1.4 var(--font-ui); color:var(--ink-3); font-style:italic; }
.cwk-pop { background:var(--surface); border-radius:12px; box-shadow:var(--shadow-overlay);
  padding:12px 14px; width:230px; z-index:1600; overflow:hidden;
  overflow-wrap:anywhere; }        /* an unbroken "teststest…" note must WRAP, never spill */
.cwk-pop .cp-t { font:700 13.5px/1.3 var(--font-ui); color:var(--ink-1); }
.cwk-pop .cp-m { font:500 11px/1.4 var(--font-mono); color:var(--ink-3); margin-top:2px; }
.cwk-pop .cp-note { font:400 12px/1.5 var(--font-ui); color:var(--ink-2); margin-top:6px;
  max-height:72px; overflow-y:auto; overflow-wrap:anywhere; }
.cwk-pop .cp-btns { display:flex; gap:8px; margin-top:10px; }
.cwk-pop .cp-del { border:none; border-radius:var(--r-pill); padding:8px 14px; cursor:pointer;
  background:var(--red-100); color:var(--red-ink); font:600 12px/1 var(--font-ui); }
.cwk-pop .cp-cancel { border:1px solid rgba(var(--ink-rgb),.18); border-radius:var(--r-pill);
  padding:8px 14px; cursor:pointer; background:transparent; color:var(--ink-2); font:500 12px/1 var(--font-ui); }
.cwk-block.ev { }   /* events and classes share one flat treatment — color tells them apart */
/* Coursicle task rail bits */
.todo-addlink { margin-left:auto; font:500 11px/1 var(--font-mono); color:var(--blue-600);
  cursor:pointer; padding:4px 6px; border-radius:6px; }
.todo-addlink:hover { background:var(--surface-hover); }
.todo-title { font:800 15px/1 var(--font-ui); letter-spacing:-.01em; color:var(--ink-1); }
.todo-filter { font:500 11px/1 var(--font-ui); color:var(--ink-2); border:1px solid rgba(var(--ink-rgb),.16);
  border-radius:var(--r-pill); padding:5px 8px; background:var(--surface); margin-left:auto;
  max-width:110px; cursor:pointer; appearance:auto; }
.todo-sect { font:600 10.5px/1 var(--font-mono); letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); margin:8px 0 0; padding-bottom:4px; border-bottom:1px solid rgba(var(--ink-rgb),.07); }
.todoitem .tm.urgent { color:var(--red-ink,#c0392b); font-weight:600; }
.todo-chip { display:inline-block; font:600 9.5px/1 var(--font-mono); letter-spacing:.02em;
  color:rgba(20,22,29,.8); border-radius:6px; padding:3px 6px; margin-bottom:3px; }
/* floating card listing everything on one day */
.caldaypop { position:fixed; z-index:80; width:250px; background:var(--surface);
  border:1px solid var(--border-strong); border-radius:14px;
  box-shadow:var(--shadow-raised); padding:13px 13px 10px; }
.caldaypop .cdp-h { font:700 13.5px/1.2 var(--font-ui); margin-bottom:8px; }
.cdp-empty { font:400 11.5px/1.4 var(--font-ui); color:var(--ink-4); padding:2px 0 4px; }
.cdp-add { margin-top:8px; font:600 11px/1.3 var(--font-ui); color:var(--ink-4); cursor:pointer;
  padding:6px 7px; border-radius:8px; }
.cdp-add:hover { color:var(--blue-600); background:var(--surface-hover); }
.cadd-input { display:block; width:100%; margin-top:8px; font:400 12px/1.3 var(--font-ui);
  color:var(--ink-1); background:var(--surface-2); border:1.5px solid var(--blue-outline);
  border-radius:9px; padding:7px 10px; outline:none; }
.cadd-input:focus { border-color:var(--blue-500); }
.cdp-x { flex:none; margin-left:auto; font-size:9px; opacity:.5; cursor:pointer; padding:1px 3px; }
.cdp-x:hover { opacity:1; color:var(--red-ink); }
.caldaypop .calchip { margin-top:5px; }
.calchip { display:flex; align-items:center; gap:5px; font:500 10px/1.25 var(--font-ui);
  padding:4px 7px; border-radius:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; }
.calchip .ck2 { flex:none; width:11px; height:11px; border-radius:50%; border:1.5px solid currentColor; opacity:.55; cursor:pointer; }
.calchip .ck2:hover { opacity:1; }
/* done = struck through, like the current app */
.calchip.done .t { text-decoration:line-through; opacity:.55; }
.calchip.done .ck2 { background:currentColor; opacity:.5; }
.calchip span.t { overflow:hidden; text-overflow:ellipsis; }
.st-review { background:var(--butter-100); color:var(--butter-ink); }
.st-done { background:var(--green-100); color:var(--green-ink); }
.st-queued { background:rgba(var(--ink-rgb),.06); color:var(--ink-3); }
.st-blocked { background:var(--red-100); color:var(--red-ink); }
/* Exams are solid red on the calendar — a date to show up for, unmissable at a glance. */
.calchip.st-exam { background:var(--red-500); color:#fff; font-weight:600; }
html[data-theme="dark"] .calchip.st-exam { color:#3b1613; }
.todo { flex:none; width:250px; background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:14px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; box-shadow:var(--shadow-card); }
/* the slide wrapper owns open/closed: its WIDTH animates to 0 while the card
   inside stays 250px — it glides off, clipped, and the grid widens smoothly */
.todo-slide { flex:none; min-height:0; display:flex; width:250px; opacity:1; overflow:hidden;
  transition:width .3s cubic-bezier(0.4,0,0.2,1), opacity .3s cubic-bezier(0.4,0,0.2,1),
             margin-right .3s cubic-bezier(0.4,0,0.2,1); }
/* closed also swallows the calmain gap, so the grid reaches the true edge
   and the toolbar's reopen button never overhangs the calendar */
.todo-slide.closed { width:0; opacity:0; margin-right:-12px; }
.todo-slide .todo { width:250px; }
.todo-reopen { display:none; align-items:center; gap:6px;
  border:none; background:var(--surface); color:var(--ink-2); border-radius:var(--r-pill);
  padding:8px 11px; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.14); }
.todo-reopen.show { display:inline-flex; }
.todo-reopen:hover { background:var(--surface-hover); color:var(--ink-1); }
.todoitem { display:flex; gap:9px; padding:8px 9px; border-radius:11px; cursor:pointer;
  overflow-wrap:anywhere;
  position:relative; transition:background .15s var(--ease), transform .28s var(--ease), opacity .28s var(--ease); }
.todoitem .tdel { position:absolute; right:7px; top:7px; font-size:10px; color:var(--ink-4);
  opacity:0; cursor:pointer; padding:2px 4px; border-radius:6px; }
.todoitem:hover .tdel { opacity:1; }
.todoitem .tdel:hover { color:var(--red-ink); background:var(--red-100); }
.todoitem:hover { background:var(--surface-hover); }
/* cross-off: slide right + fade, then the height folds so rows beneath slide up */
.todoitem.bye { transform:translateX(64px); opacity:0; }
.todoitem .tick { flex:none; width:17px; height:17px; border-radius:50%; border:1.5px solid var(--border-strong);
  color:transparent; font-size:9px; display:flex; align-items:center; justify-content:center; margin-top:1px;
  transition:background .2s, border-color .2s, color .2s; }
.todoitem:hover .tick { border-color:var(--green-ink); color:var(--green-ink); }
.todoitem.done .tick { background:var(--green-ink); border-color:var(--green-ink); color:#fff; }
.todoitem.done .tt { text-decoration:line-through; opacity:.5; }
.todoitem .tt { font:600 12.5px/1.35 var(--font-ui); color:var(--ink-1); }
.todoitem .tm { font:400 10px/1.4 var(--font-mono); color:var(--ink-4); margin-top:2px; }
.miniweekly { display:inline-flex; align-items:center; gap:5px; font:500 12px/1 var(--font-ui);
  color:var(--ink-2); white-space:nowrap; cursor:pointer; }
.miniweekly input { accent-color:var(--blue-500); }
.todo-add { border:none; background:transparent; color:var(--ink-3); text-align:left;
  padding:9px; font:600 12px/1 var(--font-ui); cursor:pointer; border-radius:9px; }
.todo-datechip { margin-top:6px; border:1px solid var(--blue-outline); background:var(--surface);
  color:var(--blue-600); font:600 10px/1 var(--font-mono); padding:6px 10px; border-radius:var(--r-pill);
  cursor:pointer; }
.todo-datechip:hover { border-color:var(--blue-500); }
.todo-add:hover { color:var(--blue-600); background:var(--surface-hover); }

/* ---------- notes (structure unchanged, colors from tokens) ---------- */
.noteswrap { flex:1; display:flex; flex-direction:column; padding:18px 22px 84px; min-height:0; }
.nt-top { flex:none; display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.nt-h { font:800 24px/1 var(--font-ui); letter-spacing:-.02em; flex:1; }
.nt-grid { flex:1; display:grid; grid-template-columns:270px 1fr; grid-template-rows:auto 1fr;
  column-gap:14px; row-gap:0; min-height:0; }
.nt-rail-h { grid-column:1; font:500 10.5px/1.3 var(--font-mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin:0 2px 7px; }
.nt-grid > .nt-rail { grid-column:1; grid-row:2; }
.nt-grid > .nt-main { grid-column:2; grid-row:2; }
/* the rail speaks the workspace-sidebar bubble language: filled class bubbles,
   notes beneath, selected note = white bubble + blue outline. No stretching card. */
.nt-rail { overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.nt-course { background:none; }
.nt-course + .nt-course { margin-top:4px; }
.nt-crow { display:flex; align-items:center; gap:8px; padding:11px 13px; cursor:pointer;
  background:var(--bubble); border-radius:12px; }
.nt-crow:hover { background:var(--blue-100); }
/* The fold arrow and the note count sat at --ink-4 on the blue class row:
   1.3:1 against it, where readable text needs 4.5:1. Not subtle — invisible.
   --ink-2 measures 5.6:1 there; the count stays secondary by being smaller
   and mono rather than by being unreadable. */
.nt-chev { font-size:11px; color:var(--ink-2); }
.nt-cname { flex:1; font:700 12.5px/1.3 var(--font-ui); color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nt-count { font:500 10px/1 var(--font-mono); color:var(--ink-2); opacity:.85; }
/* ===== editing a study set ===== */
/* Edit reads as an action, not another tab: the brand outline separates it from
   the plain header buttons beside it without shouting like a primary action. */
.nt-btn.nt-edit { border-color:var(--blue-outline); color:var(--blue-600); font-weight:600; }
.nt-btn.nt-edit:hover { background:var(--blue-100); border-color:var(--blue-500); }

.se-wrap { display:flex; flex-direction:column; gap:14px; padding:4px 2px 24px; }
.se-head { display:flex; align-items:center; gap:10px; }
.se-head b { font:700 15px/1 var(--font-ui); color:var(--ink-1); }
.se-hint { font:500 11px/1 var(--font-mono); color:var(--ink-3); }
.se-head .sp { flex:1; }
.se-list { display:flex; flex-direction:column; gap:10px; }
.se-row { display:flex; align-items:flex-start; gap:10px; background:var(--surface);
  border:1px solid var(--border-on-white); border-radius:var(--r-card);
  box-shadow:var(--shadow-card); padding:12px 12px 12px 10px; }
.se-n { flex:none; width:22px; text-align:center; font:600 11px/1.9 var(--font-mono); color:var(--ink-3); }
.se-pair { flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
.se-in { width:100%; resize:vertical; border:1.5px solid var(--border-strong);
  border-radius:var(--r-md); padding:9px 11px; background:var(--surface);
  font:500 14px/1.5 var(--font-ui); color:var(--ink-1); min-height:42px; }
.se-in:focus { outline:none; border-color:var(--blue-500); }
.se-front, .se-title, .se-q { font-weight:600; }
.se-back, .se-bullets, .se-why { color:var(--ink-2); }
/* Add / Cancel / Save ride at the top of the pane and stay there: on a long deck
   they used to sit below the last card, so adding one meant scrolling the whole
   deck to reach the button and scrolling back to read what you added. */
.se-top { position:sticky; top:0; z-index:2; display:flex; flex-direction:column; gap:10px;
  background:var(--surface); padding:4px 0 10px; border-bottom:1px solid var(--line-soft); }
/* A summary or a guide edits in place, so it gets the note editor's own surface —
   no box, no raw markdown, just a saved-state whisper in the corner. */
.st-doc { display:flex; flex-direction:column; }
.st-saved { align-self:flex-end; min-height:13px; color:var(--ink-3); padding:0 10px 2px; }
.st-saved.bad { color:var(--red-ink); }
.st-ed { padding:0 2px 24px; }
.se-add { align-self:flex-start; border:1.5px dashed var(--border-strong); background:transparent;
  color:var(--ink-2); cursor:pointer; border-radius:var(--r-pill); padding:9px 18px;
  font:600 12.5px/1 var(--font-ui);
  transition:border-color 120ms var(--ease), color 120ms var(--ease); }
.se-add:hover { border-color:var(--blue-500); color:var(--blue-600); }
.se-del { flex:none; border:none; background:transparent; cursor:pointer; color:var(--ink-4);
  width:26px; height:26px; border-radius:8px; font-size:13px; }
.se-del:hover { background:var(--red-100); color:var(--red-ink); }

.nt-note { padding:8px 12px; margin-top:4px; cursor:pointer; border:1.5px solid transparent; border-radius:12px; }
.nt-note:hover { background:var(--surface-hover); }
.nt-note.on { background:var(--surface); border-color:var(--blue-500); box-shadow:var(--shadow-card); }
.nt-nt { font:600 12.5px/1.3 var(--font-ui); color:var(--ink-1); }
/* reader-head buttons — icon + word, outlined so they read as buttons */
.nt-icbtn { flex:none; height:30px; border:1px solid var(--border-strong); background:var(--surface);
  border-radius:9px; color:var(--ink-2); display:flex; align-items:center; justify-content:center; gap:5px;
  padding:0 11px; font:600 11px/1 var(--font-ui); cursor:pointer; }
.nt-icbtn:hover { border-color:var(--blue-500); color:var(--ink-1); }
.nt-icbtn.danger { color:var(--red-ink); border-color:rgba(224,96,58,.35); }
.nt-icbtn.danger:hover { background:var(--red-100); border-color:var(--red-ink); }
.ntmenu { left:auto; right:0; min-width:200px; }
.nt-np { font:400 10.5px/1.4 var(--font-ui); color:var(--ink-4); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nt-main { background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow-card); }
.nt-head { flex:none; display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid var(--line-soft); }
.nt-title { flex:1; border:none; outline:none; background:transparent; font:700 17px/1.2 var(--font-ui); color:var(--ink-1); min-width:0; }
.nt-btn { flex:none; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-2);
  font:600 11.5px/1 var(--font-ui); padding:7px 13px; border-radius:10px; cursor:pointer; }
.nt-btn:hover { border-color:var(--blue-500); color:var(--ink-1); }
.nt-btn.danger { color:var(--red-ink); border-color:rgba(224,96,58,.35); }
/* the filled variant, same ink fill every other .dark button in the app uses
   (and the same gradient swap in dark mode — see the override block below) */
.nt-btn.dark { background:var(--ink-1); color:var(--paper); border-color:transparent; }
.nt-btn.dark:hover { background:var(--blue-500); color:#fff; border-color:transparent; }
.nt-btn.dark:disabled { opacity:.45; cursor:default; }
.nt-saved { font:500 9.5px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--green-ink); }
.nt-saved.bad { color:var(--red-ink); }
.nt-body { flex:1; overflow-y:auto; padding:20px 26px; font:400 14px/1.7 var(--font-ui); color:var(--ink-2); }
.nt-body h2 { font:700 15px/1.3 var(--font-ui); color:var(--ink-1); margin:16px 0 7px; }
.nt-body li { margin:4px 0 4px 20px; }
.nt-body .ts { font:500 10px/1 var(--font-mono); color:var(--blue-500); }

/* ---------- notification bell (header) + its dropdown ---------- */
.chip.chip-icon { padding:6px 9px; position:relative; }   /* icon-only chip, holds the unread dot */
.chip.chip-icon svg { display:block; }
.bellpop { position:fixed; z-index:1700; width:360px; max-width:calc(100vw - 24px);
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-overlay); overflow:hidden; transform-origin:top right;
  animation:popIn var(--dur-pop,.16s) var(--ease) both; }
.bell-head { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); }
.bell-head .mono-label { flex:1; }
.bell-acts { display:flex; gap:4px; }
.bell-act { border:none; background:transparent; font:600 10px/1 var(--font-mono);
  letter-spacing:.04em; text-transform:uppercase; color:var(--blue-600); cursor:pointer; padding:5px 7px; border-radius:7px; }
.bell-act:hover { background:rgba(var(--ink-rgb),.06); }
.bell-act:disabled { color:var(--ink-4); cursor:default; background:transparent; }
.bell-list { max-height:min(70vh,520px); overflow-y:auto; padding:6px; }
.bell-day { padding:10px 8px 4px; }
.bell-row { position:relative; display:flex; align-items:flex-start; gap:11px; padding:10px 34px 10px 10px;
  border-radius:12px; transition:transform .28s var(--ease), opacity .28s var(--ease), background .15s; }
.bell-row.bye { transform:translateX(60px); opacity:0; }
.bell-row.act { cursor:pointer; }
.bell-row.act:hover { background:var(--surface-hover); }
.bell-ic { flex:none; width:34px; height:34px; border-radius:11px; display:flex; align-items:center;
  justify-content:center; font-size:15px; }
.bell-ic.good { background:var(--green-100); color:var(--green-ink); }
.bell-ic.blue { background:var(--blue-100); color:var(--blue-600); }
.bell-ic.butter, .bell-ic.warn { background:var(--butter-100); color:var(--butter-ink); }
.bell-ic.red { background:var(--red-100); color:var(--red-ink); }
.bell-ic.muted { background:var(--surface-well); color:var(--ink-2); }
.bell-body { flex:1; min-width:0; }
.bell-t { display:flex; align-items:center; gap:7px; font:650 13px/1.35 var(--font-ui); color:var(--ink-1); }
.bell-t .ndot { flex:none; width:7px; height:7px; border-radius:50%; background:var(--blue-500); }
.bell-s { font:400 11.5px/1.5 var(--font-ui); color:var(--ink-3); margin-top:2px; }
.bell-time { position:absolute; right:12px; bottom:9px; font:400 9px/1 var(--font-mono); color:var(--ink-4); }
.bell-x { position:absolute; right:7px; top:7px; width:20px; height:20px; border:none; border-radius:6px;
  background:transparent; color:var(--ink-4); font:600 11px/1 var(--font-ui); cursor:pointer; opacity:.45;
  transition:opacity .15s, background .15s; }
.bell-row:hover .bell-x { opacity:.85; }
.bell-x:hover { opacity:1; background:var(--red-100); color:var(--red-ink); }
.bell-empty { text-align:center; color:var(--ink-3); font:400 12.5px/1.5 var(--font-ui); padding:34px 16px; }

/* ---------- SETTINGS — the REAL app's §"Settings v3" styles, colors from tokens only ---------- */
.stgwrap { flex:1; overflow-y:auto; }
.stg { max-width:860px; margin:0 auto; padding:40px 12px 100px; font-family:var(--font-ui); }
.stg-head { text-align:center; margin-bottom:30px; }
.stg-chip { display:inline-flex; align-items:center; gap:10px; background:var(--surface);
  border:1px solid rgba(var(--ink-rgb),.1); border-radius:100px; padding:6px 15px 6px 6px; margin-bottom:18px; }
.stg-av { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#3d78ff,#1e4fd6);
  color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; }
.stg-em { font-family:var(--font-mono); font-size:11px; color:var(--ink-2); }
.stg-title { font-weight:800; font-size:44px; letter-spacing:-.035em; line-height:1; color:var(--ink-1); }
.stg-title .dot { color:var(--blue-500); }
.stg-sub { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.stg-tabs { position:relative; display:flex; gap:6px; background:rgba(var(--ink-rgb),.06); border-radius:100px; padding:6px; margin-bottom:28px; }
.stg-slider { position:absolute; top:6px; bottom:6px; left:0; width:0; border-radius:100px;
  background:var(--ink-1); box-shadow:0 4px 12px -4px rgba(0,0,0,.3); z-index:0; pointer-events:none;
  transition:left .34s cubic-bezier(.4,0,.2,1), width .34s cubic-bezier(.4,0,.2,1); }
.stg-tab { position:relative; z-index:1; flex:1; text-align:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  padding:11px 0; border-radius:100px; cursor:pointer; transition:color .25s ease; color:var(--ink-3); }
.stg-tab:hover:not(.on) { color:var(--ink-2); }
.stg-tab.on { color:var(--paper); }
.stg-panel > * + * { margin-top:16px; }
.stg-card { background:var(--surface); border:1px solid rgba(var(--ink-rgb),.1); border-radius:18px; overflow:hidden;
  box-shadow:0 18px 40px -32px rgba(0,0,0,.5); }
.stg-card.pad { padding:22px; }
.stg-row { display:flex; align-items:center; gap:16px; padding:17px 22px; border-bottom:1px solid rgba(var(--ink-rgb),.07); }
.stg-card > .stg-row:last-child { border-bottom:none; }
.stg-rl { flex:1; min-width:0; }
.stg-rt { font-weight:700; font-size:15px; color:var(--ink-1); }
.stg-rd { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); margin-top:3px; word-break:break-word; }
.stg-rd.good { color:var(--green-ink); } .stg-rd.bad { color:var(--red-ink); }
.stg-btn { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  border:1px solid rgba(var(--ink-rgb),.18); background:var(--surface-2); color:var(--ink-1); padding:8px 16px; border-radius:100px; cursor:pointer; transition:all .15s; }
.stg-btn:hover { border-color:var(--blue-500); }
.stg-btn.dark { background:var(--ink-1); color:var(--paper); border-color:transparent; }
.stg-btn.dark:hover { background:var(--blue-500); }
.stg-btn.blue { color:var(--blue-500); border-color:rgba(47,107,255,.4); }
.stg-btn.danger { color:var(--red-ink); border-color:rgba(224,96,58,.35); }
/* cleaner settings: quiet actions surface on row hover; identity header; token meter */
.stg-btn.quiet { background:var(--surface); border-color:rgba(var(--ink-rgb),.14); color:var(--ink-2); }
.stg-btn.quiet:hover { border-color:var(--blue-500); color:var(--ink-1); }
.stg-btn.danger.quiet { color:var(--red-ink); border-color:rgba(224,96,58,.3); }
/* connection tiles */
.conn-ic { flex:none; width:44px; height:44px; border-radius:13px; display:flex; align-items:center;
  justify-content:center; font:700 12px/1 var(--font-mono); }
.conn-status { display:inline-flex; align-items:center; gap:6px; font:600 9px/1 var(--font-mono);
  letter-spacing:.05em; text-transform:uppercase; padding:5px 10px; border-radius:100px; margin-top:5px; }
.conn-status.ok { background:var(--green-100); color:var(--green-ink); }
.conn-status.off { background:rgba(var(--ink-rgb),.07); color:var(--ink-3); }
.stg-id { display:flex; align-items:center; gap:16px; padding:18px 22px; }
.stg-sec { font:600 10px/1 var(--font-mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); margin:18px 4px 8px; }
.stg-panel > .stg-sec:first-child { margin-top:2px; }
.stg-avatar { flex:none; width:46px; height:46px; border-radius:50%; background:var(--grad-primary); color:#fff;
  font:700 15px/46px var(--font-ui); text-align:center; }
.stg-meter { margin-top:9px; height:7px; width:100%; max-width:340px; background:rgba(var(--ink-rgb),.08);
  border-radius:100px; overflow:hidden; }
.stg-meter span { display:block; height:100%; background:var(--grad-primary); border-radius:100px; }
.stg-status { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:10.5px; white-space:nowrap; padding:9px 14px; border-radius:100px; color:var(--ink-3); background:rgba(var(--ink-rgb),.06); }
.stg-status.ok { color:var(--green-ink); background:var(--green-100); }
.stg-status.ok i { width:7px; height:7px; border-radius:50%; background:var(--green-500); }
.stg-badge { width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex:none; }
.stg-select { font-family:var(--font-mono); font-size:11px; color:var(--ink-1); border:1px solid rgba(var(--ink-rgb),.18);
  background:var(--surface-2); padding:9px 12px; border-radius:12px; cursor:pointer; }
.stg-in { width:100%; font-family:var(--font-mono); font-size:12px; padding:11px 13px;
  border:1px solid rgba(var(--ink-rgb),.15); border-radius:12px; background:var(--surface-2); color:var(--ink-1); }
.stg-ta { width:100%; min-height:96px; resize:vertical; font-family:var(--font-mono); font-size:12px; line-height:1.7;
  padding:12px 13px; border:1px solid rgba(var(--ink-rgb),.15); border-radius:12px; background:var(--surface-2); color:var(--ink-1); }
.stg-lbl { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
.stg-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.stg-caret { flex:none; color:var(--ink-3); font-size:20px; font-weight:700; }
.stg-tour { display:flex; align-items:center; gap:16px; background:rgba(47,107,255,.05); border:1px dashed rgba(47,107,255,.35);
  border-radius:16px; padding:15px 22px; }
.stg-dark { position:relative; background:#15130f; color:#f4f1ea; border-radius:18px; padding:22px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; overflow:hidden; border:1px solid rgba(255,255,255,.06); }
.stg-dark .stg-rl { min-width:200px; }
.stg-dk-lbl { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:rgba(244,241,234,.5); }
.stg-dk-title { font-weight:700; font-size:18px; margin-top:5px; color:#f4f1ea; }
.stg-dk-sub { font-size:13px; color:rgba(244,241,234,.62); margin-top:4px; line-height:1.5; }
.stg-cta { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  text-transform:uppercase; white-space:nowrap; background:linear-gradient(135deg,#3d78ff,#1e4fd6); color:#fff; border:none;
  padding:12px 22px; border-radius:100px; cursor:pointer; box-shadow:0 10px 24px -8px rgba(47,107,255,.6); }
.stg-cta.dark { background:var(--ink-1); color:var(--paper); box-shadow:none; }
.stg-dk-btn { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  color:#f4f1ea; border:1px solid rgba(244,241,234,.25); background:transparent; padding:10px 18px; border-radius:100px; cursor:pointer; }
.stg-spark { position:absolute; right:-12px; bottom:-20px; font-size:96px; opacity:.1; pointer-events:none; }
.stg-shield { width:46px; height:46px; border-radius:14px; background:rgba(90,139,255,.16); color:#5a8bff; font-size:20px;
  display:flex; align-items:center; justify-content:center; flex:none; }
.ref-reqs { margin:6px 0 4px; padding-left:18px; }
.ref-reqs li { font-size:13.5px; line-height:1.7; color:var(--ink-2); }
.ref-reqs li b { color:var(--ink-1); font-weight:600; }
/* Works as a <span> (most of the app) or a <button> (keyboard-reachable). A button
   carries the browser's own border/padding, which inflated the track and pushed the
   knob out of it — reset them here so both elements render the same switch. */
.toggle { flex:none; width:44px; height:25px; border-radius:100px; background:rgba(var(--ink-rgb),.14);
  position:relative; cursor:pointer; transition:background .2s var(--ease);
  border:0; padding:0; margin:0; -webkit-appearance:none; appearance:none;
  display:inline-block; box-sizing:content-box; }
.toggle:focus-visible { outline:2px solid var(--blue-500); outline-offset:2px; }
.toggle span { position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .2s var(--ease); }
.toggle.on { background:var(--blue-500); }
.toggle.on span { left:22px; }
/* mini toggle for the header Auto-Clutchh chip */
.toggle.mini { width:32px; height:18px; }
.toggle.mini span { top:2px; left:2px; width:14px; height:14px; }
.toggle.mini.on span { left:16px; }
.themepill { display:inline-flex; background:rgba(var(--ink-rgb),.06); border-radius:100px; padding:4px; }
.themepill button { border:none; background:transparent; font-size:13px; color:var(--ink-3);
  width:34px; height:28px; border-radius:100px; cursor:pointer; }
.themepill button.on { background:var(--surface); color:var(--ink-1); box-shadow:var(--shadow-card); }

/* ---------- sync — the REAL app's layout/appearance, only the tokens are blue ---------- */
.sy-scroll { flex:1; min-height:0; overflow-y:auto; padding:16px 22px 78px; }
/* minmax(0,1fr), not a bare 1fr: a bare fr floors at min-content, so one real course
   name or hint line makes that column win and the two cards stop being equal halves
   the way the prototype's are. */
.sy-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto minmax(0,auto) minmax(0,1fr); gap:12px;
  min-height:600px; }
/* hero — dark slab, blue orb, white pill button (as in the current UI) */
.sy-hero { grid-column:1 / -1; background:#1a1a1a; border-radius:18px; padding:18px 22px;
  display:flex; align-items:center; gap:20px; overflow:hidden; position:relative; }
.sy-orb { flex:none; position:relative; width:64px; height:64px; }
.sy-orb::after { content:''; position:absolute; inset:0; border-radius:50%; background:var(--blue-500);
  box-shadow:0 10px 26px -8px rgba(37,99,235,.8); }
.sy-orb .sy-orb-i { position:absolute; inset:0; z-index:1; display:flex; align-items:center;
  justify-content:center; color:#fff; font-size:24px; }
.sy-orb.spin .sy-orb-i { animation:syOrbit 1s linear infinite; }
@keyframes syOrbit { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.sy-hero-txt { flex:1; min-width:0; }
.sy-kicker { font:400 9.5px/1 var(--font-mono); letter-spacing:.09em; color:#a8a29e; }
.sy-title { font:700 21px/1.15 var(--font-ui); letter-spacing:-.02em; color:#fff; margin-top:4px; }
.sy-sub { font:400 12.5px/1.4 var(--font-ui); color:#a8a29e; margin-top:3px; }
.sy-syncbtn { flex:none; font:600 12.5px/1 var(--font-ui); border-radius:100px; padding:10px 20px;
  cursor:pointer; border:none; background:#fff; color:#1a1a1a; }
.sy-syncbtn.running, .sy-syncbtn:disabled { background:rgba(255,255,255,.12); color:#a8a29e; cursor:default; }
/* cards */
.sy-card { background:var(--surface); border:1px solid var(--border-strong); border-radius:16px; padding:15px 18px; }
.sy-rhythm { grid-column:1; grid-row:2; }
.sy-classes { grid-column:2; grid-row:2 / span 2; min-height:0; display:flex; flex-direction:column; }
.sy-pull { grid-column:1; grid-row:3; min-height:0; display:flex; flex-direction:column; }
.sy-head { display:flex; align-items:baseline; gap:10px; }
.sy-head-row { display:flex; align-items:center; gap:10px; }
.sy-h { font:700 14px/1.2 var(--font-ui); color:var(--ink-1); }
.sy-hsub { font:400 12px/1.2 var(--font-ui); color:var(--ink-4); }
.sy-chips { display:flex; gap:6px; margin-top:13px; flex-wrap:wrap; }
.sy-chip { font:600 12px/1 var(--font-ui); border-radius:100px; padding:7px 14px; cursor:pointer;
  white-space:nowrap; background:var(--surface-2); color:var(--ink-25); border:1px solid var(--border-strong);
  transition:background .13s var(--ease), color .13s var(--ease); }
.sy-chip.on { background:var(--ink-1); color:var(--paper); border-color:var(--ink-1); }
/* timeline */
.sy-timeline { margin-top:16px; height:44px; background:var(--paper); border:1px solid var(--line-soft);
  border-radius:10px; padding:0 14px; }
.sy-tinner { position:relative; height:100%; }
.sy-tick { position:absolute; bottom:3px; transform:translateX(-50%); font:400 8px/1 var(--font-mono); color:var(--ink-4); }
.sy-tdot { position:absolute; top:50%; transform:translate(-50%,-50%); width:11px; height:11px; border-radius:50%;
  background:var(--blue-500); box-shadow:0 0 0 3px rgba(37,99,235,.18); }
.sy-now { position:absolute; top:6px; bottom:14px; width:1.5px; background:#f59e0b; border-radius:2px; }
/* time row */
.sy-timerow { display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.sy-hint { font:400 12.5px/1.4 var(--font-ui); color:var(--ink-25); }
.sy-timewrap { position:relative; display:inline-block; }
.sy-timebtn { display:inline-flex; align-items:center; gap:6px; font:400 11.5px/1 var(--font-mono);
  color:var(--ink-1); background:var(--paper); border:1px solid var(--border-strong); border-radius:8px;
  padding:6px 11px; cursor:pointer; }
.sy-caret { font-size:8px; color:var(--ink-4); }
/* Past classes: a quiet, collapsed shelf under the live list — never synced,
   one tap ("Sync it") pulls one back in and stops it re-archiving. */
.sy-past { margin-top:10px; border-top:1px solid rgba(var(--ink-rgb),.08); padding-top:8px; }
.sy-past summary { cursor:pointer; font:500 11px/1 var(--font-mono); letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3); padding:6px 4px; list-style:none; }
.sy-past summary::before { content:'▸ '; }
.sy-past[open] summary::before { content:'▾ '; }
.sy-past summary:hover { color:var(--ink-2); }
.sy-past .sy-crow { cursor:default; opacity:.75; }
.sy-past-add { flex:none; font:600 11px/1 var(--font-mono); letter-spacing:.04em;
  border:1px solid var(--blue-outline); background:var(--surface); color:var(--blue-600);
  border-radius:var(--r-pill); padding:7px 13px; cursor:pointer; }
.sy-past-add:hover { border-color:var(--blue-500); }
.sy-fail { color:var(--red-ink); font-weight:600; text-transform:none; }
.sy-timemenu { position:absolute; left:0; bottom:calc(100% + 5px); z-index:50; background:var(--surface);
  border:1px solid var(--border-strong); border-radius:10px; box-shadow:var(--shadow-raised);
  padding:5px; display:flex; flex-direction:column; min-width:130px; }
.sy-timepick { display:flex; align-items:center; gap:6px; padding:4px 6px; }
.sy-tp-col { display:flex; flex-direction:column; align-items:center; gap:1px; }
.sy-tp-step { border:none; background:none; cursor:pointer; color:var(--ink-4); font-size:8px; padding:2px 8px; }
.sy-tp-step:hover { color:var(--blue-600); }
.sy-tp-val { font:600 14px/1.2 var(--font-mono); color:var(--ink-1); }
.sy-tp-colon { font:600 14px/1 var(--font-mono); color:var(--ink-3); }
.sy-tp-ap { display:flex; flex-direction:column; gap:3px; margin-left:6px; }
.sy-tp-apbtn { border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-3);
  font:600 9px/1 var(--font-mono); padding:4px 8px; border-radius:7px; cursor:pointer; }
.sy-tp-apbtn.on { background:var(--blue-500); color:#fff; border-color:transparent; }
.sy-tail { font:400 12px/1.4 var(--font-ui); color:var(--ink-4); }
/* classes */
.sy-classlist { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.sy-crow { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:12px; cursor:pointer;
  background:var(--surface-2); transition:background .13s var(--ease); }
.sy-crow:hover { background:var(--surface-hover); }
.sy-crow.off { background:transparent; opacity:.55; }
.sy-cdot { flex:none; width:9px; height:9px; border-radius:50%; }
.sy-cmeta { flex:1; min-width:0; }
.sy-cname { font:600 13px/1.3 var(--font-ui); color:var(--ink-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sy-crow.off .sy-cname { color:var(--ink-3); }
.sy-csub { font:400 9.5px/1 var(--font-mono); letter-spacing:.03em; color:var(--ink-4); margin-top:2px; }
.sy-toggle { flex:none; width:34px; height:20px; border-radius:100px; padding:2px; background:var(--border-strong);
  transition:background .16s var(--ease); }
.sy-toggle.on { background:var(--blue-500); }
.sy-knob { display:block; width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(26,26,26,.25); transition:transform .16s var(--ease); }
.sy-toggle.on .sy-knob { transform:translateX(14px); }
.sy-all { font:600 12px/1 var(--font-ui); color:var(--blue-500); cursor:pointer; margin-left:auto; }
/* last runs */
.sy-runs { flex:1; min-height:0; display:flex; flex-direction:column; }
.sy-clean { margin-left:auto; font:400 9.5px/1 var(--font-mono); color:var(--ink-4); }
.sy-runlist { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; margin-top:4px; padding-right:6px; }
.sy-run { display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line-soft); }
.sy-run-ic { flex:none; font-size:11px; color:var(--green-500); }
.sy-run-what { flex:1; min-width:0; font:400 12.5px/1.4 var(--font-ui); color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sy-run-when { flex:none; font:400 10px/1 var(--font-mono); color:var(--ink-4); }
.sy-run-new { color:var(--green-500); font-weight:600; }

/* ---------- motion system: nothing teleports ----------
   popIn/popOut  → menus, popovers, dialogs, the minical
   fadeUp        → views and settings panes arriving
   height slides → every expander/collapser (JS expandEl/collapseEl) */
@keyframes popIn { from { opacity:0; transform:translateY(-5px) scale(.985); } }
@keyframes popOut { to { opacity:0; transform:translateY(-5px) scale(.985); } }
@keyframes fadeUp { from { opacity:0; transform:translateY(7px); } }
@keyframes fadeIn { from { opacity:0; } }
.tpop.open, .crsmenu.open, .sy-timemenu, .minical, .caldaypop { animation:popIn .16s var(--ease) both; }
.caldaypop.closing, .minical.closing { animation:popOut .14s var(--ease) both; pointer-events:none; }
.dlg-ov { animation:fadeIn .16s ease both; }
.dlg { animation:popIn .2s var(--ease) both; }
.dlg-ov.closing { animation:fadeIn .14s ease both reverse; pointer-events:none; }
.view.on { animation:fadeUp .2s var(--ease) both; }
.stg-panel { animation:fadeUp .18s var(--ease) both; }

/* thin, quiet scrollbars everywhere a native one could appear */
textarea::-webkit-scrollbar, .stgwrap::-webkit-scrollbar, .msgs::-webkit-scrollbar,
.ed-scroll::-webkit-scrollbar, .alerts-col::-webkit-scrollbar, .nt-body::-webkit-scrollbar,
.sy-scroll::-webkit-scrollbar, .nt-rail::-webkit-scrollbar, .sy-runlist::-webkit-scrollbar,
.sy-classlist::-webkit-scrollbar { width:8px; height:8px; }
textarea::-webkit-scrollbar-thumb, .stgwrap::-webkit-scrollbar-thumb, .msgs::-webkit-scrollbar-thumb,
.ed-scroll::-webkit-scrollbar-thumb, .alerts-col::-webkit-scrollbar-thumb, .nt-body::-webkit-scrollbar-thumb,
.sy-scroll::-webkit-scrollbar-thumb, .nt-rail::-webkit-scrollbar-thumb, .sy-runlist::-webkit-scrollbar-thumb,
.sy-classlist::-webkit-scrollbar-thumb { background:rgba(var(--ink-rgb),.18); border-radius:100px; }
textarea::-webkit-scrollbar-track, .stgwrap::-webkit-scrollbar-track, .msgs::-webkit-scrollbar-track,
.ed-scroll::-webkit-scrollbar-track, .alerts-col::-webkit-scrollbar-track, .nt-body::-webkit-scrollbar-track,
.sy-scroll::-webkit-scrollbar-track, .nt-rail::-webkit-scrollbar-track, .sy-runlist::-webkit-scrollbar-track,
.sy-classlist::-webkit-scrollbar-track { background:transparent; }

/* Refer & earn promo — the slim top marquee bar; its ✕ dismisses it for the session */
.referbar { display:none; align-items:center; padding:0; background:#15130f; color:#f4f1ea;
  overflow:hidden; animation:rbSlide .3s var(--ease); }
.referbar .rb-marquee { flex:1; min-width:0; overflow:hidden; height:36px; display:flex; align-items:center;
  cursor:pointer; contain:content; }
.referbar .rb-track { display:inline-flex; align-items:center; white-space:nowrap; will-change:transform;
  transform:translateZ(0); backface-visibility:hidden;
  animation:rbMarquee 34s linear infinite; animation-play-state:paused; }
.referbar .rb-marquee:hover .rb-track { animation-play-state:paused; }
.referbar .rb-item { font:700 12px/1 var(--font-ui); letter-spacing:.05em; text-transform:uppercase; color:#f4f1ea; }
.referbar .rb-star { color:#5a8bff; margin:0 20px; font-size:12px; }
.referbar .rb-x { flex:none; background:none; border:none; color:rgba(244,241,234,.55); font-size:13px;
  cursor:pointer; padding:2px 10px; line-height:1; }
.referbar .rb-x:hover { color:#f4f1ea; }
@keyframes rbSlide { from { opacity:0; transform:translateY(-10px); } }
@keyframes rbMarquee { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } }

/* proto badge *
@media (max-width:1100px){ .workspace { grid-template-columns:250px 1fr 260px; } }
/* popup toasts — same visual language as the notifications timeline (icon bubble +
   white card), with an Undo pill and a draining progress bar. Hover pauses the timer. */
#toasts { position:fixed; left:50%; top:14px; transform:translateX(-50%); display:flex;
  flex-direction:column; align-items:center; gap:10px; z-index:95; }
.toast { position:relative; overflow:hidden; display:flex; align-items:center; gap:11px;
  min-width:270px; max-width:390px; background:var(--surface); border:1px solid var(--line);
  border-radius:15px; padding:11px 15px 13px 11px; box-shadow:var(--shadow-raised);
  cursor:pointer; animation:toastIn .28s var(--ease); }
@keyframes toastIn { from { opacity:0; transform:translateY(-16px) scale(.96); } }
.toast.out { animation:toastOut .22s var(--ease) forwards; pointer-events:none; }
@keyframes toastOut { to { opacity:0; transform:translateY(-8px) scale(.98); } }
.toast .t-ic { flex:none; width:36px; height:36px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:15px; box-shadow:var(--shadow-card); }
.toast .t-ic.good { background:var(--green-100); color:var(--green-ink); }
.toast .t-ic.blue { background:var(--blue-100); color:var(--blue-600); }
.toast .t-ic.red { background:var(--red-100); color:var(--red-ink); }
.toast .t-tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.toast .t-t { font:650 12.5px/1.35 var(--font-ui); color:var(--ink-1); }
.toast .t-s { font:400 9.5px/1.4 var(--font-mono); color:var(--ink-3); }
.toast .t-act { flex:none; border:none; background:var(--blue-100); color:var(--blue-600);
  font:700 10px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  padding:7px 13px; border-radius:var(--r-pill); cursor:pointer; }
.toast .t-act:hover { background:var(--blue-500); color:#fff; }
.toast .t-bar { position:absolute; left:0; bottom:0; height:3px; width:100%; border-radius:0 3px 3px 0;
  background:var(--blue-500); opacity:.55; transform-origin:left; animation:tdrain linear forwards; }
@keyframes tdrain { to { transform:scaleX(0); } }
.toast:hover .t-bar { animation-play-state:paused; }

/* ==========================================================================
   App-only surfaces — no prototype counterpart. Appended last on purpose:
   these may add, never override.
   ====================================================================== */
/* ===== app-only surfaces: no prototype counterpart ===== */
}
html[data-theme="dark"] .doc-card,
html[data-theme="dark"] .tour-card { background:#2a2f3c; }

/* ===== dash: the course dashboard (CLCH-014) ===== */
.dashwrap { flex:1; overflow-y:auto; background:var(--paper); }
.dash-inner { max-width:1320px; margin:0 auto; padding:34px 42px 64px; }
.dash-cols { display:flex; gap:26px; align-items:stretch; margin-top:18px; }
.dash-left { flex:1; min-width:0; display:flex; flex-direction:column; gap:18px; }
/* section header: mono label left, action (Add course) right */
.dash-toprow { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:6px; }
.dash-addpill { display:inline-flex; align-items:center; gap:7px;
  background:var(--surface); color:var(--blue-500);
  font:700 13.5px/1 var(--font-ui); letter-spacing:-.01em;
  border:1px solid rgba(var(--ink-rgb),.06); border-radius:var(--r-pill);
  padding:9px 16px; cursor:pointer; box-shadow:var(--shadow-card);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease); }
.dash-addpill:hover { transform:translateY(-1px); box-shadow:var(--shadow-raised); }
.dash-addpill .plus { font-weight:800; font-size:15px; }
/* Canvas-shaped cards: tall color header; columns share the row evenly so the
   grid's right edge lands exactly on the panel's gutter — no lopsided gap */
.dash-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:26px; }
.dash-card { background:var(--surface); border:1px solid rgba(var(--ink-rgb),.06);
  border-radius:var(--r-card); overflow:hidden; cursor:pointer;
  box-shadow:var(--shadow-card);
  transition:transform .14s var(--ease), box-shadow .14s var(--ease); }
.dash-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-raised); }
/* the color block bleeds under the hairline border so no white sliver rings it.
   FIXED aspect (not fixed height): cards stretch with the window, and a fixed
   height changed the banner's shape per viewport — so the crop dialog's frame
   never matched what the card showed. Same ratio everywhere = true WYSIWYG. */
.dash-band { aspect-ratio:262/147; margin:-1px -1px 0;
  border-radius:var(--r-card) var(--r-card) 0 0;
  position:relative; background-size:cover; background-position:center; }
.dash-kebab { position:absolute; top:8px; right:8px; width:26px; height:26px;
  border:none; border-radius:50%; background:rgba(255,255,255,.78);
  color:#14161d; font:700 15px/1 var(--font-ui); cursor:pointer;
  opacity:0; transition:opacity .15s var(--ease), background .15s var(--ease); }
.dash-card:hover .dash-kebab { opacity:1; }
.dash-kebab:hover { background:#fff; }
.dash-cardmenu { width:max-content; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow-overlay); padding:10px;
  display:flex; flex-direction:column; gap:8px;
  animation:popIn var(--dur-pop,.16s) var(--ease) both; }
.dash-sws { display:flex; gap:6px; }
.dash-sw { width:20px; height:20px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(var(--ink-rgb),.15); }
.dash-sw.on { outline:2px solid var(--blue-500); outline-offset:1px; }
.dash-cm-row { border:none; background:transparent; text-align:left; cursor:pointer;
  font:600 12px/1 var(--font-ui); color:var(--ink-1); padding:7px 8px; border-radius:8px; }
.dash-cm-row:hover { background:var(--surface-hover); }
.dash-cm-sep { height:1px; background:var(--line); margin:2px 0; }
.dash-cm-row.danger { color:var(--red-ink); }
.dash-cm-row.danger:hover { background:var(--red-100); }
/* the crop dialog — position the card photo Discord-style, in our banner shape */
.crop-shade { position:fixed; inset:0; background:rgba(20,25,40,.45); z-index:2100;
  display:flex; align-items:center; justify-content:center;
  animation:veilIn var(--dur-veil,.2s) var(--ease) both; }
.crop-card { background:var(--surface); border-radius:var(--r-xl);
  box-shadow:var(--shadow-overlay); padding:18px 22px 20px;
  display:flex; flex-direction:column; gap:14px;
  animation:riseIn var(--dur-veil,.2s) var(--ease) both; }
.crop-head { display:flex; align-items:center; }
.crop-title { font:700 15px/1 var(--font-ui); color:var(--ink-1); }
.crop-x { margin-left:auto; color:var(--ink-3); cursor:pointer; font-size:14px; }
.crop-x:hover { color:var(--ink-1); }
.crop-stage { position:relative; overflow:hidden; border-radius:12px;
  background:#14161d; cursor:grab; touch-action:none; user-select:none;
  box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.12); }
.crop-stage:active { cursor:grabbing; }
.crop-img { position:absolute; top:0; left:0; max-width:none; pointer-events:none;
  will-change:transform; }
.crop-zoomrow { display:flex; align-items:center; gap:10px; }
.crop-zi { color:var(--ink-3); font-size:11px; }
.crop-zi.big { font-size:16px; }
.crop-zoom { flex:1; accent-color:var(--blue-500); }
.crop-foot { display:flex; align-items:center; gap:10px; }
.crop-reset { font:600 12.5px/1 var(--font-ui); color:var(--blue-600); cursor:pointer; }
.crop-cancel { border:1px solid var(--blue-outline); background:transparent;
  color:var(--ink-1); font:600 12.5px/1 var(--font-ui); border-radius:var(--r-pill);
  padding:9px 18px; cursor:pointer; }
.crop-cancel:hover { background:var(--surface-hover); }
.crop-apply { border:none; background:var(--grad-primary); color:#fff;
  font:700 12.5px/1 var(--font-ui); border-radius:var(--r-pill);
  padding:9px 20px; cursor:pointer; box-shadow:var(--shadow-primary-btn); }
.dash-body { padding:13px 16px 15px; }
.dash-name { font:600 15px/1.35 var(--font-ui); color:var(--ink-1);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:40px; }
.dash-meta { margin-top:9px; display:flex; flex-wrap:wrap; gap:6px; min-height:20px; }
.dash-meta .ended { align-self:center; font:500 10.5px var(--font-mono); color:var(--ink-3);
  letter-spacing:.03em; text-transform:uppercase; }
/* past courses fold behind a pill */
.dash-pastpill { align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); color:var(--ink-2);
  font:600 11px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  border:1px solid rgba(var(--ink-rgb),.06); border-radius:var(--r-pill);
  padding:9px 16px; cursor:pointer; box-shadow:var(--shadow-card); margin-top:10px;
  transition:transform .12s var(--ease), box-shadow .12s var(--ease); }
.dash-pastpill:hover { transform:translateY(-1px); box-shadow:var(--shadow-raised); }
.dash-pastpill .chev { transition:transform var(--dur-grow,.22s) var(--ease); display:inline-flex; }
.dash-pastpill.open .chev { transform:rotate(180deg); }
.dash-card.past { opacity:.62; }
.dash-card.past .dash-band { filter:saturate(.45); }
.dash-card.past:hover { opacity:.85; }
.dash-empty { color:var(--ink-3); font:500 14px var(--font-ui); padding:14px 2px; }
/* dw: the weekly progress panel (BetterCanvas-style ring + check-off list) */
.dash-week { width:302px; flex:none;
  background:var(--surface); border:1px solid rgba(var(--ink-rgb),.06);
  border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  padding:16px 16px 18px; display:flex; flex-direction:column; gap:13px; }
.dash-week .seg { display:flex; }
.dash-week .seg button { flex:1; }
.dw-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dw-nav .dw-arrow { width:28px; height:28px; flex:none; border:1px solid var(--line);
  border-radius:50%; background:var(--surface); color:var(--ink-2); cursor:pointer;
  font:600 13px/1 var(--font-ui); transition:background .12s var(--ease); }
.dw-nav .dw-arrow:hover { background:var(--surface-hover); color:var(--ink-1); }
.dw-nav .dw-range { font:600 13.5px var(--font-ui); color:var(--ink-1); }
.dw-filter { align-self:center; display:inline-flex; align-items:center; gap:7px;
  border:none; background:transparent; cursor:pointer;
  font:600 11px/1 var(--font-mono); letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-2); padding:4px 8px; border-radius:8px; }
.dw-filter:hover { background:var(--surface-hover); color:var(--ink-1); }
.dw-ringwrap { position:relative; width:148px; margin:2px auto 0; }
.dw-ringsvg { display:block; width:148px; height:148px; transform:rotate(-90deg); }
.dw-ringsvg circle { fill:none; }
.dw-track { stroke:rgba(var(--ink-rgb),.08); transition:opacity .3s var(--ease); }
.dw-arc { stroke-linecap:round;
  transition:stroke-dasharray .45s var(--ease), opacity .3s var(--ease); }
.dw-ringtxt { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; pointer-events:none; }
.dw-pct { font:700 22px/1 var(--font-ui); color:var(--ink-1); letter-spacing:-.02em; }
.dw-frac { font:500 11px var(--font-mono); color:var(--ink-3); letter-spacing:.04em; }
.dw-ringwrap.many .dw-pct { font-size:17px; }
.dw-ringwrap.many .dw-frac { font-size:9.5px; }
.dw-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:5px 14px;
  font:500 9.5px var(--font-mono); color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase; }
.dw-legend i { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:4px; }
.dw-sect { display:flex; align-items:center; justify-content:space-between; margin-top:3px; }
.dw-list { display:flex; flex-direction:column; }
.dw-list .empty { color:var(--ink-3); font:500 12.5px var(--font-ui); padding:8px 2px; }
.dw-add { align-self:stretch; margin-top:auto; border:1px solid var(--blue-outline); background:transparent;
  color:var(--blue-600); font:600 12.5px/1 var(--font-ui); border-radius:var(--r-pill);
  padding:9px 0; cursor:pointer; transition:background .12s var(--ease); }
.dw-add:hover { background:rgba(47,107,255,.06); }
.dw-addform { display:flex; gap:7px; }
.dw-addform input { flex:1; min-width:0; border:1px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--ink-1); font:500 12.5px var(--font-ui); padding:8px 10px; }
.dw-addform button { border:none; background:var(--ink-1); color:var(--paper);
  font:600 12px/1 var(--font-ui); border-radius:9px; padding:0 14px; cursor:pointer; }
.dw-confetti { position:fixed; inset:0; pointer-events:none; z-index:3000; }
@media (max-width:1020px){
  .dash-cols { flex-direction:column; }
  .dash-week { width:100%; position:static; }
}
.acc-overlay { display:none; position:fixed; inset:0; z-index:2000; }
.acc-overlay.show { display:block; animation:veilIn var(--dur-veil,.2s) var(--ease) both; }
.au { width:100%; height:100vh; min-height:720px; display:grid; grid-template-columns:1.08fr 1fr;
  background:#f4f1ea; color:#15130f; overflow:hidden;
  font-family:'Bricolage Grotesque',var(--font-ui); -webkit-font-smoothing:antialiased; }
.au a { color:#2f6bff; text-decoration:none; }
.au a:hover { color:#1e4fd6; }
.au-left { position:relative; background:#f4f1ea; color:#15130f; display:flex; flex-direction:column;
  justify-content:space-between; padding:38px 44px; overflow:hidden; }
.au-glow { position:absolute; bottom:-220px; left:-180px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(47,107,255,.14), transparent 70%); }
/* The real lockup, tagline and all — this panel is the one place in the app with
   the room for it. Always the light artwork: .au-left is cream by design and does
   not follow the theme. */
.au-mark { position:relative; align-self:flex-start; display:block; width:200px; height:auto; }
.au-h1 { position:relative; font-weight:800; font-size:clamp(2.4rem,4.2vw,3.8rem); line-height:.94; letter-spacing:-.04em; text-transform:uppercase; }
/* "CLUTCHHED" set as the logo sets it: the same lean and the same blue on the
   same two letters, so the headline and the mark above it read as one thing.
   Both numbers are measured off the artwork (9.8deg, #005dfd) rather than
   guessed. The highlighter bar this replaced fought the blue HH — two blues,
   one on top of the other. */
.au-h1 .au-logoword { display:inline-block; transform:skewX(-10deg); padding-right:.09em; }
.au-h1 .au-logoword .hh, .au-h1 .au-logoword .dot { color:#005dfd; }
.au-lead { font-size:16.5px; line-height:1.55; color:#4d5470; margin-top:20px; max-width:44ch; }
.au-cards { display:flex; flex-direction:column; gap:9px; margin-top:34px; max-width:400px; }
.au-card { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid rgba(21,19,15,.07);
  border-radius:12px; padding:13px 15px; box-shadow:0 8px 22px -16px rgba(30,50,110,.4); animation:auDrift 6s ease-in-out infinite; }
.au-card .ci { width:32px; height:32px; border-radius:9px; background:rgba(47,107,255,.12); color:#1e4fd6;
  display:flex; align-items:center; justify-content:center; font-size:14px; flex:0 0 auto; }
.au-card .ci.ok { background:rgba(63,174,106,.14); color:#2f8a5b; }
.au-card .ct { font-weight:600; font-size:13.5px; }
.au-card .cm { font-family:'JetBrains Mono',var(--font-mono); font-size:10px; color:#7c839c; margin-top:2px; }
.au-card .cw { font-family:'JetBrains Mono',var(--font-mono); font-size:10px; color:#7c839c; }
.au-foot { position:relative; font-family:'JetBrains Mono',var(--font-mono); font-size:11px; letter-spacing:.04em; color:#6f7691; }
.au-right { display:flex; align-items:center; justify-content:center; padding:40px 30px; background:#dce3f2; }
.au-form { width:100%; max-width:392px; animation:auRise .5s ease both; }
.au-toggle { display:inline-flex; background:rgba(21,19,15,.06); border-radius:100px; padding:4px; margin-bottom:30px; }
.au-toggle span { font-family:'JetBrains Mono',var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  padding:9px 18px; border-radius:100px; cursor:pointer; transition:background .2s,color .2s; color:#6f695f; }
.au-toggle span.on { background:#15130f; color:#f4f1ea; }
.au-title { font-family:'Bricolage Grotesque',var(--font-ui); font-weight:700; font-size:34px; letter-spacing:-.03em; color:#15130f; }
.au-sub { font-size:15px; line-height:1.5; color:#4a453d; margin:8px 0 28px; }
.au-fields { display:flex; flex-direction:column; gap:12px; }
.au-lbl { display:block; font-family:'JetBrains Mono',var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#8a8378; margin-bottom:7px; }
.au-lblrow { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; }
.au-in { width:100%; background:#fff; border:1.5px solid rgba(21,19,15,.14); border-radius:12px; padding:14px 16px;
  font-size:15px; color:#15130f; transition:border-color .2s; }
.au-in:focus { outline:none; border-color:#2f6bff; }
.au-in.err { border-color:#e2483d; }
.au-pw { position:relative; }
.au-pw .au-in { padding-right:48px; }
.au-pweye { position:absolute; right:13px; top:50%; transform:translateY(-50%); display:flex; align-items:center;
  color:#8a8378; cursor:pointer; user-select:none; }
.au-pweye:hover { color:#15130f; }
/* One eye only: Edge/WebView2 paints its own reveal control on password inputs. */
input::-ms-reveal, input::-ms-clear { display:none; }
.au-hint { font-family:'JetBrains Mono',var(--font-mono); font-size:10.5px; color:#8a8378; margin-top:7px; }
.au-forgot { font-family:'JetBrains Mono',var(--font-mono); font-size:10.5px; }
.au-errbox { display:flex; align-items:flex-start; gap:10px; margin-top:14px; background:rgba(226,72,61,.09);
  border:1px solid rgba(226,72,61,.35); border-radius:12px; padding:12px 14px; animation:auRise .25s ease both; }
.au-errbox p { font-family:'JetBrains Mono',var(--font-mono); font-size:11.5px; line-height:1.55; color:#c0392e; }
.au-okbox { display:flex; align-items:flex-start; gap:10px; margin-top:14px; background:rgba(63,174,106,.1);
  border:1px solid rgba(63,174,106,.4); border-radius:12px; padding:12px 14px; animation:auRise .25s ease both; }
.au-emailhint { font-family:'JetBrains Mono',var(--font-mono); font-size:11px; line-height:1.5; color:#8a8378; margin-top:7px; }
.au-emailhint.warn { color:#c0392e; }
.au-emailhint b { color:#15130f; font-weight:600; }
.au-emailhint a { color:#2f6bff; text-decoration:none; }
.au-emailhint a:hover { text-decoration:underline; }
.au-okbox span { color:#2f8a5b; }
.au-okbox p { font-family:'JetBrains Mono',var(--font-mono); font-size:11.5px; line-height:1.55; color:#2f8a5b; }
.au-btn { width:100%; margin-top:18px; font-family:'JetBrains Mono',var(--font-mono); font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; background:linear-gradient(135deg,#3d78ff,#1e4fd6); color:#fff; border:none; padding:16px;
  border-radius:12px; transition:opacity .2s,transform .15s; cursor:pointer; }
.au-btn:hover { transform:translateY(-1px); }
.au-btn:disabled { opacity:.45; cursor:default; transform:none; }
.au-terms { font-family:'JetBrains Mono',var(--font-mono); font-size:10.5px; line-height:1.6; color:#8a8378; margin-top:18px; }
.au-shake { animation:auShake .4s ease; }
.au-done { text-align:center; animation:auRise .5s ease both; }
.au-check { width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,#3d78ff,#1e4fd6);
  display:flex; align-items:center; justify-content:center; font-size:32px; color:#fff; margin:0 auto 24px;
  box-shadow:0 14px 34px -10px rgba(47,107,255,.6); animation:auPop .45s ease both; }
.au-doneemail { font-family:'JetBrains Mono',var(--font-mono); font-size:13.5px; font-weight:600; color:#15130f; }
.au-subbtn { display:inline-block; margin-top:30px; font-family:'JetBrains Mono',var(--font-mono); font-size:13px;
  letter-spacing:.04em; text-transform:uppercase; background:linear-gradient(135deg,#3d78ff,#1e4fd6); color:#fff;
  padding:17px 36px; border-radius:100px; border:none; cursor:pointer; }
.au-note { font-family:'JetBrains Mono',var(--font-mono); font-size:11px; color:#8a8378; margin-top:18px; }
@media (max-width:860px) {
.au { grid-template-columns:1fr; }
.au-left { display:none; }
}
.au.au-billing { grid-template-columns:1fr; }
.au-bill { width:100%; max-width:940px; margin:0 auto; padding:40px 24px; overflow:auto; align-self:center; }
.au-bill stripe-pricing-table { display:block; margin-top:18px; }
.au-plans .plan-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:6px 0 4px; }
.plan-card { position:relative; display:flex; flex-direction:column; gap:4px; align-items:flex-start;
  text-align:left; padding:16px 16px 14px; border:1.5px solid rgba(21,19,15,.14); border-radius:14px;
  background:#fff; cursor:pointer; transition:border-color .15s, transform .15s; }
.plan-card:hover { border-color:#2f6bff; transform:translateY(-1px); }
.plan-card.best { border-color:rgba(47,107,255,.5); background:linear-gradient(180deg,rgba(47,107,255,.05),#fff); }
.plan-badge { font-family:'JetBrains Mono',var(--font-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase;
  color:#1e4fd6; background:rgba(47,107,255,.12); border-radius:6px; padding:3px 7px; }
.plan-name { font-family:'Bricolage Grotesque',var(--font-ui); font-weight:700; font-size:18px; color:#15130f; }
.plan-desc { font-size:12.5px; color:#6f695f; }
.plan-go { margin-top:6px; font-family:'JetBrains Mono',var(--font-mono); font-size:11px; letter-spacing:.04em;
  text-transform:uppercase; color:#2f6bff; }
@media (max-width:520px) {
.au-plans .plan-grid { grid-template-columns:1fr; }
}
.icon { display:inline-flex; flex:none; }
.icon svg { display:block; }
::selection { background:var(--blue-500); color:#fff; }
.accent { color:var(--blue-500); }
.clh-scroll::-webkit-scrollbar { width:10px; }
.clh-scroll::-webkit-scrollbar-thumb { background:rgba(var(--ink-rgb),.16); border-radius:20px;
  border:3px solid transparent; background-clip:content-box; }
.msg-in { animation:riseIn .25s var(--ease) both; }
.pill { display:inline-flex; align-items:center; gap:6px; font:400 11px/1.3 var(--font-mono);
  padding:6px 11px; border-radius:var(--r-pill); white-space:nowrap; }
.pill.st-review { background:var(--butter-100); color:var(--butter-ink); }
.pill.st-working { background:var(--blue-100); color:var(--blue-600); }
.pill.st-done { background:var(--green-100); color:var(--green-ink); }
.pill.st-queued { border:1px solid var(--border-strong); color:var(--ink-25); }
.pill.st-blocked { background:var(--red-100); color:var(--red-ink); }
.pill.st-ok { background:var(--green-100); color:var(--green-ink); }
.pill.st-warn { background:var(--butter-100); color:var(--butter-ink); }
.card-14 { background:var(--surface); border:1px solid var(--border-on-white);
  border-radius:var(--r-card); box-shadow:var(--shadow-card); }
.rowlist > div { background:var(--surface); }
.stg-drawer { overflow:hidden; background:rgba(var(--ink-rgb),.028); border-radius:0 0 16px 16px;
  animation:stgDrawer .22s var(--ease); }
.stg-drawer .stg-row { padding-left:34px; border-bottom-color:rgba(var(--ink-rgb),.05); }
.stg-drawer .stg-row:last-child { border-bottom:none; }
.stg-drawer .stg-newterm { background:transparent; }
.stg-step { display:inline-flex; align-items:center; gap:2px; background:rgba(var(--ink-rgb),.06); border-radius:100px; padding:4px; }
.stg-step-v { font-family:var(--font-mono); font-size:13px; font-weight:600; padding:0 14px; color:var(--ink-1); }
.stg-note { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); text-align:center; }
.syncbar { flex:none; display:flex; align-items:center; gap:12px; margin:0 48px 8px;
  padding:10px 14px; border-radius:var(--r-md); background:var(--blue-50);
  border:1px solid var(--blue-100); font:400 13px/1.4 var(--font-ui); color:var(--ink-1); }
.syncbar .sr-i { color:var(--blue-600); font-size:15px; flex:none; }
.syncbar .sr-t { flex:1; min-width:0; }
.syncbar .sr-x { flex:none; width:24px; height:24px; border:none; border-radius:6px;
  background:transparent; color:var(--ink-3); font:600 12px/1 var(--font-ui); cursor:pointer; }
.syncbar .sr-x:hover { background:var(--surface-hover); color:var(--ink-1); }
.brand-mini { display:flex; align-items:center; gap:9px; }
.brandmark { height:34px; width:auto; display:block; }
/* 36, not the old 40: the brand face is far heavier than the wordmark it replaced,
   so it holds the same presence in a smaller footprint — which keeps the step
   labels beside it from crowding on a narrow window. */
.ob-top .brandmark.ob-brand { height:36px; }
#hActions { margin-left:auto; }
.syncchip { display:flex; align-items:center; gap:6px; padding:4px 10px; border-radius:8px;
  font:600 11.5px/1 var(--font-mono); color:var(--ink-2); background:var(--surface); border:1px solid var(--border-strong); }
.pillbtn { display:inline-flex; align-items:center; gap:6px; font:600 11.5px/1 var(--font-mono);
  color:var(--ink-2); border:1px solid var(--border-strong); background:var(--surface);
  padding:4px 10px; border-radius:8px; cursor:pointer; white-space:nowrap;
  transition:background 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease); }
.pillbtn:hover { border-color:var(--blue-500); color:var(--blue-600); }
.pillbtn:disabled { opacity:.45; cursor:default; }
.autobtn.on { background:var(--ink-1); color:#fff; border-color:var(--ink-1); }
.autobtn.on:hover { background:var(--ink-1); color:#fff; }
/* The sync chip's state dot. Scoped to .chip the way the prototype scopes its own
   `.chip .dot` — as a bare `.dot` it also caught the full stop in
   `<h1 class="stg-title">Settings<span class="dot">.</span></h1>` and squashed that
   period into an 8px box. */
.chip .dot { position:relative; width:6px; height:6px; flex:none; }
.chip .dot i { position:absolute; inset:0; border-radius:50%; background:var(--ink-4); }
.chip .dot.running i { background:var(--blue-500); }
.chip .dot.done i { background:var(--green-500); }
.chip .dot.review i { background:var(--amber-500); }
.chip .dot.error i { background:var(--red-500); }
.chip .dot.running::after { content:''; position:absolute; inset:-3px; border-radius:50%;
  background:var(--blue-500); opacity:.3; animation:pulse 1.6s var(--ease) infinite; }
.pad { padding:10px 48px 120px; overflow-y:auto; }
.empty { color:var(--ink-3); font:400 13.5px/1.5 var(--font-ui); padding:8px 2px; }
.welcome-wrap { flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  padding:0 30px 60px; }
.connect-card.welcome { max-width:480px; margin:0; text-align:center; padding:38px 36px;
  border-radius:var(--r-lg); box-shadow:var(--shadow-raised); animation:obRise .5s ease both; }
.connect-card.welcome h3 { font-size:26px; letter-spacing:-.02em; }
.connect-card.welcome .row { justify-content:center; }
.ctxchip { font:400 10px/1.3 var(--font-mono); letter-spacing:.03em; color:var(--ink-3);
  border:1px solid var(--border-strong); padding:3px 8px; border-radius:var(--r-pill);
  max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.statdot { position:absolute; top:7px; right:8px; min-width:10px; height:10px; border-radius:50%;
  font:700 8px/10px var(--font-mono); text-align:center; color:#14161d; display:block; }
.statdot.ok { background:var(--green-500); box-shadow:0 0 0 2px var(--surface); }
.statdot.warn { top:7px; right:8px; min-width:9px; height:9px; font-size:0;
  background:var(--amber-500); box-shadow:0 0 0 2px var(--surface); }
.browserwrap { flex:1; min-height:0; display:flex; flex-direction:column; padding:16px 48px 96px; }
.browserwrap > .mono-label { flex:none; margin-bottom:14px; }
.browlive { flex:1; min-height:0; display:flex; flex-direction:column; }
.lview { flex:1; min-height:0; }
.lv-body { flex:1; min-height:0; position:relative; background:var(--surface-2);
  display:flex; align-items:flex-start; justify-content:center; overflow:hidden; }
.lv-img { display:none; width:100%; height:auto; max-height:100%; object-fit:contain;
  object-position:top center; background:var(--surface-2); user-select:none; }
.lv-idle { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.lv-idle-card { max-width:340px; text-align:center; background:var(--surface);
  border:1px solid var(--border-on-white); border-radius:var(--r-card); padding:24px 26px;
  box-shadow:var(--shadow-card); }
.crsdrop-item .rdot { width:7px; height:7px; border-radius:50%; background:var(--ink-4); flex:none; }
.crsdrop-item.active .rdot { background:var(--blue-500); }
.crsdrop-item .lbl { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cadd { display:none; margin-top:6px; width:18px; height:18px; border-radius:6px; text-align:center;
  font:600 12px/18px var(--font-mono); color:var(--ink-4); cursor:pointer; }
.cadd:hover { background:var(--blue-50); color:var(--blue-600); }
.due-edit { animation:popIn var(--dur-pop) var(--ease) both; }
/* no margin-bottom: .todo's own 8px gap spaces this from the first item, the way
   the prototype's bare .mono-label is spaced */
.todo-head { display:flex; justify-content:space-between; align-items:center; }
.todo-tog { width:26px; height:26px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:50%; box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.14); color:var(--ink-2);
  border-radius:8px; border:1px solid rgba(var(--ink-rgb),.12); color:var(--ink-25); font-size:13px; cursor:pointer; }
.todo-tog:hover { background:var(--surface-hover); }
.alertrow .ai { width:34px; height:34px; border-radius:var(--r-md); display:flex; align-items:center;
  justify-content:center; font-size:15px; flex:none; }
.ai.blue { background:var(--blue-100); color:var(--blue-600); }
.ai.butter { background:var(--butter-100); color:var(--butter-ink); }
.ai.red { background:var(--red-100); color:var(--red-ink); }
.ai.green { background:var(--green-100); color:var(--green-ink); }
.ai.mut { background:rgba(var(--ink-rgb),.06); color:var(--ink-25); }
.alertrow .al { flex:1; min-width:0; }
.alertrow .al p:first-child { font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alertrow .al p:last-child { font:400 11px/1.4 var(--font-mono); color:var(--ink-3); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alertrow.notif .al p:first-child { white-space:normal; overflow:visible; text-overflow:clip; }
.alertrow.notif .al p:last-child { white-space:pre-wrap; overflow:visible; text-overflow:clip; line-height:1.55; }
.alertrow .at { font:400 11px/1 var(--font-mono); color:var(--ink-3); flex:none; }
.setwrap { max-width:780px; }
.setwrap .mono-label { display:block; margin:26px 0 12px; }
.setrow { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px; }
.setrow + .setrow { border-top:1px solid rgba(var(--ink-rgb),.07); }
.setrow .st { font-weight:600; font-size:15px; }
.setrow .sd2 { font:400 11px/1.5 var(--font-mono); color:var(--ink-3); margin-top:3px; }
.setrow.dim .st { color:var(--ink-25); }
.setrow input[type=text], .setrow input[type=password], .setrow input[type=email], .setrow select {
  padding:9px 13px; border-radius:var(--r-md);
  border:1px solid var(--border-strong); background:var(--surface); font:400 13px/1.4 var(--font-ui);
  color:var(--ink-1); outline:none; min-width:240px; }
.pwfields { display:flex; flex-direction:column; gap:8px; width:100%; }
.pwfields input { width:100%; min-width:0; }
.setrow input:focus { border-color:var(--blue-400); box-shadow:var(--focus-ring); }
.setrow select { font:400 12px/1.4 var(--font-mono); }
.setcol { flex-direction:column; align-items:stretch; }
.setcol textarea { width:100%; margin-top:10px; padding:10px 14px; border-radius:var(--r-md);
  border:1px solid var(--border-strong); background:var(--surface); font:400 13.5px/1.6 var(--font-ui);
  color:var(--ink-1); outline:none; resize:vertical; }
.setcol textarea:focus { border-color:var(--blue-400); box-shadow:var(--focus-ring); }
.darkcard { background:var(--panel-dark); color:var(--panel-dark-ink); border-radius:var(--r-card);
  padding:22px 24px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.darkcard p:first-child { font-weight:600; font-size:15px; margin-bottom:6px; }
.darkcard .dd { font-size:13px; line-height:1.5; color:rgba(244,241,234,.7); font-weight:400; }
.darkpill { font:400 11px/1 var(--font-mono); color:var(--panel-dark-ink);
  border:1px solid rgba(244,241,234,.3); padding:9px 14px; border-radius:var(--r-pill);
  white-space:nowrap; cursor:pointer; background:transparent; }
.darkpill:hover { background:rgba(244,241,234,.1); }
/* break-word, never `anywhere`: `anywhere` also shrinks min-content, so ordinary
   sentences split mid-word inside the narrow Chad column. The prototype's text
   wraps at spaces; this only breaks a token that genuinely cannot fit. */
.msg { max-width:760px; padding:13px 16px; border-radius:var(--r-lg); white-space:pre-wrap;
  word-wrap:break-word; overflow-wrap:break-word; font:400 14px/1.6 var(--font-ui); }
.msg.bot { align-self:flex-start; background:var(--surface); border:1px solid var(--border-on-white);
  box-shadow:var(--shadow-card); }
.msg.me { align-self:flex-end; background:var(--blue-50); border:1px solid var(--blue-100); }
.msg.bot b, .msg.me b { font-weight:600; }
/* A reply rendered as markdown lays itself out in real blocks, so the flat-text
   pre-wrap has to go or every paragraph gains a blank line. */
.msg.md { white-space:normal; }
.msg.md > :first-child { margin-top:0; }
.msg.md > :last-child { margin-bottom:0; }
.msg.md p { margin:0 0 10px; }
.msg.md h1, .msg.md h2, .msg.md h3 { font-weight:700; line-height:1.35; margin:16px 0 7px; }
.msg.md h1 { font-size:17px; } .msg.md h2 { font-size:15.5px; } .msg.md h3 { font-size:14.5px; }
.msg.md ul, .msg.md ol { margin:0 0 10px; padding-left:20px; }
.msg.md li { margin-bottom:5px; }
.msg.md li > p { margin:0; }
.msg.md code { font:400 12.5px/1.5 var(--font-mono); background:var(--surface-well);
  border-radius:5px; padding:1px 5px; }
.msg.md pre { margin:0 0 10px; padding:11px 13px; border-radius:var(--r-sm); overflow-x:auto;
  background:var(--surface-well); border:1px solid rgba(var(--ink-rgb),.08); }
.msg.md pre code { background:none; padding:0; font-size:12px; line-height:1.65; display:block;
  white-space:pre; }
.msg.md table { border-collapse:collapse; margin:0 0 10px; display:block; overflow-x:auto;
  max-width:100%; font-size:13px; }
.msg.md th, .msg.md td { border:1px solid rgba(var(--ink-rgb),.12); padding:6px 10px; text-align:left; }
.msg.md th { background:var(--surface-well); font-weight:600; }
.msg.md a { color:var(--blue-600); }
.msg.md img { max-width:100%; border-radius:var(--r-sm); margin:4px 0; }
/* A reply still being written carries a caret, so a pause reads as "typing" rather
   than "stuck". It disappears the moment the message is finalized. */
/* The caret belongs on the last LINE, which is a list item when the reply is
   mid-list — not the list itself, where it would float below the text. */
.msg.bot.streaming > p:last-child::after,
.msg.bot.streaming > h1:last-child::after,
.msg.bot.streaming > h2:last-child::after,
.msg.bot.streaming > h3:last-child::after,
.msg.bot.streaming > ul:last-child > li:last-child::after,
.msg.bot.streaming > ol:last-child > li:last-child::after,
.msg.bot.streaming:empty::after { content:''; display:inline-block; width:2px; height:1em;
  margin-left:2px; vertical-align:text-bottom; background:var(--blue-500);
  animation:msgCaret 1s steps(2) infinite; }
@keyframes msgCaret { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .msg.bot.streaming *::after,
  .msg.bot.streaming::after { animation:none; } }
.msg.tool { align-self:flex-start; background:transparent; padding:2px 6px; color:var(--ink-3);
  font:400 12px/1.55 var(--font-mono); }
/* Auto-mode progress and "N deliverables waiting" arrive as system lines, and they
   are real content, not a chat divider. Centred + shrink-to-fit + pill ends meant a
   one-line status hugged into a small lozenge while a long one filled the column, so
   the same kind of message looked like two different things. They read as one box
   now; only the quieter well background separates them from Chad's own replies. */
.msg.sys { align-self:stretch; background:var(--surface-well); color:var(--ink-2);
  padding:11px 14px; border-radius:var(--r-lg); font:500 12.5px/1.5 var(--font-ui); }
.ask { align-self:stretch; background:var(--cream); border:1px solid rgba(var(--ink-rgb),.05);
  border-left:3px solid var(--amber-500); border-radius:var(--r-lg); padding:14px 16px;
  box-shadow:var(--shadow-raised); }
.ask .q { white-space:pre-wrap; margin-bottom:10px; font-size:13.5px; line-height:1.55; }
.ask .field { display:flex; align-items:center; height:38px; padding:0 12px; background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--r-md);
  transition:box-shadow 120ms var(--ease), border-color 120ms var(--ease); }
.ask .field:focus-within { border-color:var(--blue-400); box-shadow:var(--focus-ring); }
.ask .field input { flex:1; border:none; outline:none; background:transparent;
  font:400 14px/1.4 var(--font-ui); }
.ask .row { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.console { position:fixed; right:20px; bottom:84px; width:380px; max-width:calc(100vw - 40px);
  max-height:56vh; z-index:44; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border-on-white); border-radius:var(--r-lg);
  box-shadow:var(--shadow-overlay); overflow:hidden;
  opacity:0; transform:translateY(10px) scale(.98); visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-pop) var(--ease), transform var(--dur-pop) var(--ease),
             visibility 0s linear var(--dur-pop); }
.console.show { opacity:1; transform:none; visibility:visible; pointer-events:auto;
  transition:opacity var(--dur-pop) var(--ease), transform var(--dur-pop) var(--ease); }
.console-head { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border-on-white); }
.console-head b { font:650 13px/1.3 var(--font-ui); }
/* Which lecture / week this thread is about — the panel says what Chad can see. */
.console-where { flex:1; min-width:0; font:400 11px/1.4 var(--font-mono); color:var(--ink-4);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.console-head .console-clear { width:auto; padding:0 9px; border-radius:var(--r-pill);
  font:500 10.5px/1 var(--font-mono); letter-spacing:.05em; text-transform:uppercase; }
.console-ask { display:flex; gap:8px; align-items:flex-end; padding:10px 12px;
  border-top:1px solid var(--border-on-white); }
.console-ask textarea { flex:1; resize:none; max-height:120px; font:400 13.5px/1.5 var(--font-ui);
  padding:9px 11px; border-radius:var(--r-sm); border:1px solid rgba(var(--ink-rgb),.16);
  background:var(--surface-well); color:var(--ink-1); outline:none; }
.console-ask textarea:focus { border-color:var(--blue-500); }
/* Chad himself — the way in, on the surfaces where he has something to work from. */
/* The artwork IS the button: shown at its own proportions, never cropped, masked or
   stretched into a square. The shadow follows the sticker's own edge (a filter on
   the alpha) rather than boxing a rectangle around it. */
/* One pill, not a sticker with a caption beside it.

   The sticker alone read as a picture rather than a control — it is an 80%
   opaque dark card, so it sat in the corner looking like a thumbnail. Two
   earlier attempts put the label under it and then beside it; both read as two
   floating objects, and stacking it also made the button taller than the window
   had room for. A single pill carrying both is one object, and it borrows the
   shape of "Listen in", which already reads as a button without explanation.

   Shorter than the sticker it replaces (48px against 62px), so it cannot reach
   the bottom edge of a small window the way the stacked version did. */
.chadfab { position:fixed; right:16px; bottom:18px; z-index:60;
  display:flex; align-items:center; gap:10px; padding:6px 16px 6px 6px;
  border:none; border-radius:var(--r-pill); cursor:pointer; line-height:0;
  background:var(--grad-primary); box-shadow:var(--shadow-primary-btn);
  transition:transform .18s var(--ease), opacity .18s var(--ease); }
.chadfab img { height:36px; width:auto; display:block; border-radius:9px; }
.chadfab-lbl { font:600 13px/1 var(--font-ui); letter-spacing:-.01em; color:#fff; }
.chadfab:hover { transform:translateY(-2px) scale(1.03); }
.chadfab:active { transform:translateY(0) scale(.97); }
.chadfab.hide { opacity:0; pointer-events:none; transform:scale(.9); }
@media (prefers-reduced-motion: reduce) { .chadfab { transition:none; } }
.console-head button { border:none; background:transparent; color:var(--ink-3); cursor:pointer; width:26px; height:26px;
  border-radius:8px; display:flex; align-items:center; justify-content:center; }
.console-head button:hover { background:var(--surface-hover); color:var(--ink-1); }
.console .msgs { flex:1; min-height:120px; padding:12px 14px; overflow-y:auto; }
.connect-card { background:var(--surface); border:1px solid var(--border-on-white); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); padding:26px 28px; max-width:520px; margin:6px 0 16px; }
.connect-card h3 { font:700 19px/1.3 var(--font-ui); letter-spacing:-.01em; margin-bottom:8px; }
.connect-card p { color:var(--ink-2); font:400 13.5px/1.6 var(--font-ui); margin-bottom:16px; }
.connect-card .row { display:flex; gap:10px; flex-wrap:wrap; }
.ws-head b { flex:1; font:400 11px/1.3 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); }
.filter { display:flex; align-items:center; gap:8px; height:32px; margin:0 6px 8px; padding:0 10px;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-md);
  transition:box-shadow 120ms var(--ease), border-color 120ms var(--ease); }
.filter:focus-within { border-color:var(--blue-400); box-shadow:var(--focus-ring); }
.filter input { flex:1; border:none; outline:none; background:transparent; font:400 13px/1.3 var(--font-ui); min-width:0; }
.tb-assignment { background:var(--blue-100); color:var(--blue-600); }
.tb-project { background:var(--butter-100); color:var(--butter-ink); }
.tb-reading { background:var(--green-100); color:var(--green-ink); }
.tb-discussion { background:var(--surface-well); color:var(--ink-2); }
.tb-exam { background:var(--red-100); color:var(--red-ink); }
.tb-external { background:var(--blue-100); color:var(--blue-600); }
.due-chip { font:400 10.5px/1 var(--font-mono); color:var(--ink-3); padding:3px 6px; border-radius:6px;
  cursor:pointer; flex:none; }
.due-chip:hover { background:var(--surface-well); color:var(--ink-2); }
.due-chip.none { color:var(--ink-4); }
.mat { display:flex; align-items:center; gap:8px; padding:6px 8px 6px 20px; border-radius:var(--r-sm); }
.mat:hover { background:var(--surface-hover); }
.mat .fname { flex:1; font:400 12px/1.3 var(--font-mono); color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mat .fsize { font:400 10.5px/1 var(--font-mono); color:var(--ink-4); flex:none; }
.addrow { padding:4px 8px 8px 20px; }
.addbtn { display:inline-flex; align-items:center; gap:6px; background:transparent; border:none;
  color:var(--ink-3); font:600 11.5px/1 var(--font-ui); cursor:pointer; padding:5px 6px; border-radius:6px; }
.addbtn:hover { background:var(--surface-hover); color:var(--blue-600); }
.dirpath { padding:10px 14px; border-top:1px solid var(--border); font:400 11px/1.4 var(--font-mono);
  color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:none; }
.gate { margin:6px; background:var(--surface); border:1px solid var(--border-on-white);
  border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:18px; }
.gate h4 { font:650 14px/1.35 var(--font-ui); margin-bottom:6px; }
.gate p { font:400 12.5px/1.55 var(--font-ui); color:var(--ink-2); margin-bottom:14px; }
.gate .btn { width:100%; margin-bottom:8px; }
.spec-head { display:flex; align-items:center; gap:12px; width:100%; padding:11px 16px; border:none;
  background:transparent; cursor:pointer; text-align:left; }
.spec-head:hover { background:var(--surface-hover); }
.spec-tl { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.spec-title { font:600 14.5px/1.3 var(--font-ui); color:var(--ink-1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.spec-toggle { flex:none; font:600 12.5px/1 var(--font-ui); color:var(--blue-500);
  border:none; background:transparent; padding:4px 6px; cursor:pointer; }
.spec-head:hover .spec-toggle { color:var(--blue-600); }
.spec-body { padding:2px 16px 16px; font:400 13.5px/1.6 var(--font-ui); color:var(--ink-2);
  max-height:340px; overflow-y:auto; }
.spec-body.md { max-width:none; font-size:13.5px; }
.spec-body.md h1, .spec-body.md h2 { font-size:15px; margin:10px 0 5px; }
.spec-body.md h3 { font-size:14px; margin:8px 0 4px; }
.spec-body.md p { margin:6px 0; }
.spec-body.md ul, .spec-body.md ol { margin:6px 0 6px 20px; }
.spec-body.md img { display:block; max-width:100%; height:auto; border-radius:8px;
  margin:8px 0; border:1px solid rgba(var(--ink-rgb),.1); }
.spec-body.md table { border-collapse:collapse; margin:8px 0; font-size:12.5px; }
.spec-body.md th, .spec-body.md td { border:1px solid rgba(var(--ink-rgb),.15); padding:5px 9px;
  text-align:left; }
.spec-body.md th { background:rgba(var(--ink-rgb),.04); font-weight:600; }
.spec-body.md pre { background:rgba(var(--ink-rgb),.05); border-radius:8px; padding:10px 12px;
  overflow-x:auto; font:400 12px/1.5 var(--font-mono); margin:8px 0; }
.spec-body.md code { font:400 12px/1.5 var(--font-mono); background:rgba(var(--ink-rgb),.06);
  border-radius:4px; padding:1px 4px; }
.spec-body.md pre code { background:none; padding:0; }
.spec-body.md blockquote { border-left:3px solid rgba(var(--ink-rgb),.15); padding-left:10px;
  color:var(--ink-25); margin:6px 0; }
.provbanner b { font-weight:700; }
.provbanner .prov-x { flex:none; margin-left:auto; width:22px; height:22px; border:none; border-radius:6px;
  background:transparent; color:var(--amber-ink); font:600 12px/1 var(--font-ui); cursor:pointer; opacity:.65; }
.provbanner .prov-x:hover { background:rgba(224,145,42,.18); opacity:1; }
.inv-banner b { font-weight:700; }
.inv-banner .prov-list li { color:inherit; }
.inv-banner .prov-x { flex:none; margin-left:auto; width:22px; height:22px; border:none;
  border-radius:6px; background:transparent; color:inherit; font:600 12px/1 var(--font-ui);
  cursor:pointer; opacity:.65; }
.inv-banner .prov-x:hover { background:rgba(198,58,58,.16); opacity:1; }
.stg-cardhead { display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px; }
.stg-saved { font:400 11px/1 var(--font-mono); letter-spacing:.05em; text-transform:uppercase;
  color:var(--green-ink); opacity:0; transition:opacity .2s var(--ease); }
.stg-saved.on { opacity:1; }
.stg-compiled { margin:10px 0 0; padding:12px 14px; border-radius:10px;
  background:rgba(255,255,255,.06); color:var(--panel-dark-soft);
  font:400 12.5px/1.7 var(--font-mono); white-space:pre-wrap; }
.blockedbanner { flex:none; display:flex; align-items:flex-start; gap:10px; margin:8px 18px 2px;
  background:rgba(224,74,61,.08); border:1px solid rgba(224,74,61,.38); border-radius:10px;
  padding:11px 14px; font:400 13px/1.55 var(--font-ui); color:#a3312a; }
.blockedbanner b { font-weight:700; }
.blockedbanner .blk-reason { margin:4px 0 0; font-size:12.5px; color:#8a2a24; }
.blockedbanner .blk-actions { display:flex; gap:8px; margin-top:9px; flex-wrap:wrap; }
.alertrow.read .al p:first-child { font-weight:500; color:var(--ink-25); }
.alertrow.read .ai { opacity:.75; }
.alertrow .nx { flex:none; width:22px; height:22px; border:none; border-radius:6px; background:transparent;
  color:var(--ink-3); font:600 11px/1 var(--font-ui); cursor:pointer; opacity:0; transition:opacity .12s; }
.alertrow:hover .nx { opacity:.8; }
.alertrow .nx:hover { background:rgba(var(--ink-rgb),.08); color:var(--ink-1); }
.doc-shade { position:fixed; inset:0; z-index:90; background:rgba(20,22,29,.55);
  display:flex; align-items:center; justify-content:center;
  animation:veilIn var(--dur-veil) var(--ease) both; }
.doc-card { background:var(--surface); border-radius:16px; width:min(720px,90vw);
  max-height:82vh; display:flex; flex-direction:column; box-shadow:0 24px 70px rgba(20,22,29,.35);
  overflow:hidden; animation:riseIn var(--dur-veil) var(--ease) both; }
.doc-card .dc-head { display:flex; align-items:center; gap:12px; padding:14px 18px;
  border-bottom:1px solid rgba(var(--ink-rgb),.08); }
.doc-card .dc-head b { flex:1; font-size:14.5px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.doc-card .dc-x { flex:none; width:26px; height:26px; border:none; border-radius:8px;
  background:transparent; color:var(--ink-3); font:600 13px/1 var(--font-ui); cursor:pointer; }
.doc-card .dc-x:hover { background:rgba(var(--ink-rgb),.08); color:var(--ink-1); }
.doc-card .dc-body { flex:1; overflow-y:auto; padding:6px 20px 16px;
  font:400 13.5px/1.6 var(--font-ui); color:var(--ink-2); }
.doc-card .spec-body { max-height:none; padding:6px 20px 16px; }
.doc-card .dc-foot { padding:12px 18px; border-top:1px solid rgba(var(--ink-rgb),.08);
  display:flex; justify-content:space-between; align-items:center; }
.doc-card.credit-card { width:min(440px,92vw); }
.doc-card .dc-foot-actions { display:flex; gap:8px; }
.doc-card:has(.dc-frame), .doc-card:has(.dc-sheet), .doc-card:has(.dc-docx),
.doc-card:has(.dc-pptx), .doc-card:has(.dc-code) { width:min(1040px,94vw); }
.doc-card:has(.dc-frame), .doc-card:has(.dc-pptx), .doc-card:has(.dc-docx) { max-height:90vh; }
.dc-loading { padding:28px 4px; color:var(--ink-4); text-align:center;
  font:400 13px/1.5 var(--font-ui); }
.doc-card .dc-code { padding:0; }
.dc-pre { margin:0; padding:16px 20px; overflow:auto; white-space:pre; tab-size:4;
  background:var(--surface); font:400 12.5px/1.6 var(--font-mono); color:var(--ink-2); }
.dc-pre code { font:inherit; background:none; padding:0; }
.doc-card .dc-frame { padding:0; }
.dc-iframe { width:100%; height:76vh; border:0; display:block; background:#fff; }
.doc-card .dc-media { display:flex; align-items:center; justify-content:center;
  padding:18px; background:rgba(var(--ink-rgb),.03); }
.dc-img { max-width:100%; max-height:72vh; border-radius:8px;
  box-shadow:0 6px 24px rgba(20,22,29,.18); }
.dc-audio { width:min(520px,100%); }
.dc-video { max-width:100%; max-height:72vh; border-radius:8px; background:#000; }
.doc-card .dc-docx { padding:0; background:#eef0f3; }
.dc-docx .docx-wrapper { background:transparent; padding:14px 0; }
.dc-docx .docx-wrapper > section.docx { margin:0 auto 14px; background:#fff;
  box-shadow:0 4px 18px rgba(20,22,29,.16); }
.doc-card .dc-sheet { padding:0; display:flex; flex-direction:column; }
.dc-tabs { display:flex; gap:4px; padding:8px 12px 0; overflow-x:auto; flex:none;
  border-bottom:1px solid rgba(var(--ink-rgb),.08); }
.dc-tab { border:none; background:transparent; padding:6px 12px; border-radius:8px 8px 0 0;
  font:600 12px/1 var(--font-ui); color:var(--ink-4); cursor:pointer; white-space:nowrap; }
.dc-tab:hover { background:rgba(var(--ink-rgb),.05); color:var(--ink-2); }
.dc-tab.on { color:var(--blue-500); background:rgba(var(--ink-rgb),.05); }
.dc-sheetwrap { overflow:auto; flex:1; padding-bottom:8px; }
.dc-sheetwrap table { border-collapse:collapse; width:max-content;
  font:400 12px/1.4 var(--font-ui); color:var(--ink-2); }
.dc-sheetwrap td, .dc-sheetwrap th { border:1px solid rgba(var(--ink-rgb),.12);
  padding:4px 8px; min-width:52px; max-width:320px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.dc-sheetwrap tr:first-child td { background:rgba(var(--ink-rgb),.04); font-weight:600; }
.doc-card .dc-pptx { padding:14px; overflow:auto; background:#eef0f3; }
.dc-pptx-host { margin:0 auto; }
.dc-pptx-host section, .dc-pptx-host .pptx-preview-wrapper > * {
  margin:0 auto 14px; background:#fff; box-shadow:0 4px 18px rgba(20,22,29,.16); }
.doc-card .dc-fallback { display:flex; align-items:center; justify-content:center; }
.dc-fb { text-align:center; padding:40px 20px; }
.dc-fb-ic { font-size:40px; margin-bottom:12px; }
.dc-fb-t { font:400 14px/1.5 var(--font-ui); color:var(--ink-3); margin-bottom:18px; }
.dc-fb-actions { display:flex; gap:10px; justify-content:center; }
.mat-file { cursor:pointer; }
/* The tour's dim is ONE element: the ring's giant box-shadow punches a clean
   spotlight around the target and glides with it — four separate shade rects
   composited with visible seams in the desktop WebKit shell. The blocker is an
   invisible full-screen layer that swallows clicks (and forwards clicks inside
   the cutout to the real control); it turns into the veil for the final modal. */
.tour-blocker { position:fixed; inset:0; z-index:79; background:transparent;
  transition:background .3s var(--ease); }
.tour-blocker.dim { background:rgba(20,22,29,.68); }
.tour-card { position:fixed; z-index:81; width:380px; max-width:calc(100vw - 32px);
  background:var(--surface); border:1px solid var(--border-on-white); border-radius:var(--r-lg);
  box-shadow:var(--shadow-overlay); padding:20px 22px; animation:obPop .3s ease both;
  transition:left .25s var(--ease), top .25s var(--ease); }
.tour-card .tt { font:700 18px/1.25 var(--font-ui); letter-spacing:-.01em; margin-bottom:8px; }
.tour-card .tc { font:400 13.5px/1.6 var(--font-ui); color:var(--ink-2); }
.tour-card .tf { display:flex; align-items:center; gap:12px; margin-top:16px; }
.tour-card .tdots { display:flex; gap:5px; margin-right:auto; }
.tour-card .td { width:6px; height:6px; border-radius:50%; background:var(--ink-4); display:inline-block; }
.tour-card .td.on { background:var(--blue-500); }
.tour-card .th { font:400 11px/1.4 var(--font-mono); color:var(--blue-600); }
.ed-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; color:var(--ink-3); text-align:center; padding:30px;
  animation:fadeIn var(--dur-veil) var(--ease); }
#edPanel { animation:fadeIn var(--dur-veil) var(--ease); }
.ed-empty .big { font:600 16px/1.4 var(--font-ui); color:var(--ink-2); }
.em-instr { font:400 12.5px/1.3 var(--font-ui); background:none; border:none; padding:0; cursor:default; }
.em-instr.ok { color:var(--ink-3); }
.em-instr.bad { color:var(--red-600); cursor:pointer; font-weight:500; }
.em-instr.bad:hover { text-decoration:underline; }
.modetog { margin-left:auto; display:flex; gap:2px; background:var(--surface-well); border-radius:var(--r-pill); padding:2px; }
.modetog button { height:26px; padding:0 12px; border:none; background:transparent; border-radius:var(--r-pill);
  font:600 12px/1 var(--font-ui); color:var(--ink-2); cursor:pointer; }
.modetog button.on { background:var(--surface); color:var(--blue-600); box-shadow:var(--shadow-card); }
.ed-wys { flex:1; min-height:0; overflow-y:auto; background:var(--surface); }
.ed-wys .bn-editor { padding:18px 54px 40px; }
.bn-container,
.bn-container[data-color-scheme="light"],
.bn-container[data-color-scheme="dark"] {
  --bn-font-family: var(--font-ui);
  --bn-border-radius: 9px;
  --bn-colors-editor-text: var(--ink-1);
  --bn-colors-editor-background: var(--surface);
  --bn-colors-menu-text: var(--ink-1);
  --bn-colors-menu-background: var(--surface);
  --bn-colors-hovered-background: var(--surface-hover);
  --bn-colors-hovered-text: var(--ink-1);
  --bn-colors-selected-text: #fff;
  --bn-colors-selected-background: var(--blue-500);
  --bn-colors-border: var(--border-strong);
  --bn-colors-side-menu: var(--ink-3);
  --bn-colors-tooltip-text: var(--paper);
  --bn-colors-tooltip-background: var(--ink-1);
}
.ed-foot .sp { flex:1; }
.md { max-width:760px; font:400 14.5px/1.7 var(--font-ui); color:var(--ink-1); }
.md h1 { font:700 24px/1.25 var(--font-ui); letter-spacing:-.02em; margin:16px 0 10px; }
.md h2 { font:650 19px/1.3 var(--font-ui); margin:14px 0 8px; }
.md h3 { font:600 16px/1.35 var(--font-ui); margin:12px 0 6px; }
.md p { margin:8px 0; }
.md ul, .md ol { margin:8px 0 8px 22px; }
.md li { margin:3px 0; }
.md blockquote { border-left:3px solid var(--border-strong); padding:2px 14px; color:var(--ink-2); margin:10px 0; }
.md code { font:500 12.5px/1.5 var(--font-mono); background:var(--surface-well); padding:1px 5px; border-radius:5px; }
.md pre { background:var(--surface-well); border-radius:var(--r-md); padding:14px; overflow-x:auto; margin:10px 0; }
.md pre code { background:transparent; padding:0; }
.md hr { border:none; border-top:1px solid var(--border); margin:16px 0; }
.md a { color:var(--blue-600); }
.md table { border-collapse:collapse; margin:12px 0; font-size:13.5px; width:auto; }
.md th, .md td { border:1px solid var(--border-strong); padding:6px 12px; text-align:left; }
.md th { background:var(--surface-well); font-weight:650; }
.md .task { list-style:none; margin-left:-18px; }
.md .task input { margin-right:8px; }
.ws-hint { padding:16px; color:var(--ink-3); font:400 13px/1.6 var(--font-ui); text-align:center; }
.panel { background:var(--surface); border:1px solid var(--border-on-white); border-radius:var(--r-lg); box-shadow:var(--shadow-card); }
.hovertip { position:fixed; z-index:90; max-width:340px; display:none; flex-direction:column; gap:3px;
  background:var(--ink-1); color:var(--paper); border-radius:9px; padding:9px 12px;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.5); pointer-events:none; animation:obPop .15s ease both; }
.hovertip.show { display:flex; }
.hovertip .ht-t { font:600 12.5px/1.4 var(--font-ui); }
.hovertip .ht-m { font:400 10px/1.3 var(--font-mono); letter-spacing:.04em; text-transform:uppercase;
  color:rgba(244,241,234,.65); }
.overlay { position:fixed; inset:0; background:rgba(20,22,29,.28); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:50; }
.overlay.show { display:flex; }
.card { background:var(--surface); border:1px solid var(--border-on-white); border-radius:var(--r-lg);
  box-shadow:var(--shadow-overlay); padding:30px; width:460px; max-width:92vw; }
.card h2 { font:700 22px/1.25 var(--font-ui); margin-bottom:6px; }
.card p { color:var(--ink-2); font:400 13.5px/1.55 var(--font-ui); margin:6px 0 16px; }
.card code { font:500 12.5px/1 var(--font-mono); background:var(--surface-well); padding:1px 5px; border-radius:5px; }
.card input { width:100%; height:40px; padding:0 14px; border-radius:var(--r-md); border:1px solid var(--border-strong);
  font:400 14px/1 var(--font-ui); margin-bottom:12px; outline:none; }
.card input:focus { border-color:var(--blue-400); box-shadow:var(--focus-ring); }
.card .ok { color:var(--green-ink); font-weight:600; }
.card .err { color:var(--red-ink); font:400 13px/1.4 var(--font-ui); margin:2px 0 10px; }
.card hr { border:none; border-top:1px solid var(--border); margin:18px 0; }
.card .btn.primary { width:100%; }
.ob { position:fixed; inset:0; z-index:70; background:var(--paper); display:none;
  flex-direction:column; overflow:hidden; }
.ob.show { display:flex; animation:veilIn var(--dur-veil) var(--ease) both; }
.ob-top { flex:none; display:flex; align-items:center; justify-content:space-between; padding:24px 34px; gap:20px; }
.ob-top .wordmark { font-size:22px; }
.ob-steps { display:flex; align-items:center; gap:18px; }
.ob-steps .obdash { opacity:.4; }
.ob-steps span[id] { transition:color .3s; }
.ob-steps .on { color:var(--blue-500); font-weight:600; }
.ob-steps .done { color:var(--ink-1); }
.ob-body { flex:1 1 auto; position:relative; overflow:hidden; }
.ob-center { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 30px; animation:obRise .7s ease both; }
.ob-hero { font:800 clamp(2.4rem,6.5vw,5.4rem)/0.92 var(--font-ui); letter-spacing:-.04em;
  text-transform:uppercase; }
.ob-sub { max-width:520px; margin:28px auto 0; font-size:18px; line-height:1.5; font-weight:500; color:var(--ink-2); }
.ob-fine { font:400 11px/1.6 var(--font-mono); color:var(--ink-3); margin-top:20px; }
.ob-step { height:100%; display:flex; align-items:center; justify-content:center; padding:0 30px; overflow-y:auto; }
.ob-panel { width:100%; max-width:480px; animation:obRise .6s ease both; }
.ob-panel.wide { max-width:720px; }
.ob-panel h2 { font:700 40px/1.05 var(--font-ui); letter-spacing:-.03em; margin-bottom:12px; }
.ob-panel .lead { font-size:16px; line-height:1.5; color:var(--ink-2); margin-bottom:28px; }
.ob-card { background:var(--surface); border:1px solid rgba(var(--ink-rgb),.1); border-radius:18px;
  padding:26px; box-shadow:0 20px 50px -30px rgba(20,22,29,.5); }
.ob-card .ch { display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.ob-howto { position:absolute; top:18px; right:18px; z-index:2; font:600 11px/1 var(--font-mono);
  letter-spacing:.05em; text-transform:uppercase; color:#2f6bff; background:transparent;
  border:1px solid #2f6bff; border-radius:100px; padding:9px 15px; cursor:pointer;
  transition:background .18s ease, color .18s ease; }
.ob-howto:hover { background:#2f6bff; color:#fff; }
.hd-shade { position:fixed; inset:0; z-index:200; display:flex; justify-content:flex-end;
  background:rgba(20,22,29,0); transition:background .35s ease; }
.hd-shade.on { background:rgba(20,22,29,.5); }
.hd-drawer { position:relative; width:700px; max-width:96vw; height:100%; background:#f4f1ea;
  box-shadow:-30px 0 80px -30px rgba(20,22,29,.55); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); }
.hd-shade.on .hd-drawer { transform:translateX(0); }
.hd-head { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 22px; border-bottom:1px solid rgba(21,19,15,.1); }
.hd-hl { display:flex; align-items:baseline; gap:10px; min-width:0; }
.hd-kicker { font:600 11px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:#8a8378; }
.hd-sep { color:rgba(21,19,15,.28); }
.hd-title { font:700 18px/1.1 var(--font-ui); letter-spacing:-.01em; color:#15130f;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hd-close { flex:none; font:600 11px/1 var(--font-mono); letter-spacing:.05em; text-transform:uppercase;
  color:#4a453d; background:transparent; border:1px solid rgba(21,19,15,.18); border-radius:100px;
  padding:9px 15px; cursor:pointer; transition:border-color .18s ease, color .18s ease; }
.hd-close:hover { border-color:rgba(21,19,15,.4); color:#15130f; }
.hd-body { flex:1; overflow:auto; background:#f4f1ea; }
.hd-scale { width:691px; height:706px; margin:0 auto; }
.hd-frame { width:960px; height:980px; border:0; display:block; transform:scale(.72); transform-origin:0 0; }
.ob-logo { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  color:#fff; font:800 22px/1 var(--font-ui); flex:none; }
.ob-btn { width:100%; font:400 13px/1 var(--font-mono); letter-spacing:.04em; text-transform:uppercase;
  border:none; padding:16px; border-radius:12px; cursor:pointer; }
.ob-btn.dark { background:var(--ink-1); color:#fff; }
.ob-btn.blue { background:var(--grad-primary); color:#fff; }
.ob-btn:disabled { opacity:.5; cursor:default; }
.ob-wait { display:flex; align-items:center; justify-content:center; gap:12px; padding:16px;
  border:1px solid rgba(var(--ink-rgb),.12); border-radius:12px; font:400 12.5px/1.4 var(--font-mono); color:var(--ink-2); }
.ob-ok { display:flex; align-items:center; justify-content:center; gap:10px; padding:16px;
  background:rgba(63,174,106,.12); border-radius:12px; font:400 13px/1 var(--font-mono);
  color:var(--green-ink); animation:obPop .4s ease both; }
.au-spin { display:block; margin:0 auto 18px; width:22px; height:22px; }
.spin { width:16px; height:16px; border:2px solid rgba(var(--ink-rgb),.2); border-top-color:var(--blue-500);
  border-radius:50%; animation:obSpin .7s linear infinite; flex:none; }
.ob-lms { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:24px; }
.ob-lms > div { background:var(--surface); border:1.5px solid rgba(var(--ink-rgb),.1); border-radius:14px;
  padding:22px 12px; text-align:center; cursor:pointer; transition:border-color .2s, background .2s; position:relative; }
.ob-lms > div:not(.sel):hover { border-color:rgba(var(--ink-rgb),.3); }
.ob-lms > div.sel { border-color:var(--blue-500); background:rgba(47,107,255,.06); }
.ob-lms > div.dis { opacity:.5; cursor:default; }
.ob-lms .ln { font:800 19px/1 var(--font-ui); }
/* Platform brand colors live here (not inline) so dark mode can rescue the ones
   that vanish on a dark ground — Blackboard's near-black being the case in point. */
.ob-lms .ln-d2l { color:#e0603a; }
.ob-lms .ln-canvas { color:#e2483d; }
.ob-lms .ln-blackboard { color:#2f2f2f; }
.ob-lms .ln-moodle { color:#f77d0a; }
html[data-theme="dark"] .ob-lms .ln-blackboard { color:#cfd3dc; }
.ob-lms .ls { font:400 10px/1 var(--font-mono); color:var(--ink-3); margin-top:8px; }
.ob-lms .soon-tag { position:absolute; top:8px; right:8px; font:400 8.5px/1 var(--font-mono);
  letter-spacing:.05em; text-transform:uppercase; background:rgba(var(--ink-rgb),.08); color:var(--ink-25);
  padding:3px 6px; border-radius:var(--r-pill); }
.ob-inputs input { width:100%; height:44px; padding:0 14px; border-radius:12px;
  border:1px solid var(--border-strong); font:400 14px/1 var(--font-ui); margin-bottom:10px;
  outline:none; background:var(--surface); }
.ob-inputs input:focus { border-color:var(--blue-400); box-shadow:var(--focus-ring); }
.ob-safe { font:400 13px/1.5 var(--font-ui); color:var(--green-ink); background:var(--green-100);
  border-radius:10px; padding:10px 14px; margin:-8px 0 20px; }
.ob-urlex { font:400 11px/1 var(--font-mono); color:var(--ink-3); margin:-2px 0 12px 4px; }
.ob-endtag { font:500 9.5px/1 var(--font-mono); letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); background:rgba(var(--ink-rgb),.07); border-radius:var(--r-pill); padding:3px 7px; }
/* The "continue without finishing" escape next to the blue Retry — visible on
   the dark sync panel, clearly secondary. */
/* lives on the DARK sync feed panel — light ink, always */
.ob-failcard { margin-top:14px; background:rgba(224,145,42,.16); border:1px solid rgba(224,145,42,.5);
  border-radius:12px; padding:12px 14px; text-align:left; animation:obRise .35s ease both; }
.ob-failcard .fc-t { font:700 13.5px/1.3 var(--font-ui); color:#f2b96a; }
.ob-failcard .fc-why { font:400 12.5px/1.5 var(--font-ui); color:rgba(244,241,234,.78); margin-top:3px; }
.ob-failcard .fc-fix { font:400 12.5px/1.5 var(--font-ui); color:rgba(244,241,234,.95); margin-top:5px; }
.ob-failcard .fc-fix b { color:#f2b96a; }
.ob-failcard .fc-help { font:400 11px/1.5 var(--font-ui); color:rgba(244,241,234,.55); margin-top:7px; }
.ob-failcard .fc-help a { color:#8fb2ff; text-decoration:none; }
.ob-failcard .fc-help a:hover { text-decoration:underline; }
.ob-retry-alt { display:block; background:transparent; border:1px solid rgba(244,241,234,.3);
  color:rgba(244,241,234,.85); font:500 12px/1 var(--font-ui); border-radius:var(--r-pill);
  padding:10px 16px; cursor:pointer; }
.ob-retry-alt:hover { border-color:rgba(244,241,234,.6); color:#fff; }
.ob-sync { height:100%; display:flex; flex-direction:column; padding:4px 34px 30px; }
.ob-sync-head { flex:none; margin-bottom:16px; }
.ob-sync-head h2 { font:700 30px/1.1 var(--font-ui); letter-spacing:-.03em; }
.ob-sync-grid { flex:1 1 auto; display:grid; grid-template-columns:1.55fr 1fr; gap:22px; min-height:0; }
.ob-stream { position:relative; background:var(--surface); border:1px solid rgba(var(--ink-rgb),.12);
  border-radius:16px; overflow:hidden; box-shadow:0 30px 70px -30px rgba(20,22,29,.5);
  display:flex; flex-direction:column; }
.ob-stream-head { flex:none; display:flex; align-items:center; gap:12px; padding:12px 16px;
  background:var(--paper-2); border-bottom:1px solid rgba(var(--ink-rgb),.08); }
.ob-stream-head .lights { display:flex; gap:7px; }
.ob-stream-head .lights span { width:11px; height:11px; border-radius:50%; }
.ob-stream-head .urlbar { flex:1; background:var(--surface); border:1px solid rgba(var(--ink-rgb),.1);
  border-radius:var(--r-pill); padding:7px 14px; font:400 12px/1 var(--font-mono); color:var(--ink-25);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ob-stream-head .agent-tag { font:400 10px/1 var(--font-mono); color:var(--red-ink);
  background:var(--red-100); padding:4px 9px; border-radius:var(--r-pill); flex:none; }
.ob-stream .msgs { background:var(--surface-2); }
.ob-progress { position:relative; background:var(--panel-dark); color:var(--panel-dark-ink);
  border-radius:16px; padding:24px 22px; display:flex; flex-direction:column; overflow:hidden; }
.ob-progress .ph-row { display:flex; justify-content:space-between; align-items:baseline; }
.ob-progress .ph-row .mono-label { color:var(--panel-dark-mut); }
.ob-pct { font:400 13px/1 var(--font-mono); color:var(--blue-400); }
.ob-bar { height:6px; background:rgba(255,255,255,.12); border-radius:var(--r-pill); margin-top:10px; overflow:hidden; }
.ob-bar i { display:block; height:100%; width:0%; background:linear-gradient(90deg,#3d78ff,#5a8bff);
  border-radius:var(--r-pill); transition:width .5s ease; }
.ob-cap { font:400 12px/1.5 var(--font-mono); color:var(--panel-dark-soft); margin-top:14px; min-height:18px; }
.ob-cap .cursor { animation:obBlink 1s steps(1) infinite; }
.ob-feed { flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column; gap:7px;
  margin-top:16px; padding-right:4px; }
.ob-bubble { align-self:flex-start; max-width:100%; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.07); border-radius:12px 12px 12px 4px; padding:9px 13px;
  font:400 12.5px/1.5 var(--font-ui); color:var(--panel-dark-ink); animation:obRise .35s ease both; }
.ob-feed .msg.sys { background:rgba(255,255,255,.1); color:var(--panel-dark-soft); }
.ob-ask { border-left:3px solid #e6b23a; background:rgba(230,178,58,.1);
  border-top:1px solid rgba(230,178,58,.28); border-right:1px solid rgba(230,178,58,.28);
  border-bottom:1px solid rgba(230,178,58,.28); max-width:100%; }
.ob-ask-t { font-weight:600; color:var(--panel-dark-ink); }
.ob-ask-d { color:var(--panel-dark-soft); margin-top:3px; font-size:12px; }
.ob-ask-row { display:flex; gap:8px; margin-top:10px; }
.ob-ask-btn { font:400 11px/1 var(--font-mono); letter-spacing:.03em; text-transform:uppercase;
  border-radius:8px; padding:8px 12px; cursor:pointer; border:1px solid transparent; }
.ob-ask-btn.up { background:#e6b23a; color:#1a1a1a; font-weight:600; }
.ob-ask-btn.up:hover { background:#f0bf4d; }
.ob-ask-btn.skip { background:transparent; color:var(--panel-dark-soft);
  border-color:rgba(255,255,255,.18); }
.ob-ask-btn.skip:hover { color:var(--panel-dark-ink); border-color:rgba(255,255,255,.32); }
.ob-feed .msg.me { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.12); color:var(--panel-dark-ink); }
.ob-feed .msg.bot { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.07); color:var(--panel-dark-ink); }
.ob-feed .ask { background:var(--surface); color:var(--ink-1); }
.ob-done { position:absolute; inset:0; background:rgba(20,22,29,.96); backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px); display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:30px; opacity:0; pointer-events:none;
  transition:opacity .5s ease; border-radius:16px; }
.ob-done.show { opacity:1; pointer-events:auto; }
.ob-done .bigtick { width:70px; height:70px; border-radius:50%; background:var(--grad-primary);
  display:flex; align-items:center; justify-content:center; font-size:34px; color:#fff;
  margin-bottom:22px; box-shadow:0 12px 30px -8px rgba(47,107,255,.7); }
.ob-done h3 { font:700 26px/1.15 var(--font-ui); letter-spacing:-.02em; }
.ob-done .dm { font:400 13px/1.5 var(--font-mono); color:var(--panel-dark-soft); margin-top:8px; }
.ob-done button { margin-top:26px; font:400 13px/1 var(--font-mono); letter-spacing:.04em;
  text-transform:uppercase; background:#fff; color:var(--panel-dark); border:none;
  padding:15px 30px; border-radius:var(--r-pill); cursor:pointer; }
.ob-confetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.ob-scan { background:var(--surface); border:1px solid rgba(var(--ink-rgb),.1); border-radius:18px;
  padding:26px 24px; box-shadow:0 18px 44px -22px rgba(var(--ink-rgb),.25); animation:obRise .5s ease both; }
.ob-scan-top { display:flex; align-items:center; gap:18px; }
.ob-scan-pct { font:800 54px/1 var(--font-ui); letter-spacing:-.04em; color:var(--ink-1);
  min-width:112px; font-variant-numeric:tabular-nums; }
.ob-scan-pct i { font:400 16px/1 var(--font-mono); font-style:normal; color:var(--blue-500); margin-left:2px; }
.ob-scan .ob-bar { background:rgba(var(--ink-rgb),.1); margin-top:0; }
.ob-stages { display:flex; flex-direction:column; margin-top:22px; }
.ob-stage { display:flex; align-items:center; gap:12px; padding:11px 2px;
  border-top:1px solid rgba(var(--ink-rgb),.07); opacity:.38; transition:opacity .4s ease; }
.ob-stage:first-child { border-top:none; }
.ob-stage.on, .ob-stage.done { opacity:1; }
.ob-stage p { font:400 13.5px/1.4 var(--font-ui); color:var(--ink-2); }
.ob-stage .tick { width:20px; height:20px; border-radius:50%; flex:none; display:flex;
  align-items:center; justify-content:center; font-size:10px; color:#fff;
  border:1.5px solid rgba(var(--ink-rgb),.25); transition:background .3s ease, border-color .3s ease; }
.ob-stage.on:not(.done) .tick { border-color:var(--blue-500); animation:obScanPulse 1.1s ease infinite; }
.ob-stage.done .tick { background:var(--grad-primary); border-color:transparent; }
.ob-stage.done .tick::before { content:'✓'; }
.ob-pay { background:var(--panel-dark); color:var(--panel-dark-ink); border-radius:20px;
  padding:26px 24px; box-shadow:0 24px 60px -24px rgba(20,22,29,.5); animation:obRise .5s ease both; }
.ob-pay-price { display:flex; align-items:baseline; gap:10px; }
.ob-pay-price .amt { font:800 46px/1 var(--font-ui); letter-spacing:-.03em; }
.ob-pay-price .per { font:400 12px/1 var(--font-mono); color:var(--panel-dark-mut); }
/* What happens when the free week ends. Sits directly under the price so the
   two are read as one offer — a trial whose end date is buried reads as a trick. */
.ob-pay-then { margin-top:6px; font:400 12px/1.5 var(--font-mono);
  color:var(--panel-dark-mut); }
.ob-pay-rows { display:flex; flex-direction:column; gap:11px; margin-top:20px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12); }
.ob-pay-row { display:flex; gap:11px; align-items:flex-start; }
.ob-pay-row .tick { width:20px; height:20px; border-radius:50%; background:rgba(90,139,255,.18);
  color:var(--blue-400); font-size:11px; display:flex; align-items:center; justify-content:center;
  flex:none; margin-top:1px; }
.ob-pay-row p { font:400 14px/1.45 var(--font-ui); color:var(--panel-dark-ink); }
.ob-pay-fine { font:400 10.5px/1.6 var(--font-mono); color:var(--panel-dark-mut); margin-top:12px;
  text-align:center; }
.ob-course { background:var(--surface); border:1.5px solid rgba(var(--ink-rgb),.08); border-radius:14px;
  padding:15px 20px; margin-bottom:10px; transition:border-color .3s ease; }
.ob-course.warn { border-color:rgba(224,145,42,.5); }
.ob-course.okc { border-color:rgba(63,174,106,.55); }
.ob-course .cr { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.ob-course .ci { display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.ob-course .ci > div { min-width:0; }
.ob-course .cdot { width:8px; height:8px; border-radius:50%; flex:none; }
.ob-course .cn { font-weight:700; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ob-course .cm { font:400 11px/1.4 var(--font-mono); color:var(--ink-3); margin-top:2px; }
.ob-course .cx { display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:14px; flex-wrap:wrap; }
.ob-course .cx p { font-size:13.5px; line-height:1.5; color:var(--ink-25); max-width:40ch; }
.ob-course .cright { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:none; }
.ob-course .cnote { font-size:12.5px; line-height:1.5; color:var(--ink-25); max-width:44ch; margin-top:6px; }
.ob-needpill { display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  font:500 12px/1 var(--font-mono); letter-spacing:.02em; border:none; cursor:pointer;
  padding:9px 14px; border-radius:var(--r-pill); background:var(--amber-100); color:var(--amber-ink,#8a6d1e); }
.ob-needpill .chev { font-size:10px; }
.ob-course.errflash { animation:obErrFlash 1.2s ease; border-color:var(--red-500,#e2483d) !important; }
@keyframes obErrFlash { 0%,60% { box-shadow:0 0 0 3px rgba(226,72,61,.25); } 100% { box-shadow:none; } }
.ob-finisherr { font:500 12px/1.4 var(--font-ui); color:var(--red-ink,#a4321f); margin-right:12px;
  animation:obRise .3s ease both; }
.ob-working { font:800 15px/1.5 var(--font-ui); color:var(--blue-500); text-align:right; }
.ob-course .cbtns { display:flex; gap:8px; flex-wrap:wrap; }
.ob-pillbtn { font:400 12px/1 var(--font-mono); letter-spacing:.03em; border:none;
  padding:11px 18px; border-radius:var(--r-pill); cursor:pointer; white-space:nowrap; }
.ob-pillbtn.dark { background:var(--ink-1); color:#fff; }
.ob-pillbtn.line { background:transparent; color:var(--ink-1); border:1px solid rgba(var(--ink-rgb),.24); }
.ob-pillbtn.blue { background:var(--grad-primary); color:#fff; }
.ob-sent { font:400 18px/2.15 var(--font-ui); color:var(--ink-1); letter-spacing:-.01em; }
.ob-blank { font:inherit; color:var(--blue-600); background:none; border:none;
  border-bottom:1.5px solid rgba(var(--ink-rgb),.28); border-radius:0; padding:0 2px;
  outline:none; transition:border-color .15s var(--ease); }
.ob-blank::placeholder { color:var(--ink-4); }
.ob-blank:focus { border-bottom-color:var(--blue-500); }
.ob-pick { font:500 15px/1 var(--font-ui); color:var(--blue-600); cursor:pointer;
  border:none; border-radius:var(--r-pill);
  padding:5px 26px 5px 10px; outline:none; appearance:none; -webkit-appearance:none;
  /* a visible chevron: testers read the plain pills as static text, not dropdowns */
  background:rgba(47,107,255,.10)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232f6bff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 9px center; }
.ob-pick:focus { box-shadow:var(--focus-ring); }
.ob-mirror { position:absolute; left:-9999px; top:-9999px; white-space:pre;
  visibility:hidden; }
.ob-yourow { display:flex; gap:10px; justify-content:flex-end; margin-top:30px; }
.ob-drop { margin-top:14px; border:1.5px dashed rgba(47,107,255,.5); border-radius:12px; padding:22px;
  text-align:center; cursor:pointer; background:rgba(47,107,255,.04); transition:background .2s; }
.ob-drop:hover { background:rgba(47,107,255,.09); }
.ob-drop p:first-child { font-size:14px; font-weight:600; }
.ob-drop p:last-child { font:400 11px/1.4 var(--font-mono); color:var(--ink-3); margin-top:5px; }
.ob-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:26px; }
.ob-skiplink { font:400 11px/1 var(--font-mono); letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); cursor:pointer; background:none; border:none; }
.ob-skiplink:hover { color:var(--ink-1); }
.subbar { background:var(--blue-100); border-color:var(--blue-600); }
.subbar .sr-i { color:var(--blue-600); }
.subbar .sr-t { font-weight:600; }
.submodal-wrap { position:fixed; inset:0; z-index:1500; display:flex; align-items:center; justify-content:center;
  background:rgba(21,19,15,.55); backdrop-filter:blur(3px);
  animation:veilIn var(--dur-veil) var(--ease) both; }
.submodal { position:relative; width:380px; max-width:calc(100vw - 40px); background:#15130f; color:#f4f1ea;
  border-radius:20px; padding:32px 30px; text-align:center; box-shadow:var(--shadow-overlay); overflow:hidden;
  animation:riseIn var(--dur-veil) var(--ease) both; }
.submodal .sm-spark { position:absolute; right:16px; top:-12px; font-size:72px; color:rgba(47,107,255,.18); pointer-events:none; }
.submodal h2 { position:relative; font-family:var(--font-ui); font-weight:800; font-size:22px; letter-spacing:-.02em; margin:0 0 10px; }
.submodal p { position:relative; font-size:14px; line-height:1.55; color:rgba(244,241,234,.72); margin:0 0 10px; }
.submodal .sm-price { font-family:var(--font-mono); font-size:12px; color:rgba(244,241,234,.55); margin:14px 0 18px; }
.submodal .stg-cta.dark { position:relative; width:100%; justify-content:center; padding:13px; font-size:12px;
  background:var(--blue-500); color:#fff; }
.submodal .stg-cta.dark:hover { background:var(--blue-600); transform:translateY(-1px); }
.submodal .sm-later { margin-top:12px; background:transparent; border:none; color:rgba(244,241,234,.5);
  font-family:var(--font-mono); font-size:11px; cursor:pointer; }
.submodal .sm-later:hover { color:#f4f1ea; }
.connect-card.shake { animation:cardShake .5s var(--ease); }
.updbar { background:var(--blue-50); border-color:var(--blue-500); }
.updbar .sr-i { color:var(--blue-600); }
.needchip { flex:none; font:600 9.5px/1 var(--font-mono); letter-spacing:.02em; padding:3px 7px;
  border-radius:99px; background:var(--amber-100); color:var(--amber-ink); white-space:nowrap; }
.needchip.incomplete { background:var(--butter-100); color:var(--butter-ink); }
.pill.st-incomplete { background:var(--amber-100); color:var(--amber-ink); }
.needhead { margin-bottom:6px; }
.needrow { display:flex; align-items:center; gap:8px; padding:2px 0; }
.needrow .needmark { width:14px; text-align:center; font-weight:700; }
.needrow.ok .needmark { color:var(--green-600,#2f8a5b); }
.needrow.miss .needmark { color:var(--red-500,#e2483d); }
.needrow .needlbl i { color:var(--ink-3); font-style:normal; font-size:11px; }
.needfix { border:1px solid var(--blue-500); background:transparent; color:var(--blue-600,#1e4fd6);
  font:600 10.5px/1 var(--font-mono); padding:3px 9px; border-radius:99px; cursor:pointer; }
.needfix:hover { background:var(--blue-50); }
.needfoot { margin-top:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.needhint { color:var(--ink-3); font-size:11px; }
.scopebtn { border:1px solid rgba(21,19,15,.16); background:transparent; color:var(--ink-2);
  font:600 10.5px/1 var(--font-mono); padding:4px 9px; border-radius:99px; cursor:pointer; }
.scopebtn:hover { border-color:var(--blue-500); color:var(--blue-600,#1e4fd6); }
.scopepop { position:absolute; z-index:40; margin:4px 10px; padding:12px 14px; width:min(320px,86%);
  background:var(--paper-0,#fff); border:1px solid rgba(21,19,15,.14); border-radius:12px;
  box-shadow:0 16px 40px -12px rgba(21,19,15,.25); font-size:12.5px;
  animation:popIn var(--dur-pop) var(--ease) both; }
.scopehead { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.scoperow { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0; }
.scoperow select { max-width:170px; }
.scopehint { color:var(--ink-3); font-size:11px; margin:2px 0 8px; }
.scopelist { max-height:180px; overflow:auto; display:flex; flex-direction:column; gap:4px; }
.scopeitem { display:flex; align-items:center; gap:7px; font-size:12px; cursor:pointer; }
.ob-scope { margin-top:10px; font-size:13px; }
.ob-scope summary { cursor:pointer; color:var(--blue-600,#1e4fd6); font-weight:600; }
.ob-scoperow { display:flex; align-items:center; gap:10px; margin:10px 0 4px; }
.ob-scopehint { color:var(--ink-3); font-size:11.5px; margin:4px 0 6px; }
.ob-scopelist { display:flex; flex-direction:column; gap:4px; max-height:150px; overflow:auto; }
.ob-scopeitem { display:flex; align-items:center; gap:7px; font-size:12.5px; cursor:pointer; }
.ob-needs { margin:8px 0 2px; padding:8px 12px; border-radius:10px; background:var(--amber-100); }
.ob-needrow { display:flex; align-items:baseline; gap:7px; font-size:12.5px; padding:2px 0; }
.ob-needdot { color:var(--red-500,#e2483d); font-weight:700; flex:none; }
.ob-needmiss { color:var(--ink-3); }
.ob-refwrap { margin-top:12px; text-align:center; }
.ob-reflink { font-size:12.5px; color:var(--blue-600,#1e4fd6); text-decoration:none; }
.ob-reflink:hover { text-decoration:underline; }
.ob-refform { display:flex; gap:8px; justify-content:center; margin-top:4px; }
.ob-refform input { height:36px; padding:0 12px; border:1px solid rgba(21,19,15,.2); border-radius:9px;
  font:500 13px/1 var(--font-mono); width:180px; text-transform:uppercase; }
.ob-refok { font-size:12.5px; color:var(--green-600,#2f8a5b); margin-top:6px; }
.ob-refok a { color:var(--ink-3); }
.matrow .fsize { flex:none; font:400 10px/1 var(--font-mono); color:var(--ink-4); }
.needstrip { display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  padding:8px 28px; border-bottom:1px solid var(--line-soft); }
.needstrip .nlbl { font:600 10px/1 var(--font-mono); letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-4); margin-right:2px; }
.nchip { display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  font:400 10px/1 var(--font-mono); border-radius:100px; padding:4px 9px; }
.nchip.ok { color:var(--green-600); background:var(--green-50); }
.nchip.miss { color:var(--red-600); background:var(--red-50); border:1px solid var(--red-border); font-weight:600; }
.nchip .nfix, .nfix { color:var(--blue-600); text-decoration:none; font-weight:600; }
.nfix:hover { text-decoration:underline; }
.needstrip .nsp { flex:1; }
.nassume { font-size:12px; white-space:nowrap; }
.nbtn { display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  border:1px solid var(--red-border); background:var(--red-50); color:var(--red-600);
  font:600 10px/1 var(--font-mono); padding:4px 9px; border-radius:100px;
  transition:background .12s ease; }
.nbtn:hover { background:#fde3e3; }
.nbtn.assume { border:0; background:none; color:var(--blue-600); padding:4px 2px;
  font:600 12px/1 var(--font-ui); }
.nbtn.assume:hover { background:none; text-decoration:underline; }
.instrbanner { flex:none; background:var(--red-50); border-bottom:1px solid var(--red-border);
  padding:10px 28px; }
.instrbanner .ib-top { display:flex; align-items:center; gap:10px; }
.instrbanner .ib-msg { flex:1; font:400 12.5px/1.4 var(--font-ui); color:var(--red-600); }
.instrbanner .ib-x { border:none; background:none; color:var(--red-600); cursor:pointer;
  font:600 12px/1 var(--font-ui); padding:2px 4px; }
.instrbanner .ib-tabs { display:flex; gap:4px; margin:9px 0 8px; }
.instrbanner .ib-tab { border:1px solid var(--red-border); background:var(--surface); color:var(--red-600);
  font:600 11px/1 var(--font-mono); padding:4px 11px; border-radius:100px; cursor:pointer; }
.instrbanner .ib-tab.on { background:var(--red-600); color:#fff; border-color:var(--red-600); }
.instrbanner .ib-ta { width:100%; min-height:72px; resize:vertical; border:1px solid var(--red-border);
  border-radius:8px; padding:8px 10px; font:400 12.5px/1.5 var(--font-ui); background:var(--surface); outline:none; }
.instrbanner .ib-ta.ib-link { min-height:0; height:34px; resize:none; }
.instrbanner .ib-drop { border:1px dashed var(--red-border); border-radius:8px; padding:16px;
  text-align:center; font:400 12.5px/1.4 var(--font-ui); color:var(--red-600); background:var(--surface); }
.instrbanner .ib-drop a { color:var(--blue-600); font-weight:600; }
.instrbanner .ib-row { display:flex; justify-content:flex-end; margin-top:8px; }
.row-due { font:400 10px/1 var(--font-mono); color:var(--ink-4); flex:none; margin-left:2px; }
.row-due.soon { color:var(--red-600); font-weight:600; }
.rowx { display:none; flex:none; border:0; background:none; color:var(--ink-4);
  font-size:11px; cursor:pointer; padding:2px 4px; border-radius:6px; }
.rowx:hover { color:var(--red-500,#e2483d); background:rgba(226,72,61,.1); }
.addpick { gap:6px; }
.dlg-hint { font-size:12.5px; color:var(--ink-3); margin:8px 0 2px; }
.dlg-file { display:flex; align-items:center; gap:10px; }
.dlg-fname { font:400 12px/1.3 var(--font-mono); color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.scopepop { width:min(360px,90%); padding:14px 16px; }
.scopesel { width:100%; height:36px; border:1px solid rgba(21,19,15,.18); border-radius:9px;
  padding:0 10px; font-size:13px; background:var(--paper-0,#fff); }
.scopepop .scopehint { margin:6px 0 10px; }
.scopeinc { display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid rgba(21,19,15,.1); padding-top:10px; margin-bottom:6px; }
.scopeacts { font-size:12px; color:var(--ink-4); }
.scopeacts a { color:var(--blue-600,#1e4fd6); text-decoration:none; font-weight:600; }
.scopeacts a:hover { text-decoration:underline; }
.scopewk { font:600 10px/1 var(--font-mono); letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); margin:8px 0 3px; }
.scopelist { max-height:240px; }
.scopeitem { display:flex; align-items:center; gap:8px; font-size:12.5px; padding:3px 0; min-width:0; }
.scopeitem input { flex:none; accent-color:var(--blue-500); }
.si-e { flex:none; font-size:12px; }
.si-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nbtn i { font-style:normal; font-weight:400; opacity:.65; text-transform:none; }
.nbtn.req { border-color:var(--red-500,#e2483d); background:rgba(226,72,61,.09); color:#a33227; }
.nbtn.req:hover { box-shadow:0 3px 10px -3px rgba(226,72,61,.45); }
.stg-course .stg-rt { font-size:13.5px; }
.spec-empty { padding:14px 16px; font-size:13.5px; color:var(--ink-3); }
.exportwrap { position:relative; display:inline-block; }
.exportmenu { position:absolute; top:calc(100% + 6px); left:0; z-index:50; min-width:150px;
  background:var(--surface); border:1px solid var(--border-on-white); border-radius:12px;
  box-shadow:var(--shadow-overlay); padding:6px; display:flex; flex-direction:column;
  animation:popIn var(--dur-pop) var(--ease) both; }
.exportmenu button { border:0; background:none; text-align:left; padding:9px 12px; border-radius:8px;
  font:500 13px/1 var(--font-ui); color:var(--ink-1); cursor:pointer; white-space:nowrap; }
.exportmenu button:hover { background:var(--blue-50); color:var(--blue-600,#1e4fd6); }
.exportwrap { align-self:center; }
.exportmenu { left:auto; right:0; top:calc(100% + 4px); }
.needchip.exam { background:rgba(21,19,15,.07); color:var(--ink-3); }
html[data-theme="dark"] .autobtn.on:hover { background:var(--grad-primary-hover); }
html[data-theme="dark"] *::-webkit-scrollbar-thumb { background:rgba(var(--ink-rgb),.15); }
.specbar .spec-body { padding:8px 0 0; max-width:none; max-height:46vh; overflow-y:auto;
  font:400 13.5px/1.65 var(--font-ui); color:var(--ink-2); }
.specbar .spec-body.md { max-width:none; }
.ed-foot #edPath { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:400 10px/1.3 var(--font-mono); color:var(--ink-4); }
.ed-foot #edWc { flex:none; white-space:nowrap; font:400 10px/1.3 var(--font-mono); color:var(--ink-4); }
#alertsBox > .mono-label:first-child { margin-top:2px !important; }
.sy-signin { margin:0 0 12px; display:flex; align-items:center; gap:12px;
  background:var(--red-50); border:1px solid var(--red-border); border-radius:12px; padding:10px 16px; }
.sy-signin-t { flex:1; min-width:0; font:400 12.5px/1.4 var(--font-ui); color:var(--red-600); }
.sy-signin-t b { font-weight:700; }
.sy-signin-btn { flex:none; font:600 12px/1 var(--font-ui); color:#fff; background:var(--blue-500);
  border:none; border-radius:8px; padding:7px 14px; cursor:pointer; }
.sy-signin-btn:hover { background:var(--blue-600); }
.sy-timeopt { font:400 11.5px/1 var(--font-mono); padding:7px 12px; border-radius:7px; cursor:pointer; color:var(--ink-2); }
.sy-timeopt.on { background:var(--blue-50); color:var(--blue-600); font-weight:600; }
.sy-timeopt:hover { background:var(--surface-hover); }
.sy-empty { font:400 12.5px/1.4 var(--font-ui); color:var(--ink-4); padding:10px 2px; }
.sy-timecustom { display:flex; align-items:center; justify-content:space-between; gap:8px;
  font:400 11.5px/1 var(--font-mono); color:var(--ink-2); padding:7px 12px;
  border-top:1px solid var(--line-soft); margin-top:3px; }
.sy-timeinput { font:400 11.5px/1 var(--font-mono); color:var(--ink-1); background:var(--paper);
  border:1px solid var(--border-strong); border-radius:6px; padding:3px 6px; cursor:pointer; }
.sy-pchip { padding:6px 11px; font-size:11.5px; }
.sy-pchip .sy-ck { display:inline-block; margin-right:4px; }
.sy-pchip:not(.on) .sy-ck { visibility:hidden; }
.sy-timecustom { cursor:pointer; border-radius:0 0 8px 8px; }
.sy-timecustom:hover { background:var(--surface-hover); }
.nt-actions { display:flex; gap:8px; }
.nt-none { font:400 11.5px/1.4 var(--font-ui); color:var(--ink-4); padding:9px 13px 11px 20px;
  border-top:1px solid var(--line-soft); }
.nt-badge { font:700 8px/1 var(--font-mono); letter-spacing:.06em; color:var(--blue-600);
  background:var(--blue-50); border-radius:5px; padding:2.5px 5px; vertical-align:1px; }
.nt-badge.big { font-size:9px; padding:5px 8px; flex:none; }
.nt-aid { flex:none; max-width:220px; font:400 11px/1.2 var(--font-ui); color:var(--ink-3);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:8px; padding:6px 8px; }
/* ONE scroll for the whole note — pages and typed text move together, like
   the iPad; a paper area with its own scrollbar read as a pasted screenshot */
.nt-scroll { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; }
.nt-editor { flex:none; padding:6px 10px 20px; }
/* the iPad's paper note: drawings, text boxes, photos, slides */
.nt-paper { flex:none; padding:10px 18px 4px; }
.nt-paper img { display:block; width:100%; background:#fff;
  border:1px solid var(--line-soft); border-radius:var(--r-card); box-shadow:var(--shadow-card); }
/* live page: CSS paper + SVG ink drawn from the iPad's stroke coordinates.
   The page is a document — it stays white paper in both themes. */
.pl-wrap { position:relative; background:#e6ebf2; border:1px solid var(--line-soft);
  border-radius:var(--r-card); box-shadow:var(--shadow-card); overflow:hidden; }
.pl-sheet { position:absolute; left:0; width:100%; background-color:#fff; }
.pl-ink { position:absolute; left:0; top:0; pointer-events:none; }
.pl-img { position:absolute; display:block; object-fit:cover; }
.pl-text, .pl-box { position:absolute; font-family:var(--font-ui); color:#16181c;
  white-space:pre-wrap; overflow-wrap:break-word; line-height:1.35; }
.pl-box { border:1px solid rgba(47,107,255,.18); border-radius:6px; box-sizing:border-box; }
.nt-transcript { max-height:38vh; overflow-y:auto; border-top:1px solid var(--line-soft);
  padding:12px 18px 18px; font:400 12.5px/1.6 var(--font-ui); color:var(--ink-3); }
.nt-tr-h { font:500 9px/1 var(--font-mono); letter-spacing:.09em; color:var(--ink-4); margin-bottom:8px;
  display:flex; align-items:center; gap:10px; }
.nt-tr-h .nt-btn { margin-left:auto; }
/* A lecture whose cleanup failed: the body is the raw transcript, so say so and
   offer the one tap that turns the saved transcript into real notes. */
.nt-redo { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 14px;
  padding:12px 16px; border-radius:var(--r-card); background:var(--butter-100);
  border:1px solid rgba(var(--ink-rgb),.08); }
.nt-redo p { flex:1; min-width:200px; margin:0; font:500 13px/1.5 var(--font-ui); color:var(--butter-ink); }
/* ===== study material made from a note (summary / cards / test / guide) ===== */
/* the "not made yet" badge — same pill in the note dropdown and the class modal */
.ntm-make { font:500 9px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue-600); background:var(--blue-100); border-radius:var(--r-pill);
  padding:3px 7px; }
.ntmenu .ntm-make { margin-left:auto; }
/* "Remake this" is a different kind of action from picking a view — it spends
   credits — so it reads as a quiet footer to the menu, not another option. */
.ntmenu .ntm-sep { border-top:1px solid rgba(var(--ink-rgb),.1); margin-top:4px;
  padding-top:9px; color:var(--ink-3); font-size:12px; }
.ntmenu .ntm-sep:hover { color:var(--blue-600); }
.nt-study { flex:1; overflow-y:auto; padding:6px 2px 40px; }
.st-wait { display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:60px 20px; text-align:center; }
.st-wait p { margin:0; font:500 14px/1.5 var(--font-ui); color:var(--ink-2); }
.st-wait .st-sub { font:400 11.5px/1.5 var(--font-mono); color:var(--ink-4); }
.st-err { display:flex; flex-direction:column; align-items:center; gap:14px; padding:48px 20px; text-align:center; }
.st-err p { margin:0; font:400 13.5px/1.6 var(--font-ui); color:var(--ink-2); max-width:46ch; }
/* ===== slides — a deck you'd stand up and present, not a card with bullets =====
   The slide sits on the app's paper like a page on a desk: its own white surface,
   a real 16:9 frame, the brand rule on the title slide, and a footer carrying the
   lecture name and slide number the way a made deck does. */
.sl-wrap { display:flex; flex-direction:column; align-items:center; gap:16px; padding:10px 2px 4px; }
.sl-stage { display:flex; align-items:center; gap:12px; width:100%; justify-content:center; }
.sl-arrow { flex:none; width:38px; height:38px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(var(--ink-rgb),.14); background:var(--surface); color:var(--ink-2);
  font:400 20px/1 var(--font-ui); display:flex; align-items:center; justify-content:center;
  transition:background .15s var(--ease), color .15s var(--ease); }
.sl-arrow:hover:not(:disabled) { background:var(--grad-primary); border-color:transparent; color:#fff; }
.sl-arrow:disabled { opacity:.3; cursor:default; }
.sl-slide { flex:1; max-width:720px; aspect-ratio:16/9; border-radius:var(--r-md);
  background:#fff; box-shadow:0 18px 44px -18px rgba(20,22,29,.4), 0 0 0 1px rgba(20,22,29,.07);
  overflow:hidden; position:relative; }
html[data-theme="dark"] .sl-slide { background:#f7f8fb; }   /* a slide is a white page in any theme */
/* Content sits centred between the margins — bullets pinned to the top with dead
   space under them is what makes an auto-built deck look auto-built. */
.sl-face { position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; padding:9% 9% 13%; }
/* every content slide carries the brand's blue rule down its left edge */
.sl-face:not(.title)::before { content:''; position:absolute; left:0; top:9%; bottom:9%; width:5px;
  border-radius:0 3px 3px 0; background:var(--grad-primary); }
.sl-face.title { align-items:flex-start; justify-content:center; }
.sl-h1 { margin:0; font:800 clamp(24px,3.4vw,40px)/1.15 var(--font-ui); letter-spacing:-.02em;
  color:#16181d; max-width:88%; }
.sl-sub { margin:14px 0 0; font:400 clamp(12px,1.3vw,15px)/1.5 var(--font-ui); color:#5b6270; }
.sl-rule { display:block; width:96px; height:7px; margin-top:22px; border-radius:4px;
  background:var(--grad-primary); }
.sl-h2 { margin:0 0 4%; font:700 clamp(18px,2.3vw,27px)/1.25 var(--font-ui); letter-spacing:-.015em;
  color:#16181d; }
.sl-bullets { margin:0; padding:0; list-style:none; display:flex; flex-direction:column;
  gap:clamp(8px,1.5vh,16px); }
.sl-bullets li { position:relative; padding-left:22px;
  font:400 clamp(13px,1.55vw,19px)/1.45 var(--font-ui); color:#2b3140; }
.sl-bullets li::before { content:''; position:absolute; left:0; top:.55em; width:8px; height:8px;
  border-radius:50%; background:var(--blue-500); }
.sl-foot { position:absolute; left:9%; right:9%; bottom:5%; display:flex; justify-content:space-between;
  font:500 10px/1 var(--font-mono); letter-spacing:.08em; color:#98a0ae;
  text-transform:uppercase; }
.sl-notes { width:100%; max-width:720px; margin:0; font:400 12.5px/1.6 var(--font-ui);
  color:var(--ink-3); padding:10px 13px; border-radius:var(--r-sm); background:var(--surface-well); }
.sl-notes span { font:500 9px/1 var(--font-mono); letter-spacing:.12em; color:var(--ink-4);
  margin-right:9px; }
/* the rail: every slide at a glance, the way a deck editor shows them */
.sl-rail { display:flex; gap:8px; overflow-x:auto; width:100%; max-width:800px; padding:2px 2px 6px; }
.sl-thumb { flex:none; width:132px; text-align:left; cursor:pointer; padding:8px 10px;
  border-radius:var(--r-sm); border:1px solid rgba(var(--ink-rgb),.12); background:var(--surface);
  display:flex; flex-direction:column; gap:4px; transition:border-color .15s var(--ease); }
.sl-thumb:hover { border-color:var(--blue-500); }
.sl-thumb.on { border-color:var(--blue-500); box-shadow:0 0 0 2px rgba(47,107,255,.18); }
.sl-tn { font:500 9px/1 var(--font-mono); color:var(--ink-4); }
.sl-tt { font:600 11px/1.35 var(--font-ui); color:var(--ink-2); display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* flashcards — the card is the surface you actually study from, so it's big */
.st-modes { display:flex; gap:8px; justify-content:center; padding:4px 0 2px; }
.st-mode { padding:7px 14px; border-radius:var(--r-pill); cursor:pointer;
  border:1px solid rgba(var(--ink-rgb),.14); background:var(--surface);
  font:600 12px/1 var(--font-ui); color:var(--ink-2); }
.st-mode:hover:not(:disabled) { background:var(--surface-hover); }
.st-mode.on { background:var(--grad-primary); border-color:transparent; color:#fff; }
.st-mode:disabled { opacity:.45; cursor:default; }
.st-cardwrap { display:flex; flex-direction:column; align-items:center; gap:18px; padding:14px 4px; }
.st-count { font:500 10.5px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-4); margin:0; }
.st-count .st-known { color:var(--green-ink); }
.st-card { width:100%; max-width:760px; min-height:min(52vh, 420px); display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center;
  cursor:pointer; padding:46px 44px; border-radius:var(--r-lg); background:var(--surface);
  border:1px solid rgba(var(--ink-rgb),.09); box-shadow:var(--shadow-raised);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease); }
.st-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-overlay); }
.st-card.flip { background:var(--surface-well); }
/* Swiping: right = got it, left = still learning. The card follows the pointer, so
   it has to stop easing while it's being dragged. */
.st-card { touch-action:pan-y; user-select:none; }
.st-card.dragging { transition:none; cursor:grabbing; }
.st-card.swipe-yes { border-color:rgba(63,174,106,.6); }
.st-card.swipe-no { border-color:rgba(224,96,58,.55); }
.st-stamp { position:absolute; top:22px; padding:6px 13px; border-radius:var(--r-pill);
  font:700 11px/1 var(--font-mono); letter-spacing:.09em; text-transform:uppercase;
  opacity:0; transition:opacity .12s var(--ease); pointer-events:none; }
.st-stamp.right { right:22px; transform:rotate(9deg); background:var(--green-100); color:var(--green-ink); }
.st-stamp.left { left:22px; transform:rotate(-9deg); background:var(--red-100); color:var(--red-ink); }
.st-card.swipe-yes .st-stamp.right, .st-card.swipe-no .st-stamp.left { opacity:1; }
.st-swipehint { margin:2px 0 0; font:400 10.5px/1 var(--font-mono); color:var(--ink-4); }
/* Marking a card should MOVE it: the one you judged leaves the way you judged it,
   and the next arrives from the same side. Replacing it in place read as a glitch. */
@keyframes cardFlyR { to { transform:translateX(620px) rotate(16deg); opacity:0; } }
@keyframes cardFlyL { to { transform:translateX(-620px) rotate(-16deg); opacity:0; } }
@keyframes cardInR  { from { transform:translateX(60px) scale(.97); opacity:0; } }
@keyframes cardInL  { from { transform:translateX(-60px) scale(.97); opacity:0; } }
.st-card.fly-right { animation:cardFlyR .19s var(--ease) forwards; pointer-events:none; }
.st-card.fly-left  { animation:cardFlyL .19s var(--ease) forwards; pointer-events:none; }
.st-card.in-right  { animation:cardInR .2s var(--ease) both; }
.st-card.in-left   { animation:cardInL .2s var(--ease) both; }
/* Flipping reads as the card turning, not the text swapping under you. */
/* A calm settle, not a somersault. The old keyframes spun the card a full 176
   degrees through two rotateY extremes, which reads as a trick rather than a card
   turning over — and at 340ms you wait for it on every single tap. */
@keyframes cardTurn { from { opacity:.35; transform:translateY(4px) scale(.985); }
                      to   { opacity:1;   transform:none; } }
.st-card.flipping { animation:cardTurn .18s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .st-card.fly-right, .st-card.fly-left, .st-card.in-right,
  .st-card.in-left, .st-card.flipping { animation:none; } }
.st-side { margin:0; font:500 9.5px/1 var(--font-mono); letter-spacing:.14em; color:var(--ink-4); }
.st-face { margin:0; font:600 27px/1.4 var(--font-ui); color:var(--ink-1); max-width:34ch; }
.st-card.flip .st-face { font-weight:500; font-size:23px; color:var(--ink-2); }
.st-tap { margin:0; font:400 10px/1 var(--font-mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-4); }
.st-marks { display:flex; gap:10px; }
/* test setup — how many, which kinds, and when the answer shows */
.st-setup { max-width:520px; margin:0 auto; padding:18px 4px 10px; }
.st-setup .mono-label { margin-bottom:14px; }
.st-set-row { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px 0; border-bottom:1px solid rgba(var(--ink-rgb),.08); }
.st-set-row > span { font:500 14px/1.4 var(--font-ui); color:var(--ink-1); }
.st-set-row em { display:block; font-style:normal; font:400 11.5px/1.5 var(--font-ui);
  color:var(--ink-3); margin-top:3px; }
.st-set-row select { font:600 13.5px var(--font-ui); padding:7px 10px; border-radius:var(--r-sm);
  border:1px solid rgba(var(--ink-rgb),.16); background:var(--surface-well); color:var(--ink-1); }
/* Type it or step it — the number is the student's, always. */
.st-num { flex:none; display:inline-flex; align-items:center; gap:2px; padding:3px;
  border-radius:var(--r-pill); border:1px solid rgba(var(--ink-rgb),.16);
  background:var(--surface-well); }
.st-num input { width:46px; text-align:center; border:0; background:transparent; outline:none;
  font:700 15px/1 var(--font-ui); color:var(--ink-1); -moz-appearance:textfield; }
.st-num input::-webkit-outer-spin-button,
.st-num input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.st-numb { width:28px; height:28px; border-radius:50%; border:0; cursor:pointer;
  background:transparent; color:var(--ink-2); font:400 17px/1 var(--font-ui);
  display:flex; align-items:center; justify-content:center; }
.st-numb:hover { background:var(--surface-hover); color:var(--ink-1); }
.st-set-h { font:500 10.5px/1 var(--font-mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-4); margin:22px 0 2px; }
.st-start { margin-top:22px; width:100%; justify-content:center; }
.st-start:disabled { opacity:.5; cursor:default; }
.st-check { margin-top:9px; }
/* End of a round: a quiet result, not a green wash across the pane. */
.sy-done { display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:60px 20px; text-align:center; }
.sy-done h3 { margin:0; font:700 21px/1.3 var(--font-ui); color:var(--ink-1); }
.sy-donecount { margin:0; font:400 13.5px/1 var(--font-mono); color:var(--ink-3); }
.sy-donecount b { font-size:30px; font-family:var(--font-ui); color:var(--ink-1); }
.sy-doneacts { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:10px; }
/* practice test */
.st-test { display:flex; flex-direction:column; gap:14px; padding:6px 2px 0; }
.st-score { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:16px 18px;
  border-radius:var(--r-card); background:var(--blue-100); }
.st-score h3 { margin:0; font-size:22px; color:var(--blue-600); }
.st-score p { margin:0; font:400 13px/1.5 var(--font-ui); color:var(--ink-2); }
.st-score .nt-btn { margin-top:4px; }
.sy-q { padding:15px 17px; border-radius:var(--r-card); background:var(--surface);
  border:1px solid rgba(var(--ink-rgb),.09); }
.sy-q.ok { border-color:rgba(63,174,106,.5); }
.sy-q.bad { border-color:rgba(224,96,58,.45); }
.sy-qh { margin:0 0 11px; font:600 14.5px/1.5 var(--font-ui); color:var(--ink-1); }
.st-choice { display:flex; align-items:flex-start; gap:9px; padding:8px 10px; border-radius:var(--r-sm);
  font:400 13.5px/1.5 var(--font-ui); color:var(--ink-2); cursor:pointer; }
.st-choice:hover { background:var(--surface-hover); }
.st-choice.sel { background:var(--surface-well); }
.st-choice.correct { background:var(--green-100); color:var(--green-ink); font-weight:600; }
.st-short { width:100%; font:400 13.5px var(--font-ui); padding:10px 12px; border-radius:var(--r-sm);
  border:1px solid rgba(var(--ink-rgb),.16); background:var(--surface-well); color:var(--ink-1); outline:none; }
.st-short:focus { border-color:var(--blue-500); }
.st-ans { margin:8px 0 0; font:500 12.5px/1.5 var(--font-ui); color:var(--green-ink); }
.st-why { margin:9px 0 0; font:400 12px/1.55 var(--font-ui); color:var(--ink-3);
  padding-top:8px; border-top:1px solid rgba(var(--ink-rgb),.08); }
.st-submit { align-self:flex-start; margin-top:4px; }
/* the one-time "want anything else?" offer after a note is made */
.os-dlg { max-width:430px; }
.os-sub { font:400 13px/1.6 var(--font-ui); color:var(--ink-2); margin:6px 0 16px; }
.os-rows { display:flex; flex-direction:column; gap:2px; }
.os-row { display:flex; align-items:flex-start; gap:11px; padding:10px 11px; border-radius:var(--r-sm);
  cursor:pointer; }
.os-row:hover { background:var(--surface-hover); }
.os-row b { display:block; font:600 13.5px/1.4 var(--font-ui); color:var(--ink-1); }
.os-row em { display:block; font-style:normal; font:400 11.5px/1.5 var(--font-ui); color:var(--ink-3); margin-top:2px; }
.os-dlg .dlg-row { margin-top:14px; }
/* whole-class study */
.nt-studyall { display:block; width:100%; text-align:left; margin:2px 0 6px; padding:9px 12px;
  border:1px dashed rgba(var(--ink-rgb),.22); background:transparent; border-radius:var(--r-sm);
  font:600 12.5px/1.3 var(--font-ui); color:var(--ink-2); cursor:pointer;
  transition:border-color .15s var(--ease), color .15s var(--ease); }
.nt-studyall:hover { border-color:var(--blue-500); color:var(--blue-600); }
.cs-card { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-overlay);
  width:min(720px, 94vw); max-height:88vh; display:flex; flex-direction:column; padding:20px 22px 6px; }
.cs-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.cs-head h3 { margin:4px 0 0; font-size:20px; }
.cs-pick { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 6px; }
.cs-tab { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:var(--r-pill);
  border:1px solid rgba(var(--ink-rgb),.14); background:var(--surface); cursor:pointer;
  font:600 12.5px/1 var(--font-ui); color:var(--ink-2); }
.cs-tab:hover { background:var(--surface-hover); }
.cs-tab.on { background:var(--grad-primary); border-color:transparent; color:#fff; }
.cs-tab.on .ntm-make { display:none; }
.cs-fine { flex-basis:100%; font:400 10.5px/1.6 var(--font-mono); color:var(--ink-4); margin:2px 0 0; }
.cs-body { flex:1; min-height:220px; overflow-y:auto; }
.nt-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; font:400 13.5px/1.6 var(--font-ui); color:var(--ink-3); padding:40px; }
.nt-empty .nt-hint { font-size:12px; color:var(--ink-4); max-width:44ch; display:inline-block; margin-top:8px; }
.nt-rec { display:flex; align-items:center; gap:12px; padding:10px 16px;
  background:var(--red-100); border-bottom:1px solid var(--line-soft);
  font:600 12px/1 var(--font-ui); color:var(--red-ink); }
.nt-rec-dot { width:9px; height:9px; border-radius:50%; background:var(--red-500); flex:none;
  animation:ntPulse 1.3s ease-in-out infinite; }
.nt-elapsed { font:500 11px/1 var(--font-mono); color:var(--red-ink); }
.nt-wave { flex:1; display:flex; align-items:center; justify-content:center; gap:3px; height:22px; }
.nt-wave span { width:3px; height:18px; border-radius:2px; background:var(--red-500);
  transform:scaleY(.14); transition:transform .12s ease; }
.nt-live { font:400 11px/1.5 var(--font-mono); color:var(--ink-4); padding:8px 16px;
  border-bottom:1px solid var(--line-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.di-pill { display:inline-block; font:600 9.5px/1 var(--font-ui); border-radius:100px; padding:3.5px 8px; }
.chad-live { display:none; align-items:center; gap:9px; margin:0 12px 6px;
  padding:8px 12px; border-radius:12px; background:var(--blue-50);
  font:500 11.5px/1.3 var(--font-ui); color:var(--blue-600); }
.chad-live.on { display:flex; }
.cl-spin { flex:none; width:12px; height:12px; border-radius:50%;
  border:2px solid rgba(47,107,255,.25); border-top-color:var(--blue-500);
  animation:clSpin .9s linear infinite; }
.cl-txt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-txt.swap { animation:clSwap .35s ease; }
.tour-ring { position:fixed; z-index:80; display:none; pointer-events:none; border-radius:14px;
  border:2.5px solid transparent;
  box-shadow:0 0 0 200vmax rgba(20,22,29,.68);
  transition:top .3s var(--ease), left .3s var(--ease), width .3s var(--ease),
             height .3s var(--ease), border-radius .3s var(--ease); }
/* The blue border + breathing glow mean "click here" — info steps keep the
   spotlight alone so nothing looks pressable that isn't. */
.tour-ring.hot { border-color:var(--blue-500); animation:tourPulse 1.6s ease-in-out infinite; }
@keyframes tourPulse {
  0%,100% { box-shadow:0 0 0 4px rgba(47,107,255,.28), 0 0 26px rgba(47,107,255,.4),
                       0 0 0 200vmax rgba(20,22,29,.68); }
  50%     { box-shadow:0 0 0 8px rgba(47,107,255,.14), 0 0 34px rgba(47,107,255,.55),
                       0 0 0 200vmax rgba(20,22,29,.68); }
}
.tour-card .tstep { font:500 10px/1 var(--font-mono); color:var(--ink-4); }
.tour-card .tf .btn { padding:9px 18px; font-size:12.5px; }
.nt-jobbar { display:flex; align-items:center; gap:10px; margin:0 0 12px;
  padding:9px 14px; border-radius:12px; background:var(--blue-50);
  font:500 12px/1.3 var(--font-ui); color:var(--blue-600); }
.nt-jobtrack { flex:1; height:5px; border-radius:100px; background:rgba(47,107,255,.18); overflow:hidden; }
.nt-jobtrack i { display:block; height:100%; border-radius:100px; background:var(--blue-500);
  transition:width .4s ease; }
.ed-empty { background:transparent; }
.ed-wys { flex:1; min-height:0; overflow:visible; background:transparent; }
.ed-wys .bn-editor { padding:12px 72px 48px; background:transparent; }
.csw { display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:8px; vertical-align:-2px; }
#undoAiBtn { white-space:nowrap; }
@container (max-width: 720px) {
#edToolbar .tbtn.chipd#fontPickBtn { display:none; }
}
/* The old alerts markup (.alertrow/.ai/.al/.at/.nx) is gone — the feed is the
   prototype's timeline now. Its leftover rules were not merely dead: an id in
   `#alertsBox .tl-card` outranks `.tl-item.unread .tl-card`, so the unread card
   could never take its blue outline. The prototype's own rules cover all of it. */
.pf-confirm { display:flex; align-items:center; gap:10px; margin-top:10px; padding:9px 12px;
  background:var(--butter-100); border:1px solid rgba(221,144,33,.3); border-radius:11px;
  font:400 11.5px/1.4 var(--font-ui); color:var(--ink-2); flex-wrap:wrap; }
.pf-confirm span { flex:1; min-width:160px; }

/* App-only elements that lived under a prototype-owned parent selector
   (dictation controls, app banners, sub-drawers, popovers). Recovered
   verbatim so those features keep working; rules that restyled a
   prototype-owned element are NOT here — the prototype owns those. */
/* Recovered: rules for app-only elements that sat under a
   prototype-owned parent selector. */
html[data-theme="dark"] .ob-btn.dark,
html[data-theme="dark"] .ob-pillbtn.dark,
html[data-theme="dark"] .stg-btn.dark,
html[data-theme="dark"] .stg-cta.dark,
html[data-theme="dark"] .nt-btn.dark,
html[data-theme="dark"] .btn.dark {
  background:var(--grad-primary); color:#fff; border-color:transparent; }
html[data-theme="dark"] .ob-btn.dark:hover,
html[data-theme="dark"] .ob-pillbtn.dark:hover,
html[data-theme="dark"] .stg-btn.dark:hover,
html[data-theme="dark"] .stg-cta.dark:hover,
html[data-theme="dark"] .nt-btn.dark:hover,
html[data-theme="dark"] .btn.dark:hover {
  background:var(--grad-primary-hover); color:#fff; }
.stg-slider.noanim { transition:none; }
.stg-row.stg-col { flex-direction:column; align-items:stretch; gap:10px; }
.stg-row.stg-collapse { cursor:pointer; user-select:none; transition:background .15s var(--ease); }
.stg-row.stg-collapse:hover { background:rgba(var(--ink-rgb),.025); }
.stg-row.stg-collapse.open { border-bottom-color:transparent; }
.stg-status.warn { color:var(--red-ink,#c14a26); background:rgba(224,96,58,.1); }
header .title { font:700 22px/1.2 var(--font-ui); letter-spacing:-.03em; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.btn.ghost { background:transparent; color:var(--ink-2); }
.btn.ghost:hover { background:var(--surface-hover); }
.btn.pill { border-radius:var(--r-pill); }
.calchip.st-working { background:var(--blue-100); color:var(--blue-600); }
.caldaypop .cdp-list { display:flex; flex-direction:column; }
/* your own tasks read as the prototype's: a solid blue chip, not a dashed placeholder */
.calchip.st-custom { background:var(--blue-100); color:var(--blue-600); }
.calgrid .cc:hover .cadd { display:block; }
.todo .vlabel { writing-mode:vertical-rl; font:400 10px/1 var(--font-mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); }
body.col-resizing { cursor:col-resize; user-select:none; }
.ai-head .ctxchip { flex:none; }
.receipt .rc-t { min-width:0; overflow-wrap:break-word; }
.mod-head .mdate { font:400 10.5px/1 var(--font-mono); color:var(--ink-3); flex:none; }
.del .dt { flex:1; font:500 12.5px/1.35 var(--font-ui); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.del.sel .dt { color:var(--blue-600); }
.del .sd { flex:none; }
.ed-meta .m { font:400 11.5px/1.4 var(--font-mono); color:var(--ink-3); }
.tbtn.i { font-style:italic; }
.tbtn.b { font-weight:800; }
.toast .toast-t { flex:1; min-width:0; }
.toast .toast-act { flex:none; border:none; background:var(--blue-50); color:var(--blue-600);
  font:600 11px/1 var(--font-mono); letter-spacing:.04em; text-transform:uppercase;
  padding:7px 12px; border-radius:var(--r-pill); cursor:pointer;
  transition:background 120ms var(--ease); }
.toast .toast-act:hover { background:var(--blue-100); }
.mod.drop-hint { background:rgba(21,19,15,.04); border-radius:10px; }
.needspanel.gated { border-style:solid; }
.tbadge.tb-material { background:var(--green-100); color:var(--green-ink); }
.mod .submod { margin:0; }
.mod .submod > .mod-head .mdate { margin-left:auto; }
.needspanel.slim { margin:0; border:0; border-bottom:1px solid var(--line-soft);
  border-radius:0; background:transparent; padding:0; }
.needspanel.slim .needstrip { border-top:0; }
.flag-row .flag-chip { font:600 10.5px/1 var(--font-mono); color:var(--amber-ink2);
  background:var(--surface); border:1px solid var(--amber-border); border-radius:8px; padding:4px 9px; cursor:pointer; }
.minical .cal-day.guess { background:var(--blue-500); color:#fff; font-weight:600; }
.del:hover .rowx, .matrow:hover .rowx { display:inline-block; }
.ws-dir .mod-head .mdate { font:400 8.5px/1 var(--font-mono); color:var(--ink-4); flex:none; }
.ws-dir .di-dot { flex:none; width:7px; height:7px; border-radius:50%; }
.ws-dir .mod.coursemats > .mod-head .mdate { font:400 9px/1 var(--font-mono); color:var(--ink-4); }
.ws-ai .composer .cmp-wave { display:none; align-items:center; gap:3px; height:22px; padding:0 8px; }
.ws-ai .composer .cmp-cancel, .ws-ai .composer .cmp-confirm { display:none; }
.ws-ai .composer .bar.rec #wsMic, .ws-ai .composer .bar.rec #wsSend { display:none; }
.ws-ai .composer .bar.rec .cmp-wave { display:inline-flex; }
.ws-ai .composer .bar.rec .cmp-cancel,
.ws-ai .composer .bar.rec .cmp-confirm { display:flex; }
.ws-ai .composer .cmp-cancel { width:32px; height:32px; border-radius:9px; border:none; padding:0;
  background:var(--surface-hover); color:var(--ink-2); align-items:center; justify-content:center; cursor:pointer;
  transition:background .13s var(--ease); }
.ws-ai .composer .cmp-cancel:hover { background:var(--border-strong); color:var(--ink-1); }
.ws-ai .composer .cmp-confirm { width:32px; height:32px; border-radius:50%; border:none; padding:0;
  background:var(--blue-500); color:#fff; align-items:center; justify-content:center; cursor:pointer;
  transition:background .13s var(--ease); }
.ws-ai .composer .cmp-confirm:hover { background:var(--blue-600); }
.sy-chip.static { cursor:default; }
.sy-tdot.big { width:11px; height:11px; }
.mrow .nt-badge { margin-left:6px; }
.ws-dir .mrow.subnote { padding-left:28px; }
.chip.tourchip { width:28px; justify-content:center; font-weight:700; color:var(--ink-3); }
.chip.tourchip:hover { color:var(--blue-600); }
.ws-dir .mod-head .mdate { color:var(--ink-25); }
.workspace.dir-collapsed #wsResizeL { pointer-events:none; }
.toast .toast-act { flex:none; border:none; background:var(--blue-100); color:var(--blue-600);
  font:700 10px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  padding:7px 13px; border-radius:var(--r-pill); cursor:pointer; }
.toast .toast-act:hover { background:var(--blue-500); color:#fff; }

/* The editor island brings its own type scale (16px root, 3em h1). Inside the
   adopted sheet the prototype's .sheet h1/h2/h3/p rules are the authority, so
   the island's scaling is neutralised — otherwise the two multiply and a
   heading lands at 92px instead of the prototype's 29px. */
#wsEditor .tiptap.ProseMirror { font-size:inherit; }
#wsEditor .bn-block-content { font-size:1em; }

/* Timeline rows the prototype has no example of: an activity line that maps to
   no sentiment keeps a neutral bubble rather than an uncoloured one. */
.tl-ic.mut { background:var(--surface-hover); color:var(--ink-3); }


/* ==========================================================================
   Tokens the app-only surfaces still speak. The prototype's palette replaced
   the old one, but the auth gate, onboarding, document preview and the motion
   helpers were written against these names — without them their colours fall
   back to nothing and, worse, the height-slide transitions become invalid and
   every expander snaps open instead of sliding.
   ====================================================================== */
:root {
  --dur-pop:180ms; --dur-veil:200ms; --dur-grow:220ms;
  --amber-500:#dd9021; --amber-border:#fde9c3; --amber-ink2:#78600f;
  --border-on-white:rgba(var(--ink-rgb),.08);
  --cream:var(--surface-2); --surface-well:var(--paper-2);
  --focus-ring:0 0 0 3px rgba(47,107,255,.25);
  --green-50:#f0fdf4; --green-600:#15803d;
  --red-50:#fef2f2; --red-border:#fecaca;
  --panel-dark:#14161d; --panel-dark-ink:#f4f1ea;
  --panel-dark-mut:#8a8ea0; --panel-dark-soft:#c7ccd6;
  --r-sm:8px; --r-md:10px; --r-card:14px; --r-lg:16px;
  --shadow-overlay:0 8px 16px rgba(20,22,29,.08),0 24px 64px rgba(20,22,29,.16);
}
html[data-theme="dark"] {
  --amber-border:var(--border-strong); --amber-ink2:var(--amber-ink);
  --cream:#1b1f28; --surface-well:#1b1f28;
  --focus-ring:0 0 0 3px rgba(90,139,255,.3);
  --green-50:var(--green-100); --green-600:var(--green-ink);
  --red-50:var(--red-100); --red-border:var(--border-strong);
  --shadow-overlay:0 6px 14px rgba(0,0,0,.25),0 20px 52px rgba(0,0,0,.35);
}

/* ==========================================================================
   Motion keyframes for the app-only surfaces
   --------------------------------------------------------------------------
   Adopting the prototype's stylesheet brought its 11 keyframes and dropped the
   rest, but the rules that name these survived — so every spinner sat frozen,
   overlays and their shades appeared without a fade, and the settings drawer,
   onboarding and the auth screens jumped straight to their end state. The
   prototype simply has no counterpart for any of them.
   Recovered verbatim from the stylesheet at c94182e~1.
   ========================================================================== */
@keyframes auDrift { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
@keyframes auPop { 0%{transform:scale(.6);opacity:0;} 60%{transform:scale(1.08);} 100%{transform:scale(1);opacity:1;} }
@keyframes auRise { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
@keyframes auShake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(3px);} }
@keyframes cardShake {
  0%,100% { transform:translateX(0); }
  15% { transform:translateX(-9px); } 30% { transform:translateX(9px); }
  45% { transform:translateX(-7px); } 60% { transform:translateX(7px); }
  75% { transform:translateX(-4px); } 90% { transform:translateX(4px); }
}
@keyframes clSpin { to { transform:rotate(360deg); } }
@keyframes clSwap { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
@keyframes ntPulse { 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.45; transform:scale(.8);} }
@keyframes obBlink { 0%,100%{opacity:1;} 50%{opacity:.25;} }
@keyframes obPop { 0%{transform:scale(.6);opacity:0;} 60%{transform:scale(1.08);} 100%{transform:scale(1);opacity:1;} }
@keyframes obRise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes obScanPulse { 0%,100% { box-shadow:0 0 0 0 rgba(47,107,255,.35); }
  50% { box-shadow:0 0 0 5px rgba(47,107,255,0); } }
@keyframes obSpin { to { transform:rotate(360deg); } }
@keyframes riseIn  { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes stgDrawer { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@keyframes veilIn  { from { opacity:0; } to { opacity:1; } }
@keyframes veilOut { from { opacity:1; } to { opacity:0; } }

/* The three workspace panes are grid items, and a grid item's default
   min-height:auto refuses to shrink below its content — so `flex:1; overflow-y:auto`
   on .msgs / .ws-scroll / .ed-scroll could never take effect. A long Chad
   conversation stretched its column and pushed the whole page taller instead of
   scrolling inside the panel. The prototype has the same latent gap; its dummy
   data is just never long enough to reach it. */
.ws-dir, .ws-edit, .ws-ai { min-height:0; }

/* ---- past tasks (rail footer link + popover rows) ---- */
.todo-past { font: 500 11px/1 var(--font-mono); color: var(--ink-3); letter-spacing: .04em;
  text-transform: uppercase; padding: 10px 14px 12px; cursor: pointer; user-select: none; }
.todo-past:hover { color: var(--blue-500); }
.pastitem { opacity: .8; align-items: center; }
.pastitem .past-tick { color: var(--green-ink); font-size: 12px; flex: none; }
.pastitem .past-tt { text-decoration: line-through; color: var(--ink-3); }
/* the two actions sit as one tidy right-aligned pair, vertically centered */
.past-restore { margin-left: auto; flex: none; font: 600 10.5px/1 var(--font-mono);
  color: var(--blue-600); border: 1px solid var(--blue-outline); border-radius: var(--r-pill);
  padding: 5px 11px; cursor: pointer; transition: background .12s var(--ease); }
.past-restore:hover { background: rgba(47,107,255,.08); }
.pastitem .tdel { position: static; flex: none; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 10px; color: var(--ink-3); opacity: 1;
  transition: background .12s var(--ease), color .12s var(--ease); }
.pastitem .tdel:hover { background: var(--red-100); color: var(--red-ink); }


/* ===== br: the 🐞 Report dialog (Claude Design "Bug Report Flow", 1:1 port).
   A self-contained light set piece — values come from the design file verbatim. */
.br-shade { position:fixed; inset:0; background:rgba(20,25,40,0.45); z-index:2100;
  display:flex; align-items:center; justify-content:center;
  animation:veilIn var(--dur-veil,.2s) var(--ease) both; }
.br-card { width:640px; max-width:94vw; max-height:92vh; overflow-y:auto;
  background:#fff; border-radius:20px; box-shadow:0 24px 70px rgba(20,25,40,0.35);
  font-family:'Public Sans',var(--font-ui); color:#1f2330;
  animation:riseIn var(--dur-veil,.2s) var(--ease) both; }
.br-head { display:flex; align-items:center; gap:10px; padding:16px 22px 12px; }
.br-title { flex:none; white-space:nowrap; font-size:15.5px; font-weight:800; }
.br-step { flex:none; white-space:nowrap; font-size:11.5px; font-weight:600; color:#a3aec2; }
.br-x { margin-left:auto; color:#a3aec2; cursor:pointer; font-size:15px; }
.br-x:hover { color:#1f2330; }
.br-body { padding:0 22px 20px; }
.br-banner { display:flex; align-items:center; gap:10px; background:#eef3fe;
  border:1px solid #d8e3fc; border-radius:12px; padding:10px 14px; margin-bottom:10px; }
.br-banner-ico { flex:none; font-size:16px; }
.br-banner-t { font-size:13px; font-weight:700; color:#1d3f8f; }
.br-clear { margin-left:auto; flex:none; white-space:nowrap; font-size:11.5px;
  font-weight:700; color:#2563eb; background:#fff; border-radius:100px;
  padding:4px 12px; cursor:pointer; }
.br-clear:hover { background:#dbe4fe; }
.br-prev { position:relative; border:1px solid #e4e9f2; border-radius:12px;
  overflow:hidden; cursor:crosshair; user-select:none; touch-action:none; }
.br-shot { display:block; width:100%; pointer-events:none; }
.br-ink { position:absolute; inset:0; pointer-events:none; }
.br-hintwrap { position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; pointer-events:none; }
.br-hint { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800;
  color:#fff; background:rgba(20,25,40,0.72); border-radius:100px; padding:9px 18px; }
.br-foot { display:flex; align-items:center; margin-top:14px; }
.br-skip, .br-back { font-size:12.5px; font-weight:700; color:#8a97ad; cursor:pointer; }
.br-skip:hover, .br-back:hover { color:#1f2330; }
.br-next { margin-left:auto; flex:none; white-space:nowrap; font-size:13.5px;
  font-weight:800; color:#fff; background:#2563eb; border-radius:100px;
  padding:10px 24px; cursor:pointer; }
.br-next:hover { background:#1d4ed8; }
.br-chip { display:flex; align-items:center; gap:9px; background:#eef3fe;
  border-radius:12px; padding:10px 14px; margin-bottom:14px; }
.br-chip-ico { font-size:13px; }
.br-chip-t { font-size:12.5px; font-weight:700; color:#1d3f8f; }
.br-edit { margin-left:auto; font-size:11.5px; font-weight:700; color:#2563eb; cursor:pointer; }
.br-lbl { font-size:12px; font-weight:800; letter-spacing:0.04em; color:#8a97ad; margin:0 0 8px; }
.br-desc { width:100%; min-height:96px; border:1px solid #e4e9f2; border-radius:12px;
  padding:12px 14px; font-size:13.5px; line-height:1.6; outline:none; resize:none;
  font-family:'Public Sans',var(--font-ui); color:#1f2330; background:#fff; }
.br-send { margin-left:auto; flex:none; white-space:nowrap; font-size:13.5px;
  font-weight:800; border-radius:100px; padding:10px 26px;
  color:#a3aec2; background:#eef2fa; cursor:not-allowed; }
.br-send.on { color:#fff; background:#2563eb; cursor:pointer; }
.br-done { padding:10px 22px 30px; text-align:center; }
.br-done-ico { width:52px; height:52px; border-radius:50%; background:#e4f4ea;
  color:#1d8a5b; font-size:22px; font-weight:800; display:flex; align-items:center;
  justify-content:center; margin:6px auto 14px; }
.br-done-t { font-size:16px; font-weight:800; margin:0; }
.br-done-s { font-size:13px; font-weight:500; color:#5b6878; margin:8px 0 0; }
.br-done-btn { display:inline-block; margin-top:18px; font-size:13px; font-weight:800;
  color:#3a4150; border:1px solid #e4e6ea; border-radius:100px; padding:9px 22px; cursor:pointer; }
.br-done-btn:hover { border-color:#a3aec2; }

/* ===== hm: humanizer meter pill (Claude Design "Meter Tiny", 1:1) ===== */
.hm-pill { display:inline-flex; align-items:center; gap:8px; background:#fff;
  border:1px solid #e4e9f2; border-radius:100px; padding:5px 12px 5px 10px; cursor:default; }
.hm-bars { display:flex; align-items:flex-end; gap:2px; height:14px; }
.hm-bar { width:3px; flex:none; border-radius:2px;
  transition:background .3s var(--ease); }
.hm-lbl { font:500 10.5px var(--font-mono); }
/* the doc-header meter is the reassurance badge — bigger, and washed in its zone color */
.hm-pill.big { gap:9px; padding:7px 15px 7px 12px; }
.hm-pill.big .hm-bars { height:19px; gap:2.5px; }
.hm-pill.big .hm-bar { width:4px; }
.hm-pill.big .hm-lbl { font-size:12.5px; font-weight:600; }
.hm-pill.hm-good { background:#e4f4ea; border-color:#bfe4cd; }
.hm-pill.hm-mid { background:#eef3fe; border-color:#d8e3fc; }
.hm-pill.hm-bad { background:#fdeae8; border-color:#f3c1ba; }
.crop-note { font:500 10.5px/1.4 var(--font-mono); color:var(--ink-3);
  letter-spacing:.03em; max-width:300px; }

/* collapsed to-do control: icon button · TO-DO · count badge */
.todo-count { flex:none; min-width:18px; height:18px; padding:0 4px; border-radius:50%;
  background:rgba(var(--ink-rgb),.08); color:var(--ink-2);
  font:600 10px/18px var(--font-mono); text-align:center; }
/* the toolbar's tasks-column slot: panel-width while the card is open (so
   + Event / + Task sit over it), shrink-to-fit when it slides away */
.calbar-tasks { display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.calbar-tasks.open { width:250px; }

/* ===== class page (cls-) — dashboard → class → workspace ===== */
.clswrap { flex:1; min-width:0; height:100%; overflow-y:auto; padding:30px 28px 90px; }
.clswrap > * { width:100%; max-width:780px; margin-left:auto; margin-right:auto; }
.cls-head { margin-bottom:20px; }
.cls-eyebrow { display:block; margin:10px 0 2px; font:600 10.5px var(--font-mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue-500); }
.cls-title { margin:0 0 12px; font:700 30px/1.12 var(--font-ui); letter-spacing:-0.025em;
  color:var(--ink-1); }
.cls-stats { display:flex; gap:8px; flex-wrap:wrap; }
.cls-week { background:var(--surface); border:1px solid rgba(var(--ink-rgb),.07);
  border-radius:var(--r-lg); box-shadow:var(--shadow-card); margin-bottom:16px;
  overflow:hidden; }
.cls-week.now { border-color:rgba(47,107,255,.35); }
.cls-week.now .cls-whead { background:var(--blue-50); }
.cls-week.drop-hint { outline:2px dashed var(--blue-400); outline-offset:-2px; }
.cls-whead { display:flex; align-items:center; gap:10px; padding:13px 18px;
  border-bottom:1px solid rgba(var(--ink-rgb),.07); background:var(--surface-2); }
.cls-wt { font:700 14px var(--font-ui); color:var(--ink-1); }
.cls-wdate { font:500 10.5px var(--font-mono); color:var(--ink-3); }
.cls-wcount { font:500 10.5px var(--font-mono); color:var(--ink-3); }
.cls-empty { padding:16px 18px; font:400 13px var(--font-ui); color:var(--ink-3); }
.cls-row { display:flex; align-items:center; gap:13px; padding:13px 18px; cursor:pointer;
  border-bottom:1px solid rgba(var(--ink-rgb),.05); transition:background .15s var(--ease); }
.cls-row:last-child { border-bottom:0; }
.cls-row:hover { background:var(--surface-hover); }
.cls-row.dragging { opacity:.45; }
.cls-row.done .cls-t { color:var(--ink-3); text-decoration:line-through; }
.cls-ic { width:34px; height:34px; border-radius:10px; background:var(--surface-well);
  display:flex; align-items:center; justify-content:center; font-size:15px; flex:0 0 auto; }
.cls-mid { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.cls-t { font:600 14px var(--font-ui); color:var(--ink-1); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.cls-sub { display:flex; align-items:center; gap:6px; font:500 10.5px var(--font-mono);
  color:var(--ink-3); }
.cls-due { flex:0 0 auto; font:500 11px var(--font-mono); color:var(--ink-25);
  background:var(--surface-well); border-radius:100px; padding:5px 10px; }
.cls-due.soon { color:var(--red-ink); background:var(--red-100); font-weight:600; }
.cls-go { flex:0 0 auto; color:var(--ink-4); font-size:14px;
  transition:transform .15s var(--ease), color .15s var(--ease); }
.cls-row:hover .cls-go { transform:translateX(2px); color:var(--blue-500); }
.cls-row .rowx { opacity:0; }
.cls-row:hover .rowx { opacity:1; }

/* rail back-link (workspace, files-only rail) */
.dir-back { margin:2px 8px 8px; padding:7px 10px; border-radius:var(--r-sm); cursor:pointer;
  font:600 12.5px var(--font-ui); color:var(--blue-500); }
.dir-back:hover { background:var(--surface-hover); }
.cls-sub .sdot { width:7px; height:7px; border-radius:50%; flex:none; }
/* class-page week folding */
.cls-fold { font-size:11px; color:var(--ink-3); transition:transform .18s var(--ease); }
.cls-week.closed .cls-fold { transform:rotate(-90deg); }
.cls-week.closed .cls-whead { border-bottom:0; }
/* the rail is retired: its floating reopen pill never shows */
#dirOpen { display:none !important; }
/* onboarding LMS tiles: the real platform logos on a white chip (readable in
   both themes — Blackboard's near-black mark needs the light ground in dark) */
.ob-lms .ln-ico { width:48px; height:48px; margin:0 auto 10px; }
.ob-lms .ln-ico img { width:48px; height:48px; border-radius:11px; display:block;
  box-shadow:0 3px 10px -3px rgba(20,22,29,.3); }
.ob-lms .ln { font:700 13px/1 var(--font-ui); }
/* The count hint turns amber when the number can't be met — it's an explanation,
   not an error, so it stays quiet otherwise. */
.st-set-row em.warn { color:var(--butter-ink); }
/* Chad's face beside his name — small enough to read as an avatar, not a picture
   pasted into the header. */
.ai-av { flex:none; width:24px; height:24px; border-radius:50%; display:block;
  box-shadow:0 0 0 1px rgba(var(--ink-rgb),.08); }