/* ParkPicker — map-first interface.
   Implements docs/design.md. Section numbers below refer to that document.

   No build step (spec 8.3), so this is plain CSS with custom properties.
   Every colour is a token; nothing downstream hard-codes a hex value. */

/* ------------------------------------------------------------------ fonts */
/* Heebo is variable, so one file per subset covers 400 and 700. Self-hosted
   because nothing on the server can run a bundler and a CDN is one more thing
   that can fail in a car park. */

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/heebo-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/heebo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------- tokens */
/* design.md section 3 */

:root {
  --pp-abyss:   #062334;
  --pp-deep:    #0B3C57;
  --pp-sea:     #0E6A93;
  --pp-sky:     #29A8DA;
  --pp-surf:    #7BE0D3;

  --pp-sun:     #F5A623;
  --pp-coral:   #E8553F;

  --pp-ink:     #10242F;
  --pp-ink-2:   #4A6373;
  --pp-line:    #D7E1E8;
  --pp-canvas:  #F4F8FA;
  --pp-surface: #FFFFFF;

  /* Evidence colours. These five are reserved: no other element may use them
     (design.md section 5). */
  --pp-measured: #0F7A47;  --pp-measured-bg: #E4F4EB;
  --pp-reported: #8A5A00;  --pp-reported-bg: #FBF0DC;
  --pp-estimate: #5B5FA8;  --pp-estimate-bg: #ECEDF9;
  --pp-unknown:  #5A6B78;  --pp-unknown-bg:  #EFF2F4;
  --pp-closed:   #9A2B2B;  --pp-closed-bg:   #FAEAEA;

  --pp-font: "Heebo", "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pp-radius: 14px;
  --pp-gap: 16px;
  --pp-shadow-1: 0 1px 2px rgba(6, 35, 52, .08), 0 2px 8px rgba(6, 35, 52, .06);
  --pp-shadow-2: 0 4px 16px rgba(6, 35, 52, .14);
  --pp-shadow-sheet: 0 -4px 24px rgba(6, 35, 52, .16);

  --pp-ease: cubic-bezier(.2, .8, .3, 1);
  --pp-ease-sheet: cubic-bezier(.32, .72, 0, 1);

  --pp-sheet-peek: 148px;

  /* Native controls — select popups, scrollbars, date pickers — are painted by
     the OS, not by this stylesheet. Without this the dark theme's light text
     lands on the system's white popup background and becomes unreadable. */
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pp-abyss: #E8F2F7;
    --pp-deep: #0A2B3D;
    --pp-sea: #3FA8D4;
    --pp-sky: #5FC5EC;
    --pp-surf: #2E7F76;

    --pp-sun: #FFC05C;
    --pp-coral: #FF8B76;

    --pp-ink: #E6EFF4;
    --pp-ink-2: #9FB4C1;
    --pp-line: #23404F;
    --pp-canvas: #071A24;
    --pp-surface: #0E2836;

    --pp-measured: #63D49A; --pp-measured-bg: #0C2E1E;
    --pp-reported: #E8B765; --pp-reported-bg: #33260F;
    --pp-estimate: #A3A7EC; --pp-estimate-bg: #1E2040;
    --pp-unknown:  #9FB4C1; --pp-unknown-bg:  #172A35;
    --pp-closed:   #F0908F; --pp-closed-bg:   #331919;

    --pp-shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
    --pp-shadow-2: 0 4px 16px rgba(0,0,0,.5);
    --pp-shadow-sheet: 0 -4px 24px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--pp-canvas);
  color: var(--pp-ink);
  font-family: var(--pp-font);
  font-size: 15px;
  line-height: 1.6;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

/* Hebrew needs more leading than Latin (design.md section 4). Set once from
   the lang attribute rather than per component. */
html[lang="en"] body { line-height: 1.5; }

:focus-visible {
  outline: 3px solid var(--pp-sky);
  outline-offset: 2px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 900;
  background: var(--pp-deep);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 8px;
}
.skip-link:focus { inset-inline-start: 0; }

