/* Passenger Stage 2 canonical map, search, picker and route-confirmation UI. */
@media (max-width: 760px) {
  html[data-theme] body[data-page="passenger"] {
    --home-inline: 16px;
    --home-nav: calc(72px + env(safe-area-inset-bottom));
    --home-sheet: var(--app-surface, #111821);
    --home-soft: var(--app-surface-soft, #1b222d);
    --home-line: var(--app-line, #2b3440);
  }

  html[data-theme] body[data-page="passenger"] #map {
    bottom: 0;
    height: 100dvh;
    inset: 0;
    position: fixed;
    width: 100%;
  }

  html[data-theme] body[data-page="passenger"] .topbar {
    background: transparent;
    border: 0;
    left: var(--home-inline);
    padding: max(14px, env(safe-area-inset-top)) 0 0;
    pointer-events: none;
    right: var(--home-inline);
    top: 0;
  }

  html[data-theme] body[data-page="passenger"] .topbar .brand,
  html[data-theme] body[data-page="passenger"] .topbar .auth-chip {
    backdrop-filter: blur(15px);
    background: color-mix(in srgb, var(--home-sheet) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--home-line) 82%, transparent);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .18);
    pointer-events: auto;
  }

  html[data-theme] body[data-page="passenger"] .topbar .brand {
    border-radius: 14px;
    height: 48px;
    padding: 0 9px;
    width: 48px;
  }

  html[data-theme] body[data-page="passenger"] .topbar .brand img { height: 30px; width: 30px; }
  html[data-theme] body[data-page="passenger"] .topbar .brand span { display: none; }

  html[data-theme] body[data-page="passenger"] .workspace {
    bottom: var(--home-nav);
    height: auto;
    inset-inline: 0;
    max-height: calc(100dvh - max(94px, calc(env(safe-area-inset-top) + 74px)) - var(--home-nav));
    overflow: visible;
    position: fixed;
    top: auto;
    transform: translateY(var(--sheet-y, 0));
    width: 100%;
    z-index: 35;
  }

  html[data-theme] body[data-page="passenger"] .command-panel {
    background: var(--home-sheet);
    border: 1px solid var(--home-line);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -18px 52px rgba(0, 0, 0, .24);
    box-sizing: border-box;
    max-height: calc(100dvh - max(94px, calc(env(safe-area-inset-top) + 74px)) - var(--home-nav));
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px var(--home-inline) 18px;
    width: 100%;
  }

  html[data-theme] body[data-page="passenger"] .sheet-handle {
    display: flex;
    height: 18px;
    margin: 0 0 7px;
    min-height: 18px;
    padding: 0;
  }

  html[data-theme] body[data-page="passenger"] .sheet-handle span { background: var(--app-muted); height: 4px; opacity: .72; width: 42px; }
  html[data-theme] body[data-page="passenger"] .sheet-handle b { display: none; }
  html[data-theme] body[data-page="passenger"] .panel-head { display: none; }

  html[data-theme] body[data-page="passenger"] .mobile-home-card {
    background: transparent;
    border: 0;
    display: grid;
    gap: 12px;
    padding: 0;
  }

  html[data-theme] body[data-page="passenger"] .mobile-home-kicker {
    color: var(--app-accent);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
  }

  html[data-theme] body[data-page="passenger"] .mobile-home-card h2 {
    color: var(--app-text);
    font-size: 22px;
    font-weight: 820;
    letter-spacing: -.03em;
    margin: -3px 0 0;
  }

  html[data-theme] body[data-page="passenger"] .mobile-where-btn {
    align-items: center;
    background: var(--home-soft);
    border: 1px solid var(--home-line);
    border-radius: 14px;
    color: var(--app-text);
    display: grid;
    gap: 12px;
    grid-template-columns: 28px minmax(0, 1fr) 20px;
    min-height: 58px;
    padding: 0 14px;
    text-align: left;
  }

  html[data-theme] body[data-page="passenger"] .mobile-where-btn > span { background: transparent; color: var(--app-accent); height: 26px; width: 26px; }
  html[data-theme] body[data-page="passenger"] .mobile-where-btn strong { font-size: 16px; }
  html[data-theme] body[data-page="passenger"] .mobile-where-chevron { color: var(--app-muted); height: 18px; transform: rotate(180deg); width: 18px; }

  html[data-theme] body[data-page="passenger"] .passenger-home-shortcuts {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html[data-theme] body[data-page="passenger"] .passenger-home-shortcuts button {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--app-muted);
    display: flex;
    font: inherit;
    gap: 7px;
    min-height: 38px;
    min-width: 0;
    padding: 0 3px;
  }

  html[data-theme] body[data-page="passenger"] .passenger-home-shortcuts button > span { align-items: center; background: var(--home-soft); border: 1px solid var(--home-line); border-radius: 9px; display: flex; flex: 0 0 28px; height: 28px; justify-content: center; }
  html[data-theme] body[data-page="passenger"] .passenger-home-shortcuts strong { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-theme] body[data-page="passenger"] .passenger-home-shortcuts svg { height: 14px; width: 14px; }

  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="home"] > :not(.sheet-handle):not(.mobile-home-card) { display: none; }

  html[data-theme] body[data-page="passenger"] .mobile-search-topbar {
    align-items: center;
    background: transparent;
    display: none;
    gap: 8px;
    left: var(--home-inline);
    padding: max(14px, env(safe-area-inset-top)) 0 0;
    right: var(--home-inline);
    top: 0;
  }

  html[data-theme] body[data-page="passenger"].mobile-search-active .mobile-search-topbar,
  html[data-theme] body[data-page="passenger"].pickup-picker-active .mobile-search-topbar,
  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="map"] ~ .mobile-search-topbar { display: grid; }

  html[data-theme] body[data-page="passenger"] .mobile-search-back,
  html[data-theme] body[data-page="passenger"] .mobile-search-edit,
  html[data-theme] body[data-page="passenger"] .mobile-search-pill {
    backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--home-sheet) 92%, transparent);
    border: 1px solid var(--home-line);
    box-shadow: 0 7px 22px rgba(0, 0, 0, .18);
  }

  html[data-theme] body[data-page="passenger"] .mobile-search-back,
  html[data-theme] body[data-page="passenger"] .mobile-search-edit { border-radius: 13px; height: 48px; width: 48px; }
  html[data-theme] body[data-page="passenger"] .mobile-search-pill { border-radius: 13px; height: 48px; }

  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="picker"] {
    border-radius: 24px 24px 0 0;
    height: calc(100dvh - max(78px, calc(env(safe-area-inset-top) + 58px)) - var(--home-nav));
    max-height: none;
    padding: 12px var(--home-inline) 20px;
  }

  html[data-theme] body[data-page="passenger"].mobile-search-active .mobile-search-topbar { display: none; }
  html[data-theme] body[data-page="passenger"].mobile-search-active .workspace {
    max-height: calc(100dvh - var(--home-nav));
  }
  html[data-theme] body[data-page="passenger"].mobile-search-active .command-panel[data-booking-state="picker"] {
    border-radius: 0;
    height: calc(100dvh - var(--home-nav));
    padding-top: max(16px, env(safe-area-inset-top));
  }

  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="picker"] .mobile-picker-head {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 46px minmax(0, 1fr);
    margin-bottom: 18px;
  }

  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="picker"] .mobile-picker-back { background: var(--home-soft); border: 1px solid var(--home-line); border-radius: 13px; height: 46px; width: 46px; }
  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="picker"] .mobile-picker-head strong { color: var(--app-text); font-size: 18px; }
  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="picker"] .mobile-picker-head span { color: var(--app-muted); font-size: 11px; line-height: 1.35; }

  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="picker"] .mobile-home-card { display: none; }
  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="picker"] .trip-route-summary { display: none; }

  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="picker"] .location-stack {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
  }

  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="picker"] .place-field:first-of-type { display: none; }
  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="picker"] .destination-field { display: block; }
  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="picker"] .destination-field > span { color: var(--app-muted); font-size: 11px; font-weight: 800; }
  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="picker"] #destinationInput { background: var(--home-soft); border: 1px solid var(--home-line); border-radius: 13px; color: var(--app-text); font-size: 16px; height: 52px; line-height: 1.2; margin-top: 7px; padding: 0 14px; }
  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="picker"] .pickup-action { display: none; }
  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="picker"] .destination-action { display: none; grid-row: 2; margin-top: 2px; position: static; width: 100%; }

  html[data-theme] body[data-page="passenger"] .place-results {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    gap: 8px;
    margin-top: 8px;
    max-height: none;
    overflow: visible;
    padding: 0;
    position: static;
    width: 100%;
  }

  html[data-theme] body[data-page="passenger"] .place-results-head { padding: 10px 2px 4px; }
  html[data-theme] body[data-page="passenger"] .place-results-head strong { color: var(--app-text); font-size: 14px; }
  html[data-theme] body[data-page="passenger"] .place-results-head span { color: var(--app-muted); font-size: 11px; }
  html[data-theme] body[data-page="passenger"] .place-result { background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--app-muted) 28%, transparent); border-radius: 0; color: var(--app-text); min-height: 62px; padding: 10px 4px 10px 48px; position: relative; text-align: left; }
  html[data-theme] body[data-page="passenger"] .place-result::before { align-items: center; background: var(--home-soft); border: 1px solid var(--home-line); border-radius: 50%; color: var(--app-accent); content: "⌖"; display: flex; height: 34px; justify-content: center; left: 2px; position: absolute; top: 13px; width: 34px; }
  html[data-theme] body[data-page="passenger"] .place-result strong { font-size: 14px; }
  html[data-theme] body[data-page="passenger"] .place-result span { color: var(--app-muted); font-size: 11px; margin-top: 4px; }
  html[data-theme] body[data-page="passenger"] .place-map-fallback { background: color-mix(in srgb, var(--app-accent) 5%, transparent); border: 1px solid color-mix(in srgb, var(--app-accent) 58%, transparent); border-radius: 13px; color: var(--app-accent); min-height: 48px; }

  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="map"] {
    max-height: 172px;
    padding-bottom: 16px;
  }

  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="map"] > :not(.sheet-handle):not(.selection-actions) { display: none; }
  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="map"] .selection-actions { display: block; }
  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="map"] #confirmMapSelectionBtn { background: var(--app-accent); border: 0; border-radius: 14px; color: var(--app-on-accent); font-weight: 820; min-height: 54px; width: 100%; }

  html[data-theme] body[data-page="passenger"] #pickup-center-pin .center-picker-bubble { backdrop-filter: blur(15px); background: color-mix(in srgb, var(--home-sheet) 94%, transparent); border: 1px solid var(--home-line); border-radius: 13px; max-width: min(310px, calc(100vw - 40px)); padding: 10px 13px; }
  html[data-theme] body[data-page="passenger"] #pickup-center-pin .center-picker-bubble span { line-height: 1.3; }

  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="preview"] {
    max-height: min(48dvh, 420px);
    padding-bottom: 18px;
  }

  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="preview"] .mobile-home-card,
  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="preview"] .location-stack,
  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="preview"] .quick-actions,
  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="preview"] .favorites { display: none; }

  html[data-theme] body[data-page="passenger"] .trip-route-summary {
    background: var(--home-soft);
    border: 1px solid var(--home-line);
    border-radius: 16px;
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1fr) 42px;
    margin: 0;
    padding: 8px 10px;
  }

  html[data-theme] body[data-page="passenger"] .trip-route-point { align-items: center; display: grid; gap: 11px; grid-column: 1; grid-template-columns: 34px minmax(0, 1fr); min-height: 56px; }
  html[data-theme] body[data-page="passenger"] .trip-route-point + .trip-route-point { border-top: 1px solid color-mix(in srgb, var(--home-line) 55%, transparent); }
  html[data-theme] body[data-page="passenger"] .trip-route-point i { align-items: center; background: var(--app-accent); border-radius: 10px; color: var(--app-on-accent); display: flex; font-style: normal; font-weight: 850; height: 34px; justify-content: center; width: 34px; }
  html[data-theme] body[data-page="passenger"] .trip-route-destination i { background: #ff5c63; color: white; }
  html[data-theme] body[data-page="passenger"] .trip-route-point > span { display: grid; gap: 3px; min-width: 0; }
  html[data-theme] body[data-page="passenger"] .trip-route-point small { color: var(--app-muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
  html[data-theme] body[data-page="passenger"] .trip-route-point strong { color: var(--app-text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-theme] body[data-page="passenger"] #tripDestinationEditBtn { align-self: center; grid-column: 2; grid-row: 1 / span 2; }

  html[data-theme] body[data-page="passenger"] .route-confirm-btn { display: none; }

  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="preview"][data-home-flow-step="route"] { max-height: min(42dvh, 350px); }
  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="preview"][data-home-flow-step="route"] .route-confirm-btn { display: block; margin-top: 12px; min-height: 56px; width: 100%; }
  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="preview"][data-home-flow-step="route"] .ride-types,
  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="preview"][data-home-flow-step="route"] .trip-metrics,
  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="preview"][data-home-flow-step="route"] .payment-methods,
  html[data-theme] body[data-page="passenger"] .command-panel[data-booking-state="preview"][data-home-flow-step="route"] #requestRideBtn { display: none; }

  html[data-theme] body[data-page="passenger"] .passenger-bottom-nav {
    backdrop-filter: blur(18px);
    background: color-mix(in srgb, var(--home-sheet) 95%, transparent);
    border-top: 1px solid var(--home-line);
    height: var(--home-nav);
    padding-bottom: env(safe-area-inset-bottom);
  }

  html[data-theme] body[data-page="passenger"] .passenger-bottom-nav button { min-height: 64px; }

  html[data-theme="light"] body[data-page="passenger"] .command-panel[data-booking-state="preview"][data-home-flow-step="route"] {
    box-shadow: 0 -16px 44px rgba(25, 38, 31, .2), 0 -2px 10px rgba(25, 38, 31, .08);
  }

  html[data-theme="light"] body[data-page="passenger"] .passenger-bottom-nav button:not(.active) {
    color: color-mix(in srgb, var(--app-text) 58%, transparent);
    opacity: 1;
  }
}