/* charts-rail.css — Unified visual layer for /charts.
 *
 * Owns: left rail (instances), right rail (12 sections + portfolio), top strip
 *       (MarketState above the chart), chart overlay toggles, below-chart
 *       positions/pendings panels.
 *
 * Loaded LAST in templates/charts.html. Single source of truth — replaces the
 * 17 deleted polish/sec/* CSS files. Type scale and padding scale are defined
 * once at the top of this file; everything below derives from those tokens.
 *
 * Token map:
 *   --rail-fs-label:    11px   row labels
 *   --rail-fs-value:    11.5px row values (tabular-nums)
 *   --rail-fs-h3:       10.5px section title (uppercase)
 *   --rail-fs-subhead:  9.5px  subheading (uppercase)
 *   --rail-fs-hero:     14px   hero numbers
 *   --rail-fs-dim:      10px   dim/footnote
 *   --rail-pad-x:       8px    horizontal padding inside section body
 *   --rail-pad-y:       4px    vertical padding inside section body
 *   --rail-gap:         2px    inter-row gap
 *   --rail-section-gap: 4px    inter-section gap
 *   --rail-h3-h:        20px   section title height
 *   --rail-row-h:       18px   row min-height
 *   --rail-leaf-h:      46px   leaf row height (two-row)
 */

.charts-shell {
  --rail-fs-label: 11px;
  --rail-fs-value: 12px;
  --rail-fs-h3: 10.5px;
  --rail-fs-subhead: 9.5px;
  --rail-fs-hero: 14px;
  --rail-fs-dim: 10px;
  --rail-pad-x: 10px;
  --rail-pad-y: 8px;
  --rail-gap: 3px;
  --rail-section-gap: 6px;
  --rail-h3-h: 28px;
  --rail-row-h: 22px;
  --rail-leaf-h: 46px;
}

/* ════════════════════════════ RAIL CONTAINERS ════════════════════════════ */

.charts-shell .charts-rail-left,
.charts-shell .charts-rail-right {
  background: var(--surface-1);
  padding: 6px 6px 12px;
  font-size: var(--rail-fs-label);
  line-height: 1.35;
  color: var(--text-main);
  overflow-y: auto;
  /* overscroll-behavior: contain stops the scroll from chaining to the page
     when the rail hits its top/bottom — eliminates the "bounce-back" the
     user reported when scrolling past the last section. */
  overscroll-behavior: contain;
  /* overflow-anchor: none prevents the browser from re-anchoring scroll on
     content insert/remove. Combined with the JS scroll-pin in rail.js
     (line ~784) this stops re-render-induced scroll jumps. */
  overflow-anchor: none;
  /* Leave a 1px scroll-padding so the *last* section's bottom border is
     visually flush at end-of-scroll instead of being clipped by the rail's
     bottom padding when the user reaches the bottom. */
  scroll-padding-bottom: 1px;
}

/* ════════════════════════════ STICKY KPI STRIP ════════════════════════════ */
/* Pinned at the top of the right rail so the user always sees Day · Float ·
   Open · DD pool % without scrolling — even when Portfolio is collapsed.
   Painted by rail.js#updateKpiStrip from /api/charts/portfolio data. */
.charts-shell .charts-rail-right .charts-kpi-strip {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 0 0 var(--rail-section-gap);
  padding: 6px 8px;
  background: color-mix(in oklab, var(--surface-2) 92%, var(--bg-base) 8%);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
}
.charts-shell .charts-rail-right .charts-kpi-strip .kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 2px 4px;
  border-radius: 4px;
  min-width: 0;
}
.charts-shell .charts-rail-right .charts-kpi-strip .kpi-lbl {
  font: 600 9px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.charts-shell .charts-rail-right .charts-kpi-strip .kpi-val {
  font: 600 12.5px/1.1 var(--font-mono);
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  /* Lock digits to a fixed advance so live ticks don't jitter the strip. */
  font-variant-numeric: tabular-nums;
}
.charts-shell .charts-rail-right .charts-kpi-strip .kpi-val.up   { color: var(--profit); }
.charts-shell .charts-rail-right .charts-kpi-strip .kpi-val.down { color: var(--loss); }
.charts-shell .charts-rail-right .charts-kpi-strip .kpi-val.warn { color: var(--warn, #d49a2e); }
.charts-shell .charts-rail-right .charts-kpi-strip .kpi-val.dim  { color: var(--text-muted); }
.charts-shell .charts-rail-right .charts-kpi-strip.charts-kpi-strip-loading .kpi-val {
  opacity: 0.5;
}
@media (max-width: 360px) {
  .charts-shell .charts-rail-right .charts-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    padding: 5px 6px;
  }
  .charts-shell .charts-rail-right .charts-kpi-strip .kpi-val { font-size: 11px; }
  .charts-shell .charts-rail-right .charts-kpi-strip .kpi-lbl { font-size: 8.5px; }
}

/* ════════════════════════════ RIGHT-RAIL SECTIONS ════════════════════════════ */

.charts-shell .charts-rail-right .charts-section {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  margin: 0 0 var(--rail-section-gap);
  padding: 0;
  overflow: hidden;
}

.charts-shell .charts-rail-right .charts-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 28px 4px 20px;
  min-height: 28px;
  font-size: var(--rail-fs-h3);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-main);
  background: linear-gradient(to bottom,
              color-mix(in oklab, var(--surface-2) 88%, var(--surface-3, var(--surface-1)) 12%),
              var(--surface-2));
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  user-select: none;
  position: relative;
}
/* Explicit collapse chevron. Lives in the top-right padding gutter so it
   never collides with the status swatch. Was missing previously, which made
   the swatch look like it was "covering" the collapse affordance. */
.charts-shell .charts-rail-right .charts-section h3.collapsible::after {
  content: "▾";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  line-height: 1;
  color: var(--text-muted);
  pointer-events: none;
  transition: transform 0.18s ease, color 0.18s ease;
}
.charts-shell .charts-rail-right .charts-section.collapsed h3.collapsible::after {
  transform: translateY(-50%) rotate(-90deg);
}
.charts-shell .charts-rail-right .charts-section h3.collapsible:hover::after {
  color: var(--text-main);
}

/* Section status is conveyed by a tinted top edge (subtle, 2px) instead of
   the prior 3×14px left bar that looked like an orphan glyph next to the
   title. The badge on the right carries the explicit status icon. */
.charts-shell .charts-rail-right .charts-section h3 {
  border-top: 2px solid transparent;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  transition: border-top-color 0.18s ease, background 0.18s ease;
}
.charts-shell .charts-rail-right .charts-section.has-status-up   h3 {
  border-top-color: color-mix(in oklab, var(--profit) 65%, transparent);
  background: linear-gradient(to bottom,
              color-mix(in oklab, var(--profit) 6%, var(--surface-2)),
              var(--surface-2));
}
.charts-shell .charts-rail-right .charts-section.has-status-down h3 {
  border-top-color: color-mix(in oklab, var(--loss) 70%, transparent);
  background: linear-gradient(to bottom,
              color-mix(in oklab, var(--loss) 7%, var(--surface-2)),
              var(--surface-2));
}
.charts-shell .charts-rail-right .charts-section.has-status-warn h3 {
  border-top-color: color-mix(in oklab, var(--yellow) 70%, transparent);
  background: linear-gradient(to bottom,
              color-mix(in oklab, var(--yellow) 7%, var(--surface-2)),
              var(--surface-2));
}

/* Right-side status badge — rounded square (14×14) carrying a glyph that
   names the status explicitly so the indicator isn't ambiguous shape-wise.
   Sits in its own padded slot before the chevron gutter so it never bumps
   into the collapse caret. */
.charts-shell .charts-rail-right .charts-section h3 .hdr-swatch {
  margin-left: auto;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--surface-3, var(--surface-1)) 80%, transparent);
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: var(--text-muted);
  text-transform: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  flex: 0 0 auto;
}
/* Inject glyph via ::before so the JS-set text content (a number, %, etc.)
   doesn't conflict — but only when the swatch has a status class. */
.charts-shell .charts-rail-right .charts-section h3 .hdr-swatch::before {
  font-family: inherit;
}
.charts-shell .charts-rail-right .charts-section h3 .hdr-swatch.up {
  background: color-mix(in oklab, var(--profit) 18%, var(--surface-2));
  border-color: color-mix(in oklab, var(--profit) 50%, transparent);
  color: var(--profit);
}
.charts-shell .charts-rail-right .charts-section h3 .hdr-swatch.up:empty::before    { content: "▲"; }
.charts-shell .charts-rail-right .charts-section h3 .hdr-swatch.down {
  background: color-mix(in oklab, var(--loss) 18%, var(--surface-2));
  border-color: color-mix(in oklab, var(--loss) 50%, transparent);
  color: var(--loss);
  animation: hdr-pulse-down 2.2s ease-in-out infinite;
}
.charts-shell .charts-rail-right .charts-section h3 .hdr-swatch.down:empty::before  { content: "▼"; }
.charts-shell .charts-rail-right .charts-section h3 .hdr-swatch.warn {
  background: color-mix(in oklab, var(--yellow) 18%, var(--surface-2));
  border-color: color-mix(in oklab, var(--yellow) 55%, transparent);
  color: var(--yellow);
}
.charts-shell .charts-rail-right .charts-section h3 .hdr-swatch.warn:empty::before  { content: "!"; }
.charts-shell .charts-rail-right .charts-section h3 .hdr-swatch[data-empty="1"] {
  background: transparent;
  border: 1px dashed color-mix(in oklab, var(--text-muted) 60%, transparent);
  color: var(--text-muted);
  opacity: 0.6;
}
.charts-shell .charts-rail-right .charts-section h3 .hdr-swatch[data-empty="1"]:empty::before { content: "–"; }
@keyframes hdr-pulse-down {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--loss) 28%, transparent); }
  50%      { box-shadow: 0 0 0 3px color-mix(in oklab, var(--loss) 14%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .charts-shell .charts-rail-right .charts-section h3 .hdr-swatch.down { animation: none; }
}

.charts-shell .charts-rail-right .charts-section h3 .caret {
  font-size: 9px;
  color: var(--text-sub);
  margin-left: 4px;
}

.charts-shell .charts-rail-right .charts-section-body {
  display: flex;
  flex-direction: column;
  gap: var(--rail-gap);
  padding: var(--rail-pad-y) var(--rail-pad-x);
}

.charts-shell .charts-rail-right .charts-section.collapsed .charts-section-body {
  display: none;
}

/* ════════════════════════════ ROWS ════════════════════════════ */

.charts-shell .charts-rail-right .ms-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 4px 4px;
  min-height: var(--rail-row-h);
  font-size: var(--rail-fs-label);
  border: 0;
  background: transparent;
}

