/* a11y.css -- loaded by every page. Lane T, 3 Oct 2026.
   Josh: "I want as much ADA as we can give." Target WCAG 2.2 AA.

   THE DESIGN IS NOT UNDONE HERE. The quarter-height glass rows with 6-8 px type
   are Josh's, and a person who wants them keeps them. What this file does is
   answer the settings a person has ALREADY made in their operating system:
   contrast, transparency, motion, forced colours and text size, plus one
   in-app switch (Menu > Larger controls) for people whose OS setting is
   not reaching the web view. Every rule below is gated on one of those
   signals or on a focus state; with none of them set, the page looks as it
   did. */

/* --- the ground ---------------------------------------------------------------
   login/contribute/beta set `html{background:var(--bg)}` and then, two lines
   later, `html,body{background:transparent}`, so the root had no ground at all
   and anything that read it (a contrast checker, a browser before #bleed's
   first plate decodes) saw white. #bleed is z-index:-1 and paints above the
   root, so a real ground changes nothing a person sees. */
html:root { background-color: #07090a; }

/* --- screen-reader-only text, and the skip links --------------------------------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 8px; top: -80px; z-index: 100000;
  padding: 12px 16px; min-height: 44px; display: inline-flex; align-items: center;
  background: #0c100f; color: #f3efe4; border: 2px solid #e9c46a; border-radius: 6px;
  font: 600 14px/1.2 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0; text-transform: none; text-decoration: underline;
}
.skip-link:focus, .skip-link:focus-visible { top: calc(8px + env(safe-area-inset-top, 0px)); }

/* --- focus ---------------------------------------------------------------------------
   One ring everywhere, gold, 2 px, and never removed. The pages above set
   `outline:none` on inputs and replace it with a one-pixel border tint, which
   is not 3:1 against the glass and which vanishes in forced-colours. !important
   because those rules are `!important` or more specific, and a ring that loses
   a specificity fight is the failure this is here to stop. */
:focus-visible {
  outline: 2px solid #e9c46a !important;
  outline-offset: 2px !important;
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 1px !important; }
/* the canvas is edge to edge, so its ring sits inside it */
#map canvas:focus-visible { outline-offset: -3px !important; box-shadow: none !important; }
/* the glass pills have a rim and a shadow; a ring drawn at +2 px would sit on
   the hit-area ::after's box, so it is pulled in to the visible pill */
#nav a:focus-visible, #nav button:focus-visible, #panel button:focus-visible, #locate:focus-visible,
#quickCam:focus-visible, #humBtn:focus-visible { outline-offset: 1px !important; }

/* --- the leaf slider and the region list -------------------------------------------- */
#a11yRegions {
  position: fixed; inset: 0; z-index: 99990; display: none;
  background: #0a0d0c; color: #f3efe4; overflow: auto; -webkit-overflow-scrolling: touch;
  padding: calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px))
           calc(24px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
  font: 400 16px/1.4 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
#a11yRegions.on { display: block; }
#a11yRegions .ar-wrap { max-width: 640px; margin: 0 auto; }
#a11yRegions h2 { font-size: 20px; font-weight: 600; margin: 0 0 12px; }
#a11yRegions .ar-row { display: flex; gap: 8px; margin-bottom: 12px; }
#a11yRegions label { display: block; font-size: 14px; margin-bottom: 4px; }
#a11yRegions input[type=search] {
  flex: 1; min-height: 44px; padding: 8px 12px; font: inherit; color: #f3efe4;
  background: #151a18; border: 1px solid #8a9690; border-radius: 6px; box-sizing: border-box; width: 100%;
}
#a11yRegions button {
  min-height: 44px; padding: 8px 14px; font: 600 15px/1.2 inherit; font-family: inherit;
  color: #f3efe4; background: #1b221f; border: 1px solid #8a9690; border-radius: 6px; cursor: pointer;
}
#a11yRegions ul { list-style: none; margin: 8px 0 0; padding: 0; }
#a11yRegions li button {
  display: block; width: 100%; text-align: left; font-weight: 400; font-size: 16px;
  border-color: transparent; background: transparent; border-bottom: 1px solid #2a332f; border-radius: 0;
}
#a11yRegions li button small { display: block; font-size: 13px; color: #b9c4be; }
#a11yRegions li button:hover { background: #1b221f; }
#a11yRegions [role=status] { font-size: 14px; color: #b9c4be; margin: 8px 0; }

/* --- motion ----------------------------------------------------------------------------
   The opening film is a VIDEO and keeps playing; this stops the page's own
   motion (slides, fades, pulses, the bleed's slow push), not footage. Camera
   flights are shortened in a11y.js. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    animation-delay: 0s !important; transition-duration: .01ms !important;
    transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  #bleed i, #bleed i.on { transform: none !important; }
}
html.a11y-calm *, html.a11y-calm *::before, html.a11y-calm *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important;
  transition-duration: .01ms !important; scroll-behavior: auto !important;
}

/* --- transparency ------------------------------------------------------------------------
   "Reduce transparency" (iOS, macOS) and Android's equivalents: no blur, and the
   glass becomes the colour it was pretending to be. */
