/* styles/focus.css */
/* ---- the keyboard floor ---------------------------------------------------------------------
   Loaded after every page stylesheet, on purpose.

   Seven of the twelve pages style their own search box with `outline:none` and `border:0`, at a
   specificity shell.css cannot reach from where it sits in the cascade. The measured result was
   five text fields where nothing at all changed on focus: not the outline, not the border, not
   the background, not the caret. A keyboard user could not tell which field they were in.

   Page styles may restyle a control however they like. They may not take its focus ring away.
   That is what !important is for, and this is the only file in the product that uses it. A page
   added later inherits the floor without having to know about it. */

:is(a[href], button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--accent-text) !important;
  outline-offset:2px !important}

/* fields sit tighter to their ring than buttons do, and take a matching border so the shape of
   the control follows it */
:is(input, select, textarea):focus-visible{
  outline-offset:1px !important;
  border-color:color-mix(in oklab, var(--accent-text) 60%, transparent) !important}

/* on the ink surfaces the readable accent is the thing that disappears, so those take the ink's
   own foreground, which reads there by definition */
.olv-stage :is(a[href], button, input, select, textarea, [tabindex]):focus-visible,
.sidebar .nav-item.is-active:focus-visible,
.agent-chat :is(a[href], button, input, textarea):focus-visible,
.hdl-fields :is(input, textarea):focus-visible,
.olv-dk-search:focus-visible{
  outline-color:var(--ink-foreground) !important}