/* ============================================================================
   HedgeMate — brand design system (emerald shield + graphite "Mate")
   ----------------------------------------------------------------------------
   Colours are derived from the logo pixels: a teal-leaning emerald + a faintly
   cool graphite. The DARK theme is the default and is an emerald-tinted
   near-black (NOT a generic blue-slate). [data-theme="light"] redefines the
   SAME token names; legacy names (--bg-2, --accent, --green, …) are kept as
   aliases so existing rules render unchanged in dark and adapt in light.

   Two greens, on purpose:
     --brand     = identity / chrome (active nav, primary CTA, logo). Rationed.
     --positive  = the P&L "money up" signal (a brighter leaf-green that pops
                   against red and is NOT smeared across the chrome).
   Links / input-focus / the Swing family stay BLUE (--accent → --info).
   All body text clears WCAG AAA; all status text clears AA in both themes.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Brand primitives (logo-sampled) ---------------------------------- */
  --emerald-300: #62cdb6;  --emerald-400: #34c699;  --emerald-500: #2bbd8d;
  --emerald-600: #12a87c;  --emerald-700: #0a7d5a;  --emerald-800: #0c5f47;
  --emerald-900: #103a2b;  --mint-300: #85ecd1;

  /* ---- Semantic tokens — DARK (default) --------------------------------- */
  --bg: #091410;
  --surface: #0e1c16;
  --surface-2: #142a20;
  --surface-3: #1b3a2c;
  --surface-hover: #2a3330;
  --border: #244a39;
  --border-strong: #3e7a60;
  --text: #eaf3ee;
  --text-muted: #9fb2ab;
  --text-subtle: #7d9389;
  --brand: #2bbd8d;
  --brand-strong: #34c699;
  --brand-soft: rgba(43,189,141,0.14);
  --on-brand: #04130d;
  --positive: #3fcf8e;
  --positive-soft: rgba(63,207,142,0.14);
  --positive-border: #1d6b46;
  --positive-glow: rgba(63,207,142,0.55);
  --negative: #ff7b72;
  --negative-soft: rgba(248,81,73,0.14);
  --negative-border: #7a2b2b;
  --negative-strong: #cc2d24;  /* darkened from #f85149 so white text clears AA (5.3:1) on danger fills */
  --warning: #e0a83a;
  --warning-soft: rgba(210,153,34,0.14);
  --info: #79b8ff;
  --info-soft: rgba(88,166,255,0.14);
  /* Unified conviction bands (PR-0A) — alias theme tokens via var() so they
     resolve correctly in both light + dark without per-theme redefinition. */
  --conv-exceptional: var(--positive);
  --conv-high: var(--positive);
  --conv-moderate: var(--info);
  --conv-low: var(--warning);
  --conv-weak: var(--negative);
  --orange: #f0883e;
  --orange-soft: rgba(240,136,62,0.14);
  --focus-ring: rgba(52,198,153,0.65);
  --shadow: rgba(0,0,0,0.45);
  --scrim: rgba(0,0,0,0.65);
  --hero-grad-top: #13241d;
  --topbar-bg: rgba(7,18,14,0.82);

  /* rgb channels for data-driven alpha (heatmaps, chart area fills) */
  --brand-rgb: 43,189,141;
  --positive-rgb: 63,207,142;
  --negative-rgb: 248,81,73;
  --info-rgb: 88,166,255;
  --warning-rgb: 224,168,58;

  /* Strategy-family accents (one hue per family) */
  --fam-core: #3fcf8e;     /* Core / Income (theta) — green-on-message */
  --fam-swing: #58a6ff;    /* Swing */
  --fam-scalp: #e0a83a;    /* Scalp / 0DTE */
  --fam-hedge: #b487f0;    /* Hedge / Vol */
  --fam-hedge-soft: #3a2456;
  --fam-unknown: #9fb2ab;  /* Other / Test */

  /* Chart palette (read by JS via getComputedStyle; re-read on theme change) */
  --chart-grid: #1b3a2c;
  --chart-axis: #9fb2ab;
  --chart-tip-bg: #0e1c16;
  --chart-tip-text: #eaf3ee;
  --chart-series: #58a6ff;       /* non-directional price/equity line → blue */
  --chart-up: #3fcf8e;
  --chart-down: #ff7b72;
  --chart-area-top: rgba(63,207,142,0.28);
  --chart-area-bottom: rgba(63,207,142,0.02);
  --chart-candle-up: #3fcf8e;
  --chart-candle-down: #ff7b72;
  --chart-crosshair: #62cdb6;
  --chart-zero: #3e7a60;
  --chart-live: #b487f0;         /* live-vs-paper marker (stays off-green) */
  --chart-boll: #b487f0;         /* Bollinger band lines (chain chart) — mid reuses --chart-series */

  /* ---- Custom tooltip layer (.hm-tip, driven by tooltip.js) --------------
     Dark: an elevated emerald-near-black panel with an emerald hairline — reads
     as brand chrome, not a status colour. Light: a dark panel (below) for crisp
     contrast, matching the chart tooltips. */
  --tip-bg: #15291f;
  --tip-border: #3c7458;
  --tip-hi: rgba(255,255,255,0.055);
  --tip-text: #eef5f1;
  --tip-body: #c9dad2;

  /* ---- Legacy aliases (old rules keep working; per-theme via vars above) - */
  --bg-2: var(--surface);
  --bg-3: var(--surface-3);
  --muted: var(--text-muted);
  --fg: var(--text);             /* fixes latent undefined --fg (user-menu) */
  --accent: var(--info);         /* links / focus / Swing stay BLUE by design */
  --green: var(--positive);      /* money-green, not brand */
  --red: var(--negative);
  --yellow: var(--warning);
  --purple: var(--fam-hedge);
  --green-tint: var(--positive-soft);
  --red-tint: var(--negative-soft);
  --amber-tint: var(--warning-soft);

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  /* ---- Radii ---- */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
  /* ---- Type scale ---- */
  --fs-xs: 10px; --fs-sm: 12px; --fs-md: 14px; --fs-lg: 18px;
  --fs-xl: 22px; --fs-2xl: 28px; --fs-display: 36px;
  --lbl-size: 11px; --lbl-track: 0.07em;
  /* ---- Elevation ---- */
  --elev-1: 0 1px 2px var(--shadow);
  --elev-2: 0 6px 18px var(--shadow);
  --elev-pop: 0 10px 30px var(--shadow);
}

/* ============================ LIGHT THEME ================================= */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7f5;
  --surface: #ffffff;
  --surface-2: #eef3f0;
  --surface-3: #e4ebe7;
  --surface-hover: #dde3e0;
  --border: #d2ddd7;
  --border-strong: #9aaaa2;
  --text: #0c1b15;
  --text-muted: #4a5d54;
  --text-subtle: #5e6f66;
  --brand: #0a7d5a;
  --brand-strong: #066045;
  --brand-soft: rgba(10,125,90,0.10);
  --on-brand: #ffffff;
  --positive: #0a7048;
  --positive-soft: rgba(10,112,72,0.12);
  --positive-border: #9ad9bc;
  --positive-glow: rgba(10,112,72,0.40);
  --negative: #c0322b;
  --negative-soft: rgba(192,50,43,0.10);
  --negative-border: #e6a8a3;
  --negative-strong: #a11912;
  --warning: #8a5e05;
  --warning-soft: rgba(138,94,5,0.12);
  --info: #1763a8;
  --info-soft: rgba(23,99,168,0.10);
  --orange: #c2611a;
  --orange-soft: rgba(194,97,26,0.12);
  --focus-ring: rgba(10,125,90,0.45);
  --shadow: rgba(16,58,43,0.16);
  --scrim: rgba(16,33,23,0.45);
  --hero-grad-top: #eef3f0;
  --topbar-bg: rgba(244,247,245,0.82);

  --brand-rgb: 10,125,90;
  --positive-rgb: 10,112,72;
  --negative-rgb: 192,50,43;
  --info-rgb: 23,99,168;
  --warning-rgb: 138,94,5;

  --fam-core: #0a7048;
  --fam-swing: #1763a8;
  --fam-scalp: #8a5e05;
  --fam-hedge: #6a4fb0;
  --fam-hedge-soft: #ede3fb;
  --fam-unknown: #4a5d54;

  --chart-grid: #e4ebe7;
  --chart-axis: #4a5d54;
  --chart-tip-bg: #0c1b15;
  --chart-tip-text: #f4f7f5;
  --chart-series: #1763a8;
  --chart-up: #0a7048;
  --chart-down: #c0322b;
  --chart-area-top: rgba(10,112,72,0.20);
  --chart-area-bottom: rgba(10,112,72,0.02);
  --chart-candle-up: #0a7048;
  --chart-candle-down: #c0322b;
  --chart-crosshair: #066045;
  --chart-zero: #9aaaa2;
  --chart-live: #6a4fb0;
  --chart-boll: #6a4fb0;

  /* Tooltip stays a dark panel in light mode (premium convention + max legibility). */
  --tip-bg: #0d1f18;
  --tip-border: rgba(255,255,255,0.12);
  --tip-hi: rgba(255,255,255,0.06);
  --tip-text: #f2f7f4;
  --tip-body: #c4d2cb;
}

* { box-sizing: border-box; }

/* ---- Base refinements (theme-aware, in-scope polish) -------------------- */
/* Single global keyboard-focus ring — every interactive element, both themes. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Gentle crossfade when the theme flips (respects reduced-motion). */
@media (prefers-reduced-motion: no-preference) {
  .app, .sidebar, .main, .topbar, .card, .account-panel, table, th, td,
  .pill, .btn, input, select, textarea {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
  }
}
/* One canonical uppercase micro-label (replaces 9–13px ad-hoc label styles). */
.lbl {
  font-size: var(--lbl-size); letter-spacing: var(--lbl-track);
  text-transform: uppercase; color: var(--text-muted); font-weight: 600;
}
.pill.xs { font-size: var(--fs-xs); padding: 1px 6px; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===== component styles (literals below are migrated to tokens) ========== */
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 14px;
  line-height: 1.4;
}

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

/* Global sticky-banner offset. The impersonation / onboarding banners are
   position:sticky and consume viewport height, so the sticky 100vh sidebar —
   whose user menu is margin:auto-pinned to its bottom — must SHRINK and DROP by
   the banner height, or that menu is pushed below the fold (the reported bug).
   --banner-h is the fixed banner height; :has() counts how many banners show
   (they share the .impersonation-banner class); the 2-banner rule comes later so
   it wins by source order when both are present. No banner → offset 0 → unchanged. */
:root { --banner-h: 44px; }
body { --global-banner-offset: 0px; }
body:has(.impersonation-banner) { --global-banner-offset: var(--banner-h); }
body:has(.impersonation-banner ~ .impersonation-banner) { --global-banner-offset: calc(var(--banner-h) * 2); }

.app {
  display: grid;
  /* minmax(0, 1fr) (not bare 1fr) so the content track can shrink BELOW its
     min-content. A bare 1fr track has min-width:auto, so a wide child — most
     notably the Chart.js equity canvas, whose pixel width Chart.js sets from the
     container width — feeds its own width back into the track's min size and
     ratchets the whole page wider on every resize/refresh. minmax(0,1fr) caps the
     track at the available space and breaks that loop for ALL wide content. */
  grid-template-columns: 216px minmax(0, 1fr);
  min-height: calc(100vh - var(--global-banner-offset));
}

/* ChatGPT-style fixed-height rail: brand + condensed equity at top, watchlist
   filling/scrolling the middle, user identity pinned at the bottom. The sidebar
   is its own sticky 100vh viewport (it stays put while .main scrolls); the ONLY
   internal scroller is the watchlist list. The whole flex chain carries
   min-height:0 so that list actually scrolls instead of growing the column. */
