/* ============================================================
   BOLTZ — mobile / "app" compression + polish
   Loaded LAST so it overrides page styles. Targets ≤640px.
   Goals: no sideways page scroll · everything small & tight ·
   one-glance app feel · polished rhythm & tap targets.
   ============================================================ */

/* Never let the page scroll sideways (kills the "side scroll"). */
html, body { max-width: 100vw; overflow-x: hidden; }
* { -webkit-tap-highlight-color: transparent; }

@media (max-width: 640px) {
  /* ---------- base type ---------- */
  body { font-size: 12.5px; -webkit-text-size-adjust: 100%; }

  /* ---------- page shells / paddings ---------- */
  .wrap, .page, main, .container { padding-left: 11px !important; padding-right: 11px !important; }
  .wrap { padding-top: 14px !important; padding-bottom: calc(22px + env(safe-area-inset-bottom)) !important; }

  /* ---------- top bars / headers (slim, sticky, subtle shadow) ---------- */
  .top, .topbar {
    padding: 8px 12px !important; gap: 7px !important; flex-wrap: wrap !important; row-gap: 6px !important;
    position: sticky; top: 0; z-index: 30;
    padding-top: calc(8px + env(safe-area-inset-top)) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.35), 0 8px 20px -14px rgba(0,0,0,.6);
  }
  .brand { font-size: 14.5px !important; gap: 6px !important; }
  .brand svg, .brand .bolt { width: 15px !important; height: 15px !important; }
  .brand small { font-size: 8px !important; letter-spacing: .1em !important; margin-left: 2px !important; }
  .sp { flex: 1 1 auto !important; }

  /* signout / small nav / chips */
  .signout, .navlink, .tbtn, .btn-sm { padding: 6px 10px !important; font-size: 9.5px !important; border-radius: 100px !important; }

  /* ---------- pills / tags / badges (tiny) ---------- */
  .rolepill, .badge, .pill, .tag, .chip, .stag, .tag-live, .sched-ro, .out {
    font-size: 8.5px !important; padding: 2px 6px !important; letter-spacing: .02em !important;
  }
  .who { font-size: 11px !important; }
  .who .av { width: 24px !important; height: 24px !important; font-size: 11px !important; }

  /* ---------- headings ---------- */
  .hi { font-size: 18px !important; margin-bottom: 2px !important; }
  h1 { font-size: 19px !important; line-height: 1.12 !important; }
  h2 { font-size: 15px !important; }
  h3 { font-size: 13.5px !important; }
  .sub, .ssub { font-size: 11px !important; margin-bottom: 10px !important; line-height: 1.45 !important; }

  /* ---------- cards / panels ---------- */
  .card, .staff, .pay-card, .dg-card, .gc {
    padding: 14px !important; border-radius: 14px !important; margin-bottom: 11px !important;
  }
  /* never let a card / gate / login panel exceed the screen (real phones: caps to viewport) */
  .card, .staff, .pay-card, .dg-card, .gc, .gate-card, .authcard, form.card {
    max-width: calc(100vw - 24px) !important; margin-left: auto !important; margin-right: auto !important;
  }
  /* full-screen centered gates: slim the gutter */
  #gate, #dashgate { padding: 16px !important; }

  /* ---------- tile grids → single column, compact, tactile ---------- */
  .cards { grid-template-columns: 1fr !important; gap: 9px !important; }
  .tile { padding: 14px 15px !important; border-radius: 14px !important; }
  .tile:hover { transform: none !important; box-shadow: none !important; }
  .tile:active { transform: scale(.985) !important; }
  .tile .ic { width: 34px !important; height: 34px !important; font-size: 17px !important; border-radius: 10px !important; margin-bottom: 8px !important; }
  .tile h2 { font-size: 14px !important; }
  .tile p { font-size: 11px !important; margin-top: 3px !important; line-height: 1.4 !important; }
  .tile .go { margin-top: 9px !important; font-size: 11px !important; }

  /* ---------- generic layout grids collapse ---------- */
  .grid, .stats, .row, .grid2, .links { grid-template-columns: 1fr !important; }
  .grid, .links { gap: 9px !important; }
  .lk { padding: 12px 13px !important; }

  /* KPI strips: 2-up */
  .kpis, .kpi-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .kpi { padding: 12px !important; border-radius: 12px !important; }
  .kpi .v { font-size: 22px !important; }

  /* ---------- buttons (comfortable tap targets) ---------- */
  .btn { padding: 12px 14px !important; font-size: 13.5px !important; border-radius: 12px !important; min-height: 44px; }
  .btn:active { transform: scale(.99); }
  .sbtn { font-size: 10px !important; padding: 7px 10px !important; border-radius: 9px !important; min-height: 32px; }
  .rolesel, .m-inp, .m-seg button, .seg button, .tabs button { font-size: 12px !important; padding: 8px 9px !important; }

  /* ---------- tables: compress + contain (scroll stays inside the card) ---------- */
  table { font-size: 11px !important; width: 100% !important; }
  th { font-size: 8.5px !important; padding: 5px 6px !important; }
  td { padding: 7px 6px !important; }
  td.mono, .mono { font-size: 10.5px !important; }
  [style*="overflow-x:auto"], [style*="overflow-x: auto"], [style*="overflow:auto"], .scroll {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100% !important;
    scrollbar-width: none;
  }
  [style*="overflow"]::-webkit-scrollbar, .scroll::-webkit-scrollbar { height: 0; }

  /* ---------- coach portal: master bar + view-only schedule ---------- */
  .masterbar { padding: 11px 12px !important; gap: 9px !important; border-radius: 14px !important; }
  .masterbar .mb-sub { display: none !important; }
  .masterbar .mb-crown { width: 32px !important; height: 32px !important; font-size: 16px !important; border-radius: 9px !important; flex-basis: 32px !important; }
  .masterbar .mb-title { font-size: 13px !important; }
  .mb-pick { padding: 4px 5px 4px 12px !important; }
  .mb-pick > span { font-size: 9px !important; }
  .mb-pick select { max-width: 46vw !important; font-size: 12px !important; padding: 8px 30px 8px 12px !important; }

  .srow { flex-direction: column !important; gap: 4px !important; padding: 8px 0 !important; }
  .stitle { flex: none !important; font-size: 12px !important; }
  .snames { min-width: 0 !important; gap: 5px !important; }
  .sname { font-size: 11px !important; padding: 3px 8px !important; }
  .sday { font-size: 12px !important; margin: 11px 0 6px !important; }

  /* ---------- scope / notes / previews ---------- */
  .scope, .note, .preview { font-size: 11px !important; padding: 10px 12px !important; border-radius: 11px !important; margin-bottom: 12px !important; }

  /* ---------- charts: shorter so they fit one view ---------- */
  .chart-wrap, .h300 { height: 190px !important; }

  /* ---------- inputs: 16px stops iOS zoom-on-focus, comfy height ---------- */
  input, select, textarea { font-size: 16px !important; }
  .tabs { gap: 4px !important; }

  /* schedule page calendar: shrink cells */
  .cal td, .cal th { padding: 3px !important; font-size: 10px !important; }
}

/* ---------- tiny phones ---------- */
@media (max-width: 380px) {
  .kpis, .kpi-row { grid-template-columns: 1fr !important; }
  .brand small { display: none !important; }
  .mb-pick select { max-width: 40vw !important; }
}

/* momentum scroll everywhere on touch */
@media (max-width: 640px) and (hover: none) {
  * { scroll-behavior: smooth; }
}