/* Glass is limited to controls, keeping map labels and reading surfaces crisp. */
.app-shell {
  --glass-surface: #f2f9f8;
  --glass-teal: #006b76;
  --glass-edge: rgba(45, 111, 119, .25);
  --glass-shadow: 0 4px 12px rgba(12, 62, 70, .10), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(31, 94, 101, .08);
}
.app-shell :is(.chips button, .saved-switch button, .detail-save, .save-spot, .login-trigger, .detail-close, .fit-map, .map-tools>button, .mobile-switch button, .cta.light) {
  background: linear-gradient(155deg, rgba(255,255,255,.72), rgba(255,255,255,0) 58%), var(--glass-surface);
  color: #124550;
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  transition: box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
.app-shell :is(.panel-add, .cta:not(.light), .card-bottom button, .profile, .chips button.active, .saved-switch button[aria-pressed=true], .detail-save[aria-pressed=true], .map-tools>button.active, .mobile-switch button.active) {
  background: linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,0) 58%), var(--glass-teal);
  color: #fff;
  border: 1px solid rgba(0, 73, 82, .5);
  box-shadow: 0 5px 14px rgba(0,87,99,.2), inset 0 1px 0 rgba(255,255,255,.48), inset 0 -1px 0 rgba(0,42,51,.18);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  transition: box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
.app-shell .panel-add { border-radius: 18px; }
.app-shell .save-spot[aria-pressed=true] { color: #ac3825; background-color: #fff0e9; }
.app-shell .maplibregl-ctrl-group {
  background: var(--glass-surface);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow)!important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.app-shell .maplibregl-ctrl-group button { background-color: transparent; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-shell { --glass-surface: rgba(242,250,248,.82); --glass-teal: rgba(0,100,112,.96); }
}
@media (hover:hover) {
  .app-shell :is(.chips button, .saved-switch button, .detail-save, .save-spot, .login-trigger, .detail-close, .fit-map, .map-tools>button, .mobile-switch button, .panel-add, .cta, .card-bottom button, .profile):not(:disabled):hover {
    filter: brightness(1.05);
    box-shadow: 0 6px 18px rgba(12,62,70,.18), inset 0 1px 0 rgba(255,255,255,.75);
  }
}
.app-shell :is(.chips button, .saved-switch button, .detail-save, .save-spot, .login-trigger, .detail-close, .fit-map, .map-tools>button, .mobile-switch button, .panel-add, .cta, .card-bottom button, .profile):focus-visible {
  outline: 3px solid #007380;
  outline-offset: 3px;
}
.app-shell :is(.chips button, .saved-switch button, .detail-save, .save-spot, .login-trigger, .detail-close, .fit-map, .map-tools>button, .mobile-switch button, .panel-add, .cta, .card-bottom button, .profile):not(:disabled):active { filter: brightness(.94); }
@media (prefers-reduced-motion:reduce) {
  .app-shell :is(button,.cta) { transition:none!important; }
}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  .app-shell { --glass-surface:#fff; --glass-teal:#005d68; --glass-edge:#557e84; }
  .app-shell :is(button,.cta,.maplibregl-ctrl-group) { background-image:none; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none!important; }
}
@media (forced-colors:active) {
  .app-shell :is(button,.cta,.maplibregl-ctrl-group) { -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none!important; }
}