/* ResponseOne UI refresh. Loaded after the inline styles in index.html. */
:root {
  --ui-ink: #102b30;
  --ui-muted: #486267;
  --ui-teal: #087d71;
  --ui-teal-dark: #06665e;
  --ui-surface: #ffffff;
  --ui-line: #d6e4e0;
  --ui-shadow: 0 8px 28px rgba(7, 31, 34, .2);
  --ui-edge: max(12px, env(safe-area-inset-left));
  --ui-top: max(12px, env(safe-area-inset-top));
  --ui-bottom: max(12px, env(safe-area-inset-bottom));
}

html, body { background: #dce9e5; }
button, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, a:focus-visible,
summary:focus-visible, .suggestions li:focus-visible {
  outline: 3px solid #ecaa32;
  outline-offset: 2px;
}

.app { height: 100dvh; isolation: isolate; }
#map { inset: 0; }
.toolbar {
  top: var(--ui-top);
  left: var(--ui-edge);
  right: max(12px, env(safe-area-inset-right));
  max-width: 670px;
  gap: 8px;
  filter: drop-shadow(0 3px 12px rgba(7, 31, 34, .18));
}
.logo, .mode, .search { box-shadow: none; }
.logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #102f32;
  font-size: 15px;
  letter-spacing: -.03em;
}
.search {
  height: 52px;
  padding: 4px 4px 4px 16px;
  border: 1px solid rgba(16, 43, 48, .08);
  border-radius: 16px;
  background: var(--ui-surface);
}
.search:focus-within {
  outline: 3px solid #ecaa32;
  outline-offset: 2px;
}
.search input { font-size: 16px; color: var(--ui-ink); }
.search input::placeholder { color: #647a7d; opacity: 1; }
.search button {
  flex: none;
  min-width: 48px;
  min-height: 44px;
  padding: 0 11px;
  border-radius: 12px;
  background: var(--ui-teal);
}
.mode {
  min-width: 99px;
  min-height: 48px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background: #102f32;
  font-size: 13px;
  white-space: nowrap;
}
.mode:hover, .end-nav:hover { background: #1d4b4d; }
.search button:hover, .go:hover { background: var(--ui-teal-dark); }

.suggestions {
  top: calc(var(--ui-top) + 59px);
  left: calc(var(--ui-edge) + 56px);
  right: max(12px, env(safe-area-inset-right));
  max-width: 460px;
  max-height: min(40dvh, 330px);
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  box-shadow: var(--ui-shadow);
}
.suggestions li { min-height: 48px; line-height: 1.3; }

.locate, .manual-start, .search-fallback, .map-style-toggle {
  border: 1px solid var(--ui-line);
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow);
}
.locate {
  top: calc(var(--ui-top) + 65px);
  right: max(12px, env(safe-area-inset-right));
  min-height: 48px;
  border-radius: 14px;
  font-size: 13px;
}
.manual-start, .search-fallback {
  top: calc(var(--ui-top) + 120px);
  border-radius: 12px;
  font-size: 13px;
}
.manual-start { right: max(12px, env(safe-area-inset-right)); }
.search-fallback { left: var(--ui-edge); }
.map-style-toggle { right: max(12px, env(safe-area-inset-right)); }
.status {
  top: calc(var(--ui-top) + 66px);
  left: var(--ui-edge);
  right: 100px;
  width: fit-content;
  max-width: min(440px, calc(100vw - 124px));
  padding: 8px 11px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  box-shadow: var(--ui-shadow);
  font-size: 12px;
  line-height: 1.35;
  color: var(--ui-ink);
}
.locate.location-problem {
  max-width: min(58vw, 270px);
  border-color: #ae761a;
  background: #fff6e5;
  color: #69420a;
  font-size: 12px;
}
.app:has(.locate.location-problem) .status {
  top: calc(var(--ui-top) + 66px);
  right: calc(min(58vw, 270px) + 20px);
  max-width: min(300px, calc(42vw - 30px));
}
.app:has(.locate.location-problem) .manual-start {
  top: calc(var(--ui-top) + 136px);
}

.card, .intro, .recovery, .map-pick, .arrival, .feedback {
  left: var(--ui-edge);
  right: max(12px, env(safe-area-inset-right));
  bottom: var(--ui-bottom);
  max-width: 400px;
  border: 1px solid rgba(16, 43, 48, .08);
  border-radius: 20px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow);
}
.card {
  max-height: min(45dvh, 430px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 15px;
}
.card-head > div { min-width: 0; flex: 1; }
.card h1 {
  max-width: 100%;
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  line-height: 1.18;
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -.02em;
}
.card p { font-size: 12px; line-height: 1.35; }
.card #routeAddress {
  max-width: 100%;
  margin: 3px 0 2px;
  overflow: hidden;
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card #routeAddress[hidden] { display: none; }
.close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: #f5f9f8;
}
.metrics { gap: 14px; margin: 10px 0; font-size: 15px; }
.route-metric { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.metric-label { color: var(--ui-muted); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.metrics #routeTime { display: block; color: var(--ui-ink); font-size: 23px; font-weight: 800; letter-spacing: -.025em; }
.metrics #routeDistance { display: block; color: var(--ui-ink); font-size: 17px; font-weight: 700; }
.alternatives { gap: 8px; margin: 10px 0; scrollbar-width: thin; }
.alternatives button {
  flex: 0 0 auto;
  min-width: min(148px, 42vw);
  min-height: 60px;
  border-color: var(--ui-line);
  border-radius: 12px;
  background: #f6faf9;
}
.alternatives button[aria-pressed=true] {
  border-color: var(--ui-teal);
  background: #e9f7f3;
}
.route-choice-head strong { font-size: 16px; }
.go {
  position: sticky;
  bottom: 0;
  z-index: 1;
  min-height: 52px;
  padding: 12px;
  border-radius: 13px;
  background: var(--ui-teal);
  font-size: 16px;
  box-shadow: 0 5px 14px rgba(8, 125, 113, .18);
}
.limits { margin-top: 10px; }
.limits summary { color: var(--ui-muted); font-size: 12px; }

.nav-panel {
  top: var(--ui-top);
  left: var(--ui-edge);
  right: max(12px, env(safe-area-inset-right));
  max-width: 600px;
  min-height: 82px;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  background: #102f32;
  box-shadow: 0 8px 24px rgba(7, 31, 34, .3);
}
.nav-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 50px;
  border-radius: 12px;
  background: #50d4c2;
  color: #103133;
  font: 800 33px/1 system-ui;
}
.nav-copy strong {
  font-size: clamp(18px, 5vw, 25px);
  line-height: 1.14;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.nav-copy span {
  margin-top: 5px;
  color: #d2ebe5;
  font-size: 14px;
  line-height: 1.25;
}
.end-nav {
  min-width: 48px;
  min-height: 44px;
  border-color: rgba(255, 255, 255, .48);
  border-radius: 11px;
  font-size: 13px;
}
.navigating .locate { top: calc(var(--ui-top) + 94px); }
.navigating .status {
  top: calc(var(--ui-top) + 96px);
  max-width: min(390px, calc(100vw - 124px));
}
body.navigating .app:has(.locate.location-problem) .status {
  top: calc(var(--ui-top) + 96px);
}
.trip-bar {
  left: var(--ui-edge);
  right: max(12px, env(safe-area-inset-right));
  bottom: var(--ui-bottom);
  max-width: 530px;
  min-height: 72px;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(16, 43, 48, .08);
  border-radius: 18px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}
.trip-bar strong { font-size: 22px; line-height: 1; color: var(--ui-ink); }
.trip-meta { font-size: 12px; line-height: 1.25; }
.trip-meta span { color: var(--ui-muted); }
.trip-meta #trafficState { color: #795000; }
.trip-bar button {
  flex: none;
  min-height: 44px;
  padding: 8px 9px;
  border-radius: 11px;
  font-size: 12px;
  background: #f0f7f5;
}

.mapbox-brand {
  top: auto;
  bottom: calc(var(--ui-bottom) + 82px);
  left: var(--ui-edge);
  width: 104px;
  height: 44px;
}
body.navigating .mapbox-brand,
body:has(#routeCard:not([hidden])) .mapbox-brand,
body:has(#intro:not([hidden])) .mapbox-brand,
body:has(#recovery:not([hidden])) .mapbox-brand,
body:has(#mapPickPanel:not([hidden])) .mapbox-brand {
  top: calc(var(--ui-top) + 132px);
  bottom: auto;
}
body.navigating .maplibregl-ctrl-bottom-right,
body:has(#routeCard:not([hidden])) .maplibregl-ctrl-bottom-right,
body:has(#intro:not([hidden])) .maplibregl-ctrl-bottom-right,
body:has(#recovery:not([hidden])) .maplibregl-ctrl-bottom-right,
body:has(#mapPickPanel:not([hidden])) .maplibregl-ctrl-bottom-right {
  top: calc(var(--ui-top) + 132px);
  right: max(12px, env(safe-area-inset-right));
  bottom: auto;
  left: auto;
  max-width: min(45vw, 320px);
}
body.free-staging.navigating .maplibregl-ctrl-bottom-right,
body.free-staging:has(#routeCard:not([hidden])) .maplibregl-ctrl-bottom-right {
  top: calc(var(--ui-top) + 156px);
  right: max(12px, env(safe-area-inset-right));
  bottom: auto;
  left: auto;
}

dialog { border-radius: 18px; }
dialog::backdrop { background: rgba(5, 24, 26, .66); }
.intro, .recovery, .map-pick, .arrival, .feedback { max-height: min(70dvh, 520px); overflow-y: auto; }
.intro-actions button, .recovery button, .map-pick-actions button,
.arrival button, .feedback button { min-height: 44px; }

@media (max-width: 480px) {
  .toolbar { gap: 6px; }
  .logo { width: 44px; }
  .mode { min-width: 88px; padding: 0 8px; font-size: 12px; }
  .search { min-width: 0; padding-left: 11px; }
  .search button { padding: 0 9px; }
  .suggestions { left: calc(var(--ui-edge) + 50px); }
  .locate:not(.location-problem) {
    width: 48px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0;
  }
  .locate:not(.location-problem)::first-letter { font-size: 25px; }
  .trip-bar { gap: 6px; }
  .trip-bar button { padding: 8px 7px; }
}
@media (max-width: 360px) {
  .logo { width: 42px; }
  .mode { min-width: 82px; padding: 0 5px; }
  .search { padding-left: 8px; }
  .search button { min-width: 44px; }
  .nav-panel { align-items: flex-start; padding: 11px; }
  .nav-copy strong { font-size: 17px; }
  .nav-copy span { font-size: 13px; }
  .trip-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "eta meta" "voice overview";
    gap: 8px;
  }
  .trip-bar #tripEta { grid-area: eta; }
  .trip-bar .trip-meta { grid-area: meta; }
  .trip-bar #voice { grid-area: voice; }
  .trip-bar #overview { grid-area: overview; }
  .trip-bar button { width: 100%; }
}
@media (max-height: 620px) and (orientation: portrait) {
  .card { max-height: 43dvh; }
  .nav-panel { min-height: 72px; }
  .navigating .locate { top: calc(var(--ui-top) + 84px); }
  .navigating .status { top: calc(var(--ui-top) + 86px); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .toolbar { left: var(--ui-edge); right: max(12px, env(safe-area-inset-right)); max-width: min(57vw, 620px); }
  .locate { top: calc(var(--ui-top) + 62px); }
  .status { top: calc(var(--ui-top) + 62px); max-width: min(44vw, 360px); }
  .card, .intro, .recovery, .map-pick, .arrival, .feedback {
    left: var(--ui-edge);
    right: auto;
    width: min(43vw, 380px);
    max-width: none;
    max-height: calc(100dvh - var(--ui-top) - var(--ui-bottom));
  }
  .card { padding: 12px; }
  body.navigating .nav-panel,
  body.navigating .trip-bar {
    left: var(--ui-edge);
    right: auto;
    width: min(43vw, 380px);
    max-width: none;
  }
  body.navigating .nav-panel { min-height: 70px; padding: 10px; }
  body.navigating .nav-copy strong { font-size: 17px; }
  body.navigating .nav-copy span { font-size: 12px; }
  body.navigating .locate { top: var(--ui-top); }
  body.navigating .status {
    top: calc(var(--ui-top) + 82px);
    left: auto;
    right: max(12px, env(safe-area-inset-right));
    width: fit-content;
    max-width: 42vw;
  }
  body.navigating .mapbox-brand,
  body:has(#routeCard:not([hidden])) .mapbox-brand {
    top: auto;
    bottom: var(--ui-bottom);
    left: auto;
    right: max(12px, env(safe-area-inset-right));
  }
  body.navigating .maplibregl-ctrl-bottom-right,
  body:has(#routeCard:not([hidden])) .maplibregl-ctrl-bottom-right {
    top: auto;
    right: max(122px, calc(env(safe-area-inset-right) + 110px));
    bottom: var(--ui-bottom);
    left: auto;
    max-width: 30vw;
  }
}

/* Portrait navigation: keep the route legible while leaving the map in view. */
@media (max-width: 600px) and (orientation: portrait) {
  /* The test-mode control stays operable, but does not consume the search field. */
  .free-staging .toolbar .mode {
    flex: none;
    min-width: 62px;
    width: 62px;
    max-width: 62px;
    padding: 0;
    font-size: 0;
  }
  .free-staging .toolbar .mode[aria-label*="normal"]::after {
    content: 'R test';
    font: 700 12px/1 system-ui;
  }
  .free-staging .toolbar .mode[aria-label*="responder"]::after {
    content: 'N test';
    font: 700 12px/1 system-ui;
  }
  .nav-panel {
    min-height: 72px;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 16px;
  }
  .nav-copy strong {
    font-size: clamp(17px, 4.8vw, 21px);
    line-height: 1.18;
    text-wrap: pretty;
  }
  .nav-copy span {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.2;
  }
  .end-nav {
    min-width: 44px;
    min-height: 44px;
    padding: 7px 9px;
  }
  .navigating .locate {
    top: calc(var(--ui-top) + 82px);
    width: 44px;
    min-height: 44px;
    height: 44px;
  }
  .free-staging.navigating .locate {
    top: auto;
    bottom: calc(var(--ui-bottom) + 136px);
    right: max(12px, env(safe-area-inset-right));
  }
  .navigating .status {
    top: calc(var(--ui-top) + 82px);
    right: 68px;
    max-width: calc(100vw - var(--ui-edge) - 80px);
    margin: 0;
  }
  .navigating .locate.location-problem {
    width: auto;
    height: auto;
    min-height: 44px;
    max-width: min(70vw, 270px);
    font-size: 12px;
  }
  body.navigating .app:has(.locate.location-problem) .status {
    top: calc(var(--ui-top) + 138px);
    right: max(12px, env(safe-area-inset-right));
    max-width: calc(100vw - var(--ui-edge) - 12px);
  }
  .trip-bar {
    min-height: 64px;
    gap: 6px;
    padding: 7px 9px;
    border-radius: 16px;
  }
  .trip-bar strong { font-size: 19px; }
  .trip-meta { font-size: 11px; }
  .trip-bar button {
    min-height: 44px;
    padding: 7px 6px;
    font-size: 12px;
  }
  body.navigating .mapbox-brand {
    top: auto;
    bottom: calc(var(--ui-bottom) + 72px);
    left: var(--ui-edge);
  }
  body.navigating .maplibregl-ctrl-bottom-right,
  body.free-staging.navigating .maplibregl-ctrl-bottom-right {
    top: auto;
    bottom: calc(var(--ui-bottom) + 72px);
    right: max(12px, env(safe-area-inset-right));
    left: auto;
    max-width: calc(100vw - 140px);
  }
  .card { max-height: min(39dvh, 380px); }
}

@media (max-width: 360px) and (orientation: portrait) {
  .nav-icon { display: none; }
  .trip-bar { gap: 4px 8px; }
  .trip-bar strong { font-size: 18px; }
  body:has(#routeCard:not([hidden])) .maplibregl-ctrl-bottom-right {
    top: calc(var(--ui-top) + 184px);
    right: max(12px, env(safe-area-inset-right));
    bottom: auto;
    left: auto;
    max-width: calc(100vw - 24px);
  }
  body.navigating .mapbox-brand,
  body.navigating .maplibregl-ctrl-bottom-right,
  body.free-staging.navigating .maplibregl-ctrl-bottom-right {
    bottom: calc(var(--ui-bottom) + 118px);
  }
  body.free-staging.navigating .maplibregl-ctrl-bottom-right {
    left: max(12px, env(safe-area-inset-left));
    right: auto;
  }
}

/* Phone cockpit: the map is the canvas, not the panels. */
@media (max-width: 600px) and (orientation: portrait) {
  .card { max-height: min(34dvh, 290px); padding: 12px 14px 14px; border-radius: 20px; }
  .card h1 { font-size: 18px; }
  .card #routeAddress { font-size: 12px; }
  .card #routeProvider { font-size: 11px; }
  .card .metrics { margin: 7px 0 9px; }
  .card .go { min-height: 50px; }
  .card .limits { margin-top: 7px; }
  .navigating .nav-panel { min-height: 68px; padding: 8px 10px; gap: 9px; border-radius: 15px; }
  .navigating .nav-icon { width: 38px; height: 44px; font-size: 29px; }
  .navigating .nav-copy strong { font-size: clamp(16px, 4.6vw, 20px); }
  .navigating .nav-copy span { font-size: 12px; }
  .navigating .trip-bar { display: flex; min-height: 58px; padding: 6px 8px 6px 12px; gap: 7px; border-radius: 15px; }
  .navigating .trip-bar strong { font-size: 19px; }
  .navigating .trip-meta { font-size: 11px; }
  .navigating .trip-bar button { flex: none; width: 44px; height: 44px; min-width: 44px; padding: 0; overflow: hidden; font-size: 0; }
  .navigating .trip-bar #voice::after { content: '🔊'; font: 700 18px/1 system-ui; }
  .navigating .trip-bar #voice[aria-label*="Unmute"]::after { content: '🔇'; }
  .navigating .trip-bar #overview::after { content: 'Map'; font: 700 12px/1 system-ui; }
  .free-staging.navigating .locate { bottom: calc(var(--ui-bottom) + 78px); }
  body.navigating .maplibregl-ctrl-bottom-right,
  body.free-staging.navigating .maplibregl-ctrl-bottom-right { bottom: calc(var(--ui-bottom) + 62px); }
}

/* Short landscape screens need the same compact trip actions as portrait phones. */
@media (max-height: 520px) and (orientation: landscape) {
  body.navigating .trip-bar { gap: 6px; padding: 7px 9px; }
  body.navigating .trip-bar strong { font-size: 19px; }
  body.navigating .trip-meta { min-width: 0; font-size: 11px; }
  body.navigating .trip-bar button {
    flex: none;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }
  body.navigating .trip-bar #voice::after { content: '🔊'; font: 700 18px/1 system-ui; }
  body.navigating .trip-bar #voice[aria-label*="Unmute"]::after { content: '🔇'; }
  body.navigating .trip-bar #overview::after { content: 'Map'; font: 700 12px/1 system-ui; }
}

/* Field UI: quiet chrome, readable directions, and a permanently visible map. */
:root {
  --ui-ink: #10282d;
  --ui-muted: #526b70;
  --ui-teal: #087f73;
  --ui-teal-dark: #086d64;
  --ui-line: #d7e5e2;
  --ui-shadow: 0 10px 34px rgba(13, 39, 43, .18), 0 2px 8px rgba(13, 39, 43, .07);
}
.app { font-feature-settings: "tnum"; }
.toolbar { filter: none; }
.logo {
  background: #10373a;
  color: #f6fdfa;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--ui-shadow);
  font-weight: 850;
}
.search {
  border: 1px solid #ccded9;
  box-shadow: var(--ui-shadow);
}
.search:focus-within { border-color: #087f73; }
.search button, .go {
  background: #087f73;
  color: white;
  font-weight: 760;
}
.search button:active, .go:active, .trip-bar button:active, .locate:active { transform: scale(.98); }
.mode {
  background: #f7fbf9;
  border: 1px solid #bcd5cf;
  color: #174448;
  box-shadow: var(--ui-shadow);
}
.mode:hover { background: #eaf5f1; }
.locate, .manual-start, .search-fallback, .map-style-toggle {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  box-shadow: var(--ui-shadow);
}
.status {
  border-left: 3px solid #087f73;
  background: rgba(255,255,255,.97);
  box-shadow: var(--ui-shadow);
}
.card, .intro, .recovery, .map-pick, .arrival, .feedback {
  border: 1px solid #e1ebe8;
  box-shadow: 0 16px 48px rgba(10, 33, 37, .22), 0 2px 8px rgba(10, 33, 37, .06);
}
.card { scrollbar-width: thin; scrollbar-color: #b5cec7 transparent; }
.card h1 { color: #10282d; letter-spacing: -.035em; }
.card #routeProvider { color: #637b7d; }
.card .metrics {
  padding: 10px 0;
  border-top: 1px solid #e7eeec;
  border-bottom: 1px solid #e7eeec;
}
.metric-label { color: #667d7e; text-transform: uppercase; letter-spacing: .08em; }
.go { box-shadow: 0 5px 14px rgba(8, 127, 115, .21); }
.limits summary { color: #597074; }
.nav-panel {
  border: 1px solid rgba(255,255,255,.12);
  background: #102e33;
  box-shadow: 0 12px 32px rgba(4, 25, 28, .32);
}
.nav-copy strong { font-weight: 760; }
.nav-copy span { color: #c5e3dc; }
.nav-icon { background: #59d2bd; }
.end-nav { border-color: #688b89; color: #e7f4f0; }
.trip-bar { border-color: #e1ebe8; box-shadow: var(--ui-shadow); }
.trip-bar button { border-color: #c8dcd6; color: #174448; }
.suggestions { border: 1px solid #c8dad5; box-shadow: var(--ui-shadow); }
.suggestions li[aria-selected=true] { background: #e9f6f1; }
dialog { border: 1px solid #e1ebe8; box-shadow: 0 24px 72px rgba(4, 25, 28, .28); }
dialog::backdrop { background: rgba(4, 25, 28, .52); backdrop-filter: blur(3px); }

@media (max-width: 600px) and (orientation: portrait) {
  /* The destination gets a full line; every primary control remains exposed. */
  .app .toolbar {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: 44px 52px;
    gap: 8px;
    align-items: stretch;
  }
  .app .toolbar .logo { grid-column: 1; grid-row: 1; width: 44px; height: 44px; }
  .app .toolbar .mode,
  .free-staging .app .toolbar .mode {
    position: static;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: auto;
    min-width: 116px;
    max-width: 152px;
    height: 44px;
    min-height: 44px;
    padding: 0 13px;
    font: 700 13px/1 system-ui;
    white-space: nowrap;
  }
  .free-staging .app .toolbar .mode::after { content: none; }
  .app .toolbar .search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: 52px;
    padding-left: 16px;
    border-radius: 16px;
  }
  .navigating .app .toolbar { display: none; }
  .search input { font-size: 16px; }
  .app .suggestions {
    top: calc(var(--ui-top) + 112px);
    left: var(--ui-edge);
    right: max(12px, env(safe-area-inset-right));
    max-width: none;
    max-height: min(42dvh, 330px);
  }
  .app .locate:not(.location-problem) {
    top: calc(var(--ui-top) + 118px);
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }
  .app .status {
    top: calc(var(--ui-top) + 118px);
    right: 72px;
    max-width: calc(100vw - var(--ui-edge) - 84px);
  }
  .app .manual-start { top: calc(var(--ui-top) + 174px); }
  .app .search-fallback { top: calc(var(--ui-top) + 174px); }
  .app:has(.locate.location-problem) .manual-start { top: calc(var(--ui-top) + 205px); }
  .app .card {
    max-height: min(33dvh, 290px);
    padding: 14px 15px 14px;
    border-radius: 22px;
  }
  .card h1 { font-size: 19px; }
  .card .metrics { margin: 9px 0; padding: 8px 0; }
  .card .go { min-height: 52px; }
  .card .limits { margin-top: 8px; }
  .navigating .app .nav-panel { border-radius: 20px; }
  .navigating .app .locate:not(.location-problem) {
    top: auto;
    bottom: calc(var(--ui-bottom) + 78px);
  }
  .navigating .app .status { top: calc(var(--ui-top) + 80px); }
  .navigating .app .trip-bar { border-radius: 18px; }
  .free-staging .app .toolbar { top: calc(var(--ui-top) + 28px); }
  .free-staging .app .suggestions { top: calc(var(--ui-top) + 140px); }
  .free-staging .app .locate:not(.location-problem) { top: calc(var(--ui-top) + 146px); }
  .free-staging .app .status { top: calc(var(--ui-top) + 146px); }
  .free-staging .app .manual-start,
  .free-staging .app .search-fallback { top: calc(var(--ui-top) + 202px); }
  .free-staging:has(#routeCard:not([hidden])) .app .maplibregl-ctrl-bottom-right {
    top: calc(var(--ui-top) + 208px);
    right: max(12px, env(safe-area-inset-right));
    bottom: auto;
    left: auto;
  }
  .free-staging.navigating .app .locate:not(.location-problem) { top: auto; }
  .free-staging.navigating .app .status { top: calc(var(--ui-top) + 108px); }
}

@media (min-width: 601px) {
  .toolbar { max-width: 760px; }
  .card { max-width: 420px; }
  .free-staging .app .toolbar .mode {
    position: static;
    width: auto;
    min-width: 116px;
    max-width: 150px;
    height: 48px;
    padding: 0 14px;
    font: 700 13px/1 system-ui;
  }
}

@media (max-width: 360px) and (max-height: 600px) and (orientation: portrait) {
  /* Keep the estimate readable above the sticky Start action on short phones. */
  .app .card { max-height: min(44dvh, 250px); }
}

@media (max-height: 520px) and (orientation: landscape) {
  .app .card { max-height: calc(100dvh - var(--ui-top) - var(--ui-bottom)); }
  .free-staging .app .toolbar .mode { position: static; }
}

/* Use the installed brand mark in the settings entry without changing its label. */
.app .toolbar .logo {
  background-color: #061938;
  background-image: url('./icon-192.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: transparent;
}

/* One mobile cockpit. The test label, route actions and map controls occupy
   predictable edges instead of stacking floating panels over the route. */
.free-staging .staging-banner {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 16px);
  min-height: 25px;
  padding: 3px 12px;
  border-radius: 0 0 10px 10px;
  background: #713621;
  color: #fff;
  text-align: center;
  font: 750 11px/19px system-ui;
  letter-spacing: .045em;
  white-space: nowrap;
}
.free-staging .toolbar,
.free-staging .nav-panel { top: calc(var(--ui-top) + 26px); }
.free-staging .status { border-left-color: #9b6300; }
.free-staging .toolbar .mode {
  position: static;
  left: auto;
  top: auto;
  white-space: nowrap;
}
.free-staging .toolbar .mode::after { content: none; }
.free-staging .suggestions { top: calc(var(--ui-top) + 85px); }
.free-staging .locate { top: calc(var(--ui-top) + 92px); }
.free-staging .manual-start,
.free-staging .search-fallback { top: calc(var(--ui-top) + 150px); }

@media (max-width: 600px) and (orientation: portrait) {
  .free-staging .app .toolbar {
    top: calc(var(--ui-top) + 26px);
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-rows: 44px 52px;
    column-gap: 8px;
    row-gap: 7px;
  }
  .free-staging .app .toolbar .logo { grid-column: 1; grid-row: 1; }
  .free-staging .app .toolbar .mode {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0 13px;
    height: 44px;
    font-size: 13px;
    border-radius: 999px;
  }
  .free-staging .app .toolbar .search {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 52px;
  }
  .free-staging .app .suggestions { top: calc(var(--ui-top) + 138px); }
  .free-staging .app .locate:not(.location-problem) {
    top: calc(var(--ui-top) + 146px);
    right: max(12px, env(safe-area-inset-right));
  }
  .free-staging .app .status {
    top: calc(var(--ui-top) + 146px);
    left: var(--ui-edge);
    right: 72px;
    width: fit-content;
    max-width: calc(100vw - var(--ui-edge) - 84px);
  }
  .free-staging .app .manual-start,
  .free-staging .app .search-fallback { top: calc(var(--ui-top) + 202px); }
  .free-staging .app .card {
    max-height: min(31dvh, 270px);
    padding: 14px 15px 13px;
    border-radius: 22px;
  }
  .free-staging .app .card h1 { font-size: 19px; }
  .free-staging .app .card .metrics { margin: 7px 0; padding: 7px 0; }
  .free-staging .app .card .go { min-height: 52px; }
  .free-staging .app .card .limits { margin-top: 5px; }
  .free-staging .app .nav-panel {
    top: calc(var(--ui-top) + 26px);
    min-height: 72px;
    padding: 10px 12px;
    border-radius: 19px;
  }
  .free-staging.navigating .app .status {
    top: calc(var(--ui-top) + 108px);
    max-width: calc(100vw - var(--ui-edge) - 74px);
  }
  .free-staging.navigating .app .locate:not(.location-problem) {
    top: auto;
    bottom: calc(var(--ui-bottom) + 78px);
  }
  .free-staging.navigating .app .trip-bar {
    min-height: 64px;
    border-radius: 18px;
  }
  .free-staging:has(#routeCard:not([hidden])) .app .maplibregl-ctrl-bottom-right {
    top: calc(var(--ui-top) + 208px);
    right: max(12px, env(safe-area-inset-right));
    bottom: auto;
    left: auto;
    max-width: calc(100vw - 24px);
  }
  .free-staging.navigating .app .maplibregl-ctrl-bottom-right {
    top: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--ui-bottom) + 66px);
    left: auto;
    max-width: calc(100vw - 140px);
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .free-staging .toolbar,
  .free-staging .nav-panel { top: calc(var(--ui-top) + 26px); }
  .free-staging .toolbar .mode { position: static; }
  .free-staging.navigating .locate { top: calc(var(--ui-top) + 26px); }
}

@media (max-width: 360px) and (max-height: 600px) and (orientation: portrait) {
  .free-staging .app .card { max-height: min(44dvh, 250px); }
}

/* Keep the address legible above the keyboard, even with compact chrome. */
@media (max-width: 600px) {
  .free-staging .app .toolbar:has(#destination:focus) {
    display: block;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    width: auto;
    max-width: none;
    z-index: 7;
  }
  .free-staging .app .toolbar:has(#destination:focus) .logo,
  .free-staging .app .toolbar:has(#destination:focus) .mode { display: none; }
  .free-staging .app .toolbar:has(#destination:focus) .search {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 56px;
    padding-left: 14px;
  }
  .free-staging .app .toolbar:has(#destination:focus) .search input {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    font-size: 16px;
  }
  .free-staging .app .toolbar:has(#destination:focus) .search button { flex: none; }
  .free-staging .app:has(#destination:focus) .locate,
  .free-staging .app:has(#destination:focus) .manual-start,
  .free-staging .app:has(#destination:focus) .search-fallback { display: none; }
  .free-staging .app:has(#destination:focus) .suggestions {
    z-index: 8;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    max-width: none;
    max-height: min(42dvh, 330px);
  }
}

/* Destination-first staging cockpit: search at the top, two corner controls. */
.free-staging .app .toolbar,
.free-staging .app .toolbar:has(#destination:focus) {
  display: block;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  width: auto;
  max-width: min(670px, calc(100vw - 24px));
  height: 56px;
}
.free-staging .app .toolbar .search,
.free-staging .app .toolbar:has(#destination:focus) .search {
  display: flex;
  width: 100%;
  height: 56px;
  min-width: 0;
  padding-left: 14px;
}
.free-staging .app .toolbar .search input { flex: 1 1 auto; width: 0; min-width: 0; }
.free-staging .app .toolbar .mode { display: none; }
.free-staging .app .toolbar .logo {
  position: fixed;
  top: auto;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 6;
  width: 48px;
  height: 48px;
}
.free-staging .app .suggestions,
.free-staging .app:has(#destination:focus) .suggestions {
  top: calc(max(12px, env(safe-area-inset-top)) + 62px);
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  max-width: min(670px, calc(100vw - 24px));
  max-height: min(48dvh, 380px);
  z-index: 8;
}
.free-staging .app .locate:not(.location-problem),
.free-staging .app .locate.location-problem {
  top: auto;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 6;
  width: 48px;
  height: 48px;
}
.free-staging .app .locate.location-problem {
  width: auto;
  height: auto;
  max-width: min(68vw, 270px);
}
.free-staging.navigating .app .locate { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 78px); }
.free-staging .app .status { top: calc(max(12px, env(safe-area-inset-top)) + 68px); }
.free-staging .app .search-fallback { top: calc(max(12px, env(safe-area-inset-top)) + 124px); }
.free-staging .app .manual-start { top: calc(max(12px, env(safe-area-inset-top)) + 124px); }
.free-staging .app:has(#destination:focus) .toolbar .logo { display: none; }
.free-staging .app:has(#routeCard:not([hidden])) .toolbar .logo,
.free-staging .app:has(#routeCard:not([hidden])) .locate {
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + min(31dvh, 270px) + 8px);
}
#modeChoice { width: min(420px, calc(100vw - 28px)); }
#modeChoice h2 { margin: 0 0 8px; font-size: 21px; }
#modeDestination { margin: 0 0 18px; overflow-wrap: anywhere; font-weight: 650; }
.mode-choice-actions { display: grid; gap: 10px; }
.mode-choice-actions button { min-height: 56px; border: 0; border-radius: 12px; font: 750 17px system-ui; }
#chooseResponder { background: #087f73; color: white; }
#chooseNormal { background: #eaf5f1; color: #173438; }
#cancelModeChoice { min-height: 44px; width: 100%; margin-top: 8px; border: 0; background: transparent; color: #087f73; font-weight: 700; }
.mode-choice-note { font-size: 12px; color: #52696b; line-height: 1.35; }
.mini-nav { flex:none; min-width:44px; min-height:44px; padding:7px 8px; border:1px solid #688b89; border-radius:11px; background:transparent; color:#e7f4f0; font:700 12px system-ui; }
.mini-nav[hidden] { display:none; }