/* desk.css — Ward Desk, the study screens' look (owner approval 2026-10-27; DESIGN.md §Ward Desk).
   Source of truth: the mockup, https://claude.ai/artifact/SeUe3726qT2MYw4xZxg4gi — tokens, spacing and markup are
   copied from it. Loaded by app.html only on views under the hub bar or the focus bar (body.desk); the public pages
   never load it. Three panes on a study screen: the rail (260px, recessed), the centre (workspace, up to 780px) and
   the shelf (400px, canvas). One action-blue primary button per screen. Amber and red marks only for abnormal
   results and wrong answers. The logo is an image in its own colours, never recoloured. Every number in JetBrains Mono with tabular figures.
   Order: tokens · the old look's tokens mapped onto these · the shell · the old components flattened · the desk
   components (question, shelf, recall, Today) · narrow screens · reduced motion. */

/* ================================================================ tokens (APCA-measured; the brief's numbers) */
:root {
  --wd-canvas: #F4F5F7; --wd-recessed: #ECEEF2; --wd-work: #FFFFFF; --wd-overlay: #FFFFFF;
  --wd-border: #D9DCE3; --wd-border-strong: #B3B9C6;
  --wd-text: #14161B; --wd-text-2: #4A5060; --wd-text-3: #5F6576;   /* 5.0:1 on recessed, 5.3 on canvas, 5.8 on work (was #6E7484: 4.0 on recessed) */
  --wd-primary: #2853C9; --wd-on-primary: #FFFFFF; --wd-primary-soft: #E7ECFA;
  --wd-ok: #17784F; --wd-ok-soft: #E2F2EA;
  --wd-warn: #9A5B00; --wd-warn-mark: #E5A93C; --wd-warn-soft: #FBF0DB;
  --wd-crit: #B42F2F; --wd-crit-mark: #E05252; --wd-crit-soft: #FBE4E4;
  --wd-cue: #FFEFC2;
  --wd-heat-k: .6; --wd-scrim: rgba(20, 22, 27, .45);   /* the mastery grid's slope (text stays --wd-text at 100%); the veil behind a sheet */
  --wd-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wd-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wd-canvas: #0E1013; --wd-recessed: #08090B; --wd-work: #16181D; --wd-overlay: #1F222A;
    --wd-border: #2B2E38; --wd-border-strong: #434959;
    --wd-text: #DDE1E9; --wd-text-2: #B4BAC7; --wd-text-3: #8E94A3;
    --wd-primary: #8DB2FF; --wd-on-primary: #0E1013; --wd-primary-soft: #1B2540;
    --wd-ok: #5FD49B; --wd-ok-soft: #12261D;
    --wd-warn: #F0B653; --wd-warn-soft: #2A2214;
    --wd-crit: #FF8F85; --wd-crit-soft: #2E1716;
    --wd-cue: #3B3319;
    --wd-heat-k: .45; --wd-scrim: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --wd-canvas: #0E1013; --wd-recessed: #08090B; --wd-work: #16181D; --wd-overlay: #1F222A;
  --wd-border: #2B2E38; --wd-border-strong: #434959;
  --wd-text: #DDE1E9; --wd-text-2: #B4BAC7; --wd-text-3: #8E94A3;
  --wd-primary: #8DB2FF; --wd-on-primary: #0E1013; --wd-primary-soft: #1B2540;
  --wd-ok: #5FD49B; --wd-ok-soft: #12261D;
  --wd-warn: #F0B653; --wd-warn-soft: #2A2214;
  --wd-crit: #FF8F85; --wd-crit-soft: #2E1716;
  --wd-cue: #3B3319;
  --wd-heat-k: .45; --wd-scrim: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ================================================================ the old look's tokens, mapped onto these
   play.css and verelect.css draw every component from tokens set on body.play; restating them here on body.desk
   restyles every view without touching its markup. Pastel fills become quiet surfaces: colour now means status only. */
body.desk {
  --p-cream: var(--wd-canvas); --p-surface: var(--wd-work); --p-ink: var(--wd-text); --p-muted: var(--wd-text-2); --p-line: var(--wd-border);
  --p-green: var(--wd-ok-soft); --p-green-strong: var(--wd-primary); --p-green-ink: var(--wd-ok);
  --p-red: var(--wd-crit-soft); --p-red-strong: var(--wd-crit-mark); --p-red-ink: var(--wd-crit);
  --p-gold: var(--wd-recessed); --p-gold-strong: var(--wd-border-strong); --p-gold-ink: var(--wd-text-2);
  --p-blue: var(--wd-primary-soft); --p-blue-strong: var(--wd-primary); --p-blue-ink: var(--wd-primary);
  --p-lav: var(--wd-recessed); --p-lav-strong: var(--wd-primary); --p-lav-ink: var(--wd-text-2);
  --p-pink: var(--wd-recessed); --p-pink-strong: var(--wd-primary); --p-pink-ink: var(--wd-text-2);
  --p-peach: var(--wd-recessed); --p-peach-strong: var(--wd-primary); --p-peach-ink: var(--wd-text-2);
  --p-teal: var(--wd-primary-soft); --p-teal-strong: var(--wd-primary); --p-teal-ink: var(--wd-primary);
  --p-flame: var(--wd-text-3);
  --p-border: 1px solid var(--wd-border); --p-drop: none; --p-drop-sm: none;
  --p-r: 12px; --p-r-tile: 10px; --p-r-sm: 8px;
  --p-display: var(--wd-sans); --p-body: var(--wd-sans);
  --v-navy-ink: var(--wd-text); --v-navy: var(--wd-text); --v-royal: var(--wd-primary); --v-link: var(--wd-primary); --v-mist: var(--wd-primary-soft); --v-tint: var(--wd-primary-soft);
  --v-text: var(--wd-text); --v-text-muted: var(--wd-text-2); --v-border: var(--wd-border); --v-page: var(--wd-canvas); --v-card: var(--wd-work);
  --v-accent: var(--wd-primary); --v-accent-text: var(--wd-on-primary);
  --v-verified: var(--wd-ok); --v-updated: var(--wd-warn); --v-conflict: var(--wd-crit); --v-unchecked: var(--wd-text-3);
  --v-on-navy: var(--wd-work); --v-on-status: var(--wd-work); --v-on-updated: var(--wd-work); --v-on-unchecked: var(--wd-work);
  --v-heading: var(--wd-text); --v-subheading: var(--wd-text-2); --v-link-hover: var(--wd-primary);
  --ground: var(--wd-canvas); --surface: var(--wd-work); --surface-2: var(--wd-recessed); --line: var(--wd-border); --line-strong: var(--wd-border-strong); --line-blue: var(--wd-primary);
  --ink: var(--wd-text); --ink-muted: var(--wd-text-2); --ink-faint: var(--wd-text-3);
  --primary: var(--wd-primary); --primary-hover: var(--wd-primary); --primary-tint: var(--wd-primary-soft); --on-primary: var(--wd-on-primary);
  --attention: var(--wd-crit); --attention-tint: var(--wd-crit-soft); --ok: var(--wd-ok); --ok-tint: var(--wd-ok-soft); --warn: var(--wd-warn); --warn-tint: var(--wd-warn-soft);
  --stop: var(--wd-crit); --stop-tint: var(--wd-crit-soft); --focus: var(--wd-primary); --diagram-ground: var(--wd-recessed); --diagram-ink: var(--wd-text);
  --l1: var(--wd-recessed); --l1-b: var(--wd-border); --l2: var(--wd-recessed); --l2-b: var(--wd-border); --l3: var(--wd-work); --l3-b: var(--wd-border-strong);
  --rule: var(--wd-border); --field: var(--wd-work); --field-base: var(--wd-work); --glass: var(--wd-overlay);
  --ok-500: var(--wd-ok); --warn-500: var(--wd-warn-mark); --stop-500: var(--wd-crit-mark); --ok-dim: var(--wd-ok-soft); --warn-dim: var(--wd-warn-soft); --stop-dim: var(--wd-crit-soft);
  --cy-500: var(--wd-primary); --cy-300: var(--wd-primary); --cy-700: var(--wd-primary); --cy-100: var(--wd-primary-soft);
  --uv-500: var(--wd-primary); --uv-300: var(--wd-primary); --uv-100: var(--wd-primary-soft);
  --verified: var(--wd-ok); --refined: var(--wd-warn); --superseded: var(--wd-crit); --held: var(--wd-text-2); --cyan: var(--wd-primary); --uv: var(--wd-primary);
  --line-2: var(--wd-border); --line-3: var(--wd-border-strong);
  --sans: var(--wd-sans); --serif: var(--wd-sans); --display: var(--wd-sans); --body: var(--wd-sans); --mono: var(--wd-mono);
  --r: 8px; --r-lg: 12px;
  background: var(--wd-canvas); color: var(--wd-text); font: 400 16px/1.6 var(--wd-sans); -webkit-font-smoothing: antialiased;
}
html:has(> body.desk) { background: var(--wd-canvas); }
body.desk h1, body.desk h2, body.desk h3, body.desk h1.page { font-family: var(--wd-sans); font-weight: 700; letter-spacing: -.01em; color: var(--wd-text); text-wrap: balance; }
body.desk a { color: var(--wd-primary); }
body.desk :focus-visible { outline: 2px solid var(--wd-primary); outline-offset: 2px; }
body.desk .wd-mono, body.desk .mono, body.desk kbd, body.desk .p-badge, body.desk .wd-n, body.desk .p-big, body.desk .p-statbox b, body.desk .qstat b { font-family: var(--wd-mono); font-variant-numeric: tabular-nums lining-nums; }

/* ================================================================ the shell: rail · centre · shelf */
body.desk { display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-height: 100vh; }
body.desk > .p-hud, body.desk > .wd-rail { grid-column: 1; grid-row: 1 / -1; position: sticky; top: 0; height: 100vh; overflow-y: auto; box-sizing: border-box;
  background: var(--wd-recessed); border: 0; border-right: 1px solid var(--wd-border); font-size: 13.5px; }
body.desk > .p-fbar { grid-column: 2; grid-row: 1; }
body.desk > main { grid-column: 2; grid-row: 2; min-width: 0; max-width: none; margin: 0; padding: 0; background: transparent; }
body.desk > main.narrow { max-width: none; }
body.desk > .foot { grid-column: 2; grid-row: 3; margin: 0; max-width: none; padding: 0 40px 32px; }
body.desk > .foot .foot-in { border-top: 1px solid var(--wd-border); }
body.desk > .foot p { font-weight: 400; color: var(--wd-text-3); }

/* the rail (the hub bar, stood down the left edge) */
body.desk .p-hud-in { display: flex; flex-direction: column; align-items: stretch; gap: 18px; max-width: none; min-height: 100%; margin: 0; padding: 16px 12px; box-sizing: border-box; }
/* the owner's logo with its tagline (2026-11-01), in its own colours, straight on the rail's ground in every theme (no
   panel, never recoloured); centred, 176px wide (owner 2026-11-01: slightly smaller; it filled the rail, about 208px) */
body.desk .p-brand { display: flex; justify-content: center; align-items: center; padding: 6px 14px 2px; text-decoration: none; border-radius: 8px; }
body.desk .p-brand picture { display: contents; }
body.desk .p-brand-logo { display: block; width: 100%; max-width: 176px; height: auto; }
body.desk .p-tabs { position: static; background: none; border: 0; box-shadow: none; padding: 0; }
body.desk .p-nav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
body.desk .p-nav a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 7px 10px; box-sizing: border-box; border: 0; border-radius: 7px;
  font: 600 14px/1.2 var(--wd-sans); color: var(--wd-text-2); text-decoration: none; background: none; }
