/* Helmley: shared styles for every page. Colours, sizes and fonts come from tokens.css, which build/build_tokens.py
   generates from design/tokens.json (the design system, decision 0067); this file holds the parts that use them.
   Layout: one 1100px column. Light is the first theme; dark follows the device or the theme button. */
:root{--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--surface);color:var(--text);font-family:var(--font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;padding-inline:16px;padding-block:0 96px}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
.wrap{max-width:1100px;margin:0 auto;display:grid;gap:20px}
h1,h2,h3,h4{font-family:var(--font-serif);text-wrap:balance;margin:0;line-height:1.15}
/* Type, from the brand guidelines (stage 3): h1 is title-2, the home hero title-1; every page title ends with the
   full stop in the highlight colour (24 Oct: "every page should carry this"); h2 is title-3; h3 has no style in
   the guidelines (see the change log). Titles ask for weight 560. */
h1{font-size:36px;line-height:40px;font-weight:560;letter-spacing:-.01em}
h1::after{content:".";content:"." / "";color:var(--highlight)}
h2{font-size:26px;line-height:30px;font-weight:560;letter-spacing:-.005em}
h3{font-size:20px;line-height:26px;font-weight:560}
h4{font-family:var(--font-sans);font-size:15px;line-height:20px;font-weight:700}
@media (min-width:1024px){h1{font-size:44px;line-height:48px} h2{font-size:28px;line-height:32px}}
.eyebrow{font-family:var(--font-sans);font-size:13px;line-height:16px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
/* Space between a small line and the page title under it (batch 7, 24 Oct: "too close"). The home hero sets its own. */
.eyebrow + h1{margin-top:10px} .hero .eyebrow + h1{margin-top:0}
.muted{color:var(--text-muted)}
code{font-family:var(--mono);font-size:.9em;background:var(--surface-sunken);padding:1px 5px;border-radius:5px}
pre{background:var(--surface-sunken);padding:12px;border-radius:10px;overflow-x:auto}
pre code{background:none;padding:0}

/* Nav */
.nav{position:sticky;top:0;z-index:20;background:var(--surface-inverse);color:var(--text-inverse);margin-inline:-16px;padding-inline:16px;border-bottom:1px solid var(--line)}
.nav :focus-visible{outline-color:var(--focus-inverse)!important}
.nav button.ghost{color:var(--text-inverse);border:1px solid var(--line-strong);font-size:14px;font-weight:500;min-height:36px;padding:0 12px} /* batch 3: lighter, as on live */ .nav button.ghost:hover{background:transparent;border-color:var(--text-inverse)}
.nav-in{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:14px;height:var(--bar-top)}
.nav-in .brand{text-decoration:none;color:var(--text-inverse);display:flex;align-items:center;white-space:nowrap;min-height:var(--target)}
.nav-in .brand svg{width:auto;height:26px;display:block} .nav-in .brand .dot{fill:var(--highlight)} .nav-in .brand svg.hm{display:none;height:30px}
/* Phones: the h. mark alone, as on the board's app screens, so the bar never wraps. */
@media (max-width:560px){.nav-in .brand svg.wm{display:none} .nav-in .brand svg.hm{display:block}}
/* The tabs (decision 0069): along the top on wider screens, in a bar at the bottom on phones and small tablets. */
.nav-in nav{display:flex;gap:4px;margin:0 auto 0 16px} .nav-in nav a .tic{flex:0 0 auto;opacity:.85} .nav-in nav a{gap:8px}
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:25;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface-inverse);border-top:1px solid var(--line);padding:0 0 env(safe-area-inset-bottom,0px)}
.tabbar a{position:relative;display:grid;justify-items:center;align-content:center;gap:2px;min-height:58px;font:600 13px/16px var(--font-sans);color:var(--text-inverse-muted);text-decoration:none}
.tabbar a .tic{width:22px;height:22px} .tabbar a.on{color:var(--text-inverse)} .tabbar a.on .tic{color:var(--highlight)}
.tabbar a.on::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--highlight)}
@media (max-width:860px){.nav-in nav{display:none} .nav-in .brand{margin-right:auto} .tabbar{display:grid} body.has-tabbar{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .toastg{bottom:calc(92px + env(safe-area-inset-bottom,0px))}}
/* The study clock in the middle of the phone tab bar (batch 11, in place of the floating pill) */
.tabbar .tb-clock{display:grid;justify-items:center;align-content:end;gap:2px;background:none;border:0;padding:0 0 7px;min-height:58px;font:600 13px/16px var(--font-sans);color:var(--text-inverse-muted);cursor:pointer;font-variant-numeric:tabular-nums}
.tabbar .tb-clock .go{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin-top:-20px;background:var(--action);color:var(--on-action);font-size:16px;box-shadow:0 0 0 4px var(--surface-inverse)}
.tabbar .tb-clock.running{color:var(--text-inverse)} .tabbar .tb-clock.running .go{background:var(--danger);color:var(--surface)}
button.ghost.trk-stop{justify-self:start} .trk-hint{margin:0;font-size:13px;color:var(--text-muted)}
@media (min-width:861px) and (max-width:1060px){.nav-in nav a .tic{display:none} .nav-in nav a{padding:0 10px} .nav-in{gap:10px}}
/* The top bar slides away as you scroll down and comes back as you scroll up (batch 9). */
.nav{transition:transform .25s ease} .nav.nav-hide{transform:translateY(-100%)}
@media (prefers-reduced-motion: reduce){.nav{transition:none}}
.nav-in nav a{color:var(--text-inverse-muted);text-decoration:none;padding:0 14px;font-weight:700;font-size:15px;min-height:var(--target);white-space:nowrap;display:inline-flex;align-items:center;border-radius:var(--radius-md)}
#syncBtn{white-space:nowrap}
.nav-in nav a:hover{color:var(--text-inverse);background:var(--surface-sunken)} .nav-in nav a.on{color:var(--text-inverse);position:relative;background:transparent}
/* The current page: a straight orange bar under the word (batch 3, option B). */
.nav-in nav a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:3px;border-radius:2px;background:var(--highlight)}
.nav-in .theme{border:1px solid var(--line);background:transparent;color:var(--text-inverse);border-radius:var(--radius-md);width:36px;height:36px;cursor:pointer;display:grid;place-items:center}
/* Drawn, not a character: iPhones have no glyph for ◐ in these fonts and showed an empty button. */
.theme-ic{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%);box-sizing:border-box}
.nav-in .avatar{width:40px;height:40px;border-radius:50%;border:2px solid transparent;background:var(--surface-sunken);overflow:hidden;display:grid;place-items:center;flex:0 0 auto}
.nav-in .avatar img,.nav-in .avatar svg{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.nav-in .avatar{overflow:visible!important;position:relative}
/* A change that couldn't be saved shows as a red dot on your picture (batch 9: the Sync button is gone). */
.nav-in .avatar.warn::after{content:"";position:absolute;right:-2px;top:-2px;width:12px;height:12px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--surface-inverse)}
.nav-in .avatar .nbadge{position:absolute;top:-7px;right:-9px;margin:0}
#acctBody{display:grid;gap:10px;font-size:14px} .acct-warn{color:var(--danger)}
.nav-in .avatar.on,.nav-in .avatar:hover{border-color:var(--highlight)}
.nav-in .avatar:not(.has){background:var(--action)} .nav-in .avatar:not(.has) svg .bot-body{fill:var(--action)} .nav-in .avatar:not(.has) svg .bot-eye{fill:var(--on-action)}
/* Phones: the live site's lighter weight and wider gaps, a smaller h. (batch 5, 24 Oct); the tightest spacing only below 385 px, where the wider gaps don't fit. */
@media (max-width:560px){.nav-in nav a.on::after{left:6px;right:6px}.nav-in{gap:8px}.nav-in nav a{padding:0 6px;font-size:14px;font-weight:600}.nav-in nav{gap:0}.nav-in .theme,.nav-in .avatar{width:36px;height:36px}.nav-in .brand svg.hm{height:24px}}
@media (max-width:400px){.nav-in nav a{font-size:13px}.nav-in .theme,.nav-in .avatar{width:34px;height:34px} #syncBtn{padding-inline:8px;font-size:13px}}
@media (max-width:384px){.nav-in{gap:4px}.nav-in nav a{padding:0 3px}.nav-in nav a.on::after{left:3px;right:3px}}

/* Cards & buttons */
.card{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;display:grid;gap:12px;min-width:0}
/* One column that never grows past the card: a long word or a select with long options wraps or shrinks inside it
   instead of pushing the card's contents out sideways (Admin, People, on a phone: Paul, 8 Nov). */
.card{grid-template-columns:minmax(0,1fr)}
.card-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
button.primary,a.btn.primary{font:700 15px/20px var(--font-sans);background:var(--action);color:var(--on-action);border:1.5px solid var(--action);border-radius:var(--radius-md);padding:0 24px;min-height:48px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
button.primary:hover:not(:disabled),a.btn.primary:hover{background:var(--action-hover);border-color:var(--action-hover)}
button.primary:disabled,a.btn[aria-disabled="true"]{background:var(--surface-sunken);border-color:var(--line);color:var(--text-muted)} button.primary:disabled{cursor:not-allowed}
/* Secondary: a strong edge (the guidelines' secondary button). */
/* Secondary: compact (batch 2: 36 px, 14 px label), clearly smaller than the 48 px primary; an invisible strip
   above and below keeps the tap area at 44 px. */
button.ghost,a.btn{font:700 14px/20px var(--font-sans);background:var(--surface-raised);color:var(--text);border:1.5px solid var(--line-strong);border-radius:var(--radius-md);padding:0 12px;min-height:36px;align-self:center;position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
button.ghost::after,a.btn:not(.primary)::after{content:"";position:absolute;inset:-4px 0}
button.ghost:hover,a.btn:hover{background:var(--surface-sunken)}
button.ghost:disabled{background:var(--surface-sunken);border-color:var(--line);color:var(--text-muted);cursor:not-allowed}
:where(a,input,select,button,textarea,summary,[tabindex]):focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-gap)}
:where(input,select,textarea):focus{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-gap)}
.pill{display:inline-block;font:700 13px/18px var(--font-sans);border-radius:var(--radius-round);padding:3px 10px;border:1.5px solid transparent;background:var(--surface-sunken);color:var(--text)}
.pill.ok{background:var(--success-soft);color:var(--text)}
.pill.behind{background:var(--danger-soft);color:var(--danger)}
.pill.ahead{background:var(--action);color:var(--on-action)}
.empty{color:var(--text-muted);font-size:13px;padding:8px;border:1px dashed var(--line);border-radius:10px}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
th{font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);background:var(--surface-sunken)}
tr:last-child td{border-bottom:0}

/* Landing */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;padding-top:28px}
.hero h1{font-size:42px;line-height:46px;letter-spacing:-.012em;margin-bottom:16px} .hero .eyebrow{margin-bottom:12px}
.hero p.lead{font-family:var(--font-sans);font-size:17px;line-height:27px;color:var(--text-muted);max-width:62ch;margin:0} /* batch 2: calmer, in the sans */
@media (min-width:1024px){.hero h1{font-size:48px;line-height:52px} .hero p.lead{font-size:18px;line-height:28px}}
.hero .art{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:var(--journey-sky)}
.hero .art svg{display:block;width:100%;height:auto}
@media (max-width:760px){.hero{grid-template-columns:1fr}}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:980px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.tiles{grid-template-columns:1fr}}
.tile{display:grid;gap:8px;text-decoration:none;color:var(--text);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;min-width:0}
.tile:hover{border-color:var(--action)}
.tile .big{font-family:var(--font-serif);font-size:26px;line-height:30px;font-weight:560;letter-spacing:-.005em}
.tile p{margin:0;color:var(--text-muted);font-size:14px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.step{display:grid;gap:6px;padding:14px;border-radius:var(--radius-md);background:var(--surface-sunken)}
.step b{font-family:var(--font-serif);font-size:20px;line-height:26px;font-weight:560}
.step span{font-size:13px;color:var(--text-muted)}
.card.feature{background:var(--surface-feature);border-color:transparent}
.thisweek{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline}
.thisweek .wk{font-family:var(--font-serif);font-size:32px;line-height:36px;font-weight:560;font-variant-numeric:tabular-nums}

/* Course page */
.course{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:860px){.course{grid-template-columns:1fr}}
.toc{position:sticky;top:66px;display:grid;gap:4px;font-size:13px;max-height:calc(100vh - 90px);overflow:auto;padding-right:6px}
.toc a{color:var(--text-muted);text-decoration:none;padding:3px 8px;border-radius:6px;border-left:2px solid transparent}
.toc a:hover{color:var(--text);background:var(--surface-sunken)}
.toc a.on{color:var(--text);border-left-color:var(--action)}
@media (max-width:860px){.toc{position:static;max-height:none;grid-template-columns:1fr 1fr}}
.prose{min-width:0;max-width:78ch}
.prose h2{font-size:26px;margin-top:40px;padding-top:18px;border-top:1px solid var(--line)}
.prose h2:first-of-type{margin-top:0;border-top:0;padding-top:0}
.prose h3{margin-top:28px}
.prose h4{font-size:16px;margin-top:20px;color:var(--action-text)}
/* Course text is read, not used: the guidelines' reading style. */
.prose p,.prose li,.prose blockquote{font-family:var(--font-serif);font-size:17px;line-height:26px}
.prose b,.prose strong{font-weight:600}
@media (min-width:1024px){.prose p,.prose li,.prose blockquote{font-size:18px;line-height:28px}}
.prose p{margin:10px 0}
.prose ul,.prose ol{padding-left:22px;margin:8px 0}
.prose li{margin:4px 0}
.prose .tbl{margin:12px 0;max-width:calc(100vw - 32px)}
.prose table{font-size:13px}
.prose td{min-width:90px}
.prose td:first-child{min-width:150px}
.prose blockquote{margin:12px 0;padding:8px 14px;border-left:3px solid var(--action);background:var(--surface-sunken);border-radius:0 8px 8px 0}
.prose hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.prose a{word-break:break-word}

/* Tracker pill (every page) */
.trk{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;display:grid;gap:8px;justify-items:end}
.trk-pill{display:flex;align-items:center;gap:10px;background:var(--surface-raised);color:var(--text);border:1px solid var(--line);border-radius:999px;padding:8px 12px 8px 8px;box-shadow:var(--shadow-sheet);font-family:var(--font-sans);cursor:pointer}
.trk-pill .go{width:34px;height:34px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:var(--action);color:var(--on-action);font-size:14px}
.trk-pill.running .go{background:var(--danger);color:var(--surface)}
.trk-pill .t{font-family:var(--font-sans);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;min-width:66px}
.trk-pill .lbl{font-size:13px;color:var(--text-muted)}
.trk-panel{background:var(--surface-raised);border:1px solid var(--line);border-radius:14px;padding:12px;width:min(320px,calc(100vw - 32px));box-shadow:var(--shadow-sheet);display:grid;gap:8px;font-size:13px}
.trk-panel[hidden]{display:none}
[hidden]{display:none !important}
.trk-panel input{font:inherit;font-size:13px;background:var(--surface-sunken);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 8px;width:100%}
.trk-panel .row{display:flex;justify-content:space-between;gap:8px;color:var(--text-muted)}
.trk-panel .row b{color:var(--text);font-variant-numeric:tabular-nums}
.toastg{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--action);color:var(--on-action);border:0;border-radius:var(--radius-md);padding:12px 16px;font:700 15px/20px var(--font-sans);box-shadow:var(--shadow-sheet);opacity:0;transition:opacity .3s;pointer-events:none;z-index:31;max-width:90%;text-align:center}
.toastg.show{opacity:1}