@media (prefers-reduced-transparency: reduce) {
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html:root #nav a, html:root #nav button, html:root #locate, html:root #panel button, html:root #searchInput,
  html:root #humBtn, html:root #key > button, html:root #quickCam {
    background: #0c100f !important; }
  html:root #card, html:root #recent, html:root #search, html:root #hud, html:root #key, html:root #filmed,
  html:root #donors, html:root #lotCard, html:root #pickWrap, html:root #regionPick, html:root #flight {
    background-color: #0c100f !important; background-image: none !important; }
  html:root body.nav-open:not(.brief-open) #nav { background: #0c100f !important; }
  .pill, button.pill, a.pill { background: #0c100f !important; }
}

/* --- contrast ---------------------------------------------------------------------------
   "Increase contrast": solid grounds, a rim you can see, white text. */
@media (prefers-contrast: more) {
  html:root { --dim: rgba(255,255,255,.88); }
  html:root #nav a, html:root #nav button, html:root #locate, html:root #panel button, html:root #searchInput,
  html:root #humBtn, html:root #key > button, html:root #quickCam {
    background: #000 !important; color: #fff !important; border: 1px solid #fff !important; box-shadow: none !important; }
  html:root #card, html:root #recent, html:root #search, html:root #hud, html:root #key, html:root #filmed,
  html:root #donors, html:root #lotCard, html:root #pickWrap, html:root #regionPick, html:root #flight {
    background-color: #000 !important; background-image: none !important; border: 1px solid #fff !important; color: #fff !important; }
  html:root body.nav-open:not(.brief-open) #nav { background: #000 !important; border: 1px solid #fff !important; }
  html:root #nav a, html:root #nav button, html:root #panel button { color: #fff !important; }
  a { text-decoration: underline; }
  input, textarea, select { border-color: #fff !important; }
  .pill, button.pill, a.pill { background: #000 !important; border: 1px solid #fff !important; color: #fff !important; }
}

/* --- forced colours (Windows High Contrast, and the same on Android) ------------------- */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight !important; }
  #nav a, #nav button, #locate, #panel button, #searchInput, #humBtn, #key > button, #quickCam,
  .pill, button, input, textarea, select {
    forced-color-adjust: auto; border: 1px solid ButtonText !important; }
  #leaf { forced-color-adjust: none; }
  #leaf svg { forced-color-adjust: none; }
}

/* --- LARGER CONTROLS ----------------------------------------------------------------------
   html.a11y-large is set by a11y.js when (a) the OS text size is above Large
   (iOS Dynamic Type, read from `font: -apple-system-body`; Android's font scale
   arrives as the web view's root font size), or (b) the person flips Menu >
   Larger controls. The glass look stays; the rows are 44 pt tall, the type
   is 12 px or more, and the layout makes room instead of overlapping. */
html.a11y-large {
  --a11y-row: 44px; --a11y-text: 13px;
}
html.a11y-large body:not(.brief-open) { --row-h: 44px; --row-t: calc(var(--pad-t, 0px) + 37px); }
html.a11y-large:root { --d-row-h: 44px; }

/* top row: Menu / Back / Where am I / camera, all >= 44 px, text 13 px */
html.a11y-large body:not(.brief-open) #nav a,
html.a11y-large body:not(.brief-open) #nav button,
html.a11y-large body:not(.brief-open) #locate,
html.a11y-large body:not(.brief-open) #searchInput,
html.a11y-large body:not(.brief-open) #humBtn,
html.a11y-large body:not(.brief-open) #key > button {
  font-size: var(--a11y-text) !important; letter-spacing: .04em !important; min-height: 44px !important;
  line-height: 1.15 !important; }
html.a11y-large body:not(.brief-open) #nav a::after,
html.a11y-large body:not(.brief-open) #nav button::after,
html.a11y-large body:not(.brief-open) #locate::after,
html.a11y-large body:not(.brief-open) #panel button::after,
html.a11y-large body:not(.brief-open) #quickCam::after { inset: 0; }
html.a11y-large body:not(.brief-open):not(.nav-open) #nav #navMenu { width: auto !important; min-width: 58px; padding: 0 12px !important; }
html.a11y-large body:not(.brief-open):not(.nav-open) #nav #navBack { width: auto !important; min-width: 72px; padding: 0 12px !important; }
html.a11y-large body:not(.brief-open) #locate { width: auto !important; min-width: 44px; padding: 0 12px !important; height: 44px !important; }
html.a11y-large body:not(.brief-open) #quickCam { width: 44px !important; height: 44px !important; }
html.a11y-large body:not(.brief-open) #quickCam svg { height: 22px !important; }
html.a11y-large body:not(.brief-open) #searchInput { height: 44px !important; padding: 0 14px !important; }
html.a11y-large body:not(.brief-open) #nav { gap: 8px !important; }
/* at 44 px and 13 px type four controls do not fit one 375 px row, so search
   takes a row of its own under the other three, full width */
