/* TradingAI — Radical redesign
   Apple-inspired structure × precise trader DNA
   Dark, hairline borders, oklch palette, type-driven */

/* ============================================================
   Regelsett — beginner-friendly strategy rules section
   ============================================================ */
.rules-summary {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background:
    radial-gradient(80% 100% at 100% 0%, var(--rules-tone, oklch(0.85 0.19 142 / 0.08)), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 22px 26px;
  margin-bottom: 16px;
  overflow: hidden;
}
.rules-summary-icon {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--rules-tone-bg, var(--accent-dim));
  border: 1px solid var(--rules-tone-border, oklch(0.85 0.19 142 / 0.25));
  color: var(--rules-tone-fg, var(--accent));
  display: grid; place-items: center;
  margin-top: 2px;
}
.rules-summary-body { flex: 1; min-width: 0; }
.rules-summary-title {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  margin-bottom: 6px;
}
.rules-summary-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-1);
  letter-spacing: -0.005em;
}

.rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 1100px) {
  .rules-grid { grid-template-columns: 1fr; }
}
.rules-card {
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.rules-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
}
.rules-buy::before { background: linear-gradient(90deg, var(--up), oklch(0.65 0.16 165)); }
.rules-sell::before { background: linear-gradient(90deg, var(--down), oklch(0.78 0.22 18)); }
.rules-filter::before { background: var(--ink-3); }   /* neutral — informasjon, ikke handling */

.rules-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.rules-card-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink-1);
}
.rules-card-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.rules-buy .rules-card-icon { background: var(--up-bg); color: var(--up); border: 1px solid oklch(0.85 0.19 142 / 0.25); }
.rules-sell .rules-card-icon { background: var(--down-bg); color: var(--down); border: 1px solid oklch(0.72 0.21 22 / 0.25); }
.rules-filter .rules-card-icon {
  background: oklch(1 0 0 / 0.04);
  color: var(--ink-2);
  border: 1px solid var(--hairline);
}

.rules-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.rules-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.step-num {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  background: oklch(1 0 0 / 0.04);
  border: 1px solid var(--hairline-soft);
  color: var(--ink-3);
  margin-top: 1px;
}
.rules-buy .step-num { color: var(--up); border-color: oklch(0.85 0.19 142 / 0.3); background: var(--up-bg); }
.rules-sell .step-num { color: var(--down); border-color: oklch(0.72 0.21 22 / 0.3); background: var(--down-bg); }
.rules-filter .step-num { color: var(--ink-2); border-color: var(--hairline); background: oklch(1 0 0 / 0.04); }

.rules-meta {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (max-width: 900px) {
  .rules-meta { grid-template-columns: 1fr; }
}
.rules-meta-item {
  background: var(--surface);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rules-meta-k {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  font-weight: 600;
}
.rules-meta-v {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-1);
  line-height: 1.4;
  letter-spacing: -0.005em;
}

/* CSS variables that proto.css references but doesn't define in :root.
   Without these, ~25 rules (trade rows, log lines, why-drawer cells, slip-cards)
   fall back to inherit/transparent, breaking visual fidelity. */
:root {
  --ink-1: var(--ink);
  --bg-1: var(--bg-2);
  --r-md: 12px;
  --warn-bg: oklch(0.82 0.16 75 / 0.12);
}

/* Utility classes used by index.html — modal hidden state, loading text */
.hidden { display: none !important; }

/* Fade transition for the main content. Polling-refresh dims to 0.92 instead
   of blanking → user keeps reading while data updates. */
main.main {
  transition: opacity 180ms ease;
  opacity: 1;
}
body.refreshing main.main { opacity: 0.92; }
main.main > * {
  animation: main-fade-in 250ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes main-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Skeleton placeholder — slightly more polished than "Loading…" text. */
.skel {
  display: inline-block;
  background: linear-gradient(
    90deg,
    oklch(0.25 0.012 255) 0%,
    oklch(0.30 0.012 255) 50%,
    oklch(0.25 0.012 255) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skel-shimmer 1.4s infinite linear;
}
@keyframes skel-shimmer {
  from { background-position: 0% 0; }
  to   { background-position: -200% 0; }
}
.loading {
  font-family: var(--mono, monospace);
  color: var(--ink-3, #888);
  font-size: 12.5px;
}
.error-banner {
  background: oklch(0.72 0.21 22 / 0.12);
  color: oklch(0.78 0.21 22);
  padding: 12px 16px;
  border-radius: 8px;
  margin: 14px 0;
  font-size: 13px;
}
.muted { color: var(--ink-3); }
.small { font-size: 11.5px; }
.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--mono);
}
.pill.killed {
  background: oklch(0.72 0.21 22 / 0.15);
  color: oklch(0.78 0.21 22);
  border: 1px solid oklch(0.72 0.21 22 / 0.3);
}

:root {
  /* Surfaces — cool deep blue-black, never pure black */
  --bg: oklch(0.155 0.015 255);
  --bg-2: oklch(0.185 0.013 255);
  --surface: oklch(0.21 0.012 255);
  --surface-hi: oklch(0.245 0.012 255);
  --hairline: oklch(0.31 0.013 255 / 0.7);
  --hairline-soft: oklch(0.28 0.011 255 / 0.4);

  /* Text */
  --ink: oklch(0.98 0.005 255);
  --ink-2: oklch(0.78 0.012 255);
  --ink-3: oklch(0.56 0.015 255);
  --ink-4: oklch(0.42 0.013 255);

  /* Accent — electric lime/green, trading DNA but modern */
  --accent: oklch(0.85 0.19 142);
  --accent-2: oklch(0.78 0.18 142);
  --accent-dim: oklch(0.85 0.19 142 / 0.12);
  --accent-glow: oklch(0.85 0.19 142 / 0.25);

  /* Semantic */
  --up: oklch(0.85 0.19 142);
  --up-bg: oklch(0.85 0.19 142 / 0.10);
  --down: oklch(0.72 0.21 22);
  --down-bg: oklch(0.72 0.21 22 / 0.12);
  --warn: oklch(0.82 0.16 75);
  --warn-bg: oklch(0.82 0.16 75 / 0.12);
  --info: oklch(0.78 0.13 235);

  /* Type */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* Geometry */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;

  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --spring: cubic-bezier(0.5, 1.5, 0.4, 1);
}

/* ====== LIGHT THEME ======
   Mirror palette — warm off-white surfaces, dark slate text,
   slightly desaturated semantic colours so they're still legible
   on a bright background (lime-green at L=0.85 reads as bleached
   neon on white; pull lightness down to ~0.62 to hold contrast). */
[data-theme="light"] {
  --bg: oklch(0.985 0.005 255);
  --bg-2: oklch(0.97 0.005 255);
  --surface: oklch(1 0 0);
  --surface-hi: oklch(0.995 0.003 255);
  --hairline: oklch(0.78 0.012 255 / 0.65);
  --hairline-soft: oklch(0.85 0.008 255 / 0.55);

  --ink: oklch(0.16 0.018 255);
  --ink-2: oklch(0.32 0.018 255);
  --ink-3: oklch(0.50 0.014 255);
  --ink-4: oklch(0.62 0.011 255);

  --accent: oklch(0.62 0.18 142);
  --accent-2: oklch(0.55 0.17 142);
  --accent-dim: oklch(0.62 0.18 142 / 0.12);
  --accent-glow: oklch(0.62 0.18 142 / 0.18);

  --up: oklch(0.55 0.18 142);
  --up-bg: oklch(0.55 0.18 142 / 0.10);
  --down: oklch(0.55 0.21 22);
  --down-bg: oklch(0.55 0.21 22 / 0.10);
  --warn: oklch(0.62 0.15 75);
  --warn-bg: oklch(0.62 0.15 75 / 0.10);
  --info: oklch(0.55 0.13 235);
}
[data-theme="light"] body {
  /* Tone down the radial-gradient halos so they don't look like
     greasy smudges on white. Same hue, much lower alpha. */
  background-image:
    radial-gradient(1100px 600px at 88% -10%, oklch(0.62 0.18 142 / 0.04), transparent 60%),
    radial-gradient(900px 500px at -5% 110%, oklch(0.55 0.14 235 / 0.03), transparent 60%);
}
[data-theme="light"] .modal-backdrop {
  background: oklch(0.40 0.012 255 / 0.45) !important;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
body {
  background-image:
    radial-gradient(1100px 600px at 88% -10%, oklch(0.85 0.19 142 / 0.06), transparent 60%),
    radial-gradient(900px 500px at -5% 110%, oklch(0.55 0.14 235 / 0.05), transparent 60%);
  min-height: 100vh;
}

button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }

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

/* Utility class for any number that should align in columns or stacks.
 * Doesn't change the font-family — pair with .mono if you also want
 * monospace digits. */
.tabular { font-variant-numeric: tabular-nums; }

/* Numerical table cells default to tabular + right-align. Author opts in
 * by adding `class="num"` to the <td>. */
table td.num,
.kpi-v,
.kpi-value,
.legend-value {
  font-variant-numeric: tabular-nums;
}
table td.num { text-align: right; }

/* ======= APP SHELL ======= */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  max-width: 1680px;
  margin: 0 auto;
}

/* ====== SIDEBAR ====== */
.sidebar {
  position: sticky; top: 0;
  height: 100vh;
  padding: 22px 16px 16px 22px;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--hairline-soft);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 22px;
}
.brand-mark {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), oklch(0.65 0.16 165));
  display: grid; place-items: center;
  position: relative;
  box-shadow: 0 0 0 1px oklch(1 0 0 / 0.06) inset, 0 6px 18px var(--accent-glow);
}
.brand-mark::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-left: 2px solid oklch(0.18 0.012 255);
  border-bottom: 2px solid oklch(0.18 0.012 255);
  transform: rotate(-45deg) translate(1px, -1px);
}
.brand-name {
  font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em;
}
.brand-name .dim { color: var(--ink-3); font-weight: 500; }