/* ===== Ascent page ===== */
.scene{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--journey-sky);border:1px solid var(--line)}
.scene svg{display:block;width:100%;height:auto;max-width:100%}
/* The phone mountain (batch 9): never taller than most of the screen, even turned sideways. No stage bars on phones. */
.scene.phone svg{max-height:82vh}
.scene canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sky-a{stop-color:var(--journey-sky-top)} .sky-b{stop-color:var(--journey-sky)}
.mtn1{fill:var(--journey-ridge-near)} .mtn2{fill:var(--journey-ridge-mid)} .mtn3{fill:var(--journey-ridge-far)} .snow{fill:var(--journey-snow)}
.star{fill:var(--journey-star)}
.trail{fill:none;stroke:var(--journey-snow);stroke-opacity:.35;stroke-width:5;stroke-linecap:round;stroke-dasharray:1 12}
.trail-done{fill:none;stroke:var(--journey-route);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1)}
.camp{cursor:pointer}
/* Camp markers as on the live site (batch 5, 24 Oct): a light circle with a soft snow edge; orange rings for where you are and the checkpoints; finished camps in teal. */
.camp circle.ring{fill:var(--journey-camp-halo);stroke:var(--journey-camp-ring);stroke-opacity:.55;stroke-width:2.5}
.camp.done circle.ring{fill:var(--journey-camp);stroke:var(--journey-camp);stroke-opacity:1}
.camp.skip circle.ring{fill:var(--surface-sunken);stroke:var(--text-muted);stroke-dasharray:3 3}
.camp.doing circle.ring{stroke:var(--highlight);stroke-opacity:1;stroke-width:3}
.camp.doing circle.pulse{fill:none;stroke:var(--highlight);stroke-width:2;animation:pulse 1.8s ease-out infinite}
.camp text{font-family:var(--font-sans);font-weight:500;font-variant-numeric:tabular-nums;font-size:10px;fill:var(--text);pointer-events:none;text-anchor:middle;dominant-baseline:middle}
.camp.done text{fill:var(--on-success)}
.camp.done.cap text{fill:var(--journey-on-marker)}
.camp.cap circle.ring{stroke:var(--highlight);stroke-opacity:1;stroke-width:3}
/* Your plan on the mountain: badges on changed camps, tents for side camps. */
.pm{pointer-events:none}
.pm circle{fill:var(--action);stroke:var(--surface);stroke-width:1.6}
.pm .pm-dot{fill:var(--on-action);stroke:none}
.pm text{font-family:var(--font-sans);font-weight:700;font-size:13px;fill:var(--on-action);text-anchor:middle;dominant-baseline:central}
.sm{cursor:pointer;outline:none}
.sm .spur{stroke:var(--success);stroke-width:1.6;stroke-dasharray:2 3;opacity:.85;pointer-events:none}
.sm .hit{fill:transparent}
.sm .tent{fill:var(--surface-raised);stroke:var(--success);stroke-width:2;stroke-linejoin:round}
.sm .door{fill:var(--success)}
.sm.doing .tent{stroke:var(--action)} .sm.doing .door{fill:var(--action)}
.sm.done .tent{fill:var(--success)} .sm.done .door{fill:var(--surface)}
.sm:hover .tent,.sm:focus-visible .tent{stroke-width:3}
.plan-legend{font-size:13px;color:var(--text-muted);margin-top:4px}
.plan-legend .lg-badge{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:var(--action);color:var(--on-action);font-weight:700;font-size:13px;line-height:1;vertical-align:-2px}
.plan-legend .lg-badge i{width:5px;height:5px;border-radius:50%;background:var(--on-action)}
.plan-legend .lg-tent{display:inline-block;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--success);vertical-align:-1px}
.camp.cap.done circle.ring{fill:var(--highlight);stroke:var(--highlight)}
.camp .flag{fill:var(--journey-camp-current)} .camp .pole{stroke:var(--journey-snow);stroke-width:1.5}
.camp:focus{outline:none} .camp:focus circle.ring{stroke-width:4}
@keyframes pulse{0%{r:11;opacity:.9}100%{r:24;opacity:0}}
.bot-body{fill:var(--text)} .bot-eye{fill:var(--surface)} .bot-pack{fill:var(--journey-camp-current)} .bot-ant{stroke:var(--text);stroke-width:2} .bot-tip{fill:var(--journey-camp-current)}
.bot-shadow{fill:#000;opacity:.25}
.leg{fill:var(--text);transform-origin:center top}
.walking .leg.l{animation:stepL .32s ease-in-out infinite alternate}
.walking .leg.r{animation:stepR .32s ease-in-out infinite alternate}
.walking .bot-head{animation:bob .32s ease-in-out infinite alternate}
@keyframes stepL{from{transform:rotate(-20deg)}to{transform:rotate(20deg)}}
@keyframes stepR{from{transform:rotate(20deg)}to{transform:rotate(-20deg)}}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-1.5px)}}
/* A theme's character (0097): your colour and the orange that means "you"; another learner's in their colour. */
.ch-main{fill:var(--text)} .ch-you{fill:var(--journey-camp-current)}
.walking .ch-figure{animation:bob .32s ease-in-out infinite alternate}
.moving .ch-flicker{transform-box:fill-box;transform-origin:center top;animation:flicker .14s infinite alternate}
.other-climber .ch-main{fill:var(--c)} .other-climber .ch-you{fill:color-mix(in srgb,var(--c) 55%,#0b1020)}
/* Moments of triumph (0097): a theme's drawing at the step, the stage or the end, with these motion classes; played once,
   under two seconds, never under "reduce motion". */
#triumphs,#triumphsBack{pointer-events:none}
:is(#triumphs,#triumphsBack) [class*="tm-"]{transform-box:fill-box;transform-origin:center;animation-duration:1.35s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.7,.3,1)}
:is(#triumphs,#triumphsBack) .tm-burst{animation-name:tmBurst} :is(#triumphs,#triumphsBack) .tm-rise{animation-name:tmRise} :is(#triumphs,#triumphsBack) .tm-pulse{animation-name:tmPulse}
:is(#triumphs,#triumphsBack) .tm-grow{transform-origin:center bottom;animation-name:tmGrow} :is(#triumphs,#triumphsBack) .tm-sweep{transform-origin:center bottom;animation-name:tmSweep}
:is(#triumphs,#triumphsBack) .tm-glow{animation-name:tmGlow} :is(#triumphs,#triumphsBack) .tm-twinkle{animation-name:tmTwinkle} :is(#triumphs,#triumphsBack) .tm-fly{animation-name:tmFly} :is(#triumphs,#triumphsBack) .tm-spin{animation-name:tmSpin}
:is(#triumphs,#triumphsBack) .tm-d1{animation-delay:.15s} :is(#triumphs,#triumphsBack) .tm-d2{animation-delay:.3s} :is(#triumphs,#triumphsBack) .tm-d3{animation-delay:.45s}
@keyframes tmBurst{0%{transform:scale(.2);opacity:0}25%{opacity:1}100%{transform:scale(1.25);opacity:0}}
@keyframes tmRise{0%{transform:translateY(8px);opacity:0}20%{opacity:1}100%{transform:translateY(-36px);opacity:0}}
@keyframes tmPulse{0%,50%,100%{transform:scale(1)}25%,75%{transform:scale(1.18)}}
@keyframes tmGrow{0%{transform:scaleY(0)}40%{transform:scaleY(1.05)}55%,85%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@keyframes tmSweep{0%{transform:rotate(-40deg);opacity:0}15%,85%{opacity:1}100%{transform:rotate(40deg);opacity:0}}
@keyframes tmGlow{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
@keyframes tmTwinkle{0%,100%{opacity:0}20%,60%{opacity:1}40%,80%{opacity:.3}}
@keyframes tmFly{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(48px,-48px);opacity:0}}
@keyframes tmSpin{0%{transform:rotate(0) scale(.6);opacity:0}20%{opacity:1}100%{transform:rotate(160deg) scale(1.1);opacity:0}}
:is(#triumphs,#triumphsBack) .t-stage [class*="tm-"]{animation-duration:2.4s} :is(#triumphs,#triumphsBack) .t-end [class*="tm-"]{animation-duration:3.4s}
/* More motions (Paul, 1 Nov: bigger, more celebratory): tm-swell rises from its base, rolls forward and breaks (a wave);
   tm-soar climbs far and fades (balloons); tm-in pops up and stays to the end (a flag); tm-draw draws its lines from their
   start (a contrail, an arc of water); tm-warp rushes out from the centre (hyperspace); tm-orbit circles the centre;
   tm-back, on a top-level <g>, is drawn behind the character (the wave under the boat). */
:is(#triumphs,#triumphsBack) .tm-swell{transform-origin:center bottom;animation-name:tmSwell;animation-duration:2s}
:is(#triumphs,#triumphsBack) .tm-soar{animation-name:tmSoar;animation-timing-function:cubic-bezier(.3,.2,.5,1)}
:is(#triumphs,#triumphsBack) .tm-in{transform-origin:center bottom;animation-name:tmIn}
:is(#triumphs,#triumphsBack) .tm-draw{stroke-dasharray:1000 1000;animation-name:tmDraw;animation-timing-function:cubic-bezier(.4,.1,.6,1)}
:is(#triumphs,#triumphsBack) .tm-warp{animation-name:tmWarp;animation-timing-function:cubic-bezier(.6,0,1,1)}
:is(#triumphs,#triumphsBack) .tm-orbit{animation-name:tmOrbit;animation-timing-function:linear}
:is(#triumphs,#triumphsBack) .t-step .tm-draw{animation-duration:2.8s;animation-timing-function:linear}
:is(#triumphs,#triumphsBack) .t-end .tm-warp{animation-duration:1.1s;animation-iteration-count:3}
@keyframes tmSwell{0%{transform:translateX(-14px) scaleY(0)}28%{transform:translateX(-4px) scaleY(1.06)}52%{transform:translateX(8px) scaleY(1)}78%{transform:translateX(26px) scaleY(.7);opacity:.9}100%{transform:translateX(40px) scaleY(.2);opacity:0}}
@keyframes tmSoar{0%{transform:translateY(30px) scale(.5);opacity:0}12%{opacity:1}80%{opacity:1}100%{transform:translateY(-250px) scale(1);opacity:0}}
@keyframes tmIn{0%{transform:scale(0);opacity:0}14%{transform:scale(1.18);opacity:1}24%,88%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes tmDraw{0%{stroke-dashoffset:1000;opacity:1}55%{stroke-dashoffset:0}85%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes tmWarp{0%{transform:scale(.12);opacity:0}15%{opacity:1}100%{transform:scale(2.3);opacity:0}}
@keyframes tmOrbit{0%{transform:rotate(0);opacity:0}10%,85%{opacity:1}100%{transform:rotate(330deg);opacity:0}}
/* Acts (0099): parts of the picture that do something while an ancestor is "acting": the character at a step, a stage's
   landmark, the destination at the end, a season's decorations when the picture first appears. Still otherwise; the
   parts that only appear when acting (ta-show, ta-erupt, ta-rise, ta-fly, ta-beam) are hidden until then. */
#scene .ta-show,#scene .ta-erupt,#scene .ta-rise,#scene .ta-fly,#scene .ta-beam,#scene .ta-grow,#scene .ta-leap{opacity:0}
#scene .ta-done{opacity:0} #pad.finished .ta-done,#scene .lm.done .ta-done{opacity:1}   /* a passed stage's landmark keeps them: its flag */
#scene .ta-drip{opacity:0}
.acting [class*="ta-"]{transform-box:fill-box;transform-origin:center;animation-fill-mode:both;animation-timing-function:cubic-bezier(.25,.7,.3,1)}
.acting .ta-show{animation-name:taShow;animation-duration:3s}
.acting .ta-erupt{transform-origin:center bottom;animation-name:taErupt;animation-duration:1.5s;animation-iteration-count:2}
.acting .ta-rise{animation-name:taRise;animation-duration:3s}
.acting .ta-fly{animation-name:taFly;animation-duration:2.8s}
.acting .ta-beam{transform-origin:center bottom;animation-name:taBeam;animation-duration:3s}
.acting .ta-turn{animation-name:taTurn;animation-duration:3s;animation-timing-function:ease-in-out}
.acting .ta-sway{transform-origin:center bottom;animation-name:taSway;animation-duration:.75s;animation-iteration-count:4;animation-direction:alternate}
.acting .ta-pour{transform-origin:center top;animation-name:taPour;animation-duration:3s}
.acting .ta-flash{animation-name:taFlash;animation-duration:2.6s}
.acting .ta-pulse{animation-name:taPulse;animation-duration:1.3s;animation-iteration-count:2}
.acting .ta-grow{transform-origin:center bottom;animation-name:taGrow;animation-duration:3.2s}
.acting .ta-launch{transform-origin:center bottom;animation-name:taLaunch;animation-duration:3.6s;animation-timing-function:cubic-bezier(.5,0,.9,.3)}
.acting .ta-boom{animation-name:taBoom;animation-duration:1.3s}
.acting .ta-sail{animation-name:taSail;animation-duration:4.6s;animation-timing-function:cubic-bezier(.2,.6,.3,1)}
.acting .ta-plant{transform-origin:center bottom;animation-name:taPlant;animation-duration:1.4s;animation-delay:.5s}
.acting .ta-drip{transform-origin:center top;animation-name:taDrip;animation-duration:3s}
.acting .ta-swing{transform-origin:center top;animation-name:taSwing;animation-duration:.8s;animation-iteration-count:3;animation-timing-function:ease-in-out}
.acting .ta-leap{animation-name:taLeap;animation-duration:1.5s;animation-iteration-count:2;animation-timing-function:linear}
.acting .ta-d1{animation-delay:.3s} .acting .ta-d2{animation-delay:.6s} .acting .ta-d3{animation-delay:.9s} .acting .ta-d4{animation-delay:1.3s}
@keyframes taShow{0%{opacity:0}15%,80%{opacity:1}100%{opacity:0}}
@keyframes taErupt{0%{transform:translateY(10px) scale(.3);opacity:0}25%{opacity:1}70%{transform:translateY(-14px) scale(1.1);opacity:1}100%{transform:translateY(4px) scale(1);opacity:0}}
@keyframes taRise{0%{transform:translate(0,6px) scale(.5);opacity:0}20%{opacity:.95}100%{transform:translate(10px,-46px) scale(1.5);opacity:0}}
@keyframes taFly{0%{transform:translate(0,0) scale(.8);opacity:0}12%{opacity:1}100%{transform:translate(70px,-60px) scale(1);opacity:0}}
@keyframes taBeam{0%{transform:rotate(-70deg);opacity:0}12%,85%{opacity:1}100%{transform:rotate(70deg);opacity:0}}
@keyframes taTurn{from{transform:rotate(0)}to{transform:rotate(720deg)}}
@keyframes taSway{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes taPour{0%,100%{transform:scaleY(1)}20%,70%{transform:scaleY(1.25)}}
@keyframes taFlash{0%,100%{opacity:1}10%,30%,50%,70%{opacity:.25}20%,40%,60%,80%{opacity:1;filter:brightness(1.8)}}
@keyframes taPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
@keyframes taGrow{0%{transform:scaleY(0);opacity:1}22%{transform:scaleY(1.08)}30%,85%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@keyframes taLaunch{0%{transform:translateY(0)}12%{transform:translateY(2px)}100%{transform:translateY(-760px)}}
@keyframes taBoom{0%{transform:scale(.05);opacity:0}30%{opacity:1}65%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
@keyframes taPlant{0%{transform:translateY(-30px) scaleY(.2);opacity:0}30%{opacity:1}55%{transform:translateY(0) scaleY(1.12)}75%,100%{transform:translateY(0) scaleY(1);opacity:1}}
@keyframes taDrip{0%{transform:scaleY(0);opacity:1}40%{transform:scaleY(1)}85%{opacity:1}100%{transform:scaleY(1);opacity:0}}
@keyframes taSwing{0%,100%{transform:rotate(0)}25%{transform:rotate(-22deg)}75%{transform:rotate(22deg)}}
@keyframes taLeap{0%{transform:translate(-34px,14px) rotate(-50deg);opacity:0}10%{opacity:1}50%{transform:translate(0,-34px) rotate(0)}88%{opacity:1}100%{transform:translate(34px,14px) rotate(50deg);opacity:0}}
@keyframes taSail{0%{transform:translate(-520px,60px);opacity:0}10%{opacity:1}100%{transform:translate(0,0);opacity:1}}
/* Always, while the picture moves: flames, twinkling lights, a gentle drift. */
.moving .ta-flame{transform-box:fill-box;transform-origin:center bottom;animation:flicker .18s infinite alternate}
.moving .ta-twinkle{animation:tmTwinkle 2.4s infinite}
.moving .ta-float{transform-box:fill-box;animation:taFloat 3.2s ease-in-out infinite alternate}
@keyframes taFloat{from{transform:translateY(0)}to{transform:translateY(-5px)}}
/* The character's own moves at a step (0099): the theme's character.act; the mountain's climber flips. */
#climber.acting #bot{transform-box:fill-box;transform-origin:center 62%;animation-duration:1.5s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.3,.6,.4,1)}
#climber.act-flip #bot{animation-name:actFlip} #climber.act-hop #bot{animation-name:actHop} #climber.act-spin #bot{animation-name:actSpin}
#climber.act-roll #bot{animation-name:actRoll} #climber.act-surf #bot{animation-name:actSurf;animation-duration:2s}
#climber.act-eight #bot{animation-name:actEight;animation-duration:2.8s;animation-timing-function:linear}
@keyframes actFlip{0%{transform:translateY(0) rotate(0)}15%{transform:translateY(3px) rotate(0)}60%{transform:translateY(-38px) rotate(-220deg)}88%{transform:translateY(0) rotate(-360deg)}94%{transform:translateY(2px) rotate(-360deg)}100%{transform:translateY(0) rotate(-360deg)}}
@keyframes actHop{0%,50%,100%{transform:translateY(0)}25%{transform:translateY(-22px)}75%{transform:translateY(-14px)}}
@keyframes actSpin{0%{transform:translateY(0) scaleX(1)}25%{transform:translateY(-14px) scaleX(-1)}50%{transform:translateY(-20px) scaleX(1)}75%{transform:translateY(-14px) scaleX(-1)}100%{transform:translateY(0) scaleX(1)}}
@keyframes actRoll{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(0,-30px) rotate(180deg)}100%{transform:translate(0,0) rotate(360deg)}}
@keyframes actSurf{0%{transform:translate(0,0) rotate(0)}16%{transform:translate(2px,-24px) rotate(-14deg)}32%{transform:translate(10px,-58px) rotate(-24deg)}46%{transform:translate(22px,-62px) rotate(4deg)}62%{transform:translate(36px,-32px) rotate(20deg)}80%{transform:translate(20px,-8px) rotate(8deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes actEight{0%{transform:translate(0px,0px) rotate(0deg)}9%{transform:translate(0px,-46px) rotate(0deg)}13%{transform:translate(0px,-74px) rotate(26deg)}16%{transform:translate(0px,-84px) rotate(52deg)}18.1%{transform:translate(19px,-99px) rotate(53deg)}20.2%{transform:translate(37px,-111px) rotate(59deg)}22.4%{transform:translate(53px,-119px) rotate(70deg)}24.5%{transform:translate(68px,-122px) rotate(90deg)}26.6%{transform:translate(80px,-119px) rotate(119deg)}28.8%{transform:translate(89px,-111px) rotate(146deg)}30.9%{transform:translate(94px,-99px) rotate(165deg)}33%{transform:translate(96px,-84px) rotate(180deg)}35.1%{transform:translate(94px,-69px) rotate(195deg)}37.2%{transform:translate(89px,-57px) rotate(214deg)}39.4%{transform:translate(80px,-49px) rotate(241deg)}41.5%{transform:translate(68px,-46px) rotate(270deg)}43.6%{transform:translate(53px,-49px) rotate(290deg)}45.8%{transform:translate(37px,-57px) rotate(301deg)}47.9%{transform:translate(19px,-69px) rotate(307deg)}50%{transform:translate(0px,-84px) rotate(308deg)}52.1%{transform:translate(-19px,-99px) rotate(307deg)}54.2%{transform:translate(-37px,-111px) rotate(301deg)}56.4%{transform:translate(-53px,-119px) rotate(290deg)}58.5%{transform:translate(-68px,-122px) rotate(270deg)}60.6%{transform:translate(-80px,-119px) rotate(241deg)}62.8%{transform:translate(-89px,-111px) rotate(214deg)}64.9%{transform:translate(-94px,-99px) rotate(195deg)}67%{transform:translate(-96px,-84px) rotate(180deg)}69.1%{transform:translate(-94px,-69px) rotate(165deg)}71.2%{transform:translate(-89px,-57px) rotate(146deg)}73.4%{transform:translate(-80px,-49px) rotate(119deg)}75.5%{transform:translate(-68px,-46px) rotate(90deg)}77.6%{transform:translate(-53px,-49px) rotate(70deg)}79.8%{transform:translate(-37px,-57px) rotate(59deg)}81.9%{transform:translate(-19px,-69px) rotate(53deg)}84%{transform:translate(-0px,-84px) rotate(52deg)}88%{transform:translate(0px,-76px) rotate(26deg)}92%{transform:translate(0px,-46px) rotate(0deg)}100%{transform:translate(0px,0px) rotate(0deg)}}
/* A stage's landmark pops as it acts (0099); its parts do the rest. */
.lm.acting > .lm-in{transform-box:fill-box;transform-origin:center bottom;animation:lmPop 1.5s cubic-bezier(.3,1.5,.5,1) both}
@keyframes lmPop{0%{transform:scale(1)}22%{transform:scale(1.3)}42%{transform:scale(1.12)}60%{transform:scale(1.22)}100%{transform:scale(1)}}
/* Fireworks (0099): a trail climbs, the burst spreads from its centre. Once (when the picture appears, then they hang)
   or as a show that repeats while the picture moves. Still, they're drawn burst. */
#scene .ta-trail,#scene .ta-trail-l{opacity:0}
.acting .ta-trail{transform-origin:center bottom;animation-name:fwTrail1;animation-duration:1.4s}
.acting .ta-spark{animation-name:fwSpark1;animation-duration:2.4s;animation-timing-function:cubic-bezier(.1,.8,.25,1)}
.moving .ta-trail-l{transform-box:fill-box;transform-origin:center bottom;animation:fwTrail 6s infinite}
.moving .ta-spark-l{transform-box:fill-box;transform-origin:center;animation:fwSpark 6s infinite cubic-bezier(.1,.8,.25,1)}
.moving .ta-drop-l{transform-box:fill-box;animation:fwDrop 6s infinite ease-in}
.moving .ta-l1{animation-delay:1.2s} .moving .ta-l2{animation-delay:2.4s} .moving .ta-l3{animation-delay:3.6s} .moving .ta-l4{animation-delay:4.8s}
@keyframes fwTrail1{0%{transform:scaleY(0);opacity:1}45%{transform:scaleY(1);opacity:1}62%,100%{transform:scaleY(1);opacity:0}}
@keyframes fwSpark1{0%,26%{transform:scale(.05);opacity:0}28%{opacity:1}62%{transform:scale(1)}100%{transform:scale(1);opacity:1}}
@keyframes fwTrail{0%{transform:scaleY(0);opacity:1}13%{transform:scaleY(1);opacity:1}19%,100%{transform:scaleY(1);opacity:0}}
@keyframes fwSpark{0%,13%{transform:scale(.05);opacity:0}14%{opacity:1}34%{transform:scale(1);opacity:1}62%{opacity:.85}80%,100%{transform:scale(1.06);opacity:0}}
@keyframes fwDrop{0%,22%{transform:translateY(0)}80%,100%{transform:translateY(26px)}}
/* Santa's sleigh crosses the sky while the picture moves, slowly, rising and dipping; still, it's parked in the sky. */
.moving .ta-cross{transform-box:fill-box;animation:taCross 34s linear -9s infinite}   /* already on its way when the page opens */
.moving .ta-pitch{transform-box:fill-box;transform-origin:center;animation:taPitch 3.4s ease-in-out infinite alternate}
@keyframes taCross{0%{transform:translate(-760px,40px)}25%{transform:translate(-380px,-6px)}50%{transform:translate(0,10px)}75%{transform:translate(380px,-12px)}100%{transform:translate(760px,30px)}}
@keyframes taPitch{from{transform:translateY(-3px) rotate(-3deg)}to{transform:translateY(4px) rotate(3deg)}}
/* The end's card (0099). */
.finale{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--highlight) 30%,transparent),color-mix(in srgb,var(--surface) 25%,transparent) 60%);overflow:hidden}
.finale-rays{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--highlight) 22%,transparent) 0deg 9deg,transparent 9deg 22.5deg);pointer-events:none}
.finale.show .finale-rays{animation:finaleRays 9s linear infinite}
.finale-sparks{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.finale-sparks i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--highlight);opacity:0}
.finale-sparks i:nth-child(3n){background:var(--surface-raised);width:8px;height:8px} .finale-sparks i:nth-child(4n){background:var(--action)}
.finale.show .finale-sparks i{animation:finaleSpark 1.6s cubic-bezier(.1,.8,.3,1) both}
.finale.show .finale-sparks i:nth-child(n+9){animation-delay:.5s}
.finale-sparks i:nth-child(8n+1){--a:0deg} .finale-sparks i:nth-child(8n+2){--a:45deg} .finale-sparks i:nth-child(8n+3){--a:90deg} .finale-sparks i:nth-child(8n+4){--a:135deg}
.finale-sparks i:nth-child(8n+5){--a:180deg} .finale-sparks i:nth-child(8n+6){--a:225deg} .finale-sparks i:nth-child(8n+7){--a:270deg} .finale-sparks i:nth-child(8n){--a:315deg}
.finale-sparks i:nth-child(n+9){--d:200px} 
@keyframes finaleSpark{0%{transform:rotate(var(--a)) translateX(0) scale(.4);opacity:0}15%{opacity:1}100%{transform:rotate(calc(var(--a) + 22deg)) translateX(var(--d,150px)) scale(1);opacity:0}}
@keyframes finaleRays{to{transform:rotate(360deg)}}
.finale[hidden]{display:none}
.finale-card{position:relative;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sheet);padding:22px 26px;max-width:420px;text-align:center}
.scene .finale-star{display:block;width:72px;height:72px;margin:0 auto 6px;fill:var(--highlight)}
.finale-card h2{margin:0 0 6px;font-size:30px;line-height:36px;color:var(--text)}
.finale-card p{margin:0 0 14px;color:var(--text-muted)}
.finale.show .finale-card{animation:finaleIn .55s cubic-bezier(.2,.8,.3,1.25) both}
.finale.show .finale-star{animation:finaleStar 1.2s cubic-bezier(.2,.8,.3,1) both}
.finale.still .finale-card,.finale.still .finale-star,.finale.still .finale-rays,.finale.still .finale-sparks i{animation:none}
.finale.still .finale-sparks{display:none}
@keyframes finaleIn{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes finaleStar{0%{transform:scale(.2) rotate(-90deg)}70%{transform:scale(1.15) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.pad{fill:var(--surface-sunken);stroke:var(--line)}
.rocket-body{fill:var(--journey-snow)} .rocket-nose{fill:var(--journey-camp-current)} .rocket-fin{fill:var(--journey-camp-current)} .rocket-win{fill:var(--journey-sky);stroke:var(--text);stroke-width:7.5}
/* The Unconventionalists rocket (Paul, 9 Nov: "Unconventionalists rocket, filled"): drawn at the mark's own size (200 by 440) and scaled down, so
   these widths are the mark's; the seams and the band are its dashed lines, the nozzle its base. */
.rocket-nozzle{fill:var(--journey-ridge-near)} .rocket-seam{fill:none;stroke:var(--navy);stroke-width:4.5;stroke-linecap:round;stroke-dasharray:12 9;opacity:.4}
.rocket-band{fill:none;stroke:var(--journey-snow);stroke-width:4.5;stroke-linecap:round;stroke-dasharray:9 8;opacity:.85}
.flame{fill:var(--journey-camp-current);opacity:0}
#rocket{transition:transform 2.6s cubic-bezier(.5,0,.9,.2)}
#rocket.launch{transform:translateY(-700px)}
#rocket.launch .flame{opacity:1;animation:flicker .12s infinite alternate}
/* Its trail grows as it climbs (same timing, so it stays joined to the pad), then fades (Paul, 1 Nov: more impressive). */
.rocket-trail{fill:var(--journey-snow);opacity:0;transform-box:fill-box;transform-origin:center top;transform:scaleY(0);transition:transform 2.6s cubic-bezier(.5,0,.9,.2)}
#rocket.launch .rocket-trail{transform:scaleY(1);animation:trailFade 6s both}
@keyframes trailFade{0%,50%{opacity:.8}100%{opacity:0}}
@keyframes flicker{from{transform:scaleY(1)}to{transform:scaleY(1.5)}}
.toast{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:var(--action);color:var(--on-action);border:0;border-radius:var(--radius-md);padding:12px 16px;font:700 15px/20px var(--font-sans);box-shadow:var(--shadow-sheet);opacity:0;transition:opacity .3s, transform .3s;pointer-events:none;max-width:90%;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(4px)}
/* The caption band joined to the bottom of the mountain picture (batch 5, 24 Oct): it used to sit over the start of the route. */
.scene-card .scene{border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.scene-cap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;background:var(--surface-raised);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:12px 16px}
.scene-cap svg{flex:0 0 auto;margin-top:1px} .scene-cap .pin{fill:var(--highlight)} .scene-cap .pin-hole{fill:var(--surface-raised)}
.scene-cap .cap-text{min-width:0} .scene-cap .next-step{align-self:center;min-height:44px;white-space:nowrap}
/* On a phone the pin and the words stay side by side, and the button takes the strip's full width beneath them. */
@media (max-width:560px){.scene-cap{grid-template-columns:auto minmax(0,1fr)} .scene-cap .next-step{grid-column:1 / -1;width:100%;margin-top:4px}}
.next-card{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:16px} .next-card h2{margin:0 0 4px} .next-card p{margin:0}
.next-card .btn{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.scene-cap .where{font-size:13px;line-height:18px;color:var(--text-muted)} .scene-cap .what{font-weight:700;font-size:16px;line-height:22px;color:var(--text);overflow-wrap:anywhere}
/* The journey's two zoom levels (C3 batch 3, decision 0092): the whole journey, or one stage zoomed in. Steps the whole
   picture has no room for are dots there; each stage gets a marker (its number, a ring as its steps are passed). */
.camp .cm-dot{display:none}
.camp.as-dot .cm-full{display:none} .camp.as-dot .cm-dot{display:inline} .camp.as-dot{cursor:inherit}
.cm-dot{fill:var(--journey-camp-halo);stroke:var(--journey-camp-ring);stroke-width:2}
.camp.done .cm-dot{fill:var(--journey-camp);stroke:var(--journey-camp)}
.camp.doing .cm-dot{fill:var(--journey-camp-current);stroke:var(--journey-camp-current)}
.camp.skip .cm-dot{fill:var(--surface-sunken)}
.jst{cursor:pointer;outline:none}
.jst .jst-hit{fill:transparent}
.jst .jst-pole{stroke:var(--journey-snow);stroke-width:1.5}
.jst .jst-bg{fill:var(--surface-raised);stroke:var(--journey-camp-ring);stroke-width:1.5}
.jst.here .jst-bg{stroke:var(--journey-camp-current);stroke-width:2.5}
.jst.done .jst-bg{fill:var(--journey-camp);stroke:var(--journey-camp)}
.jst text{font-family:var(--font-sans);font-weight:600;font-size:10px;font-variant-numeric:tabular-nums;fill:var(--text);text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.jst.done text{fill:var(--on-success)}
.jst:hover .jst-bg,.jst:focus-visible .jst-bg{stroke:var(--journey-camp-current);stroke-width:3}
.scene.zooming #others,.scene.zooming #planMarks{opacity:0}
.zoombar{display:flex;gap:8px;align-items:center;padding:8px;background:var(--surface-raised);border:1px solid var(--line);border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.scene-card .zoombar+.scene{border-radius:0}
.zoombar button{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-family:var(--font-sans);font-weight:600;font-size:14px;cursor:pointer}
.zoombar button .ic{width:18px;height:18px}
.zoombar .zb-step{padding:0} .zoombar .zb-step:disabled{opacity:.4;cursor:default}
.zoombar .zb-name{flex:0 1 auto;min-width:0;font-family:var(--font-sans);font-weight:600;font-size:14px;line-height:20px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zoombar .zb-hint{font-size:13px;color:var(--text-muted)}
.zoombar .zb-in,.zoombar .zb-out{flex:none}
/* An owner's theme preview (the Themes page, C3 batch 4): only the picture and its bar, filling the frame. */
body.theme-preview{visibility:hidden;overflow:hidden}
body.theme-preview .scene-card{visibility:visible;position:fixed;inset:0;margin:0;z-index:50;overflow:auto;background:var(--surface)}
body.theme-preview .scene-card .scene-cap{display:none}
.pv-bar{display:none}
body.theme-preview .pv-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 14px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface-raised)}
.pv-bar .pv-back{min-height:44px;display:inline-flex;align-items:center;text-decoration:none} .pv-bar .pv-other{font-size:14px;min-height:44px;display:inline-flex;align-items:center}
html.pv-phone body.theme-preview .scene-card{width:min(390px,100%);margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
/* The Themes page (owners) */
.th-list{display:grid;gap:10px}
.th-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line)} .th-row:first-child{border-top:0;padding-top:0}
.th-row .td-acts{margin:0} .th-sub{font-size:13px;margin-top:2px} .th-notes{font-size:14px;margin-top:6px;max-width:60ch;white-space:pre-wrap;color:var(--text-muted)}
.th-prev-bar{display:flex;flex-wrap:wrap;gap:10px}
.th-prev-bar label{display:grid;gap:3px;font-size:13px;color:var(--text-muted)}
.th-prev-grid{display:grid;gap:14px;margin-top:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.th-prev-grid.phone{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:860px){.th-prev-grid.phone{grid-template-columns:repeat(2,minmax(0,1fr))} .th-prev-grid{grid-template-columns:minmax(0,1fr)}}
.th-prev{margin:0;min-width:0} .th-prev figcaption{font-size:13px;color:var(--text-muted);margin-top:4px}
.th-frame{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.th-frame iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0}
.th-courses{display:grid;gap:8px}
.th-steps{margin:0 0 10px;padding-left:20px;font-size:14px;display:grid;gap:4px} .th-conn label{display:grid;gap:3px;font-size:13px;color:var(--text-muted)} .th-conn input{width:100%;font-family:var(--font-mono, monospace);font-size:12px}
.th-course{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.th-seasons{display:grid;gap:8px}
.th-season{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .th-season input[data-f="name"]{flex:1 1 160px;min-width:0} .th-season input[data-f="from"],.th-season input[data-f="to"]{width:7ch}
.th-easter{font-size:13px}
.old-browser{margin:0;padding:12px 16px;text-align:center;font-size:16px;line-height:1.4;background:var(--surface-sunken);color:var(--text);border-bottom:1px solid var(--line)}
.th-edit{flex:1 0 100%;padding:12px;border:1px solid var(--line);border-radius:var(--radius-md)} .th-edit .th-hint{margin:0;font-size:13px} @media (max-width:560px){.th-edit form.ci label{grid-column:1/3}}
/* A theme's parts (0097) on the Themes page: made, still to make, optional. */
.th-parts{margin-top:12px} .th-parts-h{font-size:15px;margin:0 0 6px} .th-parts .th-hint{margin:0;font-size:13px}
.th-parts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 16px}
.th-parts li{display:flex;align-items:center;gap:8px;font-size:14px} .th-parts li.done{color:var(--text)} .th-parts li.todo{color:var(--text)} .th-parts li.opt{color:var(--text-muted)}
.th-parts li.done .ic{color:var(--success-text)} .th-parts li.todo .ic{color:var(--text-muted)}
.th-upload{display:grid;gap:8px;justify-items:start;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} .th-upload p{margin:0}
form.ci label.th-check{display:flex;gap:10px;align-items:center;min-height:44px;font-size:14px;color:var(--text);cursor:pointer}
form.ci .th-check input{width:20px;height:20px;flex:0 0 auto;margin:0;padding:0;accent-color:var(--action)}
@media (max-width:560px){.zoombar .zb-out .zb-t{display:none} .zoombar .zb-out{padding:0}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
/* The stat boxes start at the top, so titles, numbers and the lines under them line up across the row (batch 6). */
.stat{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);padding:12px 14px;display:grid;gap:4px;min-width:0;align-content:start}
.stat-camps{position:relative} .stat-camps .ring{position:absolute;right:12px;top:12px;width:52px;height:52px}
.ring .ring-bg{fill:none;stroke:var(--surface-sunken);stroke-width:6} .ring .ring-fg{fill:none;stroke:var(--success);stroke-width:6;stroke-linecap:round;transition:stroke-dasharray .8s ease}
.ring text{font:700 11px var(--font-sans);fill:var(--text);text-anchor:middle;dominant-baseline:middle}
@media (max-width:560px){.stat-camps .ring{width:42px;height:42px;right:10px;top:10px}}
.stat .v{font-family:var(--font-serif);font-size:32px;font-weight:560;font-variant-numeric:tabular-nums;line-height:36px}
#week{font-size:28px;line-height:36px;white-space:nowrap} @media (max-width:560px){#week{font-size:22px}} /* "Week 1 of 26" doesn't fit a fifth-width tile at 32px (see the change log) */
.stat .l{font-size:13px;color:var(--text-muted)}
.xpbar{height:8px;border-radius:999px;background:var(--surface-sunken);overflow:hidden;margin-top:4px;container-type:inline-size}
/* Orange to teal across the whole track, so the bar's tip turns teal as you near the next level (batch 5). Without container units it falls back to the live site's gradient across the fill. */
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--action),var(--success)) 0 0/100cqw 100% no-repeat;width:0;transition:width .8s ease}
/* 9 Nov (Paul): one column per stage, so a built course's four stages share the width the Ascent's nine do, and the names wrap to two lines in their own case instead of being cut off in capitals. */
.lands{display:grid;grid-template-columns:repeat(var(--lands,9),minmax(0,1fr));gap:6px}
.land{display:grid;gap:4px;min-width:0;align-content:end}
/* Each stage bar is a button that opens its stage (batch 8); yours is outlined. */
button.land{font:inherit;color:inherit;background:none;border:0;text-align:left;cursor:pointer;padding:6px;margin:-6px;border-radius:8px} button.land:hover{background:var(--surface-sunken)}
button.land:hover b,.land.cur b{color:var(--text)} .land.cur .bar{box-shadow:0 0 0 1.5px var(--highlight)} .land .bar{display:block}
.land b{font-family:var(--font-sans);font-weight:600;font-size:13px;line-height:17px;color:var(--text-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word}
.land .bar{height:6px;border-radius:999px;background:var(--surface-sunken);overflow:hidden}
.land .bar i{display:block;height:100%;width:0;background:var(--success);transition:width .6s}
@media (max-width:720px){.lands{grid-template-columns:repeat(var(--lands-sm,3),minmax(0,1fr))}}
.cols{display:grid;grid-template-columns:3fr 2fr;gap:20px;align-items:start}
@media (max-width:860px){.cols{grid-template-columns:1fr}}
.rcol{display:grid;gap:20px;min-width:0} @media (max-width:860px){.rcol{order:-1}} /* on phones, above the camp log (batch 6) */
.prof-text{margin:0 0 12px;font-size:14px} .prof-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.more-menu>summary{display:inline-flex;align-items:center;gap:6px;font:700 14px/20px var(--font-sans);color:var(--text);background:var(--surface-raised);border:1.5px solid var(--line-strong);border-radius:var(--radius-md);padding:0 12px;min-height:36px;position:relative}
.more-menu>summary::before{display:none!important} .more-menu>summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px}
.more-menu[open]{flex-basis:100%} .more-menu[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
.more-menu .menu{display:grid;gap:10px;margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-sunken)} .more-menu .menu>a{font-size:14px;font-weight:700;width:max-content}
.tabcard .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:-4px 0 14px}
/* My profile | Admin, on phones, for admins only (30 Oct). Wider screens have Admin in the top bar. */
.pagetabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 16px} .pagetabs[hidden]{display:none}
.pagetabs .tab{display:inline-flex;align-items:center;text-decoration:none} .pagetabs .tab[aria-current="page"]{color:var(--text)}
.pagetabs .tab[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:2px;background:var(--highlight)}
@media (min-width:861px){.pagetabs{display:none}}
.tab{font:700 15px/20px var(--font-sans);background:none;border:0;color:var(--text-muted);padding:0 12px;min-height:44px;position:relative;cursor:pointer}
.tab[aria-selected="true"]{color:var(--text)} .tab[aria-selected="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:2px;background:var(--highlight)} .tab:hover{color:var(--text)}
.addci{margin-top:10px} .addci>summary{display:inline-flex;align-items:center;font:700 14px/20px var(--font-sans);color:var(--text);border:1.5px solid var(--line-strong);border-radius:var(--radius-md);padding:0 12px;min-height:36px} .addci>summary::before{display:none!important} .addci[open]>summary{margin-bottom:12px}
.capped>.ci-item:nth-child(n+4),.capped>.sess-item:nth-child(n+4){display:none} .show-all{font-size:13px;justify-self:start}
.shelf-h{display:flex;justify-content:flex-end;margin:-6px 0 6px} .shelf{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.medal{background:none;border:0;padding:4px;border-radius:12px;cursor:pointer;min-width:0} .medal svg{width:100%;height:auto;display:block} .medal:not(.on) svg{filter:grayscale(1);opacity:.4}
.medal.sel{background:var(--surface-sunken);box-shadow:inset 0 0 0 1.5px var(--highlight)} .shelf-cap{margin:10px 0 0;font-size:14px;color:var(--text-muted)} .shelf-cap b{color:var(--text)}
.phase{display:grid;gap:6px}
.phase-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-top:8px;border-top:1px solid var(--line)}
.phase-h small{color:var(--text-muted);font-size:13px}
.mod{display:grid;grid-template-columns:28px 1fr auto;gap:8px 10px;align-items:center;padding:8px;border-radius:10px;border:1px solid transparent;scroll-margin-top:72px}
.mod.doing{border-color:var(--action)} .mod.hi{background:var(--surface-sunken)}
/* Stages fold too: only yours opens (batch 7). */
#modList{display:grid;grid-template-columns:minmax(0,1fr)}
.stg{border-top:1px solid var(--line);scroll-margin-top:72px} .stg-s{display:flex;gap:12px;align-items:center;padding:12px 2px;min-height:48px} details.stg>summary.stg-s::before{display:none!important}
.stg-s::after{content:"";flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:rotate(45deg);margin:-4px 4px 0 2px;transition:transform .2s}
.stg[open]>.stg-s::after{transform:rotate(-135deg);margin-top:4px}
.stg-t{flex:1;min-width:0} .stg-nm{font-family:var(--font-serif);font-weight:560;font-size:22px;line-height:28px;color:var(--text)} .stg-sub{font-size:13px;color:var(--text-muted)}
.stg-t small{display:block;font-size:13px;color:var(--text-muted);margin-top:2px} .stg-st{flex:0 0 auto} .stg-b{padding:0 0 10px}
/* Each camp folds to one line; tap it for the rest (batch 6). Side camps stay plain rows. */
details.mod{display:block;padding:0;margin:6px 0;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-raised)} details.mod[open]{border-color:var(--action)}
.mod-s{display:flex;gap:10px;align-items:center;padding:10px 12px;min-height:44px} details.mod>summary.mod-s::before{display:none!important}
.mod-s::after{content:"";flex:0 0 auto;width:7px;height:7px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:rotate(45deg);margin:-4px 4px 0 2px;transition:transform .2s}
details.mod[open]>.mod-s::after{transform:rotate(-135deg);margin-top:4px}
.mod-s .n{flex:0 0 24px} .mod-t{flex:1;min-width:0} .mod-nm{font-weight:700;font-size:15px;line-height:20px;color:var(--text)} .mod-t small{display:block;font-size:13px;color:var(--text-muted);margin-top:2px}
.mod-st{flex:0 0 auto} .mod-stt{font-size:13px;color:var(--text-muted);white-space:nowrap}
.ndot{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--success-text);margin-top:3px} .ndot[hidden]{display:none} .ndot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--success)}
details.mod[open] .ndot{display:none}
.mod-b{padding:0 12px 12px 46px} .mod-b .name{font-weight:400} .mod-b .dur{margin-top:0;align-items:center} .mylink{font-size:13px;margin-left:4px}
/* A step whose questions aren't written yet says so in place of its buttons (reviewer, 3 Nov). */
.qnone{font-size:13px;color:var(--text-muted)}
.ctl{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
@media (max-width:560px){.mod-b{padding:0 12px 12px}.mod-s{gap:8px;padding:10px}}
.mod .n{font-family:var(--font-sans);font-weight:600;font-size:13px;color:var(--text-muted);text-align:right}
.mod .name{font-weight:600;min-width:0}
.mod .name small{display:block;font-weight:400;color:var(--text-muted);font-size:13px}
.mod .name .cap-tag{font-family:var(--font-sans);font-weight:600;font-size:13px;color:var(--action-text);margin-left:6px}
.mod select{font:inherit;font-size:13px;background:var(--surface-sunken);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.mod .extra{grid-column:2/4;display:flex;flex-wrap:wrap;gap:6px}
.mod .extra input{font:inherit;font-size:13px;background:var(--surface-sunken);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:4px 8px;min-width:0}
.mod .extra input.q{width:80px} .mod .extra input.d{width:140px} .mod .extra input.note{flex:1 1 160px}
.mod.todo .extra{display:none}
.mod .dur{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.chip{font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:0;color:var(--text-muted);background:var(--surface-sunken);border:1px solid var(--line);border-radius:999px;padding:2px 8px;line-height:1.5}
button.chip{cursor:pointer;color:var(--action-text);border-color:color-mix(in srgb,var(--action) 45%,transparent)}
button.chip:hover,button.chip[aria-expanded="true"]{background:color-mix(in srgb,var(--action) 14%,var(--surface-sunken))}
.chip.dim{opacity:.7}
.mod .vids{font-weight:400;font-size:13px;color:var(--text-muted);margin-top:6px;padding:6px 8px;border-left:2px solid var(--action);line-height:1.45}
.mod .saved{display:inline-block;margin-left:8px;font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:0;color:var(--success-text);opacity:0;transition:opacity .3s;vertical-align:middle}
.mod .saved.show{opacity:1} .mod .saved.warn{color:var(--danger)}
.testbar{margin-inline:-16px;padding:7px 16px;background:#f2c94c;color:#3a2a00;font-weight:500;font-size:13px;text-align:center}.testbar a{color:inherit;text-decoration:underline;margin-left:6px}
.authbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 0 0;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface-raised);font-size:13px;color:var(--text-muted)}
.authbar.view{border-color:var(--action);color:var(--text)} .authbar.warn{border-color:var(--danger);color:var(--text)}
.authbar button{font-size:13px;padding:7px 12px;border-radius:8px}
.authbar .viewsel{display:inline-flex;align-items:center;gap:6px}
.authbar select{font:inherit;font-size:13px;background:var(--surface-sunken);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.card.offer{border-color:var(--action);margin-top:14px}
/* The plan card folds to one line, closed until you open it (batch 6). */
.planbar{border:1px solid var(--action);border-radius:12px;background:color-mix(in srgb,var(--action) 8%,var(--surface-raised));margin-bottom:12px;font-size:14px}
.planbar>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;min-height:44px} .planbar>summary::before{display:none!important}
.pb-more{font-size:13px;font-weight:700;color:var(--link);white-space:nowrap;display:inline-flex;align-items:center;gap:6px} .pb-more::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px}
.planbar[open] .pb-more::after{transform:rotate(-135deg);margin-top:3px} .pb-more .o,.planbar[open] .pb-more .c{display:none} .planbar[open] .pb-more .o{display:inline}
.pb-b{display:grid;gap:8px;padding:0 14px 12px} .pb-b .muted{font-size:13px}
.sym{margin:0 0 10px} .sym>summary{font-size:13px;color:var(--text-muted)} .sym p{margin:6px 0 0;font-size:13px}
.chip.depth{color:var(--on-action);background:var(--action);border-color:var(--action)} .chip.depth.light{background:var(--text-muted);border-color:var(--text-muted);color:var(--surface)} .chip.depth.skip{background:transparent;color:var(--text-muted);text-decoration:line-through}
.mod .plannote{font-weight:400;font-size:13px;color:var(--text);margin-top:6px;padding:6px 8px;border-left:2px solid var(--success);line-height:1.45}
button.chip.qbtn{color:var(--text);border-color:var(--line)} button.chip.qbtn.test{color:var(--on-action);background:var(--action);border-color:var(--action)}
button.chip.qbtn:disabled{opacity:.55;cursor:default}
.chip.score{color:var(--text);background:var(--success-soft);border-color:transparent} .chip.score.fail{color:var(--danger);background:var(--danger-soft);border-color:var(--danger)} .chip.score.prof{color:var(--text-muted);background:var(--surface-sunken);border-color:var(--line)}
.mod select option:disabled{color:var(--text-muted)}
/* Quiz modal */
.qz{position:fixed;inset:0;z-index:40;background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(6px);display:grid;place-items:center;padding:12px}
.qz-box{width:min(680px,100%);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;display:grid;gap:12px;box-shadow:var(--shadow-sheet)}
.qz-h{display:flex;justify-content:space-between;align-items:start;gap:10px}
.qz-timer{height:6px;border-radius:999px;background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--line-strong);overflow:hidden} .qz-timer i{display:block;height:100%;width:100%;background:var(--action);transition:width .25s linear} .qz-timer.low i{background:var(--danger)}
.qz-meta{display:flex;justify-content:space-between;font-family:var(--font-sans);font-weight:600;font-size:13px;font-variant-numeric:tabular-nums;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase}
.qz-body{display:grid;gap:10px;min-height:120px}
.qz-q{font-family:var(--font-serif);font-size:21px;font-weight:400;line-height:29px} .qz-q pre{background:var(--surface-sunken);border:1px solid var(--line);border-radius:10px;padding:10px 12px;overflow-x:auto;font-family:var(--mono);font-size:13px;font-weight:400;line-height:1.5;margin:8px 0 0} .qz-q code,.qz-opt code,.qz-rv code{font-family:var(--mono);font-size:.92em;background:var(--surface-sunken);padding:1px 5px;border-radius:5px}
.qz-opts{display:grid;gap:8px}
.qz-opt{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;text-align:left;font:400 16px/22px var(--font-sans);background:var(--surface-raised);color:var(--text);border:1.5px solid var(--line-strong);border-radius:var(--radius-md);padding:12px;min-height:52px;cursor:pointer}
.qz-opt b{font-family:var(--font-sans);font-weight:600;font-size:13px;color:var(--text-muted);border:1px solid var(--line-strong);border-radius:7px;padding:2px 0;text-align:center}
.qz-opt:hover{background:var(--surface-sunken);border-color:var(--action)} .qz-opt.sel{border:2.5px solid var(--action);padding:11px} .qz-opt.sel b{color:var(--on-action);background:var(--action);border-color:var(--action)}
.qz-opt.right{border-color:var(--success)} .qz-opt.wrong{border-color:var(--danger)}
.qz-f{display:flex;justify-content:space-between;gap:8px}
.qz-score{font-family:var(--font-sans);font-size:44px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums} .qz-score small{font-size:16px;color:var(--text-muted);font-weight:600}
.qz-rv{display:grid;gap:8px;font-size:13px} .qz-rv .it{border:1px solid var(--line);border-radius:12px;padding:10px 12px} .qz-rv .it.ok{border-color:var(--success)} .qz-rv .it.bad{border-color:var(--danger)} .qz-rv .ex{color:var(--text-muted);margin-top:4px}
.qz-missed{display:flex;flex-wrap:wrap;gap:6px}
.mod .plannote a{color:var(--action-text)}
.mod .spine{color:var(--action-text);font-size:13px;vertical-align:middle;margin-right:4px}
/* Other climbers: your climber's shape in their own colour (--c, set per climber). */
.other-climber{cursor:pointer;outline:none}
.other-climber .ob-c{fill:var(--c)}
.other-climber .ob-pack,.other-climber .ob-tip{fill:color-mix(in srgb,var(--c) 55%,#0b1020)}
.other-climber .ob-eye{fill:#0e1428}
.other-climber .ob-ant{stroke:var(--c);stroke-width:2}
.other-climber .ob-ring{fill:none;stroke:var(--c);stroke-width:2.6}
.other-climber text{font-family:var(--font-sans);font-weight:700;font-size:13px;fill:var(--text);text-anchor:middle;paint-order:stroke;stroke:var(--surface);stroke-width:3.5px;stroke-linejoin:round}
.other-climber:hover text,.other-climber:focus-visible text{text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:2px}
@media (max-width:640px){.other-climber text{font-size:20px;stroke-width:5px}}
body.ro #modList select:disabled,body.ro #modList input:disabled,body.ro form.ci input:disabled{opacity:.7;cursor:not-allowed}
body.ro [data-del],body.ro [data-sdel],body.ro #btnImport,body.ro #btnReset{display:none}
form.ci{display:grid;grid-template-columns:1fr 1fr;gap:8px}
form.ci label{display:grid;gap:3px;font-size:13px;color:var(--text-muted);min-width:0}
form.ci input,form.ci textarea{font:inherit;font-size:13px;background:var(--surface-sunken);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 8px;width:100%;min-width:0}
form.ci .full{grid-column:1/3}
.ci-list{display:grid;gap:8px}
.ci-item{display:grid;grid-template-columns:1fr auto;gap:4px 8px;padding:10px;border-radius:10px;background:var(--surface-sunken);font-size:13px}
.ci-item .d{font-family:var(--font-sans);font-size:13px;color:var(--text-muted)}
.ci-item .meta{color:var(--text-muted);font-size:13px}
.photo-hero{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
.photo-prev{width:64px;height:64px;border-radius:50%;overflow:hidden;border:2px solid var(--line);background:var(--surface-sunken);display:grid;place-items:center}
.photo-prev.big{width:120px;height:120px;border:3px solid var(--action)}
.photo-prev img,.photo-prev svg{width:100%;height:100%;object-fit:cover;display:block}
.photo-btn{display:inline-block;text-align:center;font-weight:600;background:var(--action);color:var(--on-action);border-radius:var(--radius-md);padding:9px 14px;cursor:pointer;font-size:14px}
button.info{width:18px;height:18px;border-radius:50%;border:1px solid var(--action);background:transparent;color:var(--action-text);font:700 13px/1 var(--font-sans);cursor:pointer;padding:0;display:inline-grid;place-items:center}
button.info[aria-expanded="true"]{background:var(--action);color:var(--on-action)}
.prof-help{border:1px solid var(--line);border-left:3px solid var(--action);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--text)}
.prov-row{display:flex;flex-wrap:wrap;gap:6px} .prov-row .prov{font-size:13px;padding:6px 10px} .prov-row .prov.on{border-color:var(--action);color:var(--text)}
.prov-steps{margin:10px 0 0;padding-left:20px;display:grid;gap:4px} .prov-steps li{font-size:13px}
.climber-demo{display:flex;align-items:center;gap:12px;margin-top:6px} .climber-demo svg{width:90px;height:80px}
@media (max-width:480px){.photo-hero{grid-template-columns:96px 1fr}.photo-prev.big{width:96px;height:96px}}
.bot-face-ring{fill:none;stroke:var(--text);stroke-width:2.2}
.crop-stage{position:relative;width:min(280px,100%);aspect-ratio:1;margin:0 auto;overflow:hidden;border-radius:12px;background:#000;touch-action:none;cursor:grab;user-select:none}
.crop-stage:active{cursor:grabbing}
.crop-stage img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;pointer-events:none}
.crop-mask{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle closest-side at center,transparent 0,transparent calc(100% - 1px),rgba(0,0,0,.6) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.crop-mask::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--action)}
.crop-zoom{display:grid;gap:4px;font-size:13px;color:var(--text-muted)} .crop-zoom input{width:100%;accent-color:var(--action)}

.sess{display:grid;gap:6px;font-size:13px}
.sess-item{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--surface-sunken)}
.sess-item .d{font-family:var(--font-sans);font-size:13px;color:var(--text-muted)}
.sess-item .m{font-variant-numeric:tabular-nums;font-weight:700}
.io{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.io textarea{font-family:var(--mono);font-size:13px;width:100%;min-height:90px;background:var(--surface-sunken);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px}
footer{color:var(--text-muted);font-size:13px;padding-top:12px;border-top:1px solid var(--line)}
.site-foot{color:var(--text-muted);font-size:13px;margin:-8px 0 0}
.site-foot a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* The endorsement, as the brand guidelines set it: the rocket, "an Unconventionalists company" (the parent's name in its
   own Caslon) and Helmley's number, smaller than everything around it. */
.endorse{display:inline-flex;align-items:center;gap:.5em;margin:12px 0 0;font:400 13px/18px var(--font-sans);color:var(--text-muted);text-decoration:none;white-space:nowrap}
.endorse svg{flex:none;width:13.2px;height:29px}
.endorse i{font-style:normal;font-size:1.2em} /* "Unconventionalists" is Libre Caslon Text drawn as an outline (batch 15), so no page loads the font for one word */
.endorse i svg.uc{width:9.013em;height:1.23em;vertical-align:-.26em;fill:currentColor}
.endorse .no{font-variant-numeric:tabular-nums}
a.endorse{text-decoration:none;color:var(--text-muted)} a.endorse:hover span:first-of-type{text-decoration:underline;text-underline-offset:3px}
/* The signature block that ends every page: the wordmark with the endorsement under it, as the guidelines draw the
   lockup (batch 3, option B). */
.sig{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:6px;justify-items:start}
.sig svg.wm{height:22px;width:auto;display:block;color:var(--text)} .sig .dot{fill:var(--highlight)} .sig .endorse{margin:0}
@media (prefers-reduced-motion: reduce){
  .trail-done,.xpbar i,.land .bar i,#rocket,.rocket-trail,.toast,.toastg{transition:none}
  .walking .leg,.walking .bot-head,.camp.doing circle.pulse,#rocket.launch .flame,#rocket.launch .rocket-trail,.walking .ch-figure,.moving .ch-flicker{animation:none}
  #triumphs{display:none}
  .acting [class*="ta-"],#climber.acting #bot,.moving [class*="ta-"],.lm.acting > .lm-in,.finale .finale-card,.finale .finale-star,.finale .finale-rays,.finale .finale-sparks i{animation:none}
  .finale-sparks{display:none}
}

@media (max-width:560px){
  .nav-in .brand span{display:none}
  .mod{grid-template-columns:28px 1fr}
  .mod select{grid-column:2;justify-self:start;max-width:100%}
  .mod .extra{grid-column:2}
  .trk-pill .lbl{display:none}
}

/* Side camps a professor adds: their own row after the camp they follow (no test). */
.mod.side{border:1px dashed color-mix(in srgb,var(--success) 60%,var(--line));background:color-mix(in srgb,var(--success) 5%,transparent);margin-left:14px}
.mod.side .n{color:var(--success-text);font-weight:700;font-size:14px}
.mod.side .side-tag{display:inline-block;font-family:var(--font-sans);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--success-text);margin-right:6px}
.pc-tag{display:inline-block;font-size:13px;font-weight:700;color:var(--success-text);margin-right:6px}
.mod.side.done{opacity:.75}

/* ───────── My course ───────── */
.mc-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--text-muted)}
.mc-legend span{display:inline-flex;align-items:center;gap:6px}
.mc-legend .lg{width:12px;height:12px;border-radius:3px;display:inline-block;background:var(--surface-sunken);border:1px solid var(--line)}
.mc-legend .lg.pro{background:color-mix(in srgb,var(--action) 22%,var(--surface-sunken));border-color:var(--action)}
.mc-legend .lg.drop{background:linear-gradient(to bottom right,transparent 45%,var(--danger) 46% 54%,transparent 55%),var(--surface-sunken)}
.mc-legend .lg.side{border:1px dashed var(--success);background:color-mix(in srgb,var(--success) 10%,transparent)}
.pc-tag.pro{color:var(--action-text)} .pc-tag.drop{color:var(--danger)} .pc-tag.side{color:var(--success-text)}
.mc-plan-t{font-family:var(--font-serif);font-weight:500;font-size:19px;color:var(--text)}
.mc-plan details summary{font-size:13px;cursor:pointer}
.mc-hist{margin:8px 0 0;padding-left:20px;display:grid;gap:8px;font-size:13px}
.mc-hist li{display:grid;gap:2px}
.mc-prof{font-size:13px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mc-seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-raised)}
.mc-seg button{font:inherit;font-size:13px;font-weight:600;background:transparent;color:var(--text-muted);border:0;padding:7px 12px;cursor:pointer}
.mc-seg button.on{background:var(--action);color:var(--on-action)}
.chip.ok{color:var(--text);background:var(--success-soft);border-color:transparent}
/* Success chips in pale teal with a teal tick, beside the pale red "behind" pill (batch 5, 24 Oct). */
/* Ticks are drawn (batch 16): the icon set's check (Lucide), not a font character, so every phone shows the same one. */
.tick,.chip.ok::before,.chip.score:not(.fail):not(.prof)::before,.pill.ok::before,.pill.ahead::before,.saved.ok::after{content:"";display:inline-block;width:.9em;height:.9em;vertical-align:-.1em;background:var(--tick,currentColor);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.tick{margin-right:.3em} .chip.ok::before,.chip.score:not(.fail):not(.prof)::before,.pill.ok::before,.pill.ahead::before{margin-right:.35em;--tick:var(--success-text)} .saved.ok::after{margin-left:.35em} .chip.doing{color:var(--action-text);border-color:var(--action)}
a.chip.link{text-decoration:none;color:var(--action-text);border-color:color-mix(in srgb,var(--action) 45%,transparent)}
.mc-note{font-size:14px;padding:8px 12px;border-left:3px solid var(--action);background:color-mix(in srgb,var(--action) 9%,transparent);border-radius:0 10px 10px 0}
.mc-note .pc-tag,.mc-ready-add .pc-tag{display:block;margin-bottom:2px}
.mc-upd{font-size:13px;padding:6px 10px;border:1px dashed var(--action);border-radius:10px;color:var(--text)}
.mc-prose{font-family:var(--font-serif);font-size:17px;line-height:26px;min-width:0} .mc-prose b,.mc-prose strong{font-weight:600}
.mc-prose p{margin:0 0 8px} .mc-prose ul,.mc-prose ol{margin:0 0 8px;padding-left:20px} .mc-prose li{margin:3px 0}
.mc-prose h4{font-size:15px;color:var(--action-text);margin:10px 0 4px}
.mc-prose .tbl{margin:6px 0 10px} .mc-prose table{font-size:13px}
/* A fenced block in a step's text (reviewer, 3 Nov): kept exactly as written, numbers and spacing included, so text
   diagrams line up; a line wider than the box scrolls inside it, never the page. */
.mc-prose pre{margin:6px 0 10px;max-width:100%;border:1px solid var(--line);padding:10px 12px;font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--text);white-space:pre;overflow-x:auto;tab-size:4}
.mc-prose pre code{font-size:inherit;background:none;padding:0;border-radius:0}
.mc-items{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mc-item{display:grid;grid-template-columns:22px 1fr;gap:8px;padding:9px 10px;border-radius:10px;background:var(--surface-sunken);border:1px solid transparent;min-width:0}
.mc-item>div{min-width:0}
.mc-item.pro{border-color:var(--action);background:color-mix(in srgb,var(--action) 8%,var(--surface-sunken))}
.mc-item.drop{opacity:.62} .mc-item.drop .mc-t{text-decoration:line-through}
.mc-ico{font-family:var(--font-sans);color:var(--text-muted);text-align:center;line-height:1.6}
.mc-t{font-weight:700;overflow-wrap:anywhere} .mc-t a{color:var(--text);text-decoration-color:color-mix(in srgb,var(--action) 60%,transparent);text-underline-offset:3px}
.mc-t a:hover{color:var(--action-text)}
.mc-w{font-size:13px;margin-top:3px}
.mc-x{font-size:13px;color:var(--text-muted);margin-top:3px;font-style:italic}
.mc-id{display:block;font-family:var(--font-sans);font-size:13px;color:var(--text-muted);opacity:.7;margin-top:3px;overflow-wrap:anywhere}
.mc-chk{color:var(--success-text)} .mc-chk.part{color:var(--text-muted)}
.mc-dropped summary{font-size:13px;color:var(--text-muted);cursor:pointer;margin-bottom:6px}
/* Works / Broken under each link on your own course, and the Done list they move to (decision 0082). */
.mc-mk{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.mc-mk button.chip.mk{min-height:36px;padding:0 14px;font-size:14px;color:var(--text);border-color:var(--line-strong)}
.mc-mk button.chip.mk:disabled,.mc-mk .linkish:disabled{opacity:.55;cursor:default}
.mc-mk .linkish{min-height:36px;font-size:14px}
@media (pointer:coarse){.mc-mk button.chip.mk,.mc-mk .linkish{min-height:44px}}
.mc-mark{font-family:var(--font-sans);font-size:13px;font-weight:600;border-radius:999px;padding:2px 10px}
.mc-mark.ok{color:var(--success-text);background:var(--success-soft)} .mc-mark.bad{color:var(--danger);background:var(--danger-soft)}
.lnk-h{font-family:var(--font-sans);font-size:14px;font-weight:700;margin:6px 0 0;color:var(--text)}
.mc-done{margin-top:8px} .mc-done>summary{font-size:13px;color:var(--text-muted);cursor:pointer;margin-bottom:6px}
.mc-exs{margin:0;padding-left:20px;display:grid;gap:8px;font-size:14px}
.mc-ex.pro::marker{color:var(--action-text)} .mc-ex.drop{opacity:.6;text-decoration:line-through}
.mc-ready{font-size:14px;padding:10px 12px;border-radius:10px;background:var(--surface-sunken)}
.mc-ready-add{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.mc-pit{font-size:13px;color:var(--text-muted)}

/* Professor connector (My profile) and plans sent through it (Ascent, My course) */
.conn-body{display:grid;gap:10px;justify-items:start;font-size:14px}
.conn-url{display:grid;gap:4px;width:100%;font-size:13px}
.conn-url input{font-family:var(--font-sans);font-size:13px;width:100%;background:var(--surface-sunken);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0}
.conn-btns{display:flex;gap:8px;flex-wrap:wrap}
.conn-a{text-decoration:none;display:inline-block;border:1px solid var(--line);border-radius:10px;padding:8px 14px;color:var(--text);font-size:14px}
.conn-body .prov-steps{margin:0}
button.linkish{font:inherit;background:none;border:0;padding:0;color:var(--action-text);text-decoration:underline;cursor:pointer}
.offer-msg{margin:0 0 8px;padding:8px 12px;border-left:3px solid var(--action);background:color-mix(in srgb,var(--action) 9%,transparent);font-style:italic}
.mc-proposal{display:block;text-decoration:none;color:var(--text);font-size:14px;padding:10px 12px;border:1px solid var(--action);border-radius:10px;background:color-mix(in srgb,var(--action) 10%,transparent)}
.mc-proposal b{color:var(--action-text)}

/* ───────── My course: the trail of phases (open a phase, then a camp) ───────── */
.mc-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;align-items:center}
.mc-search{display:flex;align-items:center;gap:8px;background:var(--surface-raised);border:1px solid var(--line);border-radius:12px;padding:0 12px;min-width:0;color:var(--text-muted);font-size:18px}
.mc-search:focus-within{border-color:var(--action)}
.mc-search input{flex:1;min-width:0;font:inherit;font-size:15px;background:transparent;border:0;color:var(--text);padding:10px 0;outline:none}
.mc-tools-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.mc-btn{font-size:13px;padding:7px 10px;border-radius:10px}
.mc-count{grid-column:1/-1;font-size:13px;color:var(--text-muted)}
.mc-count:empty{display:none}
.mc-body{display:grid;gap:12px}
.mc-trail{position:relative;display:grid;gap:10px;padding-left:48px}
.mc-trail::before{content:"";position:absolute;left:19px;top:24px;bottom:24px;border-left:2px dashed var(--line)}
details.ph{position:relative;background:var(--surface-raised);border:1px solid var(--line);border-radius:16px;min-width:0;scroll-margin-top:72px}
details.ph[open]{border-color:color-mix(in srgb,var(--action) 40%,var(--line))}
.ph-h{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;gap:12px;align-items:center;padding:14px 16px;cursor:pointer;list-style:none;border-radius:16px}
.ph-h:focus-visible,.cp-h:focus-visible,.ph-check>summary:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.ph-node{position:absolute;left:-46px;top:12px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-sans);font-weight:600;font-size:15px;background:var(--surface);border:2px solid var(--line);color:var(--text-muted)}
details.ph.st-done .ph-node{background:var(--success);border-color:var(--success);color:var(--on-success)}
details.ph.st-doing .ph-node,details.ph.here .ph-node{border-color:var(--action);color:var(--action-text);box-shadow:0 0 0 4px color-mix(in srgb,var(--action) 18%,transparent)}
.ph-t{display:grid;gap:2px;min-width:0}
.ph-land{font-size:13px;color:var(--text-muted)}
.ph-name{font-family:var(--font-serif);font-weight:500;font-size:clamp(17px,2.4vw,21px);line-height:1.2;color:var(--text)}
.ph-meta,.cp-meta,.mc-m{display:flex;flex-wrap:wrap;gap:2px 12px}
.ph-meta{font-size:13px;color:var(--text-muted);margin-top:2px}
.ph-ch{color:var(--action-text);font-weight:700}
.ph-prog{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.ph-prog .bar{width:84px;height:6px;border-radius:999px;background:var(--surface-sunken);overflow:hidden}
.ph-prog .bar i{display:block;height:100%;background:var(--success)}
.chev{width:18px;height:18px;display:grid;place-items:center}
.chev::before{content:"";width:8px;height:8px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:translateY(-2px) rotate(45deg);transition:transform .18s ease}
details[open]>summary .chev::before{transform:translateY(2px) rotate(-135deg)}
.ph-body{padding:0 16px 16px;display:grid;gap:12px;min-width:0}
.ph-intro{color:var(--text-muted);font-size:14.5px;max-width:78ch}
.cp-list{display:grid;gap:8px;min-width:0}
details.cp{background:color-mix(in srgb,var(--surface-sunken) 55%,var(--surface-raised));border:1px solid var(--line);border-radius:12px;min-width:0;scroll-margin-top:72px}
.cp-from+details.cp{scroll-margin-top:100px}
details.cp[open]{background:var(--surface-raised);border-color:color-mix(in srgb,var(--text) 22%,var(--line))}
details.cp.changed{border-left:3px solid var(--action)}
details.cp.side{border-style:dashed;border-color:color-mix(in srgb,var(--success) 65%,var(--line));margin-left:22px}
.cp-h{display:grid;grid-template-columns:10px 28px minmax(0,1fr) auto 18px;gap:10px;align-items:center;padding:10px 12px;cursor:pointer;list-style:none;border-radius:12px}
.cp-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--line);box-sizing:border-box}
details.cp.st-done .cp-dot{background:var(--success);border-color:var(--success)}
details.cp.st-doing .cp-dot{border-color:var(--action)}
details.cp.here .cp-dot{background:var(--action);border-color:var(--action)}
.cp-k{font-family:var(--font-sans);font-weight:600;font-size:13px;color:var(--text-muted);text-align:center}
details.cp.side .cp-k{color:var(--success-text);font-weight:700;font-size:15px}
.cp-t{display:grid;gap:1px;min-width:0}
.cp-name{font-weight:700;font-size:15px;line-height:1.3}
.cp-opt{font-weight:400;font-size:13px;color:var(--text-muted);border:1px solid var(--line);border-radius:999px;padding:0 6px;margin-left:4px;white-space:nowrap}
.cp-meta{font-size:13px;color:var(--text-muted)}
.cp-badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center}
.cp-mark{font-size:13px;font-weight:700;color:var(--action-text)}
.pill.here{background:var(--action);color:var(--on-action)}
.cp-body{padding:2px 14px 14px;display:grid;gap:10px;min-width:0}
.cp-foot{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.cp-from{font-size:13px;color:var(--text-muted);margin:6px 0 0 4px}
.mc-sub{font-family:var(--font-serif);font-size:17px;font-weight:400;margin:4px 0 0;color:var(--text)}
.mc-m{font-size:13px;color:var(--text-muted);margin-top:2px;overflow-wrap:anywhere}
.mc-item.hit{border-color:var(--action);box-shadow:inset 0 0 0 1px var(--action)}
.ph-check{border-top:1px dashed var(--line);padding-top:10px}
.ph-check>summary{font-weight:700;font-size:14px;border-radius:8px}
.ph-check .mc-prose{margin-top:8px;font-size:14px}
.cp-body>.mc-prose,.ph-check .mc-prose,.mc-exs,.mc-ready,.mc-pit,.mc-note,.mc-upd{max-width:80ch}
@media (prefers-reduced-motion: reduce){.chev::before,summary::before{transition:none}}
@media (max-width:640px){
  .mc-tools{grid-template-columns:1fr}.mc-tools-r{justify-content:flex-start}
  .mc-trail{padding-left:36px}.mc-trail::before{left:13px}
  .ph-node{left:-36px;width:28px;height:28px;font-size:13px;top:14px}
  .ph-h{grid-template-columns:minmax(0,1fr) 18px;padding:12px}
  .ph-prog{grid-column:1/-1;grid-row:2}
  .ph-body{padding:0 12px 12px}
  .cp-h{grid-template-columns:10px 22px minmax(0,1fr) 18px;gap:8px;padding:10px}
  .cp-badges{grid-column:3/5;grid-row:2;justify-content:flex-start}
  details.cp.side{margin-left:10px}
}

.mc-who{margin:12px 0 0;max-width:64ch}  /* under the switch since batch 14 */
.mc-plan{gap:10px}
.mc-plan-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px 16px;flex-wrap:wrap}
.mc-plan-body{font-size:14px;color:var(--text-muted);display:grid;gap:2px;min-width:0;flex:1 1 260px}
.mc-for{display:flex;align-items:center;gap:8px;font-size:13px}
.mc-for select{font:inherit;font-size:14px;background:var(--surface-sunken);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 8px;max-width:60vw}
.mc-more{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px}
.mc-more>details{flex:1 1 100%}
.mc-more>details>summary{cursor:pointer;color:var(--text-muted);font-weight:600;width:max-content;max-width:100%}
.mc-more>details[open]>summary{color:var(--text)}
.mc-key-body{display:grid;gap:8px;margin-top:8px}
.mc-key-body p{margin:0;font-size:13px;max-width:80ch}
/* Topics to firm up (My course, supabase/firm_up.sql): a compact list under the plan. */
.mc-firm{gap:10px}
.mc-firm h2{font-size:20px;line-height:26px}
.mc-firm-n{font-size:13px}
.mc-firm-lead{margin:0;font-size:13px;max-width:80ch}
.mc-firm-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.mc-firm-i{display:grid;gap:4px;padding:10px 0;border-top:1px solid var(--line);min-width:0}
.mc-firm-i:first-child{border-top:0;padding-top:2px}
.mc-firm-t{font-weight:600;color:var(--text);overflow-wrap:anywhere}
.mc-firm-m{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:13px;color:var(--text-muted)}
.mc-firm-m a{color:var(--action-text)}
.mc-firm-go{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:14px;min-width:0}
.mc-firm-res{min-width:0;overflow-wrap:anywhere} .mc-firm-res small{color:var(--text-muted)}
.mc-firm-more{justify-self:start;font-size:14px}
@media (pointer:coarse){.mc-firm-go a.chip.link,.mc-firm-more{min-height:44px;display:inline-flex;align-items:center}}

/* ───────── Open-and-close sections, every page ─────────
   Closed sections take no space. Safari on iPhone kept the full height of a closed section's
   contents (an empty box), so the contents are removed outright rather than left to the browser. */
details:not([open])>:not(summary){display:none!important}
details:not([open])::details-content{display:none}
/* Drawn arrows instead of the built-in marker, which iPhones show as a blue emoji. */
summary{list-style:none}
summary::-webkit-details-marker{display:none}
summary:not(.ph-h):not(.cp-h){cursor:pointer}
summary:not(.ph-h):not(.cp-h)::before{content:"";display:inline-block;vertical-align:middle;width:6px;height:6px;margin:-3px 10px 0 2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);opacity:.75;transition:transform .18s ease;flex:none}
details[open]>summary:not(.ph-h):not(.cp-h)::before{transform:rotate(45deg)}
summary:focus-visible{outline:2px solid var(--action);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){summary::before{transition:none}}

/* The professor at the top of the Ascent page. */
.hdr-prof{display:grid;justify-items:end;gap:4px;text-align:right}
.prof-cta{display:inline-flex;align-items:center;gap:10px;background:var(--action);color:var(--on-action);font-weight:600;font-size:16px;text-decoration:none;border-radius:var(--radius-md);padding:12px 18px;min-height:var(--target)}
.prof-cta:hover{background:var(--action-hover)}
.prof-ic{width:18px;height:18px;border-radius:50% 50% 50% 4px;border:2.5px solid currentColor;box-sizing:border-box;position:relative}
.prof-ic::after{content:"";position:absolute;left:3px;right:3px;top:5px;height:2.5px;background:currentColor;border-radius:2px;box-shadow:0 4px 0 currentColor}
.hdr-prof .muted{font-size:13px}
@media (max-width:640px){.hdr-prof{justify-items:stretch;text-align:left;width:100%}.prof-cta{justify-content:center}}

/* Before a test, and after one that didn't pass. */
.qz-rules{margin:0;padding-left:20px;display:grid;gap:8px;font-size:14.5px;line-height:1.5}
.qz-rules li::marker{color:var(--action-text)}
.qz-tip{margin:14px 0 0;font-size:13.5px;color:var(--text-muted)}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--action-text);text-decoration:underline;cursor:pointer}
.qz-next{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-sunken);display:grid;gap:10px;font-size:14px}
.qz-cards{display:grid;gap:6px;justify-items:start} .qz-cards .qz-tip{margin:0}
.qz-next-b a.primary{display:inline-block;text-decoration:none;background:var(--action);color:var(--on-action);font-weight:600;border-radius:var(--radius-md);padding:11px 16px}

/* ───────── First-time set-up: the guided walk-through and the First steps list ───────── */
.ob{position:fixed;inset:0;z-index:60;background:color-mix(in srgb,var(--surface) 72%,transparent);backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px}
.ob[hidden]{display:none}
.ob-card{width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px 16px;display:grid;gap:12px;box-shadow:var(--shadow-sheet)}
.ob-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ob-count{font-size:13px;color:var(--text-muted)}
.ob-x{width:34px;height:34px;border-radius:10px;padding:0}
.ob-bar{height:6px;border-radius:999px;background:var(--surface-sunken);overflow:hidden}
.ob-bar i{display:block;height:100%;background:var(--action);transition:width .25s ease}
.ob-card h2{font-size:24px}
.ob-body{display:grid;gap:12px;font-size:15px;line-height:1.55}
.ob-body p{margin:0}
.ob-small{font-size:13px;color:var(--text-muted)}
.ob-loop{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.ob-loop span{position:relative;border:1.5px solid var(--action);color:var(--text);border-radius:999px;padding:3px 10px;font-size:13px;font-weight:700}
.ob-loop span.p{border-color:var(--success)}
.ob-loop span+span::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid var(--text-muted)}
.ob-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ob-form label,.ob-steps label{display:grid;gap:4px;font-size:13px;color:var(--text-muted)}
.ob-form .full{grid-column:1/-1}
.ob-form input,.ob-form textarea,.ob-steps input,.ob-url input{font:inherit;font-size:15px;color:var(--text);background:var(--surface-sunken);border:1px solid var(--line);border-radius:10px;padding:9px 10px;width:100%;box-sizing:border-box}
.ob-form textarea{resize:vertical}
.ob-check{display:flex!important;align-items:center;gap:8px;color:var(--text)!important;font-size:14px!important}
.ob-check input{width:auto}
.ob-steps,.ob-rules{margin:0;padding-left:20px;display:grid;gap:10px}
.ob-rules li::marker,.ob-steps li::marker{color:var(--action-text);font-weight:700}
.ob-url{display:grid;gap:4px}
.ob-row{display:flex;gap:8px;flex-wrap:wrap}
.ob-btn{display:inline-block;text-decoration:none;border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:10px 16px;color:var(--text);background:var(--surface-raised);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.ob-btn.primary{background:var(--action);border-color:var(--action);color:var(--on-action)}
.ob-btn:disabled{opacity:.6;cursor:default}
.ob-go{display:grid;gap:14px}
.ob-go > div{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:6px;background:var(--surface-sunken)}
.ob-go p{font-size:14px;color:var(--text-muted)}
.ob-go .ob-btn{justify-self:start}
.ob-state{font-size:13px;color:var(--success-text);font-weight:700}
.ob-state.warn{color:var(--danger)}
.ob-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.ob-sp{flex:1}
.ob-f .primary{border-radius:10px;padding:9px 16px;font-weight:700}
@media (max-width:560px){.ob{padding:0;place-items:stretch}.ob-card{border-radius:0;max-height:100dvh;min-height:100dvh;align-content:start}.ob-form{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.ob-bar i{transition:none}}
/* Setting up a course (decision 0102): taps for days and how you learn, the if–then plan, the placement's result */
.ob-q{display:grid;gap:6px}
.ob-ql{font-size:13px;color:var(--text-muted)}
.ob-taps{display:flex;flex-wrap:wrap;gap:6px}
button.chip.ob-tap{min-height:44px;padding:0 12px;font-size:14px;color:var(--text);border-color:var(--line-strong);background:var(--surface)}
button.chip.ob-tap[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:var(--on-action)}
.ob-cues{margin-top:-4px}
button.chip.ob-cue{min-height:36px;padding:0 10px;font-size:13px}
.ob-form select{font:inherit;font-size:15px;color:var(--text);background:var(--surface-sunken);border:1px solid var(--line);border-radius:10px;padding:9px 10px;width:100%;box-sizing:border-box}
.ob-plan{border-left:3px solid var(--action);padding:2px 0 2px 12px}
.ob-place{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px}
.ob-place li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.ob-place li:last-child{border-bottom:0}
.ob-place li > span:not(.tick){flex:1 1 200px}
.ob-place a{font-weight:700;font-size:14px}
.ob-ans summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--action-text);padding:4px 0}
.ob-ans .qz-rv{margin-top:8px}
.ob-small.warn{color:var(--danger)}
.qz-learn ul{margin:6px 0 0;padding-left:18px;display:grid;gap:4px;font-size:14px}
.qz-learn small{color:var(--text-muted)}
.td-when{margin:10px 0 0;font-size:14px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.td-when b{font-weight:600}
.ob-first .card-h h2{font-size:20px}
.ob-done{font-size:13px;color:var(--text-muted)}
.ob-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ob-list li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--line)}
.ob-list li:last-child{border-bottom:0}
.ob-list li b{display:block;font-size:14.5px}
.ob-list li span:not(.ob-tick):not(.ob-state){font-size:13px;color:var(--text-muted)}
.ob-tick{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);box-sizing:border-box}
.ob-list li.ok .ob-tick{background:var(--success);border-color:var(--success);position:relative}
.ob-list li.ok .ob-tick::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border-right:2px solid var(--surface);border-bottom:2px solid var(--surface);transform:rotate(45deg)}
.ob-list li.ok b{color:var(--text-muted);font-weight:600}
/* Skipped by choice ("I'll study without a professor for now"): a plain mark, not the done tick's green. */
.ob-list li.skip .ob-tick{background:var(--text-muted);border-color:var(--text-muted)}
.ob-acts{display:flex;flex-direction:column;align-items:flex-end;gap:2px} .ob-list li .ob-notnow{font-weight:600;color:var(--text-muted)}
.ob-list li a,.ob-list li .linkish{font-size:13.5px;font-weight:700;white-space:nowrap}
.ob-list-f{display:flex;gap:16px;flex-wrap:wrap;font-size:13px}

/* Admin page and Request access (decisions 0056, 0057) */
form.ci select,.ppl-row select,.req select{font:inherit;font-size:13px;background:var(--surface-sunken);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 8px;min-width:0}
form.ci select{width:100%}
form.ci .opt{opacity:.75}
form.ci .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ppl{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.ppl-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-sunken)}
.ppl-row .who{flex:1 1 260px;min-width:0}.ppl-row .acts{flex:0 1 auto}.ppl-row .who b{display:block;overflow-wrap:anywhere}.ppl-row .who small{display:block;color:var(--text-muted);font-size:13px;overflow-wrap:anywhere}
.ppl-row .acts,.req .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center;font-size:13px;color:var(--text-muted)}
.ppl-row .acts{min-width:0;max-width:100%} .ppl-row .acts select{min-width:0;max-width:100%;text-overflow:ellipsis}
.ppl-row.sus .who{opacity:.7}
.ppl-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ppl-filter input,.ppl-filter select{font:inherit;font-size:13px;background:var(--surface-sunken);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 8px;min-width:0}
.ppl-filter input{flex:1 1 200px}
@keyframes pplflash{0%{box-shadow:0 0 0 3px var(--action)}100%{box-shadow:0 0 0 3px transparent}}
.ppl-row.flash{animation:pplflash 2.2s ease-out}
.ppl-row[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.ppl-row.flash{animation:none;outline:2px solid var(--action)}}
.tellbox{display:flex;gap:4px;align-items:center;font-size:13px;color:var(--text-muted)}
.tag{font-size:13px;font-weight:700;border-radius:999px;padding:1px 8px;border:1px solid var(--line);color:var(--text-muted);white-space:nowrap}
.tag.owner{color:var(--action-text);border-color:var(--action)}.tag.warn{color:var(--danger);border-color:var(--danger)}
a.ghost-link{font-size:13px;border:1px solid var(--line);border-radius:8px;padding:4px 10px;color:var(--text);text-decoration:none}
button.ghost.armed{color:var(--danger);border-color:var(--danger)}
.req{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;gap:8px;background:var(--surface-sunken)}
.req .acts{justify-content:flex-start}.req .acts label{display:flex;gap:4px;align-items:center}
.req dl{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:3px 12px;font-size:13px}
.req dt{color:var(--text-muted)}.req dd{margin:0;overflow-wrap:anywhere}
.req-done{font-size:13px;display:grid;gap:4px}.req-done summary{cursor:pointer;color:var(--text-muted)}
.rec{display:grid;gap:6px;font-size:13px}.rec>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px}
.rec time{color:var(--text-muted);font-family:var(--font-sans);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:2px}
.mail-preview{white-space:pre-wrap;font:13px/1.5 var(--font-sans);background:var(--surface-sunken);border:1px solid var(--line);border-radius:10px;padding:10px;margin:0;max-height:320px;overflow:auto}
@media (max-width:560px){.nav-in nav a#navAdmin,.nav-in nav a#navThemes{display:none}}
@media (max-width:640px){.ppl-row .acts{justify-content:flex-start}.req dl{grid-template-columns:1fr}.req dt{margin-top:4px}}
/* The record names people; the email shows on hover, or on a tap (phones) */
.rec .who{border-bottom:1px dotted var(--text-muted);cursor:help}
.rec .who:focus-visible{outline:2px solid var(--action);outline-offset:2px;border-radius:3px}
.rec .who.show::after{content:" (" attr(data-email) ")";color:var(--text-muted);font-size:13px}
/* What's waiting for the admins: on the Admin link, and as a corner badge on the Sync button when that link is hidden */
.nbadge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:5px;border-radius:9px;background:var(--action);color:var(--on-action);font-size:13px;font-weight:700;line-height:1;vertical-align:1px;box-sizing:border-box}
.rec .mini{display:inline-block;width:18px;height:18px;border-radius:50%;object-fit:cover;vertical-align:-4px;margin-right:5px}
.rec .ini{display:inline-grid;place-items:center;background:var(--line);color:var(--text-muted);font-size:13px;font-weight:700;line-height:1}
.roles-help{font-size:13px}.roles-help summary{cursor:pointer;color:var(--text-muted)}.roles-help ul{margin:6px 0;padding-left:18px;display:grid;gap:3px}
/* The Sync panel: hangs from the Sync button on wider screens; on a phone it's a strip across the top bar that pushes
   the page down instead of covering it (20 Oct). */
.sync .sync-panel{position:absolute;right:0;top:44px}
/* The panel hangs from the slate bar but is an ordinary surface: its words take the page's colours, not the bar's. */
.nav .sync-panel{color:var(--text)} .nav .sync-panel :focus-visible{outline-color:var(--focus)!important} .nav .sync-panel button.ghost{color:var(--text);border-color:var(--line-strong)}
.nav > .sync-panel.docked{width:auto;max-width:1100px;margin:0 auto 10px;box-shadow:none}
/* Several climbers at one camp: one label, and the list it opens (20 Oct) */
.climber-group{cursor:pointer;outline:none}
.climber-group text{font-family:var(--font-sans);font-weight:700;font-size:13px;fill:var(--text);text-anchor:middle;paint-order:stroke;stroke:var(--surface);stroke-width:3.5px;stroke-linejoin:round;text-decoration:underline;text-decoration-style:dotted}
.climber-group:hover text,.climber-group:focus-visible text{text-decoration-style:solid}
@media (max-width:640px){.climber-group text{font-size:20px;stroke-width:5px}}
.climber-list{position:absolute;z-index:30;display:grid;gap:2px;min-width:170px;max-width:calc(100% - 16px);background:var(--surface-raised);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:var(--shadow-sheet)}
.climber-list button{display:flex;align-items:center;gap:8px;text-align:left;font:inherit;font-size:13px;background:none;border:0;border-radius:8px;padding:7px 8px;color:var(--text);cursor:pointer}
.climber-list button:hover,.climber-list button:focus-visible{background:var(--surface-sunken);outline:none}
.climber-list .dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c)}
.climber-list small{display:block;color:var(--text-muted);font-size:13px}

