/* =====================================================================
   css/a11y.css
   The map view's keyboard and screen-reader surfaces.

   Three things live here: the skip links, the "Map features" drawer, and
   the contribution panels that make a point, line or area placeable
   without a pointer. They are grouped by what they are for rather than
   split across the feature stylesheets, because they are one change and
   they are the first thing to check when a keyboard route breaks.
   ===================================================================== */

/* ── Skip links ───────────────────────────────────────────────────────
   Bootstrap's .visually-hidden-focusable un-hides on focus but paints
   nothing, so on a map the revealed link was dark text over aerial
   imagery. Give it its own ground and a ring that survives contact with
   Mapbox's stylesheet. */

.wm-skip-link:focus,
.wm-skip-link:focus-visible {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 4000;
  display: inline-block;
  padding: 10px 16px;
  background: #ffffff;
  color: #12263f;
  font-weight: 600;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  outline: 3px solid #12263f;
  outline-offset: 2px;
  text-decoration: none;
}

/* The <main> is focusable so the skip link has somewhere to land. Give
   the landing a visible ring; a focus move nobody can see is the bug the
   skip link had in the first place. */
#map-wrapper:focus-visible {
  outline: 3px solid #ffc107;
  outline-offset: -3px;
}

/* Zero-height: it exists to carry the page's one <h1>. */
.wm-page-header {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Map features drawer ─────────────────────────────────────────────── */

/* z-index sits above #button-panel (1500) and .controls, because in the
   classic and text themes the menu occupies the same left edge and was
   painting over the open drawer. Below #feature-panel (2500), which is
   what the drawer opens. */
.wm-fl-toggle {
  position: absolute;
  left: 10px;
  bottom: 56px;              /* clear of the geocoder, which sits at 10px */
  z-index: 1600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;          /* WCAG 2.5.8 */
  padding: 8px 14px;
  background: #ffffff;
  color: #12263f;
  border: 1px solid #b9c2cc;
  border-radius: 22px;
  font-size: .875rem;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  cursor: pointer;
}

.wm-fl-toggle:hover { background: #f2f5f8; }

.wm-fl-toggle:focus-visible {
  outline: 3px solid #12263f;
  outline-offset: 2px;
}

.wm-fl-toggle-count { color: #52606d; font-weight: 500; }

.wm-fl {
  position: absolute;
  left: 10px;
  bottom: 108px;
  z-index: 1610;
  width: 320px;
  max-width: calc(100vw - 20px);
  max-height: min(60vh, 520px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #b9c2cc;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
  overflow: hidden;
}

.wm-fl-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #e3e8ed;
}

.wm-fl-title {
  flex: 1;
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  color: #12263f;
}

.wm-fl-close {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  border-radius: 6px;
  color: #52606d;
  cursor: pointer;
}
.wm-fl-close:hover { background: #f2f5f8; color: #12263f; }
.wm-fl-close:focus-visible { outline: 3px solid #12263f; outline-offset: -2px; }

.wm-fl-tools { padding: 8px 12px 4px; }

.wm-fl-status {
  margin: 0;
  padding: 2px 12px 8px;
  font-size: .8rem;
  color: #52606d;   /* 6.4:1 on white */
}

.wm-fl-items {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
}

.wm-fl-item {
  display: flex;
  align-items: stretch;
  gap: 2px;
  border-top: 1px solid #eef1f4;
}

.wm-fl-open {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 10px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: #12263f;
}
.wm-fl-open:hover { background: #f2f5f8; }
.wm-fl-open:focus-visible { outline: 3px solid #12263f; outline-offset: -3px; }

/* A color chip echoing the legend, so a sighted keyboard user can match
   a row to the layer it belongs to. Decorative: the category name is in
   the button's text, so nothing here is color-only information. */
.wm-fl-open.has-swatch { border-left: 4px solid var(--wm-fl-swatch, transparent); }

.wm-fl-name {
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.wm-fl-meta {
  font-size: .75rem;
  color: #52606d;
}

.wm-fl-locate {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  color: #52606d;
  cursor: pointer;
}
.wm-fl-locate:hover { background: #f2f5f8; color: #12263f; }
.wm-fl-locate:focus-visible { outline: 3px solid #12263f; outline-offset: -3px; }

.wm-fl-overflow,
.wm-fl-empty {
  margin: 0;
  padding: 10px 12px;
  font-size: .8rem;
  color: #52606d;
  list-style: none;
}

/* ── Contribution panels (point placement, vertex entry) ─────────────── */

.wm-contrib {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2350;
  width: 380px;
  max-width: calc(100vw - 20px);
  max-height: min(70vh, 620px);
  overflow-y: auto;
  padding: 12px 14px 14px;
  background: #ffffff;
  border: 1px solid #b9c2cc;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
}

.wm-contrib-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.wm-contrib-title {
  flex: 1;
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  color: #12263f;
}

.wm-contrib-intro,
.wm-contrib-status {
  margin: 0 0 8px;
  font-size: .8rem;
  line-height: 1.4;
  color: #52606d;
}

.wm-contrib-status:empty { margin: 0; }

.wm-contrib-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* ── Location chooser ────────────────────────────────────────────────── */

.wm-loc {
  margin: 0 0 4px;
  padding: 0;
  border: 0;
}

.wm-loc-legend {
  float: none;               /* Bootstrap floats legends; this is not a form grid */
  width: auto;
  margin: 0 0 6px;
  padding: 0;
  font-size: .8rem;
  font-weight: 700;
  color: #12263f;
}

.wm-loc-method {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: .85rem;
}

.wm-loc-method input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
}

.wm-loc-method label { margin: 0; cursor: pointer; }

.wm-loc-body {
  margin: 2px 0 8px 26px;
}

.wm-loc-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.wm-loc-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
}

.wm-loc-field label {
  font-size: .75rem;
  color: #52606d;
}

.wm-loc-results { margin-top: 6px; }

.wm-loc-hint {
  margin: 0;
  font-size: .78rem;
  line-height: 1.4;
  color: #52606d;
}

/* ── Vertex list ─────────────────────────────────────────────────────── */

.wm-vx-list-wrap { margin-top: 10px; }

.wm-vx-heading {
  margin: 0 0 4px;
  font-size: .8rem;
  font-weight: 700;
  color: #12263f;
}

/* The position is rendered into each row (see vertex-entry-panel.js), so
   the marker would be a second, silent copy of the same number. */
.wm-vx-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: .8rem;
}

.wm-vx-index {
  display: inline-block;
  min-width: 1.4em;
  color: #52606d;
  font-variant-numeric: tabular-nums;
}

.wm-vx-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.wm-vx-coords {
  flex: 1 1 auto;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  color: #12263f;
}

.wm-vx-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 0;
}

.wm-vx-actions .btn-link {
  min-height: 32px;
  padding: 2px 6px;
  font-size: .75rem;
}

/* ── Narrow screens ──────────────────────────────────────────────────
   390px is the reference width. The drawer and the contribution panels
   both become full-width sheets, and the toggle moves clear of the
   Mapbox attribution strip along the bottom edge. */

@media (max-width: 600px) {
  .wm-fl-toggle {
    bottom: 64px;
    left: 8px;
  }

  .wm-fl {
    left: 8px;
    right: 8px;
    bottom: 116px;
    width: auto;
    max-height: 55vh;
  }

  .wm-contrib {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    transform: none;
    max-height: 78vh;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .wm-loc-row { flex-wrap: wrap; }
}

/* Respect a reduced-motion preference in the flights "Show on map" runs.
   Handled here rather than per-call so one rule covers every future
   caller of the same pattern. */
@media (prefers-reduced-motion: reduce) {
  .wm-fl,
  .wm-contrib { transition: none !important; }
}

/* ── Menu buttons: focus, and which mode is on ────────────────────────
   Two different questions a visitor asks of the same button, and neither
   had an answer.

   "Where am I?" `.gbtn` is declared with `all: unset`, which throws away
   the browser's own focus ring along with everything else, and nothing
   put one back. Tabbing through the menu changed nothing on screen at
   all: eight stops, no indication of which one you were on. That is
   WCAG 2.4.7, and it applied to every theme.

   "What is switched on?" Pressing Add Point puts the map into a mode
   that persists until you place something or cancel, and the button
   looked exactly as it had before. See a11y/menu-state.js.

   This file loads after map-overrides.css and map-view-menu.css, so
   these rules win without needing !important. */

/* The ring is drawn in --menu-ink, which render.js computes to contrast
   with the button's own background, so it stays visible whatever color
   the customer picked. The dark outer halo separates it from the map
   behind, which can be any color at all. */
#button-panel button:focus-visible,
.controls button:focus-visible,
.gbtn:focus-visible,
.round-btn:focus-visible,
#sidebar .sidebar-btn:focus-visible,
.topnav-link:focus-visible,
.hamburger:focus-visible,
[data-mid]:focus-visible {
  outline: 3px solid var(--menu-ink, #ffffff);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(18, 38, 63, .85);
  /* .gbtn animates a 4px nudge on hover; holding still under focus keeps
     the ring where the eye expects it. */
  transform: none;
}

/* Sidebar rows sit on white, so the ink computed for the colored buttons
   would be white on white. Use the ink's opposite there. */
#sidebar .sidebar-btn:focus-visible {
  outline-color: #12263f;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .95);
}

/* The active mode.
   An inset ring rather than a tint: it reads as a state without relying
   on the customer's color being distinguishable from a shaded version of
   itself, and it composes with the focus ring above (that one sits
   outside the button, this one inside) so a focused active button shows
   both at once. Not color alone, per WCAG 1.4.1. */
[data-mid].wm-menu-active {
  box-shadow: inset 0 0 0 3px var(--menu-ink, #ffffff),
              inset 0 0 0 999px rgba(0, 0, 0, .22);
}

#button-panel button[data-mid].wm-menu-active:focus-visible,
.controls button[data-mid].wm-menu-active:focus-visible,
[data-mid].wm-menu-active:focus-visible {
  box-shadow: inset 0 0 0 3px var(--menu-ink, #ffffff),
              inset 0 0 0 999px rgba(0, 0, 0, .22),
              0 0 0 6px rgba(18, 38, 63, .85);
}

/* On the white sidebar the inset ring needs the opposite ink. */
#sidebar .sidebar-btn[data-mid].wm-menu-active {
  box-shadow: inset 0 0 0 3px #12263f,
              inset 0 0 0 999px rgba(18, 38, 63, .10);
}

@media (prefers-reduced-motion: reduce) {
  .gbtn:hover { transform: none; }
}