.nav-group-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  padding: 14px 10px 6px;
  font-weight: 600;
}
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
  cursor: pointer;
  position: relative;
}
.nav-link:hover { background: oklch(1 0 0 / 0.03); color: var(--ink); }
.nav-link.active {
  background: oklch(1 0 0 / 0.05);
  color: var(--ink);
}
.nav-link.active .nav-ico { color: var(--accent); }
.nav-link.active::before {
  content: ''; position: absolute; left: -22px; top: 12px; bottom: 12px;
  width: 2px; background: var(--accent); border-radius: 2px;
  box-shadow: 0 0 8px var(--accent-glow);
}
.nav-ico {
  width: 16px; height: 16px;
  color: var(--ink-3);
  flex: 0 0 auto;
  transition: color 0.18s var(--ease);
}

.sidebar-footer {
  margin-top: auto;
  padding: 14px 8px 4px;
  border-top: 1px solid var(--hairline-soft);
  display: flex; flex-direction: column; gap: 10px;
}
.mode-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em;
  font-family: var(--mono);
  background: oklch(0.78 0.13 235 / 0.12);
  color: oklch(0.86 0.13 235);
  border: 1px solid oklch(0.78 0.13 235 / 0.22);
  width: fit-content;
}
.mode-tag .blink {
  width: 6px; height: 6px; border-radius: 50%;
  background: oklch(0.86 0.13 235);
  box-shadow: 0 0 6px oklch(0.86 0.13 235);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
/* Theme toggle in sidebar footer — cycles auto / light / dark.
   Active mode reveals exactly one icon (CSS does the swap based
   on data-theme-mode attribute on <html>). */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px; font-weight: 500;
  color: var(--ink-2);
  background: oklch(1 0 0 / 0.03);
  border: 1px solid var(--hairline-soft);
  width: fit-content;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.theme-toggle:hover {
  background: var(--surface-hi);
  color: var(--ink);
  border-color: var(--hairline);
}
.theme-icon { width: 14px; height: 14px; flex-shrink: 0; display: none; }
[data-theme-mode="auto"] .theme-toggle #theme-icon-auto { display: inline-block; }
[data-theme-mode="light"] .theme-toggle #theme-icon-light { display: inline-block; }
[data-theme-mode="dark"] .theme-toggle #theme-icon-dark { display: inline-block; }
.theme-label {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9.5px;
}
[data-theme="light"] .theme-toggle { background: oklch(0 0 0 / 0.02); }

.user-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px;
  border-radius: 8px;
}
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, oklch(0.6 0.13 285), oklch(0.55 0.13 235));
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  color: oklch(0.18 0 0);
}
.user-meta { line-height: 1.2; }
.user-meta .n { font-size: 12.5px; font-weight: 500; }
.user-meta .e { font-size: 10.5px; color: var(--ink-4); }
.user-meta .e.stale {
  color: var(--down);
  cursor: help;
  position: relative;
  padding-left: 14px;
}
.user-meta .e.stale::before {
  content: '⚠';
  position: absolute;
  left: 0;
  font-size: 11px;
}

/* ====== MAIN ====== */
.main {
  padding: 0 36px 56px;
  min-width: 0;
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0 28px;
  position: sticky; top: 0;
  background: linear-gradient(to bottom, var(--bg) 70%, transparent);
  z-index: 40;
}
.crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-3);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.crumbs .sep { opacity: 0.4; }
.crumbs .now { color: var(--ink); }

.topbar-actions {
  display: flex; align-items: center; gap: 8px;
}
.iconbtn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  color: var(--ink-3);
  transition: background 0.15s, color 0.15s;
}
.iconbtn:hover { background: oklch(1 0 0 / 0.05); color: var(--ink); }

.timestamp {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-4);
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline-soft);
}
.timestamp::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: pulse 2s infinite;
}

/* Status pill — header indicator. Click opens the Health modal. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline-soft);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.status-pill:hover { background: var(--surface-hi); color: var(--ink); }
.status-pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-3);
}
.status-pill-nominal { color: var(--up); border-color: oklch(0.85 0.19 142 / 0.3); }
.status-pill-nominal .status-pill-dot { background: var(--up); box-shadow: 0 0 6px var(--up); }
.status-pill-warning { color: oklch(0.78 0.16 75); border-color: oklch(0.78 0.16 75 / 0.4); background: oklch(0.78 0.16 75 / 0.08); }
.status-pill-warning .status-pill-dot { background: oklch(0.78 0.16 75); box-shadow: 0 0 6px oklch(0.78 0.16 75); }
.status-pill-critical { color: var(--down); border-color: oklch(0.72 0.21 22 / 0.4); background: var(--down-bg); }
.status-pill-critical .status-pill-dot { background: var(--down); box-shadow: 0 0 8px var(--down); animation: pulse 1.2s infinite; }

/* Reconciliation alarm block — surfaced inside the Health modal whenever
 * broker_total ≠ attributed_total. Same red palette as KILLED indicators. */
.recon-alarm {
  display: block;
  background: var(--down-bg);
  border: 1px solid oklch(0.72 0.21 22 / 0.4);
  border-radius: 10px;
  padding: 14px 18px;
  color: var(--down);
  margin-bottom: 18px;
  font-weight: 500;
  font-size: 13px;
}
.recon-alarm-title { display: flex; align-items: center; gap: 8px; }
.recon-alarm-detail {
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
}

/* Mode switch — Apple-style segmented */
.mode-switch {
  display: inline-flex;
  background: oklch(1 0 0 / 0.04);
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  padding: 3px;
  position: relative;
}
.mode-switch button {
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-family: var(--mono);
  color: var(--ink-3);
  border-radius: 999px;
  transition: color 0.18s var(--ease);
  position: relative; z-index: 1;
}
.mode-switch button.on { color: var(--bg); }
.mode-switch button.on.real-mode { color: oklch(0.18 0.012 255); }
.mode-switch .pill-bg {
  position: absolute; top: 3px; bottom: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  transition: transform 0.32s var(--spring), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.mode-switch.real .pill-bg {
  transform: translateX(100%);
  background: oklch(0.72 0.21 22);
  box-shadow: 0 0 12px oklch(0.72 0.21 22 / 0.35);
}

/* Real-mode subtle warning halo on hero */
body.real-mode .hero {
  border-color: oklch(0.72 0.21 22 / 0.35);
}
body.real-mode .hero::after {
  content: 'LIVE CAPITAL';
  position: absolute; top: 18px; left: 32px;
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.16em;
  color: oklch(0.72 0.21 22);
  padding: 3px 9px;
  border-radius: 999px;
  background: oklch(0.72 0.21 22 / 0.12);
  border: 1px solid oklch(0.72 0.21 22 / 0.3);
  z-index: 2;
}
body.real-mode .hero .hero-left .label { padding-top: 22px; }
body.real-mode .mode-tag {
  background: oklch(0.72 0.21 22 / 0.12);
  color: oklch(0.78 0.21 22);
  border-color: oklch(0.72 0.21 22 / 0.3);
}
body.real-mode .mode-tag .blink { background: oklch(0.78 0.21 22); box-shadow: 0 0 6px oklch(0.78 0.21 22); }

/* ====== HERO ====== */
.page-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.022em;
  margin: 0 0 4px;
}
.page-sub {
  color: var(--ink-3);
  font-size: 13.5px;
  margin: 0 0 28px;
}

