/* PSIA Event Map — build 2026.09.16-8b78b4 */
/* ============================================================
   PSIA-AASI NW Event Heat Map — single-file embeddable widget
   All styles are scoped under #nwmap so this can drop into a
   WordPress page without colliding with the theme's CSS.
   ============================================================ */
#nwmap {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --surface-2: #f4f3f0;
  --plane: #f9f9f7;
  --ink-1: #0b0b0b;
  --ink-2: #52514e;
  --ink-muted: #898781;
  --hair: rgba(11,11,11,0.10);
  --rule: #e1e0d9;
  --accent: #2a78d6;
  --accent-soft: rgba(42,120,214,0.12);
  /* sequential magnitude ramp (blue, light -> dark) */
  --heat-1: #86b6ef;
  --heat-2: #5598e7;
  --heat-3: #2a78d6;
  --heat-4: #1c5cab;
  --heat-5: #104281;
  --ring: #fcfcfb;
  /* categorical hues — discipline identity only */
  --d-alpine:   #ff6567;
  --d-snow:     #53e1a7;
  --d-tele:     #008fd1;
  --d-nordic:   #a0e200;
  --d-child:    #af9500;
  --d-adaptive: #dbb5ff;
  --d-free:     #699793;
  --d-senior:   #fab676;
  --d-general:  #aeb4bb;
  --geo-water: #dde6ec;
  --geo-land:  #f3f2ee;
  --geo-line:  #b9c2c8;
  --geo-city:  #8a9298;
  --tiles: light;
  --body-h: 620px;

  background: var(--plane);
  color: var(--ink-1);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
  container-type: inline-size;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) #nwmap {
    color-scheme: dark;
    --surface-1: #1a1a19; --surface-2: #232321; --plane: #0d0d0d;
    --ink-1: #ffffff; --ink-2: #c3c2b7; --ink-muted: #898781;
    --hair: rgba(255,255,255,0.10); --rule: #2c2c2a;
    --accent: #3987e5; --accent-soft: rgba(57,135,229,0.18);
    --heat-1: #1c5cab; --heat-2: #256abf; --heat-3: #3987e5;
    --heat-4: #6da7ec; --heat-5: #9ec5f4;
    --ring: #1a1a19;
    --d-alpine: #e64d52; --d-snow: #34ca91; --d-tele: #0089ca;
    --d-nordic: #8acb00; --d-child: #998000; --d-adaptive: #c49fe7;
    --d-free: #5d8b87; --d-senior: #e2a060; --d-general: #989ea5;
    --geo-water: #10161b; --geo-land: #222826; --geo-line: #3d4644; --geo-city: #6d7573;
    --tiles: dark;
  }
}
#nwmap[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19; --surface-2: #232321; --plane: #0d0d0d;
  --ink-1: #ffffff; --ink-2: #c3c2b7; --ink-muted: #898781;
  --hair: rgba(255,255,255,0.10); --rule: #2c2c2a;
  --accent: #3987e5; --accent-soft: rgba(57,135,229,0.18);
  --heat-1: #1c5cab; --heat-2: #256abf; --heat-3: #3987e5;
  --heat-4: #6da7ec; --heat-5: #9ec5f4;
  --ring: #1a1a19;
  --d-alpine: #e64d52; --d-snow: #34ca91; --d-tele: #0089ca;
  --d-nordic: #8acb00; --d-child: #998000; --d-adaptive: #c49fe7;
  --d-free: #5d8b87; --d-senior: #e2a060; --d-general: #989ea5;
  --geo-water: #10161b; --geo-land: #222826; --geo-line: #3d4644; --geo-city: #6d7573;
  --tiles: dark;
}
#nwmap *, #nwmap *::before, #nwmap *::after { box-sizing: border-box; }
#nwmap button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- header ---------- */
#nwmap .nw-head {
  padding: 18px 20px 14px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--rule);
}
#nwmap .nw-titlebar { display: flex; align-items: baseline; gap: 12px; flex-wrap: nowrap; }
#nwmap h1 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }
#nwmap .nw-sub { margin: 0; color: var(--ink-2); font-size: 13.5px; }
#nwmap .nw-theme {
  margin-left: auto; flex-shrink: 0; align-self: flex-start;
  background: none; border: 1px solid var(--hair);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--ink-2);
}
#nwmap .nw-theme:hover { background: var(--surface-2); }

