/* ==========================================================================
   Crypto Scanner — instrument panel
   --------------------------------------------------------------------------
   This is a monitoring console, not a product page. The system's own exit
   logic is described as vital signs ("you pull the plug when the vitals say
   the patient is dying"), so the interface is built to be READ like an
   instrument: condensed labels, monospaced readouts, register bands instead
   of floating cards, and one signature element — the momentum vitals trace.

   Chrome accent is amber phosphor. Green / amber / red are reserved strictly
   for the functional health states defined in docs/PREDICTION_RULES.md, so
   colour always carries meaning here rather than decoration.

   Mobile-first. Breakpoints: 40em (tablet), 64em (desktop).
   ========================================================================== */

/* --- Tokens: night (default) ---------------------------------------------- */

:root {
  color-scheme: dark;

  --ink: #0a0d13;
  --panel: #121722;
  --panel-raised: #182031;
  --rule: #212a3a;
  --rule-strong: #2d3950;

  --text: #d5deea;
  --text-dim: #93a1b5;
  --text-mute: #64748b;

  /* Instrument accent: amber phosphor, not the usual terminal green. */
  --phosphor: #ffb020;
  --phosphor-dim: rgba(255, 176, 32, 0.16);
  --phosphor-line: rgba(255, 176, 32, 0.4);

  /* Functional health bands (docs/PREDICTION_RULES.md). */
  --vital-strong: #35c48e;
  --vital-good: #9ccb4a;
  --vital-warn: #e8c33c;
  --vital-risk: #f08a3c;
  --vital-crit: #f2545b;

  --gain: #35c48e;
  --loss: #f2545b;

  --grid-line: rgba(255, 255, 255, 0.035);

  --font-display: "Archivo Expanded", "Archivo", "Helvetica Neue", sans-serif;
  --font-ui: "IBM Plex Sans Condensed", "Roboto Condensed", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --step-0: 0.8125rem;
  --step-1: 1rem;
  --step-2: 1.25rem;
  --step-3: 1.75rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius: 3px;
  --tap: 44px;
  --rail: 2px;
  --max: 1240px;
}

/* --- Tokens: day ----------------------------------------------------------
   Cool engineering grey, deliberately not warm editorial cream: this should
   read like vellum under lab light rather than a magazine spread. */

:root[data-theme="light"] {
  color-scheme: light;

  --ink: #e8eaee;
  --panel: #f7f8fa;
  --panel-raised: #ffffff;
  --rule: #d3d8e0;
  --rule-strong: #b9c1cd;

  --text: #131922;
  --text-dim: #4a566a;
  --text-mute: #6f7d92;

  --phosphor: #a8620a;
  --phosphor-dim: rgba(168, 98, 10, 0.1);
  --phosphor-line: rgba(168, 98, 10, 0.35);

  --vital-strong: #1d9c6c;
  --vital-good: #6f9c22;
  --vital-warn: #a8820c;
  --vital-risk: #c2611c;
  --vital-crit: #c4303a;

  --gain: #1d9c6c;
  --loss: #c4303a;

  --grid-line: rgba(19, 25, 34, 0.05);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --ink: #e8eaee;
    --panel: #f7f8fa;
    --panel-raised: #ffffff;
    --rule: #d3d8e0;
    --rule-strong: #b9c1cd;

    --text: #131922;
    --text-dim: #4a566a;
    --text-mute: #6f7d92;

    --phosphor: #a8620a;
    --phosphor-dim: rgba(168, 98, 10, 0.1);
    --phosphor-line: rgba(168, 98, 10, 0.35);

    --vital-strong: #1d9c6c;
    --vital-good: #6f9c22;
    --vital-warn: #a8820c;
    --vital-risk: #c2611c;
    --vital-crit: #c4303a;

    --gain: #1d9c6c;
    --loss: #c4303a;

    --grid-line: rgba(19, 25, 34, 0.05);
  }
}

/* --- Reset ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--font-ui);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--text);
  background-color: var(--ink);
  /* A faint plotting grid — the console is drawn on graph paper. */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-font-smoothing: antialiased;
}

img, svg, video, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { line-height: 1.1; font-weight: 600; }

a { color: var(--phosphor); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--phosphor);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  position: static;
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: var(--panel-raised);
}

/* --- Shared utilities ------------------------------------------------------ */

.figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.is-strong { color: var(--gain); }
.is-moderate { color: var(--vital-warn); }
.is-weak { color: var(--loss); }
.is-neutral { color: var(--text-mute); }

.hint,
.field__hint {
  font-size: var(--step-0);
  color: var(--text-mute);
}

/* The instrument-panel voice: small, wide-tracked, uppercase. */
.topbar__label,
.panel__meta,
.status-grid__item dt,
.position-card__grid dt,
.signal-card__metrics dt,
.feed__layer,
.vitals__label,
.metric__label,
.channel__name,
.login-form__label,
.settings-group > legend {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* --- Header --------------------------------------------------------------- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
}

.app-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: var(--max);
  padding: var(--space-3) var(--space-4);
  margin: 0 auto;
}

.brand {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.brand:hover { text-decoration: none; }

/* A live phosphor pip — how an instrument shows power-on. */
.brand__mark {
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--phosphor);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--phosphor-dim);
}

.brand__name { white-space: nowrap; }

.header__controls { display: flex; gap: var(--space-2); align-items: center; }

.nav-toggle__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}
.nav-toggle__button span,
.nav-toggle__button span::before,
.nav-toggle__button span::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--text);
}
.nav-toggle__button span::before,
.nav-toggle__button span::after { position: relative; content: ""; }
.nav-toggle__button span::before { top: -5px; }
.nav-toggle__button span::after { top: 3.5px; }

.nav { flex-basis: 100%; }
.nav__list { display: none; flex-direction: column; }
.nav-toggle:checked ~ .nav .nav__list { display: flex; }

.nav__link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-2);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-left: var(--rail) solid transparent;
}
.nav__link:hover { color: var(--text); text-decoration: none; }
.nav__link[aria-current="page"] {
  color: var(--phosphor);
  border-left-color: var(--phosphor);
}

.nav__logout { display: flex; width: 100%; }
.nav__link--button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-left: var(--rail) solid transparent;
}

/* Theme switch — a two-position instrument toggle. */
.theme-switch {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.theme-switch:hover { color: var(--phosphor); border-color: var(--phosphor-line); }
.theme-switch__icon { width: 17px; height: 17px; }
.theme-switch__icon--night { display: none; }

:root[data-theme="light"] .theme-switch__icon--day { display: none; }
:root[data-theme="light"] .theme-switch__icon--night { display: block; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-switch__icon--day { display: none; }
  :root:not([data-theme="dark"]) .theme-switch__icon--night { display: block; }
}

/* --- Layout --------------------------------------------------------------- */

.app-shell { min-height: 100vh; }

.app-main {
  max-width: var(--max);
  padding: var(--space-5) var(--space-4) var(--space-7);
  margin: 0 auto;
}

.app-footer {
  max-width: var(--max);
  padding: var(--space-5) var(--space-4);
  margin: 0 auto;
  font-size: var(--step-0);
  color: var(--text-mute);
  border-top: 1px solid var(--rule);
}

/* --- Status rail ----------------------------------------------------------
   The instrument header: dense, monospaced, always in view. */

.topbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: var(--space-5);
  overflow: hidden;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.topbar__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--panel);
}

.topbar__value {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
}

.status-dot {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--text-mute);
  border-radius: 50%;
}
.status-dot--on {
  background: var(--vital-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vital-strong) 22%, transparent);
}
.status-dot--off {
  background: var(--loss);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--loss) 22%, transparent);
}

/* --- Panels --------------------------------------------------------------- */

.panel {
  padding: var(--space-4);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.panel--spaced { margin-top: var(--space-5); }

.panel__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.panel__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.panel__lead {
  max-width: 62ch;
  margin-top: var(--space-2);
  color: var(--text-dim);
}

.empty-state {
  padding: var(--space-6) var(--space-4);
  font-size: var(--step-0);
  color: var(--text-mute);
  text-align: center;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
}

/* --- Register rows (signals, positions, listings) -------------------------- */

.card-list { display: flex; flex-direction: column; gap: var(--space-3); }

.signal-card,
.position-card,
.listing-row {
  position: relative;
  padding: var(--space-4);
  padding-left: calc(var(--space-4) + 3px);
  background: var(--panel-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

/* Left rail: the only chrome that reads as "live". */
.signal-card::before,
.position-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: var(--phosphor);
}

.signal-card__head,
.position-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  justify-content: space-between;
}

.signal-card__symbol,
.position-card__symbol {
  font-family: var(--font-mono);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.signal-card__badges,
.signal-card__context {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-3);
}

.signal-card__metrics,
.position-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  border-top: 1px solid var(--rule);
}

