/* =========================================================================
   assets/ui-a11y.css — PHASE 10.2 shared accessibility foundations
   Linked LAST in <head> of every published page. Only reusable foundations:
   skip link, visually-hidden text, keyboard focus ring, reduced motion,
   disabled controls. No page layout, no brand colours beyond the existing
   HBDI yellow (#F4C443) and the page ink (#140D28). Test: a11y-static U-block.
   ========================================================================= */

/* Visually hidden, still read by assistive technology */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

/* Skip link: off-screen until focused by keyboard, then shown top-start (RTL and LTR) */
.skip-link{position:absolute;inset-inline-start:12px;top:0;z-index:2147483000;transform:translateY(-120%);
  padding:10px 16px;border-radius:0 0 10px 10px;background:#140D28;color:#fff;font:600 15px/1.4 system-ui,sans-serif;
  text-decoration:underline;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.skip-link:focus{transform:translateY(0)}
/* Bilingual accessibility text (skip link, visually hidden headings): both languages are in the
   markup; <html lang>, which every page already switches, decides which one is shown and read. */
html[lang^="ar"] .a11y-en,html:not([lang^="ar"]) .a11y-ar{display:none!important}
/* the skip target is not a control: no ring on the landmark itself */
main[tabindex="-1"]:focus{outline:none}

/* Keyboard focus ring: yellow ring with a dark inner band, visible on dark and light surfaces.
   :focus-visible only, so mouse clicks on buttons do not show it. */
:is(a[href],button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"]),[contenteditable="true"]):focus-visible{
  outline:3px solid #F4C443;outline-offset:2px;box-shadow:0 0 0 2px #140D28}

/* Disabled controls look disabled. :where() has zero specificity, so a page's own disabled style still wins. */
:where(button,input,select,textarea,.btn):disabled{cursor:not-allowed;opacity:.55}

/* Reduced motion: animations and transitions end immediately (final state kept), no smooth scrolling */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;
    transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto!important}
}

/* 10.4 — shared toast (assets/ui-a11y.js HBDIStatus): one at a time, centred with PHYSICAL left:50%
   so RTL and LTR match (the old logical inset + translateX(-50%) drifted off-centre in RTL); the
   module's own toast class keeps supplying the colours; above open dialogs. */
.hbdi-toast.hbdi-toast{inset-inline-start:auto;inset-inline-end:auto;left:50%;right:auto;top:auto;bottom:22px;margin:0;
  position:fixed;transform:translateX(-50%);z-index:2147482000;width:max-content;max-width:calc(100% - 32px);
  display:flex;align-items:center;gap:10px}
.hbdi-toast[hidden],.hbdi-toast-x[hidden]{display:none!important}
:where(.hbdi-toast){background:#1d1533;color:#fff;border:1px solid #F4C443;border-radius:12px;padding:12px 18px;font-size:13px;
  line-height:1.7;box-shadow:0 10px 30px rgba(0,0,0,.35)}
:where(.hbdi-toast-err){border-color:#E88A8A}
:where(.hbdi-toast-act){font:inherit;font-weight:600;border:0;border-radius:8px;padding:6px 12px;background:#F4C443;color:#140D28;cursor:pointer}
.hbdi-toast-x{background:none;border:0;color:inherit;font:inherit;font-size:18px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
/* 10.4 — sortable column header: a real <button> that looks exactly like the header text */
.hbdi-sort{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;letter-spacing:inherit;
  text-transform:inherit;cursor:pointer;display:block;width:100%}