/* ------------------------------------------------------------------- shell */
/* design.md section 2 */

.app {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr;
}

#map {
  position: absolute;
  inset: 0;
  background: var(--pp-canvas);
  z-index: 0;
}

/* The basemap is the stage, the price pills are the performance. Desaturating
   the tiles in CSS keeps roads and labels legible while draining the colour
   that would compete with the evidence palette (design.md section 6). */
.leaflet-tile-pane {
  filter: saturate(.32) brightness(1.06) contrast(.92);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-tile-pane {
    /* Inverting a light basemap is the standard way to get a dark one without
       a second tile source; the hue rotation puts water back to blue. */
    filter: invert(1) hue-rotate(180deg) saturate(.28) brightness(.92) contrast(.9);
  }
}

/* Leaflet paints its own controls; keep them out of the sheet's way. */
.leaflet-control-container .leaflet-bottom { bottom: calc(var(--pp-sheet-peek) + 12px); }
.leaflet-control-attribution {
  font-size: 10px;
  background: color-mix(in srgb, var(--pp-surface) 85%, transparent);
  color: var(--pp-ink-2);
}

/* ------------------------------------------------------------ top controls */

.top-bar {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 400;
  padding: max(12px, env(safe-area-inset-top)) 12px 0;
  display: grid;
  gap: 8px;
  pointer-events: none;
}
.top-bar > * { pointer-events: auto; }

.search-pill {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: 999px;
  box-shadow: var(--pp-shadow-2);
  padding: 4px 6px 4px 12px;
  min-height: 52px;
}

.search-pill .glyph { color: var(--pp-ink-2); font-size: 18px; line-height: 1; }

.search-pill select {
  border: 0;
  background: transparent;
  color: var(--pp-ink);
  font: inherit;
  font-weight: 700;
  min-height: 44px;
  width: 100%;
  padding-inline: 2px;
  text-overflow: ellipsis;
}
.search-pill select:focus { outline: none; }
.search-pill:focus-within { outline: 3px solid var(--pp-sky); outline-offset: 2px; }

/* The popup is drawn by the OS against its own background, so the option
   colours must be stated outright rather than inherited from the pill. */
.search-pill select option {
  background: var(--pp-surface);
  color: var(--pp-ink);
  font-weight: 400;
}

