/*
 * Cross-shell accessibility guarantees.
 *
 * This file intentionally loads after the visual foundation. It owns the
 * measurable interaction floor and the semantic reinforcement shared by the
 * immersive shell, Site guide, and route content without changing their
 * layout or navigation authority.
 */

:root {
  --a11y-target-min: 44px;
  /* UI round 9 (operator decision): Podium's cyan-teal focus ring, solid so it
     keeps WCAG 2.2 focus appearance (2.4.13: >= 2px, >= 3:1 against both the
     unfocused state and the adjacent field) on the dark veil. */
  --a11y-focus-ink: #87d8ff;
  --a11y-focus-halo: #060b10;
}

:root[data-theme="light"] {
  /* The foundation amber is suitable for large non-text marks. This darker
     ink also clears 4.5:1 when it is inherited by compact labels. */
  --amber: #985a0f;
  --a11y-focus-ink: #0b607d;
  --a11y-focus-halo: #ffffff;
}

/* WCAG 2.2 target-size floor. `:where()` keeps this easy for intentional,
   component-specific geometry to refine while retaining both dimensions. */
body :where(
  a,
  button,
  input:not([type="hidden"]),
  select,
  textarea,
  [role="button"],
  [role="link"],
  [role="checkbox"],
  [role="radio"],
  [role="switch"],
  [role="tab"],
  [tabindex]:not([tabindex="-1"])
) {
  min-inline-size: var(--a11y-target-min);
  min-block-size: var(--a11y-target-min);
}

/* Intrinsic minimum sizes do not apply to inline boxes. Route-content links
   become inline flex boxes; component selectors with greater specificity keep
   their existing flex/grid display modes. */
body a {
  display: inline-flex;
  align-items: center;
}

/* A two-tone focus treatment remains visible on the dark Vessel and on the
   light static field; it never depends on hue alone. */
body :where(
  a,
  button,
  input:not([type="hidden"]),
  select,
  textarea,
  [role="button"],
  [role="link"],
  [role="checkbox"],
  [role="radio"],
  [role="switch"],
  [role="tab"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  /* Podium: 2px ring, 2px offset [SPEC 4]. The halo fills the offset gap and
     rims the ring outside, so the ring reads over the brightest veil too. */
  outline: 2px solid var(--a11y-focus-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--a11y-focus-halo), 0 0 0 6px color-mix(in srgb, var(--a11y-focus-halo) 55%, transparent);
}

/* The current global tile already exposes `aria-current="page"` to assistive
   technology. Spell the same state out visually so border/ink colour is never
   the only cue. Context rows provide their own matching “Current” label. */
.site-rail .rail-main-grid a[aria-current="page"] .rail-main-number::after {
  content: " · Current";
  color: var(--text);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Preserve the fixed-frame contract: the 5px wall never intercepts content,
   and focused document content can still scroll clear of the 30px inset. */
.vessel-frame {
  pointer-events: none;
}

:where(main, section, header, nav, [tabindex="-1"]) {
  scroll-margin: calc(var(--frame-depth) + 14px);
}