/* Last stylesheet: phone layout uses the actual Mini App viewport, not 100vh. */
:root {
  --kd-app-visible-height: 100dvh;
  --kd-app-stable-height: 100dvh;
  --kd-app-visible-width: 100vw;
  --kd-app-offset-top: 0px;
  --kd-app-offset-left: 0px;
  --kd-safe-top: max(env(safe-area-inset-top, 0px), calc(var(--kd-tg-safe-top, 0px) + var(--kd-tg-content-top, 0px)));
  --kd-safe-right: max(env(safe-area-inset-right, 0px), calc(var(--kd-tg-safe-right, 0px) + var(--kd-tg-content-right, 0px)));
  --kd-safe-bottom: max(env(safe-area-inset-bottom, 0px), calc(var(--kd-tg-safe-bottom, 0px) + var(--kd-tg-content-bottom, 0px)));
  --kd-safe-left: max(env(safe-area-inset-left, 0px), calc(var(--kd-tg-safe-left, 0px) + var(--kd-tg-content-left, 0px)));
  --kd-tabs-height: calc(64px + var(--kd-safe-bottom));
  --kd-tab-reserve: var(--kd-tabs-height);
  --kd-shell-surface: #fffffff2;
  --kd-shell-shadow: 0 4px 20px #15335b14;
}
html[data-theme="dark"] {
  --kd-shell-surface: #1c2b40f2;
  --kd-shell-shadow: 0 6px 25px #0003;
}
html.kd-mobile-shell {scroll-padding-top: calc(70px + var(--kd-safe-top)); scroll-padding-bottom: calc(var(--kd-tabs-height) + 20px);}
html.kd-mobile-shell body {min-height: var(--kd-app-visible-height);}
html.kd-mobile-shell .shell {max-width: none; min-height: var(--kd-app-visible-height);}
html.kd-mobile-shell .workspace {display: block; min-height: 0;}
html.kd-mobile-shell .sidebar {display: none;}
html.kd-mobile-shell .topbar {
  height: calc(64px + var(--kd-safe-top));
  padding: var(--kd-safe-top) calc(16px + var(--kd-safe-right)) 0 calc(16px + var(--kd-safe-left));
  gap: 10px;
  top: 0;
  border-bottom-color: var(--line);
}
html.kd-mobile-shell .brand {min-height: 44px; gap: 8px; letter-spacing: 0; flex-shrink: 0;}
html.kd-mobile-shell .brand-mark {width: 36px; height: 36px; flex-basis: 36px; border-radius: 12px;}
html.kd-mobile-shell .brand-copy {gap: 0; min-width: 0;}
html.kd-mobile-shell .brand-name {font-size: 17px; line-height: 1.08; letter-spacing: -.45px;}
html.kd-mobile-shell .brand-na {font-size: 8px; line-height: 1.15; letter-spacing: 1.15px; margin: 1px 0;}
html.kd-mobile-shell .brand-drive {font-size: 15px; line-height: 1.08; letter-spacing: -.3px; margin: 0;}
html.kd-mobile-shell .beta-badge, html.kd-mobile-shell .test-label {display: none;}
html.kd-mobile-shell .topbar-actions {gap: 7px; min-width: 0;}
html.kd-mobile-shell .theme-toggle, html.kd-mobile-shell .access-badge {
  width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; flex: 0 0 44px;
  border-radius: 15px; background: var(--kd-shell-surface); border-color: var(--line); box-shadow: var(--kd-shell-shadow);
}
html.kd-mobile-shell .access-badge::before {display: none;}
html.kd-mobile-shell .access-badge > span {display: none;}
html.kd-mobile-shell .access-badge svg {width: 20px; height: 20px;}
html.kd-mobile-shell main:not(.map-screen) {
  max-width: 760px; margin: 0 auto; width: 100%;
  padding: 24px calc(16px + var(--kd-safe-right)) calc(var(--kd-tabs-height) + 26px) calc(16px + var(--kd-safe-left));
  min-height: calc(var(--kd-app-visible-height) - 64px - var(--kd-safe-top));
}
html.kd-mobile-shell .page-heading {margin-bottom: 22px;}
html.kd-mobile-shell .page-heading h1 {font-size: clamp(27px, 7vw, 34px); line-height: 1.2; letter-spacing: -.85px;}
html.kd-mobile-shell .surface, html.kd-mobile-shell .access-card, html.kd-mobile-shell .news-card {border-radius: 22px;}
html.kd-mobile-shell .button {min-height: 48px; border-radius: 14px;}
html.kd-mobile-shell .field input, html.kd-mobile-shell .field textarea {font-size: 16px;}

