/* ════════════════════════════════════════════════════════════════════
   Wallet Mobile Polish (iter-J · 2026-05-20)

   Single stylesheet that fixes the worst mobile UX issues across the
   iter-A through iter-H chain templates without touching the
   per-chain CSS files.  Loaded by base.html for every page; no-ops
   above 720px (the wallet's chain-page breakpoint).

   Focused scope: nav mega-menu, chain cards, send forms, academy
   reader, dashboard hero.  Touch targets ≥44px (Apple HIG / WCAG 2.5.5).
   ════════════════════════════════════════════════════════════════════ */

/* ───── Global mobile baseline ────────────────────────────────────── */
@media (max-width: 720px) {

  /* Touch targets: any clickable element gets a minimum hit area.
     Doesn't change visual size — uses outline-free hit-zone padding. */
  .gn-btn, .btn,
  .nav-link, .dropdown-item,
  .gn-priv-card, .gn-cos-net-tab, .gn-mega-col a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Inputs: the iOS Safari auto-zoom-on-focus trigger is font-size <16px.
     Bumping to 16px prevents the zoom + keeps fields readable. */
  .gn-input, .form-control, .form-select,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], textarea, select {
    font-size: 16px !important;
    min-height: 44px;
    padding: 10px 12px;
  }

  /* Container padding: edge-to-edge wastes touch zones at the very
     edge.  Standard 16px gutter. */
  .container, .container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Stack hero rows on mobile (was side-by-side on every chain page). */
  .gn-btc-hero, .gn-cos-hero, .gn-dot-hero,
  .gn-priv-hero, .gn-evm-hero, .gn-sol-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px;
  }

  /* The address pill in card headers wraps to a new line at narrow widths. */
  .gn-btc-addr-chip, .gn-cos-addr-chip, .gn-dot-addr-chip {
    word-break: break-all;
    font-size: 11px !important;
  }
}