body.desk .p-nav a:hover { background: var(--wd-work); color: var(--wd-text); border: 0; }
body.desk .p-nav a[aria-current="page"] { background: var(--wd-work); color: var(--wd-text); box-shadow: inset 0 0 0 1px var(--wd-border); border: 0; }
body.desk .p-tab-ic { display: inline-block; order: -1; width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; position: static; }
body.desk .p-nav .p-badge, body.desk .p-nav .wd-n { margin-left: auto; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; color: var(--wd-text-3); font: 500 12px/1 var(--wd-mono); position: static; }
body.desk .wd-rk { margin: 0 0 6px; padding: 0 10px; font: 700 11px/1.4 var(--wd-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--wd-text-3); }
body.desk .wd-tree details { border-radius: 7px; }
body.desk .wd-tree summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 7px; color: var(--wd-text-2); font-weight: 600; }
body.desk .wd-tree summary::-webkit-details-marker { display: none; }
body.desk .wd-tree summary::before { content: ""; flex: none; width: 6px; height: 6px; border-right: 1.5px solid var(--wd-text-3); border-bottom: 1.5px solid var(--wd-text-3); transform: rotate(-45deg); transition: transform .12s; }
body.desk .wd-tree details[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
body.desk .wd-tree summary:hover { background: var(--wd-work); }
body.desk .wd-tree summary .wd-n { margin-left: auto; font: 500 11.5px/1 var(--wd-mono); color: var(--wd-text-3); }
body.desk .wd-tree ul { list-style: none; margin: 2px 0 6px; padding: 0 0 0 24px; display: grid; gap: 1px; }
body.desk .wd-tree li a, body.desk .wd-tree li span { display: block; padding: 4px 8px; border-radius: 6px; color: var(--wd-text-2); text-decoration: none; font-size: 13px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.desk .wd-tree li a:hover { background: var(--wd-work); color: var(--wd-text); }
body.desk .wd-tree li a[aria-current="page"] { color: var(--wd-text); background: var(--wd-work); box-shadow: inset 2px 0 0 var(--wd-primary); }
body.desk .wd-queues { margin: auto 0 0; border-top: 1px solid var(--wd-border); padding: 14px 0 0; display: grid; gap: 8px; }
body.desk .wd-queues div { display: grid; grid-template-columns: 1fr auto; padding: 0 10px; color: var(--wd-text-2); }
body.desk .wd-queues dt, body.desk .wd-queues dd { margin: 0; }
body.desk .wd-queues dd { font: 500 13.5px/1.6 var(--wd-mono); color: var(--wd-text); }
/* the Dark mode toggle in the rail */
body.desk .wd-themebtn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 7px 10px; box-sizing: border-box; border: 1px solid var(--wd-border);
  border-radius: 8px; background: var(--wd-work); color: var(--wd-text-2); font: 600 13.5px/1.2 var(--wd-sans); cursor: pointer; text-align: left; }
body.desk .wd-themebtn:hover { color: var(--wd-text); border-color: var(--wd-border-strong); }
body.desk .wd-themebtn .wd-moon { flex: none; }
body.desk .wd-themebtn > span:not(.wd-switch) { flex: 1; }
body.desk .wd-switch { flex: none; width: 30px; height: 18px; border-radius: 999px; background: var(--wd-border-strong); position: relative; transition: background-color .15s; }
body.desk .wd-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--wd-work); transition: transform .15s; }
body.desk .wd-themebtn[aria-pressed="true"] .wd-switch { background: var(--wd-primary); }
body.desk .wd-themebtn[aria-pressed="true"] .wd-switch::after { transform: translateX(12px); }
body.desk .p-stats { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 2px; }
body.desk .p-avatar { width: 34px; height: 34px; border: 1px solid var(--wd-border-strong); border-radius: 50%; background: var(--wd-work); color: var(--wd-text); box-shadow: none; font: 700 14px/1 var(--wd-sans); }
body.desk .p-acct { position: relative; }
body.desk .p-acct-panel { left: 0; right: auto; bottom: calc(100% + 6px); top: auto; border: 1px solid var(--wd-border); border-radius: 9px; box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .5); background: var(--wd-overlay); }
body.desk .p-acct-panel a, body.desk .p-acct-panel button { color: var(--wd-text); font: 600 14px/1.3 var(--wd-sans); }
body.desk .p-stats .p-btn.p-add { flex: 1 1 auto; background: var(--wd-work); border-color: var(--wd-border-strong); color: var(--wd-text-2); }   /* one primary per screen: the rail's are quiet */
body.desk .p-stats .p-btn.p-demo-go { background: var(--wd-work); border-color: var(--wd-border-strong); color: var(--wd-text); }
body.desk .p-stats .p-btn.p-add:hover { color: var(--wd-text); filter: none; }

/* the focus bar (Learn): a thin bar at the top of the centre — exit, label, progress */
body.desk .p-fbar { background: var(--wd-work); border-bottom: 1px solid var(--wd-border); }
body.desk .p-fbar-in { max-width: none; padding: 10px 28px; gap: 14px; }
body.desk .p-exit { width: 32px; height: 32px; border: 1px solid var(--wd-border-strong); border-radius: 7px; background: var(--wd-work); box-shadow: none; color: var(--wd-text-2); }
body.desk .p-fprog-l { font: 600 13px/1.3 var(--wd-sans); color: var(--wd-text-2); }
body.desk .p-fprog-l span:last-child { font-family: var(--wd-mono); }
/* a desk screen (question, recall, Today) draws its own head inside the centre */
body.desk:has(.view.on > .wd-desk) > .p-fbar { display: none; }

/* views painted by verelect.css (upload, My lectures, the lecture page, settings, subscription, the old bank) */
body.desk .view > .p-wrap, body.desk .view > .p-focus-wrap { animation: none; }
body.desk :is(#v-home, #v-lectures, #v-lec, #v-settings, #v-sub, #v-qbank, #v-auth) { padding: 32px 40px 64px; max-width: 1100px; box-sizing: border-box; }
body.desk #v-settings { max-width: 820px; }
body.desk .view:has(> .wd-desk) { padding: 0; max-width: none; }

/* ================================================================ the old components, flattened
   1px rules instead of 2px ink edges, no hard drops, no bounce; the go button is the screen's one action-blue */
body.desk .p-blk, body.desk .card { border: 1px solid var(--wd-border); border-radius: 12px; box-shadow: none; background: var(--wd-work); }
body.desk .p-blk.is-dashed { border: 1px dashed var(--wd-border-strong); }
body.desk .p-chip { border: 1px solid var(--wd-border); background: var(--wd-work); color: var(--wd-text-2); font: 600 12.5px/1.4 var(--wd-sans); }
body.desk .p-bar { height: 6px; border: 0; border-radius: 3px; background: var(--wd-border); }
body.desk .p-bar > span { background: var(--wd-primary); }
body.desk .p-bar.is-green > span { background: var(--wd-ok); }
body.desk .p-btn, body.desk .btn { min-height: 40px; padding: 8px 16px; border: 1px solid var(--wd-border-strong); border-radius: 8px; box-shadow: none; background: var(--wd-work);
  color: var(--wd-text-2); font: 700 14.5px/1.2 var(--wd-sans); transition: background-color .12s, border-color .12s; transform: none; }
body.desk .p-btn:hover, body.desk .btn:hover { transform: none; box-shadow: none; border-color: var(--wd-text-3); color: var(--wd-text); background: var(--wd-work); }
body.desk .p-btn:active, body.desk .btn:active { transform: none; box-shadow: none; }
body.desk .p-btn.is-go, body.desk .btn.primary, body.desk .btn.accent { background: var(--wd-primary); border-color: var(--wd-primary); color: var(--wd-on-primary); }
body.desk .p-btn.is-go:hover, body.desk .btn.primary:hover, body.desk .btn.accent:hover { background: var(--wd-primary); color: var(--wd-on-primary); filter: brightness(1.08); }
body.desk .p-btn[disabled], body.desk .p-btn[aria-disabled="true"], body.desk .btn[disabled] { opacity: .45; box-shadow: none; }
body.desk .p-btn-sm { min-height: 34px; padding: 5px 12px; font-size: 13.5px; }
/* anything the old look paints with a strong fill is the primary here, so its label is the primary's label */
body.desk .uf-step[data-state="open"] .uf-n, body.desk .uf-step[data-state="done"] .uf-n, body.desk .p-sec.is-now .p-sec-num, body.desk .p-next-ic,
body.desk .p-chip.is-xp, body.desk .p-stat .p-lvl { color: var(--wd-on-primary); background: var(--wd-primary); border-color: var(--wd-primary); }
body.desk .p-sec.is-done .p-sec-num { background: var(--wd-ok-soft); border-color: var(--wd-ok); color: var(--wd-ok); }
body.desk .p-sheet, body.desk .p-reward { background: var(--wd-scrim); }
body.desk .uf-drop.locked { border-color: var(--wd-border-strong); }
body.desk .p-tile-link:hover { transform: none; box-shadow: none; border-color: var(--wd-border-strong); }
body.desk .p-title { font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
body.desk .p-h2 { font-size: 17px; font-weight: 700; }
body.desk .p-sub { font-weight: 400; font-size: 15px; color: var(--wd-text-2); }
body.desk .p-strong { font-weight: 700; }
body.desk .p-small { font-size: 13.5px; color: var(--wd-text-2); }
body.desk .p-muted { color: var(--wd-text-3); }
body.desk .p-big { font-weight: 500; font-size: 40px; letter-spacing: -.03em; }
body.desk .p-toast { background: var(--wd-overlay); color: var(--wd-text); border: 1px solid var(--wd-border); border-radius: 9px; box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .5); font: 600 14px/1.4 var(--wd-sans); }
body.desk .p-toasts { top: auto; bottom: 16px; }
body.desk input:not([type=checkbox]):not([type=radio]):not([type=file]), body.desk select, body.desk textarea {
  border: 1px solid var(--wd-border-strong); border-radius: 7px; background: var(--wd-work); color: var(--wd-text); font: 400 15px/1.4 var(--wd-sans); }
body.desk .qopt { border: 1px solid var(--wd-border); border-radius: 9px; box-shadow: none; background: var(--wd-work); }
body.desk .p-wrap { max-width: 1180px; margin: 0; padding: 32px 40px 64px; }
body.desk .p-focus-wrap { max-width: 860px; margin: 0; padding: 24px 40px 64px; }
body.desk .p-ring { box-shadow: none; border: 1px solid var(--wd-border);
  background: radial-gradient(closest-side, var(--wd-work) 72%, transparent 73% 100%), conic-gradient(var(--wd-primary) calc(var(--p-ring) * 1%), var(--wd-border) 0); }
body.desk .p-pring { box-shadow: none; }
body.desk .p-reward-card { box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .6); }
/* stars and XP are off the study screens (owner decision 3); Me shows them only when the student opts in */
body.desk .p-stars, body.desk .p-note-stars, body.desk .p-act > .p-star, body.desk .p-chip > .p-star { display: none; }
body.desk .p-star { fill: var(--wd-border-strong); stroke: none; }
body.desk .p-quote { border-left: 3px solid var(--wd-border-strong); }
body.desk .p-quest.is-done { background: var(--wd-ok-soft); }
body.desk .p-quest-ic { border: 1px solid var(--wd-border); background: var(--wd-recessed); }
body.desk .p-skel-b { background: var(--wd-recessed); border: 0; }
body.desk .p-lockveil { background: color-mix(in oklab, var(--wd-canvas) 78%, transparent); }