.charts-shell .charts-rail-right .ms-row > span:first-child {
  color: var(--text-sub);
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.charts-shell .charts-rail-right .ms-row > span:last-child {
  font-size: var(--rail-fs-value);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
  flex: 0 0 auto;
  text-align: right;
}

.charts-shell .charts-rail-right .ms-row .up    { color: var(--profit); }
.charts-shell .charts-rail-right .ms-row .down  { color: var(--loss); }
.charts-shell .charts-rail-right .ms-row .warn  { color: var(--yellow); }
.charts-shell .charts-rail-right .ms-row .dim   { color: var(--text-muted, var(--text-sub)); }
/* MarketState wall-clock staleness row — surfaces a snapshot older than the
   server's 5-min age-gate (app.py _HTF_MAX_CONTENT_AGE_MS), after a 17h-stale
   row once silently drove a directional gate. A stale verdict must not read
   as live. */
.charts-shell .charts-rail-right .ms-row.ms-stale-warn {
  color: var(--warn, #d49a2e);
  background: color-mix(in srgb, var(--warn, #d49a2e) 12%, transparent);
  border-left: 2px solid var(--warn, #d49a2e);
  padding-left: 6px; border-radius: 3px; font-weight: 600;
}
/* Directional-bias headline row — the D1/W1 trend consensus that gates trade
   side. Emphasised (larger, bold value, top rule) as the panel's primary
   directional read. */
.charts-shell .charts-rail-right .ms-row.ms-bias-row {
  font-size: 1.05em; padding: 5px 0; margin-top: 2px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
}
.charts-shell .charts-rail-right .ms-row.ms-bias-row > span:last-child { font-weight: 700; }
/* Compact legend for reading the MarketState panel (bias arrows / verdict /
   layers). Subtle, wraps freely. */
.charts-shell .charts-rail-right .ms-legend {
  font-size: 0.72em; line-height: 1.4; opacity: 0.72;
  padding: 5px 0 1px; margin-top: 4px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.06));
}

/* Fleet snapshot strip placement. The strip is a direct child of the
   .charts-shell grid but had NO grid-area — so when JS un-hid it, it
   auto-placed into an implicit cell and read as "out of place". Give it a
   dedicated full-width row (spanning all three columns) directly under the
   topbar, but ONLY when it's actually shown — so there's no empty row / extra
   gap when it's hidden. JS toggles visibility via inline `display`, so we key
   the grid change off that with :has() (no JS change needed):
     hidden  → style contains "display"  → :not() fails → base 3-row grid
     shown   → inline display cleared     → :not() matches → 4-row grid w/ fleet
   Mobile keeps the same areas (only @media print remaps to single-column, and
   print hides the rails), so this is safe across breakpoints. */
.charts-shell:has(> .charts-fleet-strip:not([style*="display"])) {
  grid-template-rows: 56px auto 1fr auto;
  grid-template-areas:
    "topbar topbar topbar"
    "fleet  fleet  fleet"
    "left   main   right"
    "left   drawer right";
}
.charts-shell > .charts-fleet-strip { grid-area: fleet; }

/* Collapsible MarketState banner (the strip above the chart). The toggle
   handle stays visible; .ms-collapsed hides the segments and shows a compact
   "MarketState" label so users can reclaim vertical space above the chart.
   State persisted to localStorage (chart.js). */
.charts-ms-strip .ms-strip-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  align-self: stretch; padding: 0 10px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-sub, #8e8e93); font: 11px/1 var(--font-sans);
  border-right: 1px solid var(--border-card);
}
.charts-ms-strip .ms-strip-toggle:hover { color: var(--text-main); }
.charts-ms-strip .ms-strip-toggle-chevron { transition: transform .15s ease; font-size: 10px; }
.charts-ms-strip .ms-strip-toggle-lbl {
  display: none; text-transform: uppercase; letter-spacing: .07em; font-size: 10px; font-weight: 600;
}
.charts-ms-strip.ms-collapsed { overflow: visible; }
.charts-ms-strip.ms-collapsed .ms-strip-toggle-chevron { transform: rotate(-90deg); }
.charts-ms-strip.ms-collapsed .ms-strip-toggle-lbl { display: inline; }
.charts-ms-strip.ms-collapsed .ms-seg { display: none; }

/* Active trading-lock banner in the MarketState panel — answers "why isn't it
   trading right now?" Prominent (loss-tinted) so a blackout reads instantly. */
.charts-shell .charts-rail-right .ms-lock-row {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 8px; padding: 6px 9px; border-radius: 6px;
  background: color-mix(in srgb, var(--loss, #ff453a) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--loss, #ff453a) 45%, transparent);
  color: var(--loss, #ff453a); font-size: 12px; font-weight: 600;
}
.charts-shell .charts-rail-right .ms-lock-row .ms-lock-lbl { text-transform: uppercase; letter-spacing: .05em; }
.charts-shell .charts-rail-right .ms-lock-row .ms-lock-reason {
  margin-left: auto; font-weight: 500; color: var(--text-main); opacity: 0.85; font-size: 11px;
}

/* Narrow right-rail drawer (mobile / small viewports): let the new MS-panel
   rows wrap and shrink instead of overflowing the drawer width. */
@media (max-width: 480px) {
  .charts-shell .charts-rail-right .ms-lock-row { flex-wrap: wrap; font-size: 11px; }
  .charts-shell .charts-rail-right .ms-lock-row .ms-lock-reason { margin-left: 0; flex-basis: 100%; }
  .charts-shell .charts-rail-right .ms-row.ms-bias-row { font-size: 1em; }
  .charts-shell .charts-rail-right .ms-legend { font-size: 0.68em; }
}

.charts-shell .charts-rail-right .ms-row.ms-row-idle {
  opacity: 0.55;
}

/* Subheadings (BY EA, DYNAMIC SIZING, SIZING BUS, etc.) */
.charts-shell .charts-rail-right .charts-subhead {
  margin: 8px 0 2px;
  padding: 4px 2px 3px;
  font-size: var(--rail-fs-subhead);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted, var(--text-sub));
  border-top: 1px dashed var(--border-subtle);
}
.charts-shell .charts-rail-right .charts-section-body > .charts-subhead:first-child {
  border-top: 0;
  margin-top: 0;
}

/* Dim/footnote */
.charts-shell .charts-rail-right .charts-dim,
.charts-shell .charts-rail-right .charts-dim * {
  color: var(--text-muted, var(--text-sub));
  font-size: var(--rail-fs-dim);
  font-weight: 400;
}

/* ---- MarketState verdict gauge --------------------------------- */
.charts-shell .charts-rail-right #rail-marketstate .ms-gauge-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px 4px;
  margin-bottom: 4px;
  background: color-mix(in oklab, var(--surface-2) 50%, transparent);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}
.charts-shell .charts-rail-right #rail-marketstate .ms-gauge-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.charts-shell .charts-rail-right #rail-marketstate .ms-gauge-cap {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-sub);
  font-weight: 700;
}
.charts-shell .charts-rail-right #rail-marketstate .ms-gauge-val {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
}
.charts-shell .charts-rail-right #rail-marketstate .ms-gauge {
  display: block;
  width: 100%;
  height: 10px;
}
.charts-shell .charts-rail-right #rail-marketstate .ms-gauge-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ════════════════════════════ PORTFOLIO HERO ════════════════════════════ */

.charts-shell .charts-rail-right #rail-portfolio .charts-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 0 6px;
  padding: 0;
}

.charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: color-mix(in oklab, var(--surface-2) 60%, transparent);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 7px 9px;
  min-height: 0;
}

.charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile.wide {
  grid-column: 1 / -1;
}

.charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .lbl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-sub);
}

.charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .lbl .swatch {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
  margin-right: 2px;
}
.charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .lbl .swatch.eff   { background: var(--accent); }
.charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .lbl .swatch.vault { background: var(--purple); }
.charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .lbl .swatch.days  { background: var(--text-muted, var(--text-sub)); }
.charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .lbl .swatch.daily { background: var(--profit); }
.charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .lbl .swatch.dd    { background: var(--yellow); }

.charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .val {
  font-size: var(--rail-fs-hero);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
  white-space: nowrap;
}
.charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .val.up   { color: var(--profit); }
.charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .val.down { color: var(--loss); }
.charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .val.dim  { color: var(--text-muted, var(--text-sub)); }

.charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .sub {
  display: flex;
  gap: 8px;
  margin-top: 2px;
  font-size: 9.5px;
  color: var(--text-sub);
}

/* DD-budget bar (horizontal split between realized + floating) */
.charts-shell .charts-rail-right #rail-portfolio .charts-hero-dd-bar {
  position: relative;
  height: 4px;
  margin-top: 3px;
  background: var(--surface-3);
  border-radius: 2px;
  overflow: hidden;
}
.charts-shell .charts-rail-right #rail-portfolio .charts-hero-dd-bar .seg-realized {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--loss);
}
.charts-shell .charts-rail-right #rail-portfolio .charts-hero-dd-bar .seg-floating {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--yellow);
}

/* ════════════════════════════ TOP MARKETSTATE STRIP ════════════════════════════ */

.charts-shell .charts-ms-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 4px;
  min-height: 26px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-subtle);
}

.charts-shell .charts-ms-strip .ms-seg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  padding: 2px 10px;
  border-right: 1px solid var(--border-subtle);
  background: transparent;
}
.charts-shell .charts-ms-strip .ms-seg:last-child { border-right: 0; }

/* Flip MS strip so VALUE is dominant (big, on top); label is muted caption below. */
.charts-shell .charts-ms-strip .ms-seg {
  align-items: flex-start;
  padding: 4px 12px;
}
.charts-shell .charts-ms-strip .ms-seg .ms-seg-val {
  order: 1;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
  line-height: 1.1;
}
.charts-shell .charts-ms-strip .ms-seg .ms-seg-lbl {
  order: 2;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, var(--text-sub));
  line-height: 1.1;
}
.charts-shell .charts-ms-strip .ms-seg .ms-seg-val.up   { color: var(--profit); }
.charts-shell .charts-ms-strip .ms-seg .ms-seg-val.down { color: var(--loss); }
.charts-shell .charts-ms-strip .ms-seg .ms-seg-val.warn { color: var(--yellow); }
.charts-shell .charts-ms-strip .ms-seg .ms-seg-val.dim  { color: var(--text-muted, var(--text-sub)); }

/* ════════════════════════════ OVERLAY BUTTONS ════════════════════════════ */

.charts-shell .charts-overlay-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 4px 8px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}

.charts-shell .charts-overlay-bar .ov-group {
  display: flex;
  gap: 4px;
  padding: 0 8px;
  border-right: 1px solid var(--border-subtle);
}
.charts-shell .charts-overlay-bar .ov-group:first-child { padding-left: 0; }
.charts-shell .charts-overlay-bar .ov-group:last-child  { border-right: 0; padding-right: 0; }

.charts-shell .charts-overlay-bar .qf-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 22px;
  min-width: 56px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-sub);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.charts-shell .charts-overlay-bar .qf-chip:hover {
  color: var(--text-main);
  border-color: var(--accent);
}
.charts-shell .charts-overlay-bar .qf-chip[aria-pressed="true"] {
  background: var(--ds-accent-tint-strong, color-mix(in oklab, var(--accent) 18%, transparent));
  color: var(--accent);
  border-color: var(--accent);
}
.charts-shell .charts-overlay-bar .qf-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ════════════════════════════ LEFT RAIL ════════════════════════════ */

.charts-shell .charts-rail-left .charts-rail-header {
  padding: 4px 4px 6px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 4px;
}

.charts-shell .charts-rail-left .charts-input {
  width: 100%;
  height: 26px;
  padding: 0 8px;
  font-size: 10.5px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-main);
}

.charts-shell .charts-rail-left .charts-quickfilters {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}

.charts-shell .charts-rail-left .charts-quickfilters .qf-chip {
  height: 20px;
  padding: 0 6px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-sub);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  cursor: pointer;
}
.charts-shell .charts-rail-left .charts-quickfilters .qf-chip[aria-pressed="true"],
.charts-shell .charts-rail-left .charts-quickfilters .qf-chip.active {
  background: var(--ds-accent-tint-strong, color-mix(in oklab, var(--accent) 18%, transparent));
  color: var(--accent);
  border-color: var(--accent);
}

.charts-shell .charts-rail-left .charts-instance-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Group header (GOLD/INDEX/FX RB etc.) */
.charts-shell .charts-rail-left .charts-instance-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 4px;
  margin: 6px 0 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-sub);
  background: transparent;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  user-select: none;
}
.charts-shell .charts-rail-left .charts-instance-group:first-child { margin-top: 0; }

.charts-shell .charts-rail-left .charts-instance-group .grp-caret {
  font-size: 9px;
  color: var(--text-sub);
}
.charts-shell .charts-rail-left .charts-instance-group .grp-name {
  color: var(--text-main);
  font-weight: 700;
}
.charts-shell .charts-rail-left .charts-instance-group .grp-count,
.charts-shell .charts-rail-left .charts-instance-group .grp-legs,
.charts-shell .charts-rail-left .charts-instance-group .grp-live {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 16px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 600;
  background: var(--surface-2);
  border-radius: 4px;
  color: var(--text-sub);
}
.charts-shell .charts-rail-left .charts-instance-group .grp-live .dot.live {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--profit);
}
.charts-shell .charts-rail-left .charts-instance-group .grp-pnl-wrap {
  margin-left: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  line-height: 1;
}
.charts-shell .charts-rail-left .charts-instance-group .grp-pnl {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.charts-shell .charts-rail-left .charts-instance-group .grp-pnl.up   { color: var(--profit); }
.charts-shell .charts-rail-left .charts-instance-group .grp-pnl.down { color: var(--loss); }
.charts-shell .charts-rail-left .charts-instance-group .grp-pnl-scope {
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 1px;
}

/* Two-row leaf — 46px tall.
 *   Row 1: [dot] [ea] [sym ...] [pnl]
 *   Row 2:        [tf-chips ...] [spark]
 * Rail is 240px; single row was too cramped for tf chips + sparkline. */
.charts-shell .charts-rail-left .charts-instance-leaf {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) 76px;
  grid-template-areas:
    "dot sym pnl"
    "dot tfs spark";
  grid-template-rows: 20px 22px;
  align-items: center;
  column-gap: 6px;
  row-gap: 0;
  padding: 2px 8px;
  min-height: var(--rail-leaf-h);
  height: var(--rail-leaf-h);
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  cursor: pointer;
  transition: background 0.12s;
}

