/* GenZTrade v11.0.7 — shared mobile stylesheet
 *
 * Linked from every in-scope page (index, signup, login, forgot-password,
 * verify-email, welcome, pricing, methodology, track_record_widget,
 * scanner, faq, home). Cockpit + admin opt out for v11.0.7 — they're
 * intentionally dense.
 *
 * Two breakpoints:
 *   <= 768px   tablet
 *   <= 480px   phone
 *
 * Rules (spec §6.5):
 *   1. Tap targets ≥ 44×44 px
 *   2. Multi-column layouts stack to single column
 *   3. Tables collapse to card list (one card per row)
 *   4. Body font-size ≥ 14px; input font-size ≥ 16px (prevents iOS zoom)
 *   5. No horizontal scrolling
 *   6. Side nav collapses to hamburger (handled per-page; this file
 *      provides the .nav-mobile / .nav-desktop helpers)
 */

@media (max-width: 768px) {
  .nav-desktop                            { display: none !important; }
  .nav-mobile                             { display: flex !important; }
  .two-col, .three-col, .four-col,
  .grid-2, .grid-3, .grid-4               { grid-template-columns: 1fr !important; }
  .signup-card, .login-card, .card        { max-width: 100% !important;
                                            padding: 16px !important; }
  .signup-track-record                    { padding: 0 !important; }
  .cta-row                                { flex-direction: column !important;
                                            align-items: stretch !important; }
  .cta-row .btn                           { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
  body                                    { font-size: 15px !important; }
  h1                                      { font-size: 22px !important; }
  h2                                      { font-size: 18px !important; }
  h3                                      { font-size: 16px !important; }
  .hero h1                                { font-size: 28px !important;
                                            line-height: 1.15 !important; }
  .hero p, .hero .sub                     { font-size: 15px !important; }

  /* Tap targets — buttons, links inside nav, and form controls. */
  .btn, button.btn, .nav-link,
  a.btn-primary, a.btn-ghost              { min-height: 44px !important;
                                            min-width: 44px !important;
                                            display: inline-flex !important;
                                            align-items: center !important;
                                            justify-content: center !important;
                                            padding: 10px 16px !important; }

  /* iOS auto-zooms inputs whose font-size is < 16px. Prevent it. */
  input, select, textarea                 { min-height: 44px !important;
                                            font-size: 16px !important;
                                            padding: 11px 12px !important; }
  textarea                                { min-height: 88px !important; }

  /* Form labels stack above inputs by default; keep them tight. */
  label                                   { font-size: 12px !important;
                                            margin: 10px 0 4px !important; }

  /* No horizontal scroll for the whole page. */
  body                                    { overflow-x: hidden !important; }

  /* Responsive tables — opt in by adding class="responsive" + data-label
     on each <td>. Without those attrs the table reflows but stays a
     table. */
  table.responsive                        { display: block !important;
                                            width: 100% !important; }
  table.responsive thead                  { display: none !important; }
  table.responsive tbody                  { display: block !important; }
  table.responsive tr                     { display: block !important;
                                            margin-bottom: 10px !important;
                                            border: 1px solid var(--bg4, #3a4252) !important;
                                            border-radius: 6px !important;
                                            padding: 10px !important; }
  table.responsive td                     { display: block !important;
                                            border: none !important;
                                            padding: 4px 0 !important; }
  table.responsive td::before             { content: attr(data-label) ": " !important;
                                            color: var(--text2, #9fa8b3) !important;
                                            font-weight: 600 !important;
                                            display: inline-block !important;
                                            min-width: 90px !important; }

  /* Nav: side nav collapses to a stacked drawer at this breakpoint. */
  .nav-mobile                             { flex-wrap: wrap !important; }
  .nav-mobile .nav-link                   { flex: 1 1 50% !important; }

  /* Generic two-up button rows (signup, pricing). */
  .btn-row, .button-row                   { flex-direction: column !important;
                                            gap: 8px !important; }
  .btn-row > *, .button-row > *           { width: 100% !important; }
}

/* Pre-emptive helpers for pages that don't yet declare nav-desktop /
   nav-mobile classes. Default: show desktop everywhere; the per-page
   media queries flip them. */
.nav-mobile { display: none; }
.nav-desktop { display: flex; }


/* ─── v11.0.7 — data-status pill (vendor-opaque) ──────────────────────
 * Replaces the legacy upstream-named status pattern. Never names upstream.
 * Rendered into any [data-genz-status-pill] element by
 * static/js/genztrade_runtime_flags.js.
 */
.genz-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 12px; font-size: 11px;
    font-weight: 700; letter-spacing: 0.3px; line-height: 1;
    text-transform: uppercase; vertical-align: middle;
}
.genz-pill-live     { background: rgba(66, 209, 150, 0.18); color: #42d196; }
.genz-pill-degraded { background: rgba(255, 184, 0, 0.18);  color: #ffb800; }
.genz-pill-closed   { background: rgba(159, 168, 179, 0.16); color: #9fa8b3; }
/* Dev-only panels — default-hidden so they NEVER flash on prod even
 * during the brief window before /api/runtime-flags resolves. The
 * runtime-flags script unhides them by setting body.genz-dev-mode. */
.dev-only { display: none !important; }
body.genz-dev-mode .dev-only { display: revert !important; }


/* ─────────────────────────────────────────────────────────────────────
 * v11.2.0 — mobile-complete additions
 *
 * Adds spotlight/scanner/cockpit reflow + bottom-sheet visual + safe-area
 * insets + pull-to-refresh suppression. Strictly additive to the v11.0.7
 * baseline above.
 * ────────────────────────────────────────────────────────────────────*/

/* 1. Prevent iOS overscroll bounce reload (v11.0.9 auto-refresh is
 *    already covering the data freshness use case). */
html, body { overscroll-behavior-y: none; }

/* 2. Safe-area insets for iPhone notch + home indicator. */
@supports (padding: env(safe-area-inset-top)) {
  header, .top-nav, .spot-nav, .hdr {
    padding-top: max(12px, env(safe-area-inset-top));
  }
  .bottom-nav, .gz-bottom-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}

/* 3. Spotlight card grid — stack on mobile (below 480px). */
@media (max-width: 480px) {
  .card-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .spot-card {
    padding: 12px !important;
  }
  .spot-card .ticker { font-size: 17px !important; }
  .spot-card .company-name {
    max-width: 100% !important;
    white-space: normal !important;
    font-size: 11px !important;
  }
  .spot-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .spot-actions button, .spot-actions a {
    flex: 1 1 100% !important;
    justify-content: center !important;
  }
  /* Metrics grid: 2x2 instead of 4-across so values stay readable. */
  .spot-card .metrics {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* 4. Bottom-sheet visual treatment.
 *    Any element with data-bottom-sheet="true" becomes a sheet on mobile
 *    and stays a centered modal on tablet/desktop. The JS in
 *    genztrade_bottom_sheet.js handles the swipe-to-dismiss. */
@media (max-width: 767px) {
  [data-bottom-sheet="true"] {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 1000;
  }
  [data-bottom-sheet="true"].gz-sheet-open {
    transform: translateY(0);
  }
}
@media (min-width: 768px) {
  [data-bottom-sheet="true"] .gz-sheet-handle {
    display: none;
  }
}

/* 5. Scanner table: collapse to card list below 480px when the table
 *    has class="responsive". Existing rules in the v11.0.7 block already
 *    cover the basic case; extend here for scanner-specific columns. */
@media (max-width: 480px) {
  .scanner-results table.responsive td,
  table.responsive[data-genz-scanner] td {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}

/* 6. Cockpit panels — single-column reflow below 768px. The cockpit
 *    page's grid uses .cockpit-grid; flatten it. */
@media (max-width: 767px) {
  .cockpit-grid, .cockpit-panels {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 12px !important;
  }
  .cockpit-tab-strip {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .cockpit-tab-strip > * {
    scroll-snap-align: start;
    flex-shrink: 0 !important;
  }
}

/* 7. Modal-to-bottom-sheet for legacy .modal-content. Existing .modal
 *    overlays that don't yet use data-bottom-sheet still get a phone-
 *    friendly treatment. */
@media (max-width: 767px) {
  .modal, .alert-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .modal-content, .alert-banner {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
}

/* 8. Touch-friendly: kill webkit tap highlight, increase min-tap for
 *    icon-only buttons missing a label class. */
@media (pointer: coarse) {
  button, a, [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }
}

/* 9. Spotlight section headings — tighter on mobile. */
@media (max-width: 480px) {
  section.spot-section { margin-bottom: 24px !important; }
  section.spot-section h2 { font-size: 15px !important; gap: 6px !important; }
  section.spot-section h2 .count { font-size: 11px !important; }
}

/* 10. .container default — keep within viewport on the smallest phones. */
@media (max-width: 360px) {
  .container, main { padding-left: 8px !important; padding-right: 8px !important; }
  body { font-size: 14px !important; }
}