/* Page chrome for the Codex landing. Tokens come from hologram.css; this file
 * lays the instrument out around a full viewport canvas. Rules that matter:
 * solid colour type, no gradient text, no thin italic on the dark ground, the
 * detail panel docks to the side and never covers the scene. */

:root {
  --ink: #EFF2F7; --dim: #9AA2B1; --faint: #666E7C;
  --ground: #07080B; --panel: #0F1218; --line: #1D222B; --accent: #3E96F0;
  --warm: #e8a93a;
  /* the key face: the sign in dialog's button gradient (hologram.css .holobtn),
     rest and lit, named once here so the hologram switch and Next wear the
     same face without a third private copy of the numbers */
  --key-face: linear-gradient(135deg, rgb(var(--holo-glow) / .28) 0%, rgb(var(--holo-glow) / .34) 50%, rgb(var(--holo-viol) / .24) 100%);
  --key-face-lit: linear-gradient(135deg, rgb(var(--holo-glow) / .38) 0%, rgb(var(--holo-glow) / .46) 50%, rgb(var(--holo-viol) / .3) 100%);
}
* { box-sizing: border-box; }
/* the button base rules set display: block, which beats the hidden attribute
   unless this is spelled out (scifi-ui AGENTS.md, version 5) */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 16px/1.6 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%; overflow: hidden;
}
a { color: rgb(var(--holo-cyan) / .95); }
a:hover { color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- the scene ---------------------------------------------------------- */
#gl {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none;
  background:
    radial-gradient(ellipse 70% 60% at 62% 55%, rgba(24, 52, 96, .55) 0%, rgba(7, 8, 11, 0) 70%),
    repeating-linear-gradient(0deg, rgba(150, 205, 255, .025) 0 1px, transparent 1px 3px),
    var(--ground);
}
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.label {
  position: absolute; left: 0; top: 0; transform: translate(-1000px, -1000px);
  padding: 2px 8px; margin-left: 10px; margin-top: -10px;
  font: 500 10px/1.6 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  color: rgb(var(--holo-line) / .9); background: rgba(6, 12, 22, .55);
  border-left: 1px solid rgb(var(--holo-line) / .6);
  transition: opacity .5s ease; opacity: 0;
}
.label::before {
  content: ""; position: absolute; left: -11px; top: 50%; width: 10px; height: 1px;
  background: rgb(var(--holo-line) / .6);
}

/* ---- top bar ------------------------------------------------------------ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px clamp(14px, 3vw, 28px);
  background: linear-gradient(to bottom, rgba(7, 8, 11, .85), rgba(7, 8, 11, 0));
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-name { font-weight: 700; font-size: 20px; letter-spacing: .04em; }
.brand-sub { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.ghost {
  font: inherit; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: rgb(var(--holo-ink) / .72); background: rgba(10, 18, 34, .55);
  border: 1px solid rgb(var(--holo-glow) / .28); border-radius: 2px;
  padding: 8px 12px; cursor: pointer; text-decoration: none; line-height: 1;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.ghost:hover, .ghost:focus-visible { color: #fff; border-color: rgb(var(--holo-cyan) / .6); background: rgba(14, 26, 48, .8); }
.ghost:disabled { opacity: .35; cursor: default; }
.ghost:focus-visible { outline: 2px solid rgb(var(--holo-cyan) / .9); outline-offset: 2px; }

/* ---- the hologram switch --------------------------------------------------
   The switch in the landing box. Nothing in it is new to the kit. The face is the
   sign in dialog's key, the same gradient Next wears; the pip and the state
   word are the step rail's lit tick and its tabular count; the four corner
   brackets are the holoframe's HUD, markup and numbers as they ship, resting
   just inside the corners and pushing out on a point, a focus or a press,
   translate(4px,4px) to translate(-7px,-7px). The push is the character of
   them, so the numbers are not touched.

   A button is a control, so its touch path is :active and :focus-visible, not
   holo-on: the tap script leaves controls alone on purpose, since a button
   left sitting in its hover state after a tap reads as a stuck toggle.

   The brackets have to sit outside the face, so the button itself has no box
   and the face carries the border, the gradient and the clip for the light
   band that crosses the big one once on arrival. */
