/* ============================================================================
   CORTEX DESIGN SYSTEM v2
   ----------------------------------------------------------------------------
   One set of tokens, one type scale, one spacing scale, one shape language.
   Loaded BEFORE cortex.css so page rules can still override during migration,
   and so nothing here depends on load order to be correct.

   The palette is taken from the Cortex mark: black brushed metal, silver
   plates, and a single hot red edge. That red is an accent of significance -
   active navigation, focus, the one number that matters - and never a
   background. The product is black, charcoal and off-white; the accent earns
   its place by being rare.
   ========================================================================= */

/* Inter, self-hosted. The old sheet asked for Inter and shipped no font file,
   so every screen silently fell back to a system face. One variable woff2
   covers 100-900 and is served from our own origin - no third-party font host
   sees a Cortex user. Licence in fonts/OFL.txt. */
@font-face {
  font-family: "InterCortex";
  src: url("/static/fonts/inter-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- surfaces: five steps, each a real elevation, not decoration ------ */
  /* Five steps within ~4% luminance of each other. A panel should be felt,
     not seen; the reference keeps ground and card almost the same colour and
     lets type do the separating. Wide steps are what turn a page into a grid
     of announced boxes. */
  --c-bg:          #0a0b0e;   /* application ground */
  --c-surface:     #0d0f12;   /* primary panel - barely above ground */
  --c-surface-2:   #111318;   /* secondary / nested */
  --c-elevated:    #16191f;   /* menus, popovers, dialogs - the only layer
                                 that is genuinely above the page */
  --c-sunken:      #07080a;   /* wells, inputs, chart ground */

  /* ---- borders: present at the edge of vision, never a drawn outline ---- */
  --c-line:        #16191e;   /* subtle */
  --c-line-strong: #23272e;   /* interactive edges, focused fields */

  /* ---- type ------------------------------------------------------------- */
  --c-text:        #e9edf2;   /* primary */
  --c-text-2:      #98a2b0;   /* secondary */
  --c-text-3:      #5f6874;   /* muted / metadata */
  --c-text-dim:    #3d444e;   /* disabled */

  /* ---- semantic --------------------------------------------------------- */
  --c-up:          #3fbf86;
  --c-down:        #e5586a;
  --c-warn:        #d9a441;
  --c-info:        #5b9dd9;

  /* ---- brand accent, from the mark's edge light ------------------------- */
  --c-accent:      #c02a3f;
  --c-accent-hi:   #e8394f;   /* hover / emphasis */
  --c-accent-dim:  #7a1a28;   /* borders, rails */
  --c-accent-wash: #1a0d11;   /* the only place accent becomes a surface */

  /* ---- interaction ------------------------------------------------------ */
  --c-hover:       #161a20;
  --c-selected:    #1d2430;
  --c-focus:       #4a86c5;

  /* ---- spacing: 4 / 8 / 12 / 16 / 24 / 32. Nothing else. ---------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px;
  --s4: 16px; --s5: 24px; --s6: 32px;

  /* ---- radii: dense terminal first -------------------------------------- */
  --r-sm: 2px;   /* dense components: chips, cells, small buttons */
  --r-md: 4px;   /* buttons, inputs, menus */
  --r-lg: 6px;   /* popovers, cards */
  --r-xl: 8px;   /* dialogs. Nothing is rounder than this. */

  /* ---- type scale: seven sizes, no more --------------------------------- */
  /* Seven sizes, and the gap between a value and its label is deliberate:
     --t-value against --t-label is roughly 3:1, which is what makes a number
     land before the box around it does. */
  --t-value:   28px;   /* the number a panel exists to show */
  --t-display: 22px;   /* page identity */
  --t-title:   16px;
  --t-section: 13px;
  --t-body:    13px;
  --t-compact: 12px;
  --t-label:   10px;
  --t-micro:   10px;

  --lh-tight: 1.2;
  --lh-body:  1.5;

  --font: "InterCortex", -apple-system, BlinkMacSystemFont, "Segoe UI",
          system-ui, sans-serif;
  /* Market data only. Tabular by construction. */
  --font-num: "InterCortex", ui-monospace, "SF Mono", "Segoe UI Mono", monospace;

  --shell-rail: 212px;
  --shell-top:  48px;
}

/* ---- typography primitives ------------------------------------------- */
.c-display { font: 600 var(--t-display)/var(--lh-tight) var(--font); letter-spacing: -0.02em; color: var(--c-text); }
.c-title   { font: 600 var(--t-title)/var(--lh-tight) var(--font); letter-spacing: -0.01em; color: var(--c-text); }
.c-section { font: 600 var(--t-section)/var(--lh-tight) var(--font); color: var(--c-text); }
.c-body    { font: 400 var(--t-body)/var(--lh-body) var(--font); color: var(--c-text-2); }
.c-compact { font: 400 var(--t-compact)/var(--lh-body) var(--font); color: var(--c-text-2); }
.c-label   { font: 600 var(--t-label)/1.3 var(--font); letter-spacing: 0.08em;
             text-transform: uppercase; color: var(--c-text-3); }
.c-micro   { font: 500 var(--t-micro)/1.3 var(--font); letter-spacing: 0.06em; color: var(--c-text-3); }

/* Every price, percentage, score, count and statistic. Tabular figures mean
   a column of numbers stops jittering as values tick. */
.c-num, .c-num * {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv01" 1;
}

/* ---- buttons: five variants, one geometry ----------------------------- */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  height: 28px; padding: 0 var(--s3);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
  background: var(--c-surface-2); color: var(--c-text-2);
  font: 500 var(--t-compact)/1 var(--font);
  cursor: pointer; white-space: nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.c-btn:hover:not(:disabled) { background: var(--c-hover); color: var(--c-text); border-color: var(--c-line-strong); }
.c-btn:active:not(:disabled) { background: var(--c-selected); }
.c-btn:disabled { color: var(--c-text-dim); border-color: var(--c-line); cursor: not-allowed; }
.c-btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }

