/* ═══════════════════════════════════════════════════════════════════════════
   ברכת אליהו — shared accessibility layer (א.14.59, shared root 3).
   Loaded by the customer, driver, manager and admin shells, exactly the way
   /footer.css already is. Extends that precedent; introduces no new mechanism.

   ❗ IRON RULE FOR THIS FILE: it carries BEHAVIOUR ONLY. There is not one hex
   value in it, and there must never be one. Every colour arrives through a
   custom property that each panel defines for itself — --focus-ring and
   friends. A shared layer that starts carrying colour would quietly flatten
   four interfaces that were deliberately built to look different.
   Shared mechanism, local identity.

   Specificity is deliberately ZERO (:where()), so any existing panel rule
   still wins without needing !important anywhere.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── shared root 3 · visible keyboard focus ────────────────────────────────
   Before this, the only :focus-visible rule in the whole project lived inside
   `html.hi-vis` in the manager (manager.css:623) — i.e. a visible focus ring
   existed only for someone who had switched on high-visibility mode. In the
   normal state all four panels had none. That rule is the reference for the
   MECHANISM used here (outline + outline-offset, never box-shadow — a shadow
   is clipped by overflow:hidden, an outline is not); what changes is that it
   now applies in the normal state too, and without the !important or the
   fixed yellow, both of which belong to hi-vis and stay there. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-w, 3px) solid var(--focus-ring, currentColor);
  outline-offset: var(--focus-off, 2px);
  border-radius: inherit;
}

/* A mouse or a finger must not leave a ring behind. The browser already draws
   this distinction; this only clears the UA default for the non-keyboard case
   so the two states cannot look the same. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* ── shared root 5 · prefers-reduced-motion ────────────────────────────────
   What was there before: the customer had `* { animation-duration:.001s }`,
   which reaches ANIMATIONS ONLY — all 14 of its transitions kept running for a
   user who had explicitly asked for less motion. The driver had a hand-written
   list of four selectors. The manager and the admin had nothing at all, while
   running infinite beaRing / beaPulse loops and a 500ms fade on every one of
   twelve screen changes.

   The architect's ruling shapes this: CHANGE THE MODALITY, DO NOT REMOVE IT.
   An alert whose whole signal is the animation must not fall silent — so the
   base below is deliberately escapable, and each panel names its own alerts in
   its own file. The shared layer decides the POLICY; the panel decides what
   counts as an alert, because that is identity.

   ❗ !important is unavoidable here and is confined to this block: it has to beat
   per-element animation shorthands that were authored without it. Nowhere else
   in this file uses it. */
@media (prefers-reduced-motion: reduce) {
  :where(*, *::before, *::after) {
    /* 1ms, never 0s. A zero duration skips animationend/transitionend entirely,
       and code that waits for those events (the driver's screen cross-fade removes
       its class on animationend) would leave elements stuck mid-state. */
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  /* Markup-level escape for anything that IS an alert. Nothing uses it yet — the two
     alerts that survive today are named in their own panel's stylesheet — but it is the
     documented hook, so a future alert has one obvious way to opt out. */
  :where([data-motion="alert"]) {
    animation-duration: revert !important;
    animation-iteration-count: infinite !important;
  }
}

/* ── shared root 9 · tabular figures ───────────────────────────────────────
   A number that changes in place must not change width. Pressing + in the cart
   moved ฿180 to ฿240 and the "continue" label beside it shifted; in the admin
   the price column literally danced — measured 11.16px between "111" and "000"
   in Frank Ruhl Libre. Both fonts already CONTAIN tabular figures; nobody had
   switched them on.
   Applies to the customer and the admin only. The driver and the manager set
   their numbers in IBM Plex Mono, which is monospaced by construction — the
   measured difference there is 0px, so touching them would be noise.
   `.bea-nums` is for whatever gets written next; the numbers that already exist
   are listed in each panel's own stylesheet. */
.bea-nums, :where(.bea-nums) * {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;   /* fallback for engines that ignore the property */
}

/* ── shared root 7 · gating :hover ─────────────────────────────────────────
   ❗ There is no shared RULE here, and that is not an oversight: CSS has no way to
   share a media wrapper, so this root is one identical FORM applied in three files
   rather than one artifact. It is documented here so the form stays identical:

       @media (hover: hover) and (pointer: fine) { .selector:hover { … } }

   `(pointer: fine)` as well as `(hover: hover)`, because some tablets report hover
   through a stylus — and the kitchen tablet is exactly that kind of device.

   On a touch screen an ungated :hover STICKS after the finger lifts and does not
   clear until something else is touched, so a nav item or a table row stays
   highlighted and reads as "selected". The manager runs on a kitchen tablet and the
   admin has a dedicated tablet mode at ≤900px, so both are touch-first in practice.

   /driver is untouched and is the reference: it has zero :hover rules at all, and
   it is the panel that feels best under a finger. Whatever loses hover gets :active
   instead — with NO transition, so the feedback is instant (apple-design §1). */