/* Approved Darb mockup: an adaptable map with a compact, task-specific sheet. */
body.experience-ui {
  --ink: #1c2635;
  --muted: #687483;
  --panel: #fff;
  --surface: #f3f5f8;
  --border: #e4e8ee;
  --blue: #6823d6;
  --aqua: #04bfc8;
  --aqua-light: #f0e9ff;
  --route-violet: #6823d6;
  --route-outline: #3d0a83;
  --shadow: 0 8px 30px #15203516;
  --small-shadow: 0 3px 15px #15203520;
  --darb-bottom-space: 136px;
}
body.experience-ui.dark {
  --ink: #f4f6fb;
  --muted: #a5b2c2;
  --panel: #202734;
  --surface: #2a3443;
  --border: #3a4657;
  --blue: #a87aff;
  --aqua-light: #382854;
  --shadow: 0 8px 30px #0005;
  --small-shadow: 0 3px 15px #0004;
  background: #242e3b;
}
body.experience-ui [hidden] { display: none !important; }
body.experience-ui button { touch-action: manipulation; }
body.experience-ui button:focus-visible,
body.experience-ui input:focus-visible,
body.experience-ui select:focus-visible { outline: 3px solid #168dff; outline-offset: 2px; }
body.experience-ui .map-vignette { background: none; }
body.experience-ui .app-header { top: var(--darb-top); right: 12px; left: 12px; align-items: center; z-index: 9; pointer-events: none; }
body.experience-ui .app-header > * { pointer-events: auto; }
body.experience-ui .brand { min-height: 44px; padding: 5px 9px 5px 6px; border-radius: 14px; gap: 6px; background: var(--panel); box-shadow: var(--small-shadow); }
body.experience-ui .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
body.experience-ui .brand-copy { min-width: 0; }
body.experience-ui .brand-name { font-size: 23px; letter-spacing: -.8px; }
body.experience-ui .brand-tagline,
body.experience-ui .prototype-badge { display: none; }
body.experience-ui .header-actions { gap: 6px; padding: 0; background: none; box-shadow: none; }
body.experience-ui .header-actions .icon-button { width: 44px; height: 44px; min-height: 44px; border: 0; border-radius: 50%; color: var(--ink); background: var(--panel); box-shadow: var(--small-shadow); }
body.experience-ui .header-actions svg { width: 21px; height: 21px; }
body.experience-ui #theme-toggle,
body.experience-ui:not(.navigating) #voice-toggle { display: none; }
body.experience-ui .region-switcher { top: calc(var(--darb-top) + 54px); right: 12px; left: auto; width: 132px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 22px; box-shadow: var(--small-shadow); }
body.experience-ui .region-field label,
body.experience-ui .coverage-pill { display: none; }
body.experience-ui .region-field select { min-height: 44px; font-size: 12px; }
body.experience-ui .region-icon { width: 23px; height: 27px; color: var(--muted); }
body.experience-ui .region-icon svg { width: 19px; height: 19px; }
body.experience-ui .map-context { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* A single thin journey bar replaces the home chrome while planning or reviewing. */
.journey-header { display: none; position: absolute; top: 0; right: 0; left: 0; height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 9px 0 62px; align-items: center; gap: 7px; z-index: 8; color: var(--ink); background: var(--panel); box-shadow: 0 1px 0 #1825350c; }
body.experience-ui .journey-back-button { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; border: 0; background: none; border-radius: 50%; color: var(--ink); }
.journey-back-button svg { width: 23px; height: 23px; transform: rotate(180deg); }
.journey-title { flex: 1; font-size: 16px; font-weight: 750; text-align: center; }
.journey-endpoints { display: none; flex: 1; min-width: 0; align-items: center; justify-content: center; gap: 10px; font-size: 13px; font-weight: 650; }
.journey-endpoints span { min-width: 0; max-width: 43%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.journey-endpoints svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--muted); }
body.experience-ui:is([data-app-stage="editing"],[data-app-stage="loading"],[data-app-stage="overview"]) .journey-header { display: flex; }
body.experience-ui:is([data-app-stage="editing"],[data-app-stage="loading"],[data-app-stage="overview"]) .app-header { left: 9px; right: auto; top: calc(env(safe-area-inset-top) + 6px); }
body.experience-ui:is([data-app-stage="editing"],[data-app-stage="loading"],[data-app-stage="overview"]) .brand,
body.experience-ui:is([data-app-stage="editing"],[data-app-stage="loading"],[data-app-stage="overview"]) .region-switcher,
body.experience-ui:is([data-app-stage="editing"],[data-app-stage="loading"],[data-app-stage="overview"]) .header-actions #info-button { display: none; }
body.experience-ui:is([data-app-stage="loading"],[data-app-stage="overview"]) .journey-title { display: none; }
body.experience-ui:is([data-app-stage="loading"],[data-app-stage="overview"]) .journey-endpoints { display: flex; }

/* Desktop retains a compact side panel; phones receive the bottom sheet below. */
body.experience-ui #planner { top: auto; bottom: 16px; right: 16px; left: auto; width: 354px; height: auto; padding: 0; max-height: calc(100dvh - 90px - env(safe-area-inset-top)); border: 1px solid #8a99ab20; border-radius: 23px; box-shadow: var(--shadow); overflow: hidden; background: var(--panel); }
body.experience-ui #planner .panel-toggle { display: flex; height: 36px; min-height: 36px; width: 100%; padding: 0; flex-shrink: 0; align-items: center; justify-content: center; border: 0; background: none; }
body.experience-ui #planner .panel-toggle span { width: 34px; height: 4px; border-radius: 8px; background: #c4ccd7; }
body.experience-ui #planner .planner-content { min-height: 0; padding: 0 16px 16px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
body.experience-ui #planner .planner-heading,
body.experience-ui #planner .nearby-section,
body.experience-ui #planner .reports-section,
body.experience-ui #planner .planner-footer,
body.experience-ui #planner .home-shortcuts { display: none; }
body.experience-ui #planner .home-search-row { display: none; }
body.experience-ui #planner .waypoints { padding: 0; border: 0; border-radius: 0; background: none; }
body.experience-ui #planner .waypoint-row { min-width: 0; min-height: 60px; padding: 4px 0; gap: 8px; border-bottom: 1px solid var(--border); }
body.experience-ui #planner .waypoint-row:last-child { border-bottom: 0; }
body.experience-ui #planner .waypoint-field { min-width: 0; flex: 1; }
body.experience-ui #planner .waypoint-field label { display: block; font-size: 9px; color: var(--muted); line-height: 1.5; }
body.experience-ui #planner .waypoint-field input { width: 100%; min-width: 0; height: 44px; min-height: 44px; padding: 1px 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.5; text-overflow: ellipsis; }
body.experience-ui #planner .waypoint-field input::placeholder { color: var(--muted); font-weight: 450; font-size: 13px; }
body.experience-ui #planner .waypoint-symbol { flex: 0 0 17px; width: 17px; height: 17px; }
body.experience-ui #planner .origin-symbol { width: 14px; height: 14px; flex-basis: 14px; border: 0; background: #258dff; box-shadow: 0 0 0 3px #258dff15; }
body.experience-ui #planner .destination-symbol { width: 19px; height: 19px; flex-basis: 19px; border: 2px solid var(--ink); border-radius: 50%; box-shadow: none; background: conic-gradient(#1b2535 25%,#fff 0 50%,#1b2535 0 75%,#fff 0) 0 0/8px 8px; }
body.experience-ui #planner .waypoint-actions { flex: 0 0 auto; gap: 0; }
body.experience-ui #planner .field-button { width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px; padding: 0; border: 0; border-radius: 12px; color: #78899e; background: none; }
body.experience-ui #planner .field-button svg { width: 20px; height: 20px; }
body.experience-ui #planner .field-button:hover { color: var(--blue); background: var(--aqua-light); }
body.experience-ui #planner :is(.voice-field-button,.voice-search-button) { color: #496079; }
body.experience-ui.dark #planner :is(.voice-field-button,.voice-search-button) { color: #bdcadd; }
body.experience-ui #planner .waypoint-divider { height: 0; margin: 0; }
body.experience-ui #planner .waypoint-divider > span,
body.experience-ui #planner .waypoint-divider::before { display: none; }
body.experience-ui #planner .swap-button { min-width: 44px; position: absolute; top: -21px; left: -3px; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--panel); color: var(--muted); z-index: 2; transform: none; }
body.experience-ui #planner .intermediate-stop-row { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; column-gap: 8px; row-gap: 1px; padding: 6px 0; }
body.experience-ui #planner .stop-symbol { display: grid; place-items: center; width: 21px; height: 26px; flex-basis: 21px; border-radius: 13px 13px 13px 3px; transform: rotate(-2deg); border: 0; box-shadow: none; background: var(--route-violet); color: #fff; font-size: 12px; font-weight: 750; }
body.experience-ui #planner .stop-row-actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 2px; margin: 0; }
body.experience-ui #planner .stop-row-actions .field-button { width: 44px; height: 44px; min-height: 44px; flex-basis: 44px; font-size: 21px; line-height: 1; border: 0; border-radius: 10px; }
body.experience-ui #planner .stop-row-actions .field-button:disabled { opacity: .32; }
body.experience-ui #planner .stop-row-actions .field-button[aria-label^="حذف"] { color: #d04a51; }
body.experience-ui #planner .stop-row-actions :is(.voice-field-button,.voice-search-button) { margin-inline-start: auto; }
body.experience-ui #planner .stop-planner-tools { padding-top: 6px; }
body.experience-ui #planner .add-stop-button { width: 100%; min-height: 44px; margin: 0; padding: 6px 10px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 12px; background: var(--surface); color: #2777d3; font-size: 12px; font-weight: 600; }
body.experience-ui #planner .add-stop-button svg { width: 16px; height: 16px; }
body.experience-ui #planner .add-stop-button small { margin-inline-start: auto; color: var(--muted); font-size: 10px; font-weight: 500; }
body.experience-ui #planner .add-stop-button:disabled { opacity: .45; }
body.experience-ui #planner .stop-order-controls { padding: 0; margin: 10px 0 0; border: 0; }
body.experience-ui #planner .stop-order-controls legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.experience-ui #planner .stop-order-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0; border: 0; background: none; }
body.experience-ui #planner .stop-order-options button { min-height: 44px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 600; }
body.experience-ui #planner .stop-order-options button[aria-pressed="true"] { color: #086888; background: #dff9fb; border-color: #45cad7; box-shadow: none; }
body.experience-ui.dark #planner .stop-order-options button[aria-pressed="true"] { color: #84edf3; background: #173b48; border-color: #397e8b; }
body.experience-ui #planner #stop-order-hint { margin: 7px 2px 0; font-size: 9px; line-height: 1.8; color: var(--muted); }
body.experience-ui #planner .stop-order-limit { display: none; }
body.experience-ui .primary-button,
body.experience-ui #planner .primary-button { min-height: 48px; border: 0; border-radius: 14px; color: #083540; background: var(--aqua); font-size: 14px; font-weight: 750; box-shadow: none; }
body.experience-ui #planner .primary-button:disabled { background: var(--surface); color: var(--muted); opacity: .8; }
body.experience-ui #planner .route-button { min-height: 48px; margin: 12px 0 0; border-radius: 14px; }

/* Results are mounted immediately after the focused address row, not below the form. */
body.experience-ui #planner .search-results { position: relative; inset: auto; grid-column: 1/-1; width: 100%; max-height: min(300px,42dvh); margin: 6px 0 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--ink); box-shadow: 0 6px 20px #14243d0d; z-index: 5; overflow: auto; overscroll-behavior: contain; }
body.experience-ui #planner .search-status { padding: 8px 10px; margin: 0; border-radius: 0; background: var(--surface); font-size: 10px; line-height: 1.8; }
body.experience-ui #planner .search-results .place-option { align-items: stretch; gap: 2px; min-height: 58px; padding: 9px 11px; background: var(--panel); border: 0; border-bottom: 1px solid var(--border); color: var(--ink); text-align: right; }
body.experience-ui #planner .search-results .place-option:last-child { border-bottom: 0; }
body.experience-ui #planner .search-results .place-option strong { font-size: 13px; line-height: 1.6; font-weight: 650; }
body.experience-ui #planner .search-results .place-option span { font-size: 10px; line-height: 1.7; color: var(--muted); }
body.experience-ui #planner .search-results .place-option small { font-size: 8px; color: var(--muted); }
body.experience-ui #planner .search-results .place-option:hover,
body.experience-ui #planner .search-results .place-option[aria-selected="true"] { background: var(--aqua-light); box-shadow: inset -3px 0 var(--blue); }
body.experience-ui #planner .search-actions { padding: 8px; gap: 7px; }
body.experience-ui #planner .search-actions button { min-height: 44px; border: 1px solid var(--border); border-radius: 10px; color: var(--ink); font-size: 10px; background: var(--surface); }
body.experience-ui #planner .search-attribution { padding: 0 10px 7px; font-size: 8px; line-height: 1.7; }

/* The review sheet is a result, rather than a second copy of the address editor. */
body.experience-ui #planner .route-result { margin: 0; padding: 0; border: 0; }
body.experience-ui #planner .result-heading { display: none; }
body.experience-ui #planner .route-metrics { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; align-items: center; margin: 0; padding: 0; }
body.experience-ui #planner .metric { gap: 0; align-items: center; }
body.experience-ui #planner .metric.main-metric strong { color: var(--route-violet); font-size: 32px; font-weight: 850; line-height: 1.25; }
body.experience-ui #planner .metric strong { color: var(--ink); font-size: 22px; font-weight: 750; line-height: 1.35; }
body.experience-ui #planner .metric span { font-size: 9px; color: var(--muted); }
body.experience-ui #planner .route-alternatives { margin-top: 10px; gap: 6px; scrollbar-width: none; }
body.experience-ui #planner .route-alternative { min-height: 44px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 12px; font-size: 10px; background: var(--surface); }
body.experience-ui #planner .route-alternative.selected,
body.experience-ui #planner .route-alternative[aria-pressed="true"] { color: var(--blue); border-color: #aa82eb; background: var(--aqua-light); }
body.experience-ui #planner .route-note { font-size: 10px; line-height: 1.7; margin: 8px 1px 0; color: var(--muted); }
body.experience-ui #planner .waypoint-navigation-note { font-size: 9px; line-height: 1.8; margin: 6px 0 0; padding: 7px 9px; border-radius: 9px; background: var(--surface); color: var(--muted); }
body.experience-ui #planner .route-actions { display: grid; grid-template-columns: 1fr 82px; gap: 8px; margin-top: 11px; }
body.experience-ui #planner .route-actions .primary-button,
body.experience-ui #planner .route-actions .secondary-button { min-height: 46px; border-radius: 13px; padding: 8px 9px; font-size: 12px; }
body.experience-ui #planner .route-actions .secondary-button { border: 1px solid var(--border); color: var(--ink); background: var(--surface); }
.route-secondary-actions { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 2px; }
body.experience-ui #planner .route-preview-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 5px 8px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 11px; }
body.experience-ui #planner .route-preview-button svg { width: 15px; height: 15px; }
.route-edit-button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; width: 100%; padding: 6px 10px; border: 0; border-radius: 11px; color: var(--ink); background: var(--surface); font-family: inherit; font-size: 12px; font-weight: 600; }
.route-edit-button svg { width: 16px; height: 16px; }
body.experience-ui #planner .steps-button { min-height: 44px; margin-top: 0; font-size: 10px; }
body.experience-ui #planner .route-steps { margin-top: 0; font-size: 11px; }

body.experience-ui[data-app-stage="home"] #planner,
body.experience-ui[data-app-stage="home"] #planner.collapsed { top: auto; max-height: none; height: auto; }
body.experience-ui[data-app-stage="home"] #planner .planner-content { display: none; }
body.experience-ui[data-app-stage="home"] #planner .panel-toggle { display: none; }
body.experience-ui[data-app-stage="home"] #planner .home-search-row { display: flex; align-items: center; gap: 0; margin: 12px; padding: 0 4px; border: 1px solid var(--border); border-radius: 28px; background: var(--surface); }
body.experience-ui[data-app-stage="home"] #destination-shortcut { display: flex; flex: 1; min-width: 0; width: auto; min-height: 56px; margin: 0; padding: 8px 12px; gap: 12px; border: 0; border-radius: 25px; background: transparent; color: var(--ink); text-align: right; }
body.experience-ui #destination-shortcut-copy { min-width: 0; }
body.experience-ui #destination-shortcut .destination-shortcut-copy strong { display: block; font-size: 20px; font-weight: 750; line-height: 1.5; }
body.experience-ui #destination-shortcut .destination-shortcut-copy small,
body.experience-ui #destination-shortcut .destination-shortcut-arrow { display: none; }
body.experience-ui #destination-shortcut > svg { width: 22px; height: 22px; color: #758396; }
.home-voice-button { flex: 0 0 48px; display: grid; place-items: center; width: 48px; height: 48px; min-height: 48px; padding: 0; border: 0; border-radius: 50%; background: none; color: #68798d; }
.home-voice-button svg { width: 24px; height: 24px; }
body.experience-ui[data-app-stage="home"] #planner .home-shortcuts { display: none; }
body.experience-ui:is([data-app-stage="editing"],[data-app-stage="loading"]) #planner .planner-content { display: block; }
body.experience-ui:is([data-app-stage="editing"],[data-app-stage="loading"]) #planner .route-form { display: block; }
body.experience-ui[data-app-stage="overview"] #planner .planner-content { display: block; padding-top: 0; }
body.experience-ui[data-app-stage="overview"] #planner .route-form { display: none; }
body.experience-ui .route-alternatives { display: flex; gap: 7px; overflow-x: auto; padding: 5px 0; scrollbar-width: thin; }
body.experience-ui .route-alternative { flex: 0 0 auto; min-height: 42px; font-size: 11px; padding: 7px 10px; }
body.experience-ui .destination-summary { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 4px 0 10px; }
body.experience-ui .destination-summary > span { flex: 0 0 auto; font-size: 11px; color: var(--muted); }
body.experience-ui .destination-summary > strong { min-width: 0; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.experience-ui[data-app-stage="overview"] #planner .route-result:not([hidden]) { display: block; }
body.experience-ui[data-app-stage="navigation"] #planner { display: none; }

/* Small, consistent map controls never dominate the route itself. */
body.experience-ui .app-shell .map-tools { left: 16px; bottom: 148px; gap: 8px; }
body.experience-ui .map-tool { width: 46px; height: 46px; min-height: 46px; border: 0; border-radius: 50%; color: #46637d; background: var(--panel); box-shadow: var(--small-shadow); }
body.experience-ui .map-tool svg { width: 22px; height: 22px; }
body.experience-ui .app-shell .report-button { right: auto; left: 16px; bottom: 72px; width: 52px; height: 52px; min-height: 52px; border: 0; border-radius: 50%; background: #ffcf65; color: #43340e; box-shadow: var(--small-shadow); gap: 0; }
body.experience-ui .report-button svg { width: 24px; height: 24px; }
body.experience-ui .report-button span { display: none; }
body.experience-ui #follow-button { min-width: 46px; max-width: 160px; width: auto; padding: 0 12px; border-radius: 23px; color: var(--ink); background: var(--panel); }
body.experience-ui #follow-button span { font-size: 10px; }
body.experience-ui .map-pick-banner { top: calc(66px + env(safe-area-inset-top)); border-radius: 14px; }
body.experience-ui .app-shell .toast { bottom: calc(var(--darb-bottom-space) + 16px); max-width: min(500px,calc(100% - 28px)); padding: 11px 15px; border-radius: 14px; font-size: 12px; line-height: 1.8; }

/* Destination and start are recognisable shapes; no simulated location accuracy. */
body.experience-ui .darb-marker.origin { width: 22px; height: 22px; border: 4px solid #fff; border-radius: 50%; background: #258dff; box-shadow: 0 2px 7px #152c5860; }
body.experience-ui .darb-marker.origin > span { display: none; }
body.experience-ui .darb-marker.destination { width: 31px; height: 37px; border: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 2px 3px #14213d40); }
body.experience-ui .darb-marker.destination > span { display: block; width: 28px; height: 28px; border: 3px solid #fff; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: conic-gradient(#1c2535 25%,#fff 0 50%,#1c2535 0 75%,#fff 0) 0 0/11px 11px; box-shadow: 0 0 0 1px #1c2535; }
body.experience-ui .darb-marker.destination svg { width: 31px; height: 37px; }
body.experience-ui .waypoint-stop-marker { display: grid; place-items: center; width: 26px; height: 30px; border: 2px solid #fff; border-radius: 15px 15px 15px 4px; background: var(--route-violet); color: #fff; font-size: 12px; font-weight: 750; box-shadow: 0 2px 7px #2f116b50; }
body.experience-ui :is(.route-time-badge,.route-duration-label) { min-height: 44px; min-width: 50px; padding: 5px 8px; border: 1px solid #dce1e8; border-radius: 10px; background: var(--panel); color: var(--ink); font-size: 12px; font-weight: 750; box-shadow: 0 2px 7px #16223b25; white-space: nowrap; }
body.experience-ui :is(.route-time-badge,.route-duration-label).selected { color: #fff; border-color: #4c108f; background: #6823d6; }

/* Guidance has one dark instruction card and a small bottom trip summary. */
body.experience-ui.navigating .journey-header,
body.experience-ui.navigating .brand,
body.experience-ui.navigating .region-switcher { display: none; }
body.experience-ui.navigating #nav-panel { top: var(--darb-top); right: 16px; left: auto; width: 354px; padding: 9px 16px 13px; border-radius: 20px; max-height: min(230px,35dvh); background: #192333; color: #fff; box-shadow: var(--shadow); }
body.experience-ui #nav-panel .nav-top { min-height: 18px; color: #afc4d5; font-size: 10px; }
body.experience-ui #nav-panel .maneuver { padding: 5px 0 0; gap: 12px; align-items: center; }
body.experience-ui #nav-panel .maneuver-icon { width: 54px; height: 62px; color: #08cad3; }
body.experience-ui #nav-panel .maneuver-icon svg { width: 50px; height: 50px; }
body.experience-ui #nav-panel .maneuver-copy strong { color: #fff; font-size: 31px; font-weight: 800; line-height: 1.3; }
body.experience-ui #nav-panel .maneuver-copy p { color: #fff; margin-top: 2px; font-size: 14px; line-height: 1.7; }
body.experience-ui #nav-panel .maneuver-copy small { color: #b6c6d5; font-size: 11px; line-height: 1.7; }
body.experience-ui .trip-summary { right: 16px; left: auto; bottom: 16px; width: 354px; padding: 12px 14px 8px; border: 1px solid #6f86a020; border-radius: 21px; background: var(--panel); box-shadow: var(--shadow); }
body.experience-ui .trip-metrics { grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; }
body.experience-ui .trip-metric strong { font-size: 20px; font-weight: 750; }
body.experience-ui .trip-time strong { font-size: 28px; color: var(--ink); }
body.experience-ui .trip-metric span { font-size: 9px; color: var(--muted); }
body.experience-ui .trip-summary .stop-button { min-width: 48px; min-height: 48px; padding: 5px; border-radius: 13px; color: #b33340; background: #ffe3e6; font-size: 10px; }
body.experience-ui .trip-summary .stop-button svg { width: 17px; height: 17px; }
body.experience-ui .trip-summary-detail { padding-top: 6px; margin-top: 6px; border-top: 1px solid var(--border); min-height: 25px; }
body.experience-ui .trip-summary .speed-indicator { gap: 5px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
body.experience-ui .trip-summary .speed-indicator strong { min-width: 2ch; text-align: center; font-size: 23px; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--ink); }
body.experience-ui .trip-summary .speed-indicator span { font-size: 10px; }
body.experience-ui .trip-estimate { font-size: 9px; }
body.experience-ui.navigating .app-header { top: auto; right: auto; left: 16px; bottom: 194px; }
body.experience-ui.navigating .app-shell .map-tools { left: 16px; bottom: 138px; }
body.experience-ui.navigating .app-shell .report-button { right: 16px; left: auto; bottom: 138px; display: flex; }
body.experience-ui.navigating #appearance-button { display: none; }

#navigation-speech-status { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.native-pip-option { display: flex; align-items: center; gap: 10px; margin: 18px 0; padding: 14px 0; border-block: 1px solid var(--border); }
.native-pip-icon { display: grid; place-items: center; width: 34px; height: 36px; color: #697f96; }
.native-pip-icon svg { width: 27px; height: 27px; }
.native-pip-option > div { flex: 1; min-width: 0; }
.native-pip-option label { color: var(--ink); font-size: 11px; font-weight: 650; }
.native-pip-option p { font-size: 9px; line-height: 1.8; color: var(--muted); margin: 3px 0 0; }
.native-pip-option input { appearance: none; flex: 0 0 34px; width: 34px; height: 21px; border: 0; border-radius: 12px; margin: 0; background: #d5dce5; position: relative; }
.native-pip-option input::before { content: ''; position: absolute; width: 15px; height: 15px; top: 3px; right: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #253c5a20; }
.native-pip-option input:checked { background: #05b8c4; }
.native-pip-option input:checked::before { right: 16px; }
.native-pip-option input:disabled { opacity: .45; }

@media (max-width: 800px) {
  body.experience-ui { --darb-bottom-space: 90px; }
  body.experience-ui[data-app-stage="home"] { --darb-bottom-space: calc(90px + env(safe-area-inset-bottom)); }
  body.experience-ui[data-app-stage="editing"],
  body.experience-ui[data-app-stage="loading"] { --darb-bottom-space: min(62dvh,560px); }
  body.experience-ui[data-app-stage="overview"] { --darb-bottom-space: min(330px,42dvh); }
  body.experience-ui.navigating { --darb-bottom-space: calc(182px + env(safe-area-inset-bottom)); }
  body.experience-ui #planner,
  body.experience-ui #planner.collapsed,
  body.experience-ui.panel-collapsed #planner { top: auto; right: 0; left: 0; bottom: 0; width: 100%; height: auto; max-height: var(--darb-bottom-space); padding: 0; border: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -4px 26px #17243815; }
  body.experience-ui #planner .planner-content { padding: 0 16px calc(14px + env(safe-area-inset-bottom)); }
  body.experience-ui[data-app-stage="home"] #planner { padding-bottom: env(safe-area-inset-bottom); }
  body.experience-ui #planner .panel-toggle { height: 30px; min-height: 30px; }
  body.experience-ui #planner .home-search-row { margin: 12px 14px 14px; }
  body.experience-ui #planner .field-button { width: 44px; flex-basis: 44px; }
  body.experience-ui #planner .waypoint-field input { font-size: 16px; }
  body.experience-ui .app-shell .map-tools { right: 13px; left: auto; bottom: calc(var(--darb-bottom-space) + 18px); }
  body.experience-ui .app-shell .report-button { right: auto; left: 13px; bottom: calc(var(--darb-bottom-space) + 18px); }
  body.experience-ui .map-tools .zoom-group,
  body.experience-ui .map-tools .compass-button { display: none; }
  body.experience-ui .app-shell .toast { bottom: calc(var(--darb-bottom-space) + 15px); }
  body.experience-ui[data-app-stage="overview"] #planner .route-metrics { grid-template-columns: 1.2fr 1fr 1fr; }
  body.experience-ui[data-app-stage="overview"] #planner .route-note { max-height: 36px; overflow: auto; }
  body.experience-ui[data-app-stage="overview"] #planner .route-actions { margin-top: 9px; }
  body.experience-ui[data-app-stage="overview"] #planner .route-secondary-actions { display: flex; margin-top: 2px; }
  body.experience-ui[data-app-stage="overview"] #planner .route-edit-button { padding-inline: 7px; width: 100%; min-height: 46px; }
  body.experience-ui[data-app-stage="overview"] #planner .steps-button { display: inline-flex; float: none; padding-inline: 7px; width: auto; }
  body.experience-ui[data-app-stage="overview"] #planner #steps-panel { clear: both; }
  body.experience-ui.navigating #nav-panel { left: 12px; right: 12px; width: auto; max-height: min(208px,29dvh); border-radius: 20px; padding: 8px 15px 12px; }
  body.experience-ui.navigating .trip-summary { right: 0; left: 0; bottom: 0; width: 100%; padding: 12px 15px calc(10px + env(safe-area-inset-bottom)); border: 0; border-radius: 23px 23px 0 0; }
  body.experience-ui.navigating .app-header { top: auto; bottom: calc(var(--darb-bottom-space) + 76px); left: 13px; right: auto; }
  body.experience-ui.navigating .app-shell .map-tools { left: auto; right: 13px; bottom: calc(var(--darb-bottom-space) + 18px); }
  body.experience-ui.navigating .app-shell .report-button { left: 13px; right: auto; bottom: calc(var(--darb-bottom-space) + 18px); }
  body.experience-ui .report-category { min-height: 113px; }
  body.experience-ui .report-art { width: 68px; height: 68px; border-radius: 50%; }
  body.experience-ui .report-art svg { width: 51px; height: 51px; }
}

@media (max-width: 380px) {
  body.experience-ui .brand-name { font-size: 21px; }
  body.experience-ui .brand-mark { width: 28px; height: 28px; }
  body.experience-ui #planner .planner-content { padding-inline: 12px; }
  body.experience-ui #planner .waypoint-row { gap: 6px; }
  body.experience-ui #planner .waypoint-actions { gap: 0; }
  body.experience-ui #planner .metric.main-metric strong { font-size: 28px; }
  body.experience-ui #planner .metric strong { font-size: 19px; }
  body.experience-ui #planner .route-actions .primary-button,
  body.experience-ui #planner .route-actions .secondary-button { font-size: 11px; }
}

/* Landscape keeps the form and route card beside the usable map, including with keyboard open. */
@media (max-height: 500px) and (min-width: 550px) {
  body.experience-ui { --darb-bottom-space: 12px; }
  body.experience-ui .journey-header { right: 0; left: 0; }
  body.experience-ui #planner,
  body.experience-ui #planner.collapsed,
  body.experience-ui.panel-collapsed #planner { top: 66px; bottom: 12px; right: 12px; left: auto; width: min(360px,47vw); max-height: calc(100dvh - 78px); border-radius: 20px; }
  body.experience-ui[data-app-stage="home"] #planner,
  body.experience-ui[data-app-stage="home"] #planner.collapsed { top: auto; max-height: none; }
  body.experience-ui .app-shell .map-tools { left: 12px; right: auto; bottom: 18px; }
  body.experience-ui .app-shell .report-button { left: 72px; right: auto; bottom: 18px; }
  body.experience-ui .region-switcher { top: 66px; left: 12px; right: auto; }
  body.experience-ui.navigating #nav-panel { right: 12px; left: auto; width: min(360px,47vw); max-height: calc(100dvh - 165px); }
  body.experience-ui.navigating .trip-summary { right: 12px; left: auto; bottom: 12px; width: min(360px,47vw); border-radius: 20px; padding: 10px 12px; }
  body.experience-ui.navigating .app-header { top: var(--darb-top); bottom: auto; left: 12px; right: auto; }
  body.experience-ui.navigating .app-shell .map-tools { left: 12px; right: auto; bottom: 18px; }
  body.experience-ui.navigating .app-shell .report-button { left: 72px; right: auto; bottom: 18px; }
  body.experience-ui .app-shell .toast { left: 12px; right: auto; bottom: 82px; transform: none; max-width: calc(50vw - 22px); }
}
@media (max-height: 560px) and (max-width: 549px) {
  body.experience-ui[data-app-stage="editing"],
  body.experience-ui[data-app-stage="loading"] { --darb-bottom-space: calc(100dvh - 68px - env(safe-area-inset-top)); }
  body.experience-ui #planner .search-results { max-height: 36dvh; }
}

/* PiP uses only the map and an abbreviated real maneuver, never a fake video overlay. */
body.experience-ui.pip-active .app-header,
body.experience-ui.pip-active .journey-header,
body.experience-ui.pip-active #planner,
body.experience-ui.pip-active .trip-summary,
body.experience-ui.pip-active .map-tools,
body.experience-ui.pip-active .report-button,
body.experience-ui.pip-active .region-switcher,
body.experience-ui.pip-active .toast,
body.experience-ui.pip-active .startup-map-credit { display: none !important; }
body.experience-ui.pip-active #nav-panel { top: 5px; left: 5px; right: 5px; width: auto; max-height: 40%; padding: 4px 7px; border-radius: 8px; box-shadow: 0 2px 8px #1114; overflow: hidden; }
body.experience-ui.pip-active #nav-panel .nav-top,
body.experience-ui.pip-active #nav-panel .maneuver-copy small { display: none; }
body.experience-ui.pip-active #nav-panel .maneuver { gap: 6px; padding: 0; }
body.experience-ui.pip-active #nav-panel .maneuver-icon { width: 28px; height: 30px; }
body.experience-ui.pip-active #nav-panel .maneuver-icon svg { width: 26px; height: 26px; }
body.experience-ui.pip-active #nav-panel .maneuver-copy strong { font-size: 18px; line-height: 1.2; }
body.experience-ui.pip-active #nav-panel .maneuver-copy p { font-size: 10px; line-height: 1.2; margin: 0; }
body.experience-ui.pip-active .vehicle-marker .vehicle-heading { width: 28px; height: 36px; }

/* One compact choice before destination selection, folded into its mode icon afterwards. */
.travel-mode-selector { display:flex; gap:4px; margin:0 0 12px; padding:4px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.travel-mode-selector[hidden] { display:none; }
.travel-mode-selector button { flex:1; min-height:48px; display:flex; justify-content:center; align-items:center; gap:9px; border:0; border-radius:14px; background:transparent; color:var(--ink); font:inherit; cursor:pointer; }
.travel-mode-selector button[aria-pressed="true"] { background:var(--teal,#04bcc5); color:#082e36; font-weight:800; }
.travel-mode-selector svg,.travel-mode-change svg { width:25px; height:25px; }
.travel-mode-change { border:0; cursor:pointer; }
body[data-travel-mode="pedestrian"] .vehicle-marker .vehicle-heading { width:42px; height:54px; }

.journey-header .travel-mode-change { flex:0 0 44px; width:44px; height:44px; margin-inline-start:auto; border-radius:14px; background:var(--surface); color:var(--teal,#04bcc5); display:grid; place-items:center; }

body.experience-ui[data-app-stage="editing"] .journey-header,body.experience-ui[data-app-stage="overview"] .journey-header,body.experience-ui[data-app-stage="loading"] .journey-header { padding-left:112px; }

.travel-mode-selector { position:sticky; top:0; z-index:3; background:var(--surface); }

/* Gray means unknown when traffic is enabled; provider details are in Information. */
.traffic-card { margin-top:8px; padding:8px 10px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.traffic-control { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.traffic-control button { min-height:44px; border:0; border-radius:9px; padding:6px 10px; background:var(--surface); color:var(--ink); font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.traffic-control button[aria-pressed="true"] { box-shadow:inset 0 0 0 1px var(--teal,#04bcc5); }
.traffic-control button:disabled { cursor:default; opacity:.6; }
.traffic-status,.traffic-consent { margin:3px 0 0; font-size:11px; line-height:1.6; color:var(--muted); }
.traffic-legend { display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:5px; color:var(--ink); font-size:11px; }
.traffic-legend span { display:inline-flex; gap:4px; align-items:center; }
.traffic-legend i { display:inline-block; width:13px; height:4px; border-radius:1px; }
.traffic-normal { background:#26c76f; }.traffic-slow { background:#ffae32; }.traffic-jam { background:#f34955; }.traffic-unknown { background:#8798b2; }
.google-traffic-credit { flex:none; padding:3px 5px; border-radius:3px; background:#fff; color:#202124; font:400 12px/1.4 Arial,sans-serif; letter-spacing:normal; white-space:nowrap; }
.nav-traffic { border-top:1px solid var(--border); padding-top:5px; margin-top:5px; }
.traffic-legend[hidden],.google-traffic-credit[hidden],.nav-traffic[hidden],.traffic-consent[hidden] { display:none; }
body.pip-active .nav-traffic { display:none; }


/* Essential controls are siblings of the sheets, never in their scrolling area. */
body.experience-ui .start-driving-control { position:fixed; z-index:18; top:calc(var(--darb-top,16px) + 66px); right:16px; width:354px; }
body.experience-ui .start-driving-control[hidden] { display:none; }
body.experience-ui .start-driving-control .primary-button { width:100%; min-height:52px; box-shadow:0 4px 18px #0003; }
body.experience-ui #follow-button { position:fixed; z-index:18; right:16px; left:auto; bottom:var(--driving-controls-bottom,200px); min-height:52px; border:2px solid var(--teal,#04bcc5); }
body.experience-ui #follow-button[aria-pressed="true"] { background:var(--teal,#04bcc5); color:#082e36; }
body.experience-ui .driving-speed { position:fixed; z-index:18; left:16px; bottom:var(--driving-controls-bottom,200px); width:76px; height:76px; aspect-ratio:1; border:4px solid var(--teal,#04bcc5); border-radius:50%; padding:6px; gap:0; background:var(--panel); color:var(--ink); box-shadow:0 3px 16px #0004; flex-direction:column; }
body.experience-ui .driving-speed strong { font-size:30px; line-height:1.2; font-weight:800; font-variant-numeric:tabular-nums; text-align:center; color:var(--ink); }
body.experience-ui .driving-speed span { font-size:10px; line-height:1.4; color:var(--muted); }
body.experience-ui .driving-speed[hidden], body.experience-ui #follow-button[hidden] { display:none; }
body.experience-ui.navigating #locate-button { display:none; }
body.experience-ui.navigating .app-shell .report-button { left:16px; right:auto; bottom:calc(var(--driving-controls-bottom,200px) + 88px); }
body.experience-ui.navigating .app-header { left:16px; right:auto; bottom:calc(var(--driving-controls-bottom,200px) + 150px); }
body.experience-ui.navigating #nijkerk-badge { display:none; }
body.experience-ui[data-app-stage="overview"] #nijkerk-badge { top:auto; bottom:calc(var(--darb-bottom-space) + 76px); }
@media (max-width:800px) and (orientation:portrait) {
  body.experience-ui .start-driving-control { right:12px; left:12px; width:auto; }
  body.experience-ui #follow-button { right:12px; }
  body.experience-ui .driving-speed { left:12px; }
}
@media (orientation:landscape) and (max-height:600px) {
  body.experience-ui #follow-button { right:auto; left:104px; bottom:16px; }
  body.experience-ui .driving-speed { left:12px; bottom:16px; width:66px; height:66px; }
  body.experience-ui.navigating .app-shell .report-button { left:12px; bottom:94px; }
  body.experience-ui.navigating .app-header { left:12px; bottom:156px; }
}
body.experience-ui.pip-active #follow-button, body.experience-ui.pip-active .driving-speed, body.experience-ui.pip-active .start-driving-control { display:none; }
@media (min-width:801px) and (min-height:601px) {
  body.experience-ui.navigating .app-shell .map-tools { left:16px; right:auto; bottom:calc(var(--driving-controls-bottom,200px) + 208px); }
}

/* Provider detail and consent live only in the Information dialog. */
.traffic-information { scroll-margin-top:16px; }
.info-dialog .traffic-consent { font-size:13px; line-height:1.9; }
.traffic-consent-actions { display:grid; gap:10px; margin-top:16px; }
.traffic-consent-actions[hidden] { display:none; }
.traffic-consent-actions button { width:100%; min-height:46px; }