/* ---------- stat strip ---------- */
#nwmap .nw-stats { display: flex; gap: 26px; margin-top: 14px; flex-wrap: wrap; }
#nwmap .nw-stat { min-width: 62px; }
#nwmap .nw-stat b { display: block; font-size: 25px; font-weight: 600; line-height: 1.1; }
#nwmap .nw-stat span { font-size: 11.5px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- filters ---------- */
#nwmap .nw-filters {
  padding: 12px 20px; background: var(--surface-1);
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 9px;
}
#nwmap .nw-frow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#nwmap .nw-flabel {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-muted); min-width: 74px; flex-shrink: 0;
}
#nwmap .chip {
  border: 1px solid var(--hair); background: var(--surface-1); color: var(--ink-2);
  border-radius: 999px; padding: 4px 11px; font-size: 12.5px; line-height: 1.5;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
#nwmap .chip:hover { background: var(--surface-2); }
#nwmap .chip[aria-pressed="true"] {
  background: var(--accent-soft); border-color: transparent; color: var(--ink-1); font-weight: 550;
}
#nwmap .chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
#nwmap .chip .n { color: var(--ink-muted); font-variant-numeric: tabular-nums; font-size: 11.5px; }
#nwmap .nw-search {
  flex: 1; min-width: 180px; background: var(--surface-1); color: var(--ink-1);
  border: 1px solid var(--hair); border-radius: 999px; padding: 5px 13px; font: inherit; font-size: 13px;
}
#nwmap .nw-search::placeholder { color: var(--ink-muted); }
#nwmap .nw-search:focus-visible, #nwmap .chip:focus-visible, #nwmap button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
#nwmap .nw-reset { border: none; background: none; color: var(--accent); font-size: 12.5px; text-decoration: underline; padding: 4px 2px; }

/* the filter block collapses on narrow screens so the map stays above the fold */
#nwmap .nw-fsummary {
  display: none; list-style: none; cursor: pointer;
  padding: 11px 20px; background: var(--surface-1);
  border-bottom: 1px solid var(--rule);
  font-size: 13px; font-weight: 550; color: var(--ink-2);
}
#nwmap .nw-fsummary::-webkit-details-marker { display: none; }
#nwmap .nw-fsummary::after { content: " ▾"; color: var(--ink-muted); }
#nwmap details[open] > .nw-fsummary::after { content: " ▴"; }

/* ---------- body ---------- */
#nwmap .nw-body { display: grid; grid-template-columns: 1fr 370px; height: var(--body-h); }
#nwmap .nw-mapwrap { position: relative; background: var(--surface-2); }
#nwmap #nw-leaflet { position: absolute; inset: 0; }
#nwmap .nw-empty {
  position: absolute; inset: 0; display: none; place-items: center; z-index: 500;
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  color: var(--ink-2); font-size: 14px; text-align: center; padding: 24px;
}
#nwmap.is-empty .nw-empty { display: grid; }

/* graceful degradation when the map library can't be reached */
#nwmap .nw-nomap {
  position: absolute; inset: 0; z-index: 620; display: flex;
  flex-direction: column; justify-content: center; gap: 10px;
  padding: 28px 34px; background: var(--surface-1); color: var(--ink-2);
  font-size: 13.5px; line-height: 1.55;
}
#nwmap .nw-nomap strong { color: var(--ink-1); font-size: 15px; font-weight: 620; }
#nwmap .nw-nomap b { color: var(--ink-1); font-weight: 600; }
#nwmap.no-map .nw-legend { display: none; }
#nwmap.no-map .nw-mapwrap { min-height: 0; }
#nwmap.no-map .nw-body { grid-template-columns: 1fr 1fr; }

/* Events with no fixed venue can't be a pin, so they get their own buttons —
   online sessions are a third of the calendar and shouldn't be buried. */