/* Your data (decision 0059): download, and deleting an account behind a closed section and a typed email. */
.data-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
details.danger-zone{border:1px solid color-mix(in srgb,var(--danger) 45%,var(--line));border-radius:12px;padding:10px 14px;width:100%;box-sizing:border-box}
details.danger-zone>summary{cursor:pointer;font-weight:700;color:var(--danger)}
details.danger-zone>summary:focus-visible{outline:2px solid var(--danger);outline-offset:2px}
.del-form{display:grid;gap:8px;justify-items:start;margin-top:10px}
.del-form label{display:grid;gap:4px;font-size:13px;color:var(--text-muted);width:min(100%,360px)}
.del-form input{font:inherit;font-size:14px;background:var(--surface-sunken);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 9px;width:100%;box-sizing:border-box}
.del-form input:focus-visible{outline:2px solid var(--danger);outline-offset:1px}
button.danger{font:700 15px/20px var(--font-sans);min-height:48px;background:var(--danger-soft);color:var(--danger);border:1.5px solid var(--danger);border-radius:var(--radius-md);padding:0 16px;cursor:pointer}
button.danger:hover{background:var(--surface-raised)}
button.danger:disabled{opacity:.5;cursor:default}

/* ───────── Today (decision 0062; batch 9, 24 Oct) ───────── */
.td-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start;margin-top:16px} .td-col{display:grid;gap:16px;min-width:0}
@media (max-width:860px){.td-grid{grid-template-columns:minmax(0,1fr)} .td-col{display:contents} .td-next{order:1} .td-map{order:2} .td-week{order:3}}
.td-banner{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin-top:16px;padding:12px 16px;border:1.5px solid var(--action);border-radius:var(--radius-md);background:color-mix(in srgb,var(--action) 7%,var(--surface-raised));color:var(--text);text-decoration:none}
.td-banner[hidden]{display:none} .td-banner .tic{color:var(--action-text);flex:0 0 auto} .td-banner span{color:var(--text-muted);font-size:14px;overflow-wrap:anywhere} .td-banner .go{margin-left:auto;color:var(--link);font-weight:700}
.td-next h2{font-size:26px;line-height:32px;margin:0} .td-sub{margin:0;font-size:14px;color:var(--text-muted)}
.td-note{margin:0;padding:8px 12px;border-left:3px solid var(--success);font-size:14px;line-height:21px;overflow-wrap:anywhere} .td-note b{display:block;font-size:13px;color:var(--success-text)}
.td-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.td-strip{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--text-muted)} .td-strip a{font-weight:700}
.td-hours{display:inline-flex;align-items:center;gap:10px} .td-hours .bar{width:90px;height:6px;border-radius:9px;background:var(--surface-sunken);overflow:hidden} .td-hours .bar i{display:block;height:100%;background:var(--success)}
.td-week h3{margin:0;font-size:20px} .td-week ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.td-week li a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:center;padding:8px;border-radius:var(--radius-md);color:var(--text);text-decoration:none} .td-week li a:hover{background:var(--surface-sunken)}
.td-week li b{font-size:15px;line-height:20px} .td-week li small{grid-column:2;font-size:13px;color:var(--text-muted)} .td-st{font-size:13px;font-weight:600;color:var(--text-muted)}
/* Recall cards (decision 0100, assets/recall.js): one card of a deck, with the cards still to come drawn as edges under
   it; the question, then How sure? (which shows the answer, why and an example), then Got it / Not quite. */
