/* ============================================================================
   om-base.css — reset, RTL defaults, numeric isolation, the keyframe
   vocabulary, skeleton, stagger and the reduced-motion collapse.

   Source: docs/design-system/kit/tokens/base.css, minus its render-blocking
   Font Awesome CSS import (FA 6 is already CDN-linked by
   layouts/partials/_head.blade.php) and plus the om-nudge-right keyframe that
   kit/css/controls.css:16 animates but no kit file declared.

   Also minus kit/tokens/base.css:23's `border-radius` in the :focus-visible
   rule, for the reason design-tokens.css dropped it in e0ee8d16.
   FocusIndicatorTest enforces that across every file in public/css/.

   CONSUMES tokens from om-tokens.css. DECLARES none (spec §3.3).

   LINKED IN PHASE 3, not Phase 1: the reset (list-style, button, heading
   margins) needs the om-kit.css component layer to land with it. It now loads
   from layouts/partials/_head.blade.php on every shelled route, and separately
   from auth/login.blade.php and patient-booking/layout.blade.php — those two are
   standalone documents that never include _head, and the :focus-visible rule
   below is the only source of the 4px ring on them.
   ============================================================================ */

/* ============================================================
   BASE — Font Awesome, RTL defaults, resets, link colours and
   every keyframe the micro-interaction system depends on.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg-base);color:var(--ink);font-family:var(--font-sans);
  font-size:var(--fs-base);line-height:var(--lh-base);letter-spacing:var(--ls-base);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background var(--motion-base) var(--ease-out),color var(--motion-base) var(--ease-out)}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
h1,h2,h3,h4,h5,h6{color:var(--ink);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
img,svg,video{display:block;max-width:100%}
/* The UA sheet's `[hidden]{display:none}` is specificity (0,1,0) and non-important,
   so ANY author class that declares display beats it: `.om-scrim{display:grid}`
   would paint a closed <x-modal> as a full-screen click-catching sheet. Bootstrap's
   reboot ships this exact !important form; the om layer must not depend on Bootstrap
   being on the page. Every overlay that hides via the `hidden` attribute needs it. */
[hidden]{display:none !important}
table{border-collapse:collapse;border-spacing:0}
a{color:var(--text-link);text-decoration:none;transition:var(--t-color)}
/* A control is not a link: (0,1,1) beat every button variant's (0,1,0). */
a:where(:not(.om-btn,.om-iconbtn,.om-menuitem,.btn)):hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:var(--space-05)}
/* The app's focus ring is 4px for WCAG AAA. Never shrink it; never add
   border-radius (it would rewrite the focused element's own corners). */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--shadow-ring)}
/* Windows High Contrast / forced-colors DISCARDS box-shadow, so the rule above
   leaves `outline:none` and nothing else — no focus indicator at all. Restore a
   real outline in the system Highlight colour (forced-colors ignores authored
   colours anyway). Must stay AFTER the rule it repairs. */
@media (forced-colors:active){a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid Highlight;outline-offset:2px}}
::selection{background:var(--blue-a24);color:var(--ink)}
::placeholder{color:var(--text-placeholder)}

/* ---- RTL is the default. The product is Arabic. ---- */
[dir="rtl"] .om-flip{transform:scaleX(-1)}

/* Latin numerals inside Arabic text: times, money, MRNs, vitals, queue
   numbers. Always tabular, always LTR, so digits never reorder. */
.om-num,[data-numeric]{font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:var(--numeric-tabular);direction:ltr;unicode-bidi:isolate}
.om-mono{font-family:var(--font-mono);direction:ltr;unicode-bidi:isolate}

/* Scrollbars: thin, neutral. */
.om-scroll{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.om-scroll::-webkit-scrollbar{width:var(--space-15);height:var(--space-15)}
.om-scroll::-webkit-scrollbar-track{background:transparent}
.om-scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-pill)}