/* Hero card — the showpiece */
.hero {
  position: relative;
  border-radius: var(--r-2xl);
  border: 1px solid var(--hairline);
  background:
    radial-gradient(120% 100% at 100% 0%, oklch(0.85 0.19 142 / 0.08), transparent 50%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  padding: 28px 32px;
  overflow: hidden;
  margin-bottom: 22px;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 0% 100%, oklch(0.55 0.14 235 / 0.06), transparent 60%);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  position: relative;
}
.hero-left .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-4);
  font-weight: 600;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.hero-equity {
  font-family: var(--display);
  font-size: 64px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 8px;
}
.hero-equity .currency {
  font-size: 22px;
  color: var(--ink-3);
  font-weight: 400;
  letter-spacing: 0;
}
.hero-equity .cents {
  font-size: 28px;
  color: var(--ink-3);
  font-weight: 400;
}
.hero-secondary {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--ink-3);
  display: flex; gap: 16px;
  align-items: center;
}
.hero-delta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--mono);
  background: var(--up-bg);
  color: var(--up);
  border: 1px solid oklch(0.85 0.19 142 / 0.25);
  margin-top: 18px;
}
.hero-delta.down { background: var(--down-bg); color: var(--down); border-color: oklch(0.72 0.21 22 / 0.25); }

.hero-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline-soft);
}
.meta-item .k {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  font-weight: 600;
  margin-bottom: 4px;
}
.meta-item .v {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.meta-item .v small { color: var(--ink-3); font-size: 11.5px; margin-left: 4px; }

/* Hero chart on right */
.hero-right {
  display: flex; flex-direction: column;
  position: relative;
}
.hero-chart-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.range-tabs {
  display: flex; gap: 2px;
  background: oklch(1 0 0 / 0.04);
  border-radius: 8px;
  padding: 3px;
  border: 1px solid var(--hairline-soft);
}
.range-tab {
  padding: 4px 10px;
  font-size: 11.5px;
  font-family: var(--mono);
  color: var(--ink-3);
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.18s var(--ease);
}
.range-tab.active { background: oklch(1 0 0 / 0.07); color: var(--ink); }
.range-tab:hover:not(.active) { color: var(--ink-2); }

.equity-chart { position: relative; height: 180px; }

/* ====== RETURNS TABLE ====== */
.returns-card {
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.returns-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
}
.returns-table thead th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--ink-4);
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline-soft);
  background: oklch(0.20 0.005 180 / 0.4);
}
.returns-table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline-soft);
  vertical-align: middle;
}
.returns-table tbody tr:last-child td { border-bottom: none; }
.returns-table tr.returns-divider td {
  border-top: 1px solid var(--hairline);
  background: oklch(0.18 0.005 180 / 0.3);
}
.returns-label {
  font-family: var(--sans, inherit);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-1);
  letter-spacing: -0.005em;
}
.returns-sub {
  font-family: var(--sans, inherit);
  font-size: 10.5px;
  color: var(--ink-4);
  margin-top: 2px;
}
.returns-num {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.returns-num.up { color: var(--up); }
.returns-num.down { color: var(--down); }
.returns-tag {
  font-size: 9.5px;
  font-family: var(--sans, inherit);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  margin-top: 3px;
  font-weight: 600;
}
.returns-alpha {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.returns-alpha.up { color: var(--up); }
.returns-alpha.down { color: var(--down); }

/* Compare table on Strategies page */
.returns-table.strat-compare tbody tr {
  cursor: pointer;
  transition: background 120ms ease;
}
.returns-table.strat-compare tbody tr:hover {
  background: oklch(0.22 0.01 180 / 0.4);
}
.returns-table.strat-compare td {
  font-family: var(--sans, inherit);
}

/* ====== BENCHMARK CARD ====== */
.bench-card {
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  padding: 22px 22px 18px;
}
.bench-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.bench-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-4); font-weight: 600; margin-bottom: 6px;
}
.bench-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
.bench-sub { color: var(--ink-3); font-size: 12.5px; margin: 0; }
.bench-body {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 24px;
  align-items: stretch;
}
.bench-chart { min-width: 0; }
.bench-legend {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--hairline-soft);
  padding-left: 18px;
}
.bench-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px 10px 4px;
  border-radius: 8px;
  cursor: default;
  transition: background 120ms ease;
}
.bench-row:hover, .bench-row.hover {
  background: oklch(0.22 0.01 180 / 0.4);
}
.bench-row.you {
  background: var(--accent-dim);
}
.bench-row.you.hover, .bench-row.you:hover {
  background: oklch(from var(--accent) l c h / 0.18);
}
.bench-row-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bench-dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--surface);
}
.bench-name { font-size: 13px; font-weight: 600; color: var(--ink-1); }
.bench-row.you .bench-name { color: var(--accent); }
.bench-meta { font-size: 10.5px; color: var(--ink-4); margin-top: 1px; }
.bench-row-r { text-align: right; flex-shrink: 0; }
.bench-ret {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.bench-ret.up { color: var(--up); }
.bench-ret.down { color: var(--down); }
.bench-alpha {
  font-family: var(--mono);
  font-size: 10.5px;
  margin-top: 2px;
  opacity: 0.75;
}
.bench-alpha.up { color: var(--up); }
.bench-alpha.down { color: var(--down); }

/* Halt banner — top of strategy detail page when halt_state.halted=true.
   Surfaces the why + recovery condition (badge alone said HALTED, nothing
   else). Per finance-analyst review 2026-05-06. */
.halt-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 22px;
  background: var(--down-bg);
  border: 1px solid oklch(0.72 0.21 22 / 0.4);
  border-radius: var(--r-lg);
  margin-bottom: 18px;
}
.halt-banner-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: oklch(0.72 0.21 22 / 0.18);
  display: grid; place-items: center;
  font-size: 16px;
}
.halt-banner-title {
  font-size: 14px; font-weight: 600;
  color: var(--down);
  margin-bottom: 4px;
}
.halt-banner-text {
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-2);
}

/* Warmup banner inside benchmark card — surfaces statistical-noise warning
   when youngest live strategy is <14 days old. Honesty pattern — hides α
   numbers during warmup so user doesn't anchor on noise. */
.bench-warmup-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--warn-bg);
  border: 1px solid oklch(0.82 0.16 75 / 0.30);
  border-radius: var(--r);
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.45;
}
.bench-warmup-banner strong { color: var(--warn); font-weight: 600; }
.bench-warmup-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: oklch(0.82 0.16 75 / 0.18);
  color: var(--warn);
  display: grid; place-items: center;
  font-size: 13px;
  font-weight: 700;
}

/* ====== KPI ROW ====== */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 18px;
  margin-bottom: 28px;
}
.kpi {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 16px 18px;
  position: relative;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.kpi:hover { border-color: var(--hairline); }
.kpi .lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  font-weight: 600;
  margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.kpi .lbl .ico { color: var(--ink-3); width: 14px; height: 14px; }
.kpi .val {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px;
}
.kpi .val small { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.kpi .sub {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 6px;
  display: flex; align-items: center; gap: 6px;
}
.kpi .spark { margin-top: 12px; height: 28px; }

/* ====== SECTIONS ====== */
.section {
  margin-bottom: 28px;
}
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 2px;
}
.section-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0;
}
.section-sub {
  font-size: 12px;
  color: var(--ink-3);
  margin: 2px 0 0;
}
.section-actions { display: flex; gap: 6px; }

