/* ─────────────────────────────────────────────────────────────
   app.css — layout and components for the client portal (DESK).
   Every colour, font and radius comes from tokens.css; there are
   no colour literals in this file. Tints are color-mix() of a token.
   ───────────────────────────────────────────────────────────── */

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

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

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
svg { flex-shrink: 0; }
strong { font-weight: 600; }
[hidden] { display: none !important; }

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.pos   { color: var(--gain); }
.neg   { color: var(--loss); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.r     { text-align: right; }
.link  { color: var(--accent); }
.link:hover { text-decoration: underline; }

.empty-state {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
}

/* ── App shell ────────────────────────────────────────────── */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 6px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
}
/* The lockup: prod's violet tile with this theme's amber mark cut into it.
   Solid rather than an outline on the page background — at 20px a thin glyph
   in a colour nothing else uses reads as a stray highlight, where a filled
   tile reads as a logo. Carrying both colours is what keeps it from looking
   stranded in an amber interface. */
.brand-chip {
  display: inline-flex;
  padding: 4px;
  border-radius: 6px;
  background: var(--brand-tile);
  border: 1px solid var(--brand-edge);
}
.brand-mark {
  width: 20px;
  height: 20px;
  background: var(--brand-mark);
  -webkit-mask: url("../logos/mark.6d8c2d4ec026.png") center / contain no-repeat;
          mask: url("../logos/mark.6d8c2d4ec026.png") center / contain no-repeat;
}
.brand-lg { font-size: 15px; gap: 12px; }
.brand-lg .brand-mark { width: 30px; height: 30px; }
.brand-lg .brand-chip { padding: 6px; border-radius: 9px; }
.brand-tag {
  margin-left: 2px;
  padding: 1px 5px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 2px; }

.icon-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--text-muted);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 16px; height: 16px; }

.icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: none; }
[data-theme="light"] .icon-sun  { display: block; }

.user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 8px 0 4px;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}
.user-btn:hover { background: var(--surface-2); color: var(--text); }
.avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--radius);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar-sep { width: 1px; height: 18px; background: var(--border-strong); margin: 0 4px; }

.app-body { flex: 1; display: flex; min-height: 0; }

/* ── Sidebar: icon rail ───────────────────────────────────── */
.sidebar {
  position: sticky;
  top: 40px;
  height: calc(100vh - 40px);
  width: 72px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 6px 4px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.sidebar.collapsed { width: 44px; }
.sidebar.collapsed .sidebar-label,
.sidebar.collapsed .sidebar-footer { display: none; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }

.sidebar-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 52px;
  border-radius: var(--radius);
  color: var(--text-faint);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
}
.sidebar-item:hover { background: var(--surface-2); color: var(--text-muted); }
.sidebar-item.active { color: var(--accent); }
.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--accent);
}
.sidebar-icon { width: 17px; height: 17px; }
.sidebar-label { padding: 0 2px; }

.sidebar-footer {
  margin-top: auto;
  padding: 8px 2px 2px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  text-align: center;
  white-space: nowrap;
}

.sidebar-overlay { display: none; }

/* ── Main + page header ───────────────────────────────────── */
.main { flex: 1; min-width: 0; padding: 16px 20px 40px; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.page-title { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.page-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.page-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); white-space: nowrap; letter-spacing: 0.04em; text-transform: uppercase; }

.section-title {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 20px 0 8px;
}

.stack { display: grid; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ── Panel ────────────────────────────────────────────────── */
.panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.panel-head {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
}
.panel-title {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.panel-note { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
.panel-tools { display: flex; align-items: center; gap: 10px; }
.panel-body { padding: 14px; }
.panel-desc { font-size: 12px; color: var(--text-muted); line-height: 1.55; }
.panel-desc + * { margin-top: 12px; }

/* ── Metric grids (KPI strip, stat grid, chart stats) ─────── */
.metrics {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.metrics > * { background: var(--surface); min-width: 0; }

.kpi-strip { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
.kpi-grid  { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }

.kpi { padding: 12px 14px; }
.kpi-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kpi-value {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
}
.kpi-sub {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text-muted);
}
.kpi-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kpi-balance .kpi-value { font-size: 24px; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  height: 28px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-3); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--text)); }
.btn-danger { background: var(--loss); border-color: var(--loss); color: var(--accent-fg); }
.btn-danger:hover { background: color-mix(in srgb, var(--loss) 88%, var(--text)); }
.btn-block { width: 100%; height: 36px; font-size: 12.5px; }
.btn-sm { height: 24px; padding: 0 9px; font-size: 11px; }
.btn-square { width: 24px; padding: 0; }
.btn.is-muted { color: var(--text-muted); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 11px;
}

/* ── Segmented control ────────────────────────────────────── */
.seg {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.seg > button {
  height: 22px;
  padding: 0 8px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
}
.seg > button + button { border-left: 1px solid var(--border-strong); }
.seg > button:hover { color: var(--text); }
.seg > button.active { background: var(--surface-3); color: var(--accent); }

/* ── Tabs ─────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 2px;
  padding: 0 6px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.tabs::-webkit-scrollbar { display: none; }
.panel-tab {
  height: 34px;
  padding: 0 10px;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.panel-tab:hover { color: var(--text); }
.panel-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--radius);
  background: var(--surface-3);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: center;
}
.panel-tab.active .tab-count { color: var(--accent); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Tables ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.table-wrap.scroll { max-height: 440px; overflow-y: auto; }

.table { width: 100%; border-collapse: collapse; font-size: 12px; }
.table th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 28px;
  padding: 0 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.table td {
  height: 32px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-2); }
.table th:first-child, .table td:first-child { padding-left: 14px; }
.table th:last-child, .table td:last-child { padding-right: 14px; }
.table .r { text-align: right; }
.table .sym { font-weight: 600; }
.table .id { color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; }
.table .ts { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  --tone: var(--text-muted);
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 5px;
  border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--tone) 8%, transparent);
  color: var(--tone);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.badge-buy, .badge-filled, .badge-approved         { --tone: var(--gain); }
.badge-sell, .badge-rejected, .badge-cancelled     { --tone: var(--loss); }
.badge-pending                                     { --tone: var(--warn); }
.badge-bonus                                       { --tone: var(--info); }
.sym .badge { margin-left: 6px; }

/* ── Price flashes ─────────────────────────────────────────
   Two identical keyframe names per direction so a cell can be
   re-flashed on consecutive frames by alternating names, without
   forcing a reflow to restart the animation. */
@keyframes fl-up-a { from { color: var(--gain); background: color-mix(in srgb, var(--gain) 24%, transparent); } to { background: transparent; } }
@keyframes fl-up-b { from { color: var(--gain); background: color-mix(in srgb, var(--gain) 24%, transparent); } to { background: transparent; } }
@keyframes fl-dn-a { from { color: var(--loss); background: color-mix(in srgb, var(--loss) 24%, transparent); } to { background: transparent; } }
@keyframes fl-dn-b { from { color: var(--loss); background: color-mix(in srgb, var(--loss) 24%, transparent); } to { background: transparent; } }
@keyframes fl-am-a { from { color: var(--accent); background: color-mix(in srgb, var(--accent) 24%, transparent); } to { background: transparent; } }
@keyframes fl-am-b { from { color: var(--accent); background: color-mix(in srgb, var(--accent) 24%, transparent); } to { background: transparent; } }
.fl-up-a { animation: fl-up-a 0.8s ease-out; }
.fl-up-b { animation: fl-up-b 0.8s ease-out; }
.fl-dn-a { animation: fl-dn-a 0.8s ease-out; }
.fl-dn-b { animation: fl-dn-b 0.8s ease-out; }
.fl-am-a { animation: fl-am-a 0.8s ease-out; }
.fl-am-b { animation: fl-am-b 0.8s ease-out; }

/* ── DESK: the dashboard workspace ────────────────────────── */
body.desk .main {
  padding: 0;
  height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.desk-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-rows: 28px minmax(0, 1fr) 212px 24px;
  grid-template-areas:
    "tape    tape"
    "chart   rail"
    "blotter blotter"
    "status  status";
  gap: 1px;
  background: var(--border);
}
.desk-grid > .panel, .desk-rail > .panel { border: 0; border-radius: 0; }

/* On a short window the blotter gives way so the rail keeps room for the
   symbol list, and the quote panel drops its two session-detail rows. */
@media (max-height: 800px) {
  .desk-grid { grid-template-rows: 28px minmax(0, 1fr) 150px 24px; }
  .quote-row.sub { display: none; }
}

/* Tape */
.tape {
  grid-area: tape;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--surface);
}
.tape-track { display: flex; width: max-content; animation: tape-scroll 60s linear infinite; will-change: transform; }
.tape:hover .tape-track { animation-play-state: paused; }
.tape-run { display: flex; }
@keyframes tape-scroll { to { transform: translateX(-50%); } }
.tape-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 16px;
  border-right: 1px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
}
.tape-cell:hover .tape-sym { color: var(--accent); }
.tape-sym { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-muted); }
.tape-px { font-size: 11.5px; padding: 1px 4px; border-radius: var(--radius); }
.tape-chg { font-size: 10.5px; color: var(--text-faint); }

