/* charts-polish-v2.css — final polish layer for /charts
   Loaded LAST so it cleanly overrides charts.css + charts-theme-align.css
   + charts-responsive.css + charts-rail.css. Targets the polish gaps that
   remain after waves 1-8: MS strip hierarchy, right-rail card cohesion,
   empty-state typography, left-rail row affordances, overlay bar density,
   1280px tightening, and a few alpha-banner / drawer-handle refinements. */

/* ──────────────────────────────────────────────────────────────────────
   1. MS strip — verdict-led hierarchy, labels read as captions, bar reads
      as the dominant indicator. Segments equal-flex so they stop jostling
      when a verdict ticks from "0.92" to "—".
   ────────────────────────────────────────────────────────────────────── */
.charts-shell .charts-ms-strip {
  min-height: 30px;
  padding: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 60%, transparent),
    var(--surface-1));
  border-bottom: 1px solid var(--border-subtle);
}
.charts-shell .charts-ms-strip .ms-seg {
  flex: 1 1 0;
  min-width: 0;
  padding: 5px 12px;
  gap: 2px;
  border-right: 1px solid color-mix(in srgb, var(--border-subtle) 60%, transparent);
  position: relative;
}
.charts-shell .charts-ms-strip .ms-seg .ms-seg-lbl {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-dim, var(--text-muted, var(--text-sub)));
  opacity: 0.85;
}
.charts-shell .charts-ms-strip .ms-seg .ms-seg-val {
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
/* Verdict segment — slightly wider to host the mini-bar; subtle inset shading
   so the eye reads "this is the index". */
.charts-shell .charts-ms-strip .ms-seg:nth-child(4) {
  flex: 1.4 1 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 5%, transparent),
    transparent);
}
.charts-shell .charts-ms-strip .ms-seg .ms-seg-bar {
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 3px;
  background: color-mix(in srgb, var(--text-dim) 18%, transparent);
  border-radius: 2px;
  overflow: hidden;
}
.charts-shell .charts-ms-strip .ms-seg .ms-seg-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--purple));
  border-radius: 2px;
  transition: width 240ms ease;
}
.charts-shell .charts-ms-strip .ms-seg .ms-seg-bar-fill.pos {
  background: linear-gradient(90deg, var(--profit), color-mix(in srgb, var(--profit) 75%, var(--teal, #5ac8fa)));
}
.charts-shell .charts-ms-strip .ms-seg .ms-seg-bar-fill.warn {
  background: linear-gradient(90deg, var(--yellow), color-mix(in srgb, var(--yellow) 70%, var(--accent)));
}
.charts-shell .charts-ms-strip .ms-seg.dim {
  opacity: 0.78;
}
/* Idle state — value is exactly zero / null. Calm market is real data, but
   "0.00 / 0/6 / ×0.00" reads as placeholder. Make it visibly idle: lighter
   weight, dimmer, bar drops to a thin baseline. */
.charts-shell .charts-ms-strip .ms-seg.idle {
  opacity: 0.55;
}
.charts-shell .charts-ms-strip .ms-seg.idle .ms-seg-val {
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-dim, var(--text-muted, var(--text-sub)));
}
.charts-shell .charts-ms-strip .ms-seg.idle .ms-seg-bar {
  background: color-mix(in srgb, var(--text-dim) 10%, transparent);
}
.charts-shell .charts-ms-strip .ms-seg.idle .ms-seg-bar-fill {
  background: color-mix(in srgb, var(--text-dim) 22%, transparent) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   2. Overlay bar — denser, grouped, less generic. Subtle label above each
      chip group so users learn the taxonomy ("News / Protection / Markers
      / Context") instead of guessing.
   ────────────────────────────────────────────────────────────────────── */
.charts-shell .charts-overlay-bar {
  padding: 4px 10px;
  gap: 0;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-subtle);
  min-height: 32px;
}
.charts-shell .charts-overlay-bar .ov-group {
  padding: 0 10px;
  gap: 3px;
  border-right: 1px solid color-mix(in srgb, var(--border-subtle) 50%, transparent);
}
.charts-shell .charts-overlay-bar .qf-chip {
  height: 20px;
  min-width: 50px;
  padding: 0 8px;
  font-size: 9.5px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.charts-shell .charts-overlay-bar .qf-chip[aria-pressed="true"] {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ──────────────────────────────────────────────────────────────────────
   3. Right rail — card cohesion. Equal section spacing, header weight
      tuned down so the body content is the focus, accent-bar slim, empty
      states read as deliberate (italic muted single line, not a clipped
      placeholder).
   ────────────────────────────────────────────────────────────────────── */
.charts-shell .charts-rail-right {
  padding: 8px 8px 12px;
}
.charts-shell .charts-rail-right .charts-section {
  margin-bottom: 8px;
  border-radius: var(--radius-card);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.charts-shell .charts-rail-right .charts-section h3 {
  padding: 7px 10px 7px 22px;
  font-size: 10px;
  letter-spacing: 0.12em;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent);
}
.charts-shell .charts-rail-right .charts-section h3::before {
  left: 6px;
  width: 3px;
  height: 12px;
  opacity: 0.85;
  box-shadow: none;
}
.charts-shell .charts-rail-right .charts-section-body {
  padding: 9px 10px;
  font-size: 11.5px;
}
.charts-shell .charts-rail-right .charts-section-body .charts-dim {
  color: var(--text-dim, var(--text-sub));
  font-style: italic;
  opacity: 0.75;
  font-size: 11px;
  margin: 2px 0;
}
/* Light mode: lift opacity so empty-state lines stay above WCAG AA on white. */
:root.light .charts-shell .charts-rail-right .charts-section-body .charts-dim {
  opacity: 0.85;
  color: var(--text-sub);
}
/* The hdr-swatch ▲/▼/! badge in section h3 — slightly tighter so the
   header bar reads as one unit. */
.charts-shell .charts-rail-right .charts-section h3 .hdr-swatch {
  width: 16px;
  height: 16px;
  font-size: 10px;
}

/* ──────────────────────────────────────────────────────────────────────
   4. Left rail — calmer rows, refined active treatment, less color noise
      from the per-row pnl chips. The whole list should breathe as a
      "list of choices" not a "list of values".
   ────────────────────────────────────────────────────────────────────── */
.charts-shell .charts-rail-left .charts-instance-list {
  padding: 4px 4px 12px;
}
/* IMPORTANT: do NOT use `.charts-instance-list li` here — the leaves use a
   strict grid (20px+22px rows inside a 46px box, padding 2px 8px). A blanket
   li-padding rule overflows the grid. Target leaves and groups separately. */
.charts-shell .charts-rail-left .charts-instance-leaf {
  margin: 1px 2px;
  padding: 2px 6px 2px 8px;
  border-radius: 6px;
  border-left: 2px solid transparent;
  border-bottom-color: color-mix(in srgb, var(--border-subtle) 60%, transparent);
  transition: background 120ms ease, border-left-color 120ms ease;
}
.charts-shell .charts-rail-left .charts-instance-leaf:hover {
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}
.charts-shell .charts-rail-left .charts-instance-leaf.active {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-3));
  border-left-color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.charts-shell .charts-rail-left .charts-instance-group {
  margin: 6px 2px 2px;
  padding-left: 8px;
}
.charts-shell .charts-rail-left .charts-instance-group:first-child {
  margin-top: 2px;
}
.charts-shell .charts-rail-left .charts-instance-list .name .ea {
  font-size: 10px;
  letter-spacing: 0.06em;
  opacity: 0.85;
}
.charts-shell .charts-rail-left .charts-instance-list .name .tf {
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
  font-size: 9.5px;
  padding: 1px 4px;
}
.charts-shell .charts-rail-left .charts-instance-list .pnl {
  font-size: 11px;
  opacity: 0.92;
}
.charts-shell .charts-rail-left .charts-instance-list .pnl-today {
  font-size: 9.5px;
  padding: 1px 4px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
}
/* Subtler dot ring — the existing 2px shadow ring tints the whole row red
   on a loss day. Drop to 1.5px with reduced alpha to keep the cue without
   washing the row. */
.charts-shell .charts-rail-left .charts-instance-list .dot.live.profit {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--profit) 30%, transparent);
}
.charts-shell .charts-rail-left .charts-instance-list .dot.live.loss {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--loss) 30%, transparent);
}