.icon-btn {
  border: 0;
  background: var(--pp-canvas);
  color: var(--pp-sea);
  border-radius: 999px;
  width: 44px; height: 44px;
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.icon-btn:hover { background: color-mix(in srgb, var(--pp-sky) 18%, var(--pp-canvas)); }
.icon-btn[disabled] { opacity: .5; cursor: progress; }

.lang-switch { display: flex; gap: 4px; }
.lang-btn {
  border: 1px solid var(--pp-line);
  background: var(--pp-surface);
  color: var(--pp-ink-2);
  border-radius: 999px;
  padding: 0 12px;
  min-height: 36px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.lang-btn.is-active { background: var(--pp-deep); color: #fff; border-color: transparent; font-weight: 700; }

/* Time and filter bar, always visible above the sheet. */
.trip-bar {
  position: absolute;
  inset-inline: 0;
  bottom: calc(var(--pp-sheet-peek) + 12px);
  z-index: 400;
  padding: 0 12px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: opacity 180ms var(--pp-ease);
}
.trip-bar > * { pointer-events: auto; }
.app[data-sheet="full"] .trip-bar { opacity: 0; pointer-events: none; }

.trip-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: 999px;
  box-shadow: var(--pp-shadow-2);
  padding: 8px 14px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pp-ink);
  cursor: pointer;
}
.trip-chip .sep { color: var(--pp-line); }
.trip-chip .muted { color: var(--pp-ink-2); font-weight: 400; }

/* Offered after the user pans away from the last search. Panning must not
   silently refetch: it would surprise the user and burn the rate limit. */
.area-bar {
  position: absolute;
  inset-inline: 0;
  top: max(84px, calc(env(safe-area-inset-top) + 72px));
  z-index: 420;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.area-bar[hidden] { display: none; }
.area-btn {
  pointer-events: auto;
  border: 1px solid var(--pp-line);
  background: var(--pp-surface);
  color: var(--pp-sea);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  padding: 0 18px;
  min-height: 42px;
  box-shadow: var(--pp-shadow-2);
  cursor: pointer;
}

/* ------------------------------------------------------------- price pills */
/* design.md section 6 — the core interaction */

.pp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 9px;
  border-radius: 15px;
  background: var(--pp-surface);
  border: 1.5px solid var(--pp-unknown);
  box-shadow: var(--pp-shadow-1);
  font-family: var(--pp-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--pp-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  /* 44px hit area around a 30px pill, without changing its look. */
  position: relative;
  transition: transform 200ms var(--pp-ease), box-shadow 200ms var(--pp-ease);
}
.pp-pill::after {
  content: "";
  position: absolute;
  inset: -7px -4px;
}

.pp-pill .ev { font-size: 11px; line-height: 1; }

.pp-pill[data-evidence="provider_live_count"] { border-color: var(--pp-measured); }
.pp-pill[data-evidence="provider_live_count"] .ev { color: var(--pp-measured); }
.pp-pill[data-evidence="community_report"] { border-color: var(--pp-reported); border-style: dashed; }
.pp-pill[data-evidence="community_report"] .ev { color: var(--pp-reported); }
.pp-pill[data-evidence="model_estimate"] { border-color: var(--pp-estimate); border-style: dotted; }
.pp-pill[data-evidence="model_estimate"] .ev { color: var(--pp-estimate); }
.pp-pill[data-evidence="unknown"] { border-color: var(--pp-unknown); }
.pp-pill[data-evidence="unknown"] .ev { color: var(--pp-unknown); }

/* Exactly one of these on screen: the cheapest verified lot in view. */
.pp-pill.is-best {
  background: var(--pp-sea);
  border-color: var(--pp-sea);
  color: #fff;
  box-shadow: var(--pp-shadow-2);
}
.pp-pill.is-best .ev { color: #fff; }

.pp-pill.is-selected {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px var(--pp-sky), var(--pp-shadow-2);
  z-index: 500;
}

.pp-pill.is-unpriced { color: var(--pp-ink-2); }

/* Collapsed marker at low zoom, where pills would collide.
   display:block matters: a span is inline, and width/height are ignored on
   inline boxes, which renders the dot as a thin bar. */
.pp-dot {
  display: block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--pp-surface);
  border: 2.5px solid var(--pp-unknown);
  box-shadow: var(--pp-shadow-1);
  cursor: pointer;
}
.pp-dot[data-evidence="provider_live_count"] { border-color: var(--pp-measured); }
.pp-dot[data-evidence="community_report"] { border-color: var(--pp-reported); }
.pp-dot[data-evidence="model_estimate"] { border-color: var(--pp-estimate); }

/* The user's own position — warm, so it never reads as a lot. */
.pp-me {
  display: block;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--pp-sun);
  border: 3px solid var(--pp-surface);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--pp-sun) 25%, transparent);
}

/* Results arriving: staggered, so results feel found rather than listed. */
@keyframes pp-pill-in {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}
.pp-marker-enter .pp-pill,
.pp-marker-enter .pp-dot {
  animation: pp-pill-in 260ms var(--pp-ease) both;
  animation-delay: var(--pp-stagger, 0ms);
}

@keyframes pp-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
.pp-pill.is-pulsing { animation: pp-pulse 400ms ease-in-out 1; }

/* -------------------------------------------------------------------- sheet */
/* design.md section 2 */

.sheet {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 500;
  height: 92vh;
  background: var(--pp-surface);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--pp-shadow-sheet);
  display: grid;
  grid-template-rows: auto 1fr;
  /* Only transform is animated: height would force layout every frame while
     the map repaints. */
  transform: translateY(calc(92vh - var(--pp-sheet-peek)));
  transition: transform 280ms var(--pp-ease-sheet);
  touch-action: none;
}
.sheet.is-dragging { transition: none; }

