/* Lightly frosted optical glass. The map supplies refraction behind the UI;
   restrained blur softens busy detail while keeping the map visible. */
@media(forced-colors:none){
 @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{
   --liquid-tint:transparent;--liquid-chrome:transparent;
   --liquid-label:transparent;--liquid-sticky:transparent;
   --liquid-control:rgba(28,28,28,.86);--liquid-row:rgba(20,20,20,.16);
   --liquid-glint:.11;--liquid-echo:.075;--liquid-shade:rgba(0,0,0,.24);
   --liquid-top:rgba(255,255,255,.4);--liquid-bottom:rgba(0,0,0,.2);
   --liquid-text-shadow:none;
   --liquid-glyph-shadow:none;
  }
  :root[data-theme=light]{
   --liquid-tint:transparent;--liquid-chrome:transparent;
   --liquid-label:transparent;--liquid-sticky:transparent;
   --liquid-control:rgba(250,250,250,.88);--liquid-row:rgba(255,255,255,.18);
   --liquid-glint:.16;--liquid-echo:.11;--liquid-shade:rgba(0,0,0,.14);
   --liquid-top:rgba(255,255,255,.65);--liquid-bottom:rgba(0,0,0,.12);
   --liquid-text-shadow:none;
   --liquid-glyph-shadow:none;
  }

  /* Local coordinates stop a parent reflection from moving nested controls. */
  :root:is([data-theme],:not([data-theme])) :is(
  .property-panel,.destination-card,
  .map-style-switch,.category-filters button,.map-controls>button,.zoom-controls,
  .property-panel .nearby-item,.property-panel .booking-button,.destination-actions a,
  body:not(.is-detail) .overview-map-note,.overview-map-note,.gallery-dialog,
  .atlas-pin__label,.atlas-pin--service .atlas-pin__label,.map-loading,.map-status,
  .property-panel .detail-topbar,.destination-heading,.destination-card .destination-actions,
  .property-panel .gallery-navigation button,.property-panel .gallery-navigation>span,
  .property-panel .gallery-autoplay,.property-panel .expand-photo,.destination-photos button>span,
  .maplibregl-ctrl-attrib){
   --liquid-x:50%;--liquid-y:45%;
   --liquid-surface:
    radial-gradient(ellipse 90% 75% at var(--liquid-x) var(--liquid-y),
     rgba(255,255,255,var(--liquid-glint)),rgba(255,255,255,0) 73%);
   background:var(--liquid-surface),var(--liquid-chrome);
   -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  }

  /* A little frost softens busy map detail without a broad milky gradient. */
  :root:is([data-theme],:not([data-theme])) :is(
  .workspace.detail-mode .property-panel,.property-panel,.destination-card){
   background:var(--liquid-surface),var(--liquid-tint);
   -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
   box-shadow:0 22px 58px -18px var(--liquid-shade),
    inset 0 1px 1px rgba(255,255,255,.42),
    inset 1px 0 2px rgba(255,255,255,.14),
    inset 0 -1px 1px rgba(255,255,255,.24),
    inset 0 0 16px rgba(255,255,255,.035);
  }
  :root:is([data-theme],:not([data-theme])) :is(
  .map-style-switch,.category-filters button,.map-controls>button,.zoom-controls,
  body:not(.is-detail) .overview-map-note,.overview-map-note,.map-loading,.map-status){
   box-shadow:0 10px 25px -12px var(--liquid-shade),
    inset 0 1px 1px rgba(255,255,255,.36),
    inset 0 -1px 1px rgba(255,255,255,.2);
  }
  :root:is([data-theme],:not([data-theme])) :is(
  .property-panel .nearby-item,.property-panel .booking-button,.destination-actions a){
   background-color:var(--liquid-row);
   box-shadow:inset 3px 5px 12px -9px var(--liquid-top),0 5px 12px -12px var(--liquid-shade);
  }

  /* Protect the glyphs instead of veiling the whole clear panel. */
  :root:is([data-theme],:not([data-theme])) .property-panel :is(
  h1,.section-title h2,.detail-series,.property-heading>.eyebrow,.property-facts,
  .property-description,.amenities span,.booking-note,.section-title .eyebrow,
  .guide-intro,.nearby-item strong,.nearby-item small,.route-disclosure),
  :root:is([data-theme],:not([data-theme])) .destination-card :is(
  h2,.route-summary,.route-estimate,p,.destination-location-note,.destination-photo-caption,.destination-source){
   text-shadow:none;
  }
  /* Small control glyphs need local contrast against pale street-map detail. */
  :root:is([data-theme],:not([data-theme])) :is(
  .map-style-switch button,.category-filters button,.map-controls button){text-shadow:none}
  :root:is([data-theme],:not([data-theme])) :is(
  .map-style-switch .icon,.category-filters .icon,.map-controls .icon){filter:var(--liquid-glyph-shadow)}
  :root[data-theme=light] .category-filters button[aria-pressed=true]{
   color:var(--theme-ink);text-shadow:none;
  }
  :root[data-theme=light] .category-filters button[aria-pressed=true] .icon{
   filter:var(--liquid-glyph-shadow);
  }
  :root:is([data-theme],:not([data-theme])) :is(
  .property-panel .detail-topbar,.destination-heading,.destination-card .destination-actions){
   background:var(--liquid-surface),var(--liquid-sticky);box-shadow:none;
  }
  /* Structural scroll regions keep body copy out of these clear control bars. */
  :root:is([data-theme],:not([data-theme])) :is(.property-panel .detail-topbar,.destination-heading){
   -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  }
  @media(max-width:760px){
   :root:is([data-theme],:not([data-theme])) .destination-card .destination-actions{
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
   }
  }
  :root:is([data-theme],:not([data-theme])) :is(
  .property-panel .detail-topbar .text-button,.property-panel .detail-topbar .round-button,
  .property-panel .detail-topbar .sheet-toggle,.property-panel .detail-topbar .detail-series,
  .destination-heading>.round-button,.destination-heading .eyebrow,.destination-heading .service-icon,
  .destination-card .destination-actions>a){
   background-color:var(--liquid-control);border-radius:18px;text-shadow:none;
  }

  /* Clear labels inherit their surroundings; photographic controls keep local contrast. */
  :root:is([data-theme],:not([data-theme])) :is(
  .atlas-pin__label,.atlas-pin--service .atlas-pin__label,
  .property-panel .gallery-navigation button,.property-panel .gallery-navigation>span,
  .property-panel .gallery-autoplay,.property-panel .expand-photo,.destination-photos button>span){
   --liquid-glint:.06;--liquid-echo:.035;background-color:var(--liquid-label);
  }
  :root:is([data-theme],:not([data-theme])) :is(.atlas-pin__label,.atlas-pin--service .atlas-pin__label){
   text-shadow:none;
  }
  :root:is([data-theme],:not([data-theme])) :is(
  .property-panel .gallery-navigation button,.property-panel .gallery-navigation>span,
  .property-panel .gallery-autoplay,.property-panel .expand-photo,.destination-photos button>span){
   background-color:rgba(0,0,0,.32);color:#fff;
  }
  :root:is([data-theme],:not([data-theme])) .map-style-switch button[aria-pressed=true]{
   background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.16),transparent 85%);
  }
  :root:is([data-theme],:not([data-theme])) .maplibregl-ctrl-attrib{
   background:var(--liquid-surface),var(--liquid-label)!important;
  }
  :root:is([data-theme],:not([data-theme])) :is(
  .category-filters button[aria-pressed=true],.category-filters button[aria-pressed=true]:hover){
   background:var(--liquid-surface),transparent;font-weight:700;
   box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -1px 1px rgba(255,255,255,.22);
  }
  :root:is([data-theme],:not([data-theme])) :is(
  .property-panel .nearby-item.selected,.property-panel .nearby-item:hover,
  .property-panel .booking-button:hover,.destination-actions a:hover){background-color:var(--liquid-chrome)}

  /* Floating map glyphs stay readable over both dark water and pale land. */
  :root[data-theme=light] :is(.map-style-switch button,.map-controls button){
   color:#fff;text-shadow:none;
  }
  :root[data-theme=light] :is(.map-style-switch .icon,.map-controls .icon){
   filter:none;
  }
  :root[data-theme=light] :is(#panel .detail-topbar .icon,#destination-card .destination-heading .icon){
   filter:var(--liquid-glyph-shadow);
  }

  /* The media viewer keeps a quieter stable surround, never a photo filter. */
  :root:is([data-theme],:not([data-theme])) #gallery-dialog{background-color:rgba(24,24,24,.82)}
  :root[data-theme=light] #gallery-dialog{background-color:rgba(250,250,250,.9)}
 }
}

