/* ═══════════════════════════════════════════════════════════════════════
   HERMES FIRE CONTROL — design system
   Dark mission-control: near-black slate, mono data readouts,
   amber = armed / staging, emerald = go / long, rose = no-go / short.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --bg:        #07090d;
  --bg-raise:  #0c1016;
  --panel:     #11161f;
  --panel-2:   #161c27;
  --line:      #1d2430;
  --line-soft: #161c26;
  --text:      #d7dee8;
  --text-dim:  #8b95a5;
  --text-mute: #56607080;
  /* Micro-label ink. Lifted from #566070 (~2.6:1 on panels, failed WCAG)
     so table headers / stat keys are legible at 9-10px on laptops. */
  --mute:      #6e798c;

  --amber:   #fbbf24;
  --amber-d: #b45309;
  --green:   #34d399;
  --green-d: #065f46;
  --red:     #fb7185;
  --red-d:   #9f1239;
  --cyan:    #38bdf8;
  --violet:  #a78bfa;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --r: 10px;
  --r-sm: 6px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Keyboard navigation: visible focus ring on every interactive element. */
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 3px; }

html { scrollbar-color: #2a3342 var(--bg); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Faint engineering-grid backdrop */
body.desk-body {
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.018) 1px, transparent 1px);
  background-size: 36px 36px;
}

.mono   { font-family: var(--mono); }
.dim    { color: var(--text-dim); }
.right  { text-align: right; }
.up     { color: var(--green); }
.down   { color: var(--red); }
.flat   { color: var(--text-dim); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #232b39; border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── layout ─────────────────────────────────────────────────────────── */

.desk {
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 12px;
  scroll-margin-top: 58px;   /* anchor-nav jumps clear the sticky sysbar */
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.section-label .lamp { width: 7px; height: 7px; border-radius: 50%; }

/* ── panels ─────────────────────────────────────────────────────────── */

.panel {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-raise) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
}

.panel-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ── system bar ─────────────────────────────────────────────────────── */

.sysbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  margin: 0 -20px 4px;
  background: rgba(7, 9, 13, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  /* 9/2/26 Jordan: the bar is fixed-height. It used to be `overflow-x: auto`,
     which also made it a vertical scroll container, so the arm-picker menu
     grew the bar instead of spilling over the page. Horizontal overflow on
     narrow screens is now handled by hiding items (see the media queries),
     and the dropdown escapes the bar via overflow: visible. */
  overflow: visible;
  min-height: 47px;
  box-sizing: border-box;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: #fff;
}
.brand .glyph {
  color: var(--amber);
  font-size: 13px;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.7);
}
.brand small {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--amber);
}

.sys-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
}
.sys-item b { color: var(--text); font-weight: 600; }

.lamp {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mute);
  flex: none;
}
.lamp.ok    { background: var(--green); box-shadow: 0 0 8px rgba(52, 211, 153, 0.8); }
.lamp.warn  { background: var(--amber); box-shadow: 0 0 8px rgba(251, 191, 36, 0.8); }
.lamp.err   { background: var(--red);   box-shadow: 0 0 8px rgba(251, 113, 133, 0.8); }
.lamp.pulse { animation: lampPulse 2s ease-in-out infinite; }
/* Steady-state lamps in the sysbar: pulse is reserved for degraded states
   (warn/err) so a healthy screen isn't full of movement. */
.sysbar .lamp.ok.pulse { animation: none; }

@keyframes lampPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.sys-spacer { flex: 1; }

/* The sysbar is a single fixed-height line. Below 1600px, shed the clock,
   brand subtitle, and lamp labels so the nav links stay on-screen on common
   laptop widths. */
@media (max-width: 1600px) {
  .sysbar { gap: 12px; }
  .sys-clock,
  .sysbar .brand small,
  .sysbar .sys-item .si-k { display: none; }
}

/* Always-visible P&L readout: the number you should never scroll to find. */
.sys-pnl {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raise);
  white-space: nowrap;
}
.sys-pnl .k { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: var(--mute); }
.sys-pnl .sep { color: var(--line); font-weight: 400; }

/* Anchor nav: one click to each zone of the desk. */
a.sys-anchor {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-decoration: none;
  padding: 4px 7px;
  border-radius: var(--r-sm);
}
a.sys-anchor:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }

.sys-clock {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.05em;
}

.phase-chip {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-dim);
}
.phase-chip.rth   { color: var(--green); border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.07); }
.phase-chip.pre,
.phase-chip.after,
.phase-chip.globex,
.phase-chip.break { color: var(--amber); border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.07); }

.tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-dim);
  text-transform: uppercase;
}

/* Chip hardening (applies to every pill-like element in the build):
   never stretched into an oval by a flex/grid parent, never wider than the
   container — long labels truncate with an ellipsis (full text in title=). */
.tag, .pill, .phase-chip, .fc-mode, .src-pill,
.debrief-status-line span {
  display: inline-block;
  align-self: center;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.tag-admin { color: var(--cyan); border-color: rgba(56,189,248,.4); }
.tag-user  { color: var(--text-dim); }
.tag-dry   { color: var(--amber); border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.06); }
.tag-live  { color: var(--green); border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.06); }
.tag-ver   { color: var(--violet); border-color: rgba(167,139,250,.4); }
.tag-router       { color: var(--text-dim); border-color: rgba(148,163,184,.35); }
.sys-version-select {
  max-width: 170px;
  color: var(--violet);
  border-color: rgba(167,139,250,.4);
}

