/* Mobile-QA safety net.
 * Applies after each page's own <style> block. Catches the common breakages
 * that show up on 320–414px screens: horizontal overflow, fixed-pixel widths,
 * unreadable monospace, sticky elements eating content, etc.
 */

/* Never let horizontal scroll appear on the document */
html, body { max-width: 100%; overflow-x: hidden; }

/* Make all images, iframes, embeds shrink to container */
img, video, iframe, embed { max-width: 100%; height: auto; }

/* Tables that contain wide data get a scroll container instead of overflowing the page */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  table { font-size: 12px; }
  th, td { padding: 8px 9px !important; }
}

/* Hero blocks: prevent text from pushing wider than viewport, but
 * DO NOT override the size — let each page keep its own h1 sizing.
 * Hyphens removed because they produced ugly mid-word breaks. */
@media (max-width: 640px) {
  .hero h1, h1 { word-wrap: break-word; overflow-wrap: break-word; }
  .hero .meta { flex-wrap: wrap; }
}

/* Forms — full width on small screens, comfortable tap targets */
@media (max-width: 640px) {
  input, select, textarea, .btn, button { min-height: 40px; }
  .form-row { grid-template-columns: 1fr !important; }
  .form-grid { grid-template-columns: 1fr !important; }
}

/* Hide the legacy "always-visible" cookie banner overlap on tiny screens */
@media (max-width: 480px) {
  .asteria-cookie { left: 8px !important; right: 8px !important; bottom: 8px !important; padding: 12px 14px !important; }
  .asteria-cookie h3 { font-size: 14px !important; }
}

/* Sticky topbar shouldn't eat too much vertical space */
@media (max-width: 640px) {
  .topbar { padding: 8px 12px !important; gap: 8px !important; }
}

/* Page-specific overrides that resolve issues found in audit */
@media (max-width: 640px) {
  .grid.two, .grid:not(.two), .layout, .plans, .strategies, .exchanges, .hero-grid, .hero-stats, .upgrade-grid, .form-row, .review-grid, .api-help, .path-grid {
    grid-template-columns: 1fr !important;
  }
  .hero { padding: 18px !important; }
  /* Do NOT globally clamp h1 — pages set their own size. The clamp rule that
   * was here previously made every h1 max 32px on mobile, which clobbered
   * intended sizes (44px on landing hero, 36px on legal pages). */
  .topbar .spacer + .btn { font-size: 11px; padding: 7px 10px; }
  .nav-tabs { width: 100% !important; overflow-x: auto !important; }
  .nav-tabs a { white-space: nowrap; }
  /* Floating theme toggle would otherwise hide content on tiny screens */
  .theme-toggle { width: 38px; height: 38px; right: 12px; bottom: 12px; }
}

/* Make any "code" block scrollable instead of overflowing */
code, pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }

/* Steps lists used in onboarding/live-activation should stack steps cleanly */
@media (max-width: 640px) {
  .step { grid-template-columns: 28px 1fr !important; }
  .step .badge { grid-column: 2; justify-self: start; margin-top: 6px; }
  .actions { flex-direction: column; }
  .actions .btn { width: 100%; }
}

/* Onboarding (the heaviest page) — collapse the 2-col layout cleanly */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr !important; }
  .grid { grid-template-columns: 1fr !important; }
  .summary { position: static !important; }
}

/* 2026-05-25 mobile pass: make the static MVP feel intentional on phones,
 * not merely squeezed. These rules sit last and override per-page inline CSS. */
