/* ═══ Accessibility & mobile-first pass — 2026-09-29 ═══════════════════
   Standards applied, from the sources fetched on 2026-09-29:
   • WCAG 2.2 §2.4.7 Focus Visible / §2.4.11 Focus Not Obscured
   • WCAG 2.2 §2.5.8 Target Size (Minimum) 24×24, and NN/G's 44×44 for
     fingers on a moving vehicle (this product is read at a red light, with
     one thumb and gloves).
   • WCAG 2.2 §1.4.4 Resize Text — nothing below 10px, and type that survives
     a 200% browser zoom without clipping.
   Nothing here invents a colour: every value is an existing --nt-* token, so
   vendor/nt-drive.css remains GENERATED from spec/nt-drayvv.edn and unedited. */

/* A visible focus ring. Before this, the app had ZERO :focus-visible rules in
   app.css, map.css and nt-drive.css combined — keyboard focus was invisible
   on every control, which is a WCAG 2.2 AA failure, not a nit. The ring uses
   the surge accent so it reads on navy without a new token. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--nt-surge);
  outline-offset: 2px;
  border-radius: var(--nt-r-sm);
}
/* Never remove the ring without replacing it. */
:where(button, a, input, select, textarea, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* Touch targets. The rail (zone chips) and the tab bar are the two things a
   driver actually taps mid-shift; both were sized by content, not by finger. */
.rail-item,
.zone-chip,
.rail > * {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nt-tab,
.tab,
[data-tab] {
  min-height: 48px;                 /* thumb zone, per NN/G + Apple HIG */
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Type floor. 10px text exists in .nt-costs label and a few stat captions;
   below 11px it is unreadable in a parked car at night. */
.nt-costs label,
.nt-stat-label,
.stat-label {
  font-size: max(11px, 0.6875rem);
  line-height: 1.35;
}

/* Safe areas: the notch and the home indicator sit exactly where a bottom tab
   bar wants to be. This app is a PWA installed from a phone, so the inset is
   not optional. */
@supports (padding: max(0px)) {
  .rail { padding-bottom: max(var(--nt-s-12), env(safe-area-inset-bottom)); }
  .nt-tabbar, .tabbar, .bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
}

/* Landscape: a driver mounts the phone in a cradle. The splash and the hero
   must not overflow a 390px-tall viewport. */
@media (max-height: 480px) {
  .nt-splash { gap: var(--nt-s-12); padding: var(--nt-s-16); justify-content: flex-start; }
  .nt-splash .brand { font-size: 26px; }
  .hero-card { max-height: 60vh; overflow-y: auto; }
}

/* Respect a user's reduced-motion setting on the one animation the map has
   (marker pulse). The generated sheet already handles transitions; this is the
   imperative-safe belt to that braces. */
@media (prefers-reduced-motion: reduce) {
  .marker, .zone-marker, [data-marker] { animation: none !important; transition: none !important; }
}

/* ── Leaflet controls, sized for a thumb ──────────────────────────────────
   Leaflet's default zoom buttons are 30×30. The NN/g figure for a finger on a
   moving vehicle is 44×44, so the map controls are enlarged here rather than by
   rebuilding the control. The attribution stays small: it is a legal line, not a
   control, and shrinking it would be a WCAG 1.4.3 regression. */
.leaflet-control-zoom {
  margin: 12px 0 0 12px !important;
  border: 0 !important;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}
.leaflet-control-zoom a {
  width: 48px !important;
  height: 48px !important;
  line-height: 48px !important;
  font-size: 22px !important;
  color: var(--nt-text) !important;
  background: var(--nt-surface-glass) !important;
  border-bottom: 1px solid var(--nt-line) !important;
  font-weight: 500;
  user-select: none;
}
.leaflet-control-zoom a:hover { background: var(--nt-surface-2) !important; color: var(--nt-surge) !important; }
.leaflet-control-zoom a:focus-visible { outline: 2px solid var(--nt-surge); outline-offset: -2px; }
.leaflet-control-attribution {
  background: rgba(10, 14, 39, .82) !important;
  color: var(--nt-text-3) !important;
  font-size: 10px !important;
  padding: 1px 6px !important;
}
.leaflet-control-attribution a { color: var(--nt-text-2) !important; }

/* "Centre on me" — the control a driver reaches for when he is somewhere the
   map does not know. It is a button, not a gesture, because a driver has one
   thumb and is not going to discover a two-finger tap. */
.nt-locate {
  position: absolute;
  right: 12px;
  bottom: calc(var(--bottom-nav-height, 64px) + 12px);
  z-index: 500;
  min-width: 48px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 24px;
  border: 1px solid var(--nt-line);
  background: var(--nt-surface-glass);
  color: var(--nt-text);
  font-family: var(--nt-font-ui);
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  gap: 6px;
}
.nt-locate:active { transform: scale(.96); }
.nt-locate.locating { color: var(--nt-signal); }
.nt-locate.denied { color: var(--nt-danger); }