/* ════════════════════════════════════════════════════════════════════
   pwaRefine.css — phone / PWA-only refinements
   Loaded LAST so it cleanly wins the cascade. EVERY rule lives inside a
   phone-width media query (max-width: 600px / 430px), so the desktop
   layout (gated behind min-width: 99999px elsewhere) is never touched.

   Fixes requested:
   • Landing hero — robot + particles visible, headline/body text sized
     for a phone instead of a desktop.
   • News tab — compact, app-like layout instead of the wide desktop feel.
   • Signal tab — compact, app-like layout.
   • Overall PWA polish — no horizontal overflow, safe-area aware.
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   GLOBAL — kill horizontal overflow & respect the notch on phones
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  html, body { max-width: 100vw; overflow-x: hidden; }
}

/* ════════════════════════════════════════════════════════════════════
   0 · GLOBAL NATIVE-APP FEEL  (applies to every tab)
   The biggest "this is a desktop site on my phone" tells are: big
   uppercase headers with wide letter-spacing, inconsistent header sizes
   between tabs, and headings that overflow instead of wrapping. Calm the
   letter-spacing, normalise the header scale, and guarantee wrapping.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* ── Unified, calm, SMALLER section headers across every tab.
     These are pushed below the current 15/13px so the change is visible
     and the screen reads denser/native, not like a shrunk desktop site. ── */
  .sec-title {
    font-size: 13.5px !important;
    letter-spacing: .02em !important;
    line-height: 1.12 !important;
  }
  .sec-sub { font-size: 9.5px !important; letter-spacing: 0 !important; }
  .sec-header { padding: 11px 13px !important; min-height: 0 !important; }

  .v2-sec-title { font-size: 12px !important; letter-spacing: .03em !important; }
  .v2-sec-sub { font-size: 9px !important; }
  .v2-sec-hdr { padding: 10px 13px !important; }

  /* Trade top bar brand — tighten the spaced-out wordmark */
  .v2-brand-name { font-size: 13px !important; letter-spacing: .03em !important; }
  .v2-brand-sub { font-size: 7px !important; letter-spacing: .14em !important; }

  /* ── Headings must wrap, never overflow the viewport edge ── */
  h1, h2, h3,
  .sec-title, .v2-sec-title,
  .qf-head h2, .bgs-head h2,
  .news-title, .card-title, .acc-title, .tc-title {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* ── Card chrome: trim the desktop-sized radius/shadow to a tighter,
     native-feeling card. Keeps rounded corners, drops the panel look. ── */
  .card, .trade-card, .acc-full, .school-card,
  .news-card, .news-brief-card, .news-digest-card,
  .qf-card, .qf-head, .bgs-card, .bgs-head, .bgs-summary,
  .v2-hero, .mtf-align-bar, .sheet-card, .market-acc-card {
    border-radius: 16px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22) !important;
  }

  /* ── Consistent, tighter side gutters so content isn't a wide slab ── */
  .scroll-area, .trade-scroll {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ── Denser card internals: trim oversized titles, body copy and the
     generous accordion padding so each card holds more, feels native. ── */
  .card-title, .acc-title, .tc-title, .school-card-title {
    font-size: 12.5px !important;
    letter-spacing: .01em !important;
  }
  .acc-full-hdr, .acc-hdr, .tc-hdr, .card-hdr { padding: 10px 12px !important; min-height: 0 !important; }
  .acc-note, .tc-time { font-size: 9px !important; }
  .acc-body, .tc-body, .sheet-card-body, .smn-body, .tp-body { padding: 11px 12px !important; }

  /* Tighter vertical rhythm between stacked cards */
  .card, .acc-full, .trade-card, .news-card, .market-acc-card, .sheet-card {
    margin-bottom: 9px !important;
  }

  /* Accordion chevron buttons: slightly smaller so headers sit tighter */
  .acc-chev, .acc-open-chev { width: 22px !important; min-width: 22px !important; height: 22px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   1 · LANDING HERO
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Anchor the copy to the top so the hero reads top-down and leaves the
     lower half of the screen for the robot to actually be seen. */
  .landing-content {
    justify-content: flex-start !important;
    padding-top: max(86px, calc(env(safe-area-inset-top) + 70px)) !important;
    padding-bottom: 24px !important;
    min-height: 100dvh;
  }

  /* Phone-sized typography — the desktop clamp was far too large. */
  .landing-title {
    font-size: clamp(27px, 8.4vw, 36px) !important;
    line-height: 1.07 !important;
    letter-spacing: -.025em !important;
    margin-top: 16px !important;
  }
  .landing-lead {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    max-width: 38ch !important;
    margin-top: 14px !important;
  }
  .landing-eyebrow { font-size: 10px !important; padding: 5px 11px !important; }
  .landing-cta-row { margin-top: 22px !important; gap: 10px !important; }
  .landing-cta-primary,
  .landing-cta-ghost { padding: 13px 22px !important; font-size: 14.5px !important; }
  .landing-features { margin-top: 26px !important; }
  .landing-feature .lf-title { font-size: 12.5px !important; }
  .landing-feature .lf-sub { font-size: 10px !important; }
  .landing-scrollcue { margin-top: 30px !important; }

  /* ── ROBOT: make it clearly visible (was opacity .16, basically gone) ──
     Sit it low-centre behind the lower copy; the radial mask fades its
     edges so it blends rather than colliding with text. */
  .landing-robot {
    right: 50% !important;
    left: auto !important;
    bottom: -26px !important;
    top: auto !important;
    transform: translateX(50%) !important;
    width: min(440px, 104vw) !important;
    height: min(500px, 58vh) !important;
    opacity: .62 !important;
    z-index: 3 !important;
    /* Let touches/scroll pass straight through — a fixed 3D scene must never
       swallow the hero's scroll gesture or block the CTAs behind it. */
    pointer-events: none !important;
    -webkit-mask-image: radial-gradient(closest-side at 50% 46%, #000 60%, transparent 92%) !important;
    mask-image: radial-gradient(closest-side at 50% 46%, #000 60%, transparent 92%) !important;
  }
  .landing-robot-bubble { display: none !important; }

  /* ── PARTICLES / backdrop: lighten the heavy vignette so the Three.js
     particle torus-knot (offset to the right on phones) actually reads
     instead of being washed out by the dark overlay. ── */
  .landing-bg {
    background:
      radial-gradient(120% 80% at 75% 16%, rgba(99, 102, 241, .26), transparent 58%),
      radial-gradient(95% 70% at 12% 88%, rgba(34, 211, 238, .14), transparent 58%),
      radial-gradient(150% 120% at 50% 0%, transparent 52%, rgba(5, 5, 11, .55) 92%) !important;
  }
  .landing-bg::after { background-size: 40px 40px !important; }
}

@media (max-width: 380px) {
  .landing-title { font-size: 25px !important; }
  .landing-lead { font-size: 13px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   2 · NEWS TAB — compact, app-like
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* "CRYPTO NEWS" was rendering desktop-huge (22px + .10em uppercase
     spacing dominated the screen). Bring it in line with the other tabs. */
  [data-section="news"] .sec-header {
    min-height: 0 !important;
    padding: 13px 13px 11px !important;
  }
  [data-section="news"] .sec-title {
    font-size: 17px !important;
    letter-spacing: .03em !important;
  }
  [data-section="news"] .sec-sub {
    font-size: 10.5px !important;
    max-width: 30ch !important;
  }
  [data-section="news"] .sec-icon { width: 26px !important; height: 26px !important; }

  [data-section="news"] .news-scroll {
    gap: 12px !important;
    padding: 14px 13px calc(var(--nav-h, 60px) + env(safe-area-inset-bottom) + 18px) !important;
  }

  /* Brief card stacks; meta becomes a quiet footer line */
  [data-section="news"] .news-brief-card { padding: 14px !important; gap: 10px !important; }
  [data-section="news"] .news-brief-text { font-size: 13px !important; line-height: 1.5 !important; }
  [data-section="news"] .news-brief-meta {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 12px !important;
    min-width: 0 !important;
    font-size: 9px !important;
  }

  /* Overview = three compact stat chips in one row (was tall stacked tiles) */
  [data-section="news"] .news-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  [data-section="news"] .news-overview-tile {
    min-height: 0 !important;
    padding: 10px 9px !important;
  }
  [data-section="news"] .news-overview-tile:first-child { grid-column: auto !important; }
  [data-section="news"] .news-overview-label { font-size: 8px !important; letter-spacing: .07em !important; }
  [data-section="news"] .news-overview-tile strong { margin-top: 5px !important; font-size: 15px !important; }
  [data-section="news"] .news-overview-tile small { margin-top: 4px !important; font-size: 9.5px !important; line-height: 1.3 !important; }

  /* Filter pills: horizontal scroll strip instead of a cramped grid */
  [data-section="news"] .news-filter-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 7px !important;
  }
  [data-section="news"] .news-filter-row::-webkit-scrollbar { display: none !important; }
  [data-section="news"] .news-filter-btn {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    font-size: 9.5px !important;
  }

  /* News cards: single column, comfortable padding, foot as a footer row */
  [data-section="news"] .news-card {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 14px 14px 13px 16px !important;
  }
  [data-section="news"] .news-title { font-size: 14.5px !important; line-height: 1.3 !important; }
  [data-section="news"] .news-beginner { font-size: 11.5px !important; }
  [data-section="news"] .news-card-foot {
    grid-column: 1 !important;
    grid-row: auto !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-width: 0 !important;
    margin-top: 2px !important;
    padding: 10px 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--border) 74%, transparent) !important;
  }
  [data-section="news"] .news-source-note { font-size: 10px !important; line-height: 1.5 !important; }
}

/* ════════════════════════════════════════════════════════════════════
   3 · SIGNAL TAB (.qf-*) — compact, app-like
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  [data-section="signals"] {
    padding: 14px 13px calc(var(--nav-h, 60px) + env(safe-area-inset-bottom) + 18px) !important;
  }

  .qf-shell { gap: 11px !important; }

  /* Header: stacked, controls full-width and tappable */
  .qf-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .qf-head h2 { font-size: 19px !important; line-height: 1.2 !important; }
  .qf-sub { font-size: 11.5px !important; }
  .qf-controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .qf-controls .qf-refresh { grid-column: 1 / -1 !important; }
  .qf-select, .qf-refresh { min-height: 42px !important; font-size: 12.5px !important; }

  /* Cards: single column, lighter padding */
  .qf-grid { grid-template-columns: 1fr !important; gap: 11px !important; }
  .qf-card { padding: 15px !important; }
  .qf-card-title { font-size: 13px !important; }

  /* Inner stat grids: two columns is fine, just tighten so values don't clip */
  .qf-stat-grid, .qf-setup-grid, .qf-swing-grid { gap: 7px !important; }
  .qf-stat-grid div, .qf-setup-grid div, .qf-swing-grid div { padding: 8px 9px !important; }
  .qf-backtest-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }

  /* Backtest log table: let it scroll horizontally instead of crushing */
  .qf-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .qf-table-wrap table { min-width: 380px !important; }

  /* Beginner-strategy grid (same tab) → single column */
  .bgs-grid { grid-template-columns: 1fr !important; }
  .bgs-head { flex-direction: column !important; padding: 16px !important; }
  .bgs-head h2 { font-size: 18px !important; }
  .bgs-controls { justify-content: flex-start !important; }
  .bgs-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 380px) {
  .qf-controls { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════════════
   4 · TRADE HERO — stop the chevron clipping the "RESISTANCE" label
   The S/R chevron is absolutely positioned top-right; the right-hand
   toggle's label is right-aligned, so the two collided.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #heroCard .hero-sr-toggle.sr-right .v2-hero-sr-lbl {
    padding-right: 26px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   5 · TOASTS — move off the top headers to bottom-right above the nav.
   At top:16px/right they overlapped section headers (e.g. the "Data
   refreshed" pull-to-refresh toast sat on top of the signal title).
   The brain FAB lives bottom-LEFT, so bottom-right stays clear of it.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #toasts {
    top: auto !important;
    bottom: calc(var(--nav-h, 60px) + 22px + env(safe-area-inset-bottom)) !important;
    right: 12px !important;
    left: auto !important;
  }
  .toast { max-width: calc(100vw - 24px) !important; }
}