/* Stable, thumb-sized tabs remain reachable even in the expanded map. */
html.kd-mobile-shell body .mobile-nav {
  display: flex !important; position: fixed !important;
  top: calc(var(--kd-app-offset-top) + var(--kd-app-visible-height) - var(--kd-tabs-height)) !important;
  bottom: auto !important; left: var(--kd-app-offset-left) !important; right: auto !important;
  width: var(--kd-app-visible-width) !important; max-width: none !important; min-height: var(--kd-tabs-height);
  padding: 6px calc(10px + var(--kd-safe-right)) calc(9px + var(--kd-safe-bottom)) calc(10px + var(--kd-safe-left)) !important;
  transform: none !important; margin: 0 !important; gap: 5px !important;
  border: 0; border-top: 1px solid var(--line); border-radius: 22px 22px 0 0;
  background: var(--kd-shell-surface); box-shadow: 0 -4px 25px #15335b0b;
  backdrop-filter: blur(22px) saturate(145%); z-index: 1100;
}
html.kd-mobile-shell body .mobile-nav button {
  width: 0; min-width: 0; flex: 1 1 0; min-height: 48px; padding: 4px 2px !important;
  font-size: 11px !important; font-weight: 600; gap: 3px; border-radius: 15px;
  transition: background-color 180ms ease, color 180ms ease, transform 160ms ease;
}
html.kd-mobile-shell body .mobile-nav button svg {width: 22px; height: 22px;}
html.kd-mobile-shell body .mobile-nav button.active {background: #e9f0ff; color: #235fd8;}
html.kd-mobile-shell body .mobile-nav button.active > span {color: #235fd8;}
html.kd-mobile-shell body .mobile-nav button:active {transform: scale(.96);}
html.kd-mobile-shell[data-theme="dark"] body .mobile-nav button.active {background: #314d72; color: #d4e5ff;}
html.kd-mobile-shell[data-theme="dark"] body .mobile-nav button.active > span {color: #c4dcff;}
html.kd-mobile-shell #toast {bottom: calc(var(--kd-tabs-height) + 12px); z-index: 1200;}

/* The map is the app canvas. The compact wordmark floats over it. */
html.kd-mobile-shell[data-kd-screen="map"] body {height: var(--kd-app-visible-height); overflow: hidden;}
html.kd-mobile-shell[data-kd-screen="map"] .shell {height: var(--kd-app-visible-height); min-height: 0;}
html.kd-mobile-shell[data-kd-screen="map"] .workspace {
  position: fixed; top: var(--kd-app-offset-top); left: var(--kd-app-offset-left);
  width: var(--kd-app-visible-width); height: var(--kd-app-visible-height); min-height: 0;
}
html.kd-mobile-shell[data-kd-screen="map"] .topbar {
  position: fixed; z-index: 1002; top: calc(var(--kd-app-offset-top) + var(--kd-safe-top) + 10px);
  left: calc(var(--kd-app-offset-left) + var(--kd-safe-left) + 12px); right: calc(var(--kd-safe-right) + 12px);
  width: auto; height: 52px; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
  backdrop-filter: none; pointer-events: none;
}
html.kd-mobile-shell[data-kd-screen="map"] .topbar > * {pointer-events: auto;}
html.kd-mobile-shell[data-kd-screen="map"] .brand {
  min-height: 52px; padding: 5px 10px 5px 6px; border: 1px solid #ffffffb0; border-radius: 18px;
  background: var(--kd-shell-surface); box-shadow: var(--kd-shell-shadow); backdrop-filter: blur(20px) saturate(130%);
}
html.kd-mobile-shell[data-theme="dark"][data-kd-screen="map"] .brand {border-color: #435c7c70;}
html.kd-mobile-shell main.map-screen {--kd-header-height: 0px; --kd-nav-height: 0px; padding: 0; margin: 0; width: 100%; height: 100%;}
html.kd-mobile-shell .map-screen .map-dashboard, html.kd-mobile-shell .map-screen .kd-map-workspace {
  height: 100%; min-height: 0; margin: 0; border-radius: 0; overflow: hidden;
}
html.kd-mobile-shell .map-screen .kd-map-stage, html.kd-mobile-shell .map-screen .kd-native-canvas {
  position: absolute; inset: 0; height: 100%; min-height: 0; border: 0; border-radius: 0;
}
html.kd-mobile-shell .map-screen .kd-map-top {
  top: calc(var(--kd-safe-top) + 74px); left: calc(var(--kd-safe-left) + 12px); right: calc(var(--kd-safe-right) + 12px);
  height: 54px; min-height: 54px; padding: 5px 7px; margin: 0; gap: 5px; flex-wrap: nowrap;
  border: 1px solid #ffffffb0; border-radius: 18px; background: var(--kd-shell-surface);
  box-shadow: var(--kd-shell-shadow); backdrop-filter: blur(20px) saturate(130%);
}
html.kd-mobile-shell .map-screen .kd-city-control {flex: 1 1 auto; min-width: 0;}
html.kd-mobile-shell .map-screen .kd-city-control select {
  max-width: 100%; width: 100%; min-width: 0; min-height: 44px; font-size: 16px; padding: 4px 22px 4px 4px; text-overflow: ellipsis;
}
html.kd-mobile-shell .map-screen .kd-map-styles {margin: 0; padding: 0; gap: 0; background: transparent; border: 0; box-shadow: none; flex: 0 0 auto;}
html.kd-mobile-shell .map-screen .kd-map-styles button {min-width: 44px; min-height: 44px; padding: 5px 7px; border-radius: 13px; font-size: 10px;}
html.kd-mobile-shell .map-screen .kd-source-status {
  top: calc(var(--kd-safe-top) + 138px); left: calc(var(--kd-safe-left) + 12px); min-height: 50px;
  max-width: calc(100% - 80px - var(--kd-safe-left) - var(--kd-safe-right)); padding: 3px 7px 3px 10px; gap: 7px;
  border-radius: 16px; background: var(--kd-shell-surface); backdrop-filter: blur(20px) saturate(130%);
}
html.kd-mobile-shell .map-screen .kd-source-status > div {min-width: 0;}
html.kd-mobile-shell .map-screen .kd-source-status strong {font-size: 12px;}
html.kd-mobile-shell .map-screen .kd-source-status div > span {font-size: 10px; line-height: 1.35;}
html.kd-mobile-shell .map-screen .kd-source-status > button {width: 44px; height: 44px; flex-shrink: 0;}
html.kd-mobile-shell .map-screen .kd-map-tools {top: calc(var(--kd-safe-top) + 138px); right: calc(var(--kd-safe-right) + 12px); gap: 7px;}
html.kd-mobile-shell .map-screen .kd-map-tools button {width: 44px; height: 44px; min-height: 44px; border-radius: 15px; background: var(--kd-shell-surface);}
html.kd-mobile-shell .map-screen .kd-map-tools button:first-child {margin-bottom: 6px;}
html.kd-mobile-shell .map-screen .kd-map-tip {top: calc(var(--kd-safe-top) + 202px); left: calc(var(--kd-safe-left) + 12px); width: auto; max-width: calc(100% - 80px - var(--kd-safe-left) - var(--kd-safe-right)); transform: none;}
html.kd-mobile-shell .map-screen .kd-map-workspace .kd-map-expand {
  top: auto; bottom: calc(var(--kd-tab-reserve) + 96px); right: calc(var(--kd-safe-right) + 12px);
  width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 15px; gap: 0; font-size: 22px;
}
html.kd-mobile-shell .map-screen .kd-map-expand > span:last-child {display: none;}
html.kd-mobile-shell .map-screen .kd-map-workspace .kd-route-panel {
  top: auto; left: calc(var(--kd-safe-left) + 12px); right: calc(var(--kd-safe-right) + 12px); bottom: calc(var(--kd-tab-reserve) + 12px);
  width: auto; margin: 0; min-height: 64px;
  max-height: max(64px, calc(var(--kd-app-visible-height) - var(--kd-tab-reserve) - var(--kd-safe-top) - 212px));
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  border: 1px solid #ffffffb0; border-radius: 24px; background: var(--kd-shell-surface); box-shadow: 0 -3px 28px #13335c20;
  transform: translate3d(0, var(--kd-sheet-drag, 0px), 0); transition: transform 220ms cubic-bezier(.2,.7,.25,1);
}
html.kd-mobile-shell .map-screen .kd-route-toggle {min-height: 64px; padding: 14px 15px 11px; border-radius: 24px 24px 0 0; background: var(--panel); touch-action: none;}
html.kd-mobile-shell .map-screen .kd-route-toggle::before {top: 6px; height: 4px; width: 30px; left: calc(50% - 15px); opacity: .7;}
html.kd-mobile-shell .map-screen .kd-route-toggle strong {font-size: 15px;}
html.kd-mobile-shell .map-screen .kd-route-toggle small {font-size: 11px;}
html.kd-mobile-shell .map-screen .kd-route-content {padding: 0 15px 16px;}
html.kd-mobile-shell .map-screen .kd-route-field {min-height: 68px; border-radius: 15px;}
html.kd-mobile-shell .map-screen .kd-route-field input {font-size: 16px; min-height: 34px;}
html.kd-mobile-shell .map-screen .kd-route-field > button, html.kd-mobile-shell .map-screen .kd-swap-button {width: 44px; height: 44px; min-height: 44px; min-width: 44px;}
html.kd-mobile-shell .map-screen .kd-route-primary, html.kd-mobile-shell .map-screen .kd-route-secondary {min-height: 48px; font-size: 13px; border-radius: 15px;}
html.kd-mobile-shell .map-screen .kd-geocode-results {max-height: none; overflow: visible;}
html.kd-mobile-shell .map-screen .kd-geocode-results button {min-height: 48px; font-size: 12px !important;}
html.kd-mobile-shell .map-screen .kd-map-bottom {display: none;}
html.kd-mobile-shell .map-screen .leaflet-control-attribution {padding: 3px 7px; font-size: 8px; margin-bottom: var(--kd-tab-reserve);}
html.kd-mobile-shell .map-screen .kd-routing-open .kd-map-expand {display: none;}

/* Every DPS sheet reserves the same real tab/safe-area space as routing. */
html.kd-mobile-shell .map-screen .kd-map-workspace .kd-community-panel {
  left:calc(var(--kd-safe-left) + 12px);right:calc(var(--kd-safe-right) + 12px);
  bottom:calc(var(--kd-tab-reserve) + 12px);width:auto;max-width:none;
  max-height:calc(var(--kd-app-visible-height) - var(--kd-tab-reserve) - var(--kd-safe-top) - 88px);
  padding:0 16px 16px;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:24px;background:var(--panel);
}
html.kd-mobile-shell .map-screen .kd-community-panel[hidden] {display:none!important;}
html.kd-mobile-shell .map-screen .kd-community-handle {flex:0 0 32px;}
html.kd-mobile-shell .map-screen [data-community-content] {
  min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}
html.kd-mobile-shell .map-screen .kd-community-add {
  left:calc(var(--kd-safe-left) + 12px);right:auto;bottom:calc(var(--kd-tab-reserve) + 92px);
  max-width:calc(100% - var(--kd-safe-left) - var(--kd-safe-right) - 84px);
}
html.kd-mobile-shell .map-screen .kd-community-panel button {min-height:48px;}
html.kd-mobile-shell .map-screen .kd-dps-popup .leaflet-popup-content {line-height:1.5;margin:18px 34px 18px 18px;overflow-wrap:anywhere;}
html.kd-mobile-shell .map-screen .kd-dps-popup .leaflet-popup-close-button {width:44px;height:44px;font-size:25px;line-height:42px;color:var(--ink);}
html.kd-mobile-shell .map-screen .kd-dps-popup .leaflet-popup-content-wrapper {border-radius:20px;background:var(--panel);color:var(--ink);}
.privacy-card,.login-approvals {margin-top:22px;}
.privacy-card p,.login-approvals p {line-height:1.6;}
.privacy-card details {margin-top:16px;}
.privacy-card summary {min-height:44px;display:flex;align-items:center;cursor:pointer;}
.login-approval {padding:16px 0;border-top:1px solid var(--line);}
.login-approval>strong {font-size:30px;letter-spacing:5px;}

/* In-app expansion keeps tabs available rather than creating a modal trap. */
html.kd-mobile-shell.kd-map-immersive-open {overscroll-behavior: auto;}
html.kd-mobile-shell[data-kd-screen="map"] body.kd-map-immersive-open {top: 0; height: var(--kd-app-visible-height);}
html.kd-mobile-shell .map-screen .kd-map-workspace.kd-map-immersive .kd-map-stage {
  top: var(--kd-app-offset-top); left: var(--kd-app-offset-left); right: auto; bottom: auto;
  width: var(--kd-app-visible-width); height: var(--kd-app-visible-height);
}
html.kd-mobile-shell .map-screen .kd-map-workspace.kd-map-immersive .kd-map-top {position: absolute; z-index: 1001;}
html.kd-mobile-shell .map-screen .kd-sheet-dragging .kd-route-panel {transition: none;}

/* A keyboard takes the visible viewport; only the route sheet remains over it. */
html.kd-mobile-shell[data-kd-keyboard-open="true"] {--kd-tab-reserve: 0px;}
html.kd-mobile-shell[data-kd-keyboard-open="true"] body .mobile-nav {display: none !important;}
html.kd-mobile-shell[data-kd-keyboard-open="true"][data-kd-screen="map"] .topbar,
html.kd-mobile-shell[data-kd-keyboard-open="true"] .map-screen .kd-map-top,
html.kd-mobile-shell[data-kd-keyboard-open="true"] .map-screen .kd-source-status,
html.kd-mobile-shell[data-kd-keyboard-open="true"] .map-screen .kd-map-tools,
html.kd-mobile-shell[data-kd-keyboard-open="true"] .map-screen .kd-map-expand {display: none;}
html.kd-mobile-shell[data-kd-keyboard-open="true"] .map-screen .kd-map-workspace .kd-route-panel,
html.kd-mobile-shell[data-kd-keyboard-open="true"] .map-screen .kd-map-workspace.kd-map-immersive .kd-route-panel {
  top: auto; bottom: 8px; max-height: calc(var(--kd-app-visible-height) - 16px); min-height: 64px;
}
html.kd-mobile-shell[data-kd-keyboard-open="true"] .map-screen .kd-route-toggle {min-height: 56px; padding-top: 12px;}
html.kd-mobile-shell[data-kd-keyboard-open="true"] #toast {bottom: 12px;}

@media (max-width: 360px) {
  html.kd-mobile-shell .map-screen .kd-map-top {padding-right: 4px; padding-left: 4px; gap: 1px;}
  html.kd-mobile-shell .map-screen .kd-city-control select {font-size: 15px; padding-left: 3px; padding-right: 20px;}
  html.kd-mobile-shell .map-screen .kd-map-styles button {padding-right: 5px; padding-left: 5px;}
  html.kd-mobile-shell .map-screen .kd-source-status div > span {font-size: 9px;}
  html.kd-mobile-shell .map-screen .kd-route-toggle {padding-right: 12px; padding-left: 12px;}
  html.kd-mobile-shell .map-screen .kd-route-toggle strong {font-size: 14px;}
}
@media (max-width: 900px) and (orientation: portrait) and (max-height: 700px) {
  html.kd-mobile-shell .map-screen .kd-routing-open .kd-source-status {display: none;}
}
@media (max-width: 900px) and (orientation: landscape) and (max-height: 540px) {
  html.kd-mobile-shell[data-kd-screen="map"] .topbar {top: calc(var(--kd-app-offset-top) + var(--kd-safe-top) + 8px);}
  html.kd-mobile-shell .map-screen .kd-map-top {top: calc(var(--kd-safe-top) + 8px); left: calc(var(--kd-safe-left) + 162px); right: calc(var(--kd-safe-right) + 116px);}
  html.kd-mobile-shell .map-screen .kd-source-status, html.kd-mobile-shell .map-screen .kd-map-tools {top: calc(var(--kd-safe-top) + 74px);}
  html.kd-mobile-shell .map-screen .kd-map-tip {top: calc(var(--kd-safe-top) + 130px);}
  html.kd-mobile-shell .map-screen .kd-map-workspace .kd-route-panel {
    right: auto; width: min(380px, calc(55% - var(--kd-safe-left) - 12px));
    max-height: max(64px, calc(var(--kd-app-visible-height) - var(--kd-tab-reserve) - var(--kd-safe-top) - 142px));
  }
  html.kd-mobile-shell .map-screen .kd-map-workspace.kd-routing-open .kd-route-panel {max-height: max(64px, calc(var(--kd-app-visible-height) - var(--kd-tab-reserve) - var(--kd-safe-top) - 82px));}
  html.kd-mobile-shell .map-screen .kd-routing-open .kd-source-status {display: none;}
  html.kd-mobile-shell .map-screen .kd-map-workspace .kd-map-expand {bottom: calc(var(--kd-tab-reserve) + 12px);}
  html.kd-mobile-shell[data-kd-keyboard-open="true"] .map-screen .kd-map-workspace .kd-route-panel,
  html.kd-mobile-shell[data-kd-keyboard-open="true"] .map-screen .kd-map-workspace.kd-map-immersive .kd-route-panel {
    left: calc(var(--kd-safe-left) + 12px); right: calc(var(--kd-safe-right) + 12px); width: auto;
    max-height: calc(var(--kd-app-visible-height) - 16px);
  }
}
@media (prefers-reduced-motion: reduce) {
  html.kd-mobile-shell body .mobile-nav button, html.kd-mobile-shell .map-screen .kd-route-panel {transition: none !important;}
  html.kd-mobile-shell .map-screen .kd-route-content, html.kd-mobile-shell .map-screen .kd-route-result {animation: none !important;}
}