/*
 * Chum — iPhone / narrow-mobile alternate layout
 * Loaded with media="(max-width: 640px)" alongside theme.css.
 * Keeps the same pages and features; only layout and touch targets change.
 */

@media (max-width: 920px) {
  .page-signup .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 1.75rem;
  }
}

@media (max-width: 640px) {
  :root {
    --radius: 16px;
    --radius-lg: 20px;
  }

  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* ----- Shared chrome ----- */
  .site-nav {
    padding: 1rem 1.25rem;
    padding-top: max(1rem, env(safe-area-inset-top));
  }

  .site-nav .brand { font-size: 17px; }
  .site-nav .nav-link {
    padding: 9px 16px;
    font-size: 13px;
  }

  .page-shell,
  .page-shell-wide {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 2.5rem;
  }

  h1 { font-size: 1.75rem; line-height: 1.12; }

  .card {
    padding: 18px 16px;
    border-radius: var(--radius-lg);
  }

  .row {
    flex-direction: column;
    align-items: stretch;
  }

  .row input,
  .row textarea,
  .row select,
  .row button,
  .row a button {
    width: 100%;
    flex: none !important;
  }

  button,
  button.primary {
    min-height: 48px;
  }

  input, textarea, select {
    font-size: 16px; /* prevents iOS zoom-on-focus */
  }

  .stat { font-size: 1.65rem; }
  .stat-row { gap: 20px; }

  /* ----- Signup (matches mobile mock) ----- */
  .page-signup .site-nav {
    max-width: none;
  }

  .page-signup .hero {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    min-height: auto;
    padding: 0 1.25rem 2rem;
  }

  .page-signup .hero-copy h1 {
    max-width: none;
    font-size: clamp(2rem, 9vw, 2.35rem);
  }

  .page-signup .hero-copy .lede {
    max-width: none;
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }

  .page-signup .path-grid {
    max-width: none;
  }

  .page-signup .path-btn {
    padding: 14px 16px;
  }

  .page-signup .hero-trust {
    font-size: 12px;
    margin-top: 1rem;
  }

  /* Visual card below path cards (not above) */
  .page-signup .hero-visual {
    order: 0;
    min-height: 340px;
    border-radius: 24px;
  }

  .page-signup .visual-stat {
    width: min(200px, 52%);
  }

  .page-signup .visual-stat .pct {
    font-size: 2rem;
  }

  .page-signup .visual-loop {
    left: 16px;
    right: 16px;
    bottom: 92px;
    padding: 12px 14px;
  }

  .page-signup .visual-integrations {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 12px 14px;
  }

  .page-signup .integration-pill {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
    min-width: 120px;
  }

  .page-signup .form-stage,
  .page-signup .success-stage {
    padding: 1.25rem 1.25rem 2.5rem;
  }

  .page-signup .form-panel {
    padding: 1.5rem 1.25rem;
  }

  .page-signup .footer-link {
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }

  /* ----- Dashboard ----- */
  .page-dashboard .top-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .page-dashboard .top-bar > button {
    width: 100%;
  }

  .page-dashboard .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 5px;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
  }

  .page-dashboard .tabs::-webkit-scrollbar { display: none; }

  .page-dashboard .tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 14px;
    font-size: 12px;
  }

  .page-dashboard .card {
    overflow-x: auto;
  }

  .page-dashboard table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 100%;
  }

  /* ----- Walkthrough ----- */
  .page-walkthrough .site-nav {
    padding-left: 0;
    padding-right: 0;
  }

  .page-walkthrough .walk-intro {
    max-width: none;
    font-size: 14px;
  }

  .page-walkthrough pre {
    font-size: 11px;
  }

  /* ----- Auth / portal (login, connect result, thanks, portal) ----- */
  .page-auth .auth-wrap,
  .page-portal .portal-wrap {
    margin-top: 1.5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }

  .page-auth .card,
  .page-portal .card {
    padding: 1.5rem 1.25rem;
  }

  .page-portal .stat-row {
    justify-content: space-between;
  }
}