/* ============================================================
   Accessibility layer — WCAG 2.1 Level AA

   Everything here exists to satisfy a specific success criterion.
   The criterion is named on each block so the rule is not "cleaned
   up" later by someone who reads it as cosmetic.
   ============================================================ */

/* ---------- 2.4.1 Bypass Blocks ----------
   Every page opens with a skip link. It is off-screen until focused,
   never display:none — a hidden-from-everyone link cannot be reached
   by keyboard either. */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--paper); color: var(--indigo-strong);
  border: 1px solid var(--indigo); border-radius: 4px;
  padding: 10px 16px; font-size: 13.5px; font-weight: 600;
  text-decoration: underline;
  transition: top 0.14s ease;
}
.skip-link:focus { top: 8px; }

/* ---------- 1.3.1 Info and Relationships ----------
   Visually hidden but announced. Used for the accessible names of
   icon-only controls and for table captions. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}
/* Same, but reveals itself on focus (skip links, in-page shortcuts) */
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static !important;
  width: auto; height: auto; margin: 0; overflow: visible;
  white-space: normal; clip: auto; clip-path: none;
}

/* ---------- 2.4.7 Focus Visible / 1.4.11 Non-text Contrast ----------
   One ring for everything focusable. :focus-visible keeps it off mouse
   clicks; the :focus fallback covers engines without :focus-visible.
   The offset guarantees the ring is never painted over by the control's
   own background, which is what makes it readable on filled buttons. */
/* Not :where() — a zero-specificity focus ring loses to any component rule
   that happens to set `outline`, and losing it silently is exactly the
   failure this criterion exists to prevent. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Dark surfaces need the inverse, or the indigo ring disappears into the bar */
.app-header a:focus-visible,
.app-header button:focus-visible,
.doc-surface a:focus-visible,
.doc-surface button:focus-visible {
  outline-color: var(--focus-on-dark);
}
/* Inputs already carry a border-colour change; keep the ring too so the
   indicator does not rely on a 1px colour shift alone. */
.input:focus-visible, .select:focus-visible, textarea.input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

/* ---------- 1.4.1 Use of Color ----------
   A link must not be identified by hue alone. Prose links are underlined
   at rest. Links that are structurally obvious — nav items, buttons,
   cards, table row identities, tabs — opt out below, and instead take an
   underline on hover and on focus. */
a { text-decoration: underline; text-underline-offset: 2px; }

.app-header nav a,
.brand,
.side-nav a,
.step-tabs a,
.btn,
.user-menu a,
.board .b-card .items a,
.wizard-footer .nav-link,
.page-lead a.eyebrow,
.segmented a,
.nav-toggle-bar a,
.skip-link:not(:focus) {
  text-decoration: none;
}
.app-header nav a:hover, .app-header nav a:focus-visible,
.side-nav a:hover, .side-nav a:focus-visible,
.step-tabs a:hover, .step-tabs a:focus-visible,
.user-menu a:hover, .user-menu a:focus-visible,
.board .b-card .items a:hover, .board .b-card .items a:focus-visible,
.wizard-footer .nav-link:hover, .wizard-footer .nav-link:focus-visible,
.page-lead a.eyebrow:hover, .page-lead a.eyebrow:focus-visible {
  text-decoration: underline;
}
/* Buttons are shapes, not text runs — an underline on a filled button
   reads as a defect. Their focus ring carries the non-colour signal. */
.btn:hover, .btn:focus-visible, .brand:hover, .brand:focus-visible { text-decoration: none; }

/* ---------- 2.3.3 / 2.2.2 Motion ----------
   Honour the OS setting. Nothing here animates for meaning, so removing
   the transition costs nothing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 1.4.11 in Windows High Contrast ----------
   System colours replace ours; make sure the things that were carrying
   meaning through colour keep a visible boundary. */
@media (forced-colors: active) {
  .btn, .input, .select, .badge, .card, .icon-btn, .pill-toggle, .accordion {
    border: 1px solid ButtonBorder;
  }
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid Highlight;
  }
  .progress > span { background: Highlight; }
}

/* ---------- 2.5.8 Target Size (Minimum) — WCAG 2.2 AA ----------
   24x24 CSS px, unless the target is inline in a block of text, is a
   user-agent control, or has 24px of clear spacing around it. Icon-only
   controls are pinned above the minimum outright. */
.icon-btn, .btn-bookmark, .nav-toggle, .step-tabs-toggle, .modal-close {
  min-width: 28px; min-height: 28px;
}
/* The wizard footer puts prev/next links within 24px of the Save button, so
   the spacing exception does not apply and they must meet the size instead. */
.wizard-footer .nav-link {
  display: inline-flex; align-items: center; min-height: 24px;
}

/* ---------- 2.4.11 Focus Not Obscured (Minimum) — WCAG 2.2 AA ----------
   The app header is sticky, so anything the browser scrolls to the top of the
   viewport arrives underneath it — which is exactly what happens when focus
   moves backwards through the tab order to a control above the fold.
   scroll-padding-top reserves that band for every scroll-into-view. */
html { scroll-padding-top: calc(var(--header-h) + 16px); }
/* Admin screens stack a sub-navigation beneath the header. */
html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + var(--subnav-h) + 16px); }