@media (max-width: 760px) {
  html.a11y-large body:not(.brief-open) #search { top: calc(var(--row-t) + 52px) !important;
    right: var(--pad-r, 8px) !important; left: var(--pad-l, 8px) !important; width: auto !important; }
  html.a11y-large body:not(.brief-open) #quickCam { right: auto !important; left: var(--pad-l, 8px) !important;
    top: var(--row-t) !important; }
  html.a11y-large body:not(.brief-open) #locate { left: calc(var(--pad-l, 8px) + 52px) !important; right: auto !important;
    top: var(--row-t) !important; }
  html.a11y-large body:not(.brief-open) #hud #count { margin-top: calc(var(--row-h) * 2 + 24px) !important; }
}
/* the open Menu: 44 px rows, 14 px type */
@media (max-width: 760px) {
  html.a11y-large body.nav-open:not(.brief-open) #nav { width: 220px !important; }
  html.a11y-large body.nav-open:not(.brief-open) #nav a,
  html.a11y-large body.nav-open:not(.brief-open) #nav button {
    height: 48px !important; min-height: 48px !important; font-size: 14px !important; letter-spacing: .06em !important; }
}
/* bottom bar: wraps rather than shrinking, 44 px, 13 px */
html.a11y-large #panel { flex-wrap: wrap !important; justify-content: center !important; }
html.a11y-large #panel button {
  min-height: 44px !important; padding: 8px 12px !important; font-size: var(--a11y-text) !important;
  letter-spacing: .04em !important; line-height: 1.15 !important; }
html.a11y-large #leafSearch, html.a11y-large #regionsBtn { min-width: 44px; min-height: 44px; }
html.a11y-large #leaf { min-width: 44px; min-height: 44px; }
html.a11y-large #recent, html.a11y-large #recent .rl a, html.a11y-large #key,
html.a11y-large #hud #countLabel, html.a11y-large #alt, html.a11y-large #bearing,
html.a11y-large #tally, html.a11y-large #cardMeta, html.a11y-large #cardBioregion,
html.a11y-large #cardStatus, html.a11y-large #cardShooter { font-size: max(12px, 1em) !important; }
html.a11y-large #recent .rl a { min-height: 44px; display: flex; align-items: center; }
html.a11y-large #cardActions button, html.a11y-large #plateBar button { min-height: 44px !important; font-size: 14px !important; }

/* the Menu entry that turns it on */
#navLarge[aria-pressed=true]::before { content: "\2713\00a0"; }
/* it lives in the Menu: on a phone it shows only while the Menu is open, and
   never on the Home door, which has no Menu and whose controls are already large */
@media (max-width: 760px) { body:not(.nav-open) #nav #navLarge { display: none !important; } }
body.brief-open #nav #navLarge { display: none !important; }

/* --- touch targets -----------------------------------------------------------------------
   The slim pills reach 44 pt tall through an invisible ::after (glass block in
   index.html) but only 3-4 px wider, so the narrowest were 32-42 pt across.
   Widened here, still invisible; the pills' look is untouched. Neighbouring
   outsets overlap by a few px, and the later pill wins that strip. */
#nav a::after, #nav button::after, #locate::after, #panel button::after { inset: -17px -7px; }
#quickCam::after { inset: -17px -10px; }
#humBtn { position: absolute; }
#humBtn::after, #key > button::after { content: ''; position: absolute; inset: -10px -4px; }
#key > button { position: relative; }
#count .f, #count .u { position: relative; }
#count .f::after, #count .u::after { content: ''; position: absolute; inset: -12px -6px; }
/* the search field is 10 px tall by design; its box reaches 44 pt and a tap on
   that box focuses the field (a11y.js), because an <input> cannot have a ::after */
#search::before { content: ''; position: absolute; inset: -17px -4px; z-index: -1; }
/* THE OPEN MENU'S ROWS. Each row carries the +/-17 px ::after above, and in the
   dropdown the rows are 34 px tall with a 2 px gap, so every row's hit area
   covered the lower half of the row above it and a tap on "Board" could land on
   "Feed". Inside the dropdown the ::after is the row itself, and the row is 44 pt. */
@media (max-width: 760px) {
  html body.nav-open:not(.brief-open) #nav a::after,
  html body.nav-open:not(.brief-open) #nav button::after { inset: 0; }
  html body.nav-open:not(.brief-open) #nav a,
  html body.nav-open:not(.brief-open) #nav button { height: 44px !important; min-height: 44px !important; }
}
/* the altitude slider's track is 2 px, so its box was 2 px tall. The box grows; the track stays. */
#altRange { box-sizing: content-box; padding: 13px 0; background-clip: content-box !important; }
body.brief-open #nav #navAccess { display: none !important; }