/* ──────────────────────────────────────────────────────────────────────
   5. Below-chart Orders panels — empty state should be SMALL and clearly
      empty (single muted line, no padding bloat), populated state stays
      generous. Headers track the right rail's tighter h3 spec.
   ────────────────────────────────────────────────────────────────────── */
.charts-shell .charts-orders-row {
  gap: 8px;
  padding: 0 2px 6px;
  margin-top: 6px;
}
.charts-shell .charts-orders-panel {
  border-radius: var(--radius-card);
}
.charts-shell .charts-orders-panel h3 {
  padding: 6px 10px 6px 22px;
  font-size: 10px;
  letter-spacing: 0.12em;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
.charts-shell .charts-orders-panel h3::before {
  left: 6px;
  width: 3px;
  height: 12px;
}
.charts-shell .charts-orders-panel .charts-section-body {
  padding: 8px 10px;
  min-height: 32px;
}
.charts-shell .charts-orders-panel .charts-section-body > .charts-dim:only-child {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin: 0;
  font-style: italic;
  opacity: 0.6;
  font-size: 11px;
}

/* ──────────────────────────────────────────────────────────────────────
   6. Drawer handle — the EA-logs strip that sits at the bottom. Tighten,
      give the "EA logs" label proper weight, and let the count chip read
      as a count, not a stat.
   ────────────────────────────────────────────────────────────────────── */
.charts-shell .charts-drawer-handle {
  min-height: 28px;
  padding: 4px 12px;
  gap: 8px;
}
.charts-shell .cdh-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.charts-shell .cdh-count {
  padding: 1px 6px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  margin-left: 2px;
}
.charts-shell .cdh-lvl {
  height: 18px;
  min-width: 32px;
  padding: 0 6px;
  font-size: 9.5px;
  border-radius: 4px;
}

/* ──────────────────────────────────────────────────────────────────────
   7. Topbar — meta + stream-dot read as one cluster, balance with logo
      side. Help button consistent with chip family.
   ────────────────────────────────────────────────────────────────────── */
.charts-shell .charts-topbar {
  min-height: 50px;
  padding: 0 16px;
}
.charts-shell .charts-topbar .charts-meta {
  padding: 3px 10px;
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.charts-shell .charts-btn-help {
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: 1px solid var(--border-subtle);
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.charts-shell .charts-btn-help:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ──────────────────────────────────────────────────────────────────────
   8. Chart-area inset hairline — when MS strip is hidden (loading), the
      overlay bar reads as floating. Pin a hairline cap.
   ────────────────────────────────────────────────────────────────────── */
.charts-shell .charts-main {
  /* Keeps the rounded glass-card identity but tones down the heavy shadow
     so the rails and main read as same-level surfaces, not a hero card
     vs muted rails. */
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 0 rgba(0,0,0,0.03);
}

/* ──────────────────────────────────────────────────────────────────────
   9. 1280px responsive tightening — at narrow-desktop the MS strip + overlay
      bar were the biggest space hogs (~64px). Compress them aggressively
      so the chart wins the height claim. Same playbook the previous
      narrow-desktop optimization shipped, extended to the polish-v2 specs.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1366px) {
  .charts-shell .charts-ms-strip { min-height: 26px; }
  .charts-shell .charts-ms-strip .ms-seg { padding: 3px 9px; }
  .charts-shell .charts-ms-strip .ms-seg .ms-seg-val { font-size: 11.5px; }
  .charts-shell .charts-ms-strip .ms-seg .ms-seg-lbl { font-size: 8px; letter-spacing: 0.1em; }
  .charts-shell .charts-overlay-bar { min-height: 28px; padding: 3px 8px; }
  .charts-shell .charts-overlay-bar .ov-group { padding: 0 7px; }
  .charts-shell .charts-overlay-bar .qf-chip { height: 18px; min-width: 44px; font-size: 9px; padding: 0 6px; }
  .charts-shell .charts-rail-right { padding: 6px 6px 10px; }
  .charts-shell .charts-rail-right .charts-section { margin-bottom: 6px; }
  .charts-shell .charts-rail-right .charts-section-body { padding: 7px 9px; font-size: 11px; }
  .charts-shell .charts-rail-right .charts-section h3 { padding: 6px 9px 6px 20px; font-size: 9.5px; }
}

/* ──────────────────────────────────────────────────────────────────────
   10. Cluster header (basket) — tier histogram chips are tiny dots when
       value-rendered. Round, slight stroke, hairline tighter.
   ────────────────────────────────────────────────────────────────────── */
.charts-shell .cluster-hdr {
  padding: 5px 8px;
  margin-top: 5px;
  border-radius: 6px;
  gap: 6px;
  font-size: 11.5px;
}
.charts-shell .cluster-hdr .cluster-hist { gap: 3px; }
.charts-shell .cluster-hdr .cluster-hist .tier-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
}
.charts-shell .cluster-buy {
  background: color-mix(in srgb, var(--profit) 8%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--profit) 70%, transparent);
}
.charts-shell .cluster-sell {
  background: color-mix(in srgb, var(--loss) 8%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--loss) 70%, transparent);
}
.charts-shell .cluster-hdr .cluster-lots,
.charts-shell .cluster-hdr .cluster-pnl {
  font-size: 11px;
  letter-spacing: 0.01em;
}
.charts-shell .cluster-hdr .tier-badge {
  font-size: 9px;
  padding: 1px 4px;
}