.c-btn--primary { background: var(--c-accent); border-color: var(--c-accent); color: #fff; font-weight: 600; }
.c-btn--primary:hover:not(:disabled) { background: var(--c-accent-hi); border-color: var(--c-accent-hi); color: #fff; }
.c-btn--ghost { background: transparent; border-color: transparent; }
.c-btn--ghost:hover:not(:disabled) { background: var(--c-hover); }
.c-btn--danger { border-color: var(--c-accent-dim); color: var(--c-down); }
.c-btn--danger:hover:not(:disabled) { background: #2a1116; color: var(--c-down); }
.c-btn--sm { height: 24px; padding: 0 var(--s2); font-size: var(--t-label); }

.c-icon-btn {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent; color: var(--c-text-3); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.c-icon-btn:hover { background: var(--c-hover); color: var(--c-text); }
.c-icon-btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
.c-icon-btn svg { width: 15px; height: 15px; }
.c-icon-btn[aria-pressed="true"], .c-icon-btn.is-active { background: var(--c-selected); color: var(--c-text); }

/* ---- inputs ------------------------------------------------------------ */
.c-input {
  height: 28px; padding: 0 var(--s3); width: 100%;
  background: var(--c-sunken); color: var(--c-text);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
  font: 400 var(--t-compact)/1 var(--font);
}
.c-input::placeholder { color: var(--c-text-3); }
.c-input:focus { outline: none; border-color: var(--c-focus); }

/* ---- surfaces ---------------------------------------------------------- */
.c-panel {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.c-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--c-line);
}
.c-panel__body { padding: var(--s4); }

/* ---- tables: dense, aligned, scannable --------------------------------- */
.c-table { width: 100%; border-collapse: collapse; }
.c-table thead th {
  position: sticky; top: 0; z-index: 1;
  padding: var(--s2) var(--s3); text-align: left;
  background: var(--c-surface); border-bottom: 1px solid var(--c-line);
  font: 600 var(--t-label)/1.3 var(--font);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-3);
  white-space: nowrap;
}
.c-table tbody td {
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--c-line);
  font: 400 var(--t-compact)/1.4 var(--font); color: var(--c-text-2);
  vertical-align: middle;
}
.c-table tbody tr:hover td { background: var(--c-hover); }
.c-table tbody tr[aria-selected="true"] td { background: var(--c-selected); }
.c-table .num {
  text-align: right; font-family: var(--font-num);
  font-variant-numeric: tabular-nums; color: var(--c-text);
}
.c-table__sort { color: var(--c-text-3); }
.c-table__sort[aria-sort="ascending"], .c-table__sort[aria-sort="descending"] { color: var(--c-text); }

/* ---- status, value direction ------------------------------------------- */
.c-up   { color: var(--c-up); }
.c-down { color: var(--c-down); }
.c-flat { color: var(--c-text-2); }

.c-chip {
  display: inline-flex; align-items: center; gap: var(--s1);
  height: 18px; padding: 0 var(--s2);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sm);
  font: 600 var(--t-micro)/1 var(--font); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--c-text-3); white-space: nowrap;
}
.c-chip--up     { color: var(--c-up);     border-color: #1d4a37; }
.c-chip--down   { color: var(--c-down);   border-color: #4d2029; }
.c-chip--warn   { color: var(--c-warn);   border-color: #4a3a1b; }
.c-chip--accent { color: var(--c-accent-hi); border-color: var(--c-accent-dim); }

/* ---- empty and loading states ------------------------------------------ */
.c-empty {
  display: grid; place-items: center; gap: var(--s2);
  padding: var(--s6) var(--s4); text-align: center;
}
.c-empty strong { font: 600 var(--t-body)/1.3 var(--font); color: var(--c-text-2); }
.c-empty span { font: 400 var(--t-compact)/1.5 var(--font); color: var(--c-text-3); max-width: 44ch; }

.c-skel {
  height: 12px; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-hover) 50%, var(--c-surface-2) 75%);
  background-size: 200% 100%;
  animation: c-shimmer 1.4s ease-in-out infinite;
}
@keyframes c-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .c-skel { animation: none; } }

/* ---- scrollbars: part of the design, not an accident ------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--c-line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--c-line-strong); border-radius: 5px;
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--c-text-dim); background-clip: content-box; }

/* ==========================================================================
   APP SHELL — navigation, topbar, page furniture
   The shell stays quiet so the content dominates. One accent, on the active
   item only; everything else is charcoal and type.
   ========================================================================== */
.charts-workspace ~ *, body[data-workspace=charts] .rail { }  /* charts opts out */

