/* DCS Games — shared accessibility primitives for the V3 player.
 *
 * These are the rules that must not drift between pages: the focus ring, the
 * screen-reader-only helper, and the minimum tap target. They live in one file
 * so a second page cannot quietly ship a smaller target or a missing ring.
 */

/* A visible focus indicator on every interactive control.
 *
 * :focus-visible is the one a keyboard user actually gets. :focus is included
 * as well because a control that holds focus at all must never be invisible —
 * a mouse user who has clicked into the companion field still needs to see
 * where their next keystroke is going — and because it is the state a test can
 * assert without having to fake an input modality. */
/* SPLIT DELIBERATELY. A CSS selector list is invalid IN FULL if any one
 * selector in it is not understood — so grouping :focus with :focus-visible
 * meant that on any engine without :focus-visible (Safari and iOS up to 15.3)
 * the entire rule was discarded and NO ring was painted at all, including for
 * the seven plain :focus selectors that engine understands perfectly well.
 * Measured, not argued from a support table: substituting an unknown pseudo
 * into a grouped list removes the whole rule from sheet.cssRules and the
 * focused control falls back to the browser default.
 * The :focus rule therefore stands alone, and :focus-visible refines it. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[role="button"]:focus,
[tabindex]:focus {
  outline: 3px solid var(--focus, #a5b4fc);
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus, #a5b4fc);
  outline-offset: 2px;
}

/* Never let a design remove the ring without putting one back. */
:focus:not(:focus-visible) { outline-color: var(--focus, #a5b4fc); }

/* Announced, never shown. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* WCAG 2.5.5 target size. Anything the player has to hit with a thumb gets at
 * least 44 CSS pixels in both directions, whatever its text happens to be. */
.tap {
  min-width: 44px;
  min-height: 44px;
}

/* An outline is painted OUTSIDE the border box, so any ancestor that hides its
 * overflow clips it away — measured on explore-v3: the three sort buttons live
 * inside a `.seg` with `overflow:hidden` and their ring was cut off entirely.
 * A control in a clipping container draws its ring on the inside instead, the
 * same way the play-v3 canvas does at the edge of the viewport. */
/* Split for the same reason as above. */
.ring-inside:focus {
  outline: 3px solid var(--focus, #a5b4fc);
  outline-offset: -3px;
}
.ring-inside:focus-visible {
  outline: 3px solid var(--focus, #a5b4fc);
  outline-offset: -3px;
}

/* min-height does nothing to an inline box, so an inline control that has to be
 * a real 44px target must first become a box. */
a.tap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Windows high contrast throws the authored colours away, including the ring.
 * Highlight is the one colour the mode guarantees is visible. */
@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [role="button"]:focus-visible,
  [tabindex]:focus-visible,
  .ring-inside:focus-visible {
    outline: 3px solid Highlight;
  }
}