/* ───── Top-nav mega-menu mobile experience ──────────────────────── */
@media (max-width: 720px) {

  /* The desktop mega-menu uses fixed min-width.  Mobile gets full
     width + sectioned columns that scroll vertically. */
  .glass-nav .gn-megamenu {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    max-height: 70vh;
    overflow-y: auto;
    padding: 12px 14px 16px !important;
  }

  /* Mega-menu columns stack but with proper section dividers. */
  .gn-mega-grid, .gn-mega-grid--3 {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Section headers act as scroll landmarks on mobile. */
  .gn-mega-col h6 {
    padding: 4px 0 !important;
    font-size: 0.72rem !important;
    border-bottom: 1px solid rgba(139,92,246,0.18);
    margin-bottom: 8px !important;
  }

  .gn-mega-col a.dropdown-item {
    padding: 12px 8px !important;
    font-size: 0.92rem !important;
    border-radius: 10px;
  }

  /* The iter-X meta-tag becomes a smaller secondary line on mobile. */
  .gn-mega-col a .gn-item-meta {
    font-size: 0.60rem !important;
  }

  /* Footer collapses to single-row stacked. */
  .gn-mega-footer {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }
}


/* ───── Chain overview cards — stack + breathe ───────────────────── */
@media (max-width: 720px) {

  /* Two-column overview grids on every chain page collapse to one. */
  .gn-btc-grid, .gn-cos-grid, .gn-dot-grid,
  .gn-priv-grid, .gn-evm-grid, .gn-sol-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Card padding scales down so we keep more screen for content. */
  .gn-btc-card, .gn-cos-card, .gn-dot-card,
  .gn-priv-card, .gn-evm-card, .gn-sol-card {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  /* Card heading is the room dominant — give it room. */
  .gn-btc-title, .gn-cos-title, .gn-dot-title,
  .gn-priv-title, .gn-evm-title, .gn-sol-title {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  /* Action button rows wrap and become full-width pills. */
  .gn-btc-actions, .gn-cos-actions, .gn-dot-actions,
  .gn-priv-actions, .gn-evm-actions, .gn-sol-actions {
    flex-direction: column !important;
  }
  .gn-btc-actions .gn-btn,
  .gn-cos-actions .gn-btn,
  .gn-dot-actions .gn-btn,
  .gn-priv-actions .gn-btn,
  .gn-evm-actions .gn-btn,
  .gn-sol-actions .gn-btn {
    width: 100%;
    justify-content: center;
  }

  /* Network tabs (Cosmos Hub / Osmosis toggle) — bigger, side-scrollable. */
  .gn-cos-net-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    margin-bottom: 16px !important;
  }
  .gn-cos-net-tab {
    flex-shrink: 0;
    padding: 12px 18px !important;
    font-size: 0.92rem !important;
  }
}


/* ───── Send forms — sticky-bottom CTA, larger inputs ────────────── */
@media (max-width: 720px) {

  /* Form inputs row stacking on every chain's send template. */
  .gn-btc-row, .gn-cos-row, .gn-dot-row,
  .gn-priv-row, .gn-evm-row, .gn-sol-row,
  .gn-cos-ibc-pair {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* The receive-screen address display becomes top-priority — copy
     button moves below the address for thumb reach. */
  .gn-btc-addr-display, .gn-cos-addr-display, .gn-dot-addr-display {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .gn-btc-copy, .gn-cos-copy, .gn-dot-copy {
    width: 100%;
    justify-content: center;
  }

  /* Travel-Rule attestation fieldset becomes denser. */
  .gn-priv-attest {
    padding: 14px 14px !important;
  }
  .gn-checkbox {
    font-size: 14px !important;
    align-items: flex-start;
  }
  .gn-checkbox input { width: 18px; height: 18px; margin-top: 2px; }
}


/* ───── Academy reader — bigger body + sticky exam progress ──────── */
@media (max-width: 720px) {

  /* Lesson markdown becomes readable single-column.  The desktop
     two-column lesson layout collapses. */
  .gn-ed-lesson-body, .markdown-body {
    font-size: 17px !important;
    line-height: 1.55 !important;
    padding: 0 !important;
  }

  .gn-ed-lesson-body h2, .markdown-body h2 {
    font-size: 22px !important;
    margin-top: 28px !important;
  }
  .gn-ed-lesson-body h3, .markdown-body h3 {
    font-size: 18px !important;
    margin-top: 20px !important;
  }

  /* Exam answer options become full-width 56px-tall buttons. */
  .gn-q-opt, .gn-q-opt-radio, .gn-exam-option,
  .academy-exam-option, .exam-answer {
    min-height: 56px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    text-align: left !important;
    white-space: normal !important;
    width: 100%;
    align-items: flex-start !important;
  }
  .gn-q-letter {
    flex-shrink: 0;
    min-width: 28px;
    font-weight: 700;
  }

  /* Exam progress bar (.gn-exam-bar in the live template) sticks
     to top while scrolling so the user always sees question N of M. */
  .gn-exam-bar, .gn-exam-progress, .academy-exam-progress {
    position: sticky !important;
    top: 0;
    z-index: 10;
    background: rgba(10, 10, 30, 0.92);
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--gn-border-soft);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .gn-exam-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: rgba(10, 10, 30, 0.92);
    padding: 12px !important;
    border-top: 1px solid var(--gn-border-soft);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}


/* ───── Dashboard mobile — skill tree + hero + widgets ──────────── */
@media (max-width: 720px) {

  /* Skill tree SVG: scale to viewport width.  The desktop tree is
     1240x860; on mobile we shrink-to-fit and pin the centre. */
  .gn-skill-tree-svg, svg.gn-tree {
    width: 100% !important;
    height: auto !important;
    max-width: 100vw;
  }

  /* Editorial hero on academy dashboard — single column. */
  .gn-ed-hero__grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .gn-ed-display {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }
  .gn-ed-dek {
    font-size: 15px !important;
  }

  /* Recommended-next card scales properly. */
  .gn-ed-upnext, .gn-recommend-card {
    padding: 14px !important;
  }

  /* Right-rail widgets stack BELOW main content (not beside). */
  .gn-dashboard-rail, .gn-right-rail {
    margin-top: 24px;
  }
}


/* ───── Frontier Vault / DeFi tables — horizontal scroll wrapper ── */
@media (max-width: 720px) {

  /* Tables that don't fit get a horizontal scroll wrapper with a
     scroll-shadow hint so users know to swipe. */
  .table-responsive, .gn-table-wrap {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    background:
      linear-gradient(to right, var(--gn-bg, #0a0a1e), transparent 8px),
      linear-gradient(to left,  var(--gn-bg, #0a0a1e), transparent 8px) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(139,92,246,0.18), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(139,92,246,0.18), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}


/* ───── Safari iOS specific fixes ────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 720px) {
    /* Fix the 100vh problem on iOS Safari (URL bar pushes content). */
    .gn-priv-wrap, .gn-cos-wrap, .gn-dot-wrap,
    .gn-btc-wrap, .gn-evm-wrap, .gn-sol-wrap {
      min-height: -webkit-fill-available;
    }
    /* Disable iOS overscroll-bounce on full-page mode (looks broken
       against the dark canvas). */
    body { overscroll-behavior-y: contain; }
  }
}


/* ───── Reduced-motion respect ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  @media (max-width: 720px) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}