/* Ink colour utilities — for a single glyph that must carry a status hue. */
.om-ink-success{color:var(--success) !important}
.om-ink-warning{color:var(--warning) !important}
.om-ink-danger{color:var(--danger) !important}
.om-ink-info{color:var(--info) !important}
.om-ink-brand{color:var(--primary) !important}

.om-visually-hidden{position:absolute;width:var(--hairline);height:var(--hairline);padding:0;margin:calc(var(--hairline) * -1);overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- KEYFRAMES: the micro-interaction vocabulary ----
   Names prefixed om- are new; the four at the end are the app's own
   animations, reproduced verbatim so existing markup keeps working. */
@keyframes om-fade-in{from{opacity:0}to{opacity:1}}
@keyframes om-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes om-rise-sm{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes om-pop{0%{opacity:0;transform:scale(.94)}60%{opacity:1;transform:scale(1.01)}100%{transform:scale(1)}}
@keyframes om-shimmer{from{background-position:-160% 0}to{background-position:260% 0}}
@keyframes om-spin{to{transform:rotate(360deg)}}
@keyframes om-breathe{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes om-glow-breathe{0%,100%{box-shadow:0 2px 10px -2px var(--blue-a32)}50%{box-shadow:0 8px 26px -4px var(--blue-a60)}}
@keyframes om-pulse-ring{0%{box-shadow:0 0 0 0 var(--blue-a45)}70%{box-shadow:0 0 0 10px rgba(51,124,236,0)}100%{box-shadow:0 0 0 0 rgba(51,124,236,0)}}
@keyframes om-sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes om-count-tick{0%{transform:translateY(40%);opacity:0}100%{transform:none;opacity:1}}
@keyframes om-dash{to{stroke-dashoffset:0}}
@keyframes om-progress-stripe{to{background-position:24px 0}}
/* RTL-aware nudge: moves toward the inline-start (leftwards in Arabic). */
@keyframes om-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}
/* Mirror of om-nudge. `om-nudge` travels −X, `om-nudge-right` travels +X.
   kit/css/controls.css:16 animates om-nudge-right on .om-btn__trail; CSS has
   no logical translate keyword, so om-kit.css (Phase 2) must select between
   the two behind a [dir] guard rather than assuming one direction. */
@keyframes om-nudge-right{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
/* --- the app's own, kept verbatim --- */
@keyframes page-fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sidebar-active-in{0%{transform:scale(.96);opacity:.5}60%{transform:scale(1.03)}100%{transform:scale(1);opacity:1}}
@keyframes sidebar-edge-pulse{0%,100%{opacity:.85;box-shadow:0 0 8px rgba(255,255,255,.5)}50%{opacity:1;box-shadow:0 0 18px rgba(255,255,255,.85)}}
@keyframes om-sheen{from{transform:translateX(110%)}to{transform:translateX(-110%)}}

.om-skeleton{background:linear-gradient(90deg,var(--n-100) 0%,var(--surface-soft) 40%,var(--n-100) 80%);background-size:200% 100%;animation:om-shimmer 1.6s var(--ease-linear) infinite;border-radius:var(--radius-sm)}
.om-stagger>*{animation:om-rise-sm var(--motion-slow) var(--ease-out) both;animation-delay:calc(var(--i,0)*38ms)}
.om-page{animation:page-fade-in var(--motion-slow) var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* prefers-reduced-motion. A blanket on purpose — om-tokens.css collapses the
   --motion-* tokens, which reached 3 of 16 infinite animations. This reaches raw
   durations, Bootstrap and Select2 too. 0.01ms not 0: a zero transition fires no
   `transitionend` and om-overlay.js waits on one. iteration-count is the half
   that matters. Spinners excepted — the query asks for less decoration, not less
   information. Full reasoning: CHANGELOG v9.10. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important}

  .om-spinner,.spinner-border,[data-om-spinner]{
    animation-duration:620ms !important;
    animation-iteration-count:infinite !important}
}