.sidebar {
  position: sticky; top: var(--global-banner-offset);
  height: calc(100vh - var(--global-banner-offset)); align-self: start;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--space-4) 0 0;
}
.sidebar > .brand,
.sidebar > #sidebar-account,
.sidebar > .statusbar { flex: none; }
/* Brand lockup: emerald shield mark + two-tone "HedgeMate" wordmark + version. */
.brand {
  display: flex; align-items: center; gap: 10px;
  margin: 2px 18px 26px; text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 32px; height: 32px; flex: none;
  filter: drop-shadow(0 1px 4px var(--shadow));
}
.brand-text { display: flex; flex-direction: column; line-height: 1.04; min-width: 0; }
.brand-word { font-size: 19px; font-weight: 800; letter-spacing: -0.2px; }
.bw-hedge { color: var(--brand); }
.bw-mate  { color: var(--text); }
.brand-ver { font-size: 10px; color: var(--text-subtle); letter-spacing: 0.4px; margin-top: 3px; }
.sidebar nav { display: flex; flex-direction: column; }
.sidebar nav a {
  padding: 10px 20px;
  color: var(--muted);
  border-left: 3px solid transparent;
}
.sidebar nav a:hover { color: var(--text); background: var(--bg-3); text-decoration: none; }
/* Section labels group the nav into scannable clusters. */
.nav-section {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--muted); opacity: 0.65;
  padding: 10px 20px 3px; margin-top: 2px;
}
/* Page sub-nav tabs — for merged pages (Strategies|Signals, Watchlists|Universe). */
.page-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: -4px 0 16px; }
.page-tabs a {
  padding: 8px 14px; color: var(--muted); font-weight: 600; font-size: var(--fs-sm);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.page-tabs a:hover { color: var(--text); text-decoration: none; }
.page-tabs a.active { color: var(--text); border-bottom-color: var(--brand); }
.sidebar nav a.active {
  color: var(--text);
  background: var(--brand-soft);
  border-left-color: var(--brand);
}

.statusbar {
  flex: none;
  margin: var(--space-2) var(--space-3);
  padding: 10px;
  background: var(--bg-3);
  border-radius: 6px;
  font-size: 12px;
}
.statusbar .row { display: flex; justify-content: space-between; padding: 3px 0; }
.statusbar .row .k { color: var(--muted); }

/* Sidebar paper-account panel — condensed two-line strip near the top of the rail.
   Two tight tiers: EQUITY + big number; return $/% + "BP NN% · N open". The full
   cash / BPR / period breakdown lives on the dashboard. */
#sidebar-account {
  flex: none;
  margin: var(--space-1) var(--space-3) var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
/* One left-aligned column for the whole strip: EQUITY label → big equity number
   → return → BP/open, all flush to the same left edge. The old layout split the
   top tier with space-between, which floated the big equity number to the RIGHT
   edge while the sub-lines hugged the left — a lopsided diagonal. Stacking +
   left-aligning everything also keeps each nowrap row inside the ~168px sidebar
   content box (216px rail − 12px margin − 12px padding per side), so nothing clips. */
.ap-strip { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ap-top { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.ap-sub { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.ap-label { font-size: 9px; letter-spacing: 1.2px; font-weight: 700; }
.ap-equity { font-size: 17px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ap-return { font-size: 11px; font-family: ui-monospace, monospace; white-space: nowrap; }
.ap-bp { font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mtm-partial { font-size: 10px; }
.pill { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.pill.read { background: var(--info-soft); color: var(--info); }
.pill.shadow { background: var(--warning-soft); color: var(--warning); }
.pill.live { background: var(--negative-soft); color: var(--negative); }
/* Live ORDER routing (submit_mode=live) — the one state where Confirm sends a
   real broker order. Solid red + white so it can't be mistaken for paper. */
.pill.live-bold { background: var(--negative-strong); color: #fff; letter-spacing: 0.3px; }
.pill.kill { background: var(--negative-strong); color: #fff; }
/* Unified stale treatment. A stale GATE INPUT (IV/VIX that decides whether a
   strategy opens) keeps an amber outline rather than fading to indistinguishable
   grey — staleness should escalate with stakes, not disappear. */
.pill.stale { background: var(--amber-tint); color: var(--warning); border: 1px solid var(--warning); }

/* Fill the whole content track (topbar + every page). The grid's
   `minmax(0, 1fr)` track already caps width at the available space and breaks the
   Chart.js width-ratchet loop, so a fixed max-width here is unnecessary — and on
   ≥1920px displays it left the content capped + left-aligned, wasting ~300px on
   the right of every page. Fluid instead: content now expands to fill the rail. */
.main { padding: 24px 32px; max-width: none; min-width: 0; }
/* ONE .page-header definition (P3.2) — previously three cascading declarations
   (here + two overrides); this is the merged computed result of that cascade,
   so every page renders identically. */
.page-header { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 18px; }
.page-header h2 { margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.page-header p { margin: 0; }
.page-header .subtitle { color: var(--muted); font-size: 13px; }

/* === Dashboard system-status banner === */
.sys-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.sys-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 13px;
}
.sys-row .sys-icon { font-size: 16px; line-height: 1; }
.sys-row .sys-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; font-size: 11px; }
.sys-row .sys-detail { color: var(--muted); font-family: ui-monospace, monospace; font-size: 11px; }
.sys-row .sys-detail a { color: var(--info); text-decoration: underline; }
.sys-row.sys-danger { background: var(--negative-soft); border-color: var(--negative-border); }
.sys-row.sys-danger .sys-label { color: var(--negative); }
.sys-row.sys-warn   { background: var(--warning-soft); border-color: var(--warning); }
.sys-row.sys-warn .sys-label { color: var(--warning); }
.sys-row.sys-info   { background: var(--info-soft); border-color: var(--info); }
/* Condensed gated-signals band (2026-07-18): normalized reason buckets render as
   chips — top 5 inline, tail tucked into an expandable list — so the banner is one
   line tall instead of the old free-text wall. */
.sys-gates-line { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.gate-chip {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 1px 7px; border-radius: 9px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--info) 7%, transparent);
  font-size: 10.5px; line-height: 1.6; max-width: 340px; overflow: hidden;
  text-overflow: ellipsis;
}
.gate-chip b { margin-left: 3px; font-weight: 700; color: var(--text); }
.sys-gates-more { display: inline-block; }
.sys-gates-more summary {
  cursor: pointer; list-style: none; font-size: 10.5px; font-weight: 600;
  color: var(--info); padding: 1px 7px; border: 1px dashed var(--border);
  border-radius: 9px; white-space: nowrap;
}
.sys-gates-more summary::-webkit-details-marker { display: none; }
.sys-gates-more[open] summary { opacity: .7; }
.sys-gates-full {
  display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px;
  max-height: 180px; overflow-y: auto; padding: 6px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-elevated, transparent);
}
.sys-row.sys-info .sys-label { color: var(--info); }

/* === Dashboard paper-account hero === */
.account-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  background: linear-gradient(135deg, var(--hero-grad-top) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 28px;
  margin-bottom: 20px;
}
.account-hero .ah-label {
  font-size: 11px; letter-spacing: 2px; font-weight: 700; color: var(--muted); margin-bottom: 4px;
}
.account-hero .ah-equity { font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.account-hero .ah-equity.green { color: var(--text); }
.account-hero .ah-equity.red { color: var(--text); }
.account-hero .ah-sub { font-size: 13px; margin-top: 8px; font-family: ui-monospace, monospace; }
.account-hero .ah-sub > span { margin-right: 14px; }

.account-hero .ah-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 8px 28px;
  align-content: center;
}
.account-hero .ah-stat-label { font-size: 9px; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 2px; }
.account-hero .ah-stat-val { font-size: 15px; font-weight: 700; font-family: ui-monospace, monospace; }

/* BPR + Greeks row */
.bp-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2fr;
  gap: 12px;
  margin-bottom: 16px;
}
.bp-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.bp-label { font-size: 11px; letter-spacing: 1.5px; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.bp-bar { height: 8px; background: var(--bg-3); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.bp-fill { height: 100%; background: var(--green); transition: width 0.4s; }
.bp-fill.warn { background: var(--yellow); }
.bp-fill.danger { background: var(--red); }
.bp-sub { font-size: 12px; font-family: ui-monospace, monospace; }

.dash-section-h {
  font-size: 11px; letter-spacing: 1.5px; color: var(--muted); font-weight: 700;
  text-transform: uppercase;
  margin: 24px 0 12px;
}
.dash-warn {
  background: var(--warning-soft); border: 1px solid var(--yellow);
  color: var(--warning); padding: 10px 14px; border-radius: 6px;
  font-size: 12px; margin-bottom: 12px;
}

.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.card .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.card .big { font-size: 28px; font-weight: 700; margin: 6px 0; }
.card .progress {
  height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; margin-top: 8px;
}
.card .progress > .bar { height: 100%; background: var(--green); transition: width 0.3s; }
.card .progress > .bar.over { background: var(--green); }
.card .progress > .bar.under { background: var(--yellow); }
.card .progress > .bar.bad { background: var(--red); }
/* Small MUTED-TEXT utility inside cards. Excludes .btn: a `.btn.small` (e.g. the
   admin impersonate/suspend buttons) is a size modifier, not muted text — without
   :not(.btn) this rule (0,2,0) beat `.btn { color: var(--on-brand) }` (0,1,0) and
   painted button labels muted-grey → unreadable on the coloured fill in both themes. */
.card .small:not(.btn) { font-size: 12px; color: var(--muted); margin-top: 4px; }

.section { margin-top: 28px; }
.section h3 { font-size: 15px; font-weight: 600; margin: 0 0 12px; color: var(--text); }

table { width: 100%; border-collapse: collapse; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
th { background: var(--bg-3); font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg-3); }
td.num, th.num { text-align: right; }
td.center, th.center { text-align: center; }

.green { color: var(--green); }
.red { color: var(--red); }
.yellow { color: var(--yellow); }
.muted { color: var(--muted); }
/* Partial mark-to-market warning — shown next to equity when one or more open
   positions could not be priced this cycle (their unrealized P&L is excluded). */
.mtm-partial {
  display: inline-block; font-size: 10px; font-weight: 600;
  color: var(--warning); background: var(--amber-tint);
  border: 1px solid var(--warning); border-radius: 8px;
  padding: 0 6px; vertical-align: middle; cursor: help;
}
/* Stale-data chip — marks a section/value sourced from a snapshot that is no
   longer current (e.g. the premarket brief on a stale trading day). One idiom
   everywhere a freshness threshold exists, so "stale" looks the same app-wide. */
.stale-chip {
  display: inline-block; font-size: 10px; font-weight: 600; color: var(--warning);
  background: var(--amber-tint); border: 1px solid var(--warning);
  border-radius: 8px; padding: 0 6px; vertical-align: middle; cursor: help;
}
.mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 13px; }

.chain-row.call { border-left: 3px solid var(--positive-border); }
.chain-row.put  { border-left: 3px solid var(--negative-border); }
.chain-row.atm  { background: var(--bg-3) !important; }

.exp-header { background: var(--bg-3); padding: 10px 12px; font-weight: 600; color: var(--accent); border-bottom: 1px solid var(--border); }

.btn {
  background: var(--brand); color: var(--on-brand); border: none; padding: 8px 16px;
  border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; font-weight: 600;
}
.btn:hover { filter: brightness(1.08); }
.btn.secondary { background: var(--surface-3); color: var(--text); border: 1px solid var(--border); }
.btn.secondary:hover { filter: none; border-color: var(--border-strong); }
.btn.danger { background: var(--negative-strong); color: #fff; }
.btn.success { background: var(--positive); }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.controls { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.controls label { color: var(--muted); font-size: 12px; }
.controls input, .controls select {
  background: var(--bg-3); color: var(--text); border: 1px solid var(--border);
  padding: 6px 10px; border-radius: 6px; font-size: 13px;
  font-family: inherit;
}
.controls input:focus, .controls select:focus { outline: none; border-color: var(--accent); }

.spot {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 18px;
  font-weight: 600;
}

.empty {
  padding: 40px;
  text-align: center;
  color: var(--muted);
  background: var(--bg-2);
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.flash { padding: 12px 16px; border-radius: 6px; margin: 12px 0; }
.flash.error { background: var(--negative-soft); color: var(--negative); border: 1px solid var(--negative-border); }
.flash.success { background: var(--positive-soft); color: var(--positive); border: 1px solid var(--green); }

.legs-table td { padding: 6px 10px; font-size: 12px; }
.position-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 12px; }
.position-card .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.position-card .header .strategy { font-weight: 600; color: var(--accent); }
.position-card .pnl { font-size: 24px; font-weight: 700; }
.position-card .meta { display: flex; gap: 20px; color: var(--muted); font-size: 12px; }
/* Urgency accent — sorted to the top by the server; the left border + badge
   make a 0DTE / near-max-loss position impossible to scroll past. */
.position-card.urgent-danger { border-left: 3px solid var(--red); }
.position-card.urgent-warn   { border-left: 3px solid var(--yellow); }
.urg-badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.2px;
  border-radius: 8px; padding: 1px 7px; vertical-align: middle; white-space: nowrap;
}
.urg-badge.danger { background: var(--negative-strong); color: #fff; }
.urg-badge.warn   { background: var(--warning-soft); color: var(--warning); border: 1px solid var(--warning); }
/* "Needs action today" strip — one row of clickable position chips. Fail-quiet
   (renders nothing when nothing is urgent). Selector fixed 2026-07-23: the
   template has always emitted class="needs-action"; these rules previously
   targeted ".needs-attention" and never applied (the strip rendered unstyled). */
.needs-action {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  background: var(--red-tint); border: 1px solid var(--negative-border); border-left-width: 3px;
  color: var(--negative); border-radius: 8px; padding: 7px 14px;
  font-weight: 600; font-size: var(--fs-sm);
}
.needs-action .na-lead { letter-spacing: 0.2px; }
.needs-action .na-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* Dashboard ops row (reflow 2026-07-23): needs-action triage + global filter share
   ONE slim band instead of two mostly-empty full-width rows. Attention grows left,
   filter hugs right; wraps cleanly when narrow or when the strip is loud. */
.dash-ops { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 4px 0 12px; }
.dash-ops #needs-action-strip { flex: 1 1 340px; min-width: 0; display: flex; }
.dash-ops #needs-action-strip:empty { display: none; }
.dash-ops #needs-action-strip > .needs-action { flex: 1 1 auto; }
.dash-ops .filter-bar { flex: 0 1 auto; margin: 0 0 0 auto; }
@media (max-width: 900px) { .dash-ops .filter-bar { margin-left: 0; } }
.na-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 7px;
  padding: 3px 9px; font-size: 12px; color: var(--text); font-weight: 600;
  transition: border-color 0.12s, transform 0.06s;
}
.na-chip:hover { border-color: var(--accent); }
.na-chip:active { transform: translateY(1px); }
.na-chip.na-danger { border-left: 3px solid var(--red); }
.na-chip.na-warn   { border-left: 3px solid var(--yellow); }
.na-chip .na-chip-sym { font-family: ui-monospace, monospace; }
.na-chip .na-flag { font-size: 11px; white-space: nowrap; }
.na-chip.na-danger .na-flag { color: var(--negative); }
.na-chip.na-warn .na-flag { color: var(--warning); }

/* Deep-link arrival flash on a focused position card. */
@keyframes pos-flash {
  0%   { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}
.position-card.pos-flash { animation: pos-flash 1.6s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .position-card.pos-flash { animation: none; } }

/* === Build paper trade page === */
.build-spot { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.build-spot .spot-val { font-size: 22px; font-weight: 700; color: var(--accent); }
.build-spot label { font-weight: 700; letter-spacing: 1px; }

.status-line { min-height: 0; }
.status-line:not(:empty) { margin-bottom: 12px; }

.build-grid {
  display: grid;
  grid-template-columns: minmax(360px, 480px) 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.card-block {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
}
.block-h {
  margin: 0 0 14px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  display: flex; justify-content: space-between; align-items: baseline;
}
.block-h-sub {
  margin: 18px 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.field-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.field-row label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.field-row label.green-label { color: var(--positive); }
.field-row label.red-label   { color: var(--negative); }

.field-row input[type="text"],
.field-row input[type="number"],
.field-row select,
.field-row textarea {
  background: var(--bg-3); color: var(--text); border: 1px solid var(--border);
  padding: 8px 10px; border-radius: 6px; font-size: 13px; font-family: inherit;
  width: 100%;
}
.field-row select.strike-select {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 12px;
}
.field-row textarea { resize: vertical; min-height: 38px; }
.field-row input:focus, .field-row select:focus, .field-row textarea:focus {
  outline: none; border-color: var(--accent);
}

.qty-row { display: flex; align-items: center; gap: 8px; }
.quick-targets {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 8px 0 8px 110px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
}
.btn.chip {
  background: var(--bg-3); color: var(--text); border: 1px solid var(--border);
  padding: 4px 10px; font-size: 11px; border-radius: 12px;
}
.btn.chip:hover { background: var(--surface-hover); border-color: var(--accent); }

.stars { display: flex; gap: 2px; user-select: none; cursor: pointer; }
.stars .star {
  font-size: 20px; color: var(--bg-3);
  transition: color 0.1s;
}
.stars .star.on, .stars .star.hover { color: var(--warning); }
.stars .star:hover { color: var(--warning); }

/* === Live metrics grid === */
.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.metric-grid .empty { grid-column: 1/-1; }
.m-cell {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
}
.m-cell.big-cell { grid-column: span 3; }
.m-cell.greeks-cell { grid-column: span 3; }
@media (min-width: 1100px) {
  .m-cell.big-cell { grid-column: span 3; }
}
.m-label {
  font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 4px;
}
.m-big { font-size: 22px; font-weight: 700; line-height: 1.1; }
.m-big .small { font-size: 12px; font-weight: 400; }
.m-sub { font-size: 11px; color: var(--text); margin-top: 4px; }
.greeks-row {
  display: flex; gap: 24px; font-family: ui-monospace, monospace; font-size: 14px;
  margin-top: 4px;
}
.greeks-row span > .muted { margin-right: 4px; font-family: inherit; }

.size-warning {
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--negative-soft);
  border: 1px solid var(--red);
  color: var(--negative);
  border-radius: 4px;
  font-size: 12px;
}

/* === Payoff chart block === */
.payoff-block { padding: 16px 18px 18px; margin-bottom: 80px; /* room for action bar */ }
.payoff-canvas-wrap { height: 320px; }

/* === Action bar (sticky bottom) === */
.action-bar {
  position: fixed;
  bottom: 0; left: 200px; right: 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 12px 24px;
  z-index: 50;
  text-align: center;
  box-shadow: 0 -4px 20px var(--shadow);
}
.btn-large {
  font-size: 15px;
  padding: 12px 32px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
}
.btn-large.success { background: var(--brand); color: var(--on-brand); }
.btn-large.success:hover:not(:disabled) { filter: brightness(1.1); }
.btn-large:disabled { opacity: 0.4; cursor: not-allowed; }

/* === Confirm modal === */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none;
}
.modal.open { display: block; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: var(--scrim);
}
.modal-panel {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 28px;
  width: 95%; max-width: 540px;
  box-shadow: 0 20px 60px var(--shadow);
}
.modal-panel h3 { margin: 0 0 14px; font-size: 16px; }
.confirm-summary-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; font-family: ui-monospace, monospace;
}
.confirm-summary-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.confirm-summary-table td:first-child {
  color: var(--muted); width: 40%;
  font-family: inherit;
  text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px;
}
.modal-actions {
  display: flex; gap: 12px; justify-content: flex-end;
  margin-top: 18px;
}

/* === Manage sheet (Phase B: scale out / close at price) === */
.manage-section { margin-bottom: 16px; }
.manage-section-h { font-weight: 600; margin-bottom: 7px; }
.manage-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.manage-chips .chip {
  cursor: pointer; padding: 4px 11px; border-radius: 5px;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--text);
  font-size: 12px; line-height: 1.4;
}
.manage-chips .chip:hover { border-color: var(--accent); color: var(--accent); }
.manage-chips input[type="number"] { background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: 3px 6px; }
.manage-intent { display: flex; gap: 16px; flex-wrap: wrap; }
.manage-intent label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.manage-preview { margin-top: 8px; font-size: 13px; }

/* === Risk analysis modal — comprehensive position-level analysis === */
.risk-modal .modal-panel.risk-panel {
  width: 95%;
  max-width: 1100px;
  max-height: 92vh;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.risk-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}
.risk-title { font-size: 18px; font-weight: 700; }
.risk-subtitle { font-size: 13px; margin-top: 4px; }
.risk-body { overflow-y: auto; padding: 20px 24px; }
.risk-loading { text-align: center; padding: 60px; color: var(--muted); }

/* Hero P&L card */
.risk-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  background: linear-gradient(135deg, var(--bg-3) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.risk-pnl-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700;
  margin-bottom: 4px;
}
.risk-pnl-big { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.risk-pnl-big.green { color: var(--green); }
.risk-pnl-big.red { color: var(--red); }
.risk-pnl-sub { font-size: 12px; margin-top: 6px; }

.risk-status-badge {
  font-size: 13px; font-weight: 700;
  padding: 8px 16px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 1px;
  white-space: nowrap;
}
.risk-status-badge.win      { background: var(--positive-soft); color: var(--positive); border: 1px solid var(--green); }
.risk-status-badge.win-soft { background: var(--positive-soft); color: var(--positive); }
.risk-status-badge.loss     { background: var(--negative-soft); color: var(--negative); border: 1px solid var(--negative-border); }
.risk-status-badge.loss-soft{ background: var(--negative-soft); color: var(--negative); }
.risk-status-badge.warn     { background: var(--warning-soft); color: var(--warning); border: 1px solid var(--yellow); }
.risk-status-badge.neutral  { background: var(--bg-3); color: var(--muted); }

/* Gauges row */
.risk-gauges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.risk-gauge {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.g-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 6px; }
.g-bar { height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.g-bar.danger .g-fill { background: var(--red); }
.g-fill { height: 100%; background: var(--green); transition: width 0.4s; }
.g-fill.over { background: var(--green); box-shadow: 0 0 8px var(--green); }
.g-fill.danger.over { background: var(--red); box-shadow: 0 0 8px var(--red); }
.g-text { font-size: 12px; font-family: ui-monospace, monospace; }
.g-text.big { font-size: 18px; font-weight: 700; line-height: 1.1; margin-bottom: 4px; }
.g-text.green { color: var(--green); }
.g-text.red { color: var(--red); }

/* Chart */
.risk-chart-wrap {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  height: 460px;            /* taller to fit the IV slider + readout strip above the canvas */
  display: flex; flex-direction: column;
}
.risk-chart-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 10px; }
.risk-chart-wrap canvas { flex: 1; min-height: 0; }

/* Out-of-plot scalar readouts (spot / entry / BE / now / exp). */
.risk-chart-readout {
  display: flex; flex-wrap: wrap; align-items: center;
  font: 600 12px/1.5 ui-monospace, monospace;
  margin: 0 0 8px;
}
.rcr-chip { white-space: nowrap; }
.rcr-sep { color: var(--muted); margin: 0 8px; }

/* Live IV what-if slider. */
.risk-iv-slider {
  background: var(--bg-3, var(--bg-2));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px 10px;
  margin-bottom: 10px;
}
.risk-iv-slider .ivs-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
  margin-bottom: 4px;
}
.risk-iv-slider .ivs-title { font-weight: 700; display: inline-flex; align-items: center; }
.risk-iv-slider .ivs-mode { text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: 4px; }
.risk-iv-slider #ivs-reset { margin-left: auto; }
.ivs-range { width: 100%; accent-color: var(--accent); cursor: pointer; }
.ivs-scale { display: flex; justify-content: space-between; font: 11px ui-monospace, monospace; color: var(--muted); margin-top: 2px; }
.ivs-scale .ivs-anchor { color: var(--text); }
.ivs-dpl { font: 12px ui-monospace, monospace; margin-top: 6px; min-height: 16px; }

/* Inline help dot used for finance-term tooltips (native title=). */
.rk-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; line-height: 13px; text-align: center;
  font-size: 9px; font-weight: 700; border-radius: 50%;
  background: var(--bg-3, var(--bg-2)); color: var(--muted);
  cursor: help; margin-left: 4px; vertical-align: middle;
}

/* ============================================================================
   Custom tooltip layer (.hm-tip) — app-wide replacement for native title=.
   Positioned + filled by tooltip.js; styling (below) is theme-aware via the
   --tip-* tokens. Constrained width fixes the run-on native tooltip; the
   lead/body split gives every tip a readable, professional hierarchy.
   ========================================================================== */
.hm-tip {
  position: fixed;
  z-index: 2000;               /* above nav dropdowns (1100), modals (1000), toasts (1200) */
  left: 0; top: 0;
  max-width: min(300px, calc(100vw - 16px));   /* never wider than the viewport */
  /* Hoverable (WCAG 1.4.13): the pointer may rest on the tip to read a long one.
     tooltip.js tears the tip down on pointerdown so it can't swallow a click. */
  pointer-events: auto;
  opacity: 0;
  transform: translateY(3px) scale(.985);
  transform-origin: center top;
  transition: opacity .13s ease, transform .13s ease;
  /* drop-shadow (not box-shadow) so the caret casts a shadow too → one silhouette */
  filter: drop-shadow(0 10px 26px var(--shadow)) drop-shadow(0 2px 6px var(--shadow));
}
.hm-tip.place-bottom { transform-origin: center bottom; }
.hm-tip.is-shown { opacity: 1; transform: none; }
.hm-tip-inner {
  position: relative;
  background: var(--tip-bg);
  color: var(--tip-text);
  border: 1px solid var(--tip-border);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: .003em;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  max-height: calc(100vh - 18px);            /* never taller than the viewport */
  overflow-y: auto;                          /* (only ever scrolls a rare very-long tip) */
  box-shadow: inset 0 1px 0 var(--tip-hi);   /* faint top highlight → soft-lit edge */
}
.hm-tip-lead {
  display: block;
  font-weight: 650;
  color: var(--tip-text);
  letter-spacing: .008em;
  margin-bottom: 3px;
}
.hm-tip-body { display: block; color: var(--tip-body); }
.hm-tip-lead + .hm-tip-body { color: var(--tip-body); }
.hm-tip strong { color: var(--tip-text); font-weight: 650; }
.hm-tip-arrow {
  position: absolute;
  width: 9px; height: 9px;
  background: var(--tip-bg);
  border: 1px solid var(--tip-border);
  /* translateX(-50%) makes the JS-set `left` the caret's CENTRE (not its edge),
     so the point lands exactly under the anchor centre. */
  transform: translateX(-50%) rotate(45deg);
  border-radius: 1px;
  pointer-events: none;
}
/* Show only the two edges of the caret that face away from the panel, so it
   reads as a seamless point rather than a floating diamond. */
.hm-tip.place-top .hm-tip-arrow { bottom: -5px; border-top: none; border-left: none; }
.hm-tip.place-bottom .hm-tip-arrow { top: -5px; border-bottom: none; border-right: none; }
@media (prefers-reduced-motion: reduce) {
  .hm-tip { transition: none; transform: none; }
}

/* Estimate banner — whole-surface-is-an-estimate warning. */
.risk-estimate-banner {
  background: color-mix(in srgb, var(--warning, #e9b949) 16%, transparent);
  border: 1px solid var(--warning, #e9b949);
  color: var(--text);
  border-radius: 6px; padding: 8px 12px; margin-bottom: 12px;
  font-size: 13px;
}
.greeks-card { margin-bottom: 12px; }

/* Append-only post-entry note log (trade journal). */
.journal-log { margin-top: 12px; }
.journal-log .jl-head { text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.journal-log .jl-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.journal-log .jl-list li { font-size: 13px; line-height: 1.4; }
.journal-log .jl-ts { margin-right: 6px; }
.journal-log .jl-add { display: flex; gap: 6px; align-items: center; }
.journal-log .jl-add .je-input { flex: 1; }
.journal-log .jl-status { margin-top: 4px; min-height: 14px; }

/* Two-column section blocks */
.risk-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.risk-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.risk-card-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--muted); margin-bottom: 10px; font-weight: 700;
}

/* Scenarios + decay tables */
.scen-table, .decay-table, .journal-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.scen-table th, .decay-table th { font-size: 10px; padding: 4px 6px; }
.scen-table td, .decay-table td, .journal-table td { padding: 5px 6px; border-bottom: 1px solid var(--border); }
.scen-table tr:last-child td, .decay-table tr:last-child td, .journal-table tr:last-child td { border-bottom: none; }
.scen-table tr.current-row td {
  background: var(--info-soft);
  font-weight: 700;
}
.journal-table td:first-child { color: var(--muted); width: 40%; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; }
.notes-cell { font-style: italic; color: var(--text); }

/* Greeks tile bar */
.greeks-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.g-tile {
  background: var(--bg-3);
  border-radius: 6px;
  padding: 10px 12px;
  text-align: center;
}
.g-tile-label { font-size: 10px; color: var(--muted); margin-bottom: 4px; }
.g-tile-val { font-family: ui-monospace, monospace; font-size: 14px; font-weight: 700; }
.g-tile-unit { font-size: 9px; color: var(--muted); margin-top: 3px; letter-spacing: 0.3px; text-transform: lowercase; }

.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 0 0 var(--positive-glow);
  vertical-align: middle;
  margin-right: 2px;
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 var(--positive-glow); }
  70%  { box-shadow: 0 0 0 6px transparent;   }
  100% { box-shadow: 0 0 0 0 transparent;     }
}

/* Decision strip — sticky top row with P&L hero + status badge + primary actions */
.risk-decision {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, var(--bg-3) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 12px;
}
.risk-decision .risk-pnl-big { font-size: 34px; }
.risk-decision .risk-pnl-sub { font-size: 11px; margin-top: 4px; }
.risk-decision .ds-badge-cell { justify-self: center; }
.risk-decision .ds-actions { display: flex; gap: 8px; }

/* Since-entry row */
.risk-since {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.se-cell {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.se-label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.se-vals  { font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.3; }
.se-vals .se-arrow { color: var(--muted); margin: 0 5px; }
.se-vals .se-old   { color: var(--muted); }
.se-change { font-size: 10px; margin-top: 3px; font-family: ui-monospace, monospace; }
.se-change.green { color: var(--green); }
.se-change.red   { color: var(--red); }
.se-change.muted { color: var(--muted); }

/* Thresholds + diagnostics two-up rows (split from the old 5-up gauges) */
.risk-thresholds, .risk-diagnostics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

/* Trailing stop full-width row */
.risk-trail {
  margin-bottom: 16px;
}
.trail-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
}
.trail-card .trail-head { display: flex; flex-direction: column; gap: 4px; }
.trail-card .g-label { margin-bottom: 0; }
.trail-card .g-text.big { font-size: 17px; margin-bottom: 0; }
.trail-card .trail-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* Collapsed journal */
.risk-journal-details {
  margin-top: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.risk-journal-details > summary {
  cursor: pointer;
  padding: 10px 16px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.risk-journal-details > summary::before {
  content: '▸';
  font-size: 10px;
  display: inline-block;
  transition: transform 0.15s;
}
.risk-journal-details[open] > summary::before { transform: rotate(90deg); }
.risk-journal-details > summary::-webkit-details-marker { display: none; }
.risk-journal-details .journal-body { padding: 0 16px 12px; }

/* Fill strip: quote ladder × fill quality (worst / mid / best, with implied P&L) */
.risk-fill-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.fs-cell {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  display: grid;
  gap: 4px;
  align-items: baseline;
  grid-template-areas:
    "label  price"
    "pnl    pnl"
    "detail detail";
  grid-template-columns: 1fr auto;
}
.fs-cell.mid {
  border-color: var(--info);
  background: linear-gradient(135deg, var(--info-soft), var(--bg-2));
}
.fs-label  { grid-area: label;  font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.fs-price  { grid-area: price;  font-family: ui-monospace, monospace; font-size: 11px; color: var(--muted); }
.fs-pnl    { grid-area: pnl;    font-family: ui-monospace, monospace; font-size: 18px; font-weight: 700; line-height: 1.1; }
.fs-pnl.green { color: var(--green); }
.fs-pnl.red   { color: var(--red); }
.fs-detail { grid-area: detail; font-size: 10px; color: var(--muted); }

/* Probability strip */
.risk-prob-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.prob-cell {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
}
.prob-label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.prob-val   { font-family: ui-monospace, monospace; font-size: 18px; font-weight: 700; line-height: 1.1; }
.prob-val.green { color: var(--green); }
.prob-val.red   { color: var(--red); }
.prob-detail { font-size: 10px; color: var(--muted); margin-top: 3px; }

/* P&L attribution row */
.risk-attrib {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.attrib-header {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--muted); font-weight: 700; margin-bottom: 8px;
}
.attrib-header .attrib-eq { font-family: ui-monospace, monospace; font-weight: 400; text-transform: none; margin-left: 8px; color: var(--text); }
.attrib-cells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.attrib-cell {
  background: var(--bg-3);
  border-radius: 6px;
  padding: 8px 10px;
}
.attrib-label  { font-size: 10px; color: var(--muted); margin-bottom: 3px; }
.attrib-val    { font-family: ui-monospace, monospace; font-size: 15px; font-weight: 700; }
.attrib-val.green { color: var(--green); }
.attrib-val.red   { color: var(--red); }
.attrib-detail { font-size: 10px; color: var(--muted); margin-top: 3px; }

/* Inline-editable journal cells */
.journal-table td.editable {
  cursor: pointer;
  position: relative;
  transition: background 0.12s;
}
.journal-table td.editable:hover {
  background: var(--info-soft);
}
.journal-table td.editable:hover::after {
  content: '✎';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--muted);
  opacity: 0.6;
}
.journal-table td.editing {
  background: var(--info-soft);
  padding: 2px 6px;
}
.journal-table td .je-input {
  background: var(--bg-3);
  border: 1px solid var(--accent, var(--info));
  border-radius: 4px;
  color: var(--text);
  padding: 4px 6px;
  font: inherit;
  font-family: ui-monospace, monospace;
  width: 70px;
}
.journal-table td .je-input:focus { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.journal-table td .je-hint {
  font-size: 10px;
  color: var(--muted);
  margin-left: 8px;
}
.journal-table td .je-stars {
  display: inline-flex;
  gap: 2px;
  cursor: pointer;
  user-select: none;
}
.journal-table td .je-star {
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  transition: color 0.1s;
}
.journal-table td .je-star.lit { color: var(--warning); }
.journal-table td .je-star:hover, .journal-table td .je-star:hover ~ .je-star.lit { color: var(--warning); }
.journal-table td .je-stars:hover .je-star { color: var(--muted); }
.journal-table td .je-stars .je-star:hover,
.journal-table td .je-stars .je-star:hover ~ .je-star { color: var(--warning); }

/* Footer actions (legacy, kept for safety in case anything still references it) */
.risk-actions {
  display: flex; gap: 12px; justify-content: flex-end;
  padding-top: 12px; margin-top: 8px;
  border-top: 1px solid var(--border);
}
.btn-large.danger { background: var(--negative-strong); color: #fff; border: none; padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-large.danger:hover { filter: brightness(1.1); }

.footer-meta { color: var(--muted); font-size: 11px; margin-top: 20px; text-align: right; }

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator { display: inline; }
.spinner { width: 12px; height: 12px; border: 2px solid var(--bg-3); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* === Spot bar (top of chain page) === */
.spot-bar {
  display: flex; align-items: center; gap: 24px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 18px; margin-bottom: 16px;
}
.spot-symbol { font-size: 18px; font-weight: 700; letter-spacing: 0.5px; }
.spot-prices { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 18px; }
.spot-prices > span { margin-right: 6px; }
.spot-meta { margin-left: auto; color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot.live { background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* === Expiration accordion === */
.exp-list { display: flex; flex-direction: column; gap: 6px; padding-bottom: 80px; /* room for ticket bar */ }
.exp-acc {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden;
}
.exp-acc[open] { border-color: var(--accent); }
.exp-summary {
  list-style: none;
  padding: 12px 16px;
  cursor: pointer;
  display: flex; align-items: center; gap: 16px;
  user-select: none;
  transition: background 0.15s;
}
.exp-summary::-webkit-details-marker { display: none; }
.exp-summary:hover { background: var(--bg-3); }
.exp-acc[open] > .exp-summary { background: var(--bg-3); border-bottom: 1px solid var(--border); }
.caret { display: inline-block; transition: transform 0.2s; color: var(--muted); width: 12px; }
.exp-acc[open] .caret { transform: rotate(90deg); color: var(--accent); }
.exp-date { font-size: 14px; }
.exp-dte { font-size: 13px; }
.exp-counts { margin-left: auto; }
.exp-content { padding: 0; }
.exp-content:not(:empty) { padding: 12px 16px 16px; }

/* === Stacked CALL / STRIKE / PUT chain === */
.chain-stack-meta { padding-bottom: 8px; }
.chain-stack {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  border: none;
  table-layout: fixed;
}
.chain-stack thead tr:first-child th {
  background: transparent;
  border-bottom: 2px solid var(--border);
  font-size: 13px;
  letter-spacing: 1px;
  padding: 8px 4px;
  text-align: center;
}
.chain-stack thead tr:first-child .side-calls { color: var(--positive); }
.chain-stack thead tr:first-child .side-puts  { color: var(--negative); }
.chain-stack thead tr:first-child .strike-head { color: var(--accent); }
.chain-stack thead tr:nth-child(2) th { background: transparent; border-bottom: 1px solid var(--border); padding: 4px; }
.chain-stack tbody tr { border: none; }
.chain-stack tbody td { padding: 4px 4px; border-bottom: 1px solid var(--border); }
.chain-stack tbody tr:last-child td { border-bottom: none; }

.strike-cell {
  background: var(--bg-3);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  text-align: center;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.strike-row.atm .strike-cell {
  background: var(--info-soft);
  color: var(--info);
}
.strike-row.atm .call-cell, .strike-row.atm .put-cell {
  background: var(--info-soft);
}

.call-cell, .put-cell {
  cursor: default;
  transition: background 0.12s;
  font-size: 13px;
}

/* Each option side lays its five values (OI / bid / ask / delta / IV) out in a
   single-row, five-track grid — no wrapping onto a second line. The per-column
   header row (.call-head / .put-head) reuses this exact grid over the same
   colspan-5 span, so every label stays aligned above its column's values. */
.cell-row {
  display: grid;
  /* minmax(0, 1fr): equal tracks that may shrink below content so the row can
     never overflow its colspan-constrained cell — the ellipsis below is the
     graceful fallback on narrow viewports. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: baseline;
  column-gap: 4px;
  white-space: nowrap;
}
.cell-row > span {
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Small breathing room between the value block and the central strike column,
   applied to the grid box identically on header + body so alignment holds. */
.call-cell .cell-row, .call-head .cell-row { padding-right: 8px; }
.put-cell  .cell-row, .put-head  .cell-row { padding-left: 8px; }
/* Per-column header labels: dimmed, sitting directly atop their values. */
.hdr-col-row .cell-row > span { color: var(--muted); }

/* Bid/ask spans are the actionable click targets (TOS-style):
   click bid → SELL at bid (green), click ask → BUY at ask (red). */
.cell-bid, .cell-ask {
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.12s, outline-color 0.12s;
}
.cell-bid:hover { background: var(--positive-glow); }
.cell-ask:hover { background: var(--negative-border); }

.cell-bid.selected {
  background: var(--positive-glow) !important;
  outline: 1px solid var(--green);
  outline-offset: -1px;
}
.cell-ask.selected {
  background: var(--negative-border) !important;
  outline: 1px solid var(--red);
  outline-offset: -1px;
}

.call-cell.selected, .put-cell.selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.call-cell.selected.short, .put-cell.selected.short { background: var(--positive-soft) !important; outline-color: var(--green); }
.call-cell.selected.long,  .put-cell.selected.long  { background: var(--negative-soft) !important; outline-color: var(--red); }

/* === Tick-direction coloring (live red/green based on last-change direction) === */
.tick-up   { color: var(--green); }
.tick-down { color: var(--red); }
/* Default bid/ask color when no direction set yet (first-seen quote) */
.cell-bid, .cell-ask { color: var(--text); }
.cell-bid.tick-up   { color: var(--green); }
.cell-bid.tick-down { color: var(--red); }
.cell-ask.tick-up   { color: var(--green); }
.cell-ask.tick-down { color: var(--red); }

/* === Expiration row IVx + expected move === */
.exp-iv { color: var(--accent); font-size: 13px; }
.exp-iv strong { font-weight: 600; }
.exp-em { font-size: 12px; }

/* === Expiration cycle badge (daily / weekly / monthly / quarterly / eom / leaps) ===
   One pill per listing cycle. Colour encodes a visual hierarchy: daily is the
   quiet default; weekly→blue; monthly→green (the liquid anchor); quarterly→
   purple with a solid border (rarest / most significant). Tokens only, so both
   themes adapt. The `title` tooltip explains each cycle (finance-term hygiene). */
.exp-cycle {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: help;
}
.exp-cycle--daily     { background: var(--surface-3);    color: var(--text-subtle); border-color: var(--border); }
.exp-cycle--weekly    { background: var(--info-soft);     color: var(--info);        border-color: var(--info-soft); }
.exp-cycle--monthly   { background: var(--positive-soft); color: var(--positive);    border-color: var(--positive-border); }
.exp-cycle--quarterly { background: var(--fam-hedge-soft);color: var(--fam-hedge);   border-color: var(--fam-hedge); }
.exp-cycle--eom       { background: var(--orange-soft);   color: var(--orange);      border-color: var(--orange-soft); }
.exp-cycle--leaps     { background: transparent;          color: var(--text-muted);  border-color: var(--border-strong); }

/* Adaptive legend above the expiration list (shows only present cycles). */
.exp-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0 2px;
}
.exp-legend-label {
  text-transform: uppercase;
  letter-spacing: var(--lbl-track);
  font-size: var(--lbl-size);
}

/* OI cell — tighter, dimmer */
.cell-oi { font-size: 11px; }

/* === ITM / OTM moneyness shading === */
/* ITM cells get a subtle background tint to make the moneyness diagonal visually clear */
.itm-call { background: var(--positive-soft); }
.itm-put  { background: var(--negative-soft); }
.otm-call, .otm-put { background: transparent; }

/* === ATM marker row — orange line at the spot price between bracketing strikes === */
.atm-marker-row td {
  padding: 5px 12px;
  background: var(--bg-2);
  border-top: 2px solid var(--warning);
  border-bottom: 2px solid var(--warning);
  font-size: 11px;
  color: var(--warning);
  font-weight: 700;
  letter-spacing: 1px;
}
.atm-marker-row .atm-call-side { text-align: right; padding-right: 16px; }
.atm-marker-row .atm-put-side  { text-align: left;  padding-left: 16px; }
.atm-marker-row .atm-strike-cell {
  text-align: center;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 13px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
.atm-marker-row .atm-arrow { letter-spacing: 1.5px; }

/* === Strikes selector (top-right of page header) === */
.strikes-selector { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.strikes-selector label { font-weight: 700; letter-spacing: 1px; }
.strikes-dropdown {
  background: var(--bg-3); color: var(--text); border: 1px solid var(--border);
  padding: 6px 10px; border-radius: 6px; font-size: 14px; font-weight: 600; min-width: 80px;
  font-family: inherit;
  cursor: pointer;
}
.strikes-dropdown:focus { outline: none; border-color: var(--accent); }

/* Header rows in the chain stack — clearer visual separation */
.chain-stack thead .hdr-side-row th {
  font-size: 12px;
  letter-spacing: 1.5px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
}
.chain-stack thead .hdr-col-row th {
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 5px 4px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
}
.chain-stack thead .hdr-col-row .strike-head { color: var(--accent); }

/* === Floating ticket bar === */
.ticket-bar {
  position: fixed;
  bottom: 0; left: 200px; right: 0; /* leaves room for sidebar */
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 12px 24px;
  z-index: 100;
  box-shadow: 0 -4px 20px var(--shadow);
}
.ticket-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  max-width: 1400px;
}
/* Dynamic legs area — every selected leg shows as a chip; wraps for N legs. */
.ticket-legs {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.ticket-legs-empty { font-size: 12px; color: var(--muted); }
.ticket-leg-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px 5px 10px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 6px;
}
.ticket-leg-chip.short { border-left-color: var(--green, var(--positive)); }
.ticket-leg-chip.long  { border-left-color: var(--red, var(--negative-strong)); }
.ticket-leg-chip .leg-remove {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px;
}
.ticket-leg-chip .leg-remove:hover { color: var(--red, var(--negative-strong)); }
.ticket-leg {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 12px;
  background: var(--bg-3);
  border-radius: 6px;
  min-height: 42px;
  justify-content: center;
}
.leg-label { font-size: 10px; text-transform: uppercase; color: var(--muted); letter-spacing: 1px; font-weight: 700; }
.leg-text { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 13px; }
.leg-empty { font-size: 12px; }
.ticket-actions { display: flex; gap: 12px; align-items: center; }
.ticket-actions .small { white-space: nowrap; }
#ticket-credit { max-width: 360px; text-align: right; }

/* === Trailing stop UI === */

/* Trail status row inside positions card */
.trail-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--bg-3);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 12px;
  flex-wrap: wrap;
}
.trail-row.trail-hit {
  border-left-color: var(--red);
  background: var(--negative-soft);
}
.trail-row.trail-none {
  border-left-color: var(--border);
  background: transparent;
}
.trail-row a { color: var(--accent); }

/* ===== Exit-plan card (3c) — explainable stop/target/time plan ===== */
.exit-plan {
  margin-top: 12px; padding: 10px 12px; border-radius: 6px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}
.exit-plan-active   { border-left-color: var(--brand); }
.exit-plan-alert    { border-left-color: var(--positive); }
.exit-plan-breached { border-left-color: var(--negative-strong); background: var(--negative-soft); }
.exit-plan-idle     { border-left-color: var(--border); }
.xp-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.xp-icon { font-size: 13px; }
.xp-title { font-weight: 600; font-size: 13px; }
.xp-badge {
  margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  padding: 2px 7px; border-radius: 10px; text-transform: uppercase;
  background: var(--brand-soft); color: var(--brand);
}
.xp-badge.xp-alert    { background: var(--positive-soft); color: var(--positive); }
.xp-badge.xp-breached { background: var(--negative-strong); color: #fff; }
.xp-badge.xp-idle     { background: var(--bg-2); color: var(--muted); }
.xp-rules { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 2px; }
.xp-rule { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.xp-rule-label {
  flex: none; min-width: 84px; font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.3px; color: var(--muted);
}
.xp-rule-tp .xp-rule-label { color: var(--positive); }
.xp-rule-sl .xp-rule-label { color: var(--negative-strong); }
.xp-rule-value { color: var(--fg); }
.xp-rule-dollars { color: var(--fg); }
.xp-rule-detail::before { content: '· '; }
.xp-gauge { margin: 8px 0 4px; }
.xp-gauge-track { display: flex; align-items: center; gap: 8px; }
.xp-gauge-edge { flex: none; white-space: nowrap; }
.xp-gauge-bar {
  flex: 1; height: 8px; min-width: 80px; border-radius: 5px; overflow: hidden;
  background: linear-gradient(90deg, var(--negative-soft), var(--bg-2) 50%, var(--positive-soft));
  position: relative;
}
.xp-gauge-fill {
  display: block; height: 100%; width: 0;
  background: var(--muted); opacity: 0.001;  /* the marker is the right edge */
  border-right: 2px solid var(--fg);
}
.xp-gauge-safe  .xp-gauge-fill { border-right-color: var(--positive); }
.xp-gauge-warn  .xp-gauge-fill { border-right-color: var(--warning); }
.xp-gauge-breach .xp-gauge-fill { border-right-color: var(--negative-strong); }
.xp-gauge-label { color: var(--muted); margin-top: 4px; font-family: ui-monospace, monospace; }
.xp-why {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
  line-height: 1.45;
}
.xp-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.xp-actions a { color: var(--accent); text-decoration: none; }
.xp-actions a:hover { text-decoration: underline; }

/* ===== "Full trade analysis" deep-dive (3d): signal → execution narrative ===== */
.tr-lazy { margin-top: 10px; }
.tr-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 12px; cursor: pointer; font: inherit; color: var(--fg);
}
.tr-toggle:hover { border-color: var(--brand); }
.tr-caret { margin-left: auto; color: var(--muted); font-size: 11px; }
.tr-body { margin-top: 8px; }
.tr-deep { display: flex; flex-direction: column; gap: 10px; }
.tr-section {
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-2);
  padding: 10px 12px; border-left: 3px solid var(--brand);
}
.tr-sec-head { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.tr-sec-icon { font-size: 13px; }
.tr-narrative { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.tr-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 16px; margin-top: 8px;
}
.tr-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tr-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted); font-weight: 600;
}
.tr-value { font-size: 14px; font-weight: 600; font-family: ui-monospace, monospace; }
.tr-item-detail { font-size: 11px; line-height: 1.3; }

/* ===== Condensed dashboard bands — dense, glanceable rows that replace the
   four stacked multi-card sections (equity hero / BP / period / track). ===== */
.dash-band {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 26px; padding: 12px 16px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; margin-bottom: 12px;
}
.dash-account { justify-content: space-between; }
.dab-equity { display: flex; flex-direction: column; gap: 1px; }
.dab-equity .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.dab-equity .val { font-size: 30px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.dab-periods { display: flex; gap: 20px; flex-wrap: wrap; }
.dperiod { display: flex; flex-direction: column; gap: 3px; min-width: 108px; }
.dperiod .ptop { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; }
.dperiod .ptgt { font-size: 10px; }
.dperiod .pbar { height: 4px; background: var(--bg-3); border-radius: 2px; overflow: hidden; }
.dperiod .pbar > div { height: 100%; }
.dperiod .pbar .over  { background: var(--positive); }
.dperiod .pbar .under { background: var(--info); }
.dperiod .pbar .bad   { background: var(--negative-strong); }
.dstat { display: flex; flex-direction: column; gap: 2px; }
.dstat .lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.dstat .val { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dstat-bp { gap: 5px; }
.dash-track { gap: 10px 24px; }
.dtrack-h { flex-basis: 100%; }
.dtrack-h .ec-scope { opacity: .8; font-style: italic; }
.dstat-ci { display: block; margin-top: 2px; white-space: nowrap; font-size: 10px; }
.strat-focus { margin-left: 8px; text-decoration: none; white-space: nowrap; }
.strat-focus:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .dash-account { gap: 14px; }
  .dab-equity .val { font-size: 24px; }
  .dash-hero { grid-template-columns: 1fr; grid-template-areas: "equity" "periods" "vitals"; }
}

/* ===== Global top bar — market session · NYC clock · β-Δ · broker ===== */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: -24px -32px 20px;            /* bleed to the main content edges */
  padding: 9px 32px;
  background: var(--topbar-bg);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-group { display: flex; align-items: center; gap: 16px; }
.topbar-right { gap: 10px; }
.topbar-left { gap: 12px; min-width: 0; flex: 0 1 auto; }

/* ===== Header primary navigation (relocated from the sidebar) =====
   Borderless text buttons + click dropdowns. Mirrors the account-menu dropdown
   look so both menu families read as one language. Brand = chrome/active-nav. */
.nav-bar { display: flex; align-items: center; gap: var(--space-1); }
.nav-link, .nav-menu-btn {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 6px 10px; border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--text-muted); cursor: pointer;
  font: inherit; font-weight: 600; font-size: var(--fs-md); line-height: 1;
}
.nav-link:hover, .nav-menu-btn:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.nav-menu-btn[aria-expanded="true"] { background: var(--surface-hover); color: var(--text); }
.nav-link.active, .nav-menu-btn.is-active { color: var(--text); box-shadow: inset 0 -2px 0 var(--brand); }
.nav-menu { position: relative; display: inline-block; }
.nav-menu-caret { color: var(--muted); font-size: 10px; transition: transform 0.15s; }
.nav-menu-btn[aria-expanded="true"] .nav-menu-caret { transform: rotate(180deg); }
.nav-menu-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: auto; z-index: 1100;
  min-width: 180px; max-height: 80vh; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--elev-pop); padding: 6px;
}
.nav-menu-dropdown[hidden] { display: none; }
.nav-menu-item {
  display: block; width: 100%; box-sizing: border-box; text-align: left; white-space: nowrap;
  padding: 7px 10px; border-radius: var(--radius-sm); font-size: var(--fs-md); color: var(--fg);
  text-decoration: none;
}
.nav-menu-item:hover { background: var(--bg-3); text-decoration: none; }
.nav-menu-item.active { background: var(--brand-soft); color: var(--brand); }
.nav-mobile { display: none; }   /* desktop shows the full bar; hamburger ≤1024px */

/* Compact market-status + clock unit. The verbose word is hidden (dot colour +
   title convey open/closed); the clock-tick + market-flip JS still target the ids. */
.mkt-clock { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.mkt-clock .mkt-status-text { display: none; }

.mkt-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.mkt-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.mkt-status.is-open .dot { background: var(--green); animation: hm-pulse 2.4s ease-in-out infinite; }
.mkt-status.is-open .mkt-status-text { color: var(--green); }
.mkt-status.is-closed .mkt-status-text { color: var(--muted); }
@keyframes hm-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--positive-glow); }
  50%      { box-shadow: 0 0 0 5px var(--positive-soft); }
}
.topbar-clock { color: var(--text); font-size: 13px; letter-spacing: 0.3px; font-variant-numeric: tabular-nums; }

/* Global ticker omnibox (centered in the top bar) */
.sym-omni {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 1 240px;
  min-width: 150px; max-width: 300px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 3px 10px;
}
.sym-omni:focus-within { border-color: var(--accent); }
.sym-omni-icon { color: var(--muted); font-size: 13px; line-height: 1; }
.sym-omni-input {
  background: transparent; border: none; outline: none; color: var(--text);
  font-size: 13px; width: 100%; font-family: inherit; text-transform: uppercase;
}
.sym-omni-input::placeholder { color: var(--muted); text-transform: none; }
@media (max-width: 720px) { .sym-omni { order: 3; flex-basis: 100%; max-width: none; } }

/* Symbol-page quick-add-to-watchlist dropdown */
.sym-wl { position: relative; display: inline-block; }
.sym-wl-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 230px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px var(--shadow); padding: 4px;
}
.sym-wl-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; background: transparent; border: none; color: var(--text);
  padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.sym-wl-item:hover:not([disabled]) { background: var(--bg-3); }
.sym-wl-item[disabled] { cursor: default; opacity: 0.6; }
.sym-wl-item .sym-wl-mark { color: var(--accent); font-weight: 700; white-space: nowrap; }
.sym-wl-new { color: var(--accent); }
.sym-wl-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* Sidebar active-watchlist — full-bleed, ToS-style quote rows (symbol · last · %chg).
   The list flex-fills the rail and scrolls internally. Grid is INVERTED vs the old
   layout: symbol = 1fr (truncates only as a last resort, never needed for ≤5-char
   tickers); price = auto (content-sized → NEVER clips); change = a fixed 46px rail
   so the sign/decimal columns line up dead-straight down the list. */
.wl-q-list {
  flex: 1 1 auto; min-height: 60px; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; padding: var(--space-1) 0;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.wl-q-list::-webkit-scrollbar { width: 8px; }
.wl-q-list::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: var(--radius-pill);
  border: 2px solid transparent; background-clip: content-box;
}
.wl-q-list::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
.wl-q-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 46px;
  align-items: baseline; column-gap: var(--space-2);
  padding: 3px 12px; border-radius: var(--radius-sm); position: relative;
  color: var(--text); text-decoration: none;
  font-size: var(--fs-sm); line-height: 1.4;
}
.wl-q-row:hover, .wl-q-row:focus-visible { background: var(--surface-2); text-decoration: none; }
.wl-q-sym {
  font-weight: 600; letter-spacing: 0.2px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; color: var(--text);
}
.wl-q-last {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--text);          /* neutral — the % column carries the colour */
}
.wl-q-chg {
  text-align: right; font-size: var(--fs-xs); min-width: 46px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Calm heat-map: the % carries sign + caret + colour; a faint inset edge-tint gives
   the list a quiet green/red field without becoming a christmas tree. */
.wl-q-chg.green { color: var(--positive); }
.wl-q-chg.red   { color: var(--negative); }
.wl-q-row.is-up   { box-shadow: inset 2px 0 0 0 var(--positive-soft); }
.wl-q-row.is-down { box-shadow: inset 2px 0 0 0 var(--negative-soft); }
.wl-q-row.is-up:hover   { background: var(--positive-soft); }
.wl-q-row.is-down:hover { background: var(--negative-soft); }
.wl-q-more { display: block; font-size: var(--fs-xs); color: var(--muted); padding: 6px 12px 4px; text-decoration: none; }
.wl-q-more:hover { color: var(--accent); text-decoration: underline; }

/* β-Δ + broker chips share a chip shell */
.bd-chip, .broker-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: 8px; white-space: nowrap;
  border: 1px solid var(--border); background: var(--bg-2);
  font-size: 12px; line-height: 1; color: var(--text);
}
.bd-chip:hover, .broker-chip:hover { border-color: var(--accent); text-decoration: none; }
/* Ghost icon buttons in the topbar (theme toggle, market bell) — borderless
   controls so they read as actions, not as a third status chip. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: var(--radius-md);
  border: 1px solid transparent; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: 14px; line-height: 1;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn .ico { display: block; }
.bell-toggle[aria-pressed="true"] { opacity: 0.5; }
/* Theme toggle shows the icon for the theme you'd switch TO (sun while dark). */
[data-theme="dark"]  #theme-toggle .ico-moon { display: none; }
[data-theme="light"] #theme-toggle .ico-sun  { display: none; }
.bd-chip .bd-k { color: var(--muted); font-weight: 700; letter-spacing: 0.3px; }
.bd-chip .bd-v { font-family: ui-monospace, monospace; font-weight: 700; }
.bd-chip .bd-v.green { color: var(--green); }
.bd-chip .bd-v.red { color: var(--red); }
.bd-chip .bd-v.yellow { color: var(--yellow); }
.bd-chip .bd-v.muted { color: var(--muted); }

/* ===== Zurg status pill — the intelligence layer, always in view ===== */
.zurg-chip {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: 8px; white-space: nowrap; cursor: default;
  border: 1px solid var(--border); background: var(--bg-2);
  font-size: 12px; line-height: 1; color: var(--text);
}
.zurg-chip:hover, .zurg-chip:focus-within { border-color: var(--accent); }
.zurg-chip .zurg-k { font-weight: 700; letter-spacing: 0.3px; }
.zurg-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--muted); transition: background 0.3s, box-shadow 0.3s;
}
.zurg-chip[data-state="online"] .zurg-dot { background: var(--positive); box-shadow: 0 0 0 3px var(--positive-glow); }
.zurg-chip[data-state="degraded"] .zurg-dot { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.zurg-chip[data-state="offline"] .zurg-dot { background: var(--negative-strong); box-shadow: 0 0 0 3px var(--negative-soft); }
.zurg-pop {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 240;
  min-width: 280px; max-width: 340px; padding: 11px 13px; white-space: normal;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
  font-size: 12px; line-height: 1.45; cursor: auto; text-align: left;
}
/* Invisible hover bridge so the pointer can travel chip → panel. */
.zurg-pop::before { content: ""; position: absolute; top: -9px; left: 0; right: 0; height: 9px; }
.zurg-chip:hover .zurg-pop, .zurg-chip:focus-within .zurg-pop { display: block; }
.zurg-pop-head { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.zurg-pop-head .zurg-pop-state { color: var(--muted); font-weight: 600; }
.zurg-chip[data-state="online"] .zurg-pop-state { color: var(--positive); }
.zurg-chip[data-state="degraded"] .zurg-pop-state { color: var(--warning); }
.zurg-chip[data-state="offline"] .zurg-pop-state { color: var(--negative); }
.zurg-pop-tag { margin: 3px 0 9px; font-size: 11px; }
.zurg-row { display: flex; align-items: baseline; gap: 7px; padding: 3px 0; }
.zurg-row-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; align-self: center; background: var(--muted); }
.zurg-row-dot.ok { background: var(--positive); }
.zurg-row-dot.warn { background: var(--warning); }
.zurg-row-label { font-weight: 600; }
.zurg-row-detail { margin-left: auto; font-family: ui-monospace, monospace; font-size: 11px; }
.zurg-pop-foot { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); font-size: 11px; }
.zurg-pop-foot:empty { display: none; }

.broker-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.broker-chip.is-connected .dot { background: var(--green); }
.broker-chip.stream-up .dot { background: var(--green); box-shadow: 0 0 0 3px var(--positive-glow); }
.broker-chip.stream-down .dot { background: var(--yellow); box-shadow: 0 0 0 3px var(--warning-soft); }
.broker-chip .broker-label { font-weight: 600; }
.broker-chip.is-off .broker-label { color: var(--muted); }
.broker-chip .broker-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.broker-chip .broker-sub:empty { display: none; }

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding: 8px 16px; margin: -24px -16px 16px; }
  .broker-sub { display: none; }
}

/* ===== Equity-curve collapsible (directly under the account band) ===== */
.equity-curve-section { margin-top: 18px; }
.equity-curve-section[open] .pos-caret { transform: rotate(90deg); }
.equity-curve-wrap {
  margin-top: 12px;
  /* position:relative → the lightweight-charts divs measure THIS box + the tooltip
     anchors to it; min-width:0 lets it shrink inside the grid. */
  position: relative; min-width: 0;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px;
}
/* Taller main pane (280→420px, operator req 2026-07-18) — the curve is the page's
   centerpiece; clamp keeps it sane on short laptop viewports. */
.equity-lw { height: clamp(320px, 46vh, 480px); width: 100%; }
.equity-split { display: flex; flex-direction: column; gap: 10px; }
.equity-pane-h { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.equity-lw-pane { height: 230px; width: 100%; }
.equity-pane-h .pos { color: var(--positive); }
.equity-pane-h .neg { color: var(--negative); }
/* Crosshair tooltip — anchored inside .equity-curve-wrap; pointer-events off so it never
   eats hover (B5 pins it for the /trade links). */
.equity-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--chart-tip-bg); color: var(--chart-tip-text);
  border: 1px solid var(--border); border-radius: var(--radius-md, 8px);
  box-shadow: var(--elev-pop, 0 6px 20px rgba(0,0,0,.3));
  padding: 8px 10px; font-size: 12px; max-width: 280px; line-height: 1.5;
}
.equity-tip.pinned { pointer-events: auto; }
.equity-tip a { color: inherit; text-decoration: underline; }
.equity-tip .ec-tip-day { font-weight: 600; margin-bottom: 2px; }
.equity-tip .ec-tip-note { color: var(--muted); font-size: 11px; }
.equity-tip .ec-tip-trade { display: flex; gap: 6px; align-items: baseline; margin-top: 3px; }
.equity-tip .ec-tip-trade .pos { color: var(--positive); }
.equity-tip .ec-tip-trade .neg { color: var(--negative); }
/* Overlay-pill toggles (SPY / Trades / Peak) — same metrics as the range pills. */
.ec-toggles { display: flex; gap: 4px; }
.ec-pill { background: var(--bg-3); color: var(--muted); border: 1px solid var(--border);
  padding: 4px 10px; border-radius: 5px; font-size: 12px; cursor: pointer; }
.ec-pill:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.ec-pill.active { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
.ec-pill:disabled { opacity: .35; cursor: not-allowed; }

/* Loud "this chart is filtered" chip — same amber idiom as .stale-chip, but clickable
   (clears the global filter). Shown only when the payload says meta.filtered. */
.ec-filtered-chip { display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--warning);
  background: var(--amber-tint); border: 1px solid var(--warning);
  border-radius: 8px; padding: 3px 9px; text-decoration: none; cursor: pointer; }
/* Author display beats the UA's [hidden]{display:none} — counter-rule required
   (same pattern as .nav-menu-dropdown[hidden] / .user-menu-dropdown[hidden]). */
.ec-filtered-chip[hidden] { display: none; }
.ec-filtered-chip:hover { text-decoration: none; filter: brightness(1.12); }

/* Line | Candles segmented toggle (lives in the details body, below the summary,
   so clicking it never collapses the section). */
.equity-curve-toolbar { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; row-gap: 8px; }
.seg-btn:disabled { opacity: .35; cursor: not-allowed; }
.seg-toggle {
  display: inline-flex; border: 1px solid var(--border);
  border-radius: 7px; overflow: hidden; background: var(--bg-2);
}
.seg-btn {
  appearance: none; border: 0; border-right: 1px solid var(--border);
  background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
  padding: 5px 13px; cursor: pointer;
}
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover { color: var(--text); background: var(--bg-3); }
.seg-btn.active { background: var(--brand-soft); color: var(--brand); }

/* "vs SPY" alpha chip in the toolbar row + the return/drawdown strip under the chart. */
.ec-alpha { font-size: 12px; font-weight: 600; padding: 2px 4px; }
.ec-alpha.pos { color: var(--positive); }
.ec-alpha.neg { color: var(--negative); }
.ec-curve-stats { display: flex; gap: 18px; flex-wrap: wrap; padding: 0 2px 8px; font-size: 12px; }
.ec-curve-stats .ecs-item { display: inline-flex; gap: 5px; align-items: baseline; }
.ec-curve-stats .ecs-lbl { color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-size: 10px; }
.ec-curve-stats .mono.pos { color: var(--positive); }
.ec-curve-stats .mono.neg { color: var(--negative); }

/* ===== Three altitudes: equity HERO → quiet SUPPORT band → record strip ===== */
/* Reflow 2026-07-23: a third grid column carries the recent-equity sparkline, so
   the hero's centre holds signal instead of empty gradient at wide viewports. */
.dash-hero {
  display: grid; align-items: start;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  grid-template-areas: "equity spark periods" "vitals vitals vitals";
  gap: 14px 24px;
  background: linear-gradient(135deg, var(--hero-grad-top) 0%, var(--bg-2) 70%);
  border-radius: 12px; padding: 18px 24px; margin-bottom: 14px;
}
.dash-hero .dab-equity { grid-area: equity; }
.dash-hero .dab-periods { grid-area: periods; }
.dab-spark {
  grid-area: spark; align-self: stretch; position: relative;
  display: flex; flex-direction: column; min-width: 0;
  padding: 4px 8px 16px;
}
.dab-spark svg { flex: 1 1 auto; width: 100%; height: 100%; min-height: 54px; opacity: .9; }
.dab-spark polyline { stroke-width: 2; vector-effect: non-scaling-stroke; }
.dab-spark polyline.up { stroke: var(--positive); }
.dab-spark polyline.down { stroke: var(--negative); }
.dab-spark .dab-spark-cap {
  position: absolute; right: 8px; bottom: 0; font-size: 10px;
  letter-spacing: 0.3px; white-space: nowrap;
}
@media (max-width: 1100px) {
  .dash-hero { grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "equity periods" "vitals vitals"; }
  .dab-spark { display: none; }
}
/* Demoted gated-signals strip sits between hero and risk row — tighter than the
   alert band it came from. */
.sys-status.sys-gated { margin: -2px 0 12px; }
.sys-status.sys-gated .sys-row { padding: 6px 12px; }
.dash-hero .dab-equity .val { font-size: 36px; letter-spacing: -0.5px; }
.dash-hero .dab-equity .lbl { letter-spacing: 1.2px; }
/* Account vitals strip along the bottom of the hero (folded in from the old support
   band): full-width, hairline-divided, subordinate to the equity headline. */
.dab-vitals {
  grid-area: vitals; display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 30px; padding-top: 13px;
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
.dab-vitals .dstat .val { font-size: 14px; }

/* Supporting band — risk posture + directional, quieter than the hero: one
   bordered container with hairline-divided rows + slightly smaller values. */
.dash-support {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 12px; overflow: hidden;
}
.dash-support-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 24px; padding: 11px 16px;
}
.dash-support-row + .dash-support-row { border-top: 1px solid var(--border); }
.dash-support .dstat .val { font-size: 14px; }
/* Labelled divider that right-anchors the Greeks group so the support row fills the
   full width (cash/risk vitals left · Greeks right) instead of a half-empty strip. */
.dash-support-greeks-tag {
  margin-left: auto; align-self: stretch; display: flex; align-items: center;
  padding-left: 24px; border-left: 1px solid var(--border);
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}

/* Compact directional strip (collapsed band 2.5) — now a support-row. */
a.dash-directional {
  flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--text);
}
a.dash-directional:hover { background: var(--bg-3); text-decoration: none; }
.dash-directional .dd-lead { display: inline-flex; align-items: baseline; gap: 8px; }
.dash-directional .dd-lead .lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.dash-directional .dd-lead .val { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-directional .dd-item {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding-left: 14px; border-left: 1px solid var(--border);
}
.dash-directional .dd-arrow { margin-left: auto; color: var(--muted); font-size: 14px; }
a.dash-directional:hover .dd-arrow { color: var(--accent); }
@media (max-width: 720px) {
  .dash-directional .dd-item { padding-left: 0; border-left: none; }
}

/* ===== Playbook pill (polished + clickable to its Strategies page) ===== */
.pill-playbook {
  background: var(--info-soft); color: var(--info); font-size: 11px; font-weight: 600;
  border: 1px solid var(--info-soft);
}
a.pill-playbook:hover { background: var(--info-soft); border-color: var(--info); text-decoration: none; }

/* Strategy name links in the "By playbook" table */
.strat-link { color: var(--text); }
.strat-link:hover { color: var(--accent); text-decoration: none; }
.strat-link-arrow { color: var(--muted); font-size: 10px; margin-left: 5px; opacity: 0; transition: opacity 0.12s; }
.strat-link:hover .strat-link-arrow { opacity: 1; color: var(--accent); }

/* Deep-link arrival flash on the targeted strategy card */
@keyframes strat-flash {
  0%   { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}
.strat-flash { animation: strat-flash 1.6s ease-out 1; }

@media (prefers-reduced-motion: reduce) {
  .mkt-status.is-open .dot, .strat-flash,
  .dot.live, .live-dot, .spinner, .pos-flash { animation: none; }
}

/* ===== Collapsible position cards — collapsed by default to keep the
   dashboard short; click the summary row to expand the full detail. ===== */
.pos-summary {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; padding: 4px 2px; user-select: none;
}
.pos-summary:hover { opacity: 0.9; }
.pos-summary .strategy { font-weight: 600; }
.pos-caret {
  display: inline-block; transition: transform 0.15s;
  color: var(--accent); font-weight: 700; font-size: 13px; width: 12px;
}
.position-card:not(.collapsed) .pos-caret { transform: rotate(90deg); }
.pos-summary-right { margin-left: auto; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.pos-summary-right .pnl { font-size: 18px; font-weight: 700; }
/* Per-position risk + directional-exposure chips in the collapsed summary row. */
.pos-risk, .pos-beta-delta { white-space: nowrap; }
.pos-beta-delta .mono { color: var(--text); }
.position-card.collapsed .pos-body { display: none; }
.pos-body {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ===== Aligned position rows — a shared grid on every summary + a header + totals
   row so Risk$ / R / β-Δ / Θ/day / P&L line up card-to-card (was a loose flex with
   no cross-card alignment). Numeric cells are tabular + right-aligned. ===== */
.pos-grid-head,
.pos-summary.pos-row-grid,
.pos-totals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px 84px 64px 76px 88px 120px;
  gap: 10px; align-items: center;
}
.pos-grid-head {
  padding: 2px 18px 4px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted);
}
.pos-grid-head .pc-cell { text-align: right; }
.pc-main { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.pc-main .strategy { font-weight: 600; }
.pc-main .pc-underlying { font-family: ui-monospace, monospace; }
.pc-cell {
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-size: 13px;
}
.pc-pnl { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; gap: 1px; }
.pc-pnl .pnl { font-size: 18px; font-weight: 700; }
.pos-totals {
  padding: 8px 18px 2px; margin-top: 2px;
  border-top: 1px solid var(--border);
}
.pos-totals .pt-lead { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.pos-totals .pc-pnl .pnl { font-size: 15px; }
@media (max-width: 768px) {
  .pos-grid-head, .pos-summary.pos-row-grid, .pos-totals {
    grid-template-columns: minmax(0, 1fr) 56px 84px 88px 120px;
  }
  .pc-r, .pc-bd { display: none; }
}
@media (max-width: 480px) {
  .pos-grid-head, .pos-summary.pos-row-grid, .pos-totals {
    grid-template-columns: minmax(0, 1fr) 84px 110px;
  }
  .pc-dte, .pc-theta { display: none; }
}

/* Collapsible "Recent closed positions" section (server-rendered <details>). */
.closed-summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px; user-select: none;
}
.closed-summary::-webkit-details-marker { display: none; }
.closed-summary:hover { opacity: 0.9; }
.closed-section[open] .pos-caret { transform: rotate(90deg); }
.closed-hint::after { content: '· click to expand'; }
.closed-section[open] .closed-hint::after { content: '· click to collapse'; }
.closed-view-all { margin-left: auto; cursor: pointer; }
/* The closed table is wide (adds capital + ROC = 12 cols) — scroll it horizontally
   at any width instead of pushing the page body out. Scoped so it can't touch other
   tables. `min-width: max-content` forces the table to its intrinsic (unwrapped)
   width so the wrapper actually scrolls on narrow viewports rather than the cells
   cramming/wrapping (a plain width:100% table never overflows its container). */
.closed-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.closed-table-scroll table { min-width: max-content; }

/* "Why this trade" explainer (entry thesis + regime-at-fire + plan). */
.why-panel-open {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 6px; background: var(--bg-2); padding: 9px 12px;
}
.why-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.why-bulb { font-size: 13px; }
.why-panel {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-2);
  overflow: hidden;
}
.why-summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  user-select: none;
  /* read as a clickable header bar */
  background: var(--bg-3);
  border-left: 3px solid var(--accent);
}
.why-summary::-webkit-details-marker { display: none; }
.why-summary:hover { background: var(--bg-2); }
.why-caret {
  display: inline-block; transition: transform 0.15s;
  color: var(--accent); font-size: 13px; font-weight: 700;
}
.why-panel[open] .why-caret { transform: rotate(90deg); }
/* CSS-driven hint so it stays correct across hx-preserve state changes */
.why-toggle-hint { margin-left: auto; opacity: 0.7; }
.why-toggle-hint::after { content: '▾ click to collapse'; }
.why-panel:not([open]) .why-toggle-hint::after { content: '▸ click to expand'; }
.why-summary:hover .why-toggle-hint { opacity: 1; color: var(--accent); }
.why-bulb { font-size: 13px; }
.why-conv {
  font-size: 11px; background: var(--info-soft); color: var(--info);
  padding: 1px 7px; border-radius: 10px; margin-left: 2px;
}
.why-body {
  padding: 2px 12px 12px 12px;
  display: flex; flex-direction: column; gap: 7px;
  border-top: 1px solid var(--border);
  margin-top: 2px; padding-top: 10px;
}
.why-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: start; }
.why-label {
  color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; padding-top: 1px;
}
@media (max-width: 640px) { .why-row { grid-template-columns: 1fr; gap: 2px; } }