#nwmap .nw-offbtns {
  position: absolute; right: 12px; top: 12px; z-index: 600;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
}
#nwmap .offbtn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-1); border: 1px solid var(--hair); color: var(--ink-2);
  border-radius: 999px; padding: 6px 12px 6px 10px; font-size: 12.5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.10); white-space: nowrap;
}
#nwmap .offbtn:hover { background: var(--surface-2); color: var(--ink-1); }
#nwmap .offbtn[aria-pressed="true"] {
  background: var(--accent-soft); border-color: transparent; color: var(--ink-1); font-weight: 550;
}
#nwmap .offbtn svg { flex-shrink: 0; }
#nwmap .offbtn .n { font-variant-numeric: tabular-nums; color: var(--ink-muted); }
#nwmap .offbtn[aria-pressed="true"] .n { color: inherit; }
#nwmap .offbtn[disabled] { opacity: .45; cursor: default; }

/* When an off-map bucket is selected the geography is beside the point, so the
   map recedes and says so. It stays clickable underneath — picking a resort is
   the way back, and a veil you can't click through is a trap. */
#nwmap .nw-offveil {
  position: absolute; inset: 0; z-index: 590; display: none;
  place-items: center; pointer-events: none; text-align: center;
  background: color-mix(in srgb, var(--surface-1) 55%, transparent);
}
#nwmap.off-focus .nw-offveil { display: grid; }
/* faded, but the resorts stay aimable — they're the way back */
#nwmap.off-focus .leaflet-pane { opacity: .45; filter: saturate(.35); }
#nwmap.off-focus .nw-legend { display: none; }
#nwmap .nw-offveil .card {
  background: var(--surface-1); border: 1px solid var(--hair); border-radius: 12px;
  padding: 16px 22px; box-shadow: 0 4px 18px rgba(0,0,0,.10); max-width: 300px;
}
#nwmap .nw-offveil .ic { color: var(--accent); display: flex; justify-content: center; margin-bottom: 8px; }
#nwmap .nw-offveil .ic svg { width: 26px; height: 26px; }
#nwmap .nw-offveil b { display: block; font-size: 15px; font-weight: 620; color: var(--ink-1); }
#nwmap .nw-offveil span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* legend */
#nwmap .nw-legend {
  position: absolute; left: 12px; bottom: 22px; z-index: 600;
  background: var(--surface-1); border: 1px solid var(--hair); border-radius: 10px;
  padding: 10px 12px; box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
#nwmap .nw-legend h4 {
  margin: 0 0 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-muted);
}
#nwmap .nw-legend ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 10px; }
#nwmap .nw-legend li { display: flex; flex-direction: column; align-items: center; gap: 5px; }
#nwmap .nw-legend i { display: block; border-radius: 50%; border: 2px solid var(--ring); }
#nwmap .nw-legend small { font-size: 10.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* discipline key: letter + colour + name, because colour alone can't carry it */
#nwmap .nw-legend.disc ul {
  display: grid; grid-template-columns: auto auto; gap: 5px 14px; align-items: center;
}
#nwmap .nw-legend.disc li { flex-direction: row; align-items: center; gap: 7px; }
#nwmap .nw-legend.disc i.key {
  width: 17px; height: 17px; border-width: 1.5px; color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 14px; text-align: center;
}
#nwmap .nw-legend.disc small { font-variant-numeric: normal; }

/* place names on the self-contained basemap */
#nwmap .nw-city {
  background: none; border: none; white-space: nowrap; pointer-events: none;
  font-size: 10.5px; color: var(--geo-city); font-weight: 500;
  transform: translate(6px, -7px);
  text-shadow: 0 0 3px var(--geo-land), 0 0 3px var(--geo-land), 0 0 2px var(--geo-land);
}

/* the letter drawn inside each bubble */
#nwmap .nw-glyph {
  background: none; border: none; color: #fff; font-weight: 700;
  text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.35);
  pointer-events: none;
}
#nwmap .nw-rrow .rd {
  font-size: 10.5px; color: var(--ink-muted); white-space: nowrap; flex-shrink: 0;
}

/* ---------- side panel ---------- */
#nwmap .nw-panel {
  border-left: 1px solid var(--rule); background: var(--surface-1);
  display: flex; flex-direction: column; height: 100%; min-height: 0;
}
#nwmap .nw-phead { padding: 15px 17px 12px; border-bottom: 1px solid var(--rule); }
#nwmap .nw-phead h2 { margin: 0 0 3px; font-size: 16px; font-weight: 620; letter-spacing: -0.01em; }
#nwmap .nw-pmeta { font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
#nwmap .nw-pin {
  font-size: 11px; border: 1px solid var(--hair); border-radius: 999px;
  padding: 2px 9px; color: var(--ink-muted); background: var(--surface-2);
}
#nwmap .nw-pin.on { color: var(--accent); border-color: currentColor; background: var(--accent-soft); }
/* min-height:0 is what actually lets a flex child scroll rather than stretch;
   scrollbar-gutter stops the list twitching when its scrollbar appears. */
