/**
 * root Design System - documentation styles: the shell's own focus ring
 *
 * Linked by `scripts/_docs-shell.mjs` on every page. For the shell's own controls only -
 * the skip link and the sidebar's links - never for anything carrying `[is]`, which the
 * foundations already draw a focus ring for. Same constraints as the rest of the shell:
 * zero CSS classes - element, `[data-part]` and attribute selectors only - zero inline
 * styles, and every value a root foundation token.
 */

/* The docs shell's own focus ring, for the shell's own controls only.
   As a bare `:focus-visible` this was unlayered and loaded after the foundations, so
   it overrode `_focus.css` for every root component on the page - including the
   fields, whose ring the foundations deliberately suppress in favour of the border
   in favour of the border. It went unnoticed because `--docs-accent` was undefined, which made the
   whole shorthand invalid and dropped it; defining that token again is what made the
   override real. Foundations own focus for anything carrying `[is]`.
   `#component-search` was the exception that proved the rule and is gone with ADR-030:
   the search is a `root-input`, and a field's focus indicator is the wrapper's border
   moving to Default 500 with the control's own ring suppressed (`_focus.css`). A ring
   added back here by id was the shell overriding a component's focus - the one thing
   this comment says the shell does not do. */
:is([data-part="skip-link"], [data-part="sidebar"] a):focus-visible {
  outline: var(--root-f--outline-width) solid
    light-dark(var(--root-c--default-400--light), var(--root-c--default-300--dark));
  outline-offset: var(--root-f--outline-offset);
  border-radius: var(--root-r--3xs);
}