/* ═══════════════════════════════════════════════════════════════════════════
   xf-a11y.css · accessibility layer (part of the XupaFin design system)
   ---------------------------------------------------------------------------
   WCAG 2.2 AA primitives that apply platform-wide with no per-component work:
   a visible keyboard focus indicator, a screen-reader-only utility, a skip
   link, comfortable touch targets, and honouring reduced-motion / more-contrast
   user preferences. Colours come from the Fluent tokens so focus stays visible
   in every theme.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 2.4.7 / 2.4.11 Focus Visible & Focus Appearance — a clear ring for keyboard
   users, suppressed for mouse users via :focus-visible. Two-tone so it shows on
   both light and dark surfaces. */
:where(a, button, input, select, textarea, [tabindex], summary, [role="button"], [role="tab"]):focus-visible {
  outline: 2px solid var(--xf-stroke-focus, #0f6cbd);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--xf-stroke-focus, #0f6cbd) 30%, transparent);
}
/* Never remove the outline without replacing it. */
:where(a, button, input, select, textarea):focus:not(:focus-visible) { outline: none; }

/* Screen-reader-only content (labels, live regions) — present to AT, invisible
   on screen. .xf-sr-only.xf-focusable becomes visible when focused (skip link). */
.xf-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;
}

/* Skip-to-content link — first tab stop, jumps keyboard users past the nav. */
.xf-skip {
  position: absolute; left: 8px; top: -48px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--xf-bg-brand, #0f6cbd); color: var(--xf-fg-on-brand, #fff);
  border-radius: 0 0 8px 8px; font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.xf-skip:focus { top: 0; outline: 2px solid #fff; outline-offset: -4px; }

/* 2.5.8 Target Size (Minimum) — icon buttons get a comfortable hit area. */
.icon-btn, .xf-helplink, button.icon-btn {
  min-width: 32px; min-height: 32px;
}
@media (pointer: coarse) {
  .icon-btn, .xf-helplink { min-width: 44px; min-height: 44px; }
}

/* Respect the user's motion preference across the whole app. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Users asking for more contrast get stronger borders and focus. */
@media (prefers-contrast: more) {
  :where(button, input, select, textarea, .card, .st-adaptive tbody > tr) {
    border-color: var(--xf-fg-1, #000) !important;
  }
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline-width: 3px;
  }
}