@media (max-width:860px){.td-grid #tdRecall{order:1}}
.rc{gap:12px}
.rc.rc-more{box-shadow:0 11px 0 -6px var(--surface-raised),0 11px 0 -5px var(--line);margin-bottom:6px}
.rc.rc-more2{box-shadow:0 11px 0 -6px var(--surface-raised),0 11px 0 -5px var(--line),0 21px 0 -12px var(--surface-raised),0 21px 0 -11px var(--line);margin-bottom:12px}
.rc-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rc-t,.rc-n{font:700 13px/16px var(--font-sans);color:var(--text-muted)} .rc-n{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-from{margin:-6px 0 0;font-size:13px;line-height:18px;color:var(--text-muted)} .rc-from b{font-weight:600;color:var(--text)}
.rc-q{margin:0;font-family:var(--font-serif);font-size:21px;line-height:29px;overflow-wrap:anywhere}
.rc-q:focus,.rc-a:focus,.rc h3:focus{outline:none}
.rc pre{background:var(--surface-sunken);border:1px solid var(--line);border-radius:10px;padding:10px 12px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.5;margin:8px 0 0;white-space:pre}
.rc-ask{display:grid;gap:8px}
.rc-l{margin:0;font-size:14px;line-height:20px;color:var(--text-muted)}
.rc-btns{display:flex;flex-wrap:wrap;gap:8px} .rc-btns button{flex:1 1 0;min-width:92px;min-height:48px;align-self:stretch}
.rc-a{padding:12px 14px;border-radius:var(--radius-md);border-left:3px solid var(--success);background:color-mix(in srgb,var(--success) 9%,var(--surface-raised))}
.rc-a b,.rc-why b,.rc-ex b{display:block;font:700 13px/16px var(--font-sans);color:var(--text-muted);margin-bottom:4px} .rc-a b{color:var(--success-text)}
.rc-a div{font-size:17px;line-height:25px;font-weight:600;overflow-wrap:anywhere}
.rc-why div,.rc-ex div{font-size:15px;line-height:23px;overflow-wrap:anywhere}
.rc-ex{padding:10px 12px;border:1px dashed var(--line-strong);border-radius:var(--radius-md)}
@keyframes rcIn{from{opacity:0;transform:translateY(4px)}}
.rc-a,.rc-why,.rc-ex{animation:rcIn .2s ease-out both} .rc-why{animation-delay:.05s} .rc-ex{animation-delay:.1s}
@media (prefers-reduced-motion:reduce){.rc-a,.rc-why,.rc-ex{animation:none}}
.rc h3{margin:0}
.rc-sum{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rc-sum li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:10px;align-items:start}
.rc-sum i{width:10px;height:10px;border-radius:50%;margin-top:5px;background:var(--success)} .rc-sum li.again i{background:transparent;box-shadow:inset 0 0 0 2px var(--text-muted)}
.rc-sum b{display:block;font-size:15px;line-height:20px;font-weight:600;overflow-wrap:anywhere} .rc-sum small{display:block;font-size:13px;line-height:18px;color:var(--text-muted)}
/* Review (review.html): the camps you've passed, by stage. */
.rv-lead{margin:4px 0 14px;max-width:var(--measure)}
.rv-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px} .rv-top h2{margin:0;font-size:24px;line-height:30px}
.rv-stage{display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.rv-sh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px} .rv-sh h3{margin:0;font-size:17px;line-height:22px}
.rv-camps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.rv-camps button{width:100%;display:grid;grid-template-columns:32px minmax(0,1fr) 16px;gap:12px;align-items:center;text-align:left;font:inherit;color:var(--text);background:none;border:1px solid transparent;border-radius:var(--radius-md);padding:8px;min-height:52px;cursor:pointer}
.rv-camps button:hover{background:var(--surface-sunken)}
.rv-num{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--font-sans);color:var(--success-text);box-shadow:inset 0 0 0 2px var(--success)}
.rv-num.retake{color:var(--text-muted);box-shadow:inset 0 0 0 2px var(--line-strong)}   /* a camp being retaken: not passed yet */
.rv-name b{display:block;font-size:15px;line-height:20px} .rv-name small{display:block;font-size:13px;line-height:18px;color:var(--text-muted)}
.rv-go{color:var(--text-muted);display:grid}
.rv-open{display:grid;gap:10px;max-width:760px} .rv-bar{display:flex}
.td-map{display:block;padding:0;overflow:hidden;position:relative;text-decoration:none} .td-map svg{display:block;width:100%;height:auto}
.td-open{position:absolute;right:10px;bottom:10px;background:var(--surface-raised);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700;color:var(--text)}

