/* LIL METEORS - the orbital survey console.

   This is an APPLICATION, not a page with a space theme. A fixed console frame: top rail of
   live gauges, a left instrument stack, the viewport, a panel readout on the right, and an
   inspector that slides over the panel when a body is selected. Nothing scrolls except the
   inside of a panel, because a console does not scroll - you switch instruments.

   Ground is #07070A with warm ink on it. The chrome is hairlines and mono labels; every piece
   of visual weight belongs to the viewport. */

:root {
  --void:   #07070A;
  --panel:  #0D0E12;
  --panel2: #12141A;
  --line:   #22252E;
  --line2:  #2E323D;
  --dust:   #8A8F9C;
  --bone:   #E6E2D8;
  --flare:  #E0A64B;
  --impact: #D0654F;
  --cool:   #6E9BD1;

  --top: 54px;
  --left: 168px;
  --panelw: 430px;

  --t-xs: .8rem;    /* mono labels, gauges, captions */
  --t-s:  .9rem;    /* secondary text, controls */
  --t-m:  1rem;     /* body */
  --t-l:  1.15rem;  /* lede, h3 */
  --t-xl: 1.5rem;   /* h2 */

  --f-disp: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@font-face { font-family: "Archivo"; src: url(font/archivo.woff2) format("woff2-variations");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Spline Sans Mono"; src: url(font/mono.woff2) format("woff2-variations");
  font-weight: 300 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--void); color: var(--bone);
  font-family: var(--f-disp); font-weight: 380; font-size: var(--t-m); line-height: 1.6;
  font-variant-numeric: tabular-nums; overflow: hidden;
}
h1, h2, h3 { font-family: var(--f-disp); line-height: 1.04; margin: 0 0 .55em; }
p { margin: 0 0 1rem; }
b { font-weight: 660; } em { font-style: normal; }
a { color: var(--flare); text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--flare); outline-offset: 2px; border-radius: 3px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--flare);
        color: #17150F; padding: .7rem 1.1rem; font-weight: 600; }
.skip:focus { left: 0; }

/* ═══ the frame ═══ */
.shell {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: var(--left) 1fr var(--panelw);
  grid-template-rows: var(--top) 1fr;
  grid-template-areas: "top top top" "nav view panel";
}

.rail { background: var(--panel); border-color: var(--line); }
.rail--top {
  grid-area: top; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 1.6rem; padding: 0 1rem 0 1.15rem;
}
.ident { display: flex; align-items: baseline; gap: .55rem; }
.ident b { font-weight: 820; font-stretch: 112%; font-size: var(--t-s); letter-spacing: .005em; }
.ident__lamp { width: 8px; height: 8px; border-radius: 50%; background: #2c2f38;
  box-shadow: 0 0 0 1px var(--line2); align-self: center; transition: background .7s, box-shadow .7s; }
.ident__lamp.is-lit { background: var(--flare); box-shadow: 0 0 0 1px var(--flare), 0 0 14px var(--flare); }
.ident__sub { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--dust); }

.gauges { display: flex; gap: 1.5rem; margin: 0 auto 0 0; white-space: nowrap; }
.gauges div { display: flex; align-items: baseline; gap: .45rem; white-space: nowrap; }
.gauges dt { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--dust); }
.gauges dd { margin: 0; font-family: var(--f-mono); font-size: var(--t-s); color: var(--bone); }
.gauges .is-hot { color: var(--impact); }

.status { display: flex; align-items: center; gap: .45rem; font-family: var(--f-mono);
  font-size: var(--t-xs); letter-spacing: .09em; color: var(--dust);
  border: 1px solid var(--line2); padding: .28rem .62rem; border-radius: 100px; white-space: nowrap; }
.status__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dust); }

/* left instrument stack */
.rail--left { grid-area: nav; border-right: 1px solid var(--line); padding: .7rem 0;
  display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.tab { display: flex; align-items: baseline; gap: .6rem; width: 100%; text-align: left;
  background: none; border: 0; border-left: 2px solid transparent; color: var(--dust);
  font: inherit; padding: .62rem 1rem; cursor: pointer; transition: color .15s, background .15s; }
.tab:hover { color: var(--bone); background: var(--panel2); }
.tab.is-on { color: var(--bone); border-left-color: var(--flare); background: var(--panel2); }
.tab__k { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--flare); }
.tab__n { font-size: var(--t-s); }

