/* Argentum — shared shell. Every page loads this; only page-specific rules
   live in the page itself. */

:root{
  --ground:#0C100F; --ground-2:#080B0A; --surface:#141A18; --surface-2:#1A211F;
  --line:#263029; --line-2:#35423C;
  --ink:#E6ECEA; --ink-2:#9BA9A4; --ink-3:#6E7C77;
  --accent:#6FC2AE; --accent-dim:#3E7A6D; --glow:rgba(111,194,174,.14);
  --pos:#74C08C; --warn:#D9A441; --crit:#D9695B;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  /* Spacing scale. Pick from it instead of inventing 7px, 15px, 22px, 34px —
     Finance had eleven different gaps before it moved onto these. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
}
*{box-sizing:border-box}
/* ⚠️ Load-bearing. Every capsule in this app sets its own `display`, and a class
   rule beats the user agent's `[hidden]{display:none}` — so `el.hidden = true`
   silently did nothing and the HUD's rail trimmer marked rows hidden while they
   stayed on screen. Toggle visibility with `.hidden`, and let this win. */
[hidden]{display:none!important}
/* Read at a glance from a metre away on a second monitor, not studied. One
   number tunes the whole thing. */
html{font-size:19px}
html,body{height:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
body.fixed{overflow:hidden}

#atmos{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 12% 92%, rgba(111,194,174,.07), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(111,194,174,.05), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.011) 0 1px, transparent 1px 3px);
}

/* ---------------------------------------------------------------- shell -- */
.page{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column}

header{
  display:flex;align-items:center;gap:14px;padding:14px 26px;
  border-bottom:1px solid var(--line);font-family:var(--mono);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
}
header .brand{display:block;flex:none}
header .nm{color:var(--ink);font-weight:600;letter-spacing:.24em}
header .where{color:var(--accent)}
header .sp{margin-left:auto;display:flex;gap:22px;align-items:center}
.live{display:inline-flex;align-items:center;gap:8px;color:var(--accent)}
.blip{width:6px;height:6px;background:var(--accent);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(111,194,174,.45)}
  70%{box-shadow:0 0 0 8px rgba(111,194,174,0)}
  100%{box-shadow:0 0 0 0 rgba(111,194,174,0)}
}

footer{
  border-top:1px solid var(--line);padding:9px 26px;display:flex;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
}
footer .warn{color:var(--warn)}

/* ------------------------------------------------------------ primitives -- */
.pane-t{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:baseline;gap:10px;margin-bottom:16px;
}
.pane-t::before{content:"\25B8";color:var(--accent-dim);font-size:9px}
.pane-t .ct{margin-left:auto}

.row{display:flex;align-items:baseline;gap:12px;font-family:var(--mono);font-size:.86rem;padding:6px 0;color:var(--ink-2)}
.row .k{color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;font-size:.66rem;min-width:78px}
.row .v{color:var(--ink);font-variant-numeric:tabular-nums}
.row .r{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink)}

.big{font-family:var(--display);font-variation-settings:"wdth" 100;font-weight:600;
  font-size:3.1rem;line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.big.a{color:var(--accent)} .big.p{color:var(--pos)}
.fk{font-family:var(--mono);font-size:.62rem;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}

.tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  padding:3px 9px;border:1px solid currentColor;white-space:nowrap;display:inline-block}
.t-ok{color:var(--pos)} .t-warn{color:var(--warn)} .t-crit{color:var(--crit)} .t-off{color:var(--ink-3)}

/* -------------------------------------------------------------- waiting -- */
/* Any wait gets a visual cue. Matt's rule, and the right one: a person needs to
   see the machine thinking, and that cue does NOT have to be tied to a real
   countdown to be honest — indeterminate motion only ever claims "something is
   happening", which is true. A bar implying a percentage it does not know is
   the dishonest kind; do not build that one.

   Lives here rather than in a page so every pill inherits the same cue instead
   of inventing its own spinner. Reads as instrumentation rather than a web
   spinner, which is the whole visual direction. */
