/* Argus Mobile Pass — May 2026
 *
 * Single phone breakpoint at ≤640px (covers iPhone SE 375, 13/14 390, Pro Max 430).
 * Goal: every demo URL (/bolt /stmn /afx) is legible and scrollable on a phone in
 * the meeting without needing pinch-zoom or sideways gymnastics.
 *
 * Layered AFTER all per-page inline styles so it can override grid columns and
 * padding without touching the desktop design.
 */

@media (max-width: 640px) {

  /* ── Top padding floor ───────────────────────────────────────────
     Desktop uses 36px gutters. On phone that eats ~20% of the
     viewport. Slash to 14px globally for headers, panels, cards. */
  header.top,
  .recon-banner,
  .pad-box,
  .pad-narrow,
  .chart-panel,
  .block-prints,
  .audit-section,
  .audit-side,
  .audit-holder,
  .case-h,
  .case-body,
  .house-block,
  .universe-block,
  .summary-row,
  .hero-block,
  footer.bottom {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* ── Header / hero row ───────────────────────────────────────────
     Stack ticker info above health pills. Wrap stats. */
  .top-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .ticker-name {
    font-size: 24px;
    letter-spacing: -0.02em;
  }
  .ticker-name .sub {
    display: block;
    margin-left: 0;
    margin-top: 4px;
    font-size: 12px;
  }
  .ticker-stats {
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 11px;
  }
  .health-strip {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ── Main two-column grid → stack ───────────────────────────── */
  .top-grid {
    grid-template-columns: 1fr !important;
  }
  .top-grid > .chart-panel {
    border-right: none !important;
    border-bottom: 1px solid var(--line);
  }

  /* ── KPI hero (4 across) → 2×2 ─────────────────────────────── */
  .hero-kpi {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .kpi {
    padding: 14px 12px !important;
  }
  .kpi-v {
    font-size: 22px;
  }
  .kpi-l {
    font-size: 9.5px;
  }

  /* ── Case cards / 2-col grids → 1-col ──────────────────────── */
  .case-grid,
  .grid-2,
  .grid-cols-2,
  .lv-grid,
  .audit-grid {
    grid-template-columns: 1fr !important;
  }
  .case-h {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* ── Chart panel hero ──────────────────────────────────────── */
  .chart-h {
    flex-wrap: wrap;
    gap: 8px;
  }
  .chart-h-l {
    flex-wrap: wrap;
    gap: 8px 14px;
  }
  .chart-h-r {
    flex-wrap: wrap;
    gap: 10px;
    font-size: 10px;
  }
  .chart-ticker {
    font-size: 12px;
  }
  .chart-last {
    font-size: 16px;
  }

  /* ── Tables — force horizontal scroll instead of overflow ────
     The block-prints and chart panels contain content (bp-table, chart
     canvas) that has intrinsic min-width > viewport. Make THOSE panels
     scrollable instead of letting them widen their parent grid cell. */
  .scroll-x,
  .table-scroll,
  .audit-table-wrap,
  .block-prints,
  .chart-panel {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
  }
  /* Tape rows: keep readable width, scroll horizontally inside .block-prints */
  table.bp-table,
  table.audit-table,
  table.holder-table,
  table.universe-table {
    min-width: 100%;
  }
  /* Hide non-essential tape columns on phone so the table can fit.
     IMPORTANT: must hide BOTH the th (header) and td (body) cells at
     the same nth-child position, otherwise the body data shifts left
     under the wrong header. */
  table.bp-table thead th:nth-child(1),   /* Date header */
  table.bp-table tbody td:nth-child(1),   /* Date body */
  table.bp-table thead th:nth-child(6),   /* Arrow header */
  table.bp-table tbody td:nth-child(6) {  /* Arrow body */
    display: none !important;
  }
  table.bp-table th, table.bp-table td {
    padding-left: 3px;
    padding-right: 3px;
    font-size: 10.5px;
  }
  /* Chart canvas: force shrink to container width */
  #argus-chart,
  .tv-lightweight-charts,
  .chart-panel canvas,
  .chart-panel table,
  .chart-panel tr,
  .chart-panel td {
    max-width: 100% !important;
  }
  /* Buttons & CTAs — keep them tappable but constrained */
  .audit-cta,
  .audit-ev-shares,
  .audit-ev-rcpt {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Case-row contents — wrap on phone */
  .case-row-v,
  .case-universe,
  .case-warn,
  .case-roster-hint {
    max-width: 100%;
    word-wrap: break-word;
  }

  /* ── Audit modal / side panel → full screen on phone WHEN OPEN ─
     These slide in from the right via `right: -<width>` → `right: 0`
     on .open. We override the open-state width to fill viewport; we do
     NOT touch the closed-state position, or it'll be permanently on
     screen. */
  .audit-side.open,
  .side-panel.open,
  .audit-holder.open {
    width: 100% !important;
    max-width: 100% !important;
    right: 0 !important;
    border-left: none !important;
  }

  /* ── Heatmap table (large grid) — scroll inside container ──── */
  .heatmap-wrap,
  .heatmap-container,
  .case-body,
  .audit-body,
  .audit-section,
  .audit-evidence {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  table.heatmap {
    font-size: 9.5px;
  }
  table.heatmap th, table.heatmap td {
    padding: 2px 3px !important;
  }
  /* Force every direct child of body / main to respect viewport */
  body > *,
  main > * {
    max-width: 100vw;
  }
  /* CTAs that stretch beyond — let them wrap or shrink */
  .audit-cta,
  .audit-ev-shares,
  .audit-ev-rcpt,
  .case-h,
  .case-row,
  .case-row-v,
  .case-universe,
  .case-warn,
  .case-roster-hint,
  .case-body * {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .audit-cta {
    white-space: normal;
    word-wrap: break-word;
    text-align: left;
    font-size: 11px;
    padding: 8px 10px !important;
  }
  /* Last-resort safety: no horizontal page scroll, hidden overflow on root */
  html {
    overflow-x: hidden !important;
  }

  /* ── Recon banner: wrap the CTA below the title ──────────── */
  .recon-banner {
    flex-wrap: wrap !important;
    row-gap: 10px;
  }
  .recon-banner > * {
    max-width: 100%;
  }

  /* ── Audit evidence grid: stack columns on phone ──────────── */
  .audit-ev {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 8px 10px !important;
  }
  .audit-ev > * {
    text-align: left !important;
  }
  .audit-evs,
  .audit-holder,
  .audit-modal-body {
    width: 100% !important;
    max-width: 100vw !important;
  }
  /* Audit modal: when OPEN (.open class), full screen on phone.
     Force opacity + transform + pointer-events here too — Playwright
     QA showed the desktop .open styles weren't reliably winning over
     the closed-state defaults on mobile webkit. */
  .audit-modal.open {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 92vh !important;
    padding: 8px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
  .audit-modal-overlay.open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* ── Tables must be swipeable on mobile, not clipped ────────
     Panel containers have overflow-x: hidden globally (so absolute-
     positioned modals can't widen the layout). On mobile, the data
     tables inside often exceed viewport width — we need them to be
     horizontally scrollable inside their panel-body container. */
  .panel-body.no-pad,
  .panel-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .tj-deposits {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Pin first column on tables so the row identifier stays visible while
     the rest scrolls horizontally. Only on tables that benefit (drill /
     subscriber tables where col 1 is the row's anchor). */
  .data-table th, .data-table td {
    white-space: nowrap;
  }
  /* hp-split stacks 1-col on mobile (each side full-width). Make the
     hp-side itself horizontally scrollable so its inner table can
     overflow without breaking the panel layout. */
  .hp-side {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* ── Tap targets — Apple HIG minimum 44x44 ───────────────── */
  .audit-cta,
  .brief-refresh {
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
  .audit-modal-h .close-x,
  .side-panel-h .close-x {
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 28px !important;
    padding: 0 !important;
    line-height: 44px !important;
    text-align: center !important;
  }
  .command-bar {
    min-height: 48px;
  }
  .cmd-input {
    min-height: 36px !important;  /* Slightly under 44 — has a wrapper */
  }
  /* Heatmap cells — bump to taller for finger taps */
  table.heatmap td.hc {
    min-width: 44px;
    height: 38px;
    padding: 4px 3px !important;
  }
  /* iOS tap highlight — make it subtle gold instead of default blue */
  a, button, .hc-clickable {
    -webkit-tap-highlight-color: rgba(243,159,65,0.20);
  }

  /* ── Case row grid: stack ─────────────────────────────────── */
  .case-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .case-row > * {
    max-width: 100% !important;
  }

  /* ── Command bar at top — make tappable ─────────────────────── */
  .command-bar {
    padding: 10px 14px !important;
  }
  .cmd-input {
    font-size: 14px !important;
  }

  /* ── Headlines / hero sections ──────────────────────────────── */
  .hero-headline,
  .hero-h1 {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }
  .hero-sub {
    font-size: 13px !important;
  }

  /* ── Footer ─────────────────────────────────────────────────── */
  footer.bottom {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    font-size: 10px;
  }

  /* ── Index landing — ticker tiles ───────────────────────────── */
  .index-grid,
  .ticker-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .ticker-tile {
    padding: 16px 14px !important;
  }

  /* ── General prevent horizontal page scroll ─────────────────── */
  body {
    overflow-x: hidden;
  }
}

/* Tighter pass for very small phones */
@media (max-width: 380px) {
  .ticker-name { font-size: 22px; }
  .kpi-v { font-size: 20px; }
  .hero-headline,
  .hero-h1 { font-size: 18px !important; }
}

/* Tablet pass — 641-1024px. Keep desktop layout but contain overflow
 * from absolutely-positioned modals/panels that exist in DOM but are
 * hidden until the user opens them. */
@media (min-width: 641px) and (max-width: 1024px) {
  html, body {
    overflow-x: hidden;
  }
  .side-panel,
  .audit-modal {
    max-width: 100vw;
    width: 100% !important;
  }
  /* iPad portrait — header padding tightened, hero kpi stays 4 wide */
  header.top,
  .recon-banner,
  .chart-panel,
  .block-prints {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}