/* ──────────────────────────────────────────────────────────────────────
   11. Per-EA narrative banner (.charts-explainer) — was a heavy band of
       full-bordered chips. Drop the chip backgrounds entirely; lean on
       label/value typography. The chip-grid spec stays for natural wrap.
   ────────────────────────────────────────────────────────────────────── */
.charts-shell .charts-explainer {
  padding: 7px 12px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 4%, transparent),
    transparent);
  border-bottom: 1px solid var(--border-subtle);
  row-gap: 5px;
  font-size: 11px;
}
.charts-shell .charts-explainer .exp-row-head { gap: 10px; }
.charts-shell .charts-explainer .exp-headline {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.charts-shell .charts-explainer .exp-row-chips {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 3px 8px;
}
.charts-shell .charts-explainer .exp-tag {
  background: transparent;
  border: 0;
  padding: 1px 0;
  border-radius: 0;
  font-size: 11.5px;
  font-weight: 600;
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
}
.charts-shell .charts-explainer .exp-label {
  font-size: 8.5px;
  letter-spacing: 0.1em;
  opacity: 0.65;
  font-weight: 700;
  color: var(--text-dim, var(--text-sub));
  width: auto;
  display: inline;
}
.charts-shell .charts-explainer .exp-tag.ok,
.charts-shell .charts-explainer .exp-tag.warn,
.charts-shell .charts-explainer .exp-tag.veto {
  border: 0;
}
.charts-shell .charts-explainer .exp-ea-badge {
  font-size: 9px;
  padding: 2px 6px;
  letter-spacing: 0.1em;
}

/* ──────────────────────────────────────────────────────────────────────
   12. Last Decisions / row-dec — tighter columns, kind chip becomes a
       lean colored pill rather than a colored text token. dec-when reads
       as muted tabular timestamp.
   ────────────────────────────────────────────────────────────────────── */
.charts-shell .charts-section-body .row-dec {
  grid-template-columns: 50px 8px auto minmax(0, 1fr) 38px;
  gap: 5px;
  padding: 4px 0;
  font-size: 10.5px;
}
.charts-shell .charts-section-body .row-dec .kind {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: color-mix(in srgb, currentColor 12%, transparent);
  text-align: center;
}
.charts-shell .charts-section-body .row-dec .dec-when {
  font-size: 9.5px;
  color: var(--text-dim, var(--text-sub));
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.charts-shell .charts-section-body .row-dec .reason {
  font-size: 10.5px;
  color: var(--text-sub);
  opacity: 0.9;
}

/* ──────────────────────────────────────────────────────────────────────
   13. Money + numeric values — enforce tabular-nums everywhere a number
       lives, so column edges align across the page and don't jiggle on
       tick. Also tame the currency-symbol kerning (€-glyph + tabular zero
       was visually drifting).
   ────────────────────────────────────────────────────────────────────── */
.charts-shell .charts-section-body,
.charts-shell .cluster-hdr,
.charts-shell .charts-orders-panel,
.charts-shell .charts-ms-strip,
.charts-shell .charts-explainer .exp-tag {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv11' 1;
}

/* ──────────────────────────────────────────────────────────────────────
   14. Topbar logo + alpha pill balance — the .alpha pill that sits next
       to the "Project Green" wordmark in the shared nav was a 9px chip
       lost against a 16px logo. Bump its presence so the brand+phase
       reads as one unit.
   ────────────────────────────────────────────────────────────────────── */
body.page-charts .alpha-pill,
body.page-charts .nav-brand .alpha,
body.page-charts .nav-brand-pill {
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 2px 8px;
  border-radius: 100px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ──────────────────────────────────────────────────────────────────────
   15. Chart canvas double-border — the .charts-main glass-card already
       provides the outer rounded frame; the inner .charts-chart adds a
       second border that reads as "chart in a frame in a frame". Drop
       the inner border, keep just rounded corners from the main card.
   ────────────────────────────────────────────────────────────────────── */
.charts-shell .charts-main .charts-chart {
  border: 0;
  border-radius: 0;
}
.charts-shell .charts-main {
  /* Inner padding zero so the chart canvas paints flush against the glass
     rounded frame. Avoids the gap between the chart and the rounded edge
     that was visible at 1280-1440px viewports. */
  padding: 0;
}

/* ──────────────────────────────────────────────────────────────────────
   16. Quick-filter chips in left rail — were bordered active-chip rectangles
       that ate the rail header. Make them subtler when inactive, accent-
       leading when active, with a slim active underline rather than a
       full fill.
   ────────────────────────────────────────────────────────────────────── */
.charts-shell .charts-rail-left .qf-chip {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-sub);
  padding: 3px 7px;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.charts-shell .charts-rail-left .qf-chip:hover {
  color: var(--text-main);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}
.charts-shell .charts-rail-left .qf-chip.active,
.charts-shell .charts-rail-left .qf-chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ──────────────────────────────────────────────────────────────────────
   17. Donut + percent of-day widgets — the inline "0.0% of day" reading
       was being painted next to a tiny donut SVG with no visual coupling.
       Tighten gap, align baselines, and ensure the donut color tracks
       the verdict palette rather than a default grey.
   ────────────────────────────────────────────────────────────────────── */
.charts-shell .charts-rail-right .day-readout,
.charts-shell .charts-rail-right .day-of {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.charts-shell .charts-rail-right svg.donut,
.charts-shell .charts-rail-right svg.mini-donut {
  vertical-align: middle;
  margin-right: 4px;
}

/* ──────────────────────────────────────────────────────────────────────
   18. Section subheads — the small "Today / Active / Available" mini-labels
       inside section bodies were rendering at the same weight as values.
       Make them clearly subheads, gain a hairline under for grouping.
   ────────────────────────────────────────────────────────────────────── */
.charts-shell .charts-section-body .charts-subhead {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim, var(--text-sub));
  opacity: 0.75;
  padding-bottom: 3px;
  margin: 6px 0 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 50%, transparent);
}
.charts-shell .charts-section-body > .charts-subhead:first-child {
  margin-top: 0;
}

/* ──────────────────────────────────────────────────────────────────────
   19. Left-edge alignment — eliminate the asymmetric gutter the user
       flagged ("massive mistakes on the left side"). Source of issues:
       (a) the earlier `li` blanket rule was overflowing the leaf grid
           (already replaced in Section 4 above with targeted selectors);
       (b) cluster-buy/cluster-sell add a 2px border-left without
           compensating padding, so the inside-cell text optically jumps
           2px right vs sibling headers without a tint;
       (c) charts-orders-row had a 0 0 6px 2px asymmetric outer padding
           that pulled the OPEN POSITIONS panel left of the chart's
           bottom edge by 2px;
       (d) charts-explainer's bottom row of chips had no padding-left
           alignment with the headline row;
       (e) rail-left header inputs had 4px left padding vs 6px rail
           outer padding — a 2px stair-step at the rail's top edge.
   ────────────────────────────────────────────────────────────────────── */
.charts-shell .cluster-buy,
.charts-shell .cluster-sell {
  padding-left: 10px; /* 8px base + 2px border-left visual compensation */
}
.charts-shell .charts-orders-row {
  padding: 0 0 6px;
  margin-top: 6px;
}
.charts-shell .charts-explainer .exp-row-chips,
.charts-shell .charts-explainer .exp-row-head {
  padding-left: 0;
}
.charts-shell .charts-rail-left .charts-rail-header {
  padding: 6px 6px 8px;
  margin: 0 0 4px;
}
/* When the active leaf draws its accent border-left, the right rail's
   sections were drifting 1-2px right of the chart's right edge due to a
   stale margin-right on .charts-section. Pin to 0 so right rail aligns
   flush with main's right edge under the topbar. */
.charts-shell .charts-rail-right .charts-section {
  margin-left: 0;
  margin-right: 0;
}
/* Chart canvas's outer container — was getting a 1px inset border from
   charts-rail's section system. Remove it: Section 15 already zeros the
   inner chart's border, but the outer .charts-main can still draw a 1px
   line if charts.css :39 .charts-main has padding (it doesn't on STANDARD
   builds, but defensive). */
.charts-shell .charts-main > .charts-chart {
  margin: 0;
}
/* Below-chart orders panel — accent bar at h3::before sits at left:6px,
   but the panel itself has border-radius 8px which gets clipped by the
   accent bar on the left edge. Move accent down 1px and right 1px so
   it doesn't touch the rounded corner. */
.charts-shell .charts-orders-panel h3::before {
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 11px;
}

/* ──────────────────────────────────────────────────────────────────────
   20. Mobile / narrow polish — at ≤520px the side-by-side orders row
       squashes panel headers into "OPEN / POSITIONS" two-line stacks;
       at ≤480px the outer 16px gutter eats too much chart width. Stack
       orders vertically, compress the outer gutter, and tighten the
       explainer/cluster headers so the chart claims more vertical room.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  /* charts-rail.css:1044 uses `.charts-shell #charts-orders-row` (ID
     selector, specificity 1,1,0) — class selectors lose. Match by ID. */
  .charts-shell #charts-orders-row,
  .charts-shell .charts-orders-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .charts-shell .charts-orders-panel h3 {
    padding: 5px 8px 5px 20px;
    font-size: 9.5px;
  }
  .charts-shell .charts-orders-panel .charts-section-body {
    padding: 6px 8px;
  }
}
@media (max-width: 480px) {
  .charts-shell {
    padding: 8px !important;
    gap: 6px;
  }
  .charts-shell .charts-topbar {
    padding: 0 8px;
    min-height: 44px;
  }
  .charts-shell .charts-overlay-bar {
    padding: 3px 6px;
    gap: 0;
    min-height: 28px;
  }
  .charts-shell .charts-overlay-bar .ov-group {
    padding: 0 5px;
    gap: 2px;
  }
  .charts-shell .charts-overlay-bar .qf-chip {
    height: 18px;
    min-width: 38px;
    padding: 0 5px;
    font-size: 8.5px;
  }
  /* Explainer at mobile — chip grid relaxes to 2-col then auto so dense
     "Phase / Sess / 12m / 0/8 / VOL / Spread" reads top-to-bottom not
     left-to-right (which was wrapping mid-token). */
  .charts-shell .charts-explainer {
    padding: 5px 8px;
    row-gap: 3px;
  }
  .charts-shell .charts-explainer .exp-row-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 8px;
  }
  .charts-shell .charts-explainer .exp-headline {
    font-size: 11.5px;
  }
  .charts-shell .charts-explainer .exp-tag {
    font-size: 11px;
  }
  /* Cluster basket header — pack tighter at mobile */
  .charts-shell .cluster-hdr {
    padding: 4px 6px;
    gap: 4px;
    font-size: 10.5px;
  }
  /* Drawer handle — trim further to give chart vertical room */
  .charts-shell .charts-drawer-handle {
    min-height: 26px;
    padding: 3px 8px;
    gap: 6px;
  }
  /* Orders panel body — collapse the empty-state min-height so the
     "No open positions" line doesn't add 32px of unused panel height */
  .charts-shell .charts-orders-panel .charts-section-body {
    min-height: 24px;
    padding: 5px 8px;
  }
  .charts-shell .charts-orders-panel .charts-section-body > .charts-dim:only-child {
    min-height: 20px;
    font-size: 10.5px;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   21. Round 4 polish (2026-05-25) — focused on remaining mobile/tablet
       gaps and badge density. Layered on top of sections 1-20.

   (a) Explainer .exp-tag value should NOT break mid-token. "Bank Holiday
       (USD) · 1h 41m" was wrapping after "Holiday" on narrow widths,
       making the chip-grid stutter. white-space:nowrap on the value
       lets the auto-fill grid pick a wider track instead.
   (b) MS strip labels at narrow widths need to stay legible — currently
       8px @ 1366px and below feels cramped on the 4-row mobile stack.
       Bump min-size + add tabular-nums to values so columns align.
   (c) Left rail leaf badges (lt-pml, FML pill, SL chip) should read as
       "auxiliary info" not "co-equal pills next to the value". Drop
       borders on the inert badges, keep the live PML bar tinted.
   (d) Bottom orders-row at 521-1024px: when one panel is empty, give
       the empty side ~70% less height. Currently both panels lock to
       the same min-height even when one says "No pending orders".
   ────────────────────────────────────────────────────────────────────── */

/* (a) Explainer tag values stay on one line. Switch the chip container from
   `grid auto-fill minmax(96px,1fr)` (which created 96px-wide tracks that
   wrap long values like "Bank Holiday (USD) · 1h 32m" mid-token) to a flex
   wrap so each chip claims its natural width and only line-wraps between
   chips, not within them. */
.charts-shell .charts-explainer .exp-row-chips {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: none;
  column-gap: 14px;
  row-gap: 3px;
}
.charts-shell .charts-explainer .exp-tag {
  white-space: nowrap;
  min-width: 0;
  flex: 0 0 auto;
}
.charts-shell .charts-explainer .exp-tag .exp-label {
  white-space: nowrap;
  flex: 0 0 auto;
}

/* (b) MS strip labels — slightly larger + tabular-nums on values */
.charts-shell .charts-ms-strip .ms-seg .ms-seg-val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1;
}
.charts-shell .charts-ms-strip .ms-seg .ms-seg-lbl {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* (c) Left rail leaf — PML/FML cap subtler so the P/L value dominates */
.charts-shell .charts-rail-left .lt-pml {
  font-size: 9.5px;
  gap: 3px;
}
.charts-shell .charts-rail-left .lt-pml-cap {
  font-size: 8.5px;
  letter-spacing: 0.08em;
  opacity: 0.65;
  font-weight: 700;
}
.charts-shell .charts-rail-left .lt-pml-bar {
  height: 3px;
  background: color-mix(in srgb, var(--text-dim) 14%, transparent);
  border-radius: 2px;
}
.charts-shell .charts-rail-left .lt-pml-txt {
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}
.charts-shell .charts-rail-left .lt-pml-empty .lt-pml-cap,
.charts-shell .charts-rail-left .lt-pml-empty .lt-pml-txt {
  opacity: 0.4;
}

/* (d) Empty-state orders panel — collapse vertical space at every viewport
   when the panel's only child is the "No pending orders" dim line. */
.charts-shell .charts-orders-panel .charts-section-body:has(> .charts-dim:only-child) {
  min-height: 24px;
  padding: 4px 10px;
}
.charts-shell .charts-orders-panel .charts-section-body > .charts-dim:only-child {
  min-height: 18px;
  font-size: 10.5px;
}

/* (e) Mobile 375 explainer headline + chip-grid — single-column when there
   are <4 chips so values don't compress to 50% width unnecessarily. The
   2-col override at @480 already handles this for >=4 chips. */
@media (max-width: 380px) {
  .charts-shell .charts-explainer .exp-row-chips {
    flex-direction: column;
    column-gap: 0;
    row-gap: 2px;
  }
  .charts-shell .charts-explainer .exp-tag {
    padding: 1px 0;
  }
}

/* (f) 521-1024px tablet/narrow-desktop — when right rail is hidden the
   chart claims more width, but the orders-row keeps its 2-col split.
   Tighten the row's top margin so the chart breathes; force same h3 spec
   as desktop polish to avoid CSS-cascade drift at this breakpoint. */
@media (min-width: 521px) and (max-width: 1024px) {
  .charts-shell .charts-orders-row {
    margin-top: 4px;
    gap: 6px;
  }
  .charts-shell .charts-orders-panel h3 {
    padding: 5px 9px 5px 20px;
    font-size: 9.5px;
  }
  .charts-shell .charts-orders-panel .charts-section-body {
    padding: 6px 9px;
    min-height: 28px;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   22. Round 5 polish (2026-05-25 10:35) — chart-area density gains.

   (a) Left rail group header (GOLD / SILVER / INDEX / FOREX) reads as a
       flat label — give it a subtle inset tint + h:24px so the eye
       distinguishes "category" rows from "leaf" rows at a glance.
   (b) Mobile overlay-bar at <480 was wrapping to 3-4 chip rows due to
       group ::before labels (NEWS / PROTECTION / MARKERS …) eating ~36px
       per group. Hide the group labels on mobile — the chip text already
       carries the meaning ("NEWS H", "BE", "TRAIL") — recover 2 rows.
   (c) Mobile topbar trimmed to 40px (was 44px). Recovers 4px of chart
       vertical room which matters more than topbar headroom on phones.
   (d) Right rail BASKET cluster card — wrap-friendly metadata. "Recovery
       cancelled - BE/Trail engaged" was wrapping awkwardly; allow-wrap on
       the subline + tighten line-height so a 2-line wrap reads as one
       paragraph not two-orphans.
   (e) Bottom alpha banner ("ALPHA PHASE - Log issues to support@cfin.be")
       at <520 is full-width with two paragraphs of text. Trim padding +
       font-size so it claims less vertical room above the chart shell.
   ────────────────────────────────────────────────────────────────────── */

/* (a) Group header inset tint */
.charts-shell .charts-rail-left .charts-instance-group {
  min-height: 22px;
  padding: 4px 8px 4px 10px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 55%, transparent),
    color-mix(in srgb, var(--surface-2) 25%, transparent));
  border-radius: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent);
}
.charts-shell .charts-rail-left .charts-instance-group .grp-name {
  letter-spacing: 0.1em;
}
.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 {
  height: 15px;
  padding: 0 4px;
  font-size: 8.5px;
  background: color-mix(in srgb, var(--surface-3) 75%, transparent);
}

/* (d) BASKET cluster sub-line — allow wrap with proper line-height */
.charts-shell .cluster-hdr .cluster-status,
.charts-shell .cluster-hdr .cluster-note,
.charts-shell .charts-section-body .cluster-sub {
  white-space: normal;
  line-height: 1.35;
  font-size: 10.5px;
  opacity: 0.82;
}

/* Mobile-specific tightening (<= 480px) */
@media (max-width: 480px) {
  /* (b) Hide overlay-bar group labels — chip text carries the meaning,
     and the ::before label was forcing each group to its own row */
  .charts-shell .charts-overlay-bar .ov-group::before {
    display: none;
  }
  .charts-shell .charts-overlay-bar .ov-group {
    padding: 0 4px;
    margin-right: 2px;
    /* Hide group dividers on mobile when labels are also hidden — leaving a
       faint vertical line with no header above it reads as a visual orphan. */
    border-right: 0;
  }
  /* (c) Topbar 40px on mobile (was 44 at 480 polish-v2 Section 20) */
  .charts-shell .charts-topbar {
    min-height: 40px;
  }
  /* Group header tinted bg + tighter on mobile too */
  .charts-shell .charts-rail-left .charts-instance-group {
    min-height: 20px;
    padding: 3px 6px 3px 8px;
    font-size: 9px;
  }
  /* (e) Bottom alpha banner — slimmer on mobile */
  .charts-shell .alpha-banner,
  .charts-shell .charts-alpha-banner,
  .alpha-banner-fixed {
    padding: 4px 10px;
    font-size: 10.5px;
    line-height: 1.3;
  }
}

/* (f) Tablet 521-1024 — apply group header tint too so the rail reads
   consistently across the breakpoint range */
@media (min-width: 521px) and (max-width: 1024px) {
  .charts-shell .charts-rail-left .charts-instance-group {
    min-height: 21px;
    padding: 3px 7px 3px 9px;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   23. Round 6 polish (2026-05-25) — width audit follow-up.

   (a) Overlay bar wrap at 1025-1600 was set to nowrap+scroll, but at
       0-1024 (tablet/mobile) the bar still wraps to 3-4 rows because
       8 chips + 4 group separators don't fit. Force horizontal scroll
       everywhere below 1600 — chips are touch targets at mobile sizes
       already and the bar shows a clear "scrollable" cue via fade mask.
   (b) Alpha banner overlap — on /charts the shell is position:fixed and
       extends to viewport bottom; the alpha banner floats over the
       bottom of the drawer/orders-row. Push shell bottom inset up by the
       banner clearance (banner-height + 2*banner-bottom + gap = ~95px)
       so the drawer + bottom-most content stays above the pill.
   (c) Left rail leaf badges at 1280-1440 — multiple inline badges
       (`PML 44%`, `7L`, `15+`) crowd the row. Hide the PML label cap +
       drop the leg-count border + tabular-nums on the right value so the
       row reads as "[icon] NAME …………… [VALUE]" with auxiliary chips
       muted.
   (d) Mobile header cluster (nav bell + Dashboard btn + account dropdown)
       — apply a charts-scoped nav-actions gap bump on body.page-charts
       so the bell and the Dashboard icon button get 4-6px of breathing
       room from the account pill at <480 without touching the global nav.
   ────────────────────────────────────────────────────────────────────── */

/* (a) Overlay bar — horizontal scroll on all narrow widths (≤1600) */
@media (max-width: 1600px) {
  .charts-shell .charts-overlay-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    /* Fade mask hints at scrollable content */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%);
  }
  .charts-shell .charts-overlay-bar::-webkit-scrollbar { display: none; }
  .charts-shell .charts-overlay-bar .ov-group {
    flex: 0 0 auto;
  }
  .charts-shell .charts-overlay-bar .qf-chip {
    flex: 0 0 auto;
  }
}
/* Below 1024 also hide the group::before labels — chip text carries it.
   (Mobile <=480 already had this rule; extend up to 1024.) */
@media (max-width: 1024px) {
  .charts-shell .charts-overlay-bar .ov-group::before { display: none; }
}

/* (b) Alpha banner clearance — reserve bottom space on the charts shell
   so the floating banner doesn't sit over the drawer/orders row.
   Calc: banner-bottom (25px) + banner-height (36px) + safety gap (12px)
   = ~73px. Mobile banner is slightly slimmer; use 64px there. */
.charts-shell {
  padding-bottom: max(
    clamp(16px, 3vw, 32px),
    calc(var(--banner-bottom-desktop, 25px) + var(--banner-height, 36px) + 12px),
    env(safe-area-inset-bottom, 0px)
  );
}
@media (max-width: 768px) {
  /* Mobile/tablet: alpha banner sits at bottom:68px (banner-notif-bottom-mobile,
     theme.css:27665). Drawer collapsed handle is ~44px tall; needs to clear the
     banner (height 36px) + a small gap. Total: 68 + 36 + 8 = 112px. */
  .charts-shell {
    padding-bottom: max(
      14px,
      calc(68px + var(--banner-height, 36px) + 10px),
      env(safe-area-inset-bottom, 0px)
    ) !important;
  }
}

/* (c) Left rail leaf badge density at 1280-1440 — declutter */
@media (min-width: 1025px) and (max-width: 1440px) {
  /* Drop the PML cap text; the bar + numeric still communicate progress */
  .charts-shell .charts-rail-left .lt-pml-cap { display: none; }
  /* Leg-count chip ("7L") borderless so it reads as label not pill */
  .charts-shell .charts-rail-left .leaf-leg-count,
  .charts-shell .charts-rail-left .lt-leg-count {
    border: 0;
    background: transparent;
    padding: 0 2px;
    opacity: 0.7;
  }
  /* Right-value column tabular + min-width:0 so it never clips */
  .charts-shell .charts-rail-left .charts-instance-leaf .leaf-pnl,
  .charts-shell .charts-rail-left .charts-instance-leaf .leaf-realized {
    font-variant-numeric: tabular-nums;
    min-width: 0;
  }
}

/* (d) Mobile nav-actions gap — only on /charts to avoid global-nav drift */
@media (max-width: 480px) {
  body.page-charts .nav-actions {
    gap: 6px;
  }
  body.page-charts .nav-brand {
    gap: 6px;
    min-width: 0;
  }
  /* Account pill in nav can shrink rather than push the bell off-screen */
  body.page-charts .nav-account-pill,
  body.page-charts .nav-brand .charts-select,
  body.page-charts .nav-brand select {
    max-width: 110px;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   24. Round 7 polish (2026-05-25 15:20)

   (a) MS strip idle treatment — handled in JS (chart.js setMarketStateStrip
       now emits `idle` class when verdict/conf/mult are exactly 0). CSS for
       the .ms-seg.idle modifier lives in section 1 above. No-op here, just
       documented for cross-reference.

   (b) LEVELS panel value truncation at narrow rails (≤1440) — D1/W1 rows
       with `49108.70 -28785p` content render as `8.70 -28785p` because
       `.lvl-side` is right-aligned + overflow:hidden, so the price prefix
       clips when the box can't fit both. Fix: stack the price + distance
       suffix vertically on narrow rails so the price gets its own line.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1440px) {
  .charts-shell .charts-rail-right #rail-levels .lvl-side {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    line-height: 1.15;
    padding: 2px 5px;
  }
  .charts-shell .charts-rail-right #rail-levels .lvl-side .charts-dim {
    font-size: 9px;
    opacity: 0.7;
    letter-spacing: 0.01em;
  }
}