/* the viewport */
.view { grid-area: view; position: relative; overflow: hidden; background: var(--void); }
.view canvas { display: block; width: 100%; height: 100%; }
.view__grain { position: absolute; inset: 0; pointer-events: none; opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation: drift 7s steps(6) infinite; }
@keyframes drift { 0%,100%{background-position:0 0} 25%{background-position:-30px 16px}
  50%{background-position:20px -34px} 75%{background-position:34px 22px} }
@media (prefers-reduced-motion: reduce) { .view__grain { animation: none } }
.view__vig { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 74% 70% at 50% 48%, transparent 34%, rgba(4,4,6,.5) 82%, rgba(3,3,4,.86) 100%); }

.retic { position: absolute; left: 1rem; bottom: 1rem; display: flex; gap: .9rem;
  font-family: var(--f-mono); font-size: var(--t-xs);
  text-shadow: 0 1px 12px rgba(0,0,0,.95); pointer-events: none; }
.retic__n { color: var(--flare); } .retic__s, .retic__r { color: var(--dust); }

.view__hint { position: absolute; right: 1rem; bottom: 1rem; display: flex; gap: .6rem; margin: 0;
  pointer-events: none; }
.key { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--dust);
  border: 1px solid var(--line2); padding: .26rem .6rem; border-radius: 100px;
  background: rgba(7,7,10,.6); }
.key--act::after { content: "tap a body" }
@media (hover: hover) and (pointer: fine) { .key--act::after { content: "click a body" } }
@media (hover: none) { .key--pointer { display: none } }

/* the panel readout */
.panel { grid-area: panel; background: var(--panel); border-left: 1px solid var(--line);
  position: relative; overflow: hidden; }
.pane { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.5rem 1.5rem 3rem; opacity: 0; visibility: hidden;
  transition: opacity .22s; }
.pane.is-on { opacity: 1; visibility: visible; }
.pane h1 { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 880; font-stretch: 112%;
  letter-spacing: -.028em; }
.pane h1 em { color: var(--flare); }
.pane h2 { font-size: var(--t-xl); font-weight: 820; font-stretch: 108%; letter-spacing: -.02em; }
.pane h3 { font-size: var(--t-l); font-weight: 700; margin-top: 1.9rem; }
.pane p { color: #ADA79A; }
.pane p b, .pane p em { color: var(--bone); }
.lede { color: #C6C0B4; font-size: var(--t-l); }
.fine { font-size: var(--t-s); color: var(--dust); margin-top: 1.6rem; padding-top: 1rem;
  border-top: 1px solid var(--line); }

/* readout rows, used by spec and state */
.spec, .state { margin: 1.4rem 0 0; }
.spec > div, .state > div { display: flex; align-items: baseline; gap: 1rem; padding: .6rem 0;
  border-top: 1px solid var(--line); }
.spec > div:last-child, .state > div:last-child { border-bottom: 1px solid var(--line); }
.spec dt, .state dt { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--dust); }
.spec dd, .state dd { margin: 0 0 0 auto; font-family: var(--f-mono); font-size: var(--t-s); }
.state .is-hot { color: var(--impact); }

.ctrls { margin-top: 1.6rem; display: grid; gap: .9rem; }
.ctrl { display: grid; gap: .35rem; font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--dust); }
.ctrl--row { grid-auto-flow: column; justify-content: start; align-items: center; gap: .55rem; }
input[type=range] { width: 100%; accent-color: var(--flare); }
input[type=checkbox] { accent-color: var(--flare); width: 15px; height: 15px; }
.btn { font: inherit; font-size: var(--t-s); background: var(--panel2); color: var(--bone);
  border: 1px solid var(--line2); border-radius: 7px; padding: .5rem .9rem; cursor: pointer;
  justify-self: start; }
