/* Spendly — tablet and desktop layers (§39, §52).
   Desktop is a deliberate re-layout, not a stretched phone UI. */

/* The marketing column is hidden below the desktop breakpoint; the rule sits
   before the media queries so the @media override wins. */
.auth-aside { display: none; }

/* ---------- Tablet: 768–1024px ---------- */
@media (min-width: 768px) {
  .container { padding-inline: var(--s-6); }

  /* Sheets become centred dialogs once there is room. */
  .sheet {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(520px, calc(100vw - var(--s-12)));
    max-height: min(86dvh, 760px);
    transform: translate(-50%, -50%);
    border-radius: var(--r-xl);
    animation: scale-in var(--t-base) var(--ease-out-back) both;
  }
  .sheet.is-leaving { animation: scale-out var(--t-fast) var(--ease) both; }
  .sheet-grabber { display: none; }
  .sheet-head { padding-top: var(--s-5); }
  .sheet-foot { padding-bottom: var(--s-4); }

  .toast-region {
    left: auto;
    right: var(--s-6);
    bottom: var(--s-6);
    transform: none;
  }

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

/* ---------- Desktop: > 1024px ---------- */
@media (min-width: 1025px) {
  .container { padding-inline: var(--s-8); }

  /* Desktop drops the status-bar artwork for soft brand glows: there is no
     status bar to bleed into, and the split layout needs a light field. */
  .app-backdrop { display: none; }

  .auth::before,
  .auth::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
    pointer-events: none;
  }
  .auth::before {
    width: 360px; height: 360px;
    top: -140px; right: -120px;
    background: var(--purple-300);
  }
  .auth::after {
    width: 300px; height: 300px;
    bottom: -150px; left: -130px;
    background: var(--purple-100);
  }
  :root[data-theme="dark"] .auth::before { opacity: 0.26; }
  :root[data-theme="dark"] .auth::after { opacity: 0.15; background: var(--purple-500); }

  /* The dashboard hero becomes a contained banner rather than a full bleed. */
  .app-hero {
    padding-top: var(--s-8);
    padding-bottom: var(--s-12);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
  }

  /* Split auth: brand story on the left, form on the right. */
  .auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--s-12);
    padding: var(--s-12);
    max-width: 1160px;
    margin-inline: auto;
  }
  .auth-aside { position: relative; z-index: 1; display: block; }
  .auth-inner { margin: 0; }
  .auth-head { text-align: left; }
  .auth-head .brand-mark--lg { margin-inline: 0; }
}

.auth-aside .auth-pitch {
  font-size: var(--fs-4xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.auth-aside .auth-pitch em {
  font-style: normal;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.auth-aside .auth-pitch-sub {
  margin-top: var(--s-4);
  max-width: 42ch;
  font-size: var(--fs-lg);
  color: var(--text-muted);
}
.auth-aside .feature-list { margin-top: var(--s-10); max-width: 40ch; }

/* ==========================================================
   App shell — tablet
   ========================================================== */

@media (min-width: 768px) {
  .stat-row { gap: var(--s-4); }
  .stat-value { font-size: var(--fs-lg); }

  .donut-card {
    grid-template-columns: 200px 1fr;
    align-items: center;
    gap: var(--s-6);
  }
  .donut-wrap { width: 200px; }

  .fab { right: var(--s-6); bottom: calc(var(--nav-h) + var(--safe-b) + var(--s-5)); }

  .analytics-summary { flex-direction: row; align-items: center; justify-content: space-between; }
  .analytics-metrics {
    border-top: none;
    border-left: 1px solid var(--border);
    padding-top: 0;
    padding-left: var(--s-6);
    gap: var(--s-6);
  }
}

/* ==========================================================
   App shell — desktop: sidebar replaces the bottom navigation (§39)
   ========================================================== */

@media (min-width: 1025px) {
  .app-root { display: block; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: var(--z-nav);
    display: flex;
    flex-direction: column;
    width: var(--sidebar-w);
    padding: var(--s-6) var(--s-4);
    background: var(--surface);
    border-right: 1px solid var(--border);
  }

  .bottom-nav,
  .fab { display: none; }

  .app-shell {
    margin-left: var(--sidebar-w);
    padding-bottom: var(--s-10);
  }

  /* Desktop is a dashboard, not a stretched phone: cap the reading width. */
  .container { max-width: 1080px; }

  .app-hero { padding-top: var(--s-8); }
  .screen-head { padding-top: var(--s-8); }

  .balance-value { font-size: 3.25rem; }

  /* Dashboard becomes a two-column grid below the balance card. */
  .app-body > .section,
  .app-body-flat > .section { margin-top: var(--s-8); }

  .tx-row { padding: var(--s-4) var(--s-5); }

  .search-row { max-width: 640px; }

  .onboard {
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - var(--s-12)));
    height: min(640px, calc(100dvh - var(--s-12)));
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
  }
  .onboard-overlay { background: var(--scrim); }
}

/* Wide desktop: give the dashboard a real two-column layout. */
@media (min-width: 1280px) {
  .dashboard-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--s-6);
    align-items: start;
  }
}