/* (c) ARMED pattern row counts — "0 · 0V" wrapped to two lines at 1280
   because the cell narrows below the inline content's natural width.
   Lock the cell on a single line; row layout already has a 1fr strip
   column so width pressure shifts there instead. */
.charts-shell .charts-rail-right .pat-row .pat-counts {
  white-space: nowrap;
}

/* (d) Portfolio hero EFFECTIVE/VAULT tiles — at narrow rail widths the
   value `€25,116.61 · 27d` ellipses to `€25,116.6…` because the inline
   days chip eats trailing room. Let the `.charts-dim` sub-chip wrap to
   a second line so the price keeps its full glyph count. */
@media (max-width: 1366px) {
  .charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .val {
    white-space: normal;
    line-height: 1.2;
  }
  .charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile .val .charts-dim {
    display: block;
    margin-top: 1px;
  }
}

/* (e) "Realized today" ms-row label truncated to "Realized …" at 1280
   because the value "+€715.15 · 44 closed" is wide and pushes the
   flex-grow label into ellipsis. Drop the closed-count sub onto a
   second line so the value column stays narrower. */
@media (max-width: 1366px) {
  .charts-shell .charts-rail-right #rail-portfolio .ms-row > span:last-child {
    text-align: right;
    line-height: 1.2;
  }
  .charts-shell .charts-rail-right #rail-portfolio .ms-row > span:last-child .charts-dim {
    display: block;
    font-size: 9.5px;
    opacity: 0.7;
    margin-top: 1px;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   25. Round 8 polish (2026-05-26) — left + right rail final pass.

   (L1) 1280px overflow: .charts-rail-left { width: 240px } (charts.css
        line 1721) overflows the grid track (minmax 200-220 from
        charts-responsive.css line 23). Pin width to 100% of the track.
   (L2) Active leaf accent — section 4 above sets a 2px border-left, but
        on `.has-open` rows the soft profit-tint bg drowns the 2px line
        out. Bump active-state to 3px and add an inset glow ring.
   (L4) Group P/L stacks "today" label below the number (charts-rail.css
        line 633: flex-direction:column on .grp-pnl-wrap). Inline them
        baseline-aligned so the group row collapses to a single line.
   (R1) Daily DD Budget wide tile content collapses at ≤1366px so the
        2×2 hero grid reads as four similar-height tiles. dd-pool-block
        sub-row hides and .sub row shrinks to a single condensed line.
   (R4) h3 padding-left 22px is leftover from a removed 3×14 left-bar
        accent. Reduce to 12px; the top-edge tint + right swatch already
        carry status, the indent without content reads as a typo.
   (R5) #rail-portfolio .ms-row-byea is 31px (6px padding) vs base
        .ms-row 24px (4px). Drop to 4px and add a hairline divider
        between by-EA rows so they read as a grouped sub-list.
   (R6) Right rail has 3.3× viewport content with no scroll affordance.
        Soft mask gradient on the bottom 28px hints at more content.
   ────────────────────────────────────────────────────────────────────── */