/* Has-open leaf: extend grid with a 3rd "live" row spanning the full width
   beside the status dot. The live row carries the actual live-trade detail
   (tier · PML progress · floating P/L). Height bumps from var(--rail-leaf-h)
   to ~62px so the live row has room without crowding the meta sparkline. */
.charts-shell .charts-rail-left .charts-instance-leaf.has-open {
  grid-template-areas:
    "dot sym pnl"
    "dot tfs spark"
    "dot live live";
  grid-template-rows: 20px 22px 20px;
  height: auto;
  min-height: 62px;
  padding-bottom: 4px;
  background: color-mix(in oklab, var(--profit) 4%, transparent);
}
.charts-shell .charts-rail-left .charts-instance-leaf.has-open:hover {
  background: color-mix(in oklab, var(--profit) 8%, transparent);
}
.charts-shell .charts-rail-left .charts-instance-leaf.has-open.active {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}

/* Live-trade detail row — sits below the meta/spark row. Has a faint top
   rule + soft profit/loss tint so it visually reads as the "live now" strip
   rather than just more metadata. */
.charts-shell .charts-rail-left .charts-instance-leaf .live-row {
  grid-area: live;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  height: 20px;
  min-width: 0;
  padding-top: 2px;
  border-top: 1px dashed color-mix(in oklab, var(--profit) 22%, transparent);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--profit);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--profit) 60%, transparent);
  animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--profit) 55%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in oklab, var(--profit) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--profit) 0%, transparent); }
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-side {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-side.buy {
  color: var(--profit);
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-side.sell {
  color: var(--loss);
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-side.mixed {
  color: var(--yellow);
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  min-width: 20px;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 3px;
  background: color-mix(in oklab, var(--accent) 18%, var(--surface-2));
  color: var(--text-main);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-tier.t1 {
  background: color-mix(in oklab, var(--profit) 14%, var(--surface-2));
  border-color: color-mix(in oklab, var(--profit) 35%, transparent);
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-tier.t2 {
  background: color-mix(in oklab, var(--yellow) 16%, var(--surface-2));
  border-color: color-mix(in oklab, var(--yellow) 40%, transparent);
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-tier.t3,
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-tier.t4,
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-tier.t5 {
  background: color-mix(in oklab, var(--loss) 18%, var(--surface-2));
  border-color: color-mix(in oklab, var(--loss) 40%, transparent);
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-pml {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1 1 auto;
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-prot-group {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-prot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 3px;
  border: 1px solid transparent;
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-prot.be {
  color: #ffd60a;
  background: color-mix(in oklab, #ffd60a 12%, var(--surface-2));
  border-color: color-mix(in oklab, #ffd60a 35%, transparent);
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-prot.tr {
  color: var(--profit);
  background: color-mix(in oklab, var(--profit) 10%, var(--surface-2));
  border-color: color-mix(in oklab, var(--profit) 35%, transparent);
}
html.light .charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-prot.be {
  color: #a68500;
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-float,
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-tier,
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-side,
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-prot-group,
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-pulse {
  flex: 0 0 auto;
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-pml-cap {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-pml-bar {
  display: block;
  height: 4px;
  width: 100%;
  background: var(--surface-3);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-pml-fill {
  display: block;
  height: 100%;
  background: color-mix(in oklab, var(--profit) 75%, transparent);
  border-radius: 2px;
  transition: width 0.4s ease, background 0.4s ease;
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-pml-warn .lt-pml-fill {
  background: color-mix(in oklab, var(--yellow) 80%, transparent);
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-pml-urgent .lt-pml-fill {
  background: color-mix(in oklab, var(--loss) 85%, transparent);
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-pml-txt {
  font-size: 9.5px;
  color: var(--text-sub);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-pml-empty .lt-pml-fill {
  background: var(--surface-3);
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-float {
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
  padding: 0 5px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 3px;
  background: color-mix(in oklab, var(--surface-2) 70%, transparent);
  border: 1px solid var(--border-subtle);
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-float.up {
  color: var(--profit);
  border-color: color-mix(in oklab, var(--profit) 45%, transparent);
  background: color-mix(in oklab, var(--profit) 10%, var(--surface-2));
}
.charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-float.down {
  color: var(--loss);
  border-color: color-mix(in oklab, var(--loss) 45%, transparent);
  background: color-mix(in oklab, var(--loss) 10%, var(--surface-2));
}
.charts-shell .charts-rail-left .charts-instance-leaf:hover {
  background: color-mix(in oklab, var(--accent) 6%, transparent);
}

/* Active leaf — left-stripe + faint tint. SINGLE selection indicator. */
.charts-shell .charts-rail-left .charts-instance-leaf.active {
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.charts-shell .charts-rail-left .charts-instance-leaf > .dot {
  grid-area: dot;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted, var(--text-sub));
}
.charts-shell .charts-rail-left .charts-instance-leaf > .dot.live   { background: var(--profit); }
.charts-shell .charts-rail-left .charts-instance-leaf > .dot.idle   { background: var(--text-muted, var(--text-sub)); }
.charts-shell .charts-rail-left .charts-instance-leaf > .dot.stale  { background: var(--yellow); }
.charts-shell .charts-rail-left .charts-instance-leaf > .dot.hot {
  box-shadow: 0 0 6px var(--profit);
}

.charts-shell .charts-rail-left .charts-instance-leaf .name {
  display: contents;
}

.charts-shell .charts-rail-left .charts-instance-leaf .name .sym {
  grid-area: sym;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.charts-shell .charts-rail-left .charts-instance-leaf .name .top {
  display: contents;
}

.charts-shell .charts-rail-left .charts-instance-leaf .name .tf-chips {
  grid-area: tfs;
  display: flex;
  flex-direction: row;
  gap: 3px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  padding: 2px 0;
}

/* TF chips — slightly larger so 15m/30m/1h/4h is comfortably tappable on
   mobile and readable on desktop. Selected state now uses a stronger
   filled+outlined treatment with a subtle ring so the active TF reads at
   a glance instead of looking like "just another button". */
.charts-shell .charts-rail-left .tf-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 24px;
  padding: 0 6px;
  font-size: 10px;
  flex: 0 0 auto;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--surface-3, color-mix(in oklab, var(--surface-2) 70%, var(--surface-1)));
  color: var(--text-sub);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.charts-shell .charts-rail-left .tf-chip:hover {
  color: var(--text-main);
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, var(--surface-2));
}
.charts-shell .charts-rail-left .tf-chip.selected,
.charts-shell .charts-rail-left .tf-chip[aria-pressed="true"] {
  background: var(--accent);
  color: var(--text-on-accent, #fff);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 24%, transparent);
}
.charts-shell .charts-rail-left .tf-chip.has-pml {
  box-shadow: inset 0 -2px 0 var(--purple);
}
.charts-shell .charts-rail-left .tf-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.charts-shell .charts-rail-left .charts-instance-leaf .name .tier-badge {
  display: none; /* tier shown via P/L row only — leaf is single-line */
}

.charts-shell .charts-rail-left .charts-instance-leaf .name .meta {
  grid-area: spark;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 22px;
  min-width: 0;
}

.charts-shell .charts-rail-left .charts-instance-leaf .name .meta .inst-spark {
  display: block;
  width: 72px;
  height: 20px;
}

.charts-shell .charts-rail-left .charts-instance-leaf .name .meta .meta-text {
  display: none; /* status text suppressed; spark + status dot carry liveness */
}

.charts-shell .charts-rail-left .charts-instance-leaf .rail-right {
  grid-area: pnl;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  width: 100%;
}
.charts-shell .charts-rail-left .charts-instance-leaf .rail-right .pnl.up   { color: var(--profit); }
.charts-shell .charts-rail-left .charts-instance-leaf .rail-right .pnl.down { color: var(--loss); }
.charts-shell .charts-rail-left .charts-instance-leaf .rail-right .pnl-today {
  display: none; /* realized chip hidden on single-row to avoid clutter */
}

/* "Show N empty" / "Hide empty" toggle */
.charts-shell .charts-rail-left .charts-instance-more {
  padding: 4px 8px;
  font-size: 9.5px;
  color: var(--text-sub);
  cursor: pointer;
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
}
.charts-shell .charts-rail-left .charts-instance-more:hover {
  color: var(--accent);
}

/* ════════════════════════════ TOPBAR ════════════════════════════ */

.charts-shell .charts-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-subtle);
  min-height: 36px;
}

.charts-shell .charts-topbar-left,
.charts-shell .charts-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.charts-shell .charts-topbar-right { margin-left: auto; }

.charts-shell .charts-instance-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: 0.02em;
}

.charts-shell .charts-meta {
  font-size: 10px;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.charts-shell .charts-stream-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--profit);
  display: inline-block;
}

/* Hide the duplicate Bal/Eq/Day widget — Portfolio rail covers this. */
.charts-shell #charts-account-balance,
.charts-shell .charts-account-balance {
  display: none !important;
}

/* ════════════════════════════ BELOW-CHART ORDERS ════════════════════════════ */

.charts-shell #charts-orders-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface-1);
  border-top: 1px solid var(--border-subtle);
}

.charts-shell .charts-orders-panel {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
}
.charts-shell .charts-orders-panel .charts-section h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  min-height: 20px;
  height: 20px;
  margin: 0;
  font-size: var(--rail-fs-h3);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-sub);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-subtle);
}
.charts-shell .charts-orders-panel .charts-section-body {
  padding: 4px 8px;
  font-size: var(--rail-fs-label);
  font-variant-numeric: tabular-nums;
}
.charts-shell .charts-orders-panel .row-pos {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px dashed var(--border-subtle);
}
.charts-shell .charts-orders-panel .row-pos:last-child { border-bottom: 0; }
.charts-shell .charts-orders-panel .row-pos .side {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 5px;
  font-size: 9.5px;
  font-weight: 700;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--text-sub);
}
.charts-shell .charts-orders-panel .row-pos .side.buy {
  background: color-mix(in oklab, var(--profit) 18%, transparent);
  color: var(--profit);
}
.charts-shell .charts-orders-panel .row-pos .side.sell {
  background: color-mix(in oklab, var(--loss) 18%, transparent);
  color: var(--loss);
}
.charts-shell .charts-orders-panel .row-pos .pnl.up   { color: var(--profit); }
.charts-shell .charts-orders-panel .row-pos .pnl.down { color: var(--loss); }
.charts-shell .charts-orders-panel .empty-mini {
  padding: 8px 0;
  text-align: center;
  color: var(--text-muted, var(--text-sub));
  font-size: var(--rail-fs-dim);
}

/* ════════════════════════════ NOTICES / MISC ════════════════════════════ */

.charts-shell .charts-rail-right .empty-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: var(--rail-fs-dim);
  color: var(--text-muted, var(--text-sub));
  text-align: center;
  background: color-mix(in oklab, var(--surface-2) 40%, transparent);
  border: 1px dashed color-mix(in oklab, var(--text-muted) 30%, transparent);
  border-radius: 5px;
  letter-spacing: 0.02em;
}
.charts-shell .charts-rail-right .empty-mini::before {
  content: "○";
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.6;
}

/* Rich empty-mini — two-line layout: head label + sub-detail. Used by
   Last Decisions ("No decisions in 24h · last: PLACE · 3d 6h ago") and
   Armed Systems ("Armed · idle" + pattern chips). Replaces the cramped
   single-line dashed pill with a small card. */
.charts-shell .charts-rail-right .empty-mini.empty-mini-rich {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
  text-align: left;
}
.charts-shell .charts-rail-right .empty-mini.empty-mini-rich::before {
  display: none;
}
.charts-shell .charts-rail-right .empty-mini-rich .em-head {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-sub);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.charts-shell .charts-rail-right .empty-mini-rich .em-head::before {
  content: "○";
  font-size: 9px;
  color: var(--text-muted);
  opacity: 0.7;
}
.charts-shell .charts-rail-right .empty-mini-rich .em-sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 10.5px;
  color: var(--text-main);
}
.charts-shell .charts-rail-right .empty-mini-rich .em-sub-lbl {
  font-size: 9.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.charts-shell .charts-rail-right .empty-mini-rich .em-pill {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-main);
  background: color-mix(in oklab, var(--accent) 16%, var(--surface-2));
  border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent);
  border-radius: 3px;
}
.charts-shell .charts-rail-right .empty-mini-rich .em-sub-rel {
  font-size: 10.5px;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
}
.charts-shell .charts-rail-right .empty-mini-rich .em-chip {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-sub);
  background: color-mix(in oklab, var(--surface-3) 70%, transparent);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
}
.charts-shell .charts-rail-right .empty-mini-rich.em-armed .em-chips {
  gap: 4px;
}

.charts-shell .charts-rail-right .charts-section.empty {
  display: none;
}

/* Decision cards — flat with left stripe by verdict */
.charts-shell .charts-rail-right .decision-card,
.charts-shell .charts-rail-right .armed-card,
.charts-shell .charts-rail-right .basket-cluster {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 5px 4px 5px 10px;
  background: color-mix(in oklab, var(--surface-2) 35%, transparent);
  border: 0;
  border-left: 2px solid var(--border-subtle);
  border-radius: 0 4px 4px 0;
}

/* Pattern row — single-line compact layout (2026-05-20). Was column flex
   with each pattern eating ~70px. New grid: dot · code · counts · last · strip
   on one line so the whole 7-pattern list fits in ~200px instead of 549px. */
.charts-shell .charts-rail-right .pat-row {
  display: grid;
  grid-template-columns: 8px 52px auto 1fr auto;
  align-items: center;
  column-gap: 5px;
  padding: 2px 0 2px 6px;
  margin: 0;
  background: transparent;
  border: 0;
  border-left: 2px solid var(--border-subtle);
  border-radius: 0;
  font-size: 10.5px;
  line-height: 1.15;
}
/* Pat-row variant carrying a per-EA SVG diagram. Adds a fixed cell so
   the diagram never crowds the counts/last columns at narrow widths. */
.charts-shell .charts-rail-right .pat-row.pat-row-with-svg {
  grid-template-columns: 8px 52px 60px auto 1fr auto;
}
.charts-shell .charts-rail-right .pat-row .ea-pat-cap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 16px;
  background: color-mix(in oklab, var(--surface-2) 60%, transparent);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  overflow: hidden;
}
.charts-shell .charts-rail-right .pat-row .ea-pat-svg {
  width: 100%; height: 100%; display: block;
}
@media (max-width: 420px) {
  /* On narrow phones, drop the .pat-last age chip onto the strip line so the
     diagram cell still has horizontal room. The strip already spans 1/-1. */
  .charts-shell .charts-rail-right .pat-row.pat-row-with-svg {
    grid-template-columns: 8px 48px 56px auto 1fr;
  }
  .charts-shell .charts-rail-right .pat-row.pat-row-with-svg .pat-last {
    display: none;
  }
  .charts-shell .charts-rail-right .pat-row.pat-row-with-svg .ea-pat-cap {
    width: 56px;
  }
}
.charts-shell .charts-rail-right .pat-row .pat-code {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-sub);
}
.charts-shell .charts-rail-right .pat-row .pat-counts {
  font-variant-numeric: tabular-nums;
  color: var(--text-sub);
}
.charts-shell .charts-rail-right .pat-row .pat-counts .pat-vetos {
  color: var(--loss);
}
.charts-shell .charts-rail-right .pat-row .pat-last {
  font-size: 10px;
  text-align: right;
  white-space: nowrap;
}
.charts-shell .charts-rail-right .pat-row .pat-strip {
  grid-column: 1 / -1;
  width: 100%;
  height: 6px;
  opacity: 0.65;
}
/* hot patterns (recent fire) get a brighter row.
   Pattern dots carry an a11y "shape channel" in addition to color so
   colorblind users can distinguish state without relying on hue (WCAG 1.4.1):
     pat-hot    — solid disc + outer halo + inner white pip (firing)
     pat-fired  — plain solid disc (fired earlier)
     pat-vetoed — solid disc + diagonal slash overlay (blocked)
     pat-dim    — hollow ring, transparent fill (idle / disarmed)
   Box-size is preserved across all states so row layout never reflows. */
.charts-shell .charts-rail-right .pat-row .pat-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
  position: relative;
  background: var(--text-muted);
  box-sizing: border-box;
}
.charts-shell .charts-rail-right .pat-row .pat-dot::before,
.charts-shell .charts-rail-right .pat-row .pat-dot::after {
  content: none;
}
.charts-shell .charts-rail-right .pat-row .pat-dot.pat-hot    { background: var(--profit); box-shadow: 0 0 0 2px color-mix(in oklab, var(--profit) 25%, transparent); }
.charts-shell .charts-rail-right .pat-row .pat-dot.pat-fired  { background: var(--profit); }
.charts-shell .charts-rail-right .pat-row .pat-dot.pat-vetoed { background: var(--loss); }
.charts-shell .charts-rail-right .pat-row .pat-dot.pat-dim    { background: var(--text-muted); opacity: 0.4; }

/* Shape channel: pat-hot gets a centered light pip — reads as a target/bullseye
   and stays distinct from plain pat-fired at 8px. The pip is white in both
   themes because --profit and --loss are saturated enough for white to pop. */
.charts-shell .charts-rail-right .pat-row .pat-dot.pat-hot::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.92;
  pointer-events: none;
}

/* Shape channel: pat-vetoed gets a diagonal strike-through overlay.
   Overflows the 8px box slightly so the slash reads cleanly at small sizes;
   does not affect layout (positioned/overflow:visible on the dot). */
.charts-shell .charts-rail-right .pat-row .pat-dot.pat-vetoed { overflow: visible; }
.charts-shell .charts-rail-right .pat-row .pat-dot.pat-vetoed::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 1.5px;
  margin: -0.75px 0 0 -6px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 1px;
  pointer-events: none;
}

/* Shape channel: pat-dim becomes a hollow ring — no fill, muted border.
   Visually obvious "off" at any size and degrades gracefully in any theme. */
.charts-shell .charts-rail-right .pat-row .pat-dot.pat-dim {
  background: transparent;
  border: 1.5px solid var(--text-muted);
  opacity: 0.6;
}
.charts-shell .charts-rail-right .pat-hdr {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 6px 0 3px 4px;
  margin: 4px 0 2px;
  border-bottom: 1px solid var(--border-subtle);
}
.charts-shell .charts-rail-right .charts-section-body > .pat-hdr:first-child {
  margin-top: 0;
  padding-top: 2px;
}

/* Per-EA intel card at top of #rail-armed (renderEaIntel in rail.js ~L3110). */
.charts-shell .charts-rail-right .intel-card {
  background: color-mix(in oklab, var(--surface-2) 55%, transparent);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid color-mix(in oklab, var(--accent) 70%, transparent);
  border-radius: 0 6px 6px 0;
  padding: 5px 8px 6px;
  margin: 2px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.charts-shell .charts-rail-right .intel-card.intel-rb { border-left-color: color-mix(in oklab, var(--accent) 80%, transparent); }
.charts-shell .charts-rail-right .intel-card.intel-dh { border-left-color: color-mix(in oklab, #f5a524 80%, transparent); }
.charts-shell .charts-rail-right .intel-card.intel-gs { border-left-color: color-mix(in oklab, var(--profit) 70%, transparent); }
.charts-shell .charts-rail-right .intel-hdr {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  text-transform: uppercase;
  padding-bottom: 3px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border-subtle);
}
.charts-shell .charts-rail-right .intel-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  min-height: 16px;
}
.charts-shell .charts-rail-right .intel-row.intel-trig { font-weight: 600; }
.charts-shell .charts-rail-right .intel-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.charts-shell .charts-rail-right .intel-val {
  font-size: 11px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.charts-shell .charts-rail-right .intel-val.up   { color: var(--profit); }
.charts-shell .charts-rail-right .intel-val.warn { color: #f5a524; }
.charts-shell .charts-rail-right .intel-val.dim  { color: var(--text-muted); }
.charts-shell .charts-rail-right .intel-dist {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--surface-3) 60%, transparent);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}
.charts-shell .charts-rail-right .intel-dist.warn {
  color: #f5a524;
  background: color-mix(in oklab, #f5a524 14%, transparent);
  border-color: color-mix(in oklab, #f5a524 35%, transparent);
}
.charts-shell .charts-rail-right .intel-dist.muted { opacity: 0.75; }

/* Protection arm-state pills (BE/PML/TRAIL/DD). Compact tile look matching
   pattern rows but with explicit "ARMED" / "idle" pills. */
.charts-shell .charts-rail-right .pat-row.prot-row {
  grid-template-columns: 10px 56px 1fr auto;
  padding: 4px 6px 4px 8px;
  background: color-mix(in oklab, var(--surface-2) 35%, transparent);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid var(--border-subtle);
  border-radius: 0 5px 5px 0;
  margin: 2px 0;
}
.charts-shell .charts-rail-right .pat-row.prot-row.armed-on {
  border-left-color: var(--profit);
  background: linear-gradient(to right,
              color-mix(in oklab, var(--profit) 5%, var(--surface-2)) 0%,
              var(--surface-2) 60%);
}
.charts-shell .charts-rail-right .pat-state {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.charts-shell .charts-rail-right .pat-state.on  { color: var(--profit); }
.charts-shell .charts-rail-right .pat-state.off { color: var(--text-muted); }
.charts-shell .charts-rail-right .armed-age-chip {
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  padding: 1px 5px;
  border-radius: 3px;
  background: color-mix(in oklab, var(--surface-3, var(--surface-1)) 80%, transparent);
  border: 1px solid var(--border-subtle);
  color: var(--text-sub);
  white-space: nowrap;
}
.charts-shell .charts-rail-right .armed-age-chip.armed-age-idle {
  border-style: dashed;
  opacity: 0.6;
}
.charts-shell .charts-rail-right .decision-card.verdict-allow,
.charts-shell .charts-rail-right .armed-card.armed-on { border-left-color: var(--profit); }
.charts-shell .charts-rail-right .decision-card.verdict-veto  { border-left-color: var(--loss); }
.charts-shell .charts-rail-right .decision-card.verdict-info  { border-left-color: var(--accent); }
.charts-shell .charts-rail-right .decision-card.verdict-skip  { border-left-color: var(--text-muted, var(--text-sub)); }

/* ═════════════════════════ NEWS SECTION ═════════════════════════════ */
/* Live blackout banner — red-tinted card with pulsing dot. Top of news. */
.charts-shell .charts-rail-right #rail-news .news-lock-banner {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  margin: 0 0 6px;
  background: color-mix(in oklab, var(--loss) 10%, var(--surface-2));
  border: 1px solid color-mix(in oklab, var(--loss) 45%, transparent);
  border-left: 3px solid var(--loss);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.35;
}
.charts-shell .charts-rail-right #rail-news .news-lock-dot {
  width: 10px; height: 10px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--loss);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--loss) 35%, transparent);
  animation: news-lock-pulse 1.6s ease-in-out infinite;
}
.charts-shell .charts-rail-right #rail-news .news-lock-body strong { color: var(--text-main); }
.charts-shell .charts-rail-right #rail-news .news-lock-until {
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 0.02em;
}
@keyframes news-lock-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--loss) 35%, transparent); }
  50%      { box-shadow: 0 0 0 4px color-mix(in oklab, var(--loss) 12%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .charts-shell .charts-rail-right #rail-news .news-lock-dot { animation: none; }
}

/* "Next print" summary tile — tier-coloured, prominent. Sits below the lock
   banner (or at top if no lock) so the user always sees what's coming next. */
.charts-shell .charts-rail-right #rail-news .news-summary {
  margin: 0 0 6px;
}
.charts-shell .charts-rail-right #rail-news .news-next-chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 9px;
  background: color-mix(in oklab, var(--surface-2) 55%, transparent);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--text-muted);
  border-radius: 6px;
}
.charts-shell .charts-rail-right #rail-news .news-next-chip.tier-high {
  border-left-color: var(--loss);
  background: linear-gradient(to right,
              color-mix(in oklab, var(--loss) 7%, var(--surface-2)) 0%,
              var(--surface-2) 55%);
}
.charts-shell .charts-rail-right #rail-news .news-next-chip.tier-mid {
  border-left-color: var(--yellow);
  background: linear-gradient(to right,
              color-mix(in oklab, var(--yellow) 6%, var(--surface-2)) 0%,
              var(--surface-2) 55%);
}
.charts-shell .charts-rail-right #rail-news .news-next-chip.tier-low {
  border-left-color: color-mix(in oklab, var(--text-muted) 70%, transparent);
}
.charts-shell .charts-rail-right #rail-news .news-next-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-main);
  min-width: 0;
}
.charts-shell .charts-rail-right #rail-news .news-next-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.charts-shell .charts-rail-right #rail-news .news-next-meta {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
}
.charts-shell .charts-rail-right #rail-news .news-next-eta {
  font-weight: 700;
  color: var(--text-main);
}

