/* Phone/tablet usability: preserve map space while enlarging actual hit areas. */
html:is([data-app-layout=phone],[data-app-layout=tablet]) {
  --app-muted:#526b80;
  --app-accent:#17648c;
  --app-safe-left:max(12px,env(safe-area-inset-left,0px));
  --app-safe-right:max(12px,env(safe-area-inset-right,0px));

  #mobileAppShell :is(button,input,select) {
    touch-action:manipulation;
  }
  :is(#mobileAppShell,#optionPanel,#workspacePanel,#mapSearch,.guru-route,.guru-route-toolbar,.guru-route-search,.app-place-sheet,.app-feature-draw) :is(button,input,select,textarea,summary):focus-visible {
    outline:3px solid var(--app-accent)!important;
    outline-offset:-3px;
  }
  #mobileAppShell :is(.app-map-controls,.app-navigation) button {
    width:48px;min-width:48px;height:48px;min-height:48px;
    right:var(--app-safe-right);
  }
  #mobileAppShell .app-navigation [data-app-route] {right:var(--app-safe-right);}
  #mobileAppShell .app-sheet>header button {min-width:48px;min-height:48px;}
  #mobileAppShell .app-compare-actions {left:var(--app-safe-left);}
  #mobileAppShell .app-compare-actions button {min-height:48px;}
  #mobileAppShell .app-tools-content {font-size:16px;line-height:1.5;}
  #mobileAppShell .app-tools-content h3 {font-size:13px;}
  #mobileAppShell .app-tool-grid button>span {min-width:0;overflow-wrap:anywhere;}
  .professional-locked::after {width:16px;height:16px;background-size:12px;}
  #mobileAppShell .professional-locked::after,.app-place-sheet .professional-locked::after {width:16px;height:16px;top:3px;right:3px;background-size:12px;}
  #mobileAppShell .app-tool-grid .professional-locked::after {position:static;flex:0 0 18px;width:18px;height:18px;margin-left:auto;align-self:center;}
  #mobileAppShell .app-tool-grid .professional-locked {padding-right:12px;}
  :is(#optionPanel,#rightLayerPanel) .professional-locked::after {width:16px;height:16px;background-size:12px;}
  #mobileAppShell .app-setting-switch {font-size:16px!important;}
  #mobileAppShell .app-setting-switch i {background:#71869a;}
  #mobileAppShell .app-setting-switch[aria-checked=true] i {background:var(--app-accent);}

  #optionPanel .app-sheet-handle {height:48px;min-height:48px!important;}
  #optionPanel.feature-panel-expanded.app-sheet-tall {height:calc(var(--app-viewport-height,100dvh) - var(--app-safe-top) - 64px)!important;}
  #optionPanel #list-basemaps .layer-item>input {
    width:48px!important;height:48px!important;min-height:48px!important;
    margin:0!important;color:var(--app-accent);
  }
  #optionPanel #list-basemaps .layer-item>input:checked::after {
    left:19px;top:14px;border-color:var(--app-accent)!important;
  }
  #optionPanel :is(input[type=range],.map-opacity-input) {height:48px!important;min-height:48px;}
  #optionPanel .layer-item {box-sizing:border-box;}
  #optionPanel .mobile-layers-heading :is(button,.app-layer-information) {min-width:48px;min-height:48px;}
  #optionPanel .app-source-tabs>button[aria-pressed=true] {color:var(--app-accent);border-bottom-color:var(--app-accent);}

  #workspacePanel:has(.ws-explorer) .ws-collection-sort>button {min-height:48px;}
  #workspacePanel:has(.ws-explorer) .ws-explorer-name {
    grid-row:1/3;align-self:stretch;min-height:48px!important;
    box-sizing:border-box;padding:8px 0 18px;display:block;text-align:left;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  #workspacePanel:has(.ws-explorer) .ws-explorer-type {
    align-self:end;margin-bottom:2px;pointer-events:none;
  }
  #workspacePanel:has(.ws-explorer) .ws-explorer-row[data-entry-kind=folder] .ws-explorer-name {padding-bottom:0;}
  #workspacePanel .ws-explorer-map-actions {align-self:center;}
  #workspacePanel .ws-explorer-map-actions button {width:48px;height:48px;color:var(--app-accent)!important;}
  #workspacePanel .ws-explorer-map-actions svg {color:var(--app-accent)!important;}
  #workspacePanel:has(.ws-explorer) .ws-explorer-row {grid-template-columns:30px minmax(0,1fr) 48px 14px;}

  .guru-route .guru-route-grip {height:48px;min-height:48px;touch-action:none;}
  .guru-route-grip::after {top:12px;background:var(--app-muted);}
  .guru-route :is(.guru-route-reorder,.guru-route-remove) {
    flex:0 0 48px;width:48px;min-width:48px;min-height:48px;color:var(--app-muted);
  }
  .guru-route .guru-route-reorder {touch-action:none;}
  .guru-route .guru-route-add {color:var(--app-accent);min-height:48px;}
  .guru-route .guru-route-provider {font-size:12px;line-height:1.4;}
  .guru-route .guru-route-directions-button {width:48px;height:48px;min-height:48px;flex-basis:48px;background:var(--app-accent);}
  .guru-route-toolbar>button:first-child,.guru-route-toolbar>button:last-of-type {flex-basis:48px;}
  .guru-route-toolbar [aria-pressed=true] {color:var(--app-accent);}
  .app-place-sheet header {right:0;top:-44px;}
  .app-place-sheet header button {width:48px;min-width:48px;height:48px;min-height:48px;background:var(--app-raised);color:var(--app-ink);}
  .app-place-sheet>div button {min-height:48px;color:var(--app-accent);}

  /* Physical cutouts can be on either side after rotation. */
  #appTools>header,#workspacePanel>.ws-header,.guru-route-toolbar {
    padding-left:var(--app-safe-left);padding-right:var(--app-safe-right);
  }
  #mobileAppShell #appGisTools {max-height:calc(var(--app-viewport-height,100dvh) - var(--app-safe-top) - 12px)!important;padding-bottom:var(--app-safe-bottom);box-sizing:border-box;}
  #mapApplication #mapSearch.is-open {max-height:calc(var(--app-viewport-height,100dvh) - var(--app-safe-top))!important;}
  #mapApplication #mapSearch.is-open #mapSearchPanel {max-height:calc(var(--app-viewport-height,100dvh) - var(--app-safe-top) - 160px)!important;}
  .app-search-results td:not(:first-child)::before {font-size:12px;color:var(--app-muted);}
  #mapExportDialog #exportClose {width:48px;min-width:48px;min-height:48px;}
  #mapExportDialog #exportGridToggle {min-height:48px;}
  #mapExportDialog #exportSettings .export-subtitle-toggle {min-height:48px;box-sizing:border-box;}
  #mapExportDialog :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {font-size:16px!important;}
  #savedViewsPanel .saved-views-icon {width:48px;height:48px;min-width:48px;min-height:48px;}
  #savedViewsPanel .saved-views-secondary {min-height:48px;}
  #workspacePanel .account-embedded {max-width:600px;margin-inline:auto;}
  #workspacePanel .ws-support-footer {width:100%;max-width:600px;margin-inline:auto;}
  #workspacePanel .ws-inspector-scroll :is(.ws-note,.ws-tool-notice) {color:var(--app-muted);}
  #workspacePanel .ws-inspector-scroll .ws-icon-button {width:48px;min-width:48px;min-height:48px;}
  #workspacePanel .ws-inspector-scroll summary {min-height:48px;box-sizing:border-box;padding-block:12px;line-height:24px;}
  #workspacePanel .ws-symbol-paint {display:grid;grid-template-columns:repeat(4,minmax(48px,1fr));gap:8px;}
  #workspacePanel .ws-symbol-paint label {grid-column:1/-1;}
  #workspacePanel .ws-symbol-paint input[type=color] {height:48px;min-height:48px;}
  #workspacePanel .ws-symbol-paint .ws-paint-swatch {width:48px;min-width:48px;height:48px;min-height:48px;margin:0;justify-self:start;}
  #workspacePanel .ws-popup-field>span:first-child {min-width:0;overflow-wrap:anywhere;}
  dialog.ws-symbol-picker .ws-icon-button {width:48px;min-width:48px;min-height:48px;}
  dialog.ws-symbol-picker .ws-symbol-credits :is(summary,a) {min-height:48px;box-sizing:border-box;padding-block:12px;font-size:14px;line-height:24px;}
  body:has(.app-feature-draw[data-placement-mode=tap]:not([hidden])) .app-centre-cross {display:none!important;}
  .app-feature-draw .app-draw-placement {display:flex;gap:4px;padding:4px;background:var(--app-selected);border-radius:12px;}
  .app-feature-draw .app-draw-placement button {flex:1;min-height:48px;min-width:0;font-size:15px;white-space:normal;background:transparent;}
  .app-feature-draw .app-draw-placement button[aria-pressed=true] {background:var(--app-raised);color:var(--app-accent);box-shadow:0 1px 4px #1232;}
  .app-feature-draw .app-edit-modes button {min-height:48px;}
  .app-feature-draw p {font-size:14px;line-height:1.4;}
  .app-feature-draw {max-height:calc(var(--app-viewport-height,100dvh) - var(--app-safe-top) - 64px)!important;overflow-y:auto!important;padding-left:var(--app-safe-left);padding-right:var(--app-safe-right);}
  .app-feature-draw .app-edit-header {padding-left:var(--app-safe-left);padding-right:var(--app-safe-right);}
  .flight-setup button.flight-setup__close {width:48px;min-width:48px;}
  .flight-setup__sources>summary {min-height:48px;display:list-item;box-sizing:border-box;padding:12px 0;font-size:14px;line-height:24px;cursor:pointer;}
  body:has(.flight-setup:not([hidden])) #mobileAppShell :is(.app-navigation,.app-map-controls) {display:none!important;}
  #elevationProfilePanel :is(.elevation-toolbar,.elevation-left,.elevation-summary,.elevation-chart-wrap) {min-width:0;max-width:100%;box-sizing:border-box;}
}
html[data-app-layout=tablet] #mapApplication #sharePanel {width:min(480px,calc(var(--app-viewport-width,100vw) - var(--app-safe-left) - var(--app-safe-right)))!important;left:auto!important;right:var(--app-safe-right)!important;box-sizing:border-box;}
/* The legacy narrow-desktop rules must not suppress a tablet comparison pane. */
html[data-app-layout=tablet] body.dual-mode-active:not(.is-street-view-open) #mapWrapper {display:flex!important;flex-direction:row;}
html[data-app-layout=tablet] body.dual-mode-active:not(.is-street-view-open) :is(#viewDiv,#viewDivRight) {display:block!important;width:50%!important;max-width:50%!important;height:100%!important;flex:0 0 50%!important;}
html[data-app-layout=tablet] body.dual-mode-active #mobileAppShell .app-compare-actions {left:calc(50% + 12px);top:calc(var(--app-safe-top) + 12px);bottom:auto;}
html[data-app-layout=phone] body.dual-mode-active .app-location-status {top:calc(var(--app-safe-top) + 12px);bottom:auto;}
html[data-app-layout=phone][data-map-buttons=split] body.dual-mode-active .app-location-status {left:calc(var(--app-safe-left) + 64px);}
html:is([data-app-layout=phone],[data-app-layout=tablet])[data-map-buttons=split] #mobileAppShell {
  .app-map-controls>button,.app-navigation [data-app-route=tools] {right:var(--app-safe-right);}
  .app-map-controls [data-app-command=search],.app-navigation [data-app-route=workspace],.app-map-controls .app-location-control {left:var(--app-safe-left);right:auto;}
}
html[data-theme=dark]:is([data-app-layout=phone],[data-app-layout=tablet]) {
  --app-muted:#afc5d6;--app-accent:#8ccdf4;
  #mobileAppShell .app-setting-switch[aria-checked=true] i {background:#17648c;}
  .guru-route .guru-route-directions-button {background:#17648c;}
}
@media(min-width:700px) {
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #appTools .app-tools-content {width:100%;max-width:760px;margin-inline:auto;}
}
@media(orientation:landscape) and (max-height:660px) {
  html:is([data-app-layout=phone],[data-app-layout=tablet]) .app-feature-draw:has(.app-draw-placement) {
    left:auto;right:var(--app-safe-right);bottom:var(--app-safe-bottom);
    width:calc(50vw - var(--app-safe-right) - 16px);box-sizing:border-box;
    max-height:calc(var(--app-viewport-height,100dvh) - var(--app-safe-top) - var(--app-safe-bottom) - 64px)!important;
    padding:12px;border:1px solid var(--app-line);border-radius:16px;
  }
}
@media(max-height:660px) {
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mobileAppShell .app-map-controls {
    top:calc(64px + var(--app-safe-top));bottom:calc(140px + var(--app-safe-bottom));
    right:calc(var(--app-safe-right) - 4px);gap:8px;max-width:56px;
    background:color-mix(in srgb,var(--app-raised) 70%,transparent);border-radius:12px;
  }
  html:is([data-app-layout=phone],[data-app-layout=tablet]) #mobileAppShell .app-map-controls>button {flex-basis:48px;width:48px;min-width:48px;height:48px;min-height:48px;}
  html:is([data-app-layout=phone],[data-app-layout=tablet])[data-map-buttons=split] #mobileAppShell .app-map-controls {
    display:flex;bottom:calc(116px + var(--app-safe-bottom));
  }
  html:is([data-app-layout=phone],[data-app-layout=tablet])[data-map-buttons=split] #mobileAppShell .app-map-controls>button:not([data-app-command=search]):not(.app-location-control) {position:static;}
  html:is([data-app-layout=phone],[data-app-layout=tablet])[data-map-buttons=split] body.app-route-recording-active #mobileAppShell .app-map-controls {top:calc(132px + var(--app-safe-top));}
}

