.navigation-mode {
  --nav-surface: rgba(10, 16, 24, 0.96);
  color: #f5f8fb;
  background: var(--nav-surface);
  border: 1px solid rgba(115, 177, 233, 0.38);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.42);
  padding: 12px;
  width: min(100%, 390px);
  max-height: min(76vh, 680px);
  overflow: auto;
  overscroll-behavior: contain;
  font: 500 14px/1.35 system-ui, sans-serif;
}

/*
 * navigation-ui.js drives every optional row through the `hidden` property.
 * The UA rule for [hidden] is a plain `display: none`, so any class-level
 * `display` below it silently wins — .navigation-mode__prep-actions is
 * display:flex, which left a second "Choose on map" button on screen after a
 * destination was picked, even though navigation-ui.js:625 had correctly set
 * prepActions.hidden = true.
 *
 * Guard the whole panel rather than patching one selector: `hidden` means the
 * row does not apply right now, and that must outrank layout.
 */
.navigation-mode [hidden] {
  display: none !important;
}

.navigation-mode__header,
.navigation-mode__controls,
.navigation-mode__alert-actions,
.navigation-mode__fixtures {
  display: flex;
  align-items: center;
  gap: 8px;
}

.navigation-mode__header {
  justify-content: space-between;
}

.navigation-mode__title {
  color: #8ec8ff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.navigation-mode__state {
  color: #d8e7f5;
  font-size: 12px;
}

.navigation-mode__disclosure,
.navigation-mode__safety {
  margin: 9px 0;
  color: #aebdca;
  font-size: 12px;
}

.navigation-mode__safety {
  border-left: 3px solid #f4b942;
  padding-left: 8px;
  color: #f7d997;
}


.navigation-mode__destination,
.navigation-mode__error,
.navigation-mode__selected,
.navigation-mode__origin {
  margin: 8px 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.navigation-mode__search {
  margin: 8px 0;
}

.navigation-mode__search-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #556879;
  border-radius: 10px;
  color: #f5f8fb;
  background: #182635;
  font: inherit;
}

.navigation-mode__search-input::placeholder {
  color: #8fa3b5;
}

.navigation-mode__results {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  max-height: 180px;
  overflow: auto;
  border: 1px solid rgba(115, 177, 233, 0.28);
  border-radius: 10px;
  background: #121c27;
}

.navigation-mode__result {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  touch-action: manipulation;
}

.navigation-mode__result:last-child {
  border-bottom: 0;
}

.navigation-mode__result--active,
.navigation-mode__result:hover {
  background: rgba(22, 112, 189, 0.28);
}

.navigation-mode__result--empty {
  color: #9fb1c1;
  cursor: default;
}

.navigation-mode__result-primary {
  font-weight: 700;
}

.navigation-mode__result-secondary {
  margin-top: 2px;
  color: #9fb1c1;
  font-size: 12px;
}

.navigation-mode__selected-label {
  font-weight: 700;
  word-break: break-word;
}

.navigation-mode__selected-actions,
.navigation-mode__prep-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.navigation-mode__prep-actions {
  margin: 4px 0 8px;
}

.navigation-mode__origin-hint {
  margin-top: 4px;
  color: #9fb1c1;
  font-size: 12px;
}

.navigation-mode[data-map-pick="1"] {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(85, 173, 245, 0.55);
}

.navigation-mode__prompt {
  color: #aebdca;
  font-size: 12px;
}

.navigation-mode__error {
  color: #ffb2b9;
  border: 1px solid rgba(255, 94, 110, 0.4);
}