.trail-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--bg-2);
  color: var(--text);
  white-space: nowrap;
}
.trail-badge.danger { background: var(--negative-strong); color: #fff; }
.trail-badge.rmul   { background: var(--info-soft); color: var(--info); }
.trail-badge.und    { background: var(--surface-hover); color: var(--fam-hedge); }
.trail-badge.step   { background: var(--warning-soft); color: var(--warning); }
.trail-badge.pnl    { background: var(--positive-soft); color: var(--positive); }
.trail-badge.time   { background: var(--surface-hover); color: var(--muted); }

/* Trail preview line in build form */
.trail-preview {
  margin: 4px 0 0 110px;
  padding: 6px 10px;
  background: var(--info-soft);
  border-left: 2px solid var(--accent);
  border-radius: 0 4px 4px 0;
}
.trail-preview:empty { display: none; }

/* Phase 2B: impersonation banner — superadmin viewing as another tenant.
   Solid strong-red fill (NOT a gradient fading to --negative-soft, which is
   near-white in light mode and swallowed the text) + white text: --negative-strong
   is tuned so #fff clears AA in BOTH themes. Fixed height (--banner-h) anchors the
   sticky-sidebar offset math below so the pinned user menu never falls off-screen. */
.impersonation-banner {
  background: var(--negative-strong);
  border-bottom: 2px solid var(--negative-strong);
  color: #fff;
  padding: 10px 24px;
  min-height: var(--banner-h);
  box-sizing: border-box;
  font-size: 13px;
  position: sticky;
  top: 0;
  z-index: 201;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 2px 12px var(--shadow);
}
.impersonation-banner strong { color: #fff; }
.impersonation-banner .btn {
  background: #fff; color: var(--negative-strong); border: none;
  padding: 4px 12px; border-radius: 4px; cursor: pointer; font-weight: 600;
}
.impersonation-banner .btn:hover { background: var(--on-brand); }

/* Phase 2B: user menu in sidebar */
/* Account menu: avatar button + popout dropdown (Settings / Admin / Sign out). */
/* Pinned to the bottom of the rail (margin-top:auto pushes it down past the
   flex-filling watchlist). The dropdown opens UPWARD, into the column. */
.user-menu { position: relative; flex: none; margin: auto var(--space-3) var(--space-3); }
.user-menu-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; font: inherit; color: var(--fg);
  text-align: left; transition: background 0.12s, border-color 0.12s;
}
.user-menu-btn:hover { background: var(--bg-3); border-color: var(--muted); }
.user-menu-btn[aria-expanded="true"] { background: var(--bg-3); border-color: var(--brand); }
.user-menu-btn.on-admin { border-color: var(--fam-hedge); }
.user-menu-avatar {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand);
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
}
.user-menu-avatar.lg { width: 36px; height: 36px; font-size: 13px; }
.user-menu-name {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-menu-caret { flex: none; color: var(--muted); font-size: 10px;
  transition: transform 0.15s; }
.user-menu-btn[aria-expanded="true"] .user-menu-caret { transform: rotate(180deg); }

.user-menu-dropdown {
  position: absolute; bottom: calc(100% + 4px); top: auto; left: 0; right: 0; z-index: 1100;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--elev-pop); padding: 6px; max-height: 70vh; overflow-y: auto;
}
.user-menu-dropdown[hidden] { display: none; }
.user-menu-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.user-menu-id { min-width: 0; }
.user-menu-id-name { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.user-menu-id-email { font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-section {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted); padding: 4px 10px 2px; font-weight: 600;
}
.user-menu-item {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  padding: 7px 10px; border-radius: 6px; font-size: 13px; color: var(--fg);
  text-decoration: none; background: none; border: none; cursor: pointer; font: inherit;
}
.user-menu-item:hover { background: var(--bg-3); }
.user-menu-item.active { background: var(--brand-soft); color: var(--brand); }
.user-menu-item-danger { color: var(--negative-strong); }
.user-menu-item-danger:hover { background: var(--negative-soft); }
.user-menu-sep { height: 1px; background: var(--border); margin: 6px 0; }
.pill.superadmin { background: var(--fam-hedge-soft); color: var(--fam-hedge); }

/* Phase 2E: admin console styling */
.btn.btn-danger {
  background: var(--negative-strong); color: #fff; border: none;
  padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: 600;
}
.btn.btn-danger:hover { background: var(--negative-strong); }
.btn.btn-warn {
  background: var(--orange-soft); color: var(--warning); border: 1px solid var(--orange);
}
.btn.btn-warn:hover { background: var(--orange-soft); }
.table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.table th, .table td {
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: middle;
}
.table th { color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; }
.table .num { text-align: right; }
.table tbody tr:hover { background: var(--bg-2); }
.orange { color: var(--orange); }

/* Phase 2 UI: regime context pills on signal rows */
.regime-pills {
  margin-top: 4px;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.regime-pills .pill { padding: 2px 6px; }

/* Global trail-hit banner at top of every page */
.trail-banner {
  background: linear-gradient(90deg, var(--negative-soft) 0%, var(--bg-2) 100%);
  border-bottom: 2px solid var(--red);
  padding: 10px 24px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 12px var(--shadow);
}
.trail-banner-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13px;
  padding: 4px 0;
}
.trail-banner-row + .trail-banner-row {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 8px;
}
.trail-banner-icon { font-size: 18px; }

/* Risk modal: trail gauge tile already styled by .risk-gauge — no extras needed */

/* === Per-strategy breakdown table on dashboard === */
.strat-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.strat-table th {
  background: var(--bg-3);
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 12px;
  text-align: left;
}
/* Numeric headers must right-align to match their right-aligned data cells.
   `.strat-table th` (left) and `th.num` (right) have equal specificity, so the
   bare `.strat-table th` was winning and pushing headers left while data stayed
   right — they didn't line up. This higher-specificity rule fixes the columns. */
.strat-table th.num, .strat-table td.num { text-align: right; }
.strat-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.strat-table tr:last-child td { border-bottom: none; }
.strat-table tr:hover td { background: var(--bg-3); }
.strat-table .strat-name {
  font-weight: 600;
  color: var(--text);
}

/* === Close-reason chips === */
.close-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.close-chip.manual  { background: var(--bg-3); color: var(--muted); }
.close-chip.trail   { background: var(--negative-soft); color: var(--negative); border: 1px solid var(--negative-border); }
.close-chip.expired { background: var(--warning-soft); color: var(--warning); }
/* Exit-reason chips (replaces inline #1f6f3f/#7a1f1f/#3f4f7f white). */
.close-chip.tp   { background: var(--positive-soft); color: var(--positive); }
.close-chip.sl   { background: var(--negative-soft); color: var(--negative); }
.close-chip.time { background: var(--info-soft); color: var(--info); }

/* === Trades page table (/trades) =========================================
   Goal: no line-wrap, balanced widths, scannable. Every cell is nowrap; the
   table scrolls sideways (wrapper) before it ever wraps. Only the playbook
   name truncates with an ellipsis. Uses theme tokens so light + dark match. */
.trades-table-wrap { overflow-x: auto; overflow-y: hidden; border-radius: 8px; }
.trades-count { margin-bottom: 10px; }
.trades-table { table-layout: auto; border-radius: 0; }  /* wrapper owns the rounded clip */
.trades-table th, .trades-table td { white-space: nowrap; vertical-align: middle; }

/* Stacked timestamp: ISO date on top, muted time below — compact, never wraps. */
.trades-table .tt-ts { line-height: 1.2; }
.trades-table .ts-date { display: block; color: var(--text); font-size: 12px; }
.trades-table .ts-time { display: block; color: var(--text-subtle); font-size: 11px; }
/* Open-position marker — info/blue to match the open-row left accent (NOT the red
   .pill.live submit-mode pill). Dot + pill + accent all read as one "live" signal. */
.trades-table .tt-live { font-size: 11px; background: var(--info-soft); color: var(--info); }

.trades-table .tt-held { color: var(--text-subtle); font-size: 12px; }
.trades-table .tt-strategy { color: var(--text); text-transform: capitalize; }
.trades-table .tt-underlying { font-weight: 600; color: var(--text); }

/* Playbook: family badge + polished display name; truncates rather than wrapping. */
.trades-table .tt-playbook { max-width: 240px; }
.trades-table .tt-pb-name {
  display: inline-block; max-width: 196px; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle; color: var(--text-muted); font-size: 12px;
}
.trades-table .tt-pb-manual { font-style: italic; }

/* Structure: leg count + strikes, compact and muted so the P&L stays the hero. */
.trades-table .tt-struct { font-size: 12px; }
.trades-table .tt-legs { color: var(--text-subtle); }
.trades-table .tt-strikes { color: var(--text-muted); }

.trades-table .tt-pnl { font-weight: 600; }
.trades-table .tt-detail { text-align: right; }

/* Faint zebra aids scanning a long log; hover still wins. Open rows (the few that
   are live) get a left accent bar so they pop out of the closed history. */
.trades-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-3) 35%, transparent); }
.trades-table tbody tr:hover td { background: var(--bg-3); }
.trades-table .tt-row-open td:first-child { box-shadow: inset 3px 0 0 var(--info); }