/* backtest parameter dials */
.bt-params { border: 1px solid #1d2430; border-radius: var(--r-sm); padding: 10px 12px; margin-top: 8px; }
.bt-params-note { font-size: 10.5px; margin-bottom: 10px; }
.bt-params-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}
.bt-param-group { display: flex; flex-direction: column; gap: 8px; }
.bt-param-group-name {
  font-size: 10px; letter-spacing: .12em; color: var(--violet);
  border-bottom: 1px solid #1d2430; padding-bottom: 3px;
}
.bt-param {
  border: 1px solid #1d2430; border-radius: var(--r-sm); padding: 7px 9px;
  display: flex; flex-direction: column; gap: 4px;
}
.bt-param.overridden { border-color: rgba(251,191,36,.55); background: rgba(251,191,36,.04); }
.bt-param.opa-inert { border-color: rgba(248,113,113,.45); background: rgba(248,113,113,.035); }
.bt-param-head { display: flex; align-items: baseline; gap: 8px; font-size: 11px; }
.bt-param-head .dim { margin-left: auto; font-size: 9.5px; }
.bt-param-ctl { display: flex; align-items: center; gap: 8px; }
.bt-param-ctl input[type="range"] { flex: 1; accent-color: var(--violet); min-width: 0; }
.bt-param-val { font-size: 11px; min-width: 52px; text-align: right; }
.bt-param-help { font-size: 9.5px; line-height: 1.45; }
.bt-param-clear {
  background: none; border: none; color: var(--amber); cursor: pointer;
  font: inherit; font-size: 12px; padding: 0 2px;
}
.bt-params-foot { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.bt-params-foot .bt-run-overrides { flex: 1; min-width: 280px; }
.bt-switch { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.bt-switch input { accent-color: var(--green); }

/* manual stop (blotter open rows) */
.btn-exit {
  background: transparent; color: var(--red);
  border: 1px solid rgba(248,113,113,.5); border-radius: 3px;
  font: inherit; font-size: 10px; letter-spacing: .08em;
  padding: 1px 8px; margin-left: 8px; cursor: pointer;
}
.btn-exit:hover { background: rgba(248,113,113,.12); }
.btn-exit.arm {
  background: var(--red); color: #0b0f17; font-weight: 700;
  animation: exit-arm-blink 0.6s step-start infinite;
}
.btn-exit.inflight { opacity: .6; cursor: wait; }
.exit-err { color: var(--red); font-weight: 700; margin-left: 4px; cursor: help; }
/* 10/21/26 Jordan: DIAMOND HANDS runner toggle next to EXIT */
.btn-dh {
  background: transparent; color: var(--muted, #8b95a7);
  border: 1px solid rgba(139,149,167,.5); border-radius: 3px;
  font: inherit; font-size: 10px; letter-spacing: .08em;
  padding: 1px 8px; margin-left: 8px; cursor: pointer;
}
.btn-dh:hover { background: rgba(96,165,250,.12); }
.btn-dh.on { color: #0b0f17; background: #60a5fa; border-color: #60a5fa; font-weight: 700; }
.btn-dh.inflight { opacity: .6; cursor: wait; }
@keyframes exit-arm-blink { 50% { opacity: .65; } }
.router-trend     { color: var(--green); border-color: rgba(74,222,128,.45); }
.router-mixed     { color: var(--amber); border-color: rgba(251,191,36,.45); }
.router-chop      { color: var(--red);   border-color: rgba(248,113,113,.45); }

a.sys-link {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: all .15s;
}
a.sys-link:hover { color: var(--text); border-color: #2c3648; }

/* ── fire-control grid ──────────────────────────────────────────────── */

/* Wide screens pair the ticker cards with the live log (consumed together
   during RTH); below 1360px the band stacks back to a single column. */
.fire-band {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 2fr);
  gap: 16px;
  align-items: stretch;
}
.fire-band > .term { display: flex; flex-direction: column; min-height: 0; }
/* height:0 (not auto) keeps the log's content out of the grid row's
   intrinsic size — the row is sized by the ticker cards, and the log pane
   flex-grows to match them and scrolls internally. */
.fire-band > .term .term-body { flex: 1 1 auto; height: 0; min-height: 300px; }
@media (max-width: 1360px) {
  /* minmax(0,1fr): a bare 1fr floors at the cards' 480px min-content and
     overflows narrow viewports. */
  .fire-band { grid-template-columns: minmax(0, 1fr); }
  .fire-band > .term .term-body { height: 320px; flex: none; }
}

/* Watchlist: one row per ticker, stacked (Stocks-style). */
.fc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-content: start;
}
/* Grid/flex items default to min-width:auto — wide unwrappable content
   (chart canvases, the log toolbar) would force tracks past the viewport. */
.fc-card, .fire-band > .term, .fire-band > .fc-grid { min-width: 0; }

.fc-card {
  position: relative;
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-raise) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0;
  overflow: hidden;
  transition: border-color .4s, box-shadow .4s;
}
.fc-card.collapsed:hover { border-color: #2c3648; }
.fc-card.armed {
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: 0 0 32px rgba(251, 191, 36, 0.07), inset 0 0 40px rgba(251, 191, 36, 0.02);
}
.fc-card.engaged {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 32px rgba(56, 189, 248, 0.07), inset 0 0 40px rgba(56, 189, 248, 0.02);
}

/* Watchlist-row header (Stocks-style): identity · sparkline · price+badge ·
   state pill + conviction bar · chevron. Clicking expands the full detail. */
.fc-head {
  display: grid;
  grid-template-columns: minmax(88px, 1fr) minmax(70px, 1.4fr) auto minmax(108px, auto) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
}
.fc-card:not(.collapsed) .fc-head { border-bottom: 1px solid var(--line-soft); }
.fc-ticker {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}
.fc-sub {
  font-size: 10.5px;
  color: var(--mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-headspark { min-width: 0; }
.fc-headspark svg { width: 100%; height: 38px; display: block; }
.fc-quote { text-align: right; }
.fc-price {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 8px;
  margin-top: 3px;
}
.badge.up   { background: var(--green); color: #06231a; }
.badge.down { background: var(--red); color: #2d060e; }
.badge.flat { background: #1a2230; color: var(--text-dim); }
.fc-state { display: grid; gap: 6px; justify-items: end; }
.fc-mode {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--mute);
}
.fc-mode.scanning { color: var(--text-dim); }
.fc-mode.armed    { color: var(--amber); border-color: rgba(251,191,36,.5); background: rgba(251,191,36,.08); animation: lampPulse 1.6s ease-in-out infinite; }
.fc-mode.engaged  { color: var(--cyan);  border-color: rgba(56,189,248,.5);  background: rgba(56,189,248,.08); }

.fc-body { padding: 14px 16px 16px; display: grid; gap: 14px; }

/* arming rail: NEUTRAL → BIASED → ARMED → FIRE */
.rail { display: flex; gap: 6px; }
.rail-seg {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 7px 0 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  color: var(--mute);
  background: rgba(255, 255, 255, 0.012);
  position: relative;
  transition: all .3s;
}
.rail-seg.done   { color: var(--text-dim); border-color: #2a3342; background: rgba(255,255,255,.03); }
.rail-seg.active { color: #0b0e14; font-weight: 800; }
.rail-seg.active.s-neutral { color: var(--text-dim); border-color: #34405a; background: #1a2230; }
.rail-seg.active.s-biased  { background: linear-gradient(180deg, #67e8f9, #38bdf8); border-color: var(--cyan); box-shadow: 0 0 16px rgba(56,189,248,.35); }
.rail-seg.active.s-armed   { background: linear-gradient(180deg, #fde68a, #fbbf24); border-color: var(--amber); box-shadow: 0 0 18px rgba(251,191,36,.45); animation: lampPulse 1.4s ease-in-out infinite; }
.rail-seg.active.s-fire    { background: linear-gradient(180deg, #6ee7b7, #34d399); border-color: var(--green); box-shadow: 0 0 18px rgba(52,211,153,.5); }

/* conviction gauge */
.gauge { display: grid; gap: 5px; }
.gauge-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}
.gauge-labels b { color: var(--text); font-size: 12px; }
.gauge-track {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: #0a0e15;
  border: 1px solid var(--line);
  overflow: visible;
}
.gauge-fill {
  position: absolute;
  inset: 2px auto 2px 2px;
  width: 0%;
  border-radius: 5px;
  background: linear-gradient(90deg, #1f2a3d, var(--cyan));
  transition: width .6s cubic-bezier(.4, 0, .2, 1), background .4s;
}
.gauge-fill.hot  { background: linear-gradient(90deg, #92610e, var(--amber)); box-shadow: 0 0 12px rgba(251,191,36,.45); }
.gauge-fill.over { background: linear-gradient(90deg, #065f46, var(--green)); box-shadow: 0 0 12px rgba(52,211,153,.5); }
.gauge-thr {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 2px;
  background: var(--red);
  box-shadow: 0 0 6px rgba(251, 113, 133, 0.8);
}
.gauge-thr::after {
  content: 'THR';
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.1em;
}

/* go / no-go gate lights */
.gates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.gate {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.012);
  min-width: 0;   /* tiles shrink on narrow viewports; text truncates */
}
.gate-name, .gate-val, .gate-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gate-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--mute);
}
.gate-val { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text); }
.gate-sub { font-family: var(--mono); font-size: 9px; color: var(--mute); }

/* engaged-mode strip */
.engage-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--r-sm);
  background: rgba(56, 189, 248, 0.04);
}
.engage-cell { display: grid; gap: 2px; align-content: start; }
.engage-cell .k {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--mute);
}
.engage-cell .v { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.engage-cell .v.stop-armed { color: var(--amber); }

/* ── per-arm telemetry sections (8/9/26 multi-arm desk) ─────────────── */

.fc-arms { display: grid; gap: 10px; }
.fc-arms-empty {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.1em;
  padding: 14px 4px;
  text-align: center;
}
.fc-arm {
  display: grid;
  gap: 10px;
  padding: 10px 12px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.008);
  min-width: 0;
  transition: border-color .4s;
}
.fc-arm.armed   { border-color: rgba(251, 191, 36, 0.45); background: rgba(251,191,36,.02); }
.fc-arm.engaged { border-color: rgba(56, 189, 248, 0.45); background: rgba(56,189,248,.02); }
.fc-arm.stale   { opacity: .55; }
/* Registered arm that hasn't published its first telemetry row yet. */
.fc-arm.awaiting { opacity: .6; border-style: dashed; }
.fc-arm-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fc-arm-head .pill-ver {
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-arm-dir {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.fc-arm-dir.up   { color: var(--green); }
.fc-arm-dir.down { color: var(--red); }
.fc-arm-age {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--mute);
  white-space: nowrap;
}
.rail-mini .rail-seg { padding: 4px 0 3px; font-size: 9px; letter-spacing: 0.1em; }
/* Arm-published key indicators reuse the .gate tile look. */
.fc-ind { display: grid; gap: 8px; min-width: 0; }
.fc-ind[data-kind="custom"] {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.gate-val.warn { color: var(--amber); }
.fc-arm-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* head: one dot per monitored arm, colored by its arming stage */
.fc-armdots {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  flex-wrap: wrap;
  max-width: 108px;
}
.fc-armdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2a3342;
}
.fc-armdot.biased { background: var(--cyan); }
.fc-armdot.armed  { background: var(--amber); animation: lampPulse 1.4s ease-in-out infinite; }
.fc-armdot.fire   { background: var(--green); }
.fc-armdot.stale  { opacity: .35; }

/* sysbar arm multi-select */
.arm-picker { position: relative; }
.arm-picker-btn { color: var(--violet); border-color: rgba(167,139,250,.4); white-space: nowrap; }
.arm-picker-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 80;
  min-width: 240px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px;
  display: grid;
  gap: 2px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
}
/* 9/2/26 Jordan: closed by default. The author `display: grid` above beat the
   UA `[hidden] { display: none }`, so the menu rendered open on every load. */
.arm-picker-menu[hidden] { display: none; }
.arm-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  min-width: 0;
}
.arm-picker-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arm-picker-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
.arm-picker-item input { accent-color: var(--violet); flex: none; }
.arm-picker-item.all { border-bottom: 1px solid var(--line); margin-bottom: 4px; padding-bottom: 8px; }
.arm-picker-empty {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mute);
  padding: 6px;
}

/* narrative line under the card */
.fc-narrative {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-dim);
  border-top: 1px solid var(--line-soft);
  padding: 9px 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── log terminal ───────────────────────────────────────────────────── */

.term {
  background: #05070a;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.term-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;      /* filters wrap instead of overflowing the panel */
  gap: 10px;
  row-gap: 6px;
  padding: 9px 14px;
  background: var(--bg-raise);
  border-bottom: 1px solid var(--line);
}
.term-head .term-select, .term-head .term-input { min-width: 0; max-width: 100%; }
.term-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}
.term-head .spacer { flex: 1; }
.term-btn, .term-input, .term-select {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--bg);
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  cursor: pointer;
  transition: all .15s;
}
.term-btn:hover { color: var(--text); border-color: #2c3648; }
.term-btn.active { color: var(--amber); border-color: rgba(251,191,36,.5); }
.term-input { cursor: text; width: 180px; }
.term-input:focus { outline: none; border-color: var(--cyan); color: var(--text); }

.term-body {
  height: 320px;
  overflow-y: auto;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.65;
}
.log-line { display: flex; gap: 10px; white-space: pre-wrap; word-break: break-word; }
.log-ts   { color: var(--mute); flex: none; }
.log-lvl  { flex: none; width: 52px; font-weight: 700; }
.log-msg  { color: #aeb9c9; }
.lvl-INFO    .log-lvl { color: var(--cyan); }
.lvl-WARNING .log-lvl { color: var(--amber); }
.lvl-ERROR   .log-lvl, .lvl-CRITICAL .log-lvl { color: var(--red); }
.lvl-DEBUG   .log-lvl { color: var(--mute); }
.lvl-WARNING .log-msg { color: #e8d29a; }
.lvl-ERROR   .log-msg, .lvl-CRITICAL .log-msg { color: #f3b3bd; }
.log-line.hl-fire  .log-msg { color: var(--green); font-weight: 600; }
.log-line.hl-exit  .log-msg { color: var(--amber); font-weight: 600; }

/* ── P&L desk ───────────────────────────────────────────────────────── */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.seg button {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: transparent;
  color: var(--text-dim);
  border: none;
  border-right: 1px solid var(--line);
  padding: 6px 13px;
  cursor: pointer;
  transition: all .15s;
}
.seg button:last-child { border-right: none; }
.seg button:hover { color: var(--text); background: rgba(255,255,255,.03); }
.seg button.active {
  color: #0b0e14;
  background: linear-gradient(180deg, #fde68a, var(--amber));
  font-weight: 700;
}
/* Anchor variant — the sysbar desk switcher (EQUITIES / INDEX SIM). */
/* flex:none — the packed sysbar would otherwise crush the seg (its
   overflow:hidden lets flexbox shrink it below min-content). */
.sysbar .seg { flex: none; }
.seg a {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-decoration: none;
  border-right: 1px solid var(--line);
  padding: 4px 11px;
  transition: all .15s;
}
.seg a:last-child { border-right: none; }
.seg a:hover { color: var(--text); background: rgba(255,255,255,.03); }
.seg a.active {
  color: #0b0e14;
  background: linear-gradient(180deg, #fde68a, var(--amber));
  font-weight: 700;
}
.filter-bar select, .filter-bar input[type="date"] {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px 9px;
  color-scheme: dark;
  /* A long <option> label must not set the select's width on phones. */
  max-width: 100%;
  min-width: 0;
}
.filter-bar .spacer { flex: 1; }

.btn-ghost {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px 13px;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.btn-ghost:hover { color: var(--text); border-color: #2c3648; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.stat-card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-raise) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 15px;
  display: grid;
  gap: 4px;
  /* Equal-height grid rows must not stretch card content apart. */
  align-content: start;
}
.stat-k {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--mute);
  text-transform: uppercase;
}
.stat-v { font-family: var(--mono); font-size: 24px; font-weight: 700; color: var(--text); }
.stat-s { font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
/* Headline metric (total P&L) reads first. */
.stat-card.hero .stat-v { font-size: 30px; }

.chart-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 16px;
}
@media (max-width: 1100px) { .chart-grid { grid-template-columns: 1fr; } }
.chart-box { height: 300px; width: 100%; }

/* tables — every .table sits in a .table-wrap so wide tables scroll
   horizontally (momentum scrolling on touch) instead of crushing columns */
.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.table { width: 100%; border-collapse: collapse; }
.table th {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }

.pill {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.pill-long  { color: var(--green); border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.06); }
.pill-short { color: var(--red);   border-color: rgba(251,113,133,.4); background: rgba(251,113,133,.06); }
.pill-ver   { color: var(--violet); border-color: rgba(167,139,250,.35); }
.pill-open  { color: var(--amber); border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.07); }

/* Exit-category pills: scannable blotter, full reason in the tooltip. */
.pill-exit-stop   { color: var(--red);      border-color: rgba(251,113,133,.45); background: rgba(251,113,133,.07); }
.pill-exit-step   { color: var(--amber);    border-color: rgba(251,191,36,.45);  background: rgba(251,191,36,.07); }
.pill-exit-hwm    { color: var(--violet);   border-color: rgba(167,139,250,.4);  background: rgba(167,139,250,.06); }
.pill-exit-opa    { color: var(--cyan);     border-color: rgba(56,189,248,.4);   background: rgba(56,189,248,.06); }
.pill-exit-struct { color: var(--text-dim); border-color: rgba(148,163,184,.3); }
.pill-exit-flat   { color: var(--text-dim); border-color: var(--line); }

/* open trades pinned to the top of the blotter */
.row-open td { background: rgba(251,191,36,.03); }
.row-open td.quote-live {
  color: var(--cyan);
  background: rgba(56,189,248,.035);
}

/* ── backtest lab ───────────────────────────────────────────────────── */

.bt-row { cursor: pointer; }
.bt-row-active td { background: rgba(167,139,250,.06); }
.bt-row-active td:first-child { box-shadow: inset 2px 0 0 var(--violet); }
.pill-golden {
  color: var(--amber);
  border-color: rgba(251,191,36,.5);
  background: rgba(251,191,36,.08);
}
.bt-check { accent-color: var(--violet); cursor: pointer; }
.panel-title-flex { display: flex; align-items: center; gap: 8px; }
.panel-title-flex .spacer { flex: 1; }

/* new-run launcher */
.bt-run-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 8px 0 4px;
}
.bt-run-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--text-dim);
}
.bt-run-form .term-input, .bt-run-form .term-select { width: 150px; }
.bt-run-form .bt-run-overrides { flex: 1; min-width: 260px; }
.bt-run-form .bt-run-overrides .term-input { width: 100%; }
#bt-run-go:disabled { opacity: .45; cursor: wait; }
.bt-job { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.bt-job-head { display: flex; align-items: center; gap: 10px; }
.bt-job-head .spacer { flex: 1; }
.bt-job-log {
  margin: 8px 0 0;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px 10px;
  background: #0a0e14;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
}

/* account strip */
.acct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

/* Tradier paper order ticket */
.tradier-ticket label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--mute);
}
.tradier-order-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  align-items: end;
}
.tradier-order-grid .term-input,
.tradier-order-grid .term-select { width: 100%; }
.tradier-contract-row {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(260px, 2fr);
  gap: 12px;
  align-items: end;
}
.tradier-contract-row .term-select { width: 100%; }
.tradier-preview {
  margin-top: 10px;
  min-height: 140px;
  max-height: 280px;
  overflow-y: auto;
  padding: 10px 12px;
  background: #0a0e14;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--text-dim);
  white-space: pre-wrap;
}
@media (max-width: 800px) {
  .tradier-contract-row { grid-template-columns: 1fr; }
}

/* Manual trade (index sim) */
.trade-chart-panel {
  margin-bottom: 14px;
}
.trade-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 8px;
}
.trade-chart-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.trade-chart-spot {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}
.trade-chart-change {
  font-size: 12px;
  font-family: var(--mono);
}
.trade-chart-change.up { color: var(--green); }
.trade-chart-change.down { color: var(--red); }
.trade-chart-status {
  margin-left: auto;
  font-size: 10px;
}
.trade-chart {
  height: 300px;
  width: 100%;
}
@media (max-width: 800px) {
  .trade-chart { height: 240px; }
}
.trade-band {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 980px) {
  .trade-band { grid-template-columns: 1fr; }
}
.chain-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.chain-meta { font-family: var(--mono); font-size: 10px; color: var(--mute); }
.trade-chain-table tbody tr { cursor: pointer; }
.trade-chain-table tbody tr:hover td { background: rgba(255,255,255,.03); }
.trade-chain-table tr.atm td {
  box-shadow: inset 0 1px 0 rgba(56,189,248,.35), inset 0 -1px 0 rgba(56,189,248,.35);
}
.trade-chain-table tr.sel td { background: rgba(251,191,36,.07) !important; }
.trade-chain-table tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--amber); }
.trade-chain-table tr.rec td { background: rgba(251,191,36,.04) !important; }
.badge-rec {
  display: inline-block;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  color: #0b0e14;
  background: linear-gradient(180deg, #fde68a, var(--amber));
  vertical-align: middle;
}
.warn-flag {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(251,191,36,.45);
  border-radius: var(--r-sm);
  background: rgba(251,191,36,.06);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--amber);
  line-height: 1.5;
}
.tk-contract {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  margin-bottom: 4px;
}
.tk-contract b { font-size: 17px; color: #fff; }
.tk-contract .q { font-size: 12px; }
.tk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  align-items: end;
  margin-top: 12px;
}
.tk-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--mute);
}
.tk-grid .term-input,
.tk-grid .term-select { width: 100%; }
.exit-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.exit-opt {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  display: grid;
  gap: 3px;
}
.exit-opt .t {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-dim);
}
.exit-opt .s { font-size: 10.5px; color: var(--mute); line-height: 1.4; }
.exit-opt.on {
  border-color: rgba(52,211,153,.55);
  background: rgba(52,211,153,.05);
}
.exit-opt.on .t { color: var(--green); }
.exit-plan {
  margin-top: 12px;
  border: 1px solid rgba(52,211,153,.3);
  border-radius: var(--r-sm);
  background: rgba(52,211,153,.03);
  padding: 11px 13px;
}
.exit-plan-title {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--green);
  margin-bottom: 8px;
}
.exit-plan-rows { display: grid; gap: 6px; }
.ep-row {
  display: flex;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  align-items: baseline;
  flex-wrap: wrap;
}
.ep-row .k {
  color: var(--mute);
  width: 118px;
  flex: none;
  font-size: 9.5px;
  letter-spacing: .08em;
}
.ep-row .v { color: var(--text); }
.ep-row .n { color: var(--mute); font-size: 10px; }
.trade-preview-box {
  margin-top: 12px;
  min-height: 60px;
  padding: 10px 12px;
  background: #0a0e14;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-dim);
  white-space: pre-wrap;
}
.trade-preview-box.ok { border-color: rgba(52,211,153,.45); color: var(--green); }
.trade-preview-box.err { border-color: rgba(248,113,113,.45); color: var(--red); }
.trade-preview-box.pending { border-color: rgba(56,189,248,.45); color: var(--cyan); }
.trade-preview-box.blocked { border-color: rgba(251,191,36,.45); color: var(--amber); }
.ticket-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.btn-submit {
  flex: 1;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #0b0e14;
  background: linear-gradient(180deg, #fde68a, var(--amber));
  border: none;
  border-radius: var(--r-sm);
  padding: 12px;
  cursor: pointer;
}
.btn-submit:disabled { opacity: .45; cursor: not-allowed; }
.trade-guard {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.7;
}
.src-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(56,189,248,.45);
  color: var(--cyan);
  background: rgba(56,189,248,.07);
  vertical-align: middle;
}
.spread-warn { color: var(--amber); }
.chain-meta.chain-pulse { color: var(--cyan); transition: color .4s ease; }

/* entry cost — live risk readout on trade ticket */
.trade-cost-panel {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(251, 191, 36, .35);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, rgba(251, 191, 36, .07) 0%, rgba(12, 16, 22, .4) 100%);
  display: grid;
  gap: 10px;
}
.trade-cost-panel.over-cap {
  border-color: rgba(251, 113, 133, .55);
  background: linear-gradient(180deg, rgba(251, 113, 133, .08) 0%, rgba(12, 16, 22, .4) 100%);
}
.trade-cost-panel.validated {
  border-color: rgba(52, 211, 153, .45);
}
.trade-cost-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
}
.trade-cost-k {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--amber);
}
.trade-cost-v {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
}
.trade-cost-s {
  font-family: var(--mono);
  font-size: 10px;
  flex: 1;
  min-width: 140px;
}
.trade-cost-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 520px) {
  .trade-cost-stats { grid-template-columns: 1fr; }
}
.trade-cost-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--mono);
}
.trade-cost-stat .k {
  font-size: 8.5px;
  letter-spacing: .1em;
  color: var(--mute);
}
.trade-cost-stat .v {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.trade-cost-stat .v.warn { color: var(--amber); }
.trade-cost-stat .v.over { color: var(--red); }

/* generic buttons */
.btn-danger {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--red);
  background: rgba(251, 113, 133, 0.06);
  border: 1px solid rgba(251, 113, 133, 0.35);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  cursor: pointer;
}
.btn-danger:hover { background: rgba(251, 113, 133, 0.14); }

