/* Spendly — mobile-first refinements (< 768px is the base target: §38, §52).
   Rules here tune the base experience for small screens and touch. */

@media (max-width: 767px) {
  .container { padding-inline: var(--s-4); }

  .auth { padding-inline: var(--s-4); }
  .auth-title { font-size: var(--fs-2xl); }
  .auth-card { padding: var(--s-5); }

  /* Toast sits above the bottom nav on phones. */
  .toast-region { bottom: calc(var(--nav-h) + var(--safe-b) + var(--s-3)); }
}

/* Very small phones (360px class devices) — tighten, never overflow. */
@media (max-width: 380px) {
  :root { --s-4: 14px; }
  .auth-title { font-size: var(--fs-xl); }
  .btn { padding-inline: var(--s-4); }
}

/* Touch devices: hover styles cause sticky states, so gate them out. */
@media (hover: none) {
  .btn-secondary:hover:not(:disabled) { background: var(--surface); }
  .btn-ghost:hover:not(:disabled) { background: transparent; color: var(--text-muted); }
  .btn-icon:hover { background: transparent; color: var(--text-muted); }
  a:hover { text-decoration: none; }
}

/* Landscape phones: the auth card must not be vertically clipped. */
@media (max-height: 560px) and (orientation: landscape) {
  .auth { padding-block: var(--s-6); }
  .auth-head { margin-bottom: var(--s-5); }
  .auth-head .brand-mark--lg { width: 44px; height: 44px; border-radius: 14px; }
  .auth-head .brand-mark--lg svg { width: 24px; height: 24px; }
}

/* ==========================================================
   App shell — phone refinements
   ========================================================== */

@media (max-width: 767px) {
  .stat-value { font-size: var(--fs-base); }
  .stat-card { padding: var(--s-3); }

  /* The period tabs span the full width on phones. `flex: 1 1 auto` grows each
     tab from its own text width rather than forcing equal quarters, so the row
     fills the bar exactly without "Last month" being squeezed or overflowing. */
  .dashboard-hero .period-picker {
    width: 100%;
    /* Phones fill the bar; a small tablet would otherwise stretch four tabs
       across 700px, which reads as empty rather than balanced. */
    max-width: 480px;
  }
  .dashboard-hero .period-item {
    flex: 1 1 auto;
    min-width: 0;
    /* Tight side padding so the four labels' intrinsic widths still fit a
       360px screen; flex-grow then spreads the slack back out evenly. */
    padding-inline: var(--s-1);
    text-align: center;
  }

  /* Five tabs must stay legible at 360px. */
  .nav-item { font-size: 10px; }
}

@media (max-width: 380px) {
  .nav-item .nav-label { font-size: 9.5px; }
  .balance-value { font-size: var(--fs-3xl); }
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); }
}