/* ============================================================
 * CSS cascade layer order — single source of truth for TRK-400.
 *
 * Precedence (rightmost wins): reset < platform < theme < module < view.
 *   reset     — universal resets (this file)
 *   platform  — structural tokens + primitive shapes (01-tokens, 05-icon-btn, …)
 *   theme     — palette + brand overlay (02-theme-dark, themes.css body.theme-*)
 *   module    — state classes on platform primitives (.is-selected, .is-active, …)
 *   view      — page-specific ad-hoc overrides (30-home, 31-accounts, 40-*, …)
 *
 * Rules NOT inside an @layer {} block live in the implicit anonymous layer
 * which has HIGHER precedence than ANY declared layer. Existing files stay
 * in anonymous and keep current behavior; incremental waves migrate each
 * file into its appropriate layer. See docs/plan/ui-zero-duplication-2026-04-23.md §3.A.
 * ============================================================ */
@layer reset, platform, theme, module, view;

@layer reset {
  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* TRK-395 — make `el.hidden = true` reliably hide elements even when their
     author CSS sets `display: flex/grid/block` explicitly. The default UA
     `[hidden] { display: none }` rule loses to author rules at equal
     specificity (origin: Author > UA). Without this, e.g. `.training-nav
     { display: flex }` would override the hidden attribute. The `!important`
     is the canonical pattern (matches app/next/css/shell.css line 4) — one
     defensive rule that retires dozens of `el.style.display = 'none'` writes
     across the codebase. */
  [hidden] { display: none !important; }
}