.signal-card__metrics > div,
.position-card__grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.signal-card__metrics dd,
.position-card__grid dd {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
}

.signal-card__reasons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.signal-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  margin-top: var(--space-4);
  border-top: 1px solid var(--rule);
}

.metric { display: flex; flex-direction: column; gap: 2px; }
.metric__value {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
}
.metric__sub { font-size: var(--step-0); color: var(--text-mute); }

/* --- Badges, stars, countdown --------------------------------------------- */

.badge {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  padding: 3px var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
}
.badge--accent { color: var(--phosphor); border-color: var(--phosphor-line); }
.badge--neutral { color: var(--text-mute); }
.badge--strong { color: var(--gain); border-color: color-mix(in srgb, var(--gain) 45%, transparent); }
.badge--moderate { color: var(--vital-warn); border-color: color-mix(in srgb, var(--vital-warn) 45%, transparent); }
.badge--weak { color: var(--loss); border-color: color-mix(in srgb, var(--loss) 45%, transparent); }
.badge--fill-strong { color: var(--ink); background: var(--gain); border-color: var(--gain); }
.badge--fill-weak { color: var(--ink); background: var(--loss); border-color: var(--loss); }
.badge--regime { text-transform: capitalize; }

.stars {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: 0.08em;
  color: var(--phosphor);
}

.countdown {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  color: var(--text-mute);
}
.countdown--urgent { color: var(--vital-risk); }

/* --- SIGNATURE: momentum vitals -------------------------------------------
   The one place this interface raises its voice. A position's six exit
   signals are drawn as an instrument readout: a trace on a plotting grid
   with one lit pip per channel. Everything else stays quiet so this reads
   first. */

.vitals {
  position: relative;
  padding: var(--space-3);
  margin-top: var(--space-4);
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.vitals__head {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.vitals__score {
  font-family: var(--font-mono);
  font-size: var(--step-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.vitals__verdict { font-size: var(--step-0); color: var(--text-dim); }

.vitals__trace {
  position: relative;
  height: 56px;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 14px 14px;
  border-radius: 2px;
}

.vitals__trace svg { width: 100%; height: 100%; }

.vitals__path {
  fill: none;
  stroke: var(--phosphor);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The trace sweeps in once, the way a monitor wakes. */
@media (prefers-reduced-motion: no-preference) {
  .vitals__path {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: vitals-sweep 1.1s ease-out forwards;
  }
}
@keyframes vitals-sweep { to { stroke-dashoffset: 0; } }

.vitals__channels {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.channel {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: center;
  text-align: center;
}

.channel__pip {
  width: 100%;
  height: 3px;
  background: var(--rule-strong);
  border-radius: 2px;
}
.channel__name { font-size: 0.5625rem; letter-spacing: 0.08em; }

.channel--strong .channel__pip { background: var(--vital-strong); }
.channel--good .channel__pip { background: var(--vital-good); }
.channel--warn .channel__pip { background: var(--vital-warn); }
.channel--risk .channel__pip { background: var(--vital-risk); }
.channel--crit .channel__pip { background: var(--vital-crit); }

/* Legacy gauge markup, restyled to match the instrument. */
.health-gauge { margin-top: var(--space-4); }
.health-gauge__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.health-gauge__label { font-size: var(--step-0); color: var(--text-mute); }
.health-gauge__value {
  font-family: var(--font-mono);
  font-size: var(--step-2);
  font-weight: 600;
}
.health-gauge__track {
  height: 4px;
  overflow: hidden;
  background: var(--rule-strong);
  border-radius: 2px;
}
.health-gauge__fill {
  height: 100%;
  background: var(--vital-strong);
  transition: width 0.5s ease;
}
.health-gauge__fill--yellow { background: var(--vital-warn); }
.health-gauge__fill--orange { background: var(--vital-risk); }
.health-gauge__fill--red { background: var(--vital-crit); }
.health-gauge--green .health-gauge__fill { background: var(--vital-strong); }
.health-gauge--yellow-green .health-gauge__fill { background: var(--vital-good); }

/* --- Stop-loss instruction ------------------------------------------------
   Capital-safety notice, deliberately the loudest non-signature element: if
   this system goes offline, the exchange stop is all that protects a
   position. */

.sl-instruction,
.position-card__reminder {
  padding: var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--step-0);
  color: var(--text);
  background: color-mix(in srgb, var(--vital-risk) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--vital-risk) 40%, transparent);
  border-radius: var(--radius);
}
.sl-instruction__title {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vital-risk);
}
.sl-instruction__body { margin-top: var(--space-1); color: var(--text-dim); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { color: var(--phosphor); border-color: var(--phosphor-line); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--primary {
  color: var(--ink);
  background: var(--phosphor);
  border-color: var(--phosphor);
}
.btn--primary:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--phosphor) 85%, white);
}

.btn--danger { color: var(--loss); border-color: color-mix(in srgb, var(--loss) 45%, transparent); }
.btn--danger:hover { color: var(--ink); background: var(--loss); border-color: var(--loss); }

.btn--ghost { color: var(--text-dim); }
.btn--sm { min-height: 34px; padding: 0 var(--space-3); }
.btn--block { width: 100%; }

/* --- Scanner feed --------------------------------------------------------- */

.collapsible__summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  justify-content: space-between;
  min-height: var(--tap);
  list-style: none;
  cursor: pointer;
}
.collapsible__summary::-webkit-details-marker { display: none; }

.feed {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  margin-top: var(--space-3);
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: var(--step-0);
}

.feed__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule);
  border-left: var(--rail) solid var(--rule-strong);
}
.feed__row:last-child { border-bottom: 0; }
.feed__row--promoted { border-left-color: var(--phosphor); }
.feed__row--signal { border-left-color: var(--vital-strong); }
.feed__row--filtered { border-left-color: var(--text-mute); }
.feed__row--warn { border-left-color: var(--vital-warn); }
.feed__row--danger { border-left-color: var(--vital-crit); }