.holoswitch {
  position: relative; display: block; width: 100%; margin: 0; padding: 0;
  border: 0; background: none; cursor: pointer; font: inherit; color: inherit;
  text-align: left; -webkit-tap-highlight-color: transparent;
}
.holoswitch-face {
  position: relative; display: flex; align-items: center; gap: 12px;
  overflow: hidden; border-radius: 2px; padding: 18px 22px;
  border: 1px solid rgb(var(--holo-cyan) / .45);
  background: var(--key-face);
  box-shadow: 0 0 34px rgb(var(--holo-glow) / .22), inset 0 0 26px rgb(var(--holo-glow) / .08);
  transition: border-color .3s ease, box-shadow .3s ease, transform .12s ease;
}
/* the face's parts sit above the light band, which is at z-index 1 */
.holoswitch-pip, .holoswitch-text, .holoswitch-state { position: relative; z-index: 2; }
.holoswitch-text {
  flex: 1 1 auto; font-size: 1.05em; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: rgb(200 230 255 / .95); line-height: 1.2;
}
/* the rail's tick: a dim dot at rest, the lit 7px dot with its glow when on */
.holoswitch-pip {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: rgb(var(--holo-ink) / .22);
  transition: background .3s ease, box-shadow .3s ease;
}
/* the rail's count: tabular caps, so Off and On sit in the same width */
.holoswitch-state {
  flex: 0 0 auto; min-width: 3ch; text-align: right;
  font: 500 10px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .25em; text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: rgb(var(--holo-ink) / .58); transition: color .3s ease;
}
.holoswitch:hover .holoswitch-face, .holoswitch:focus-visible .holoswitch-face {
  border-color: rgb(var(--holo-cyan) / .6); background: var(--key-face-lit);
  box-shadow: 0 0 46px rgb(var(--holo-cyan) / .3), inset 0 0 30px rgb(var(--holo-glow) / .1);
}
/* the press: the face gives under the finger, the brackets stay out */
.holoswitch:active .holoswitch-face { transform: scale(.985); }
.holoswitch:focus-visible { outline: 2px solid rgb(var(--holo-cyan) / .9); outline-offset: 5px; border-radius: 2px; }
/* on: the same lit edge and inner glow the bar toggle used to carry, the pip
   lit with the rail's own numbers, the state word up to full weight */
.holoswitch[aria-pressed="true"] .holoswitch-face {
  border-color: rgb(var(--holo-cyan) / .8); color: #fff;
  box-shadow: 0 0 22px rgb(var(--holo-cyan) / .22), inset 0 0 18px rgb(var(--holo-glow) / .12);
}
.holoswitch[aria-pressed="true"] .holoswitch-text { color: #fff; }
.holoswitch[aria-pressed="true"] .holoswitch-pip {
  background: rgb(var(--holo-cyan)); box-shadow: 0 0 7px rgb(var(--holo-cyan) / .95);
}
.holoswitch[aria-pressed="true"] .holoswitch-state { color: rgb(var(--holo-ink) / .85); }

/* the brackets: the holoframe hides its HUD until you point at it, but on a
   control and on the box they are part of the instrument, so they rest
   visible at half weight and come up to full as they push out. The push
   itself is hologram.css's, with the switch and the box as the triggers the
   frame is on its own media. */
.holoswitch > .hud, .panel > .hud { opacity: .55; }
.holoswitch:hover > .hud, .holoswitch:focus-visible > .hud, .holoswitch:active > .hud,
.panel:hover > .hud, .panel:focus-within > .hud, .panel.holo-on > .hud { opacity: 1; }
.holoswitch:hover > .hud i.tl, .holoswitch:focus-visible > .hud i.tl, .holoswitch:active > .hud i.tl,
.panel:hover > .hud i.tl, .panel:focus-within > .hud i.tl, .panel.holo-on > .hud i.tl { transform: translate(-7px, -7px); }
.holoswitch:hover > .hud i.tr, .holoswitch:focus-visible > .hud i.tr, .holoswitch:active > .hud i.tr,
.panel:hover > .hud i.tr, .panel:focus-within > .hud i.tr, .panel.holo-on > .hud i.tr { transform: translate(7px, -7px); }
.holoswitch:hover > .hud i.bl, .holoswitch:focus-visible > .hud i.bl, .holoswitch:active > .hud i.bl,
.panel:hover > .hud i.bl, .panel:focus-within > .hud i.bl, .panel.holo-on > .hud i.bl { transform: translate(-7px, 7px); }
.holoswitch:hover > .hud i.br, .holoswitch:focus-visible > .hud i.br, .holoswitch:active > .hud i.br,
.panel:hover > .hud i.br, .panel:focus-within > .hud i.br, .panel.holo-on > .hud i.br { transform: translate(7px, 7px); }

/* the one button the landing stage is about */
.holoswitch--big { margin: 16px 0 14px; }
/* ---- the docked panel ---------------------------------------------------- */
/* the box is blue, not black: a projected panel over a dark field, the same
   cool surface as the scifi-ui masthead */
.panel, .tune {
  background: linear-gradient(178deg, rgba(16, 34, 62, .92), rgba(9, 20, 42, .96));
  border-color: rgba(122, 186, 246, .34);
}
/* The box is an instrument, so it carries the frame's HUD brackets at its
   corners and the boot sweep that runs its border as each stage arrives. Both
   need the box itself unclipped: the brackets push 7px past its edge, and a
   scroll container would carry them off with the copy. So the box is a column that
   never scrolls and the copy inside it does, which also keeps Back and Next
   at the foot whatever the copy does. The corners tighten from the panel
   surface's 14px to 4px: square brackets on a soft corner read as two
   different objects. */
.panel {
  position: fixed; z-index: 4;
  top: 72px; right: clamp(14px, 3vw, 28px);
  width: min(400px, calc(100vw - 28px)); max-height: calc(100vh - 190px);
  padding: 20px 22px 18px; border-radius: 4px;
  display: flex; flex-direction: column;
}
.panel .body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }   /* a one pixel overhang was drawing a horizontal bar on Windows */
/* The arrival. Each time a stage's copy lands, the panel boot's twin tip sweep
   runs the border once, two bright heads 180 degrees apart each covering half
   the perimeter, while an inner backlight swells and tapers under the copy.
   The two spans, their gradients and their keyframes are hologram.css's
   holoboot, with the box as the trigger and without the boot's blur entrance,
   which has no business on a panel that is on screen from the first frame.
   Both sit at z-index -1: above the box's own background, under its copy, so
   nothing ever crosses the text. */
