/* ============================================================================
 * tradeStack — EMA Gate bot pages
 * ========================================================================= */

/* ── Clock strip (replaces old hero) ──────────────────────────────────── */
.eg-clockbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: -4px 0 14px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 12px;
}
.eg-clock-sep { opacity: 0.5; }
.eg-account-select {
  background: var(--bg-card, #1e1e2e);
  color: var(--text-primary, #c6d0f5);
  border: 1px solid var(--border-default, #363a4f);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
}
.eg-account-select:focus { outline: 2px solid var(--accent-primary, #7c3aed); outline-offset: 1px; }
.eg-countdown {
  color: var(--accent-secondary);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}

/* ── Panels stack with consistent gap ─────────────────────────────────── */
.eg-panel { margin-bottom: 14px; }

/* ── Range-selector header ────────────────────────────────────────────── */
.eg-range-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.eg-range-select {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 4px 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}
.eg-range-select:hover { border-color: var(--border-strong); }
.eg-range-select:focus { outline: none; border-color: var(--accent); }

/* ── Chart mount points ───────────────────────────────────────────────── */
.eg-chart { min-height: 260px; width: 100%; }
.eg-skeleton {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 13px;
  font-style: italic;
}
.eg-empty {
  padding: 20px;
  color: var(--text-tertiary);
  font-size: 13px;
  text-align: center;
}

/* ── Portfolio summary grid ───────────────────────────────────────────── */
.eg-summary { margin-bottom: 14px; }
.eg-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

/* Stat widget (RunPod-style: icon row + value + two-toned foot) */
.eg-stat {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 92px;
}
.eg-stat__head {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-tertiary);
}
.eg-stat__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.85;
  stroke-width: 1.75;
}
.eg-stat__label {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary);
  line-height: 1;
}
.eg-stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.eg-stat__value.up    { color: var(--up-bright); }
.eg-stat__value.down  { color: var(--down-bright); }
.eg-stat__value.warn  { color: var(--warning); }
.eg-stat__value.muted { color: var(--text-tertiary); }
.eg-stat__unit {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.7;
  margin-left: 1px;
}
.eg-stat__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.2;
  margin-top: auto;
}
.eg-stat__foot .sep { color: var(--text-muted); opacity: 0.55; }
.eg-stat__foot .muted { color: var(--text-tertiary); font-family: var(--font-sans); font-variant-numeric: normal; }
.eg-stat__foot .num { color: var(--text-primary); }
.eg-stat__foot .up    { color: var(--up-bright); }
.eg-stat__foot .down  { color: var(--down-bright); }
.eg-stat__foot .accent { color: var(--accent-secondary); }

/* Legacy .eg-kpi fallback (rendered by any non-live partial still using it) */
.eg-kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.eg-kpi__label {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 400;
}
.eg-kpi__value {
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1.2;
  margin-top: 2px;
}
.eg-kpi__value.warn { color: var(--warning); }
.eg-kpi__sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* ── Symbol / direction pills in tables ───────────────────────────────── */
.eg-sym {
  font-family: var(--font-mono);
  font-weight: 450;
  color: var(--text-primary);
}
.eg-dir {
  font-family: var(--font-mono);
  font-weight: 450;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}

/* ── Last 24h ─────────────────────────────────────────────────────────── */
.eg-24h__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.eg-24h__stat {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 12px 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.eg-24h__label {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1;
}
.eg-24h__value {
  font-size: 17px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.15;
}
.eg-24h__value.up   { color: var(--up-bright); }
.eg-24h__value.down { color: var(--down-bright); }
.eg-24h__sub {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.eg-24h__sub.up   { color: var(--up-bright); }
.eg-24h__sub.down { color: var(--down-bright); }
.eg-inset-table { margin-bottom: var(--space-3); }
.eg-24h__blocks { margin-top: var(--space-4); }
.eg-24h__blocks-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}
.eg-24h__block-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: var(--space-2);
  width: 100%;
}
.eg-24h__block {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  background: transparent;
}
.eg-24h__block.up {
  border-color: rgba(38, 166, 154, 0.35);
  background: rgba(38, 166, 154, 0.06);
}
.eg-24h__block.down {
  border-color: rgba(239, 83, 80, 0.35);
  background: rgba(239, 83, 80, 0.06);
}
.eg-24h__block-r { font-weight: 500; }
.eg-24h__block-t {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.eg-24h__block.up .eg-24h__block-r { color: var(--up-bright); }
.eg-24h__block.down .eg-24h__block-r { color: var(--down-bright); }

/* ── Total row in perf tables ─────────────────────────────────────────── */
.eg-total-row td {
  border-top: 1px solid var(--border-default) !important;
  font-weight: 500;
  background: var(--bg-surface-raised);
}

/* ── Paging footer ────────────────────────────────────────────────────── */
.eg-paging {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.eg-paging__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* ── Drawdown card ────────────────────────────────────────────────────── */
.eg-dd {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.eg-dd__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-faint);
}
.eg-dd__row:last-child { border-bottom: none; }
.eg-dd__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.eg-dd__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-md);
  font-weight: 500;
}
.eg-dd__value.warn { color: var(--warning); }

/* ── Decision log ─────────────────────────────────────────────────────── */
.eg-decisions {
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  max-height: 360px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: var(--space-4);
}

/* ── Anthropic: direction pills + review chips + mobile table scroll ── */
.eg-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border: 1px solid transparent;
}
.eg-pill--long {
  color: var(--up-bright);
  background: var(--up-soft);
  border-color: rgba(38, 166, 154, 0.28);
}
.eg-pill--short {
  color: var(--down-bright);
  background: var(--down-soft);
  border-color: rgba(239, 83, 80, 0.28);
}
.eg-pill--hold {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-weak);
}
.eg-pill--move {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: rgba(247, 185, 85, 0.28);
}
.eg-pill--dim {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border-weak);
}