/* ================================================================ desk components */
body.desk kbd, body.desk .wd-kbd { font: 500 11px/1 var(--wd-mono); min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; display: inline-grid; place-items: center;
  border: 1px solid var(--wd-border-strong); border-bottom-width: 2px; border-radius: 4px; color: var(--wd-text-2); background: var(--wd-work); }
body.desk .wd-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; border: 1px solid transparent; border-radius: 8px; padding: 9px 16px; box-sizing: border-box;
  font: 700 14.5px/1.2 var(--wd-sans); cursor: pointer; white-space: nowrap; text-decoration: none; background: transparent; color: var(--wd-text-2); }
body.desk .wd-btn.is-primary { background: var(--wd-primary); border-color: var(--wd-primary); color: var(--wd-on-primary); }
body.desk .wd-btn.is-primary kbd { background: transparent; color: var(--wd-on-primary); border-color: color-mix(in oklab, var(--wd-on-primary) 45%, transparent); }
body.desk .wd-btn.is-primary:hover { filter: brightness(1.08); color: var(--wd-on-primary); }
body.desk .wd-btn.is-ghost { border-color: var(--wd-border-strong); background: var(--wd-work); }
body.desk .wd-btn.is-ghost:hover { border-color: var(--wd-text-3); color: var(--wd-text); }
body.desk .wd-btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
body.desk .wd-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--wd-border-strong); background: var(--wd-work); border-radius: 7px; padding: 5px 10px;
  font: 600 13px/1.2 var(--wd-sans); color: var(--wd-text-2); cursor: pointer; }
body.desk .wd-chip[aria-pressed="true"] { background: var(--wd-cue); border-color: var(--wd-warn-mark); color: var(--wd-text); }
body.desk .wd-linkbtn { border: 0; background: none; padding: 0; font: 600 13.5px/1.4 var(--wd-sans); color: var(--wd-primary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* the desk: centre and shelf */
body.desk .wd-desk { display: grid; grid-template-columns: minmax(0, 1fr) 400px; min-height: 100vh; align-items: stretch; }
body.desk .wd-desk.is-solo { grid-template-columns: minmax(0, 1fr); }
body.desk .wd-centre { background: var(--wd-work); display: flex; flex-direction: column; min-width: 0; }
body.desk .wd-chead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 28px; border-bottom: 1px solid var(--wd-border); font-size: 13px; color: var(--wd-text-2); min-height: 52px; box-sizing: border-box; }
body.desk .wd-exit { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--wd-border-strong); border-radius: 7px; color: var(--wd-text-2); text-decoration: none; flex: none; }
body.desk .wd-exit:hover { color: var(--wd-text); border-color: var(--wd-text-3); }
body.desk .wd-exit svg { width: 14px; height: 14px; }
body.desk .wd-crumb { display: flex; gap: 8px; align-items: center; min-width: 0; flex-wrap: wrap; }
body.desk .wd-crumb i { font-style: normal; color: var(--wd-text-3); }
body.desk .wd-crumb b { color: var(--wd-text); font-weight: 600; }
body.desk .wd-grow { flex: 1; }
body.desk .wd-timer { font: 400 13px/1.4 var(--wd-mono); color: var(--wd-text); padding: 3px 8px; border: 1px solid var(--wd-border); border-radius: 6px; }
body.desk .wd-pips { display: flex; gap: 3px; flex-wrap: wrap; }
body.desk .wd-pips i { width: 14px; height: 6px; border-radius: 2px; background: var(--wd-border); }
body.desk .wd-pips i.ok { background: var(--wd-ok); }
body.desk .wd-pips i.no { background: var(--wd-crit-mark); }
body.desk .wd-pips i.now { background: var(--wd-primary); }
body.desk .wd-qline { height: 4px; background: var(--wd-border); border-radius: 2px; overflow: hidden; width: 180px; }
body.desk .wd-qline i { display: block; height: 100%; background: var(--wd-primary); transition: width .2s; }
body.desk .wd-pad { display: none; align-items: center; gap: 6px; font: 700 12px/1.4 var(--wd-sans); color: var(--wd-ok); background: var(--wd-ok-soft); padding: 3px 9px; border-radius: 999px; }
body.desk.wd-has-pad .wd-pad { display: inline-flex; }
body.desk .wd-shelfbtn { display: none; }
body.desk .wd-cbody { padding: 32px 40px 48px; display: grid; gap: 24px; align-content: start; flex: 1; max-width: 780px; box-sizing: border-box; }

/* the question */
body.desk .wd-vig { margin: 0; font-size: 17px; line-height: 1.62; max-width: 65ch; color: var(--wd-text); }
body.desk .wd-vig .wd-v { font-family: var(--wd-mono); font-variant-numeric: tabular-nums; font-size: .94em; font-weight: 500; }
body.desk .wd-vig mark { background: transparent; color: inherit; border-radius: 3px; padding: 0 1px; transition: background-color .12s; }
body.desk mark.p-hlt { background: var(--wd-cue); color: inherit; border-radius: 3px; box-shadow: 0 1px 0 var(--wd-warn-mark); }
body.desk .wd-cues-on .wd-vig mark { background: var(--wd-cue); box-shadow: 0 1px 0 var(--wd-warn-mark); }
body.desk .wd-lead { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 700; max-width: 65ch; }
body.desk .wd-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--wd-text-3); }
body.desk .wd-cover { border: 1px dashed var(--wd-border-strong); border-radius: 10px; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--wd-canvas); max-width: 65ch; box-sizing: border-box; }
body.desk .wd-cover p { margin: 0; font-size: 14.5px; color: var(--wd-text-2); max-width: 40ch; }
body.desk .wd-cover p b { color: var(--wd-text); }
body.desk .wd-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 65ch; }
body.desk .wd-opt { width: 100%; text-align: left; display: grid; grid-template-columns: 28px 1fr auto; gap: 4px 12px; align-items: start; padding: 11px 14px; box-sizing: border-box;
  border: 1px solid var(--wd-border); border-radius: 9px; background: var(--wd-work); color: var(--wd-text); cursor: pointer; font: 400 15.5px/1.45 var(--wd-sans); }
body.desk .wd-opt:hover { border-color: var(--wd-border-strong); }
body.desk .wd-opt .wd-L { font: 600 13px/1 var(--wd-mono); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--wd-border-strong); color: var(--wd-text-2); }
body.desk .wd-opt[aria-checked="true"] { border-color: var(--wd-primary); box-shadow: inset 0 0 0 1px var(--wd-primary); background: var(--wd-primary-soft); }
body.desk .wd-opt[aria-checked="true"] .wd-L { background: var(--wd-primary); border-color: var(--wd-primary); color: var(--wd-on-primary); }
body.desk .wd-opt .wd-res { font: 700 12px/1.4 var(--wd-sans); align-self: center; white-space: nowrap; }
body.desk .wd-opt.is-struck > span:nth-child(2) { text-decoration: line-through; color: var(--wd-text-3); }
body.desk .wd-answered .wd-opt { cursor: default; }
body.desk .wd-answered .wd-opt.is-right { border-color: var(--wd-ok); box-shadow: inset 0 0 0 1px var(--wd-ok); background: var(--wd-ok-soft); }
body.desk .wd-answered .wd-opt.is-right .wd-L { background: var(--wd-ok); border-color: var(--wd-ok); color: var(--wd-work); }
body.desk .wd-answered .wd-opt.is-right .wd-res { color: var(--wd-ok); }
body.desk .wd-answered .wd-opt.is-wrong { border-color: var(--wd-crit-mark); box-shadow: inset 0 0 0 1px var(--wd-crit-mark); background: var(--wd-crit-soft); }
body.desk .wd-answered .wd-opt.is-wrong .wd-L { background: var(--wd-crit-mark); border-color: var(--wd-crit-mark); color: #fff; }
body.desk .wd-answered .wd-opt.is-wrong .wd-res { color: var(--wd-crit); }
body.desk .wd-answered .wd-opt:not(.is-right):not(.is-wrong) { opacity: .78; }
body.desk .wd-why { grid-column: 2 / 4; font-size: 14px; line-height: 1.55; color: var(--wd-text-2); padding-top: 4px; }
body.desk .wd-submit { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--wd-text-3); }
body.desk .wd-sure { display: inline-flex; border: 1px solid var(--wd-border-strong); border-radius: 8px; overflow: hidden; }
body.desk .wd-sure button { border: 0; background: var(--wd-work); padding: 6px 11px; font: 600 13px/1.2 var(--wd-sans); color: var(--wd-text-2); cursor: pointer; }
body.desk .wd-sure button + button { border-left: 1px solid var(--wd-border); }
body.desk .wd-sure button[aria-pressed="true"] { background: var(--wd-primary-soft); color: var(--wd-text); }
body.desk .wd-sure button kbd { margin-left: 4px; }
/* how sure: a step of every answer, between the options and Submit; outlined when Submit was tried without it */
body.desk .wd-step { display: flex; gap: 10px 16px; align-items: center; flex-wrap: wrap; max-width: 65ch; box-sizing: border-box; padding: 12px 14px;
  border: 1px solid var(--wd-border); border-radius: 10px; background: var(--wd-canvas); }
body.desk .wd-step-q { display: grid; gap: 2px; margin-right: auto; font-size: 14.5px; color: var(--wd-text); }
body.desk .wd-step-q small { font-size: 13px; line-height: 1.4; color: var(--wd-text-2); }
body.desk .wd-step.is-needed { border-color: var(--wd-primary); box-shadow: inset 0 0 0 1px var(--wd-primary); }
body.desk .wd-step.is-needed small { color: var(--wd-text); font-weight: 600; }
/* Today's shelf: the year's cohort goal, its bar the full width of the panel */
body.desk .p-goal .wd-qline { width: 100%; height: 6px; border-radius: 3px; }
/* the same step on a paper (mock, exam block, duel) and the reader's check: an answer without it is outlined */
body.desk .p-conf.is-needed { padding: 10px 12px; border: 1px solid var(--wd-primary); box-shadow: inset 0 0 0 1px var(--wd-primary); border-radius: 10px; }
body.desk .p-conf-need { flex-basis: 100%; margin: 0; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--wd-text); }
body.desk .wd-rationale { max-width: 65ch; border-top: 1px solid var(--wd-border); padding-top: 20px; display: grid; gap: 12px; }
body.desk .wd-rationale h2 { margin: 0; font-size: 16px; }
body.desk [tabindex="-1"]:focus { outline: none; }
body.desk .wd-rationale h2.is-right { color: var(--wd-ok); }
body.desk .wd-rationale h2.is-wrong { color: var(--wd-crit); }
body.desk .wd-rationale p { margin: 0; font-size: 15px; color: var(--wd-text-2); line-height: 1.6; }
body.desk .wd-src { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--wd-text-3); }
body.desk .wd-src a { font-weight: 600; text-decoration: none; }
body.desk .wd-next { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--wd-text-3); }
body.desk .wd-cbody .p-flag, body.desk .wd-cbody .p-whyrow, body.desk .wd-cbody .p-others { max-width: 65ch; }
body.desk .wd-cbody .p-chipbtn { border: 1px solid var(--wd-border-strong); background: var(--wd-work); border-radius: 7px; box-shadow: none; padding: 4px 10px; font: 600 13px/1.3 var(--wd-sans); color: var(--wd-text-2); }
body.desk .wd-banner { max-width: 65ch; border: 1px solid var(--wd-border); border-left: 3px solid var(--wd-primary); border-radius: 8px; padding: 12px 14px; font-size: 14px; color: var(--wd-text-2); background: var(--wd-canvas); }
body.desk .wd-banner b { color: var(--wd-text); }
body.desk .wd-banner.is-warn { border-left-color: var(--wd-warn-mark); }