/* No stage bars on phones (batch 9): the folded stages show where you are. */
@media (max-width:560px){.lands{display:none}}

/* ───────── A course's home: Journey · Steps · Guide (decision 0069; batch 10) ───────── */
/* One switch with a picture for each part (batch 11), pinned under the top bar as you scroll; when the top bar
   slides away it moves up into its place. It no longer scrolls sideways, which put a small scroll bar beside it on
   Windows (bug B6). */
.subtabs{display:flex;gap:4px;margin:18px 0 6px;padding:4px;background:var(--surface-sunken);border-radius:var(--radius-md);position:sticky;top:calc(var(--bar-top) + 9px);z-index:15;box-shadow:0 0 0 8px var(--surface);transition:top .25s ease;overflow:hidden}
body.nav-hidden .subtabs{top:8px}
.subtabs a{flex:1 1 0;min-width:0;display:grid;justify-items:center;align-content:center;gap:2px;min-height:58px;border-radius:9px;font:700 14px/18px var(--font-sans);color:var(--text-muted);text-decoration:none;white-space:nowrap}
.subtabs a svg{width:20px;height:20px;display:block}
.subtabs a:hover{color:var(--text)} .subtabs a.on{background:var(--surface-raised);color:var(--text);box-shadow:0 1px 0 var(--line),0 0 0 1px var(--line)}
@media (prefers-reduced-motion:reduce){.subtabs{transition:none}}
.cview{display:grid;gap:20px;margin-top:16px} .cview[hidden]{display:none}
body.view-steps .hdr-intro{display:none!important}
@media (max-width:860px){body.view-steps .hdr-prof{display:none!important}}  /* a phone's Steps has the Professor card; a computer keeps the button in the course bar */
#vJourney #logCard{max-width:760px}
.clk-v{margin:0;font-size:15px}
.mc-written{margin:12px 0 0;font-size:14px}
.td-map .trail-done{transition:none}  /* Today's small map draws the walked route at once (it was unwinding from the full trail on load) */