.eg-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  border: 1px solid var(--border-weak);
  white-space: nowrap;
}
.eg-chip + .eg-chip { margin-left: 4px; }
.eg-chip--n {
  background: rgba(99, 135, 255, 0.10);
  color: var(--brand);
  border-color: rgba(99, 135, 255, 0.28);
}
.eg-chip--dim {
  background: transparent;
  color: var(--muted);
}
.eg-chip--warn {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: rgba(247, 185, 85, 0.32);
}

.eg-review-cell {
  white-space: nowrap;
  font-size: 11px;
}

/* Reason row — structured rather than inline stringed. */
.eg-reason-row > .eg-reason-cell {
  padding: 4px 14px 12px;
  font-size: 12px;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.015);
  border-top: 1px dashed var(--border-weak);
}
.eg-reason-line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 2px 0;
}
.eg-reason-line + .eg-reason-line { margin-top: 2px; }
.eg-reason-label {
  flex: 0 0 auto;
  min-width: 96px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}
.eg-reason-text {
  flex: 1 1 auto;
  color: var(--text-primary);
}
.eg-reason-text.muted { color: var(--text-secondary); }

/* Table polish — slightly tighter header, hover highlight. */
.eg-open-table thead th,
.eg-closed-table thead th,
.eg-reviews-table thead th {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.015);
}
/* Removed generic row-hover background on open / closed / reviews tables.
   Those rows aren't actually clickable, and a hover background falsely
   suggests they are. Rows that ARE clickable opt in explicitly (see
   .eg-bs-row:hover for the bot-status table). */

/* Trade group delimiter — purple accent line separates each trade block
   (primary row + its reason row read as one unit). Using box-shadow instead
   of border-top because the table has border-collapse which can swallow
   adjacent borders. */
.eg-trade-main > td {
  padding-top: 10px;
  padding-bottom: 6px;
}
.eg-trade-main.eg-trade-start > td {
  box-shadow: inset 0 1px 0 0 rgba(95, 76, 254, 0.45);
  padding-top: 18px;
}
.eg-trade-main + .eg-reason-row > .eg-reason-cell {
  border-top: none;
  padding-top: 4px;
  padding-bottom: 16px;
}

/* Horizontal scroll wrapper keeps wide tables inside the card on mobile
   AND prevents the card from being stretched by the table's intrinsic
   min-width on narrow desktop grid cells (e.g. 3-col layouts). */
.eg-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
}
.eg-table-scroll > .data-table {
  min-width: 640px;
}
/* Grid cells default to min-width:auto which defeats the scroll wrapper;
   force them to be shrinkable so the scroll container actually kicks in. */
.grid > .card,
.grid > .eg-panel {
  min-width: 0;
}

@media (max-width: 640px) {
  .eg-table-scroll > .data-table { min-width: 560px; }
  .eg-reason-label { min-width: 72px; font-size: 10px; }
  .eg-reason-line { flex-direction: column; gap: 2px; }
  .eg-pill { font-size: 10px; padding: 1px 6px; }
  .eg-chip { font-size: 10px; padding: 0 6px; }
}