/* === Strategy-family taxonomy (req #1) ===
   Inline `--fam` (set per element to a --fam-* token) drives the accent so one
   rule set serves all families. color-mix degrades gracefully (transparent bg)
   on older engines; text colour still applies. */
.family-section-h {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 0 8px; padding: 4px 0 6px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.family-section-h .family-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px;
  background: color-mix(in srgb, var(--fam) 22%, transparent);
  color: var(--fam); font-weight: 700;
}
.family-section-h .family-name { color: var(--text); }
.family-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px; border-radius: 4px; font-size: var(--fs-xs); font-weight: 600;
  background: color-mix(in srgb, var(--fam) 18%, transparent); color: var(--fam);
}
.strat-tier-pill {
  font-size: var(--fs-xs); padding: 1px 6px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.03em; border: 1px solid var(--border);
  color: var(--muted);
}
.strat-tier-pill.tier-core { background: var(--green-tint); color: var(--green); border-color: transparent; }
.strat-tier-pill.tier-tactical { color: var(--muted); }
.strat-tier-pill.tier-test { background: var(--amber-tint); color: var(--yellow); border-color: transparent; }

/* === AI suggestions panel (Phase 3D) === */
.ai-sug-card {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 10px 12px; margin: 8px 0; background: var(--bg-2);
}
.ai-sug-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-sug-params { margin: 6px 0; display: flex; gap: 6px; flex-wrap: wrap; }
.ai-sug-why { margin-bottom: 8px; }
.ai-sug-actions { display: flex; gap: 8px; }