.feed__time { color: var(--text-mute); }
.feed__symbol { font-weight: 600; }
.feed__text { color: var(--text-dim); }

/* --- Status grid ---------------------------------------------------------- */

.status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.status-grid__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--panel-raised);
}
.status-grid__item dd {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
}
.status-grid__pending { color: var(--text-mute); }

/* --- Listings ------------------------------------------------------------- */

.listing-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  justify-content: space-between;
}
.listing-row__top { display: flex; gap: var(--space-3); align-items: baseline; }
.listing-row__symbol { font-family: var(--font-mono); font-weight: 600; }
.listing-row__age { font-size: var(--step-0); color: var(--text-mute); }

/* --- Notices -------------------------------------------------------------- */

.notice {
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  background: var(--panel-raised);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--text-mute);
  border-radius: var(--radius);
}
.notice__title { font-weight: 700; letter-spacing: 0.04em; }
.notice__list { margin-top: var(--space-2); font-size: var(--step-0); color: var(--text-dim); }
.notice--danger { border-left-color: var(--vital-crit); }
.notice--warn { border-left-color: var(--vital-warn); }
.notice--info { border-left-color: var(--phosphor); }

/* --- Tables --------------------------------------------------------------- */

.table-wrap {
  width: 100%;
  margin-top: var(--space-4);
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.data-table {
  width: 100%;
  min-width: 680px;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  border-collapse: collapse;
}
.data-table th {
  padding: var(--space-3);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-align: left;
  text-transform: uppercase;
  color: var(--text-mute);
  background: var(--panel);
  border-bottom: 1px solid var(--rule-strong);
}
.data-table td { padding: var(--space-3); border-bottom: 1px solid var(--rule); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--panel-raised); }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  margin-top: var(--space-4);
}

.pagination {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-4);
}
.pagination__label { font-size: var(--step-0); color: var(--text-mute); }

/* --- Feature importance --------------------------------------------------- */

.bar-chart { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.bar-chart__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "rank name  value"
    ".    track track";
  gap: var(--space-1) var(--space-3);
  align-items: center;
}
.bar-chart__rank { grid-area: rank; }
.bar-chart__name { grid-area: name; }
.bar-chart__track { grid-area: track; }
.bar-chart__value { grid-area: value; }
.bar-chart__name { font-family: var(--font-mono); font-size: var(--step-0); }
.bar-chart__track { height: 6px; background: var(--rule-strong); border-radius: 2px; }
.bar-chart__fill { height: 100%; background: var(--phosphor); border-radius: 2px; }
.bar-chart__value { font-family: var(--font-mono); font-size: var(--step-0); color: var(--text-mute); }