/* ── Open-trade chart (M5) ───────────────────────────────────────────── */
.eg-open-chart__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4, 12px);
  align-items: flex-end;
  margin-bottom: var(--space-4, 12px);
}
.eg-open-chart__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--muted, #9aa0a8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.eg-open-chart__hint {
  font-size: 11px;
  margin-left: auto;
  align-self: center;
}
.eg-open-chart__canvas {
  width: 100%;
  min-height: 420px;
}
.eg-select {
  background: #1a1d26;
  color: var(--text, #d1d4dc);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  min-width: 160px;
}
.eg-select:focus {
  outline: 1px solid var(--accent, #7c5cff);
  border-color: var(--accent, #7c5cff);
}
@media (max-width: 640px) {
  .eg-open-chart__canvas { min-height: 320px; }
  .eg-open-chart__hint   { display: none; }
  .eg-select             { min-width: 140px; }
}

/* ============================================================================
 * Mobile refinements (Anthropic + EMA Gate shared pages)
 * Targets phones <= 640px (and a narrower tier <= 420px). Keeps widgets
 * inside their card, prevents page-level horizontal spill, and reduces
 * row-wrap noise on dense tables / pre-blocks.
 * ========================================================================= */

@media (max-width: 760px) {
  /* Page-level safety net: prevent any single widget that misbehaves
     (sets its own width, has wide content without scroll, etc.) from
     pushing the entire viewport wider than the screen. Individual
     scrollable widgets inside the page can still scroll horizontally
     using their own .eg-table-scroll / .eg-snap24__cross-scroll wrappers.

     Use `overflow-x: clip` (not `hidden`) so we don't create a scroll
     container — `hidden` on html/body breaks `position: sticky` on
     descendants like the topbar. `clip` keeps the safety-net behaviour
     without that side-effect. Falls back to `hidden` for old browsers. */
  html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
}

@media (max-width: 640px) {
  /* Tighter card chrome gives content more room. */
  .card__header  { padding: 10px 12px; flex-wrap: wrap; row-gap: 4px; }
  .card__body    { padding: 12px; }
  .card__title   { font-size: 12px; }
  .card__eyebrow { font-size: 11px; }

  /* Cards inside any grid must be allowed to shrink below content width. */
  .card, .eg-panel { min-width: 0; }

  /* Clock bar wraps cleanly and aligns left on mobile. */
  .eg-clockbar       { justify-content: flex-start; flex-wrap: wrap; row-gap: 4px; margin: 0 0 10px; }
  .eg-account-select { max-width: 100%; }

  /* Portfolio summary: 2 columns on even the narrowest phones. */
  .eg-summary__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .eg-stat          { padding: 10px 10px 9px; min-height: 78px; gap: 6px; }
  .eg-stat__value   { font-size: 15px; }
  .eg-stat__foot    { font-size: 10px; gap: 4px; }

  /* 24h + Reviews stats: 2-up with lighter padding. */
  .eg-24h__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .eg-24h__stat  { padding: 9px 10px 8px; }
  .eg-24h__value { font-size: 14px; }

  /* _reviews.html applies inline style="padding: var(--space-6)" — shrink it. */
  .eg-panel .eg-24h__stats[style] { padding: 12px !important; }

  /* Dense data-table typography (applies to Anthropic tables on mobile).
     min-width on the inner data-table is set 0 here; specific scrolling
     contexts (e.g. snapshot cross tables, date-scoped perf tables)
     re-assert their own min-width. The bot-status / closed / open tables
     use the card-flip layout below where columns are stacked, so no
     min-width is needed on those. */
  .eg-table-scroll > .data-table { min-width: 0; }
  .eg-open-table thead th,
  .eg-closed-table thead th,
  .eg-reviews-table thead th,
  .eg-table--anthropic thead th,
  .eg-inset-table thead th { padding: 6px 8px; font-size: 10.5px; }
  .eg-open-table tbody td,
  .eg-closed-table tbody td,
  .eg-reviews-table tbody td,
  .eg-table--anthropic tbody td,
  .eg-inset-table tbody td { padding: 6px 8px; font-size: 12px; }

  /* Decision log: horizontal scroll instead of wrapping every long line. */
  .eg-decisions {
    white-space: pre;
    word-break: normal;
    overflow-x: auto;
    max-height: 300px;
    font-size: 10.5px;
    padding: 10px 12px;
    margin: 10px;
  }

  /* Open-chart toolbar: selects flow to full width on narrow screens. */
  .eg-open-chart__toolbar { gap: 10px; }
  .eg-open-chart__label   { flex: 1 1 45%; min-width: 0; }
  .eg-select              { width: 100%; min-width: 0; }

  /* Range header wraps if title + selector don't fit. */
  .eg-range-header { flex-wrap: wrap; row-gap: 6px; }
}

@media (max-width: 420px) {
  .eg-summary__grid { grid-template-columns: 1fr; }
  .eg-24h__stats    { grid-template-columns: 1fr; }
  .eg-open-chart__label { flex: 1 1 100%; }
  .eg-table-scroll > .data-table { min-width: 0; }
  .eg-stat__value { font-size: 14px; }
}

/* ──────────────────────── Dashboard 2.x — restructure ──────────────────── */
/* Collapsible sections — chevron, header click target, body show/hide.
   Override the base .card__header `justify-content: space-between` so the
   title position doesn't shift between cards with different-length
   subtitles. Chevron + title hug the start, subtitle flows after them. */
.eg-collapse__header {
  cursor: pointer;
  user-select: none;
  justify-content: flex-start !important;
}
.eg-collapse__header:hover { background: var(--card-hover, rgba(255,255,255,0.02)); }
.eg-collapse__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}
/* Subtitle inside a collapse header: don't claim the leftover horizontal
   space — let it sit immediately after the title with a gap. */
.eg-collapse__header .eg-card__subtitle {
  margin-left: 0;
}

/* Date-picker scope divider — visual separator before the date-scoped block */
.eg-date-scope-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  padding: 0 var(--space-2);
}
.eg-date-scope-divider__bar {
  flex: 1;
  height: 1px;
  background: var(--border-subtle, rgba(255,255,255,0.08));
}
.eg-date-scope-divider__label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 4px 10px;
  border: 1px dashed var(--border-subtle, rgba(255,255,255,0.15));
  border-radius: 4px;
  white-space: nowrap;
}

/* 24h snapshot — grid of dimension cards (no hover affordance: not clickable). */

/* Mobile: stack the date scope label, wrap the snapshot grid columns */
@media (max-width: 760px) {
  .eg-date-scope-divider {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: stretch;
  }
  .eg-date-scope-divider__bar { display: none; }
  .eg-date-scope-divider__label {
    text-align: center;
    white-space: normal;
  }
  .eg-snap24__cross-table { font-size: 10px; }
  .eg-snap24__cross-table th,
  .eg-snap24__cross-table td { padding: 3px 4px; }
}

