/* THE SHARED LIBRARY'S OWN STYLESHEET.
 *
 * Story st-ka7jtjdf, epic ep-b59f9ay0 ("The shared library drawn with no MUI").
 * Every control the library draws with its own code is dressed here, and every
 * host that draws a library name links this file once in its <head>. It takes
 * over the head's job from emotion's server extraction (`renderStyled`), before
 * any control depends on it: a server-drawn page is styled by a stylesheet the
 * browser already has, and nothing is extracted per request.
 *
 * TOKENS ONLY (round ui-component-library D23). Every colour, space, size,
 * radius, shadow, type step and motion timing below is a `var(--...)` that
 * arc-design defines in tokens.css; a literal is a defect, and
 * arc-design's contract test sweeps this file for literals and for names
 * nothing defines.
 *
 * ONE LAYER, BELOW EVERYTHING ELSE. The rules sit in `@layer library`, and a
 * layered rule loses to any unlayered one whatever its specificity: the
 * library's defaults never outrank site.css or a module's own sheet, which is
 * the order a host already expects of a component's look.
 *
 * Rules arrive with the stories that move each control onto our own drawing;
 * a selector here names only what the library itself draws.
 */

@layer library {
  /* THE ONE FOCUS RING. control.focus.* is the platform's ring (WCAG 2.2 SC
   * 2.4.11, 3:1 against both grounds), and a control the library draws wears
   * it the same way site.css's own controls do, on keyboard focus only. */
  [data-library-control]:focus-visible {
    outline: var(--control-focus-width) solid var(--control-focus-ring);
    outline-offset: var(--control-focus-offset);
  }
}