/* (L1) Pin left rail to grid track width so the 240px explicit width
   from charts.css doesn't overflow the 200-220px column at 1280. */
@media (min-width: 1025px) and (max-width: 1366px) {
  .charts-shell .charts-rail-left {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
  }
}

/* (L2) Active-leaf accent — SINGLE selection indicator: a 3px accent left
   bar (border-left, constant width so toggling causes no content shift) plus
   the faint accent background tint set earlier. The previous rule stacked a
   full 1px inset ring AND a 3px inset bar ON TOP of this border-left, which
   read as a doubled/boxed "selector" around the row. box-shadow:none here
   overrides the earlier 1px-ring rule (same specificity, this wins by order)
   so exactly one cue remains. */
.charts-shell .charts-rail-left .charts-instance-leaf {
  border-left-width: 3px;
}
.charts-shell .charts-rail-left .charts-instance-leaf.active,
.charts-shell .charts-rail-left .charts-instance-leaf.has-open.active {
  border-left-color: var(--accent);
  box-shadow: none;
}

/* (L4) Group P/L + "today" inline. Drop the scope label one rem-sized step
   smaller and align baselines so it reads as a unit. */
.charts-shell .charts-rail-left .charts-instance-group .grp-pnl-wrap {
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  line-height: 1.15;
}
.charts-shell .charts-rail-left .charts-instance-group .grp-pnl-scope {
  font-size: 8.5px;
  letter-spacing: 0.05em;
  margin-top: 0;
  opacity: 0.5;
}