/* Group label: "Upcoming" / "Recent" subheads — small caps separators */
.charts-shell .charts-rail-right #rail-news .news-group-label {
  margin: 8px 0 2px;
  padding: 2px 2px 1px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
}
.charts-shell .charts-rail-right #rail-news .news-group-label:first-of-type { margin-top: 4px; }

/* Tier label pill (T1/T2/T3) — colored chip, monospace */
.charts-shell .charts-rail-right #rail-news .news-tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 16px;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-family: SF Mono, ui-monospace, monospace;
  background: color-mix(in oklab, var(--text-muted) 18%, var(--surface-2));
  color: var(--text-muted);
  border: 1px solid color-mix(in oklab, var(--text-muted) 30%, transparent);
}
.charts-shell .charts-rail-right #rail-news .tier-high .news-tier,
.charts-shell .charts-rail-right #rail-news .news-next-chip.tier-high .news-tier {
  background: color-mix(in oklab, var(--loss) 22%, var(--surface-2));
  color: var(--loss);
  border-color: color-mix(in oklab, var(--loss) 45%, transparent);
}
.charts-shell .charts-rail-right #rail-news .tier-mid .news-tier,
.charts-shell .charts-rail-right #rail-news .news-next-chip.tier-mid .news-tier {
  background: color-mix(in oklab, var(--yellow) 22%, var(--surface-2));
  color: var(--yellow);
  border-color: color-mix(in oklab, var(--yellow) 45%, transparent);
}
.charts-shell .charts-rail-right #rail-news .tier-low .news-tier,
.charts-shell .charts-rail-right #rail-news .news-next-chip.tier-low .news-tier {
  background: color-mix(in oklab, var(--text-sub) 16%, var(--surface-2));
  color: var(--text-sub);
  border-color: color-mix(in oklab, var(--text-sub) 30%, transparent);
}