@media (max-width: 900px) {
  :root { --mobile-gutter: 14px; }

  body {
    min-width: 0 !important;
    -webkit-text-size-adjust: 100%;
  }

  .page,
  .main,
  .shell,
  .wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }

  section {
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }

  .nav,
  .topbar {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    overflow: visible !important;
  }

  .logo {
    min-width: 0 !important;
    max-width: calc(100vw - 150px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .nav .spacer,
  .topbar .spacer {
    flex: 1 1 auto !important;
    min-width: 4px !important;
  }

  .nav > .btn,
  .nav > .nav-btn,
  .topbar > .btn,
  .topbar > .back {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    padding: 9px 11px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .nav > .btn:not(.primary):not(.dark),
  .nav > .nav-btn:not(.primary),
  .topbar > .btn:not(.primary):not(.dark) {
    display: none !important;
  }

  .nav[data-asteria-fallback-nav] .nav-links,
  .nav-tabs,
  .admin-nav {
    order: 10 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px 0 8px !important;
    background: transparent !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav[data-asteria-fallback-nav] .nav-links::-webkit-scrollbar,
  .nav-tabs::-webkit-scrollbar,
  .admin-nav::-webkit-scrollbar,
  .pill-row::-webkit-scrollbar,
  .variant-filter-row::-webkit-scrollbar {
    display: none;
  }

  .nav[data-asteria-fallback-nav] .nav-links a,
  .nav-tabs a,
  .admin-nav a,
  .pill,
  .variant-filter-row button {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
  }

  .mobile-menu { z-index: 80 !important; }
  .mobile-menu-panel {
    left: 0 !important;
    right: auto !important;
    max-width: calc(100vw - 24px) !important;
  }

  .hero,
  .hero-inner,
  .hero-grid,
  .content,
  .returns,
  .runner-grid,
  .equity-layout,
  .equity-head,
  .catalog-grid,
  .main-grid,
  .formula-strip,
  .security-strip,
  .connect-guide,
  .simple-grid,
  .flow-grid,
  .plans,
  .strategies,
  .review-grid,
  .api-help,
  .path-grid,
  .families,
  .layout,
  .grid,
  .grid.two {
    grid-template-columns: 1fr !important;
  }

  .section-title,
  .section-head,
  .chart-head,
  .card-head {
    display: block !important;
  }

  .section-title p,
  .section-head p,
  .chart-head p {
    margin-top: 6px !important;
  }

  .toolbar,
  .variant-filter-top {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .pill-row,
  .variant-filter-row,
  .chart-legend,
  .chart-tools,
  .safe-line,
  .hero-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 8px !important;
    padding-bottom: 3px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .hero-actions .btn,
  .safe-line span,
  .chart-tools > *,
  .chart-legend > * {
    flex: 0 0 auto !important;
  }

  .hero-main,
  .hero-stat,
  .launch-card,
  .progress-card,
  .panel,
  .card,
  .strategy-card,
  .guide-panel,
  .permission-card,
  .model-card,
  .formula {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero h1,
  h1 {
    line-height: 1.06 !important;
    letter-spacing: -0.7px !important;
  }

  .lead,
  .hero-main p,
  .hero p {
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  :root { --mobile-gutter: 12px; }

  .nav,
  .topbar {
    position: sticky !important;
    top: 0 !important;
  }

  .page,
  .main,
  .shell {
    padding-top: 16px !important;
    padding-bottom: 58px !important;
  }

  .hero {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 16px !important;
    padding: 20px 16px !important;
  }

  .hero-main,
  .hero-stat,
  .launch-card,
  .progress-card,
  .panel {
    padding: 16px !important;
  }

  .strategy-card {
    min-height: 0 !important;
  }

  .card-cover {
    height: 92px !important;
  }

  .strategy-inner {
    padding: 15px !important;
  }

  .strategy-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .strategy-top h3 {
    font-size: 19px !important;
  }

  .strategy-top p,
  .strategy-card p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .strategy-top span,
  .strategy-top .profile-badge,
  .result-badge,
  .status-badge {
    width: fit-content !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .result-primary {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .result-primary strong {
    font-size: 34px !important;
    line-height: 0.98 !important;
  }

  .result-oss,
  .price-note,
  .variant-filter-meta,
  .selected-variant.active {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    text-align: left !important;
  }

  .result-oss span,
  .price-note em {
    text-align: left !important;
  }

  .result-grid,
  .mini-stats,
  .paper-monitor,
  .metric-grid,
  .hero-stats,
  .facts,
  .asset-grid,
  .audit-grid,
  .variant-facts,
  .checks {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .variant-grid {
    grid-template-columns: 1fr !important;
  }

  .actions,
  .strategy-actions,
  .modal-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .actions .btn,
  .strategy-actions .btn,
  .modal-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .selected-variant strong,
  .price {
    white-space: normal !important;
  }

  .runner-board,
  .equity-board,
  .returns {
    margin-left: calc(var(--mobile-gutter) * -1) !important;
    margin-right: calc(var(--mobile-gutter) * -1) !important;
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }

  .equity-chart,
  .runner-chart,
  .chart {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .equity-chart svg,
  #equityChart {
    width: 840px !important;
    min-width: 840px !important;
    max-width: none !important;
  }

  .runner-chart svg,
  #runnerChart {
    width: 900px !important;
    min-width: 900px !important;
    max-width: none !important;
  }

  .chart-tooltip,
  .equity-tooltip {
    left: 10px !important;
    right: auto !important;
    top: 10px !important;
    max-width: calc(100vw - 44px) !important;
    font-size: 11px !important;
  }

  .ticker-control {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .ticker-select {
    min-width: 140px !important;
    flex: 1 1 auto !important;
  }

  .table-wrap {
    margin-left: calc(var(--mobile-gutter) * -1) !important;
    margin-right: calc(var(--mobile-gutter) * -1) !important;
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }

  .table-wrap table {
    min-width: 680px !important;
  }

  .account-pill {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .theme-toggle {
    width: 42px !important;
    height: 42px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 90 !important;
  }

  footer {
    padding: 24px 58px 28px 14px !important;
    text-align: left !important;
  }
}

@media (max-width: 430px) {
  :root { --mobile-gutter: 10px; }

  .nav > .btn.primary,
  .nav > .nav-btn.primary,
  .topbar > .btn.primary {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .mobile-menu summary {
    min-height: 40px !important;
  }

  h1 {
    font-size: 32px !important;
  }

  .hero h1,
  .hero-main h1 {
    font-size: 32px !important;
  }

  .result-grid,
  .mini-stats,
  .paper-monitor,
  .metric-grid,
  .hero-stats,
  .facts,
  .asset-grid,
  .audit-grid,
  .variant-facts,
  .checks,
  .ex-grid,
  .exchanges {
    grid-template-columns: 1fr !important;
  }

  .actions,
  .strategy-actions,
  .modal-actions {
    grid-template-columns: 1fr !important;
  }

  .steps {
    grid-template-columns: repeat(5, minmax(42px, 1fr)) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .step-row {
    min-width: 42px !important;
  }

  .field input,
  .field select,
  input,
  select,
  textarea {
    font-size: 16px !important; /* prevents iOS zoom */
  }

  .card-cover {
    height: 86px !important;
  }

  .result-primary strong {
    font-size: 31px !important;
  }

  .price-note strong,
  .select-card .price {
    font-size: 25px !important;
  }

  .equity-chart svg,
  #equityChart {
    width: 760px !important;
    min-width: 760px !important;
  }

  .runner-chart svg,
  #runnerChart {
    width: 820px !important;
    min-width: 820px !important;
  }
}


/* Auth pages are intentionally distraction-free: logo, alternate auth path, and a separate close control. */
.auth-topbar{position:relative!important}
.auth-topbar .link:first-of-type{display:inline-flex!important}
.auth-topbar .theme-toggle{display:none!important}
.auth-topbar .auth-close{
  position:fixed!important;
  left:28px!important;
  top:78px!important;
  z-index:40!important;
  width:38px!important;
  height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #dbe0e7!important;
  background:#fff!important;
  color:#374151!important;
  font-size:24px!important;
  line-height:1!important;
  font-weight:400!important;
  text-decoration:none!important;
  box-shadow:0 8px 20px rgba(15,23,42,.08)!important;
}
.auth-topbar .auth-close:hover{background:#f3f4f6!important;color:#111827!important}
html[data-theme="dark"] .auth-topbar .auth-close{background:#111827!important;border-color:#334155!important;color:#e5e7eb!important}
html[data-theme="dark"] .auth-topbar .auth-close:hover{background:#1e293b!important;color:#fff!important}
@media(max-width:560px){
  .auth-topbar{gap:10px!important;padding:0 12px!important}
  .auth-topbar .logo{font-size:15px!important}
  .auth-topbar .link{font-size:12px!important}
  .auth-topbar .auth-close{left:14px!important;top:68px!important;width:34px!important;height:34px!important;font-size:21px!important}
}

.auth-topbar .auth-close{width:38px!important;height:38px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border:1px solid #dbe0e7!important;background:#fff!important;color:#374151!important;font-size:22px!important;line-height:1!important;font-weight:400!important;text-decoration:none!important}
.auth-topbar .auth-close:hover{background:#f3f4f6!important;color:#111827!important}
html[data-theme="dark"] .auth-topbar .auth-close{background:#111827!important;border-color:#334155!important;color:#e5e7eb!important}
html[data-theme="dark"] .auth-topbar .auth-close:hover{background:#1e293b!important;color:#fff!important}
@media(max-width:560px){.auth-topbar .auth-close{width:34px!important;height:34px!important;font-size:20px!important}}