/* (R1) Daily DD Budget wide tile content collapse at narrow widths.
   At ≤1366 hide the dd-pool-block (its row is duplicated by the
   .charts-hero-dd-bar above) and collapse .sub to a single line. */
@media (max-width: 1366px) {
  .charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile.wide .dd-pool-block {
    display: none;
  }
  .charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile.wide .sub {
    font-size: 9px;
    gap: 6px;
    padding-top: 2px;
    opacity: 0.75;
  }
  .charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile.wide {
    padding: 8px 10px;
    gap: 4px;
  }
  .charts-shell .charts-rail-right #rail-portfolio .charts-hero-tile.wide .val {
    font-size: 13.5px;
    line-height: 1.25;
  }
}

/* (R4) Right-rail section h3 — reduce indent from 22px to 12px. Top-edge
   tint already carries status; no left swatch lives in that space, so the
   indent reads as accidental. Pull the section title flush with the body
   text below (which also lives at ~10-12px from the card edge). Also
   propagate to the below-chart orders panel for visual consistency. */
.charts-shell .charts-rail-right .charts-section h3,
.charts-shell .charts-orders-panel h3 {
  padding-left: 12px;
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .charts-shell .charts-rail-right .charts-section h3,
  .charts-shell .charts-orders-panel h3 {
    padding-left: 10px;
  }
}