.btn:hover { border-color: var(--flare); color: var(--flare); }

.flow { list-style: none; margin: 1.4rem 0 0; padding: 0; counter-reset: f; }
.flow li { counter-increment: f; padding: .85rem 0 .85rem 2.6rem; position: relative;
  border-top: 1px solid var(--line); }
.flow li:last-child { border-bottom: 1px solid var(--line); }
.flow li::before { content: counter(f, decimal-leading-zero); position: absolute; left: 0; top: .95rem;
  font-family: var(--f-mono); font-size: var(--t-xs); color: var(--flare); }
.flow > li > b { display: block; font-size: var(--t-s); color: var(--bone); }
.flow span { color: var(--dust); font-size: var(--t-s); }
.flow span b { color: var(--bone); }

.curve { margin: 1.2rem 0 0; }
.curve canvas { display: block; width: 100%; aspect-ratio: 16/10; }
.curve figcaption, .film figcaption { font-family: var(--f-mono); font-size: var(--t-xs);
  color: var(--dust); margin-top: .6rem; line-height: 1.5; }
.curve figcaption b { color: var(--bone); }
.film { margin: 1.2rem 0 0; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16/9;
  border: 1px solid var(--line); background: #000; }

.empty { border: 1px dashed var(--line2); padding: 1.4rem; }
.empty b { display: block; font-size: var(--t-l); margin-bottom: .4rem; color: var(--bone); }
.empty p { margin: 0; font-size: var(--t-s); }

/* catalogue */
.filters { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; margin: 1.2rem 0 1rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--line); align-items: end; }
.field { display: grid; gap: .3rem; }
.field:first-child { grid-column: 1 / -1; }
.field span { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--dust); }
.field input, .field select { font: inherit; font-size: var(--t-s); background: var(--panel2);
  color: var(--bone); border: 1px solid var(--line2); border-radius: 6px; padding: .45rem .6rem;
  width: 100%; }
.count { grid-column: 1 / -1; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--dust);
  margin: 0; }
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.card { border: 0; padding: 0; background: none; cursor: pointer; display: block; width: 100%;
  text-align: start; color: inherit; font: inherit; }
.card img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px;
  border: 1px solid var(--line); background: var(--panel2); transition: border-color .15s, transform .15s; }
.card:hover img, .card:focus-visible img { border-color: var(--flare); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card:hover img { transform: none } }
.card__n { display: flex; justify-content: space-between; gap: .3rem; font-family: var(--f-mono);
  font-size: var(--t-xs); color: var(--dust); margin-top: .25rem; }
.card__t { color: var(--flare); }
.card__t[data-tier="GRAIL"] { color: var(--impact); }

/* inspector, over the panel */
.insp { position: absolute; inset: 0; grid-area: panel; background: var(--panel);
  border-left: 1px solid var(--line); z-index: 5; overflow-y: auto;
  padding: 1.5rem 1.5rem 3rem; animation: slidein .24s cubic-bezier(.2,.7,.3,1); }
@keyframes slidein { from { opacity: 0; transform: translateX(14px) } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .insp { animation: none } }
.insp img { width: 100%; height: auto; border-radius: 9px; border: 1px solid var(--line);
  margin-bottom: 1rem; }
.insp__x { position: absolute; top: .6rem; right: .8rem; background: none; border: 0;
  color: var(--dust); font-size: var(--t-xl); line-height: 1; cursor: pointer; padding: .2rem .4rem; }
.insp__x:hover { color: var(--bone); }
.insp__rank { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--flare); margin: 0 0 .2rem; }
.insp h2 { font-size: var(--t-xl); margin-bottom: .1rem; }
.insp__title { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--impact);
  letter-spacing: .09em; margin: 0 0 1rem; }
.insp__traits { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem; margin: 0 0 1rem; }
.insp__traits > div { padding: .45rem 0; border-top: 1px solid var(--line); }
.insp__traits dt { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .07em;
  text-transform: uppercase; color: var(--dust); }