/* One catalog scroll area, equal-width categories and a real resize control. */
html:is([data-app-layout=phone],[data-app-layout=tablet]) {
  #optionPanel .feature-panel-tabs {display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:4px 0 8px;overflow:visible;}
  #optionPanel .feature-panel-tab {width:100%;min-width:0;min-height:48px;padding:8px 4px;text-align:center;}
  #optionPanel #panelScrollContent {overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;}
  #optionPanel :is(#activeLayersZone,#active-layers-list) {max-height:none!important;overflow:visible;touch-action:pan-y;}
  #optionPanel #activeLayersZone.mobile-active-collapsed :is(#active-layers-list,#empty-cart-msg,#clearAllCartLayersBtn) {display:none!important;}
  #optionPanel #panelBottom {display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);align-items:center;gap:12px;padding:8px 12px!important;}
  #optionPanel #panelBottom .section-title {margin:0!important;}
  #optionPanel #panelBottom h2 {margin:0;line-height:1.3;}
  #optionPanel #panelBottom .d-flex {min-width:0;}
  #optionPanel #opacitySlider {min-height:48px;margin:0;}
  #optionPanel #featurePanelBody .app-sheet-handle {color:var(--app-muted);font:600 12px/20px var(--font-body);touch-action:none;cursor:ns-resize;}
  #optionPanel .app-sheet-handle::after {content:none;}
  .ws-map-legends {display:none!important;}
  /* Reserve a band above the bottom controls, including split-button layouts. */
  .app-location-status {left:var(--app-safe-left);right:calc(var(--app-safe-right) + 64px);bottom:calc(var(--app-safe-bottom) + 124px);box-sizing:border-box;max-height:52px;overflow:auto;}
  .cursor-status-bar {left:var(--app-safe-left)!important;max-width:calc(100vw - var(--app-safe-left) - var(--app-safe-right))!important;flex-wrap:wrap!important;}
  #mainScaleBar {display:inline-flex!important;align-items:baseline;gap:0;padding:0!important;}
  .cursor-status-bar #mainScaleBar :is(.cursor-scale-prefix,#mapScaleInput) {font:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;height:auto!important;min-height:0!important;padding:0!important;margin:0!important;border:0;box-shadow:none;}
  .cursor-status-bar #mainScaleBar #mapScaleInput {appearance:none;-webkit-appearance:none;align-self:baseline;}
  .cursor-status-bar #mainScaleBar #mapScaleInput:focus {font-size:16px!important;min-height:32px!important;}
  .guru-route-stop-name {min-width:0;white-space:normal;}
  .guru-route-stop-name strong {display:block;font:inherit;overflow-wrap:anywhere;}
  .guru-route-stop-name small {display:block;font-size:12px;line-height:1.4;color:var(--app-muted);}
  .guru-route-menu {max-height:calc(var(--app-viewport-height,100dvh) - var(--app-safe-top) - var(--app-safe-bottom) - 76px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y;}
  .guru-route-menu :is(select,input,summary) {min-height:48px;font-size:16px;max-width:100%;box-sizing:border-box;}
  .guru-route-menu label {display:block;}
  .guru-route-menu label input {width:100%;}
}
html:is([data-app-layout=phone],[data-app-layout=tablet])[data-map-buttons=split] #mobileAppShell :is(.app-navigation [data-app-route=tools],.app-map-controls .app-location-control) {bottom:calc(var(--app-safe-bottom) + 64px);}
@media(max-height:500px) {
  html[data-app-layout=phone] #optionPanel.feature-panel-expanded {
    height:calc(var(--app-viewport-height,100dvh) - var(--app-safe-top) - var(--app-safe-bottom) - 8px)!important;
    max-height:none!important;
  }
}
@media(max-height:660px) {
  html:is([data-app-layout=phone],[data-app-layout=tablet])[data-map-buttons=right] .cursor-status-bar {
    display:grid!important;grid-template-columns:1fr 1fr;gap:0 4px;
    width:calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 64px);
    max-width:calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 64px)!important;
  }
  html:is([data-app-layout=phone],[data-app-layout=tablet])[data-map-buttons=right] #cursorStatusReadout {grid-row:1;grid-column:1/-1;white-space:normal!important;overflow-wrap:anywhere;height:auto!important;}
  html:is([data-app-layout=phone],[data-app-layout=tablet])[data-map-buttons=right] .cursor-crs-picker {grid-row:2;grid-column:1;}
  html:is([data-app-layout=phone],[data-app-layout=tablet])[data-map-buttons=right] #mainScaleBar {grid-row:2;grid-column:2;}
}