/* The home dashboard: a light hero, big-number stat cards, two columns. */
@layer reset, tokens, base, layout, components, utilities, print;

@layer components {
  .hero { margin-block: var(--space-5) var(--space-4); }
  .hero h1 { margin-top: var(--space-1); }
  .hero-eyebrow { margin: 0; color: var(--muted); font-size: var(--text-sm); }

  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-4); margin-block: var(--space-4); }
  .stat { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; text-decoration: none; color: var(--ink);
          transition: transform .15s, box-shadow .15s; }
  .stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
  .stat-label { font-size: var(--text-sm); color: var(--muted); }
  .stat-value { font-size: var(--text-2xl); font-weight: var(--weight-light); line-height: 1; font-variant-numeric: tabular-nums; }

  .dashboard { display: grid; gap: 0 var(--space-5); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 52rem) { .dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

  .attention-list { list-style: none; padding: 0; margin: 0; }
  .attention-list li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) 0 var(--space-2) var(--space-4);
                       border-bottom: 1px solid var(--line); position: relative; font-size: var(--text-sm); }
  .attention-list li:last-child { border-bottom: none; }
  .attention-list li::before { content: ""; position: absolute; left: 0; top: 1rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--sheen); }

  .push-right { margin-left: auto; }
  .account { margin-top: var(--space-6); }
}