/* charts-mobile.css — phone + small-tablet polish, loaded LAST.
 *
 * Goals (in priority order):
 *   1. The chart canvas gets the lion's share of the viewport on phones.
 *      Audit showed the explainer-card (CFD/Daily-High/DH-DIST/PHASE/…)
 *      was eating ~280px above the candles, leaving the chart ~150-200px.
 *   2. Explainer collapses to one horizontal-scroll chip row (~32px) on
 *      ≤768. The dense per-row stat layout (key/value grid) stays on
 *      desktop.
 *   3. Overlay-bar (NEWS / PROTECTION / MARKERS / CONTEXT) collapses to
 *      a single horizontal-scroll row at ≤768 instead of wrapping to 2-4
 *      rows on iPhone SE.
 *   4. Order panels: when the body is the "No open positions" / "No
 *      pending orders" dim line, the entire panel collapses to a thin
 *      header strip via :has(). Saves ~50px when one side is empty.
 *   5. Drawer handle becomes a 48px primary tap target (was 28-44 across
 *      stacked rules) so EA-logs is discoverable.
 *   6. Topbar rail toggles ("List" / "State") get 36×44 sizing and
 *      accent colour so they read as the primary phone navigation.
 *   7. Dedicated ≤360 block for iPhone SE / small Android — the older
 *      cascade only had ≤480 and 320-wide phones were rendering with
 *      desktop-sized chrome.
 *
 * Loaded after charts.css, charts-rail.css, charts-polish-v2.css,
 * charts-responsive.css — wins the cascade by source order alone, so
 * !important is reserved for explicit overrides of !important rules
 * elsewhere (notably .charts-ms-strip hidden via !important @≤480).
 *
 * Preview-iframe (?preview=1) is desktop-only (1280×800) so these
 * queries never fire inside the landing's framed charts surface.
 */