/* Chart */
.desk-chart { grid-area: chart; display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
.chart-head {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chart-id { display: flex; align-items: baseline; gap: 8px; }
.chart-sym { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.chart-class { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.chart-last { font-size: 14px; font-weight: 500; padding: 1px 4px; border-radius: var(--radius); }
.chart-chg { font-size: 11px; }
.chart-legend { display: flex; gap: 10px; font-size: 10.5px; color: var(--text-muted); }
.chart-legend b { font-weight: 500; color: var(--text); }
.chart-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.chart-view { display: none; flex: 1; min-height: 0; flex-direction: column; }
.chart-view.active { display: flex; }
.lw-chart { flex: 1; min-height: 0; position: relative; }
.chart-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 24px;
  padding: 0 12px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
}
.chart-foot b { color: var(--text-muted); font-weight: 500; }
.chart-foot a { color: var(--text-muted); }
.chart-foot a:hover { color: var(--accent); }
.chart-box { position: relative; height: 300px; padding: 10px 6px 4px 10px; }
.chart-view .chart-box { flex: 1; height: auto; min-height: 0; }
.chart-box.tall { height: 380px; }
.chart-box canvas { display: block; }
.chart-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); border: 0; border-top: 1px solid var(--border); border-radius: 0; flex-shrink: 0; }
.chart-stats .kpi { padding: 8px 12px; }
.chart-stats .kpi-value { font-size: 13px; margin-top: 2px; }
.chart-range-label { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); }