/* ───────── batch 11 ───────── */
/* Fields: every drop-down on the site looks the same, a raised field with a chevron, so it reads as something to
   choose from, not as part of the card. */
select,.mod select,.authbar select,.mc-for select,form.ci select,.ppl-row select,.req select,.ppl-filter select{-webkit-appearance:none;appearance:none;font:600 14px/20px var(--font-sans);color:var(--text);background-color:var(--surface-raised);background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);min-height:36px;padding:0 32px 0 12px;max-width:100%;cursor:pointer}
.mc-for{flex-wrap:wrap} .mc-for select{max-width:min(60vw,100%)}  /* the larger field drops under its label on a narrow phone rather than widen the page */
select:hover{border-color:var(--text-muted)}
select:disabled{background-color:var(--surface-sunken);color:var(--text-muted);cursor:not-allowed}
/* Admin rows: View climb opens a page, so it's a link; Suspend and Withdraw invitation are in red. */
a.ghost-link{border:0;border-radius:0;padding:0 6px;min-height:36px;display:inline-flex;align-items:center;font:700 14px/20px var(--font-sans);color:var(--link);text-decoration:underline;text-underline-offset:3px}
button.ghost.risky{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 55%,var(--line-strong))}  /* not button.danger: that's the big delete-account button */
button.ghost.risky:hover,button.ghost.risky.armed{background:var(--danger-soft);border-color:var(--danger)}
/* The footer's two lines: How it works, then Privacy. */
.site-foot + .site-foot{margin-top:4px}
/* On a computer the top tabs sit in the middle of the bar: logo left, theme and picture right. */
@media (min-width:861px){.nav-in{position:relative} .nav-in nav{position:absolute;left:50%;transform:translateX(-50%);margin:0}
  .nav-in nav + :not([hidden]),.nav-in nav + [hidden] + *{margin-left:auto}}