/* ──────────────────────────────────────────────────────────────────────
   ≤768 — phones + tablet portrait. Most reclaim work happens here.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* (1) Chart claims ≥52vh on phones. Without a floor it collapses to
     20-25vh because the explainer + orders fight for the same flex space. */
  .charts-shell .charts-main { gap: 0; }
  .charts-shell .charts-chart {
    min-height: 52vh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  /* When orders row is hidden (default — empty state), let the chart eat
     the freed space. */
  .charts-shell .charts-main:has(#charts-orders-row[hidden]) .charts-chart {
    min-height: 58vh;
  }

  /* (2) Explainer — single horizontal-scroll chip strip ───────────────
     Headline stays full-width on row 1 (with EA badge). Chips stop
     wrapping into the 2-col grid that turned this block into a 280px
     stat sheet. */
  .charts-shell .charts-explainer {
    padding: 4px 10px;
    row-gap: 2px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 11px;
  }
  .charts-shell .charts-explainer .exp-row-head {
    gap: 8px;
    min-width: 0;
    flex-wrap: nowrap;
  }
  .charts-shell .charts-explainer .exp-headline {
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
  }
  .charts-shell .charts-explainer .exp-row-chips {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    column-gap: 12px;
    row-gap: 0;
    padding-bottom: 2px;
    /* Subtle right fade so user knows to scroll. */
    -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-explainer .exp-row-chips::-webkit-scrollbar {
    display: none;
  }
  .charts-shell .charts-explainer .exp-tag {
    flex: 0 0 auto;
    font-size: 10.5px;
    white-space: nowrap;
  }
  .charts-shell .charts-explainer .exp-label {
    font-size: 8.5px;
    margin-right: 3px;
    letter-spacing: 0.08em;
  }
  /* Override the ≤480 polish-v2 rule that forced exp-row-chips to a
     single column — that defeats the horizontal-scroll above. */
  .charts-shell .charts-explainer .exp-row-chips {
    flex-direction: row;
  }

  /* (3) Overlay bar — single horizontal-scroll row ────────────────────
     Promote the ≤480 group-label-hidden + nowrap rules to ≤768 so iPad
     portrait keeps the chart-pane height the bar would otherwise eat. */
  .charts-shell .charts-overlay-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 8px;
    min-height: 30px;
    row-gap: 0;
    column-gap: 4px;
    -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::before { display: none; }
  .charts-shell .charts-overlay-bar .ov-group {
    padding: 0 6px;
    border-right: 1px solid var(--border-subtle);
    flex: 0 0 auto;
    gap: 3px;
  }
  .charts-shell .charts-overlay-bar .ov-group:last-child { border-right: 0; }
  .charts-shell .charts-overlay-bar .qf-chip {
    padding: 3px 8px;
    font-size: 10px;
    flex: 0 0 auto;
    height: 22px;
    line-height: 16px;
    min-width: 0;
  }
  /* Bump left-rail quickfilter chips to a comfortable touch target on tablet. */
  .charts-shell .charts-rail-left .charts-quickfilters .qf-chip {
    min-height: 28px;
    padding: 4px 10px;
  }

  /* (4) Orders row — stack vertically, collapse empty panels ─────────
     Hide the panel body entirely when its only child is the "No open
     positions" / "No pending orders" dim line. Keep the header so the
     user still sees the panel exists; append " · empty" to signal the
     state. Specificity matches the rail.css base (#charts-orders-row). */
  .charts-shell #charts-orders-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 4px 8px;
  }
  .charts-shell .charts-orders-panel h3 {
    padding: 4px 10px 4px 22px;
    min-height: 26px;
    height: auto;
    font-size: 10px;
  }
  .charts-shell .charts-orders-panel .charts-section-body {
    padding: 6px 10px;
  }
  /* Empty body collapse via :has() — modern Safari/Chrome both support. */
  .charts-shell .charts-orders-panel
    .charts-section-body:has(> .empty-mini:only-child),
  .charts-shell .charts-orders-panel
    .charts-section-body:has(> .charts-dim:only-child) {
    display: none;
  }
  .charts-shell .charts-orders-panel:has(
    .charts-section-body > .empty-mini:only-child
  ) h3,
  .charts-shell .charts-orders-panel:has(
    .charts-section-body > .charts-dim:only-child
  ) h3 {
    border-bottom: 0;
    opacity: 0.65;
  }
  .charts-shell .charts-orders-panel:has(
    .charts-section-body > .empty-mini:only-child
  ) h3 > span:first-child::after,
  .charts-shell .charts-orders-panel:has(
    .charts-section-body > .charts-dim:only-child
  ) h3 > span:first-child::after {
    content: ' · empty';
    color: var(--text-dim);
    font-weight: 400;
    opacity: 0.75;
    margin-left: 4px;
  }

  /* (5) Drawer handle — 48px tap target, clearer label ───────────────
     Was being set to 26-44px across charts.css + polish-v2.css. Phones
     need the EA-logs handle to be obviously tappable. */
  /* Reserve the iOS home-indicator strip so the collapsed handle keeps a full
     tap target instead of sitting partly under it. */
  .charts-shell .charts-drawer { height: calc(48px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .charts-shell .charts-drawer.expanded { height: min(62vh, 360px); }
  .charts-shell .charts-drawer-handle {
    min-height: 48px;
    padding: 10px 12px;
    gap: 10px;
  }
  .charts-shell .charts-drawer-handle .cdh-chev {
    font-size: 14px;
    width: 14px;
    text-align: center;
    color: var(--text-sub);
  }
  .charts-shell .charts-drawer-handle .cdh-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .charts-shell .charts-drawer-handle .cdh-count {
    font-size: 10px;
  }

  /* (6) Topbar — promote rail toggles as primary phone navigation ─────
     The "List" and "State" buttons are how users open the left/right
     overlays; they should read as the dominant controls in the bar. */
  .charts-shell .charts-topbar {
    padding: 6px 10px;
    height: 52px;
    min-height: 52px;
    gap: 8px;
  }
  .charts-shell .charts-topbar-left,
  .charts-shell .charts-topbar-right {
    gap: 6px;
  }
  .charts-shell .charts-rail-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-width: 52px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.02em;
  }
  .charts-shell .charts-rail-toggle.toggle-left {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  }
  .charts-shell .charts-rail-toggle.toggle-right {
    color: var(--purple, #bf5af2);
    border-color: color-mix(in srgb, var(--purple, #bf5af2) 35%, var(--border));
  }
  .charts-shell .charts-rail-toggle:active {
    transform: scale(0.97);
    background: var(--surface-3);
  }
  /* Help (?) button — keep but smaller than the rail toggles. */
  .charts-shell .charts-btn-help {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    font-size: 13px;
  }

  /* Topbar items already hidden in base charts.css at ≤768; reinforce
     here so polish-v2's later cascade can't reintroduce them.
     (instance-title intentionally kept visible at 481-768 — see ≤480 block below.) */
  .charts-shell .charts-account-balance { display: none; }
  .charts-shell .charts-meta { display: none; }
  .charts-shell .charts-label { display: none; }
  .charts-shell .charts-nav-links { display: none; }
  .charts-shell .charts-brand-label { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────
   ≤480 — phone-tight (iPhone 12/13/14 portrait, ~390-428px)
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .charts-shell {
    padding: max(6px, env(safe-area-inset-left, 0px)) !important;
    gap: 4px;
  }
  /* Phones (≤480) hide the instance title — bid/ask pills + rail highlight
     carry context. Tablet portrait (481-768) keeps it visible. */
  .charts-shell .charts-instance-title { display: none; }
  /* Polish-v2 ≤380 forced the explainer chip row back to a flex column —
     undo that here so the horizontal-scroll set up at ≤768 sticks all
     the way down to the 360 floor. */
  .charts-shell .charts-explainer .exp-row-chips {
    flex-direction: row !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
  }
  .charts-shell .charts-explainer .exp-tag {
    padding: 1px 0;
  }
  /* Reinforce empty-panel collapse — polish-v2 ≤480 explicitly bumps
     the empty-state body to min-height:24px which fights our :has()
     display:none. Override. */
  .charts-shell .charts-orders-panel
    .charts-section-body:has(> .empty-mini:only-child),
  .charts-shell .charts-orders-panel
    .charts-section-body:has(> .charts-dim:only-child) {
    display: none !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   ≤360 — iPhone SE / small Android phones
   The base ≤480 rules already fire; this layer is the last-mile squeeze
   for 320-360px viewports.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .charts-shell {
    padding: 4px !important;
    gap: 3px;
  }
  .charts-shell .charts-topbar {
    padding: 4px 6px;
    height: 46px;
    min-height: 46px;
    gap: 4px;
  }
  .charts-shell .charts-rail-toggle {
    min-width: 44px;
    padding: 0 8px;
    font-size: 11px;
    border-radius: 6px;
  }
  /* Topbar account select compresses to ~110px so the rail toggles +
     stream-dot + help button can sit side-by-side without overflow. */
  .charts-shell .charts-select {
    min-width: 0;
    max-width: 140px;
    font-size: 12px;
    height: 34px;
    flex: 1 1 auto;
  }
  .charts-shell .charts-btn-help {
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 12px;
  }

  /* Explainer + overlay tighter still */
  .charts-shell .charts-explainer { padding: 3px 6px; }
  .charts-shell .charts-explainer .exp-headline { font-size: 11px; }
  .charts-shell .charts-explainer .exp-tag { font-size: 10px; }
  .charts-shell .charts-explainer .exp-label { font-size: 8px; }
  .charts-shell .charts-explainer .exp-row-chips { column-gap: 10px !important; }
  .charts-shell .charts-overlay-bar {
    padding: 3px 5px;
    min-height: 26px;
  }
  .charts-shell .charts-overlay-bar .ov-group {
    padding: 0 4px;
    gap: 2px;
  }
  .charts-shell .charts-overlay-bar .qf-chip {
    padding: 2px 6px;
    font-size: 9.5px;
    height: 20px;
    line-height: 14px;
  }
  /* Tighter floor on phone but still ≥ iOS HIG comfortable hit. */
  .charts-shell .charts-rail-left .charts-quickfilters .qf-chip {
    min-height: 26px;
    padding: 3px 8px;
  }

  /* Chart floor goes up — the bar/explainer above are now thin enough
     that we can afford 58vh for the candles. */
  .charts-shell .charts-chart { min-height: 58vh; }
  .charts-shell .charts-main:has(#charts-orders-row[hidden]) .charts-chart {
    min-height: 64vh;
  }

  /* Drawer + handle stay tappable at 44px (iOS HIG floor). */
  .charts-shell .charts-drawer { height: 44px; }
  .charts-shell .charts-drawer-handle {
    min-height: 44px;
    padding: 8px 10px;
    gap: 8px;
  }
  /* Hide log-level filter buttons on tiny phones — leveling stays
     accessible from the expanded drawer's filter pills. */
  .charts-shell .charts-drawer-handle .cdh-filters { display: none; }

  /* Open positions panel inside-row already vertical at ≤480; further
     reduce font weight on tier badges so PnL stays the dominant scan. */
  .charts-shell .charts-orders-panel .row-pos {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 4px;
    font-size: 11px;
  }
  .charts-shell .charts-orders-panel .row-pos .side { font-size: 10px; }
  .charts-shell .charts-orders-panel .row-pos .tier-badge { font-size: 8.5px; }
}

/* ──────────────────────────────────────────────────────────────────────
   Landscape phones (<900px viewport, <500px height) — flat strip mode.
   Hide the overlay-bar and collapse the explainer to a single inline
   row so the chart fills almost the entire 360px-tall viewport.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .charts-shell .charts-topbar { height: 42px; min-height: 42px; }
  .charts-shell .charts-overlay-bar { display: none; }
  .charts-shell .charts-explainer {
    padding: 2px 8px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .charts-shell .charts-explainer .exp-row-head,
  .charts-shell .charts-explainer .exp-row-chips {
    flex-direction: row;
    align-items: center;
  }
  .charts-shell .charts-explainer .exp-row-chips { max-width: 60vw; }
  .charts-shell .charts-chart { min-height: 70vh; }
  .charts-shell .charts-drawer { height: 36px; }
  .charts-shell .charts-drawer-handle { min-height: 36px; padding: 6px 10px; }
}

/* ──────────────────────────────────────────────────────────────────────
   Safety: ensure .charts-ms-strip stays out on phones. The base
   charts.css @≤480 rule uses display:none !important; reinforce here
   in case the strip starts inline-displayed via JS at any point.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .charts-shell .charts-ms-strip { display: none !important; }
}