.btn-ghost {
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid var(--hairline-soft);
  color: var(--ink-2);
  background: oklch(1 0 0 / 0.02);
  transition: all 0.15s var(--ease);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--hairline); background: oklch(1 0 0 / 0.05); }

/* ====== STRATEGY CARDS ====== */
.strat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.strat {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  background: var(--surface);
  position: relative;
  cursor: pointer;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease), background 0.22s var(--ease);
  overflow: hidden;
}
.strat:hover { border-color: var(--hairline); background: var(--surface-hi); }
.strat-head {
  display: flex; justify-content: space-between; align-items: start;
  margin-bottom: 14px;
}
.strat-head .nm {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0 0 3px;
}
.strat-head .sl {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.starting-cap {
  color: var(--ink-2);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.tone-dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block; margin-right: 8px;
  vertical-align: middle;
}
.tone-lime { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.tone-violet { background: oklch(0.7 0.18 290); box-shadow: 0 0 8px oklch(0.7 0.18 290 / 0.3); }
.tone-amber { background: oklch(0.82 0.16 75); box-shadow: 0 0 8px oklch(0.82 0.16 75 / 0.3); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--mono);
  border: 1px solid var(--hairline-soft);
  color: var(--ink-3);
  background: oklch(1 0 0 / 0.03);
}
.badge.warmup { color: oklch(0.82 0.16 75); border-color: oklch(0.82 0.16 75 / 0.3); background: var(--warn-bg); }
.badge.on-track { color: var(--up); border-color: oklch(0.85 0.19 142 / 0.3); background: var(--up-bg); }
.badge.lagging { color: oklch(0.82 0.16 75); border-color: oklch(0.82 0.16 75 / 0.3); background: var(--warn-bg); }
.badge.under { color: var(--down); border-color: oklch(0.72 0.21 22 / 0.3); background: var(--down-bg); }
.badge.ahead { color: var(--up); border-color: oklch(0.85 0.19 142 / 0.4); background: var(--up-bg); }

.strat-spark { height: 44px; margin: 6px 0 14px; }
.strat-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  font-family: var(--mono);
}
.strat-stats.strat-stats-4 {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 12px;
}
.stat .k {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  font-weight: 600;
  margin-bottom: 3px;
}
.stat .v { font-size: 13px; color: var(--ink); }
.stat .v.up { color: var(--up); }
.stat .v.down { color: var(--down); }
.stat .v.muted { color: var(--ink-3); }
.pending-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--warn-bg);
  color: oklch(0.86 0.16 75);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--mono);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.pending-pill:empty { display: none; }

/* ====== TABLE ====== */
.tbl-wrap {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--surface);
}
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.tbl th, .tbl td {
  padding: 11px 16px;
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tbl th:first-child, .tbl td:first-child { text-align: left; padding-left: 20px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 20px; }
.tbl thead th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  font-weight: 600;
  font-family: var(--sans);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-2);
  padding-top: 13px; padding-bottom: 13px;
}
.tbl tbody tr {
  border-bottom: 1px solid var(--hairline-soft);
  transition: background 0.12s var(--ease);
}
.tbl tbody tr:last-child { border-bottom: 0; }
.tbl tbody tr:hover { background: oklch(1 0 0 / 0.02); }
.tbl .side {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
}
.tbl .side.buy { color: var(--up); background: var(--up-bg); }
.tbl .side.sell { color: var(--down); background: var(--down-bg); }

/* ====== HEALTH ====== */
.health-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 14px;
}
.svc-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.svc {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline-soft);
}
.svc:last-child { border-bottom: 0; }
.svc-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: oklch(1 0 0 / 0.04);
  border: 1px solid var(--hairline-soft);
  display: grid; place-items: center;
  color: var(--accent);
  flex: 0 0 auto;
}
.svc-meta { flex: 1; min-width: 0; }
.svc-meta .n { font-size: 13.5px; font-weight: 500; }
.svc-meta .d {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  margin-top: 2px;
}
.svc-status {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--up);
  display: flex; align-items: center; gap: 6px;
}
.svc-status::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 8px var(--accent-glow);
}

/* Risk panel */
.risk-card {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 20px 22px;
}
.gauge-row {
  display: flex; align-items: center; gap: 18px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.gauge-row:last-child { border-bottom: 0; }
.gauge-row .lbl {
  flex: 0 0 130px;
  font-size: 11.5px;
  color: var(--ink-3);
}
.gauge-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: oklch(1 0 0 / 0.05);
  overflow: hidden;
  position: relative;
}
.gauge-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: 2px;
}
.gauge-fill.warn { background: linear-gradient(90deg, oklch(0.82 0.16 75), oklch(0.85 0.19 60)); }
.gauge-fill.danger { background: linear-gradient(90deg, var(--down), oklch(0.78 0.22 18)); }
.gauge-row .v {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  flex: 0 0 70px;
  text-align: right;
}

/* ====== STRATEGY DETAIL ====== */
.detail-head {
  border: 1px solid var(--hairline);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(80% 100% at 100% 0%, oklch(0.85 0.19 142 / 0.08), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  padding: 26px 30px;
  margin-bottom: 18px;
}
.detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}

.list-card {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 18px 20px;
}
.list-card h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0 0 14px;
}
.kv-list { display: flex; flex-direction: column; }
.kv-row {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 12.5px;
}
.kv-row:last-child { border-bottom: 0; }
.kv-row .k { color: var(--ink-3); }
.kv-row .v { font-family: var(--mono); }

.position-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: oklch(1 0 0 / 0.03);
  margin-right: 6px; margin-bottom: 6px;
}
.position-pill .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 4px var(--accent-glow);
}

/* ====== TWEAKS PANEL OVERRIDES ====== */
.tw-panel { z-index: 100; }

/* ====== SCROLLBAR ====== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: oklch(0.3 0.012 255 / 0.6);
  border-radius: 8px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: oklch(0.4 0.012 255 / 0.8); }

/* Responsive */
@media (max-width: 1100px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .kpi-strip { grid-template-columns: repeat(3, 1fr); }   /* was 5 — squashed cells fix */
  .hero-grid { grid-template-columns: 1fr; }
  .health-grid { grid-template-columns: 1fr; }
  .bench-body { grid-template-columns: 1fr; }
  .bench-legend { border-left: none; border-top: 1px solid var(--hairline-soft); padding-left: 0; padding-top: 12px; }
  .detail-grid { grid-template-columns: 1fr; }
  .hard-limits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .hard-limits-grid { grid-template-columns: 1fr; }
  .hero-meta { grid-template-columns: 1fr; }
}
/* Pre-phase-9 collapse: sidebar hidden between phone-strip (768) and a
 * narrow tablet width. Phone strip is handled by the @768 block lower
 * down. */
@media (max-width: 840px) and (min-width: 769px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: 0 18px 40px; }
}


/* ============================================================
   Backend-shape additions: workers, source tags, filter bar,
   phase tags, reconciliation card, orphan pills
   ============================================================ */

/* Source tag (alpaca / mtm) — small inline label next to "Unrealized" */
.src-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 3px;
  background: oklch(0.32 0.013 255 / 0.6);
  color: var(--ink-3);
  vertical-align: middle;
  border: 1px solid var(--hairline-soft);
}

/* Worker cards — Strategi-lab */
.worker-card {
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.18s var(--ease);
}
.worker-card:hover { border-color: var(--hairline); }
.worker-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.worker-id {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.worker-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px oklch(0.85 0.19 142 / 0.5);
  animation: pulse-dot 2s ease-in-out infinite;
}
.worker-pulse.stale {
  background: oklch(0.65 0.16 50);
  box-shadow: 0 0 8px oklch(0.65 0.16 50 / 0.5);
  animation: none;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.worker-active {
  padding: 10px 12px;
  background: oklch(1 0 0 / 0.025);
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-soft);
}
.worker-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.worker-stats .k {
  font-size: 10px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.worker-stats .v {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}

/* Filter bar — Backtests */
.filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.filter-group label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  font-weight: 500;
}
.filter-group select,
.filter-group input {
  background: oklch(0.155 0.015 255);
  border: 1px solid var(--hairline);
  color: var(--ink);
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-family: inherit;
  min-width: 160px;
  transition: border-color 0.15s var(--ease);
}
.filter-group select:focus,
.filter-group input:focus {
  outline: none;
  border-color: var(--accent);
}
.filter-group input { min-width: 220px; }
.filter-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
  padding-bottom: 8px;
}
.filter-toggle input {
  accent-color: var(--accent);
  width: 14px; height: 14px;
  cursor: pointer;
}

