/* October touch layout: six thumb controls and a right-hand menu. */
html:is([data-app-layout=phone],[data-app-layout=tablet]) {
  --app-nav-height:calc(68px + var(--app-safe-bottom));
  --app-header-height:var(--app-safe-top);
  --app-accent:#125769;
  --app-drawer-width:min(400px,calc(var(--app-viewport-width,100vw) - 48px));
  --app-half-sheet-height:calc(var(--app-viewport-height,100dvh) * .5);
  --app-half-sheet-top:calc(var(--app-viewport-top,0px) + var(--app-half-sheet-height));
  --app-primary-bottom:calc(var(--app-safe-bottom) + 62px);
  #mobileAppShell :is(.app-primary-left,.app-primary-right) {
    display:flex!important;flex-direction:column;gap:8px;position:fixed!important;
    top:auto!important;bottom:var(--app-primary-bottom)!important;width:58px!important;height:auto!important;
    inset-inline:auto;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;
    box-shadow:none!important;overflow:visible!important;pointer-events:none;z-index:2100;
  }
  #mobileAppShell .app-primary-left {left:var(--app-safe-left)!important;right:auto!important;}
  #mobileAppShell .app-primary-right {right:var(--app-safe-right)!important;left:auto!important;}
  #mobileAppShell .app-primary-bank>button {
    position:static!important;display:flex!important;flex-direction:column!important;justify-content:center;gap:3px;
    width:58px!important;min-width:58px!important;height:56px!important;min-height:56px!important;padding:4px 0!important;
    top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;
    border:0!important;border-radius:18px!important;background:transparent!important;box-shadow:none!important;
    color:var(--app-accent)!important;pointer-events:auto;text-shadow:0 1px 0 #fff,1px 0 0 #fff,-1px 0 0 #fff,0 -1px 0 #fff;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  #mobileAppShell .app-primary-bank>button>span {display:none!important;}
  #mobileAppShell .app-primary-bank>.app-record-control {gap:1px!important;}
  #mobileAppShell .app-primary-bank>.app-record-control>span {display:block!important;font:700 11px/13px var(--font-body);}
  #mobileAppShell .app-primary-bank>button svg {width:32px;height:32px;stroke-width:2.5;filter:drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(0 -1px 0 white);}
  #mobileAppShell .app-primary-bank>.app-location-control>.app-location-symbol {display:block!important;position:relative;width:32px;height:32px;flex:none;}
  #mobileAppShell .app-location-symbol svg {position:absolute;inset:0;transform-origin:center;transition:opacity .18s ease,transform .18s ease;}
  #mobileAppShell .app-location-control .app-location-glyph {opacity:1;transform:rotate(0deg) scale(1);}
  #mobileAppShell .app-location-control .app-north-glyph {opacity:0;transform:rotate(-30deg) scale(.75);}
  #mobileAppShell .app-location-control[data-action=north] .app-location-glyph {opacity:0;transform:rotate(30deg) scale(.75);}
  #mobileAppShell .app-location-control[data-action=north] .app-north-glyph {opacity:1;transform:rotate(0deg) scale(1);}
  #mobileAppShell .app-north-glyph .app-compass-needle {fill:currentColor;stroke:none;}
  #mobileAppShell .app-north-glyph .app-compass-tail {fill:var(--app-raised);stroke:currentColor;stroke-width:1;}
  #mobileAppShell .app-primary-bank>button:active {background:var(--app-selected)!important;}
  #mobileAppShell .app-primary-bank>button[aria-pressed=true] {background:var(--app-selected)!important;box-shadow:inset 0 0 0 1px var(--app-line)!important;}
  #mobileAppShell .app-primary-bank>.app-record-control {color:#176da6!important;}
  body.app-route-recording-active:not(.app-route-recording-paused) #mobileAppShell .app-primary-bank>.app-record-control {color:#fff!important;background:#c63149!important;text-shadow:none;}
  body.app-route-recording-active:not(.app-route-recording-paused) #mobileAppShell .app-record-control svg {filter:none;}
  #mobileAppShell .app-map-logo {top:calc(12px + var(--app-safe-top))!important;left:50%!important;width:130px!important;height:44px!important;background:none!important;border:0!important;box-shadow:none!important;}
  #mobileAppShell .app-map-logo img {width:130px!important;height:auto!important;filter:none!important;}
  /* No full-width gradient, blur or shadow can leak into the phone status area. */
  #mobileAppShell .app-header {display:none!important;background:none!important;box-shadow:none!important;filter:none!important;backdrop-filter:none!important;}
  #mapApplication::before,#mobileAppShell::before,#mobileAppShell::after {content:none!important;}
  .cursor-status-bar {
    position:fixed!important;left:50%!important;right:auto!important;bottom:calc(var(--app-safe-bottom) + 14px)!important;
    transform:translateX(-50%)!important;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;
    width:max-content!important;max-width:calc(var(--app-viewport-width,100vw) - var(--app-safe-left) - var(--app-safe-right))!important;
    gap:0 4px!important;padding:0!important;background:transparent!important;font-size:11px!important;z-index:1800;
  }
  .cursor-status-bar #cursorStatusReadout {height:24px!important;min-height:24px!important;line-height:24px!important;font-size:11px!important;}
  .cursor-status-bar :is(.cursor-crs-button,#mapScaleInput) {font-size:11px!important;}
  .cursor-status-bar #cursorCrsButton {min-width:58px!important;}
  .cursor-status-bar :is(.cursor-crs-button,.cursor-status-readout) {background:var(--app-raised)!important;backdrop-filter:none!important;}
  .cursor-status-bar .cursor-crs-picker {order:0;}
  .cursor-status-bar:has(#cursorCrsMenu:not([hidden])) {z-index:2300;}
  .cursor-status-bar #cursorCrsMenu {
    box-sizing:border-box;width:100%!important;min-width:0!important;max-width:calc(var(--app-viewport-width,100vw) - 24px)!important;
    bottom:calc(100% + 8px)!important;max-height:min(244px,calc(var(--app-viewport-height,100dvh) - var(--app-safe-top) - var(--app-safe-bottom) - 80px));
    padding:3px 0;border-radius:8px;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 3px 12px #17323c24;
  }
  .cursor-status-bar #cursorCrsMenu .cursor-crs-option {
    box-sizing:border-box;height:44px;min-height:44px!important;padding:6px 4px!important;
    font:600 11px/14px var(--font-body)!important;letter-spacing:0!important;white-space:normal;
  }
  .cursor-status-bar #cursorStatusReadout {order:1;}
  .cursor-status-bar #mainScaleBar {order:2;}
  #mobileAppShell .app-location-status {left:50%!important;right:auto!important;top:auto!important;bottom:calc(var(--app-safe-bottom) + 70px)!important;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 164px);white-space:normal;text-align:center;}
  #mobileAppShell :is(.app-menu-drawer,#appCreate) {
    position:fixed!important;top:0!important;bottom:0!important;left:auto!important;right:0!important;
    width:var(--app-drawer-width)!important;max-width:none!important;height:var(--app-viewport-height,100dvh)!important;max-height:none!important;
    margin:0!important;border:0!important;border-left:1px solid var(--app-line)!important;border-radius:24px 0 0 24px!important;
    padding:var(--app-safe-top) 0 var(--app-safe-bottom)!important;box-sizing:border-box;background:var(--app-surface);box-shadow:-6px 0 24px #133c4b18;
    z-index:6000;
  }
  #mobileAppShell .app-drawer-scrim {position:fixed;inset:0;z-index:5950;border:0;border-radius:0;background:#10252c18;width:100%;height:100%;backdrop-filter:none;}
  #mobileAppShell .app-menu-drawer>header {padding:14px 14px 12px;gap:8px;min-height:76px;}
  #mobileAppShell .app-menu-drawer>header h2 {font-size:19px;flex:1;}
  #mobileAppShell #appMenu {overflow:visible;}
  #mobileAppShell #appMenu>.app-menu-dismiss {
    position:absolute;left:-46px;top:calc(12px + var(--app-safe-top));display:grid;place-items:center;
    width:44px;min-width:44px;height:44px;min-height:44px;padding:10px;border:1px solid var(--app-line);
    border-radius:50%;background:var(--app-raised);color:var(--app-ink);box-shadow:0 1px 3px #10252c25;
  }
  #mobileAppShell #appMenu>.app-menu-dismiss svg {width:24px;height:24px;stroke-width:2.4;}
  #mobileAppShell #appMenu>.app-menu-content {flex:1;padding-top:12px;border-radius:24px 0 0 24px;}
  .app-menu-content {overflow-y:auto;overscroll-behavior:contain;padding:8px 14px 24px;min-height:0;touch-action:pan-y;}
  .app-menu-content>section {margin:0 0 20px;}
  .app-menu-content h3 {margin:20px 8px 8px;font-size:12px;font-weight:700;color:var(--app-muted);letter-spacing:.04em;}
  body[data-app-route]:not([data-app-route=map]) #mobileAppShell .app-primary-bank {visibility:hidden!important;}
  body:is(.workspace-open,.mobile-search-open) #mobileAppShell :is(.app-primary-bank,.app-map-logo) {visibility:hidden!important;}
  body.hud-hidden #mobileAppShell :is(.app-primary-bank,.app-map-logo),body.hud-hidden .cursor-status-bar {visibility:hidden!important;}
  #mobileAppShell .app-hud-resume {position:fixed;right:var(--app-safe-right);bottom:calc(var(--app-safe-bottom) + 14px);z-index:6200;min-height:48px;padding:10px 14px;border:1px solid var(--app-line);border-radius:16px;background:var(--app-raised);box-shadow:var(--app-shadow);}
  #appTools .app-tools-content {padding:16px 14px 24px;}
  /* One bounded bottom sheet with a single native catalog scroll. */
  #optionPanel.feature-panel-expanded,#optionPanel.feature-panel-expanded.app-sheet-tall {
    top:auto!important;bottom:0!important;left:0!important;right:0!important;width:100%!important;
    height:var(--app-half-sheet-height)!important;max-height:var(--app-half-sheet-height)!important;
    border-radius:22px 22px 0 0!important;padding-bottom:var(--app-safe-bottom)!important;box-sizing:border-box;z-index:5800;
  }
  #optionPanel .mobile-layers-heading {display:contents!important;}
  #optionPanel .mobile-layers-heading :is(strong,.app-layer-information),#optionPanel :is(.app-sheet-handle,#mobileActiveLayersToggle,.active-layers-collapse-btn) {display:none!important;}
  #optionPanel .mobile-layers-heading .app-layer-close {position:absolute;top:6px;right:6px;z-index:3;}
  #optionPanel .app-source-tabs {padding:6px 58px 6px 12px;min-height:58px;display:flex;gap:4px;flex:none;border-bottom:1px solid var(--app-line);}
  #optionPanel .app-source-tabs>button {min-height:44px;flex:1;padding:8px 4px;border-radius:12px!important;border:0!important;font-size:13px;}
  #optionPanel .app-source-tabs>button[aria-pressed=true] {background:var(--app-selected);color:var(--app-accent);}
  #optionPanel #featurePanelBody {position:relative;display:flex!important;flex-direction:column;overflow:hidden!important;min-height:0;}
  #optionPanel #panelScrollContent {overflow-y:auto!important;flex:1;min-height:0;max-height:none!important;overscroll-behavior:contain;touch-action:pan-y;}
  #optionPanel :is(#activeLayersZone,#active-layers-list) {max-height:none!important;overflow:visible!important;}
  #optionPanel #activeLayersZone:not(:has(.cart-layer-card)) {display:none!important;}
  #optionPanel .mobile-active-collapsed #active-layers-list {display:block!important;}
  #optionPanel :is(.feature-panel-heading,#panelBottom) {flex:none;}
  #optionPanel #panelBottom {padding:4px 12px!important;}
  #optionPanel .feature-panel-tabs {padding:4px 12px;}
  #optionPanel .feature-panel-tab {min-height:44px!important;}
  #optionPanel .mobile-active-collapsed~#panelScrollContent {display:block;}
  #optionPanel #activeLayersZone>div:first-child {padding-block:3px!important;}
  body[data-app-route=layers] .cursor-status-bar {visibility:hidden!important;}
  #mobileAppShell .app-operation {left:80px!important;right:80px!important;bottom:calc(var(--app-safe-bottom) + 74px)!important;width:auto!important;}
  /* Tool pages share a half-height sheet; the main navigation stays in drawers. */
  body :is(#locatePanel.locate-panel,#sharePanel.share-panel,#layerInfoPanel.layer-info-panel,#elevationProfilePanel.elevation-panel,#savedViewsPanel.saved-views-panel) {
    position:fixed!important;inset:auto 0 0!important;margin:0!important;width:100%!important;max-width:none!important;
    height:var(--app-half-sheet-height)!important;max-height:var(--app-half-sheet-height)!important;
    box-sizing:border-box;transform:none!important;border-radius:22px 22px 0 0!important;overscroll-behavior:contain;
  }
  body :is(#locatePanel.locate-panel,#sharePanel.share-panel,#elevationProfilePanel.elevation-panel) {overflow-y:auto!important;}
  body #mapApplication #sharePanel.share-panel {inset:auto 0 0!important;width:var(--app-viewport-width,100vw)!important;max-width:none!important;}
  body #savedViewsPanel .saved-views-header {padding-block:6px;}
  body #savedViewsPanel .saved-views-capture {padding-block:4px;}
  body #savedViewsPanel.saved-views-panel {container:app-saved-views / size;}
  body #sharePanel>header {position:sticky;top:-16px;z-index:3;margin:-16px -16px 8px;padding:8px 16px;background:var(--app-raised);border-bottom:1px solid var(--app-line);}
  body #locatePanel:not([data-section=route])>header {position:sticky;top:-16px;z-index:3;margin:-16px -16px 8px;padding:8px 16px;background:var(--app-raised);border-bottom:1px solid var(--app-line);}
  body #timePeriodPanel {
    position:fixed;inset:auto!important;left:50%!important;transform:translateX(-50%);
    top:calc(var(--app-safe-top) + 64px)!important;bottom:auto!important;
    width:min(420px,calc(var(--app-viewport-width,100vw) - var(--app-safe-left) - var(--app-safe-right) - 24px))!important;
    height:auto!important;max-height:var(--app-half-sheet-height)!important;padding:0!important;
    display:grid;grid-template-columns:44px 42px minmax(0,1fr) 44px;align-items:center;overflow:hidden;
    border:1px solid var(--app-line);border-radius:18px;background:var(--app-raised);color:var(--app-ink);z-index:2200;
  }
  body #timePeriodPanel[hidden] {display:none!important;}
  body #timePeriodPanel[data-collapsed=true] {width:min(144px,calc(var(--app-viewport-width,100vw) - var(--app-safe-left) - var(--app-safe-right) - 24px))!important;grid-template-columns:44px minmax(0,1fr) 44px;}
  #timePeriodPanel .time-period-toolbar {display:contents;}
  #timePeriodPanel :is(.time-period-heading,.time-period-range-labels) {display:none;}
  #timePeriodPanel .time-period-toolbar button {appearance:none;width:44px;height:44px;min-height:44px;padding:8px;border:0;background:transparent;color:inherit;cursor:pointer;}
  #timePeriodPanel .time-period-grab {grid-column:1;grid-row:1;display:grid;place-items:center;min-width:0;touch-action:none;}
  #timePeriodPanel .time-period-grab>svg {width:18px;height:18px;flex:none;}
  #timePeriodPanel .time-period-caption {grid-column:2;grid-row:1;text-align:center;pointer-events:none;}
  #timePeriodPanel .time-period-caption strong {font:700 14px/17px var(--font-body);font-variant-numeric:tabular-nums;}
  #timePeriodPanel .time-period-toolbar svg {fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  #timePeriodPanel .time-period-close {grid-column:4;grid-row:1;border-left:1px solid var(--app-line)!important;}
  #timePeriodPanel[data-collapsed=true] .time-period-close {grid-column:3;}
  #timePeriodPanel .time-period-close svg {width:20px;height:20px;vertical-align:middle;}
  #timePeriodPanel:not([data-collapsed=true]) .time-period-chevron {transform:rotate(180deg);}
  #timePeriodPanel .time-period-slider {grid-column:3;grid-row:1;height:44px;min-width:0;padding:0 10px 0 6px;box-sizing:border-box;}
  #timePeriodPanel .time-period-track {flex-basis:44px;}
  #timePeriodPanel .time-period-stops {display:none;}
  #timePeriodPanel .time-period-slider__input {height:44px;min-height:44px;touch-action:pan-x;}
  body:is(.workspace-open,.mobile-search-open,.guru-routing,.street-view-docked,.dual-mode-active,.flight-sim-running,.jpg-framing) #timePeriodPanel,
  body[data-app-route]:not([data-app-route=map]) #timePeriodPanel {visibility:hidden!important;pointer-events:none;}
  body dialog.app-display-check {max-height:var(--app-half-sheet-height);}
  body dialog.app-display-check>header {position:sticky;top:-20px;z-index:2;margin:-20px -20px 12px;padding:10px 20px;background:var(--app-surface);}
  body .app-place-sheet {width:136px!important;max-width:calc(100vw - 24px);padding:1px!important;border-radius:14px;}
  body .app-place-sheet>div {gap:0;}
  body .app-place-sheet>div button {flex:0 0 44px;width:44px;min-width:44px!important;height:44px;min-height:44px!important;padding:8px!important;}
  body .app-place-sheet>div button svg {width:22px;height:22px;stroke-width:2;}
}

