/* The Agent's Ascent — shared styles.
   Layout: one 1100px column. Dark-first "night expedition" palette with a daytime light theme.
   Tokens first; everything else derives from them. */
:root{
  --bg:#0f1526; --surface:#171f36; --surface2:#1f2a47; --fg:#f1ecdf; --muted:#9aa3bf; --line:#2b3758;
  --accent:#f0a04b; --accent-ink:#1b1206; --done:#5fd3c4; --warn:#f27d7d; --skip:#8f9ab8;
  --sky1:#0f1a35; --sky2:#2d2449; --mtn3:#263355; --mtn2:#1c2644; --mtn1:#131b31; --snow:#e8ecf5; --bot:#f1ecdf; --star-op:.85;
  --display:"Bricolage Grotesque","Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif;
  --body:"Nunito Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f3f5fa; --surface:#ffffff; --surface2:#e9edf6; --fg:#1b2340; --muted:#5b6687; --line:#d6dced;
    --accent:#d97f1f; --accent-ink:#fff7ec; --done:#1f9e8f; --warn:#c84b4b; --skip:#7a85a6;
    --sky1:#bcd7f5; --sky2:#f6e6d2; --mtn3:#a6b9da; --mtn2:#8197bf; --mtn1:#5f75a1; --snow:#ffffff; --bot:#1b2340; --star-op:0;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#f3f5fa; --surface:#ffffff; --surface2:#e9edf6; --fg:#1b2340; --muted:#5b6687; --line:#d6dced;
  --accent:#d97f1f; --accent-ink:#fff7ec; --done:#1f9e8f; --warn:#c84b4b; --skip:#7a85a6;
  --sky1:#bcd7f5; --sky2:#f6e6d2; --mtn3:#a6b9da; --mtn2:#8197bf; --mtn1:#5f75a1; --snow:#ffffff; --bot:#1b2340; --star-op:0;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.55;padding-inline:16px;padding-block:0 96px}
a{color:var(--accent)}
.wrap{max-width:1100px;margin:0 auto;display:grid;gap:20px}
h1,h2,h3,h4{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.15}
h1{font-size:clamp(28px,4vw,42px);font-weight:800;letter-spacing:-.01em}
h2{font-size:22px;font-weight:700}
h3{font-size:16px;font-weight:700}
h4{font-size:14px;font-weight:700}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
code{font-family:var(--mono);font-size:.9em;background:var(--surface2);padding:1px 5px;border-radius:5px}
pre{background:var(--surface2);padding:12px;border-radius:10px;overflow-x:auto}
pre code{background:none;padding:0}

/* Nav */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);margin-inline:-16px;padding-inline:16px}
.nav-in{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:14px;height:54px}
.nav-in .brand{font-family:var(--display);font-weight:800;text-decoration:none;color:var(--fg);display:flex;align-items:center;gap:8px;white-space:nowrap}
.nav-in .brand svg{width:22px;height:22px}
.nav-in nav{display:flex;gap:4px;margin-left:auto}
.nav-in nav a{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:8px;font-weight:600;font-size:14px}
.nav-in nav a:hover,.nav-in nav a.on{color:var(--fg);background:var(--surface2)}
.nav-in .theme{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:8px;width:34px;height:34px;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:34px;height:34px;border-radius:50%;border:2px solid var(--line);background:var(--surface2);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}
.nav-in .avatar.on,.nav-in .avatar:hover{border-color:var(--accent)}
.nav-in .avatar:not(.has){background:var(--accent)} .nav-in .avatar:not(.has) svg .bot-body{fill:var(--accent)} .nav-in .avatar:not(.has) svg .bot-eye{fill:var(--accent-ink)}
@media (max-width:560px){.nav-in{gap:8px}.nav-in nav a{padding:6px 6px;font-size:13px}.nav-in nav{gap:0}}