.retrain__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
}
.retrain__status,
.settings-panel__status { font-size: var(--step-0); color: var(--text-mute); }
.status--ok { color: var(--gain); }
.status--error { color: var(--loss); }
.status--warn, .status--pending { color: var(--vital-warn); }

/* --- Settings ------------------------------------------------------------- */

.settings-panel__form { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-4); }

.settings-group {
  padding: var(--space-4);
  background: var(--panel-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.settings-group > legend { padding: 0 var(--space-2); }

.settings-group label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
  font-size: var(--step-0);
  color: var(--text-dim);
}

.settings-group input[type="number"],
.settings-group input[type="text"],
.settings-group input[type="password"],
.settings-group select,
.field__input {
  min-height: var(--tap);
  padding: 0 var(--space-3);
  /* 16px minimum stops iOS zooming the page on focus. */
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}
.settings-group input:focus,
.settings-group select:focus { border-color: var(--phosphor); outline: none; }

.settings-group__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.settings-group label.field--toggle {
  flex-direction: row;
  gap: var(--space-3);
  align-items: center;
  min-height: var(--tap);
}
.field--toggle input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: var(--phosphor);
}

.settings-panel__sum {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--step-0);
}

.settings-panel__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-4);
}

/* The Settings button scrolls this panel into view; the sticky header would
   otherwise cover its heading. */
.settings-panel { scroll-margin-top: 5rem; }

/* Full-screen overlay on phones (docs/UI.md). */
@media (max-width: 39.99em) {
  .settings-panel.settings--open {
    position: fixed;
    inset: 0;
    z-index: 30;
    overflow-y: auto;
    border-radius: 0;
  }
}

/* --- Login ---------------------------------------------------------------- */

.login-panel {
  max-width: 380px;
  padding: var(--space-6);
  margin: var(--space-7) auto;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.login-form { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); }
.login-form__field { display: flex; flex-direction: column; gap: var(--space-2); }
.login-form__input {
  min-height: var(--tap);
  padding: 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text);
  background: var(--panel-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}
.login-form__input:focus { border-color: var(--phosphor); outline: none; }
.login-form__submit { width: 100%; }
.login-error {
  padding: var(--space-3);
  font-size: var(--step-0);
  color: var(--loss);
  border: 1px solid color-mix(in srgb, var(--loss) 45%, transparent);
  border-radius: var(--radius);
}

/* --- API status ----------------------------------------------------------- */

.api-status-grid { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.api-status-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: var(--step-0);
  border-bottom: 1px solid var(--rule);
}

.health-summary { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; }
.section-toggle { background: none; border: 0; color: var(--text-dim); }
.section-toggle__icon { transition: transform 0.2s ease; }

/* --- Filter bar (history) --------------------------------------------------
   Stacks on a phone so each control gets a full-width tap target; becomes a
   single row once there is width for it. */

.filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-top: var(--space-4);
  background: var(--panel-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.filters__field { display: flex; flex-direction: column; gap: var(--space-2); }
.filters__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.filters__control { width: 100%; }
.filters__actions { display: flex; gap: var(--space-3); }
.filters__actions .btn { flex: 1; }

/* --- Stacked table ---------------------------------------------------------
   Nine columns cannot be read on a 360px screen, and a sideways-scrolling
   table hides the columns that matter. Below 40em each row becomes its own
   record: the pair is the headline, every other cell prints its `data-label`
   beside its value, and a left rail carries the status. The markup is a real
   <table> throughout, so the desktop layout and assistive tech both keep the
   header/cell relationship. */

.data-table--stacked { display: block; min-width: 0; }

/* Visually hidden, still announced. */
.data-table--stacked thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.data-table--stacked tbody,
.data-table--stacked tr,
.data-table--stacked td { display: block; }

.data-table--stacked tr {
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 3px);
  border-bottom: 1px solid var(--rule);
}
.data-table--stacked tbody tr:last-child { border-bottom: 0; }

.data-table--stacked tr::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: var(--rule-strong);
}
.data-table--stacked tr[data-status="active"]::before { background: var(--phosphor); }
.data-table--stacked tr[data-status="taken"]::before { background: var(--gain); }

.data-table--stacked td {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-1) 0;
  border-bottom: 0;
}

.data-table--stacked td::before {
  flex: none;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-mute);
  content: attr(data-label);
}