/* the shelf */
body.desk .wd-shelf { background: var(--wd-canvas); border-left: 1px solid var(--wd-border); display: flex; flex-direction: column; min-width: 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; box-sizing: border-box; }
body.desk .wd-tabs { display: flex; gap: 2px; padding: 10px 12px 0; border-bottom: 1px solid var(--wd-border); min-height: 52px; box-sizing: border-box; align-items: flex-end; }
body.desk .wd-tabs button { border: 0; background: none; padding: 8px 12px; font: 600 13px/1.2 var(--wd-sans); color: var(--wd-text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
body.desk .wd-tabs button[aria-selected="true"] { color: var(--wd-text); border-bottom-color: var(--wd-primary); }
body.desk .wd-tabs button kbd { margin-left: 6px; }
body.desk .wd-shbody { padding: 16px; display: grid; gap: 14px; align-content: start; }
body.desk .wd-shk { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; color: var(--wd-text-3); }
body.desk .wd-shk b { font-size: 13px; color: var(--wd-text); font-weight: 700; }
body.desk .wd-panel { border: 1px solid var(--wd-border); border-radius: 9px; background: var(--wd-work); overflow: hidden; }
body.desk .wd-panel-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; font: 700 12px/1.4 var(--wd-sans); letter-spacing: .04em; text-transform: uppercase;
  color: var(--wd-text-3); background: var(--wd-recessed); border-bottom: 1px solid var(--wd-border); }
body.desk .wd-panel-h span:last-child { text-transform: none; letter-spacing: 0; font-weight: 500; font-family: var(--wd-mono); }
body.desk .wd-panel-b { padding: 12px; font-size: 13.5px; line-height: 1.55; color: var(--wd-text-2); display: grid; gap: 10px; }
body.desk .wd-panel-b p { margin: 0; }
body.desk .wd-panel-b blockquote { margin: 0; padding: 0 0 0 10px; border-left: 2px solid var(--wd-border-strong); color: var(--wd-text); }
body.desk .wd-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--wd-text-3); }
body.desk .wd-shfoot { margin-top: auto; padding: 12px 16px; border-top: 1px solid var(--wd-border); font-size: 12px; color: var(--wd-text-3); }
/* results as a UK flagged table: a letter and an arrow beside every flag, never colour alone */
body.desk .wd-lab { display: grid; grid-template-columns: 1fr 64px 34px 84px; align-items: center; gap: 8px; width: 100%; padding: 6px 12px; border: 0; border-top: 1px solid var(--wd-border); background: transparent; text-align: left; cursor: pointer; font: 400 13.5px/1.4 var(--wd-sans); color: var(--wd-text); }
body.desk .wd-panel-h + .wd-lab { border-top: 0; }
body.desk .wd-lab .nm { color: var(--wd-text-2); font-weight: 600; }
body.desk .wd-lab .val { font: 500 14px/1.4 var(--wd-mono); text-align: right; }
body.desk .wd-lab .fl { font: 600 12px/20px var(--wd-mono); text-align: center; border-radius: 4px; }
body.desk .wd-lab .rg { font: 400 12px/1.4 var(--wd-mono); color: var(--wd-text-3); text-align: right; }
body.desk .wd-lab.is-h .val, body.desk .wd-lab.is-l .val { color: var(--wd-warn); font-weight: 600; }
body.desk .wd-lab.is-h .fl, body.desk .wd-lab.is-l .fl { background: var(--wd-warn-soft); color: var(--wd-warn); }
body.desk .wd-lab.is-crit .val { color: var(--wd-crit); font-weight: 600; }
body.desk .wd-lab.is-crit .fl { background: var(--wd-crit-soft); color: var(--wd-crit); }
body.desk .wd-lab-def { display: none; padding: 8px 12px 12px; font-size: 13px; line-height: 1.55; color: var(--wd-text-2); background: var(--wd-canvas); border-top: 1px dashed var(--wd-border); }
body.desk .wd-lab[aria-expanded="true"] + .wd-lab-def { display: block; }
/* the memory model, in plain words */
body.desk .wd-stat { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px; margin: 0; font-size: 13px; color: var(--wd-text-2); }
body.desk .wd-stat dt, body.desk .wd-stat dd { margin: 0; }
body.desk .wd-stat dd { font: 500 13px/1.6 var(--wd-mono); color: var(--wd-text); text-align: right; }
body.desk .wd-rbar { height: 6px; border-radius: 3px; background: var(--wd-border); overflow: hidden; grid-column: 1 / -1; }
body.desk .wd-rbar i { display: block; height: 100%; background: var(--wd-primary); }
body.desk .wd-target { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--wd-border); font-size: 13px; color: var(--wd-text-2); }
body.desk .wd-target select { font: 500 13px var(--wd-mono); padding: 3px 6px; border-radius: 6px; }

/* recall */
body.desk .wd-stage { display: grid; place-items: center; flex: 1; padding: 40px; }
body.desk .wd-stage > div { display: grid; justify-items: center; width: 100%; }
body.desk .wd-card { width: min(100%, 620px); border: 1px solid var(--wd-border); border-radius: 14px; background: var(--wd-work); box-sizing: border-box;
  box-shadow: 0 1px 0 var(--wd-border), 0 18px 40px -28px color-mix(in oklab, var(--wd-text) 40%, transparent); padding: 32px 36px; display: grid; gap: 18px; }
body.desk .wd-card-k { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 12px; color: var(--wd-text-3); }
body.desk .wd-card-k b { color: var(--wd-text-2); font-weight: 600; }
body.desk .wd-front { margin: 0; font-size: 22px; line-height: 1.5; font-weight: 600; letter-spacing: -.01em; }
body.desk .wd-front .p-cloze-blank { font-family: var(--wd-mono); font-weight: 500; color: var(--wd-primary); background: var(--wd-primary-soft); border-radius: 5px; padding: 1px 8px; }
body.desk .wd-front .p-cloze, body.desk .wd-front strong.p-cloze { font-family: var(--wd-mono); font-weight: 600; color: var(--wd-text); background: var(--wd-ok-soft); box-shadow: inset 0 -2px 0 var(--wd-ok); border-radius: 5px; padding: 1px 8px; }
body.desk .wd-back { border-top: 1px solid var(--wd-border); padding-top: 16px; font-size: 15px; color: var(--wd-text-2); line-height: 1.6; display: grid; gap: 8px; }
body.desk .wd-back .wd-ans { font-size: 18px; color: var(--wd-text); font-weight: 600; }
body.desk .wd-grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(100%, 620px); margin-top: 16px; }
body.desk .wd-grade { border: 1px solid var(--wd-border-strong); background: var(--wd-work); color: var(--wd-text); border-radius: 9px; padding: 10px 8px; display: grid; gap: 4px; justify-items: center; cursor: pointer; font: 700 14px/1.2 var(--wd-sans); }
body.desk .wd-grade small { font: 500 12px/1.2 var(--wd-mono); color: var(--wd-text-3); }
body.desk .wd-grade .wd-keys { display: flex; gap: 4px; }
body.desk .wd-grade.is-good { border-color: var(--wd-primary); box-shadow: inset 0 0 0 1px var(--wd-primary); }
body.desk .wd-grades[aria-disabled="true"] .wd-grade { opacity: .4; pointer-events: none; }
body.desk .wd-reveal { display: flex; justify-content: center; margin-top: 16px; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--wd-text-3); }
body.desk .wd-toast { min-height: 22px; margin: 12px 0 0; font-size: 13px; color: var(--wd-text-2); text-align: center; }
body.desk .wd-toast b { font-family: var(--wd-mono); font-weight: 600; color: var(--wd-text); }
body.desk .wd-empty { max-width: 56ch; display: grid; gap: 14px; justify-items: start; }
body.desk .wd-empty h1 { margin: 0; font-size: 26px; }
body.desk .wd-empty p { margin: 0; color: var(--wd-text-2); }

/* Today */
body.desk .wd-today { padding: 28px 36px 40px; display: grid; gap: 22px; align-content: start; max-width: 860px; box-sizing: border-box; }
body.desk .wd-today h1 { margin: 0; font-size: 26px; }
body.desk .wd-today .wd-sub { margin: 4px 0 0; font-size: 14px; color: var(--wd-text-2); }
body.desk .wd-cta { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; }
body.desk .wd-due { border: 1px solid var(--wd-border); border-radius: 12px; padding: 20px 22px; display: grid; gap: 14px; background: var(--wd-work); align-content: start; }
body.desk .wd-due-n { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
body.desk .wd-due-n b { font: 500 40px/1 var(--wd-mono); letter-spacing: -.03em; }
body.desk .wd-due-n span { color: var(--wd-text-2); font-size: 14px; }
body.desk .wd-split { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--wd-text-3); }
body.desk .wd-split b { font-family: var(--wd-mono); color: var(--wd-text); font-weight: 500; }
body.desk .wd-triage { border: 1px solid var(--wd-border); border-radius: 12px; padding: 18px 20px; display: grid; gap: 10px; align-content: start; background: var(--wd-canvas); }
body.desk .wd-triage h2 { margin: 0; font-size: 15px; }
body.desk .wd-triage p { margin: 0; font-size: 13.5px; color: var(--wd-text-2); }
body.desk .wd-heat-wrap { border: 1px solid var(--wd-border); border-radius: 12px; overflow: hidden; background: var(--wd-work); }
body.desk .wd-heat-h { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--wd-border); gap: 12px; }
body.desk .wd-heat-h h2 { margin: 0; font-size: 15px; }
body.desk .wd-heat-h span { font-size: 13px; color: var(--wd-text-3); }
body.desk .wd-heat-scroll { overflow-x: auto; }
body.desk table.wd-heat { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 4px; padding: 8px 12px 12px; font-size: 13px; }
body.desk .wd-heat th { background: none; border: 0; font-weight: 600; color: var(--wd-text-3); text-align: left; padding: 4px 6px; font-size: 12px; }
body.desk .wd-heat th[scope="row"] { color: var(--wd-text-2); font-size: 13px; width: 28%; }
body.desk .wd-heat td { border: 0; height: 34px; border-radius: 6px; text-align: center; font: 500 12.5px/1 var(--wd-mono); color: var(--wd-text); }
body.desk .wd-heat td[style*="--heat"], body.desk .wd-scale i[style*="--heat"] { background: color-mix(in oklab, var(--wd-primary) calc((8 + var(--heat, 0) * var(--wd-heat-k)) * 1%), var(--wd-work)); }
body.desk .wd-heat td.is-none { border: 1px dashed var(--wd-border-strong); color: var(--wd-text-3); font: 400 12px/1.2 var(--wd-sans); }
body.desk .wd-heat td.is-focus { outline: 2px solid var(--wd-warn-mark); outline-offset: -2px; }
body.desk .wd-scale { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 18px 14px; font-size: 12px; color: var(--wd-text-3); }
body.desk .wd-scale i { width: 22px; height: 10px; border-radius: 2px; }
body.desk .wd-week { display: grid; margin: 0; }
body.desk .wd-week div { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--wd-border); font-size: 13px; color: var(--wd-text-2); }
body.desk .wd-week div:first-child { border-top: 0; }
body.desk .wd-week dt, body.desk .wd-week dd { margin: 0; }
body.desk .wd-week dd { font-family: var(--wd-mono); font-weight: 500; color: var(--wd-text); }
body.desk .wd-then { display: grid; gap: 0; }
body.desk .wd-then a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; border-top: 1px solid var(--wd-border); text-decoration: none; color: var(--wd-text); }
body.desk .wd-then a:first-child { border-top: 0; }
body.desk .wd-then a:hover { background: var(--wd-canvas); }
body.desk .wd-then b { font-weight: 600; font-size: 13.5px; }
body.desk .wd-then small { grid-column: 1; font-size: 12.5px; color: var(--wd-text-3); }
body.desk .wd-then span { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 12.5px; font-weight: 600; color: var(--wd-primary); }

