/* Page styles for map.html: the design tokens, the page frame and top bar, the map container and its Leaflet
 * overrides, the legend, the footer, and the embed mode used when the map is shown inside the homepage.
 * Linked in the position the inline style block used to occupy, after map-accuracy.css and before map-village.css. */
  :root{
    --pop-w:220px;   /* the width every popup's content shares */
    --bg:#10131A; --bg-elevated:#171B24; --line:#262B36;
    --grey-mid:#7C8494; --grey-light:#C7CDD6; --white:#F3F5F7;
    --ember:#E2A54D; --ember-dim:#8A6B3A; --frost:#6FC6E8; --c-tripqa:#A08FD6;
    --display:'Big Shoulders Display',sans-serif; --body:'IBM Plex Sans',sans-serif;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; background:var(--bg); color:var(--grey-light); font-family:var(--body); -webkit-font-smoothing:antialiased; }
  a{ color:inherit; }
  .page{ max-width:900px; margin:0 auto; min-height:100vh; }

  /* ?embed=1 strips this page's own chrome so it reads cleanly
     inside a smaller iframe on the homepage - the map itself is untouched. */
  .page.pz-embed{ max-width:none; min-height:0; }
  .page.pz-embed .topbar,
  .page.pz-embed .intro,
  .page.pz-embed .legend,
  .page.pz-embed .footer{ display:none; }
  .page.pz-embed .map-wrap{ border:none; height:100vh; }
  /* Same rule, keyed off the <html>-level class set the instant <head>
     starts parsing (see the script right after <meta charset> above) -
     catches the legend/topbar/footer before first paint, rather than
     waiting for the .page.pz-embed version above, which only lands once
     the body exists and every blocking script ahead of it has loaded. */
  html.pz-embed-early .topbar,
  html.pz-embed-early .intro,
  html.pz-embed-early .legend,
  html.pz-embed-early .footer{ display:none; }
  /* The embedding host (nav-integrated-concept.html) has its own
     "Explore map" / "Close map" full-screen control now - this
     button's native browser Fullscreen API is a second, independent
     fullscreen system stacked on top of it. Entering the host's
     overlay already sets .pz-region-active (auto-enters a region),
     which is exactly what reveals this button, so the two were
     showing together: exiting one left the other still active,
     needing a second close. The host owns full-screen in embed mode. */
  .page.pz-embed .map-fullscreen{ display:none; }
  .page.pz-embed .map-add-business{ display:none; }
  .topbar{
    position:sticky; top:0; z-index:20;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; background:rgba(16,19,26,0.92);
    backdrop-filter:blur(6px); border-bottom:1px solid var(--line);
  }
  .wordmark{ font-family:var(--display); font-weight:700; font-size:43px; color:var(--white); text-decoration:none; display:flex; letter-spacing:-0.02em; opacity:0; transition:opacity 0.15s ease; }
  .fonts-loaded .wordmark{ opacity:1; }
  .wordmark .powder{ color: var(--white); }
  .wordmark .zone{ color: var(--frost); }

  .intro{ padding:20px 20px 0; }
  .article-meta{ display:flex; align-items:center; gap:8px; font-size:25px; color:var(--white); margin-bottom:10px; font-family:var(--display); font-weight:700; }
  .page-title{ font-family:var(--display); font-weight:800; font-size:28px; line-height:1.1; color:var(--white); margin:0 0 10px; }
  .page-sub{ font-size:14.5px; line-height:1.55; color:var(--grey-mid); margin:0 0 18px; max-width:60ch; }

  .legend{
    display:flex; flex-wrap:wrap; gap:14px 20px;
    padding:0 20px 16px; font-size:12.5px; color:var(--grey-light);
  }
  .legend span{ display:inline-flex; align-items:center; gap:7px; }
  .legend .dot-resort{ width:11px; height:11px; border-radius:50%; background:var(--frost); border:2px solid #0B3B4A; display:inline-block; }
  .legend .dot-hub{ width:12px; height:12px; border-radius:3px; background:var(--ember); display:inline-block; }
  .legend .swatch{ width:16px; height:11px; border-radius:2px; background:rgba(226,165,77,0.18); border:1px solid rgba(226,165,77,0.5); display:inline-block; }
  .legend .line-highway{ width:16px; height:0; border-top:2px solid #5A4A2E; display:inline-block; }
  .legend .line-mainroad{ width:16px; height:0; border-top:1px solid #3D3628; display:inline-block; }

  .map-wrap{
    position:relative; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    /* Column flex so the Appi POI toolbar (when visible) takes its own
       row and #map shrinks to fill what's left, instead of the toolbar
       floating over the map as an absolutely-positioned overlay that
       covers whatever markers happen to sit near the top-left corner. */
    display:flex; flex-direction:column;
    height:70vh; min-height:420px;
  }
  #map{
    width:100%;
    flex:1 1 auto; min-height:0;
    background:var(--bg-elevated);
    /* Leaflet's internal panes carry their own z-index (up to ~700 for
       popups), and #map has no z-index of its own to contain them in a
       local stacking context - without isolation those panes leak out and
       can render above sibling UI like the fullscreen button, swallowing
       its clicks. This boxes them in. */
    isolation:isolate;
  }
  .map-wrap:fullscreen,
  .map-wrap:-webkit-full-screen{ height:100vh; }
  /* iOS Safari has no Fullscreen API for anything but a <video> element -
     tapping the button there would silently do nothing. This class is the
     fallback: a fixed, full-viewport overlay that fakes fullscreen with
     plain CSS, used whenever the real API isn't available. */
  .map-wrap.pz-pseudo-fullscreen{
    position:fixed; inset:0; z-index:2000;
    border:none; background:var(--bg);
    /* inset:0 on a fixed element sizes it to the viewport by itself -
       height:auto lets that stretch apply instead of the fixed 70vh
       from the base .map-wrap rule above. */
    height:auto;
    /* A pinch that starts on a control (Layers, search, Exit) is not taken by
       the map, so the browser used to zoom the whole page instead, pushing the
       corner controls off screen. touch-action:none keeps page zoom off
       everything inside; the map still zooms itself through Leaflet. */
    touch-action:none;
  }
  .map-fullscreen{
    /* Visible on the standalone page at every stage, including the
       top-level region picker - fullscreen is still useful for seeing the
       whole-Japan overview bigger, not just once a region's picked. Only
       the embedded homepage iframe hides this (see .pz-embed below),
       since that host has its own fullscreen control. */
    display:flex;
    position:absolute; top:12px; right:12px; z-index:1000;
    align-items:center; gap:6px;
    padding:7px 12px; font-size:12.5px; font-weight:600;
    font-family:var(--body); color:var(--grey-light);
    background:rgba(16,19,26,0.85); border:1px solid var(--line);
    border-radius:5px; cursor:pointer;
  }
  .map-fullscreen:hover{ background:var(--bg-elevated); color:var(--white); }
  .map-add-business{
    display:flex;
    /* Leaflet's own attribution control (bottom-right, its default corner) sits in that same corner - a
       plain bottom:12px overlapped it by a few pixels. Cleared with room for the attribution's own height. */
    position:absolute; bottom:34px; right:12px; z-index:1000;
    align-items:center; gap:6px;
    padding:7px 12px; font-size:12.5px; font-weight:600;
    font-family:var(--body); color:var(--grey-light);
    background:rgba(16,19,26,0.85); border:1px solid var(--line);
    border-radius:5px; cursor:pointer; text-decoration:none;
  }
  .map-add-business:hover{ background:var(--bg-elevated); color:var(--white); }


  /* ---------- Leaflet overrides to fit the theme ---------- */
  .leaflet-container{ background:var(--bg); font-family:var(--body); }
  .leaflet-popup-content-wrapper{
    background:var(--bg-elevated);
    color:var(--grey-light);
    border:1px solid var(--line);
    border-radius:6px;
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
  }
  .leaflet-popup-tip{ background:var(--bg-elevated); border:1px solid var(--line); }
  .leaflet-popup-close-button{ color:var(--grey-mid) !important; }
  .leaflet-popup-close-button:hover{ color:var(--white) !important; }
  .pz-popup{ width:var(--pop-w); }
  /* Minor-resort popups hold a short name, a one-line description and a
     link, no image or blurb - narrower than the full resort popups but
     wide enough for that description line to wrap instead of forcing the
     popup to the width of the single longest resort name. */
  .pz-popup img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; display:block; margin:0 0 8px; }
  .pz-popup h3{ font-family:var(--display); font-weight:700; font-size:16px; color:var(--white); margin:0 0 4px; line-height:1.2; }
  .pz-popup p{ font-size:12px; line-height:1.45; color:var(--grey-light); margin:0 0 7px; }
  /* nearest station lines: our icon, then the name */
  .pz-popup p.pz-st{ display:flex; align-items:center; gap:6px; margin:0 0 4px; font-size:12px; }
  .pz-popup .pz-st-icon{ display:inline-flex; flex:none; width:16px; height:16px; }
  .pz-popup p.pz-st a{ color:var(--grey-light); text-decoration:none; border-bottom:1px solid var(--line); }
  .pz-popup p.pz-st a:hover{ color:var(--white); border-color:var(--ember); }
  /* popup with a picture: picture on the left, name, pass and stations to its right */
  .pz-popup .pz-pop-top{ display:flex; gap:10px; align-items:flex-start; margin:0 0 8px; }
  .pz-popup .pz-pop-top img{ width:106px; flex:none; margin:0; }
  .pz-popup .pz-pop-side{ min-width:0; flex:1; }
  .pz-popup .pz-pop-side h3{ margin:0 0 5px; }
  .pz-popup .pz-pop-side .pz-pass-lines{ margin:0 0 5px; }
  .pz-popup .pz-pop-side p.pz-area-eyebrow{ margin:0 0 2px; }
  .pz-popup p.pz-minor-desc{ color:var(--grey-mid); margin:0 0 8px; }
  .pz-popup p.pz-area-eyebrow{
    font-family:var(--display); font-weight:700; font-size:10.5px;
    letter-spacing:0.06em; text-transform:uppercase; margin:0 0 3px;
  }
  .pz-popup a.pz-read{
    display:inline-block; font-size:12.5px; font-weight:600; color:var(--ember);
    text-decoration:none; border-bottom:1px solid var(--ember-dim);
  }
  .pz-popup a.pz-read:hover{ border-color:var(--ember); }
  .pz-popup p.pz-current-page{
    display:inline-block; font-size:12.5px; font-weight:600; color:var(--grey-mid);
    margin:0;
  }
  .pz-hub-popup h3{ font-family:var(--display); font-weight:700; font-size:15px; color:var(--ember); margin:0 0 4px; }
  .pz-hub-popup p{ font-size:12.5px; line-height:1.5; color:var(--grey-light); margin:0; }
  .pz-region-popup ul{ margin:0; padding:0 0 0 16px; font-size:12.5px; line-height:1.6; color:var(--grey-light); }
  .pz-region-highlight{
    animation:pz-region-pulse 0.9s ease-in-out infinite;
    border-radius:50%;
    z-index:1000 !important;
  }
  @keyframes pz-region-pulse{
    0%, 100% { box-shadow:0 0 0 0 rgba(111,198,232,0.55); }
    50% { box-shadow:0 0 0 8px rgba(111,198,232,0); }
  }
  .leaflet-tooltip.pz-label{
    background:rgba(16,19,26,0.82);
    border:none;
    box-shadow:none;
    color:var(--white);
    font-size:11.5px;
    font-weight:600;
    padding:1px 6px;
    border-radius:3px;
    white-space:nowrap;
    /* Leaflet's own base CSS sets pointer-events:none on all tooltips,
       which silently blocks clicks (and hover, on non-permanent ones) -
       override so the name tags themselves are clickable/hoverable, not
       just the dot markers they're attached to. */
    pointer-events:auto;
  }
  .leaflet-tooltip.pz-label::before{ display:none; }
  .leaflet-tooltip.pz-label-hub{
    font-family:var(--display); font-weight:700; letter-spacing:0.04em;
    text-transform:uppercase; font-size:11.5px; padding:2px 7px;
    border:1px solid rgba(255,255,255,0.25);
    transition:font-size 0.12s ease, padding 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
  }
  .leaflet-tooltip.pz-label-hub.pz-hub-active{
    font-size:16px !important; padding:3px 9px !important;
    background:rgba(16,19,26,0.92) !important;
  }
  .leaflet-tooltip.pz-label-city{
    background:transparent; color:var(--grey-light); font-weight:600; padding:0;
    /* A transparent label with no shadow reads fine on the plain
       coastline but gets lost wherever a region's boundary line (or its
       fill) crosses behind it at the overview zoom - a solid text-shadow
       keeps it legible regardless of what's underneath, without needing
       a background chip that would compete with the resort/hub labels. */
    text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg), 0 1px 2px var(--bg), 0 -1px 2px var(--bg), 1px 0 2px var(--bg), -1px 0 2px var(--bg);
    /* Undo the general .pz-label pointer-events:auto above - city names
       are reference-only labels, never clickable, and shouldn't swap the
       cursor from the map's drag-hand to a plain pointer when hovered. */
    pointer-events:none;
  }
  .leaflet-tooltip.pz-label-region{
    font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:0.01em;
    color:var(--white); background:rgba(16,19,26,0.88); padding:3px 10px;
    border:1px solid var(--frost);
    z-index:900 !important;
  }
  /* No size change on hover (that reflow was the flicker source) and no
     per-resort color swap (read as random) - a solid, same-size fill
     instead, so the highlight is still obvious at a glance. */
  .leaflet-tooltip.pz-label.pz-resort-active{
    background:var(--frost) !important;
    color:#0B1620 !important;
  }
  /* Minor-resort and hub name tags: kept permanently in the DOM rather
     than opened/closed by Leaflet's own hover binding (which closes the
     tag the instant the mouse leaves the dot, before it can ever reach
     the tag itself to click it). Visibility is controlled directly via
     inline style in JS, not CSS - Leaflet sets its own inline opacity on
     tooltips for its fade-in, which would silently beat any opacity rule
     written here. This rule only sets the transition for that JS toggle. */
  .leaflet-tooltip.pz-label-minor,
  .leaflet-tooltip.pz-label-hub{ transition:opacity 0.1s ease; }
  /* The marker pop is driven by the .pz-hover class that assets/map-labels.js sets from the pointer's position, not by CSS :hover: a :hover rule
     that scales the marker changes what is under the pointer and made neighbouring markers flicker. */
  .leaflet-marker-icon.pz-resort-marker{ transition:transform 0.12s ease; }
  .leaflet-marker-icon.pz-resort-marker.pz-hover{ transform:scale(1.55); z-index:1000 !important; }
  .leaflet-marker-icon.pz-minor-marker.pz-hover{ z-index:1000 !important; }
  .pz-minor-dot{ transition:transform 0.12s ease; }
  .leaflet-marker-icon.pz-minor-marker.pz-hover .pz-minor-dot{ transform:scale(1.9); }
  .leaflet-control-attribution{ background:rgba(16,19,26,0.85) !important; color:var(--grey-mid) !important; }
  .leaflet-control-attribution a{ color:var(--grey-light) !important; }
  .leaflet-control-zoom a{
    background:var(--bg-elevated) !important; color:var(--grey-light) !important;
    border-color:var(--line) !important;
  }
  .leaflet-control-zoom a:hover{ background:var(--line) !important; color:var(--white) !important; }
  /* Zoom slider: sits between the + and - buttons. The thumb's position follows the zoom ladder (see map-zoom-slider.js). */
  .pz-zoom-track{
    position:relative; width:30px; height:120px; background:var(--bg-elevated); border-bottom:1px solid var(--line);
    cursor:pointer; touch-action:none; outline:none;
  }
  .pz-zoom-track::before{
    content:''; position:absolute; left:14px; top:8px; bottom:8px; width:2px; border-radius:1px; background:var(--line);
  }
  .pz-zoom-thumb{
    position:absolute; left:8px; width:14px; height:14px; margin-top:-7px; border-radius:50%;
    background:var(--frost); border:2px solid var(--bg-elevated); box-sizing:border-box;
  }
  .pz-zoom-track:hover .pz-zoom-thumb, .pz-zoom-track:focus .pz-zoom-thumb, .pz-zoom-track.pz-dragging .pz-zoom-thumb{ background:var(--white); }
  .pz-zoom-track:focus .pz-zoom-thumb{ box-shadow:0 0 0 2px var(--frost); }
  /* Host locks the top-level map on mobile (see the 'lock' message
     below) so a page-scroll gesture that starts on the map doesn't get
     captured as a map pan/zoom instead - tapping a region still works,
     since that's a click handler on the region layer, not a drag/zoom
     interaction. The zoom control still works even with those
     interactions disabled (it calls setZoom directly), so it's hidden
     too rather than left as a dead end. */
  .page.pz-locked .leaflet-control-zoom{ display:none; }

  .footer{
    border-top:1px solid var(--line);
    padding:24px 20px 32px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12.5px;
    color:var(--grey-mid);
  }
  .footer a{ color:var(--grey-light); text-decoration:none; margin-left:14px; }
  .footer a:hover{ color:var(--white); }

/* A "find a resort by..." landing page's ranked pins (assets/map-rank-badges.js) - everything else
   about a resort's marker (its own name tag, popup, dot for every OTHER resort) is completely
   untouched; only the specific ranked ones get this number instead of the plain dot. */
/* A rounded square, not a circle, in the site's own dark/white chrome colours rather than any of the
 * category dot colours - a cyan circle turning orange when focused read as the exact same shape and
 * colour as a resort dot and the "Stay" (hotel) places category, so a ranked result was reading as just
 * another kind of place marker rather than this page's own thing. */
.pz-rank-badge{width:22px;height:22px;border-radius:6px;background:#171B24;border:2px solid #F3F5F7;color:#F3F5F7;font:800 12px/16px 'IBM Plex Sans',sans-serif;text-align:center;box-sizing:border-box;cursor:pointer;transition:transform .15s ease}
.pz-rank-badge.on{background:#F3F5F7;border-color:#F3F5F7;color:#10131A;transform:scale(1.2)}