@layer utilities {
  /* Programmatic visibility toggle. Prefer .is-hidden over inline
   * `style.display = "none"` — class mutations batch better in the
   * style recalc pipeline than inline-style writes (one rule resolution
   * vs one full inline style serialization per element). */
  .is-hidden {
    display: none !important;
  }

  /* Viewport-class visibility guards — mobile-only / desktop-only.
   * Threshold matches the desktop shell MQ in layout.css (1200px).
   * Use sparingly: prefer responsive components that adapt, not parallel
   * mobile + desktop markup. Reserved for shell-level chrome (e.g. nav
   * primary that appears in topbar on desktop vs drawer on mobile). */
  .is-mobile-only {
    display: revert;
  }

  .is-desktop-only {
    display: none;
  }

  @media (width >= 1200px) {
    .is-mobile-only {
      display: none;
    }

    .is-desktop-only {
      display: revert;
    }
  }

  /* Logo brightness backdrop — applied by logo_brightness_controller.js.
   * The controller tags the element with `.logo--dark` when the crest has
   * LOW perceptual luminance (e.g. Premier League, Bundesliga), and with
   * `.logo--light` when the crest has HIGH luminance (white stars on white
   * bg, etc). CSS paints a contrasting backdrop per theme so both families
   * remain legible on any surface. */

  /* Dark logos on dark themes → white backdrop */
  :root[data-theme^="dark"] .logo--dark,
  :root[data-theme^="dark"] img.logo--dark {
    background: rgb(255 255 255 / 92%);
    border-radius: 6px;
    padding: 2px;
  }

  /* Light logos on light themes → subtle dark backdrop */
  :root[data-theme^="light"] .logo--light,
  :root[data-theme^="light"] img.logo--light {
    background: rgb(15 23 42 / 10%);
    border-radius: 6px;
    padding: 2px;
  }
}