/* Map "Layers" control: one compact, collapsible panel holding the Key,
 * Places (hotels, restaurants, bars...) and multi-resort Pass filters.
 * Shared by every page that shows the map. Uses the map page's own theme
 * variables (--bg, --line, --frost...) with fallbacks. */

.pz-ctl{
  position:absolute; top:12px; right:12px; z-index:1000;
  display:flex; align-items:flex-start; justify-content:flex-end; gap:6px;
  font-family:var(--body,'IBM Plex Sans',sans-serif);
}
.pz-ctl .map-fullscreen{ position:static; }
.pz-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; font-size:12.5px; font-weight:600; line-height:1.2;
  font-family:inherit; color:var(--grey-light,#C7CDD6);
  background:rgba(16,19,26,0.88); border:1px solid var(--line,#262B36);
  border-radius:5px; cursor:pointer; white-space:nowrap;
}
.pz-btn:hover,
.pz-btn[aria-expanded="true"]{ background:var(--bg-elevated,#171B24); color:var(--white,#F3F5F7); }
.pz-btn:focus-visible,
.pz-chip.is-kbd,   /* set by the script only when the chip was reached from the keyboard: after a mouse click the outline read as a second ring */
.pz-sec-head:focus-visible{ outline:2px solid var(--frost,#6FC6E8); outline-offset:1px; }
.pz-btn.is-active{ border-color:var(--frost,#6FC6E8); color:var(--white,#F3F5F7); }
.pz-btn svg{ width:14px; height:14px; flex:none; }
.pz-badge{
  min-width:17px; padding:0 5px; border-radius:9px; text-align:center;
  font-size:10.5px; line-height:17px; font-weight:700;
  color:var(--bg,#10131A); background:var(--frost,#6FC6E8);
}
.pz-badge[hidden]{ display:none; }

/* ---------- Panel ---------- */
.pz-panel{
  position:absolute; top:52px; right:12px; z-index:1100;
  width:290px; max-width:calc(100% - 24px);
  max-height:calc(var(--pz-map-h, 70vh) - 64px); overflow-y:auto;
  background:rgba(16,19,26,0.97); border:1px solid var(--line,#262B36);
  border-radius:8px; box-shadow:0 8px 28px rgba(0,0,0,0.5);
  color:var(--grey-light,#C7CDD6); font-size:12.5px; line-height:1.45;
  overscroll-behavior:contain;
}
/* Small map: the panel fills the whole map window and scrolls inside it. */
.pz-panel.is-full{
  top:0; right:0; bottom:0; left:0; width:auto; max-width:none; max-height:none;
  border:0; border-radius:0; box-shadow:none; background:rgba(16,19,26,0.99);
}
.pz-panel.is-full .pz-panel-head{ padding:6px 8px 6px 14px; }
.pz-panel.is-full .pz-close{ width:44px; height:44px; font-size:26px; color:var(--white,#F3F5F7); border:1px solid var(--line,#262B36); }
.pz-panel[hidden]{ display:none; }
.pz-panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 12px; border-bottom:1px solid var(--line,#262B36);
  position:sticky; top:0; background:rgba(16,19,26,0.99); z-index:1;
}
.pz-panel-title{
  margin:0; font-family:var(--display,'Big Shoulders Display',sans-serif);
  font-weight:700; font-size:16px; letter-spacing:0.02em; color:var(--white,#F3F5F7);
}
.pz-close{
  width:28px; height:28px; padding:0; font-size:18px; line-height:1;
  color:var(--grey-mid,#7C8494); background:none; border:0; border-radius:4px; cursor:pointer;
}
.pz-close:hover{ color:var(--white,#F3F5F7); background:var(--bg-elevated,#171B24); }

.pz-sec{ border-bottom:1px solid var(--line,#262B36); }
.pz-sec:last-of-type{ border-bottom:0; }
.pz-sec[hidden]{ display:none; }
.pz-sec-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; font:inherit; font-weight:600; font-size:12.5px;
  color:var(--white,#F3F5F7); background:none; border:0; cursor:pointer; text-align:left;
}
.pz-sec-head:hover{ background:rgba(255,255,255,0.03); }
.pz-sec-head .pz-sec-meta{ margin-left:auto; font-weight:500; font-size:11px; color:var(--grey-mid,#7C8494); }
.pz-sec-head::after{
  content:''; width:7px; height:7px; flex:none; margin-left:4px;
  border-right:2px solid var(--grey-mid,#7C8494); border-bottom:2px solid var(--grey-mid,#7C8494);
  transform:rotate(45deg) translateY(-2px); transition:transform 0.12s ease;
}
.pz-sec-head[aria-expanded="true"]::after{ transform:rotate(-135deg) translateY(-2px); }
.pz-sec-body{ padding:0 12px 12px; }
.pz-sec-body[hidden]{ display:none; }

/* Places chips */
.pz-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.pz-chip{
  display:inline-flex; align-items:center; gap:6px; min-height:28px;
  padding:4px 9px; font-size:12px; font-weight:500; color:var(--grey-light,#C7CDD6);
  border:1px solid var(--line,#262B36); border-radius:14px;
  background:rgba(16,19,26,0.85); cursor:pointer; user-select:none;
}
.pz-chip input{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.pz-chip .glyph{ width:13px; height:13px; display:inline-flex; flex:none; opacity:0.55; }
.pz-chip .glyph svg{ width:100%; height:100%; }
.pz-chip .n{ font-size:10.5px; color:var(--grey-mid,#7C8494); }
.pz-chip.is-on{ color:var(--white,#F3F5F7); border-color:var(--frost,#6FC6E8); background:rgba(111,198,232,0.12); }
.pz-chip.is-on .glyph{ opacity:1; }
.pz-chip.is-empty{ opacity:0.4; cursor:not-allowed; }
.pz-hint{ margin:0 0 8px; font-size:11.5px; color:var(--grey-mid,#7C8494); }
.pz-hint:last-child{ margin-bottom:0; }
.pz-areas{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pz-area-btn{
  padding:4px 9px; font:inherit; font-size:11.5px; color:var(--frost,#6FC6E8);
  background:none; border:1px solid var(--line,#262B36); border-radius:14px; cursor:pointer;
}
.pz-area-btn:hover{ border-color:var(--frost,#6FC6E8); }

/* Passes */
.pz-pass-opt{ display:flex; align-items:flex-start; gap:8px; padding:5px 0; cursor:pointer; }
.pz-pass-opt input{ accent-color:var(--frost,#6FC6E8); width:15px; height:15px; margin:2px 0 0; flex:none; }
.pz-pass-opt .name{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--white,#F3F5F7); }
.pz-pass-opt .days{ display:block; font-size:11px; color:var(--grey-mid,#7C8494); margin-top:1px; }
.pz-pass-pip{ width:9px; height:9px; border-radius:50%; display:inline-block; flex:none; }
.pz-pass-note{ margin:8px 0 0; font-size:10.5px; line-height:1.45; color:var(--grey-mid,#7C8494); }

/* Footer */
.pz-foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 12px; border-top:1px solid var(--line,#262B36); font-size:11.5px; color:var(--grey-mid,#7C8494);
  position:sticky; bottom:0; background:rgba(16,19,26,0.99); border-radius:0 0 8px 8px;
}
.pz-foot[hidden]{ display:none; }
.pz-clear{
  padding:4px 10px; font:inherit; font-size:12px; font-weight:600; color:var(--frost,#6FC6E8);
  background:none; border:1px solid var(--frost,#6FC6E8); border-radius:14px; cursor:pointer;
}
.pz-clear:hover{ background:rgba(111,198,232,0.12); }

/* ---------- Touch / small screens: larger targets ---------- */
@media (max-width:640px), (pointer:coarse){
  .pz-chip{ min-height:40px; padding:6px 13px; font-size:13.5px; border-radius:20px; }
  .pz-chip .glyph{ width:16px; height:16px; }
  .pz-sec-head{ min-height:46px; font-size:14px; }
  .pz-pass-opt{ padding:9px 0; }
  .pz-pass-opt input{ width:20px; height:20px; }
  .pz-pass-opt .name{ font-size:14px; }
  .pz-clear,.pz-area-btn{ min-height:38px; padding:6px 14px; font-size:13.5px; }
  .pz-btn{ min-height:38px; }
}

/* ---------- Small embeds (resort/area guide pages): cut-down ---------- */
.page.pz-embed .pz-ctl{ top:8px; right:8px; }
.page.pz-embed .pz-btn{ padding:5px 9px; font-size:11.5px; }
.page.pz-embed .pz-panel:not(.is-full){ width:250px; top:44px; right:8px; }
@media (min-width:641px) and (pointer:fine){
  .page.pz-embed .pz-chip{ min-height:24px; padding:2px 8px; font-size:11.5px; }
}

/* ---------- Places markers ---------- */
.pz-poi{ position:relative; }
.pz-poi svg{ display:block; width:22px; height:22px; filter:drop-shadow(0 0 1.5px rgba(11,22,32,0.9)) drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.pz-poi.is-approx svg{ opacity:0.72; }
.pz-poi.is-lift svg{ width:26px; height:26px; }
.pz-poi-lab{
  position:absolute; left:50%; bottom:100%; transform:translateX(-50%); margin-bottom:1px;
  padding:1px 5px; border-radius:3px; white-space:nowrap; pointer-events:none;
  background:rgba(16,19,26,0.85); color:var(--white,#F3F5F7);
  font-size:11px; font-weight:600; line-height:1.4;
}
.leaflet-marker-icon.pz-poi-icon:hover{ z-index:1000 !important; }
.pz-cluster-stack svg{ display:block; overflow:visible; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.55)); }
.leaflet-marker-icon.pz-poi-icon:hover .pz-cluster-stack svg{ filter:drop-shadow(0 1px 3px rgba(0,0,0,0.55)) brightness(1.12); }
.pz-poi-popup{ width:var(--pop-w); }
.pz-poi-popup h3{ font-family:var(--display,'Big Shoulders Display',sans-serif); font-weight:700; font-size:16px; color:var(--white,#F3F5F7); margin:0 0 4px; line-height:1.2; }
/* station popup: icon then name on one line */
.pz-poi-popup.pz-st-popup h3{ display:flex; align-items:center; gap:6px; }
.pz-poi-popup.pz-st-popup h3 svg{ flex:none; }
.pz-poi-popup .meta{ font-size:10.5px; font-weight:600; color:var(--ember,#E2A54D); text-transform:uppercase; letter-spacing:0.03em; margin:0 0 4px; }
.pz-poi-popup .line{ font-size:12px; color:var(--grey-light,#C7CDD6); margin:0 0 3px; }
.pz-poi-popup .warn{ font-size:11px; font-weight:600; color:var(--grey-mid,#7C8494); margin:0 0 5px; }
.pz-poi-popup .links{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.pz-poi-popup a.pz-poi-link{
  font-size:11px; font-weight:600; color:var(--bg,#10131A); background:var(--frost,#6FC6E8);
  text-decoration:none; padding:3px 7px; border-radius:4px; line-height:1.4;
}
.pz-poi-popup a.pz-poi-link:hover{ filter:brightness(1.08); }
.pz-poi-popup .pz-poi-note{ font-size:10.5px; color:var(--grey-mid,#8A93A3); margin:4px 0 0; }

/* Pass lines in resort popups (map.html builds the popup; the text comes from multi-resort-passes.js). */
.pz-popup .pz-pass-lines{ margin:6px 0 8px; }
.pz-popup .pz-pass-line{ display:flex; align-items:center; gap:6px; margin:0 0 3px; font-size:12px; color:var(--grey-light,#C7CDD6); }
.pz-popup .pz-pass-line span{ color:var(--grey-mid,#8A93A3); }
.pz-popup .pz-pass-linenote{ font-size:10.5px; line-height:1.4; color:var(--grey-mid,#8A93A3); margin:2px 0 0; }

/* Pass look while a pass is on: member tags and dots take the pass colour; other big-resort tags step out of the way. */
.leaflet-tooltip.pz-pass-tag{ background:var(--pz-pass-bg) !important; color:#fff !important; border-color:rgba(16,19,26,0.4) !important;
  text-shadow:0 0 2px #10131A, 0 0 2px #10131A, 0 0 3px #10131A; }   /* light text with a dark edge reads on dark, light and striped pass colours */
.leaflet-tooltip.pz-pass-tag.pz-pass-light{ color:#10131A !important; text-shadow:none; }   /* only when every colour in the tag is a light one (Ikon) */
.leaflet-tooltip.pz-pass-hide{ opacity:0 !important; pointer-events:none !important; }
.leaflet-marker-icon.pz-pass-hit.pz-resort-marker > div{ background:var(--pz-pass-bg) !important; border-color:#10131A !important; box-shadow:0 0 0 2px var(--pz-pass-ring) !important; }
.leaflet-marker-icon.pz-pass-hit .pz-minor-dot{ background:var(--pz-pass-bg) !important; width:9px !important; height:9px !important; border-color:#10131A !important; }

/* A resort tag that repeats its hub's name (Niseko United) is not drawn: the big hub label carries the name. */
.leaflet-tooltip.pz-dup-tag{ display:none !important; }

/* Resort popups: the photo at half size (110px wide instead of the full 220px popup width). */
.leaflet-popup .pz-popup img{ width:50%; }

/* Confidence bubble at the top of a place card: same look as the "Facts checked" bubble on the guide pages. */
.pz-poi-popup .pz-conf{
  display:inline-flex; align-items:center; gap:6px; margin:0 0 8px;
  font-size:11.5px; line-height:1.3; color:var(--grey-mid,#8A93A3);
  background:var(--bg-elevated,#171B24); border:1px solid var(--line,#262B36);
  border-radius:999px; padding:4px 10px 4px 8px;
}
.pz-poi-popup .pz-conf svg{ width:13px; height:13px; flex:none; color:var(--frost,#6FC6E8); }
.pz-poi-popup .pz-conf strong{ color:var(--grey-light,#C7CDD6); font-weight:600; }
.pz-poi-popup .pz-conf.is-none svg{ color:var(--grey-mid,#8A93A3); }
.pz-poi-popup .pz-conf-detail{ margin:-2px 0 8px; font-size:10.5px; line-height:1.4; color:var(--grey-mid,#8A93A3); }

/* Hub popups (Niseko United, Hakuba Valley, Shiga Kogen): members with their own guide are links; the guide link closes the popup. */
.pz-region-popup a.pz-hub-member{ color:var(--ember,#E2A54D); text-decoration:none; border-bottom:1px solid var(--ember-dim,#8A6B3A); }
.pz-region-popup a.pz-hub-member:hover{ border-color:var(--ember,#E2A54D); }
.pz-region-popup p.pz-hub-bases{ margin:8px 0 0; font-size:12.5px; line-height:1.5; color:var(--grey-light); }
.pz-region-popup a.pz-read,
.pz-region-popup .pz-current-page{ display:inline-block; margin-top:10px; }
.pz-region-popup ul.pz-cols{ columns:2; column-gap:14px; }
.pz-region-popup ul.pz-cols li{ break-inside:avoid; }
.pz-region-popup li.pz-hub-more{ list-style:none; margin-left:-1.1em; color:var(--grey-mid,#8A93A3); }

/* Hotel confidence rule: an unconfirmed hotel is a pale, slightly faded house; a closed one is greyed with a red line. Neither has a name tag. */
.pz-poi.is-unconfirmed svg{ opacity:0.78; }
.pz-poi.is-closed svg{ filter:grayscale(1) drop-shadow(0 0 1.5px rgba(11,22,32,0.9)); opacity:0.5; }
.pz-poi.is-closed::after{ content:''; position:absolute; left:-1px; top:10px; width:24px; height:2px; background:#C96B6B; transform:rotate(-45deg); }
.pz-poi-popup .pz-conf.is-closed svg{ color:#C96B6B; }

/* Homepage map: no Layers control (or open panel) at the top-level region picker; it appears once the map is explorable. */
.page.pz-picker:not(.pz-region-active) .pz-ctl,
.page.pz-picker:not(.pz-region-active) .pz-panel{ display:none; }

/* Info icon beside the "Checked" line: the sourcing sits behind it, not under the line. */
.pz-poi-popup .pz-conf .pz-info{ margin-left:auto; flex:none; width:16px; height:16px; padding:0; border-radius:50%; border:1px solid currentColor; background:transparent; color:var(--grey-mid,#8A93A3); font:italic 700 10px/14px Georgia,serif; cursor:pointer; opacity:.85; }
.pz-poi-popup .pz-conf .pz-info:hover, .pz-poi-popup .pz-conf .pz-info:focus-visible{ color:var(--frost,#6FC6E8); opacity:1; outline:none; }
/* laid over the popup, not added to it (see bus-stops.css): opening it must not move the i */
.pz-poi-popup .pz-info-panel{ position:absolute; z-index:5; left:15px; width:calc(100% - 30px); box-sizing:border-box; margin:0; background:var(--bg-elevated,#171B24); box-shadow:0 6px 16px rgba(0,0,0,.5); padding:6px 8px; border-left:2px solid var(--grey-mid,#8A93A3); font-size:10.5px; line-height:1.4; color:var(--grey-mid,#8A93A3); }
.pz-poi-popup .pz-info-panel[hidden]{ display:none; }
.pz-poi-popup .pz-info-panel p{ margin:0 0 4px; }
.pz-poi-popup .pz-info-panel p:last-child{ margin:0; }

.pz-zoom-line{ margin:0; padding:10px 12px 8px; }

/* Category sections: tick box, title, Refine */
.pz-sec-row{ display:flex; align-items:center; }
.pz-sec-row .pz-sec-head{ flex:1 1 auto; width:auto; min-width:0; }
.pz-master{ flex:none; width:16px; height:16px; margin:0 0 0 12px; accent-color:var(--frost,#6FC6E8); cursor:pointer; }
.pz-cat .pz-sec-head{ padding-left:9px; }
.pz-refine{ font-weight:500; font-size:11px; color:var(--grey-mid,#7C8494); }
.pz-sub{ margin-top:12px; padding-top:10px; border-top:1px solid var(--line,#262B36); }
.pz-sub[hidden]{ display:none; }
.pz-sub-title{ display:flex; margin:0 0 8px; font-weight:600; font-size:12px; }
.pz-sub-title .pz-sec-meta{ margin-left:auto; font-weight:500; font-size:11px; color:var(--grey-mid,#7C8494); }
.pz-chip .sw{ width:11px; height:11px; border-radius:2px; background:#B08FD6; display:inline-block; }

/* The villages strip: three villages at the top of the Layers panel */
.pz-villages{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:0 12px 10px; border-bottom:1px solid var(--line,#262B36); }
.pz-villages[hidden]{ display:none; }
.pz-vs-label{ flex:none; width:100%; font-size:11px; font-weight:600; color:var(--grey-mid,#7C8494); }