/* News row — same flex layout as before but tighter and tier-tinted left edge */
.charts-shell .charts-rail-right .news-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 6px 3px 8px;
  margin: 1px 0;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 3px;
  font-size: var(--rail-fs-label);
  line-height: 1.2;
  transition: background-color 0.15s ease;
}
.charts-shell .charts-rail-right .news-row:hover {
  background: color-mix(in oklab, var(--surface-2) 50%, transparent);
}
.charts-shell .charts-rail-right .news-row.tier-high { border-left-color: color-mix(in oklab, var(--loss) 55%, transparent); }
.charts-shell .charts-rail-right .news-row.tier-mid  { border-left-color: color-mix(in oklab, var(--yellow) 55%, transparent); }
.charts-shell .charts-rail-right .news-row.tier-low  { border-left-color: color-mix(in oklab, var(--text-muted) 25%, transparent); }
.charts-shell .charts-rail-right .news-row .news-tier { flex: 0 0 auto; }
.charts-shell .charts-rail-right .news-row .dec-dir {
  flex: 0 0 auto;
  width: 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}
.charts-shell .charts-rail-right .news-row .dec-dir.up   { color: var(--profit); }
.charts-shell .charts-rail-right .news-row .dec-dir.down { color: var(--loss); }
.charts-shell .charts-rail-right .news-row .news-headline {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-main);
  font-weight: 500;
}
.charts-shell .charts-rail-right .news-row .news-when-block {
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}
.charts-shell .charts-rail-right .news-row .news-when { white-space: nowrap; }
.charts-shell .charts-rail-right .news-clock { flex: 0 0 auto; }
.charts-shell .charts-rail-right .news-clock.soon { color: var(--loss); }
.charts-shell .charts-rail-right .news-clock.hour { color: var(--yellow); }
.charts-shell .charts-rail-right .news-clock.far,
.charts-shell .charts-rail-right .news-clock.past { color: var(--text-muted); }

/* ---- Daily-growth arrow chip (2026-05-20) ------------------------ */
.charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .daily-arrow {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
}
.charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .daily-arrow.up   { color: var(--profit); }
.charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .daily-arrow.down { color: var(--loss); }
.charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .daily-arrow.dim  { color: var(--text-muted); }
.charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .lbl { width: 100%; }

/* ---- Today gate-chip (entry-gate open/blocked) ------------------------ */
.charts-shell .charts-rail-right #rail-counters .gate-chip {
  display: grid;
  grid-template-columns: 10px auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  margin: 4px 0;
  border-radius: 5px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in oklab, var(--surface-2) 50%, transparent);
  font-size: 10.5px;
}
.charts-shell .charts-rail-right #rail-counters .gate-chip.blocked {
  border-color: color-mix(in oklab, var(--loss) 45%, transparent);
  background: linear-gradient(to right,
              color-mix(in oklab, var(--loss) 8%, var(--surface-2)) 0%,
              var(--surface-2) 55%);
}
.charts-shell .charts-rail-right #rail-counters .gate-chip.ok {
  border-color: color-mix(in oklab, var(--profit) 38%, transparent);
}
.charts-shell .charts-rail-right #rail-counters .gate-chip .gate-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}
.charts-shell .charts-rail-right #rail-counters .gate-chip.blocked .gate-dot {
  background: var(--loss);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--loss) 25%, transparent);
}
.charts-shell .charts-rail-right #rail-counters .gate-chip.ok .gate-dot {
  background: var(--profit);
}
.charts-shell .charts-rail-right #rail-counters .gate-chip .gate-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.charts-shell .charts-rail-right #rail-counters .gate-chip.blocked .gate-label { color: var(--loss); }
.charts-shell .charts-rail-right #rail-counters .gate-chip.ok      .gate-label { color: var(--profit); }
.charts-shell .charts-rail-right #rail-counters .gate-chip .gate-reason {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-sub);
}
.charts-shell .charts-rail-right #rail-counters .gate-chip .gate-age {
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}

/* ---- Today P/V/C stacked bar (2026-05-20) ------------------------ */
.charts-shell .charts-rail-right #rail-counters .pvc-bar {
  display: flex;
  height: 6px;
  width: 100%;
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface-2);
  margin: 2px 0 6px;
  border: 1px solid var(--border-subtle);
}
.charts-shell .charts-rail-right #rail-counters .pvc-seg.pvc-p { background: var(--profit); }
.charts-shell .charts-rail-right #rail-counters .pvc-seg.pvc-v { background: var(--loss); }
.charts-shell .charts-rail-right #rail-counters .pvc-seg.pvc-c { background: var(--accent); }
/* Top-veto-reasons Pareto rows: label · proportional bar · count. */
.charts-shell .charts-rail-right #rail-counters .veto-reason-row {
  display: flex; align-items: center; gap: 8px; padding: 2px 0;
}
.charts-shell .charts-rail-right #rail-counters .veto-reason-row .reason-trim {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.charts-shell .charts-rail-right #rail-counters .vr-bar {
  flex: 1 1 auto; height: 4px; min-width: 24px; border-radius: 2px; background: var(--surface-3, var(--surface-2));
}
.charts-shell .charts-rail-right #rail-counters .vr-fill {
  display: block; height: 100%; border-radius: 2px;
  background: color-mix(in oklab, var(--loss, #ed645f) 80%, transparent);
}
.charts-shell .charts-rail-right #rail-counters .vr-count {
  flex: 0 0 auto; font-variant-numeric: tabular-nums;
}
.charts-shell .charts-rail-right #rail-counters .pvc-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.charts-shell .charts-rail-right #rail-counters .pvc-dot.pvc-p { background: var(--profit); }
.charts-shell .charts-rail-right #rail-counters .pvc-dot.pvc-v { background: var(--loss); }
.charts-shell .charts-rail-right #rail-counters .pvc-dot.pvc-c { background: var(--accent); }

/* PVC stat strip — 3 stat tiles for Placed/Vetoes/Closes today. Each tile is
   a tinted card so the values read at-a-glance. .has modifier brightens the
   tile when the counter is non-zero. */
.charts-shell .charts-rail-right #rail-counters .pvc-stat-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin: 6px 0 4px;
}
.charts-shell .charts-rail-right #rail-counters .pvc-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 5px;
  background: color-mix(in oklab, var(--surface-2) 50%, transparent);
  border: 1px solid var(--border-subtle);
  min-width: 0;
}
.charts-shell .charts-rail-right #rail-counters .pvc-stat-cap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.charts-shell .charts-rail-right #rail-counters .pvc-stat-val {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
  line-height: 1.1;
}
.charts-shell .charts-rail-right #rail-counters .pvc-stat-val.up   { color: var(--profit); }
.charts-shell .charts-rail-right #rail-counters .pvc-stat-val.down { color: var(--loss); }
.charts-shell .charts-rail-right #rail-counters .pvc-stat-val.dim  { color: var(--text-muted); }
.charts-shell .charts-rail-right #rail-counters .pvc-stat-p.has {
  background: color-mix(in oklab, var(--profit) 12%, var(--surface-2));
  border-color: color-mix(in oklab, var(--profit) 35%, transparent);
}
.charts-shell .charts-rail-right #rail-counters .pvc-stat-v.has {
  background: color-mix(in oklab, var(--loss) 12%, var(--surface-2));
  border-color: color-mix(in oklab, var(--loss) 35%, transparent);
}
.charts-shell .charts-rail-right #rail-counters .pvc-stat-c.has {
  background: color-mix(in oklab, var(--accent) 12%, var(--surface-2));
  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
}

/* ---- Vault empty sub + realized-today spark (2026-05-20) -------- */
.charts-shell .charts-rail-right #rail-portfolio .vault-empty-sub {
  font-size: 10px;
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.charts-shell .charts-rail-right #rail-portfolio .realized-spark {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 6px;
}
.charts-shell .charts-rail-right #rail-portfolio .realized-spark-track {
  position: relative;
  flex: 1 1 auto;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.charts-shell .charts-rail-right #rail-portfolio .realized-spark-mid {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--border-default, var(--text-muted));
  opacity: 0.6;
  z-index: 1;
}
.charts-shell .charts-rail-right #rail-portfolio .realized-spark-fill {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 2;
}
.charts-shell .charts-rail-right #rail-portfolio .realized-spark-fill.spark-up {
  left: 50%;
  background: var(--profit);
}
.charts-shell .charts-rail-right #rail-portfolio .realized-spark-fill.spark-dn {
  right: 50%;
  background: var(--loss);
}
.charts-shell .charts-rail-right #rail-portfolio .realized-spark-fill.spark-zero {
  left: 50%;
  width: 1px !important;
  background: var(--text-muted);
}
.charts-shell .charts-rail-right #rail-portfolio .realized-spark-pct {
  flex: 0 0 auto;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Today day-progress ring (2026-05-20) ------------------------ */
.charts-shell .charts-rail-right #rail-counters .today-day-ring {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0 6px;
  border-bottom: 1px dashed var(--border-subtle);
  margin-bottom: 6px;
}
.charts-shell .charts-rail-right #rail-counters .today-day-ring svg { flex: 0 0 auto; }
.charts-shell .charts-rail-right #rail-counters .today-day-ring-arc.tone-profit { color: var(--profit); }
.charts-shell .charts-rail-right #rail-counters .today-day-ring-arc.tone-warn   { color: var(--yellow, var(--warning)); }
.charts-shell .charts-rail-right #rail-counters .today-day-ring-arc.tone-sub    { color: var(--text-sub); }
.charts-shell .charts-rail-right #rail-counters .today-day-meta { display: flex; flex-direction: column; gap: 2px; }
.charts-shell .charts-rail-right #rail-counters .today-day-pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
}
.charts-shell .charts-rail-right #rail-counters .today-day-sub {
  font-size: 10px;
  letter-spacing: 0.02em;
}