.app[data-sheet="half"] .sheet { transform: translateY(45vh); }
.app[data-sheet="full"] .sheet { transform: translateY(0); }

.sheet-handle {
  border: 0;
  background: transparent;
  width: 100%;
  padding: 10px 0 6px;
  cursor: grab;
  display: grid;
  place-items: center;
  min-height: 44px;
}
.sheet-handle::before {
  content: "";
  width: 44px; height: 5px;
  border-radius: 3px;
  background: var(--pp-line);
}
.sheet-handle:active { cursor: grabbing; }

.sheet-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--pp-gap) calc(24px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
/* Scrolling the list is only sensible once the sheet is open. */
.app[data-sheet="peek"] .sheet-body { overflow-y: hidden; }

.sheet-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
}
.sheet-summary h2 { font-size: 15px; margin: 0; }
.sheet-summary .count { color: var(--pp-ink-2); font-size: 13px; }

/* -------------------------------------------------------------------- cards */

.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.result {
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  padding: 14px;
  background: var(--pp-surface);
  content-visibility: auto;
  contain-intrinsic-size: auto 150px;
  transition: border-color 160ms var(--pp-ease), box-shadow 160ms var(--pp-ease);
}
.result.is-selected {
  border-color: var(--pp-sky);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pp-sky) 35%, transparent);
}

.result-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }

.result-name {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.result-meta { margin: 0; color: var(--pp-ink-2); font-size: 13px; }

.price { text-align: end; white-space: nowrap; }
.price-amount {
  display: block;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
/* Same size and weight as a real price, so an unverified lot keeps the card's
   rhythm and its dignity (design.md section 5). */
.price-amount.is-unknown { color: var(--pp-ink-2); }
.price-note { font-size: 12px; color: var(--pp-ink-2); }

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--pp-line);
  background: var(--pp-unknown-bg);
  color: var(--pp-ink-2);
}
.badge .ev { font-size: 11px; }

/* Shape, colour and words are three independent signals; none is decorative. */
.badge[data-evidence="provider_live_count"] {
  background: var(--pp-measured-bg); color: var(--pp-measured); border-color: currentColor;
}
.badge[data-evidence="community_report"] {
  background: var(--pp-reported-bg); color: var(--pp-reported); border-color: currentColor; border-style: dashed;
}
.badge[data-evidence="model_estimate"] {
  background: var(--pp-estimate-bg); color: var(--pp-estimate); border-color: currentColor; border-style: dotted;
}
.badge[data-evidence="unknown"] {
  background: var(--pp-unknown-bg); color: var(--pp-unknown);
}
.badge.badge-age { background: transparent; border-color: transparent; color: var(--pp-ink-2); font-size: 12px; padding-inline: 2px; }
.badge.badge-stale { background: var(--pp-reported-bg); color: var(--pp-reported); border-color: currentColor; }

.reasons { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; color: var(--pp-ink-2); }
.reasons li { padding-inline-start: 14px; position: relative; }
.reasons li::before { content: "·"; position: absolute; inset-inline-start: 4px; font-weight: 700; }

.result-actions { display: flex; gap: 8px; }