/* Cards & buttons */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:12px;min-width:0}
.card-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
button.primary{font:inherit;font-weight:700;background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:9px 14px;cursor:pointer}
button.primary:disabled{opacity:.5;cursor:default}
button.ghost{font:inherit;font-size:12px;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:4px 10px;cursor:pointer}
button.ghost:hover{color:var(--fg)}
input:focus,select:focus,button:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.pill{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:2px 10px;background:var(--surface2);color:var(--fg)}
.pill.ok{background:var(--done);color:#07201c}
.pill.behind{background:var(--warn);color:#2b0a0a}
.pill.ahead{background:var(--accent);color:var(--accent-ink)}
.empty{color:var(--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(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--surface2)}
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 p.lead{font-size:17px;color:var(--muted);max-width:56ch;margin:10px 0 0}
.hero .art{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--sky2)}
.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(--fg);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;min-width:0}
.tile:hover{border-color:var(--accent)}
.tile .big{font-family:var(--display);font-size:20px;font-weight:800}
.tile p{margin:0;color:var(--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:12px;background:var(--surface2)}
.step b{font-family:var(--display);font-size:15px}
.step span{font-size:13px;color:var(--muted)}
.thisweek{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline}
.thisweek .wk{font-family:var(--display);font-size:34px;font-weight:800;line-height:1}

/* 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(--muted);text-decoration:none;padding:3px 8px;border-radius:6px;border-left:2px solid transparent}
.toc a:hover{color:var(--fg);background:var(--surface2)}
.toc a.on{color:var(--fg);border-left-color:var(--accent)}
@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{font-size:19px;margin-top:28px}
.prose h4{font-size:16px;margin-top:20px;color:var(--accent)}
.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:12.5px}
.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(--accent);background:var(--surface2);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);color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:8px 12px 8px 8px;box-shadow:0 10px 30px rgba(0,0,0,.35);font-family:var(--body);cursor:pointer}
.trk-pill .go{width:34px;height:34px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:var(--accent);color:var(--accent-ink);font-size:14px}
.trk-pill.running .go{background:var(--warn);color:#2b0a0a}
.trk-pill .t{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;min-width:66px}
.trk-pill .lbl{font-size:12px;color:var(--muted)}
.trk-panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;width:min(320px,calc(100vw - 32px));box-shadow:0 10px 30px rgba(0,0,0,.35);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(--surface2);color:var(--fg);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(--muted)}
.trk-panel .row b{color:var(--fg);font-variant-numeric:tabular-nums}
.toastg{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--surface);color:var(--fg);border:1px solid var(--accent);border-radius:12px;padding:8px 14px;font-weight:700;font-family:var(--display);box-shadow:0 10px 30px rgba(0,0,0,.35);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:16px;overflow:hidden;background:var(--sky2);border:1px solid var(--line)}
.scene svg{display:block;width:100%;height:auto;max-width:100%}
.scene canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sky-a{stop-color:var(--sky1)} .sky-b{stop-color:var(--sky2)}
.mtn1{fill:var(--mtn1)} .mtn2{fill:var(--mtn2)} .mtn3{fill:var(--mtn3)} .snow{fill:var(--snow)}
.star{fill:#fff;opacity:var(--star-op)}
.trail{fill:none;stroke:var(--snow);stroke-opacity:.35;stroke-width:5;stroke-linecap:round;stroke-dasharray:1 12}
.trail-done{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1)}
.camp{cursor:pointer}
.camp circle.ring{fill:var(--surface);stroke:var(--snow);stroke-opacity:.55;stroke-width:2.5}
.camp.done circle.ring{fill:var(--done);stroke:var(--done)}
.camp.skip circle.ring{fill:var(--surface2);stroke:var(--skip);stroke-dasharray:3 3}
.camp.doing circle.ring{stroke:var(--accent);stroke-width:3}
.camp.doing circle.pulse{fill:none;stroke:var(--accent);stroke-width:2;animation:pulse 1.8s ease-out infinite}
.camp text{font-family:var(--mono);font-size:10px;fill:var(--fg);pointer-events:none;text-anchor:middle;dominant-baseline:middle}
.camp.done text{fill:var(--accent-ink)}
.camp.done.cap text{fill:#1b1206}
.camp.cap circle.ring{stroke:var(--accent);stroke-width:3}
/* Your plan on the mountain: badges on changed camps, tents for side camps. */
.pm{pointer-events:none}
.pm circle{fill:var(--accent);stroke:var(--bg);stroke-width:1.6}
.pm .pm-dot{fill:var(--accent-ink);stroke:none}
.pm text{font-family:var(--body);font-weight:800;font-size:10px;fill:var(--accent-ink);text-anchor:middle;dominant-baseline:central}
.sm{cursor:pointer;outline:none}
.sm .spur{stroke:var(--done);stroke-width:1.6;stroke-dasharray:2 3;opacity:.85;pointer-events:none}
.sm .hit{fill:transparent}
.sm .tent{fill:var(--surface);stroke:var(--done);stroke-width:2;stroke-linejoin:round}
.sm .door{fill:var(--done)}
.sm.doing .tent{stroke:var(--accent)} .sm.doing .door{fill:var(--accent)}
.sm.done .tent{fill:var(--done)} .sm.done .door{fill:var(--bg)}
.sm:hover .tent,.sm:focus-visible .tent{stroke-width:3}
.plan-legend{font-size:12.5px;color:var(--muted);margin-top:4px}
.plan-legend .lg-badge{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:11px;line-height:1;vertical-align:-2px}
.plan-legend .lg-badge i{width:5px;height:5px;border-radius:50%;background:var(--accent-ink)}
.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(--done);vertical-align:-1px}
.camp.cap.done circle.ring{fill:var(--accent);stroke:var(--accent)}
.camp .flag{fill:var(--accent)} .camp .pole{stroke:var(--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(--bot)} .bot-eye{fill:var(--bg)} .bot-pack{fill:var(--accent)} .bot-ant{stroke:var(--bot);stroke-width:2} .bot-tip{fill:var(--accent)}
.bot-shadow{fill:#000;opacity:.25}
.leg{fill:var(--bot);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)}}
.pad{fill:var(--surface2);stroke:var(--line)}
.rocket-body{fill:var(--snow)} .rocket-nose{fill:var(--accent)} .rocket-fin{fill:var(--accent)} .rocket-win{fill:var(--sky1)}
.flame{fill:var(--accent);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}
@keyframes flicker{from{transform:scaleY(1)}to{transform:scaleY(1.5)}}
.toast{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:var(--surface);color:var(--fg);border:1px solid var(--accent);border-radius:12px;padding:10px 16px;font-family:var(--display);font-weight:700;font-size:16px;box-shadow:0 10px 30px rgba(0,0,0,.35);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)}
.scene-caption{position:absolute;left:12px;bottom:10px;max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);font-size:11px;color:var(--fg);opacity:.75;background:color-mix(in srgb,var(--bg) 60%,transparent);padding:3px 8px;border-radius:6px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:4px;min-width:0}
.stat .v{font-family:var(--display);font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.stat .l{font-size:12px;color:var(--muted)}
.xpbar{height:8px;border-radius:999px;background:var(--surface2);overflow:hidden;margin-top:4px}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--done));width:0;transition:width .8s ease}
.lands{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}
.land{display:grid;gap:4px;min-width:0}
.land b{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.land .bar{height:6px;border-radius:999px;background:var(--surface2);overflow:hidden}
.land .bar i{display:block;height:100%;width:0;background:var(--done);transition:width .6s}
@media (max-width:720px){.lands{grid-template-columns:repeat(3,1fr)}}
.cols{display:grid;grid-template-columns:3fr 2fr;gap:20px;align-items:start}
@media (max-width:860px){.cols{grid-template-columns:1fr}}
.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(--muted);font-size:12px}
.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(--accent)} .mod.hi{background:var(--surface2)}
.mod .n{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right}
.mod .name{font-weight:600;min-width:0}
.mod .name small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.mod .name .cap-tag{font-family:var(--mono);font-size:10px;color:var(--accent);margin-left:6px}
.mod select{font:inherit;font-size:13px;background:var(--surface2);color:var(--fg);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:12px;background:var(--surface2);color:var(--fg);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(--mono);font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:2px 8px;line-height:1.5}
button.chip{cursor:pointer;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
button.chip:hover,button.chip[aria-expanded="true"]{background:color-mix(in srgb,var(--accent) 14%,var(--surface2))}
.chip.dim{opacity:.7}
.mod .vids{font-weight:400;font-size:12px;color:var(--muted);margin-top:6px;padding:6px 8px;border-left:2px solid var(--accent);line-height:1.45}
.mod .saved{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--done);opacity:0;transition:opacity .3s;vertical-align:middle}
.mod .saved.show{opacity:1} .mod .saved.warn{color:var(--warn)}
.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);font-size:13px;color:var(--muted)}
.authbar.view{border-color:var(--accent);color:var(--fg)} .authbar.warn{border-color:var(--warn);color:var(--fg)}
.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(--surface2);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.card.offer{border-color:var(--accent);margin-top:14px}
.planbar{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;padding:10px 12px;border:1px solid var(--accent);border-radius:12px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));margin-bottom:12px;font-size:14px}
.chip.depth{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)} .chip.depth.light{background:var(--skip);border-color:var(--skip);color:#fff} .chip.depth.skip{background:transparent;color:var(--skip);text-decoration:line-through}
.mod .plannote{font-weight:400;font-size:12px;color:var(--fg);margin-top:6px;padding:6px 8px;border-left:2px solid var(--done);line-height:1.45}
button.chip.qbtn{color:var(--fg);border-color:var(--line)} button.chip.qbtn.test{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
button.chip.qbtn:disabled{opacity:.55;cursor:default}
.chip.score{color:#07201c;background:var(--done);border-color:var(--done)} .chip.score.fail{color:#2b0a0a;background:var(--warn);border-color:var(--warn)} .chip.score.prof{color:var(--muted);background:var(--surface2);border-color:var(--line)}
.mod select option:disabled{color:var(--muted)}
/* Quiz modal */
.qz{position:fixed;inset:0;z-index:40;background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(6px);display:grid;place-items:center;padding:12px}
.qz-box{width:min(680px,100%);max-height:calc(100vh - 24px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:10px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.qz-h{display:flex;justify-content:space-between;align-items:start;gap:10px}
.qz-timer{height:6px;border-radius:999px;background:var(--surface2);overflow:hidden} .qz-timer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--done),var(--accent));transition:width .25s linear} .qz-timer.low i{background:var(--warn)}
.qz-meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.qz-body{display:grid;gap:10px;min-height:120px}
.qz-q{font-size:16px;font-weight:600;line-height:1.45} .qz-q pre{background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;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(--surface2);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:inherit;font-size:14px;line-height:1.4;background:var(--surface2);color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}
.qz-opt b{font-family:var(--mono);font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:7px;padding:2px 0;text-align:center}
.qz-opt:hover{border-color:var(--accent)} .qz-opt.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface2))} .qz-opt.sel b{color:var(--accent);border-color:var(--accent)}
.qz-opt.right{border-color:var(--done)} .qz-opt.wrong{border-color:var(--warn)}
.qz-f{display:flex;justify-content:space-between;gap:8px}
.qz-score{font-family:var(--display);font-size:44px;font-weight:800;line-height:1} .qz-score small{font-size:16px;color:var(--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(--done)} .qz-rv .it.bad{border-color:var(--warn)} .qz-rv .ex{color:var(--muted);margin-top:4px}
.qz-missed{display:flex;flex-wrap:wrap;gap:6px}
.mod .plannote a{color:var(--accent)}
.mod .spine{color:var(--accent);font-size:10px;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(--body);font-weight:700;font-size:12px;fill:var(--fg);text-anchor:middle;paint-order:stroke;stroke:var(--bg);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:12px;color:var(--muted);min-width:0}
form.ci input,form.ci textarea{font:inherit;font-size:13px;background:var(--surface2);color:var(--fg);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(--surface2);font-size:13px}
.ci-item .d{font-family:var(--mono);font-size:11px;color:var(--muted)}
.ci-item .meta{color:var(--muted);font-size:12px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.badge{display:grid;grid-template-columns:60px 1fr;gap:10px;align-items:center;padding:8px 10px 8px 6px;border-radius:12px;border:1px solid var(--line);background:var(--surface2);min-width:0;position:relative}
.badge svg{width:60px;height:60px;display:block}
.badge:not(.on) svg .enamel,.badge:not(.on) svg .rim,.badge:not(.on) svg .glyph,.badge:not(.on) svg .ribbon{filter:grayscale(1)} .badge:not(.on) svg{opacity:.5}
.badge:not(.on) b,.badge:not(.on) small{opacity:.6}
.badge.on{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent),0 8px 24px -14px var(--accent)}
.badge.on svg{filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.badge b{font-size:12px;display:block;line-height:1.2} .badge small{font-size:11px;color:var(--muted);display:block;margin-top:2px}
.badge .lock{position:absolute;right:8px;top:8px;font-size:11px;color:var(--muted)} .badge:not(.on) b{padding-right:18px}
.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(--surface2);display:grid;place-items:center}
.photo-prev.big{width:120px;height:120px;border:3px solid var(--accent)}
.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:700;background:var(--accent);color:var(--accent-ink);border-radius:10px;padding:9px 14px;cursor:pointer;font-size:14px}
button.info{width:18px;height:18px;border-radius:50%;border:1px solid var(--accent);background:transparent;color:var(--accent);font:700 11px/1 var(--mono);cursor:pointer;padding:0;display:inline-grid;place-items:center}
button.info[aria-expanded="true"]{background:var(--accent);color:var(--accent-ink)}
.prof-help{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--fg)}
.prov-row{display:flex;flex-wrap:wrap;gap:6px} .prov-row .prov{font-size:12px;padding:6px 10px} .prov-row .prov.on{border-color:var(--accent);color:var(--fg)}
.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(--bot);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(--accent)}
.crop-zoom{display:grid;gap:4px;font-size:12px;color:var(--muted)} .crop-zoom input{width:100%;accent-color:var(--accent)}