.navigation-mode__maneuver {
  margin: 10px 0;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(145deg, #12304a, #132334);
}

.navigation-mode__next-distance {
  display: block;
  color: #75c4ff;
  font-size: 26px;
}

.navigation-mode__instruction {
  margin-top: 3px;
  font-size: 19px;
  font-weight: 800;
}

.navigation-mode__road {
  margin-top: 4px;
  color: #b7c8d7;
}

.navigation-mode__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.navigation-mode__metric {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #9fb1c1;
  font-size: 11px;
}

.navigation-mode__metric strong {
  color: #f5f8fb;
  font-size: 14px;
}

.navigation-mode__alert {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(244, 185, 66, 0.55);
  border-radius: 10px;
  background: rgba(69, 46, 8, 0.72);
}

.navigation-mode__alert > div {
  margin-top: 5px;
}

.navigation-mode__controls {
  position: sticky;
  bottom: -12px;
  z-index: 3;
  margin: 10px -12px -12px;
  padding: 10px 12px 12px;
  background: linear-gradient(transparent, var(--nav-surface) 18%);
}

.navigation-mode__button {
  min-height: 46px;
  min-width: 46px;
  border: 1px solid #556879;
  border-radius: 10px;
  color: #f5f8fb;
  background: #273746;
  padding: 8px 12px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  touch-action: manipulation;
}

.navigation-mode__button--primary {
  flex: 1;
  background: #1670bd;
  border-color: #55adf5;
}

.navigation-mode__button:disabled,
.navigation-mode__button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.navigation-mode__button--danger {
  background: #8e2631;
  border-color: #e15d6b;
}

.navigation-mode__button--quiet {
  min-height: 36px;
  padding: 5px 9px;
}

.navigation-mode__voice {
  display: block;
  margin: 10px 0 2px;
  color: #c8d6e2;
}

.navigation-mode__voice input {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.navigation-mode__fixtures {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #60788e;
  flex-wrap: wrap;
  color: #f4b942;
  font-size: 11px;
}

.navigation-mode__fixtures select {
  min-height: 40px;
  max-width: 155px;
  color: #eef5fb;
  background: #182635;
  border: 1px solid #60788e;
  border-radius: 8px;
}

@media (max-width: 1023.98px) {
  /*
   * Keep a real map tap surface on iPhone / compact Safari.
   * The previous 64dvh sheet could exceed .app-stage height and fully cover
   * #radioMap, so users only saw "set a destination" with no map to tap.
   */
  #navigationModeContainer {
    position: absolute;
    z-index: 700;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: 8px;
    top: auto;
    max-height: min(42%, 300px);
    pointer-events: none;
  }

  #navigationModeContainer .navigation-mode {
    pointer-events: auto;
    width: auto;
    max-height: 100%;
  }

  /* Idle/prep: keep search usable at phone widths; hide secondary chrome */
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_IDLE"] .navigation-mode__disclosure,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_IDLE"] .navigation-mode__attribution,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_IDLE"] .navigation-mode__metrics,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_IDLE"] .navigation-mode__voice,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_DESTINATION_SELECTED"] .navigation-mode__disclosure,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_DESTINATION_SELECTED"] .navigation-mode__attribution,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_DESTINATION_SELECTED"] .navigation-mode__metrics,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_DESTINATION_SELECTED"] .navigation-mode__voice {
    display: none;
  }

  #navigationModeContainer {
    max-height: min(48%, 360px);
  }

  /*
   * 52% left the Start button 4px short once the action row moved into normal
   * flow — visible and tappable, but visibly clipped at the panel edge. A
   * destination is already chosen in these states, so the panel is worth more
   * than the extra sliver of map.
   */
  #navigationModeContainer:has(.navigation-mode[data-nav-state="NAV_READY"]),
  #navigationModeContainer:has(.navigation-mode[data-nav-state="NAV_ACTIVE"]),
  #navigationModeContainer:has(.navigation-mode[data-nav-state="NAV_REROUTING"]),
  #navigationModeContainer:has(.navigation-mode[data-nav-state="NAV_DESTINATION_SELECTED"]) {
    max-height: min(58%, 420px);
  }
}

@media (max-width: 1023.98px) and (orientation: portrait) {
  /*
   * The container's max-height caps its own box, but a static child panel
   * with max-height:100% resolves against an indefinite height and grows
   * past the cap: the action row (Start/Recenter/Stop) spilled ~60px below
   * the stage and rendered untappable behind the fixed PTT dock. Flex +
   * min-height:0 makes the panel honor the container cap and scroll
   * internally instead.
   */
  #navigationModeContainer {
    display: flex;
    flex-direction: column;
  }

  #navigationModeContainer .navigation-mode {
    flex: 0 1 auto;
    min-height: 0;
    max-height: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Setup-sheet running order (compact, BOTH orientations)                      */