/* Phase tag — Backtests */
.phase-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 3px;
  background: oklch(0.32 0.013 255 / 0.5);
  color: var(--ink-2);
  border: 1px solid var(--hairline-soft);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Reconciliation card */
.recon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.6fr;
  gap: 24px;
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  padding: 22px 26px;
}
.recon-stat .k {
  font-size: 10px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.recon-stat .v {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
}
.recon-stat .sub {
  font-size: 11px;
  color: var(--ink-4);
  margin-top: 4px;
}
.recon-orphans {
  border-left: 1px solid var(--hairline-soft);
  padding-left: 24px;
}
.recon-orphans .k {
  font-size: 10px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.orphan-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  background: oklch(0.65 0.16 50 / 0.1);
  border: 1px solid oklch(0.65 0.16 50 / 0.3);
  color: oklch(0.78 0.14 60);
  border-radius: 999px;
}
.orphan-pill .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: oklch(0.72 0.18 55);
}

/* ====== RISK: Hard limits grid ====== */
.hard-limits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.hard-limit {
  padding: 22px 26px;
  border-right: 1px solid var(--hairline-soft);
}
.hard-limit:last-child { border-right: 0; }
.hard-limit .k {
  font-size: 10px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 10px;
}
.hard-limit .v {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink-1);
  line-height: 1.1;
  margin-bottom: 8px;
}
.hard-limit .sub {
  font-size: 11px;
  color: var(--ink-4);
}

/* Risk: Limit utilization wrapper — give gauges room */
.limit-util {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 14px 26px;
}

/* ====== TRADES: toolbar (tabs + filters) ====== */
.trades-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 22px 0 14px;
  flex-wrap: wrap;
}
.tab-strip {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  padding: 4px;
  gap: 2px;
}
.tab-strip .tab {
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: calc(var(--r-lg) - 4px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.12s var(--ease);
  font-family: inherit;
}
.tab-strip .tab:hover { color: var(--ink-1); background: oklch(1 0 0 / 0.025); }
.tab-strip .tab.active {
  background: oklch(1 0 0 / 0.06);
  color: var(--ink-1);
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
}
.tab-strip .tab.tone-warn.active {
  color: oklch(0.82 0.16 75);
  box-shadow: inset 0 0 0 1px oklch(0.82 0.16 75 / 0.35);
  background: var(--warn-bg, oklch(0.82 0.16 75 / 0.08));
}
.tab-strip .tab .tab-count {
  font-size: 10px;
  color: var(--ink-4);
  background: oklch(1 0 0 / 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.tab-strip .tab.active .tab-count { color: var(--ink-2); background: oklch(1 0 0 / 0.08); }

.trades-filters { display: flex; gap: 8px; align-items: center; }
.input-wrap { position: relative; }
.search-input, .select-input {
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  color: var(--ink-1);
  font-size: 12px;
  padding: 7px 12px;
  border-radius: var(--r-lg);
  outline: none;
  font-family: var(--mono);
  min-width: 0;
}
.search-input { width: 220px; }
.search-input::placeholder { color: var(--ink-4); }
.search-input:focus, .select-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.select-input { min-width: 180px; cursor: pointer; appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

.empty-state {
  border: 1px dashed var(--hairline-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-4);
  font-size: 13px;
}

/* ====== TRADES: expandable rows ====== */
.tbl-trades .trade-row { cursor: pointer; transition: background 0.12s var(--ease); }
.tbl-trades .trade-row.open { background: oklch(1 0 0 / 0.03); }
.tbl-trades .trade-caret { padding-left: 14px !important; padding-right: 0 !important; width: 24px; }
.tbl-trades .trade-caret .caret {
  display: inline-block;
  color: var(--ink-4);
  font-size: 10px;
  transition: transform 0.18s var(--ease);
}
.tbl-trades .trade-caret .caret.open { transform: rotate(90deg); color: var(--accent); }
.trade-detail-row td {
  padding: 0 !important;
  background: oklch(0 0 0 / 0.25);
  border-bottom: 1px solid var(--hairline-soft);
}
.why-btn {
  background: transparent;
  border: 1px solid var(--hairline-soft);
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  font-family: var(--mono);
  transition: all 0.12s var(--ease);
}
.why-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ====== ORDER TIMELINE ====== */
.order-timeline {
  padding: 18px 26px 22px 56px;
  border-left: 2px solid var(--accent);
}
.order-timeline-head {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 11px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--hairline-soft);
}
.otl-id { color: var(--ink-1); font-weight: 600; font-size: 12px; }
.otl-coid { color: var(--ink-4); }
.otl-total { color: var(--ink-3); margin-left: auto; }

.otl-steps { display: flex; flex-direction: column; gap: 0; }
.otl-step { display: flex; gap: 14px; align-items: stretch; }
.otl-marker { display: flex; flex-direction: column; align-items: center; flex: 0 0 22px; padding-top: 2px; }
.otl-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0 0 0 / 0.5);
  border: 1px solid currentColor;
  font-size: 11px;
  font-weight: 700;
}
.otl-line {
  flex: 1;
  width: 1px;
  background: var(--hairline-soft);
  margin: 4px 0;
  min-height: 18px;
}
.otl-body { flex: 1; padding-bottom: 16px; }
.otl-step-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.otl-step-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-1);
  min-width: 80px;
}
.otl-ts { font-size: 10.5px; color: var(--ink-4); }
.otl-dt { font-size: 10.5px; }
.otl-note { font-size: 12px; color: var(--ink-3); line-height: 1.45; font-family: var(--mono); }

/* ====== BLOCKED ORDERS ====== */
.reason-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid;
  white-space: nowrap;
}
.reason-pill.sev-info  { color: oklch(0.78 0.13 215); border-color: oklch(0.78 0.13 215 / 0.3); background: oklch(0.78 0.13 215 / 0.08); }
.reason-pill.sev-warn  { color: oklch(0.82 0.16 75);  border-color: oklch(0.82 0.16 75 / 0.35); background: oklch(0.82 0.16 75 / 0.08); }
.reason-pill.sev-error { color: var(--down); border-color: oklch(0.72 0.21 22 / 0.35); background: var(--down-bg); }

/* ====== LOG TAIL ====== */
.logtail {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.logtail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--hairline-soft);
  background: oklch(0 0 0 / 0.2);
}
.logtail-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-1);
}
.logtail-title .tail-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-4);
}
.logtail-title .tail-dot.on {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: tail-pulse 1.6s var(--ease) infinite;
}
@keyframes tail-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.logtail-count { font-size: 10.5px; color: var(--ink-4); font-weight: 400; margin-left: 6px; }

.logtail-filters { display: flex; gap: 4px; align-items: center; }
.sev-btn, .tail-btn {
  background: transparent;
  border: 1px solid var(--hairline-soft);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s var(--ease);
}
.sev-btn:hover, .tail-btn:hover { color: var(--ink-1); border-color: var(--ink-3); }
.sev-btn.active.sev-all   { color: var(--ink-1); border-color: var(--ink-2); background: oklch(1 0 0 / 0.05); }
.sev-btn.active.sev-info  { color: oklch(0.78 0.13 215); border-color: oklch(0.78 0.13 215 / 0.45); background: oklch(0.78 0.13 215 / 0.08); }
.sev-btn.active.sev-warn  { color: oklch(0.82 0.16 75);  border-color: oklch(0.82 0.16 75 / 0.45);  background: oklch(0.82 0.16 75 / 0.08); }
.sev-btn.active.sev-error { color: var(--down); border-color: oklch(0.72 0.21 22 / 0.45); background: var(--down-bg); }
.tail-btn.on { color: var(--accent); border-color: oklch(0.85 0.19 142 / 0.45); background: var(--accent-dim); }

.logtail-body {
  max-height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: var(--mono);
  font-size: 11.5px;
}
.logtail-body::-webkit-scrollbar { width: 8px; }
.logtail-body::-webkit-scrollbar-thumb { background: var(--hairline-soft); border-radius: 4px; }

