/* Flight deck: the learner side of Lunar Academy. Builds on /site.css (tokens, type, buttons, frames).
   Same world: warm studio grey and floor for reading, charcoal for missions, belt-button red only on things you press.
   Locked content is drawn in the same shapes, just faded, so the whole journey is always visible. */

/* ---------- top bar ----------
   Translucent charcoal that frosts whatever scrolls under it; solid charcoal where backdrop-filter isn't supported.
   Bone type on dark: the current tab is a bone pill, the fuel pill is outlined. --bar-h is the bar's height
   (app.js keeps it exact); heroes slide under the bar by that much and anchors stop below it. */
:root{--bar-h:64px}
@media (max-width:860px){:root{--bar-h:102px}}
html:has(.deck-top){scroll-padding-top:calc(var(--bar-h) + 16px)}
@media (max-width:860px){html:has(body[data-page=briefing]){scroll-padding-top:16px}} /* the briefing's bar doesn't stick on a phone */
.deck-top{position:sticky;top:0;z-index:20;background:rgba(25,26,23,.8);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 1px 0 rgba(236,228,216,.08);color:var(--bone);--focus:var(--bone)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.deck-top{background:var(--char)}}
.deck-top .wrap{max-width:none;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.deck-top .nav{padding-block:12px;gap:20px}
.deck-top .wordmark{color:var(--bone)}
.deck-top .links{display:flex;gap:4px;margin-left:12px;font:500 15px var(--f-body)}
.deck-top .links a{flex:none;white-space:nowrap;padding:0 12px;border-radius:999px;min-height:40px;display:inline-flex;align-items:center;text-decoration:none;color:var(--bone)}
.deck-top .links a:hover{background:rgba(236,228,216,.12)}
.deck-top .links a[aria-current="page"]{background:var(--bone);color:var(--ink)}
.deck-top .who{margin-left:auto;display:flex;align-items:center;gap:12px;font:500 13px var(--f-mono);letter-spacing:.04em}
.fuel-pill{display:inline-flex;align-items:center;gap:8px;padding:0 12px;min-height:34px;border-radius:999px;background:rgba(236,228,216,.06);box-shadow:inset 0 0 0 1px rgba(236,228,216,.4);color:var(--bone);font:500 13px var(--f-mono);white-space:nowrap}
.fuel-pill:hover{background:rgba(236,228,216,.12)}
.fuel-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red-hi);box-shadow:0 0 0 3px rgba(196,45,53,.25)}
.linkish{background:none;border:0;padding:0 4px;min-height:40px;font:500 14px var(--f-body);color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.deck-top .linkish{color:var(--bone)}
@media (max-width:860px){
  .deck-top .nav{flex-wrap:wrap;row-gap:4px}
  .deck-top .links{order:3;width:100%;margin:0 -12px;overflow-x:auto}
  .deck-top .who .linkish{display:none}
}
@media (max-width:420px){.deck-top .wordmark{font-size:20px}.deck-top .links{gap:2px;margin:0 -10px;font-size:14px}.deck-top .links a{padding:0 10px}}
@media (max-width:520px){.fuel-pill .pill-rank{display:none}}

/* ---------- page skeleton ---------- */
.deck-main{padding-block:clamp(28px,4vw,48px) clamp(64px,8vw,104px);display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)}
.panel{background:var(--panel);border-radius:14px;padding:clamp(18px,2.4vw,28px);box-shadow:var(--lift);min-width:0}
.dark .panel,.panel.dark{background:var(--char-2);color:var(--bone);box-shadow:inset 0 0 0 1px var(--char-line)}
.panel h2{font-size:clamp(24px,2.4vw,32px)}
.panel h3{font-size:20px;line-height:1.2}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.grid2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(16px,2vw,28px);align-items:start}
@media (max-width:900px){.grid2{grid-template-columns:minmax(0,1fr)}}
.muted{color:var(--ink-2)}
.dark .muted{color:var(--bone-2)}
.label{font:500 11px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.dark .label{color:var(--bone-2)}
.loading{font:500 13px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:40px 0}
.err{background:#f3dcd9;color:#5c0e13;border-radius:10px;padding:14px 16px;font-size:15px}

.page-title{font-size:clamp(34px,4.2vw,56px);line-height:1;margin:6px 0 12px}
/* The plain topic under a themed name: exam domain, task statement or "practice exam". */
.topic{font:500 15px/1.4 var(--f-body);color:var(--ink-2);text-wrap:pretty}
.page-title + .topic{margin-top:-6px}
.topic + .lede2{margin-top:14px}
.dark .topic,.check-card .topic,.check-card .hint{color:var(--bone-2)}
.history .sfx{font-weight:400;color:var(--ink-2)}
.deck-col{display:flex;flex-direction:column;gap:20px}
.gloss{margin:0;display:flex;flex-direction:column}
.gloss dt{padding-top:10px;border-top:1px solid var(--rule)}
.gloss dd{margin:2px 0 10px;font-size:15px}
.grow{flex:1;min-width:0}

/* ---------- sets: each deck page opens on a photo set, not a band of flat colour ----------
   The photo stands at full height on the right and its backdrop carries on to the left, under the same softbox
   light, where the words sit. The sticky bar floats over the top of the set. A night set is charcoal with bone
   type; .studio is the warm sweep with ink type. On a phone the photo sits on top and the words rise out of its fade.
   Each page names its photo in its HTML and frames it below. */
.set{position:relative;isolation:isolate;overflow:clip;display:grid;align-content:center;
  min-height:calc(var(--bar-h) + clamp(320px,30vw,440px));margin-top:calc(-1 * var(--bar-h));padding-top:var(--bar-h);
  background:var(--grain-lt),var(--night);color:var(--bone);--ink-2:var(--bone-2);--focus:var(--bone)}
.set.tall{min-height:calc(var(--bar-h) + clamp(420px,38vw,560px))}
.set.studio{background:var(--grain),var(--sweep);color:var(--ink);--ink-2:var(--ink-on-studio);--focus:var(--ink)}
.set-img{position:absolute;z-index:-1;top:0;right:0;width:var(--photo-w,min(62%,1040px));height:100%!important;max-width:none;object-fit:cover;object-position:var(--at,60% 40%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42%);mask-image:linear-gradient(90deg,transparent,#000 42%)}
.set > .wrap{width:100%;padding-block:clamp(36px,5vw,64px)}
.set > .wrap > *{max-width:var(--copy-w,min(600px,46vw))}
.set h1{font-size:clamp(40px,4.8vw,68px);line-height:.98;letter-spacing:-.03em}
.set .lede2{font-size:clamp(17px,1.4vw,19px);max-width:52ch;margin-top:16px}
/* phones: the photo starts just under the bar (the helmets touch the top of their frames) */
@media (max-width:860px){
  .set{align-content:end;min-height:0}
  .set-img{top:var(--bar-h);width:100%;height:var(--photo-h,260px)!important;object-position:var(--at-phone,var(--at,60% 30%));
    -webkit-mask-image:linear-gradient(#000 58%,transparent);mask-image:linear-gradient(#000 58%,transparent)}
  .set > .wrap{padding-block:calc(var(--photo-h,260px) - 56px) 40px}
  .set > .wrap > *{max-width:none}
}
[data-page=deck] .set{--at:62% 40%;--at-phone:56% 0;--photo-h:320px}
[data-page=mission] .set{--photo-w:min(58%,980px);--at:30% 50%;--at-phone:40% 0;--photo-h:300px}
[data-page=sim] .set{--photo-w:min(52%,880px);--at:58% 45%;--at-phone:62% 0;--photo-h:280px}
[data-page=settings] .set{--photo-w:min(44%,620px);--at:50% 28%;--at-phone:50% 6%;--photo-h:300px}

/* ---------- flight deck hero: the rank readout is an instrument ---------- */
.deck-hero h1{font-size:clamp(44px,5.4vw,78px);line-height:.95;letter-spacing:-.035em}
.rank{display:flex;align-items:center;gap:16px;margin-top:clamp(22px,2.4vw,30px)}
.rank .label{font:500 14px/1.3 var(--f-body);letter-spacing:0;text-transform:none}
.rank .card-title{font-size:24px;margin-top:2px}
.insignia{width:54px;height:54px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(236,228,216,.55);color:var(--bone);display:grid;place-items:center}
.insignia svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.deck-hero .hint{margin-top:10px;font-size:14px}
/* stats: one strip divided by hairlines */
.stats{display:flex;margin-top:clamp(24px,2.8vw,34px)}
.stat{display:flex;flex-direction:column;gap:2px;padding:2px clamp(16px,2vw,26px);border-left:1px solid rgba(236,228,216,.2)}
.stat:first-child{padding-left:0;border-left:0}
.stat b{font:600 clamp(30px,3vw,40px)/1.05 var(--f-display);letter-spacing:-.02em;color:var(--bone)}
.stat span{font:400 14px/1.3 var(--f-body);color:var(--ink-2)}

/* gauges: a track with a fill; on a set, a thin line with a glowing red tip */
.gauge{height:10px;border-radius:999px;background:rgba(13,14,11,.14);overflow:hidden;margin-top:8px}
.gauge i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ink-2),var(--red));border-radius:inherit;transition:width 1.2s var(--ease,ease)}
.dark .gauge{background:rgba(236,228,216,.14)}
.dark .gauge i{background:linear-gradient(90deg,var(--bone-2),var(--red-hi))}
.set .gauge{height:4px;max-width:560px;margin-top:20px;background:rgba(236,228,216,.16);overflow:visible}
.set .gauge i{position:relative;background:linear-gradient(90deg,rgba(236,228,216,.5),var(--red-hi))}
.set .gauge i::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--red-hi);box-shadow:0 0 0 3px rgba(196,45,53,.3),0 0 16px 3px rgba(196,45,53,.75)}
@media (prefers-reduced-motion:reduce){.gauge i{transition:none}}

/* ---------- mission cards ---------- */
.missions-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.mcard{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--panel);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--lift)}
.mcard img{width:100%;aspect-ratio:16/9;object-fit:cover}
.mcard .body{padding:4px 18px 18px;display:flex;flex-direction:column;gap:8px}
.mcard h3{font-size:22px}
.mcard.locked{background:rgba(236,228,216,.45);box-shadow:inset 0 0 0 1px rgba(13,14,11,.12);color:var(--ink-2)}
.mcard.locked img{filter:grayscale(1) opacity(.45)}
.mcard.locked h3{color:var(--ink-2)}
a.mcard:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 26px 56px -26px rgba(40,30,20,.6)}
/* missions grouped by tier (labels only, nothing gated) */
.tier{margin-top:clamp(22px,3vw,36px)}
.tier h3{font-size:clamp(24px,2.6vw,32px)}
.tier .stage-head .muted{max-width:56ch;font-size:15px;margin-top:6px}
.mcard .code{color:var(--ink-2);white-space:nowrap}
.tag{display:inline-flex;align-items:center;gap:8px;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:rgba(13,14,11,.08);color:var(--ink-2);width:max-content}
.tag.live{background:var(--ink);color:var(--bone)}
.tag.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red-hi)}
.tag.done{background:#d9e4d2;color:#22381b}
.tag.lock::before{content:"";width:9px;height:9px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 4.5V3a2.5 2.5 0 015 0v1.5H9V10H1V4.5zM3.7 4.5h2.6V3a1.3 1.3 0 00-2.6 0z'/%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 10 10'%3E%3Cpath d='M2.5 4.5V3a2.5 2.5 0 015 0v1.5H9V10H1V4.5zM3.7 4.5h2.6V3a1.3 1.3 0 00-2.6 0z'/%3E%3C/svg%3E") center/contain no-repeat}
.dark .tag{background:rgba(236,228,216,.1);color:var(--bone-2)}
.dark .tag.live{background:var(--bone);color:var(--ink)}
.dark .tag.done{background:#2f4128;color:#d5e6cb}

/* ---------- patches ---------- */
.patches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.patch{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:16px 10px;border-radius:14px;background:rgba(236,228,216,.6)}
.patch svg{width:72px;height:72px}
.patch b{font:600 15px/1.2 var(--f-display)}
.patch span{font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.patch.locked svg{filter:grayscale(1);opacity:.32}
.patch.locked b{color:var(--ink-2)}
.patch .when{font:500 10.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.patch .k{font:500 10px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- mission map ---------- */
.mission-head h1{font-size:clamp(38px,4.2vw,60px)}
.mission-head .topic{margin-top:12px}
.facts-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.facts-row span{font:500 12px var(--f-mono);letter-spacing:.06em;padding:7px 10px;border-radius:999px;background:rgba(236,228,216,.12);box-shadow:inset 0 0 0 1px var(--char-line);color:var(--bone)}
.trajectory{position:relative;padding-left:clamp(36px,6vw,72px);display:flex;flex-direction:column;gap:clamp(28px,4vw,44px)}
.trajectory::before{content:"";position:absolute;left:clamp(12px,2vw,24px);top:12px;bottom:12px;width:2px;background:repeating-linear-gradient(var(--ink-2) 0 6px,transparent 6px 12px);opacity:.45}
.leg-block{position:relative}
.leg-block::before{content:"";position:absolute;left:calc(-1 * clamp(36px,6vw,72px) + clamp(12px,2vw,24px) - 8px);top:22px;width:18px;height:18px;border-radius:50%;background:var(--floor);box-shadow:inset 0 0 0 2px var(--ink-2)}
.leg-block.reached::before{background:var(--ink);box-shadow:0 0 0 4px rgba(13,14,11,.12)}
.leg-block.current::before{background:var(--red);box-shadow:0 0 0 6px rgba(196,45,53,.18),0 0 20px rgba(196,45,53,.4)}
.stage-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;margin-bottom:16px}
.stage-head h2{font-size:clamp(26px,3vw,38px)}
.weight{font:500 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.waypoint{padding:16px 0;border-top:1px solid var(--rule)}
.waypoint:first-of-type{border-top:0;padding-top:4px}
.wp-head{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-bottom:10px}
.wp-head .n{font:500 12px var(--f-mono);letter-spacing:.08em;color:var(--ink-2)}
.wp-head h3{font-size:19px;font-family:var(--f-display)}
.blist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.bitem{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;min-height:48px}
.bitem .ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(13,14,11,.07)}
.bitem .ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bitem .t{font-weight:500;line-height:1.3}
.bitem .t small{display:block;font:400 12.5px var(--f-body);color:var(--ink-2);margin-top:2px}
.bitem.live{background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(13,14,11,.1)}
.bitem.live .ico{background:var(--ink);color:var(--bone)}
.bitem.done .ico{background:#3c6b2f;color:#fff}
.bitem.locked{color:var(--ink-2)}
.bitem.locked .t{font-weight:400}
a.bitem{text-decoration:none;color:inherit}
a.bitem:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.check-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:14px 16px;border-radius:12px;background:var(--char);color:var(--bone)}
.check-card .label{color:var(--bone-2)}
.check-card .btn{min-height:44px;font-size:15px;padding:0 20px}
.finale{background:var(--char);color:var(--bone)}
.req{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.req li{display:flex;gap:10px;align-items:center}
.req li::before{content:"";width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px var(--bone-2)}
.req li.ok::before{background:#5f9a4c;box-shadow:none}
.ranks li .n{font:500 13px var(--f-mono);color:var(--ink-2)}
.ranks li.now{font-weight:600}
.ranks li.now .n{color:var(--ink)}

/* ---------- briefing: the lesson board as a video player ----------
   The board is the only dark thing on the page: no card around it, edge to edge on phones, and the
   controls sit under it in the page's own ink. Red is the play button and the scene that's running. */
.brief-head .page-title{margin-bottom:8px}
.brief-grid{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.brief-col{display:contents}
.brief-player{order:1}.brief-status{order:2}.transcript{order:3}.about{order:4}.study{order:5}
@media (min-width:1000px){
  .brief-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
  .brief-col{display:flex;flex-direction:column;gap:24px;min-width:0}
}
@media (max-width:860px){body[data-page="briefing"] .deck-top{position:static}}

.brief-player{position:relative;scroll-margin-top:12px}
.board{position:relative;aspect-ratio:16/9;background:#1a2027;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -34px rgba(0,0,0,.6)}
.board iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#1a2027}
@media (max-width:699px){
  .board{margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)));border-radius:0;box-shadow:none}
}
/* A phone held sideways without full screen: fit the board to the height so the controls stay in view. */
@media (orientation:landscape) and (max-height:520px){.brief-player:not(.is-full) > *{width:min(100%,calc((100vh - 96px) * 16 / 9));margin-inline:auto}}

.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.scene-rail{display:flex;gap:4px;margin-top:4px}
.seg{flex:1;min-width:0;height:30px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;color:inherit}
.seg .bar{position:relative;display:block;width:100%;height:4px;border-radius:2px;background:rgba(13,14,11,.16);overflow:hidden}
.seg.seen .bar{background:rgba(13,14,11,.3)}
.seg .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink)}
.seg[aria-current="step"] .bar{background:rgba(168,34,42,.24)}
.seg[aria-current="step"] .bar i{background:var(--red)}
.seg:focus-visible{outline:2px solid var(--red);outline-offset:1px}
@media (hover:hover){.seg:hover .bar{height:6px}}
.transport{display:flex;align-items:center;gap:4px}
.play{flex:none;width:52px;height:52px;border-radius:50%;border:0;background:var(--red);color:#fff;display:grid;place-items:center;cursor:pointer}
.play:hover{background:var(--red-hi)}
.play:disabled{opacity:.5;cursor:progress}
.play .i{width:24px;height:24px}
.scene-now{flex:1;min-width:0;display:flex;flex-direction:column;margin-left:10px}
.scene-now .count{font:500 12px/1.3 var(--f-mono);color:var(--ink-2)}
.scene-now .sname{font:600 17px/1.3 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer}
@media (hover:hover){.ib:hover{background:rgba(13,14,11,.08)}}
.ib:disabled{opacity:.28;cursor:default;background:none}

/* Full screen: black around the board, controls over its bottom edge, out of the way while it plays. */
.brief-player.is-full{position:fixed;inset:0;z-index:60;margin:0;background:#000;display:flex;align-items:center;justify-content:center}
.brief-player.is-full .board{width:min(100%,calc(100vh * 16 / 9));width:min(100%,calc(100dvh * 16 / 9));margin:0;border-radius:0;box-shadow:none}
.brief-player.is-full .controls{position:absolute;left:0;right:0;bottom:0;padding:36px max(16px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.66) 34%,rgba(0,0,0,.9));color:var(--bone);transition:opacity .3s}
.brief-player.is-full .seg .bar{background:rgba(236,228,216,.24)}
.brief-player.is-full .seg.seen .bar{background:rgba(236,228,216,.42)}
.brief-player.is-full .seg .bar i{background:var(--bone)}
.brief-player.is-full .seg[aria-current="step"] .bar{background:rgba(196,45,53,.35)}
.brief-player.is-full .seg[aria-current="step"] .bar i{background:var(--red-hi)}
.brief-player.is-full .scene-now .count{color:var(--bone-2)}
.brief-player.is-full .ib{color:var(--bone)}
@media (hover:hover){.brief-player.is-full .ib:hover{background:rgba(236,228,216,.14)}}
.brief-player.is-full.idle .controls{opacity:0;pointer-events:none}
.brief-player.is-full.idle .controls:has(:focus-visible){opacity:1;pointer-events:auto}
.brief-player.is-full.idle{cursor:none}
html.brief-player-open,html.brief-player-open body{overflow:hidden}

/* The public video, its chapters, and the way back to the slides. */
.chapters{list-style:none;margin:10px 0 0;padding:0 0 4px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.chapters::-webkit-scrollbar{display:none}
.chapters button{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-height:40px;padding:0 14px;border-radius:999px;border:0;background:rgba(13,14,11,.08);color:var(--ink);font:500 14px var(--f-body);cursor:pointer}
@media (hover:hover){.chapters button:hover{background:rgba(13,14,11,.14)}}
.chapters .t{font:500 12px var(--f-mono);color:var(--ink-2)}
.chapters button[aria-current="true"]{background:var(--ink);color:var(--bone)}
.chapters button[aria-current="true"] .t{color:var(--bone-2)}
.swap-row{margin-top:4px}
.swap{padding-left:0}

/* The debrief beside (or under) the player. */
.brief-status h2,.about h2{font-size:21px}
.st-done{display:flex;gap:14px;align-items:center}
.tick{flex:none;width:46px;height:46px;border-radius:50%;background:#3c6b2f;color:#fff;display:grid;place-items:center}
.tick .i{width:24px;height:24px;stroke-width:2.6}
.st-fuel{font:600 16px/1.3 var(--f-display);color:#2f5a24}
@media (prefers-reduced-motion:no-preference){
  .st-done.fresh .tick{animation:tick-in .45s cubic-bezier(.3,1.4,.5,1) both}
  .st-done.fresh .tick path{stroke-dasharray:22;stroke-dashoffset:22;animation:tick-draw .4s .25s ease-out forwards}
}
@keyframes tick-in{from{transform:scale(.6);opacity:0}}
@keyframes tick-draw{to{stroke-dashoffset:0}}

/* Transcript: every scene's narration, collapsed until asked for. */
.transcript{background:var(--bone);border-radius:14px;box-shadow:0 22px 50px -30px rgba(0,0,0,.45)}
.transcript summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:56px;padding:0 clamp(18px,2.4vw,24px);cursor:pointer;border-radius:14px}
.transcript summary::-webkit-details-marker{display:none}
.transcript summary .i{margin-left:auto;transition:transform .2s}
.transcript[open] summary .i{transform:rotate(180deg)}
.tr-t{font:600 18px var(--f-display)}
.tr-n{font-size:14px;color:var(--ink-2)}
.tr-list{list-style:none;margin:0;padding:0 clamp(6px,1vw,10px) 12px;display:flex;flex-direction:column;gap:2px}
.tr-list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 10px;padding:12px 12px 14px;border-radius:10px;cursor:pointer}
@media (hover:hover){.tr-list li:hover{background:rgba(13,14,11,.05)}}
.tr-list li[aria-current="true"]{background:rgba(255,255,255,.62);box-shadow:inset 3px 0 0 var(--red);border-radius:3px 10px 10px 3px}
.tr-list .n{font:500 13px/1.6 var(--f-mono);color:var(--ink-2)}
.tr-list button{justify-self:start;text-align:left;background:none;border:0;padding:0;font:600 16px/1.4 var(--f-display);color:var(--ink);cursor:pointer}
.tr-list p{grid-column:2;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:68ch}
@media (prefers-reduced-motion:reduce){.transcript summary .i,.brief-player.is-full .controls{transition:none}}
.prompt-box{font:14px/1.55 var(--f-mono);background:var(--char);color:var(--bone);border-radius:10px;padding:14px 16px;white-space:pre-wrap}

/* ---------- simulator ---------- */
.sim-bar{position:sticky;top:var(--bar-h);z-index:10;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 16px;border-radius:12px;background:var(--char);color:var(--bone)}
.timer{font:600 22px/1 var(--f-mono);letter-spacing:.04em}
.timer.low{color:#ff9a9f}
.qnav{display:flex;flex-wrap:wrap;gap:5px}
.qnav button{width:34px;height:34px;border-radius:8px;border:0;background:rgba(236,228,216,.12);color:var(--bone);font:500 12px var(--f-mono);cursor:pointer}
.qnav button.ans{background:var(--bone-2);color:var(--ink)}
.qnav button.flag{box-shadow:inset 0 0 0 2px #e5b65a}
.qnav button[aria-current="true"]{background:var(--red);color:#fff}
.qnav button.right{background:#4d8a3b;color:#fff}
.qnav button.wrong{background:#9b2a2f;color:#fff}
.question{display:flex;flex-direction:column;gap:18px}
.question .stem{font-size:clamp(18px,1.6vw,21px);line-height:1.55;max-width:72ch}
.opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.opt{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1.5px rgba(13,14,11,.14);cursor:pointer;line-height:1.5}
.opt:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .l{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 14px var(--f-display);box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.opt.multi .l{border-radius:8px}
.opt:has(input:checked){background:var(--bone);box-shadow:inset 0 0 0 2px var(--ink)}
.opt:has(input:checked) .l{background:var(--ink);color:var(--bone);box-shadow:none}
.opt:has(input:focus-visible){outline:2px solid var(--red);outline-offset:3px}
.opt.correct{box-shadow:inset 0 0 0 2px #3c6b2f;background:#e3eddc}
.opt.correct .l{background:#3c6b2f;color:#fff;box-shadow:none}
.opt.picked-wrong{box-shadow:inset 0 0 0 2px #9b2a2f;background:#f4e1df}
.opt.picked-wrong .l{background:#9b2a2f;color:#fff;box-shadow:none}
.opt .why{grid-column:2;font-size:14px;color:var(--ink-2);margin-top:6px}
.choose{font:500 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.explain{border-left:3px solid var(--ink);padding:4px 0 4px 16px;color:var(--ink-2);max-width:72ch}
.score{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px}
.score .big{font:600 clamp(56px,7vw,96px)/.9 var(--f-display);letter-spacing:-.03em}
.verdict{font:600 22px var(--f-display)}
.verdict.pass{color:#2f5a24}
.verdict.fail{color:#7e1218}
.bars{display:flex;flex-direction:column;gap:10px;min-width:min(100%,320px);flex:1}
.bars .b{display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:4px 10px;align-items:center;font-size:14px}
.bars .gauge{grid-column:1 / -1;margin:0}
.lobby{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.lobby .panel{display:flex;flex-direction:column;gap:10px}
.lobby .panel .btn{align-self:flex-start;margin-top:auto}
.history{list-style:none;margin:0;padding:0}
.history li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:12px 0;border-top:1px solid var(--rule)}
.history a{font-weight:600}

/* ---------- rewards toast ---------- */
.toast{position:fixed;z-index:50;left:50%;bottom:max(20px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(440px,calc(100vw - 32px));background:var(--ink);color:var(--bone);border-radius:16px;padding:16px 18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);display:flex;gap:14px;align-items:center}
.toast svg{width:56px;height:56px;flex:none}
.toast b{font:600 18px/1.2 var(--f-display);display:block}
.toast span{font-size:14px;color:var(--bone-2)}
.toast button{margin-left:auto;align-self:flex-start;background:none;border:0;color:var(--bone-2);font:500 22px/1 var(--f-body);cursor:pointer;min-width:32px;min-height:32px}
@media (prefers-reduced-motion:no-preference){.toast{animation:toast-in .6s cubic-bezier(.3,1.45,.5,1) both}}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,30px) scale(.96)}}

/* ---------- forms (enlist, sign in, settings) ---------- */
/* Sign in and enlist: the photo runs from the top edge and the form pane is lit like the studio sweep.
   On a desktop the header sits on the pane, clear of the astronaut's helmet. On a phone it is a slim bar in the
   colours along the top of that page's photo, so it runs straight into the set below it. */
:root{
  --untethered-top:linear-gradient(90deg,#1e201b,#30332f 50%,#1d1f1a);
  --visor-top:linear-gradient(90deg,#b1977e,#c2a98f 55%,#b0967d);
}
:is([data-page=signin],[data-page=enlist]) .top{position:absolute;top:0;left:50%;right:0}
:is([data-page=signin],[data-page=enlist]) .top .wrap{padding-left:max(16px,4vw);padding-right:max(16px,4vw)}
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh;min-height:100svh}
.auth .art{position:relative;background:var(--studio);overflow:hidden}
.auth .art img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover}
.auth .pane{display:flex;align-items:center;padding:clamp(104px,10vw,128px) max(16px,4vw) clamp(40px,5vw,72px);background:var(--grain),var(--sweep);
  --ink-2:var(--ink-on-studio);--bad:var(--bad-on-sweep);--focus:var(--ink)}
.auth form,.form{display:flex;flex-direction:column;gap:16px;width:100%;max-width:440px}
.auth h1{font-size:clamp(44px,5vw,72px);line-height:.98;letter-spacing:-.03em}
.form .field input,.auth .field input,.form select{min-height:52px;width:100%;padding:0 16px;border:1px solid rgba(13,14,11,.28);border-radius:2px;background:rgba(236,228,216,.88);color:var(--ink);font:16px var(--f-body)}
.auth .field input{border-color:rgba(13,14,11,.24);border-radius:10px;background:rgba(245,240,233,.92)}
.form select{appearance:auto}
.hint{font-size:13px;color:var(--ink-2)}
.code-input{letter-spacing:.4em;font:600 24px var(--f-mono)!important;text-align:center}
@media (max-width:1180px){:is([data-page=signin],[data-page=enlist]) .top .links a:last-child{display:none}}
@media (min-width:861px) and (max-width:1000px){:is([data-page=signin],[data-page=enlist]) .top .links{display:none}}
@media (max-width:860px){
  :is([data-page=signin],[data-page=enlist]) .top{position:relative;left:auto;background:var(--visor-top)}
  [data-page=signin] .top{background:var(--untethered-top);--focus:var(--bone)}
  [data-page=signin] .top :is(.wordmark,.links a){color:var(--bone)}
  .auth{grid-template-columns:minmax(0,1fr);min-height:0}
  .auth .art{min-height:300px;order:-1}
  .auth .art img{object-position:50% 30%}
  .auth .pane{padding:36px 16px 56px}
}
.danger{background:transparent;color:#7e1218;box-shadow:inset 0 0 0 1.5px #7e1218}
.danger:hover{background:#7e1218;color:#fff}

/* ---------- fixes from the screenshot pass ---------- */
#briefing,#sim,#settings{display:flex;flex-direction:column;gap:clamp(16px,2.2vw,26px)}
.panel{display:flex;flex-direction:column;gap:12px}
.panel > .grid2{margin-top:4px}
.sim-bar .label{color:var(--bone-2)}
.qnav button{background:rgba(13,14,11,.08);color:var(--ink)}
.qnav button.ans{background:var(--ink-2);color:var(--bone)}
.finale .muted,.finale .hint,.finale .label{color:var(--bone-2)}
.panel:not(.finale) .req li::before{box-shadow:inset 0 0 0 2px var(--ink-2)}
@media (max-width:600px){
  .trajectory{padding-left:26px}
  .trajectory::before{left:8px}
  .leg-block::before{left:-26px}
  .bitem{grid-template-columns:28px minmax(0,1fr)}
  .bitem .tag{grid-column:2;justify-self:start}
}

/* ---------- skeleton pieces that have no text to hide (see "waiting on the API" in /site.css) ---------- */
.sk .skf{display:block;min-height:52px;border-radius:2px}
.sk .qnav .q{display:inline-block;width:34px;height:34px;border-radius:8px}
.sk .opt{display:block;min-height:56px;cursor:default}
.sk .board{background:var(--sk);box-shadow:none}
.sk .bitem{display:block}
.sk .btn,.sk .tag{pointer-events:none}
/* The fuel pill holds its place in the bar until the record lands, so the bar never grows under the page. */
.deck-top{--sk:rgba(236,228,216,.1)}
#fuel-wait{width:112px;pointer-events:none}
#fuel-wait::before{visibility:hidden}