/* Right rail */
.desk-rail {
  grid-area: rail;
  display: grid;
  /* The symbol list never drops below 200px (six rows); on a short window
     the rail scrolls instead of crushing it. */
  grid-template-rows: max-content max-content minmax(200px, 1fr);
  gap: 1px;
  background: var(--border);
  min-height: 0;
  overflow-y: auto;
}
.rail-head {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.acct { padding: 8px 12px 10px; }
.acct-balance { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin-top: 4px; }
.acct-hint { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0; text-transform: none; margin-left: 6px; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.acct-locks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.acct-lock { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-muted); }
.acct-lock-text { min-width: 0; }
.acct-lock-text .fa-lock { margin-right: 4px; color: var(--text-faint); }
.acct-pnl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.acct-pnl > div { background: var(--surface); padding: 6px 12px 7px; min-width: 0; }
.acct-pnl .kpi-value { font-size: 13px; margin-top: 3px; }
.acct-pnl .kpi-sub { font-size: 10.5px; }

.quote { display: flex; flex-direction: column; }
.quote-body { padding: 8px 12px 10px; }
.quote-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.quote-ba > div { background: var(--surface-2); padding: 6px 10px 7px; min-width: 0; }
.quote-ba .kpi-value { font-size: 18px; margin-top: 2px; padding: 0 2px; border-radius: var(--radius); }
.q-bid .kpi-label { color: var(--loss); }
.q-ask .kpi-label { color: var(--gain); }
.quote-rows { margin-top: 7px; display: grid; gap: 3px; }
.quote-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11px; color: var(--text-muted); }
.quote-row b { font-family: var(--font-mono); font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.quote-row.sub { font-size: 10px; color: var(--text-faint); }
.quote-row.sub b { color: var(--text-muted); }

.symlist { display: flex; flex-direction: column; min-height: 0; }
.symlist-body { flex: 1; overflow-y: auto; min-height: 0; }
.sym-row {
  width: 100%;
  display: grid;
  grid-template-columns: 74px 1fr 82px 52px;
  align-items: center;
  gap: 6px;
  height: 31px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.sym-row:hover { background: var(--surface-2); }
.sym-row.active { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.sym-name { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; display: flex; flex-direction: column; line-height: 1.15; }
.sym-name small { font-size: 9px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.spark { display: block; width: 100%; height: 20px; }
.sym-px { text-align: right; font-size: 11.5px; padding: 1px 3px; border-radius: var(--radius); }
.sym-chg { text-align: right; font-size: 10.5px; color: var(--text-faint); }

/* Blotter */
.blotter { grid-area: blotter; display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
.blotter .tab-pane.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.blotter .tab-pane > *, .blotter .table-wrap { flex: 1; min-height: 0; }
.blotter .table-wrap { overflow: auto; max-height: none; }
.blotter #open-positions { display: flex; flex-direction: column; min-height: 0; }
.blotter .table td { height: 32px; }
.blotter .empty-state { padding: 20px; }

/* Status bar */
.statusbar {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 4px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  overflow: hidden;
  white-space: nowrap;
}
.sb-item { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-right: 1px solid var(--border); }
.sb-item b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.sb-item .kpi-value { font-family: inherit; font-size: inherit; margin: 0; font-weight: 500; }
.sb-label { font-size: 9.5px; letter-spacing: 0.1em; color: var(--text-faint); }
.sb-spacer { flex: 1; }
.sb-right .sb-item { border-right: 0; border-left: 1px solid var(--border); }

.feed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.live-badge .feed-on { display: none; }
.live-badge[data-live="1"] .feed-on  { display: inline; }
.live-badge[data-live="1"] .feed-off { display: none; }
.live-badge[data-live="1"] .live-dot { background: var(--gain); }
.live-badge[data-live="1"] { color: var(--gain); }
.live-badge[data-live="0"] { color: var(--warn); }

.watch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
}
.watch-row:last-child { border-bottom: 0; }
.watch-sym { font-weight: 600; font-size: 12px; }
.watch-sub { color: var(--text-faint); font-size: 10.5px; margin-left: 8px; }
.watch-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; }

/* ── Calendar heatmap ─────────────────────────────────────── */
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-nav-btn {
  width: 22px;
  height: 22px;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
}
.cal-nav-btn:hover { background: var(--surface-2); color: var(--text); }
.cal-month-label {
  min-width: 68px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; padding: 10px 12px 12px; }
.cal-day-header {
  padding-bottom: 2px;
  text-align: center;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cal-day {
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cal-day.blank { border-color: transparent; }
.cal-day-num { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
.cal-day-pnl { align-self: flex-end; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 10.5px; }
.cal-pos { background: color-mix(in srgb, var(--gain) 10%, transparent); border-color: color-mix(in srgb, var(--gain) 30%, var(--border)); }
.cal-neg { background: color-mix(in srgb, var(--loss) 10%, transparent); border-color: color-mix(in srgb, var(--loss) 30%, var(--border)); }

/* ── Forms ────────────────────────────────────────────────── */
.wd-field, .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.wd-field label, .form-group label, .wd-saved-head label, .field-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.wd-field input, .wd-field select, .wd-field textarea,
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 12.5px;
  outline: none;
}
.wd-field textarea, .form-group textarea { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.5; }
.wd-field input:focus, .wd-field select:focus, .wd-field textarea:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
.wd-field input::placeholder, .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-faint); }
.wd-input-err { border-color: var(--loss) !important; }
.wd-error { font-size: 11px; color: var(--loss); }
.wd-error:empty { display: none; }
.errorlist { list-style: none; font-size: 11.5px; color: var(--loss); }
.uppercase { text-transform: uppercase; }

.pw-field { position: relative; }
.pw-field input { padding-right: 40px; }
.pw-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.pw-toggle:hover { color: var(--text); }

.check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  cursor: pointer;
}
.check input { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }

.alert {
  --tone: var(--text-muted);
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--tone) 8%, transparent);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.alert-warn { --tone: var(--warn); }
.alert-err, .wd-server-error, .lp-alert-err { --tone: var(--loss); }
.alert-ok, .wd-success, .lp-alert-ok { --tone: var(--gain); }
.wd-server-error, .wd-success, .lp-alert {
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--tone) 8%, transparent);
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* ── Modals ───────────────────────────────────────────────── */
.wd-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--overlay) 65%, transparent);
}
.wd-overlay.is-open { display: flex; }

.wd-dialog, .lp-dialog {
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--overlay) 55%, transparent);
}
.lp-dialog { max-width: 500px; }

.wd-header, .lp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.wd-close, .lp-close {
  width: 28px;
  height: 28px;
  margin: -4px -6px 0 0;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
}
.wd-close:hover, .lp-close:hover { background: var(--surface-2); color: var(--text); }

.wd-date-lock {
  padding: 9px 11px;
  margin-bottom: 10px;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  font-size: 12px;
  line-height: 1.5;
}
.wd-window-hint { font-size: 11.5px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; }
.wd-max-info {
  padding: 9px 11px;
  margin-bottom: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 12px;
}
.wd-max-info strong { color: var(--text); font-family: var(--font-mono); font-weight: 500; }