/* flash messages */
.flash {
  font-family: var(--mono);
  font-size: 11.5px;
  text-align: center;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  margin-bottom: 4px;
}
.flash-err { color: var(--red);   background: rgba(251,113,133,.07); border: 1px solid rgba(251,113,133,.3); }
.flash-ok  { color: var(--green); background: rgba(52,211,153,.07);  border: 1px solid rgba(52,211,153,.3); }

/* ── auth pages ─────────────────────────────────────────────────────── */

.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(251, 191, 36, 0.05), transparent),
    linear-gradient(rgba(56, 189, 248, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 36px 36px, 36px 36px;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-raise) 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 36px 32px;
  display: grid;
  gap: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.auth-brand { text-align: center; display: grid; gap: 6px; }
.auth-glyph {
  font-size: 26px;
  color: var(--amber);
  text-shadow: 0 0 18px rgba(251, 191, 36, 0.8);
}
.auth-brand h1 {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #fff;
}
.auth-brand h1 span { color: var(--amber); }
.auth-sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  color: var(--mute);
}

.auth-form { display: grid; gap: 9px; }
.auth-form label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: 6px;
}
.auth-form input {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  transition: border-color .15s;
}
.auth-form input:focus { outline: none; border-color: var(--amber); }
.auth-form button {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #0b0e14;
  background: linear-gradient(180deg, #fde68a, var(--amber));
  border: none;
  border-radius: var(--r-sm);
  padding: 11px;
  margin-top: 12px;
  cursor: pointer;
  transition: filter .15s, transform .1s;
}
.auth-form button:hover { filter: brightness(1.08); }
.auth-form button:active { transform: scale(0.985); }

.auth-foot {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
}
.auth-foot a { color: var(--amber); text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

/* admin */
.admin-wrap { max-width: 980px; margin: 40px auto; padding: 0 20px; display: grid; gap: 18px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; }
.admin-head h1 {
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 0.2em;
  color: #fff;
}
.admin-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 18px; }
@media (max-width: 800px) { .admin-grid { grid-template-columns: 1fr; } }

/* connection-lost banner */
.conn-banner {
  position: fixed;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--red);
  background: rgba(20, 8, 12, 0.95);
  border: 1px solid rgba(251, 113, 133, 0.45);
  border-radius: 999px;
  padding: 8px 18px;
  display: none;
}
.conn-banner.show { display: block; animation: lampPulse 1.6s ease-in-out infinite; }