.working{display:flex;align-items:center;gap:11px;font-family:var(--mono);
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.working .track{
  position:relative;flex:1;min-width:60px;max-width:210px;height:3px;
  background:rgba(38,48,41,.9);overflow:hidden;
}
.working .track::after{
  content:"";position:absolute;top:0;bottom:0;width:38%;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  animation:sweep 1.25s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes sweep{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(370%)}
}

/* Reduced motion still gets a cue — a slow pulse rather than a sweep. Removing
   the signal entirely would leave those users with the blank panel this exists
   to prevent. */
@media (prefers-reduced-motion:reduce){
  .working .track::after{width:100%;animation:breathe 2s ease-in-out infinite;
    background:var(--accent-dim)}
  @keyframes breathe{0%,100%{opacity:.25}50%{opacity:.9}}
}

/* --------------------------------------------------------- the switcher -- */
/* Which character am I looking at. Moved out of personal.html when Finance
   became the second page that needs it — the same rule the panel system
   follows: one screen is not enough to shape a shared thing, two is.

   ⚠️ The SHELL is shared and the row CONTENT is not. Personal shows SP and a
   training countdown, Finance shows a balance; baking either into the shared
   part would have made the next page fight it. Pages pass a row renderer. */
.sw{position:relative;margin-left:18px}
.sw-btn{
  display:flex;align-items:center;gap:10px;padding:4px 12px 4px 4px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  font:inherit;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;transition:border-color .16s;
}
.sw-btn:hover{border-color:var(--accent-dim)}
.sw-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sw-btn img{width:26px;height:26px;object-fit:cover;display:block}
.sw-btn .cv{font-size:9px;color:var(--ink-3);margin-left:2px}

.sw-panel{
  position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:330px;
  max-height:min(70vh,560px);overflow-y:auto;
  background:var(--ground-2);border:1px solid var(--line-2);
  box-shadow:0 18px 44px rgba(0,0,0,.7);padding:7px;display:none;
}
.sw-panel.on{display:block}
.sw-pill{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:8px 11px;margin-bottom:4px;cursor:pointer;font:inherit;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line-2);
  transition:border-color .14s,transform .14s;
}
.sw-pill:last-child{margin-bottom:0}
.sw-pill:hover{border-color:var(--line-2);transform:translateX(2px)}
.sw-pill.here{border-left-color:var(--accent)}
.sw-pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sw-pill img{width:34px;height:34px;object-fit:cover;display:block;flex:none}
.sw-pill .who{min-width:0;flex:1}
.sw-pill .n{font-family:var(--display);font-variation-settings:"wdth" 104;font-weight:600;
  font-size:.92rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-pill .s{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--ink-3);margin-top:2px}
.sw-pill .rt{font-family:var(--mono);font-size:.6rem;text-align:right;flex:none;font-variant-numeric:tabular-nums}

/* Row bits a switcher row is likely to want, in both pages' vocabulary. */
.sw-pill .dot{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--ink-3)}
.sw-pill .dot.on{background:var(--pos)}
.sw-pill .t-ok{color:var(--ink-3)} .sw-pill .t-warn{color:var(--warn)}
.sw-pill .t-crit{color:var(--crit)} .sw-pill .t-accent{color:var(--accent)}

/* ------------------------------------------------------------- panels -- */
/* The Sterling panel system. Proven on Personal's biography writer and moved
   here on purpose: every pill should get the same panel rather than inventing
   its own. Pattern and rationale: claude-config projects/silverlink/SNAPSHOT.md.

   Nothing below is speculative - it is CSS that already shipped, relocated so
   the next screen can see it. The orchestration (which steps exist, what they
   ask) stays in the page: one screen is not enough to shape that API, and
   guessing at it is how you get the wrong one. */

/* An empty state: what is missing, why, and what fills it — built by
   emptyState() in panel.js. A bare grey line saying "nothing" reads as broken. */
.emptystate{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4) var(--sp-4);
  border:1px dashed var(--line-2);border-radius:0 14px 14px 0;background:rgba(20,26,24,.45)}
.emptystate .glyph{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-2);font-family:var(--mono);font-size:.7rem;color:var(--ink-3)}
.emptystate .t{font-family:var(--body);font-size:.88rem;color:var(--ink-2)}
.emptystate .b{font-family:var(--mono);font-size:.68rem;line-height:1.6;color:var(--ink-3);margin-top:var(--sp-1)}

/* The affordance is the mark, not a sentence. */
.ask{
  flex:none;display:grid;place-items:center;width:50px;height:38px;padding:0;
  cursor:pointer;background:linear-gradient(180deg,#1B2926 0%,#131E1B 100%);
  border:1px solid var(--line-2);border-radius:19px;
  box-shadow:inset 0 1px 0 rgba(190,235,222,.08), 0 5px 14px rgba(0,0,0,.45);
  transition:border-color .16s,transform .16s,box-shadow .16s;
}
.ask img{display:block;width:33px;height:26px}
.ask:hover{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(190,235,222,.14), 0 6px 18px rgba(0,0,0,.5),
             0 0 20px rgba(111,194,174,.18)}
.ask:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Modelled on the nav's HOME pill: a rounded capsule, not an outline box. */
.sbtn{
  font:inherit;font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);
  height:36px;padding:0 20px;border-radius:18px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#1B2926 0%,#131E1B 100%);
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(190,235,222,.08), 0 6px 16px rgba(0,0,0,.45);
  transition:border-color .16s,transform .16s,color .16s;
}
.sbtn:hover{border-color:var(--accent);transform:translateY(-2px)}
.sbtn:active{transform:translateY(0)}
.sbtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sbtn[disabled]{color:var(--ink-3);border-color:var(--line);cursor:default;
  transform:none;box-shadow:none}