/* Phones: the clock's pill gives way to the tab bar's button; its panel opens above the bar, in the middle. */
@media (max-width:860px){.trk{bottom:calc(88px + env(safe-area-inset-bottom,0px));left:16px;right:16px;justify-items:center;pointer-events:none} .trk>*{pointer-events:auto}
  .trk .trk-pill{display:none} .trk-panel input{font-size:16px}}

/* ───────── batch 12 ───────── */
/* Computers: no need to keep 96 px free under the footer; the clock sits at the right, the footer at the left. */
@media (min-width:861px){body{padding-bottom:32px}}
/* The course bar. Phones: the bar makes no box of its own, so the professor button sits under the intro and the switch
   stays pinned as you scroll. Computers: the switch stretches across with the professor button at its end, and the
   bar scrolls away with the page. */
@media (max-width:860px){.cbar{display:contents} #hdrProf{margin-top:14px}}  /* batch 14: on a phone the button sits under the tab's own lines */
@media (min-width:641px) and (max-width:860px){#hdrProf{justify-items:start;text-align:left}}
@media (min-width:861px){.cbar{display:flex;align-items:stretch;gap:12px;margin:18px 0 6px}
  .cbar .subtabs{order:1;flex:1 1 auto;margin:0;position:static;box-shadow:none}
  .cbar .hdr-prof{order:2;display:flex;align-items:stretch} .cbar .hdr-prof .muted{display:none}  /* its line becomes the button's tooltip */
  .cbar .prof-cta{padding:0 22px;white-space:nowrap}}
/* This week's pace, beside Check-ins / Sessions / Badges on a computer. */
.jrow{display:grid;gap:20px;align-items:start}
@media (min-width:861px){.jrow{grid-template-columns:minmax(0,760px) minmax(0,1fr)} .jrow #logCard{max-width:none}}
@media (max-width:860px){#paceCard{display:none!important}}
.pace-card h2{font-size:24px;margin:4px 0 0}
.pace-bar{height:8px;border-radius:4px;background:var(--surface-sunken);overflow:hidden;margin:12px 0 8px} .pace-bar i{display:block;height:100%;width:0;background:var(--success);border-radius:4px}
.pace-card p{margin:0;font-size:14px}
.pace-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:16px}
.pace-days .d{display:grid;grid-template-rows:72px auto;gap:4px;justify-items:stretch;text-align:center;font-size:13px;color:var(--text-muted)}
.pace-days .c{display:flex;align-items:flex-end} .pace-days .c i{display:block;width:100%;min-height:3px;border-radius:4px 4px 0 0;background:var(--surface-sunken)}
.pace-days .d.has .c i{background:var(--success)} .pace-days .d.today span{color:var(--text);font-weight:700} .pace-days .d.fut{opacity:.5}
/* Bug fixes (25 Oct, BUGS.md B1, B2, B5, B7, B8). */
/* B1: an iPhone zooms in on any field under 16 px and stays zoomed after sign-in, so fields are 16 px on phones and tablets. */
@media (max-width:860px),(pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,textarea{font-size:16px!important}
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]){min-height:48px} /* batch 16: as tall as the primary buttons, above the 44 px tap target */}
/* B2: a long unbroken word in the professor's text (a setting's name, a link) breaks inside its box instead of widening the page. */
.cp-body{grid-template-columns:minmax(0,1fr)}
.mc-note,.mc-plan-body,.mc-prose p,.mc-prose li,.mc-upd,.mc-ready-add,.offer-msg,#planOffer p,#offerChanges,#planSummary,#planDetail,.plannote,.plannote a{overflow-wrap:anywhere}
/* B5: tick boxes keep their size beside long text (they were squashed to a dot on My profile). */
input[type=checkbox],input[type=radio],form.ci input[type=checkbox],.ob-check input{flex:0 0 auto;width:20px;height:20px;min-width:20px;padding:0;margin:0}
/* B7: long words and code on The course page wrap at 320 px. */
.prose li,.prose p,code{overflow-wrap:anywhere}
/* B8: "Week 1 of 26" shrinks to fit when its box is narrow (four or five boxes across, 641 to 1060 px). */
.stats .stat:has(#week){container-type:inline-size}
#week{font-size:clamp(20px,calc(100cqi / 6.3),28px)}
@media (max-width:560px){#week{font-size:clamp(18px,calc(100cqi / 6.3),22px)}}
/* Batch 12's pace card keeps 280 px from 861 px up; the check-ins card gives way (it was squeezed to 49 px at 861). */
@media (min-width:861px){.jrow{grid-template-columns:minmax(0,760px) minmax(280px,1fr)}}
/* Batch 15 (25 Oct): the brand guidelines v1.0 kit. Words kept for screen readers where a drawing stands in for them. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Batch 16 (25 Oct): the sign-in code in Newsreader's figures, large and spaced, so it reads like the code in the email
   (and signing in loads no code font); 28 px also keeps iPhones from zooming. "Ahead of the plan" is good news, so it
   takes the teal pill with a tick, like "on plan": orange stays for "you're here" and the one thing to do. */
#syncCode{font-family:var(--font-serif);font-weight:560;font-size:28px!important;line-height:36px;letter-spacing:.18em;font-variant-numeric:tabular-nums;padding:8px 12px}
.pill.ahead{background:var(--success-soft);color:var(--text)}
/* Batch 17 (B2, 25 Oct): drawn icons in place of typed symbols (guidelines v1.1: ticks, play and stop are drawn, never characters).
   AA.ico(name) writes <span class="ic ic-name" aria-hidden="true">; the shape is a mask, so it takes the text colour. Lucide 1.54.0 (ISC) shapes;
   play, stop, star and dot filled, as the study clock's are. */
.ic{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.125em;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ic-play{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 4.5v15l12.5-7.5z'/%3E%3C/svg%3E")}
.ic-stop{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='5.5' y='5.5' width='13' height='13' rx='2'/%3E%3C/svg%3E")}
.ic-x{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E")}
.ic-video{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5'/%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3C/svg%3E")}
.ic-zoom-in{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35M11 8v6M8 11h6'/%3E%3C/svg%3E")}
.ic-zoom-out{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35M8 11h6'/%3E%3C/svg%3E")}
.ic-chev-l{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E")}
.ic-chev-r{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")}
.ic-reading{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E")}
.ic-course{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 4.5-9 4.5-9-4.5L12 3z'/%3E%3Cpath d='m3 12 9 4.5 9-4.5M3 16.5 12 21l9-4.5'/%3E%3C/svg%3E")}
.ic-star{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E")}
.ic-dot{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3C/svg%3E")}
.ic-half{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 3.5a8.5 8.5 0 0 0 0 17z'/%3E%3C/svg%3E")}
.ic-check{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
/* Batch 17: every button that is only an icon is 44 px to tap (guidelines v1.1), drawn at its size with an invisible margin. */
.nav-in .theme,.trk-pill .go,button.info{position:relative}
.nav-in .theme::after,.nav-in .avatar::before,.trk-pill .go::after,button.info::after{content:"";position:absolute;left:calc(50% - 22px);top:calc(50% - 22px);width:44px;height:44px}
.nav-in .brand{min-width:var(--target)}
button.ghost:has(> .ic:only-child)::after{left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px))}
/* Batch 17: titles in Newsreader's display cut (560), never its bold; code never under 13 px. */
.ph-name,.mc-plan-t{font-weight:560}
code{font-size:max(13px,.9em)}
@media (max-width:400px){.nav-in .theme{margin-right:2px}}  /* batch 17: room for both 44 px tap areas */
.tabbar .tb-clock .go .ic{width:20px;height:20px} .trk-pill .go .ic{width:15px;height:15px} .go .ic-play{margin-left:2px}  /* batch 17: the clock's drawn play and stop at the size the typed ones had */

/* Notifications on My profile (B3, decision 0072): the two switches, then the reminder's days and time. Day buttons
   are 44 px tall to tap (the 44 px rule), pressed ones filled. */
.pn-opts{display:grid;gap:10px}
.pn-check{display:flex;align-items:center;gap:10px;font-size:15px;min-height:44px;cursor:pointer}
.pn-check input{width:20px;height:20px;accent-color:var(--action);margin:0}
.pn-rem{border:1px solid var(--line);border-radius:12px;padding:10px 12px 12px;margin:2px 0 0}
.pn-rem legend{font-size:13px;font-weight:600;color:var(--text-muted);padding:0 6px}
.pn-days{display:flex;flex-wrap:wrap;gap:6px}
button.chip.pn-day{min-height:44px;min-width:52px;padding:0 10px;font-size:14px;color:var(--text);border-color:var(--line-strong);background:var(--surface)}
button.chip.pn-day[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:var(--on-action)}
.pn-at{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:15px}
.pn-at select{min-height:44px;font-size:16px}
/* Reminders that back off (11 Nov 2026): the pause, and the question a reminder asks after three went by unanswered */
.pn-rem{scroll-margin-top:80px} .pn-rem:focus{outline:none}
.pn-ask{margin:2px 0 12px;padding:10px 12px;border:1px solid var(--action);border-radius:10px;background:color-mix(in srgb,var(--action) 8%,var(--surface-raised));font-size:14px;max-width:74ch}
.pn-pause{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:15px}
button.chip.pn-wk{min-height:44px;padding:0 12px;font-size:14px;color:var(--text);border-color:var(--line-strong);background:var(--surface)}
/* Install help (B3, decision 0072): three drawn steps for an iPhone (rows on a phone, columns from 640 px), and a QR
   code on computers. The pictures take their colours from the theme; the highlight is the action colour. */
.ih-steps{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:12px}
.ih-steps li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:center}
.ih-pic{display:block}
.ih-shot{display:block;width:100%;height:auto;max-width:120px}
.ih-cap{font-size:15px;line-height:1.45}
.ih-n{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:8px;border-radius:50%;background:var(--action);color:var(--on-action);font-size:13px;font-weight:700;vertical-align:1px}
@media (min-width:640px){.ih-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.ih-steps li{grid-template-columns:none;align-items:start;align-content:start;gap:10px}.ih-shot{margin:0}}
.ih-scr{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.5}
.ih-line{fill:var(--line)} .ih-text{fill:var(--text-muted)} .ih-pill{fill:var(--surface-sunken)}
.ih-sheet{fill:var(--surface-raised);stroke:var(--line);stroke-width:1} .ih-dim{fill:var(--text);opacity:.12}
.ih-soft{fill:color-mix(in srgb,var(--action) 14%,transparent)}
.ih-ico{fill:none;stroke:var(--text);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .ih-dots{fill:var(--text)}
.ih-hit{fill:none;stroke:var(--action);stroke-width:2.5} .ih-on{fill:var(--action)} .ih-knob{fill:var(--cream)}
.ih-qr{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:14px}
.ih-qr img{display:block;width:132px;height:132px;border-radius:var(--radius-sm)}
.ih-qr p{margin:0;font-size:14px;max-width:34ch}
/* Open sign-up (decision 0076): two one-tap questions, the offer and the bot check in the sign-in panel. The panel
   widens a little while it shows them, since Cloudflare's check needs 300 px. Every choice is a 44 px tap. */
.sync-panel.joining{width:min(360px,calc(100vw - 32px))}
.jn{display:grid;gap:12px}
.jn-q{border:0;margin:0;padding:0;min-width:0;display:grid;gap:6px}
.jn-q legend{font:700 14px/1.35 var(--font-sans);color:var(--text);padding:0;margin:0 0 6px}
.jn-chips{display:flex;flex-wrap:wrap;gap:6px}
.jn-chip{position:relative;display:inline-flex}
.jn-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.jn-chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:var(--radius-round);background:var(--surface);color:var(--text);font:600 14px/1.2 var(--font-sans);cursor:pointer}
.jn-chip input:checked + span{background:var(--action);border-color:var(--action);color:var(--on-action)}
.jn-chip input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}
.jn-other{display:grid;gap:4px;color:var(--text-muted)}
.jn-other[hidden]{display:none}
.jn-adult{display:flex;align-items:center;gap:10px;min-height:44px;font:600 14px/1.35 var(--font-sans);color:var(--text);cursor:pointer}
.jn-adult input{width:22px;height:22px;margin:0;accent-color:var(--action);flex:none}
.jn-offer{margin:0;padding:10px 12px;border-radius:10px;background:var(--surface-sunken);color:var(--text);font-size:13.5px;line-height:1.45}
.jn-check{min-height:65px}

/* A course page whose course is still loading, isn't there or isn't open to you (C3 batch 2): only the header and one
   card show (assets/course.js). */
body.course-gone .wrap > :not(header):not(#courseGone) { display: none !important; }

/* Today with two or more courses (C3 batch 2): a chip per course, and each card names its course. */
.td-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.td-pick[hidden]{display:none}
.td-pick button{font:inherit;font-size:14px;font-weight:600;min-height:44px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface-raised);color:var(--text);cursor:pointer}
.td-pick button.on{background:var(--action);border-color:var(--action);color:var(--on-action)}
.td-course{display:inline-block;font-size:14px;font-weight:700;color:var(--action-text);text-decoration:none}
.td-course:hover{text-decoration:underline}
/* Coming back after a break (assets/comeback.js): Welcome back leads Today, one small step beside a way to re-plan. */
.td-back{margin-top:16px;border-color:color-mix(in srgb,var(--success) 45%,var(--line));background:color-mix(in srgb,var(--success) 6%,var(--surface-raised))}
.td-back h2{margin:0;font-size:24px;line-height:30px} .td-back-top{display:grid;gap:4px}
.td-back-parts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 24px}
@media (max-width:860px){.td-back-parts{grid-template-columns:minmax(0,1fr)}}
.td-back-part{display:grid;gap:8px;align-content:start;padding-top:12px;border-top:1px solid var(--line);min-width:0}
.td-back-part h3{margin:0;font-size:16px;line-height:22px} .td-back-part p{margin:0;font-size:15px;line-height:22px;overflow-wrap:anywhere}
.td-back-part .td-sub{font-size:14px}
.td-back-was{display:block;color:var(--text-muted)}
.td-back-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.td-back-list li{display:grid;gap:2px;min-width:0} .td-back-list li > b{font-size:15px;overflow-wrap:anywhere}
.td-back-list .td-acts{gap:4px 16px} .td-back-list button.linkish{font-size:14px;min-height:44px}
.ob-finish{margin:0}

/* My courses (C3 batch 2) */
.mcs-list{display:grid;gap:16px;margin-top:16px}
.mcs-course{display:grid;gap:10px} .mcs-course h2{margin:0}
.mcs-bar{height:6px;border-radius:9px;background:var(--surface-sunken);overflow:hidden} .mcs-bar i{display:block;height:100%;background:var(--success)}
.mcs-h{margin:12px 0 0;font-size:20px}
.mcs-set summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--action-text);min-height:44px;display:flex;align-items:center}
.mcs-set form{display:grid;gap:12px;padding-top:4px} .mcs-set label{display:grid;gap:6px;font-size:14px;font-weight:600}
.mcs-set input,.mcs-set textarea{font:inherit;font-weight:400;max-width:100%}

/* Date boxes on iPhones (31 Oct, Paul): Safari gives a date input its own width, wider than its column on My profile.
   Drawn like the other boxes, it fills its column and no more. */
input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%}
input[type=date]::-webkit-date-and-time-value{text-align:left;min-height:1.4em}
/* The Build page (decision 0107, batch 1): the queue, a new build's form, alerts and past builds. */
.bq-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}
#bqMain{grid-template-columns:minmax(0,1fr)} #bqMain>.card{grid-template-columns:minmax(0,1fr)}   /* a wide report or table scrolls in its own box; it never widens the card */
.bq-list{display:grid;grid-template-columns:minmax(0,1fr)}
.bq-row{padding:12px 0;border-top:1px solid var(--line);min-width:0} .bq-row:first-child{border-top:0;padding-top:0}
.bq-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap} .bq-head .td-acts{margin:0} .bq-head .pill{margin-left:4px;vertical-align:1px}
.bq-sub{font-size:13px;margin-top:2px;overflow-wrap:anywhere}
.bq-line{font-size:14px;margin-top:6px;overflow-wrap:anywhere} .bq-err{font-size:14px;margin-top:6px;color:var(--danger);overflow-wrap:anywhere}
.bq-panels{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:10px}
.bq-det{min-width:0;border:1px solid var(--line);border-radius:var(--radius-md)} .bq-det>summary{cursor:pointer;padding:10px 12px;min-height:44px;box-sizing:border-box;display:flex;align-items:center;font-size:14px;font-weight:700}
.bq-det-body{padding:0 12px 12px;font-size:14px;min-width:0}
.bq-h3{font-size:16px;margin:12px 0 6px} .bq-inner{margin-top:10px} .bq-inner>summary{font-weight:400}
.bq-camps{margin:0;padding-left:22px;display:grid;gap:6px} .bq-covers{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.bq-id{font-size:13px;border:1px solid var(--line);border-radius:6px;padding:0 5px;color:var(--text-muted)}
.bq-items{width:100%;border-collapse:collapse;font-size:13px} .bq-items th,.bq-items td{text-align:left;vertical-align:top;padding:6px 8px;border-top:1px solid var(--line)} .bq-items thead th{border-top:0}
.bq-lines{margin:0;padding-left:20px;display:grid;gap:4px;overflow-wrap:anywhere}
.bq-report{max-width:none} .bq-report>p,.bq-report>ul,.bq-report>h2,.bq-report>h3,.bq-report>h4{max-width:78ch}
.bq-report table{border-collapse:collapse;font-size:13px;line-height:18px} .bq-report th,.bq-report td{text-align:left;vertical-align:top;padding:4px 8px;border-top:1px solid var(--line);overflow-wrap:break-word}
.bq-report th{text-transform:none;letter-spacing:0;font-size:12px;line-height:16px;min-width:7ch}
.bq-report h2{font-size:18px;margin-top:20px;padding-top:12px;overflow-wrap:anywhere} .bq-report h2:first-child{font-size:20px;margin-top:4px} .bq-report h3,.bq-report h4{font-size:15px;margin-top:16px}
.bq-report p,.bq-report li{font-family:var(--font-sans);font-size:14px;line-height:21px;overflow-wrap:anywhere} .bq-report code{overflow-wrap:anywhere}
.bq-size{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bq-fs{border:1px solid var(--line);border-radius:var(--radius-md);padding:8px 10px 10px;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
.bq-fs legend{font-size:13px;font-weight:700;padding:0 4px;color:var(--text)}
form.ci .bq-fs label,form.ci .bq-size label{min-width:0}
.bq-presets{grid-column:1/3;display:grid;gap:8px}
form.ci label.bq-preset{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1.5px solid var(--line);border-radius:var(--radius-md);cursor:pointer;font-size:14px;color:var(--text)}
.bq-preset:has(input:checked){border-color:var(--action)} form.ci .bq-preset input{width:auto;flex:0 0 auto;margin-top:3px} .bq-preset>span{display:grid;gap:2px}
.bq-about{font-size:13px}
.bq-opts{display:grid;gap:2px} .bq-opts label.th-check,.bq-when label.th-check{display:flex;gap:10px;align-items:center;min-height:44px;font-size:14px;color:var(--text);cursor:pointer}
.bq-when{display:grid} form.ci .bq-opts input[type=checkbox],form.ci .bq-when input[type=radio]{width:auto;flex:0 0 auto} form.ci .bq-when input[type=datetime-local]{width:auto;min-width:0;flex:0 1 220px;font:inherit;font-size:13px;background:var(--surface-sunken);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.bq-check{font-size:14px;padding:10px 12px;border-radius:var(--radius-md);background:var(--surface-sunken)} .bq-check p{margin:0} .bq-check ul{margin:4px 0 0;padding-left:20px}
.bq-stop{color:var(--danger)} .bq-form input[type=radio],.bq-form input[type=checkbox]{accent-color:var(--action)}
.bq-brief summary{cursor:pointer;font-size:14px;min-height:44px;display:flex;align-items:center} .bq-brief pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;background:var(--surface-sunken);padding:10px;border-radius:8px;margin:0}
@media (max-width:560px){.bq-fs{grid-template-columns:1fr}.bq-presets{grid-column:1}form.ci.bq-form label,form.ci.bq-form .bq-size{grid-column:1/3}}
.bq-change{margin-top:12px;padding-top:4px;border-top:1px solid var(--line)} .bq-change h3{margin-top:8px} .bq-change .td-acts{margin:0}   /* Ask for changes (decision 0115) */
@media (max-width:560px){form.ci.bq-change label{grid-column:1/3}}
/* The help card and the course agreement (decision 0112, assets/helpcard.js) */
.hc{display:grid;gap:12px}
.hc-row h3{margin:0 0 4px;font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.hc-row p{margin:0}
.hc-row ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.hc-row li{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;min-width:0}
.hc-em{border-left:4px solid var(--danger);padding-left:10px}
.hc-num{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--link)}
.hc-num.big{font-size:26px;line-height:1.1}
.hc-alt{font-size:13px}
.hc-t{min-width:0;overflow-wrap:anywhere}
.hc-how{color:var(--text-muted);font-size:13px}
.hc-pick,.agree-where{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:14px}
.hc-pick select,.agree-where select{min-width:0;max-width:100%}
/* 6 Nov (Paul's iPhone): the agreement is longer than a phone's screen, and 100vh there includes the space under the
   browser's bars, so its top and bottom were cut off. The whole dialog scrolls instead, inside the visible screen. */
#agree,#helpDlg{display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.agree-box{width:min(620px,100%);max-height:none;overflow:visible;margin:0 auto}
.agree-box{gap:8px;padding:14px 16px}
.agree-box h2{margin:2px 0 0;font-size:20px;line-height:1.2}
.hc-foot{margin:28px 0 0;text-align:center;font-size:13px}
.hc-foot .linkish{font-size:13px;color:var(--text-muted);text-decoration:underline;text-underline-offset:2px}
.hc-foot .linkish:hover{color:var(--text)}
.agree-box p{margin:0}
.agree-box .agree-list{gap:6px;font-size:15px;line-height:1.4}
@media (max-width:480px){.agree-box{font-size:14.5px}.agree-box .agree-list{font-size:14.5px}}
.agree-box:focus{outline:none}
.agree-list{margin:0;padding-left:20px;display:grid;gap:8px}
.agree-card{border:1px solid var(--line);border-radius:var(--radius-md);padding:8px 12px;display:grid;gap:10px;background:var(--surface)}
.agree-card summary{cursor:pointer;font-weight:600}
.agree-tick{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.agree-tick input{margin-top:4px;flex:none}

/* Publishing a course (decision 0119): the Draft / Published card on a course's tabs, for an owner or its creator. */
.pub-card .pub-form{display:grid;gap:12px;margin-top:4px}
.pub-who{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.pub-who legend{font-size:13px;color:var(--text-muted);padding:0;margin-bottom:8px}
.pub-who label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--radius-md);cursor:pointer;font-size:14px;color:var(--text)}
.pub-who label:has(input:checked){border-color:var(--action)}
.pub-who input{width:20px;height:20px;flex:0 0 auto;margin:0;accent-color:var(--action)}
.pub-who label>span{display:grid;gap:2px} .pub-who .muted{font-size:13px}
.pub-more{margin-top:4px} .pub-more>summary{cursor:pointer;font-size:14px;min-height:44px;display:flex;align-items:center}
.pub-more[open]>summary{margin-bottom:4px} .pub-more>p{margin:12px 0 8px}

/* A course's Review card on its Guide (decision 0120): the latest review, the bar as advice, the pack for the reviewers. */
.tag.ok{color:var(--success-text);border-color:var(--success)}
.rv-total{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:15px}
.rv-total b{font-family:var(--font-serif);font-size:30px;line-height:1.1;color:var(--text)}
.rv-bar,.rv-meta,.rv-who,.rv-help{margin:0;font-size:13.5px}
.rv-table th[scope=row]{text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:600;color:var(--text);background:none}
.rv-table td{white-space:nowrap;text-align:right} .rv-table thead th:not(:first-child){text-align:right}
.rv-table .rv-sum th,.rv-table .rv-sum td{border-top:1.5px solid var(--line-strong)}
.rv-note{font-weight:400;font-size:13px;color:var(--text-muted);margin-top:2px}
.rv-summary{margin:0}
.rv-recs h3{font-size:15px;margin:8px 0 4px} .rv-recs ul{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14px}
.rv-fix{color:var(--text-muted)}
.rv-more>summary,.rv-add>summary{cursor:pointer;font-size:14px;min-height:44px;display:flex;align-items:center}
.rv-more ul{margin:0 0 4px;padding-left:20px;font-size:14px}
.rv-form{display:grid;gap:8px} .rv-form label{font-size:13px;color:var(--text-muted)}
.rv-form textarea{font:13px/1.45 var(--mono);width:100%;min-width:0;background:var(--surface-sunken);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px}
.rv-form p{margin:0;font-size:13px}
.pub-card .pub-review{margin:0;font-size:14px;color:var(--text-muted)} .pub-card .pub-review a{white-space:nowrap}
.rv-table tr:last-child th{border-bottom:0}

/* Explore, the course catalogue (decision 0121): search, categories and a card per course. */
.ex-lead{margin:8px 0 0;color:var(--text-muted);max-width:60ch}
.ex-tools{display:grid;gap:4px;margin-top:20px}
.ex-tools .ex-cats{margin-top:8px}
.ex-cats .ex-n{font-weight:400;opacity:.75;margin-left:2px}
.ex-shown{margin:-8px 0 0;font-size:14px;color:var(--text-muted)} .ex-shown:empty{margin:-20px 0 0}
.ex-list{display:grid;gap:16px;margin:0 0 32px;grid-template-columns:minmax(0,1fr)} .ex-course{align-content:start}
@media (min-width:861px){.ex-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ex-course h2{margin:0;font-size:24px;line-height:28px} .ex-course h2 a{color:var(--text);text-decoration:none} .ex-course h2 a:hover{text-decoration:underline;text-underline-offset:3px}
.ex-summary{margin:0;max-width:60ch} .ex-note{margin:0;font-size:14px;color:var(--text-muted)}
.ex-course .td-acts{margin-top:4px}
.mcs-more{margin:4px 0 0;font-size:14px}
.pub-list{display:grid;gap:10px} .pub-list label{display:grid;gap:4px;font-size:13px;color:var(--text-muted)}
.pub-list textarea{font:inherit;font-size:14px;width:100%;min-width:0;background:var(--surface-sunken);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px;resize:vertical}
.pub-list select{max-width:100%}
.pub-theme{display:grid;gap:4px;font-size:13px;color:var(--text-muted)} .pub-theme select{max-width:100%;min-height:44px} .pub-card .pub-theme-now{margin:4px 0 0;font-size:14px}
.cat-list{display:grid;gap:8px} .cat-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.cat-row:first-child{border-top:0} .cat-row input{font:inherit;font-size:14px;min-width:0;width:100%;background:transparent;color:var(--text);border:1px solid transparent;border-radius:6px;padding:4px 6px}
.cat-row input:hover,.cat-row input:focus{border-color:var(--line)} .cat-row.off input{color:var(--text-muted)}
.cat-n{font-size:12px;grid-column:1;padding-left:7px} .cat-acts{grid-column:2;grid-row:1 / span 2;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.cat-acts button{padding:6px 10px;min-width:36px} .cat-add{display:flex;gap:8px;margin-top:4px}
.cat-add input{flex:1;min-width:0;font:inherit;font-size:14px;background:var(--surface-sunken);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
/* My profile: the professor's notes (decision 0126) */
.pn-list{list-style:none;margin:10px 0 0;padding:0}
.pn-list li{padding:10px 0;border-top:1px solid var(--line)}
.pn-list li:first-child{border-top:0;padding-top:0}
.pn-text{overflow-wrap:anywhere}
.pn-meta{font-size:13px;color:var(--text-muted);margin-top:2px}
.pn-old .pn-text{color:var(--text-muted)}
.pn-del{font-size:14px;min-height:36px}
@media (pointer:coarse){.pn-del{min-height:44px}}
/* Connect your AI (decision 0126): the connected AIs and the way to connect one (assets/connect.js) */
.cn{display:grid;gap:12px}
.cn-list{list-style:none;margin:0;padding:0}
.cn-list li{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.cn-list li:first-child{border-top:0;padding-top:0}
.cn-list li>div{display:grid;gap:2px;min-width:0}
.cn-st{font-size:14px;color:var(--text-muted)} .cn-st.ok{color:var(--success-text);font-weight:600} .cn-st.warn{color:var(--danger)}
.cn-q{margin:0;font-weight:600}
.cn-free{margin:0;font-size:14px;font-weight:600;color:var(--success-text)}
.cn>.linkish{justify-self:start} .cn>p{margin:0} .cn>p:empty{display:none}
.cn-how{display:grid;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-sunken)}
.cn-how .ob-url input{background:var(--surface)}
.cn-test{display:grid;gap:8px;padding:12px 14px;border-left:4px solid var(--action);border-radius:var(--radius-sm);background:var(--surface-sunken)}
.cn-test p{margin:0}
.cn-quote{font-weight:600;overflow-wrap:anywhere}
.cn-ok{margin:0;padding:12px 14px;border-left:4px solid var(--success-text);border-radius:var(--radius-sm);background:var(--surface-sunken)}
/* Ask my professor (decision 0126 point 6, assets/connect.js): which professor to ask, in the set-up's dialog look; the
   button is for your own course only (Steps when viewing someone, the Guide unless it's yours). */
.askp-card{width:min(460px,100%)}
.askp-card h2:focus{outline:none}   /* focused so a screen reader starts there; not a control */
.askp-list{display:grid;gap:8px} .askp-list>*{display:flex;justify-content:center;align-items:center;text-align:center;min-height:44px;width:100%;box-sizing:border-box;text-decoration:none}
body.ro .askp-step, body:not(.own-course) .cp-foot .askp-step, body.no-professor .askp-step{display:none}
/* On a phone a short choice, so a sheet from the bottom rather than the set-up's full screen. */
@media (max-width:560px){.askp{place-items:end stretch}.askp .ob-card{min-height:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding-bottom:max(16px,env(safe-area-inset-bottom))}}

/* Sign in with Google (decision 0129): Google draws its own button in .gsi-btn; the space is kept so the panel doesn't jump. */
.gsi-wrap{min-height:44px;display:flex;justify-content:center;align-items:center;margin:2px 0}
/* color-scheme: Google draws the button in an iframe, and in dark mode the browser paints an iframe whose colour scheme
   differs from the page's an opaque white (Paul, 10 Nov 16:09: "looks awful in dark mode"); light here keeps it see-through. */
.gsi-btn{width:100%;display:flex;justify-content:center;color-scheme:light}
.gsi-or{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-muted);margin:2px 0 4px}
.gsi-or::before,.gsi-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* Start free for signed-out visitors (Paul, 10 Nov 16:09: no sign-up on How it works; "not well designed from a ux and
   conversion perspective"): a button under the opening of How it works and Explore, a closing card on How it works, and
   on phones a slim bar above the tab bar. Each opens the sign-in panel ([data-start], assets/cloud.js). The fuller
   redesign follows the go-live. */
body.signed-in .only-out,body:not(.signed-in) .only-in{display:none!important}
.start-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:16px 0 4px}
.start-cta .sc-note{font-size:14px;color:var(--text-muted)}
.start-end h2{margin-top:0}
.start-bar{display:none}
@media (max-width:860px){
  .start-bar{display:flex;position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom,0px));z-index:24;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;background:var(--surface);border-top:1px solid var(--line)}
  .start-bar .sb-t{font-size:14px;color:var(--text-muted)}
  .start-bar button{min-height:40px;padding-top:8px;padding-bottom:8px}
  body:not(.signed-in):has(.start-bar){padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))}
}
/* The sign-in panel's heading (decision 0128, said plainly: Paul, 10 Nov 16:09). */
.sync-panel .sp-h{font-family:var(--font-serif);font-size:21px;line-height:26px;font-weight:560;margin:0;color:var(--text)}
.sync-panel .sp-lead{margin:0 0 4px;font-size:14px;color:var(--text-muted)}