/* ============================================================================
   DevTrack Hub · a11y-overrides.css   ·  Block 20.2 — WCAG 2.1 AA Overlay
   ----------------------------------------------------------------------------
   OVERLAY ONLY. Load AFTER every kit (_shell/rd-kit/analytics/finance/…) and
   AFTER mobile-admin.css. Rewrites no kit; every rule either restores a missing
   accessibility affordance or nudges a token to an AA-passing value.

   Grounded in REAL measured contrast on rendered surfaces (canvas-resolved
   colors, WCAG relative-luminance ratios) — see "A11y WCAG 2.1 AA Audit.html".
   Measured fails this overlay fixes:
     · keyboard focus      — 73/73 sampled interactive els had outline:none/0
     · --muted on cream    — 4.42:1  (needs 4.5)   → 5.29:1
     · accent text on cream— 4.03:1                → 4.96:1
     · white-on-accent btn — 4.47:1  (small label) → 5.5:1
   Companion: a11y-overrides.js injects the skip link, a <main> landmark, and
   aria-labels onto icon-only buttons (things CSS can't do).
   Load order:
     <link rel="stylesheet" href="../shared/a11y-overrides.css" />  (after kits + mobile-admin)
     <script src="../shared/a11y-overrides.js" defer></script>
   ============================================================================ */

/* ─── 1 · FOCUS VISIBILITY · WCAG 2.4.7 ──────────────────────────────────────
   Audit: every sampled interactive element resolved outline:none / 0px → there
   is NO keyboard focus indicator anywhere. Restore a strong ring, but only for
   keyboard users (:focus-visible) so mouse/touch UX is unchanged. !important so
   it beats the kits' `outline:none`. */
:where(a, button, input, select, textarea, summary, label,
       [tabindex], [role="button"], [role="link"], [role="tab"],
       [role="menuitem"], [role="checkbox"], [role="switch"], [role="option"]):focus-visible{
  outline: 2.5px solid var(--a11y-ring, #1d4ed8) !important;
  outline-offset: 2px !important;
  border-radius: 5px;
  scroll-margin: 80px;            /* keep target clear of the sticky topbar */
}
/* dark chrome (sidebar drawer, hero band, dark theme) → light ring for contrast */
.sb :focus-visible, .rd-hero-band :focus-visible, .rd-tb .ma-burger:focus-visible,
[data-theme="dark"] :focus-visible{ outline-color: #c6d2ff !important; }

/* If a kit set a custom focus *box-shadow* ring, keep it AND add the outline —
   double-encoding is fine; what we must never allow is "no visible focus". */

/* ─── 2 · CONTRAST · WCAG 1.4.3 (text 4.5:1 / large 3:1) ─────────────────────
   Token nudges only — hue preserved, just deepened to clear AA on the cream
   page background (the binding case; both pass on white cards too). */
:root{
  --muted:  #5f6478;   /* was #6B7085 (4.42 on cream) → 5.29 cream / 5.86 white */
  --accent: #3f5fd6;   /* was ≈#4D6FE3 → white-on-accent 5.5; accent-as-text-on-cream 4.96 */
  --a11y-ring: #1d4ed8;
}
/* keep the accent readable when it is itself used as link/inline text */
a:not([class]), .rd-link, [class*="__link"]{ color: var(--accent); }

/* ─── 3 · REDUCED MOTION · WCAG 2.3.3 ───────────────────────────────────────
   Honor the OS setting: neutralise transitions/animations (drawer slide, KPI
   count-ups, marquees, hero shimmer) and instant-scroll. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .tw__title-track.is-scroll{ animation: none !important; }   /* timer marquee */
}

/* ─── 4 · SKIP LINK · WCAG 2.4.1 (bypass blocks) ────────────────────────────
   Markup injected by a11y-overrides.js (<a class="a11y-skip" href="#a11y-main">).
   Off-screen until focused. */
.a11y-skip{
  position: fixed; top: 10px; left: 10px; z-index: 2000;
  transform: translateY(-160%); transition: transform .16s ease;
  background: var(--ink, #0F1222); color: #fff;
  padding: 11px 18px; border-radius: 9px; text-decoration: none;
  font: 600 13px/1 "Inter", system-ui, sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.a11y-skip:focus{ transform: translateY(0); outline: 2.5px solid #c6d2ff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){ .a11y-skip{ transition: none; } }

/* ─── 5 · TOUCH TARGETS · WCAG 2.5.5 / 2.5.8 ────────────────────────────────
   Block 20.1 sweep flagged 25–68 sub-44px interactive controls per dense table.
   Floor interactive controls on touch pointers only (desktop mouse unaffected,
   so dense tables stay compact for precision-pointer users). */
@media (pointer: coarse){
  button, a.rd-btn, .rd-btn, .rq-btn, .pm-chip, [role="button"], [role="tab"],
  select, summary{ min-height: 44px; }
  /* in-table affordances: give a comfortable hit area without forcing 44px rows */
  td a, td button, th button{ min-height: 32px; display: inline-flex; align-items: center; }
  /* checkbox / radio hit area */
  input[type="checkbox"], input[type="radio"]{ min-width: 22px; min-height: 22px; }
}

/* ─── 6 · STATE NOT BY COLOR ALONE · WCAG 1.4.1 (light touch) ────────────────
   Ensure the keyboard/aria current state has a non-color cue alongside color. */
[aria-current="page"], [aria-current="true"], .is-active[role="tab"], .tab.is-active{
  text-underline-offset: 3px;
}

/* ─── 7 · SR-only utility + forced-colors safety ────────────────────────────*/
.a11y-sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
@media (forced-colors: active){
  :where(a,button,[role="button"]):focus-visible{ outline: 2.5px solid CanvasText !important; }
}