/* === Global filter bar (Phase 1G) === */
.filter-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 4px 0 12px; padding: 8px 10px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
}
.filter-bar .fb-label {
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.fb-group { position: relative; }
.fb-group > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-3); font-size: var(--fs-sm);
}
.fb-group > summary::-webkit-details-marker { display: none; }
.fb-group[open] > summary { border-color: var(--accent); }
.fb-count {
  display: inline-block; min-width: 16px; text-align: center;
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: var(--fs-xs); padding: 0 5px;
}
.fb-menu {
  position: absolute; z-index: 30; margin-top: 4px; min-width: 200px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px; box-shadow: 0 6px 24px var(--shadow);
  display: flex; flex-direction: column; gap: 4px;
}
.fb-menu-scroll { max-height: 320px; overflow-y: auto; }
.fb-opt { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); white-space: nowrap; }
.fb-opt.fb-inline { padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-3); }

/* === By-family roll-up cards (dashboard category P&L) === */
.fam-rollup {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 4px 0 14px;
}
.fam-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; text-decoration: none; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--border);
  border-left: 3px solid var(--fam, var(--muted)); border-radius: 8px;
}
.fam-card:hover { background: var(--bg); border-color: var(--fam, var(--accent)); }
.fam-card-h {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
}
.fam-card-h .fam-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px;
  background: color-mix(in srgb, var(--fam) 22%, transparent);
  color: var(--fam); font-weight: 700; font-size: 12px;
}
.fam-card-pnl { font-size: 18px; font-weight: 700; line-height: 1.1; }
.fam-card-meta .fam-open { color: var(--fam, var(--accent)); }

/* === In-Play Radar strip === */
.in-play-strip {
  margin: 12px 0; padding: 10px 12px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
}
.in-play-strip .ip-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.in-play-strip .ip-title { font-weight: 600; letter-spacing: 0.03em; }
.in-play-strip .ip-asof { margin-left: auto; }
.ip-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.ip-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 9px; border-radius: 999px; background: var(--bg-3);
  border: 1px solid var(--border); border-left: 3px solid var(--muted);
  color: var(--text); text-decoration: none; font-size: var(--fs-sm);
}
.ip-chip:hover { background: var(--bg); }
.ip-chip.dir-bullish { border-left-color: var(--green); }
.ip-chip.dir-bearish { border-left-color: var(--red); }
.ip-chip.dir-neutral { border-left-color: var(--yellow); }
.ip-chip.in-trade { box-shadow: inset 0 0 0 1px var(--fam, var(--accent)); }
.ip-chip .ip-sym { font-weight: 600; }
.ip-chip .ip-held { color: var(--fam, var(--accent)); }
.ip-chip .ip-reason { color: var(--muted); max-width: 190px; overflow: hidden; text-overflow: ellipsis; }

/* === Executive risk row: β-Δ | theta | book balance === */
/* Equal-width cards that flow 1→4 across the row: auto-fit collapses empty tracks so a
   lone card spans full width, and 2/3/4 cards split evenly (Net Greeks is the 4th). */