body:not([data-workspace=charts]) .rail {
  width: var(--shell-rail);
  background: var(--c-surface);
  border-right: 1px solid var(--c-line);
  padding: 0;
}
body:not([data-workspace=charts]) .rail .brand {
  display: flex; align-items: center; gap: var(--s3);
  height: var(--shell-top); padding: 0 var(--s4);
  border-bottom: 1px solid var(--c-line);
  text-decoration: none;
}
body:not([data-workspace=charts]) .rail .brand img { width: 26px; height: 26px; }
body:not([data-workspace=charts]) .rail .brand span {
  display: grid; gap: 1px;
  font: 700 var(--t-body)/1 var(--font); letter-spacing: 0.14em; color: var(--c-text);
}
body:not([data-workspace=charts]) .rail .brand small {
  font: 500 8px/1 var(--font); letter-spacing: 0.16em; color: var(--c-text-3);
}
body:not([data-workspace=charts]) .rail nav { padding: var(--s3) var(--s2); }
body:not([data-workspace=charts]) .nav-label {
  padding: var(--s2) var(--s2) var(--s1);
  font: 600 var(--t-micro)/1.3 var(--font);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-dim);
}
body:not([data-workspace=charts]) .rail nav a {
  display: flex; align-items: center; gap: var(--s3);
  height: 30px; padding: 0 var(--s3); margin-bottom: 1px;
  border-radius: var(--r-md); border-left: 2px solid transparent;
  color: var(--c-text-2); text-decoration: none;
  font: 500 var(--t-body)/1 var(--font);
  transition: background .12s ease, color .12s ease;
}
body:not([data-workspace=charts]) .rail nav a:hover { background: var(--c-hover); color: var(--c-text); }
body:not([data-workspace=charts]) .rail nav a.active {
  background: var(--c-selected); color: var(--c-text);
  border-left-color: var(--c-accent);        /* the accent, used once */
}
body:not([data-workspace=charts]) .rail nav a b {
  width: 15px; text-align: center; font-weight: 400; color: var(--c-text-3);
}
body:not([data-workspace=charts]) .rail nav a.active b { color: var(--c-accent-hi); }
body:not([data-workspace=charts]) .rail-foot {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4); border-top: 1px solid var(--c-line);
  font: 500 var(--t-micro)/1.4 var(--font); color: var(--c-text-3);
}

/* ---- topbar ---- */
body:not([data-workspace=charts]) .topbar {
  height: var(--shell-top);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  padding: 0 var(--s4); gap: var(--s3);
}
body:not([data-workspace=charts]) .search-trigger {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); min-width: 300px; height: 28px; padding: 0 var(--s3);
  background: var(--c-sunken); border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md); color: var(--c-text-3);
  font: 400 var(--t-compact)/1 var(--font); cursor: pointer;
}
body:not([data-workspace=charts]) .search-trigger:hover { border-color: var(--c-text-dim); color: var(--c-text-2); }
body:not([data-workspace=charts]) .search-trigger kbd {
  padding: 1px var(--s1); border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm); font: 500 var(--t-micro)/1.4 var(--font-num);
  color: var(--c-text-3);
}
body:not([data-workspace=charts]) .top-meta {
  display: flex; gap: var(--s4);
  font: 500 var(--t-micro)/1 var(--font); letter-spacing: 0.06em; color: var(--c-text-3);
}
body:not([data-workspace=charts]) .connection {
  font: 600 var(--t-micro)/1 var(--font); letter-spacing: 0.08em;
  padding: var(--s1) var(--s2); border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
}
body:not([data-workspace=charts]) .icon-button {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent; color: var(--c-text-3);
}
body:not([data-workspace=charts]) .icon-button:hover { background: var(--c-hover); color: var(--c-text); }

/* ---- page furniture ---- */
body:not([data-workspace=charts]) #workspace { padding: var(--s5) var(--s6); }
body:not([data-workspace=charts]) .page-head { margin-bottom: var(--s5); }
body:not([data-workspace=charts]) .kicker {
  display: block; margin-bottom: var(--s2);
  font: 600 var(--t-micro)/1.3 var(--font);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent-hi);
}
body:not([data-workspace=charts]) #workspace h1 {
  font: 600 var(--t-title)/var(--lh-tight) var(--font);
  letter-spacing: -0.01em; color: var(--c-text); margin: 0 0 var(--s1);
}
body:not([data-workspace=charts]) #workspace h2 {
  font: 600 var(--t-section)/var(--lh-tight) var(--font); color: var(--c-text); margin: 0;
}
body:not([data-workspace=charts]) #workspace h1 + p {
  font: 400 var(--t-body)/var(--lh-body) var(--font); color: var(--c-text-3); margin: 0;
}

/* ==========================================================================
   FORMS — one geometry for every control. 28px high, 4px radius, sunken
   ground, visible focus. No browser defaults anywhere.
   ========================================================================== */