.time-period-toolbar {display:none;}
#timePeriodControls[hidden] {display:none!important;}

@container app-saved-views (max-height:220px) {
  .saved-views-header {padding-block:0!important;}
  .saved-views-header h2 {font-size:18px;}
  .saved-views-capture {padding-block:0!important;}
  .saved-views-capture .saved-views-primary {height:44px;min-height:44px;padding-block:8px;}
}
@container app-saved-views (max-height:132px) {
  .saved-views-capture {display:none!important;}
}
html[data-theme=dark]:is([data-app-layout=phone],[data-app-layout=tablet]) {
  --app-accent:#9bdae3;
  #mobileAppShell .app-primary-bank>.app-record-control:not([data-recording=active]) {color:#6dc0f6!important;}
  #mobileAppShell .app-primary-bank>button {text-shadow:0 1px 0 #17323c,1px 0 0 #17323c,-1px 0 0 #17323c,0 -1px 0 #17323c;}
  #mobileAppShell .app-primary-bank>button svg {filter:drop-shadow(1px 0 0 #17323c) drop-shadow(-1px 0 0 #17323c);}
  #mobileAppShell .app-map-logo img {filter:none;}
}
@media(prefers-reduced-motion:no-preference) {
  #mobileAppShell .app-menu-drawer:not([hidden]) {animation:app-drawer-enter .2s ease-out;}
  @keyframes app-drawer-enter {from {translate:100% 0;} to {translate:0 0;}}
}
@media(prefers-reduced-motion:reduce) {#mobileAppShell .app-location-symbol svg {transition:none;}}
@media(max-height:500px) {
  html:is([data-app-layout=phone],[data-app-layout=tablet]) {--app-primary-bottom:calc(var(--app-safe-bottom) + 52px);}
}
