/**
 * Staff UI breakpoints — single source of truth
 * ---------------------------------------------
 * Keep @media (max-width: …px) values across the codebase aligned with these
 * numbers. CSS cannot reliably use var() in @media in all target browsers, so
 * duplicate the literal px values in rules (grep for 1024 / 768 / 480).
 *
 * | Value | Role |
 * |-------|------|
 * | 1024px | Nav: fixed sidebar → overlay / hamburger; main column full width |
 * | 768px | “Mobile” layouts: stacked sections, touch-oriented controls |
 * | 480px | Small phones: tighter padding, single-column grids |
 *
 * Typical files: public/css/mobile.css, mobile-enhancements.css,
 * public/css/components/adminnav.css, public/css/admin/panel.css,
 * public/css/admin/events.css, public/css/admin/usersettings.css, etc.
 *
 * Audit when changing layouts: `rg "1024|768|480" public/css` (spot drift).
 */
:root {
  /* Reference only — use literals in @media until the build supports @custom-media */
  --staff-bp-layout: 1024px;
  --staff-bp-md: 768px;
  --staff-bp-sm: 480px;
}