/* The shared keyboard focus treatment, ported from Vistazo's focusRing.ts and its control set's FIELD_BASE. Linked
   after app.css by both hosts. Controls and rows get an ink ring; text fields step their border to gray-500 with a
   soft gray-300 halo, which reads as a clean 2px border. Vistazo rejected a brand-coloured ring as too themed and an
   ink field ring as the darkest thing on screen (2026-07-21); here colour is for the logo and ink for active states.
   The variables live here rather than in tokens.css, which is frozen. */
:root {
  --hs-focus: var(--hs-text);
  --hs-focus-field-border: var(--hs-muted);
  --hs-focus-field-halo: var(--hs-line-2);
}

/* Buttons and controls that sit on their own: the ring stands 2px clear of the edge. */
.hs-focus-ring:focus-visible { outline: 2px solid var(--hs-focus); outline-offset: 2px; }

/* Rows and cells packed edge to edge, where an outside ring would be clipped or overlap a neighbour. */
.hs-focus-ring-inset:focus-visible { outline: 2px solid var(--hs-focus); outline-offset: -2px; }

/* Text fields show focus on any focus, pointer included, since the caret is what the user is looking for. A field
   inside a bordered wrapper puts this class on the wrapper and lets :focus-within carry it. The class is doubled
   because the scoped bundle loads after this file: a component's own `.input[b-…] { border-color }` ties a single
   class plus :focus and would win on order. */
.hs-focus-field:focus-visible { outline: none; }
.hs-focus-field.hs-focus-field:focus,
.hs-focus-field.hs-focus-field:focus-within {
  border-color: var(--hs-focus-field-border);
  box-shadow: 0 0 0 1px var(--hs-focus-field-halo);
}