/* The expanded phone sheet is a reading view. Keep geographic imagery behind
   its clear glass, while the map's UI returns when Show map is pressed. */
@media(max-width:760px){
 .mobile-sheet-expanded:not(.has-destination) :is(.atlas-pin,.map-controls,.category-filters){visibility:hidden;pointer-events:none}
 .mobile-sheet-expanded:not(.has-destination) .maplibregl-ctrl-bottom-right{
  top:80px;bottom:auto!important;right:12px;max-width:calc(100vw - 24px);
 }
 .mobile-sheet-expanded:not(.has-destination) .maplibregl-ctrl-attrib{max-width:100%;white-space:normal}
}
@media(forced-colors:none){
 :root:not([data-theme=light]) :is(.property-panel h1,.property-panel .section-title h2,.destination-card h2){text-shadow:none}
}

/* Headers and action controls stay outside the actual scrollable content. */
.workspace.detail-mode .property-panel{overflow:hidden}
#panel-content{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
.property-panel .detail-topbar{position:relative;top:auto;flex:0 0 auto}
.property-scroll-content{order:1;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
.property-scroll-content>*:not(.property-body),.property-scroll-content>.property-body>*{flex-shrink:0}
.property-scroll-content::-webkit-scrollbar,.destination-scroll-content::-webkit-scrollbar{display:none;width:0;height:0}
.property-scroll-content:focus-visible,.destination-scroll-content:focus-visible{outline:2px solid currentColor;outline-offset:-3px}
.destination-card{display:flex;flex-direction:column;overflow:hidden}
.destination-card .destination-heading{position:relative;top:auto;flex:0 0 auto}
.destination-scroll-content{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
.destination-scroll-content>p{font-size:12px;line-height:1.7}
.destination-card .destination-actions{position:relative;bottom:auto;flex:0 0 auto;margin:0;padding:8px 0 0}
.destination-card .destination-source{flex:0 0 auto}
@media(max-width:760px){
 .destination-scroll-content>p{font-size:13px}
}
/* The fixed action row needs no separate plate beneath its rounded buttons. */
@media(forced-colors:none){
 :root:is([data-theme],:not([data-theme])) #destination-card .destination-actions{
  background:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
 }
}

/* Restrained corner hierarchy: large windows, compact controls, circular icons. */
:root #workspace.detail-mode #panel{border-radius:20px}
:root #destination-card,:root #gallery-dialog{border-radius:20px}
:root #panel .detail-topbar,:root #destination-card .destination-heading{border-radius:0}
:root #panel .gallery,:root #destination-card .destination-photos,
:root #destination-card .destination-photos button{border-radius:12px}
:root #panel .photo-thumb{border-radius:5px}
:root #panel :is(.nearby-item,.booking-button),
:root #destination-card .destination-actions>a{border-radius:10px}
:root .map-style-switch{border-radius:14px}
:root .map-style-switch button{border-radius:6px}
:root .category-filters button,:root .atlas-pin__label,
:root .atlas-pin--service .atlas-pin__label{border-radius:10px}
:root .map-controls .zoom-controls{border-radius:10px}
:root .map-controls>button{border-radius:50%}
:root #panel :is(.round-button,.gallery-navigation button,.gallery-autoplay,.expand-photo),
:root #destination-card .destination-heading>.round-button{border-radius:50%}
:root #panel .detail-topbar :is(.text-button,.sheet-toggle){border-radius:7px}
:root #panel .detail-topbar :is(.text-button,.detail-series){background:transparent}
:root #panel .detail-topbar .detail-series{border-radius:0}
:root .maplibregl-ctrl-attrib{border-radius:6px!important}
@media(max-width:760px){
 :root #workspace.detail-mode #panel{border-radius:22px 22px 0 0}
}

/* Each content window is one continuous sheet. Nested content never re-glazes it. */
@media(forced-colors:none){
 :root:is([data-theme],:not([data-theme])) :is(
 #panel .detail-topbar,#panel .property-scroll-content,#panel .property-body,
 #panel .detail-topbar .text-button,#panel .detail-topbar .round-button,
 #panel .detail-topbar .sheet-toggle,#panel .detail-topbar .detail-series,
 #panel .property-facts span,#panel .nearby-item,#panel .service-icon,
 #destination-card .destination-heading,#destination-card .destination-scroll-content,
 #destination-card .destination-heading .round-button,#destination-card .destination-heading .eyebrow,
 #destination-card .destination-heading .service-icon,#destination-card .destination-actions){
  background:none;box-shadow:none;border-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
 }
 :root:is([data-theme],:not([data-theme])) :is(
 #panel .booking-button,#destination-card .destination-actions>a){
  background:rgba(255,255,255,.10);box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
 }
 :root[data-theme=light] :is(#panel .booking-button,#destination-card .destination-actions>a){background:rgba(0,0,0,.07)}
 :root:is([data-theme],:not([data-theme])) :is(
 #panel .detail-topbar button:hover,#panel .nearby-item:hover,#panel .nearby-item.selected,
 #destination-card .destination-heading button:hover){background:rgba(255,255,255,.08)}
 :root[data-theme=light] :is(
 #panel .detail-topbar button:hover,#panel .nearby-item:hover,#panel .nearby-item.selected,
 #destination-card .destination-heading button:hover){background:rgba(0,0,0,.06)}
 :root #panel .local-guide{border-top:0}
}