/* ──────────────────────── 24h Snapshot — proper layout ──────────────────── */
.eg-snap24 {
  padding: var(--space-4) var(--space-6);
}
.eg-snap24__topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  margin-bottom: var(--space-4);
}
.eg-snap24__window-label {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.eg-snap24__totals {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.eg-snap24__total-r {
  font-size: 16px;
  font-weight: 600;
}
.eg-snap24__total-trades {
  font-size: 11px;
  color: var(--text-muted);
}

/* Range selector inline in the snapshot top bar — dark-themed select.
   Native <select> defaults to OS-themed (often white). We force dark by
   setting bg/color and color-scheme + appearance:none on the control,
   then style <option> elements directly so the open dropdown isn't white. */
.eg-snap24__range-select {
  font-size: 11px;
  padding: 3px 22px 3px 8px;
  border: 1px solid var(--border-default, #363a4f);
  border-radius: 6px;
  background-color: var(--bg-surface-raised, #1f1f1f);
  color: var(--text-primary, #c6d0f5);
  cursor: pointer;
  font-family: var(--font-mono);
  /* Disable native browser dropdown chevron + supply our own via background image */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Hint browser/UA to use dark color scheme for the dropdown popup */
  color-scheme: dark;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.eg-snap24__range-select:hover {
  border-color: var(--border-strong, #4a4f6b);
  background-color: var(--bg-surface-strong, #242424);
}
.eg-snap24__range-select:focus {
  outline: 2px solid var(--accent-primary, #7c3aed);
  outline-offset: 1px;
}
.eg-snap24__range-select option {
  background-color: var(--bg-surface-raised, #1f1f1f);
  color: var(--text-primary, #c6d0f5);
}

/* Dimension cards grid */
.eg-snap24__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}
.eg-snap24__dim {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 6px;
  background: rgba(255,255,255,0.01);
  overflow: hidden;
}
.eg-snap24__dim-title {
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  background: rgba(255,255,255,0.02);
}
.eg-snap24__dim-body {
  padding: 4px 0;
  flex: 1;
}
.eg-snap24__dim-empty {
  padding: 10px 12px;
  font-size: 11px;
  color: var(--text-muted);
}
.eg-snap24__dim-table {
  width: 100%;
  font-size: 11.5px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.eg-snap24__dim-table th {
  text-align: right;
  padding: 4px 12px;
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.eg-snap24__dim-table th:first-child { text-align: left; padding-left: 12px; }
.eg-snap24__dim-table td {
  padding: 5px 8px;
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
}
.eg-snap24__dim-table td:first-child {
  text-align: left;
  font-weight: 500;
  /* Allow long labels (TREND_CONTINUATION, NAS100_USD) to wrap rather than
     get truncated by the old `width:1px; text-overflow:ellipsis` trick. */
  white-space: normal;
  word-break: break-word;
  padding-left: 12px;
  padding-right: 4px;
}
.eg-snap24__dim-table td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
  padding-right: 12px;
}
/* Numeric columns are inherently narrow — let the label column take the rest. */
.eg-snap24__dim-table th:not(:first-child) {
  width: 1%;
  padding-right: 12px;
}

/* Setup × Symbol cross table */
.eg-snap24__cross {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
}
.eg-snap24__cross-title {
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.eg-snap24__cross-scroll {
  overflow-x: auto;
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 6px;
}
.eg-snap24__cross-table {
  width: 100%;
  font-size: 11px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  min-width: 480px;
}
.eg-snap24__cross-table th,
.eg-snap24__cross-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
  white-space: nowrap;
}
.eg-snap24__cross-table thead th {
  background: rgba(255,255,255,0.02);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.eg-snap24__cross-table th:first-child,
.eg-snap24__cross-table td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--bg-card, #1a1a1a);
  border-right: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}
.eg-snap24__cross-table th:not(:first-child),
.eg-snap24__cross-table td:not(:first-child) {
  text-align: right;
}
.eg-snap24__cross-table .eg-snap24__cross-total {
  font-weight: 700;
  background: rgba(255,255,255,0.02);
}
.eg-snap24__cross-empty { color: var(--text-muted); }

/* Empty state */
.eg-snap24--empty {
  padding: var(--space-6);
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}

/* Mobile snapshot adjustments */
@media (max-width: 760px) {
  .eg-snap24 { padding: var(--space-3) var(--space-4); }
  .eg-snap24__topbar {
    gap: var(--space-2);
  }
  .eg-snap24__totals { margin-left: 0; }
  .eg-snap24__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .eg-snap24__dim-table th,
  .eg-snap24__dim-table td { padding: 4px 10px; }
}

/* ──────────────────────── Bot Status — mobile card stack ─────────────── */
/* On narrow screens, switch the per-symbol table from fixed columns to a
   stacked card per row so all detail is visible without horizontal cropping.  */
@media (max-width: 760px) {
  .eg-panel .eg-table-scroll { overflow-x: visible; }
  .eg-panel table.data-table {
    table-layout: auto !important;
    display: block;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
  }
  /* Strip colgroup widths in card-flip mode (bot-status uses inline
     <col style="width:90px"> etc. which the colgroup keeps applying even
     when the table itself becomes display:block — pushing the page wider
     than the viewport). */
  .eg-panel table.data-table colgroup,
  .eg-panel table.data-table col { display: none !important; }
  .eg-panel table.data-table thead { display: none; }
  .eg-panel table.data-table tbody,
  .eg-panel table.data-table tr { display: block; width: 100%; }
  .eg-panel table.data-table tr {
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    border-radius: 6px;
    margin-bottom: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.01);
  }
  .eg-panel table.data-table td {
    display: block;
    width: 100% !important;
    padding: 4px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  /* The detail column with all the metric breakdown has nowrap inline styles
     — override at the table-cell level to allow wrapping. */
  .eg-panel table.data-table td > div[style*="nowrap"] {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  /* Symbol label: bigger on mobile, prominent at top of card */
  .eg-panel table.data-table td:first-child .eg-sym {
    font-size: 14px;
    font-weight: 700;
  }
  /* Bot Status state strip — wrap to 2-column grid on narrow */
  .eg-24h__stats { gap: var(--space-2); }
}

@media (max-width: 420px) {
  .eg-panel table.data-table tr { padding: 6px 8px; }
}

/* ──────────────────────── MFE / MAE widget ───────────────────────────── */
/* Structured layout: coverage strip on top, then sub-sections each with
   their own intro line + scrollable table. Replaces inline-style soup. */
.eg-mfe { padding: 0; }

.eg-mfe__coverage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  background: rgba(255,255,255,0.015);
  font-size: 12px;
  line-height: 1.45;
}
.eg-mfe__coverage-line { color: var(--text-secondary, var(--text-primary)); }
.eg-mfe__coverage-line strong { color: var(--text-primary); font-weight: 600; }
.eg-mfe__coverage-pills {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
.eg-mfe__pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  color: var(--text-primary);
}
.eg-mfe__pill--sl { color: #ffb4a0; border-color: rgba(255,120,90,0.25); background: rgba(255,90,60,0.08); }
.eg-mfe__pill--tp { color: #9be3a8; border-color: rgba(80,200,120,0.25); background: rgba(60,180,100,0.08); }
.eg-mfe__coverage-note {
  flex: 1 1 100%;
  font-size: 11px;
  margin-top: 2px;
}

.eg-mfe__section {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
}
.eg-mfe__section:last-child { border-bottom: none; }
.eg-mfe__section-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-3);
}
.eg-mfe__section-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.eg-mfe__section-sub {
  font-size: 11px;
  color: var(--text-tertiary, var(--text-muted));
  line-height: 1.45;
}
.eg-mfe__table { font-size: 11.5px; }
.eg-mfe__table thead th { font-size: 10.5px; }
.eg-mfe__cat-pill {
  display: inline-block;
  padding: 1px 8px;
  background: #1a2030;
  color: #9fc5ff;
  font-size: 10px;
  font-family: var(--font-mono);
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.eg-mfe__empty { margin: var(--space-4); }

/* The category table is wider than the rest — give it more room before
   triggering the horizontal scroll on intermediate widths. */
.eg-mfe__table--cat { min-width: 720px; }

@media (max-width: 760px) {
  .eg-mfe__coverage {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
  }
  .eg-mfe__coverage-pills { margin-left: 0; }
  .eg-mfe__section { padding: var(--space-3) var(--space-4); }
  /* Override the global card-flip on mobile for these dense numeric tables —
     they have cryptic labels (e.g. "0.5R-1.0R / 5 / 12%") that make no sense
     stacked without column headers. Keep them as real tables, scroll
     horizontally inside the card if needed. */
  .eg-mfe .eg-table-scroll { overflow-x: auto !important; }
  .eg-panel .eg-mfe__table {
    display: table !important;
    width: 100%;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    min-width: 380px;
    font-size: 10.5px;
  }
  .eg-panel .eg-mfe__table--cat { min-width: 640px; }
  .eg-panel .eg-mfe__table thead { display: table-header-group !important; }
  .eg-panel .eg-mfe__table tbody { display: table-row-group !important; }
  .eg-panel .eg-mfe__table tr {
    display: table-row !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  .eg-panel .eg-mfe__table td,
  .eg-panel .eg-mfe__table th {
    display: table-cell !important;
    width: auto !important;
    padding: 6px 6px !important;
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.05)) !important;
  }
  .eg-panel .eg-mfe__table thead th { font-size: 10px; }
}

/* ──────────────────────── Sessions Overview — 24h timeline ───────────── */
/* Full-width strip showing 24 UTC hours as a bar with:
   - Adelaide time labels above each cell
   - UTC hour labels below
   - Coloured swatches per session (Sydney/Tokyo/London/NY) — overlap shows
     as multiple swatches stacked vertically inside one cell
   - Blocked hours overlaid with a tinted background + 'x' glyph
   - Current UTC hour gets a vertical pointer line */
.eg-sessions {
  padding: var(--space-4) var(--space-5);
}
.eg-sessions__topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  margin-bottom: var(--space-4);
}
.eg-sessions__window-label {
  font-size: 11px;
  color: var(--text-muted);
}
.eg-sessions__totals {
  margin-left: auto;
  font-size: 11px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}

.eg-sessions__timeline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-3);
}
.eg-sessions__time-row {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 1px;
}
.eg-sessions__time-cell {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-tertiary, var(--text-muted));
  line-height: 1.3;
  padding: 2px 0;
}
.eg-sessions__time-row--top .eg-sessions__au-label {
  font-size: 9px;
  opacity: 0.85;
}
.eg-sessions__utc-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary, var(--text-primary));
}

.eg-sessions__bar {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}
.eg-sessions__cell {
  position: relative;
  min-height: 38px;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  background: rgba(0,0,0,0.15);
  cursor: help;
}
.eg-sessions__swatch {
  flex: 1 1 auto;
  min-height: 4px;
  display: block;
}
/* Session swatch colours — distinct + dim so the bar doesn't dominate */
.eg-sessions__swatch--sydney    { background: rgba( 80, 180, 255, 0.65); }
.eg-sessions__swatch--tokyo     { background: rgba(255, 130, 200, 0.65); }
.eg-sessions__swatch--london    { background: rgba(140, 220, 130, 0.65); }
.eg-sessions__swatch--newyork   { background: rgba(255, 190,  80, 0.65); }
.eg-sessions__swatch--blocked   { background: rgba(255,  90,  90, 0.45); }

/* Blocked-hour overlay tint + diagonal hatching */
.eg-sessions__cell--blocked {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 90, 90, 0.18) 0px,
      rgba(255, 90, 90, 0.18) 4px,
      rgba(255, 90, 90, 0.32) 4px,
      rgba(255, 90, 90, 0.32) 8px
    );
}
.eg-sessions__cell--blocked .eg-sessions__swatch {
  opacity: 0.35;
}
.eg-sessions__blocked-x {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 100, 100, 0.85);
  pointer-events: none;
  text-shadow: 0 0 3px rgba(0,0,0,0.6);
}

/* Current-hour pointer — vertical accent + glow */
.eg-sessions__cell--current {
  outline: 2px solid rgba(124, 92, 255, 0.85);
  outline-offset: -2px;
  z-index: 1;
}
.eg-sessions__pointer {
  position: absolute;
  left: 50%;
  top: -8px;
  bottom: -8px;
  width: 2px;
  background: rgba(124, 92, 255, 0.9);
  transform: translateX(-50%);
  box-shadow: 0 0 6px rgba(124, 92, 255, 0.6);
  pointer-events: none;
  z-index: 2;
}

.eg-sessions__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-2) 0 var(--space-3);
  font-size: 10.5px;
  color: var(--text-secondary, var(--text-primary));
  border-bottom: 1px dashed var(--border-subtle, rgba(255,255,255,0.06));
  margin-bottom: var(--space-3);
}
.eg-sessions__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.eg-sessions__legend .eg-sessions__swatch {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  min-height: 0;
}
.eg-sessions__pointer-icon {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: rgba(124, 92, 255, 0.9);
  box-shadow: 0 0 4px rgba(124, 92, 255, 0.5);
  vertical-align: middle;
  margin: 0 4px;
}

