/* Keyboard focus on every page (audits DES-02 and DES-05): one clear ring for keyboard users, where
   the browser's own is a 1px line that vanishes on the near-black pages. #46A463 is at least 3:1
   against both the black (6.3:1) and the white (3.1:1) sections; the offset puts it on the
   background around a control, never on the green buttons themselves. Linked by tools/build.js. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
video:focus-visible,
:focus-visible {
  outline: 3px solid #46A463 !important;
  outline-offset: 3px !important;
}

/* "Skip the Instagram reels" on the homepage (audit DES-05): the five reels are Instagram's own
   pages, about 25 Tab stops each. The link is out of sight until it has keyboard focus. */
.skip-link {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  align-self: flex-start;
  margin: 0 28px;
  padding: 12px 20px;
  background: #0B5E15;
  color: #fff;
  font-weight: 700;
}

/* Where the skip link lands: an empty spot, not a control, so no ring (it would be a stray dot). */
.skip-target:focus,
.skip-target:focus-visible {
  outline: none !important;
}

/* The faded watermark words ("Train", "Valdez" on the homepage, the footer's outlined "Valdez Muay
   Thai") are drawn here, not written as text, so the contrast check does not read decoration as
   text (audit DES-03; tools/build.js gives each its data-wm word). */
.wm::before {
  content: attr(data-wm);
}

/* Form fields: the ring close to the box, so it does not touch the label above it. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 1px !important;
}