/*                                                                             */
/* Ordering matching how Apple/Google/Waze stack a trip setup panel: identity,  */
/* then anything that has gone wrong, then the safety notice, then search and   */
/* the actions that operate on it. Rows the driver only reads after choosing a  */
/* destination sink below.                                                     */
/*                                                                             */
/* Fixes two defects, neither of which is orientation-specific — they were      */
/* first fixed for landscape only, which left portrait broken:                 */
/*                                                                             */
/* 1. .navigation-mode__error is 7th in DOM order, so in a short panel it fell  */
/*    below the fold. A disabled or unreachable geocoder reports itself there   */
/*    ("Address search is not configured on this server"), so the one message   */
/*    explaining why typing does nothing was the one the driver never saw.     */
/*                                                                             */
/* 2. .navigation-mode__controls is position:sticky; bottom:-12px; z-index:3.   */
/*    Sticky suits a tall sheet, but once the panel is shorter than its content */
/*    the row is pulled up over whatever occupies that space. At 375x527 that   */
/*    was the address input itself — the primary control of the Map tab,        */
/*    completely covered. In normal flow directly under search, nothing is.     */
/*                                                                             */
/* Active guidance keeps its own slim HUD treatment below and is excluded.      */
/* -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {
  #navigationModeContainer:not(
      :has(
        .navigation-mode[data-nav-state="NAV_READY"],
        .navigation-mode[data-nav-state="NAV_ACTIVE"],
        .navigation-mode[data-nav-state="NAV_REROUTING"]
      )
    )
    > .navigation-mode {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  #navigationModeContainer:not(
      :has(
        .navigation-mode[data-nav-state="NAV_READY"],
        .navigation-mode[data-nav-state="NAV_ACTIVE"],
        .navigation-mode[data-nav-state="NAV_REROUTING"]
      )
    )
    > .navigation-mode > * {
    /* Explicit default so the groups below are unambiguous. */
    order: 0;
  }

  #navigationModeContainer:not(
      :has(
        .navigation-mode[data-nav-state="NAV_READY"],
        .navigation-mode[data-nav-state="NAV_ACTIVE"],
        .navigation-mode[data-nav-state="NAV_REROUTING"]
      )
    )
    > .navigation-mode > .navigation-mode__header {
    order: -3;
  }

  #navigationModeContainer:not(
      :has(
        .navigation-mode[data-nav-state="NAV_READY"],
        .navigation-mode[data-nav-state="NAV_ACTIVE"],
        .navigation-mode[data-nav-state="NAV_REROUTING"]
      )
    )
    > .navigation-mode > .navigation-mode__error {
    order: -2;
  }

  #navigationModeContainer:not(
      :has(
        .navigation-mode[data-nav-state="NAV_READY"],
        .navigation-mode[data-nav-state="NAV_ACTIVE"],
        .navigation-mode[data-nav-state="NAV_REROUTING"]
      )
    )
    > .navigation-mode > .navigation-mode__safety {
    order: -1;
  }

  #navigationModeContainer:not(
      :has(
        .navigation-mode[data-nav-state="NAV_READY"],
        .navigation-mode[data-nav-state="NAV_ACTIVE"],
        .navigation-mode[data-nav-state="NAV_REROUTING"]
      )
    )
    > .navigation-mode > .navigation-mode__controls {
    position: static;
    order: 0;
  }

  /* Post-selection detail rows sink below the action row. */
  #navigationModeContainer:not(
      :has(
        .navigation-mode[data-nav-state="NAV_READY"],
        .navigation-mode[data-nav-state="NAV_ACTIVE"],
        .navigation-mode[data-nav-state="NAV_REROUTING"]
      )
    )
    > .navigation-mode > :is(
      .navigation-mode__origin,
      .navigation-mode__destination,
      .navigation-mode__maneuver,
      .navigation-mode__metrics,
      .navigation-mode__alert,
      .navigation-mode__voice
    ) {
    order: 1;
  }
}

@media (max-width: 320px) {
  .navigation-mode {
    padding: 10px;
    font-size: 13px;
  }

  .navigation-mode__controls {
    flex-wrap: wrap;
  }

  .navigation-mode__button {
    min-height: 44px;
  }
}

