/* =========================================================
   RESPONSIVE.CSS
   Breakpoint ladder: large desktop (default) -> small desktop
   (1200) -> tablet (1024) -> large mobile / tablet-portrait
   (768) -> small mobile (480). Nothing here should ever force
   page-level horizontal scrolling.
   ========================================================= */

/* -------------------- <= 1200px: small desktop -------------------- */
@media (max-width:1200px){
  /* !important is required here (and everywhere else this file touches
     .ov-grid / .fu-row / .fu-hrow) because several stat-card grids and
     every trade-table row on the Autotrade & Futures page carry an inline
     style="grid-template-columns:…" attribute (set per-instance in the
     HTML/JS since each grid has a different column count/ratio). Inline
     styles always outrank an external stylesheet's class selector — media
     query or not — so without !important these breakpoints are silently
     ignored on mobile and the fixed desktop column count overflows the
     viewport. This is the root cause of the "stats cards cut off" and
     "data grid clipping" issues from the mobile screenshots. */
  .ov-grid{ grid-template-columns:repeat(3, 1fr) !important; }
}

/* -------------------- <= 1024px: tablet -------------------- */
@media (max-width:1024px){
  .controls{ grid-template-columns:repeat(3, 1fr); }

  .xrow{ grid-template-columns:32px 1fr 1fr 1fr auto; row-gap:8px; }
  .xrow.head{ display:none; }
  .xrow > .xwindow, .xrow > .xliquidity{ grid-column:2 / -1; }
  .xdetail{ grid-template-columns:1fr; }
}

/* -------------------- <= 600px: mobile -------------------- */
@media (max-width:600px){
  /* Matches the requested mobile grid spec: 2-up stat cards (falls back to
     1-up below for individual wide/highlight cards that need the room). */
  .ov-grid{ grid-template-columns:repeat(2, 1fr) !important; }
}

/* -------------------- <= 900px: tablet portrait -------------------- */
@media (max-width:900px){
  .ov-summary{ grid-template-columns:1fr; }
}