.wd-transfer-tabs, .lp-seg {
  display: flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.wd-tab, .lp-seg-btn {
  flex: 1;
  height: 30px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}
.wd-tab + .wd-tab, .lp-seg-btn + .lp-seg-btn { border-left: 1px solid var(--border-strong); }
.wd-tab:hover, .lp-seg-btn:hover { color: var(--text); }
.wd-tab.active, .lp-seg-btn.is-active { background: var(--surface-3); color: var(--accent); }

.wd-saved { margin-bottom: 12px; }
.wd-saved-head { margin-bottom: 6px; }
.wd-saved-card, .profile-payout-card {
  padding: 9px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.wd-saved-card-title, .profile-payout-card-title { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.wd-saved-card-title i { color: var(--text-faint); font-size: 11px; }
.wd-saved-card-sub, .profile-payout-card-sub {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  word-break: break-all;
}

/* Delete-wallet confirmation. Inline rather than window.confirm so the address
   being removed is on screen while the client decides — a browser dialog cannot
   show it, and a wallet sent to the wrong address cannot be recovered. */
.profile-payout-actions { margin-top: 9px; }
.profile-payout-confirm {
  margin-top: 9px;
  padding: 9px 11px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  display: grid;
  gap: 8px;
}
.profile-payout-confirm-text { margin: 0; font-size: 12px; line-height: 1.45; }
.profile-payout-confirm-addr {
  display: block;
  margin: 4px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  word-break: break-all;
}
.profile-payout-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wd-saved-empty {
  padding: 9px 11px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 12px;
}
.wd-saved-profile-hint { margin-top: 8px; font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.wd-linkish { color: var(--accent); }
.wd-submit, .lp-submit {
  width: 100%;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 12.5px;
  font-weight: 600;
}
.wd-submit:hover, .lp-submit:hover { background: color-mix(in srgb, var(--accent) 86%, var(--text)); }
.wd-submit:disabled, .lp-submit:disabled { opacity: 0.45; cursor: not-allowed; }

/* Lock-profits dialog */
.lp-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lp-title { margin-top: 4px; font-size: 16px; font-weight: 600; }
.lp-lede { margin-bottom: 12px; font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
.lp-lede strong { color: var(--text); }
.lp-seg { margin-bottom: 12px; }
.lp-seg-tag {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gain);
}
.lp-hero {
  margin-bottom: 12px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.lp-hero-figures { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-fig { display: flex; flex-direction: column; gap: 4px; }
.lp-fig-r { align-items: flex-end; text-align: right; }
.lp-fig-label { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.lp-fig-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 500; }
.lp-fig-proj { color: var(--gain); }
.lp-fig-arrow { color: var(--text-faint); }
.lp-curve { display: block; width: 100%; height: 72px; margin: 12px 0 8px; }
.lp-hero-foot { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; }
.lp-gain { color: var(--gain); }
.lp-mult { color: var(--text-muted); }
.lp-breakdown { margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.lp-bd-row { display: flex; justify-content: space-between; padding: 7px 11px; font-size: 12px; }
.lp-bd-row + .lp-bd-row { border-top: 1px solid var(--border); }
.lp-bd-label { color: var(--text-muted); }
.lp-bd-label em { font-style: normal; color: var(--text-faint); }
.lp-bd-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.lp-bd-total { background: var(--surface-2); font-weight: 600; }
.lp-bd-total .lp-bd-label { color: var(--text); }
.lp-disclaimer { margin-bottom: 12px; font-size: 11px; color: var(--text-faint); line-height: 1.5; }
.lp-confirm { margin-bottom: 12px; }
.lp-deps { margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.lp-deps-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 11px; border-bottom: 1px solid var(--border); }
.lp-deps-all { font-size: 11px; }
.lp-deps-list { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow-y: auto; }
.lp-deps-list li + li { border-top: 1px solid var(--border); }
.lp-dep { flex-wrap: wrap; align-items: baseline; padding: 7px 11px; column-gap: 10px; }
.lp-dep-amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.lp-dep-meta { font-size: 11px; color: var(--text-faint); }
.lp-dep.is-locked { cursor: default; opacity: 0.7; }

/* Profile dialog */
.profile-dialog { max-width: 440px; }
.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.profile-avatar-row .avatar { width: 38px; height: 38px; font-size: 12.5px; }
.profile-display-name { display: block; font-size: 13.5px; font-weight: 600; }
.profile-email-sub { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.profile-info-grid { grid-template-columns: 1fr 1fr; margin-bottom: 12px; }
.profile-info-grid .kpi { padding: 9px 11px; }
.profile-info-grid .kpi-value { font-size: 14px; margin-top: 4px; }
.profile-payouts { display: grid; gap: 10px; }
.profile-payouts-status { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-payout-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 11px;
}
.profile-payout-chip.is-added { color: var(--gain); border-color: color-mix(in srgb, var(--gain) 35%, transparent); }
.profile-danger-zone { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.profile-delete-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--loss); font-size: 12px; }
.profile-delete-btn:hover { text-decoration: underline; }
.profile-delete-btn.is-disabled { color: var(--text-faint); text-decoration: none; cursor: default; }
.profile-delete-note { margin-top: 6px; font-size: 11.5px; color: var(--text-muted); }

/* Payment methods page */
.pm-payout-card-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.profile-payout-form { margin-top: 12px; }
.profile-payouts-note { margin: 2px 0 12px; font-size: 11.5px; color: var(--text-muted); }
.profile-payout-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }

/* ── Markets (our own charts) ─────────────────────────────── */
/* Desktop: the symbol list spans the full height on the left, the chart and
   the depth ladder sit side by side (where a trading desk expects the book),
   and quote + tape share the band underneath. One column on phones, in
   reading order. */
.mk {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr) 236px;
  grid-template-areas:
    "rail chart depth"
    "rail quote tape";
  gap: 12px;
}
.mk-rail { grid-area: rail; }
.mk-chart-panel { grid-area: chart; display: flex; flex-direction: column; min-width: 0; }
.mk-depth-panel { grid-area: depth; display: flex; flex-direction: column; min-height: 0; }
.mk-quote { grid-area: quote; }
.mk-tape { grid-area: tape; display: flex; flex-direction: column; min-height: 0; }

/* The rail fills its column: the traded symbols size to their content and the
   instrument list takes whatever is left, so there is no dead panel below. */
.mk-rail {
  display: grid;
  grid-template-rows: max-content max-content max-content max-content max-content minmax(90px, 1fr);
  min-height: 0;
}
.mk-sub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.mk-list { overflow-y: auto; min-height: 0; }
/* Bounded on purpose: a 147-row list with no cap contributes its full height
   to the grid row and stretches the whole page to five thousand pixels. It
   absorbs the rail's spare height up to this, then scrolls. */
.mk-browse-list { max-height: 300px; }

.mk-search { padding: 8px 10px; }
.mk-search input {
  width: 100%;
  height: 27px;
  padding: 0 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
}
.mk-search input:focus { outline: none; border-color: var(--border-strong); }

/* Name over class on the left, price over change on the right: two columns
   that stay aligned at any rail width, unlike four competing ones. */
.mk-rail .sym-row {
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  height: auto;
  padding: 7px 12px;
}
.mk-rail .sym-name { min-width: 0; overflow: hidden; }
.mk-rail .sym-name small { margin-top: 1px; }
.sym-vals { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.15; }
.sym-vals .sym-px { font-family: var(--font-mono); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; padding: 0; }
.sym-vals .sym-chg { font-family: var(--font-mono); font-size: 10px; font-variant-numeric: tabular-nums; }

/* Browse rows carry no price of their own — nothing streams them — so they
   are name + description only, never a column that would look like a quote. */
.mk-brow {
  width: 100%;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.mk-brow:hover { background: var(--surface-2); }
.mk-brow.active { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.mk-brow b { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; }
.mk-brow small { font-size: 10px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mk-chart-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.mk-sym { display: flex; flex-direction: column; line-height: 1.2; min-width: 96px; }
.mk-sym b { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; }
.mk-sym small { font-size: 10px; color: var(--text-faint); }
.mk-ba { display: flex; gap: 1px; background: var(--border); border: 1px solid var(--border); margin-right: auto; }
.mk-ba > div { background: var(--surface-2); padding: 3px 10px 4px; display: flex; flex-direction: column; gap: 1px; }
.mk-ba .kpi-value { font-size: 13px; margin: 0; }
.mk-ba > div:nth-child(1) .kpi-label { color: var(--loss); }
.mk-ba > div:nth-child(2) .kpi-label { color: var(--gain); }

.mk-readout {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 5px 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  flex-wrap: wrap;
}
.mk-readout b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.mk-readout-right { margin-left: auto; color: var(--text-muted); }
.mk-chart { height: 420px; min-width: 0; }
.mk-chart-msg { padding: 24px 14px; text-align: center; font-size: 12px; color: var(--text-muted); }
.mk-legend {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--text-faint);
}
.mk-legend b { font-family: var(--font-mono); color: var(--text-muted); font-weight: 500; }
.mk-legend-right { margin-left: auto; font-family: var(--font-mono); }
.mk-key { width: 9px; height: 9px; display: inline-block; }
.mk-key-trade { background: var(--accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.mk-chg-box {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}
.mk-chg-box b { font-family: var(--font-mono); font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mk-sess {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin: 10px 0;
}
.mk-sess > div { background: var(--surface-2); padding: 5px 9px 6px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-sess b { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
/* Three short facts read as three columns; as full-width rows they are one
   label marooned from its value across a wide panel. */
.mk-quote .quote-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 14px; }

/* Market depth. The ladder is only drawn from levels the feed actually sent;
   with no feed the panel says so and draws nothing. */
.mk-depth-body { flex: 1; min-height: 0; overflow-y: auto; }
.mk-depth-msg { padding: 16px 14px; font-size: 11px; color: var(--text-faint); line-height: 1.55; }
.mk-dep-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  padding: 3px 11px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
/* The bar is the level's size against the largest on screen — a background,
   so it can never cover the number it describes. It must stay out of the grid
   flow: as a grid item it takes the first cell and pushes the size onto a
   second line. */
.mk-dep-row > * { position: relative; z-index: 1; }
.mk-dep-row > .mk-dep-bar { position: absolute; top: 1px; bottom: 1px; right: 0; z-index: 0; }
.mk-dep-row b { font-weight: 500; }
.mk-dep-row span { color: var(--text-muted); text-align: right; }
.mk-dep-ask b { color: var(--loss); }
.mk-dep-bid b { color: var(--gain); }
.mk-dep-mid {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 11px;
  margin: 3px 0;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
}
.mk-dep-mid b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

.mk-tape-body { overflow-y: auto; max-height: 268px; min-height: 0; }
.mk-tick {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 46px;
  gap: 6px;
  align-items: baseline;
  padding: 2px 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--border);
}
.mk-tick span:first-child { color: var(--text-faint); }
.mk-tick b { font-weight: 500; text-align: right; }
.mk-tick i { font-style: normal; text-align: right; color: var(--text-faint); font-size: 9.5px; }

.mk-overview { margin-top: 12px; }
.mk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); }
.mk-card {
  background: var(--surface);
  padding: 9px 11px 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  min-width: 0;
}
.mk-card:hover { background: var(--surface-2); }
.mk-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mk-card-top b { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; }
.mk-card-px { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.mk-card-chg { font-family: var(--font-mono); font-size: 10.5px; }
.mk-card-mini { height: 44px; }
.mk-analytics { margin-top: 12px; }
.mk-corr, .mk-rel { height: 340px; }
.mk-note { font-size: 11px; color: var(--text-faint); padding: 18px 0; text-align: center; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Public pages (login, status, privacy) ────────────────── */
/* The login backdrop: the brand's violet as light, the terminal's amber as a
   price line, over the same grid the charts use. Decoration only — it sits
   behind everything, takes no pointer events, and holds still for anyone who
   asks for reduced motion. */
.public-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px 72px);
  opacity: 0.5;
}
.pb-glow {
  position: absolute;
  width: 46vw;
  height: 46vw;
  min-width: 380px;
  min-height: 380px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.30;
  background: radial-gradient(circle at center,
    var(--brand-tile) 0%, color-mix(in srgb, var(--brand-edge) 60%, transparent) 42%, transparent 70%);
}
.pb-glow-a { top: -14vw; left: -10vw; animation: pb-drift-a 38s ease-in-out infinite alternate; }
.pb-glow-b { right: -12vw; bottom: -16vw; animation: pb-drift-b 47s ease-in-out infinite alternate; }
@keyframes pb-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(7vw, 5vw, 0) scale(1.12); }
}
@keyframes pb-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-6vw, -4vw, 0) scale(1); }
}
/* The amber hairline is the chart's last-price line, drifting. */
.pb-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: repeating-linear-gradient(to right,
    var(--accent) 0 3px, transparent 3px 9px);
  opacity: 0.22;
  animation: pb-slide 29s ease-in-out infinite alternate;
}
@keyframes pb-slide {
  from { transform: translateY(-13vh); }
  to   { transform: translateY(16vh); }
}
[data-theme="light"] .pb-glow { opacity: 0.17; }
[data-theme="light"] .pb-line { opacity: 0.3; }
@media (prefers-reduced-motion: reduce) {
  .pb-glow, .pb-line { animation: none; }
}

.public {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 48px 16px;
}
.public-corner { position: fixed; top: 12px; right: 12px; }
.public-card {
  width: 100%;
  max-width: 400px;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  /* Lifts the card off the glows so the form stays the brightest thing. */
  box-shadow: 0 28px 80px -48px color-mix(in srgb, var(--brand-tile) 70%, transparent),
              0 2px 10px -6px rgba(0, 0, 0, 0.5);
}
.public-card.wide { max-width: 560px; }
.public-card h1 { font-size: 16px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 6px; }
.public-card p, .public-card li { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.public-card p + p, .public-card p + ol, .public-card ol + p { margin-top: 12px; }
.public-card ol { padding-left: 18px; }
.public-card li + li { margin-top: 8px; }
.public-card p strong { color: var(--text); }
.public-lede { margin-bottom: 20px; }
.public-actions { display: grid; gap: 10px; margin-top: 20px; }
.public-foot { margin-top: 16px; text-align: center; font-size: 11.5px; color: var(--text-faint); }
.public-foot a { color: var(--accent); }
.public-signed-in { margin-top: 16px; font-size: 11.5px; color: var(--text-faint); }
.public-signed-in strong { color: var(--text-muted); font-weight: 500; }
.status-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 16px;
}
.status-icon.warn { color: var(--warn); }
.status-icon.ok { color: var(--gain); }
.status-icon.bad { color: var(--loss); }
.big-link { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 13px; color: var(--accent); word-break: break-all; }

.doc { max-width: 760px; margin: 0 auto; padding: 60px 16px 80px; }
.doc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.doc h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.doc-meta { margin: 6px 0 36px; font-size: 12px; color: var(--text-faint); }
.doc-section { margin-bottom: 32px; }
.doc-section h2 {
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.doc-section p, .doc-section li { font-size: 13.5px; line-height: 1.75; color: var(--text-muted); }
.doc-section strong { color: var(--text); }
.doc-section ul { margin: 8px 0; padding-left: 20px; }
.doc-section li + li { margin-top: 4px; }
.doc-section a { color: var(--accent); }

/* ── Motion preferences ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tape-track { animation: none; }
  .fl-up-a, .fl-up-b, .fl-dn-a, .fl-dn-b, .fl-am-a, .fl-am-b { animation: none; }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1180px) {
  .desk-grid { grid-template-columns: minmax(0, 1fr) 260px; }
  .sym-row { grid-template-columns: 64px 1fr 74px 46px; }
}

@media (max-width: 1024px) {
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-strip .kpi-balance { grid-column: 1 / -1; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  /* The workspace becomes a scrolling column; every block keeps its role. */
  body.desk .main { height: auto; overflow: visible; }
  .desk-grid {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .desk-chart { height: 360px; flex: none; }
  .desk-rail { display: flex; flex-direction: column; }
  .symlist-body { max-height: 240px; }
  .blotter { flex: none; }
  .blotter .table-wrap { max-height: 320px; }
  .statusbar { height: auto; flex-wrap: wrap; padding: 2px 4px; }
  .chart-foot { height: auto; padding: 4px 10px; white-space: normal; flex-wrap: wrap; gap: 2px 12px; line-height: 1.4; }
  .sb-spacer { display: none; }
  .sb-item { border-right: 1px solid var(--border); }
  .sb-right .sb-item { border-left: 0; }
  .chart-legend { display: none; }
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 40px;
    left: 0;
    z-index: 60;
    width: 220px;
    padding: 10px 8px;
    transform: translateX(-100%);
    transition: transform 0.18s ease;
  }
  .sidebar.collapsed { width: 220px; }
  .sidebar.collapsed .sidebar-label,
  .sidebar.collapsed .sidebar-footer { display: revert; }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-item { flex-direction: row; justify-content: flex-start; gap: 10px; height: 36px; padding: 0 10px; font-size: 11.5px; letter-spacing: 0.04em; text-transform: none; }
  .sidebar-item.active::before { left: -8px; top: 8px; bottom: 8px; }
  .sidebar-footer { text-align: left; padding-left: 10px; }
  .sidebar-overlay.visible {
    display: block;
    position: fixed;
    inset: 40px 0 0 0;
    z-index: 55;
    background: color-mix(in srgb, var(--overlay) 50%, transparent);
  }
  .main { padding: 14px 16px 40px; }
  body.desk .main { padding: 0; }
  .panel-head { flex-wrap: wrap; padding: 8px 12px; }
  .chart-range-label { display: none; }
  .user-email, .topbar-sep { display: none; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .chart-box { height: 240px; }
  .chart-box.tall { height: 300px; }
  .chart-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-value { font-size: 18px; }
  .kpi-balance .kpi-value { font-size: 21px; }
  .mk {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "chart" "rail" "depth" "quote" "tape";
  }
  /* Stacked, the rail has the page's own scroll; an inner one clips rows.
     The instrument list keeps its own, or it would run for 147 rows. */
  .mk-rail { grid-template-rows: none; }
  .mk-rail .mk-list { overflow: visible; }
  .mk-rail .mk-browse-list { overflow-y: auto; max-height: 260px; }
  .mk-sess { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-quote .quote-rows { grid-template-columns: minmax(0, 1fr); }
  .mk-chart { height: 300px; }
  .mk-ba { width: 100%; order: 3; }
  .mk-ba > div { flex: 1; }
  .mk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-corr, .mk-rel { height: 280px; }
  .mk-analytics { grid-template-columns: minmax(0, 1fr); }
  .public-card { padding: 20px; }
  .chart-head { flex-wrap: wrap; height: auto; padding: 6px 10px; gap: 8px; }
  .chart-tools { margin-left: 0; width: 100%; justify-content: space-between; }
  .desk-chart { height: 340px; }
}

@media (max-width: 420px) {
  .brand-text { display: none; }
  .cal-grid { gap: 2px; padding: 8px; }
  .cal-day { min-height: 38px; padding: 2px 3px; }
  .cal-day-pnl { font-size: 9.5px; }
}

/* ── TERRAIN: System Performance (/performance/) ───────────────
   Page-scoped. Every colour is a token; the WebGL panels read the
   same tokens through static/js/tokens.js. `tr-` = terrain.
   ───────────────────────────────────────────────────────────── */
.tr-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tr-kpis .kpi-value { font-size: 19px; }
.tr-kpis .kpi-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0; text-transform: none; }

.tr-panel { margin-bottom: 12px; }
.tr-panel .panel-head { flex-wrap: wrap; gap: 8px; height: auto; min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
.tr-panel .panel-tools { margin-left: auto; }

.tr-stage { position: relative; }
.tr-gl { height: 460px; width: 100%; }
.tr-gl[hidden] { display: none; }
.tr-gl canvas { display: block; }
.tr-flat { padding: 12px 14px 14px; overflow-x: auto; }
.tr-flat[hidden] { display: none; }
.tr-flat canvas { display: block; height: 420px; }

/* Hover readout: the figure in words, so the box is never the only way
   to get the number. */
.tr-readout {
  border-top: 1px solid var(--border);
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  min-height: 30px;
  display: flex;
  align-items: center;
}
.tr-readout[hidden] { display: none; }
.tr-hint { color: var(--text-faint); }
.tr-read b { color: var(--text); font-weight: 500; }

.tr-foot {
  border-top: 1px solid var(--border);
  padding: 9px 14px 11px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-faint);
  max-width: 96ch;
}

.tr-subhead {
  border-top: 1px solid var(--border);
  padding: 8px 14px 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.chart-box.short { height: 132px; }

/* Flat companion grids (month × year, instrument × year) */
.tr-grid {
  display: grid;
  grid-template-columns: max-content repeat(calc(var(--cols) - 1), minmax(46px, 1fr));
  gap: 2px;
  min-width: 620px;
}
.tr-grid-corner { }
.tr-grid-col, .tr-grid-row {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  display: flex;
  align-items: center;
}
.tr-grid-col { justify-content: center; padding-bottom: 2px; }
.tr-grid-row { gap: 6px; padding-right: 10px; white-space: nowrap; color: var(--text-muted); }
.tr-cell {
  height: 30px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: var(--text);
}
.tr-cell.is-empty {
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
}
.tr-scale { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
.tr-scale-bar {
  width: 120px; height: 6px; border-radius: var(--radius);
  background: linear-gradient(to right, var(--loss), var(--surface-3), var(--accent));
}
.tr-scale-note { color: var(--text-faint); }

/* Instrument legend — nine categories need names, not just hues. */
.tr-legend {
  display: flex; flex-wrap: wrap; gap: 4px 6px;
  border-top: 1px solid var(--border);
  padding: 8px 14px;
}
.tr-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2px 7px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted);
  cursor: pointer;
}
.tr-legend-item:hover { border-color: var(--border-strong); color: var(--text); }
.tr-legend-item.is-on { color: var(--text); }
.tr-legend-item:not(.is-on) { opacity: 0.45; }
.tr-swatch { width: 8px; height: 8px; border-radius: 1px; display: inline-block; flex: none; }
.table .tr-swatch { margin-right: 7px; vertical-align: middle; }

.tr-drift.active, .tr-view button.active { color: var(--accent); }
.tr-tables { margin-bottom: 12px; }

@media (max-width: 1100px) {
  .tr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .tr-gl { height: 360px; }
  .tr-flat canvas { height: 320px; }
}

@media (max-width: 640px) {
  .tr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-panel .panel-head { flex-direction: column; align-items: flex-start; }
  .tr-panel .panel-tools { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .tr-gl { height: 300px; }
  .tr-flat { padding: 10px; }
  .tr-flat canvas { height: 260px; }
  .tr-foot { font-size: 11px; padding: 8px 10px 10px; }
  .tr-readout { padding: 6px 10px; font-size: 10.5px; }
  .tr-grid { min-width: 560px; }
  .tr-cell { height: 26px; font-size: 10px; }
  .chart-box.short { height: 110px; }
}

/* Readout bar: the hover figure on the left, the ramp's key on the right. */
.tr-readout .tr-slot { min-width: 0; }
.tr-scale-inline {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--text-faint); white-space: nowrap;
}
.tr-scale-inline i {
  width: 74px; height: 5px; border-radius: var(--radius);
  background: linear-gradient(to right, var(--loss), var(--surface-3), var(--accent));
}


/* ═══════════════════════════════════════════════════════════════
   System Performance — SIMULATION LAB (page-scoped).
   Every colour is a token; the only "palette" here is one amber
   ramp built with color-mix(), because percentile bands are an
   ordered scale, not categories.
   ═══════════════════════════════════════════════════════════════ */

.kpi-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 12px; }
.kpi-grid-6 .kpi-value { font-size: 19px; }
.kpi-grid-6 .kpi-sub { line-height: 1.35; }

/* ── The honesty block: what the simulation is, next to the chart ── */
.sim-claim {
  padding: 12px 14px 13px;
  background: var(--surface-2);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
}
.sim-claim p { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; max-width: 92ch; }
.sim-claim p + p { margin-top: 8px; }
.sim-claim strong { color: var(--text); font-weight: 600; }
.sim-claim em { color: var(--text); font-style: italic; }
.sim-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 7px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#sim-horizon-words { font-family: var(--font-mono); color: var(--text); }

/* ── Controls ─────────────────────────────────────────────────── */
.sim-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
  margin-top: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.sim-control { display: flex; flex-direction: column; gap: 5px; }
.sim-control-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sim-controls .btn { margin-left: auto; }

/* ── Provenance: the run's own settings, always on screen ─────── */
.sim-provenance {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}
.sim-provenance > span {
  padding: 2px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.sim-chip { font-weight: 600; letter-spacing: 0.1em; }
.sim-chip.is-server { color: var(--accent); border-color: var(--accent) !important; }
.sim-chip.is-browser { color: var(--info); border-color: var(--info) !important; }

/* ── Chart boxes ──────────────────────────────────────────────── */
.sim-fan-box { height: 420px; }
.sim-bridge-box { height: 360px; }
.sim-dist-box { height: 278px; }
.sim-blocks-box { height: 210px; }
.sim-uw-box { height: 240px; }
.sim-fan-box canvas,
.sim-bridge-box canvas,
.sim-dist-box canvas,
.sim-blocks-box canvas,
.sim-uw-box canvas { display: block; width: 100%; height: 100%; }

/* ── Legend: identity never rests on colour alone ─────────────── */
.sim-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 2px 4px 0;
}
.sim-key { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-muted); }
.sim-key b { font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--text-faint); }
.sw { display: inline-block; width: 14px; height: 10px; border-radius: 1px; flex-shrink: 0; }
.sw-band-outer { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--surface)); }
.sw-band-inner { background: color-mix(in srgb, var(--accent) 24%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--surface)); }
.sw-line { height: 2px; background: var(--accent); }
.sw-spaghetti { height: 1px; background: color-mix(in srgb, var(--accent) 55%, var(--surface)); }