/* Per-session table — let the swatch sit inline next to the session name */
.eg-sessions__table-wrap {
  margin: 0;
}
.eg-sessions__table { font-size: 11.5px; }
.eg-sessions__table thead th {
  font-size: 10.5px;
  background: rgba(255,255,255,0.02);
}
.eg-sessions__table .eg-sessions__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
  min-height: 0;
}

.eg-sessions__blocked-note {
  margin-top: var(--space-3);
  font-size: 11px;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid rgba(255, 90, 90, 0.4);
  background: rgba(255, 90, 90, 0.04);
  border-radius: 0 4px 4px 0;
}

/* Mobile: shrink the bar height + drop the per-cell labels to every other
   hour so 24 cells still fit. */
@media (max-width: 760px) {
  .eg-sessions { padding: var(--space-3) var(--space-3); }
  .eg-sessions__cell { min-height: 30px; }
  .eg-sessions__time-cell { font-size: 8px; }
  .eg-sessions__au-label { display: none; }   /* Adelaide row hidden on phones */
  .eg-sessions__time-row--top { display: none; }
  .eg-sessions__legend { font-size: 10px; gap: 6px 12px; }
  .eg-sessions__table { font-size: 10.5px; }
}

/* ──────────────────────── Bot Status — click-to-expand detail rows ───── */
/* Click affordance lives in the labelled button, not on the row itself, so
   a generic hover-tint doesn't suggest the whole table is interactive. */