/* the key list (?) */
body.desk .wd-help { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: color-mix(in oklab, var(--wd-canvas) 60%, transparent); }
body.desk .wd-help[hidden] { display: none; }
body.desk .wd-help-in { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto; background: var(--wd-overlay); border: 1px solid var(--wd-border); border-radius: 12px; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .6); padding: 20px 22px; box-sizing: border-box; }
body.desk .wd-help h2 { margin: 0 0 10px; font-size: 17px; }
body.desk .wd-help table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
body.desk .wd-help td { padding: 7px 4px; border-top: 1px solid var(--wd-border); color: var(--wd-text-2); vertical-align: top; }
body.desk .wd-help td:first-child { color: var(--wd-text); font-weight: 600; }
body.desk .wd-help p { margin: 12px 0 0; font-size: 13px; color: var(--wd-text-3); }

/* the theme switch in Settings */
body.desk .wd-seg { display: inline-flex; border: 1px solid var(--wd-border-strong); border-radius: 8px; overflow: hidden; }
body.desk .wd-seg button { border: 0; background: var(--wd-work); padding: 7px 14px; font: 600 13.5px/1.2 var(--wd-sans); color: var(--wd-text-2); cursor: pointer; min-height: 36px; }
body.desk .wd-seg button + button { border-left: 1px solid var(--wd-border); }
body.desk .wd-seg button[aria-pressed="true"] { background: var(--wd-primary-soft); color: var(--wd-text); }

/* ================================================================ narrow screens */
/* under 1100px: the rail is icons; the shelf is a drawer opened from the centre's head */
@media (max-width: 1100px) {
  body.desk { grid-template-columns: 64px minmax(0, 1fr); }
  body.desk .p-hud-in { padding: 14px 8px; gap: 14px; align-items: center; }
  body.desk .wd-tree, body.desk .wd-queues, body.desk .p-add, body.desk .p-demo-tag { display: none; }
  body.desk .p-brand { align-self: center; padding: 0; }
  body.desk .p-brand-logo { width: 44px; max-width: none; }   /* the 64px icon rail: the wordmark alone, no tagline (owner 2026-11-01) */
  body.desk .p-nav a { width: 44px; height: 44px; justify-content: center; padding: 0; font-size: 0; position: relative; }
  body.desk .p-nav a .p-tab-ic { width: 20px; height: 20px; }
  body.desk .p-nav .p-badge, body.desk .p-nav .wd-n { position: absolute; top: 3px; right: 2px; font-size: 10px; }
  body.desk .p-stats { flex-direction: column; margin-top: auto; }
  body.desk .wd-themebtn { width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 0; margin-top: auto; }
  body.desk .wd-themebtn + .p-stats { margin-top: 0; }
  body.desk .wd-themebtn > span { display: none; }
  body.desk .wd-themebtn[aria-pressed="true"] { background: var(--wd-primary-soft); color: var(--wd-text); border-color: var(--wd-primary); }
  body.desk .p-stats .p-btn { font-size: 11.5px; padding: 4px 6px; min-height: 32px; white-space: nowrap; width: 100%; justify-content: center; }
  body.desk .p-stats { width: 100%; }
  body.desk .wd-desk { grid-template-columns: minmax(0, 1fr); }
  body.desk .wd-shelfbtn { display: inline-flex; }
  body.desk .wd-shelf { position: fixed; top: 0; right: 0; bottom: 0; height: auto; width: min(400px, 92vw); z-index: 55; background: var(--wd-overlay);
    box-shadow: -24px 0 60px -30px rgba(0, 0, 0, .55); transform: translateX(105%); transition: transform .18s ease; visibility: hidden; }
  body.desk.wd-shelf-open .wd-shelf { transform: none; visibility: visible; }
  body.desk .wd-shelf-x { display: inline-grid; }
  body.desk > .foot { padding: 0 24px 24px; }
}
body.desk .wd-shelf-x { display: none; place-items: center; margin: 0 0 0 auto; width: 32px; height: 32px; border: 1px solid var(--wd-border-strong); border-radius: 7px; background: var(--wd-work); color: var(--wd-text-2); cursor: pointer; align-self: center; }
/* under 760px: one column; the rail is a menu across the top */
@media (max-width: 760px) {
  body.desk { display: block; }
  body.desk > .p-hud, body.desk > .wd-rail { position: sticky; top: 0; z-index: 30; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--wd-border); }
  /* two rows (owner 2026-11-01): the logo with its tagline, dark mode and the account on top; the five tabs beneath */
  body.desk .p-hud-in { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 8px 8px 4px; min-height: 0; }
  body.desk .p-tabs { order: 3; flex: 1 0 100%; min-width: 0; overflow-x: auto; }
  body.desk .p-nav { display: flex; gap: 0; }
  body.desk .p-tabs { position: static; padding: 0; border: 0; background: none; }
  body.desk .p-tabs .p-nav { display: flex; gap: 2px; justify-content: space-around; }
  body.desk .p-tabs .p-nav a { width: 44px; height: 44px; min-height: 44px; padding: 0; flex-direction: row; justify-content: center; font-size: 0; border-radius: 8px; }
  body.desk .p-tabs .p-nav a[aria-current="page"] { background: var(--wd-work); color: var(--wd-text); }
  body.desk .p-tabs .p-badge, body.desk .p-tabs .wd-n { position: absolute; top: 2px; right: 1px; min-width: 0; height: auto; font-size: 10px; }
  body.desk .p-brand { order: 0; flex: none; margin-right: auto; padding: 0 0 0 4px; }
  body.desk .p-brand-logo { width: 150px; max-width: none; }
  body.desk .wd-themebtn { order: 1; }
  body.desk .p-stats { order: 2; }
  body.desk:has(.p-tabs) footer { padding-bottom: 24px; }
  body.desk .p-stats { width: auto; flex-wrap: nowrap; }
  body.desk .wd-themebtn { margin-top: 0; flex: none; width: 40px; height: 40px; }
  body.desk .p-stats .p-btn { width: auto; min-height: 36px; padding: 4px 10px; font-size: 13px; }
  body.desk .wd-desk { min-height: 0; }
  body.desk .wd-timer, body.desk .wd-pips, body.desk .wd-chead .wd-qline { display: none; }
  body.desk .wd-chead { flex-wrap: nowrap; }
  body.desk .wd-crumb { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
  body.desk .wd-crumb > * { overflow: hidden; text-overflow: ellipsis; }
  body.desk .wd-stage { place-items: start center; }
  body.desk .p-stats { flex-direction: row; margin: 0; }
  body.desk .p-acct-panel { left: auto; right: 0; top: calc(100% + 6px); bottom: auto; }
  body.desk .wd-chead { padding: 10px 16px; gap: 10px; }
  body.desk .wd-cbody { padding: 20px 16px 40px; }
  body.desk .wd-stage { padding: 20px 16px; }
  body.desk .wd-card { padding: 22px 20px; }
  body.desk .wd-front { font-size: 19px; }
  body.desk .wd-grades { grid-template-columns: repeat(2, 1fr); }
  body.desk .wd-today { padding: 20px 16px 32px; }
  body.desk .wd-cta { grid-template-columns: 1fr; }
  body.desk .wd-qline { width: 96px; }
  body.desk .wd-opt { grid-template-columns: 28px 1fr; }
  body.desk .wd-opt .wd-res { grid-column: 2; }
  body.desk .wd-why { grid-column: 1 / -1; }
  body.desk .wd-lab { grid-template-columns: 1fr 56px 34px 72px; }
  body.desk :is(#v-home, #v-lectures, #v-lec, #v-settings, #v-sub, #v-qbank, #v-auth) { padding: 20px 16px 48px; }
  body.desk .p-wrap, body.desk .p-focus-wrap { padding: 20px 16px 48px; }
  body.desk > .foot { padding: 0 16px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  body.desk *, body.desk *::before, body.desk *::after { transition: none !important; animation: none !important; }
}
/* the rail carries Log in and Sign up on the demo; the focus bar's copy stands down */
body.desk .p-fbar .p-demo-in, body.desk .p-fbar .p-demo-go { display: none; }
@media (max-width: 420px) {
  body.desk .p-tabs .p-nav a { width: 40px; }
  body.desk .p-stats .p-demo-in { display: none; }      /* Sign up's page links to Log in */
}

/* the old look's hard drops and lifts, retired on the desk (each rule here names a play.css rule that drew one) */
body.desk :is(.p-opt, .p-opt.is-sel, .p-grade, .p-blk.p-tile-link, .p-plan-it, .uf-tile, .p-btn-bridge, .p-card, .p-avatar-big, .p-bridge-offer,
  .p-quiz.is-bridge, .p-quiz.is-fixed, .p-bridge-out.is-won, .p-bridge-banner.is-won, .p-ring):is(*, :hover) { box-shadow: none; transform: none; }
body.desk .p-avatar[aria-current="page"] { box-shadow: 0 0 0 2px var(--wd-primary); }
body.desk .p-avatar-big { border: 1px solid var(--wd-border-strong); }
body.desk .p-world-banner { background: var(--wd-recessed); color: var(--wd-text); box-shadow: none; }
/* the Map's "<system> world" heading: play.css paints it in --p-cream, which the desk maps to the canvas, so it vanished on
   the recessed banner (owner 2026-11-01, a leftover): the desk's own text colour, light and dark */
body.desk .p-world-banner .p-h2 { color: var(--wd-text); }
body.desk .p-world-banner > span { color: var(--wd-text-2); font-weight: 600; }
body.desk .p-bridge-offer, body.desk .p-quiz.is-bridge, body.desk .p-quiz.is-fixed { border: 1px solid var(--wd-primary); }
body.desk .p-btn-bridge { background: var(--wd-primary); border-color: var(--wd-primary); color: var(--wd-on-primary); }
body.desk .p-quiz.is-bridge { background: var(--wd-work); }
body.desk .wd-check { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; font-weight: 600; cursor: pointer; }
body.desk .wd-check input { width: 18px; height: 18px; accent-color: var(--wd-primary); }
/* the guideline stamps: a word in a quiet chip; refined is amber (guidance moved), superseded red */
body.desk .stamp { border: 1px solid currentColor; font-weight: 700; }
body.desk .stamp.refined { background: var(--wd-warn-soft); color: var(--wd-warn); }
body.desk .stamp.working { background: var(--wd-recessed); color: var(--wd-text-2); }
/* Recall's suspended cards, listed on the picker to bring back */
body.desk .wd-suslist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
body.desk .wd-suslist li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--wd-border); }
body.desk .wd-suslist li > span { display: grid; gap: 2px; min-width: 0; }
body.desk .wd-suslist b { font-weight: 600; font-size: 14px; }
body.desk .wd-suslist small { font-size: 12.5px; color: var(--wd-text-3); }

