/* ================================================================
   USA DIVING — JUNIOR CIRCUIT · MOBILE LAYER
   Loaded LAST. Every rule is wrapped in a phone/tablet media query,
   so desktop layout (>820px) is never affected.

   Design: the six circuit stages are the app's primary sections, so
   on mobile they live at the TOP as a sticky, always-visible grid of
   pills (3-across on a phone = two rows; 6-across on a tablet = one
   row). No sideways scrolling, no hidden controls. They drive the
   real #stageNav buttons directly, so all existing logic runs.
   ================================================================ */

/* Mobile-only injected elements — hidden by default, shown on phones */
.mobile-filter-toggle { display: none; }
.mobile-backdrop { display: none; }

/* ───────────────────────────────────────────────────────────────
   TABLET & PHONE  (≤ 820px)  — sticky top bar + stage pill grid
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 820px) {

  html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }

  /* Top bar flows in the document and sticks to the top, growing tall
     enough to hold the stage pills underneath the brand row. */
  .app-topbar {
    position: sticky; top: 0;
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0;
  }
  /* Content no longer needs to clear a fixed bar */
  .app-body { padding-top: 0; grid-template-columns: 1fr; }

  /* Row 1: brand · Filters · actions.  Row 2+: full-width stage grid. */
  .topbar-brand        { order: 1; flex: 1 1 auto; min-width: 0; padding: 0 10px; border-right: none; }
  .mobile-filter-toggle{ order: 2; }
  .topbar-actions      { order: 3; margin-left: auto; padding: 0 8px; gap: 6px; }

  #stageNav {
    order: 4;
    flex: 0 0 100%; width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 6px;
    height: auto;
    padding: 2px 10px 9px;
    border-top: 1px solid rgba(255,255,255,.07);
  }

  /* Each stage = a clear, tappable pill */
  .stage-btn {
    height: auto; min-height: 40px;
    padding: 8px 10px;
    justify-content: center;
    border-radius: 10px;
    font-size: 12.5px; font-weight: 600;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.85);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    -webkit-tap-highlight-color: transparent;
    transition: background .14s ease, color .14s ease;
  }
  .stage-btn .stage-dot { display: none; }          /* labels are enough in pill form */
  .stage-btn.active {
    background: #fff; color: var(--navy, #171F69);
    border-color: #fff; font-weight: 700;
  }
}