/* ── Stat rows inside panels ──────────────────────────────────── */
.sim-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 14px 0 0; }
.sim-stats.sim-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#sim-real-windows .sim-stats.sim-stats-3,
#sim-input-stats.sim-stats-3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sim-stats .kpi { padding: 9px 11px 10px; }
.sim-stats .kpi-value { font-size: 17px; margin-top: 2px; }
.sim-stats .kpi-value.accent { color: var(--accent); }
.sim-stats .kpi-sub { font-size: 10px; line-height: 1.35; }

/* ── Prose under charts ───────────────────────────────────────── */
.sim-note { margin-top: 10px; font-size: 11.5px; color: var(--text-muted); line-height: 1.6; max-width: 100ch; }
.sim-note.faint { color: var(--text-faint); font-size: 11px; }
.sim-note b { color: var(--text); font-weight: 600; font-family: var(--font-mono); }
.sim-count-line {
  margin-top: 12px;
  padding: 9px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}
.sim-count-line b { color: var(--accent); font-family: var(--font-mono); font-weight: 600; }
.sim-foot {
  padding: 11px 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.6;
}

/* ── Table twin, collapsed by default ─────────────────────────── */
.sim-table { margin-top: 12px; border-top: 1px solid var(--border); }
.sim-table > summary {
  padding: 8px 2px 7px;
  cursor: pointer;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  list-style: none;
}
.sim-table > summary::-webkit-details-marker { display: none; }
.sim-table > summary::before { content: '+ '; font-family: var(--font-mono); }
.sim-table[open] > summary::before { content: '\2212 '; }
.sim-table > summary:hover { color: var(--accent); }
.sim-table .table { font-size: 11.5px; }
.sim-table .table th:first-child, .sim-table .table td:first-child { padding-left: 2px; }

