/* =================================================================================================
   SAFARI-A11Y-PASS-0918 — THE ACCESSIBILITY FLOOR.  Presentation only.
   Punch-list items 15 (WebKit pass) and 16 (accessibility floor), on the twenty pages a beta tester
   touches first.  Ruling 555's designs stand: this file adds NO colour of its own to any surface,
   moves nothing, and resizes nothing.  It does three things and stops.

   1. ONE VISIBLE FOCUS RING, estate-wide — and the claim is narrower than "there is no ring".
      Measured 18 Sep on the live bytes, by snapshotting every focusable's resting outline and
      box-shadow and comparing it with what the browser paints after a real Tab: there is NO
      :focus-visible rule of the estate's own anywhere, so what a keyboard user sees today is
      whatever the BROWSER draws by default — `outline: auto 3px` in the platform's own grey — plus,
      on the sign-in fields, a 3px box-shadow at 0.14 alpha.  Thirteen `outline:none` declarations
      across fs-maven, fs-guide, fs-shell-close, fs-quickcreate, fs-tplx, fs-fsnew and
      fs-universal-search then REMOVE that default on exactly the components a tester uses most.
      So the fault is not "no ring" — it is "a ring whose presence, colour and contrast nobody
      controls, absent on the busiest controls".  The rule below replaces it with ONE ring, in the
      estate's own accent, with a light/dark halo behind it so it is visible on either surface.
      It is drawn ONLY for :focus-visible — the browser's own heuristic — so a MOUSE click never
      paints it and nothing a designer laid out changes for a pointer user.  `!important` is
      deliberate and minimal: it is the only way to beat the shipped `outline:none!important`
      without editing seven files.

      The ring is drawn in the estate's own accent token with a white/ink companion ring behind it
      (box-shadow), so it is visible on both a light and a dark surface without knowing which.

   2. THE SKIP LINK.  Off-screen until focused, then the first thing a keyboard reaches.
      The target is supplied by fs-a11y-0918.js, which names the page's own content region rather
      than inventing one.

   3. THE ONE PAGE ON THE TESTER PATH THAT SCROLLS SIDEWAYS — the board nav's own answer, applied
      at every width instead of only below 820px.  See the measurement at the rule itself.

   4. Nothing else.  Contrast corrections live in fs-a11y-contrast-0918.css, beside the tokens they
      correct; they are NOT swept up here behind !important.
   ================================================================================================= */

/* ---- 1 · the ring -------------------------------------------------------------------------- */
:root {
  --fsa11y-ring: var(--fsc-violet, #514dfa);
  --fsa11y-halo: rgba(255, 255, 255, .92);
}
.fs-dark, [data-theme="dark"], html.dark {
  --fsa11y-halo: rgba(12, 12, 24, .92);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
details:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible,
[role="menuitem"]:focus-visible,
[contenteditable="true"]:focus-visible {
  outline: 2px solid var(--fsa11y-ring) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--fsa11y-halo) !important;
}
/* NOTE, and it is why there is no border-radius rule here: a box-shadow already follows the
   element's OWN border-radius, so a round chip gets a round halo without being told.  The first
   draft carried `border-radius: inherit`, which does not mean "keep your own" — it means "take your
   parent's", and would have reshaped every focused control inside a rounded card.  Removed. */

/* Windows High Contrast / forced colours: let the system draw its own ring rather than ours. */
@media (forced-colors: active) {
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
  textarea:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid Highlight !important;
    box-shadow: none !important;
  }
}

/* ---- 2 · the skip link --------------------------------------------------------------------- */
.fsa11y-skip {
  position: fixed;
  left: 8px;
  top: -64px;                       /* off-screen, but focusable and in the tab order */
  z-index: 2147483600;              /* above the shell, below the celebration dialog */
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  /* 🔴 NOT the theme token.  --fsc-violet resolves to #8b87ff on a dark seat, and white on that is
     3.0 : 1 — this lane's own skip link failed its own contrast test on the dark pages and was
     caught by its own table.  A fixed pair instead: white on #514dfa is 5.54 : 1 in both schemes,
     and the link is only ever on screen while it has focus. */
  background: #514dfa;
  color: #fff;
  font: 700 14px/1 Inter, system-ui, sans-serif;
  text-decoration: none;
  transition: top .12s ease;
}
.fsa11y-skip:focus,
.fsa11y-skip:focus-visible {
  top: 8px;
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px #514dfa !important;
}
@media (prefers-reduced-motion: reduce) { .fsa11y-skip { transition: none; } }

/* ---- 3 · the one page on the tester path that scrolls sideways ------------------------------ */
/* Measured at 1280 in BOTH engines on /board-detail.php: documentElement.scrollWidth 1298 against
   an innerWidth of 1280.  `body` already carries overflow-x:hidden, but `html` does not, so the
   page still scrolls.  Of the twenty-one elements past the right edge, nineteen are inside a
   `position:fixed` subtree (the closed off-canvas drawer `.ftr-bk`, which cannot extend
   scrollWidth) — the two in normal flow are `button#n2jump` at x1185-1298 and the `kbd` inside it,
   the board nav's "Jump to anything ⌘K" control, pushed right by `.n2spacer{flex:1 1 auto}`.

   The board nav ALREADY solves this for itself below 820px:
       @media(max-width:820px){ .n2nav{ padding:0 8px; overflow-x:auto; scrollbar-width:none } }
   The fault is only that the rule is inside a media query.  This applies the page's own answer at
   every width: the bar scrolls inside itself, exactly as it does on a phone, and the PAGE stops
   scrolling sideways.  Nothing moves, nothing is resized, and the scrollbar stays hidden as the
   page already hides it.                                                                          */
html .n2nav { overflow-x: auto; scrollbar-width: none; }
html .n2nav::-webkit-scrollbar { display: none; }