:root {
  --bg:#eee9df; --surface:#f8f5ee; --surface-2:#e9e4d9; --text:#26322d; --muted:#6c746d;
  --line:#bdb7ab; --line-dark:#8f928b; --accent:#c85b3c; --accent-dark:#9f452f; --accent-soft:#f1ddd5;
  --secondary:#2f6f68; --secondary-soft:#dde9e5; --blue:#3d6fc7; --header-h:48px; --footer-h:32px;
}
*{box-sizing:border-box} html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif}
button,input,dialog{font:inherit} button{color:inherit}.app-shell{width:100%;height:100%;display:grid;grid-template-rows:var(--header-h) minmax(0,1fr);background:var(--surface)}
.app-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 18px;background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:1000}
.brand,.brand-copy{display:flex;align-items:baseline;gap:12px;min-width:0}.brand-home{display:flex;align-items:baseline;color:inherit;text-decoration:none;min-width:0}.brand-home:hover strong{text-decoration:underline;text-underline-offset:3px}.brand-home:focus-visible{outline:2px solid var(--secondary);outline-offset:4px;border-radius:4px}.brand strong{font-size:15px;line-height:1;font-weight:700;letter-spacing:-.02em;white-space:nowrap}.brand span{color:var(--muted);font-size:12px;white-space:nowrap}
.nav-actions{display:flex;align-items:stretch;gap:0;flex-shrink:0;height:100%;border-left:1px solid var(--line)}.nav-button{min-height:100%;border:0;border-right:1px solid var(--line);background:transparent;border-radius:0;padding:0 14px;cursor:pointer;font-size:12px;font-weight:600}.nav-button:hover{background:var(--surface-2)}.nav-button.primary{background:var(--secondary);color:#fff;border-color:var(--secondary)}.nav-button.primary:hover{background:#285f59}
.app-main{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) var(--footer-h)}.route-workspace{min-height:0;display:grid;grid-template-columns:minmax(0,1fr);transition:grid-template-columns .18s ease}.route-workspace.has-results{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.map-panel{min-width:0;min-height:0;position:relative;overflow:hidden;background:#d8ded8;border-right:1px solid var(--line-dark)}#map{width:100%;height:100%;background:#d8ded8}
.site-footer{height:var(--footer-h);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 14px;background:var(--surface);border-top:1px solid var(--line);color:var(--muted);font-size:9px;line-height:1;white-space:nowrap;overflow:hidden}
.panel-kicker{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.map-planner{position:absolute;z-index:750;top:24px;left:24px;width:min(520px,calc(100% - 48px));display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;gap:8px 12px;padding:14px;background:rgba(248,245,238,.97);border:1px solid var(--line-dark);border-top:3px solid var(--secondary);box-shadow:none}.map-planner .panel-kicker{grid-column:1/-1;margin-bottom:2px}.planner-locations{grid-column:1;display:flex;flex-direction:column;gap:7px;min-width:0}.location-row,.stop-row{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:8px;align-items:center;min-width:0}.location-row label,.stop-row label{align-self:center;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.map-planner .route-submit{grid-column:2;grid-row:2;min-width:118px;align-self:stretch}.map-planner .form-status{grid-column:1/-1;min-height:0}.stops-container{display:flex;flex-direction:column;gap:7px}.planner-tools{display:flex;align-items:center;gap:6px;padding-left:66px}.planner-tool-button,.stop-control-button{border:1px solid var(--line-dark);background:var(--surface);color:var(--text);border-radius:0;min-height:28px;padding:4px 8px;font:inherit;font-size:10px;font-weight:700;cursor:pointer}.planner-tool-button:hover,.stop-control-button:hover{background:var(--surface-2)}.flip-route-button[hidden]{display:none}.stop-controls{display:flex;align-items:center;gap:3px}.stop-control-button{width:28px;padding:0}.stop-drag{cursor:grab;font-size:15px;letter-spacing:-3px}.stop-row.dragging{opacity:.45}.stop-row.drag-over{box-shadow:inset 0 2px 0 var(--secondary)}
.input-wrap{position:relative;min-width:0;width:100%}.route-input{display:block;min-width:0;width:100%;height:38px;border:1px solid var(--line-dark);border-radius:0;background:#fff;color:var(--text);padding:0 10px;outline:none}.route-input:focus{border-color:var(--secondary);box-shadow:inset 0 0 0 1px var(--secondary)}.route-submit{border:1px solid var(--secondary);background:var(--secondary);color:#fff;border-radius:0;padding:0 15px;cursor:pointer;font-weight:700}.route-submit:hover{background:#285f59}.route-submit:disabled{opacity:.55;cursor:wait}.form-status{color:var(--muted);font-size:11px;line-height:1.35}.form-status.error{color:#8d3f31;font-weight:650}
.autocomplete-list{position:absolute;left:0;right:0;top:100%;z-index:1300;background:var(--surface);border:1px solid var(--line-dark);border-top:0;max-height:220px;overflow:auto}.autocomplete-list[hidden]{display:none}.autocomplete-item{width:100%;min-height:38px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 10px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--surface);text-align:left;cursor:pointer}.autocomplete-item:last-child{border-bottom:0}.autocomplete-item:hover,.autocomplete-item:focus-visible{background:var(--surface-2);outline:2px solid var(--secondary);outline-offset:-2px}.autocomplete-item strong{font-size:12px}.autocomplete-item span{color:var(--muted);font-size:10px}.autocomplete-scope-note{padding:10px 12px;color:var(--muted);font-size:11px;line-height:1.35;border-top:3px solid var(--accent);background:var(--surface)}
.map-prompt,.map-status{position:absolute;z-index:600;background:rgba(248,245,238,.94);border:1px solid var(--line);border-radius:0;box-shadow:none;color:var(--text);pointer-events:none}.map-prompt{top:24px;right:24px;padding:8px 12px;font-size:12px;font-weight:650;white-space:normal;border-top:3px solid var(--accent);max-width:min(40vw,500px);text-align:center}.map-status{left:12px;bottom:12px;padding:7px 10px;font-size:11px;max-width:min(72vw,520px);line-height:1.35;color:var(--muted)}
.directions-panel{min-width:0;min-height:0;background:var(--surface);display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr) auto;overflow:hidden}.directions-panel[hidden]{display:none}.directions-head{padding:18px 22px 14px;border-bottom:1px solid var(--line)}.trip-place{margin-top:6px;font-size:clamp(18px,2.2vw,28px);line-height:1.1;font-weight:750;letter-spacing:-.03em}.trip-explainer{margin-top:8px;color:#4f5953;font-size:12px;line-height:1.42;max-width:680px}
.route-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}.route-option{position:relative;min-width:0;border:0;border-right:1px solid var(--line);border-radius:0;background:var(--surface);padding:13px 10px 12px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:3px}.route-option:last-child{border-right:0}.route-option:hover{background:var(--surface-2)}.route-option.active{background:var(--secondary-soft)}.route-option.active::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--secondary)}.route-option.balanced.active{background:var(--accent-soft)}.route-option.balanced.active::before{background:var(--accent)}.route-option.fastest.active{background:#e3e9f4}.route-option.fastest.active::before{background:var(--blue)}.route-option:focus-visible{outline:3px solid var(--secondary);outline-offset:-3px}.route-option-label{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.route-option-time{font-size:clamp(21px,2.6vw,34px);line-height:1;letter-spacing:-.04em;margin-top:4px}.route-option-distance{color:var(--muted);font-size:11px}.route-option-exposure{font-size:11px;font-weight:700;margin-top:3px}.route-option-note{color:var(--muted);font-size:9px;line-height:1.25;margin-top:2px}.route-option.privacy .route-option-label{color:var(--secondary)}.route-option.balanced .route-option-label{color:var(--accent-dark)}.route-option.fastest .route-option-label{color:#315b9d}
.selected-route-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:14px 22px 10px;border-bottom:1px solid var(--line)}.selected-route-head h2{margin:4px 0 0;font-size:20px;line-height:1.1;letter-spacing:-.025em}.new-route-button{min-height:30px;border:1px solid var(--line-dark);background:transparent;border-radius:0;padding:4px 10px;cursor:pointer;font-size:10px;font-weight:700}.new-route-button:hover{background:var(--surface-2)}.selected-route-summary{padding:10px 22px;border-bottom:1px solid var(--line);font-size:11px;line-height:1.42;color:#4f5953}.selected-route-summary strong{color:var(--text)}
.directions-scroll{min-height:0;overflow:auto}.directions-title{position:sticky;top:0;z-index:2;padding:10px 22px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.directions-list{margin:0;padding:0;list-style:none}.direction-step{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:9px;align-items:start;padding:10px 22px;border-bottom:1px solid #d8d2c7}.direction-step-number{width:24px;height:24px;display:grid;place-items:center;background:var(--text);color:#fff;font-size:9px;font-weight:800}.direction-step-copy{font-size:12px;line-height:1.35}.direction-step-distance{color:var(--muted);font-size:10px;white-space:nowrap;padding-top:2px}.directions-empty{padding:18px 22px;color:var(--muted);font-size:11px}.coverage-note{padding:10px 22px;background:#f3f0e8;border-top:1px solid var(--line);color:var(--muted);font-size:9px;line-height:1.35}
.endpoint-marker{width:20px;height:20px;border-radius:50%;background:var(--secondary);border:4px solid var(--surface);box-shadow:0 0 0 2px var(--secondary)}.endpoint-marker.destination{width:14px;height:14px;background:var(--accent);border:3px solid var(--surface);box-shadow:0 0 0 2px var(--accent);transform:rotate(45deg);border-radius:0}.camera-marker{width:18px;height:18px;border-radius:50%;background:#2b59c3;border:3px solid var(--surface);box-shadow:0 0 0 2px #2b59c3;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:900}.camera-marker::after{content:"•";line-height:1}
.leaflet-control-zoom{border:1px solid var(--line-dark)!important;border-radius:0!important;overflow:hidden;box-shadow:none!important}.leaflet-control-zoom a{border:none!important;border-bottom:1px solid var(--line)!important;color:var(--text)!important;background:rgba(248,245,238,.94)!important}.leaflet-control-zoom a:hover{background:var(--surface-2)!important}.leaflet-control-attribution{font-size:9px!important;background:rgba(248,245,238,.86)!important;border-radius:0!important;padding:2px 6px!important}.leaflet-popup-content-wrapper,.leaflet-popup-tip{border-radius:0!important;box-shadow:none!important}.leaflet-popup-content-wrapper{border:1px solid var(--line-dark)}
dialog{width:min(520px,calc(100vw - 32px));border:1px solid var(--line-dark);border-radius:0;padding:0;background:var(--surface);color:var(--text);box-shadow:10px 10px 0 rgba(38,50,45,.14)}dialog::backdrop{background:rgba(38,50,45,.30)}.dialog-inner{padding:22px}.dialog-inner h2{margin:0 0 10px;font-size:20px;font-weight:700;letter-spacing:-.02em}.dialog-inner p{margin:0 0 12px;color:#4f5953;font-size:14px;line-height:1.5}.dialog-inner small{color:var(--muted);line-height:1.45}.dialog-close{margin-top:18px;min-height:32px;border:1px solid var(--secondary);background:var(--secondary);color:#fff;border-radius:0;padding:6px 14px;cursor:pointer}
@media(max-width:820px), (max-width:1024px) and (max-height:520px) and (orientation:landscape){:root{--header-h:76px;--footer-h:30px}.app-header{display:grid;grid-template-columns:1fr;grid-template-rows:36px 40px;gap:0;padding:0;align-items:stretch}.brand{padding:0 12px;align-items:center;border-bottom:1px solid var(--line)}.brand span{display:none}.nav-actions{width:100%;height:40px;border-left:0}.nav-button{flex:1 1 0;min-width:0;padding:0 8px;font-size:11px}.route-workspace.has-results{grid-template-columns:1fr;grid-template-rows:minmax(36%,.72fr) minmax(0,1fr)}.map-planner{top:12px;left:12px;width:calc(100% - 24px);padding:10px;grid-template-columns:1fr;grid-template-rows:auto auto auto auto;gap:6px}.map-planner .route-submit{grid-column:1;grid-row:auto;min-height:36px}.map-planner .form-status{grid-column:1}.location-row,.stop-row{grid-template-columns:46px minmax(0,1fr) auto;gap:6px}.planner-tools{padding-left:52px;flex-wrap:wrap}.stop-drag{display:none}.map-prompt{display:none}.map-status{left:8px;bottom:8px;max-width:calc(100% - 16px)}.directions-panel{grid-template-rows:auto auto auto auto minmax(0,1fr) auto}.directions-head{padding:10px 12px 8px}.trip-place{font-size:18px}.trip-explainer{font-size:10px;margin-top:5px}.route-option{padding:9px 7px}.route-option-time{font-size:22px}.route-option-note{font-size:8px}.selected-route-head{padding:9px 12px 7px}.selected-route-summary{padding:8px 12px}.directions-title{padding:8px 12px}.direction-step{padding:8px 12px;grid-template-columns:28px minmax(0,1fr) auto}.coverage-note{padding:7px 12px}.site-footer{padding:0 8px;font-size:8px}.site-footer span:last-child{display:none}}
@media(max-width:480px){.route-options{grid-template-columns:1fr}.route-option{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;border-right:0;border-bottom:1px solid var(--line);gap:2px 8px}.route-option:last-child{border-bottom:0}.route-option-time{grid-column:2;grid-row:1/span 2;align-self:center}.route-option-distance,.route-option-exposure{font-size:9px}.route-option-note{display:none}}


/* v7: navigator-style directions. A direction is an interactive map state, not a static numbered list. */
.directions-toolbar{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px 9px 22px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.directions-toolbar .directions-title{position:static;padding:0;background:transparent;border:0}
.step-position{margin-top:3px;color:var(--muted);font-size:10px;line-height:1.2;font-variant-numeric:tabular-nums}
.step-controls{display:flex;align-items:stretch;height:32px;border:1px solid var(--line-dark);background:var(--surface)}
.overview-button,.step-nav-button{border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;color:var(--text);cursor:pointer;font:inherit;font-weight:700}
.overview-button{padding:0 10px;font-size:10px}.overview-button.active{background:var(--text);color:#fff}
.step-nav-button{width:34px;font-size:23px;line-height:1}.step-nav-button:last-child{border-right:0}
.overview-button:hover,.step-nav-button:hover:not(:disabled){background:var(--accent-soft)}
.step-nav-button:disabled{color:#aaa49a;background:#eeeae2;cursor:default}
.directions-list li{margin:0;padding:0;list-style:none}
.direction-step{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) 18px;gap:10px;align-items:center;padding:13px 18px 13px 22px;border:0;border-bottom:1px solid #d8d2c7;border-radius:0;background:var(--surface);color:var(--text);text-align:left;cursor:pointer;transition:background .1s ease}
.direction-step:hover{background:var(--surface-2)}
.direction-step:focus-visible{outline:3px solid var(--secondary);outline-offset:-3px}
.direction-step.active{background:var(--accent-soft);box-shadow:inset 4px 0 0 var(--accent)}
.direction-step-icon{width:34px;height:34px;display:grid;place-items:center;font-size:24px;line-height:1;font-weight:800;color:var(--secondary)}
.direction-step.active .direction-step-icon{color:var(--accent-dark)}
.direction-step-main{min-width:0;display:flex;flex-direction:column;gap:4px}
.direction-step-copy{font-size:13px;line-height:1.32;font-weight:650}
.direction-step-distance{color:var(--muted);font-size:10px;line-height:1.2;padding:0}
.direction-step-chevron{color:var(--line-dark);font-size:21px;line-height:1}
.step-focus-marker{width:14px;height:14px;background:var(--text);border:3px solid var(--surface);box-shadow:0 0 0 2px var(--text);transform:rotate(45deg)}
@media(max-width:820px), (max-width:1024px) and (max-height:520px) and (orientation:landscape){.directions-toolbar{padding:7px 8px 7px 12px}.overview-button{padding:0 8px}.direction-step{grid-template-columns:36px minmax(0,1fr) 14px;padding:11px 10px 11px 12px;gap:8px}.direction-step-icon{width:30px;height:30px;font-size:21px}.direction-step-copy{font-size:12px}}

/* Alpha verification diagnostics */
.deflock-status{font-weight:700;color:var(--accent-dark)}
.deflock-status.verified{color:var(--secondary)}
.deflock-status.failed{color:#8d3f31}
.route-option.verification-disabled{opacity:.42;cursor:not-allowed;background:var(--surface-2)}
.route-option.verification-disabled:hover{background:var(--surface-2)}

/* Alpha v14: international-border trust notice */
.border-notice {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-dark);
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}
.border-notice[hidden] { display: none; }

.route-option[hidden]{display:none!important}.route-options:has(.route-option[hidden]){grid-template-columns:1fr}.route-option.fast-only{border-right:0}.route-option.fast-only .route-option-note{display:block}

/* Alpha v23 UX pass: meaningful route choices + camera visibility */
.route-options[data-visible-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.route-options[data-visible-count="1"]{grid-template-columns:1fr}
.camera-marker{width:24px;height:24px;border-radius:0;background:#fff;border:2px solid #2b59c3;box-shadow:2px 2px 0 rgba(38,50,45,.18);display:grid;place-items:center;color:#2b59c3}
.camera-marker svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.camera-map-action{padding:0 14px 10px;border-bottom:1px solid var(--line)}
.camera-map-button{border:1px solid var(--secondary);border-radius:0;background:transparent;color:var(--secondary);padding:7px 10px;font:inherit;font-size:10px;font-weight:750;cursor:pointer}
.camera-map-button:hover,.camera-map-button:focus-visible{background:var(--secondary);color:#fff;outline:none}
.camera-map-button[hidden]{display:none}
.autocomplete-item strong{font-size:12px;line-height:1.2}.autocomplete-item span{font-size:10px;line-height:1.25;text-align:right;max-width:52%}
@media(max-width:480px){.route-options[data-visible-count="2"],.route-options[data-visible-count="1"]{grid-template-columns:1fr}.camera-map-action{padding:0 12px 8px}.camera-map-button{width:100%;min-height:36px}}
/* v23 adds a camera action row between summary and scrollable directions. */
.directions-panel{grid-template-rows:auto auto auto auto auto minmax(0,1fr) auto}
@media(max-width:820px), (max-width:1024px) and (max-height:520px) and (orientation:landscape){.directions-panel{grid-template-rows:auto auto auto auto auto minmax(0,1fr) auto}}

/* Alpha v28 UX pass: plainspoken privacy result + intent-aware search */
.privacy-result-message{padding:16px 22px 15px;border-bottom:1px solid var(--line);background:var(--surface-2);border-left:5px solid var(--secondary);font-size:13px;line-height:1.45;color:#4f5953}
.privacy-result-message[hidden]{display:none}
.privacy-result-message strong{display:block;margin:0 0 5px;color:var(--text);font-size:17px;line-height:1.15;letter-spacing:-.02em}
.privacy-result-message.warning{background:var(--accent-soft);border-left-color:var(--accent);color:#654b43}
.privacy-result-message.warning strong{color:var(--accent-dark)}
.privacy-result-message.neutral{background:#e8ecea;border-left-color:var(--line-dark)}
@media(max-width:820px), (max-width:1024px) and (max-height:520px) and (orientation:landscape){.privacy-result-message{padding:12px;font-size:12px}.privacy-result-message strong{font-size:16px}}


/* v35: routing progress is a centered, intentionally visible state instead of a tiny
   lower-left diagnostic. The emoji gives motion without implying fake percentage progress. */
.map-status.processing{
  position:absolute;
  left:50%;
  top:50%;
  bottom:auto;
  transform:translate(-50%,-50%);
  z-index:900;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  max-width:min(88vw,520px);
  padding:12px 16px;
  color:var(--text);
  background:rgba(248,245,238,.97);
  border:1px solid var(--line-dark);
  border-top:3px solid var(--secondary);
  font-size:12px;
  font-weight:700;
  text-align:center;
  pointer-events:none;
}
.map-status.processing .progress-emoji{
  display:inline-block;
  font-size:21px;
  line-height:1;
  animation:kiteProgressDrive 1.1s ease-in-out infinite alternate;
  transform-origin:center;
}
@keyframes kiteProgressDrive{
  0%{transform:translateX(-5px) rotate(-4deg)}
  100%{transform:translateX(5px) rotate(4deg)}
}
@media(prefers-reduced-motion:reduce){.map-status.processing .progress-emoji{animation:none}}
@media(max-width:820px), (max-width:1024px) and (max-height:520px) and (orientation:landscape){.map-status.processing{left:50%;top:50%;bottom:auto;max-width:calc(100% - 32px)}}

/* Alpha v36: map-to-field picking + multi-source camera uncertainty */
.map-panel.location-pick-mode #map{cursor:crosshair}
.map-panel.location-pick-mode .map-planner{box-shadow:0 0 0 2px var(--secondary)}
.camera-source-caveat{display:block;margin-top:8px;font-size:10px;line-height:1.35;color:var(--muted)}
.camera-source-caveat::before{content:"ⓘ ";font-weight:800;color:var(--secondary)}

/* Alpha v42: multi-stop route planning */
.stop-marker{width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);box-shadow:0 0 0 2px var(--accent-dark)}
@media(max-width:480px){.planner-tool-button{font-size:9px;padding:3px 6px}.stop-control-button{width:26px}.planner-tools{padding-left:0}.location-row,.stop-row{grid-template-columns:42px minmax(0,1fr) auto}}

/* Alpha v43: search/map-pick/camera-map refinement */
.route-input.map-pick-active{outline:3px solid var(--secondary);outline-offset:-3px;background:#f4fbf8}
.map-pick-marker{width:18px;height:18px;border-radius:50%;background:var(--secondary);border:4px solid #fff;box-shadow:0 0 0 2px var(--secondary)}
.camera-cluster-marker{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#2b59c3;border:2px solid #2b59c3;box-shadow:3px 3px 0 rgba(38,50,45,.18);font-size:10px;font-weight:850;font-variant-numeric:tabular-nums}
.camera-cluster-marker span{display:block;line-height:1}
.route-option-exposure{cursor:zoom-in;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.route-option-exposure:hover{color:var(--secondary)}
.leaflet-tooltip{border-radius:0!important;box-shadow:none!important;border:1px solid var(--line-dark)!important;background:rgba(248,245,238,.96)!important;color:var(--text)!important;font-size:10px!important}

/* Alpha v47: stronger route-outcome hierarchy + scan-first turn-by-turn. */
.privacy-result-message{padding:18px 22px 17px;border-left-width:6px}
.privacy-outcome-kicker{font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary);margin-bottom:6px}
.privacy-result-message.warning .privacy-outcome-kicker{color:var(--accent-dark)}
.privacy-result-message.neutral .privacy-outcome-kicker{color:var(--muted)}
.privacy-outcome-headline{font-size:clamp(19px,2vw,26px);line-height:1.08;font-weight:780;letter-spacing:-.025em;color:var(--text);max-width:760px}
.privacy-outcome-headline em{font-style:normal;color:var(--accent-dark)}
.privacy-outcome-detail{margin-top:8px;font-size:13px;line-height:1.45;max-width:760px}
.privacy-outcome-metrics{display:flex;flex-wrap:wrap;gap:0;margin-top:13px;border:1px solid var(--line-dark);width:max-content;max-width:100%}
.privacy-outcome-metric{display:flex;flex-direction:column;gap:2px;padding:8px 12px;min-width:104px;background:rgba(248,245,238,.72);border-right:1px solid var(--line)}
.privacy-outcome-metric:last-child{border-right:0}
.privacy-outcome-metric small{font-size:8px;line-height:1.1;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.privacy-outcome-metric strong{display:block;margin:0;font-size:14px;line-height:1.15;color:var(--text)}
.camera-source-caveat{display:block;margin-top:10px;padding-top:9px;border-top:1px solid rgba(143,146,139,.45);font-size:9px;line-height:1.35;color:var(--muted)}

.maneuver-focus{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:center;padding:13px 22px;background:var(--text);color:#f8f5ee;border-bottom:1px solid #111a16}
.maneuver-focus[hidden]{display:none}
.maneuver-focus-icon{width:50px;height:50px;display:grid;place-items:center;font-size:34px;line-height:1;font-weight:800;color:#fff}
.maneuver-focus-copy{min-width:0}
.maneuver-focus-kicker{font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#aeb7b0;margin-bottom:3px}
.maneuver-focus-instruction{font-size:18px;line-height:1.18;font-weight:760;letter-spacing:-.02em}
.maneuver-focus-next{margin-top:5px;font-size:10px;line-height:1.3;color:#c6cbc6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.direction-step{grid-template-columns:42px minmax(0,1fr) auto}
.direction-step-icon{font-size:26px}
.direction-step-copy{font-size:13px;font-weight:700}
.direction-step-distance{font-size:10px;font-weight:650}
.direction-step.active{background:#efe2dc;box-shadow:inset 5px 0 0 var(--accent)}
.direction-step.active .direction-step-copy{font-size:14px}
.direction-step.active .direction-step-distance{color:var(--accent-dark)}
.directions-toolbar{background:#e9e4d9}
.step-position{font-weight:650}

@media(max-width:820px), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  .privacy-result-message{padding:14px 12px 13px}
  .privacy-outcome-headline{font-size:19px}
  .privacy-outcome-detail{font-size:12px}
  .privacy-outcome-metrics{width:100%}
  .privacy-outcome-metric{flex:1 1 90px;padding:7px 8px;min-width:0}
  .maneuver-focus{grid-template-columns:46px minmax(0,1fr);gap:8px;padding:10px 12px}
  .maneuver-focus-icon{width:42px;height:42px;font-size:29px}
  .maneuver-focus-instruction{font-size:16px}
  .maneuver-focus-next{font-size:9px}
}

/* Two-point route swapping: drag either endpoint onto the other. */
.endpoint-row{position:relative}.endpoint-drag-handle{border:1px solid var(--line-dark);background:var(--surface);color:var(--muted);border-radius:0;width:30px;min-height:34px;padding:0;cursor:grab;font:inherit;font-size:15px;letter-spacing:-3px;font-weight:700}.endpoint-drag-handle:hover{background:var(--surface-2);color:var(--text)}.endpoint-row.endpoint-dragging{opacity:.55}.endpoint-row.endpoint-drop-target{box-shadow:inset 0 0 0 2px var(--secondary)}.endpoint-row.endpoint-drag-disabled .endpoint-drag-handle{display:none}
@media(max-width:820px), (max-width:1024px) and (max-height:520px) and (orientation:landscape){.endpoint-drag-handle{display:none}}

/* v49: Google-Maps-style route-point reordering. Handles move any From/Stop/To point. */
.route-point-row{position:relative;transition:background .12s ease,opacity .12s ease}
.route-point-drag-handle{cursor:grab;touch-action:none}
.route-point-drag-handle:active{cursor:grabbing}
.route-point-row.route-point-dragging{opacity:.42;background:var(--surface-2)}
.route-point-row.route-point-drop-before::before,
.route-point-row.route-point-drop-after::after{content:"";position:absolute;left:0;right:0;height:3px;background:var(--secondary);z-index:3;pointer-events:none}
.route-point-row.route-point-drop-before::before{top:-5px}
.route-point-row.route-point-drop-after::after{bottom:-5px}
@media(max-width:820px), (max-width:1024px) and (max-height:520px) and (orientation:landscape){.endpoint-drag-handle,.stop-drag{display:none!important}}


/* Alpha v51: coverage clarity, mobile results polish, and camera-aware maneuver context. */
.planner-purpose{margin:-2px 0 8px;color:var(--muted);font-size:10px;line-height:1.3;max-width:340px}
.coverage-summary{margin-top:10px;border:1px solid var(--line-dark);background:#f3f0e8}
.coverage-summary-label{padding:7px 9px 6px;border-bottom:1px solid var(--line);font-size:9px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.coverage-chip-row{display:flex;flex-wrap:wrap;gap:0}
.coverage-chip{display:flex;flex-direction:column;gap:2px;min-width:150px;flex:1 1 150px;padding:8px 9px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.coverage-chip strong{font-size:11px;line-height:1.15}
.coverage-chip span{font-size:9px;line-height:1.25;color:var(--muted)}
.coverage-chip.verified{background:#edf4f0}
.coverage-chip.verified strong{color:var(--secondary)}
.coverage-chip.unknown{background:#f7efe9}
.coverage-chip.unknown strong{color:var(--accent-dark)}
.coverage-summary-note{padding:7px 9px;font-size:9px;line-height:1.35;color:var(--muted)}
.maneuver-focus-camera{margin-top:7px;padding-top:6px;border-top:1px solid rgba(255,255,255,.18);font-size:10px;line-height:1.3;color:#f0d8ce;font-weight:700}
.maneuver-focus-camera[hidden]{display:none}

@media(max-width:820px), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  .planner-purpose{font-size:9px;margin-bottom:5px;max-width:none}
  .route-workspace.has-results{grid-template-rows:minmax(34%,.66fr) minmax(0,1fr)}
  .directions-panel{min-height:0;overflow:hidden}
  .directions-head{position:relative;z-index:5;background:var(--surface)}
  .route-options{position:sticky;top:0;z-index:4;background:var(--surface)}
  .selected-route-summary{font-size:10px;line-height:1.35}
  .coverage-summary{margin-top:8px}
  .coverage-chip{min-width:0;flex:1 1 33.333%;padding:7px 8px}
  .coverage-chip strong{font-size:10px}
  .coverage-chip span,.coverage-summary-note{font-size:8.5px}
  .maneuver-focus-camera{font-size:9px}
  .camera-cluster-marker{width:38px;height:38px;font-size:11px}
  .leaflet-popup-content{font-size:12px;line-height:1.35}
  .map-status.processing{max-width:calc(100% - 40px);padding:11px 13px}
}
@media(max-width:480px){
  .route-workspace.has-results{grid-template-rows:minmax(31%,.58fr) minmax(0,1fr)}
  .route-options{display:grid;grid-template-columns:1fr!important}
  .route-option{min-height:64px;padding:9px 10px}
  .route-option-time{font-size:21px}
  .privacy-result-message{border-left-width:5px}
  .coverage-chip-row{display:grid;grid-template-columns:1fr}
  .coverage-chip{border-right:0}
  .maneuver-focus{position:sticky;top:0;z-index:3}
  .directions-toolbar{position:sticky;top:0;z-index:2}
}

/* Alpha v52: 2026 visual-system pass. More map, less chrome. No behavior changes. */
:root{
  --bg:#f1f0eb;--surface:#fbfaf7;--surface-2:#f1f0eb;--text:#202824;--muted:#69716c;
  --line:#d7d5ce;--line-dark:#c2c4be;--accent:#c65b3d;--accent-dark:#9d452f;--accent-soft:#f7e8e2;
  --secondary:#286b63;--secondary-soft:#e7f1ee;--blue:#416cae;--header-h:56px;--footer-h:30px;
  --radius-sm:10px;--radius:16px;--radius-lg:22px;
  --shadow:0 8px 28px rgba(28,38,33,.10),0 2px 7px rgba(28,38,33,.06);
  --shadow-soft:0 4px 16px rgba(28,38,33,.08);
}
.app-shell{background:var(--bg)}
.app-header{padding:0 20px;background:rgba(251,250,247,.94);border-bottom:1px solid rgba(194,196,190,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.brand,.brand-copy{gap:10px}.brand strong{font-size:18px;font-weight:760;letter-spacing:-.04em}.brand span{font-size:11px;color:var(--muted)}
.nav-actions{height:auto;border:0;gap:7px}.nav-button{min-height:36px;border:1px solid var(--line);border-radius:999px;padding:0 13px;background:rgba(251,250,247,.8);font-size:11px;font-weight:680}.nav-button:hover{background:#fff}.nav-button.primary{border-color:var(--secondary);background:var(--secondary)}
.map-panel{border-right:0;background:#dfe3df}.site-footer{background:rgba(251,250,247,.96);border-top:1px solid var(--line);font-size:9px;padding:0 16px}
.map-planner{top:20px;left:20px;width:min(500px,calc(100% - 40px));grid-template-columns:minmax(0,1fr) auto;gap:9px 12px;padding:16px;border:1px solid rgba(194,196,190,.8);border-top:0;border-radius:var(--radius-lg);background:rgba(251,250,247,.95);box-shadow:var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.panel-kicker{font-size:9px;font-weight:780;letter-spacing:.11em}.planner-purpose{margin:-1px 0 7px;font-size:11px;line-height:1.4;max-width:390px}.location-row label,.stop-row label{font-size:10px;letter-spacing:.05em;text-transform:none;font-weight:700}
.route-input{height:42px;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(255,255,255,.96);padding:0 12px}.route-input:focus{border-color:var(--secondary);box-shadow:0 0 0 3px rgba(40,107,99,.12)}
.route-submit{border:0;border-radius:var(--radius-sm);padding:0 17px;min-height:42px;box-shadow:none;font-size:12px}.planner-tool-button,.stop-control-button,.endpoint-drag-handle{border-color:var(--line);border-radius:8px;background:rgba(255,255,255,.65)}
.autocomplete-list{margin-top:5px;border:1px solid var(--line);border-radius:var(--radius);overflow:auto;box-shadow:var(--shadow-soft);background:rgba(251,250,247,.98)}.autocomplete-item{border-bottom-color:var(--line);background:transparent}.autocomplete-item:hover,.autocomplete-item:focus-visible{background:var(--surface-2);outline:0}
.map-prompt{top:20px;right:20px;border:1px solid rgba(194,196,190,.8);border-top:0;border-radius:999px;background:rgba(251,250,247,.92);box-shadow:var(--shadow-soft);backdrop-filter:blur(12px);padding:9px 14px;font-size:11px;font-weight:650;max-width:min(42vw,460px)}
.map-status{border-radius:var(--radius);border-color:var(--line);background:rgba(251,250,247,.94)}.map-status.processing{border:1px solid rgba(194,196,190,.85);border-top:0;border-radius:var(--radius-lg);background:rgba(251,250,247,.97);box-shadow:var(--shadow);padding:14px 18px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.directions-panel{background:var(--surface);border-left:1px solid var(--line)}.directions-head{padding:20px 22px 15px}.trip-place{font-size:clamp(21px,2.3vw,30px);font-weight:760}.trip-explainer{color:var(--muted);font-size:11px}
.route-options{gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface)}.route-option{border:1px solid var(--line)!important;border-radius:var(--radius);padding:12px;background:#fff;box-shadow:none}.route-option:hover{background:#fff;border-color:var(--line-dark)!important;box-shadow:var(--shadow-soft)}.route-option.active{background:var(--secondary-soft);border-color:rgba(40,107,99,.35)!important}.route-option.active::before{display:none}.route-option.balanced.active{background:var(--accent-soft);border-color:rgba(198,91,61,.32)!important}.route-option.fastest.active{background:#edf1f7;border-color:#ccd7e7!important}.route-option-label{font-size:9px;letter-spacing:.07em}.route-option-time{font-size:clamp(23px,2.6vw,32px)}.route-option-note{font-size:9px}
.privacy-result-message{margin:10px 12px 0;border:1px solid var(--line);border-left:0;border-radius:var(--radius);padding:14px 16px;background:var(--surface-2)}.privacy-result-message.warning{border:1px solid #e9cfc5;background:#fbf0eb}.privacy-result-message.neutral{border:1px solid var(--line)}.privacy-outcome-kicker{font-size:9px}.privacy-outcome-headline{font-size:clamp(18px,2vw,24px)}.privacy-outcome-metrics{border-color:var(--line);border-radius:10px;overflow:hidden}.privacy-outcome-metric{background:rgba(255,255,255,.55)}
.selected-route-head{padding:15px 22px 11px}.new-route-button,.overview-button,.step-nav-button,.camera-map-button{border-color:var(--line);border-radius:999px;background:#fff}.new-route-button{padding:5px 11px}.camera-map-action{padding:0 22px 10px}.camera-map-button{padding:7px 11px;color:var(--secondary)}
.maneuver-focus{margin:0 12px 10px;border-radius:var(--radius);border:1px solid #17211d;background:#202824;padding:13px 15px}.directions-toolbar{background:var(--surface-2);padding-left:22px;padding-right:16px}.direction-step{border-bottom-color:#e5e2dc;padding:11px 22px}.direction-step.active{background:#f7ece7;box-shadow:inset 3px 0 0 var(--accent)}.coverage-note{background:var(--surface-2)}
.border-notice,.coverage-summary{border-radius:var(--radius-sm);border-color:var(--line);overflow:hidden}.coverage-summary{background:var(--surface-2)}
.camera-marker{border-radius:8px;box-shadow:var(--shadow-soft)}.camera-cluster-marker{border-radius:999px;box-shadow:var(--shadow-soft)}
.leaflet-control-zoom a{border-radius:0!important}.leaflet-control-zoom{border:0!important;border-radius:12px!important;overflow:hidden;box-shadow:var(--shadow-soft)!important}.leaflet-control-attribution{background:rgba(251,250,247,.82)!important}
@media(max-width:820px), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  :root{--header-h:52px;--footer-h:28px}.app-header{padding:0 12px}.brand span{display:none}.nav-button{min-height:34px;padding:0 11px}.map-planner{top:12px;left:12px;width:calc(100% - 24px);padding:13px;border-radius:18px}.map-prompt{top:auto;right:12px;left:12px;bottom:12px;max-width:none;border-radius:14px}.route-options{display:flex!important;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;padding:9px 10px;gap:8px}.route-option{flex:0 0 min(78vw,250px);scroll-snap-align:start;min-height:88px}.privacy-result-message{margin:8px 10px 0}.maneuver-focus{margin:0 10px 8px}.directions-head{padding:14px 12px 10px}.selected-route-head{padding:12px}.selected-route-summary{padding:9px 12px}.camera-map-action{padding:0 12px 9px}.direction-step{padding-left:12px;padding-right:12px}.site-footer{padding:0 10px;gap:12px}.site-footer span:nth-child(3){display:none}
}
@media(max-width:480px){
  .map-planner{grid-template-columns:1fr;gap:7px}.map-planner .route-submit{grid-column:1;grid-row:auto;min-height:40px}.planner-purpose{font-size:10px}.route-options{display:flex!important}.route-option{flex-basis:82vw}.privacy-outcome-metrics{border-radius:8px}.map-status.processing{width:calc(100% - 40px);font-size:11px}.nav-button:first-child{display:none}
}


/* Alpha v54: two-point planner + persistent visible routing activity */
.two-point-tools{justify-content:flex-end}
.map-status.processing{min-width:min(280px,calc(100% - 40px));will-change:transform}
.map-status.processing .progress-emoji{animation:kiteProgressDrive .9s ease-in-out infinite alternate}
\n\n/* Alpha v56: mobile + human-use refinement */\n@media(max-width:820px), (max-width:1024px) and (max-height:520px) and (orientation:landscape){\n  .route-workspace.has-results{grid-template-rows:minmax(250px,43%) minmax(0,57%);background:var(--surface)}\n  .directions-panel{border-left:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -8px 24px rgba(30,38,34,.08);position:relative;z-index:3}\n  .directions-panel::before{content:\"\";display:block;position:absolute;top:6px;left:50%;width:34px;height:4px;border-radius:999px;background:#c8cbc6;transform:translateX(-50%);z-index:8}\n  .directions-head{padding-top:18px}\n  .route-options{-webkit-overflow-scrolling:touch;scroll-padding:10px;overscroll-behavior-x:contain}\n  .route-option{touch-action:pan-x;min-height:92px}\n  .route-option:active{transform:scale(.99)}\n  .selected-route-head{gap:10px}.new-route-button{min-height:36px;padding:7px 12px}\n  .overview-button,.step-nav-button,.camera-map-button{min-height:36px}\n  .step-nav-button{min-width:36px}\n  .maneuver-focus{position:sticky;top:0;z-index:5;box-shadow:0 4px 12px rgba(20,26,23,.14)}\n  .direction-step{min-height:54px}\n  .direction-step-camera{font-weight:700}\n  .coverage-note{font-size:9px;line-height:1.35}\n}\n@media(max-width:390px){\n  .app-header{padding:0 8px}.nav-button{padding:0 9px;font-size:10px}\n  .map-planner{left:8px;top:8px;width:calc(100% - 16px);padding:11px}\n  .route-workspace.has-results{grid-template-rows:minmax(220px,40%) minmax(0,60%)}\n  .route-option{flex-basis:86vw}\n  .trip-place{font-size:17px}.trip-explainer{font-size:9px}\n}\n@media(max-width:820px) and (orientation:landscape){\n  .route-workspace.has-results{grid-template-columns:minmax(46%,.9fr) minmax(0,1.1fr);grid-template-rows:1fr}\n  .directions-panel{border-top:0;border-left:1px solid var(--line);border-radius:0;box-shadow:none}\n  .directions-panel::before{display:none}\n  .map-planner{max-height:calc(100% - 24px);overflow:auto}\n}\n
/* Alpha v57: clean planner overlays + one-line mobile header */
/* Keep the map's explanatory pill out from under the planner card on desktop. */
@media(min-width:821px){
  .map-prompt{
    left:540px;
    right:20px;
    max-width:none;
    width:auto;
  }
}
@media(min-width:821px) and (max-width:1080px){
  /* At this width there is not enough honest room for both floating surfaces. */
  .map-prompt{display:none}
}

/* On phones, Kite and Use my location share the same compact header row. */
@media(max-width:820px), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  :root{--header-h:52px}
  .app-header{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:52px;
    align-items:center;
    gap:8px;
    padding:0 10px 0 12px;
  }
  .brand{
    min-width:0;
    height:52px;
    padding:0;
    border-bottom:0;
    align-items:center;
  }
  .brand-home,.brand-copy{min-width:0}
  .brand strong{font-size:18px}
  .nav-actions{
    width:auto;
    height:auto;
    border:0;
    gap:0;
  }
  #howButton{display:none}
  #locateButton{
    min-height:36px;
    width:auto;
    flex:0 0 auto;
    padding:0 14px;
    border-radius:999px;
    white-space:nowrap;
  }
}
@media(max-width:390px){
  .app-header{padding-left:10px;padding-right:8px}
  #locateButton{padding:0 11px;font-size:10px}
}


/* Alpha v58: two-field swap control + collision-safe map message */
.planner-locations{
  position:relative;
  padding-right:44px;
}
.location-row{
  grid-template-columns:58px minmax(0,1fr);
}
.two-point-tools{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.flip-route-button{
  width:36px;
  min-width:36px;
  height:50px;
  min-height:50px;
  padding:0;
  display:grid;
  place-items:center;
  font-size:18px;
  line-height:1;
  border-radius:10px;
}
/* Endpoint drag handles are retired while Kite is origin + destination only. */
.endpoint-drag-handle{display:none!important}

/* Keep the map result/prompt pill entirely clear of the planner instead of
   allowing its left edge to tuck behind the floating form. */
@media(min-width:1081px){
  .map-prompt{
    left:auto!important;
    right:20px!important;
    width:min(360px,calc(100% - 560px));
    max-width:calc(100% - 560px)!important;
  }
}
@media(min-width:821px) and (max-width:1080px){
  .map-prompt{display:none!important}
}
@media(max-width:820px), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  .planner-locations{padding-right:42px}
  .location-row{grid-template-columns:46px minmax(0,1fr)}
  .two-point-tools{right:0}
  .flip-route-button{width:36px;min-width:36px;height:52px;min-height:52px;font-size:18px}
}
@media(max-width:480px){
  .planner-locations{padding-right:40px}
  .location-row{grid-template-columns:42px minmax(0,1fr)}
}

/* Alpha v60: multinational coverage clarity + quieter provenance language */
.coverage-summary{margin-top:10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.76);overflow:hidden}
.coverage-summary-label{padding:9px 11px 7px;border-bottom:1px solid var(--line);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.coverage-chip-row{display:flex;gap:0;flex-wrap:wrap}
.coverage-chip{display:flex;align-items:center;gap:8px;min-width:170px;flex:1 1 170px;padding:9px 11px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent}
.coverage-chip-icon{width:20px;height:20px;border-radius:999px;display:grid;place-items:center;flex:0 0 20px;font-size:11px;font-weight:900}
.coverage-chip-copy{display:flex;flex-direction:column;gap:1px;min-width:0}
.coverage-chip-copy strong{font-size:11px;line-height:1.15;color:var(--text)}
.coverage-chip-copy span{font-size:9px;line-height:1.25;color:var(--muted)}
.coverage-chip.verified{background:#f2f7f4}
.coverage-chip.verified .coverage-chip-icon{background:#dcebe4;color:var(--secondary)}
.coverage-chip.unknown{background:#fbf5f0}
.coverage-chip.unknown .coverage-chip-icon{background:#f1ddd3;color:var(--accent-dark)}
.coverage-summary-note{padding:8px 11px;font-size:9.5px;line-height:1.4;color:var(--muted);background:rgba(247,245,240,.72)}
.camera-source-caveat{display:block;margin-top:9px;padding-top:8px;border-top:1px solid var(--line);font-size:9px;line-height:1.4;color:var(--muted)}
.camera-source-caveat::before{content:""}
.camera-source-caveat strong{color:var(--text);font-weight:750}
.camera-popup-meta{display:grid;gap:3px;margin-top:8px;font-size:11px;line-height:1.35;color:#59625d}
.camera-popup-meta b{color:#26322d}
.camera-popup-note{padding-top:5px;margin-top:2px;border-top:1px solid #e5e2dc;color:#737a76;font-size:10px}
@media(max-width:820px), (max-width:1024px) and (max-height:520px) and (orientation:landscape){.coverage-chip-row{display:grid;grid-template-columns:1fr}.coverage-chip{min-width:0;border-right:0}.coverage-summary-note{font-size:9px}.coverage-summary{margin-top:8px}}


/* Alpha v61: directions clarity */
.step-nav-button{width:auto;min-width:86px;padding:0 11px;font-size:11px;line-height:1;font-weight:760;white-space:nowrap}
.direction-step-camera{color:var(--accent-dark);font-weight:760}
.maneuver-focus-camera{border-top-color:rgba(255,255,255,.22)}
@media(max-width:480px){.step-nav-button{min-width:74px;padding:0 8px;font-size:10px}.directions-toolbar{gap:6px}.step-controls{height:36px}}


/* Alpha v62: mobile torture-pass hardening */
@media(max-width:820px), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  .app-header{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .nav-button,.route-submit,.new-route-button,.overview-button,.step-nav-button,.camera-map-button,.flip-route-button{min-height:40px}
  .route-workspace,.map-shell,.directions-panel{min-width:0}
  .directions-panel{overflow:hidden}
  .directions-list{overscroll-behavior:contain}
  .route-options{scrollbar-width:none}
  .route-options::-webkit-scrollbar{display:none}
  .map-planner{max-width:calc(100% - 24px)}
}
@media(max-width:360px){
  .map-planner{left:6px;top:6px;width:calc(100% - 12px);max-width:calc(100% - 12px);padding:10px}
  .location-row{grid-template-columns:38px minmax(0,1fr) 36px}
  .location-row label{font-size:9px}
  .flip-route-button{width:36px;min-width:36px}
  .route-option{flex-basis:88vw}
  .directions-head,.selected-route-head,.selected-route-summary,.directions-title{padding-left:10px;padding-right:10px}
}
@media(max-width:820px) and (orientation:landscape){
  .app-header{min-height:48px}
  .route-workspace.has-results{min-height:0}
  .map-planner{max-height:calc(100% - 12px);left:8px;top:6px;width:min(430px,calc(100% - 16px))}
  .directions-panel{min-width:0}
}


/* Alpha v63: final UX copy/data-disclosure polish */
.coverage-note strong{color:var(--text);font-weight:750}
@media(max-width:820px), (max-width:1024px) and (max-height:520px) and (orientation:landscape){.coverage-note{font-size:9.5px;line-height:1.4}}

/* Alpha v65: mobile-first map density pass
   Goal: keep the map as the primary surface and progressively disclose copy/results. */
@media(max-width:820px), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  :root{--header-h:48px;--footer-h:0px}

  /* Header: one compact utility row. */
  .app-header{grid-template-rows:48px;min-height:48px;height:48px}
  .brand{height:48px}
  .brand strong{font-size:17px}
  #locateButton{min-height:34px;height:34px;padding:0 12px;font-size:10px}
  .site-footer{display:none!important}

  /* Planner: inputs first, explanation later. The map should still feel like the screen. */
  .map-planner{
    top:8px;
    left:8px;
    width:calc(100% - 16px);
    max-width:calc(100% - 16px);
    padding:9px 10px 10px;
    gap:6px;
    border-radius:15px;
  }
  .map-planner>.panel-kicker,
  .map-planner>.planner-purpose{display:none}
  .planner-locations{padding-right:40px}
  .location-row{grid-template-columns:38px minmax(0,1fr);gap:6px}
  .location-row label{font-size:9px;letter-spacing:.02em}
  .route-input{height:38px;padding:0 10px;font-size:16px}
  .flip-route-button{width:34px;min-width:34px;height:46px;min-height:46px;font-size:17px;border-radius:9px}
  .route-submit{min-height:38px!important;height:38px;font-size:11px;border-radius:10px}
  .form-status{font-size:9px;line-height:1.25;min-height:0}
  .autocomplete-list{max-height:min(38vh,280px)}

  /* Results: map first, bottom sheet second. */
  .route-workspace.has-results{
    grid-template-columns:1fr;
    grid-template-rows:minmax(54%,1fr) minmax(0,46%);
  }
  .directions-panel{
    border-radius:16px 16px 0 0;
    grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
  }
  .directions-panel::before{top:5px;width:30px;height:3px}

  /* Trip heading: enough context, not a paragraph. */
  .directions-head{padding:15px 11px 7px}
  .directions-head>.panel-kicker{display:none}
  .trip-place{
    font-size:16px;
    line-height:1.18;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .trip-explainer{display:none}
  .border-notice{margin-top:6px;padding:7px 8px;font-size:9px;line-height:1.3}

  /* Coverage is still visible on international trips, but compact. */
  .coverage-summary{margin-top:6px;border-radius:10px}
  .coverage-summary-label{display:none}
  .coverage-chip-row{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .coverage-chip-row::-webkit-scrollbar{display:none}
  .coverage-chip{flex:0 0 auto;min-width:auto;padding:6px 8px;border-bottom:0;gap:5px}
  .coverage-chip-icon{width:16px;height:16px;flex-basis:16px;font-size:9px}
  .coverage-chip-copy strong{font-size:9px;white-space:nowrap}
  .coverage-chip-copy span{display:none}
  .coverage-summary-note{display:none}

  /* Outcome copy is important, but not allowed to take over the phone. */
  .privacy-result-message{margin:5px 8px 0;padding:8px 10px;border-radius:10px;font-size:10px;line-height:1.3}
  .privacy-outcome-kicker{display:none}
  .privacy-outcome-headline{font-size:14px;line-height:1.15;margin-bottom:3px}
  .privacy-outcome-copy{font-size:9.5px;line-height:1.3}
  .privacy-outcome-metrics{margin-top:6px;display:flex;overflow-x:auto}
  .privacy-outcome-metric{min-width:0;flex:1 1 0;padding:5px 6px}
  .privacy-outcome-metric span{font-size:8px}
  .privacy-outcome-metric strong{font-size:11px}

  /* Route options become quick-select chips/cards. */
  .route-options{
    padding:6px 8px 7px;
    gap:6px;
    scroll-padding:8px;
  }
  .route-option{
    flex:0 0 min(68vw,215px);
    min-height:68px;
    padding:8px 9px;
    border-radius:11px;
    gap:1px;
  }
  .route-option-label{font-size:8px;letter-spacing:.05em}
  .route-option-time{font-size:19px;margin-top:2px}
  .route-option-distance,.route-option-exposure{font-size:8.5px;line-height:1.2}
  .route-option-note{display:none}

  /* Selected route controls: one compact row. */
  .selected-route-head{padding:7px 10px 5px;align-items:center}
  .selected-route-head .panel-kicker{display:none}
  .selected-route-head h2{font-size:13px;line-height:1.15;margin:0}
  .new-route-button{min-height:32px;padding:4px 9px;font-size:9px}
  .selected-route-summary{padding:5px 10px;font-size:9px;line-height:1.25}
  .camera-map-action{padding:0 10px 6px}
  .camera-map-button{min-height:32px;padding:5px 9px;font-size:9px}

  /* Maneuver focus: compact navigation cue, not a second card wall. */
  .maneuver-focus{margin:0 8px 6px;padding:8px 10px;border-radius:11px;gap:8px}
  .maneuver-focus-icon{font-size:24px}
  .maneuver-focus-kicker{font-size:8px}
  .maneuver-focus-instruction{font-size:13px;line-height:1.2}
  .maneuver-focus-next,.maneuver-focus-camera{font-size:9px;line-height:1.25}

  /* Directions are the scrollable detail layer. */
  .directions-toolbar{padding:5px 8px;gap:5px}
  .directions-title{padding:0;font-size:8px;border:0;background:transparent}
  .step-position{font-size:8px}
  .step-controls{gap:4px;height:auto}
  .overview-button,.step-nav-button{min-height:30px;height:30px;padding:0 8px;font-size:9px;min-width:0}
  .direction-step{min-height:46px;padding:7px 9px;grid-template-columns:30px minmax(0,1fr) auto;gap:7px}
  .direction-step-icon{width:26px;height:26px;font-size:18px}
  .direction-step-copy{font-size:11px;line-height:1.25}
  .direction-step-distance{font-size:8.5px}
  .coverage-note{padding:5px 9px;font-size:8px;line-height:1.25}

  /* Loading must stay visible, but compact enough to preserve map context. */
  .map-status.processing{
    width:auto;
    min-width:0;
    max-width:calc(100% - 40px);
    padding:10px 13px;
    border-radius:14px;
    font-size:10px;
  }
}

@media(max-width:390px){
  .route-workspace.has-results{grid-template-rows:minmax(57%,1fr) minmax(0,43%)}
  .map-planner{top:6px;left:6px;width:calc(100% - 12px);max-width:calc(100% - 12px);padding:8px}
  .route-input{height:36px}
  .route-submit{height:36px;min-height:36px!important}
  .route-option{flex-basis:72vw;min-height:65px}
  .privacy-result-message{margin-left:6px;margin-right:6px}
}

@media(max-width:820px) and (orientation:landscape){
  /* Landscape behaves like a compact split-view nav app. */
  :root{--header-h:44px}
  .app-header{height:44px;min-height:44px;grid-template-rows:44px}
  .brand{height:44px}
  .route-workspace.has-results{grid-template-columns:minmax(52%,1.05fr) minmax(0,.95fr);grid-template-rows:1fr}
  .map-planner{max-height:calc(100% - 12px);overflow:auto;width:min(390px,calc(100% - 16px))}
  .directions-head{padding-top:10px}
  .privacy-result-message{padding-top:6px;padding-bottom:6px}
  .route-option{flex-basis:180px}
}

/* Alpha v66: super-minimal mobile. One-screen planner/results, no vertical scrolling. */
@media(max-width:820px) and (orientation:portrait), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  :root{--header-h:46px;--footer-h:0px}
  .app-header{height:46px;min-height:46px;grid-template-rows:46px}
  .brand{height:46px;padding-left:10px}.brand strong{font-size:17px}
  #locateButton{height:32px;min-height:32px;padding:0 10px;font-size:9px}

  /* Initial planner: compact floating control, map remains the screen. */
  .map-planner{top:6px;left:6px;width:calc(100% - 12px);max-width:calc(100% - 12px);padding:7px 8px;border-radius:13px;gap:4px}
  .planner-locations{padding-right:36px}
  .location-row{grid-template-columns:34px minmax(0,1fr);gap:4px}
  .location-row label{font-size:8px}
  .route-input{height:34px;font-size:15px;padding:0 8px;border-radius:8px}
  .flip-route-button{right:0;width:31px;min-width:31px;height:42px;min-height:42px;font-size:16px;border-radius:8px}
  .route-submit{height:34px;min-height:34px!important;border-radius:8px;font-size:10px}
  .form-status:empty{display:none}
  .form-status{font-size:8px;line-height:1.15}

  /* Results: map gets most of the viewport; result sheet is a fixed compact dashboard. */
  .route-workspace.has-results{grid-template-rows:minmax(0,62%) minmax(0,38%)}
  .directions-panel{border-radius:14px 14px 0 0;grid-template-rows:auto auto auto auto minmax(0,1fr);overflow:hidden}
  .directions-panel::before{top:4px;width:26px;height:3px}

  /* Only the essential context survives on phone. */
  .directions-head{padding:12px 8px 4px;border-bottom:0}
  .trip-place{font-size:13px;line-height:1.1;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .border-notice{margin-top:3px;padding:4px 6px;font-size:7.5px;line-height:1.2;max-height:30px;overflow:hidden}
  .coverage-summary{margin-top:3px;border:0;background:transparent;border-radius:0}
  .coverage-chip-row{gap:3px;overflow:hidden}
  .coverage-chip{padding:2px 5px;border:0;border-radius:999px;background:var(--surface-2)!important;gap:3px}
  .coverage-chip-icon{width:13px;height:13px;flex-basis:13px;font-size:7px}
  .coverage-chip-copy strong{font-size:7.5px}

  /* Outcome is one concise sentence, not a card. */
  .privacy-result-message{margin:0 8px 3px;padding:0;border:0!important;background:transparent!important;border-radius:0;font-size:8px;line-height:1.2}
  .privacy-outcome-headline{font-size:10px;line-height:1.15;margin:0;font-weight:760}
  .privacy-outcome-detail,.privacy-outcome-copy,.privacy-outcome-metrics,.camera-source-caveat{display:none!important}

  /* All route choices visible at once: no carousel, no scrolling. */
  .route-options{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;overflow:visible;padding:3px 6px 5px;gap:4px;border-bottom:1px solid var(--line)}
  .route-options[data-visible-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .route-options[data-visible-count="1"]{grid-template-columns:1fr!important}
  .route-option{min-width:0;min-height:52px;flex:none;padding:5px 6px;border-radius:8px!important;gap:0;overflow:hidden}
  .route-option-label{font-size:6.8px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .route-option-time{font-size:15px;line-height:1;margin:2px 0 1px}
  .route-option-distance{font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .route-option-exposure{font-size:7px;line-height:1.05;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
  .route-option-note{display:none!important}

  /* One compact selected-route/nav row. */
  .selected-route-head{padding:4px 7px 3px;min-height:28px;border-bottom:0;align-items:center}
  .selected-route-head h2{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw}
  .new-route-button{height:27px;min-height:27px!important;padding:0 7px;font-size:8px;border-radius:7px}
  .selected-route-summary,.camera-map-action{display:none!important}

  /* Keep the useful next-maneuver cue, but collapse the full direction list on mobile. */
  .maneuver-focus{position:static;margin:0 6px 5px;padding:5px 7px;border-radius:8px;grid-template-columns:28px minmax(0,1fr);gap:5px;box-shadow:none;min-height:0}
  .maneuver-focus-icon{width:26px;height:26px;font-size:19px}
  .maneuver-focus-kicker{font-size:6.8px}
  .maneuver-focus-instruction{font-size:9.5px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .maneuver-focus-next{font-size:7px;line-height:1.1;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .maneuver-focus-camera{font-size:7px;line-height:1.1;margin-top:2px;padding-top:2px}

  /* No scrollable text stack on the phone result screen. */
  .directions-scroll{display:none!important}
  .coverage-note{display:none!important}

  /* Loading remains central but small. */
  .map-status.processing{padding:8px 11px;max-width:calc(100% - 52px);font-size:9px;border-radius:12px}
}

@media(max-width:390px) and (orientation:portrait){
  .route-workspace.has-results{grid-template-rows:minmax(0,64%) minmax(0,36%)}
  .directions-head{padding-top:11px}
  .route-option{min-height:49px;padding:4px 5px}
  .route-option-time{font-size:14px}
  .route-option-label,.route-option-distance,.route-option-exposure{font-size:6.5px}
  .maneuver-focus{margin-bottom:3px}
}

/* Alpha v67: mobile drive mode + swipeable maneuver card */
.selected-route-actions{display:flex;align-items:center;gap:7px}
.drive-mode-button{display:none;min-height:30px;border:1px solid var(--secondary);background:var(--secondary);color:#fff;border-radius:999px;padding:5px 11px;cursor:pointer;font-size:10px;font-weight:760}
.drive-mode-button.active{background:#1f554f;border-color:#1f554f}
.mobile-maneuver-button,.mobile-swipe-hint,.drive-location-status{display:none}
.live-location-marker{width:30px;height:30px;border-radius:999px;background:#fff;border:3px solid var(--secondary);box-shadow:0 2px 10px rgba(18,43,38,.28);display:grid;place-items:center;color:var(--secondary)}
.live-location-marker>span:empty{width:11px;height:11px;border-radius:50%;background:var(--secondary);display:block}
.live-location-marker.heading>span{display:block;font-size:19px;line-height:1;transform:rotate(calc(var(--drive-heading) - 90deg));transform-origin:center;color:var(--secondary);font-weight:900}

@media(max-width:820px) and (orientation:portrait), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  .selected-route-actions{gap:4px}
  .drive-mode-button{display:inline-flex;align-items:center;justify-content:center;height:27px;min-height:27px;padding:0 8px;font-size:8px;border-radius:7px}

  /* Treat the dark card as the phone's primary navigation control. */
  .maneuver-focus{
    position:static;
    margin:0 6px 5px;
    padding:9px 8px 7px;
    min-height:84px;
    grid-template-columns:34px minmax(0,1fr) 34px;
    grid-template-rows:auto auto;
    gap:4px 7px;
    border-radius:11px;
    background:#1d2924;
    color:#fff;
    box-shadow:none;
    touch-action:pan-y;
    user-select:none;
    -webkit-user-select:none;
  }
  .maneuver-focus-icon{display:none}
  .maneuver-focus-copy{grid-column:2;grid-row:1;align-self:center;text-align:left;min-width:0}
  .maneuver-focus-kicker{font-size:8px;line-height:1.1;color:#b8d8ce;margin-bottom:3px;letter-spacing:.08em}
  .maneuver-focus-instruction{font-size:15px;line-height:1.15;font-weight:800;white-space:normal;overflow:visible;text-overflow:clip;color:#fff}
  .maneuver-focus-next{font-size:10px;line-height:1.25;margin-top:4px;white-space:normal;overflow:visible;text-overflow:clip;color:#d7ddd9}
  .maneuver-focus-camera{font-size:8.5px;line-height:1.2;margin-top:4px;padding-top:4px;color:#f1d9d0}
  .drive-location-status{display:block;margin-top:4px;font-size:8px;line-height:1.2;color:#a9cec2;font-weight:700}
  .drive-location-status[hidden]{display:none}
  .mobile-maneuver-button{display:grid;place-items:center;align-self:center;width:34px;height:34px;min-height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(47,111,104,.58);color:#fff;font-size:22px;font-weight:700;padding:0;cursor:pointer}
  .mobile-maneuver-button.previous{grid-column:1;grid-row:1}
  .mobile-maneuver-button.next{grid-column:3;grid-row:1}
  .mobile-maneuver-button:disabled{opacity:.28;cursor:default}
  .mobile-swipe-hint{display:block;grid-column:1/-1;grid-row:2;text-align:center;font-size:7.5px;line-height:1.1;color:#aebbb5;transition:opacity .2s ease}
  .mobile-swipe-hint.used{opacity:.32}

  /* Drive mode keeps the map visually dominant while the instruction card remains readable. */
  body.drive-mode-active .route-workspace.has-results{grid-template-rows:minmax(0,66%) minmax(0,34%)}
  body.drive-mode-active .map-planner{display:none}
  body.drive-mode-active .privacy-result-message{display:none!important}
  body.drive-mode-active .directions-head{padding-top:10px}
  body.drive-mode-active .trip-place{font-size:11px}
  body.drive-mode-active .route-options{padding-top:2px;padding-bottom:3px}
  body.drive-mode-active .selected-route-head{padding-top:3px}
}

@media(max-width:390px) and (orientation:portrait){
  .maneuver-focus{min-height:78px;padding:8px 7px 6px;grid-template-columns:31px minmax(0,1fr) 31px;gap:3px 6px}
  .mobile-maneuver-button{width:31px;height:31px;min-height:31px;font-size:20px}
  .maneuver-focus-instruction{font-size:13.5px}
  .maneuver-focus-next{font-size:9px}
  .mobile-swipe-hint{font-size:7px}
}
@media(max-width:820px) and (orientation:portrait), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  .selected-route-head h2{max-width:48vw}
}


/* Alpha v68: on phone results, put the active maneuver where drivers expect it: under the header, over the map. */
@media(max-width:820px) and (orientation:portrait), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  /* Results are now the primary state. Editing stays one tap away via Edit trip. */
  .route-workspace.has-results .map-planner{display:none}

  .route-workspace.has-results .maneuver-focus{
    position:fixed;
    top:calc(var(--header-h) + 6px);
    left:8px;
    right:8px;
    width:auto;
    margin:0;
    z-index:900;
    box-shadow:0 5px 18px rgba(18,43,38,.22);
  }

  /* Keep the route itself visible below the docked instruction card. */
  .route-workspace.has-results .map-status.processing{z-index:880}
}

/* Alpha v69: mobile result-sheet fit + finger-sized drive/edit controls. */
@media(max-width:820px) and (orientation:portrait), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  /* The maneuver card lives over the map now, so let the results sheet size to
     its actual visible content instead of reserving an empty 38% of the screen. */
  .route-workspace.has-results{
    grid-template-rows:minmax(0,1fr) auto;
  }
  .route-workspace.has-results .directions-panel{
    align-self:end;
    height:auto;
    min-height:0;
    grid-template-rows:auto auto auto auto;
    overflow:hidden;
  }

  /* Start/Stop drive and Edit trip are primary touch actions on a phone. */
  .route-workspace.has-results .selected-route-head{
    min-height:52px;
    padding:5px 8px;
    gap:8px;
  }
  .route-workspace.has-results .selected-route-actions{
    gap:7px;
    flex-shrink:0;
  }
  .route-workspace.has-results .drive-mode-button,
  .route-workspace.has-results .new-route-button{
    height:44px;
    min-height:44px!important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 13px;
    border-radius:11px;
    font-size:11px;
    line-height:1;
    font-weight:760;
    white-space:nowrap;
  }
  .route-workspace.has-results .drive-mode-button{min-width:94px;}
  .route-workspace.has-results .new-route-button{min-width:78px;}
  .route-workspace.has-results .selected-route-head h2{
    max-width:calc(100vw - 205px);
    font-size:11px;
  }

  /* Hidden desktop-only rows should not create track space in the auto-height sheet. */
  .route-workspace.has-results .selected-route-summary,
  .route-workspace.has-results .camera-map-action,
  .route-workspace.has-results .directions-scroll,
  .route-workspace.has-results .coverage-note{display:none!important;}
}

@media(max-width:390px) and (orientation:portrait){
  .route-workspace.has-results .selected-route-head{min-height:50px;padding-left:6px;padding-right:6px;}
  .route-workspace.has-results .selected-route-actions{gap:5px;}
  .route-workspace.has-results .drive-mode-button,
  .route-workspace.has-results .new-route-button{
    height:42px;
    min-height:42px!important;
    padding:0 10px;
    font-size:10px;
  }
  .route-workspace.has-results .drive-mode-button{min-width:88px;}
  .route-workspace.has-results .new-route-button{min-width:72px;}
  .route-workspace.has-results .selected-route-head h2{max-width:calc(100vw - 184px);}
}

/* Alpha v72: navigation-contract sprint. */
.camera-count-help{
  margin:6px 22px 2px;
  border-top:1px solid var(--line);
  padding-top:6px;
  color:#58635d;
  font-size:9px;
  line-height:1.35;
}
.camera-count-help[hidden]{display:none!important}
.camera-count-help summary{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  cursor:pointer;
  color:var(--secondary);
  font-weight:760;
  list-style:none;
}
.camera-count-help summary::-webkit-details-marker{display:none}
.camera-count-help summary::after{content:' +';font-weight:800;margin-left:3px}
.camera-count-help[open] summary::after{content:' −'}
.camera-count-help p{margin:0 0 7px;max-width:58ch}
.drive-mode-disclaimer{display:none;color:#69736e;font-size:8.5px;line-height:1.25;font-weight:600}
body.drive-mode-active .drive-mode-disclaimer{color:#46665f}

@media(max-width:820px), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  .camera-count-help{margin:2px 9px 0;padding-top:2px;border-top:0;font-size:8.5px}
  .camera-count-help summary{min-height:36px;padding:0 2px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
  .camera-count-help p{margin:0 2px 6px}
  .drive-mode-disclaimer{display:block;flex:1 0 100%;order:3;margin-top:-2px;text-align:right}
  .selected-route-head{flex-wrap:wrap}
  .drive-location-status{font-size:9px;line-height:1.25;color:#b9ddd2}
  body.drive-mode-active .maneuver-focus{outline:2px solid rgba(255,255,255,.08);outline-offset:-2px}
}

@media(max-width:820px) and (orientation:portrait), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  .route-workspace.has-results .camera-count-help{display:block}
  .route-workspace.has-results .selected-route-head{padding-bottom:6px}
  .route-workspace.has-results .drive-mode-disclaimer{font-size:8px;max-width:100%;white-space:normal}
}


/* Alpha v73: phone landscape must stay in the phone UI.
   Width alone is not a reliable device-class signal: modern phones are often
   >820 CSS px wide in landscape. A short landscape viewport is treated as a
   phone-sized surface and keeps the same map-first results/navigation model. */
@media (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  :root{--header-h:46px;--footer-h:0px}
  html,body{overflow:hidden}
  .app-header{
    height:46px!important;
    min-height:46px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:46px!important;
    padding-left:max(10px,env(safe-area-inset-left))!important;
    padding-right:max(10px,env(safe-area-inset-right))!important;
  }
  .brand{height:46px!important;padding:0!important;border-bottom:0!important}
  .brand strong{font-size:17px!important}
  .brand span,#howButton{display:none!important}
  .nav-actions{width:auto!important;height:auto!important;border:0!important}
  #locateButton{height:34px!important;min-height:34px!important;padding:0 12px!important;font-size:10px!important;white-space:nowrap}
  .site-footer{display:none!important}

  .route-workspace.has-results{
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    min-height:0!important;
    background:var(--surface)!important;
  }
  .route-workspace.has-results .map-planner{display:none!important}
  .map-shell{min-width:0!important;min-height:0!important}

  /* Keep the maneuver card directly beneath the header in either phone orientation. */
  .route-workspace.has-results .maneuver-focus{
    position:fixed!important;
    top:calc(var(--header-h) + 6px)!important;
    left:max(8px,env(safe-area-inset-left))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    width:auto!important;
    margin:0!important;
    z-index:900!important;
    min-height:76px!important;
    padding:8px 8px 6px!important;
    grid-template-columns:34px minmax(0,1fr) 34px!important;
    grid-template-rows:auto auto!important;
    gap:3px 7px!important;
    border-radius:11px!important;
    background:#1d2924!important;
    color:#fff!important;
    box-shadow:0 5px 18px rgba(18,43,38,.22)!important;
    touch-action:pan-y!important;
  }
  .maneuver-focus-icon{display:none!important}
  .maneuver-focus-copy{grid-column:2!important;grid-row:1!important;align-self:center!important;min-width:0!important}
  .maneuver-focus-kicker{font-size:8px!important;line-height:1.1!important;color:#b8d8ce!important;margin-bottom:2px!important}
  .maneuver-focus-instruction{font-size:14px!important;line-height:1.12!important;font-weight:800!important;color:#fff!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .maneuver-focus-next{font-size:9px!important;line-height:1.2!important;margin-top:3px!important;color:#d7ddd9!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .maneuver-focus-camera{font-size:8px!important;line-height:1.15!important;margin-top:3px!important;padding-top:3px!important;color:#f1d9d0!important}
  .drive-location-status{display:block!important;margin-top:3px!important;font-size:8px!important;line-height:1.15!important;color:#a9cec2!important;font-weight:700!important}
  .drive-location-status[hidden]{display:none!important}
  .mobile-maneuver-button{display:grid!important;place-items:center!important;align-self:center!important;width:34px!important;height:34px!important;min-height:34px!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.18)!important;background:rgba(47,111,104,.58)!important;color:#fff!important;font-size:22px!important;font-weight:700!important;padding:0!important}
  .mobile-maneuver-button.previous{grid-column:1!important;grid-row:1!important}
  .mobile-maneuver-button.next{grid-column:3!important;grid-row:1!important}
  .mobile-swipe-hint{display:block!important;grid-column:1/-1!important;grid-row:2!important;text-align:center!important;font-size:7px!important;line-height:1!important;color:#aebbb5!important}

  /* Compact bottom result sheet: route choices + primary touch actions only. */
  .directions-panel{
    align-self:end!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:43vh!important;
    overflow:hidden!important;
    border-left:0!important;
    border-top:1px solid var(--line)!important;
    border-radius:14px 14px 0 0!important;
    box-shadow:0 -8px 24px rgba(30,38,34,.08)!important;
    grid-template-rows:auto auto auto auto!important;
    z-index:3!important;
  }
  .directions-panel::before{display:block!important;top:4px!important;width:26px!important;height:3px!important}
  .directions-head{padding:11px 8px 3px!important;border-bottom:0!important}
  .directions-head>.panel-kicker,.trip-explainer{display:none!important}
  .trip-place{font-size:13px!important;line-height:1.1!important;margin:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .border-notice{margin-top:3px!important;padding:4px 6px!important;font-size:7.5px!important;line-height:1.2!important;max-height:30px!important;overflow:hidden!important}
  .coverage-summary{margin-top:3px!important;border:0!important;background:transparent!important;border-radius:0!important}
  .coverage-chip-row{display:flex!important;gap:3px!important;flex-wrap:nowrap!important;overflow:hidden!important}
  .coverage-chip{flex:0 0 auto!important;min-width:0!important;padding:2px 5px!important;border:0!important;border-radius:999px!important;background:var(--surface-2)!important;gap:3px!important}
  .coverage-chip-icon{width:13px!important;height:13px!important;flex-basis:13px!important;font-size:7px!important}
  .coverage-chip-copy strong{font-size:7.5px!important;white-space:nowrap!important}
  .coverage-chip-copy span,.coverage-summary-note{display:none!important}

  .privacy-result-message{margin:0 8px 3px!important;padding:0!important;border:0!important;background:transparent!important;border-radius:0!important;font-size:8px!important;line-height:1.2!important}
  .privacy-outcome-kicker,.privacy-outcome-detail,.privacy-outcome-copy,.privacy-outcome-metrics,.camera-source-caveat{display:none!important}
  .privacy-outcome-headline{font-size:10px!important;line-height:1.15!important;margin:0!important;font-weight:760!important}

  .route-options{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;overflow:visible!important;padding:3px 6px 4px!important;gap:4px!important;border-bottom:1px solid var(--line)!important}
  .route-options[data-visible-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .route-options[data-visible-count="1"]{grid-template-columns:1fr!important}
  .route-option{min-width:0!important;min-height:49px!important;flex:none!important;padding:4px 6px!important;border-radius:8px!important;gap:0!important;overflow:hidden!important}
  .route-option-label{font-size:6.8px!important;line-height:1.05!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .route-option-time{font-size:15px!important;line-height:1!important;margin:2px 0 1px!important}
  .route-option-distance,.route-option-exposure{font-size:7px!important;line-height:1.05!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .route-option-note{display:none!important}

  .selected-route-head{min-height:50px!important;padding:4px 8px 5px!important;gap:8px!important;border-bottom:0!important;align-items:center!important;flex-wrap:wrap!important}
  .selected-route-head .panel-kicker{display:none!important}
  .selected-route-head h2{font-size:10px!important;line-height:1.1!important;margin:0!important;max-width:calc(100vw - 215px)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .selected-route-actions{gap:7px!important;flex-shrink:0!important}
  .drive-mode-button,.new-route-button{height:42px!important;min-height:42px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0 12px!important;border-radius:11px!important;font-size:10px!important;line-height:1!important;font-weight:760!important;white-space:nowrap!important}
  .drive-mode-button{min-width:90px!important}
  .new-route-button{min-width:76px!important}
  .drive-mode-disclaimer{display:block!important;flex:1 0 100%!important;order:3!important;margin-top:-2px!important;text-align:right!important;font-size:7.5px!important;line-height:1.15!important}

  .selected-route-summary,.camera-map-action,.directions-scroll,.coverage-note{display:none!important}
  .camera-count-help{display:block!important;margin:0 8px!important;padding:0!important;border-top:0!important;font-size:8px!important}
  .camera-count-help summary{min-height:34px!important;padding:0 2px!important}

  .map-status.processing{z-index:880!important;max-width:calc(100% - 52px)!important;padding:8px 11px!important;font-size:9px!important;border-radius:12px!important}
}

/* v73 short-landscape density: navigation controls matter more than repeated result prose. */
@media (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  .route-workspace.has-results .directions-head,
  .route-workspace.has-results .privacy-result-message,
  .route-workspace.has-results .coverage-summary{display:none!important}
}

/* Alpha v74: phone-landscape density cleanup.
   Keep the v73 mobile behavior, but collapse the result sheet to its actual
   content height so wide/short phones do not grow a large empty white band. */
@media (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  .route-workspace.has-results{
    grid-template-rows:minmax(0,1fr) max-content!important;
  }

  .route-workspace.has-results .directions-panel{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    align-self:end!important;
    overflow:visible!important;
    padding-bottom:max(3px,env(safe-area-inset-bottom))!important;
  }

  /* The route choices are the primary comparison surface in landscape. */
  .route-workspace.has-results .route-options{
    margin:0!important;
    padding:4px 6px 5px!important;
  }

  /* Keep the data caveat discoverable without giving it a whole row of air. */
  .route-workspace.has-results .camera-count-help{
    display:inline-block!important;
    width:auto!important;
    margin:0 0 0 8px!important;
    padding:0!important;
    vertical-align:middle!important;
    font-size:7.5px!important;
  }
  .route-workspace.has-results .camera-count-help summary{
    min-height:24px!important;
    height:24px!important;
    display:inline-flex!important;
    align-items:center!important;
    padding:0!important;
    line-height:1!important;
  }
  .route-workspace.has-results .camera-count-help p{
    max-width:min(70vw,520px)!important;
    margin:0 8px 5px 0!important;
    padding:5px 7px!important;
    border:1px solid var(--line)!important;
    border-radius:8px!important;
    background:var(--surface-2)!important;
    font-size:8px!important;
    line-height:1.25!important;
  }

  /* Selected route, drive controls and Alpha boundary become one compact bar. */
  .route-workspace.has-results .selected-route-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    column-gap:8px!important;
    row-gap:2px!important;
    min-height:0!important;
    margin-top:-1px!important;
    padding:3px 8px 5px!important;
    align-items:center!important;
    border-top:1px solid var(--line)!important;
  }
  .route-workspace.has-results .selected-route-head>div:first-child{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
  }
  .route-workspace.has-results .selected-route-head h2{
    max-width:none!important;
    font-size:9px!important;
    line-height:1.1!important;
  }
  .route-workspace.has-results .selected-route-actions{
    grid-column:2!important;
    grid-row:1 / span 2!important;
    align-self:center!important;
    display:flex!important;
    gap:6px!important;
  }
  .route-workspace.has-results .drive-mode-button,
  .route-workspace.has-results .new-route-button{
    height:44px!important;
    min-height:44px!important;
    padding:0 14px!important;
    font-size:10px!important;
    border-radius:11px!important;
  }
  .route-workspace.has-results .drive-mode-button{min-width:98px!important}
  .route-workspace.has-results .new-route-button{min-width:86px!important}

  .route-workspace.has-results .drive-mode-disclaimer{
    grid-column:1!important;
    grid-row:2!important;
    display:block!important;
    margin:0!important;
    padding:0!important;
    text-align:left!important;
    font-size:7px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .route-workspace.has-results .drive-mode-disclaimer strong{font-weight:800!important}
}

/* Alpha v75: phone UI cleanup after landscape testing.
   Keep Drive mode navigation visible in landscape and collapse the result
   footer into route choices on the left + stacked primary actions on the right. */
@media (max-width:820px) and (orientation:portrait), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  /* On phones, the route cards already carry the useful camera-count meaning.
     Remove the explanatory definition row to preserve map/navigation space. */
  .route-workspace.has-results .camera-count-help{display:none!important}
}

@media (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  /* Rotating the phone must not make the active maneuver header disappear. */
  body.drive-mode-active .route-workspace.has-results .maneuver-focus{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
  }

  /* One compact footer row: choices left, actions right. */
  .route-workspace.has-results .directions-panel{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 124px!important;
    grid-template-rows:auto!important;
    align-items:stretch!important;
    gap:6px!important;
    padding:5px 7px max(5px,env(safe-area-inset-bottom))!important;
    border-radius:0!important;
    box-shadow:0 -4px 14px rgba(30,38,34,.07)!important;
  }
  .route-workspace.has-results .directions-panel::before{display:none!important}

  .route-workspace.has-results .route-options{
    grid-column:1!important;
    grid-row:1!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:4px!important;
    align-self:stretch!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }
  .route-workspace.has-results .route-options[data-visible-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .route-workspace.has-results .route-options[data-visible-count="1"]{grid-template-columns:1fr!important}
  .route-workspace.has-results .route-option{
    min-height:0!important;
    height:94px!important;
    padding:7px 8px!important;
    border-radius:10px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }
  .route-workspace.has-results .route-option-label{font-size:7.5px!important}
  .route-workspace.has-results .route-option-time{font-size:17px!important;margin:3px 0 2px!important}
  .route-workspace.has-results .route-option-distance,
  .route-workspace.has-results .route-option-exposure{font-size:7.5px!important;line-height:1.15!important}

  .route-workspace.has-results .selected-route-head{
    grid-column:2!important;
    grid-row:1!important;
    display:block!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }
  .route-workspace.has-results .selected-route-head>div:first-child,
  .route-workspace.has-results .drive-mode-disclaimer{display:none!important}
  .route-workspace.has-results .selected-route-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:1fr 1fr!important;
    gap:6px!important;
    width:100%!important;
    height:94px!important;
  }
  .route-workspace.has-results .drive-mode-button,
  .route-workspace.has-results .new-route-button{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:44px!important;
    padding:0 8px!important;
    border-radius:10px!important;
    font-size:10px!important;
  }

  /* Everything else in the result sheet is intentionally omitted on a phone. */
  .route-workspace.has-results .directions-head,
  .route-workspace.has-results .privacy-result-message,
  .route-workspace.has-results .coverage-summary,
  .route-workspace.has-results .camera-count-help,
  .route-workspace.has-results .selected-route-summary,
  .route-workspace.has-results .camera-map-action,
  .route-workspace.has-results .directions-scroll,
  .route-workspace.has-results .coverage-note{display:none!important}
}


/* Alpha v76: mobile Drive mode chrome + iOS viewport stability. */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

@media (max-width:820px) and (orientation:portrait), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  /* iOS Safari zooms focused form fields whose computed text is under 16px.
     Keep the planner at 16px so entering/editing a trip does not leave the
     page visually zoomed in afterward. User pinch zoom remains available. */
  .route-input{font-size:16px!important}

  /* Drive mode is a distinct full-screen-ish state: once navigation starts,
     remove Kite's normal page header and give that vertical space to the map.
     Stop drive / Edit trip restore the normal header automatically when the
     drive-mode-active body class is removed. */
  body.drive-mode-active{--header-h:0px}
  body.drive-mode-active .app-shell{
    grid-template-rows:0 minmax(0,1fr)!important;
  }
  body.drive-mode-active .app-header{
    display:none!important;
    height:0!important;
    min-height:0!important;
    overflow:hidden!important;
    border:0!important;
  }
  body.drive-mode-active .route-workspace.has-results .maneuver-focus{
    top:max(6px,env(safe-area-inset-top))!important;
  }
}

/* Alpha v77: dedicated mobile Drive screen.
   In Drive mode the results UI leaves the layout entirely. The map owns the
   viewport; only the maneuver/navigation overlay and Stop drive remain. */
@media (max-width:820px) and (orientation:portrait), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  body.drive-mode-active .app-main{
    grid-template-rows:minmax(0,1fr) 0!important;
  }
  body.drive-mode-active .site-footer{
    display:none!important;
    height:0!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body.drive-mode-active .route-workspace.has-results{
    display:block!important;
    position:relative!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
    background:transparent!important;
  }
  body.drive-mode-active .map-panel,
  body.drive-mode-active .map-shell,
  body.drive-mode-active #map{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
  }

  /* Remove the normal results/footer from layout, but retain its Stop button
     as a single floating control over the map. */
  body.drive-mode-active .directions-panel{
    position:fixed!important;
    inset:auto max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) auto!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
    z-index:950!important;
    pointer-events:none!important;
  }
  body.drive-mode-active .directions-panel::before,
  body.drive-mode-active .directions-panel > *:not(.selected-route-head){
    display:none!important;
  }
  body.drive-mode-active .selected-route-head{
    display:block!important;
    width:auto!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    pointer-events:none!important;
  }
  body.drive-mode-active .selected-route-head > *:not(.selected-route-actions){display:none!important}
  body.drive-mode-active .selected-route-actions{
    display:block!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    pointer-events:auto!important;
  }
  body.drive-mode-active .new-route-button{display:none!important}
  body.drive-mode-active .drive-mode-button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:124px!important;
    min-width:124px!important;
    height:52px!important;
    min-height:52px!important;
    margin:0!important;
    padding:0 18px!important;
    border-radius:14px!important;
    font-size:13px!important;
    font-weight:800!important;
    box-shadow:0 5px 18px rgba(18,43,38,.28)!important;
    pointer-events:auto!important;
  }

  /* Navigation card stays at the top safe area over the map. */
  body.drive-mode-active .route-workspace.has-results .maneuver-focus{
    display:grid!important;
    top:max(6px,env(safe-area-inset-top))!important;
    z-index:940!important;
  }

  /* Status messages remain map overlays rather than reserving layout space. */
  body.drive-mode-active .map-status{
    z-index:930!important;
    bottom:max(74px,calc(env(safe-area-inset-bottom) + 68px))!important;
  }
}

/* Alpha v78: Drive mode viewport hardening.
   The v77 Drive screen correctly removed the normal results chrome, but on
   iOS Safari the map's percentage height could collapse when its grid parent
   was converted into the dedicated Drive layout. In Drive mode the map now
   owns the visual viewport directly. The maneuver card and Stop button are
   independent fixed overlays over that map. */
@media (max-width:820px) and (orientation:portrait), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  body.drive-mode-active,
  body.drive-mode-active .app-shell,
  body.drive-mode-active .app-main,
  body.drive-mode-active .route-workspace.has-results{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    overflow:hidden!important;
  }

  body.drive-mode-active .map-panel{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    min-width:100vw!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    margin:0!important;
    border:0!important;
    background:#d8ded8!important;
    z-index:900!important;
  }
  body.drive-mode-active #map{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    background:#d8ded8!important;
    z-index:1!important;
  }

  /* Keep the navigation card independent of the tiny Stop-button container. */
  body.drive-mode-active .route-workspace.has-results .maneuver-focus{
    position:fixed!important;
    top:max(8px,env(safe-area-inset-top))!important;
    left:max(10px,env(safe-area-inset-left))!important;
    right:max(10px,env(safe-area-inset-right))!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    z-index:970!important;
  }

  body.drive-mode-active .directions-panel{
    z-index:980!important;
  }
  body.drive-mode-active .map-status{
    position:fixed!important;
    z-index:960!important;
  }
}

/* Alpha v79: landscape Drive-mode corner controls.
   Keep the center of the map clear: the route/status warning sits in the
   lower-left corner and Stop drive sits in the lower-right corner. */
@media (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  body.drive-mode-active .directions-panel{
    position:fixed!important;
    top:auto!important;
    left:auto!important;
    right:max(12px,env(safe-area-inset-right))!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    inset-block-start:auto!important;
    inset-inline-start:auto!important;
    inset-inline-end:max(12px,env(safe-area-inset-right))!important;
    inset-block-end:max(10px,env(safe-area-inset-bottom))!important;
  }

  body.drive-mode-active .map-status{
    position:fixed!important;
    left:max(12px,env(safe-area-inset-left))!important;
    right:auto!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:min(58vw,620px)!important;
    margin:0!important;
    z-index:960!important;
  }
}


/* Alpha v80: dedicated Drive-mode cleanup.
   Route-result warnings are not useful once navigation begins; the map and
   maneuver UI own the screen. Keep Stop drive pinned to the lower-right in
   both portrait and landscape. Dynamic Drive/GPS/reroute statuses can still
   appear when set by navigation logic. */
.map-status:empty{display:none!important}

@media (max-width:820px) and (orientation:portrait), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  body.drive-mode-active .directions-panel{
    position:fixed!important;
    top:auto!important;
    left:auto!important;
    right:max(12px,env(safe-area-inset-right))!important;
    bottom:max(12px,env(safe-area-inset-bottom))!important;
    inset:auto max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) auto!important;
    margin:0!important;
  }
}


/* Alpha v81: true viewport-level Stop drive control.
   Do not position Stop drive through the results panel. The dedicated button
   is a direct child of <body>, so iOS Safari cannot anchor it against a
   transformed/grid ancestor. */
.drive-stop-overlay{display:none}
@media (max-width:820px) and (orientation:portrait), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  body.drive-mode-active .selected-route-actions .drive-mode-button{
    display:none!important;
  }
  body.drive-mode-active .directions-panel{
    display:none!important;
  }
  body.drive-mode-active .drive-stop-overlay{
    display:flex!important;
    position:fixed!important;
    right:max(14px,env(safe-area-inset-right))!important;
    bottom:max(14px,env(safe-area-inset-bottom))!important;
    left:auto!important;
    top:auto!important;
    z-index:2000!important;
    align-items:center!important;
    justify-content:center!important;
    width:132px!important;
    min-width:132px!important;
    height:54px!important;
    min-height:54px!important;
    margin:0!important;
    padding:0 18px!important;
    border:1px solid #1f554f!important;
    border-radius:14px!important;
    background:#1f665e!important;
    color:#fff!important;
    box-shadow:0 5px 18px rgba(18,43,38,.28)!important;
    font:inherit!important;
    font-size:14px!important;
    font-weight:800!important;
    line-height:1!important;
    cursor:pointer!important;
    -webkit-appearance:none!important;
    appearance:none!important;
  }
}


/* Alpha v82: maneuver overlay is now a true viewport-level control.
   It is a direct child of <body>, independent of .directions-panel, so hiding
   the results panel cannot remove navigation UI. */
body > .maneuver-focus{display:none}
body > .maneuver-focus[hidden]{display:none!important}

@media (max-width:820px) and (orientation:portrait), (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  /* Normal mobile results: dock the maneuver card beneath the Kite header. */
  body:not(.drive-mode-active) > .maneuver-focus:not([hidden]){
    display:grid!important;
    position:fixed!important;
    top:calc(var(--header-h) + 6px)!important;
    left:max(8px,env(safe-area-inset-left))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    width:auto!important;
    margin:0!important;
    z-index:900!important;
    box-shadow:0 5px 18px rgba(18,43,38,.22)!important;
  }

  /* Active Drive mode: map, maneuver overlay and Stop drive are three
     independent viewport-level pieces. */
  body.drive-mode-active > .maneuver-focus:not([hidden]){
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    position:fixed!important;
    top:max(8px,env(safe-area-inset-top))!important;
    left:max(10px,env(safe-area-inset-left))!important;
    right:max(10px,env(safe-area-inset-right))!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    z-index:1970!important;
    box-shadow:0 5px 18px rgba(18,43,38,.22)!important;
  }

  /* The old results panel can disappear completely now without taking the
     maneuver card with it. */
  body.drive-mode-active .directions-panel{display:none!important}
}