.sbtn.go{height:44px;padding:0 28px;border-radius:22px;font-size:.74rem;
  border-color:var(--accent-dim)}
/* The one destructive control with no undo behind it — colored to say so
   before the click, not after. */
.sbtn.crit{color:var(--crit);border-color:var(--crit)}
.sbtn.crit:hover{border-color:var(--crit);color:var(--crit)}

/* ================= the console coming up =================
   ⚠️ Shared, because the boot happens at the front door and the front door is
   whatever page you asked for. Page-local would mean four copies.

   The whole thing is one centred column of monospace, because that is what a
   machine reporting on itself looks like. No logo, no spinner, no progress bar
   — a progress bar would be the lie the sequence is carefully not telling. */
.boot{
  position:fixed;inset:0;z-index:200;
  /* ⚠️ `stretch`, not `flex-start`. flex-start shrink-wraps each child to its
     intrinsic width, and "NO CAPSULEER REGISTERED" then wrapped to three lines
     in the middle of an empty screen. The text is left-aligned by the container,
     not by the child sizing itself. */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:0 clamp(28px,9vw,180px);text-align:center;
  background:
    radial-gradient(ellipse 70% 60% at 30% 45%, rgba(111,194,174,.055), transparent 70%),
    #050807;
  transition:opacity .26s ease-out;
}
.boot.gone{opacity:0;pointer-events:none}

/* ⚠️ The dotted-leader lines are a COLUMN of aligned rows, so the block is
   centred but its rows stay left-aligned inside it — centring each row
   individually would make the leaders ragged and stop them reading as a list. */
.boot .lines{display:flex;flex-direction:column;gap:5px;text-align:left;
  transition:opacity .24s ease-out}
.boot .lines.gone{opacity:0}
.boot .l{
  font-family:var(--mono);font-size:.86rem;line-height:1.6;color:var(--ink-2);
  /* Reserve the line's height before it types, or each new line shoves the
     block upward and the whole thing jitters. */
  min-height:1.6em;
}
.boot .l.dim{color:var(--ink-3)}

/* ⚠️ NOT absolutely positioned. That was tried: `top:50%; translateY(-50%)`
   inside this flex container stretched the box to the FULL height of the screen
   — an abspos flex child stretches in the block axis — so "half its own height"
   was half the viewport and the text landed hard against the top edge.
   The checklist is REMOVED before this types, so the container's own
   justify-content:center centres it with no help at all. */
.boot .verdict{
  font-family:var(--display);font-variation-settings:"wdth" 118;font-weight:600;
  /* Sized to the LONGEST verdict — "NO CAPSULEER REGISTERED" at wdth 118 — so
     the line never breaks and never shrinks the others to suit it. */
  font-size:clamp(1.5rem,3.4vw,2.6rem);letter-spacing:-.02em;line-height:1.05;
  min-height:1.05em;color:var(--ink);white-space:nowrap;
}
.boot .verdict.linkup{color:var(--accent)}
.boot .verdict.nolink{color:var(--ink-2)}
.boot .verdict.nopilot{color:var(--warn)}
/* In flow, under the verdict — the container centres the pair together. */
.boot .who{font-family:var(--mono);font-size:.95rem;color:var(--ink-3);min-height:1.4em}

/* The unregistered screen. One thing to do, and nothing else on it. */
.ask-link{max-width:56ch;margin:auto;padding:60px 0;display:flex;flex-direction:column;
  align-items:flex-start;gap:18px}
.ask-link .hd{font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:600;
  font-size:2.2rem;letter-spacing:-.02em;color:var(--ink)}
.ask-link p{font-size:.98rem;line-height:1.65;color:var(--ink-2);margin:0}
.ask-link .fine{font-family:var(--mono);font-size:.74rem;line-height:1.6;color:var(--ink-3)}
.ask-link .sbtn{text-decoration:none;display:inline-flex;align-items:center}
.ask-link .linkrow{display:flex;gap:14px;flex-wrap:wrap}
.ask-link .sbtn.quiet{border-color:var(--line-2);color:var(--ink-2);background:none;cursor:pointer;
  font:inherit;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:13px 26px}