/* ================================================================ the reader (Lectures → a lecture's note) */
body.desk .wd-reader { max-width: 820px; gap: 16px; }
body.desk .wd-eyebrow { margin: 0 0 6px; font: 700 12px/1.4 var(--wd-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--wd-text-3); }
body.desk .wd-h1 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
body.desk .wd-reader .wd-sub { margin: 6px 0 0; color: var(--wd-text-2); font-size: 15px; }
body.desk .wd-reader .p-sec { border: 1px solid var(--wd-border); border-radius: 10px; background: var(--wd-work); box-shadow: none; }
body.desk .wd-reader .p-sec.is-now { border-color: var(--wd-primary); box-shadow: inset 3px 0 0 var(--wd-primary); }
body.desk .wd-reader .p-sec-head { font-family: var(--wd-sans); }
body.desk .wd-reader .p-sec-num { border: 1px solid var(--wd-border-strong); background: var(--wd-work); box-shadow: none; font-family: var(--wd-mono); color: var(--wd-text-2); }
body.desk .wd-reader .p-sec.is-done .p-sec-num { background: var(--wd-ok-soft); border-color: var(--wd-ok); color: var(--wd-ok); }
body.desk .wd-reader .p-sec.is-now .p-sec-num { background: var(--wd-primary); border-color: var(--wd-primary); color: var(--wd-on-primary); }
body.desk .wd-reader .p-sec-head svg path { stroke: currentColor; }
body.desk .wd-reader .p-note-html { font-size: 17px; line-height: 1.6; max-width: 65ch; color: var(--wd-text); }
body.desk .wd-reader .p-note-html :is(code, .num) { font-family: var(--wd-mono); }
body.desk .wd-toc { display: grid; gap: 1px; }
body.desk .wd-toc-a { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 7px; color: var(--wd-text-2); text-decoration: none; font-size: 13.5px; line-height: 1.35; }
body.desk .wd-toc-a:hover { background: var(--wd-work); color: var(--wd-text); }
body.desk .wd-toc-a.is-sel { background: var(--wd-work); color: var(--wd-text); box-shadow: inset 2px 0 0 var(--wd-primary); }
body.desk .wd-toc-a small { font-size: 12px; color: var(--wd-text-3); }
body.desk .wd-toc-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--wd-border-strong); font: 500 11.5px/1 var(--wd-mono); color: var(--wd-text-2); }
body.desk .wd-toc-n.is-now { border-color: var(--wd-primary); color: var(--wd-primary); }
body.desk .wd-toc-n.is-done { background: var(--wd-ok-soft); border-color: var(--wd-ok); color: var(--wd-ok); }
body.desk .wd-panel-b .stamp { margin-right: 6px; }

/* ================================================================ the session review */
body.desk .wd-review { max-width: 900px; }
body.desk .wd-tablewrap { overflow-x: auto; border: 1px solid var(--wd-border); border-radius: 10px; }
body.desk table.wd-rtable { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; }
body.desk .wd-rtable th { text-align: left; font: 700 12px/1.4 var(--wd-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--wd-text-3); padding: 10px 12px; background: var(--wd-recessed); border: 0; border-bottom: 1px solid var(--wd-border); }
body.desk .wd-rtable td { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--wd-border); vertical-align: top; color: var(--wd-text-2); }
body.desk .wd-rtable tr:last-child td { border-bottom: 0; }
body.desk .wd-rtable td small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--wd-text-3); }
body.desk .wd-rowbtn { border: 0; background: none; padding: 0; text-align: left; font: 600 14px/1.45 var(--wd-sans); color: var(--wd-text); cursor: pointer; }
body.desk .wd-rowbtn:hover { color: var(--wd-primary); text-decoration: underline; }
body.desk .wd-rtable .is-right .wd-mark { color: var(--wd-ok); font-weight: 700; }
body.desk .wd-rtable .is-wrong .wd-mark { color: var(--wd-crit); font-weight: 700; }
body.desk .wd-dim { color: var(--wd-text-3); }
body.desk .wd-cal { display: grid; gap: 8px; }
body.desk .wd-cal-row { display: grid; grid-template-columns: 64px 1fr 44px; gap: 10px; align-items: center; font-size: 13px; }
body.desk .wd-cal-row b { font: 500 13px/1 var(--wd-mono); color: var(--wd-text); text-align: right; }
body.desk .wd-cal-bar { height: 8px; border-radius: 4px; background: var(--wd-border); overflow: hidden; }
body.desk .wd-cal-bar i { display: block; height: 100%; background: var(--wd-primary); }

/* ================================================================ Questions: ready-made sessions */
body.desk .wd-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 16px 0 24px; }
body.desk .wd-preset { display: grid; gap: 6px; align-content: start; text-align: left; padding: 14px 16px; border: 1px solid var(--wd-border); border-radius: 10px; background: var(--wd-work); color: var(--wd-text); cursor: pointer; font-family: var(--wd-sans); }
body.desk .wd-preset:hover { border-color: var(--wd-border-strong); }
body.desk .wd-preset.is-first { border-color: var(--wd-primary); box-shadow: inset 0 0 0 1px var(--wd-primary); }
body.desk .wd-preset b { font-size: 15px; font-weight: 700; }
body.desk .wd-preset span { font-size: 13px; line-height: 1.45; color: var(--wd-text-2); }
body.desk .wd-preset small { font: 500 12px/1.3 var(--wd-mono); color: var(--wd-text-3); }

/* ================================================================ Progress */
body.desk .wd-exams { gap: 14px; }
body.desk .wd-exam { display: grid; gap: 6px; }
body.desk .wd-exam-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
body.desk .wd-exam-top b { color: var(--wd-text); font-weight: 600; }
body.desk .wd-exam-bar { position: relative; height: 8px; border-radius: 4px; background: var(--wd-border); }
body.desk .wd-exam-bar i { display: block; height: 100%; border-radius: 4px; background: var(--wd-primary); }
body.desk .wd-exam-bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--wd-text); }
body.desk .wd-exam small { font-size: 12.5px; color: var(--wd-text-3); }
body.desk .wd-trend th[scope="row"] { width: 22%; }
body.desk .wd-trend td.wd-num { background: var(--wd-canvas); color: var(--wd-text); }
body.desk .wd-heat td.is-under { box-shadow: inset 0 -2px 0 var(--wd-warn-mark); }
body.desk .wd-panel-h a { font-family: var(--wd-sans); font-weight: 600; }

/* ================================================================ first-run setup, on Today */
body.desk .wd-setup { border: 1px solid var(--wd-primary); border-radius: 12px; background: var(--wd-work); padding: 20px 22px; display: grid; gap: 16px; }
body.desk .wd-setup h2 { margin: 0; font-size: 17px; }
body.desk .wd-setup > div > p { margin: 4px 0 0; font-size: 14px; color: var(--wd-text-2); }
body.desk .wd-setup fieldset { border: 0; border-top: 1px solid var(--wd-border); margin: 0; padding: 14px 0 0; display: grid; gap: 8px; min-width: 0; }
body.desk .wd-setup legend { padding: 0; float: left; width: 100%; margin-bottom: 8px; font-weight: 700; font-size: 14px; color: var(--wd-text); }
body.desk .wd-setup small { font-size: 12.5px; color: var(--wd-text-3); line-height: 1.45; }
body.desk .wd-setrow { display: flex; gap: 10px; flex-wrap: wrap; }
body.desk .wd-setup select, body.desk .wd-setup input[type=date] { min-height: 38px; padding: 6px 10px; }
body.desk .wd-radios label { display: inline-flex; cursor: pointer; }
body.desk .wd-radios label + label { border-left: 1px solid var(--wd-border); }
body.desk .wd-radios input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body.desk .wd-radios span { padding: 7px 16px; font: 600 13.5px/1.2 var(--wd-mono); color: var(--wd-text-2); background: var(--wd-work); }
body.desk .wd-radios input:checked + span { background: var(--wd-primary-soft); color: var(--wd-text); }
body.desk .wd-radios input:focus-visible + span { outline: 2px solid var(--wd-primary); outline-offset: -2px; }
body.desk .wd-setup .wd-seg { justify-self: start; }
body.desk .wd-setmsg { margin: 0; font-size: 13px; color: var(--wd-crit); min-height: 1em; }
body.desk .wd-setup fieldset > select { justify-self: start; min-width: 200px; }