body:not([data-workspace=charts]) input[type=text],
body:not([data-workspace=charts]) input[type=search],
body:not([data-workspace=charts]) input[type=password],
body:not([data-workspace=charts]) input[type=number],
body:not([data-workspace=charts]) input[type=date],
body:not([data-workspace=charts]) input[type=time],
body:not([data-workspace=charts]) select,
body:not([data-workspace=charts]) textarea {
  height: 28px; padding: 0 var(--s3);
  background: var(--c-sunken); color: var(--c-text);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
  font: 400 var(--t-compact)/1 var(--font);
  transition: border-color .12s ease, background .12s ease;
}
body:not([data-workspace=charts]) textarea { height: auto; padding: var(--s2) var(--s3); line-height: var(--lh-body); resize: vertical; }
body:not([data-workspace=charts]) input::placeholder,
body:not([data-workspace=charts]) textarea::placeholder { color: var(--c-text-3); }
body:not([data-workspace=charts]) input:hover:not(:disabled),
body:not([data-workspace=charts]) select:hover:not(:disabled) { border-color: var(--c-text-dim); }
body:not([data-workspace=charts]) input:focus,
body:not([data-workspace=charts]) select:focus,
body:not([data-workspace=charts]) textarea:focus {
  outline: none; border-color: var(--c-focus); background: var(--c-surface-2);
}
body:not([data-workspace=charts]) input:disabled,
body:not([data-workspace=charts]) select:disabled,
body:not([data-workspace=charts]) textarea:disabled {
  color: var(--c-text-dim); border-color: var(--c-line); cursor: not-allowed;
}
body:not([data-workspace=charts]) input[aria-invalid="true"],
body:not([data-workspace=charts]) .is-error input { border-color: var(--c-down); }
body:not([data-workspace=charts]) select {
  appearance: none; padding-right: var(--s5);
  background-image: linear-gradient(45deg, transparent 50%, var(--c-text-3) 50%),
                    linear-gradient(135deg, var(--c-text-3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 12px, calc(100% - 9px) 12px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
body:not([data-workspace=charts]) input[type=checkbox],
body:not([data-workspace=charts]) input[type=radio] {
  width: 14px; height: 14px; accent-color: var(--c-accent-hi); cursor: pointer;
}
body:not([data-workspace=charts]) input[type=range] { accent-color: var(--c-accent-hi); height: 20px; }
body:not([data-workspace=charts]) input[type=number] {
  font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right;
}

/* buttons across the app adopt the shared geometry */
body:not([data-workspace=charts]) .button,
body:not([data-workspace=charts]) button.filter-chip,
body:not([data-workspace=charts]) .news-filters button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 28px; padding: 0 var(--s3);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
  background: var(--c-surface-2); color: var(--c-text-2);
  font: 500 var(--t-compact)/1 var(--font); text-decoration: none; cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
body:not([data-workspace=charts]) .button:hover,
body:not([data-workspace=charts]) .news-filters button:hover { background: var(--c-hover); color: var(--c-text); }
body:not([data-workspace=charts]) .button.primary {
  background: var(--c-accent); border-color: var(--c-accent); color: #fff; font-weight: 600;
}
body:not([data-workspace=charts]) .button.primary:hover { background: var(--c-accent-hi); border-color: var(--c-accent-hi); }
body:not([data-workspace=charts]) .news-filters button.active {
  background: var(--c-selected); color: var(--c-text); border-color: var(--c-line-strong);
}
body:not([data-workspace=charts]) :focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }

/* ==========================================================================
   PANELS, TABLES, LISTS — the surfaces that carry the data
   Compact rows, tabular numbers, one divider weight, subtle hover.
   ========================================================================== */
body:not([data-workspace=charts]) .panel,
body:not([data-workspace=charts]) .command-card,
body:not([data-workspace=charts]) .command-stat,
body:not([data-workspace=charts]) .market-tile {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
body:not([data-workspace=charts]) .panel > header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--c-line);
  font: 600 var(--t-body)/1 var(--font); color: var(--c-text);
}
body:not([data-workspace=charts]) .command-card { padding: var(--s5); }
body:not([data-workspace=charts]) .command-card h2 {
  font: 600 var(--t-display)/var(--lh-tight) var(--font) !important;
  letter-spacing: -0.02em; margin: var(--s2) 0 var(--s3);
}
body:not([data-workspace=charts]) .command-card p {
  font: 400 var(--t-body)/var(--lh-body) var(--font); color: var(--c-text-3); margin: 0 0 var(--s4);
}
body:not([data-workspace=charts]) .command-card .actions { display: flex; gap: var(--s2); }

/* market tiles: price first, state second, evidence third */
body:not([data-workspace=charts]) .market-tile {
  display: block; padding: var(--s3) var(--s4); text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
}
body:not([data-workspace=charts]) .market-tile:hover {
  border-color: var(--c-line-strong); background: var(--c-surface-2);
}
body:not([data-workspace=charts]) .market-tile strong {
  font: 700 var(--t-body)/1 var(--font); letter-spacing: 0.04em; color: var(--c-text);
}
body:not([data-workspace=charts]) .market-tile .metric-label {
  display: block; margin-bottom: var(--s1);
  font: 600 var(--t-micro)/1.3 var(--font);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-dim);
}
body:not([data-workspace=charts]) .market-tile p {
  margin: var(--s1) 0 2px; font: 500 var(--t-compact)/1.3 var(--font);
}
body:not([data-workspace=charts]) .market-tile small {
  font: 400 var(--t-micro)/1.4 var(--font); color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}