.ask-link .sbtn.quiet:hover{border-color:var(--ink-3);color:var(--ink)}
.ask-link b{color:var(--ink);font-weight:500}
/* Quiet on purpose: the sign-in button is the action, this is the escape hatch
   for the minority who hit EVE's header-size error. */
.ask-link .linkhelp{background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:4px}
.ask-link .linkhelp:hover{color:var(--accent)}

/* ================= the console face =================
   Settled on Personal 2026-09-04, shared from Social onward. The rule: every
   readout on a screen is also the button for the panel that explains it, so the
   page fits without scrolling and nothing on it is passive.

   ⚠️ Here rather than in a page's <style> because the second screen to use them
   would otherwise have been a copy, and a copy is how two screens quietly stop
   matching. Page-specific panel innards stay with their page. */

/* ---- the four stacked readouts, filling the location panel's height ----
   Home station, ship, jump clones, augmentations. Each is a readout you can
   read without pressing and a button that brings up the detail — which is the
   whole interaction language of this screen. No artwork: the one picture on the
   face is where you actually are. */
.pxstack{display:flex;flex-direction:column;gap:8px;min-width:0}
.pxtile{
  font:inherit;text-align:left;cursor:pointer;flex:1;min-height:66px;min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 16px;
  background:linear-gradient(180deg,#17211E 0%,#121A18 100%);
  border:1px solid var(--line-2);
  /* Flat where the accent edge runs, rounded away from it — the nav's shape at
     tile scale, so a pressable thing looks the same everywhere in Argentum. */
  border-left:3px solid var(--accent-dim);border-radius:0 14px 14px 0;
  transition:border-left-color .16s, background .16s, transform .16s;
}
.pxtile:hover{border-left-color:var(--accent);transform:translateX(2px);
  background:linear-gradient(180deg,#1B2825 0%,#141D1B 100%)}
.pxtile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pxtile .k{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
.pxtile .v{font-family:var(--body);font-size:.88rem;color:var(--ink);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pxtile .s{font-family:var(--mono);font-size:.63rem;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pxtile .s.warn{color:var(--warn)} .pxtile .s.crit{color:var(--crit)}


/* ---- the bar. The readout IS the button. ----
   It was a passive strip of figures with the detail stacked underneath in
   blocks; now each figure is the face of the panel that explains it. Nothing
   moved — you just stopped having to scroll past everything to reach one thing. */
.pxbar{display:flex;gap:10px;margin:14px 0 0;flex-wrap:wrap}
.pxbtn{
  font:inherit;text-align:left;cursor:pointer;flex:1 1 190px;min-width:0;
  padding:13px 18px 15px;
  background:linear-gradient(180deg,#17211E 0%,#121A18 100%);
  border:1px solid var(--line-2);
  border-left:3px solid var(--accent-dim);border-radius:0 16px 16px 0;
  transition:border-left-color .16s, background .16s, transform .16s;
}
.pxbtn:hover{border-left-color:var(--accent);transform:translateX(2px);
  background:linear-gradient(180deg,#1B2825 0%,#141D1B 100%)}
.pxbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pxbtn .k{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
.pxbtn .v{font-family:var(--mono);font-size:1.24rem;color:var(--ink);margin-top:6px;
  font-variant-numeric:tabular-nums;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pxbtn .v.a{color:var(--accent)}
.pxbtn .v.warn{color:var(--warn)} .pxbtn .v.crit{color:var(--crit)} .pxbtn .v.ok{color:var(--pos)}
.pxbtn .s{font-family:var(--mono);font-size:.63rem;color:var(--ink-3);margin-top:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pxbtn .s.warn{color:var(--warn)}

/* Inside a panel. The list markup below (.grp, .q, .clone, .attr, .hist) is
   unchanged from when these were blocks on the page — only where they are
   rendered moved. */
.pxnote{font-family:var(--mono);font-size:.8rem;color:var(--ink-3);line-height:1.7;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
/* A row of figures at the head of a panel: the summary, then the detail under
   it. Same idea as the bar, one level in. */
.pxsum{display:flex;gap:38px;flex-wrap:wrap;margin-bottom:20px;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.pxsum .n{font-family:var(--mono);font-size:1.22rem;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-top:5px}
.pxsum .n.pos{color:var(--pos)} .pxsum .n.neg{color:var(--crit)}

.empty{font-family:var(--mono);font-size:.9rem;color:var(--ink-3);padding:8px 0;line-height:1.6}

/* A panel wide enough for two panes — a list, and what the list opens. The mail
   screen needs it; nothing else does yet. */
.compose.wide{width:min(1180px,calc(100vw - 36px))}

/* The composer is a screen the console brings out, not a web modal.
   Everything here follows the nav's language, because that is where Argentum's
   visual system already lives: capsules with a rounded end and a heavy accent
   edge, generous height, wide tracking, depth from an inset highlight over a
   drop shadow. The first version was 0.6rem squares with hairlines and read as
   a settings dialog. */
.cscrim{position:fixed;inset:0;z-index:70;background:rgba(4,7,6,.76)}
.compose{
  /* Anchored near the top rather than centred. A centred box re-centres every
     time a line is added, so answering a question shoved the whole panel both
     up and down at once - which is most of what made it feel edged. Top-anchored
     it simply grows downward, and the header never moves. */
  position:fixed;z-index:71;top:11vh;left:50%;transform:translateX(-50%);
  width:min(820px,calc(100vw - 36px));max-height:82vh;overflow-y:auto;
  background:linear-gradient(180deg,#131C1A 0%,#0C1210 100%);
  border:1px solid var(--line-2);
  /* Flat where the accent edge runs, rounded away from it — the same asymmetry
     the nav pills use, at panel scale. */
  border-left:5px solid var(--accent-dim);
  border-radius:0 22px 22px 0;
  box-shadow:inset 0 1px 0 rgba(190,235,222,.10), 0 30px 80px rgba(0,0,0,.8),
             0 0 0 1px rgba(0,0,0,.5), 0 0 40px rgba(111,194,174,.07);
  padding:0 28px 26px;
}
/* The screen unfolds out of the mark you pressed, and takes its time doing it.
   transform-origin is set inline from the button's position; .in is applied
   only on the first paint after opening, so choosing a chip does not replay it. */
.compose.in{animation:panelout .42s cubic-bezier(.16,.84,.32,1)}
@keyframes panelout{
  0%{opacity:0;transform:translateX(-50%) scale(.34)}
  55%{opacity:1}
  100%{opacity:1;transform:translateX(-50%) scale(1)}
}

/* Answering a step: the answer folds up into its line while the next question
   rises in behind it. Staggered, because both moving at once reads as a cut. */
.tuck.in{animation:tuckin .34s cubic-bezier(.2,.9,.3,1) both}
@keyframes tuckin{
  from{opacity:0;transform:translateY(14px);max-height:0}
  to{opacity:1;transform:translateY(0);max-height:60px}
}
.step.asking.in{animation:stepin .4s .07s cubic-bezier(.2,.9,.3,1) both}
@keyframes stepin{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .tuck.in,.step.asking.in{animation:none}
}
.cscrim.in{animation:scrimin .42s ease-out}
@keyframes scrimin{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .compose.in,.cscrim.in{animation:none}
}

/* Sterling's mark in the panel head, so the panel and the button that opened it
   are visibly the same thing. */
.compose .top-row .mk{opacity:.9;flex:none}

.compose .top-row{
  display:flex;align-items:center;gap:16px;
  margin:0 -28px 22px;padding:0 28px;height:62px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,#1A2724 0%,rgba(19,28,26,0) 70%);
}
.compose .top-row .t{
  font-family:var(--mono);font-size:.92rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);
}

/* ⚠️ A field label inside a panel is bigger than the same label on the page
   behind it. The panel is what you leaned in to read, so it gets the larger
   type, not the smaller — which is the way round the first version had it. */
.compose .fk{font-size:.7rem;letter-spacing:.17em;margin-bottom:8px}
.compose .top-row .x{margin-left:auto}
/* The way deeper in. Both this and Close carry margin-left:auto, so the first
   takes the free space and they end up sitting together at the right. */
.compose .top-row .thru{margin-left:auto;text-decoration:none;
  border-color:var(--accent-dim);color:var(--accent)}

.step{margin-bottom:20px}
.step > .k{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
.step > .k .hint{text-transform:none;letter-spacing:.05em;opacity:.7;margin-left:12px}
.chips{display:flex;flex-wrap:wrap;gap:9px}

/* A capsule, sized to be hit and read from a metre away like the nav pills. */
.chip{
  font:inherit;font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;
  height:44px;padding:0 22px;border-radius:22px;cursor:pointer;
  display:inline-flex;align-items:center;
  color:var(--ink-2);
  background:linear-gradient(180deg,#17211E 0%,#121A18 100%);
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(190,235,222,.07), 0 6px 16px rgba(0,0,0,.45);
  transition:color .2s,border-color .2s,background .2s,transform .2s cubic-bezier(.2,.9,.3,1.1);
}
.chip:active{transform:translateY(1px)}
.chip:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.chip.on{
  color:var(--accent);border-color:var(--accent-dim);
  background:linear-gradient(180deg,#1E2C28 0%,#152220 100%);
  box-shadow:inset 0 1px 0 rgba(190,235,222,.14), 0 6px 18px rgba(0,0,0,.5),
             0 0 22px rgba(111,194,174,.14);
}
/* The chosen option explains itself under the row instead of every capsule
   carrying a caption — the row stays a row of buttons, not a wall of text. */
.step .why{font-family:var(--body);font-size:.8rem;color:var(--ink-3);margin-top:12px;
  line-height:1.5}

/* Sterling talking. Indented behind his mark so the panel reads as a
   conversation rather than as labelled fields. */
.said{display:flex;gap:11px;align-items:flex-start;margin-top:13px;
  font-family:var(--body);font-size:.94rem;line-height:1.6;color:var(--ink-2)}
.said.lead{margin-top:0;margin-bottom:15px;color:var(--ink)}
.said .mk{flex:none;margin-top:3px;opacity:.85}
.said.warn{color:var(--warn)}
.said span{min-height:1.6em}
/* The step being asked gets the accent edge; answered ones fold to a line.
   NOT .live — app.css already owns that class for the header's status dot, and
   it carries display:inline-flex, which quietly turned this into three columns. */
.step.asking{border-left:3px solid var(--accent-dim);padding-left:16px;margin-left:-2px}

.tuck{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;
  height:38px;padding:0 18px;margin-bottom:8px;cursor:pointer;
  background:linear-gradient(90deg,#151E1B 0%,#101715 100%);
  border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:0 19px 19px 0;
  transition:border-color .16s,transform .16s;
}
.tuck:hover{border-left-color:var(--accent);transform:translateX(4px)}
.tuck:hover .e{color:var(--accent)}
.tuck:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tuck .k{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);flex:none;min-width:150px}
.tuck .v{font-family:var(--body);font-size:.82rem;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tuck .e{margin-left:auto;font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);flex:none;transition:color .16s}

.compose .top-row .n{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
  color:var(--ink-3);font-variant-numeric:tabular-nums}

.compose .extra{
  width:100%;font:inherit;font-family:var(--body);font-size:.88rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);
  border-left:3px solid var(--accent-dim);border-radius:0 20px 20px 0;
  padding:11px 18px;
}
.compose .extra:focus{outline:none;border-color:var(--accent);border-left-color:var(--accent)}
.compose .extra::placeholder{color:var(--ink-3);opacity:.65}

.compose .acts{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.compose .err{font-family:var(--mono);font-size:.74rem;color:var(--crit)}
.compose .note{font-family:var(--mono);font-size:.7rem;color:var(--ink-3);line-height:1.65;
  margin-top:12px}
.compose .out{border-top:1px solid var(--line);margin-top:22px;padding-top:18px}
.compose .out .txt{font-size:.92rem;color:var(--ink);line-height:1.65;white-space:pre-wrap;
  overflow-wrap:anywhere;min-height:1.65em}
.compose .out .txt.live::after{content:'';display:inline-block;width:8px;height:1em;
  background:var(--accent);margin-left:4px;vertical-align:-2px;animation:cursor 1s steps(2) infinite}
@keyframes cursor{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.compose .relink{border:1px solid var(--warn);border-left-width:4px;border-radius:0 20px 20px 0;
  background:rgba(217,164,65,.07);padding:16px 20px;margin-top:16px}
.compose .relink p{margin:0 0 13px;font-family:var(--mono);font-size:.74rem;
  color:var(--ink-2);line-height:1.65}
.compose .relink .sbtn{display:inline-block;text-decoration:none}

/* ------------------------------------------------------------------ nav -- */
/* Stacked pills hung off a spine, branch-connected. The structure is borrowed
   from a terminal panel rather than a web menu; the palette stays ours, because
   literal LCARS colours would read as Star Trek instead of Argentum. */
#nav{position:fixed;left:0;bottom:0;width:780px;height:700px;z-index:40;pointer-events:none}

#orb{
  position:absolute;left:74px;bottom:74px;width:72px;height:72px;transform:translate(-50%,50%);
  border-radius:50%;pointer-events:auto;cursor:pointer;border:0;padding:0;
  background:radial-gradient(circle at 34% 28%, #2A3A35 0%, #16201D 46%, #0B100E 100%);
  box-shadow:
    inset 0 2px 3px rgba(190,235,222,.28),
    inset 0 -3px 6px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(111,194,174,.22),
    0 10px 26px rgba(0,0,0,.65),
    0 0 0 1px rgba(0,0,0,.6),
    0 0 26px var(--glow);
  transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s;
  display:grid;place-items:center;
}
#orb:hover{box-shadow:
  inset 0 2px 3px rgba(190,235,222,.4),
  inset 0 -3px 6px rgba(0,0,0,.85),
  inset 0 0 0 1px rgba(111,194,174,.45),
  0 10px 26px rgba(0,0,0,.65),
  0 0 40px rgba(111,194,174,.3)}
#orb:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
#orb img{display:block;width:34px;height:34px;transition:transform .34s cubic-bezier(.2,.8,.3,1)}
#nav.open #orb{transform:translate(-50%,50%) scale(.92)}
/* ⚠️ 60 degrees, not the 135 the hexagon used. The mark has three-fold
   symmetry, so 120 would land back on itself and 135 reads as 15 degrees of
   crooked. 60 puts every arm exactly between where its neighbours were. */
#nav.open #orb img{transform:rotate(60deg)}

#elbow{
  position:absolute;left:110px;bottom:73px;height:2px;width:0;
  background:var(--accent-dim);opacity:.55;
  transition:width .26s cubic-bezier(.2,.8,.3,1);
}
#nav.open #elbow{width:64px}

#spine{
  position:absolute;left:172px;bottom:73px;width:2px;height:0;
  background:linear-gradient(180deg, transparent, var(--accent-dim) 14%, var(--accent-dim));
  transition:height .42s cubic-bezier(.2,.8,.3,1) .16s;opacity:.55;
}
#nav.open #spine{height:var(--spine-h,520px)}

/* HUD hangs off its own limb, straight up from the orb — right goes to a
   feature, up goes home. Rounded both ends so it reads as a different kind of
   thing from the seven, which are panels branching off a spine. */
#spine-top{
  position:absolute;left:73px;bottom:114px;width:2px;height:0;
  background:linear-gradient(180deg, var(--accent-dim), transparent);
  opacity:0;
  transition:height .3s cubic-bezier(.2,.8,.3,1) .22s, opacity .2s .22s;
}
#nav.open #spine-top{height:82px;opacity:.55}

.pill{
  position:absolute;left:172px;display:flex;align-items:center;height:54px;
  pointer-events:none;opacity:0;transform:translateX(-14px);
  transition:opacity .24s, transform .3s cubic-bezier(.2,.9,.3,1.05);
  text-decoration:none;
}
/* ⚠️ :not(.sub) is load-bearing. Without it this rule (1 id, 2 classes) beats
   `.pill.sub{opacity:0}` (2 classes) and the second level is revealed the
   moment the menu opens, before its parent has been pressed. The rule that was
   supposed to reveal it was then redundant, which is why it looked correct in
   isolation. */
#nav.open .pill:not(.sub){opacity:1;transform:translateX(0);pointer-events:auto}

.pill .trace{
  width:34px;height:2px;background:var(--accent-dim);opacity:.6;flex:none;position:relative;
}
.pill .trace::after{
  content:"";position:absolute;right:0;top:-2px;width:6px;height:6px;border-radius:50%;
  background:var(--ground);border:1px solid var(--accent-dim);
}

.pill .body{
  /* Fixed width so every pill is the same object; ragged widths read as a list
     of links rather than a row of panels. */
  display:flex;align-items:center;gap:14px;height:54px;width:232px;padding:0 22px 0 18px;
  border-radius:0 27px 27px 0;
  background:linear-gradient(90deg, #17211E 0%, #121A18 100%);
  border:1px solid var(--line-2);border-left:4px solid var(--accent-dim);
  box-shadow:inset 0 1px 0 rgba(190,235,222,.09), 0 8px 22px rgba(0,0,0,.55);
  color:var(--ink-2);font-family:var(--mono);font-size:.92rem;
  letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
  transition:border-color .16s, color .16s, background .16s, transform .16s;
}
.pill:hover .body,.pill:focus-visible .body{
  color:var(--accent);border-color:var(--accent);border-left-color:var(--accent);
  background:linear-gradient(90deg,#1E2C28 0%,#152220 100%);transform:translateX(6px);
}
.pill:focus-visible{outline:none}
.pill:hover .trace,.pill:focus-visible .trace{opacity:1;background:var(--accent)}
.pill.here .body{color:var(--accent);border-left-color:var(--accent)}

/* ---- the second level's limb: an elbow out of the parent, then a spine the
   children hang off. Same construction as the first level so the two read as
   the same kind of thing at different scales. ---- */
#sub-elbow{
  position:absolute;left:438px;bottom:var(--sub-bottom,284px);height:2px;width:0;
  background:var(--accent-dim);opacity:.55;
  transition:width .24s cubic-bezier(.2,.8,.3,1);
}
#nav.open.subs-open #sub-elbow{width:40px}

#sub-spine{
  position:absolute;left:478px;bottom:var(--sub-bottom,284px);width:2px;height:0;
  background:linear-gradient(180deg, transparent, var(--accent-dim) 18%, var(--accent-dim));
  opacity:.55;transition:height .36s cubic-bezier(.2,.8,.3,1) .12s;
}
#nav.open.subs-open #sub-spine{height:var(--sub-h,290px)}

/* ---- the second level. Smaller and tighter so it reads as nested rather than
   as a second menu of equal weight. Hidden until its parent is opened. ---- */
.pill.sub{height:46px;opacity:0;transform:translateX(-10px);pointer-events:none;
  transition:opacity .2s,transform .26s cubic-bezier(.2,.9,.3,1.05)}
#nav.open.subs-open .pill.sub{opacity:1;transform:translateX(0);pointer-events:auto}
.pill.sub .trace{width:22px}
/* ⚠️ Wide enough for the longest label. "Planetary Industry" overflowed 206px
   by ten pixels, and the fixed width exists precisely so every pill is the same
   object - one that quietly clips its text is worse than a slightly wider row. */
.pill.sub .body{height:46px;width:222px;font-size:.78rem;letter-spacing:.14em;
  padding:0 18px 0 15px;border-radius:0 23px 23px 0;border-left-width:3px}
.pill .chev{margin-left:auto;font-size:.7rem;color:var(--ink-3);
  transition:transform .22s,color .16s}
#nav.subs-open .hassub .chev{transform:rotate(90deg);color:var(--accent)}
#nav.subs-open .hassub .body{border-color:var(--accent);color:var(--accent)}

.pill.home{left:74px;height:34px}
.pill.home .trace{display:none}
.pill.home .body{
  height:34px;width:108px;font-size:.68rem;letter-spacing:.22em;
  border-radius:17px;
  border:1px solid var(--line-2);
  transform:translateX(-50%);
  justify-content:center;padding:0 16px;
}
.pill.home:hover .body,.pill.home:focus-visible .body{transform:translateX(-50%) translateY(-3px)}
.pill.home.here .body{
  color:var(--accent);border-color:var(--accent-dim);
  background:linear-gradient(180deg,#1B2926 0%,#131E1B 100%);
}

/* ⚠️ THE SAME CAPSULE AS HUD, TO THE PIXEL. Matt: *"even if font has to get
   smaller make the pill size same as hud."* It started 170px wide because the
   label is fourteen characters and the type was sized for three of them, and
   two capsules on one limb at two different widths read as two different kinds
   of control rather than as a stack.

   So the box is fixed at HUD's 108×34 and the TYPE gives way: .5rem with the
   letter-spacing pulled almost out. Fourteen monospace characters need about
   86px of that, inside 96px of usable width. Left edge at 20px, which is where
   HUD's centred body lands, so the two stack.

   Amber only on hover and when you are on it: at rest it is one more capsule
   on the limb, and a permanently-lit warning colour in the corner of a screen
   that is glanced at stops meaning anything by the second day. */
.pill.intel{left:20px;height:34px}
.pill.intel .trace{display:none}
.pill.intel .body{
  height:34px;width:108px;font-size:.5rem;letter-spacing:.04em;
  border-radius:17px;border:1px solid var(--line-2);
  justify-content:center;padding:0 6px;
}
.pill.intel:hover .body,.pill.intel:focus-visible .body{
  transform:translateY(-3px);color:var(--warn);border-color:var(--warn);
  background:linear-gradient(180deg,#2A2317 0%,#1B170F 100%);
}
.pill.intel.here .body{
  color:var(--warn);border-color:var(--warn);
  background:linear-gradient(180deg,#2A2317 0%,#1B170F 100%);
}

#scrim{position:fixed;inset:0;z-index:39;
  background:radial-gradient(circle at 74px calc(100% - 74px), rgba(6,9,8,.86), rgba(6,9,8,.58) 42%, rgba(6,9,8,.22));
  opacity:0;pointer-events:none;transition:opacity .3s}
#scrim.on{opacity:1;pointer-events:auto}

@media (prefers-reduced-motion: reduce){
  .pill,#orb,#orb svg,#spine,#spine-top,#elbow,#scrim{transition:none}
  .blip{animation:none}
}