/* ================================================================ front door: the plans below Today (owner 2026-10-27) */
body.desk .wd-raillink { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 7px 10px; margin-top: -10px; border-radius: 7px; color: var(--wd-text-2); text-decoration: none; font: 600 14px/1.2 var(--wd-sans); }
body.desk .wd-raillink:hover { background: var(--wd-work); color: var(--wd-text); }
body.desk .wd-raillink svg { flex: none; }
body.desk .wd-plans { margin-top: 18px; padding-top: 28px; border-top: 1px solid var(--wd-border); display: grid; gap: 18px; scroll-margin-top: 16px; }
body.desk .wd-plans-head h2 { margin: 0; font-size: 22px; }
body.desk .wd-plans-head p:not(.wd-eyebrow) { margin: 6px 0 0; font-size: 15px; color: var(--wd-text-2); }
body.desk .wd-plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
body.desk .wd-plan { border: 1px solid var(--wd-border); border-radius: 12px; background: var(--wd-work); padding: 20px 22px; display: grid; gap: 10px; align-content: start; }
body.desk .wd-plan.is-best { border-color: var(--wd-primary); box-shadow: inset 0 0 0 1px var(--wd-primary); }
body.desk .wd-plan h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
body.desk .wd-plan-tag { font: 600 11.5px/1.4 var(--wd-sans); color: var(--wd-primary); background: var(--wd-primary-soft); padding: 2px 8px; border-radius: 999px; }
body.desk .wd-price { margin: 0; display: flex; align-items: baseline; gap: 8px; }
body.desk .wd-price b { font: 500 34px/1 var(--wd-mono); letter-spacing: -.03em; color: var(--wd-text); }
body.desk .wd-price span { font-size: 14px; color: var(--wd-text-2); }
body.desk .wd-plan-line { margin: 0; font-size: 13.5px; color: var(--wd-text-2); }
body.desk .wd-plan .wd-btn { justify-self: start; }
body.desk .wd-plan-gets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
body.desk .wd-plan-gets li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--wd-border); }
body.desk .wd-plan-gets b { font-size: 14px; font-weight: 600; }
body.desk .wd-plan-gets span { font-size: 13px; color: var(--wd-text-2); line-height: 1.45; }
body.desk .wd-plan-foot { margin: 0; font-size: 13px; color: var(--wd-text-3); }
@media (max-width: 1100px) {
  body.desk .wd-raillink { width: 44px; height: 44px; padding: 0; justify-content: center; margin-top: -6px; }
  body.desk .wd-raillink span { display: none; }
}
@media (max-width: 760px) { body.desk .wd-raillink { display: none; } body.desk .wd-plans { scroll-margin-top: 136px; } }   /* the phone's top bar is sticky (two rows, 120px); Today carries the plans */

/* the open demo (owner 2026-11-01): the systems without a demo lecture, listed once under one quiet line (Lectures) */
body.desk .wd-sysempty p { margin: 4px 0 12px; color: var(--wd-text-3); }
body.desk .wd-sysempty ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
body.desk .wd-sysempty li { padding: 4px 10px; border: 1px dashed var(--wd-border-strong); border-radius: 999px; font-size: 13px; color: var(--wd-text-2); }
body.desk .wd-panel-add.is-locked .wd-lockic { display: inline-flex; color: var(--wd-text-3); }
body.desk .wd-panel-add.is-locked .wd-lockic svg { width: 16px; height: 16px; }

/* the way out of the demo (owner feedback 2026-11-01; _demo_bar.html): a slim bar on every demo screen, always in view —
   sticky at the top of the centre column on a wide screen, fixed along the bottom edge on a phone. It carries the one
   primary way in (sign up, first lecture free), so the rail's Demo chip and its Sign up stand down; Log in stays. */
body.desk .wd-demobar { position: sticky; top: 0; z-index: 45; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 28px;
  box-sizing: border-box; background: var(--wd-primary-soft); border-bottom: 1px solid var(--wd-border); }
body.desk .wd-demobar-t { margin: 0 auto 0 0; font: 600 14px/1.3 var(--wd-sans); color: var(--wd-text); }
body.desk .wd-demobar .wd-btn { min-height: 36px; padding: 6px 14px; font-size: 14px; text-decoration: none; white-space: nowrap; }
body.desk:has(.wd-demobar) .wd-shelf { top: 52px; height: calc(100vh - 52px); }
body.desk:has(.wd-demobar) .p-stats .p-demo-tag, body.desk:has(.wd-demobar) .p-stats .p-demo-go { display: none; }
@media (max-width: 760px) {
  body.desk .wd-demobar { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 50; flex-wrap: wrap; justify-content: center; gap: 6px 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-bottom: 0; border-top: 1px solid var(--wd-border);
    box-shadow: 0 -10px 24px -18px var(--wd-scrim); }
  body.desk .wd-demobar-t { flex: 1 0 100%; margin: 0; text-align: center; font-size: 13px; }
  body.desk .wd-demobar .wd-btn { flex: 1 1 0; min-height: 44px; justify-content: center; padding: 6px 10px; }
  body.desk:has(.wd-demobar) { padding-bottom: 100px; }
  body.desk:has(.wd-demobar) .p-stats .p-demo-in { display: inline-flex; }       /* Sign up is in the bar; Log in stays up top */
}

/* ================================================================ Lectures and Cards as compact rows (owner 2026-11-01)
   "Simple, sleek, studious; nothing childish or game-like." One row per lecture — its name, a thin completion bar with
   its count, small links — under its system, each system a <details> (play.js keeps which are open). The rows of one
   system share one grid (subgrid), so every bar and link lines up down 40 lectures. Under 760px a row is three lines:
   the name and its count, the bar, then the links at 44px. */
body.desk .wd-lec, body.desk .wd-cards { max-width: 1040px; }
body.desk .wd-lhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin: 4px 0 18px; }
body.desk .wd-lhead .p-title { margin: 0; }
body.desk .wd-lhead .p-sub { margin: 4px 0 0; }
body.desk .wd-lhead-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body.desk .wd-lhead-acts .wd-btn { text-decoration: none; }
body.desk .wd-find { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--wd-border-strong);
  border-radius: 8px; background: var(--wd-work); color: var(--wd-text-3); width: 240px; }
body.desk .wd-find:focus-within { border-color: var(--wd-primary); box-shadow: 0 0 0 1px var(--wd-primary); }
body.desk .wd-find.wd-find input[type="search"][type="search"] { flex: 1; min-width: 0; border: 0; outline: 0; padding: 8px 0; background: transparent; font: 400 14.5px/1.3 var(--wd-sans); color: var(--wd-text); }
body.desk .wd-find-none { margin: 4px 0 18px; font-size: 14px; color: var(--wd-text-2); }

/* Up next: one line, the screen's one primary */
body.desk .wd-upnext { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 18px; padding: 12px 14px 12px 18px; border: 1px solid var(--wd-border);
  border-left: 3px solid var(--wd-primary); border-radius: 10px; background: var(--wd-work); }
body.desk .wd-upnext-k { font: 600 11.5px/1.2 var(--wd-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--wd-text-3); }
body.desk .wd-upnext b { font-size: 15.5px; font-weight: 700; color: var(--wd-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
body.desk .wd-upnext-t { font-size: 13.5px; color: var(--wd-text-2); }
body.desk .wd-upnext .wd-btn { margin-left: auto; min-height: 36px; padding: 6px 16px; }

/* a system: a hairline box; its summary is the header row */
body.desk .wd-systems { display: grid; gap: 10px; margin-bottom: 18px; }
body.desk .wd-sys { border: 1px solid var(--wd-border); border-radius: 10px; background: var(--wd-work); overflow: hidden; }
body.desk .wd-sys > summary { display: flex; align-items: center; gap: 8px 16px; min-height: 48px; padding: 8px 16px; box-sizing: border-box; cursor: pointer; list-style: none; }
body.desk .wd-sys > summary::-webkit-details-marker { display: none; }
body.desk .wd-sys > summary::marker { content: ''; }
body.desk .wd-sys > summary:hover { background: var(--wd-canvas); }
body.desk .wd-sys-h { display: flex; align-items: center; gap: 8px; min-width: 0; margin-right: auto; }
body.desk .wd-sys-h h2 { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.005em; }
body.desk .wd-sys-chev { flex: none; color: var(--wd-text-3); transition: transform .15s; }
body.desk .wd-sys[open] > summary .wd-sys-chev { transform: rotate(90deg); }
body.desk .wd-sys-meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--wd-text-2); white-space: nowrap; }
body.desk .wd-sys-meta .wd-mono { font-size: 12.5px; color: var(--wd-text-3); }
body.desk .wd-sys-go { font: 600 13.5px/1.2 var(--wd-sans); text-decoration: none; padding: 6px 2px; white-space: nowrap; }
body.desk .wd-sys-go:hover { text-decoration: underline; text-underline-offset: 2px; }
body.desk .wd-sys[open] > summary { border-bottom: 1px solid var(--wd-border); }

/* the rows: one grid per system — name · bar · count · then up to three links (an absent link keeps its column) */
body.desk .wd-lrows { list-style: none; margin: 0; padding: 0; gap: 0; display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(44px, auto) repeat(3, auto); }
body.desk .wd-lrow { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; column-gap: 14px; min-height: 44px; padding: 4px 10px 4px 16px;
  box-sizing: border-box; border-top: 1px solid var(--wd-border); }
body.desk .wd-lrows > .wd-lrow:first-child { border-top: 0; }
body.desk .wd-lrow:hover { background: var(--wd-canvas); }
body.desk .wd-lrow[hidden] { display: none; }
body.desk .wd-lname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 500; color: var(--wd-text); }
body.desk .wd-lbar { display: block; height: 4px; border-radius: 2px; background: var(--wd-border); overflow: hidden; }
body.desk .wd-lbar > i { display: block; height: 100%; border-radius: 2px; background: var(--wd-primary); }
body.desk .wd-lnum { font: 400 12px/1 var(--wd-mono); font-variant-numeric: tabular-nums; color: var(--wd-text-3); white-space: nowrap; }
body.desk .wd-ll { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; border-radius: 6px; font: 600 13.5px/1 var(--wd-sans);
  color: var(--wd-primary); text-decoration: none; white-space: nowrap; background: none; border: 0; cursor: pointer; }
body.desk .wd-ll:hover { background: var(--wd-primary-soft); }
body.desk .wd-ll.is-none { min-width: 0; padding: 0; }

/* Cards (owner 2026-11-01): the same rows. What is due and the ten most likely forgotten are two lines at the top (the
   screen's one primary is Start); each lecture's row adds how many are due and Sections, which opens its sections as
   indented rows in the same grid; suspended cards fold away at the bottom. The picker is a hub screen: no focus bar. */
body.desk:has(.view.on > .wd-cards) > .p-fbar { display: none; }
body.desk .wd-queue { margin: 0 0 18px; border: 1px solid var(--wd-border); border-left: 3px solid var(--wd-primary); border-radius: 10px; background: var(--wd-work); }
body.desk .wd-qrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 52px; padding: 8px 14px 8px 18px; box-sizing: border-box; }
body.desk .wd-qrow + .wd-qrow { border-top: 1px solid var(--wd-border); min-height: 44px; }
body.desk .wd-qrow b { font-size: 15px; font-weight: 700; color: var(--wd-text); }
body.desk .wd-qmeta { font-size: 13px; color: var(--wd-text-2); margin-right: auto; }
body.desk .wd-qrow .wd-btn { min-height: 36px; padding: 6px 18px; }
body.desk .wd-ldue { font-size: 12.5px; line-height: 1; color: var(--wd-text-2); white-space: nowrap; text-align: right; }
body.desk .wd-lname small { font-size: 12.5px; font-weight: 400; color: var(--wd-text-3); }
body.desk .wd-qmeta .wd-mono, body.desk .wd-ldue .wd-mono, body.desk .wd-lname small .wd-mono { font-size: 12.5px; }
body.desk .wd-lrow > .wd-lsubs { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; list-style: none; margin: 4px -10px -4px -16px; padding: 0; }
body.desk .wd-lrow.is-sub { padding-left: 36px; background: var(--wd-canvas); }
body.desk .wd-lrow.is-sub .wd-lname { font-size: 13.5px; color: var(--wd-text-2); }
body.desk .wd-lrow.is-all .wd-lname { font-weight: 600; color: var(--wd-text-2); }
body.desk button.wd-ll[aria-expanded="true"] { background: var(--wd-primary-soft); }
body.desk .wd-susp { margin-top: 8px; }
body.desk .wd-susp-line { margin: 10px 16px 0; font-size: 13px; color: var(--wd-text-3); }
body.desk .wd-susp .wd-suslist { margin: 4px 0 0; }
body.desk .wd-susp .wd-suslist li { padding: 8px 10px 8px 16px; }