/* tables everywhere adopt one look */
body:not([data-workspace=charts]) .data-table { width: 100%; border-collapse: collapse; }
body:not([data-workspace=charts]) .data-table th {
  position: sticky; top: 0; z-index: 1;
  padding: var(--s2) var(--s3); text-align: left;
  background: var(--c-surface); border-bottom: 1px solid var(--c-line);
  font: 600 var(--t-micro)/1.3 var(--font);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-3);
  white-space: nowrap;
}
body:not([data-workspace=charts]) .data-table td {
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--c-line);
  font: 400 var(--t-compact)/1.4 var(--font); color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
}
body:not([data-workspace=charts]) .data-table tr:hover td { background: var(--c-hover); }
body:not([data-workspace=charts]) .data-table a { color: var(--c-text); text-decoration: none; font-weight: 600; }
body:not([data-workspace=charts]) .data-table a:hover { color: var(--c-accent-hi); }

/* news terminal rows: dense, scannable, monospaced time column */
body:not([data-workspace=charts]) .news-columns,
body:not([data-workspace=charts]) .news-row {
  display: grid;
  grid-template-columns: 74px 82px minmax(0,1fr) 190px 130px 110px 54px;
  gap: var(--s3); align-items: center;
}
body:not([data-workspace=charts]) .news-columns {
  position: sticky; top: 0; z-index: 1;
  padding: var(--s2) var(--s3); background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  font: 600 var(--t-micro)/1.3 var(--font);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-3);
}
body:not([data-workspace=charts]) .news-row {
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--c-line);
  cursor: pointer; transition: background .1s ease;
}
body:not([data-workspace=charts]) .news-row:hover { background: var(--c-hover); }
body:not([data-workspace=charts]) .news-row > :first-child {
  font: 500 var(--t-micro)/1 var(--font-num); font-variant-numeric: tabular-nums;
  color: var(--c-text-3);
}
body:not([data-workspace=charts]) .news-row strong {
  font: 500 var(--t-compact)/1.45 var(--font); color: var(--c-text);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
body:not([data-workspace=charts]) .news-row span,
body:not([data-workspace=charts]) .news-row small {
  font: 400 var(--t-micro)/1.4 var(--font); color: var(--c-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body:not([data-workspace=charts]) .news-filters {
  display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4);
}

/* ==========================================================================
   MENUS, POPOVERS, DIALOGS, DRAWERS — one system
   ========================================================================== */
body:not([data-workspace=charts]) .drawer aside,
body:not([data-workspace=charts]) .palette {
  background: var(--c-elevated);
  border: 1px solid var(--c-line-strong);
  box-shadow: 0 24px 70px #000000b0;
}
body:not([data-workspace=charts]) .drawer aside { border-radius: 0; padding: var(--s5); }
body:not([data-workspace=charts]) .drawer aside h2 {
  font: 600 var(--t-title)/var(--lh-tight) var(--font) !important;
  letter-spacing: -0.01em; margin: var(--s2) 0 var(--s4);
}
body:not([data-workspace=charts]) .news-detail {
  display: grid; grid-template-columns: 150px 1fr; gap: var(--s2) var(--s4);
  padding: var(--s4) 0; margin: 0;
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
body:not([data-workspace=charts]) .news-detail dt {
  font: 400 var(--t-compact)/1.5 var(--font); color: var(--c-text-3);
}
body:not([data-workspace=charts]) .news-detail dd {
  margin: 0; font: 500 var(--t-compact)/1.5 var(--font); color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
body:not([data-workspace=charts]) .palette { border-radius: var(--r-xl); }
body:not([data-workspace=charts]) .palette input {
  height: 44px !important; font-size: var(--t-section) !important;
  border: 0 !important; border-bottom: 1px solid var(--c-line) !important;
  border-radius: 0 !important; background: transparent !important;
}
body:not([data-workspace=charts]) .palette-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s4); border-radius: var(--r-md);
  font: 400 var(--t-body)/1.4 var(--font); color: var(--c-text-2);
}
body:not([data-workspace=charts]) .palette-item:hover,
body:not([data-workspace=charts]) .palette-item.active { background: var(--c-hover); color: var(--c-text); }
body:not([data-workspace=charts]) .palette footer {
  padding: var(--s2) var(--s4); border-top: 1px solid var(--c-line);
  font: 500 var(--t-micro)/1.4 var(--font); color: var(--c-text-3); gap: var(--s4);
}
body:not([data-workspace=charts]) .modal .backdrop,
body:not([data-workspace=charts]) .drawer .backdrop { background: #000000a8; backdrop-filter: blur(2px); }

/* toast */
body:not([data-workspace=charts]) .toast {
  background: var(--c-elevated); border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md); padding: var(--s3) var(--s4);
  font: 500 var(--t-compact)/1.4 var(--font); color: var(--c-text);
  box-shadow: 0 12px 40px #000000a0;
}

/* gate */
body .gate-card {
  background: var(--c-surface); border: 1px solid var(--c-line-strong);
  border-radius: var(--r-xl); padding: var(--s6);
}

/* ==========================================================================
   MARKETS SCANNER
   ========================================================================== */
body:not([data-workspace=charts]) .mk-toolbar {
  display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s3);
}
body:not([data-workspace=charts]) .mk-toolbar #mk-search { max-width: 320px; }
body:not([data-workspace=charts]) .mk-count {
  font: 500 var(--t-micro)/1 var(--font); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-text-3);
}
body:not([data-workspace=charts]) .table-wrap {
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  overflow: auto; max-height: calc(100vh - 220px); background: var(--c-surface);
}
body:not([data-workspace=charts]) .mk-table th[data-mk-sort] {
  cursor: pointer; user-select: none; white-space: nowrap;
}
body:not([data-workspace=charts]) .mk-table th[data-mk-sort]:hover { color: var(--c-text); }
body:not([data-workspace=charts]) .mk-table th[aria-sort]:not([aria-sort=none]) { color: var(--c-text); }
body:not([data-workspace=charts]) .mk-table th i {
  font-style: normal; font-size: 8px; color: var(--c-accent-hi);
}
body:not([data-workspace=charts]) .mk-table th.num, 
body:not([data-workspace=charts]) .mk-table td.num { text-align: right; }
body:not([data-workspace=charts]) .mk-table td.num {
  font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--c-text);
}
body:not([data-workspace=charts]) .mk-table td { padding: var(--s2) var(--s3); }
body:not([data-workspace=charts]) .mk-sym a {
  font: 700 var(--t-compact)/1 var(--font); letter-spacing: 0.04em; color: var(--c-text);
}
body:not([data-workspace=charts]) .mk-sym a:hover { color: var(--c-accent-hi); }
body:not([data-workspace=charts]) .mk-name {
  color: var(--c-text-3); max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body:not([data-workspace=charts]) .mk-act { text-align: right; }
/* The row action stays quiet until the row is under the pointer, so a hundred
   rows do not read as a hundred buttons. */
body:not([data-workspace=charts]) .mk-act .c-btn { opacity: 0; transition: opacity .1s ease; }
body:not([data-workspace=charts]) tr:hover .mk-act .c-btn,
body:not([data-workspace=charts]) .mk-act .c-btn:focus-visible { opacity: 1; }

/* ==========================================================================
   ANALYZE — ranked opportunity rows
   ========================================================================== */
body:not([data-workspace=charts]) .opportunity-head,
body:not([data-workspace=charts]) .opportunity-row {
  display: grid;
  grid-template-columns: 132px 150px 66px minmax(0,1fr) 92px 200px 108px;
  gap: var(--s3); align-items: center;
}
body:not([data-workspace=charts]) .opportunity-head {
  position: sticky; top: 0; z-index: 1;
  padding: var(--s2) var(--s4); background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  font: 600 var(--t-micro)/1.3 var(--font);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-3);
}
body:not([data-workspace=charts]) .opportunity-list {
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--c-surface);
}
body:not([data-workspace=charts]) .opportunity-row {
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--c-line);
  text-decoration: none; transition: background .1s ease;
}
body:not([data-workspace=charts]) .opportunity-row:last-child { border-bottom: 0; }
body:not([data-workspace=charts]) .opportunity-row:hover { background: var(--c-hover); }
body:not([data-workspace=charts]) .opportunity-row > span:first-child {
  display: flex; align-items: baseline; gap: var(--s3);
}
body:not([data-workspace=charts]) .opportunity-row b {
  width: 18px; font: 500 var(--t-micro)/1 var(--font-num); color: var(--c-text-dim);
}
body:not([data-workspace=charts]) .opportunity-row strong {
  font: 700 var(--t-body)/1 var(--font); letter-spacing: 0.04em; color: var(--c-text);
}
body:not([data-workspace=charts]) .opportunity-row .num {
  font: 600 var(--t-section)/1 var(--font-num);
  font-variant-numeric: tabular-nums; color: var(--c-text); text-align: right;
}
body:not([data-workspace=charts]) .opportunity-row span {
  font: 400 var(--t-compact)/1.4 var(--font); color: var(--c-text-3);
  overflow: hidden; text-overflow: ellipsis;
}
body:not([data-workspace=charts]) .opportunity-row .bullish { color: var(--c-up); font-weight: 500; }
body:not([data-workspace=charts]) .opportunity-row .bearish { color: var(--c-down); font-weight: 500; }
body:not([data-workspace=charts]) .opportunity-row .neutral { color: var(--c-text-2); font-weight: 500; }
body:not([data-workspace=charts]) .market-view {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s4); margin-bottom: var(--s3);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  font: 400 var(--t-compact)/1.4 var(--font); color: var(--c-text-3);
}

