/* ==========================================================================
   ADHD Money Compass — Responsive rules
   Desktop-first refinements down to a single-column, bottom-nav mobile app.
   ========================================================================== */

/* --- Large tablets / small laptops -------------------------------------- */
@media (max-width: 1080px) {
  .main { padding: var(--s-6) var(--s-6) calc(var(--s-9) + 24px); }
  .hero { grid-template-columns: 1fr; gap: var(--s-5); }
  .hero-side {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: var(--s-5);
    flex-direction: row; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  }
}

/* --- Mobile: sidebar becomes bottom tab bar ------------------------------ */
@media (max-width: 820px) {
  html { min-height: 100%; background: var(--bg); }

  body {
    min-height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    -webkit-tap-highlight-color: transparent;
  }

  input, select, textarea { font-size: 16px; }

  .app { grid-template-columns: 1fr; }

  .sidebar { display: none; }

  .main {
    padding: var(--s-4) var(--s-4) calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .content { gap: var(--s-5); }

  .page-title { font-size: var(--fs-xl); }

  .hero { padding: var(--s-5); border-radius: var(--r-lg); }
  .hero-actions .btn { flex: 1 1 auto; }
  .hero-side { flex-direction: column; gap: var(--s-3); }

  .zone-grid { grid-template-columns: 1fr; }

  .card { padding: var(--s-5); }

  .toast-region { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

  /* Bottom tab bar: 5 targets, all >= 44px, thumb reachable */
  .tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: var(--s-2) var(--s-2) calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
  }

  .tab-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    min-height: 52px;
    padding: var(--s-1);
    border: 0; border-radius: var(--r-md);
    background: transparent; cursor: pointer;
    font-size: 0.68rem; font-weight: 600;
    color: var(--text-2);
  }
  .tab-btn[aria-current="page"] { color: var(--sage-deep); }
  [data-theme="dark"] .tab-btn[aria-current="page"] { color: var(--sage); }
  .tab-btn .tab-icon {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: var(--r-sm);
  }
  .tab-btn[aria-current="page"] .tab-icon { background: var(--nav-active-bg); }

  /* Phase 3: header actions, filters, modal go full-width and stack */
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head-actions { width: 100%; }
  .page-head-actions .btn { flex: 1 1 auto; }
  .quick-start-card { align-items: stretch; flex-direction: column; }
  .quick-start-card .btn { width: 100%; }
  .act-filters { flex-direction: column; align-items: stretch; }
  .act-filters .seg { justify-content: space-between; }
  .act-filters .seg-btn { flex: 1 1 auto; }
  .act-filters .select { width: 100%; flex: 1 1 auto; }
  .icon-btn { width: 44px; height: 44px; } /* comfortable touch targets on phones */

  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal {
    width: 100%; max-width: 100%;
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    max-height: 92dvh;
    padding: var(--s-5);
    padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  }
  .modal-foot .btn { flex: 1 1 auto; }
  .setting-row { align-items: stretch; flex-direction: column; }
  .setting-row .seg, .setting-actions { width: 100%; }
  .setting-row .seg-btn, .setting-actions .btn { flex: 1 1 auto; }
  .onboarding-choices, .onboarding-quick-fields, .import-summary { grid-template-columns: 1fr; }
  .onboarding-choice { min-height: 148px; }
  .low-energy-actions { align-items: stretch; flex-direction: column; }
  .low-energy-buttons { width: 100%; }
  .low-energy-buttons .btn { flex: 1 1 auto; }

  .form-grid, .bill-checks, .radar-summary { grid-template-columns: 1fr; }
  .bill-card { grid-template-columns: 1fr; }
  .bill-card-side { align-items: stretch; }
  .bill-amount { font-size: var(--fs-xl); }
  .bill-actions { justify-content: flex-start; }
  .bill-actions .btn { flex: 1 1 auto; }
  .bill-view-tabs { justify-content: flex-start; }
  .cashflow-card { padding-left: var(--s-3); padding-right: var(--s-3); }
  .cashflow-slot { min-height: 190px; margin-left: -8px; margin-right: -8px; width: calc(100% + 16px); }

  .pause-hero { grid-template-columns: 1fr; gap: var(--s-5); }
  .pause-grid { grid-template-columns: 1fr; }
  .pause-card { min-height: 230px; }
  .choice-grid, .decision-grid { grid-template-columns: 1fr; }
  .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .impact-tile { min-height: 76px; padding: var(--s-3); }
  .impact-note { margin-bottom: var(--s-4); }
  .decision-grid .decision-card:last-child:nth-child(odd) { grid-column: auto; }
  .pause-actions .btn { min-height: var(--touch); }

  .goal-feature, .reset-hero { grid-template-columns: 1fr; gap: var(--s-5); }
  .goal-grid, .progress-grid { grid-template-columns: 1fr; }
  .milestone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reset-info-grid { grid-template-columns: 1fr; }
  .goal-feature-progress { justify-content: flex-start; }
  .goal-checks { grid-template-columns: 1fr; }

  .pwa-sheet-backdrop { padding: 0; }
  .pwa-sheet {
    width: 100%;
    max-width: none;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  }
}

@media (display-mode: standalone) {
  .main { padding-top: calc(var(--s-4) + env(safe-area-inset-top, 0px)); }
  .tabbar { padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); }
  .home-install-action { display: none; }
}

/* --- Narrow phones -------------------------------------------------------- */
@media (max-width: 380px) {
  .hero-amount { font-size: 2.4rem; }
  .hero-actions { flex-direction: column; }
  .pause-hero-main { align-items: flex-start; }
  .pause-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pause-hero-stats > div { padding: var(--s-3) var(--s-2); }
  .pause-hero-stats strong { font-size: var(--fs-lg); }
  .pause-hero-stats span { font-size: 0.68rem; line-height: 1.25; }
  .home-momentum-layout { grid-template-columns: 1fr; }
  .home-momentum-layout > div:first-child { justify-self: center; }
  .goal-feature-progress, .goal-card-body, .momentum-card { align-items: flex-start; }
  .goal-feature-progress { flex-direction: column; }
  .goal-color-choices { grid-template-columns: repeat(2, 1fr); }
  .milestone-grid, .reset-info-grid { grid-template-columns: 1fr; }
  .reset-steps div { padding: var(--s-4) var(--s-1); }
}