/* Flat layer (owner brief, ruling F1): solid page background, solid surfaces with a hairline, the brand teal only.
   No gradients, no glass, no blur. Only small motion lives here, and all of it respects reduced motion. */
@layer flat {
  .sb-app, .sb-focus { background: var(--sb-bg); }

  .sb-display { font-size: var(--sb-fs-5xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }

  /* Hover affordance for clickable cards: a small shadow change, nothing moves. */
  .sb-lift { transition: box-shadow var(--sb-dur) var(--sb-ease); }
  @media (hover: hover) { .sb-lift:hover { box-shadow: var(--sb-shadow-md); } }

  /* Confetti overlay (core/confetti.js): a decorative canvas over the page that never takes pointer events. */
  .sb-confetti { position: fixed; inset: 0; z-index: 150; inline-size: 100%; block-size: 100%; pointer-events: none; }

  .sb-pop { animation: sb-pop var(--sb-dur-slow) var(--sb-ease); }
  @keyframes sb-pop { 50% { scale: 1.03; } }

  @media (prefers-reduced-motion: no-preference) {
    .sb-ring { animation: sb-ring-fill 900ms var(--sb-ease) both; }
    @supports (animation-timeline: view()) {
      .sb-reveal { animation: sb-fade-up linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sb-pop, .sb-ring, .sb-reveal { animation: none; }
  }
  @keyframes sb-ring-fill { from { --p: 0; } }
  @keyframes sb-fade-up { from { opacity: 0; translate: 0 12px; } }
}