/* ---- value direction, wherever it appears ---- */
body:not([data-workspace=charts]) .bullish, body:not([data-workspace=charts]) .up { color: var(--c-up); }
body:not([data-workspace=charts]) .bearish, body:not([data-workspace=charts]) .down { color: var(--c-down); }
body:not([data-workspace=charts]) .badge {
  display: inline-flex; align-items: center; height: 17px; padding: 0 var(--s2);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sm);
  font: 600 var(--t-micro)/1 var(--font); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--c-text-3);
}

/* Row actions: quiet until the row is hovered or a control is focused, so a
   table of twenty rows does not read as sixty buttons. */
body:not([data-workspace=charts]) .row-act {
  display: flex; gap: var(--s1); justify-content: flex-end; white-space: nowrap;
}
body:not([data-workspace=charts]) .row-act > * { opacity: 0; transition: opacity .1s ease; }
body:not([data-workspace=charts]) tr:hover .row-act > *,
body:not([data-workspace=charts]) .row-act > *:focus-visible { opacity: 1; }

/* ==========================================================================
   SHELL GRID — the single source of truth for the frame
   The base sheet declared .app three times with different rail widths (220px,
   then 68px), so the quality strip started at x=190 and ran underneath the
   sidebar, clipping "DATA QUALITY" to "ATA QUALITY". Rail width and topbar
   height now come from the tokens, once.
   ========================================================================== */
