/* INDEX'SUN — Mobile + PWA layer · 2026-04-26
 * Loaded AFTER hub-switcher.css and tokens.css.
 *
 * Scope: ≤ 640px viewport (phones · small tablets in portrait).
 * Goals:
 *   - Safe-area insets for iOS notch / Android nav-gesture bar
 *   - Tighter top hub-switcher pill (collapse to icon-only on phone)
 *   - Touch-friendly tap targets (min 44px height per Apple HIG)
 *   - Comfortable text on small screens (avoid <12px)
 *   - Standalone-mode chrome (when launched from Home Screen)
 */

/* ───── PWA standalone mode ─────
 * When app is launched from "Add to Home Screen", browser chrome is gone;
 * give the page a top safe-area inset so content doesn't hide under the
 * status bar / notch.
 */
@media (display-mode: standalone), (display-mode: minimal-ui) {
  body { padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); }
  .index-sun-bar { padding-top: calc(.5rem + env(safe-area-inset-top, 0)) !important; }
}

/* ───── Touch targets ─────
 * Anything clickable should reach 44px tap area (Apple HIG / Android guidelines).
 */
@media (hover: none) and (pointer: coarse) {
  button, a, .chip, .tab, .pill, [role="button"], [data-tab], [data-nav], [data-art],
  [data-ticker], [data-sector], [data-cat], [data-research-id], [data-journal-open],
  [data-handoff-note], [data-journal-filter], [data-advisor], [data-rsch-cat],
  [data-rsch-persona] {
    min-height: 36px;
  }
  /* But keep micro-chips (e.g., match-source) compact — opt out via :not */
  .p-match-src, .adv-tick, .b-life, .b-health, .b-savings { min-height: 0; }
}

/* ───── Phone viewport (≤640px) ───── */
@media (max-width: 640px) {

  /* Top hub-switcher pill collapses to icon-only on phone */
  .index-sun-bar {
    padding: .35rem .6rem !important;
    gap: .4rem !important;
    min-height: 44px !important;
  }
  .is-brand-text, .is-brand-sub { display: none; }
  .is-brand { gap: .35rem; flex-shrink: 0; }
  .hub-pill .pill-text { display: none; }
  .hub-pill { padding: .3rem .55rem !important; }
  .hub-pill .pill-icon { font-size: .78rem !important; }

  /* Reduce body horizontal padding to maximize content width */
  body { font-size: 14px; }
  .main, main { padding-left: .8rem !important; padding-right: .8rem !important; }

  /* Cards stack instead of grid */
  .card-grid, .companies-grid { grid-template-columns: 1fr !important; }

  /* Tables that don't fit: enable horizontal scroll on parent rather than cropping */
  .companies-row, table.dt {
    -webkit-overflow-scrolling: touch;
  }

  /* Modal/overlay full-screen on phone */
  .detail-overlay { padding: 0 !important; align-items: stretch !important; }
  .detail-panel {
    max-width: 100% !important;
    border-radius: 0 !important;
    max-height: 100vh !important;
    padding-top: calc(1.2rem + env(safe-area-inset-top, 0)) !important;
    padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0)) !important;
  }

  /* Hide non-essential rail/sidebar on phone */
  .analyst-rail, .sticky-rail, .sidebar {
    display: none !important;
  }

  /* Tabs wrap with smaller text */
  .tab-strip { flex-wrap: wrap; gap: .2rem; }
  .tab-btn { padding: .45rem .6rem !important; font-size: .78rem !important; }
  .tab-btn .tab-sub { display: none; }

  /* Big inputs for numpad */
  input[type="number"], input[type="search"], input[type="text"], select, textarea {
    font-size: 16px !important;  /* prevents iOS auto-zoom */
  }

  /* Plan-tab strip wraps cleanly */
  .plan-tabs { gap: .25rem; }
  .plan-tab { font-size: .72rem; padding: .35rem .55rem; }

  /* Top-100 row: collapse columns + stack info */
  .companies-row {
    grid-template-columns: auto 1fr auto !important;
    gap: .35rem .5rem !important;
    padding: .55rem .7rem !important;
  }
  .ch-mcap, .companies-row .c-mcap { display: none; }   /* hide market cap on phone */
}

/* ───── Very small phones (≤380px · iPhone SE-class) ───── */
@media (max-width: 380px) {
  body { font-size: 13px; }
  .main, main { padding-left: .5rem !important; padding-right: .5rem !important; }
  .index-sun-bar { gap: .25rem !important; padding: .3rem .4rem !important; }
  .hub-pill { padding: .25rem .4rem !important; }
  .kpi-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ───── Pull-to-refresh affordance ─────
 * Visual cue when user pulls down — works alongside browser default.
 */
.main { overscroll-behavior-y: contain; }
@keyframes pwaPullSpin { to { transform: rotate(360deg); } }
.pwa-refreshing { animation: pwaPullSpin 1s linear infinite; }

/* ───── Disable hover-only interactions on touch ─────
 * Some hubs lean on :hover for tooltips. On touch device that's broken.
 */
@media (hover: none) {
  [data-tooltip]:hover::after, [data-xref-tip]:hover::after { display: none; }
}

/* ───── Tap-highlight = brand color ───── */
* { -webkit-tap-highlight-color: rgba(139, 126, 158, 0.18); }