/* ── collaborator debrief ───────────────────────────────────────────── */

.debrief-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}
.debrief-hero p,
.debrief-info-card p,
.debrief-version p {
  color: #b9c3d3;
  line-height: 1.65;
}
.debrief-meta { margin-top: 10px; font-size: 11px; }
.debrief-callout {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  max-width: 360px;
}
.debrief-version-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 16px;
}
/* min-width:0 lets cards shrink to the track — a nowrap pill inside must
   truncate rather than widen the whole page on phones. */
.debrief-version-grid > *,
.debrief-grid > * { min-width: 0; }
/* Version cards are <details>: summary shows head + status + stats,
   the role/entry/exit logic expands on click. */
.debrief-version { align-content: start; }
.debrief-version > summary {
  display: grid;
  /* minmax(0,1fr): nowrap pills truncate instead of inflating the column */
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  cursor: pointer;
  list-style: none;
}
.debrief-version > summary::-webkit-details-marker { display: none; }
.debrief-version > summary:hover .debrief-chevron { color: var(--text); }
.debrief-version-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.debrief-version-tags {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 60%;
}
.debrief-version-tags .debrief-chevron { flex: none; }
.debrief-chevron {
  color: var(--text-dim);
  font-size: 10px;
  transition: transform .15s;
}
.debrief-version[open] .debrief-chevron { transform: rotate(180deg); }
.debrief-version-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}
/* Title area wins the width fight; the holding-period tag truncates. */
.debrief-version-head > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.debrief-version h2 { overflow-wrap: anywhere; }
.debrief-version h2 {
  font-family: var(--mono);
  font-size: 20px;
  letter-spacing: .04em;
}
.debrief-hypothesis {
  border-left: 2px solid rgba(251, 191, 36, .55);
  padding-left: 12px;
}
.debrief-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--text-dim);
}
.debrief-status-line span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
}
.debrief-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.debrief-stat {
  display: grid;
  gap: 2px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  background: rgba(255, 255, 255, .012);
}
.debrief-stat span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .13em;
  color: var(--mute);
  text-transform: uppercase;
}
.debrief-stat b {
  font-family: var(--mono);
  font-size: 13px;
}
.debrief-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.debrief-two-col h3 {
  margin: 10px 0 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.debrief-list {
  display: grid;
  gap: 7px;
  margin-left: 18px;
  color: #b9c3d3;
}
.debrief-list li { padding-left: 2px; }
.debrief-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 14px;
}
.debrief-info-card {
  display: grid;
  gap: 8px;
  align-content: start;
}
.debrief-info-card .mono { font-size: 10.5px; }