.log-line {
  display: grid;
  grid-template-columns: 130px 56px 80px 130px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding: 6px 18px;
  border-bottom: 1px solid oklch(1 0 0 / 0.025);
  cursor: pointer;
  transition: background 0.1s var(--ease);
  min-width: 0;
}
.log-line:hover { background: oklch(1 0 0 / 0.02); }
.log-line.open { background: oklch(1 0 0 / 0.035); }
.log-ts { color: var(--ink-3); font-size: 10.5px; }
.log-sev {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 1px 6px;
  border-radius: 3px;
  background: oklch(1 0 0 / 0.04);
}
.log-sev.sev-info  { color: oklch(0.78 0.13 215); }
.log-sev.sev-warn  { color: oklch(0.82 0.16 75); background: oklch(0.82 0.16 75 / 0.1); }
.log-sev.sev-error { color: var(--down); background: var(--down-bg); }
.log-sev.sev-debug { color: var(--ink-4); }
.log-source { color: var(--accent); font-size: 10.5px; }
.log-strat { color: var(--ink-3); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-msg { color: var(--ink-1); font-weight: 500; font-size: 11px; }
.log-msg-block { display: flex; align-items: baseline; gap: 12px; min-width: 0; overflow: hidden; }
.log-msg-block .log-msg { flex: 0 0 auto; }
.log-msg-block .log-payload-preview { flex: 1; min-width: 0; }
.log-payload-preview { color: var(--ink-4); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-payload-full {
  grid-column: 1 / -1;
  margin: 8px 0 4px;
  padding: 12px 14px;
  background: oklch(0 0 0 / 0.4);
  border: 1px solid var(--hairline-soft);
  border-radius: 6px;
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
}


/* ====== WHY DRAWER ====== */
.why-overlay {
  position: fixed; inset: 0;
  background: oklch(0 0 0 / 0.55);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex; justify-content: flex-end;
  animation: why-fade 0.18s var(--ease);
}
@keyframes why-fade { from { opacity: 0; } to { opacity: 1; } }
.why-drawer {
  width: min(620px, 92vw);
  height: 100vh;
  background: var(--bg-1);
  border-left: 1px solid var(--hairline);
  box-shadow: -24px 0 60px oklch(0 0 0 / 0.4);
  display: flex; flex-direction: column;
  animation: why-slide 0.24s var(--ease);
}
@keyframes why-slide { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.why-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--hairline-soft);
}
.why-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-4); font-weight: 600; margin-bottom: 6px;
}
.why-title { font-size: 22px; color: var(--ink-1); display: flex; align-items: center; }
.why-sub { font-size: 11px; color: var(--ink-4); margin-top: 6px; }
.why-close {
  background: oklch(1 0 0 / 0.04); border: 1px solid var(--hairline-soft);
  color: var(--ink-3); width: 28px; height: 28px; border-radius: 6px;
  font-size: 12px; cursor: pointer; transition: all 0.15s var(--ease);
}
.why-close:hover { background: oklch(1 0 0 / 0.08); color: var(--ink-1); }

.why-body { flex: 1; overflow-y: auto; padding: 8px 24px 24px; }
.why-body::-webkit-scrollbar { width: 8px; }
.why-body::-webkit-scrollbar-thumb { background: var(--hairline-soft); border-radius: 4px; }

.why-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.why-section:last-of-type { border-bottom: none; }
.why-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.why-kicker {
  font-size: 11px; color: var(--accent); font-weight: 600;
  letter-spacing: 0.04em;
}
.why-section-meta { font-size: 10.5px; color: var(--ink-4); }

/* Confidence */
.why-conf-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.why-conf-label { font-size: 12px; color: var(--ink-2); }
.why-conf-val { font-size: 18px; font-weight: 600; color: var(--ink-1); }
.why-conf-bar {
  position: relative; height: 8px; border-radius: 4px;
  background: oklch(1 0 0 / 0.05); overflow: hidden;
}
.why-conf-fill {
  height: 100%; background: linear-gradient(90deg, oklch(0.78 0.13 215), var(--accent));
  border-radius: 4px;
}
.why-conf-tick {
  position: absolute; top: -2px; bottom: -2px; width: 1.5px;
  background: oklch(1 0 0 / 0.3);
}
.why-conf-meta {
  display: flex; justify-content: space-between;
  font-size: 10.5px; margin-top: 6px;
}
.why-signal-note {
  margin-top: 12px; padding: 10px 12px;
  background: oklch(1 0 0 / 0.025); border-left: 2px solid var(--accent);
  font-size: 11.5px; color: var(--ink-2); line-height: 1.5;
}

/* Features */
.why-features { display: flex; flex-direction: column; gap: 8px; }
.why-feat {
  display: grid;
  grid-template-columns: 160px 1fr 40px 110px;
  align-items: center; gap: 12px;
  font-size: 11.5px;
}
.why-feat-name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.why-feat-bar {
  height: 6px; background: oklch(1 0 0 / 0.04);
  border-radius: 3px; overflow: hidden;
}
.why-feat-fill { height: 100%; border-radius: 3px; transition: width 0.3s var(--ease); }
.why-feat-fill.sign-pos { background: var(--up); }
.why-feat-fill.sign-neg { background: var(--down); }
.why-feat-fill.sign-neu { background: oklch(0.65 0.05 240); }
.why-feat-imp { text-align: right; color: var(--ink-3); font-size: 11px; }
.why-feat-val { color: var(--ink-1); text-align: right; font-size: 11px; }

.why-feat-legend {
  display: flex; gap: 16px; margin-top: 12px;
  font-size: 10.5px; color: var(--ink-4);
}
.why-feat-legend .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px;
  vertical-align: middle;
}
.why-feat-legend .dot.pos { background: var(--up); }
.why-feat-legend .dot.neg { background: var(--down); }
.why-feat-legend .dot.neu { background: oklch(0.65 0.05 240); }

/* Validator */
.why-validator { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.why-vdec {
  font-size: 10.5px; font-weight: 700; padding: 4px 10px;
  border-radius: 4px; letter-spacing: 0.08em;
}
.why-vdec.pass { color: var(--up); background: var(--up-bg); border: 1px solid oklch(0.85 0.19 142 / 0.3); }
.why-vdec.fail { color: var(--down); background: var(--down-bg); border: 1px solid oklch(0.7 0.2 25 / 0.3); }
.why-vnote { font-size: 11.5px; color: var(--ink-3); flex: 1; }

.why-checks { display: flex; flex-direction: column; gap: 6px; }
.why-check {
  display: grid; grid-template-columns: 18px 160px 1fr;
  align-items: center; gap: 10px;
  font-size: 11px;
}
.why-check-dot {
  width: 16px; height: 16px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
}
.why-check-dot.ok { color: var(--up); background: var(--up-bg); }
.why-check-dot.fail { color: var(--down); background: var(--down-bg); }
.why-check-k { color: var(--ink-2); }
.why-check-v { color: var(--ink-4); font-size: 10.5px; }

/* Execution */
.why-exec-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft); border-radius: var(--r-md);
  overflow: hidden;
}
.why-exec-cell {
  background: var(--bg-1); padding: 12px 14px;
}
.why-exec-label { font-size: 10px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; }
.why-exec-val { font-size: 14px; color: var(--ink-1); }

.why-close-note {
  padding: 10px 12px;
  background: oklch(1 0 0 / 0.025); border-left: 2px solid var(--ink-3);
  font-size: 11.5px; color: var(--ink-2); line-height: 1.5;
}

.why-foot {
  display: flex; justify-content: center; gap: 10px;
  padding-top: 18px; font-size: 10.5px; color: var(--ink-4);
}


/* ====== ANALYTICS ====== */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 18px;
}
.kpi-cell {
  background: var(--surface);
  padding: 14px 14px;
  min-width: 0;
}
.kpi-k {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-4); font-weight: 600; margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-v {
  font-size: 19px; font-weight: 600; color: var(--ink-1);
  letter-spacing: -0.01em; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-s { font-size: 10px; color: var(--ink-4); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 14px;
}
.section-title h3 {
  font-size: 16px; font-weight: 600; color: var(--ink-1);
  margin: 0;
}
.section-kicker {
  display: block; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--ink-4); font-weight: 600;
  margin-bottom: 4px;
}
.section-meta { font-size: 11px; color: var(--ink-4); }