.panel > .panel-ring, .panel > .panel-glow {
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: -1; opacity: 0;
}
.panel > .panel-ring {
  padding: 1px;
  background:
    conic-gradient(from var(--holo-ring-angle, 45deg),
      rgb(var(--holo-beam) / 1) 0deg, rgb(var(--holo-beam) / .45) 14deg,
      rgb(var(--holo-beam) / 0) 30deg, transparent 30deg, transparent 330deg,
      rgb(var(--holo-beam) / 0) 330deg, rgb(var(--holo-beam) / .45) 346deg,
      rgb(var(--holo-beam) / 1) 360deg),
    conic-gradient(from calc(var(--holo-ring-angle, 45deg) + 180deg),
      rgb(var(--holo-beam) / 1) 0deg, rgb(var(--holo-beam) / .45) 14deg,
      rgb(var(--holo-beam) / 0) 30deg, transparent 30deg, transparent 330deg,
      rgb(var(--holo-beam) / 0) 330deg, rgb(var(--holo-beam) / .45) 346deg,
      rgb(var(--holo-beam) / 1) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.panel.swap > .panel-ring { animation: holo-ring-sweep 1500ms linear forwards; }
.panel.swap > .panel-glow { animation: holo-panel-online 1500ms linear forwards; }
/* the head row: the eyebrow at the left, the dataset pip at the right */
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.panel .eyebrow {
  margin: 0; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: rgb(var(--holo-cyan) / .85); font-weight: 600;
}
/* the dataset pip: the neural HUD's, from scifi-ui (BE THE FLY's cockpit),
   value for value. BANC wears the beam; any other dataset turns warm so it can
   never borrow BANC's badge. It is a button, so a point, a focus or a press
   lights it, and the callout it opens holds it open. */
.holopip {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  margin: 0; padding: 4px 10px; cursor: pointer; font: inherit; line-height: 1;
  border: 1px solid rgb(var(--holo-beam) / .3); border-radius: 999px; background: none;
  font-size: 8.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap; color: rgb(var(--holo-beam) / .9);
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.holopip i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgb(var(--holo-beam)); box-shadow: 0 0 8px rgb(var(--holo-beam) / .8);
}
.holopip.alt { border-color: rgb(var(--holo-warm) / .45); color: rgb(var(--holo-warm) / .95); }
.holopip.alt i { background: rgb(var(--holo-warm)); box-shadow: 0 0 8px rgb(var(--holo-warm) / .8); }
.holopip:hover, .holopip:focus-visible, .holopip[aria-expanded="true"] {
  color: rgb(var(--holo-ink)); border-color: rgb(var(--holo-beam) / .85);
  background: rgb(var(--holo-glow) / .22);
}
.holopip:focus-visible { outline: 2px solid rgb(var(--holo-cyan) / .9); outline-offset: 2px; }
/* a one step callout has no count and no progress to report */
.holotip--one .holotip-count, .holotip--one .holotip-rail { display: none; }
.holotip-body .fine { font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.panel h1 { margin: 0 0 12px; font-size: clamp(22px, 2.2vw, 27px); line-height: 1.18; font-weight: 600; letter-spacing: -.01em; }
.panel .body p { margin: 0 0 12px; color: #C9D3E3; font-size: 15px; }
.panel .body p b { color: var(--ink); font-weight: 600; }
.panel .body .fine { font-size: 12.5px; color: var(--dim); line-height: 1.55; }
.panel .body .hint { font-size: 12.5px; color: var(--dim); }
.panel .body .codexlink { margin-top: 4px; font-size: 13.5px; }
.panel .body .codexlink a { text-decoration: none; border-bottom: 1px solid rgb(var(--holo-cyan) / .4); }
.panel.swap h1, .panel.swap .panel-head, .panel.swap .body { animation: panelswap .45s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes panelswap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Back and Next at the foot of the box, the same spot on every stage */
.panel .actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.panel .actions .holobtn { flex: 1 1 auto; width: auto; }
.holobtn--link { text-decoration: none; text-align: center; margin: 8px 0 4px; }
.missions { display: grid; gap: 10px; margin: 4px 0 10px; }

/* legend: a dot, a name, a plain clause */
.legend { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 7px; }
.legend li { display: grid; grid-template-columns: 12px 1fr; column-gap: 10px; row-gap: 0; align-items: baseline; font-size: 13.5px; color: #C9D3E3; }
/* the key is a control: a tap says what the class is. It keeps the row's grid
   so the dot and the name sit where they always did, and a dotted rule under
   the name says it will answer. */
.legend-key {
  grid-column: 1 / span 2; grid-row: 1; justify-self: start; display: grid; grid-template-columns: 12px auto;
  column-gap: 10px; align-items: baseline; margin: 0; padding: 0; border: 0;
  background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.legend-key i { grid-column: 1; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); transform: translateY(1px); transition: box-shadow .2s ease; }
.legend-key b {
  grid-column: 2; font-weight: 600; color: var(--ink);
  text-decoration: underline dotted rgb(var(--holo-cyan) / .45); text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.legend-key:hover b, .legend-key:focus-visible b, .legend-key[aria-expanded="true"] b {
  color: #fff; text-decoration-color: rgb(var(--holo-cyan) / .9);
}
.legend-key:hover i, .legend-key:focus-visible i, .legend-key[aria-expanded="true"] i { box-shadow: 0 0 12px var(--c), 0 0 3px var(--c); }
.legend-key:focus-visible { outline: 2px solid rgb(var(--holo-cyan) / .9); outline-offset: 3px; border-radius: 2px; }
.legend li span { grid-column: 2; grid-row: 2; color: var(--dim); font-size: 12.5px; }

/* the Be the Fly card, in the tinted lift card language */
.card {
  display: block; text-decoration: none; color: var(--ink);
  border: 1px solid rgb(var(--holo-glow) / .3); border-radius: 6px; overflow: hidden;
  background: rgba(10, 18, 34, .6); margin: 4px 0 12px;
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.card:hover, .card:focus-visible, .card.holo-on {
  border-color: rgb(var(--holo-cyan) / .6); transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 30px rgb(var(--holo-glow) / .15);
}
.card img { display: block; width: 100%; height: auto; }
.card span { display: block; padding: 0 14px; }
.card-kicker { padding-top: 12px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--holo-cyan) / .85); }
.card-title { font-weight: 600; font-size: 16px; margin: 4px 0 6px; }
.card-body { font-size: 13px; color: var(--dim); padding-bottom: 14px; line-height: 1.5; }

/* the tune panel, bottom left, over nothing important */
.tune {
  position: fixed; left: clamp(14px, 3vw, 28px); bottom: 70px; z-index: 4;
  width: min(300px, calc(100vw - 28px)); padding: 14px 16px 12px; border-radius: 8px;
}
.tune-title { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--holo-cyan) / .85); font-weight: 600; }
.tune label { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; margin: 6px 0; font-size: 12.5px; color: #C9D3E3; }
.tune input[type="range"] { width: 100%; accent-color: rgb(var(--holo-cyan)); }
.tune-out { margin: 8px 0 4px; font: 500 11px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .08em; color: rgb(var(--holo-line) / .9); }
.tune .fine { margin: 0; font-size: 11.5px; color: var(--dim); line-height: 1.5; }

/* ---- loading, rail, credits ---------------------------------------------- */
.loading {
  position: fixed; left: clamp(14px, 3vw, 28px); bottom: 64px; z-index: 4; margin: 0;
  font: 500 11px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .18em; text-transform: uppercase; color: rgb(var(--holo-line) / .75);
}
.railwrap {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none;
  padding: 18px clamp(14px, 3vw, 28px) 22px;
  background: linear-gradient(to top, rgba(7, 8, 11, .9), rgba(7, 8, 11, 0));
}
.railwrap .holobar { max-width: 720px; pointer-events: auto; }
.credits {
  position: fixed; left: clamp(14px, 3vw, 28px); bottom: 56px; z-index: 3; max-width: 380px;
  font-size: 10.5px; line-height: 1.5; color: var(--faint); margin: 0;
  opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
.credits p { margin: 0; }
.credits a { color: var(--dim); }
body[data-stage="10"] .credits { opacity: 1; pointer-events: auto; }

/* ---- missions, inline in the last panel: they are buttons and must read as buttons ---- */
.mission {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px;
  padding: 12px 14px; text-decoration: none; color: var(--ink); cursor: pointer;
  border: 1px solid rgb(var(--holo-cyan) / .45); border-radius: 3px;
  background: linear-gradient(135deg, rgb(var(--holo-glow) / .26) 0%, rgb(var(--holo-glow) / .32) 50%, rgb(var(--holo-viol) / .22) 100%);
  box-shadow: 0 0 22px rgb(var(--holo-glow) / .14), inset 0 0 22px rgb(var(--holo-glow) / .05);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
a.mission:hover, a.mission:focus-visible, a.mission.holo-on {
  border-color: rgb(var(--holo-cyan) / .9); transform: translateY(-1px);
  box-shadow: 0 0 34px rgb(var(--holo-cyan) / .28), inset 0 0 26px rgb(var(--holo-glow) / .08);
}
a.mission:focus-visible { outline: 2px solid rgb(var(--holo-cyan) / .9); outline-offset: 2px; }
.mission span { display: block; grid-column: 1; }
.mission span.mission-go { grid-column: 2; grid-row: 1 / span 3; }
.mission-kicker { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--holo-cyan) / .9); font-weight: 600; }
.mission-title { font-weight: 600; font-size: 15.5px; margin: 2px 0 4px; }
.mission-body { font-size: 12.5px; color: #C9D3E3; line-height: 1.45; }
/* the affordance: a lit "Open" cap on the right, like a key */
.mission-go {
  grid-column: 2; grid-row: 1 / span 3; align-self: center;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  color: #fff; padding: 8px 12px; border: 1px solid rgb(var(--holo-cyan) / .6); border-radius: 2px;
  background: rgb(var(--holo-cyan) / .12);
}
.mission--soon { cursor: default; border-color: rgb(var(--holo-glow) / .25); background: rgba(10, 18, 34, .55); box-shadow: none; }
.mission--soon .mission-kicker { color: var(--dim); }
.mission--soon .mission-go { color: var(--dim); border-color: rgb(var(--holo-glow) / .25); background: none; }

/* ---- Be the Fly, live in the page ------------------------------------------------ */
.poster {
  position: fixed; inset: 0; z-index: 1; background: #0b1a16;
  opacity: 0; transition: opacity .6s ease;
}
.poster.is-on { opacity: 1; }
.poster iframe { display: block; width: 100%; border: 0; }
/* the sim has its own bar and HUD: our bar steps aside, the box keeps its spot
   at the top right, and the frame takes the width to the left of it */
/* things that only exist on a phone: the sim's door, and the note that it
   opens full screen */
.phone-only { display: none; }
@media (max-width: 760px) {
  .phone-only { display: block; }
  a.mission.phone-only { display: grid; }
}
/* on a wide screen the box is a strip across the top, above the sim's HUD:
   eyebrow and title stacked at the left, the sentence beside them, Back and
   Next at the right. The frame takes everything under it. */
@media (min-width: 761px) {
  body[data-stage="8"] .topbar, body[data-stage="8"] .tune, body[data-stage="8"] #labels { display: none; }
  /* the strip runs edge to edge, so brackets that push past its edge would
     push past the viewport; the strip goes without them */
  body[data-stage="8"] .panel > .hud { display: none; }
  body[data-stage="8"] .panel {
    top: 0; left: 0; right: 0; width: auto; max-height: none; overflow: visible;
    border-radius: 0; border-width: 0 0 1px; padding: 9px clamp(14px, 3vw, 28px) 10px;
    display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto;
    align-items: center; column-gap: 22px; row-gap: 1px;
  }
  body[data-stage="8"] .panel .panel-head { grid-column: 1; grid-row: 1; margin: 0; }
  body[data-stage="8"] .panel h1 { grid-column: 1; grid-row: 2; margin: 0; font-size: 18px; }
  body[data-stage="8"] .panel .body { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  body[data-stage="8"] .panel .body p { margin: 0; font-size: 14px; }
  body[data-stage="8"] .panel .actions { grid-column: 3; grid-row: 1 / 3; margin: 0; }
  body[data-stage="8"] .panel .actions .holobtn { width: auto; padding: 10px 26px; }
  body[data-stage="8"] .poster iframe { margin-top: var(--strip, 66px); height: calc(100% - 56px - var(--strip, 66px)); width: 100%; }
}
.poster iframe { height: calc(100% - 56px); }
.poster::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: var(--ground); }

/* ---- small screens: the panel becomes a sheet at the foot ------------------- */
@media (max-width: 760px) {
  /* 8px in from each side, so the brackets have their 7px to push into
     rather than pushing past the edge of the screen */
  .panel {
    top: auto; right: 8px; left: 8px; bottom: 58px; width: auto; max-height: 48vh;
    border-radius: 6px 6px 0 0; padding: 12px 16px 12px;
  }
  /* Back and Next first, so they are on screen whatever the copy does */
  .panel .actions { order: -1; margin: 0 0 10px; }
  .panel .actions .holobtn { padding: 10px 16px; }
  /* the big Hologram button is the Next button on the landing stage */
  body[data-stage="0"] .panel .actions { display: none; }
  body[data-stage="0"] .panel .fine, body[data-stage="10"] .panel .codexlink { display: none; }
  .panel-head { margin-bottom: 4px; }
  .panel .eyebrow { font-size: 9.5px; }
  .panel h1 { font-size: 19px; margin-bottom: 8px; }
  .panel .body p { font-size: 13.5px; margin-bottom: 8px; line-height: 1.5; }
  .panel .body .fine { font-size: 11.5px; }
  .legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; }
  .legend li { grid-template-columns: 12px auto; font-size: 12.5px; }
  .legend li span { display: none; }
  .missions { gap: 6px; margin: 2px 0 6px; }
  .mission { padding: 7px 10px; }
  /* .mission span sets display: block at a higher specificity, so the hide
     has to match it or the description shows and the sheet scrolls */
  .mission .mission-body { display: none; }
  .mission-title { font-size: 14px; margin: 1px 0 2px; }
  .mission-go { padding: 6px 9px; font-size: 10px; }
  .holoswitch--big { margin: 8px 0 6px; }
  .holoswitch--big .holoswitch-face { padding: 13px 18px; }
  .holoswitch--big .holoswitch-text { font-size: 15px; }
  .holobtn--link { margin: 4px 0 0; }
  .brand-sub { display: none; }
  .topbar-right .ghost:not(#replay):not(#tuneToggle) { display: none; }
  #replay { display: none; }
  .tune { bottom: auto; top: 60px; }
  .loading { bottom: auto; top: 58px; }
  .credits { display: none; }
}
@media (max-width: 760px) and (max-height: 720px) {
  .panel { max-height: 50vh; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .mission, .ghost, .label { transition: none; }
  .panel.swap h1, .panel.swap .panel-head, .panel.swap .body { animation: none; }
  .holopip, .legend-key i, .legend-key b { transition: none; }
  /* the switch lands on its state and the brackets land pushed, since both
     are where the inputs put them; the scan and the small switch's entrance
     are decoration and go */
  .holoswitch-face, .holoswitch-pip, .holoswitch-state { transition: none; }
  .holoswitch:active .holoswitch-face { transform: none; }
  .panel.swap > .panel-ring, .panel.swap > .panel-glow { animation: none; }
}

/* ---- Follow the light (light.html) --------------------------------------------- */
.pick {
  position: fixed; z-index: 6; pointer-events: none; max-width: 240px;
  padding: 8px 10px; border-radius: 3px;
  background: linear-gradient(178deg, rgba(16, 34, 62, .95), rgba(9, 20, 42, .97));
  border: 1px solid rgba(122, 186, 246, .45); box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  font-size: 12.5px; line-height: 1.4; color: #C9D3E3;
}
.pick b { display: block; color: var(--ink); font-size: 14px; }
.pick span { display: block; color: var(--dim); }
.pick .pick-id { font: 500 10px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .06em; }
body.light .credits { display: block; }
body.light[data-stage="light-9"] .credits { opacity: 1; pointer-events: auto; }
@media (max-width: 760px) { body.light .credits { display: none; } }

/* a label can take the colour of the thing it names */
body.light .label { border-left-color: var(--c, rgb(196 228 255 / .6)); color: var(--c, rgb(196 228 255 / .9)); }
body.light .label::before { background: var(--c, rgb(196 228 255 / .6)); }

/* the Send the signal button inside the box */
.holobtn--send { margin: 6px 0 10px; padding: 12px 18px; font-size: .92em; letter-spacing: .18em; }
@media (max-width: 760px) { .holobtn--send { padding: 10px 14px; margin: 4px 0 6px; } }

/* a coloured pip before a cell name, the same dot the legend uses */
.pip::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 6px 1px 0; background: var(--c); box-shadow: 0 0 6px var(--c); vertical-align: middle; }

/* the FlyWire mark beside the name */
.brand-icon { width: 24px; height: 24px; display: inline-block; vertical-align: -5px; margin-right: 8px; opacity: .95; }
/* the mission visitors should press first */
.mission--primary {
  border-color: rgb(var(--holo-cyan) / .85);
  background: linear-gradient(135deg, rgb(var(--holo-glow) / .42) 0%, rgb(var(--holo-glow) / .5) 50%, rgb(var(--holo-viol) / .34) 100%);
  box-shadow: 0 0 34px rgb(var(--holo-cyan) / .28), inset 0 0 26px rgb(var(--holo-glow) / .1);
}
.mission--primary .mission-kicker { color: rgb(var(--holo-cyan)); }
.mission--primary .mission-go { background: rgb(var(--holo-cyan) / .28); border-color: rgb(var(--holo-cyan) / .9); }

/* the finale: the brain takes the whole width, so the box drops to a slim card
   at the lower right instead of a column down the side */
@media (min-width: 760px) {
  body[data-stage="9"] .panel { top: auto; bottom: 64px; width: min(380px, 40vw); max-height: 42vh; }
  body[data-stage="9"] .panel .body p { font-size: 14px; }
}

/* the fold: a chevron beside the dataset pip; folded, the body copy goes and
   the box is title and buttons */
.panel-fold {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 26px; height: 26px; margin: 0 0 0 auto; padding: 0; cursor: pointer;
  border: 1px solid rgb(var(--holo-beam) / .3); border-radius: 999px; background: none;
  color: rgb(var(--holo-beam) / .9); transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .2s;
}
.panel-fold svg { width: 12px; height: 12px; }
.panel-fold:hover, .panel-fold:focus-visible { border-color: rgb(var(--holo-beam) / .85); background: rgb(var(--holo-glow) / .22); }
.panel-fold:focus-visible { outline: 2px solid rgb(var(--holo-cyan) / .9); outline-offset: 2px; }
.panel-head .holopip { margin-left: auto; }
.panel-head .holopip + .panel-fold { margin-left: 0; }
body.text-folded .panel-fold { transform: rotate(180deg); }
body.text-folded .panel .body { display: none; }
body.text-folded .panel .actions { margin-top: 10px; }
body[data-stage="8"] .panel-fold { display: none; }   /* the sim strip has no body to fold */