/* the Notes | Map switch, and every segmented choice on these screens: quiet, the picked one in the soft action tint */
body.desk .p-seg { border: 1px solid var(--wd-border-strong); border-radius: 8px; padding: 2px; gap: 2px; background: var(--wd-work); margin-bottom: 18px; }
body.desk .p-seg-b { min-height: 32px; min-width: 64px; padding: 0 14px; border-radius: 6px; font: 600 13.5px/1 var(--wd-sans); color: var(--wd-text-2); }
body.desk .p-seg-b:hover { color: var(--wd-text); }
body.desk .p-seg-b.on { background: var(--wd-primary-soft); color: var(--wd-text); }

@media (max-width: 760px) {
  body.desk .wd-lhead-acts { width: 100%; }
  body.desk .wd-find { flex: 1 1 200px; width: auto; min-height: 44px; }
  body.desk .wd-lhead-acts .wd-btn { min-height: 44px; }
  body.desk .wd-upnext { padding: 12px 14px; }
  body.desk .wd-upnext b { flex: 1 1 100%; white-space: normal; }
  body.desk .wd-upnext .wd-btn { margin-left: 0; flex: 1 1 100%; justify-content: center; min-height: 44px; }
  body.desk .wd-sys > summary { min-height: 52px; padding: 8px 14px; }
  body.desk .wd-sys-meta { gap: 10px; }
  body.desk .wd-lrows { display: block; }
  body.desk .wd-lrow { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; row-gap: 6px; padding: 10px 14px 4px; }
  body.desk .wd-lname { order: 1; flex: 1 1 0; white-space: normal; overflow-wrap: anywhere; }
  body.desk .wd-lnum { order: 2; }
  body.desk .wd-lbar { order: 3; flex: 1 0 100%; }
  body.desk .wd-ll { order: 4; min-height: 44px; padding: 0 10px; }
  body.desk .wd-ll:nth-of-type(1) { margin-left: -10px; }
  body.desk .wd-ll.is-none { display: none; }
  body.desk .p-seg-b { min-height: 44px; }
  body.desk .wd-ldue { order: 2; margin-left: 8px; }
  body.desk .wd-lrow > .wd-lsubs { display: block; order: 5; flex: 1 0 100%; margin: 4px -14px -4px; }
  body.desk .wd-lrow.is-sub { padding-left: 28px; }
  body.desk .wd-lrow.is-sub > span:empty, body.desk .wd-lrow.is-all > span:empty { display: none; }
  body.desk .wd-qrow { padding: 10px 14px; }
  body.desk .wd-qrow .wd-btn { flex: 1 1 100%; justify-content: center; min-height: 44px; }
  body.desk .wd-qrow .wd-ll { min-height: 44px; margin-left: -10px; padding: 0 10px; }
}

/* ================================================================ Questions: filters that take several choices (owner 2026-11-01)
   Lecture, condition, grade and status each open a panel of checkboxes; none chosen means all. Every filter is one
   label line over one 40px control, so "Condition, optional" lines up with the rest. One panel open at a time. */
body.desk .wd-filters { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 14px; align-items: start; }
body.desk .wd-ms { position: relative; display: grid; grid-template-rows: auto auto; gap: 6px; min-width: 0; }
body.desk .wd-filters .wd-ms-l { display: block; margin: 0; font: 600 13.5px/18px var(--wd-sans); color: var(--wd-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.desk .wd-filters .wd-ms-l small { font: 400 12.5px/18px var(--wd-sans); color: var(--wd-text-3); margin-left: 4px; }
body.desk .wd-ms-b { width: 100%; min-height: 40px; height: 40px; box-sizing: border-box; border: 1px solid var(--wd-border-strong); border-radius: 7px;
  background: var(--wd-work); color: var(--wd-text); font: 400 14.5px/1.2 var(--wd-sans); }
body.desk .wd-ms-b { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 0 12px; cursor: pointer; list-style: none; }
body.desk .wd-ms-b::-webkit-details-marker { display: none; }
body.desk .wd-ms-b::marker { content: ''; }
body.desk .wd-ms-b:hover { border-color: var(--wd-text-3); }
body.desk .wd-ms-b.is-on { border-color: var(--wd-primary); background: var(--wd-primary-soft); }
body.desk .wd-ms-b.is-off { color: var(--wd-text-3); background: var(--wd-canvas); border-style: dashed; cursor: default; }
body.desk .wd-ms-b svg { flex: none; color: var(--wd-text-3); transition: transform .15s; }
body.desk .wd-ms-d[open] > .wd-ms-b svg { transform: rotate(180deg); }
body.desk .wd-ms-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.desk .wd-ms-p { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: min(380px, calc(100vw - 32px));
  max-height: 340px; overflow: auto; box-sizing: border-box; margin: 0; padding: 6px; border: 1px solid var(--wd-border); border-radius: 9px;
  background: var(--wd-overlay); box-shadow: 0 18px 40px -22px var(--wd-scrim); }
body.desk .wd-ms-top { position: sticky; top: -6px; z-index: 1; display: flex; align-items: center; gap: 8px; margin: -6px -6px 4px; padding: 8px 10px 6px; background: var(--wd-overlay);
  border-bottom: 1px solid var(--wd-border); }
body.desk .wd-ms-top .wd-linkbtn { margin-left: auto; }
body.desk .wd-ms-top .wd-linkbtn[disabled] { color: var(--wd-text-3); text-decoration: none; cursor: default; }
body.desk .wd-ms .wd-ms-find.wd-ms-find { flex: 1; min-width: 0; height: 32px; padding: 0 10px; font-size: 14px; }
body.desk .wd-ms-g { margin: 8px 10px 2px; font: 600 11px/1.3 var(--wd-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--wd-text-3); }
body.desk .wd-ms-g[hidden], body.desk .wd-ms-o[hidden] { display: none; }
body.desk .wd-filters .wd-ms-o { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: 6px;
  font: 400 14px/1.3 var(--wd-sans); color: var(--wd-text); cursor: pointer; }
body.desk .wd-filters .wd-ms-o:hover { background: var(--wd-canvas); }
body.desk .wd-ms-o input { width: 16px; height: 16px; margin: 0; accent-color: var(--wd-primary); }
body.desk .wd-ms-o .wd-mono { font-size: 12px; color: var(--wd-text-3); }
body.desk .wd-filters .p-nograde { grid-column: 1 / -1; }
@media (max-width: 760px) {
  body.desk .wd-filters { grid-template-columns: 1fr; }
  body.desk .wd-ms-b { min-height: 44px; height: 44px; }
  body.desk .wd-ms-p { width: 100%; max-width: none; }
  body.desk .wd-filters .wd-ms-o { min-height: 44px; }
  body.desk .wd-ms .wd-ms-find.wd-ms-find { height: 40px; }
  body.desk .wd-ms-top .wd-linkbtn { min-height: 40px; }
}

/* ================================================================ call-outs in a note (owner 2026-11-01)
   The note's call-outs (the rule, key, insight and plain blocks, `aside.callout` from render.py) had no room between
   their side line and the text: verelect.css's `.note-section aside { padding-left: 0 }` outranked the call-out's own.
   Every note view (the reader, the recall comparison, the lecture page) gives them comfortable padding, a quiet inset
   ground and a little space above and below, so the note reads as one page. Colour stays neutral: a call-out is
   emphasis, not a status. */
body.desk :is(.p-note-html, #note, .note) aside.callout { display: block; box-sizing: border-box; max-width: 65ch; margin: 20px 0; padding: 14px 18px;
  border: 0; border-left: 3px solid var(--wd-border-strong); border-radius: 0 8px 8px 0; background: var(--wd-canvas); color: var(--wd-text); }
body.desk :is(.p-note-html, #note, .note) aside.callout .callout-body { font-size: 17px; line-height: 1.6; }
body.desk :is(.p-note-html, #note, .note) aside.callout :is(.callout-body, p, ul, ol):first-child { margin-top: 0; }
body.desk :is(.p-note-html, #note, .note) aside.callout :is(.callout-body, p, ul, ol):last-child { margin-bottom: 0; }
body.desk :is(.p-note-html, #note, .note) aside.callout p + p { margin-top: 8px; }
body.desk :is(.p-note-html, #note, .note) aside.callout + aside.callout { margin-top: 12px; }
@media (max-width: 760px) {
  body.desk :is(.p-note-html, #note, .note) aside.callout { margin: 16px 0; padding: 12px 14px; }
}

/* ================================================================ Check yourself: the section's cards (owner 2026-11-01)
   After a section is read and recalled, its own flashcards, one at a time, in the reading column: the card (tap it, or
   Show answer, or Space, to reveal the back), then Again · Hard · Good · Easy with the interval each gives (1–4), as on
   Cards — smaller here, so the card sits in the note rather than over it. No question anywhere in Learn. */
body.desk .wd-ck { display: grid; gap: 12px; max-width: 65ch; margin: 24px 0 8px; padding-top: 18px; border-top: 1px solid var(--wd-border); }
body.desk .wd-ck-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
body.desk .wd-ck-h b { font-size: 15.5px; font-weight: 700; color: var(--wd-text); }
body.desk .wd-ck-h span { font-size: 13px; color: var(--wd-text-3); }
body.desk .wd-ck-h .wd-mono { margin-left: auto; font-size: 12.5px; }
body.desk .wd-ck .wd-ck-card { width: 100%; padding: 18px 22px; gap: 12px; box-shadow: 0 1px 0 var(--wd-border); }
body.desk .wd-ck .wd-ck-card[data-ckflip] { cursor: pointer; }
body.desk .wd-ck .wd-ck-card[data-ckflip]:hover { border-color: var(--wd-border-strong); }
body.desk .wd-ck .wd-front { font-size: 18px; line-height: 1.5; }
body.desk .wd-ck .wd-back { font-size: 14.5px; padding-top: 12px; }
body.desk .wd-ck .wd-back .wd-ans { font-size: 16.5px; }
body.desk .wd-ck .wd-grades { width: 100%; margin: 0; }
body.desk .wd-ck .wd-grade { min-height: 44px; }
body.desk .wd-ck .wd-reveal { justify-content: flex-start; margin: 0; }
body.desk .wd-ck .wd-toast { margin: 0; text-align: left; min-height: 0; }
body.desk .wd-ck .wd-toast:empty { display: none; }
body.desk .wd-ck-done { margin: 0; font-size: 14.5px; color: var(--wd-text-2); }
@media (max-width: 760px) {
  body.desk .wd-ck .wd-ck-card { padding: 16px; }
  body.desk .wd-ck .wd-front { font-size: 17px; }
  body.desk .wd-ck .wd-grades { grid-template-columns: repeat(2, 1fr); }
  body.desk .wd-ck .wd-grade .wd-keys { display: none; }
  body.desk .wd-ck .wd-reveal .wd-btn { width: 100%; justify-content: center; min-height: 44px; }
  body.desk .wd-ck .wd-reveal kbd { display: none; }
}