/* ── Shared tooltip ───────────────────────────────────────────── */
.sim-tip {
  position: fixed;
  z-index: 200;
  min-width: 128px;
  padding: 7px 9px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  pointer-events: none;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--overlay) 35%, transparent);
}
.sim-tip b { display: block; margin-bottom: 4px; color: var(--text); font-weight: 600; font-size: 10.5px; }
.sim-tip span { display: flex; justify-content: space-between; gap: 14px; line-height: 1.6; }
.sim-tip span i { font-style: normal; color: var(--text); font-variant-numeric: tabular-nums; }
.sim-tip span.hi i { color: var(--accent); }
.sim-tip em {
  display: block;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  font-style: normal;
  font-size: 9.5px;
  color: var(--text-faint);
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .kpi-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sim-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #sim-real-windows .sim-stats.sim-stats-3,
  #sim-input-stats.sim-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .sim-pair { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .kpi-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid-6 .kpi-value { font-size: 16px; }
  .sim-stats,
  .sim-stats.sim-stats-3,
  #sim-real-windows .sim-stats.sim-stats-3,
  #sim-input-stats.sim-stats-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-controls { gap: 10px 12px; }
  .sim-controls .btn { margin-left: 0; width: 100%; }
  .sim-fan-box { height: 320px; }
  .sim-bridge-box { height: 280px; }
  .sim-dist-box { height: 210px; }
  .sim-blocks-box { height: 190px; }
  .sim-uw-box { height: 200px; }
  .sim-claim p { font-size: 12px; }
  .sim-legend { gap: 5px 14px; }
  .sim-key b { display: none; }
  .sim-tip { display: none; }
}