.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(--surface2)}
.sess-item .d{font-family:var(--mono);font-size:11px;color:var(--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:12px;width:100%;min-height:90px;background:var(--surface2);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px}
footer{color:var(--muted);font-size:12px;padding-top:12px;border-top:1px solid var(--line)}
@media (prefers-reduced-motion: reduce){
  .trail-done,.xpbar i,.land .bar i,#rocket,.toast,.toastg{transition:none}
  .walking .leg,.walking .bot-head,.camp.doing circle.pulse,#rocket.launch .flame{animation: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(--done) 60%,var(--line));background:color-mix(in srgb,var(--done) 5%,transparent);margin-left:14px}
.mod.side .n{color:var(--done);font-weight:700;font-size:14px}
.mod.side .side-tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--done);margin-right:6px}
.pc-tag{display:inline-block;font-size:12px;font-weight:700;color:var(--done);margin-right:6px}
.mod.side.done{opacity:.75}

/* ───────── My course ───────── */
.mc-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--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(--surface2);border:1px solid var(--line)}
.mc-legend .lg.pro{background:color-mix(in srgb,var(--accent) 22%,var(--surface2));border-color:var(--accent)}
.mc-legend .lg.drop{background:linear-gradient(to bottom right,transparent 45%,var(--warn) 46% 54%,transparent 55%),var(--surface2)}
.mc-legend .lg.side{border:1px dashed var(--done);background:color-mix(in srgb,var(--done) 10%,transparent)}
.pc-tag.pro{color:var(--accent)} .pc-tag.drop{color:var(--warn)} .pc-tag.side{color:var(--done)}
.mc-plan-t{font-family:var(--display);font-weight:700;font-size:17px;color:var(--fg)}
.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)}
.mc-seg button{font:inherit;font-size:13px;font-weight:600;background:transparent;color:var(--muted);border:0;padding:7px 12px;cursor:pointer}
.mc-seg button.on{background:var(--accent);color:var(--accent-ink)}
.chip.ok{color:#07201c;background:var(--done);border-color:var(--done)} .chip.doing{color:var(--accent);border-color:var(--accent)}
a.chip.link{text-decoration:none;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.mc-note{font-size:14px;padding:8px 12px;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 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(--accent);border-radius:10px;color:var(--fg)}
.mc-prose{font-size:14.5px;line-height:1.55;min-width:0}
.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(--accent);margin:10px 0 4px}
.mc-prose .tbl{margin:6px 0 10px} .mc-prose table{font-size:13px}
.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(--surface2);border:1px solid transparent;min-width:0}
.mc-item>div{min-width:0}
.mc-item.pro{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface2))}
.mc-item.drop{opacity:.62} .mc-item.drop .mc-t{text-decoration:line-through}
.mc-ico{font-family:var(--mono);color:var(--muted);text-align:center;line-height:1.6}
.mc-t{font-weight:700;overflow-wrap:anywhere} .mc-t a{color:var(--fg);text-decoration-color:color-mix(in srgb,var(--accent) 60%,transparent);text-underline-offset:3px}
.mc-t a:hover{color:var(--accent)}
.mc-w{font-size:13px;margin-top:3px}
.mc-x{font-size:12px;color:var(--muted);margin-top:3px;font-style:italic}
.mc-id{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);opacity:.7;margin-top:3px;overflow-wrap:anywhere}
.mc-chk{color:var(--done)} .mc-chk.part{color:var(--muted)}
.mc-dropped summary{font-size:12px;color:var(--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(--accent)} .mc-ex.drop{opacity:.6;text-decoration:line-through}
.mc-ready{font-size:14px;padding:10px 12px;border-radius:10px;background:var(--surface2)}
.mc-ready-add{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.mc-pit{font-size:13px;color:var(--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:12px}
.conn-url input{font-family:var(--mono);font-size:12px;width:100%;background:var(--surface2);color:var(--fg);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(--fg);font-size:14px}
.conn-body .prov-steps{margin:0}
button.linkish{font:inherit;background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;cursor:pointer}
.offer-msg{margin:0 0 8px;padding:8px 12px;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);font-style:italic}
.mc-proposal{display:block;text-decoration:none;color:var(--fg);font-size:14px;padding:10px 12px;border:1px solid var(--accent);border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.mc-proposal b{color:var(--accent)}

/* ───────── 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);border:1px solid var(--line);border-radius:12px;padding:0 12px;min-width:0;color:var(--muted);font-size:18px}
.mc-search:focus-within{border-color:var(--accent)}
.mc-search input{flex:1;min-width:0;font:inherit;font-size:15px;background:transparent;border:0;color:var(--fg);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(--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);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(--accent) 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(--accent);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(--display);font-weight:800;font-size:15px;background:var(--bg);border:2px solid var(--line);color:var(--muted)}
details.ph.st-done .ph-node{background:var(--done);border-color:var(--done);color:#07201c}
details.ph.st-doing .ph-node,details.ph.here .ph-node{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.ph-t{display:grid;gap:2px;min-width:0}
.ph-land{font-size:13px;color:var(--muted)}
.ph-name{font-family:var(--display);font-weight:700;font-size:clamp(17px,2.4vw,21px);line-height:1.2;color:var(--fg)}
.ph-meta,.cp-meta,.mc-m{display:flex;flex-wrap:wrap;gap:2px 12px}
.ph-meta{font-size:13px;color:var(--muted);margin-top:2px}
.ph-ch{color:var(--accent);font-weight:700}
.ph-prog{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.ph-prog .bar{width:84px;height:6px;border-radius:999px;background:var(--surface2);overflow:hidden}
.ph-prog .bar i{display:block;height:100%;background:var(--done)}
.chev{width:18px;height:18px;display:grid;place-items:center}
.chev::before{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--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(--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(--surface2) 55%,var(--surface));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);border-color:color-mix(in srgb,var(--fg) 22%,var(--line))}
details.cp.changed{border-left:3px solid var(--accent)}
details.cp.side{border-style:dashed;border-color:color-mix(in srgb,var(--done) 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(--done);border-color:var(--done)}
details.cp.st-doing .cp-dot{border-color:var(--accent)}
details.cp.here .cp-dot{background:var(--accent);border-color:var(--accent)}
.cp-k{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:center}
details.cp.side .cp-k{color:var(--done);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:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0 6px;margin-left:4px;white-space:nowrap}
.cp-meta{font-size:12.5px;color:var(--muted)}
.cp-badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center}
.cp-mark{font-size:12px;font-weight:700;color:var(--accent)}
.pill.here{background:var(--accent);color:var(--accent-ink)}
.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:12.5px;color:var(--muted);margin:6px 0 0 4px}
.mc-sub{font-family:var(--display);font-size:15px;font-weight:700;margin:4px 0 0;color:var(--fg)}
.mc-m{font-size:12px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.mc-item.hit{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.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:4px 0 0;max-width:64ch}
.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(--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(--surface2);color:var(--fg);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(--muted);font-weight:600;width:max-content;max-width:100%}
.mc-more>details[open]>summary{color:var(--fg)}
.mc-key-body{display:grid;gap:8px;margin-top:8px}
.mc-key-body p{margin:0;font-size:13px;max-width:80ch}

/* ───────── 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(--accent);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(--accent);color:var(--accent-ink);font-weight:800;font-size:16px;text-decoration:none;border-radius:12px;padding:12px 18px;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 30%,transparent)}
.prof-cta:hover{filter:brightness(1.06)} .prof-cta:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.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:12.5px}
@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(--accent)}
.qz-tip{margin:14px 0 0;font-size:13.5px;color:var(--muted)}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
.qz-next{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);display:grid;gap:10px;font-size:14px}
.qz-next-b a.primary{display:inline-block;text-decoration:none;background:var(--accent);color:var(--accent-ink);font-weight:700;border-radius:10px;padding:9px 14px}

/* ───────── 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(--bg) 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);border:1px solid var(--line);border-radius:18px;padding:18px 20px 16px;display:grid;gap:12px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.ob-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ob-count{font-size:13px;color:var(--muted)}
.ob-x{width:34px;height:34px;border-radius:10px;padding:0}
.ob-bar{height:6px;border-radius:999px;background:var(--surface2);overflow:hidden}
.ob-bar i{display:block;height:100%;background:var(--accent);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(--muted)}
.ob-loop{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.ob-loop span{position:relative;border:1.5px solid var(--accent);color:var(--fg);border-radius:999px;padding:3px 10px;font-size:13px;font-weight:700}
.ob-loop span.p{border-color:var(--done)}
.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(--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(--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(--fg);background:var(--surface2);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(--fg)!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(--accent);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);border-radius:10px;padding:9px 14px;color:var(--fg);background:var(--surface2);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.ob-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.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(--surface2)}
.ob-go p{font-size:14px;color:var(--muted)}
.ob-go .ob-btn{justify-self:start}
.ob-state{font-size:13px;color:var(--done);font-weight:700}
.ob-state.warn{color:var(--warn)}
.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}}
.ob-first .card-h h2{font-size:20px}
.ob-done{font-size:13px;color:var(--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(--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(--done);border-color:var(--done);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(--bg);border-bottom:2px solid var(--bg);transform:rotate(45deg)}
.ob-list li.ok b{color:var(--muted);font-weight:600}
.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}