#nwmap .nw-plist {
  overflow-y: auto; padding: 4px 0 14px; flex: 1 1 auto; min-height: 0;
  scrollbar-gutter: stable;
}
#nwmap .nw-month {
  position: sticky; top: 0; z-index: 2; padding: 9px 17px 5px;
  background: var(--surface-1); font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted);
}
#nwmap .ev { display: flex; gap: 11px; padding: 7px 17px; align-items: baseline; }
#nwmap .ev + .ev { border-top: 1px solid var(--rule); }
#nwmap .ev:hover { background: var(--surface-2); }
#nwmap .ev .when {
  flex-shrink: 0; width: 56px; font-size: 11.5px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
#nwmap .ev .what { font-size: 13px; line-height: 1.38; }
#nwmap .ev .tag { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-muted); }
#nwmap .ev .tag i {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; margin-right: 5px; vertical-align: 1px;
}
#nwmap .ev .evbody { flex: 1; min-width: 0; }
#nwmap .ev a.what {
  color: inherit; text-decoration: none; font-size: 13px; line-height: 1.38;
}
#nwmap .ev a.what:hover { text-decoration: underline; text-underline-offset: 2px; }
#nwmap .ev .pill {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  border: 1px solid var(--hair); color: var(--ink-muted); vertical-align: 1px;
}
#nwmap .ev .pill.open     { color: #006300; border-color: currentColor; }
#nwmap .ev .pill.waitlist { color: #8a6100; border-color: currentColor; }
#nwmap .ev .pill.full,
#nwmap .ev .pill.closed   { color: var(--ink-muted); }
#nwmap .ev .series {
  display: block; margin-top: 3px; font-size: 10.5px; color: var(--ink-muted); font-style: italic;
}
#nwmap .ev .evmeta {
  display: flex; align-items: center; gap: 10px; margin-top: 4px;
}
#nwmap .ev .evmeta .tag { flex: 1; min-width: 0; margin-top: 0; }
#nwmap .ev .reg {
  flex-shrink: 0; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--accent); color: var(--accent); background: none;
  border-radius: 999px; padding: 3px 11px; font-size: 11.5px; font-weight: 600;
}
#nwmap .ev .reg:hover { background: var(--accent); color: #fff; }
/* a closed event's link shouldn't compete with a live registration */
#nwmap .ev .reg.muted { border-color: var(--hair); color: var(--ink-muted); font-weight: 500; }
#nwmap .ev .reg.muted:hover { background: var(--surface-2); color: var(--ink-1); border-color: var(--ink-muted); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) #nwmap .ev .pill.open { color: #0ca30c; }
  :root:where(:not([data-theme="light"])) #nwmap .ev .pill.waitlist { color: #fab219; }
}
#nwmap[data-theme="dark"] .ev .pill.open { color: #0ca30c; }
#nwmap[data-theme="dark"] .ev .pill.waitlist { color: #fab219; }
#nwmap .nw-hint { padding: 26px 20px; color: var(--ink-muted); font-size: 13px; line-height: 1.6; }

/* venue roster inside the panel when nothing is selected */
#nwmap .nw-roster { padding: 2px 0 10px; }
#nwmap .nw-rrow {
  display: flex; align-items: center; gap: 9px; padding: 6px 17px;
  width: 100%; border: none; background: none; text-align: left;
}
#nwmap .nw-rrow:hover { background: var(--surface-2); }
#nwmap .nw-rrow .bar { height: 7px; border-radius: 3px; flex-shrink: 0; min-width: 4px; }
#nwmap .nw-rrow .offico { display: flex; color: var(--ink-muted); flex-shrink: 0; }
#nwmap .nw-rrow .nm { font-size: 12.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nwmap .nw-rrow .ct { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---------- off-map / table ---------- */
#nwmap .nw-foot {
  padding: 13px 20px 16px; border-top: 1px solid var(--rule);
  background: var(--surface-1); font-size: 12.5px; color: var(--ink-2);
}
#nwmap .nw-foot .nw-frow { gap: 10px; }
#nwmap .nw-note { margin: 9px 0 0; font-size: 11.5px; color: var(--ink-muted); line-height: 1.55; }
#nwmap .nw-note a { color: var(--accent); }
/* so a bug report can say which build it came from */
#nwmap .nw-build { display: block; margin-top: 4px; color: var(--ink-muted); opacity: .75; }
#nwmap .nw-sheetnote { display: block; margin-top: 5px; color: var(--ink-2); }
#nwmap .nw-sheetnote:empty { display: none; }
#nwmap .nw-sheetnote.warn { color: var(--ink-muted); }
#nwmap .nw-sheetnote button {
  border: none; background: none; padding: 0; color: var(--accent);
  font: inherit; text-decoration: underline; cursor: pointer;
}

