/* The shared shell — the `:root` palette + reset (moved verbatim out of
   monitor.css) plus the navbar and the `auto 1fr` body grid that gives every
   page a navbar row above its own content (feature #37). */

/* A Refinitiv/Eikon-adjacent palette: a dark SLATE canvas rather than black,
   a calm blue as the single chrome accent, and muted direction colours. The
   restraint is the point — black-and-amber shouts, and a screen you sit in
   front of all day should not. Panels lift one step off the canvas and
   hairline borders do the rest of the separating. */
:root {
  --bg: #171b21;
  --panel: #1e232b;
  --border: #2c333d;
  --text: #dfe3e8;
  --text-dim: #8b94a0;
  --buy: #00a35c;
  --sell: #e5484d;
  --hold: #8b94a0;
  --abstain: #5a6472;
  --incomplete: #d9822b;
  /* The accent for chrome only — selection, focus, the active tab — never for
     data, so it can never be mistaken for a decision or a level. Azure rather
     than periwinkle so it stays distinct from the 1Q crossing lines. */
  --selected: #3fa9d6;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  /* Sans for prose — a full-monospace page reads as a console, and most of
     this app is an analyst's argument, not a grid. Numbers still line up:
     `tabular-nums` below gives every digit the same width without giving up
     a readable typeface. */
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* The places that are genuinely a grid or a file, where a fixed advance is
   worth more than a readable one. */
code, pre, .sum-time, .kv .v, .flag-value, .lens-chart figcaption {
  font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas,
    "Liberation Mono", Menlo, monospace;
}

body {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
}

#navbar {
  display: flex;
  gap: 4px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 0 12px;
  height: 38px;
}

#brand {
  font-size: 13px;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--selected);
  margin-right: 12px;
}

.nav-tab {
  color: var(--text-dim);
  text-decoration: none;
  padding: 4px 10px;
  border-bottom: 2px solid transparent;
}

.nav-tab:hover {
  color: var(--text);
}

.nav-tab[aria-current="page"] {
  color: var(--selected);
  border-bottom: 2px solid var(--selected);
}

/* The Testing tab reads the generated test store, not the live desk, so the
   WHOLE page is white — not a badge on a dark page, which is easy to miss at a
   glance. It is a palette swap, not a second stylesheet: every rule in
   shell.css, monitor.css and docs.css already draws from these variables, so
   overriding them here re-themes the entire page. The rule keys off the store
   the page was rendered from, not the tab's name, so it cannot go out of sync.

   The decision colours (buy/sell/hold/abstain/incomplete) are deliberately
   NOT swapped: one decision must be one colour everywhere, on either theme. */
body[data-store="testing"] {
  --bg: #FFFFFF;
  --panel: #F7F8FA;
  --border: #D8DBE0;
  --text: #131722;
  --text-dim: #6B7280;
  --selected: #131722;
}

body[data-store="testing"] #navbar {
  background: #FFFFFF;
}

body[data-store="testing"] .nav-tab[aria-current="page"] {
  font-weight: 600;
}

body[data-store="testing"] #navbar::after {
  content: "TEST STORE · test_traces/daily-20 · not the live desk";
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

/* Plotly draws its own canvas, so the chart is re-themed in monitor.js
   (`applyChartTheme`) rather than here — same trigger, the `data-store`
   attribute, so the canvas can never stay dark on a white page. */