/*
 * Landscape drive HUD — keep map visible; next maneuver + Stop without
 * scrolling the nav sheet. Portrait Map tab unchanged above.
 */
@media (max-width: 1023.98px) and (orientation: landscape) {
  #navigationModeContainer {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    top: max(6px, env(safe-area-inset-top));
    bottom: auto;
    max-height: none;
  }

  #navigationModeContainer .navigation-mode {
    width: min(100%, 720px);
    max-height: min(120px, 42dvh);
    overflow: hidden;
    padding: 8px 10px;
    font-size: 13px;
  }

  /* Active guidance: slim top bar — maneuver + controls only */
  #navigationModeContainer:has(.navigation-mode[data-nav-state="NAV_READY"]),
  #navigationModeContainer:has(.navigation-mode[data-nav-state="NAV_ACTIVE"]),
  #navigationModeContainer:has(.navigation-mode[data-nav-state="NAV_REROUTING"]) {
    max-height: 120px;
  }

  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"] .navigation-mode__header,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"] .navigation-mode__header,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] .navigation-mode__header,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"] .navigation-mode__disclosure,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"] .navigation-mode__disclosure,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] .navigation-mode__disclosure,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"] .navigation-mode__attribution,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"] .navigation-mode__attribution,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] .navigation-mode__attribution,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"] .navigation-mode__safety,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"] .navigation-mode__safety,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] .navigation-mode__safety,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"] .navigation-mode__destination,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"] .navigation-mode__destination,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] .navigation-mode__destination,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"] .navigation-mode__search,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"] .navigation-mode__search,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] .navigation-mode__search,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"] .navigation-mode__selected,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"] .navigation-mode__selected,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] .navigation-mode__selected,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"] .navigation-mode__origin,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"] .navigation-mode__origin,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] .navigation-mode__origin,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"] .navigation-mode__metrics,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"] .navigation-mode__metrics,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] .navigation-mode__metrics,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"] .navigation-mode__voice,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"] .navigation-mode__voice,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] .navigation-mode__voice,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"] .navigation-mode__alert,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"] .navigation-mode__alert,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] .navigation-mode__alert,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"] .navigation-mode__fixtures,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"] .navigation-mode__fixtures,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] .navigation-mode__fixtures {
    display: none !important;
  }

  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"],
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"],
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
  }

  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"] .navigation-mode__maneuver,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"] .navigation-mode__maneuver,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] .navigation-mode__maneuver {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin: 0;
    min-width: 0;
  }

  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"] .navigation-mode__next-distance,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"] .navigation-mode__next-distance,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] .navigation-mode__next-distance {
    font-size: 20px;
  }

  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"] .navigation-mode__instruction,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"] .navigation-mode__instruction,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] .navigation-mode__instruction {
    font-size: 15px;
  }

  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"] .navigation-mode__road,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"] .navigation-mode__road,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] .navigation-mode__road {
    font-size: 12px;
    opacity: 0.85;
  }

  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"] .navigation-mode__controls,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"] .navigation-mode__controls,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] .navigation-mode__controls {
    flex: 0 0 auto;
    margin: 0;
    gap: 6px;
  }

  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"] .navigation-mode__button,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"] .navigation-mode__button,
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] .navigation-mode__button {
    min-height: 44px;
    padding: 8px 12px;
  }

  /* Hide Start during active guidance HUD (Stop + Recenter remain) */
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_ACTIVE"] .navigation-mode__button[data-action="start"],
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_REROUTING"] .navigation-mode__button[data-action="start"],
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_READY"] .navigation-mode__button[data-action="start"] {
    display: none;
  }

  /* Idle / destination prep: keep searchable but shorter so map remains tappable */
  #navigationModeContainer:has(.navigation-mode[data-nav-state="NAV_IDLE"]),
  #navigationModeContainer:has(.navigation-mode[data-nav-state="NAV_DESTINATION_SELECTED"]) {
    max-height: min(46%, 220px);
  }

  #navigationModeContainer .navigation-mode[data-nav-state="NAV_IDLE"],
  #navigationModeContainer .navigation-mode[data-nav-state="NAV_DESTINATION_SELECTED"] {
    max-height: min(46%, 220px);
    overflow: auto;
  }
}