.eg-bs-row { cursor: pointer; }

/* When-cell layout: minute count on top, toggle button below, both
   right-aligned. Compact so the time stays visible at a glance and the
   button sits in the bottom-right of the row. */
.eg-bs-when {
  vertical-align: bottom !important;
  text-align: right;
  padding-right: 10px !important;
  padding-bottom: 8px !important;
}
.eg-bs-when__time {
  font-size: 11px;
  margin-bottom: 4px;
  white-space: nowrap;
}

.eg-bs-row__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-tertiary, var(--text-muted));
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.10));
  border-radius: 3px;
  padding: 4px 7px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.eg-bs-row__toggle-chev {
  display: inline-block;
  font-size: 9px;
  line-height: 1;
}
.eg-bs-row:hover .eg-bs-row__toggle,
.eg-bs-row__toggle:hover,
.eg-bs-row__toggle:focus-visible {
  background: rgba(124, 92, 255, 0.15);
  border-color: rgba(124, 92, 255, 0.45);
  color: var(--text-primary);
  outline: none;
}
.eg-bs-row--open .eg-bs-row__toggle {
  background: rgba(124, 92, 255, 0.22);
  border-color: rgba(124, 92, 255, 0.6);
  color: var(--text-primary);
}
/* When open, anchor the trigger row to its detail row with a left accent
   bar so the visual relationship is obvious. */
.eg-bs-row--open > td:first-child {
  box-shadow: inset 3px 0 0 rgba(124, 92, 255, 0.7);
}

.eg-bs-detail {
  background: rgba(124, 92, 255, 0.04);
}
.eg-bs-detail__cell {
  padding: var(--space-4) var(--space-5) !important;
  border-top: 0 !important;
  position: relative;
  /* Same accent rail as the open trigger — visually ties the two rows. */
  box-shadow: inset 3px 0 0 rgba(124, 92, 255, 0.7);
}
.eg-bs-detail__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.eg-bs-detail__card {
  background: var(--bg-surface, rgba(255,255,255,0.02));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.07));
  border-radius: 6px;
  padding: var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.eg-bs-detail__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
}
.eg-bs-detail__model {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  background: rgba(124, 92, 255, 0.12);
  border: 1px solid rgba(124, 92, 255, 0.3);
  border-radius: 3px;
}
.eg-bs-detail__model-name { font-size: 10px; }
.eg-bs-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 10.5px;
  align-items: baseline;
}
.eg-bs-detail__chip {
  display: inline-block;
  padding: 1px 6px;
  background: #1a2030;
  color: #9fc5ff;
  font-family: var(--font-mono);
  font-size: 10px;
  border-radius: 3px;
}
/* Dedicated row for the proposed setup type — sits between the head and
   the meta strip so each model has a clear "what setup did it propose?"
   answer, even if that answer is "(picker votes on direction only)". */