/* day debrief + decision events panels */
.debrief-run-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.debrief-run-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.debrief-run-controls input[type="date"] {
  background: transparent;
  border: 1px solid #2a3446;
  color: #b9c3d3;
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 3px;
}
.debrief-run-result {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #2a3446;
  border-radius: 4px;
  display: grid;
  gap: 10px;
}
.debrief-run-result p { color: #b9c3d3; line-height: 1.5; }
.decision-group { margin-top: 8px; }
.decision-group summary {
  cursor: pointer;
  padding: 6px 4px;
  color: #b9c3d3;
  font-size: 12px;
}
.decision-group summary:hover { color: #e6ecf5; }
.decision-group .table { margin-top: 6px; }
/* hypothesis ledger loop-back: per-arm fills accrued since ledger entry */
.table td.hyp-prog-cell { white-space: normal; min-width: 220px; }
.hyp-prog { font-size: 10.5px; line-height: 1.6; white-space: nowrap; }
.hyp-prog-arm { color: var(--violet); }
.hyp-evidence {
  margin-top: 4px;
  font-size: 10px;
  white-space: normal;
  word-break: break-word;
}

/* td.decision-reason must out-rank `.table td { white-space: nowrap }`.
   min-width stops nowrap neighbors from crushing the prose column to a
   sliver — the table overflows into .table-wrap's scrollbar instead. */
.decision-reason,
.table td.decision-reason {
  min-width: 300px;
  max-width: 560px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.5;
  color: #8b96a8;
}

@media (max-width: 900px) {
  .debrief-hero { grid-template-columns: 1fr; }
  .debrief-callout { justify-content: flex-start; max-width: none; }
  .debrief-two-col { grid-template-columns: 1fr; }
  .debrief-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── view shell: left rail (desktop) + bottom tab bar (mobile) ──────── */
/* Pages using the shell put the sysbar at body level (no .desk negative
   margins) and wrap sections in main .view containers. */

body.shell-body .sysbar { margin: 0; }

.shell { display: flex; align-items: stretch; }

/* "navrail" not "rail" — .rail is already the arming rail inside fc-cards. */
.navrail {
  width: 76px;
  flex: none;
  position: sticky;
  top: 47px;                       /* below the sticky sysbar */
  height: calc(100vh - 47px);
  background: var(--bg-raise);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 0;
}
.navrail-btn {
  width: 62px;
  padding: 9px 0 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--mute);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.navrail-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.navrail-btn:hover { color: var(--text-dim); background: rgba(255, 255, 255, 0.03); }
.navrail-btn.active { color: var(--amber); border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.05); }

.content {
  flex: 1;
  min-width: 0;
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

main .view { display: none; }
main .view.active { display: block; }

.tabbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(12, 16, 22, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
}
.tabbar-inner { display: flex; justify-content: space-around; }
.tab-btn {
  flex: 1;
  max-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--mute);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 4px 0;
}
.tab-btn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.tab-btn.active { color: var(--amber); }

/* ── day P&L hero (desk view) ───────────────────────────────────────── */
/* "day-hero" not "hero" — .hero is already a stat-card modifier. */
/* Two columns: headline + intraday equity chart + range pills on the
   left, the three headline stats stacked on the right. */

.day-hero {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);
  gap: 16px;
  margin-top: 14px;
}
.day-hero-main {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-raise) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px 12px;
  min-width: 0;
}
.hero-k {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--mute);
}
.hero-v {
  font-family: var(--mono);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.hero-s { font-family: var(--mono); font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.hero-chart { height: 160px; margin-top: 10px; }

.pills { display: flex; gap: 6px; margin-top: 10px; }
.pill-btn {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 13px;
  cursor: pointer;
}
.pill-btn:hover { color: var(--text); }
.pill-btn.active {
  color: #0b0e14;
  background: linear-gradient(180deg, #fde68a, var(--amber));
  border-color: var(--amber);
}

.hero-stats { display: grid; gap: 10px; align-content: start; }
.hero-stats .stat-card { padding: 12px 15px; }
.hero-stats .stat-v { font-size: 22px; }

/* ── collapsible fire-control cards (watchlist rows) ────────────────── */

.fc-head { cursor: pointer; user-select: none; }
.fc-card.collapsed .fc-body,
.fc-card.collapsed .fc-narrative { display: none; }
.fc-chevron {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mute);
  transition: transform 0.2s;
}
.fc-card.collapsed .fc-chevron { transform: rotate(-90deg); }

@media (max-width: 900px) {
  .navrail { display: none; }
  .tabbar { display: block; }
  .content { padding: 0 12px calc(92px + env(safe-area-inset-bottom)); }
  .hero-v { font-size: 34px; }
  .day-hero { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
  .hero-stats .stat-v { font-size: 17px; }
  /* Watchlist row reflows: identity · spark · price; state drops to a
     second full-width line (prototype's wl-mobile-state). */
  .fc-head { grid-template-columns: minmax(80px, 1fr) minmax(80px, 1.2fr) auto auto; }
  .fc-state {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-items: initial;
  }
  .fc-state .fc-armdots { flex: 1; justify-content: flex-start; max-width: none; }
}

/* ── phone layout ───────────────────────────────────────────────────── */

/* Larger tap targets on touch devices (44px-ish hit areas). */
@media (pointer: coarse) {
  .term-btn, .btn-ghost, .seg button, a.sys-link { padding-top: 8px; padding-bottom: 8px; }
  .btn-exit { padding: 6px 12px; }
  .filter-bar select, .filter-bar input[type="date"] { padding: 9px; }
}

@media (max-width: 700px) {
  .desk { padding: 0 12px 40px; }
  /* 9/2/26: the bar no longer scrolls sideways (see .sysbar), so on a phone
     it wraps instead of clipping — every lamp and link stays reachable. */
  .sysbar { gap: 8px 12px; padding: 9px 12px; margin: 0 -12px 4px; flex-wrap: wrap; }
  /* The desk is glanced at on the phone: clock and anchor links give way
     to the health lamps, P&L readout, and nav links. */
  .sys-clock, a.sys-anchor { display: none; }
  /* P&L readout jumps to the front of the bar — visible without scrolling. */
  .brand { order: -2; }
  .brand small { display: none; }
  .sys-pnl { order: -1; }
  /* Log filters: full-width search, selects share rows — nothing runs to
     the container edge on a phone. */
  .term-head .term-input { flex: 1 1 100%; width: auto; }
  .term-head .term-select { flex: 1 1 40%; }
  .term-head .term-title { flex: 1 1 auto; }
  .chart-box { height: 240px; }
  .table th, .table td { padding: 8px 8px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .stat-card.hero .stat-v { font-size: 26px; }
}

/* ── runtime algo controls ───────────────────────────────────────────── */
.cfg-panel { margin-top: 14px; padding: 0; overflow: hidden; }
.cfg-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--line);
}
.cfg-intro { max-width: 800px; margin-top: 7px; font-size: 11px; line-height: 1.55; }
.cfg-head-meta { white-space: nowrap; font-size: 9px; letter-spacing: .06em; }
.cfg-column-head,
.cfg-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) .62fr minmax(190px, 1.2fr) .75fr minmax(150px, .9fr);
  gap: 14px;
  align-items: center;
}
.cfg-column-head {
  padding: 10px 18px;
  color: var(--mute);
  background: rgba(255, 255, 255, .015);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
}
.cfg-row {
  position: relative;
  padding: 14px 18px 11px;
  border-bottom: 1px solid var(--line);
  transition: background .15s ease;
}
.cfg-row:last-child { border-bottom: 0; }
.cfg-row.dirty { background: rgba(251, 191, 36, .025); }
.cfg-row.dirty::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--amber);
}
.cfg-version { color: var(--text); font-size: 12px; font-weight: 600; }
.cfg-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 6px; font-size: 9px; }
.cfg-k {
  display: block;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 5px;
}
.cfg-v { color: var(--text-dim); font-size: 15px; }
.cfg-stepper {
  display: inline-grid;
  grid-template-columns: 34px 54px 34px;
  height: 34px;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg);
}
.cfg-stepper button {
  border: 0;
  background: rgba(255, 255, 255, .025);
  color: var(--text-dim);
  font: 17px var(--mono);
  cursor: pointer;
}
.cfg-stepper button:first-child { border-right: 1px solid var(--line); }
.cfg-stepper button:last-child { border-left: 1px solid var(--line); }
.cfg-stepper button:hover:not(:disabled) { color: var(--amber); background: rgba(251, 191, 36, .06); }
.cfg-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.cfg-stepper input {
  width: 54px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: center;
  font: 600 14px var(--mono);
  appearance: textfield;
}
.cfg-stepper input::-webkit-inner-spin-button { appearance: none; }
.cfg-stepper input:focus { outline: 1px solid var(--amber); outline-offset: -1px; }
.cfg-effective { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cfg-effective .cfg-k { width: 100%; }
.cfg-effective-v { color: #fff; font-size: 22px; font-weight: 700; }
.cfg-state {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  padding: 2px 5px;
  border: 1px solid var(--line-hi);
  border-radius: 3px;
  color: var(--mute);
  font: 700 7px var(--mono);
  letter-spacing: .08em;
}
.cfg-state.online { color: var(--green); border-color: rgba(52, 211, 153, .3); }
.cfg-state.offline { color: var(--red); border-color: rgba(251, 113, 133, .3); }
.cfg-state.override { color: var(--amber); border-color: rgba(251, 191, 36, .35); }
.cfg-actions { display: flex; align-items: center; gap: 7px; }
.cfg-actions .term-btn { min-width: 64px; padding: 7px 9px; font-size: 8px; }
.cfg-actions .cfg-save:not(:disabled) { border-color: rgba(52, 211, 153, .45); color: var(--green); }
.cfg-actions .cfg-save.confirm:not(:disabled) { border-color: rgba(251, 191, 36, .55); color: var(--amber); }
.cfg-actions .cfg-reset { color: var(--mute); }
.cfg-actions button:disabled { opacity: .3; cursor: not-allowed; }
.cfg-row-note {
  grid-column: 1 / -1;
  min-height: 15px;
  font-family: var(--mono);
  font-size: 9px;
}
.cfg-warning { color: var(--amber); }
.cfg-feedback.ok { color: var(--green); }
.cfg-feedback.err { color: var(--red); }
.cfg-empty { padding: 36px 18px; text-align: center; font: 10px var(--mono); }

@media (max-width: 980px) {
  .cfg-column-head { display: none; }
  .cfg-controls { display: grid; gap: 10px; padding: 10px; }
  .cfg-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
  }
  .cfg-ident, .cfg-row-note { grid-column: 1 / -1; }
  .cfg-actions { justify-content: flex-end; align-self: end; }
}

@media (max-width: 560px) {
  .cfg-head { display: block; }
  .cfg-head-meta { display: block; margin-top: 12px; white-space: normal; }
  .cfg-row { grid-template-columns: 1fr 1fr; }
  .cfg-step-wrap, .cfg-actions { grid-column: 1 / -1; }
  .cfg-actions { justify-content: stretch; }
  .cfg-actions .term-btn { flex: 1; }
}