/* (R5) Portfolio by-EA rows — normalize to base .ms-row rhythm (4px
   padding) and add a hairline between rows so they read as grouped. */
.charts-shell .charts-rail-right #rail-portfolio .ms-row-byea {
  padding: 4px 4px;
  border-top: 1px dashed color-mix(in srgb, var(--border-subtle) 50%, transparent);
  border-radius: 0;
  margin: 0;
}
.charts-shell .charts-rail-right #rail-portfolio .ms-row-byea:first-of-type {
  border-top: 0;
}
.charts-shell .charts-rail-right #rail-portfolio .ms-row-byea:hover {
  background: color-mix(in oklab, var(--surface-2) 50%, transparent);
  border-radius: 4px;
}

/* (R6) Right rail scroll-hint mask — soft 28px fade at the bottom so the
   user knows there's more content below. Skips on iframe preview where
   the rail is already constrained to viewport height with overflow:hidden. */
.charts-shell .charts-rail-right {
  -webkit-mask-image: linear-gradient(180deg,
    #000 0,
    #000 calc(100% - 28px),
    color-mix(in srgb, #000 40%, transparent) calc(100% - 8px),
    transparent 100%);
  mask-image: linear-gradient(180deg,
    #000 0,
    #000 calc(100% - 28px),
    color-mix(in srgb, #000 40%, transparent) calc(100% - 8px),
    transparent 100%);
}
/* When user scrolls to the very bottom (scroll-end), drop the fade so the
   last section's swatch/badges aren't cut off. Detection via scroll
   position is a JS concern — fall back to a sane "no fade if content
   fits" via a max-height check. */
@supports (animation-timeline: scroll()) {
  .charts-shell .charts-rail-right {
    animation: rail-fade-out linear both;
    animation-timeline: scroll(self);
    animation-range: calc(100% - 60px) 100%;
  }
  @keyframes rail-fade-out {
    to {
      -webkit-mask-image: linear-gradient(180deg, #000 0, #000 100%);
      mask-image: linear-gradient(180deg, #000 0, #000 100%);
    }
  }
}

/* ──────────────────────────────────────────────────────────────────────
   13. On-chart label declutter (CEO: "chart too full, visuals unclear").
       chart.js draws overlay labels as SVG <text> with inline presentation
       attributes (fill / fill-opacity). CSS here loads AFTER charts.css and
       overrides those presentation attrs WITHOUT !important — letting us
       quiet the compact glyph tags consistently while the full phrasing
       stays on the hover <title>. Tokens only (no hex) so dark+light track.
       Classes set in chart.js drawOverlay():
         .ov-zone-tag  — D·O / D·C / W·O / W·C / WKND / FLAT padding glyphs
         .ov-sess-tag  — A / L / N session-open letters (now in axis gutter)
         .ov-level-tag — D·H / Y·H / D·L compact daily-level tag
         .news-label   — rotated high-impact news headline (already gated)
   ────────────────────────────────────────────────────────────────────── */
.charts-shell .ov-zone-tag,
.charts-shell .ov-sess-tag,
.charts-shell .ov-level-tag {
  letter-spacing: 0.4px;
  /* Quiet the compact glyphs — they are markers, not captions. Full text
     surfaces on hover via the SVG <title>. */
  transition: fill-opacity 0.15s ease;
}
.charts-shell .ov-zone-tag:hover,
.charts-shell .ov-sess-tag:hover,
.charts-shell .ov-level-tag:hover {
  fill-opacity: 0.95;
}
/* Rotated news headlines: keep them subdued so the candle column stays
   readable; the tier-1 (highest-impact) row reads a touch stronger. */
.charts-shell .news-label { letter-spacing: 0.3px; }

/* Inline glyph legend (chart.js _renderInlineLegend, bottom-LEFT). Left-anchored
   so it never sits over the most-recent (right-most) candles. The new pill-
   language rows widen the copy slightly — cap width and let it wrap so it
   stays a compact teaching card that the existing 12s auto-fade clears. */
.charts-shell .charts-inline-legend {
  max-width: 240px;
  /* Sit clear of the right-most candles: hard-pin to the left gutter even if
     a future change tries to recentre it. */
  right: auto !important;
}
.charts-shell .charts-inline-legend > div {
  white-space: normal;
}

/* ── Mobile: the candle column is tightest here, so trim label footprint ──
   The compact glyph tags drop a step in size and the legend narrows so it
   covers the fewest candles before it auto-fades. */
@media (max-width: 600px) {
  .charts-shell .ov-zone-tag,
  .charts-shell .ov-level-tag { font-size: 7.5px; }
  .charts-shell .charts-inline-legend {
    max-width: 188px;
    left: 8px;
    bottom: 8px;
    font-size: 9px;
  }
}