/* ════════════════════════════════════════════════════════════════════════════
 *  Dashboard — mobile sheet (≤900px)
 *
 *  Mirrors css/dashboard.desktop.css selectors. Mobile-only compaction:
 *    - single-column section grid (collapses desktop's 4/3/2-col layout)
 *    - tighter section / tile / placeholder padding
 *    - smaller section-title scale (--fs-lg vs desktop --fs-2xl)
 *    - 44px minimum touch target on every tappable surface (WCAG 2.5.5)
 *    - data-span overrides collapse to full width
 *
 *  Loaded conditionally via:
 *    <link rel="stylesheet" href="css/dashboard.mobile.css"
 *          media="(max-width: 900px)">
 *
 *  Per LifeOS convention, the <link media> attribute is the gate; this file
 *  contains NO inner `@media (max-width: …)` wrapper (mobile_ui lesson
 *  2026-05-08: redundant double-gate confuses loading semantics).
 *
 *  All values via var(--*) from css/app.css :root. Allowed raw values:
 *    - 44px   touch-target floor (Apple HIG / WCAG 2.5.5 invariant — not a
 *             brand value, not tokenizable)
 *    - 0      identity zero (margin/padding resets)
 *    - 1fr    grid track size (CSS-grid keyword, not a brand value)
 *
 *  Created 2026-05-09 (Dashboard Life-Area sections, task uilKAaHOELz6I39gXNSIW).
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Section host ────────────────────────────────────────────────────── */

.dashboard-section {
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* ─── Section title (compacted typography + accent stripe) ────────────── */

.dashboard-section__title {
  font-size: var(--fs-lg);
  margin: 0 0 var(--sp-2) 0;
  padding-bottom: var(--sp-2);
  line-height: var(--lh-tight);
  min-height: 44px;
}

.dashboard-section__title::after {
  width: var(--sp-6);
  margin-top: var(--sp-1);
}

/* ─── Section body grid (collapse to single column) ───────────────────── */

.dashboard-section__grid {
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

/* All span requests collapse to full width on mobile (1-col grid means
 * span-2 / span-4 / span-full are all functionally identical). */
.dashboard-section__grid > [data-span="2"],
.dashboard-section__grid > [data-span="4"],
.dashboard-section__grid > [data-span="full"] {
  grid-column: 1 / -1;
}

/* ─── Per-tile (children of .dashboard-section__grid) ─────────────────── */

.dashboard-section__grid > .dashboard-card {
  padding: var(--sp-3);
  min-height: 44px;
}

.dashboard-section__grid > .dashboard-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Every tappable child of a tile must satisfy the 44px touch-target floor. */
.dashboard-section__grid > .dashboard-card button,
.dashboard-section__grid > .dashboard-card a,
.dashboard-section__grid > .dashboard-card [role="button"] {
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
}

/* ─── Empty-state placeholder (light Life-Area sections — AC-8) ───────── */

.dashboard-section__placeholder {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  min-height: 44px;
}

/* ─── Save Up Top 3 tile — mobile compaction (AC-4) ───────────────────── */

.fin-tile-save-up-top3 .goal-mini {
  min-height: 44px;
  padding: var(--sp-2) 0;
  gap: var(--sp-2);
}

.fin-tile-save-up-top3 .goal-mini .name {
  /* Ellipsis truncation keeps the right-side amount visible on 375px. */
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fin-tile-save-up-top3 .goal-mini .amt {
  flex: 0 0 auto;
}

/* ─── Top + stats slots (AC-2 — outside Life-Area sections) ───────────── */

.dashboard-area-top,
.dashboard-area-stats {
  margin-bottom: var(--sp-4);
}

.dashboard-area-stats {
  grid-template-columns: 1fr;
  gap: var(--sp-2);
}