/* ============================================================
   NorthWest Wa — shared map style (2026-10-15)
   Soft cream fills, clear borders, friendly hover.
   Accent colour ONLY via body.theme-jp (green) or body.theme-btc
   (Bitcoin orange #F7931A). No black/dark region fills.
   ============================================================ */

:root{
  --map-cream:#FFF8F0;
  --map-cream-deep:#FFF4E0;
  --map-box-bg:#FFFBF5;
  --map-ink:#3a342c;
  /* Japan / onsen / food (green) */
  --map-jp-fill:#E8F2EB;
  --map-jp-has:#B7D4C0;
  --map-jp-hover:#2f5d46;
  --map-jp-stroke:#8FB89A;
  --map-jp-stroke-strong:#5f8f6f;
  /* Bitcoin (orange) */
  --map-btc-fill:#FFF4E0;
  --map-btc-has:#FFD9A8;
  --map-btc-hover:#F7931A;
  --map-btc-stroke:#E8B070;
  --map-btc-stroke-strong:#C96E0A;
}

/* ----- Shared chrome (SVG choropleth + Leaflet shell) ----- */
.map-wrap{margin-top:24px}
.map-hint{font-family:Helvetica,Arial,sans-serif;font-size:.9rem;color:#555;margin:.4em 0 .8em}
.map-hint a{color:var(--g)}
.map-box{
  position:relative;
  background:var(--map-box-bg);
  border:1px solid #e8d9c4;
  border-radius:10px;
  padding:10px;
  max-width:760px;
  margin:auto;
}
.map-label{
  position:absolute;top:10px;left:12px;z-index:2;
  background:#fff;
  border:1px solid #e8d9c4;
  border-left:4px solid var(--g);
  border-radius:4px;
  padding:4px 10px;
  font-family:Helvetica,Arial,sans-serif;
  font-size:.95rem;
  color:var(--g);
  pointer-events:none;
}
.map-legend{
  display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;
  font-family:Helvetica,Arial,sans-serif;font-size:.82rem;color:#555;
  margin:10px auto 0;max-width:760px;padding:0 4px;
}
.map-legend span{display:inline-flex;align-items:center;gap:6px}
.map-swatch{
  display:inline-block;width:18px;height:14px;border-radius:3px;
  border:1.5px solid currentColor;flex:none;
}
.jp-map,.ca-map{width:100%;height:auto;display:block}

/* ----- Japan choropleth (green accent) ----- */
.jp-map .prefecture,
.jp-map .prefecture path{
  fill:var(--map-jp-fill);
  stroke:var(--map-jp-stroke);
  stroke-width:1.2;
  transition:fill .18s ease,stroke .18s ease;
}
.jp-map .pref-link.has .prefecture,
.jp-map .pref-link.has .prefecture path{fill:var(--map-jp-has);stroke:var(--map-jp-stroke-strong)}
.jp-map .pref-link:hover .prefecture,
.jp-map .pref-link:focus .prefecture,
.jp-map .pref-link:hover .prefecture path,
.jp-map .pref-link:focus .prefecture path{
  fill:var(--map-jp-hover);stroke:var(--map-jp-hover);outline:none;
}
.jp-map .boundary-line{stroke:var(--map-jp-stroke);fill:none}
.theme-jp .map-box{background:#f7fbf8;border-color:#cfe2d4}
.theme-jp .map-label{border-color:#cfe2d4;border-left-color:#2f5d46;color:#2f5d46}
.theme-jp .map-hint a,.theme-jp .reg-list a,.theme-jp .backmap a{color:#2f5d46}
.theme-jp .map-swatch.idle{background:var(--map-jp-fill);color:var(--map-jp-stroke)}
.theme-jp .map-swatch.has{background:var(--map-jp-has);color:var(--map-jp-stroke-strong)}
.theme-jp .map-swatch.hover{background:var(--map-jp-hover);color:var(--map-jp-hover)}

/* ----- Canada choropleth (Bitcoin orange accent) ----- */
.ca-map .province,
.ca-map .province path,
.ca-map .province use{
  fill:var(--map-btc-fill);
  stroke:var(--map-btc-stroke);
  stroke-width:55;
  transition:fill .18s ease,stroke .18s ease;
  paint-order:stroke fill;
}
.ca-map .pref-link.has .province,
.ca-map .pref-link.has .province path,
.ca-map .pref-link.has .province use{fill:var(--map-btc-has);stroke:#E09A45}
.ca-map .pref-link:hover .province,
.ca-map .pref-link:focus .province,
.ca-map .pref-link:hover .province path,
.ca-map .pref-link:focus .province path,
.ca-map .pref-link:hover .province use,
.ca-map .pref-link:focus .province use{
  fill:var(--map-btc-hover);stroke:var(--map-btc-stroke-strong);outline:none;
}
.ca-map .pref-link.has:hover .province,
.ca-map .pref-link.has:focus .province,
.ca-map .pref-link.has:hover .province path,
.ca-map .pref-link.has:focus .province path{fill:#FF9F2E;stroke:var(--map-btc-stroke-strong)}
.theme-btc .map-box{background:var(--map-box-bg);border-color:#f3d2a6}
.theme-btc .map-label{border-color:#f3d2a6;border-left-color:#F7931A;color:#8A4500;background:#fff}
.theme-btc .map-hint a,.theme-btc .reg-list a,.theme-btc .backmap a{color:#8A4500}
.theme-btc .map-swatch.idle{background:var(--map-btc-fill);color:var(--map-btc-stroke)}
.theme-btc .map-swatch.has{background:var(--map-btc-has);color:#E09A45}
.theme-btc .map-swatch.hover{background:var(--map-btc-hover);color:var(--map-btc-stroke-strong)}

/* Mobile: big tap targets on region lists */
@media(max-width:640px){
  .map-label{font-size:.85rem}
  .map-box{padding:4px}
  .pref-list a,.reg-list a{display:inline-block;min-height:44px;line-height:44px;padding:0 2px}
}

/* ----- Leaflet onsen / food maps (cream shell, green accent) ----- */
.bathmap-wrap{
  background:#fff;
  border:1px solid #e8d9c4;
  border-radius:18px;
  padding:14px;
  margin:16px 0;
  font-family:Helvetica,Arial,sans-serif;
  color:var(--map-ink);
}
#bathmap,#foodmap{
  background:var(--map-cream);
  border:1px solid #e8d9c4;
  border-radius:14px;
}
.bm-list{background:var(--map-cream)!important;border-color:#e8d9c4!important}
.bm-tiles{filter:saturate(.5) sepia(.18) brightness(1.06)}
.leaflet-popup-content-wrapper{
  border-radius:14px!important;
  background:#FFFBF5!important;
  border:2px solid #cfe0d4!important;
  box-shadow:0 4px 14px rgba(47,93,70,.16)!important;
}
.leaflet-popup-tip{background:#FFFBF5!important}
.bm-cl div{
  background:var(--map-cream)!important;
  border-color:#5f8f6f!important;
  color:#2f5d46!important;
}