/* venue policies — what a member needs before they drive there */
#nwmap .nw-policy {
  margin: 2px 17px 10px; padding: 11px 13px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--hair);
}
#nwmap .nw-policy h4 {
  margin: 0 0 7px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-muted);
}
#nwmap .nw-policy .pr { display: flex; gap: 10px; font-size: 12.5px; padding: 2px 0; }
#nwmap .nw-policy .pr span { flex: 0 0 82px; color: var(--ink-muted); }
#nwmap .nw-policy .pr b { font-weight: 550; color: var(--ink-1); }
#nwmap .nw-policy .pn { margin-top: 6px; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
#nwmap .nw-policy .pv { margin-top: 7px; font-size: 11px; color: var(--ink-muted); }
#nwmap .nw-policy .pv.old { color: #8a6100; }
#nwmap table { border-collapse: collapse; width: 100%; font-size: 12.5px; margin-top: 12px; }
#nwmap th, #nwmap td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
#nwmap th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-muted); font-weight: 600; }
#nwmap td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
#nwmap .nw-tablewrap { display: none; max-height: 420px; overflow: auto; }
#nwmap .nw-tablewrap.on { display: block; }

/* ---------- leaflet overrides ---------- */
#nwmap .leaflet-container { background: var(--surface-2); font: inherit; }
#nwmap .leaflet-tooltip.nw-tip {
  background: var(--surface-1); color: var(--ink-1); border: 1px solid var(--hair);
  border-radius: 8px; box-shadow: 0 3px 14px rgba(0,0,0,.16); padding: 8px 11px;
  font-size: 12.5px; white-space: nowrap;
}
#nwmap .leaflet-tooltip.nw-tip::before { display: none; }
#nwmap .nw-tip b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
#nwmap .nw-tip span { display: block; color: var(--ink-2); }
#nwmap .leaflet-control-attribution {
  background: color-mix(in srgb, var(--surface-1) 82%, transparent);
  color: var(--ink-muted); font-size: 10.5px;
}
#nwmap .leaflet-control-attribution a { color: var(--ink-2); }
#nwmap .leaflet-bar a { background: var(--surface-1); color: var(--ink-1); border-bottom-color: var(--rule); }
#nwmap .leaflet-bar a:hover { background: var(--surface-2); }

/* ---------- responsive ---------- */
@container (max-width: 860px) {
  #nwmap .nw-body { grid-template-columns: 1fr; }
  #nwmap .nw-mapwrap { height: 420px; }
  #nwmap #nw-leaflet { position: absolute; inset: 0; }
  #nwmap .nw-body { height: auto; }
  #nwmap .nw-panel { border-left: none; border-top: 1px solid var(--rule); height: 460px; }
  #nwmap .nw-flabel { min-width: 100%; }
  #nwmap .nw-fsummary { display: block; }
  #nwmap .nw-stats { gap: 18px; }
  #nwmap .nw-stat b { font-size: 21px; }
  #nwmap .nw-head { padding: 15px 16px 12px; }
  #nwmap h1 { font-size: 17px; }
  #nwmap .nw-legend { left: 8px; bottom: 18px; padding: 7px 9px; }
  #nwmap .nw-legend ul { gap: 7px; }
  #nwmap .nw-legend i { max-width: 24px; max-height: 24px; }
  #nwmap .nw-legend h4 { margin-bottom: 6px; }
  #nwmap .nw-filters { padding: 10px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #nwmap * { transition: none !important; animation: none !important; }
}