.dash-risk-trio {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin: 10px 0 12px;
}
.dash-risk-trio > .dash-band { margin: 0; }
.risk-card {
  --risk-accent: var(--accent);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 6px; min-width: 0; min-height: 148px; padding: 13px 15px 12px;
  color: var(--text); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--risk-accent) 25%, var(--border));
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--risk-accent) 10%, transparent), transparent 48%),
    linear-gradient(145deg, var(--bg-2), color-mix(in srgb, var(--bg-3) 92%, var(--risk-accent)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.risk-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1;
  width: 2px; background: var(--risk-accent); opacity: .8;
}
.risk-card.risk-healthy { --risk-accent: var(--green); }
.risk-card.risk-warn { --risk-accent: var(--yellow); }
.risk-card.risk-danger { --risk-accent: var(--red); }
.risk-card:hover {
  color: var(--text); text-decoration: none; transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--risk-accent) 65%, var(--border));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--risk-accent) 10%, var(--shadow));
}
.risk-card-head, .risk-card-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.risk-card-head .lbl {
  color: var(--muted); font-size: var(--fs-xs); font-weight: 650;
  letter-spacing: .08em; text-transform: uppercase;
}
.risk-card-head .pill { flex: 0 0 auto; font-size: 10px; }
.risk-pill-warn { background: var(--amber-tint); color: var(--yellow); }
.risk-pill-danger { background: var(--negative-soft); color: var(--negative); }
.risk-card-value {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px;
  min-width: 0; font-size: clamp(1.35rem, 1.65vw, 1.75rem);
  font-weight: 750; line-height: 1.08; font-variant-numeric: tabular-nums;
}
.risk-card-unit {
  color: var(--text-muted); font-size: .45em; font-weight: 450;
  letter-spacing: 0; white-space: nowrap;
}
.risk-card-summary {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.risk-card-footer { margin-top: auto; align-items: flex-end; }
.risk-card-footer > .small { flex: 0 1 auto; text-align: right; white-space: nowrap; }
.risk-meter, .risk-card .dbb-bar {
  flex: 1 1 90px; min-width: 64px; max-width: 130px; height: 6px;
  border-radius: 999px; background: var(--bg); overflow: hidden;
}
.risk-meter > div { height: 100%; border-radius: inherit; background: var(--green); }
.risk-meter > div.warn { background: var(--yellow); }
.risk-meter > div.danger { background: var(--red); }
.risk-card .dbb-bar { display: flex; }
.risk-card .dbb-fill { height: 100%; }
.risk-card .dbb-fill-bull { background: var(--green); }
.risk-card .dbb-fill-bear { background: var(--red); }
.risk-card .dbb-fill-flat { background: var(--text-muted); }
.risk-card .dbb-needs {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-top: 1px; border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
.risk-card .dbb-warn { color: var(--yellow); font-size: var(--fs-xs); }
.risk-card .dbb-gov { padding: 1px 5px; color: var(--muted); background: var(--bg-3); }
/* β-Δ exposure scale (reflow 2026-07-23) — the card's mid-slot: where the net lean
   sits between short-cap and long-cap. Track is a diverging tint (bear left / bull
   right), centre tick = neutral, dot = current net multiple. */
.bd-scale { position: relative; height: 30px; margin: 3px 0 1px; }
.bd-scale-track {
  position: absolute; left: 0; right: 0; top: 6px; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--negative) 26%, transparent),
    color-mix(in srgb, var(--negative) 6%, transparent) 38%,
    transparent 46% 54%,
    color-mix(in srgb, var(--positive) 6%, transparent) 62%,
    color-mix(in srgb, var(--positive) 26%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.bd-scale-mid {
  position: absolute; left: 50%; top: 3px; width: 1px; height: 14px;
  background: color-mix(in srgb, var(--text) 30%, transparent);
}
.bd-scale-marker {
  position: absolute; top: 5px; width: 10px; height: 10px; border-radius: 50%;
  transform: translateX(-50%); border: 2px solid var(--bg-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 25%, transparent);
}
.bd-scale-marker.pos { background: var(--positive); }
.bd-scale-marker.neg { background: var(--negative); }
.bd-scale-lbl {
  position: absolute; top: 17px; font-size: 9px; letter-spacing: 0.4px;
  color: var(--text-muted); text-transform: uppercase;
}
.bd-scale-lbl.l { left: 0; }
.bd-scale-lbl.c { left: 50%; transform: translateX(-50%); }
.bd-scale-lbl.r { right: 0; }

/* Θ decay-pace ladder (reflow 2026-07-23) — day → week → month straight-line
   projection; fills the theta card's mid-slot at the hero's information density. */
.theta-pace { display: flex; align-items: center; gap: 10px; margin: 3px 0 1px; min-height: 30px; }
.theta-pace .tp-step { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.theta-pace .tp-lbl {
  font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted);
}
.theta-pace .tp-step b {
  font-weight: 650; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.theta-pace .tp-step b.green { color: var(--green); }
.theta-pace .tp-step b.yellow { color: var(--yellow); }
.theta-pace .tp-step b.red { color: var(--red); }
.theta-pace .tp-step b.muted { color: var(--muted); }
.theta-pace .tp-arrow { color: var(--text-muted); font-size: 11px; }

/* Net Greeks card — the risk BEHIND the theta income (neutral accent, 4th in the row).
   The three Greeks as plain-English $ reactions (Δ price / Γ big move / ν volatility),
   each a diverging bar on one shared dollar scale; raw Greek totals kept as a footer
   reference. Never a red/green health verdict — the pill escalates, the chrome doesn't. */
.risk-card.risk-greeks { --risk-accent: var(--text-muted); }
.greek-posture { margin: -2px 0 1px; text-transform: none; letter-spacing: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.greek-unavail { margin: 8px 0; line-height: 1.4; }
.greek-react { display: flex; flex-direction: column; gap: 7px; margin: 3px 0 2px; }
.greek-react-row { display: grid; align-items: center; gap: 0 9px;
  grid-template-columns: 15px minmax(0,1fr) 46px minmax(48px,auto); }
.gr-glyph { color: var(--text-subtle); font-weight: 600; text-align: center; font-size: .95rem; }
.gr-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.12; }
.gr-lbl { color: var(--muted); font-size: var(--fs-xs); letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; }
.gr-scen { color: var(--text-subtle); font-size: 9.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.gr-bar { position: relative; height: 5px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.gr-bar::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: color-mix(in srgb, var(--text) 16%, transparent); }
.gr-bar > i { position: absolute; top: 0; bottom: 0; display: block; }
.gr-bar > i.pos { left: 50%; background: var(--green); border-radius: 0 999px 999px 0; }
.gr-bar > i.neg { right: 50%; background: var(--red); border-radius: 999px 0 0 999px; }
.gr-val { text-align: right; font-weight: 650; font-size: .95rem;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.greek-ref { font-variant-numeric: tabular-nums; }
.greek-ref .gv-pos { color: var(--green); }
.greek-ref .gv-neg { color: var(--red); }
.greek-conc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-top: 3px; font-variant-numeric: tabular-nums;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
/* Tooltip discoverability across all four risk cards: a dashed underline on the
   card labels that carry a title, and a help cursor on any titled term in the row
   (the cards themselves are links, so keep their cursor a pointer). */
.dash-risk-trio .risk-card-head .lbl[title] { text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent);
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.dash-risk-trio [title] { cursor: help; }
.dash-risk-trio a[title] { cursor: pointer; }
@media (max-width: 950px) {
  .dash-risk-trio { grid-template-columns: 1fr; }
  .risk-card { min-height: 132px; }
}

/* Generic two-up grid retained for admin/user stats surfaces. */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

/* Phase 3 UI: toast notifications. Stacks at top-right of viewport, each
   auto-dismisses after 6s or on click. Three severity classes drive color. */
.toast-container {
  position: fixed; top: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 8px;
  /* Above modals (1000) and nav dropdowns (1100): toasts are transient
     notifications and must never be occluded by an open overlay — previously
     tied with .modal at 1000 and lost on source order. */
  z-index: 1200;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: 10px 14px;
  border-radius: 6px;
  box-shadow: 0 4px 16px var(--shadow);
  font-size: 13px;
  max-width: 380px;
  cursor: pointer;
  animation: toast-in 0.18s ease-out;
}
@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.toast.toast-info  { background: var(--info-soft); color: var(--text); border: 1px solid var(--info); }
.toast.toast-warn  { background: var(--warning-soft); color: var(--warning); border: 1px solid var(--warning); }
.toast.toast-error { background: var(--negative-soft); color: var(--negative); border: 1px solid var(--negative-strong); }

/* ============================================================
   Chain page: active-watchlist pills (Phase E). Strip of symbol-shaped
   buttons above the spot bar — click to navigate to that chain. */
.chain-wl-pills {
  margin: 6px 0 10px;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.chain-wl-pills-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.chain-wl-label {
  margin-right: 6px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.chain-wl-pill {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 10px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  text-decoration: none;
}
.chain-wl-pill:hover {
  border-color: var(--accent);
  background: var(--bg-2);
  text-decoration: none;
}
.chain-wl-pill.is-current {
  background: var(--positive-soft);
  border-color: var(--positive);
  color: var(--positive);
  font-weight: 600;
}
.chain-wl-add {
  background: none;
  border: 1px dashed var(--muted);
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-family: monospace;
}
.chain-wl-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   Watchlist widget in sidebar (Phase D). Compact button + dropdown picker. */
/* The widget flex-fills the rail; the WATCHLIST label + toggle are a fixed header
   and the quote list is the only internal scroller. Near edge-to-edge (8px gutters)
   so the rows have full width — symbol + price + change% never clip. */
.wl-widget {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding: 0 var(--space-2); margin-top: var(--space-2);
}
.wl-region-label { flex: none; padding: 0 var(--space-1) var(--space-1); }
#wl-widget-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.wl-widget-row { position: relative; flex: none; display: flex; align-items: center; gap: 6px; }
.wl-widget-toggle {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 100%;
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--fs-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wl-widget-toggle:hover { background: var(--surface-3); border-color: var(--border-strong); }
.wl-widget-name { flex: 1; text-align: left; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-widget-count {
  font-size: var(--fs-xs); color: var(--text-muted); background: var(--surface-3);
  border-radius: var(--radius-pill); padding: 0 6px; line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.wl-widget-caret { color: var(--muted); font-size: 9px; transition: transform 0.15s ease; }
.wl-widget.picker-open .wl-widget-caret { transform: rotate(180deg); }
.wl-widget-empty-state { color: var(--muted); justify-content: space-between; }
.wl-widget-empty {
  display: flex; flex-direction: column; gap: 4px; padding: 2px var(--space-1);
}
.wl-widget-link {
  color: var(--accent); font-size: 11px; text-decoration: none;
}
.wl-widget-link:hover { text-decoration: underline; }
.wl-widget-picker {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px var(--shadow);
  z-index: 100;
  max-height: 50vh;
  overflow-y: auto;
}
.wl-widget-picker-inner { padding: 4px; }
.wl-picker-item {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  padding: 6px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  text-decoration: none;
}
.wl-picker-item:hover { background: var(--bg-3); }
.wl-picker-item.active { color: var(--positive); font-weight: 500; }
.wl-picker-link { color: var(--accent); }
.wl-picker-sep {
  height: 1px; background: var(--border); margin: 4px 0;
}
.wl-picker-group-h {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 10px 4px;
  display: flex; align-items: center; gap: 6px;
}
.wl-picker-group-h:first-child { padding-top: 4px; }
/* Source badges on /watchlists page items */
.wl-source-badge {
  display: inline-block;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  vertical-align: middle;
}
.wl-source-badge.local { background: var(--info-soft); color: var(--info); }
.wl-source-badge.tt_public { background: var(--fam-hedge-soft); color: var(--fam-hedge); }
.wl-source-badge.tt_private { background: var(--positive-soft); color: var(--positive); }

/* ============================================================
   Watchlists page (Phase C). Two-column layout: list on left, detail on right.
   Mobile collapses to single column (≤768px). */
.wl-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items: start;
}
.wl-list-pane, .wl-detail-pane {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
}
.wl-list-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.wl-list { display: flex; flex-direction: column; gap: 4px; }
.wl-item {
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
}
.wl-item:hover { background: var(--bg-3); }
.wl-item.selected {
  background: var(--bg-3);
  border-color: var(--accent);
}
.wl-item-name { font-size: 13px; }
.wl-item-meta { margin-top: 2px; font-size: 11px; }
.wl-active-dot {
  color: var(--positive); font-size: 14px; margin-right: 4px;
  line-height: 1;
}
.wl-list-footer {
  margin-top: 14px; padding-top: 10px;
  border-top: 1px solid var(--border);
}

.wl-detail-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.wl-detail-title h3 { margin: 0; font-size: 18px; }
.wl-detail-actions {
  display: flex; gap: 6px; align-items: center; flex-shrink: 0;
}
.wl-add-row {
  display: flex; gap: 6px; margin-bottom: 12px;
}
.wl-add-input {
  flex: 1;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
}
.wl-members {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 60vh; overflow-y: auto;
}
.wl-member-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 3px;
}
.wl-member-row:hover { background: var(--bg-3); }
.wl-member-sym {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.wl-member-sym:hover { text-decoration: underline; }
.wl-member-remove {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 16px; padding: 2px 8px;
  line-height: 1; border-radius: 3px;
}
.wl-member-remove:hover { background: var(--negative-strong); color: #fff; }
.wl-detail-footer { margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border); }

/* ============================================================================
   Brand polish — shared utilities (used by templates instead of inline hex) +
   hierarchy/legibility refinements from the design review. All token-driven so
   they are correct in both themes.
   ========================================================================== */

/* Status pill variants (tinted fill + matching text). */
.pill.info     { background: var(--info-soft);     color: var(--info); }
.pill.negative { background: var(--negative-soft);  color: var(--negative); }
.pill.positive { background: var(--positive-soft);  color: var(--positive); }
.pill.muted    { background: var(--surface-2);      color: var(--text-muted); }
.pill.brand    { background: var(--brand-soft);     color: var(--brand-strong); }

/* Soft (outline-tint) button variants for low-emphasis destructive/positive actions. */
.btn.danger-soft     { background: var(--negative-soft); color: var(--negative); border: 1px solid var(--negative-border); }
.btn.danger-soft:hover { filter: none; background: var(--negative-strong); color: #fff; }
.btn.success-outline { background: var(--positive-soft); color: var(--positive); border: 1px solid var(--positive-border); }
.btn.success-outline:hover { filter: none; background: var(--positive); color: var(--on-brand); }

/* Inline callouts (info / warning) — used on settings + signals. */
.callout-info, .callout-warning {
  border-radius: var(--radius-md); padding: 10px 12px; font-size: var(--fs-sm);
  border: 1px solid transparent;
}
.callout-info    { background: var(--info-soft);    color: var(--info);    border-color: var(--info-soft); }
.callout-warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-soft); }

/* Alert position card + "most robust" highlight card + empty heatmap cell. */
.position-card.alert  { background: var(--negative-soft); border-left: 4px solid var(--negative); }
.risk-card-highlight  { background: var(--brand-soft); border: 1px solid var(--brand); }
.heat-empty           { background: var(--bg); color: var(--border-strong); }

/* Table hover gets its own surface so a hovered row no longer merges with the
   header band (header sits on --surface-3). Numeric columns use tabular figures. */
tr:hover td,
.table tbody tr:hover,
.strat-table tr:hover td { background: var(--surface-2); }
table td.num, table th.num, .mono, .tnum { font-variant-numeric: tabular-nums; }

/* Legibility: lift the 9px micro-labels to a comfortable floor + calmer tracking. */
.account-hero .ah-stat-label,
.ap-label { font-size: 10px; letter-spacing: 0.06em; }

@media (max-width: 1024px) {
  .wl-layout { grid-template-columns: 1fr; }
  .wl-list-pane { max-height: 40vh; overflow-y: auto; }
}

/* Phase 3 UI: per-position greeks strip */
.position-greeks {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 6px 10px;
  font-size: 12px;
}
.position-greeks .pos-greek { display: inline-flex; gap: 4px; align-items: baseline; }

/* Phase 3C: broker connect status block */
.connect-status {
  display: flex; gap: 14px; align-items: center;
  padding: 14px; border-radius: 6px;
}
.connect-status.connected { background: var(--positive-soft); border: 1px solid var(--positive); }
.connect-status.not-connected { background: var(--bg-2); border: 1px solid var(--border); }
.connect-status .status-icon { font-size: 28px; flex-shrink: 0; }
.connect-status .status-title { font-weight: 600; font-size: 15px; margin-bottom: 2px; }

/* ============================================================
   Phase 2 UI: responsive layout
   ============================================================
   Three tiers:
     ≤1024px — sidebar drops below content (single-column); navigation becomes
               a horizontal scroller. Account panel + greeks panel still visible
               at the top of the page, just stacked.
     ≤768px  — table cells get smaller padding; low-priority table columns
               hidden via .col-hide-md. Modals fill the viewport.
     ≤480px  — large-number hero cards stack vertically; button padding shrinks;
               header subtitle hidden.
   Class hook `.col-hide-md` / `.col-hide-sm` on a <th>/<td> hides that cell
   at the indicated breakpoint. Templates opt-in column-by-column. */

@media (max-width: 1024px) {
  /* Nav now lives in the header, so the persistent rail (equity + watchlist +
     account) is desktop-only. Hide it and let the header (with the ☰ hamburger)
     own navigation — this also avoids 100vh-sticky scroll traps on mobile. */
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: var(--space-4); }
  /* Header: collapse the desktop menu bar to the hamburger. */
  .nav-bar .nav-menu:not(.nav-mobile),
  .nav-bar .nav-link { display: none; }
  .nav-mobile { display: inline-block; }
}

@media (max-width: 768px) {
  body { font-size: 13px; }
  .col-hide-md { display: none !important; }
  .table th, .table td { padding: 6px 6px; }
  .legs-table th, .legs-table td { padding: 4px 4px; }
  .modal-panel, .risk-panel {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
  }
  .page-header h2 { font-size: 18px; }
  .page-header .subtitle { display: none; }
  /* Allow horizontal scroll on dense tables instead of breaking layout */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px) {
  .col-hide-sm { display: none !important; }
  .ap-equity { font-size: 22px; }
  .btn { padding: 6px 10px; font-size: 12px; }
  .pill { font-size: 10px; padding: 2px 5px; }
}

/* ===================== Market Status page ===================== */
.mkt-fresh { display: flex; align-items: center; gap: 8px; }

.mkt-banner { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; }
.mkt-banner.warn { background: var(--warning-soft); color: var(--warning); border: 1px solid var(--warning); }

/* posture banner */
.mkt-posture { border: 1px solid var(--border); border-left-width: 4px; border-radius: 8px;
  background: var(--bg-2); padding: 14px 16px; margin-bottom: 14px; }
.mkt-posture.green { border-left-color: var(--green); }
.mkt-posture.red { border-left-color: var(--red); }
.mkt-posture.yellow { border-left-color: var(--yellow); }
.mkt-posture-head { display: flex; align-items: center; gap: 14px; }
.mkt-posture-emoji { font-size: 28px; line-height: 1; }
.mkt-posture-score { font-size: 16px; font-weight: 600; }
.mkt-posture-summary { color: var(--muted); font-size: 13px; margin-top: 2px; }
.mkt-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mkt-flag { font-family: ui-monospace, monospace; }

.mkt-wisdom { border-left: 3px solid var(--accent); margin: 0 0 18px; padding: 6px 14px;
  color: var(--text); font-style: italic; }
.mkt-wisdom cite { display: block; margin-top: 4px; color: var(--muted); font-style: normal; font-size: 12px; }

/* econ table */
.mkt-econ td, .mkt-econ th { padding: 6px 10px; }
.mkt-econ td.num, .mkt-econ th.num { font-variant-numeric: tabular-nums; }
.mkt-econ-high { background: var(--negative-soft); }

/* news (the collapsed headlines fallback) */
.mkt-news { display: flex; flex-direction: column; gap: 10px; }
.mkt-news-item { border-left: 2px solid var(--border); padding: 2px 0 2px 12px; }
.mkt-news-title a { color: var(--text); text-decoration: none; }
.mkt-news-title a:hover { color: var(--accent); }

/* ---------- P1.3 tier layout ---------- */
/* Verdict band: brief verdict (3fr) beside the system's read (2fr) — the
   fact→consequence spine. Collapses to one column under 1100px. */
.ckpt-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
@media (max-width: 1100px) { .ckpt-row { grid-template-columns: 1fr; } }
.mkt-verdict-band { margin-bottom: 12px; }
.mkt-verdict { margin-bottom: 0; }
.mkt-verdict-focus { margin-top: 12px; }
.mkt-sysread .mkt-sysread-gates { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.mkt-sysread-count { font-size: 15px; }
/* Wave-4 fusion cells inside the System-Read card. */
.mkt-sysread-regime, .mkt-sysread-premium { margin-top: 8px; display: flex;
  align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mkt-sysread-regime .mkt-regime-pbs { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.mkt-sysread-regime .mkt-regime-pbs a { text-decoration: none; }
.mkt-sysread-needs { margin-top: 8px; }
.mkt-sysread-needs:empty { display: none; }
.mkt-reads { margin-top: 10px; border-collapse: collapse; width: 100%;
  font-variant-numeric: tabular-nums; }
.mkt-reads th { text-align: left; color: var(--text-muted); font-weight: 500;
  font-size: 11px; padding: 2px 8px 2px 0; }
.mkt-reads td { padding: 3px 8px 3px 0; border-top: 1px solid var(--border); }
.mkt-consequences { margin-top: 8px; color: var(--text); }
.mkt-consequences div { padding: 2px 0; }
.mkt-earnings-line { margin-top: 8px; }
.mkt-cr-metrics { display: flex; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.mkt-cr-metrics:empty { display: none; }

/* Dense stat rail — one wrapping mono line of label/value/Δ segments; replaces
   the one-number-per-card tile sections. Tabular numerals so columns rhyme. */
.mkt-statrail { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline;
  font-variant-numeric: tabular-nums; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg-2); }
.rail-seg { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.rail-seg .k { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.rail-seg.rail-verdict { flex-wrap: wrap; white-space: normal; }

/* Ideas chips (T5) — compact quality-gated top-3 with Build links. */
.mkt-ideas-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mkt-ideas-chips .lbl { color: var(--text-muted); letter-spacing: .06em; }
.mkt-idea-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-2); }
.mkt-linkout-lines { display: flex; flex-direction: column; gap: 4px; }
.mkt-headlines-fallback summary { cursor: pointer; }
.mkt-headlines-fallback .mkt-news { margin-top: 8px; }

/* In-session activity summary row (T4). */
.mkt-activity-summary-row { padding: 8px 12px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg-2); }

/* P3.1 gate matrix — the glance layer above the detailed rows: one colored
   cell per verdict, amber ring = evaluated on a stale brief. */
.mkt-gate-matrix { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  padding: 8px 12px; margin-bottom: 10px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg-2); max-width: 1100px; }
.mkt-gmx-fam { display: inline-flex; align-items: center; gap: 5px; }
.mkt-gmx-name { padding-right: 2px; border-left: 3px solid var(--fam, var(--border));
  padding-left: 6px; }
.mkt-gmx-cell { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.mkt-gmx-cell.clear { background: var(--positive-soft); border: 1px solid var(--positive); }
.mkt-gmx-cell.blocked { background: var(--negative-soft); border: 1px solid var(--negative); }
.mkt-gmx-cell.ring { box-shadow: 0 0 0 2px var(--amber-tint, rgba(217, 163, 66, 0.4)); }

/* P3.3 VIX stress dial + P3.4 IV term mini-curve */
.mkt-rail-extras { margin-top: 10px; }
.mkt-stress-dial { display: inline-block; width: 72px; height: 8px; border-radius: 4px;
  background: var(--bg-3); border: 1px solid var(--border); overflow: hidden;
  vertical-align: middle; }
.mkt-stress-fill { display: block; height: 100%; background: var(--positive); }
.mkt-stress-fill.hot { background: var(--negative); }
.mkt-ivterm-svg { width: 110px; height: 26px; vertical-align: middle; }
.mkt-ivterm-svg polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; }

/* gate verdicts */
.mkt-gates { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; max-width: 1100px; }
.mkt-gate { font-variant-numeric: tabular-nums; }
.mkt-gate-fam { display: flex; flex-direction: column; gap: 6px; }
.mkt-gate-fam .family-section-h { margin: 10px 0 2px; }
.mkt-gate-fam:first-child .family-section-h { margin-top: 0; }
.mkt-gate { display: grid; grid-template-columns: 70px 1fr auto auto; grid-template-areas: "badge name gate build" "badge reason reason build";
  gap: 2px 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg-2); }
.mkt-gate-build { grid-area: build; align-self: center; white-space: nowrap; }
.mkt-posture-cta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mkt-gate.blocked { border-color: var(--negative-border); background: var(--negative-soft); }
.mkt-gate-badge { grid-area: badge; font-size: 10px; font-weight: 700; padding: 3px 6px; border-radius: 6px;
  text-align: center; background: var(--bg-3); color: var(--muted); }
.mkt-gate-badge.live { background: var(--negative-soft); color: var(--negative); }
.mkt-gate-name { grid-area: name; font-weight: 600; }
.mkt-gate-gate { grid-area: gate; }
.mkt-gate-reason { grid-area: reason; }
/* P0.6 three-state chrome: stale-brief stamp above the rows; warning-styled
   fail-open line (a risk-posture change, not a muted footnote). */
.mkt-gate-stale-note { display: flex; align-items: baseline; gap: 8px; padding: 2px 0 6px; }
.mkt-gate-none { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-2); }

/* live panels — always exactly 3 cards, so say so (auto-fill stranded them
   left of an empty row on wide screens). */
.mkt-live-grid { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .mkt-live-grid { grid-template-columns: 1fr; } }
.mkt-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 4px 0;
  border-bottom: 1px solid var(--border); }
.mkt-line:last-child { border-bottom: none; }
/* single-line summaries — full text lives in the title attr + /signals */
.mkt-line .mkt-line-sum { flex: 1 1 100%; min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* near-miss card chrome (P0.1): gate rollup subtitle, per-row tuning hint,
   details link-out. Hints render full-width under their row. */
.mkt-nm-gate { margin-bottom: 4px; }
.mkt-nm-hint { flex-basis: 100%; padding-left: 2px; }
.mkt-nm-more { margin-top: 4px; }
/* in-play staleness watchdog (P0.5): frozen strips grey out instead of
   impersonating fresh data. */
.in-play-strip.ip-stale .ip-chips { opacity: 0.45; }
.in-play-strip .ip-stale-tag { margin-left: 8px; }

.mkt-focus { margin: 0; padding-left: 18px; color: var(--text); font-size: 13px; }
.mkt-focus li { margin: 4px 0; }

/* ---------- Morning-brief era system (P1.2) ----------
   One wrapper carries the brief's lifecycle; rule R4 "size follows freshness":
   past-era snapshot numbers demote to muted 16px so live values visually win.
   Amber is reserved for UNEXPECTED oldness (rule R2). */
.mkt-brief { margin-top: 28px; }
.mkt-brief-head h3 { margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mkt-brief > details > summary { cursor: pointer; color: var(--text-muted); font-size: 12px;
  margin-bottom: 4px; width: fit-content; }
.mkt-brief.era-expired > details > .section,
.mkt-brief.era-expired .mkt-posture { opacity: 0.85; }

.mkt-provenance { margin-top: 24px; }
.mkt-provenance summary { cursor: pointer; }
.mkt-prov-body { margin-top: 8px; }
.mkt-prov-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

/* ===================== /market chart row ===================== */
.mkt-chartrow-section { margin-bottom: 18px; }
.mkt-chartrow-toolbar { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.mkt-chartrow-controls { display: flex; gap: 10px; align-items: center; }
.mkt-chartrow-range { display: flex; gap: 4px; }
/* 4-up at desktop for the compact strip, degrades via auto-fit. 300px minimum
   (was 420) so the tape stops forcing 2-up rows on 1366-1440 laptops. */
.mkt-chartrow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px; }
/* Compact mode (P1.4): range buttons apply to expanded candles only. */
.mkt-chartrow-section.is-compact .mkt-chartrow-range { display: none; }
.mkt-cr-card { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-2);
  padding: 8px 10px 4px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mkt-cr-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mkt-cr-sym { background: transparent; border: none; color: var(--text); padding: 0;
  cursor: pointer; font-size: 13px; display: inline-flex; align-items: baseline; gap: 2px; }
.mkt-cr-sym:hover strong { color: var(--accent); }
.mkt-cr-sym strong { font-size: 14px; letter-spacing: 0.3px; }
.mkt-cr-price { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end;
  font-size: 11px; line-height: 1.2; }
/* R4 size-follows-freshness (live half): the LIVE price is the loudest number
   on the card — it must outweigh any snapshot-era numeral on the page. */
.mkt-cr-last { font-size: 16px; font-weight: 700; }
.mkt-cr-chg { font-size: 12px; }
/* A dead data path greys the header price — a plausible-but-stale number at
   full weight is worse than a dash. */
.mkt-cr-head .stale { opacity: 0.5; }
.mkt-cr-prev { font-size: 10px; color: var(--muted); font-family: ui-monospace, monospace;
  letter-spacing: 0.2px; }
.mkt-cr-prev:empty { display: none; }
.mkt-cr-open { color: var(--muted); text-decoration: none; padding: 0 4px; font-size: 13px; }
.mkt-cr-open:hover { color: var(--accent); }
.mkt-cr-x { background: transparent; color: var(--muted); border: none; cursor: pointer;
  padding: 0 4px; font-size: 14px; line-height: 1; }
.mkt-cr-x:hover { color: var(--red); }
.mkt-cr-chart { width: 100%; height: 220px; }
/* Compact sparkline card (P1.4): 64px SVG strip, colored via currentColor so
   it re-themes for free. Green/red follow the day's direction. */
.mkt-cr-chart.mkt-cr-compact { height: 64px; }
.mkt-cr-compact .mkt-cr-spark { width: 100%; height: 100%; display: block; }
.mkt-cr-compact .mkt-cr-spark polyline { fill: none; stroke: currentColor; stroke-width: 1.5; }
.mkt-cr-compact.green { color: var(--positive); }
.mkt-cr-compact.red { color: var(--negative); }
.mkt-cr-compact.muted { color: var(--text-muted); }
.mkt-cr-foot { font-size: 10px; }

/* symbol picker popover */
.mkt-cr-popover { position: absolute; z-index: 1000; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px; width: 220px;
  box-shadow: 0 4px 16px var(--shadow); }
.mkt-cr-popover input { width: 100%; background: var(--bg-3); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; padding: 4px 6px; font-size: 13px;
  font-family: ui-monospace, monospace; }
.mkt-cr-popover-list { max-height: 220px; overflow-y: auto; margin-top: 4px; }
.mkt-cr-popover-item { padding: 4px 6px; border-radius: 4px; cursor: pointer;
  font-family: ui-monospace, monospace; font-size: 12px; }
.mkt-cr-popover-item:hover, .mkt-cr-popover-item.active { background: var(--bg-3); color: var(--accent); }

/* ===================== Symbol detail page ===================== */
.sym-header { display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.sym-ticker { font-size: 30px; font-weight: 700; letter-spacing: 0.5px; }
.sym-name { font-size: 13px; margin-top: 2px; max-width: 320px; }
.sym-price-block { margin-left: 4px; }
.sym-price { font-size: 26px; font-weight: 600; }
.sym-chg { font-size: 13px; margin-top: 2px; }
.sym-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.sym-grid { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .sym-grid { grid-template-columns: 1fr; } }

.sym-chart-card { margin-top: 0; }
.sym-chart-toolbar { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.sym-chart-axes { display: flex; flex-direction: column; gap: 6px; }
.sym-range-btns, .sym-ma-btns, .sym-int-btns, .chain-int-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.sym-range-btn, .sym-ma-btn, .sym-int-btn, .chain-int-btn { background: var(--bg-3); color: var(--muted); border: 1px solid var(--border);
  padding: 4px 10px; border-radius: 5px; font-size: 12px; cursor: pointer; }
.sym-range-btn:hover, .sym-ma-btn:hover, .sym-int-btn:not(:disabled):hover, .chain-int-btn:not(:disabled):hover { color: var(--text); border-color: var(--accent); }
.sym-range-btn.active, .sym-int-btn.active, .chain-int-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.sym-ma-btn.active { color: var(--text); border-color: var(--accent); }
/* Interval row is the secondary axis: a touch smaller; invalid bars greyed + inert.
   .chain-int-btn = the /chain chart's twin of the same control — shared rules on purpose. */
.sym-int-btn, .chain-int-btn { padding: 2px 8px; font-size: 11px; }
.sym-int-btn:disabled, .chain-int-btn:disabled { opacity: .35; cursor: not-allowed; }
.sym-chart { width: 100%; height: 380px; }

/* ===== Chain-page price chart (klinecharts band + fullscreen modal) ===== */
.chain-chart-section { margin: 0 0 14px; }
.chain-chart-section[open] .pos-caret { transform: rotate(90deg); }
.chain-chart-summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer;
  padding: 4px 2px; user-select: none; list-style: none; }
.chain-chart-summary::-webkit-details-marker { display: none; }
.chain-chart-title { font-size: 13px; font-weight: 600; }
.chain-chart-card {
  margin-top: 8px; padding: 10px 12px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
  position: relative; min-width: 0;
}
.chain-chart-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  row-gap: 8px; margin-bottom: 8px; }
/* .chain-int-btns/.chain-int-btn styled with the .sym-int-btn rules above. */
.chain-chart-expand { margin-left: auto; }
/* klinecharts draws on a transparent canvas — the container carries the bg. */
.chain-chart { width: 100%; height: 300px; background: var(--bg-2); }
/* Sub-pane oscillators (RSI/MACD) need vertical room: fullscreen-only pills. */
.chain-chart-toolbar .ec-pill.fs-only { display: none; }
.chain-chart-modal-body .chain-chart-toolbar .ec-pill.fs-only { display: inline-flex; }

/* Fullscreen modal — the embedded card node is MOVED in here (single instance). */
.chain-chart-modal .modal-panel.chain-chart-panel {
  width: 96vw; max-width: 96vw; height: 92vh; max-height: 92vh;
  padding: 0; display: flex; flex-direction: column;
}
.chain-chart-modal-head { display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--border); }
.chain-chart-modal-title { font-size: 16px; font-weight: 700; }
.chain-chart-modal-body { flex: 1; min-height: 0; padding: 12px 16px;
  display: flex; flex-direction: column; }
.chain-chart-modal-body .chain-chart-card { flex: 1; min-height: 0; margin-top: 0;
  display: flex; flex-direction: column; border: 0; background: transparent; }
.chain-chart-modal-body .chain-chart { flex: 1; height: auto; min-height: 0; }
.chain-chart-modal-body .chain-chart-expand { display: none; }

.sym-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.sym-stat { background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
.sym-stat-k { margin-bottom: 3px; }
.sym-stat-v { font-size: 14px; }
.sym-52bar { position: relative; height: 4px; background: var(--bg-3); border-radius: 2px; margin-top: 6px; }
.sym-52dot { position: absolute; top: -2px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); transform: translateX(-50%); }

.sym-opt-top { display: flex; gap: 28px; margin-bottom: 10px; }
.sym-opt-big { font-size: 20px; font-weight: 600; margin-top: 2px; }
.sym-exp-list { display: flex; flex-direction: column; gap: 2px; }
.sym-exp { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px;
  padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.sym-exp:last-child { border-bottom: none; }

.sym-earn-next { font-size: 14px; margin-bottom: 8px; }
.sym-earn-tbl td, .sym-earn-tbl th { padding: 4px 8px; font-size: 12px; }

.sym-pos-list { display: flex; flex-direction: column; gap: 2px; }
.sym-pos { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 6px 4px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
.sym-pos:last-child { border-bottom: none; }
.sym-pos:hover { background: var(--bg-3); }
.sym-pos-strat { font-weight: 600; }
.sym-strats { display: flex; flex-wrap: wrap; gap: 6px; }

.sym-news-item { padding: 6px 0; border-bottom: 1px solid var(--border); }
.sym-news-item:last-child { border-bottom: none; }
.sym-news-item a { color: var(--text); text-decoration: none; font-size: 13px; }
.sym-news-item a:hover { color: var(--accent); }
.sym-foot { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ===================== Watchlist member table (redesign) ===================== */
.wl-tbl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wl-filter { flex: 0 1 200px; background: var(--bg-3); border: 1px solid var(--border);
  color: var(--text); padding: 5px 10px; border-radius: 5px; font-size: 12px; }
.wl-filter:focus { outline: none; border-color: var(--accent); }

.wl-tbl { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-2); }
.wl-tbl-head, .wl-row {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) 72px 74px 62px 46px 58px minmax(80px, 1.2fr) 26px;
  gap: 8px; align-items: center; padding: 7px 12px;
}
.wl-tbl-head { position: sticky; top: 0; z-index: 1; background: var(--bg-3);
  border-bottom: 1px solid var(--border); font-size: 10px; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--muted); user-select: none; }
.wl-th[data-sort] { cursor: pointer; }
.wl-th[data-sort]:hover { color: var(--text); }
.wl-th.active { color: var(--accent); }
.wl-th.active::after { content: ' ▲'; font-size: 8px; }
.wl-th.active.desc::after { content: ' ▼'; }
.wl-th.num, .wl-col-last, .wl-col-chg, .wl-col-beta, .wl-col-iv { text-align: right; }

.wl-tbl-body { max-height: 64vh; overflow-y: auto; }
.wl-row { border-bottom: 1px solid var(--border); font-size: 13px; }
.wl-row:last-child { border-bottom: none; }
.wl-row:hover { background: var(--bg-3); }
.wl-col-sym { font-weight: 600; color: var(--accent); text-decoration: none; }
.wl-col-sym:hover { text-decoration: underline; }
.wl-col-last { color: var(--text); }
.wl-col-beta, .wl-col-iv { color: var(--muted); font-size: 12px; }
.wl-col-spark { display: flex; justify-content: center; align-items: center; height: 18px; }
.wl-col-spark svg { display: block; }
.wl-col-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; overflow: hidden; }
.wl-tag { font-size: 9px; padding: 1px 6px; background: var(--info-soft); color: var(--info); }
.wl-tag-edit { background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 11px; padding: 0 2px; }
.wl-tag-edit:hover { color: var(--accent); }
.wl-col-x { text-align: right; }
.wl-foot-hint { opacity: 0.75; }

@media (max-width: 760px) {
  .wl-tbl-head, .wl-row { grid-template-columns: minmax(60px, 1fr) 64px 66px 46px 50px 22px; }
  .wl-col-spark, .wl-col-tags { display: none; }
}

/* === Unified conviction component (PR-0A) ============================== */
.conv { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; font-variant-numeric: tabular-nums; }
.conv-bar { display: inline-flex; gap: 2px; }
.conv-seg { width: 6px; height: 12px; border-radius: 1px; background: var(--bg-3); }
.conv-sm .conv-seg { width: 4px; height: 9px; }
.conv-num { font-size: 11px; color: var(--text-muted); }
.conv-prob { font-size: 11px; color: var(--text-muted); }
.conv-exceptional .conv-seg.on { background: var(--conv-exceptional); box-shadow: 0 0 4px var(--conv-exceptional); }
.conv-high .conv-seg.on { background: var(--conv-high); }
.conv-moderate .conv-seg.on { background: var(--conv-moderate); }
.conv-low .conv-seg.on { background: var(--conv-low); }
.conv-weak .conv-seg.on { background: var(--conv-weak); }
.conv-exceptional .conv-num, .conv-high .conv-num { color: var(--conv-high); }

/* === Loading skeletons (PR-B0c, /build metrics + payoff) ================ */
.skeleton-line {
  height: 12px;
  margin: 4px 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
.payoff-canvas-wrap.loading { position: relative; }
.payoff-canvas-wrap.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  opacity: 0.7;
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === Pre-trade risk preview (PR-B2) ===================================== */
/* The /build page opens the SAME risk modal with a preview payload; these
   rules hide the position-history sections that have no pre-trade meaning. */
.risk-modal.preview-mode .risk-journal-details,
.risk-modal.preview-mode .risk-since,
.risk-modal.preview-mode .ds-actions,
.risk-modal.preview-mode .risk-attrib { display: none; }

/* === /build 3-zone ticket (PR-B5): WHAT | PRICE | RISK ================== */
.build-zones {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1.1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}
@media (max-width: 1100px) {
  .build-zones { grid-template-columns: 1fr; }
}
/* HOTFIX: the page-level .action-bar is viewport-FIXED (bottom bar) — inside a
   build zone that yanked the Open / View-full-risk buttons out of the layout
   (and the two bars overlapped each other at the viewport bottom). In a zone
   they flow in place. */
.build-zone .action-bar {
  position: static;
  left: auto; right: auto; bottom: auto;
  background: transparent;
  border-top: 0;
  padding: 0;
  z-index: auto;
  margin-top: 12px;
}
.hero-net {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 34px;
  margin-bottom: 2px;
}
.hero-net-big { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-net-label { font-size: 12px; }
/* Total reads as a sub-line under the big number — the old margin-left:auto
   right-float left it disconnected when the hero wrapped at narrow widths. */
.hero-net-total { flex-basis: 100%; margin-left: 0; }
.hero-fill { min-height: 16px; margin-bottom: 8px; }
.build-journal-details, .build-trail-details { margin-bottom: 10px; }
.build-journal-details > summary, .build-trail-details > summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
}
.build-journal-details > summary:hover, .build-trail-details > summary:hover { color: var(--text); }

/* === /build ticket overhaul ============================================= */
/* Zone-2 control groups — full-width stacks with a small header on top.
   The legacy 110px side-label .field-row grid crushed multi-row controls at
   narrow zone widths: caps-wrapped toggle, orphaned chips, truncated inputs,
   labels floating mid-block. */
.ctl-group {
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-bottom: 14px;
  min-width: 0;
}
.ctl-head, .ctl-subhead {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
}
.ctl-subhead { margin-top: 2px; }
/* Inputs inside control groups get the house input look (the base rule is
   scoped to .field-row and no longer applies here). */
.ctl-group input[type="number"], .ctl-group input[type="text"] {
  background: var(--bg-3); color: var(--text); border: 1px solid var(--border);
  padding: 7px 9px; border-radius: 6px; font-size: 13px; font-family: inherit;
}
.ctl-group input:focus { outline: none; border-color: var(--accent); }

/* Fill-price group — sentence-case toggle (NOT the uppercase label style). */
.limit-toggle-row {
  display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer;
  font-size: 13px; color: var(--text);
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.limit-toggle-row input[type="checkbox"] { accent-color: var(--accent); flex: none; }
.limit-slider-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px; }
.limit-slider-row input[type="range"] { flex: 1; min-width: 80px; accent-color: var(--accent); }
.ctl-group .limit-slider-row input[type="number"] { width: 84px; text-align: right; }
.limit-bound { flex: none; }
#limit-readout { overflow-wrap: anywhere; line-height: 1.5; }

/* Quantity group — stepper | additive chips | live contracts readout. */
.qty-stepper { display: inline-flex; align-items: center; gap: 4px; }
.ctl-group .qty-stepper input[type="number"] { width: 64px; text-align: center; }
.qty-chips { display: inline-flex; align-items: center; gap: 6px; }
.qty-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 6px; }
#qty-contracts { white-space: nowrap; }

/* Size-by — two self-contained input+button pairs that wrap as UNITS, so a
   suffix can never orphan onto its own line. */
.size-by-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 8px; }
.size-by-pair { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.size-by-sep { flex: none; }
.size-by-field { display: inline-flex; align-items: center; gap: 3px; }
.ctl-group .size-by-field input[type="number"] { width: 86px; }
.size-by-prefix { color: var(--muted); font-size: 12px; }
#size-explain { min-height: 15px; overflow-wrap: anywhere; }
#size-explain.success { color: var(--positive); }
#size-explain.warn { color: var(--warning, #e9b949); }

/* Entry-basis pill — "at mid" vs "at est. fill" on hero + metrics. */
.basis-pill {
  display: inline-block; padding: 0 6px; border-radius: 8px;
  font-size: 9px; letter-spacing: .5px; text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text); vertical-align: middle;
}
.basis-pill.muted { background: var(--bg-3); color: var(--muted); }

/* Selected-legs chips (zone 3) — wraps cleanly, per-leg contract count. */
.leg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; margin: 0 6px 6px 0;
  border: 1px solid var(--border); border-radius: 4px;
  max-width: 100%; overflow-wrap: anywhere;
}

/* Freeform combo rows — flex (the parent .field-row default is a 110px+1fr
   GRID, which stacked the five controls into broken rows). */
.field-row.combo-leg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.combo-leg-row .combo-action { width: 72px; flex: none; }
.combo-leg-row .combo-action.is-buy { color: var(--negative); }
.combo-leg-row .combo-action.is-sell { color: var(--positive); }
.combo-leg-row .combo-type { width: 72px; flex: none; }
.combo-leg-row .combo-strike { flex: 1; min-width: 110px; }
.field-row.combo-leg-row input[type="number"][data-f="ratio"] { width: 56px; flex: none; }
.field-row.combo-foot { display: flex; align-items: center; gap: 10px; }
.combo-foot label { min-width: 0; }

/* Metric cells: keep big numbers inside their boxes. */
.m-big { overflow-wrap: anywhere; }
.m-label { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hero-net-total { overflow-wrap: anywhere; }

/* Trailing-stop designer: controls | visualizer. */
.trail-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.1fr);
  gap: 16px;
  padding-top: 8px;
  align-items: start;
}
@media (max-width: 900px) { .trail-grid { grid-template-columns: 1fr; } }
.trail-viz {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px 12px;
}
.trail-viz-head { display: flex; align-items: center; gap: 4px; letter-spacing: .5px; margin-bottom: 6px; }
.trail-viz-canvas-wrap { height: 190px; }
.trail-sim-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.trail-sim-row input[type="range"] { flex: 1; accent-color: var(--accent); }
#trail-sim-readout { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dte-sched-pair { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; white-space: nowrap; }
.field-row .dte-sched-pair input[type="number"] { width: 58px; padding: 5px 6px; }
/* Underlying-trail strip */
.trail-spot-strip .tss-row { display: flex; gap: 8px; margin-bottom: 6px; align-items: baseline; }
.trail-spot-strip .tss-label { color: var(--muted); font-size: 11px; min-width: 86px; text-transform: uppercase; letter-spacing: .5px; }
/* Time-exit strip */
.trail-time-strip .tts-bar { height: 10px; border-radius: 5px; background: var(--bg-3); overflow: hidden; margin-bottom: 4px; }
.trail-time-strip .tts-held { height: 100%; background: color-mix(in srgb, var(--positive) 55%, transparent); }
.trail-time-strip .tts-labels { display: flex; justify-content: space-between; margin-bottom: 4px; }

/* === Unified symbol picker (PR-B3) ====================================== */
.sym-picker-pop {
  position: absolute;
  z-index: 1000;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  padding: 4px;
}
.sym-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.sym-picker-item.active, .sym-picker-item:hover { background: var(--bg-3); }
.sym-picker-sym { font-weight: 600; min-width: 52px; }
.sym-picker-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--text-muted);
}
.sym-picker-tag-positions { color: var(--positive, #2e8b57); }
.sym-picker-meta { margin-left: auto; white-space: nowrap; }
.sym-picker-empty { padding: 6px 8px; }

/* ============================ Strategy optimizer page ===================== */
.opt-status {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 8px; margin-bottom: 14px;
  border: 1px solid var(--border); background: var(--bg-2); font-size: 13px;
}
.opt-status.is-armed { border-color: var(--positive-border); background: var(--positive-soft); }
.opt-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.opt-status.is-armed .opt-status-dot { background: var(--positive); box-shadow: 0 0 0 3px var(--positive-soft); }
.opt-status-tags { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.opt-funnel { display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; }
.opt-step {
  flex: 1 1 0; min-width: 92px; padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-2); text-align: center;
}
.opt-step.on { border-color: var(--positive-border); background: var(--positive-soft); }
.opt-step.off { opacity: 0.5; }
.opt-step-t { font-size: 12px; font-weight: 600; color: var(--text); }
.opt-step.on .opt-step-t { color: var(--positive); }
.opt-step-d { font-size: 10px; }
.opt-arrow { display: flex; align-items: center; color: var(--muted); font-size: 14px; }

.opt-empty-h { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.opt-empty-list { margin: 8px 0 0; padding-left: 18px; line-height: 1.7; font-size: 13px; }
.opt-cli, .opt-how pre {
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; font-family: ui-monospace, monospace; font-size: 12px; margin: 8px 0 0; overflow-x: auto;
}
.opt-summary { margin-bottom: 12px; }

.opt-card { margin-bottom: 12px; }
.opt-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.opt-card-title { font-size: 15px; font-weight: 600; }
.opt-card-title a { color: var(--text); text-decoration: none; }
.opt-card-title a:hover { color: var(--accent); }
.opt-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.opt-verdict {
  padding: 2px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600;
  cursor: help; border: 1px solid transparent;
}
.opt-verdict.good { background: var(--positive-soft); color: var(--positive); border-color: var(--positive-border); }
.opt-verdict.warn { background: var(--warning-soft); color: var(--warning); }
.opt-verdict.muted { background: var(--surface-3); color: var(--text-subtle); border-color: var(--border); }

.opt-best {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px; border-radius: 6px;
  background: var(--positive-soft); border: 1px solid var(--positive-border);
}
.opt-best.muted-card { background: var(--bg-3); border-color: var(--border); }
.opt-best-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; cursor: help; }
.opt-best-tag.good { color: var(--positive); }
.opt-best-tag.warn { color: var(--warning); }
.opt-best-tag.muted { color: var(--text-subtle); }
.opt-best-metrics { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.opt-best-metrics span { cursor: help; }
.opt-best-changes { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

.opt-change {
  font-size: 11px; padding: 1px 7px; border-radius: 4px;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text-muted);
  white-space: nowrap; cursor: help;
}
.opt-change strong { color: var(--text); }
.opt-change.more { cursor: default; font-style: italic; }

.opt-lb { margin-top: 10px; }
.opt-lb > summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 4px 0; user-select: none; }
.opt-lb > summary:hover { color: var(--accent); }
.opt-lb-table { margin-top: 6px; font-size: 12px; }
.opt-lb-table th { cursor: help; white-space: nowrap; }
.opt-lb-table tr.is-survivor td:first-child { box-shadow: inset 3px 0 0 var(--positive); }
.opt-lb-changes { display: flex; gap: 4px; flex-wrap: wrap; }

.opt-grad-row { display: flex; align-items: center; gap: 10px; margin: 3px 0; }
.opt-history { margin-top: 6px; }
.opt-how { margin-top: 16px; }
.opt-how > summary { cursor: pointer; padding: 4px 0; user-select: none; }
.opt-how > summary:hover { color: var(--accent); }
.opt-how p { line-height: 1.7; margin: 8px 0 0; max-width: 70ch; }

/* ============================================================
   Improve hub (/improve) — Improvement Engine v2, Wave 6.
   Tokens only (light/dark inherit from :root). No hard-coded colors.
   ============================================================ */
.imp-band { margin: 1.4rem 0; padding-top: 1rem; border-top: 1px solid var(--border); }
.imp-band:first-of-type { border-top: 0; }
.imp-h { font-size: 1rem; font-weight: 650; margin: 0 0 .7rem; display: flex; align-items: center; gap: .5rem; }
.imp-count { background: var(--accent); color: #fff; border-radius: 999px; padding: .05rem .5rem;
  font-size: .78rem; font-weight: 700; }

/* --- what the book needs --- */
.imp-needs { border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; background: var(--surface); }
.imp-needs.is-needy { border-color: var(--negative-border); background: var(--negative-soft); }
.imp-needs.is-ontarget { border-color: var(--positive-border); background: var(--positive-soft); }
.imp-statement { margin: 0 0 .8rem; font-weight: 600; font-size: 1.02rem; }
.imp-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.imp-cell { display: flex; flex-direction: column; gap: .15rem; }
.imp-lbl { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.imp-val { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.imp-val.pos { color: var(--positive); }
.imp-val.neg { color: var(--negative); }
.imp-sub { font-size: .82rem; color: var(--text-muted); }
.imp-split { display: block; margin-top: .15rem; font-size: .78rem; }
.imp-stamp { margin-top: .7rem; font-size: .74rem; color: var(--text-subtle); }

/* --- decision queue --- */
.imp-queue { display: flex; flex-direction: column; gap: .55rem; }
.imp-item { display: flex; align-items: flex-start; gap: .8rem; border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: 10px; padding: .7rem .9rem; background: var(--surface); }
.imp-item.is-grad_revert { border-left-color: var(--negative-strong); }
.imp-item.is-retire, .imp-item.is-opt_retire { border-left-color: var(--negative); }
.imp-item.is-decided { opacity: .55; border-left-color: var(--positive); }
.imp-verb { flex: 0 0 auto; font-size: .72rem; font-weight: 800; letter-spacing: .05em;
  padding: .2rem .5rem; border-radius: 6px; background: var(--surface-hover); color: var(--text);
  border: 1px solid var(--border); min-width: 62px; text-align: center; }
.imp-item-body { flex: 1 1 auto; min-width: 0; }
.imp-item-target { font-weight: 650; }
.imp-kind { font-size: .72rem; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .04em; }
.imp-item-why { font-size: .86rem; color: var(--text-muted); }
.imp-item-impact { font-size: .8rem; color: var(--text-subtle); margin-top: .15rem; }
.imp-empty { color: var(--text-muted); font-size: .95rem; padding: .5rem 0; }

/* --- process P&L ledger --- */
.imp-ledger-head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: .6rem; }
.imp-ledger-total { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.imp-ledger-total.pos { color: var(--positive); }
.imp-ledger-total.neg { color: var(--negative); }
.imp-table-wrap { overflow-x: auto; }
.imp-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.imp-table th, .imp-table td { text-align: left; padding: .35rem .55rem; border-bottom: 1px solid var(--border); }
.imp-table th.num, .imp-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.imp-table td.pos { color: var(--positive); }
.imp-table td.neg { color: var(--negative); }
.imp-table tr.is-provisional { opacity: .62; }
/* --- top provisional movers strip --- */
.imp-movers { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .1rem 0 .7rem; }
.imp-movers-lbl { font-size: .78rem; font-weight: 700; color: var(--text-muted); margin-right: .2rem; }
.imp-mover { font-size: .78rem; font-variant-numeric: tabular-nums; padding: .1rem .5rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); }
.imp-mover.pos { color: var(--positive); border-color: var(--positive-border); background: var(--positive-soft); }
.imp-mover.neg { color: var(--negative); border-color: var(--negative-border); background: var(--negative-soft); }

/* --- skip-economy gate rollup --- */
.imp-gates { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .5rem; }
.imp-gate { font-size: .78rem; padding: .12rem .5rem; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.imp-gate.is-credit { color: var(--negative); border-color: var(--negative-border); background: var(--negative-soft); }
/* --- fidelity grade chips --- */
.imp-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.imp-chip { font-size: .78rem; padding: .12rem .55rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted); }
.imp-chip.is-aligned { color: var(--positive); border-color: var(--positive-border); background: var(--positive-soft); }
.imp-chip.is-optimistic { color: var(--warning, var(--negative)); border-color: var(--negative-border); }
.imp-chip.is-divergent { color: var(--negative); border-color: var(--negative-border); background: var(--negative-soft); }

/* --- shared pills --- */
.imp-pill { font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-muted); background: var(--surface); }
.imp-pill.ok { color: var(--positive); border-color: var(--positive-border); background: var(--positive-soft); }
.imp-pill.warn { color: var(--negative); border-color: var(--negative-border); background: var(--negative-soft); }

/* --- shared news classes (promoted from news.html inline; reused by /news + the
   dashboard HedgeTape ticker). Severity via canonical danger/warning/info tokens —
   NOT --brand emerald, which is rationed to chrome and would fight the P&L signal. */
.nb-sev { padding: 2px 10px; border-radius: 4px; font-weight: 600; font-size: 12px; color: #fff; }
.nb-sev.high { background: var(--negative-strong); }
.nb-sev.medium { background: var(--warning); color: #1a1205; }
.nb-sev.low { background: var(--info); color: #061321; }
/* 'as of HH:MM ET' / 'delayed' / 'none' are NOT severity alerts — they're a
   freshness timestamp. Override the loud white-on-fill .nb-sev base with a quiet,
   legible neutral chip (fixes the washed-out white-on-grey in dark mode), and
   flag the not-live state with a small amber dot. */
.nb-sev.none, .nb-sev.nb-delayed {
  display: inline-flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-muted) 30%, transparent);
  color: var(--text);
  font-weight: 600; letter-spacing: .01em;
  padding: 2px 9px;
}
.nb-sev.nb-delayed::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 22%, transparent);
}
.nb-asset { display: inline-block; padding: 1px 7px; margin: 2px; border-radius: 4px;
  background: var(--surface-2); font-size: 12px; }
.nb-card { border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
.nb-card.nb-stale { opacity: 0.9; border-style: dashed; }
.news-hl { display: block; padding: 6px 0; border-bottom: 1px solid var(--border); }
.news-hl .src { color: var(--text-muted); font-size: 12px; }
.news-age { margin-left: 6px; }
.news-freshness { font-size: 12px; padding: 6px 10px; border-radius: 6px; margin-bottom: 8px;
  background: var(--surface-2); color: var(--text-muted); }
.news-freshness.stale { background: var(--warning-soft); color: var(--warning); }

/* --- HedgeTape: dashboard scrolling news screener (behind news_ticker_enabled) --- */
.hm-ticker { display: flex; align-items: center; gap: 10px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; margin: 0 0 10px;
  background: var(--surface-2); }
.hm-ticker-viewport { flex: 1 1 auto; overflow: hidden; }
.hm-ticker-track { display: inline-flex; gap: 26px; white-space: nowrap; will-change: transform;
  animation: hm-marquee var(--dur, 60s) linear infinite; }
.hm-ticker:hover .hm-ticker-track,
.hm-ticker:focus-within .hm-ticker-track { animation-play-state: paused; }
@keyframes hm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hm-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.hm-src { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted); font-size: 10px; font-weight: 700;
  cursor: help; }
.hm-hl { color: inherit; text-decoration: none; }
.hm-hl:hover { color: var(--accent, var(--info)); text-decoration: underline; }
.hm-hl.hm-stale { color: var(--text-muted); }
.hm-chip { display: inline-block; padding: 0 5px; border-radius: 3px; background: var(--surface);
  font-size: 11px; color: var(--accent, var(--info)); text-decoration: none; }
.hm-age { color: var(--text-muted); font-size: 11px; }
.hm-ticker-badge { flex: none; }
.hm-ticker-pause { flex: none; background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 12px; line-height: 1; padding: 2px 4px; }
/* Reduced motion: no marquee — degrade to a static, horizontally-scrollable list. */
@media (prefers-reduced-motion: reduce) {
  .hm-ticker-track { animation: none; transform: none; }
  .hm-ticker-viewport { overflow-x: auto; }
}

/* --- Market assessment card (/news) --- */
.asmt-macro { font-weight: 600; }
.asmt-row { margin-top: 6px; }
.asmt-label { color: var(--text-muted); font-size: 11px; margin-right: 4px; }
.asmt-chip { display: inline-block; padding: 1px 7px; margin: 2px; border-radius: 4px;
  background: var(--surface-2); font-size: 12px; text-decoration: none; }
.asmt-bull { color: var(--positive); }
.asmt-bear { color: var(--negative); }
.asmt-neu { color: var(--text-muted); }

/* --- Market Sentiment card (/news): gauge + decaying-factor table + sparkline --- */
.sent-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 6px; }
.sent-chip { font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; }
.sent-chip.sent-bull { background: var(--positive-soft); color: var(--green); }
.sent-chip.sent-bear { background: var(--negative-soft); color: var(--red); }
.sent-chip.sent-neu { background: var(--bg-3); color: var(--muted); }
.sent-score { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sent-gauge { margin: 2px 0 10px; }
.sent-gauge-track { position: relative; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--negative-soft), var(--bg-3) 50%, var(--positive-soft)); }
.sent-gauge-zero { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px;
  background: color-mix(in srgb, var(--text) 30%, transparent); }