@media (max-width: 420px) {
  .sim-stats,
  .sim-stats.sim-stats-3,
  #sim-real-windows .sim-stats.sim-stats-3,
  #sim-input-stats.sim-stats-3 { grid-template-columns: minmax(0, 1fr); }
  .sim-fan-box { height: 280px; }
  .sim-provenance { font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Bands and numbers render instantly; the canvases are drawn in their
     final state by sim_lab.js, so there is nothing left to suppress here
     beyond the shell's own transitions. */
  .sim-hero *, .sim-claim * { transition: none !important; animation: none !important; }
}

/* The two terrain panels sit side by side on a desktop and stack on a phone;
   in half a viewport the stage is shorter so both stay above the fold. */
@media (min-width: 1025px) {
  .sysperf-terrain .tr-gl { height: 400px; }
  .sysperf-terrain .tr-flat canvas { height: 360px; }
}

/* ── Institutional analytics (My Performance, lower half) ──────────
   Charcoal base, amber only for the strategy's current state, red only
   for losses and drawdowns. Nothing here is coloured green for being
   large: the highest-return regime looks like the others until it is
   also the current one. */
.ia-divider {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-strong);
}
.ia-divider:first-child { margin-top: 0; }
.ia-divider-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-live     { --tone: var(--gain); }
.badge-backtest { --tone: var(--text-muted); }
.badge-current  { --tone: var(--accent); }

