/* =============================================================
 * build/mobile.css — V4.1 universal mobile responsiveness
 *
 * Phone-first audience (TikTok soft launch). This sheet ships
 * with every ARC-TUNING page so a hand on a phone gets a single-
 * column reflow, touch-friendly hit targets, and readable
 * type without horizontal scroll.
 *
 * Strategy: tweak EXISTING class names in index.html, retail.html,
 * the dyno pages, the section pages, etc. We don't rename or
 * rewrite -- we override at narrow widths.
 *
 * Breakpoints:
 *   <= 768px  tablet / large phone (the main mobile target)
 *   <= 480px  small phone
 * ============================================================= */

/* ---- Universal: prevent horizontal scroll on any page ---- */
@media (max-width: 768px) {
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* base type up a touch on small screens for legibility */
  body { font-size: 14px; }

  /* generic image rule -- never overflow */
  img, video, canvas, svg.responsive {
    max-width: 100%;
    height: auto;
  }
}

/* ============================================================
 * TOP BAR -- used by index, retail, dyno, section pages
 * Wrap items to a second row, drop logo wordmark size.
 * ============================================================ */
@media (max-width: 768px) {
  .topbar,
  .top-bar,
  header.topbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }
  .topbar .logo,
  .topbar .brand {
    font-size: 16px;
    flex: 0 0 auto;
  }
  .topbar-spacer { display: none !important; }
  /* the GOD MODE / mode-switch / vehicle pill -- shrink them */
  .vehicle-pill, .mode-switch, .gm-pill, .gm-btn, .ico-btn {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
  .gm-pill .gm-dot { width: 6px; height: 6px; }

  /* stack tabs nav so they wrap nicely */
  .section-tabs, .tabs, nav.tabs {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
}

/* ============================================================
 * SECTION HEADER + GRID layouts
 * ============================================================ */
@media (max-width: 768px) {
  .section-header {
    padding: 16px 14px 12px 14px !important;
  }
  .section-title { font-size: 22px !important; }
  .section-subtitle { font-size: 13px !important; }

  /* Two-up cards collapse to one column */
  .grid-2, .two-col, .dash-grid, .build-grid,
  .dash-build-rows {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ============================================================
 * RETAIL parts shop -- most complex layout
 * ============================================================ */
@media (max-width: 768px) {
  .retail-shell, .retail-layout {
    grid-template-columns: 1fr !important;
  }
  .retail-sidebar, .build-sheet {
    position: static !important;
    width: 100% !important;
    margin-bottom: 16px;
    max-height: none !important;
  }
  .parts-grid, .parts-list {
    grid-template-columns: 1fr !important;
  }
  .part-card, .product-card {
    width: 100% !important;
  }
}

/* ============================================================
 * DYNO -- gauges and chart on phones
 * ============================================================ */
@media (max-width: 768px) {
  .dyno-stage, .dyno-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .dyno-gauges {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-around !important;
  }
  .dyno-curve, .dyno-canvas-wrap {
    width: 100% !important;
    min-height: 280px;
  }
}

/* ============================================================
 * SECTION pages (PE, VE, SPARK, MAF, etc.) -- table + chat
 * ============================================================ */
@media (max-width: 768px) {
  .section-shell, .section-layout {
    grid-template-columns: 1fr !important;
  }
  .section-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .chat-panel, .ai-panel {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: 60vh !important;
  }
}

/* ============================================================
 * BUTTONS -- always touch-friendly
 * ============================================================ */
@media (max-width: 768px) {
  button, .btn, .ico-btn, .mode-btn, .gm-btn, .tab-btn {
    min-height: 40px;
    min-width: 40px;
  }
  /* primary CTAs grow */
  .btn.primary, .cta, .next-btn {
    width: 100% !important;
    padding: 12px 18px !important;
    font-size: 15px !important;
  }
}

/* ============================================================
 * AI status banner / chat -- don't dominate small screens
 * ============================================================ */
@media (max-width: 768px) {
  #ai-status-banner, .ai-status-banner, .ai-banner {
    top: 6px !important; right: 6px !important;
    transform: scale(0.85);
    transform-origin: top right;
  }
  .floating-chat, #chat-panel.floating {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
  }
}

/* ============================================================
 * Atmospheric backdrop on mobile -- still pretty, less heavy
 * ============================================================ */
@media (max-width: 768px) {
  .bg-clouds .cloud { filter: blur(6px); opacity: 0.6 !important; }
  .bg-overlay { opacity: 1.1; }   /* let text breathe */
  .crow { width: 42px !important; height: 28px !important; }
}

/* ============================================================
 * SMALL PHONES (<=480px) -- final squeeze
 * ============================================================ */
@media (max-width: 480px) {
  body { font-size: 13px; }
  .topbar { padding: 6px 10px !important; }
  .section-title { font-size: 19px !important; }
  .topbar .vehicle-pill { font-size: 10px !important; }
  .gm-btn { padding: 4px 8px !important; font-size: 10px !important; }
}

/* ============================================================
 * Demo-mode pill -- bottom-left every page -- tighten on phone
 * ============================================================ */
@media (max-width: 768px) {
  #demo-mode-toggle, .demo-toggle, .demo-pill {
    transform: scale(0.85);
    transform-origin: bottom left;
  }
}