.sent-gauge-needle { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  background: var(--text); transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--surface); }
.sent-gauge-ends { display: flex; justify-content: space-between; font-size: var(--fs-xs);
  color: var(--text-subtle); margin-top: 3px; }
.sent-spark-wrap { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.sent-spark { width: 240px; height: 34px; max-width: 100%; }
.sent-spark path { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.sent-spark-zero { stroke: color-mix(in srgb, var(--text) 15%, transparent); stroke-width: 1; }
.sent-factors { display: flex; flex-direction: column; gap: 5px; margin: 4px 0; }
.sent-frow { display: grid; grid-template-columns: minmax(0,1fr) 54px 88px 46px;
  align-items: center; gap: 0 10px; font-size: 12px; }
.sent-frow.exp { opacity: .45; }
.sent-flabel { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sent-fval { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.sent-fbar { position: relative; height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.sent-fbar::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: color-mix(in srgb, var(--text) 14%, transparent); }
.sent-fbar > i { position: absolute; top: 0; bottom: 0; }
.sent-fbar > i.pos { left: 50%; background: var(--green); border-radius: 0 999px 999px 0; }
.sent-fbar > i.neg { right: 50%; background: var(--red); border-radius: 999px 0 0 999px; }
.sent-badge { font-size: 9px; letter-spacing: .03em; text-align: right; color: var(--text-subtle); }
.sent-badge.fresh { color: var(--green); }
.sent-badge.stale, .sent-badge.exp { color: var(--yellow); }
.sent-how { margin-top: 8px; }
.sent-how summary { cursor: pointer; color: var(--accent); font-size: 12px; }
.sent-how-tbl { border-collapse: collapse; width: 100%; font-size: 11px; margin-top: 6px; min-width: 380px; }
.sent-how-tbl th { text-align: left; color: var(--text-subtle); font-weight: 600; padding: 3px 8px;
  border-bottom: 1px solid var(--border); }
.sent-how-tbl td { padding: 3px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.sent-how-tbl tr.exp { opacity: .5; }
/* compact sentiment chip in the /market verdict band */
.mkt-sent-chip { flex-basis: 100%; padding: 5px 11px; border-radius: 8px; font-size: 12px;
  font-weight: 600; border: 1px solid var(--border); background: var(--surface-2); }
.mkt-sent-chip.green { border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
.mkt-sent-chip.red { border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.mkt-sent-chip.yellow { border-color: color-mix(in srgb, var(--yellow) 40%, var(--border)); }
.mkt-sent-k { color: var(--text-subtle); font-size: 10px; letter-spacing: .08em; margin-right: 6px; }

/* --- Market Gauges band (/market T0.5): hero direction dial + compact gauge tiles --- */
.mkt-gauges { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.mkt-gauges.has-flow { grid-template-columns: repeat(7, minmax(0, 1fr)); }   /* hero(2) + 5 compacts */
/* session head (overnight/closed) — full-width strip above the tiles */
.mkt-gauges-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; padding: 1px 2px 5px; font-size: 12px; }
.mkt-gauges-head[hidden] { display: none; }   /* author display:flex would beat UA [hidden] otherwise */
.mkt-gsession { font-weight: 600; color: var(--text); }
.mkt-ggap { color: var(--muted); }
/* dead-needle: a direction gauge with no live data greys the needle */
.mgauge.is-noread .mgauge-needle line { stroke: var(--muted); }
.mgauge.is-noread .mgauge-needle circle { fill: var(--muted); }
.mgauge { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 11px; text-align: left; min-width: 0; }
.mgauge-hero { grid-column: span 2; }
.mgauge-compact { cursor: pointer; font: inherit; color: inherit; display: block; width: 100%; }
.mgauge-compact:hover, .mgauge.is-open { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.mgauge-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mgauge-label { font-size: 12px; font-weight: 600; color: var(--text); border-bottom: 1px dotted var(--text-subtle);
  cursor: help; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgauge-fresh { font-size: 9px; }
/* hero semicircular dial */
.mgauge-dial { position: relative; }
.mgauge-dial svg { width: 100%; max-width: 200px; height: auto; display: block; margin: 2px auto 0; }
.mgauge-band { fill: none; stroke-width: 12; stroke-linecap: butt; }
.mgauge-band.sb  { stroke: var(--red); }
.mgauge-band.b   { stroke: color-mix(in srgb, var(--red) 55%, transparent); }
.mgauge-band.n   { stroke: color-mix(in srgb, var(--text) 18%, transparent); }
.mgauge-band.bl  { stroke: color-mix(in srgb, var(--green) 55%, transparent); }
.mgauge-band.sbl { stroke: var(--green); }
.mgauge-needle { transform: rotate(var(--angle, 0deg)); transform-origin: 100px 100px; transform-box: view-box;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.mgauge-needle line { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.mgauge-needle circle { fill: var(--text); stroke: var(--surface); stroke-width: 2; }
.mgauge-readout { text-align: center; margin-top: -6px; display: flex; flex-direction: column; line-height: 1.25; }
.mgauge-grade { font-weight: 700; font-size: 13px; }
.mgauge-grade.green { color: var(--green); }
.mgauge-grade.red { color: var(--red); }
.mgauge-grade.yellow { color: var(--yellow); }
.mgauge-score { font-variant-numeric: tabular-nums; font-size: 12px; }
.mgauge-tf { display: flex; gap: 4px; justify-content: center; margin-top: 6px; }
.mgauge-tf .seg-btn { padding: 2px 9px; font-size: 11px; border: 1px solid var(--border);
  border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.mgauge-tf .seg-btn.active { background: var(--brand-soft, color-mix(in srgb, var(--accent) 18%, transparent));
  color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
/* compact tile horizontal gauge */
.mgauge-bar { position: relative; height: 8px; border-radius: 999px; margin: 8px 0 5px;
  background: linear-gradient(90deg, var(--red), var(--bg-3) 50%, var(--green)); }
.mgauge-bar-needle { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%;
  background: var(--text); transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--surface);
  left: calc((var(--score, 0) + 1) / 2 * 100%); transition: left .5s cubic-bezier(.22, 1, .36, 1); }
.mgauge-v { display: flex; align-items: baseline; gap: 6px; }
.mgauge-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1em; }
/* shared transparency drawer (reuses .sent-frow / .sent-fbar) */
.mgauge-detail { grid-column: 1 / -1; border-top: 1px solid var(--border); margin-top: 2px;
  padding: 10px 4px 4px; display: flex; flex-direction: column; gap: 5px; }
.mgauge-detail-h { font-weight: 600; font-size: 12px; margin-bottom: 4px; }
/* degraded states — grey the needles, never blank */
.mkt-gauges.is-warming .mgauge-needle line, .mkt-gauges.is-stale .mgauge-needle line { stroke: var(--muted); }
.mkt-gauges.is-warming .mgauge-needle circle, .mkt-gauges.is-stale .mgauge-needle circle { fill: var(--muted); }
.mkt-gauges.is-warming .mgauge-bar-needle, .mkt-gauges.is-stale .mgauge-bar-needle { background: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .mgauge-needle, .mgauge-bar-needle { transition: none; }
}
@media (max-width: 1500px) {
  /* the 7-col flow layout is too wide for a laptop — wrap the 7th tile instead of clipping */
  .mkt-gauges.has-flow { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  /* also match .has-flow (equal specificity + later source) so it can't pin more cols */
  .mkt-gauges, .mkt-gauges.has-flow { grid-template-columns: repeat(3, 1fr); }
  .mgauge-hero { grid-column: span 3; }
}
@media (max-width: 700px) {
  .mkt-gauges, .mkt-gauges.has-flow { grid-template-columns: repeat(2, 1fr); }
  .mgauge-hero { grid-column: span 2; }
}