.eg-bs-detail__setup-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 10.5px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border-subtle, rgba(255,255,255,0.05));
}
.eg-bs-detail__setup-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary, var(--text-muted));
  font-weight: 600;
}
.eg-bs-detail__taken-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(80, 200, 120, 0.12);
  color: #9be3a8;
  border: 1px solid rgba(80, 200, 120, 0.35);
  cursor: help;
}
.eg-bs-detail__vote-only {
  font-size: 10.5px;
  font-style: italic;
  cursor: help;
}
/* Picker setup-type comparison badges (mini / gpt-5 cards). */
.eg-bs-detail__match-badge,
.eg-bs-detail__diff-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  cursor: help;
}
.eg-bs-detail__match-badge {
  background: rgba(80, 200, 120, 0.10);
  color: #9be3a8;
  border: 1px solid rgba(80, 200, 120, 0.30);
}
.eg-bs-detail__diff-badge {
  background: rgba(255, 120, 90, 0.10);
  color: #ffb4a0;
  border: 1px solid rgba(255, 120, 90, 0.30);
}
.eg-bs-detail__inferred {
  font-size: 9.5px;
  font-style: italic;
  opacity: 0.75;
  cursor: help;
}
.eg-bs-detail__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.eg-bs-detail__label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary, var(--text-muted));
  font-weight: 600;
}
.eg-bs-detail__text {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-primary);
  white-space: normal;
  word-break: break-word;
}
.eg-bs-detail__empty {
  font-size: 11px;
  font-style: italic;
}

@media (max-width: 1100px) {
  .eg-bs-detail__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .eg-bs-detail__grid { grid-template-columns: 1fr; gap: var(--space-2); }
  /* Beat the card-flip rule (which strips padding + makes td a block) by
     using the same selector specificity with our own overrides. */
  .eg-panel table.data-table tr.eg-bs-detail {
    display: table-row !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: rgba(124, 92, 255, 0.05) !important;
    border-radius: 0 !important;
  }
  /* The HTML `hidden` attribute is `display: none`, but our display
     override above wins on specificity. Re-assert it so collapsed rows
     stay collapsed on mobile too. */
  .eg-panel table.data-table tr.eg-bs-detail[hidden] {
    display: none !important;
  }
  .eg-panel table.data-table tr.eg-bs-detail > td.eg-bs-detail__cell {
    display: block !important;
    width: 100% !important;
    padding: var(--space-3) var(--space-3) !important;
    border: 0 !important;
    /* Accent rail still visible on mobile to anchor the detail to its row. */
    box-shadow: inset 3px 0 0 rgba(124, 92, 255, 0.7) !important;
  }
}

/* ──────────────────────── Date-scoped analytics — perf grids ─────────── */
/* Override the global `.grid--2 / .grid--3 → 1fr at 960px` rule for the
   date-scoped perf widgets. Tablet widths get a 2-col layout for the
   3-up grid (DOW / Session / Long vs Short) so adjacent comparisons stay
   visible instead of stacking into a single tall column. */