/* ---- Levels mini distance bar (2026-05-20) ----------------------- */
.charts-shell .charts-rail-right #rail-levels .lvl-pair-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-areas: "label vals" "bar bar";
  align-items: center;
  gap: 3px 8px;
  padding: 3px 0;
  border-bottom: 1px dashed var(--border-subtle);
}
.charts-shell .charts-rail-right #rail-levels .lvl-pair-row:last-child { border-bottom: 0; }
.charts-shell .charts-rail-right #rail-levels .lvl-pair-label {
  grid-area: label;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.charts-shell .charts-rail-right #rail-levels .lvl-pair-vals  {
  grid-area: vals;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.charts-shell .charts-rail-right #rail-levels .lvl-side {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--surface-2) 50%, transparent);
  border: 1px solid color-mix(in oklab, var(--border-subtle) 70%, transparent);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.charts-shell .charts-rail-right #rail-levels .lvl-side-lo {
  border-left: 2px solid color-mix(in oklab, var(--loss) 55%, transparent);
}
.charts-shell .charts-rail-right #rail-levels .lvl-side-hi {
  border-left: 2px solid color-mix(in oklab, var(--profit) 55%, transparent);
}
.charts-shell .charts-rail-right #rail-levels .lvl-mini-bar {
  grid-area: bar;
  position: relative;
  height: 4px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--loss) 25%, transparent) 0%,
    color-mix(in oklab, var(--profit) 25%, transparent) 50%,
    color-mix(in oklab, var(--loss) 25%, transparent) 100%);
  border-radius: 2px;
}
.charts-shell .charts-rail-right #rail-levels .lvl-mini-cursor {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 8px;
  background: var(--text-main);
  border-radius: 1px;
  transform: translateX(-50%);
}
.charts-shell .charts-rail-right #rail-levels .lvl-mini-bar.warn .lvl-mini-cursor { background: var(--yellow); }

/* ---- Spread thermometer (2026-05-20) ----------------------------- */
.charts-shell .charts-rail-right #rail-timing .spread-bar {
  margin: 4px 0 4px;
}
.charts-shell .charts-rail-right #rail-timing .spread-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 3px;
}
.charts-shell .charts-rail-right #rail-timing .spread-bar-lbl {
  font-size: 10.5px;
  color: var(--text-sub);
}
.charts-shell .charts-rail-right #rail-timing .spread-bar-val {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.charts-shell .charts-rail-right #rail-timing .spread-bar-val.warn { color: var(--yellow); }
.charts-shell .charts-rail-right #rail-timing .spread-bar-val.down { color: var(--loss); }
.charts-shell .charts-rail-right #rail-timing .spread-bar-track {
  position: relative;
  height: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  overflow: hidden;
}
.charts-shell .charts-rail-right #rail-timing .spread-bar-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--profit);
  border-radius: 3px 0 0 3px;
}
.charts-shell .charts-rail-right #rail-timing .spread-bar-fill.warn { background: var(--yellow); }
.charts-shell .charts-rail-right #rail-timing .spread-bar-fill.down { background: var(--loss); }
.charts-shell .charts-rail-right #rail-timing .spread-bar-tick {
  position: absolute;
  top: -1px;
  width: 1.5px;
  height: 10px;
  background: var(--text-muted);
}
.charts-shell .charts-rail-right #rail-timing .spread-bar-tick.warn { background: var(--yellow); }
.charts-shell .charts-rail-right #rail-timing .spread-bar-tick.wide { background: var(--loss); }
.charts-shell .charts-rail-right #rail-timing .spread-bar-legend {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ---- Cycle zone banner (2026-05-22, Round 11) --------------------
   Loud-but-compact strip that calls out when the EA is *inside* a close
   zone (daily soft/hard, weekly soft/hard). Rendered above the topTile so
   the user sees it before scanning the dial + week strip. Pulses subtly
   on hard zones so it doesn't blend into static rail content. */
.charts-shell .charts-rail-right #rail-cycle .cycle-zone-banner {
  padding: 8px 10px;
  margin: 0 0 8px;
  border-radius: 6px;
  border-left: 4px solid var(--yellow);
  background: color-mix(in oklab, var(--yellow) 14%, var(--surface-2));
}
.charts-shell .charts-rail-right #rail-cycle .cycle-zone-banner.zone-hard {
  border-left-color: var(--loss);
  background: color-mix(in oklab, var(--loss) 14%, var(--surface-2));
  animation: zone-pulse-hard 2.4s ease-in-out infinite;
}
.charts-shell .charts-rail-right #rail-cycle .cycle-zone-banner.zone-soft {
  border-left-color: var(--yellow);
  background: color-mix(in oklab, var(--yellow) 12%, var(--surface-2));
}
@keyframes zone-pulse-hard {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--loss) 0%, transparent); }
  50%      { box-shadow: 0 0 0 2px color-mix(in oklab, var(--loss) 35%, transparent); }
}
.charts-shell .charts-rail-right #rail-cycle .cycle-zone-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.charts-shell .charts-rail-right #rail-cycle .cycle-zone-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-main);
}
.charts-shell .charts-rail-right #rail-cycle .cycle-zone-banner.zone-hard .cycle-zone-title {
  color: var(--loss);
}
.charts-shell .charts-rail-right #rail-cycle .cycle-zone-banner.zone-soft .cycle-zone-title {
  color: var(--yellow);
}
.charts-shell .charts-rail-right #rail-cycle .cycle-zone-sub {
  font-size: 10px;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
}
.charts-shell .charts-rail-right #rail-cycle .cycle-zone-sub strong {
  color: var(--text-main);
  font-weight: 700;
}

/* ---- Weekly Cycle compact widget (2026-05-20) -------------------- */
.charts-shell .charts-rail-right #rail-cycle .cycle-top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 2px 0 6px;
}
.charts-shell .charts-rail-right #rail-cycle .cycle-phase-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.charts-shell .charts-rail-right #rail-cycle .cycle-phase-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--text-main);
  width: max-content;
  max-width: 100%;
}
.charts-shell .charts-rail-right #rail-cycle .cycle-phase-pill.up   { background: color-mix(in oklab, var(--profit) 18%, transparent); color: var(--profit); }
.charts-shell .charts-rail-right #rail-cycle .cycle-phase-pill.warn { background: color-mix(in oklab, var(--yellow) 18%, transparent); color: var(--yellow); }
.charts-shell .charts-rail-right #rail-cycle .cycle-phase-pill.down { background: color-mix(in oklab, var(--loss) 18%, transparent);   color: var(--loss); }
.charts-shell .charts-rail-right #rail-cycle .cycle-phase-pill.dim  { background: var(--surface-2); color: var(--text-muted); }
.charts-shell .charts-rail-right #rail-cycle .cycle-phase-cap {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.charts-shell .charts-rail-right #rail-cycle .cycle-day-clock {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
}
.charts-shell .charts-rail-right #rail-cycle .cycle-week-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
.charts-shell .charts-rail-right #rail-cycle .cycle-week-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.charts-shell .charts-rail-right #rail-cycle .cycle-week-strip svg { width: 100%; height: auto; }
.charts-shell .charts-rail-right #rail-cycle .cycle-gates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  border-top: 1px dashed var(--border-subtle);
  padding-top: 4px;
}
.charts-shell .charts-rail-right #rail-cycle .cycle-gate-row {
  display: grid;
  grid-template-columns: 8px 1fr auto auto;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.charts-shell .charts-rail-right #rail-cycle .cycle-gate-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
}
.charts-shell .charts-rail-right #rail-cycle .cycle-gate-dot.up   { background: var(--profit); }
.charts-shell .charts-rail-right #rail-cycle .cycle-gate-dot.warn { background: var(--yellow); }
.charts-shell .charts-rail-right #rail-cycle .cycle-gate-dot.down { background: var(--loss); }
.charts-shell .charts-rail-right #rail-cycle .cycle-gate-name { color: var(--text-sub); }
.charts-shell .charts-rail-right #rail-cycle .cycle-gate-when { color: var(--text-muted); font-size: 10px; }
.charts-shell .charts-rail-right #rail-cycle .cycle-gate-eta { font-weight: 600; }
.charts-shell .charts-rail-right #rail-cycle .cycle-gate-eta.up   { color: var(--profit); }
.charts-shell .charts-rail-right #rail-cycle .cycle-gate-eta.warn { color: var(--yellow); }
.charts-shell .charts-rail-right #rail-cycle .cycle-gate-eta.down { color: var(--loss); }

/* ---- Timing Bid/Ask compact ladder (2026-05-20, tile-pair 2026-05-22) ----
   BID/ASK render as paired tiles so they read as "the two sides of the same
   quote" instead of two floating numbers separated by an arrow. Each tile
   has its own subtle background tint (loss/profit) for instant left/right
   recognition; the ↔ separator sits in a neutral gap. */
.charts-shell .charts-rail-right #rail-timing .bid-ask-strip {
  display: grid;
  grid-template-columns: 1fr 18px 1fr;
  align-items: stretch;
  gap: 6px;
  padding: 6px 0 8px;
  margin: 0 0 2px;
  border-bottom: 1px dashed var(--border-subtle);
}
.charts-shell .charts-rail-right #rail-timing .bidask-cell {
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
}
.charts-shell .charts-rail-right #rail-timing .bidask-bid {
  background: color-mix(in oklab, var(--loss) 8%, var(--surface-2));
  border-color: color-mix(in oklab, var(--loss) 22%, var(--border-subtle));
  align-items: flex-start;
}
.charts-shell .charts-rail-right #rail-timing .bidask-ask {
  background: color-mix(in oklab, var(--profit) 8%, var(--surface-2));
  border-color: color-mix(in oklab, var(--profit) 22%, var(--border-subtle));
  align-items: flex-end;
  text-align: right;
}
.charts-shell .charts-rail-right #rail-timing .bidask-lbl {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--text-muted);
}
.charts-shell .charts-rail-right #rail-timing .bidask-val {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.charts-shell .charts-rail-right #rail-timing .bidask-sep {
  font-size: 14px;
  color: var(--text-muted);
  align-self: center;
  justify-self: center;
  opacity: 0.6;
}

/* ---- Levels period caption (2026-05-20) ----
   Renders the "today / prev / this wk / prev wk" qualifier next to the
   period letter (D1 / W1) so non-experts can tell which window each row
   describes without memorising D1−1 / W−1 conventions. */
.charts-shell .charts-rail-right #rail-levels .lvl-period-cap {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-transform: lowercase;
  margin-left: 3px;
}

/* ---- Portfolio BY EA chips + Dynamic Sizing bars (2026-05-20) ---- */
.charts-shell .charts-rail-right #rail-portfolio .ms-row-byea {
  padding: 6px 4px;
  border-radius: 5px;
}
.charts-shell .charts-rail-right #rail-portfolio .ms-row-byea:hover {
  background: color-mix(in oklab, var(--surface-2) 50%, transparent);
}
.charts-shell .charts-rail-right #rail-portfolio .ms-row-byea > span:first-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0;
}
.charts-shell .charts-rail-right #rail-portfolio .ms-row-byea .ea-row-right {
  display: inline-flex; align-items: center; gap: 10px;
}
.charts-shell .charts-rail-right #rail-portfolio .ea-chips {
  display: inline-flex; gap: 4px;
}
.charts-shell .charts-rail-right #rail-portfolio .ea-chip {
  display: inline-flex; align-items: baseline;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  border: 1px solid currentColor;
  background: color-mix(in oklab, currentColor 12%, transparent);
  min-width: 24px;
  justify-content: center;
}
.charts-shell .charts-rail-right #rail-portfolio .ea-chip-sfx {
  font-size: 8px;
  margin-left: 1px;
  opacity: 0.7;
}
.charts-shell .charts-rail-right #rail-portfolio .ea-chip-l { color: var(--accent); }
.charts-shell .charts-rail-right #rail-portfolio .ea-chip-p { color: var(--profit); }
.charts-shell .charts-rail-right #rail-portfolio .ea-chip-v { color: var(--loss); }