/* The pair is the record's headline, so it drops the label and takes size. */
.data-table--stacked .data-table__key {
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--rule);
}
.data-table--stacked .data-table__key::before { content: none; }

.data-table__when { color: var(--text-dim); }

/* --- Feature importance ranks ---------------------------------------------- */

.bar-chart-group + .bar-chart-group { margin-top: var(--space-6); }
.bar-chart-group__model {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--phosphor);
}
.bar-chart-group__more { margin-top: var(--space-3); font-size: var(--step-0); color: var(--text-mute); }

/* Rank is real information here — 01 is the feature the model leans on most —
   so it is set as a figure rather than as decoration. */
.bar-chart__rank {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-mute);
}

/* --- Login -----------------------------------------------------------------
   The console is dark until you sign in, so this screen is a standby plate:
   one live pip, one instruction, nothing else competing for attention. */

.login { display: flex; flex-direction: column; gap: var(--space-4); }

.login-panel__plate {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.login-panel__pip {
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--phosphor);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--phosphor-dim);
  animation: standby-pulse 2.6s ease-in-out infinite;
}

@keyframes standby-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 3px var(--phosphor-dim); }
  50% { opacity: 0.55; box-shadow: 0 0 0 7px transparent; }
}

.login-panel__standby {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.login-panel__title { font-size: var(--step-3); }
.login-panel__lead {
  margin-top: var(--space-2);
  font-size: var(--step-0);
  color: var(--text-dim);
}

.login__note {
  max-width: 380px;
  margin: 0 auto;
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--text-mute);
  text-align: center;
}

/* --- Tablet (>= 40em) ------------------------------------------------------ */

@media (min-width: 40em) {
  .nav-toggle__button { display: none; }
  .nav { flex-basis: auto; }
  .nav__list { display: flex; flex-direction: row; gap: var(--space-1); align-items: center; }
  .nav__link {
    padding: 0 var(--space-3);
    border-left: 0;
    border-bottom: var(--rail) solid transparent;
  }
  .nav__link[aria-current="page"] { border-left: 0; border-bottom-color: var(--phosphor); }
  .nav__link--button { width: auto; border-left: 0; }
  .nav__logout { width: auto; }

  .topbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .signal-card__metrics,
  .position-card__grid,
  .status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .app-main { padding: var(--space-6) var(--space-5) var(--space-7); }
  .panel { padding: var(--space-5); }

  /* Filter bar becomes one row, with the actions pinned to the end. */
  .filters { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .filters__field { flex: 1 1 12rem; }
  .filters__actions { flex: 0 0 auto; }
  .filters__actions .btn { flex: 0 0 auto; }

  /* Enough width for the real table: undo the stacked layout. */
  .data-table--stacked { display: table; min-width: 680px; }
  .data-table--stacked thead {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
  }
  .data-table--stacked tbody { display: table-row-group; }
  .data-table--stacked tr { display: table-row; padding: 0; }
  .data-table--stacked tr::before { content: none; }
  .data-table--stacked td {
    display: table-cell;
    padding: var(--space-3);
    border-bottom: 1px solid var(--rule);
  }
  .data-table--stacked td::before { content: none; }
  .data-table--stacked tbody tr:last-child td { border-bottom: 0; }
  .data-table--stacked .data-table__key {
    padding: var(--space-3);
    margin-bottom: 0;
    font-size: var(--step-0);
    border-bottom: 1px solid var(--rule);
  }

  /* Rank, name, bar and value all fit on one line once there is room. */
  .bar-chart__row {
    grid-template-columns: auto minmax(120px, 1fr) 2fr auto;
    grid-template-areas: "rank name track value";
  }

  .login { padding-top: var(--space-6); }
}

/* --- Desktop (>= 64em) ----------------------------------------------------- */

@media (min-width: 64em) {
  .topbar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .signal-card__metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .position-card__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .panel__title { font-size: var(--step-3); }
  .vitals__trace { height: 72px; }
}

/* --- Structural wrappers --------------------------------------------------
   These carry no visual weight of their own; declared so every class in the
   templates has a home and the sheet stays auditable. */

.app-body { display: block; }

.collapsible { display: block; }
.collapsible[open] .collapsible__summary { margin-bottom: var(--space-2); }

/* Shown by default; hidden by the [data-theme="light"] rules above. */
.theme-switch__icon--day { display: block; }