.agg-toggle { display: flex; gap: 0; border: 1px solid var(--hairline-soft); border-radius: var(--r-md); overflow: hidden; }
.agg-toggle .tab {
  padding: 7px 14px; font-size: 11px; font-weight: 500;
  background: transparent; border: none; color: var(--ink-3);
  cursor: pointer; transition: all 0.12s var(--ease);
  font-family: var(--mono);
  border-right: 1px solid var(--hairline-soft);
}
.agg-toggle .tab:last-child { border-right: none; }
.agg-toggle .tab:hover { background: oklch(1 0 0 / 0.03); color: var(--ink-1); }
.agg-toggle .tab.active { background: var(--accent-dim); color: var(--accent); }

/* Slippage cards */
.slip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.slip-card {
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  padding: 16px;
}
.slip-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
.slip-strat { font-size: 12px; color: var(--ink-1); font-weight: 600; }
.slip-n { font-size: 10.5px; color: var(--ink-4); }
.slip-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
  margin-bottom: 14px;
}
.slip-stat { display: flex; flex-direction: column; gap: 3px; }
.slip-stat .lab {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-4); font-weight: 600;
}
.slip-stat .val { font-size: 13px; font-weight: 500; color: var(--ink-1); }
.slip-hist {
  display: flex; align-items: flex-end; justify-content: space-between;
  height: 64px; gap: 2px; margin-bottom: 6px;
  padding: 0 2px;
}
.slip-bar {
  flex: 1; min-width: 4px; border-radius: 1px;
  transition: height 0.3s var(--ease);
}
.slip-bar.good { background: oklch(0.85 0.19 142 / 0.7); }
.slip-bar.bad  { background: oklch(0.7 0.2 25 / 0.55); }
.slip-axis {
  display: flex; justify-content: space-between;
  font-size: 9.5px; color: var(--ink-4);
  padding: 0 2px;
}

/* PnL aggregates */
.pnl-agg {
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  padding: 8px 0;
}
.pnl-row {
  display: grid;
  grid-template-columns: 140px 1fr 110px 130px;
  align-items: center; gap: 14px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--hairline-soft);
}
.pnl-row:last-child { border-bottom: none; }
.pnl-key { font-size: 11.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnl-track {
  position: relative; height: 14px; min-width: 0;
  background: oklch(1 0 0 / 0.025); border-radius: 3px;
}
.pnl-mid {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: var(--hairline);
}
.pnl-bar { position: absolute; top: 1px; bottom: 1px; border-radius: 2px; }
.pnl-bar.pos { background: linear-gradient(90deg, oklch(0.85 0.19 142 / 0.4), var(--up)); }
.pnl-bar.neg { background: linear-gradient(270deg, oklch(0.7 0.2 25 / 0.4), var(--down)); }
.pnl-val { font-size: 12.5px; font-weight: 600; text-align: right; }
.pnl-meta { font-size: 10.5px; text-align: right; }

/* Holding histogram */
.hold-hist {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  padding: 18px 18px 14px;
}
.hold-bin {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
}
.hold-bar-wrap {
  position: relative;
  width: 100%; height: 140px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end;
}
.hold-bar-val {
  font-size: 11px; color: var(--ink-2); margin-bottom: 4px;
  font-weight: 600;
}
.hold-bar {
  width: 80%;
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: height 0.4s var(--ease);
}
.hold-label { font-size: 11px; color: var(--ink-2); font-weight: 500; }
.hold-pnl { font-size: 10.5px; }
.hold-wr { font-size: 9.5px; }

/* ====== STRATEGIES (LIVE TAB) ====== */
.strat-summary-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 14px 22px;
  gap: 18px;
  border-bottom: 1px solid var(--hairline-soft);
  background: var(--surface-hi);
}
.strat-summary-row > div { min-width: 0; }
.strat-summary-row .k {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  margin-bottom: 4px;
}
.strat-summary-row .v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-1);
}
.strat-summary-row .s {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 2px;
}

.bl-sharpe-col, .bl-sharpe-cell {
  color: var(--ink-4);
  font-weight: 400;
}

/* ====== SIDE PANEL (slide-out from right) ====== */
.side-panel-overlay {
  position: fixed; inset: 0;
  background: oklch(0 0 0 / 0.55);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex; justify-content: flex-end;
  animation: side-panel-fade 0.18s var(--ease);
}
@keyframes side-panel-fade { from { opacity: 0; } to { opacity: 1; } }
.side-panel {
  width: min(540px, 92vw);
  height: 100vh;
  background: var(--bg-1);
  border-left: 1px solid var(--hairline);
  box-shadow: -24px 0 60px oklch(0 0 0 / 0.4);
  display: flex; flex-direction: column;
  animation: side-panel-slide 0.24s var(--ease);
}
@keyframes side-panel-slide { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.side-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--hairline-soft);
}
.side-panel-title { font-size: 18px; font-weight: 600; color: var(--ink-1); }
.side-panel-close {
  background: oklch(1 0 0 / 0.04); border: 1px solid var(--hairline-soft);
  color: var(--ink-3); width: 28px; height: 28px; border-radius: 6px;
  font-size: 12px; cursor: pointer; transition: all 0.15s var(--ease);
}
.side-panel-close:hover { background: oklch(1 0 0 / 0.08); color: var(--ink-1); }
.side-panel-body { flex: 1; overflow-y: auto; padding: 18px 24px 24px; }

.panel-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-4); font-weight: 600; margin-bottom: 6px;
}
.panel-title {
  font-size: 22px; color: var(--ink-1); font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
.panel-sub {
  font-size: 11.5px; color: var(--ink-3); margin-top: 6px;
  letter-spacing: 0.02em;
}
.panel-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 22px 0 18px;
}
.panel-stats > div { padding: 10px 14px; background: var(--surface); border: 1px solid var(--hairline-soft); border-radius: 8px; }
.panel-stats .k {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-4); margin-bottom: 6px;
}
.panel-stats .v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 16px; font-weight: 600;
}
.panel-spark-wrap { margin-bottom: 18px; }
.panel-spark-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-4); margin-bottom: 8px;
}
.panel-spark { background: var(--surface); border-radius: 8px; padding: 12px; }
.panel-cta {
  display: inline-block; margin-top: 6px;
  padding: 8px 14px; background: var(--accent-bg, var(--surface-hi));
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--accent); font-size: 12px; font-weight: 600;
  text-decoration: none;
}
.panel-cta:hover { background: var(--surface); border-color: var(--accent); }

/* ====== STRATEGY DETAIL (phase 5) ====== */
.detail-head-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px;
}
.detail-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-4); margin-bottom: 6px;
}
.detail-title { margin: 0 0 12px; }
.detail-status-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.detail-return-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-4); margin-bottom: 4px;
}
.detail-return-value { font-size: 42px; }

.live-badge {
  background: var(--up-bg);
  color: var(--up);
  border-color: oklch(0.85 0.19 142 / 0.3);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Heartbeat pill — colour by age band per spec 5.5 */
.hb-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  border: 1px solid var(--hairline-soft);
  background: var(--surface);
  color: var(--ink-3);
}
.hb-pill .hb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-4);
}
.hb-live { color: var(--up); border-color: oklch(0.85 0.19 142 / 0.3); }
.hb-live .hb-dot { background: var(--up); box-shadow: 0 0 5px var(--up); animation: pulse 2s infinite; }
.hb-delayed { color: oklch(0.78 0.16 75); border-color: oklch(0.78 0.16 75 / 0.4); }
.hb-delayed .hb-dot { background: oklch(0.78 0.16 75); box-shadow: 0 0 5px oklch(0.78 0.16 75); }
.hb-stale { color: var(--down); border-color: oklch(0.72 0.21 22 / 0.4); }
.hb-stale .hb-dot { background: var(--down); box-shadow: 0 0 6px var(--down); }

/* Honest empty state — used when equity curve has too few points or
 * when analytics row has too few trades. Replaces the misleading
 * flat-line-with-dot rendering. */
.honest-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  color: var(--ink-3);
  gap: 8px;
}
.empty-state-icon { font-size: 28px; opacity: 0.7; }
.empty-state-title {
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  letter-spacing: -0.01em;
}
.empty-state-sub { font-size: 12px; color: var(--ink-3); max-width: 480px; }