/* .panel clips its corners, which would cut every tooltip off at the panel
   edge. These panels give that up; the 3px radius is not worth a method
   note the reader cannot open. */
.ia-panel { overflow: visible; }
.ia-note { padding: 0 14px 12px; }

/* The one affordance the spec asks for on every section: how the number
   was made. Hover or keyboard focus, no JS. */
.tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 5px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1;
  cursor: help;
  position: relative;
  vertical-align: middle;
}
.tip:hover, .tip:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
.tip-body {
  display: none;
  position: absolute;
  top: calc(100% + 7px);
  left: -8px;
  z-index: 40;
  width: min(360px, 78vw);
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--overlay) 55%, transparent);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
}
.tip:hover .tip-body, .tip:focus .tip-body, .tip:focus-within .tip-body { display: block; }

/* 01 — asset opportunity */
.ia-fit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); }
.ia-fit-card { padding: 14px; background: var(--surface); }
.ia-fit-card.lead { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.ia-fit-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ia-fit-score { margin-top: 10px; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.lead .ia-fit-score { color: var(--accent); }
.ia-fit-of { margin-left: 5px; font-size: 13px; font-weight: 400; color: var(--text-faint); }
.ia-fit-label { font-size: 11.5px; color: var(--text-muted); }
.ia-fit-rows { margin: 12px 0 0; display: grid; gap: 5px; }
.ia-fit-rows > div { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; }
.ia-fit-rows dt { color: var(--text-faint); }
.ia-fit-rows dd { margin: 0; font-family: var(--font-mono); color: var(--text); text-align: right; }
.ia-fit-foot {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
}
.ia-callout { margin: 0; padding: 11px 14px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-muted); }
.ia-callout strong { color: var(--accent); font-weight: 600; }

/* 02 — regime map */
.ia-mid { align-items: start; }
.ia-regime {
  display: grid;
  grid-template-columns: 84px 1fr 1fr;
  grid-template-rows: auto 1fr 1fr;
  gap: 1px;
  margin: 14px;
  background: var(--border);
}
.ia-regime-corner { background: var(--surface); }
.ia-regime-col, .ia-regime-row {
  display: flex;
  align-items: center;
  padding: 7px 9px;
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ia-regime-col { justify-content: center; }
.ia-regime-row { grid-column: 1; grid-row: 2; }
.ia-regime-row-2 { grid-row: 3; }
.ia-quad {
  position: relative;
  min-height: 78px;
  padding: 11px 12px;
  background: var(--surface);
}
.q-trend_low  { grid-column: 2; grid-row: 2; }
.q-trend_high { grid-column: 3; grid-row: 2; }
.q-range_low  { grid-column: 2; grid-row: 3; }
.q-range_high { grid-column: 3; grid-row: 3; }
.ia-quad.here {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--accent);
}
.ia-quad-name { font-size: 12px; color: var(--text); }
.ia-quad-share { margin-top: 3px; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
.ia-here {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.ia-here::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.ia-regime-foot {
  display: grid;
  gap: 4px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
}
.ia-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.ia-v { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.ia-warn { margin-top: 3px; font-size: 11px; color: var(--text-muted); }

/* 03 — correlation */
.ia-corr {
  width: calc(100% - 28px);
  margin: 14px 14px 0;
  border-collapse: collapse;
  table-layout: fixed;
}
.ia-corr th {
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ia-corr thead th { text-align: center; }
.ia-corr td {
  padding: 9px 8px;
  border: 1px solid var(--surface);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
  color: var(--text);
}
/* Shading is |r|, so a strong negative reads as strongly as a strong
   positive; only the hue says which direction. */
.ia-corr .pos-cell { background: color-mix(in srgb, var(--info) var(--w, 0%), var(--surface-2)); }
.ia-corr .neg-cell { background: color-mix(in srgb, var(--loss) var(--w, 0%), var(--surface-2)); }
.ia-corr .diag { background: var(--surface-3); color: var(--text-faint); }
.ia-corr .na { background: var(--surface-2); color: var(--text-faint); }
.ia-corr-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 12px 0 0;
  background: var(--border);
  border-top: 1px solid var(--border);
}
.ia-corr-cards > div { display: grid; gap: 3px; padding: 11px 14px; background: var(--surface); }
.ia-corr-cards .ia-v { margin: 0; font-size: 18px; }
.ia-corr-cards small { margin-left: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--text-faint); }

/* 04 — risk. Eight flat tiles, no gauge. */
.ia-risk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); }
.ia-risk-tile { padding: 13px 14px; background: var(--surface); }
.ia-risk-v { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.ia-risk-k {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ia-risk-s { margin-top: 2px; font-size: 10.5px; color: var(--text-faint); }

/* 05 — by regime */
.ia-regime-table tr.current td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ia-regime-table tr.current td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

.ia-footer { margin: 16px 0 4px; font-size: 10.5px; line-height: 1.6; color: var(--text-faint); }

@media (max-width: 900px) {
  .ia-fit { grid-template-columns: minmax(0, 1fr); }
  .ia-risk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ia-mid { grid-template-columns: minmax(0, 1fr); }
  .ia-regime { grid-template-columns: 58px 1fr 1fr; }
  .ia-corr-cards { grid-template-columns: minmax(0, 1fr); }
  .tip-body { left: auto; right: 0; }
}