/* -------------------- <= 768px: large mobile / tablet portrait -------------------- */
@media (max-width:768px){
  /* --- header: compact two-row layout instead of the desktop stack --- */
  .term-header{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    padding-bottom:16px;
    margin-bottom:16px;
  }
  .logo-img{ height:36px; }
  /* .product-name font-size is a clamp() in main.css — scales on its own */
  .status-cluster{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:8px 12px;
  }
  .exchange-badges{ justify-content:flex-start; }
  .last-update{ flex-basis:100%; order:3; }

  /* --- nav: mobile hamburger — slide-down panel instead of horizontal
     scroll, see .nav-toggle/.term-nav rules below --- */
  .term-nav{ margin-bottom:18px; }
  .navtab{ font-size:13px; }

  /* --- controls: deliberate two-column grid, stacked full-width actions --- */
  .controls{ grid-template-columns:repeat(2, 1fr); gap:12px 14px; padding:14px; }
  .controls .field:has(#cliMode){ grid-column:1 / -1; }
  .btn-row{ flex-direction:column; }
  .btn-row button.primary{ width:100%; }
  /* Primary CTAs that live outside a .btn-row (e.g. "Start Paper Engine" in
     the AI Futures Engine header, "Reset Session" in its own .field) —
     stack them full-width too so every action button behaves consistently
     on mobile, matching the export/execute buttons above. */
  .ov-head{ flex-direction:column; align-items:stretch; }
  .ov-head button.primary{ width:100%; }
  .controls .field button.primary{ width:100%; }
  .stats-row{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px 16px;
  }

  /* --- overview grid: 2-up cards --- */
  .ov-grid{ grid-template-columns:repeat(2, 1fr) !important; }

  /* --- triangular opportunity card: rank+profit share a row, loop below --- */
  .row{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "rank result"
      "loop loop"
      "steps steps";
    gap:10px 14px;
    padding:16px;
  }
  .row::after{ top:14px; bottom:14px; }
  .rank-wrap{ grid-area:rank; flex-direction:row; align-items:center; gap:8px; }
  .result{ grid-area:result; text-align:right; }
  .loop{ grid-area:loop; }
  .steps{ grid-area:steps; }

  /* --- cross-exchange row: card layout, explicit placement, no overflow --- */
  .xrow{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-auto-rows:auto;
    column-gap:14px; row-gap:8px;
    padding:16px; text-align:left;
  }
  .xrow.head{ display:none; }
  .xrow > .rank{ grid-column:1; grid-row:1; }
  .xrow > .xprofit{ grid-column:2; grid-row:1; text-align:right; }
  .xrow > .xasset{ grid-column:1 / -1; grid-row:2; font-size:16px; }
  .xrow > .xside:nth-of-type(1){ grid-column:1; grid-row:3; }
  .xrow > .xside:nth-of-type(2){ grid-column:2; grid-row:3; }
  .xrow > .xfinal{ grid-column:1 / -1; grid-row:4; }
  .xrow > .xwindow{ grid-column:1; grid-row:5; }
  .xrow > .xliquidity{ grid-column:2; grid-row:5; }
  .xrow > .xdetail{ grid-column:1 / -1; }
  .xside::before{ content:attr(data-label); display:block; font-size:9px; text-transform:uppercase; letter-spacing:.07em; color:var(--dim2); margin-bottom:2px; }
  .xfinal::before{ content:attr(data-label); display:block; font-size:9px; text-transform:uppercase; letter-spacing:.07em; color:var(--dim2); margin-bottom:2px; }
  .xdetail{ grid-template-columns:1fr; }
}

/* -------------------- nav-toggle (hamburger): hidden on desktop -------------------- */
.nav-toggle{
  display:none;
  appearance:none; cursor:pointer;
  width:var(--touch-target); height:var(--touch-target);
  align-items:center; justify-content:center;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:0;
}
.nav-toggle:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.nav-toggle .bar,
.nav-toggle .bar::before,
.nav-toggle .bar::after{
  display:block; width:18px; height:2px; background:var(--ink-dim); border-radius:2px;
  transition:transform .18s ease, opacity .18s ease, background .18s ease;
}
.nav-toggle .bar{ position:relative; }
.nav-toggle .bar::before,
.nav-toggle .bar::after{ content:''; position:absolute; left:0; }
.nav-toggle .bar::before{ top:-6px; }
.nav-toggle .bar::after{ top:6px; }
/* hamburger -> X when open, driven purely by aria-expanded so no extra JS-toggled class is needed for the icon itself */
.nav-toggle[aria-expanded="true"] .bar{ background:transparent; }
.nav-toggle[aria-expanded="true"] .bar::before{ top:0; transform:rotate(45deg); background:var(--ink); }
.nav-toggle[aria-expanded="true"] .bar::after{ top:0; transform:rotate(-45deg); background:var(--ink); }

/* -------------------- <= 768px: hamburger becomes visible, nav becomes a collapsible slide-down panel -------------------- */
@media (max-width:768px){
  .term-header{ position:relative; }
  .nav-toggle{ display:inline-flex; position:absolute; top:0; right:0; }
  /* Room for the button so it never overlaps brand-copy text on narrow screens */
  .brand-block{ padding-right:calc(var(--touch-target) + 12px); }

  .term-nav{
    display:none;
    flex-direction:column; gap:2px;
    overflow-x:visible;
    background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
    padding:6px; margin-bottom:18px;
  }
  .term-nav.open{ display:flex; animation:navPanelIn .16s ease-out; }
  @keyframes navPanelIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
  .navtab{
    width:100%; justify-content:flex-start;
    padding:12px 10px; border-bottom:none; border-radius:var(--r-md);
  }
  .navtab.active{ background:var(--panel-hi); border-bottom-color:transparent; }
  .navtab:active{ background:var(--panel2); }
}


@media (max-width:480px){
  .wrap{ padding-left:16px; padding-right:16px; }

  .controls{ grid-template-columns:1fr; }
  .controls .field:has(#cliMode){ grid-column:1; }
  .stats-row{ grid-template-columns:repeat(2, 1fr); }

  .ov-grid{ grid-template-columns:repeat(2, 1fr) !important; }
  /* A highlighted/"wide" card that genuinely needs the full row on very
     small phones can opt in with data-wide="true" in the HTML — no other
     markup changes required. */
  .ov-grid > [data-wide="true"]{ grid-column:1 / -1 !important; }

  .rank-wrap{ display:flex; }
  .result{ text-align:right; }

  /* --- compact opportunity card: tighter padding, smaller type, and the
     loop wraps left-to-right (2-3 nodes per line) instead of one long
     vertical column, so a card takes a fraction of the screen instead of
     most of it --- */
  .row{ padding:12px 14px; gap:8px 12px; }
  .row::after{ top:10px; bottom:10px; }
  .rank{ font-size:15px; }
  .profit{ font-size:19px; }
  .yield{ font-size:10px; margin-top:1px; }
  .expand-hint{ margin-top:4px; }

  .loop{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:0; row-gap:6px; }
  .node{ font-size:12px; padding:5px 11px 5px 7px; }
  .leg{ margin:0 5px; min-width:44px; }
  .leg .arrow{ font-size:12px; }
  .leg .act{ font-size:8.5px; padding:1px 5px; }
  .leg .pair{ font-size:8px; }
  .exch{ margin-left:6px; }

  .steps{ padding-top:10px; font-size:11px; }

  .xrow{ grid-template-columns:1fr 1fr; padding:14px; gap:8px 12px; }
  .xasset{ font-size:15px; }
  .xprofit{ font-size:17px; }

  /* Inline warning/info pills embedded inside field labels (e.g. "places
     real orders — reversible only by trading back", "forces unprofitable
     trades") are long enough to overflow a 320-375px viewport if forced
     onto one line — let them wrap here only; short status pills (HIGH,
     MEDIUM, exchange badges) stay nowrap since they're never this long. */
  .pill{ white-space:normal; }
}

/* -------------------- Autotrade & Balances: responsive -------------------- */
@media (max-width:768px){
  .connect-row, .balance-row{ grid-template-columns:1fr; align-items:stretch; gap:8px; }
  .balance-shown{ text-align:left; }
  .cycle-log-row{ grid-template-columns:1fr 1fr; grid-template-areas:"n pct" "path path" "amt bal" "time time"; }
  .cycle-log-n{ grid-area:n; }
  .cycle-log-pct{ grid-area:pct; text-align:right; }
  .cycle-log-path{ grid-area:path; }
  .cycle-log-amt{ grid-area:amt; }
  .cycle-log-bal{ grid-area:bal; text-align:right; }
  .cycle-log-time{ grid-area:time; text-align:left; }
}