/* Glass belongs to controls; the map and reading surfaces keep their clarity. */
:root {
  --kd-glass: rgba(250,253,255,.78);
  --kd-glass-heavy: rgba(250,253,255,.9);
  --kd-glass-edge: rgba(255,255,255,.8);
  --kd-glass-ink: #17324f;
  --kd-glass-secondary: #40536a;
  --kd-glass-shadow: 0 9px 28px rgba(19,43,70,.12), inset 0 1px 0 rgba(255,255,255,.75);
}
html[data-theme="dark"] {
  --kd-glass: rgba(24,40,61,.8);
  --kd-glass-heavy: rgba(24,40,61,.93);
  --kd-glass-edge: rgba(173,207,246,.25);
  --kd-glass-ink: #eff6ff;
  --kd-glass-secondary: #c0d0e3;
  --kd-glass-shadow: 0 9px 28px rgba(0,8,22,.28), inset 0 1px 0 rgba(209,230,255,.16);
}
:where(.kd-map-top,.kd-source-status,.kd-map-tools button,.kd-map-expand,.kd-route-panel) {
  background: var(--kd-glass-heavy);
  border: 1px solid var(--kd-glass-edge);
  box-shadow: var(--kd-glass-shadow);
  color: var(--kd-glass-ink);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .map-screen :is(.kd-map-top,.kd-source-status,.kd-map-tools button,.kd-map-expand,.kd-route-panel) {
    background: var(--kd-glass);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    backdrop-filter: blur(20px) saturate(145%);
  }
}
.map-screen .kd-route-toggle {background: transparent; color: var(--kd-glass-ink);}
.map-screen .kd-map-tools button,.map-screen .kd-map-expand,
html.kd-mobile-shell .topbar-actions > button {border-radius:50%;}
.map-screen .kd-map-top {border-radius:22px;}
.map-screen .kd-source-status {border-radius:20px;}
.map-screen .kd-route-toggle small,.map-screen .kd-source-status div>span {color: var(--kd-glass-secondary);}
.map-screen .kd-route-icon {
  background: linear-gradient(145deg,rgba(255,255,255,.66),rgba(154,192,247,.21));
  border: 1px solid rgba(127,170,235,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.map-screen :is(.kd-map-tools,.kd-route-icon,.kd-map-expand) svg {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.4));
}
html[data-theme="dark"] .map-screen :is(.kd-map-tools,.kd-route-icon,.kd-map-expand) svg {filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));}
html[data-theme="dark"] .map-screen .kd-route-icon {background: linear-gradient(145deg,rgba(164,205,255,.21),rgba(93,143,215,.08)); color:#c5ddff;}
.map-screen .kd-city-control select {color:var(--kd-glass-ink);}
.map-screen .kd-city-control option {color:var(--text);background:var(--panel);}
.map-screen .kd-map-styles {background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;}
.map-screen .kd-map-styles button {color:var(--kd-glass-secondary);}
.map-screen .kd-map-styles button.is-selected {background:rgba(40,107,220,.12);color:#164d9a;}
html[data-theme="dark"] .map-screen .kd-map-styles button.is-selected {background:rgba(146,188,249,.2);color:#d9e9ff;}
html.kd-mobile-shell {--kd-tabs-height:calc(76px + var(--kd-safe-bottom));}
html.kd-mobile-shell[data-kd-screen="map"] .brand,
html.kd-mobile-shell .topbar-actions > button {
  background:var(--kd-glass-heavy);border:1px solid var(--kd-glass-edge);box-shadow:var(--kd-glass-shadow);
}
html.kd-mobile-shell .topbar-actions > button {color:var(--kd-glass-ink);}
html.kd-mobile-shell .map-screen :is(.kd-map-top,.kd-source-status,.kd-map-tools button,.kd-map-expand,.kd-route-panel) {
  background:var(--kd-glass-heavy);border:1px solid var(--kd-glass-edge);box-shadow:var(--kd-glass-shadow);color:var(--kd-glass-ink);
}
html.kd-mobile-shell .map-screen .kd-map-top {border-radius:22px;}
html.kd-mobile-shell .map-screen .kd-map-tools button,
html.kd-mobile-shell .map-screen .kd-map-workspace .kd-map-expand {border-radius:50%;}
html.kd-mobile-shell body .mobile-nav {
  top:calc(var(--kd-app-offset-top) + var(--kd-app-visible-height) - var(--kd-safe-bottom) - 76px) !important;
  left:calc(var(--kd-app-offset-left) + var(--kd-safe-left) + 12px) !important;
  right:auto !important;width:calc(var(--kd-app-visible-width) - var(--kd-safe-left) - var(--kd-safe-right) - 24px) !important;
  bottom:auto !important;height:64px;min-height:64px;
  padding:7px 8px !important;border:1px solid var(--kd-glass-edge);border-radius:26px;
  background:var(--kd-glass-heavy);box-shadow:var(--kd-glass-shadow);
}
html.kd-mobile-shell body .mobile-nav button {color:var(--kd-glass-secondary);border-radius:20px;}
html.kd-mobile-shell body .mobile-nav button.active {background:rgba(32,98,219,.12);color:#164d9a;}
html.kd-mobile-shell body .mobile-nav button.active > span {color:#164d9a;}
html.kd-mobile-shell[data-theme="dark"] body .mobile-nav button.active {background:rgba(144,190,255,.2);color:#dceaff;}
html.kd-mobile-shell[data-theme="dark"] body .mobile-nav button.active > span {color:#dceaff;}
html.kd-mobile-shell .map-screen .kd-route-toggle {background:transparent;}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.kd-mobile-shell[data-kd-screen="map"] .brand,
  html.kd-mobile-shell .topbar-actions > button,
  html.kd-mobile-shell body .mobile-nav,
  html.kd-mobile-shell .map-screen :is(.kd-map-top,.kd-source-status,.kd-map-tools button,.kd-map-expand,.kd-route-panel) {
    background:var(--kd-glass);-webkit-backdrop-filter:blur(20px) saturate(145%);backdrop-filter:blur(20px) saturate(145%);
  }
}
/* Keyboard and full map continue to use the existing viewport/gesture logic. */
html.kd-mobile-shell[data-kd-keyboard-open="true"] body .mobile-nav {visibility:hidden;pointer-events:none;}
:where(.kd-map-tools button,.kd-map-expand,.kd-map-styles button,.theme-toggle,.access-button) {transition:background-color 180ms ease,box-shadow 180ms ease,transform 160ms ease;}
:where(.kd-map-tools button,.kd-map-expand,.theme-toggle,.access-button):active {transform:scale(.96);}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  :root,html[data-theme="dark"] {--kd-glass:var(--panel);--kd-glass-heavy:var(--panel);--kd-glass-edge:var(--line);}
  .map-screen :is(.kd-map-top,.kd-source-status,.kd-map-tools button,.kd-map-expand,.kd-route-panel),
  html.kd-mobile-shell[data-kd-screen="map"] .brand,
  html.kd-mobile-shell .topbar-actions > button,
  html.kd-mobile-shell body .mobile-nav {backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
}
@media(prefers-reduced-motion:reduce) {
  :where(.kd-map-tools button,.kd-map-expand,.kd-map-styles button,.theme-toggle,.access-button) {transition:none!important;}
}