/* ==========================================================
   Gamepad/controller focus ring.

   Scoped entirely behind html[data-input-mode="gamepad"], which
   gamepad-nav.js toggles based on real input activity. Mouse/touch/
   keyboard behaviour and every existing :focus/:hover style in
   styles.css and script.js's inline styles is completely untouched -
   this file adds a highlight, it never removes one.

   The color is a warm gold that reads clearly against all three of
   the app's existing themes (light "MAC" admin screens, the dark
   green kiosk theme, and the dark "EXEC" command-centre theme) - see
   MAC/TOKENS/EXEC in script.js. Tweak --gp-ring / --gp-ring-glow
   below to restyle it app-wide from one place.
   ========================================================== */
:root {
  --gp-ring: #FFC542;
  --gp-ring-glow: rgba(255, 197, 66, 0.5);
}

/* !important is deliberate and narrowly scoped: a handful of inputs
   in script.js set outline:"none" inline (to suppress the default
   browser ring under their own custom focus styling), and inline
   styles otherwise beat a plain attribute-selector rule. This only
   ever applies while data-input-mode="gamepad" is set. */
html[data-input-mode="gamepad"] :focus {
  outline: 3px solid var(--gp-ring) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--gp-ring-glow) !important;
  transition: outline-color 0.12s ease, box-shadow 0.12s ease;
}

/* Checkboxes/radios/date inputs render their own tiny native control -
   a 2px offset ring on tiny controls reads as a highlight of the whole
   row instead, so give those a tighter ring. */
html[data-input-mode="gamepad"] input[type="checkbox"]:focus,
html[data-input-mode="gamepad"] input[type="radio"]:focus {
  outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--gp-ring-glow) !important;
}