/* Layered important rules override the theme's unlayered outline resets. */
@layer keyboard-focus {
  html:not([data-focus-modality=pointer]) :focus-visible {
    outline: 3px solid #2d2a26 !important;
    outline-offset: 2px !important;
    /* The white inner ring keeps focus visible against dark backgrounds. */
    box-shadow: 0 0 0 2px #fff !important;
  }
  /* Mouse/touch focus keeps the control's own styles without a keyboard ring. */
  html[data-focus-modality=pointer] :focus,
  html[data-focus-modality=pointer] input:focus + label {
    outline: none !important;
  }
  @media (forced-colors: active) {
    html:not([data-focus-modality=pointer]) :focus-visible {
      outline-color: Highlight !important;
      box-shadow: none !important;
    }
  }
}