.charts-shell .charts-rail-right #rail-portfolio .ds-bar {
  padding: 0 0 4px 0;
}
.charts-shell .charts-rail-right #rail-portfolio .ds-bar-track {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3, color-mix(in oklab, var(--text-muted) 18%, transparent));
  overflow: hidden;
}
.charts-shell .charts-rail-right #rail-portfolio .ds-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 200ms ease;
}
.charts-shell .charts-rail-right #rail-portfolio .ds-bar-fill.up   { background: var(--profit); }
.charts-shell .charts-rail-right #rail-portfolio .ds-bar-fill.warn { background: var(--yellow); }
.charts-shell .charts-rail-right #rail-portfolio .ds-bar-fill.down { background: var(--loss); }
.charts-shell .charts-rail-right #rail-portfolio .ds-bar-fill.dim  { background: color-mix(in oklab, var(--accent) 65%, transparent); }
.charts-shell .charts-rail-right #rail-portfolio .ds-bar-ticks {
  display: flex; justify-content: space-between;
  font-size: 9px;
  color: var(--text-muted);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.charts-shell .charts-rail-right #rail-portfolio .ds-row {
  margin-bottom: 2px;
}

/* ---- MarketState layer chips (2026-05-20) -------------------------
   Was rendering as a plain "TRI ATH TRE NEW VOL PED" text line. Promote
   each layer to a colored chip with stance background so the agreement
   read is glance-able. */
.charts-shell .charts-rail-right #rail-marketstate .ms-layers {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 4px;
}
.charts-shell .charts-rail-right #rail-marketstate .ms-layers-label {
  font-size: 10px; letter-spacing: 0.04em;
}
.charts-shell .charts-rail-right #rail-marketstate .ms-layers-row {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.charts-shell .charts-rail-right #rail-marketstate .ms-layer-dot {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 30px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid currentColor;
  background: color-mix(in oklab, currentColor 12%, transparent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}
.charts-shell .charts-rail-right #rail-marketstate .ms-layer-dot.agree    { color: var(--profit); }
.charts-shell .charts-rail-right #rail-marketstate .ms-layer-dot.disagree { color: var(--loss); }
.charts-shell .charts-rail-right #rail-marketstate .ms-layer-dot.stale    { color: var(--yellow); }
.charts-shell .charts-rail-right #rail-marketstate .ms-layer-dot.neutral  { color: var(--text-sub); }
.charts-shell .charts-rail-right #rail-marketstate .ms-layer-dot.unrep    { color: var(--text-muted); opacity: 0.6; }
.charts-shell .charts-rail-right #rail-marketstate .ms-layer-dot.unused {
  opacity: 0.55;
  font-style: italic;
}
.charts-shell .charts-rail-right #rail-marketstate .ms-layer-key {
  color: inherit;
}

/* ---- Basket empty-state silhouette (2026-05-20) ---- */
.charts-shell .charts-rail-right #rail-basket .basket-empty {
  display: flex; flex-direction: column; gap: 6px;
  padding: 4px 0;
}
.charts-shell .charts-rail-right #rail-basket .basket-empty-row {
  display: grid;
  grid-template-columns: 14px 38px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-muted);
  background: color-mix(in oklab, var(--surface-2) 55%, transparent);
  position: relative;
}
.charts-shell .charts-rail-right #rail-basket .basket-empty-buy {
  border-left: 3px solid color-mix(in oklab, var(--profit) 60%, transparent);
  background: linear-gradient(to right,
              color-mix(in oklab, var(--profit) 5%, var(--surface-2)) 0%,
              var(--surface-2) 60%);
}
.charts-shell .charts-rail-right #rail-basket .basket-empty-sell {
  border-left: 3px solid color-mix(in oklab, var(--loss) 60%, transparent);
  background: linear-gradient(to right,
              color-mix(in oklab, var(--loss) 5%, var(--surface-2)) 0%,
              var(--surface-2) 60%);
}
.charts-shell .charts-rail-right #rail-basket .basket-empty-row .side {
  font-size: 11px;
}
.charts-shell .charts-rail-right #rail-basket .basket-empty-row .side.buy { color: var(--profit); }
.charts-shell .charts-rail-right #rail-basket .basket-empty-row .side.sell { color: var(--loss); }
.charts-shell .charts-rail-right #rail-basket .basket-empty-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-sub);
}
.charts-shell .charts-rail-right #rail-basket .basket-empty-cap {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.charts-shell .charts-rail-right #rail-basket .basket-empty-foot {
  font-size: 10px;
  text-align: center;
  padding-top: 2px;
}

/* Round 10 — clean 4-slot tier row. Each slot is fixed-width so the
 * armed/empty pattern aligns across BUY and SELL rows. Replaces the
 * dual SVG-ladder + wrapping tier-list (which read as visual noise). */
.charts-shell .charts-rail-right #rail-basket .basket-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  min-width: 0;
}
.charts-shell .charts-rail-right #rail-basket .basket-slot {
  display: grid;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  padding: 2px 3px;
  border: 1px solid color-mix(in oklab, currentColor 22%, transparent);
  border-radius: 4px;
  background: transparent;
  line-height: 1.05;
  min-width: 0;
}
.charts-shell .charts-rail-right #rail-basket .basket-slot.off {
  border-style: dashed;
  opacity: 0.55;
}
.charts-shell .charts-rail-right #rail-basket .basket-slot.on {
  background: color-mix(in oklab, currentColor 10%, transparent);
  border-style: solid;
  opacity: 1;
}
.charts-shell .charts-rail-right #rail-basket .basket-slot-tier {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0.75;
}
.charts-shell .charts-rail-right #rail-basket .basket-slot-px {
  font-family: SF Mono, ui-monospace, monospace;
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.charts-shell .charts-rail-right #rail-basket .basket-slot.on .basket-slot-px {
  color: inherit;
}
.charts-shell .charts-rail-right #rail-basket .basket-empty-buy  .basket-slot { color: var(--profit); }
.charts-shell .charts-rail-right #rail-basket .basket-empty-sell .basket-slot { color: var(--loss); }

.charts-shell .charts-rail-right #rail-portfolio .dd-pool-block {
  margin-top: 6px;
  padding: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: color-mix(in oklab, var(--surface-2) 40%, transparent);
}
.charts-shell .charts-rail-right #rail-portfolio .dd-pool-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  padding: 1px 0;
}
.charts-shell .charts-rail-right #rail-portfolio .dd-pool-lbl {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.charts-shell .charts-rail-right #rail-portfolio .dd-pool-val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
}
.charts-shell .charts-rail-right #rail-portfolio .dd-pool-chip {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
}
.charts-shell .charts-rail-right #rail-portfolio .dd-pool-chip.up   { background: color-mix(in oklab, var(--profit) 14%, transparent); color: var(--profit); }
.charts-shell .charts-rail-right #rail-portfolio .dd-pool-chip.down { background: color-mix(in oklab, var(--loss) 16%, transparent); color: var(--loss); }
.charts-shell .charts-rail-right #rail-portfolio .dd-pool-bar {
  margin: 3px 0;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.charts-shell .charts-rail-right #rail-portfolio .dd-pool-bar-fill {
  height: 100%;
  background: linear-gradient(to right, var(--profit), var(--yellow, var(--warning)) 60%, var(--loss));
}
.charts-shell .charts-rail-right #rail-portfolio .dd-pool-sub {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
}

.charts-shell .charts-rail-right #rail-cycle .cycle-gate-row {
  display: grid;
  grid-template-columns: 10px auto 1fr auto auto;
  align-items: center;
  gap: 6px;
}
.charts-shell .charts-rail-right #rail-cycle .cycle-gate-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.charts-shell .charts-rail-right #rail-cycle .cycle-gate-bar-fill {
  height: 100%;
  border-radius: 2px;
}
.charts-shell .charts-rail-right #rail-cycle .cycle-gate-bar-fill.up   { background: var(--profit); }
.charts-shell .charts-rail-right #rail-cycle .cycle-gate-bar-fill.warn { background: var(--yellow, var(--warning)); }
.charts-shell .charts-rail-right #rail-cycle .cycle-gate-bar-fill.down { background: var(--loss); }

/* ---- Decisions cluster chip (2026-05-20 Round 6) ---------------- */
.charts-shell .charts-rail-right #rail-decisions .decision-cluster {
  border-left: 3px solid var(--text-muted);
  background: color-mix(in oklab, var(--surface-2) 60%, transparent);
  border-radius: 4px;
  padding: 5px 8px 6px;
  margin: 3px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.charts-shell .charts-rail-right #rail-decisions .decision-cluster.verdict-allow { border-left-color: var(--profit); }
.charts-shell .charts-rail-right #rail-decisions .decision-cluster.verdict-veto  { border-left-color: var(--loss); }
.charts-shell .charts-rail-right #rail-decisions .decision-cluster.verdict-skip  { border-left-color: var(--text-muted); }
.charts-shell .charts-rail-right #rail-decisions .decision-cluster.verdict-info  { border-left-color: var(--accent); }
.charts-shell .charts-rail-right #rail-decisions .dec-cluster-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--rail-fs-label);
}
.charts-shell .charts-rail-right #rail-decisions .dec-cluster-count {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-main);
  min-width: 24px;
}
.charts-shell .charts-rail-right #rail-decisions .dec-cluster-range {
  margin-left: auto;
  font-size: 10px;
  white-space: nowrap;
}
.charts-shell .charts-rail-right #rail-decisions .dec-cluster-timeline {
  position: relative;
  height: 6px;
  background: var(--surface-3, var(--surface-1));
  border-radius: 3px;
  border: 1px solid var(--border-subtle);
}
.charts-shell .charts-rail-right #rail-decisions .dec-cluster-dot {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  margin-left: -3px;
  border-radius: 50%;
  background: currentColor;
  color: var(--profit);
}
.charts-shell .charts-rail-right #rail-decisions .decision-cluster.verdict-veto .dec-cluster-dot { color: var(--loss); }
.charts-shell .charts-rail-right #rail-decisions .decision-cluster.verdict-skip .dec-cluster-dot { color: var(--text-muted); }
.charts-shell .charts-rail-right #rail-decisions .decision-cluster.verdict-info .dec-cluster-dot { color: var(--accent); }
.charts-shell .charts-rail-right #rail-decisions .dec-cluster-dot.dot-buy  { color: var(--profit); }
.charts-shell .charts-rail-right #rail-decisions .dec-cluster-dot.dot-sell { color: var(--loss); }
.charts-shell .charts-rail-right #rail-decisions .dec-cluster-split {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.charts-shell .charts-rail-right #rail-decisions .dec-cluster-split .up   { color: var(--profit); }
.charts-shell .charts-rail-right #rail-decisions .dec-cluster-split .down { color: var(--loss); }

@media (prefers-reduced-motion: reduce) {
  .charts-shell * { transition: none !important; }
}