.btn {
  font: inherit;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 10px 14px;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-primary {
  background: linear-gradient(160deg, var(--pp-sea), var(--pp-deep));
  color: #fff;
  font-weight: 700;
  flex: 1 1 auto;
}
.btn-quiet { background: var(--pp-canvas); color: var(--pp-sea); border-color: var(--pp-line); flex: 1 1 auto; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ------------------------------------------------------------------- states */
/* design.md section 8 */

.state {
  text-align: center;
  padding: 28px 16px;
  color: var(--pp-ink-2);
}
.state h3 { margin: 0 0 6px; color: var(--pp-ink); font-size: 16px; }
.state p { margin: 0 0 14px; font-size: 14px; }

.skeleton { display: grid; gap: 10px; }
.skeleton-card {
  height: 118px;
  border-radius: var(--pp-radius);
  background: linear-gradient(100deg, var(--pp-canvas) 30%, var(--pp-unknown-bg) 50%, var(--pp-canvas) 70%);
  background-size: 250% 100%;
  animation: pp-breathe 1.6s ease-in-out infinite;
}
@keyframes pp-breathe {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}

.banner {
  position: absolute;
  inset-inline: 12px;
  top: max(76px, calc(env(safe-area-inset-top) + 64px));
  /* Above the sheet: a banner explaining that the map failed is useless if the
     sheet it just expanded covers it. */
  z-index: 600;
  background: var(--pp-reported-bg);
  color: var(--pp-reported);
  border: 1px solid currentColor;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  box-shadow: var(--pp-shadow-1);
}
.banner[hidden] { display: none; }

/* ------------------------------------------------------------------ dialogs */

dialog {
  border: 0;
  border-radius: 18px;
  padding: 0;
  max-width: 520px;
  width: min(calc(100% - 24px), 520px);
  background: var(--pp-surface);
  color: var(--pp-ink);
  box-shadow: var(--pp-shadow-2);
}
dialog::backdrop { background: rgba(6, 35, 52, .55); backdrop-filter: blur(2px); }

.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 8px;
}
.dialog-head h2 { margin: 0; font-size: 18px; }
.dialog-body { padding: 0 16px 16px; }

.explain {
  background: var(--pp-canvas);
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0;
}
.explain h3 { margin: 0 0 8px; font-size: 14px; }
.explain dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  font-size: 14px;
}
.explain dt { color: var(--pp-ink-2); }
.explain dd { margin: 0; }
.rule-list { margin: 8px 0 0; padding-inline-start: 18px; font-size: 13px; color: var(--pp-ink-2); }

.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.field input, .field select {
  width: 100%;
  font: inherit;
  padding: 10px;
  min-height: 44px;
  border: 1px solid var(--pp-line);
  border-radius: 10px;
  background: var(--pp-surface);
  color: var(--pp-ink);
}
.field .hint { margin: 6px 0 0; font-size: 12px; color: var(--pp-ink-2); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.disclaimer {
  font-size: 12px;
  color: var(--pp-ink-2);
  border-top: 1px solid var(--pp-line);
  padding-top: 10px;
  margin-top: 14px;
}

/* -------------------------------------------------------------- wide screens */
/* design.md section 2 — the sheet becomes a side panel */

@media (min-width: 601px) {
  :root { --pp-sheet-peek: 0px; }

  .sheet {
    inset-inline-start: 0;
    inset-inline-end: auto;
    top: 0;
    bottom: 0;
    width: 380px;
    height: 100%;
    border-radius: 0;
    transform: none !important;
    transition: none;
    box-shadow: var(--pp-shadow-2);
    grid-template-rows: auto 1fr;
  }
  .sheet-handle { display: none; }
  .app[data-sheet="peek"] .sheet-body { overflow-y: auto; }

  #map { inset-inline-start: 380px; }

  .top-bar {
    inset-inline-start: 392px;
    inset-inline-end: 12px;
    /* A search control stretched across a desktop map reads as a browser
       chrome bar, not as a control. Keep it the size of its content. */
    max-width: 460px;
  }

  .trip-bar { inset-inline-start: 392px; bottom: 16px; }
  .app[data-sheet="full"] .trip-bar { opacity: 1; pointer-events: auto; }

  .sheet-body { padding-top: 12px; }

  /* The language switch belongs with the panel on desktop, not floating over
     the map where it collides with pills. */
  .lang-switch { justify-content: flex-start; }
}

@media (min-width: 1025px) {
  .sheet { width: 420px; }
  #map { inset-inline-start: 420px; }
  .top-bar, .trip-bar { inset-inline-start: 432px; }
}

/* --------------------------------------------------------------- reduced motion */
/* Removes movement, never information: pills still appear in rank order. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .pp-pill, .badge, .result { border-width: 2px; }
  .pp-pill.is-best { forced-color-adjust: none; }
}