/* ───────────────────────────────────────────────────────────────
   PHONE  (≤ 760px)  — primary mobile layout
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 760px) {

  /* Brand collapses to just the logo */
  .topbar-app-label { display: none; }
  .topbar-logo { height: 26px; }

  /* Filters button (injected by mobile-nav.js) opens the sidebar drawer */
  .mobile-filter-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    height: 32px; padding: 0 10px; margin-left: 2px;
    border-radius: var(--radius-sm, 8px);
    font-size: 12px; font-weight: 600; color: var(--nav-ink, #d4dcf5);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    flex-shrink: 0; -webkit-tap-highlight-color: transparent;
  }
  .mobile-filter-toggle svg { width: 13px; height: 13px; }
  .mobile-filter-toggle.active {
    background: var(--nav-active, rgba(143,195,234,.16));
    border-color: rgba(143,195,234,.4);
    color: var(--nav-active-ink, #a8d4f0);
  }

  .topbar-btn { height: 34px; padding: 0 10px; }

  /* ----- Filter sidebar becomes an off-canvas drawer ------------- */
  .control-sidebar {
    position: fixed;
    top: var(--bar-h); left: 0; bottom: 0;
    width: min(84vw, 320px);
    height: auto; max-height: none;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.32,.72,0,1);
    z-index: 360;
    box-shadow: 10px 0 40px rgba(0,0,0,.4);
    overscroll-behavior: contain;
  }
  body.filters-open .control-sidebar { transform: none; }

  .mobile-backdrop {
    display: block;
    position: fixed; inset: var(--bar-h) 0 0 0;
    background: rgba(6,9,32,.55);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    z-index: 350;
  }
  body.filters-open .mobile-backdrop { opacity: 1; pointer-events: auto; }
  body.filters-open { overflow: hidden; }

  .control-sidebar .sidebar-section { padding: 16px 14px; }
  .control-sidebar input,
  .control-sidebar select,
  .control-sidebar button { min-height: 38px; }

  /* ----- KPI cards: two-up grid -------------------------------- */
  .kpi-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; padding: 12px 12px 0; }

  /* ----- Workspace stacks: events strip over results ----------- */
  .workspace { grid-template-columns: 1fr !important; gap: 10px; padding: 12px 12px 18px; }
  .event-panel { position: static; max-height: 220px; }
  .event-search { min-height: 38px; font-size: 16px; }    /* 16px = no iOS auto-zoom */
  .results-panel { max-height: none; min-height: 320px; }

  /* ----- Results context strip: title over the four stats ------- *
     (Fixes the overlapping strip from the bug report.)             */
  .results-context { flex-wrap: wrap; height: auto; align-items: stretch; }
  .context-title-block { flex: 1 1 100%; min-width: 0; padding: 10px 14px 6px; }
  .context-stat {
    flex: 1 1 0; min-width: 0; padding: 8px 6px 10px;
    border-top: 1px solid var(--line, rgba(255,255,255,.08));
  }

  /* ----- View tabs (Results / Flags / Athletes …) wrap, all visible */
  .results-toolbar { flex-wrap: wrap; }
  .view-tabs { flex: 1 1 100%; flex-wrap: wrap; gap: 4px; padding: 6px 8px; }
  .tab-btn { min-height: 34px; }
  .toolbar-actions {
    flex: 1 1 100%;
    border-left: none; border-top: 1px solid var(--line);
    justify-content: flex-end;
  }
  .toolbar-actions .btn-sm { min-height: 34px; }

  /* ----- Every data table scrolls sideways, never the page ------ */
  .table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .table-wrap table { min-width: max-content; }

  /* ----- Override editor → full-screen sheet -------------------- */
  .override-drawer {
    width: 100% !important;
    inset: var(--bar-h) 0 0 0 !important;
    max-width: none;
  }
  .drawer-form { grid-template-columns: 1fr !important; display: grid; gap: 10px; }
  .drawer-form .form-field,
  .drawer-form .form-field-wide { width: 100%; }
  .drawer-form input,
  .drawer-form select { min-height: 40px; font-size: 16px; }
  .drawer-header-actions { flex-wrap: wrap; gap: 6px; }

  /* ----- Pipeline & Modeling ----------------------------------- */
  .pm-demo-grid, .pm-yoy-grid, .pm-fin-summary,
  .pm-cohort-nat-row, .pm-hero { grid-template-columns: 1fr !important; }

  /* Qualification-flow Sankey is a wide (1400-unit) diagram. Instead of
     shrinking it to phone width until every label is unreadable, render
     it at a legible size and let just the diagram pan horizontally. The
     legend sits outside the scroller so it never runs off-screen. */
  .pm-flow-wrap { padding: 14px 12px; }
  .pm-flow-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .pm-flow-svg { width: 1120px; min-width: 1120px; max-width: none; height: auto; }

  /* Legend: stack the items and let each one wrap (was clipping at the
     right edge because the rows were forced onto a single line). */
  .pm-flow-legend { flex-direction: column; gap: 10px; }
  .pm-legend-item { white-space: normal; align-items: flex-start; line-height: 1.35; }
  .pm-legend-sw { margin-top: 2px; flex-shrink: 0; }

  /* Secondary pipeline charts simply fit the width */
  .pm-score-svg { max-width: 100%; height: auto; }
  .pm-table-wrap, .pm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ───────────────────────────────────────────────────────────────
   SMALL PHONE  (≤ 440px)  — final tightening
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 440px) {
  .kpi-row { grid-template-columns: 1fr 1fr !important; gap: 6px; }
  #stageNav { grid-template-columns: repeat(3, 1fr); }   /* keep a clean 3 × 2 grid */
  .stage-btn { font-size: 12px; padding: 8px 6px; }
  .topbar-btn { padding: 0 9px; font-size: 0; gap: 0; }  /* action buttons → icon-only */
  .topbar-btn svg { width: 15px; height: 15px; }
  .topbar-btn .override-badge { font-size: 10px; }
  .control-sidebar { width: 88vw; }
}