body:not([data-workspace=charts]) .app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--shell-rail) minmax(0, 1fr);
  grid-template-rows: var(--shell-top) auto minmax(0, 1fr);
  grid-template-areas: "rail top" "rail quality" "rail main";
}
body:not([data-workspace=charts]) .quality-strip {
  grid-area: quality;
  display: flex; align-items: center; gap: var(--s4);
  min-height: 26px; padding: var(--s1) var(--s6);
  background: var(--c-surface); border-bottom: 1px solid var(--c-line);
  font: 500 var(--t-micro)/1.3 var(--font);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-3);
  overflow-x: auto; white-space: nowrap;
}
body:not([data-workspace=charts]) .quality-strip:empty { display: none; }
body:not([data-workspace=charts]) .quality-strip strong { color: var(--c-text-2); font-weight: 600; }

/* ==========================================================================
   VISUAL REBUILD — hierarchy, rationed accent, one rhythm
   Written against docs/TRADE_JOURNAL_VISUAL_REFERENCE_AUDIT.md.

   Three rules carry this file, and they are the whole difference between
   "designed" and "generated":

   1. A number is three times the size of its label. The eye must land on the
      value, not on the container.
   2. Surfaces sit within a few percent of each other. A panel is felt.
   3. The accent marks four things and nothing else: the active nav item, the
      one primary action, the sign of a value, and focus.
   ========================================================================== */

/* ---- 1. HIERARCHY: the value dominates, the label disappears ---- */
body:not([data-workspace=charts]) .metric-label,
body:not([data-workspace=charts]) .c-label {
  display: block;
  font: 500 var(--t-label)/1.2 var(--font);
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--c-text-dim);            /* the quietest thing in the box */
  margin: 0 0 var(--s2);
}
body:not([data-workspace=charts]) .market-tile .tile-price {
  display: flex; align-items: baseline; gap: var(--s2); margin: 0 0 var(--s1);
  font: 600 var(--t-value)/1.05 var(--font-num);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--c-text);
}
body:not([data-workspace=charts]) .market-tile .tile-price em {
  font: 600 var(--t-compact)/1 var(--font-num); font-style: normal;
  font-variant-numeric: tabular-nums;
}
body:not([data-workspace=charts]) .market-tile strong {
  font: 600 var(--t-compact)/1 var(--font); letter-spacing: 0.06em; color: var(--c-text-2);
}
body:not([data-workspace=charts]) .market-tile p {
  margin: 0; font: 500 var(--t-compact)/1.3 var(--font); color: var(--c-text-2);
}
body:not([data-workspace=charts]) .market-tile small {
  display: block; margin-top: 2px;
  font: 400 var(--t-micro)/1.4 var(--font); color: var(--c-text-dim);
  font-variant-numeric: tabular-nums;
}

/* ---- 2. SURFACES: containers stop announcing themselves ---- */
body:not([data-workspace=charts]) .panel,
body:not([data-workspace=charts]) .command-card,
body:not([data-workspace=charts]) .command-stat,
body:not([data-workspace=charts]) .market-tile,
body:not([data-workspace=charts]) .table-wrap,
body:not([data-workspace=charts]) .opportunity-list,
body:not([data-workspace=charts]) .market-view {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: none;                    /* ordinary panels never float */
}
body:not([data-workspace=charts]) .market-tile { padding: var(--s4); }
body:not([data-workspace=charts]) .market-tile:hover {
  background: var(--c-surface-2); border-color: var(--c-line-strong);
}

/* ---- 3. ACCENT SCARCITY ----
   The kicker was accent-coloured on every page, which spent the brand colour
   on a breadcrumb. It is metadata; it reads as metadata now. */
body:not([data-workspace=charts]) .kicker {
  display: block; margin-bottom: var(--s1);
  font: 500 var(--t-label)/1.2 var(--font);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-text-dim);
}
body:not([data-workspace=charts]) .mk-table th i { color: var(--c-text-2); }
body:not([data-workspace=charts]) .news-filters button.active .chip-n {
  background: var(--c-selected); color: var(--c-text);
}

/* ---- 4. PAGE HEADER: one compact line, then data ----
   Title, kicker and subtitle stacked cost ~100px before anything worth
   reading. The title now shares its row with the description. */
body:not([data-workspace=charts]) .page-head {
  display: flex; align-items: baseline; gap: var(--s4);
  flex-wrap: wrap; margin: 0 0 var(--s5);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--c-line);
}
body:not([data-workspace=charts]) .page-head .kicker {
  order: -1; flex-basis: 100%; margin: 0 0 var(--s1);
}
body:not([data-workspace=charts]) #workspace h1 {
  margin: 0; font: 600 var(--t-display)/1.15 var(--font);
  letter-spacing: -0.02em; color: var(--c-text);
}
body:not([data-workspace=charts]) #workspace h1 + p {
  margin: 0; font: 400 var(--t-compact)/1.4 var(--font); color: var(--c-text-dim);
}

/* ---- 5. ONE VERTICAL RHYTHM ---- */
body:not([data-workspace=charts]) #workspace { padding: var(--s5) var(--s6) var(--s6); }
body:not([data-workspace=charts]) #workspace > * + * { margin-top: var(--s5); }
body:not([data-workspace=charts]) .grid,
body:not([data-workspace=charts]) .market-tape,
body:not([data-workspace=charts]) .workspace-hero { gap: var(--s3); }