/* Collapsible rules section (Filters & conditions) */
.rules-collapsible {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-top: 14px;
  overflow: hidden;
}
.rules-collapsible summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-2);
  font-size: 13px; font-weight: 600;
  user-select: none;
}
.rules-collapsible summary::-webkit-details-marker { display: none; }
.rules-collapsible summary::before {
  content: '▸';
  color: var(--ink-4);
  font-size: 11px;
  transition: transform 0.15s var(--ease);
}
.rules-collapsible[open] summary::before { transform: rotate(90deg); }
.rules-collapsible-icon {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  color: var(--ink-3);
}
.rules-collapsible-meta {
  margin-left: auto;
  font-size: 11px; font-weight: 400;
  color: var(--ink-4);
}
.rules-collapsible-body { padding: 0 18px 18px; }

/* ====== OVERVIEW (phase 8) ====== */
.hero-unified { padding: 28px 30px 26px; }
.hero-unified-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 14px;
}
.hero-unified-l { min-width: 0; }
.hero-unified-r {
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  min-width: 0;
}

.warmup-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  background: oklch(0.78 0.16 75 / 0.12);
  color: oklch(0.85 0.16 75);
  border: 1px solid oklch(0.78 0.16 75 / 0.3);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: help;
  vertical-align: middle;
  margin-left: 8px;
  outline: none;
}
.warmup-badge:focus-visible {
  box-shadow: 0 0 0 2px oklch(0.78 0.16 75 / 0.4);
}

/* Daily-returns strip — small chips above the hero card */
.bench-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px;
  margin: 10px 0 16px;
}
.bench-strip-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  margin-right: 4px;
}
.bench-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  font-size: 11.5px;
  font-family: var(--mono);
}
.bench-chip-name {
  color: var(--ink-3);
  font-weight: 600;
}
.bench-chip-val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.bench-chip-val.up { color: var(--up); }
.bench-chip-val.down { color: var(--down); }
.bench-chip-val.null { color: var(--ink-4); }

/* Period-label after the hero delta (e.g. "▲ $70.85 (+0.71%) today") */
.period-label {
  margin-left: 6px;
  color: var(--ink-3);
  font-weight: 400;
  font-size: 0.85em;
  letter-spacing: 0.04em;
}

.mode-toggle {
  display: inline-flex;
  background: oklch(1 0 0 / 0.04);
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  padding: 3px;
}
.mode-tab {
  background: transparent; border: 0;
  color: var(--ink-3);
  font-size: 11px; font-weight: 500;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.04em;
  font-family: inherit;
}
.mode-tab:hover { color: var(--ink-1); }
.mode-tab.active {
  background: var(--surface);
  color: var(--ink-1);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.range-tab.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: auto;  /* keep tooltip working */
}
.range-tab.is-disabled:hover { background: transparent; }

.hero-unified-meta {
  margin: 14px 0 18px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline-soft);
}

.hero-chart-wrap {
  border-top: 1px solid var(--hairline-soft);
  padding-top: 14px;
}
.hero-chart {
  width: 100%;
  min-height: 280px;
}
.hero-chart-legend {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-top: 12px;
  font-size: 11.5px; color: var(--ink-3);
  font-family: var(--mono);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-item .up { color: var(--up); }
.legend-item .down { color: var(--down); }

/* Compact strategies list (replaces 5-card grid) */
.strat-list {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.strat-row {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) 90px minmax(80px, 1fr) 60px 100px;
  gap: 18px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--hairline-soft);
  text-decoration: none;
  color: var(--ink-1);
  transition: background 0.12s var(--ease);
}
.strat-row:last-child { border-bottom: 0; }
.strat-row:hover { background: var(--surface-hi); }
.strat-row-name {
  font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;
}
.strat-row-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strat-row-pct {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 600;
  text-align: right;
}
.strat-row-pct.up { color: var(--up); }
.strat-row-pct.down { color: var(--down); }
.strat-row-spark { display: block; min-width: 80px; }
.strat-row-days {
  font-family: var(--mono);
  font-size: 11px; color: var(--ink-4);
  text-align: right;
}
.strat-row-drift { font-size: 9.5px; }

/* ====== KILL SWITCH (phase 9) ====== */
.kill-switch-block {
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  background: var(--surface);
}
.kill-switch-btn {
  display: inline-block;
  padding: 10px 18px;
  background: oklch(0.72 0.21 22 / 0.12);
  color: var(--down);
  border: 1px solid oklch(0.72 0.21 22 / 0.4);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
  min-height: 44px;
  min-width: 44px;
  transition: background 0.15s, border-color 0.15s;
}
.kill-switch-btn:hover {
  background: oklch(0.72 0.21 22 / 0.18);
  border-color: oklch(0.72 0.21 22 / 0.6);
}
.kill-switch-note {
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-4);
  max-width: 480px;
}
.kill-switch-empty {
  font-size: 12px;
  color: var(--ink-3);
  display: flex; flex-direction: column; gap: 4px;
}
.kill-switch-empty strong { color: var(--ink-2); font-weight: 600; }
.kill-switch-empty .muted { font-size: 11px; color: var(--ink-4); }
.kill-switch-empty code {
  font-family: var(--mono);
  background: oklch(1 0 0 / 0.05);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ====== MOBILE LAYOUT (≤768px, phase 9) ======
 * The desktop layout is a sidebar+main grid. On mobile we collapse the
 * sidebar into a horizontal top-bar so the main column gets full width.
 * Cards stack vertically, tables become more compact, touch targets
 * grow to 44x44 minimum. */
@media (max-width: 768px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .sidebar {
    position: static;       /* override sticky */
    height: auto;            /* override 100vh */
    flex-direction: row;
    align-items: center;
    padding: 10px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--hairline-soft);
    overflow-x: auto;
    gap: 8px;
  }
  .sidebar .brand { padding-right: 14px; }
  .sidebar .nav {
    flex-direction: row;
    gap: 4px;
    flex: 1;
  }
  .sidebar .nav-link {
    padding: 8px 10px;
    min-height: 44px;
    font-size: 11.5px;
  }
  .sidebar .nav-link span:not(.nav-ico) {
    /* Hide labels — only icons fit */
    display: none;
  }
  .sidebar-footer {
    flex-direction: row;
    gap: 8px;
    padding: 0;
  }
  .sidebar-footer .user-row { display: none; }
  .sidebar .nav-group-label { display: none; }

  .main { padding: 0 14px 32px; }

  .topbar {
    padding: 14px 0 16px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topbar-actions { gap: 6px; }
  .timestamp { font-size: 10px; padding: 4px 8px; }
  .status-pill { font-size: 10px; padding: 4px 8px; }

  .page-title { font-size: 22px; }

  /* Hero card stacks */
  .hero-unified-head {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }
  .hero-unified-r {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .hero-unified-meta {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .hero-equity { font-size: 32px; }
  .hero-chart { min-height: 200px; }

  /* Compact strategy list — drop sparkline column on small screens */
  .strat-row {
    grid-template-columns: minmax(140px, 2fr) 80px 60px 80px;
    gap: 10px;
    padding: 14px 12px;
    min-height: 56px;
  }
  .strat-row-spark { display: none; }

  /* Tables become horizontal-scroll cards */
  .tbl-wrap { overflow-x: auto; }
  .tbl { min-width: 600px; }

  /* Tab strips wrap and grow to 44px touch targets */
  .tab-strip {
    flex-wrap: wrap;
    gap: 4px;
  }
  .tab-strip .tab {
    min-height: 40px;
    padding: 9px 12px;
    font-size: 12px;
  }

  /* Side panels and modals fill the screen on phones */
  .side-panel {
    width: 100vw;
    border-left: 0;
  }
  .modal-panel {
    margin: 12px;
    max-height: calc(100vh - 24px);
  }

  /* KPI strips stack to 2 cols rather than horizontal scroll */
  .kpi-strip {
    grid-template-columns: 1fr 1fr;
  }

  /* Detail header stacks return value below title */
  .detail-head-row {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .detail-return-value { font-size: 32px; }

  /* Trades summary row */
  .strat-summary-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* Strategy lab notice on phones */
  .lab-mobile-notice {
    display: block;
    margin: 18px 0;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--r-md);
    font-size: 13px;
    color: var(--ink-2);
    text-align: center;
  }
}
@media (min-width: 769px) {
  .lab-mobile-notice { display: none; }
}