.insp__traits dd { margin: .05rem 0 0; font-size: var(--t-s); }
.insp__landed { font-size: var(--t-s); color: var(--dust); padding-top: .8rem;
  border-top: 1px solid var(--line); }

.nojs { padding: 2rem; max-width: 60ch; }

/* ═══ narrow: the console folds. Viewport on top, panel as a sheet below. ═══ */
@media (max-width: 1080px) { :root { --panelw: 340px; --left: 132px; } }
@media (max-width: 860px) {
  body { overflow: auto; }
  .shell { position: static; display: block; }
  .rail--top { position: sticky; top: 0; z-index: 30; gap: .8rem; padding: 0 .8rem;
    overflow-x: auto; }
  .ident__sub { display: none; }
  .gauges { gap: .9rem; }
  /* Six channels as a 3x2 grid, NOT a horizontally scrolling row. As a scroller it silently hid
     channels 05 and 06 off the right edge with no affordance, so Film and State - the panel that
     says none of this has happened yet - were unreachable on a phone. A console must not hide
     its own instruments. */
  .rail--left { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); padding: 0;
    position: sticky; top: var(--top); z-index: 29; }
  .tab { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; width: auto;
    justify-content: center; padding: .58rem .5rem; }
  .tab.is-on { border-left-color: transparent; border-bottom-color: var(--flare); }
  .view { height: 56svh; }
  .panel { border-left: 0; border-top: 1px solid var(--line); position: static; overflow: visible; }
  .pane { position: static; opacity: 1; visibility: visible; display: none; padding: 1.2rem 1.1rem 3rem; }
  .pane.is-on { display: block; }
  .insp { position: fixed; inset: auto 0 0 0; height: 82svh; border-top: 1px solid var(--line2);
    border-radius: 14px 14px 0 0; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}

/* The gauge rail needs 690px to lay out in one line. Below that it was clipped by its own
   overflow-x:auto, so Pot and Epoch sat off-screen behind a swipe nobody would guess at. Wrap it
   to two rows instead and raise --top to match, since --top is what the tab rail sticks to. */
@media (max-width: 620px) {
  :root { --top: 67px; }   /* measured rendered height of the wrapped rail, not guessed */
  .rail--top { flex-wrap: wrap; overflow-x: visible; row-gap: .1rem; column-gap: .8rem;
    align-content: center; padding: .3rem .8rem; }
  .status { order: 2; margin-left: auto; }
  .gauges { order: 3; width: 100%; gap: 0; justify-content: space-between; }
  /* Five gauges do not fit 360px and the row overflowed the document by 62px. Epoch is the only
     one that is not project data - it counts how long YOUR session has been open - so it is the
     one that goes. Bodies, Landed, Active and Pot all survive at every width. */
  /* `.gauges div` (0-1-1) outranks a bare `.g-epoch` (0-1-0), so the first version of this
     rule lost on SPECIFICITY and silently did nothing even though the media query matched.
     Matching the parent selector's shape is the fix, not !important. */
  .gauges .g-epoch { display: none; }
}

/* ── activation ───────────────────────────────────────────────────────────────────────────
   The dormant/active comparison. A table because it IS tabular: two states, four rows of
   consequence. Wrapped so a narrow panel scrolls the table, never the page. */
.cmp { width: 100%; border-collapse: collapse; margin: 1rem 0 0; font-size: var(--t-s);
  display: block; overflow-x: auto; }
.cmp th, .cmp td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line);
  vertical-align: top; }
.cmp thead th { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--dust); font-weight: 400; }
.cmp tbody th { font-weight: 400; color: var(--dust); white-space: nowrap; }
.cmp td { color: #ADA79A; }
.cmp td b { color: var(--flare); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }

/* Activation state on the inspector. Dormant is the honest default and must not look broken:
   it is a quiet hairline, not an error. Active earns the amber. */
.insp__act { font-family: var(--f-mono); font-size: var(--t-xs); line-height: 1.55;
  color: var(--dust); border-left: 2px solid var(--line2); padding: .1rem 0 .1rem .7rem;
  margin: 0 0 .8rem; }
.insp__act.is-on { color: var(--flare); border-left-color: var(--flare); }