/* ---- 6. BADGES: only genuine state keeps a border ----
   Regime, category, source and freshness were all pilled. They are facts, not
   states, and a pill around a fact is decoration. */
body:not([data-workspace=charts]) .badge,
body:not([data-workspace=charts]) .event-meta .badge {
  border: 0; padding: 0; height: auto; background: none;
  font: 500 var(--t-micro)/1.4 var(--font);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-dim);
}
body:not([data-workspace=charts]) .badge.CRITICAL,
body:not([data-workspace=charts]) .badge.HIGH { color: var(--c-down); }

/* ---- 7. COMMAND CARD: the regime is the headline, not the card ---- */
body:not([data-workspace=charts]) .command-card { padding: var(--s5); }
body:not([data-workspace=charts]) .command-card h2 {
  font: 600 var(--t-value)/1.1 var(--font) !important;
  letter-spacing: -0.02em; color: var(--c-text); margin: 0 0 var(--s2) !important;
}
body:not([data-workspace=charts]) .command-card p {
  font: 400 var(--t-compact)/1.5 var(--font); color: var(--c-text-dim);
  margin: 0 0 var(--s4); max-width: 56ch;
}

/* ---- 8. SIDEBAR: grouped, quiet, intentional ---- */
body:not([data-workspace=charts]) .rail nav a {
  height: 32px; font: 500 var(--t-compact)/1 var(--font);
  border-radius: var(--r-md); border-left: 2px solid transparent;
}
body:not([data-workspace=charts]) .rail nav a.active {
  background: var(--c-accent-wash); color: var(--c-text);
  border-left-color: var(--c-accent);
}
body:not([data-workspace=charts]) .rail nav a.active b { color: var(--c-accent-hi); }
body:not([data-workspace=charts]) .nav-label {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s4) var(--s3) var(--s1);
  font: 500 var(--t-micro)/1.2 var(--font);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-dim);
}
body:not([data-workspace=charts]) .nav-label::before {
  content: ""; width: 8px; height: 1px; background: var(--c-line-strong);
}

/* ---- 9. TABLES: quieter chrome, louder figures ---- */
body:not([data-workspace=charts]) .data-table th,
body:not([data-workspace=charts]) .news-columns,
body:not([data-workspace=charts]) .opportunity-head {
  background: var(--c-bg); border-bottom: 1px solid var(--c-line);
  font: 500 var(--t-micro)/1.2 var(--font);
  letter-spacing: 0.11em; color: var(--c-text-dim);
}
body:not([data-workspace=charts]) .data-table td { border-bottom: 1px solid var(--c-line); }
body:not([data-workspace=charts]) .data-table tr:last-child td { border-bottom: 0; }
body:not([data-workspace=charts]) .opportunity-row .num {
  font: 600 var(--t-title)/1 var(--font-num);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}

/* ---- 10. TABULAR FIGURES ON EVERY NUMBER ---- */
body:not([data-workspace=charts]) #workspace,
body:not([data-workspace=charts]) .topbar,
body:not([data-workspace=charts]) .rail-foot,
body:not([data-workspace=charts]) #drawer-body { font-variant-numeric: tabular-nums; }

/* ---- 11. PANELS STOP STRETCHING TO FILL ----
   The regime card sat in a two-column grid beside the events list and was
   stretched to match its neighbour's height, leaving ~200px of empty box. A
   container sized by its tallest sibling rather than its own content is the
   clearest tell of a generated layout. Each column now ends where its content
   ends. */
body:not([data-workspace=charts]) .workspace-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--s3); align-items: start;
}
body:not([data-workspace=charts]) .workspace-hero > .panel { max-height: 420px; overflow: auto; }

/* The page subtitle had receded so far it was unreadable. Metadata should be
   quiet, not invisible. */
body:not([data-workspace=charts]) #workspace h1 + p { color: var(--c-text-3); }
body:not([data-workspace=charts]) .market-tile small { color: var(--c-text-3); }

/* ---- 12. THE REGIME READS AS A STATEMENT, NOT A CARD ----
   It is the single most important thing on Home, so it is typography on the
   page rather than a hero box competing with the tiles below it. */
body:not([data-workspace=charts]) .command-card {
  background: transparent; border: 0; border-radius: 0;
  padding: 0 0 var(--s4); border-bottom: 1px solid var(--c-line);
}
body:not([data-workspace=charts]) .command-card h2 {
  font: 600 34px/1.05 var(--font) !important;
  letter-spacing: -0.03em; margin: 0 0 var(--s2) !important;
}
body:not([data-workspace=charts]) .command-card .actions { gap: var(--s2); }

/* ---- 13. HOME BAND: instruments beside catalysts, neither stretching ---- */
body:not([data-workspace=charts]) .home-band {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--s3); align-items: start;
}
body:not([data-workspace=charts]) .home-band .market-tape {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3);
}
body:not([data-workspace=charts]) .home-band > .panel { max-height: 100%; }
@media (max-width: 1280px) {
  body:not([data-workspace=charts]) .home-band { grid-template-columns: minmax(0, 1fr); }
  body:not([data-workspace=charts]) .home-band .market-tape { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}