/* Search, directions and comparison panes share the touch app's visual tokens. */
html:is([data-app-layout=phone],[data-app-layout=tablet]) .app-search-navigation {
  display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 12px 12px;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .app-search-navigation button {
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 12px;
  border:1px solid var(--app-line);border-radius:14px;background:var(--app-raised);color:var(--app-ink);font:600 15px var(--font-body);
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .app-search-navigation .is-selected {background:var(--app-selected);border-color:var(--app-accent,#17648c);}
.app-search-navigation svg {width:22px;height:22px;flex:none;}
.app-search-navigation-status {margin:0;padding:4px 16px 12px;font:14px var(--font-body);color:var(--app-ink);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .app-search-labels {
  display:flex;align-items:center;gap:10px;margin:0 12px 10px;padding:12px;border:1px solid var(--app-line);border-radius:16px;
  background:var(--app-raised);color:var(--app-ink);box-sizing:border-box;
}
.app-search-labels-icon {display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:10px;background:var(--app-selected);color:var(--app-accent,#125769);}
.app-search-labels-icon svg {width:22px;height:22px;}
.app-search-labels-copy {flex:1;min-width:0;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapSearch .app-search-labels h3 {margin:0 0 4px;font:650 14px/1.3 var(--font-body);}
.app-search-labels-copy p {margin:0;color:var(--app-muted);font:400 12px/1.35 var(--font-body);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapSearch .app-search-labels-switch {
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:none;min-width:56px;min-height:52px;
  padding:4px;border:0;border-radius:12px;background:transparent;color:var(--app-ink);font:600 12px/1.2 var(--font-body);touch-action:manipulation;
}
.app-search-labels-switch:focus-visible {outline:3px solid var(--app-accent,#125769);outline-offset:2px;}
.app-search-labels-switch:disabled {opacity:.5;cursor:not-allowed;}
.app-search-labels-track {display:block;position:relative;width:42px;height:24px;border:1px solid var(--app-muted);border-radius:20px;background:var(--app-selected);box-sizing:border-box;}
.app-search-labels-track::after {content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--app-muted);transition:transform .15s ease;}
.app-search-labels-switch[aria-checked=true] .app-search-labels-track {border-color:var(--app-accent,#125769);background:var(--app-accent,#125769);}
.app-search-labels-switch[aria-checked=true] .app-search-labels-track::after {background:#fff;transform:translateX(18px);}
@media(prefers-reduced-motion:reduce){.app-search-labels-track::after{transition:none;}}

/* One rounded query leads to places, our historical data and LandsD lots. */
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapApplication #mapSearch.app-unified-search.is-open {
  inset:calc(var(--app-viewport-top,0px) + var(--app-safe-top,0px) + 12px) auto auto 12px!important;
  width:min(520px,calc(var(--app-viewport-width,100vw) - 24px))!important;max-width:none!important;height:auto!important;
  max-height:min(62dvh,calc(var(--app-viewport-height,100dvh) - var(--app-safe-top,0px) - 80px))!important;
  border:1px solid var(--app-line)!important;border-radius:28px!important;padding:0!important;background:var(--app-raised)!important;
  box-shadow:0 6px 28px #183c5b22;overflow:hidden;z-index:6400;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapSearch.app-unified-search .map-search__bar {
  flex:none;min-height:56px!important;height:56px;border:0!important;border-radius:28px!important;box-shadow:none!important;padding:4px!important;gap:0;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapSearch.app-unified-search :is(#mapSearchMode,#mobileSearchHeader,#results) {display:none!important;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapSearch.app-unified-search .app-search-bar-back {
  display:grid;place-items:center;flex:0 0 48px;min-width:48px;width:48px;min-height:48px;height:48px;border:0;border-radius:50%;background:transparent;color:var(--app-ink);padding:12px;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapSearch.app-unified-search .map-search__input {font:400 16px var(--font-body);padding:8px 4px!important;border:0!important;outline:none!important;box-shadow:none!important;border-radius:0!important;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapSearch.app-unified-search .map-search__bar:focus-within {box-shadow:inset 0 0 0 2px var(--app-accent)!important;}
.app-search-bar-back svg,#mapSearch.app-unified-search .map-search__icon-button svg {width:24px;height:24px;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapSearch.app-unified-search #mapSearchPanel {
  flex:0 1 auto;min-height:0;max-height:calc(min(62dvh,var(--app-viewport-height,100dvh) - var(--app-safe-top,0px) - 80px) - 56px)!important;
  border-radius:0 0 28px 28px;overflow-x:hidden!important;overflow-y:auto!important;padding:0!important;background:var(--app-raised);
}
.app-search-controls {display:flex;align-items:center;gap:6px;padding:4px 10px 10px;border-bottom:1px solid var(--app-line);}
.app-search-scopes {display:flex;flex:1;min-width:0;gap:6px;overflow-x:auto;scrollbar-width:none;touch-action:pan-x;}
.app-search-scopes button {flex:none;min-height:44px;padding:8px 14px;border:1px solid var(--app-line);border-radius:22px;background:var(--app-raised);color:var(--app-ink);font:600 14px var(--font-body);white-space:nowrap;}
.app-search-scopes button[aria-pressed=true] {background:var(--app-selected);border-color:var(--app-accent);color:var(--app-accent);}
.app-search-filter-toggle {display:grid;place-items:center;flex:0 0 48px;width:48px;min-height:48px;padding:12px;border:0;border-radius:50%;background:var(--app-selected);color:var(--app-accent);}
.app-search-filter-toggle svg {width:24px;height:24px;}
.app-search-filterbox {padding:12px 10px;border-bottom:1px solid var(--app-line);background:var(--app-surface);}
.app-search-filterbox[hidden],.app-search-feedback[hidden],.app-search-welcome[hidden],.app-search-place[hidden] {display:none!important;}
.app-search-filterbox h3 {margin:0 4px 10px;font:650 14px var(--font-body);color:var(--app-ink);}
.app-search-datasets {display:flex;flex-direction:column;gap:6px;margin:0 2px 12px;}
.app-search-dataset {min-height:48px;padding:10px 14px;border:1px solid var(--app-line);border-radius:12px;text-align:left;background:var(--app-raised);color:var(--app-ink);font:500 14px/1.35 var(--font-body);}
.app-search-dataset[aria-pressed=true] {background:var(--app-selected);border-color:var(--app-accent);box-shadow:inset 3px 0 var(--app-accent);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapSearch .app-search-filterbox .app-search-labels {margin:0 2px 10px;padding:10px;}
.app-search-filterbox .app-search-advanced {width:100%;min-height:48px;padding:10px;border:0;border-radius:12px;background:var(--app-raised);color:var(--app-accent);font:600 14px var(--font-body);}
.app-search-feedback {margin:0;padding:12px 16px;font:400 14px/1.45 var(--font-body);color:var(--app-muted);}
.app-search-welcome {display:grid;justify-items:center;text-align:center;gap:8px;padding:16px 20px 20px;color:var(--app-ink);}
.app-search-welcome svg {display:none;}
.app-search-welcome strong {font:650 16px/1.3 var(--font-body);}
.app-search-welcome p {margin:0;font:400 14px/1.45 var(--font-body);color:var(--app-muted);}
.app-search-list {padding:0 0 8px;}
.app-search-result-group h3 {margin:0;padding:14px 16px 8px;font:650 13px var(--font-body);color:var(--app-muted);}
.app-search-result {display:flex;align-items:flex-start;gap:14px;width:100%;min-height:68px;padding:14px 16px;border:0;border-bottom:1px solid var(--app-line);border-radius:0;background:var(--app-raised);color:var(--app-ink);text-align:left;font:400 15px var(--font-body);}
.app-search-result:active {background:var(--app-selected);}
.app-search-result > svg {width:24px;height:24px;flex:none;margin-top:2px;color:var(--app-accent);}
.app-search-result-copy {display:grid;gap:4px;flex:1;min-width:0;}
.app-search-result-copy strong {font:650 16px/1.35 var(--font-body);overflow-wrap:anywhere;}
.app-search-result-description {font:400 14px/1.4 var(--font-body);color:var(--app-muted);overflow-wrap:anywhere;}
.app-search-source {font:600 12px/1.4 var(--font-body);color:var(--app-accent);overflow-wrap:anywhere;}
.app-search-load-sentinel {height:1px;pointer-events:none;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .app-search-place {
  position:fixed;z-index:5800;inset:auto 0 var(--app-safe-bottom,0px);box-sizing:border-box;width:100%;max-height:var(--app-half-sheet-height,50dvh);
  overflow:auto;padding:16px 16px 20px;border:1px solid var(--app-line);border-bottom:0;border-radius:24px 24px 0 0;background:var(--app-raised);color:var(--app-ink);box-shadow:0 -6px 24px #183c5b22;
}
.app-search-place > header {display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.app-search-place > header > div {flex:1;min-width:0;}
.app-search-place h2 {margin:4px 0 0;font:700 22px/1.3 var(--font-body);overflow-wrap:anywhere;}
.app-search-place-back {display:grid;place-items:center;flex:0 0 48px;width:48px;min-height:48px;padding:12px;border:0;border-radius:50%;background:var(--app-selected);color:var(--app-ink);}
.app-search-place-back svg {width:24px;height:24px;}
.app-search-place-address {margin:8px 0;font:400 15px/1.45 var(--font-body);color:var(--app-muted);}
.app-search-place-coordinate {margin:6px 0 14px;font:400 12px var(--font-body);color:var(--app-muted);}
.app-search-place-actions {display:flex;gap:8px;}
.app-search-place-actions button {display:flex;align-items:center;justify-content:center;gap:10px;flex:1;min-width:0;min-height:52px;padding:12px 14px;border:1px solid var(--app-line);border-radius:26px;font:650 15px var(--font-body);}
.app-search-directions {flex:1;background:var(--app-accent);color:var(--app-raised);}
.app-search-directions svg {width:24px;height:24px;flex:none;}
.app-search-place-details {background:var(--app-raised);color:var(--app-accent);}
.app-search-place-feedback {margin:10px 0 0;font:400 14px/1.4 var(--font-body);color:var(--app-muted);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) body:not([data-app-route=map]) .app-search-place,
html:is([data-app-layout=phone],[data-app-layout=tablet]) body:is(.guru-routing,.dual-mode-active,.street-view-docked) .app-search-place {display:none!important;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapSearch.app-unified-search #mapSearchAdvanced {padding:12px;border-top:1px solid var(--app-line);background:var(--app-surface);}
@media(min-width:700px) {html[data-app-layout=tablet] .app-search-place {left:12px;right:auto;bottom:12px;width:440px;max-width:calc(100vw - 24px);border:1px solid var(--app-line);border-radius:24px;}}
/* Tool forms occupy half the map, with scrollable settings and fixed actions. */
html:is([data-app-layout=phone],[data-app-layout=tablet]) body dialog#mapExportDialog:not(.ws-collection-properties):not(.guru-folder-dialog):not(.app-pin-details) {
  inset:var(--app-half-sheet-top,calc(var(--app-viewport-top,0px) + var(--app-half-sheet-height,50dvh))) 0 auto!important;margin:0!important;width:var(--app-viewport-width,100vw)!important;
  height:var(--app-half-sheet-height,50dvh)!important;max-width:none!important;max-height:var(--app-half-sheet-height,50dvh)!important;
  box-sizing:border-box;border:0;border-top:1px solid var(--app-line);border-radius:22px 22px 0 0!important;
  background:var(--app-surface);color:var(--app-ink);box-shadow:0 -6px 24px #133c4b18;overflow:hidden;container-type:size;container-name:app-export-sheet;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog[open] {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog::backdrop {background:#10252c26;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) body:has(#mapExportDialog[open]) #mobileAppShell :is(.app-primary-bank,.app-map-logo),
html:is([data-app-layout=phone],[data-app-layout=tablet]) body:has(#mapExportDialog[open]) :is(.cursor-status-bar,.app-location-status) {visibility:hidden!important;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog > header {
  grid-column:1/-1;grid-row:1;flex:none;gap:8px;padding:8px max(12px,env(safe-area-inset-right)) 8px 14px;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog > header > div {min-width:0;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog h2 {font-size:18px;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog #exportClose {flex:0 0 48px;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog :is(.export-tabs,.app-export-views) {
  grid-row:2;flex:none;display:flex;gap:6px;padding:4px 8px;border-bottom:1px solid var(--app-line);background:var(--app-surface);
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .export-tabs {grid-column:1;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .app-export-views {grid-column:2;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog :is(.export-tabs,.app-export-views) button {
  flex:1;min-width:0;min-height:48px;padding:6px 3px;font-size:12px!important;line-height:1.25;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .app-export-views [aria-pressed=true] {background:var(--app-accent);color:var(--app-raised);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog :is(#pdfWorkspace,.jpg-workspace) {
  grid-column:1/-1;grid-row:3;display:flex;flex:1;flex-direction:column;min-width:0;min-height:0;overflow:hidden;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog :is(#exportSettings,.jpg-settings) {
  flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;
  padding:14px 12px calc(14px + var(--app-safe-bottom));border:0;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog #exportSettings {display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .app-export-settings-body {
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;gap:10px;flex:1;min-height:0;
  overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:12px;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .app-export-settings-body > label {min-width:0;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .app-export-settings-body > :is(p,.export-hm20c,.export-subtitle,#exportGridToggle),
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .app-export-settings-body > label:has(select[name=crs]) {grid-column:1/-1;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .app-export-footer {
  display:flex;flex:none;gap:8px;padding:8px 12px calc(8px + var(--app-safe-bottom));border-top:1px solid var(--app-line);background:var(--app-raised);
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .app-export-footer > button {flex:1;min-width:0;min-height:48px;padding:8px 6px;font-size:14px!important;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .jpg-actions {position:sticky;bottom:0;background:var(--app-raised);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog :is(input,select,textarea) {box-sizing:border-box;min-width:0;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog :is(.export-preview,.jpg-preview) {flex:1;min-width:0;min-height:0;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog[data-app-export-view=settings] :is(.export-preview,.jpg-preview,.app-pdf-zoom),
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog[data-app-export-view=preview] :is(#exportSettings,.jpg-settings) {display:none;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog[data-app-export-view=preview] .app-export-status {
  display:block;position:absolute;top:8px;left:12px;right:12px;z-index:4;padding:10px 12px;border:1px solid var(--app-line);border-radius:12px;
  background:var(--app-raised);color:var(--app-ink);font-size:13px;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .app-export-status[hidden] {display:none;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .app-jpg-actions {
  display:flex;position:absolute;bottom:calc(12px + var(--app-safe-bottom));left:12px;right:12px;z-index:4;gap:6px;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .app-jpg-actions button {min-height:48px;min-width:0;background:var(--app-accent);color:var(--app-raised);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog #jpgZoom {top:12px;bottom:auto;}
@media(max-height:500px) and (min-width:600px) {
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog[open] {grid-template-columns:minmax(240px,.75fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog > header {grid-column:1;grid-row:1;padding:4px 12px;}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog #mapExportMembership {display:none;}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .export-tabs {grid-column:1;grid-row:2;}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .app-export-views {grid-column:1;grid-row:3;align-items:center;}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog :is(#pdfWorkspace,.jpg-workspace) {grid-column:2;grid-row:1/4;}
}
@container app-export-sheet (max-height:210px) and (min-width:600px) {
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog > header {grid-column:1;grid-row:1;padding:4px 12px;}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog #mapExportMembership {display:none;}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .export-tabs {grid-column:1;grid-row:2;}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .app-export-views {grid-column:1;grid-row:3;align-items:center;}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog :is(#pdfWorkspace,.jpg-workspace) {grid-column:2;grid-row:1/4;}
}
@container app-export-sheet (max-height:210px) and (max-width:599px) {
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog > header {padding:4px 12px;}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog #mapExportMembership {display:none;}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog :is(.export-tabs,.app-export-views) {display:none;}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .app-export-footer {padding:4px 8px calc(4px + var(--app-safe-bottom));}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .app-export-settings-body {padding:4px 8px;}
}
@container app-export-sheet (max-height:120px) {
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog > header {grid-column:1/-1;grid-row:1;justify-content:flex-end;height:44px;min-height:44px;padding:0;}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog > header > div,
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog :is(.export-tabs,.app-export-views) {display:none;}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog #exportClose {flex:0 0 44px;width:44px;min-width:44px;min-height:44px;height:44px;padding:6px;}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog :is(#pdfWorkspace,.jpg-workspace) {grid-column:1/-1;grid-row:3;}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog :is(#pdfWorkspace,#exportSettings) {overflow:visible;}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .app-export-footer {position:absolute;inset:-44px 48px auto 0;height:44px;min-height:44px;padding:0 4px;gap:4px;border:0;}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .app-export-footer > button {height:44px;min-height:44px;padding:4px;font-size:13px!important;}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mapExportDialog .app-export-settings-body {padding:4px 8px;}
}

html:is([data-app-layout=phone],[data-app-layout=tablet]) body.guru-routing :is(.app-centre-cross,.cursor-status-bar,.app-location-status,.app-map-logo,.app-search-navigation,.app-primary-bank) {display:none!important;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) body.guru-routing #mapSearch {display:none!important;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) body:is(.guru-routing,.dual-mode-active,.street-view-docked) #mobileAppShell .app-primary-bank {display:none!important;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-toolbar {
  box-sizing:border-box;display:grid;grid-template-columns:44px minmax(0,1fr) auto 44px;align-items:center;gap:0 2px;
  top:calc(var(--app-safe-top) + 8px);left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));
  padding:2px 6px 6px;border:1px solid var(--app-line);border-radius:18px;background:var(--app-raised);box-shadow:var(--app-shadow);
  max-height:46dvh;overflow:visible;min-height:44px;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-toolbar>button {height:44px;min-height:44px;width:44px;padding:10px;border-radius:50%;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #mobileRouteClose {grid-column:1;grid-row:1;}
.hkmaps-route-title,.guru-route-detail-title {grid-column:2;grid-row:1;margin:0;padding:6px;font:650 19px/1.3 var(--font-body);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-toolbar :is(.hkmaps-route-title,.guru-route-detail-title) {font-size:16px;padding:4px;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-toolbar>button:last-of-type {grid-column:4;grid-row:1;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-toolbar>.hkmaps-route-fit {grid-column:4;grid-row:1;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-toolbar:has(.hkmaps-route-title[hidden]) {grid-template-columns:44px minmax(0,1fr) 0 44px;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-toolbar>.hkmaps-route-elevation-mode {grid-column:2;grid-row:2;width:auto;justify-self:start;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-toolbar .guru-route-stops {
  grid-column:1/-1;grid-row:2;max-height:calc(46dvh - 100px);overflow:auto;overscroll-behavior:contain;padding:0 0 4px;touch-action:pan-y;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-toolbar .guru-route-stop {min-height:44px;padding:0;gap:4px;margin-bottom:2px;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-stop-badge .guru-route-finish-icon {width:24px;height:27px;object-fit:contain;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-toolbar .guru-route-stop-name {
  border:1px solid var(--app-line)!important;background:var(--app-surface)!important;border-radius:12px!important;
  padding:6px 10px!important;min-height:44px;font-size:14px;line-height:1.25;white-space:nowrap;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-toolbar .guru-route-stop-name strong {display:block;overflow:hidden;text-overflow:ellipsis;font:500 14px/1.3 var(--font-body);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-toolbar .guru-route-stop-name small {font-size:12px;color:var(--app-muted);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-toolbar :is(.guru-route-remove,.guru-route-reorder) {flex:0 0 44px;width:44px;min-height:44px;padding:9px;color:var(--app-muted);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-toolbar .guru-route-remove {font-size:24px;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-toolbar>.guru-route-add {grid-column:3;grid-row:1;display:block;width:auto;min-width:44px;min-height:44px;padding:4px 6px;margin:0;border-radius:10px;text-align:center;white-space:nowrap;color:var(--app-accent,#17648c);font-size:12px;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-toolbar .guru-route-reverse {top:24px;}
.guru-waypoint-actions [data-route-point-action] {display:grid;place-items:center;}
.guru-waypoint-actions [data-route-point-action] img {display:block;width:26px;height:26px;object-fit:contain;}
.guru-waypoint-actions [data-route-point-action=via] svg {width:26px;height:26px;}
.hkmaps-route-modes {grid-column:1/-1;grid-row:3;display:flex;gap:6px;border-top:1px solid var(--app-line);padding-top:8px;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .hkmaps-route-modes {gap:2px;padding-top:4px;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .hkmaps-route-modes button {
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:4px;border-radius:10px;
  color:var(--app-muted);font:600 12px/1.15 var(--font-body);
}
.hkmaps-route-modes svg {width:22px;height:22px;flex:none;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .hkmaps-route-modes svg {width:20px;height:20px;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .hkmaps-route-modes [aria-pressed=true] {background:var(--app-selected);color:var(--app-accent,#17648c);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-menu {top:54px;right:0;border:1px solid var(--app-line);border-radius:18px;z-index:3;box-shadow:var(--app-shadow);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) body.guru-routing #locatePanel.guru-route-panel {
  inset:auto max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))!important;
  width:auto!important;max-width:none!important;height:var(--app-half-sheet-height,50dvh)!important;max-height:var(--app-half-sheet-height,50dvh)!important;
  box-sizing:border-box;border:1px solid var(--app-line);border-radius:22px 22px 0 0!important;transform:none!important;
  padding:0!important;box-shadow:var(--app-shadow);background:var(--app-raised);overflow:auto;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route {padding:0 0 10px;border-radius:22px;background:var(--app-raised);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route .guru-route-grip {height:44px;min-height:44px;border:0;border-radius:22px 22px 0 0;background:transparent;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route .guru-route-grip:after {top:15px;width:34px;height:4px;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-statistics {gap:12px;border:0;padding:0 16px 12px;}
.guru-route-statistics>div:first-child strong {color:var(--app-accent,#17648c);font-size:30px;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-statistics strong {font-weight:700;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-statistics small {font-size:13px;}
.hkmaps-route-actions {display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:8px;padding:0 14px 10px;position:sticky;bottom:0;background:var(--app-raised);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route .guru-route-directions-button {
  display:flex;align-items:center;justify-content:center;gap:8px;width:auto;height:auto;min-height:48px;min-width:0;
  padding:10px 12px;border-radius:14px;background:var(--app-accent,#17648c);color:#fff;font:600 14px/1.3 var(--font-body);
}
.hkmaps-route-actions .guru-route-directions-button svg {width:18px;height:18px;flex:none;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route .hkmaps-route-save {min-height:48px;border:1px solid var(--app-line);border-radius:14px;background:var(--app-selected);font:600 14px var(--font-body);padding:10px;}
.hkmaps-route-hint {padding:0 16px 8px;margin:0!important;font-size:14px;line-height:1.5;color:var(--app-muted);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-provider {font-size:11px!important;padding:0 16px;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route>.hkmaps-route-credit {max-width:none;margin:0 14px;padding:5px 0 0;border-top:1px solid var(--app-line);border-radius:0;background:transparent;color:var(--app-muted);font:10px/1.35 var(--font-body);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route>.hkmaps-route-credit img {flex:none;width:14px;height:14px;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-directions {padding:0 16px 8px;}
.guru-route-directions h3 {margin:2px 0 8px;font:650 17px var(--font-body);}
.guru-route-directions ol {padding-left:24px;margin:0;}
.guru-route-directions li {line-height:1.45;padding:12px 0;}
.guru-route-directions li small {display:block;color:var(--app-muted);font-size:13px;margin-top:4px;}
/* The handle remains a full touch target while its line stays visually light. */
html:is([data-app-layout=phone],[data-app-layout=tablet]) body.guru-routing #locatePanel.guru-route-panel:has(.guru-route[data-collapsed=true]) {
  inset:auto max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))!important;
  height:auto!important;max-height:var(--app-half-sheet-height,50dvh)!important;min-height:0!important;transform:none!important;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route[data-collapsed=true] > :not(.guru-route-grip):not(.guru-route-statistics):not(.hkmaps-route-credit) {display:none!important;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route[data-collapsed=true] {padding-bottom:calc(4px + var(--app-safe-bottom,0px));}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route[data-collapsed=true] .guru-route-statistics {padding-bottom:10px;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-search {
  inset:auto 0 0!important;
  height:var(--app-half-sheet-height,50dvh);max-height:var(--app-half-sheet-height,50dvh);padding:0 0 var(--app-safe-bottom);overflow-y:auto;box-sizing:border-box;
  border:1px solid var(--app-line);border-radius:22px 22px 0 0;background:var(--app-raised);color:var(--app-ink);overscroll-behavior:contain;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-search header {position:sticky;top:0;z-index:2;background:var(--app-raised);padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));border-bottom:1px solid var(--app-line);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-search header input {border:1px solid var(--app-line);border-radius:14px;background:var(--app-surface);min-height:48px;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-search-row {min-height:56px!important;padding:14px 20px!important;}

/* Map picking keeps the map interactive beneath one short instruction card. */
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-map-picker {
  inset:calc(var(--app-safe-top,0px) + 12px) auto auto 12px;
  width:min(440px,calc(var(--app-viewport-width,100vw) - 24px));box-sizing:border-box;padding:0 12px 12px;
  border:1px solid var(--app-line);border-radius:22px;background:var(--app-raised);color:var(--app-ink);box-shadow:var(--app-shadow);pointer-events:auto;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-map-picker header {
  position:static;min-height:56px;gap:8px;padding:0 0 0 4px;background:transparent;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-map-picker header strong {font:650 17px/1.3 var(--font-body);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-map-picker header button {flex:none;width:48px;height:48px;min-height:48px;padding:8px;border-radius:50%;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-map-instruction {margin:0;padding:0 4px;font:400 14px/1.45 var(--font-body);color:var(--app-muted);}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-map-picker .guru-route-map-feedback {position:static;margin:8px 0 0;padding:8px 4px 0;border-top:1px solid var(--app-line);font:400 14px/1.4 var(--font-body);background:transparent;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-map-picker .guru-route-map-gps {
  position:fixed;top:auto;bottom:calc(var(--app-safe-bottom,0px) + 12px);right:max(12px,env(safe-area-inset-right));
  width:48px;height:48px;min-height:48px;padding:11px;border:1px solid var(--app-line);border-radius:50%;background:var(--app-raised);color:var(--app-accent);box-shadow:var(--app-shadow);
}

/* Comparison pixels run edge to edge; safe areas apply to controls only. */
html:is([data-app-layout=phone],[data-app-layout=tablet]) body:is(.dual-mode-active,.street-view-docked) #mapApplication #mapWrapper {
  inset:0!important;top:0!important;bottom:0!important;width:100%!important;height:100%!important;display:flex!important;gap:0!important;padding:0!important;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) body:is(.dual-mode-active,.street-view-docked) #mapApplication :is(#viewDiv,#viewDivRight) {
  display:block!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;
}
html[data-app-layout=phone] body:is(.dual-mode-active,.street-view-docked) #mapWrapper {flex-direction:column!important;}
html[data-app-layout=phone] body:is(.dual-mode-active,.street-view-docked) :is(#viewDiv,#viewDivRight) {flex:0 0 50%!important;width:100%!important;max-width:none!important;height:50%!important;max-height:50%!important;}
html[data-app-layout=phone] body:is(.dual-mode-active,.street-view-docked) #viewDiv {order:1;}
html[data-app-layout=phone] body:is(.dual-mode-active,.street-view-docked) #viewDivRight {order:2;}
html[data-app-layout=tablet] body:is(.dual-mode-active,.street-view-docked) #mapWrapper {flex-direction:row!important;}
html[data-app-layout=tablet] body:is(.dual-mode-active,.street-view-docked) :is(#viewDiv,#viewDivRight) {flex:0 0 50%!important;width:50%!important;max-width:50%!important;height:100%!important;max-height:none!important;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) body:is(.dual-mode-active,.street-view-docked) :is(.app-header,.app-navigation,.app-map-logo,.app-centre-cross,.cursor-status-bar,.app-primary-bank) {display:none!important;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) body.street-view-docked .street-view-panel {inset:0!important;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) body.street-view-docked .street-view-picker {
  left:max(10px,env(safe-area-inset-left))!important;right:max(10px,env(safe-area-inset-right))!important;top:calc(var(--app-safe-top) + 10px)!important;
  bottom:auto!important;width:auto!important;align-items:stretch;
}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .street-view-controls {border:1px solid var(--app-line);border-radius:16px!important;background:var(--app-raised)!important;color:var(--app-ink)!important;box-shadow:var(--app-shadow);padding:4px!important;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .street-view-controls :is(button,select) {min-height:48px!important;height:48px!important;color:var(--app-ink)!important;background:transparent!important;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .street-view-controls button {min-width:48px!important;width:48px!important;flex:0 0 48px!important;border-radius:12px;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .street-view-controls select {font-size:14px;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) #streetViewPano .gm-style > div:has(> .gm-bundled-control-on-bottom),
html:is([data-app-layout=phone],[data-app-layout=tablet]) #streetViewPano .gm-style > div:has(.gm-style-cc) {translate:0 calc(-1 * max(var(--street-google-bottom,0px),env(safe-area-inset-bottom)));}
html[data-app-layout=tablet] body.street-view-docked .street-view-picker {left:calc(50% + 10px)!important;}
html:is([data-app-layout=phone],[data-app-layout=tablet]) .street-view-scene-lock {width:48px;height:48px;right:max(12px,env(safe-area-inset-right));bottom:12px;border-radius:14px;}
html[data-app-layout=phone] body.dual-mode-active #mobileAppShell .app-compare-actions {top:calc(50% + 10px)!important;bottom:auto!important;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));}
html[data-app-layout=tablet] body.dual-mode-active #mobileAppShell .app-compare-actions {top:calc(var(--app-safe-top) + 10px)!important;left:calc(50% + 10px)!important;bottom:auto!important;right:max(10px,env(safe-area-inset-right));}
@media(min-width:700px) {
  html[data-app-layout=tablet] .guru-route-toolbar {left:max(12px,env(safe-area-inset-left));right:auto;width:380px;}
  html[data-app-layout=tablet] body.guru-routing #locatePanel.guru-route-panel {left:max(12px,env(safe-area-inset-left))!important;right:auto!important;width:380px!important;}
}
@media(max-width:360px) {
  .hkmaps-route-modes button {flex-direction:column;gap:2px!important;font-size:12px!important;}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-toolbar .guru-route-stops {max-height:calc(46dvh - 100px);}
  html:is([data-app-layout=phone],[data-app-layout=tablet]) .guru-route-toolbar .guru-route-stop-name :is(strong,small) {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}
@media(max-height:540px) {
  html[data-app-layout=phone] .guru-route-toolbar {left:max(10px,env(safe-area-inset-left));right:auto;width:min(360px,48vw);max-height:calc(100dvh - var(--app-safe-top) - 20px);}
  html[data-app-layout=phone] .guru-route-toolbar .guru-route-stops {max-height:calc(100dvh - var(--app-safe-top) - 154px);}
  html[data-app-layout=phone] body.guru-routing #locatePanel.guru-route-panel {left:auto!important;width:min(360px,48vw)!important;}
  html[data-app-layout=phone] body.guru-routing #locatePanel.guru-route-panel:has(.guru-route[data-collapsed=true]) {left:auto!important;width:min(360px,48vw)!important;}
  .hkmaps-route-modes button {font-size:12px!important;}
}