/* ---- Mobile (≤720px) — single-column rail, compacter visuals ---- */
@media (max-width: 720px) {
  .charts-shell .charts-rail-left .charts-instance-leaf {
    grid-template-columns: 8px minmax(0, 1fr) auto;
    grid-template-areas: "dot sym pnl" "dot tfs pnl";
    row-gap: 2px;
    min-height: 50px;
    height: 50px;
  }
  .charts-shell .charts-rail-left .charts-instance-leaf .name .meta { display: none; }

  /* Portfolio hero — drop from 2-col to 1-col so tiles aren't cramped */
  .charts-shell .charts-rail-right #rail-portfolio .charts-hero {
    grid-template-columns: 1fr;
  }
  .charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile {
    padding: 6px 8px;
  }
  .charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .val {
    font-size: 13px;
  }

  /* Tighter section paddings + smaller titles */
  .charts-shell .charts-rail-right .charts-section-body {
    padding: 4px 6px;
  }
  .charts-shell .charts-rail-right h3 {
    font-size: 10px;
  }

  /* Cycle dial — shrink from 76→60px so it doesn't dominate */
  .charts-shell .charts-rail-right #rail-cycle .cycle-top svg {
    width: 60px !important;
    height: 60px !important;
  }
  .charts-shell .charts-rail-right #rail-cycle .cycle-week-row {
    flex-wrap: wrap;
  }

  /* Today day-ring — 56→48 */
  .charts-shell .charts-rail-right #rail-counters .today-day-ring svg {
    width: 48px;
    height: 48px;
  }

  /* News chips — shorter headline + smaller tier label */
  .charts-shell .charts-rail-right .news-row .news-headline {
    font-size: 10.5px;
  }
  .charts-shell .charts-rail-right .news-row .news-when {
    font-size: 10px;
  }

  /* Bid/Ask ladder — keep grid but smaller font */
  .charts-shell .charts-rail-right #rail-timing .bidask-val {
    font-size: 12px;
  }

  /* Decisions cluster — shorter timeline + smaller count chip */
  .charts-shell .charts-rail-right #rail-decisions .dec-cluster-timeline {
    height: 5px;
  }

  /* Levels mini-bars — single line below label */
  .charts-shell .charts-rail-right #rail-levels .lvl-pair-row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* MarketState layer chips — wrap to two rows if needed */
  .charts-shell .charts-rail-right #rail-marketstate .ms-layers-row {
    flex-wrap: wrap;
    gap: 3px;
  }

  /* BY EA / Dynamic Sizing — compact ea-chips */
  .charts-shell .charts-rail-right #rail-portfolio .ea-chip-l,
  .charts-shell .charts-rail-right #rail-portfolio .ea-chip-p,
  .charts-shell .charts-rail-right #rail-portfolio .ea-chip-v {
    font-size: 9.5px;
    padding: 1px 4px;
  }
}

/* ---- Narrow phones (≤420px) — drop further -------------------- */
@media (max-width: 420px) {
  .charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .val {
    font-size: 12px;
  }
  .charts-shell .charts-rail-right .ms-row {
    font-size: 10.5px;
  }
  /* Hide cluster range when extremely narrow — count + kind + pat already
     telegraph enough; user can tap to expand. */
  .charts-shell .charts-rail-right #rail-decisions .dec-cluster-range {
    display: none;
  }
  /* Round-10 selectors — verified visually at 390×844 only after this rule
     batch landed. Tighten three-column tiles that were laid out for 240px
     desktop rails. */
  .charts-shell .charts-rail-right .pvc-stat-strip {
    gap: 4px;
  }
  .charts-shell .charts-rail-right .pvc-stat {
    padding: 4px 5px;
  }
  .charts-shell .charts-rail-right .pvc-stat-cap {
    font-size: 9px;
  }
  .charts-shell .charts-rail-right .pvc-stat-val {
    font-size: 13px;
  }
  /* Basket 4-slot pills: drop letter-spacing + tighten so all four still
     fit on a 320px-wide rail without wrapping. */
  .charts-shell .charts-rail-right .basket-slots {
    gap: 3px;
  }
  .charts-shell .charts-rail-right .basket-slot {
    font-size: 9.5px;
    padding: 1px 4px;
    letter-spacing: 0;
  }
  /* Empty-mini rich: shrink head text so two-line card stays single-tile. */
  .charts-shell .charts-rail-right .empty-mini-rich .em-head {
    font-size: 10.5px;
  }
  .charts-shell .charts-rail-right .empty-mini-rich .em-sub {
    font-size: 9.5px;
  }
  /* Group P/L "today" caption is decorative — hide to recover vertical space
     on already-tight mobile rows. Pill tooltip carries the same info. */
  .charts-shell .charts-rail-left .grp-pnl-scope {
    display: none;
  }
  /* Leaf live-row: shrink PML caption + bar so the three-row leaf doesn't
     dominate the rail at narrow widths. */
  .charts-shell .charts-rail-left .charts-instance-leaf .live-row {
    gap: 4px;
    font-size: 10px;
  }
  .charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-pml-cap,
  .charts-shell .charts-rail-left .charts-instance-leaf .live-row .lt-pml-txt {
    font-size: 8.5px;
  }
}

/* ── Live gate (rail-armed "why isn't this firing?" panel) ───────────────── */
.charts-shell .charts-rail-right .live-gate {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.charts-shell .charts-rail-right .live-gate-on {
  border-color: rgba(52,199,89,0.35);
  background: rgba(52,199,89,0.06);
}
.charts-shell .charts-rail-right .live-gate-off {
  border-color: rgba(255,69,58,0.40);
  background: rgba(255,69,58,0.06);
}
.charts-shell .charts-rail-right .live-gate .lg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.charts-shell .charts-rail-right .live-gate .lg-state {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.charts-shell .charts-rail-right .live-gate .lg-state.lg-allow {
  background: rgba(52,199,89,0.18);
  color: rgb(120,220,150);
}
.charts-shell .charts-rail-right .live-gate .lg-state.lg-block {
  background: rgba(255,69,58,0.22);
  color: rgb(255,140,130);
}
.charts-shell .charts-rail-right .live-gate .lg-mult {
  color: rgba(255,255,255,0.65);
  font-variant-numeric: tabular-nums;
}
.charts-shell .charts-rail-right .live-gate .lg-htf {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.charts-shell .charts-rail-right .live-gate .lg-htf-bull {
  background: rgba(52,199,89,0.12);
  color: rgb(120,220,150);
}
.charts-shell .charts-rail-right .live-gate .lg-htf-bear {
  background: rgba(255,69,58,0.14);
  color: rgb(255,140,130);
}
.charts-shell .charts-rail-right .live-gate .lg-htf-conflict {
  background: rgba(255,170,40,0.16);
  color: rgb(255,200,120);
}
.charts-shell .charts-rail-right .live-gate .lg-htf-neutral {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
}
.charts-shell .charts-rail-right .live-gate .lg-htf-stale {
  opacity: 0.55;
  filter: grayscale(0.4);
}
/* MovementSubState badge — sits flush right of HTF chip, drives the
   _SUBSTATE_BLOCKS niche overlay so colours mirror admin matrix tiers. */
.charts-shell .charts-rail-right .live-gate .lg-sub {
  margin-left: 5px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.charts-shell .charts-rail-right .live-gate .lg-sub-hot {
  background: rgba(255,69,58,0.16);
  color: rgb(255,140,130);
}
.charts-shell .charts-rail-right .live-gate .lg-sub-warn {
  background: rgba(255,170,40,0.16);
  color: rgb(255,200,120);
}
.charts-shell .charts-rail-right .live-gate .lg-sub-cold {
  background: rgba(64,156,255,0.14);
  color: rgb(140,190,255);
}
.charts-shell .charts-rail-right .live-gate .lg-sub-neutral {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
}
.charts-shell .charts-rail-right .live-gate .lg-sub-none {
  background: transparent;
  color: rgba(255,255,255,0.30);
  font-weight: 500;
  opacity: 0.7;
}
.charts-shell .charts-rail-right .live-gate .lg-sub-stale {
  opacity: 0.55;
  filter: grayscale(0.4);
}
.charts-shell .charts-rail-right .live-gate .lg-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.charts-shell .charts-rail-right .live-gate .lg-chip {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 600;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.78);
}
.charts-shell .charts-rail-right .live-gate .lg-chip-dd {
  background: rgba(255,69,58,0.22);
  color: rgb(255,140,130);
}
.charts-shell .charts-rail-right .live-gate .lg-chip-news {
  background: rgba(180,90,255,0.20);
  color: rgb(210,170,255);
}
.charts-shell .charts-rail-right .live-gate .lg-chip-pad {
  background: rgba(255,170,40,0.18);
  color: rgb(255,200,130);
}
.charts-shell .charts-rail-right .live-gate .lg-chip-veto {
  background: rgba(255,69,58,0.16);
  color: rgb(255,160,150);
}
.charts-shell .charts-rail-right .live-gate .lg-chip-tier {
  background: rgba(80,140,255,0.18);
  color: rgb(140,180,255);
}

/* Safari: sticky + backdrop-filter + 1Hz inner-text mutation causes
   composite-layer thrash. Drop the blur on Safari only; the surface
   stays semi-transparent via the background color. See
   feedback_safari_universal_selector_pause.md companion. */
html.is-safari .charts-kpi-strip {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── GS zone range indicator (EA-echoed D1/W1 position) ───────────────────────
   Vertical bar: 0%=candle low … 100%=candle high. DEAD / REVERSAL / MID bands
   shaded with SEMANTIC tokens so :root.light flips them automatically — DEAD =
   loss (block both directions), REVERSAL = warning (no-chase / reversal-only),
   MID = profit (with-trend OK). D1/W1 markers + a buy/sell permission badge.
   Scoped to .charts-rail-right and built on the existing .intel-card shell so it
   reads as a sibling of the EA-intel card. No hardcoded hex/rgba — token-driven
   for dark + light. */
.charts-shell .charts-rail-right .intel-card.gs-zone-card {
  border-left: 2px solid color-mix(in oklab, var(--accent) 70%, transparent);
  gap: 0;
}
.charts-shell .charts-rail-right .gs-zone-card.gs-zone--stale {
  opacity: 0.45;
  filter: grayscale(0.4);
}
.charts-shell .charts-rail-right .gs-zone-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.charts-shell .charts-rail-right .gs-zone-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* D1-scale tag on the Range Position header: the painted reversal/dead bands
   are drawn on the Daily (D1) Project Amber scale, so flag the scale inline.
   Token-driven (var(--accent)/--surface) so the :root.light flip recolors it. */
.charts-shell .charts-rail-right .gs-zone-scaletag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 5px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 34%, transparent);
}
.charts-shell .charts-rail-right .gs-zone-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--surface-3) 60%, transparent);
  color: var(--text);
  border: 1px solid var(--border-subtle);
  text-transform: none;
}
.charts-shell .charts-rail-right .gs-zone-body {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 8px;
}
.charts-shell .charts-rail-right .gs-zone-track {
  position: relative;
  width: 24px;
  min-height: 148px;
  flex: 0 0 24px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: color-mix(in oklab, var(--surface-2) 60%, transparent);
}
.charts-shell .charts-rail-right .gs-zone-band {
  position: absolute;
  left: 0;
  right: 0;
}
.charts-shell .charts-rail-right .gs-zone-band--dead {
  background: color-mix(in oklab, var(--loss) 34%, transparent);
}
.charts-shell .charts-rail-right .gs-zone-band--reversal {
  background: color-mix(in oklab, var(--warning) 28%, transparent);
}
.charts-shell .charts-rail-right .gs-zone-band--mid {
  background: color-mix(in oklab, var(--profit) 14%, transparent);
}
.charts-shell .charts-rail-right .gs-zone-marker {
  position: absolute;
  left: -2px;
  right: -2px;
  height: 0;
  z-index: 2;
}
.charts-shell .charts-rail-right .gs-zone-marker::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
}
.charts-shell .charts-rail-right .gs-zone-marker--d1::before {
  background: var(--accent);
}
.charts-shell .charts-rail-right .gs-zone-marker--w1::before {
  background: var(--text);
  opacity: 0.55;
}
.charts-shell .charts-rail-right .gs-zone-marker-tag {
  position: absolute;
  left: 30px;
  top: -8px;
  white-space: nowrap;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  background: color-mix(in oklab, var(--surface-3) 70%, var(--surface-1));
  border: 1px solid var(--border-subtle);
  padding: 1px 5px;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.charts-shell .charts-rail-right .gs-zone-marker--w1 .gs-zone-marker-tag {
  color: var(--text-muted);
  top: 6px;
}
.charts-shell .charts-rail-right .gs-zone-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 1px 0;
}
.charts-shell .charts-rail-right .gs-zone-badges {
  display: flex;
  gap: 6px;
  margin-top: 9px;
}
.charts-shell .charts-rail-right .gs-zone-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 9px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in oklab, var(--surface-3) 55%, transparent);
  color: var(--text-muted);
}
.charts-shell .charts-rail-right .gs-zone-badge--on {
  color: var(--profit);
  border-color: color-mix(in oklab, var(--profit) 45%, transparent);
  background: color-mix(in oklab, var(--profit) 14%, transparent);
}
.charts-shell .charts-rail-right .gs-zone-badge--off {
  color: var(--text-muted);
}
.charts-shell .charts-rail-right .gs-zone-reason {
  margin-top: 7px;
  font-size: 10px;
  color: var(--text-muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.01em;
}