@media (max-width: 1100px) and (min-width: 761px) {
  .eg-date-scoped .eg-perf-grid.grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .eg-date-scoped .eg-perf-grid.grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .eg-date-scoped .eg-perf-grid.grid--2,
  .eg-date-scoped .eg-perf-grid.grid--3 {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* Date-scoped cards — slightly tighter chrome so the section feels like
   a coherent analytics block rather than a stack of half-empty panels. */
.eg-date-scoped .eg-panel { margin-bottom: var(--space-3); }
.eg-date-scoped .card__header {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.eg-date-scoped .data-table thead th {
  font-size: 10.5px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.eg-date-scoped .data-table tbody td {
  padding-top: 7px;
  padding-bottom: 7px;
}
/* Empty / skeleton states inside the date-scoped section sit flush against
   the card header without an awkward void. */
.eg-date-scoped .eg-skeleton { min-height: 80px; }
.eg-date-scoped .eg-empty { padding: var(--space-5) var(--space-5); }

/* Total row at the bottom of perf tables — visually separate it. */
.eg-date-scoped .eg-total-row td {
  font-weight: 600;
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  background: rgba(255,255,255,0.015);
}

/* Perf-table min-width: the global 640px default is sized for the
   bot-status detail table. Date-scoped perf tables have 5–6 narrow numeric
   columns and fit comfortably in a 3-col grid cell without scrolling. */
.eg-date-scoped .eg-perf-grid .eg-table-scroll > .data-table {
  min-width: 360px;
}
.eg-date-scoped .eg-table-scroll > .data-table {
  min-width: 480px;
}

/* Date-scoped perf tables: keep them as real tables on mobile (with
   horizontal scroll inside the card) instead of the bot-status-style
   card-flip. The card-flip was designed for tables with a rich inline
   detail column; perf tables have terse columns whose meaning depends
   entirely on the column header — stacking them loses that context. */
@media (max-width: 760px) {
  .eg-date-scoped .eg-table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .eg-date-scoped .eg-panel table.data-table {
    display: table !important;
    width: 100%;
    table-layout: auto !important;
    background: transparent;
    min-width: 480px;
    font-size: 10.5px;
  }
  .eg-date-scoped .eg-panel table.data-table thead { display: table-header-group !important; }
  .eg-date-scoped .eg-panel table.data-table tbody { display: table-row-group !important; }
  .eg-date-scoped .eg-panel table.data-table tr {
    display: table-row !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  .eg-date-scoped .eg-panel table.data-table td,
  .eg-date-scoped .eg-panel table.data-table th {
    display: table-cell !important;
    width: auto !important;
    padding: 6px 8px !important;
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.05)) !important;
    white-space: nowrap;
  }
  .eg-date-scoped .eg-panel table.data-table thead th {
    font-size: 10px;
    padding: 7px 8px !important;
  }
  /* Symbol cell: keep the bigger style readable but in-table. */
  .eg-date-scoped .eg-panel table.data-table td:first-child .eg-sym {
    font-size: 11.5px;
    font-weight: 600;
  }
}

/* ──────────────────────── Polish — card subtitles + chart heights ──────── */
/* Standard class for the muted subtitle inline next to a card title.
   Replaces the inline `style="font-size:11px; margin-left: var(--space-3);"`
   that was sprinkled across page templates. Wraps cleanly on narrow screens. */
.eg-card__subtitle {
  font-size: 11px;
  margin-left: var(--space-3);
  color: var(--text-muted);
}
@media (max-width: 760px) {
  .card__header {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .eg-card__subtitle {
    margin-left: 0;
    flex: 1 1 100%;
  }
}

/* Plotly charts — keep a sensible minimum height on mobile so the chart is
   actually visible (default Plotly responsive can collapse to ~150px). */
.eg-chart {
  min-height: 240px;
}
@media (max-width: 760px) {
  .eg-chart { min-height: 220px; }
}

/* ──────────────────────── Recent Snapshot — narrow-screen polish ──────── */
@media (max-width: 760px) {
  /* Topbar items stack and own their own row on narrow screens */
  .eg-snap24__topbar {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 6px;
  }
  .eg-snap24__totals {
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
  }
  .eg-snap24__window-label { font-size: 10.5px; }
}

/* Mobile dim card refinements — labels already wrap at all sizes; just
   tighten cell padding here for tight phones. */
@media (max-width: 480px) {
  .eg-snap24__dim-table td,
  .eg-snap24__dim-table th { padding: 4px 8px; }
}

/* The dimension grid: drop minimum width on very small screens so it stays
   single-column without forcing horizontal scroll. */
@media (max-width: 480px) {
  .eg-snap24__grid {
    grid-template-columns: 1fr;
  }
}

/* The cross table: tighten padding and shrink sticky col on narrow */
@media (max-width: 760px) {
  .eg-snap24__cross-table { min-width: 360px; font-size: 10.5px; }
  .eg-snap24__cross-table th,
  .eg-snap24__cross-table td { padding: 4px 6px; }
}

/* ──────────────────────── Decisions filter bar — wrap on narrow ───────── */
@media (max-width: 760px) {
  .eg-decisions-filter,
  [class*="filter-pills"] {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .eg-pill, .pill {
    font-size: 10.5px;
  }
}

/* ──────────────────────── Cascade Agreement widget ──────────────────────── */
.eg-snap24__picker {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
}
.eg-snap24__picker-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
}
.eg-snap24__picker-header .eg-snap24__cross-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.eg-snap24__picker-headline {
  font-size: 11px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}
@media (max-width: 760px) {
  .eg-snap24__picker-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .eg-snap24__picker-headline {
    align-self: flex-start;
  }
}
.eg-snap24__picker-flow {
  font-size: 11px;
  line-height: 1.45;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--border-subtle, rgba(255,255,255,0.06));
}
.eg-snap24__picker-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.eg-snap24__picker-stat {
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 6px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.01);
}
.eg-snap24__picker-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.eg-snap24__picker-stat-value {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.eg-snap24__picker-stat-sub {
  font-size: 10px;
  margin-top: 2px;
}
.eg-snap24__picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}
.eg-snap24__picker-table th,
.eg-snap24__picker-table td {
  padding: 5px 8px;
}
.eg-snap24__picker-table th:first-child,
.eg-snap24__picker-table td:first-child {
  padding-left: 12px;
}
.eg-snap24__picker-table th:last-child,
.eg-snap24__picker-table td:last-child {
  padding-right: 12px;
}

@media (max-width: 760px) {
  .eg-snap24__picker-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }
  .eg-snap24__picker-stat-value { font-size: 16px; }
  .eg-snap24__picker-grid { grid-template-columns: 1fr; }
}

/* ──────────────────────── Bot Status — uniform state pills ────────────── */
/* Scoped to STATE column only (2nd col). Pills here should all be the same
   shape regardless of label length. Inline pills in other columns
   (LONG/SHORT direction, HOLD/MOVE_SL action labels) keep their natural
   compact size — see the next block for inline-pill spacing. */
.eg-panel table.data-table td:nth-child(2) .pill,
.eg-panel table.data-table td:nth-child(2) .eg-pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.2;
  min-height: 22px;
  min-width: 110px;
  border-radius: 11px;
  letter-spacing: 0.02em;
  vertical-align: middle;
  text-align: center;
  box-sizing: border-box;
}

/* Inline pills (LONG/SHORT direction labels, HOLD/MOVE_SL actions, review
   pills) inside detail/extra columns. Compact, with vertical breathing
   room so they don't sit flush against the line above/below when inline
   with surrounding text. */
.eg-panel table.data-table td:not(:nth-child(2)) .pill,
.eg-panel table.data-table td:not(:nth-child(2)) .eg-pill {
  white-space: nowrap;
  vertical-align: middle;
  margin-block: 2px;
  line-height: 1.2;
}

@media (max-width: 760px) {
  /* On mobile the table flips to card-stack layout — state pills no
     longer need a wide min-width because each cell renders on its own
     line in the stacked card. The :nth-child(2) selector still picks
     out the State span on the now-stacked layout. */
  .eg-panel table.data-table td:nth-child(2) .pill,
  .eg-panel table.data-table td:nth-child(2) .eg-pill {
    min-width: 0;
    width: auto;
  }
}