/*
 * mobile.css — shared mobile responsive overrides for every page.
 *
 * Strategy: don't redesign for mobile, RELAX desktop. Each page has its
 * own inline <style> block tuned for desktop; this file layers @media
 * rules on top to make the same layout fit a phone viewport without
 * forcing horizontal page-scroll.
 *
 * Targets common selectors used across the app:
 *   - <header>, header h1, header .meta            (topnav container)
 *   - <main>                                       (page wrapper)
 *   - section.card / .card                         (content blocks)
 *   - table                                        (data tables)
 *   - .row (form rows w/ grid-template-columns)    (collapse to 1col)
 *   - .hero                                        (instrument hero)
 *   - .feature-locked, .sav-cards, .sav-legend-grid
 *   - button, .btn                                 (44px tap target)
 *
 * Breakpoints:
 *   720px = phone landscape / small tablet boundary
 *   480px = phone portrait — tighten further
 *
 * Why these breakpoints: the existing per-page rules already use
 * 760px and 1100px for mid-density layouts; 720 is comfortably
 * below the lowest of those so we only kick in on actual phones.
 *
 * Linked from every HTML page in <head> AFTER the inline <style>:
 *   <link rel="stylesheet" href="/css/mobile.css">
 *
 * The "after inline style" ordering matters — this file's rules need
 * to win against the per-page baseline. CSS file rules of equal
 * specificity that come later in source order override earlier ones,
 * so linking after the inline block does the job without !important.
 */

/* ── Phone landscape / small tablet (≤ 720px) ────────────────────── */
@media (max-width: 720px) {

  /* Body — most pages use 18-24px horizontal padding. Squeeze. */
  body {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Header — let the topnav wrap to multiple rows instead of overflowing.
     Most pages already use flex-wrap; force it where they don't.
     Stack title + meta vertically when they don't fit side-by-side. */
  header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  header h1 {
    font-size: 13px !important;
    letter-spacing: 1px !important;
  }

  /* .meta = topnav container. Allow wrap, let dropdowns/anchors flow
     to a second row instead of pushing out the right edge. */
  header .meta,
  .meta {
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    width: 100%;             /* claim the full width once we wrapped */
  }

  /* main padding — most pages set 24px or 18px 24px. Tighten. */
  main {
    padding: 10px 12px 24px !important;
    max-width: 100% !important;
  }

  /* Cards — reduce internal padding. */
  section.card,
  .card {
    padding: 14px 14px !important;
    margin-bottom: 14px !important;
  }
  section.card h2,
  .card h2 {
    font-size: 12px !important;
  }

  /* Form rows that use a 2-col grid → stack to 1col. */
  .row {
    grid-template-columns: 1fr !important;
  }

  /* Tables — wrap in horizontal scroll where the parent allows. Most
     pages already wrap tables in a `.section` or similar with
     overflow-x: auto; this rule ensures tables themselves don't try
     to expand the body. */
  table {
    font-size: 12px !important;
  }
  th, td {
    padding: 5px 7px !important;
  }

  /* Generic tap target floor — phones need ≥ 44px for comfortable tap. */
  button,
  .btn,
  input[type="submit"],
  input[type="button"] {
    min-height: 38px;
    /* Don't force 44px because some buttons live inline in dense
       toolbars; 38 is enough for forefinger accuracy without
       blowing up dense UI. */
  }

  /* Instrument hero — three-column flex collapses to wrap; reduce
     the giant font sizes that were sized for desktop. */
  .hero {
    gap: 12px !important;
    padding: 8px 10px !important;
  }
  .hero .symbol { font-size: 15px !important; }
  .hero .price { font-size: 18px !important; }
  .hero .price-block.consensus {
    flex-wrap: wrap;
    gap: 12px !important;
  }

  /* Instrument feature-locked banners (tier upsell). Stack icon + body. */
  .feature-locked {
    flex-direction: column;
    align-items: flex-start !important;
  }

  /* Savannah doctrine card grids — already drop to 1col at 760px on
     instrument.html, but ensure other pages embedding sav cards
     follow suit. */
  .sav-cards,
  .sav-legend-grid {
    grid-template-columns: 1fr !important;
  }

  /* Cross-exchange wide table — body wraps but table stays wide.
     Ensure the table is in a scrolling container. cross-exchange.html
     wraps `table.cex-table` inside section.card; force overflow. */
  section.card,
  .card {
    overflow-x: auto;
  }

  /* Stream pills (cross-exchange status banner) — let them wrap. */
  .stream-status {
    flex-wrap: wrap;
  }

  /* Toolbar (state.html filters) — already wraps, but tighten gaps. */
  .toolbar {
    gap: 8px !important;
    font-size: 11px !important;
  }

  /* Section title (state.html) — collapse the count to a smaller line. */
  .section-title {
    flex-wrap: wrap;
  }

  /* Topnav dropdowns — open menu shouldn't exceed viewport width.
     The dropdown menu is positioned absolute; cap its width so a
     long item label can't push it off-screen. */
  .topnav-dropdown-menu {
    max-width: calc(100vw - 24px);
    right: auto;
    left: 0;
  }

  /* Onboarding modal — already has its own responsive sizing in
     onboarding.js, but defensive cap here for the overlay step. */
  .onboarding-step {
    max-width: calc(100vw - 24px) !important;
  }
}

/* ── Phone portrait (≤ 480px) — tighten further ──────────────────── */
@media (max-width: 480px) {

  body {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 12.5px !important;
  }

  main {
    padding: 8px 8px 24px !important;
  }

  header {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Hide the page title h1 on the smallest screens to give the topnav
     a full row of breathing room. The page itself usually has its own
     section heading; we don't really need "WORLD STATE" duplicated in
     the chrome on a 380px-wide phone. */
  header h1 {
    display: none !important;
  }

  section.card,
  .card {
    padding: 10px 12px !important;
  }

  /* Table fonts shrink one more notch. */
  table {
    font-size: 11.5px !important;
  }
  th, td {
    padding: 4px 5px !important;
  }

  /* Hero — stack everything cleanly. */
  .hero {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .hero .price-block.consensus {
    flex-direction: column;
    align-items: flex-start !important;
    width: 100%;
  }

  /* Buttons stretch to row width when they're the only action in a card. */
  button.btn-block,
  .btn-block {
    width: 100%;
  }
}

/* ── Touch device hover-suppression ──────────────────────────────────
   Several pages have hover-only reveal patterns (tooltip arrows,
   help bubbles). On touch we want them to either be tappable or
   visible all the time — not hover-locked. We can't easily refactor
   every tooltip site, so just shorten transitions so things don't
   feel laggy when triggered by tap. */
@media (hover: none) and (pointer: coarse) {
  * {
    /* Disable expensive hover transitions on touch — they fire after
       tap and feel sluggish. Keep transforms (animations) intact. */
  }
  /* Make sure dropdown triggers don't get stuck in a hover state
     after a tap. The topnav uses click-to-open so this is mostly
     about visual polish. */
  .topnav-dropdown-trigger:hover {
    background: inherit;
  }
}
