/*
 * map.css — styles for the /road-trip-planner/ page ONLY (loaded after shared.css).
 *
 * The map is a self-contained mini-app: it has its OWN color/type tokens
 * (--teal, --ink, --cond, --gold, layer palette) declared in :root below,
 * separate from the site's --color-* tokens. It still consumes a handful of
 * shared tokens (var(--color-white), --color-tan-tint, --color-teal…) from
 * shared.css, so THIS file must be linked AFTER shared.css.
 *
 * Do NOT merge this into main.css: the site and the map both define .search
 * (site = search pod, map = dark header search box); one file loaded by both
 * pages would collide. Site styles live in main.css, shared bits in shared.css,
 * map-only styles here. Organized top-to-bottom: tokens, header/search/menu,
 * controls, bottom sheet, cards, pins & clusters, layers, EV, member states.
 */

:root{
  --gold:#E8B62C; --teal:#1A8F7C; --cream:#EDE0C8; --brown:#6B4226;
  --hm:#C9B893; --gem:#9b5da7; --np:#3f7d4f; --rest:#2C6FB5; --ev:#2e9e5b; /* tier/layer marker palette (keep JS/SVG literals in sync) */
  --ink:#1A1A18; --muted:#6b6b66; --line:#e6e3dc; --bg:#faf8f3; --glass:rgba(22,22,18,.86);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --cond:'Barlow Condensed',var(--sans);

  /* ---- NIGHT PALETTE (Dark Sky Mode + Stargazing Report) ----
   * The map's night theme. Values preserved 1:1 from the original literals so
   * this is a naming/centralizing pass with zero visual change; near-duplicate
   * shades are ripe for a later consolidation pass. Alert RED lives with the
   * site's alert family in shared.css (--color-error* / --color-error-on-dark),
   * NOT here, so light + dark alerts stay one coordinated family. */
  /* indigo surfaces, deep -> bright */
  --night-bg-deep:#141428; --night-bg:#161628; --night-bg-2:#18182e; --night-bg-3:#191932;
  --night-surface-deep:#1b1b34; --night-surface:#26264a; --night-surface-2:#2c2c52;
  --night-panel:#2b2b52; --night-panel-hover:#33335f;
  --night-accent-deep:#3a3a6b; --night-accent:#4b4b8f; --night-accent-bright:#5a5ac0;
  --night-glow:#6a6ac2; --night-glow-2:#7a7ad0; --night-accent-soft:#8f8de0;
  /* lavender text, bright -> dim */
  --night-text-hi:#dcdaf4; --night-text-warm:#d9c9ff;
  --night-text:#e9e7ff; --night-text-2:#cfcdf0; --night-text-3:#c4c2e8;
  --night-text-4:#b9b7e0; --night-text-5:#a7a5d6;
  --night-muted:#9c9ac6; --night-muted-2:#8f8dba;
  /* warm star gold */
  --night-star-gold:#f4e3b8; --night-gold-soft:#e0c07a;
  /* "clear / good" greens */
  --night-good:#4bbf8a; --night-good-bright:#5fd1b0; --night-good-deep:#3a8f7c;
  /* night-vision red (red preserves eye dark-adaptation; deliberately its own thing, not the alert red) */
  --night-vision:#ee6e6e; --night-vision-badge:#ef9a9a; --night-vision-ink:#5a1010;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;overflow:hidden;font-family:var(--sans);color:var(--ink);-webkit-tap-highlight-color:transparent;}
#map{position:fixed;inset:0;z-index:0;background:#dfe7ea;}
.maplibregl-ctrl-attrib{font-size:9px;}

/* thin branded black header: wordmark + search + hamburger */
.top{position:fixed;left:0;right:0;top:var(--admin-bar-h, 0px);z-index:1000;padding:calc(var(--safe-t) + 8px) 12px 8px;display:flex;gap:10px;align-items:center;background:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.28);} /* shifts below the gold admin bar when present */
.brand{flex:0 0 auto;display:flex;align-items:center;text-decoration:none;}
.brand img{height:28px;width:auto;display:block;}
.search{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:8px;height:38px;background:rgba(255,255,255,.13);border:1.5px solid var(--teal);border-radius:10px;padding:0 12px;}
.search svg{width:16px;height:16px;color:#b8b3a6;flex:0 0 16px;}
.search input{border:0;outline:0;font-size:16px;flex:1;min-width:0;background:transparent;color:#fff;}
.search input::placeholder{color:#b8b3a6;}
.menu{flex:0 0 38px;height:38px;width:38px;display:flex;align-items:center;justify-content:center;background:var(--teal);border:0;border-radius:10px;cursor:pointer;color:#fff;}
.menu svg{width:22px;height:22px;}.menu:active{transform:scale(.94);}
.menu-panel{position:fixed;top:calc(var(--safe-t) + 62px + var(--admin-bar-h, 0px));right:12px;z-index:1500;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.28);width:270px;max-width:calc(100vw - 24px);max-height:calc(100vh - var(--safe-t) - 84px);overflow-y:auto;padding:8px;}
.menu-panel[hidden]{display:none;}.menu-login{grid-column:2;grid-row:1;justify-self:stretch;border:0;background:var(--teal);color:var(--color-white);font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:15px;padding:9px 12px;border-radius:9px;cursor:pointer;white-space:nowrap;}
/* .member-line / .member-line--muted come from shared.css (identical) — not re-declared here */
@media (hover:hover){.menu-home:hover{opacity:.88;}.menu-login:hover{opacity:.88;}.menu-link:hover{background:var(--bg);color:var(--teal);}.menu-check:hover{background:var(--bg);}}
.menu-sec{margin-top:6px;}
.menu-h{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--teal);background:var(--color-tan-tint);padding:12px 14px;border-radius:7px;margin:0 0 2px;} /* now a plain <p> section header (not an accordion summary) */
.menu-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:0 2px 6px;}
.menu-close{grid-column:3;justify-self:end;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:0;background:var(--ink);border-radius:9px;color:var(--color-white);cursor:pointer;}
.menu-close svg{width:16px;height:16px;}
summary.menu-h{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;user-select:none;}
summary.menu-h::-webkit-details-marker{display:none;}
summary.menu-h::after{content:'';flex:0 0 auto;width:6px;height:6px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg);transition:transform .2s ease;margin:0 4px 2px 0;}
details[open]>summary.menu-h::after{transform:rotate(-135deg);margin-bottom:-2px;}
.menu-link{display:block;padding:10px 13px;font-size:14px;color:var(--ink);text-decoration:none;border-radius:8px;}
button.menu-link{width:100%;text-align:left;border:0;background:transparent;cursor:pointer;font-family:var(--sans);}
.menu-link:active{background:var(--bg);}.menu-check{display:flex;align-items:center;gap:10px;padding:10px 13px;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;border-radius:9px;user-select:none;}
.menu-check:active{background:var(--bg);}
.menu-check input{width:18px;height:18px;accent-color:var(--teal);flex:0 0 18px;cursor:pointer;}
/* locate button: bottom-left, rides up with the drawer */
.locate{position:fixed;left:12px;bottom:calc(var(--safe-b) + 16px);z-index:1150;height:46px;width:46px;display:flex;align-items:center;justify-content:center;background:var(--teal);border:0;border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,.28);cursor:pointer;color:#fff;transition:bottom .28s cubic-bezier(.4,0,.2,1);}
.legend{position:fixed;left:12px;top:calc(var(--safe-t) + 96px + var(--admin-bar-h, 0px));z-index:1150;width:min(500px, calc(100vw - 20px));max-height:calc(100vh - var(--safe-t) - 112px);max-height:calc(100dvh - var(--safe-t) - 112px);overflow-y:auto;background:#fff;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.24);padding:13px 15px;font-family:var(--sans);} /* top-left, hangs from the Legend tab. dvh (not vh) so iOS Safari's chrome can't clip the bottom; scrolls if still too tall */
.legend[hidden]{display:none;}
/* Section blocks (Member / Boutel / Places / EV) flow in a wrapping multi-column grid: 2-up when there's
   width, stacking on a narrow/portrait phone. break-inside keeps each block whole in its column. */
.legend__grid{columns:158px;column-gap:16px;column-rule:1px solid var(--line);}
.legend__block{break-inside:avoid;-webkit-column-break-inside:avoid;border-top:1px solid var(--line);padding-top:13px;margin-bottom:14px;} /* a rule above each section header so the sections read clearly */
.legend__block:last-child{margin-bottom:0;}
.legend__h{font-family:var(--cond);font-weight:800;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin:0 0 9px;}
.legend__row{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--ink);padding:3px 0;}
.legend__sw{flex:0 0 26px;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;}
.legend__sw svg{width:17px;height:17px;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));} /* square */
.legend__sw--gold{color:var(--gold);}.legend__sw--teal{color:var(--teal);} /* member-state badge icons carry the state colour */
.legend__sw--gold svg,.legend__sw--teal svg{fill:currentColor;filter:none;}
.legend__sqm{width:19px;height:19px;border-radius:5px;background:#2C6FB5;color:#fff;display:inline-flex;align-items:center;justify-content:center;}
.legend__sqm svg{width:12px;height:12px;filter:none;}
/* Dark Sky Certified badge key: indigo star-crescent dot (matches the .ds-badge chip on cards) */
.legend__dscert{width:19px;height:19px;border-radius:50%;background:var(--night-accent-deep);color:#fff;display:inline-flex;align-items:center;justify-content:center;}
.legend__dscert svg{width:12px;height:12px;}
/* Boutel markers are circles now: tier-colour ring around a dark centre (matches the map's clusterEl) */
.legend__circ{width:20px;height:20px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;}
.legend__circ--plus{background:var(--gold);}
.legend__circ--boutel{background:#1A8F7C;}
.legend__circ--hm{background:#C9B893;}
.legend__circ--cluster{background:conic-gradient(var(--gold) 0 33.34%,#1A8F7C 33.34% 66.67%,#C9B893 66.67% 100%);}
.legend__circ__n{width:64%;height:64%;border-radius:50%;background:#2a2a24;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-weight:800;font-size:9px;line-height:1;}
.legend__sw--paw{color:var(--muted);}.legend__sw--paw svg{fill:currentColor;filter:none;}.legend__sub{font-family:var(--cond);font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 5px;}.legend__close{position:absolute;top:11px;right:11px;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:0;background:var(--ink);border-radius:7px;color:#fff;cursor:pointer;}
.legend__close svg{width:13px;height:13px;}
/* ---- Filters panel: the legend is now the KEY + on/off control (no separate drawer). Width + the wrapping
   block grid are set up top (see .legend / .legend__grid). ---- */
.legend__lbl{flex:1;min-width:0;}
.legend__cnt{flex:0 0 auto;min-width:16px;text-align:center;font-family:var(--cond);font-weight:600;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;padding:0 6px;} /* saved-places count next to each member lens: total when zoomed out, in-view as you zoom in */
.legend__cnt[hidden]{display:none;}
.legend__zhint{display:inline-flex;align-items:center;margin-left:6px;color:var(--muted);vertical-align:middle;} /* per-row state: eye-slash(off) / magnifier+(zoom in) / magnifier-(zoom out) / count+eye(showing) */
.legend__zhint svg{width:14px;height:14px;display:block;}
.legend__zn{font-size:11px;font-weight:700;margin-right:2px;}
.legend__zhint:empty{display:none;}
.legend__row--tog{cursor:pointer;border-radius:8px;padding:5px 4px;margin:0 -4px;}
@media(hover:hover){.legend__row--tog:not(.is-locked):hover{background:var(--color-tan-tint);}}
.lgt{flex:0 0 auto;width:34px;height:20px;border-radius:12px;background:#cdc7ba;position:relative;transition:background .18s ease;}
.lgt.is-on{background:var(--teal);}
.lgt__k{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .18s ease;}
.lgt.is-on .lgt__k{transform:translateX(14px);}
.legend__locked{position:relative;opacity:.6;cursor:pointer;}
.legend__row--tog.is-locked{pointer-events:none;}
.legend__locknote{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--muted);padding:2px 4px 9px;} /* sits under the Member Filters title, above the grayed lenses */
.legend__locknote .text-link{font-size:inherit;}
.legend__lockic{display:inline-flex;}.legend__lockic svg{width:13px;height:13px;color:var(--muted);}
.legend__nest{margin:4px 0 6px 6px;padding:9px 10px;background:var(--color-tan-tint);border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;gap:9px;}
.legend__seg-row{display:flex;gap:6px;}
.legend__seg{flex:1;padding:6px 4px;border:1px solid var(--line);border-radius:6px;background:#fff;font-family:var(--sans);font-weight:600;font-size:12px;color:var(--ink);cursor:pointer;}
.legend__seg.is-on{background:var(--teal);color:#fff;border-color:var(--teal);}
.legend__sel{width:100%;font-family:var(--sans);font-size:12px;padding:6px 7px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);} /* full-width now the Brand/kW labels are gone (the default option says what it filters) */
.locate svg{width:22px;height:22px;}
.locate:active{transform:scale(.92);}/* shared geocomplete.js dropdown (the ONE unified search) - styled to match this map */
.geocomplete{position:fixed;left:12px;right:12px;top:calc(var(--safe-t) + 54px + var(--admin-bar-h, 0px));z-index:1400;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);overflow:hidden auto;max-height:56vh;list-style:none;margin:0;padding:0;}
.geocomplete[hidden]{display:none;}
.geocomplete__item{padding:12px 14px;border-bottom:1px solid #efece5;cursor:pointer;font-size:14.5px;color:#2a2a28;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.geocomplete__item:last-child{border-bottom:0;}
.geocomplete__item--active,.geocomplete__item:hover{background:#f4f1ea;color:var(--teal);}

.controls{position:fixed;right:12px;z-index:1000;bottom:calc(var(--safe-b) + 16vh + 14px);display:flex;flex-direction:column;gap:10px;transition:bottom .28s cubic-bezier(.4,0,.2,1);}
.ctrl{width:46px;height:46px;border-radius:14px;background:#fff;border:0;box-shadow:0 2px 10px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);}
.ctrl svg{width:22px;height:22px;} .ctrl:active{transform:scale(.94);}

.sheet{position:fixed;left:0;right:0;bottom:0;z-index:1100;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -6px 26px rgba(0,0,0,.16);display:flex;flex-direction:column;transform:translateY(100%);}
/* the WHOLE header is the drag handle - big, easy touch target */
.sheet__drag{flex:0 0 auto;padding:12px 0 12px;cursor:grab;touch-action:none;user-select:none;border-bottom:1px solid var(--line);} /* white title bar w/ a light divider; extra bottom room lifts peek ~8px and hides the content below the fold */
.sheet__drag:active{cursor:grabbing;}
.sheet__bar{width:46px;height:5px;border-radius:999px;background:var(--teal);margin:0 auto;}
.sheet__head{display:flex;align-items:center;gap:10px;min-height:32px;padding:8px 18px 6px;}
.sheet__title{font-family:var(--cond);font-weight:800;font-size:21px;line-height:1.1;color:var(--ink);text-transform:uppercase;letter-spacing:-.01em;} /* heading treatment, matches production */
.sheet__title small{font-family:var(--sans);font-weight:500;font-size:13px;color:var(--muted);}
.sheet__back{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink);padding:7px 13px;cursor:pointer;display:none;touch-action:auto;}
.sheet__close{flex:0 0 auto;margin-left:auto;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:0;background:var(--ink);border-radius:8px;color:#fff;cursor:pointer;touch-action:auto;}
.sheet__close svg{width:15px;height:15px;}
.sheet__close--up{background:transparent;color:var(--ink);} /* collapsed: a chrome-less arrow-square-up glyph (tap to expand), not a white box inside the dark button */
.sheet__close--up svg{width:26px;height:26px;}
.sheet__body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:6px 14px calc(var(--safe-b) + 60px);}
/* Mobile browsers overlay a bottom toolbar (address/refresh bar) that safe-area-inset-bottom doesn't cover, so the
   sheet's last accordion could hide behind it. Extra bottom clearance on the scrollable body lifts it clear. */
@media (max-width:819px){.sheet__body{padding-bottom:calc(var(--safe-b) + 104px);}}
/* Wide desktop: the bottom sheet becomes a CENTERED panel (capped width) instead of a full-width bar, so the map stays visible on both sides + above and text isn't edge-to-edge. left:0/right:0 + margin auto centers it without touching the translateY transform used for the drag detents. */
@media (min-width:820px){
  .sheet{max-width:1000px;margin-left:auto;margin-right:auto;border-radius:20px;overflow:hidden;box-shadow:0 10px 42px rgba(0,0,0,.24);} /* rounded all corners: on desktop the sheet is a floating content-height card (fitSheet lifts it off the bottom), so the map shows below + above + beside it */
  .sheet__bar{display:none;}        /* it's a non-draggable modal on desktop: no teal drag handle */
  .sheet__drag{cursor:default;}     /* and no grab/hand cursor -- only the X closes it */
  /* "View on Map" minimizes the floating card to just its header handle at the bottom; the whole handle is clickable to reopen it where it was */
  .sheet.sheet--peeked{box-shadow:0 -8px 30px rgba(0,0,0,.22);}
  .sheet.sheet--peeked .sheet__drag{cursor:pointer;}
  .sheet.sheet--peeked .sheet__title::after{content:' (click to reopen)';font-weight:400;opacity:.6;}
}

.card{display:flex;gap:12px;padding:10px;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;cursor:pointer;background:#fff;}
.card:active{background:var(--bg);}
.card__img{flex:0 0 96px;width:96px;height:72px;border-radius:10px;object-fit:cover;background:linear-gradient(135deg,#e9e4d8,#d8d2c4);}
.card__ph{flex:0 0 96px;width:96px;height:72px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--color-teal-tint);color:var(--color-teal);}
.card__ph svg{width:34px;height:34px;}
/* every bed placeholder mimics the Boutel badge: light-teal bg + teal bed (no tier colouring) */
.card__ph--plus,.card__ph--boutel,.card__ph--hm{background:var(--color-teal-tint);color:var(--color-teal);}
.card__b{min-width:0;flex:1;display:flex;flex-direction:column;}
.card__name{font-family:var(--cond);font-weight:800;font-size:18px;line-height:1.1;color:var(--ink);}
.card__badge{margin-top:6px;}
.card__meta{font-size:13px;color:var(--muted);margin:4px 0 0;}
.tel{color:var(--teal);text-decoration:none;display:inline-block;padding:5px 4px;margin:-3px -4px;} /* callable phone -> teal, same treatment as the address; roomier tap target for mobile */
@media (hover:hover){.tel:hover{text-decoration:underline;}}
.addrtext{color:var(--ink);display:inline;} /* plain address text — not a link (copy button handles it) */
.copyaddr{background:none;border:0;padding:5px 8px;margin-left:1px;cursor:pointer;color:var(--muted);vertical-align:middle;line-height:0;} /* extra padding = its own tap zone so a fat finger doesn't hit the address */
.copyaddr svg{width:14px;height:14px;display:inline-block;}
@media (hover:hover){.copyaddr:hover{color:var(--teal);}}
.copyaddr .copyaddr__ok{display:none;}
.copyaddr.is-copied{color:var(--teal);}
.copyaddr.is-copied .copyaddr__i{display:none;}
.copyaddr.is-copied .copyaddr__ok{display:inline-block;}
.card__tag{font-size:13px;line-height:1.35;color:#4a4a45;font-style:italic;margin-top:10px;}
.card__amen{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;}
/* amenity tags = shared .amenity (shared.css) */
/* "Right down the road" gems on a boutel card */
/* nearby-gem rows: used by the boutel card's "Right down the road" accordion AND the layer card's "Around the Park" (both wrap them in the shared .acc accordion, which supplies the header) */
.rdtr__item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:7px;cursor:pointer;background:#fff;}
.rdtr__item:last-child{margin-bottom:0;}.rdtr__item:active{background:var(--bg);}
.rdtr__n{font-weight:600;font-size:14px;color:var(--ink);}
.rdtr__d{font-size:12.5px;font-weight:700;color:#9b5da7;white-space:nowrap;}/* compact selected-boutel snippet: thumb on the side, teal CTA at the bottom */
/* gem/layer header: no border (so it reads as one piece with the accordions), padding below before the first accordion */
.litem__head{padding:2px 0 14px;}.bd__full{display:block;width:100%;margin-top:12px;padding:13px 14px;border:0;border-radius:12px;background:var(--teal);color:#fff;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;font-family:var(--sans);line-height:1.3;}
@media (hover:hover){.bd__btn--ghost:hover{border-color:var(--teal);color:var(--teal);}.bd__full:hover{background:#0f6f60;}}
.card.is-active{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal);}
/* designation badge = shared .listing__badge (shared.css). map-context sizing only: */
.card__badge .listing__badge{margin:0;}

.empty{padding:24px 8px;color:var(--muted);text-align:center;font-size:14px;line-height:1.5;}

/* member pin badge: ONE per saved single circle, by priority Trophy > CalendarHeart > Star (gold = earned/saved, teal = activity). White ring so it pops off any marker colour. */
.pin-badge{position:absolute;top:-7px;right:-9px;width:18px;height:18px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:30;pointer-events:none;}
.pin-badge svg{width:11px;height:11px;display:block;}
.pin-badge--gold{background:var(--gold);color:#1A1A18;}
.pin-badge--teal{background:var(--teal);color:#fff;}
.pin-badge--dsky{background:var(--night-accent-deep);color:#fff;} /* Dark Sky Certified */
.pin-badge--np{background:#a8d8b4;color:#1f4d2e;} /* National Park (green): dark-green triangle on light green */
/* Badge SLOTS: a marker can carry several without overlap (the "star formation"). Where each lives:
   top-center=member status (Visited/Going), top-left=Favorite, top-right=Dark Sky Certified, bottom corners reserved. */
.pin-badge--tc{top:-9px;left:50%;right:auto;transform:translateX(-50%);}
.pin-badge--tl{top:-7px;left:-9px;right:auto;}
.pin-badge--tr{top:-7px;right:-9px;left:auto;}
.pin-badge--br{bottom:-7px;right:-9px;top:auto;left:auto;}
.pin-badge--bl{bottom:-7px;left:-9px;top:auto;right:auto;}
/* gems: the 26px diamond sits inside a 40px tap-target, so its corner badges floated too far out -> pull them in toward the diamond */
.gemwrap .pin-badge--tr{top:-2px;right:-2px;}
.gemwrap .pin-badge--tl{top:-2px;left:-2px;}
.gemwrap .pin-badge--tc{top:-4px;}
.gemwrap .pin-badge--br{bottom:-2px;right:-2px;}
.gemwrap .pin-badge--bl{bottom:-2px;left:-2px;}
/* cluster bubble (zoomed-out) */
.clusterwrap{cursor:pointer;}
.cluster{position:relative;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.3);border:2px solid #fff;}
.cluster:active{transform:scale(.95);}
.cluster__n{width:68%;height:68%;border-radius:50%;background:#2a2a24;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-weight:800;font-size:15px;}
.cluster.is-sel{box-shadow:0 0 0 4px rgba(26,143,124,.45),0 2px 8px rgba(0,0,0,.4);} /* selected boutel circle */
.region-label{font-family:var(--cond);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#57574f;text-shadow:0 0 3px #fff,0 1px 2px #fff;pointer-events:none;white-space:nowrap;}

/* ---- layers band: slides out from the right; handle leads it left to ~the home button ---- */
.lband{position:fixed;right:0;top:calc(var(--safe-t) + 60px);z-index:1300;width:min(600px,calc(100vw - 52px));background:var(--glass);backdrop-filter:blur(10px);box-shadow:0 6px 24px rgba(0,0,0,.32);transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);}
/* LAYERS BAND (slider) HIDDEN for now -- Gems/Parks/Rest Areas moved to "Customize Map" checkboxes (independent
   layers, no overlay). The band + its Explore group system is PRESERVED: HTML (#lband/.lgroups) and JS
   (GROUPS, makePill, setExplore, buildLayerCluster/renderLayerClusters, setWash/#mapWash overlay, toggleBand,
   syncBandToZoom, .layer-close chip). This is the home for future PAID layers (pit stops / food / towns).
   To bring it back: delete this one rule. */
.lband{display:none!important;}
.lband.open{transform:translateX(0);}
/* active-layer overlay: film wash + slight focus blur, boutels muted underneath */
#mapWash{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;transition:opacity .35s;background:rgba(34,38,44,.3);box-shadow:inset 0 3px 0 rgba(214,216,220,.75);}
#spotlight{position:absolute;inset:0;pointer-events:none;z-index:1000;opacity:0;transition:opacity .35s;background:rgba(34,38,44,.5);} /* spotlight scrim: sits ABOVE every normal marker (z<=900) and BELOW the selected marker (lifted to 1150) + gold selpin (1200), so the chosen place pops while the basemap + other pins dim ~50%. Fades in on select (showSelPin), out on deselect (hideSelPin). */
/* floating "viewing X" close chip: an obvious second way to dismiss a layer overlay (sits above the scrim, below the layers band) */
.layer-close{position:fixed;right:12px;top:calc(var(--safe-t) + 118px);z-index:1250;display:inline-flex;align-items:center;gap:9px;padding:9px 12px 9px 16px;border:0;border-radius:22px;background:rgba(26,26,24,.9);backdrop-filter:blur(6px);color:#fff;font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.02em;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.34);}
.layer-close[hidden]{display:none;}
.layer-close svg{width:16px;height:16px;opacity:.85;}
.layer-close:active{background:rgba(0,0,0,.92);}
/* EV Needs: menu icons (green chip + white bolt), brand dropdown, and the map markers */
.menu-check--ev{gap:9px;} /* fast = gold ring + gold bolt, mirrors the map pin */
.ev-chip svg{width:14px;height:14px;display:block;}
.ev-speed{display:flex;gap:2px;background:var(--color-nav-pill);border-radius:11px;padding:3px;margin:12px 4px 8px;}
.ev-pill{flex:1 1 auto;border:0;background:transparent;padding:8px 10px;border-radius:8px;font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);cursor:pointer;white-space:nowrap;text-align:center;} /* size to text + share leftover space evenly -> balanced padding */
.ev-pill.is-on{background:#37352F;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);} /* selected = charcoal */
.ev-form.is-muted{opacity:.4;pointer-events:none;}/* Customize Map row icons -- shown in parentheses after each label so people learn the map markers */
.cm-ic{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;vertical-align:-3px;margin:0 1px;}
.cm-ic svg{width:15px;height:15px;display:block;}
.cm-ic--rest{width:14px;height:14px;background:#2C6FB5;border-radius:4px;}
.cm-hm{width:15px;height:15px;border-radius:50%;background:#C9B893;border:1.5px solid #fff;box-sizing:border-box;position:relative;} /* HM tier: beige ring + dark middle, like the map circle */
.cm-hm::after{content:'';position:absolute;inset:3px;border-radius:50%;background:#2a2a24;}
/* Favorites (members): gold star sits on the title's line + the members-only "Show only my favorites" row */
.card__name-row .card__name{flex:0 1 auto;min-width:0;} /* name takes only its own width so the star sits right beside the title */
.favbtn{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-2px 0 0;padding:0;border:0;background:transparent;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.favbtn svg{width:22px;height:22px;display:block;}
.favbtn__on{display:none;line-height:0;}
.favbtn__off{line-height:0;}
.favbtn.is-fav{color:var(--gold);}
.favbtn.is-fav .favbtn__on{display:block;}
.favbtn.is-fav .favbtn__off{display:none;}
@media (hover:hover){.favbtn:not(.favbtn--locked):hover{color:var(--gold);}} /* no gold hover on a locked (disabled-looking) star */
/* non-member: a grayed, disabled-looking star with a small lock badge (starring is members-only) */
.favbtn--locked{color:var(--muted);opacity:.55;}
.favbtn__lock{position:absolute;right:-2px;bottom:-1px;width:13px;height:13px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);background:var(--bg);border-radius:50%;box-shadow:0 0 0 1.5px var(--bg);}
.favbtn__lock svg{width:9px;height:9px;display:block;}
/* Favorites pill group (top of Customize Map) — reuses .ev-speed / .ev-pill; icon + muted layer rows */
.fav-pill__ic{width:16px;height:16px;vertical-align:-3px;margin-right:5px;} /* larger so the star/lock read clearly */
.fav-pill--muted{opacity:.5;} /* signed-out: Off / ★ Only shown but muted; a click anywhere opens sign-in */
.menu-check.is-muted{opacity:.42;pointer-events:none;} /* Gems/Parks/Rest muted while "Only" is on (they stay checked) */
.menu-brand{display:flex;flex-direction:column;gap:6px;padding:8px 13px 4px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);}
.menu-brand select{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink);padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;}
.evwrap{will-change:transform;}
.ev{position:relative;display:flex;align-items:center;justify-content:center;background:#16A34A;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.34);cursor:pointer;width:25px;height:25px;box-sizing:border-box;}
.ev svg{width:14px;height:14px;display:block;}
.ev--fast{border-color:var(--gold);} /* fast pin: gold ring + gold bolt */
.ev--cluster{width:33px;height:33px;border:0;padding:0;position:relative;box-shadow:0 2px 6px rgba(0,0,0,.3);}
.ev--cluster.ev--big{width:41px;height:41px;}
.ev__inner{position:absolute;inset:3px;border-radius:50%;background:#16A34A;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ev--cluster .ev__inner svg{width:11px;height:11px;display:block;margin-bottom:-2px;}
.ev__n{color:#fff;font-family:var(--cond);font-weight:800;font-size:12px;line-height:1;}
.ev.is-sel{box-shadow:0 0 0 4px rgba(22,163,74,.4),0 2px 8px rgba(0,0,0,.42);}
#evHint{position:fixed;left:50%;top:calc(var(--safe-t) + 106px);transform:translateX(-50%);z-index:1200;background:rgba(232,182,44,.97);color:#1A1A18;font-family:var(--sans);font-weight:600;font-size:13px;padding:8px 14px;border-radius:20px;box-shadow:0 4px 14px rgba(0,0,0,.25);pointer-events:none;white-space:nowrap;} /* gold + dark, sits BELOW the tabs (was 62px -> overlapped them) */
#evHint[hidden]{display:none;}
#favHint{position:fixed;left:50%;top:calc(var(--safe-t) + 62px);transform:translateX(-50%);z-index:1200;background:rgba(232,182,44,.97);color:#1A1A18;font-family:var(--sans);font-weight:600;font-size:13px;line-height:1.35;padding:9px 15px;border-radius:16px;box-shadow:0 4px 14px rgba(0,0,0,.25);pointer-events:none;text-align:center;max-width:min(86vw,320px);}
#favHint[hidden]{display:none;}
/* transient toast when a member action changes their Dashboard (gold, matching the hints) */
#memToast{position:fixed;left:50%;top:calc(var(--safe-t) + 106px);transform:translateX(-50%) scale(.96);z-index:1300;display:inline-flex;align-items:center;gap:8px;background:rgba(232,182,44,.97);color:#1A1A18;font-family:var(--sans);font-weight:700;font-size:14px;padding:11px 18px;border-radius:16px;box-shadow:0 6px 22px rgba(0,0,0,.3);pointer-events:none;opacity:0;transition:opacity .22s ease,transform .22s ease;white-space:nowrap;max-width:calc(100vw - 24px);} /* top-center, below the tabs — same spot as the #evHint pill (they match) */
#memToast.show{opacity:1;transform:translateX(-50%) scale(1);}
#memToast svg{width:16px;height:16px;flex:0 0 16px;}
.evcard__row{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 10px;}
.evcard__badge{display:inline-flex;align-items:center;gap:5px;background:#16A34A;color:#fff;font-weight:700;font-size:12px;padding:3px 9px;border-radius:20px;}
.evcard__badge svg{width:12px;height:12px;}
.evcard__badge--fast{box-shadow:inset 0 0 0 1.5px var(--gold);}
.evcard__brand{display:inline-flex;align-items:center;background:var(--color-nav-pill);color:#3D3B37;font-weight:600;font-size:12px;padding:3px 10px;border-radius:20px;}
.evcard__line{font-size:13.5px;color:#4a4a45;margin:3px 0;}
.evcard__line b{color:var(--ink);font-weight:600;}
.evcard__attrib{font-size:11px;color:#8a857c;margin-top:12px;}
body.layer-active .clusterwrap{opacity:.45;pointer-events:none;}
/* triangle layer markers: count for a cluster, layer icon for a single */
.triwrap{cursor:pointer;}
.tri{position:relative;display:flex;align-items:flex-end;justify-content:center;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}
.tri__edge,.tri__shape{position:absolute;clip-path:polygon(50% 2%,98% 96%,2% 96%);}
.tri__edge{inset:-2px;background:#fff;}
.tri__shape{inset:0;background:var(--c);}
.tri__n{position:relative;color:#fff;font-family:var(--cond);font-weight:800;font-size:14px;line-height:1;margin-bottom:14%;}
.tri__ic{position:relative;color:#fff;display:flex;margin-bottom:12%;}
.tri__ic svg{width:13px;height:13px;display:block;}
.tri.is-sel{transform:scale(1.42);} /* clicked layer icon stands out */
.cluster.is-sel::after,.gem.is-sel::after,.tri.is-sel::after,.sqm.is-sel::after,.ev.is-sel::after,.lpin.is-sel::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150%;height:150%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.92) 0%,rgba(255,255,255,0) 66%);z-index:-1;pointer-events:none;animation:glowc 4s ease-in-out infinite;} /* one animated halo behind ANY selected marker (Boutel/gem/park/rest/EV/band pin); slower 4s pulse (was parks/rest-only at 2s) */
/* rounded-square marker (Rest Areas): a small square badge, not a triangle */
.sqm{position:relative;display:flex;align-items:center;justify-content:center;border-radius:5px;box-sizing:border-box;background:var(--c);opacity:.5;} /* 50% transparent -> subtle */
.sqm__n{color:#fff;font-family:var(--cond);font-weight:800;font-size:11px;line-height:1;}
.sqm.is-sel{opacity:1;transform:scale(1.45);filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));border:2px solid #fff;} /* selected restroom: full opacity + stroke */
/* Gems: Phosphor diamond, rest-area size, sits under everything (wrap z-index:1); a CLUSTER shows a count number so it reads as a group (like the boutel circles), not a single tappable gem */
.gemwrap{cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;} /* transparent 40px circle = bigger tap target; small diamond stays centered on the point */
.gem{position:relative;display:flex;align-items:center;justify-content:center;width:26px;height:26px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));} /* single gems enlarged 18->26 so they aren't missed (cluster width is set inline, so this affects singles only) */
.gem svg{width:26px;height:26px;display:block;}
.gem--cluster svg{width:100%;height:100%;} /* cluster diamond is sized inline by count -> let the SVG fill it */
.gem__n{position:absolute;top:49%;left:50%;transform:translate(-50%,-50%);color:#fff;font-family:var(--cond);font-weight:800;font-size:17px;line-height:1;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.45);} /* count centered on the diamond — larger so a numbered cluster reads as "tap to zoom in" */
.gem.is-sel{transform:scale(1.5);filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));}
@keyframes glowc{0%,100%{transform:translate(-50%,-50%) scale(.85);opacity:.5;}50%{transform:translate(-50%,-50%) scale(1.2);opacity:1;}}
/* handle butts flush against the band (square inner edge, rounded outer) so gold + dark read as one piece */
.lband__handle{position:absolute;left:-36px;top:0;height:100%;width:38px;display:flex;align-items:center;justify-content:center;padding-right:2px;background:var(--teal);border:0;border-radius:15px 0 0 15px;box-shadow:-3px 2px 12px rgba(0,0,0,.28);cursor:pointer;color:#fff;touch-action:none;}
.lband__handle svg{width:21px;height:21px;}
.lband__content{padding:9px 11px 11px;}/* two titled grouping pills, side by side (horizontal-scroll safety on very narrow screens) */
.lgroups{display:flex;gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
.lgroup{display:flex;flex-direction:column;gap:4px;flex:0 0 auto;}
.lgroup:not(:last-child){padding-right:14px;border-right:1px solid rgba(255,255,255,.16);} /* subtle divider when another pill follows */
.lgroup__title{font-family:var(--cond);font-weight:800;letter-spacing:.09em;text-transform:uppercase;font-size:10.5px;color:#b8b3a6;text-align:center;}
.lseg{display:inline-flex;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;overflow:hidden;}
.lseg .lctl{display:inline-flex;align-items:center;gap:6px;border:0;border-left:1px solid rgba(255,255,255,.16);background:transparent;color:#fff;font-size:11.5px;font-weight:600;padding:7px 9px;cursor:pointer;white-space:nowrap;}
.lctl__dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;box-shadow:0 0 0 1px rgba(255,255,255,.5);}
.lseg .lctl.active .lctl__dot{box-shadow:0 0 0 1px rgba(58,46,0,.35);}
.lctl__mark{display:none;align-items:center;flex:0 0 auto;}
.lctl__mark svg{width:13px;height:13px;display:block;}
.lseg .lctl.active .lctl__mark{display:inline-flex;} /* mark shows only when the filter is active */
.lseg .lctl:first-child{border-left:0;}
.lseg .lctl:active{background:rgba(255,255,255,.06);}
.lseg .lctl.active{background:var(--gold);color:var(--color-gold-text);}
/* ---- layer pins on the map (muted, never gold/teal so boutels stay the stars) ---- */
.lpinwrap{cursor:pointer;}
.lpin{position:relative;width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .12s;transform-origin:center;}
.lpin svg{width:12px;height:12px;display:block;}
.lpin.is-sel{transform:scale(1.3);}

/* ---- "Closest Boutels" accordion in the layer-item sheet ---- */
.litem__type{display:inline-flex;align-items:center;gap:7px;font-family:var(--cond);font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:12px;color:#fff;padding:4px 11px;border-radius:999px;}
.litem__type svg{width:13px;height:13px;flex:0 0 13px;}
/* layer-card header: purple-gem (or layer-color) placeholder box + white layer icon, matched to the boutel thumb */
.litem__ph{flex:0 0 96px;width:96px;height:72px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;}
.litem__ph svg{width:34px;height:34px;}.litem__area{padding:2px 0 4px;}.litem__area+.litem__area{border-top:1px solid var(--line);padding-top:10px;margin-top:8px;}
.litem__area-h{font-family:var(--sans);font-weight:600;font-size:14.5px;color:var(--ink);margin-bottom:3px;}
.litem__area p{margin:0;font-size:14px;line-height:1.6;color:#3a3a35;}
.litem__list{margin:0;padding-left:18px;}.litem__list li{font-size:14px;line-height:1.6;color:#3a3a35;margin-bottom:7px;}
.litem__list li:last-child{margin-bottom:0;}.litem__list strong{color:var(--ink);}
/* Website row on a layer card: short readable domain + a copy button (copy-only, never a link). Mirrors .card3__addr. */
/* "You picked this one" drop pin — hovers over the selected place so it's unmistakable which one you chose. */
.selpin{pointer-events:none;z-index:1200;} /* on TOP of everything, incl. Boutel clusters (900): a selected/searched place must never hide behind a nearby pin */
/* The SELECTED marker is lifted above the clusters directly in JS (each marker factory sets its wrap's
   z-index to 1150 when selected) — deterministic, and not reliant on :has() browser support. */
.selpin__in{width:40px;height:40px;color:var(--gold);filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));animation:selpin-drop .5s cubic-bezier(.34,1.35,.64,1) both;}
.selpin__in svg{width:100%;height:100%;display:block;stroke:#fff;stroke-width:8px;paint-order:stroke;} /* white halo so the gold pin pops on any basemap */
/* the teal "View on Map" companion pin: a nearby/closest place shown ALONGSIDE the gold selected pin. Just below
   the gold pin's z (1200) so the place being viewed stays on top if they overlap. Teal (vs the gold primary). */
.viewpin{pointer-events:none;z-index:1199;}
.viewpin__in{width:40px;height:40px;color:var(--teal);filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));animation:selpin-drop .5s cubic-bezier(.34,1.35,.64,1) both;}
.viewpin__in svg{width:100%;height:100%;display:block;stroke:#fff;stroke-width:8px;paint-order:stroke;} /* identical to the gold selection pin (its small ring), just teal */
/* soft glow halo under BOTH the gold selected pin and the teal companion pin, so each place clearly pops over the dim scrim */
.selpin__in,.viewpin__in{position:relative;}
.selpin__in::before,.viewpin__in::before{content:'';position:absolute;left:50%;top:40%;width:66px;height:66px;transform:translate(-50%,-50%);border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 62%);}
/* a lifted nearby marker (its OWN real icon, pulled above the dim by "View on Map") gets the SAME highlight as the place you clicked: a thin white edge, a teal glow, and the pulsing white halo */
.viewlift{filter:drop-shadow(0 0 1.2px #fff) drop-shadow(0 0 1.2px #fff) drop-shadow(0 0 7px rgba(26,143,124,.95)) !important;}
.viewlift::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150%;height:150%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.92) 0%,rgba(255,255,255,0) 66%);z-index:-1;pointer-events:none;animation:glowc 4s ease-in-out infinite;}
/* the "View on Map" connector: a DOM SVG ABOVE the dim scrim (1000) but UNDER the two target markers/pins
   (1150-1200), so it's a crisp white line with a black glow that tucks beneath the places it connects */
#viewline{position:absolute;inset:0;z-index:1100;pointer-events:none;}
#viewline svg{width:100%;height:100%;display:block;overflow:visible;}
.viewline__glow{stroke:#000;stroke-width:5;stroke-linecap:round;opacity:.9;filter:blur(5px);} /* a soft BLACK glow (radiating halo, not a hard casing) around the white line, like the tack's white glow */
.viewline__main{stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-dasharray:7 7;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.85));} /* + a tight dark shadow so each white dash stays crisp against the glow */
@keyframes selpin-drop{0%{transform:translateY(-18px);opacity:0;}55%{transform:translateY(4px);opacity:1;}100%{transform:translateY(0);}}
.card3__web{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:14px;}
.card3__web .weburl{color:var(--muted);word-break:break-word;} /* not a link — muted so it doesn't read as clickable */
.log-line{margin-bottom:7px;}.log-line:last-child{margin-bottom:0;}.log-label{font-weight:600;color:var(--ink);}
/* accordions matched to the production ag-accordion treatment (tan-tint trigger, nav-pill when open, teal chevron) */
.acc{margin-bottom:6px;}
.card3 + .acc{margin-top:12px;} /* breathing room between the card and its first accordion (e.g. Nearest Boutels) */
.acc__h{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:12px 14px;font-family:var(--sans);font-weight:600;font-size:15px;color:var(--teal);background:var(--color-tan-tint);border:1px solid var(--line);border-radius:7px;cursor:pointer;text-align:left;} /* subtle border so the accordion reads as a distinct block */
.acc.open .acc__h{background:var(--color-nav-pill);}
.acc__chev{flex-shrink:0;color:var(--teal);transition:transform .22s ease;}.acc.open .acc__chev{transform:rotate(180deg);}
.acc__list{display:none;padding:12px 14px 14px;font-size:14px;line-height:1.6;color:#3a3a35;}.acc.open .acc__list{display:block;}
.acc__list>p{margin:0 0 10px;}.acc__list>p:last-child{margin-bottom:0;}
.nearby{display:flex;align-items:flex-start;gap:11px;padding:11px 4px;border-top:1px solid var(--line);} /* not a link -> only the explicit "Learn more" opens the listing (no accidental taps while scrolling) */
.learn-more{display:inline-block;margin-top:9px;font-size:13px;font-weight:700;color:var(--teal);text-decoration:underline;text-underline-offset:2px;} /* the one standard "Learn More" link on every boutel card */
.learn-more::after{content:"";display:inline-block;margin-left:6px;border-left:5px solid currentColor;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;vertical-align:middle;} /* triangle -> (inline-block, so it's not underlined) */
.learn-more:hover{opacity:.82;}
.nearby__cta{margin-top:9px;font-size:13px;font-weight:600;color:var(--muted);} /* "35 miles away | Learn More" */
.nearby__cta .learn-more{margin-top:0;}
.nearby__viewmap{display:inline;border:0;background:none;padding:0;margin:0;font:inherit;font-weight:700;color:var(--teal);text-decoration:underline;text-underline-offset:2px;cursor:pointer;} /* looks like Learn More but is a button (drops the teal companion pin; no navigation) */
@media (hover:hover){.nearby__viewmap:hover{opacity:.82;}}
.nearby__ph{flex:0 0 52px;width:52px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;} /* bed placeholder on the tier color when there's no photo */
.nearby__ph svg{width:22px;height:22px;}
.nearby .listing__badge{font-size:12px;padding:3px 10px;letter-spacing:.1em;} /* compact designation badge in the "closest Boutels" rows */
.nearby__line{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.35;}
.nearby__contact a{color:var(--teal);font-weight:600;text-decoration:none;}
.nearby__contact a:hover{text-decoration:underline;}
.nearby .card__amen{margin-top:6px;}
.nearby:first-child{border-top:0;}.nearby:active{background:var(--bg);}
.nearby__img{flex:0 0 52px;width:52px;height:40px;border-radius:8px;object-fit:cover;background:linear-gradient(135deg,#e9e4d8,#d8d2c4);}
.nearby__b{flex:1;min-width:0;}
.nearby__n{font-family:var(--cond);font-weight:800;font-size:16px;line-height:1.1;color:var(--ink);}
.nearby__badge{margin-top:5px;}
.nearby__m{font-size:12px;color:var(--muted);margin-top:2px;}
.nearby__d{font-size:12.5px;font-weight:700;color:var(--teal);white-space:nowrap;text-align:right;}
.nominate-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.48);z-index:2000;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.nominate-drawer{z-index:2001;} /* only genuine override: sit above the map controls. Side (left), width, transform, and open-shadow now come from the shared .nominate-drawer, which is left-anchored */
.nominate-drawer__input[type="file"]{padding:8px 10px;font-size:13px;cursor:pointer;} /* photo/video/audio picker */
/* "Share" CTA on a pin card: our solid teal button + media icons (photo/video/audio/reflection) */
.litem__share{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin:10px 0 16px;padding:11px 14px;border:0;border-radius:9px;background:var(--teal);color:var(--color-white);font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:14px;cursor:pointer;}
.litem__share svg{width:17px;height:17px;flex:0 0 17px;}
.litem__share-lab{margin-right:1px;}
.litem__share--locked{background:var(--muted);} /* non-member: grayed + a lock -> tap opens sign-in */
/* Trip Status pill on a map card — full width, compact segments so it fits the narrow sheet (.member-status = shared.css) */
.card__status{margin:12px 0 4px;} /* the chip group lives in shared.css (.member-status) */
.card__status .member-status{display:flex;width:100%;} /* span the box (like the dashboard + listing pill) — content-width read as "scrunched" */
.card__status .member-status__seg{flex:1 1 0;justify-content:center;}
/* Private per-place member note on a map card: a locked row for guests, an .acc accordion (matching the card's other accordions) for members */
.card__notesw{margin:6px 0 3px;}
.card__note--locked{display:flex;align-items:center;gap:8px;width:100%;padding:12px 14px;border-radius:7px;background:var(--color-tan-tint);font-family:var(--sans);font-weight:600;font-size:15px;color:var(--muted);cursor:pointer;}
.card__note--locked svg{width:16px;height:16px;flex:0 0 16px;}
.card__note--locked .card__note-lab{flex:1;}
.acc__h .card__note-t{flex:1;display:flex;align-items:center;gap:8px;min-width:0;}
.card__note-ico{width:17px;height:17px;flex:0 0 17px;color:var(--teal);}
.card__note-state{display:flex;align-items:center;gap:4px;flex-shrink:0;font-weight:600;font-size:13px;color:var(--muted);}
.card__note-state svg{width:15px;height:15px;color:var(--teal);}
.card__note-ta{width:100%;box-sizing:border-box;min-height:74px;resize:vertical;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--color-bg);font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--ink);}
.card__note-ta:focus{outline:none;border-color:var(--teal);}
.card__note-foot{display:flex;align-items:center;justify-content:space-between;margin-top:9px;}
.card__note-count{font-size:12px;color:var(--muted);}
.card__note-save{padding:7px 16px;border:0;border-radius:7px;background:var(--teal);color:var(--color-white);font-family:var(--sans);font-weight:700;font-size:13px;cursor:pointer;}
.card__note-save:active{opacity:.85;}
@media (hover:hover){.litem__share:hover{opacity:.9;}}
/* ===== THREE-PART CARD: image (¼) | info | actions. Width-capped so actions land near center on a wide sheet, not far right. ===== */
.card3{display:flex;gap:20px;align-items:flex-start;max-width:940px;}
.card3__thumb{flex:0 0 22%;max-width:140px;position:relative;}
.card3__img{width:100%;aspect-ratio:1/.82;object-fit:cover;border-radius:12px;display:block;background:linear-gradient(135deg,#e9e4d8,#d8d2c4);}
/* magnifier chip on a card thumbnail (only when there's a real image) -> opens the lightbox */
.card3__thumb--zoom{cursor:zoom-in;}
.card3__zoom{position:absolute;right:5px;bottom:5px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.4);}
.card3__zoom svg{width:15px;height:15px;}
/* Photo lightbox — enlarge a thumbnail over a dark backdrop that blocks the page; above every panel/drawer (2001). */
.lightbox{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.82);}
.lightbox[hidden]{display:none;}
.lightbox__stage{position:relative;display:inline-flex;} /* shrinks to the photo so the X sits on the photo's corner, not the screen's */
.lightbox__img{max-width:92vw;max-height:84vh;object-fit:contain;border-radius:10px;box-shadow:0 12px 44px rgba(0,0,0,.55);background:var(--ink);display:block;}
/* the lightbox close uses the shared .nominate-drawer__close treatment (dark rounded square + white X), same as the drawers; .lightbox__x is just the JS hook */
.lightbox__nav{position:fixed;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.lightbox__nav--prev{left:10px;}
.lightbox__nav--next{right:10px;}
.lightbox__nav[hidden]{display:none;}
.lightbox__count{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 18px);left:50%;transform:translateX(-50%);color:#fff;font-family:var(--sans);font-size:14px;background:rgba(0,0,0,.5);padding:5px 13px;border-radius:20px;}
.lightbox__count[hidden]{display:none;}
.card3__ph{width:100%;aspect-ratio:1/.82;border-radius:12px;display:flex;align-items:center;justify-content:center;}
.card3__ph svg{width:34px;height:34px;color:var(--color-teal);}
.card3__ph.litem__ph svg{color:#fff;} /* gem/park/rest placeholder sits on a SATURATED layer color -> white icon (teal vanished against it). Boutel placeholder keeps teal (light tint bg). */
.card3__info{flex:1 1 auto;min-width:0;}
/* name + favorite star on the first line (star pinned right); badges wrap on their own line below, so a long
   name never pushes the star out of place and the badges have room to grow (Dark Sky, National Park, ...) */
.card3__namerow{display:flex;align-items:flex-start;gap:8px;}
.card3__name{flex:1 1 auto;min-width:0;font-family:var(--cond);font-weight:800;font-size:22px;line-height:1.06;color:var(--ink);}
.card3__namerow .favbtn{flex:0 0 auto;}
.card3__badges{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:6px;}
.card3__badges .listing__badge,.card3__badges .litem__type{font-size:0.6rem;padding:3px 9px;letter-spacing:.09em;margin:0;}
.card3__addr{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:14px;color:var(--ink);}
.card3__phone{margin-top:6px;font-size:14px;}
.card3__amen{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px 14px;}
/* Learn More = our standard teal button (not a link) so it isn't missed */
.card3 .learn-more{display:inline-flex;align-items:center;margin-top:13px;padding:9px 18px;background:var(--teal);color:#fff;border-radius:9px;font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:13px;text-decoration:none;}
.card3 .learn-more::after{border-left-color:#fff;}
@media (hover:hover){.card3 .learn-more:hover{opacity:.9;text-decoration:none;}}
/* amenities on the card = QUIET (not button-like): muted text with a small dot */
.amenity--quiet{background:transparent;color:var(--muted);padding:0;border-radius:0;font-size:12.5px;display:inline-flex;align-items:center;gap:5px;}
.amenity--quiet::before{content:"";width:5px;height:5px;border-radius:50%;background:#b9b3a8;}
/* actions column (3rd part) */
.card3__actions{flex:0 0 340px;border-left:1px solid var(--line);padding-left:20px;display:flex;flex-direction:column;gap:11px;} /* the "My Trip" half — roomy so the status pill reads with longer segments */
.card3__acthead{display:flex;align-items:center;justify-content:space-between;}
.card3__actlabel{font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:12px;color:var(--muted);}
.card3__actions .card__status{margin:0;}
.card3__actions .member-status{width:100%;justify-content:center;}
.card3__actions .member-status__seg{flex:1 1 0;justify-content:center;padding:8px 6px;gap:5px;font-size:0.78rem;}
.card3__actions .member-status__seg svg{width:17px;height:17px;flex:0 0 17px;}
.card3__actions .card__notesw{margin:0;}
.card3__actions .litem__share{margin:2px 0 0;}
/* guest: the whole column is ONE lock -> sign-in */
.card3__actions--locked{align-items:center;justify-content:center;text-align:center;gap:10px;cursor:pointer;color:var(--muted);padding-top:4px;}
.card3__lock{width:40px;height:40px;border-radius:50%;background:var(--color-tan-tint);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.card3__lock svg{width:20px;height:20px;color:var(--muted);}
.card3__lockt{font-size:11.5px;font-weight:600;line-height:1.4;}
.card3__signlink{color:var(--teal);text-decoration:underline;} /* make "Sign in" read as a tappable link */
/* Note + Share = matching buttons */
.card3__actrow{display:flex;gap:8px;margin-top:2px;}
.card3__actbtn{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;border:1.5px solid var(--line);border-radius:9px;background:var(--color-white);color:var(--ink);font-family:var(--sans);font-weight:600;font-size:13px;cursor:pointer;}
.card3__actbtn svg{width:17px;height:17px;flex:0 0 17px;color:var(--teal);}
.card3__actbtn--has{border-color:var(--teal);color:var(--teal);}
.card3__actbtn:disabled{background:var(--color-tan-tint);border-color:var(--color-border);color:var(--color-text-muted);cursor:default;} /* grayed out until a status is set */
.card3__actbtn:disabled svg{color:var(--color-text-muted);}
.card3__actbtn--share{background:var(--teal);border-color:var(--teal);color:#fff;}
.card3__actbtn--share svg{color:#fff;}
@media (hover:hover){.card3__actbtn:not(:disabled):hover{border-color:var(--teal);}.card3__actbtn--share:hover{opacity:.9;}}
/* "+ Trip Planner" -> "✓ Trip Planner": a full-width CTA; filled teal to add, flips to the outlined "in" state once added */
.card3__trip{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin:8px 0 0;padding:11px 14px;border:1.5px solid var(--teal);border-radius:9px;background:var(--teal);color:var(--color-white);font-family:var(--sans);font-weight:700;font-size:13.5px;cursor:pointer;}
.card3__trip svg{width:18px;height:18px;flex:0 0 18px;color:var(--color-white);}
.card3__trip--in{background:var(--color-white);color:var(--teal);}
.card3__trip--in svg{color:var(--teal);}
@media (hover:hover){.card3__trip:hover{opacity:.9;}}
/* Notes drawer extras (My Notes + What you shared) */
/* phone: stack — image+info on a row, actions below */
@media (max-width:640px){
  /* On a phone the Filters panel covers the map, so the live per-row detail (in-view count + the
     eye / zoom-in / zoom-out / crossed-eye state icons) can't be seen to change as you navigate —
     hide it as unnecessary clutter. This removes the count, the eyeball, both magnifiers, and the eye-slash. */
  .legend__zhint{display:none;}
  .card3{flex-wrap:wrap;gap:14px 16px;max-width:none;}
  .card3__thumb{flex:0 0 84px;}
  .card3__info{flex:1 1 55%;}
  .card3__actions{flex:1 1 100%;border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:13px;margin-top:2px;}
  .card3__actions--locked{flex-direction:row;justify-content:flex-start;text-align:left;padding-top:13px;}
}
/* EV legend swatches reuse the real map pin (.ev / .ev--fast) but sized to sit with the other legend rows */
.legend__sw .ev{width:21px;height:21px;box-shadow:0 1px 4px rgba(0,0,0,.28);cursor:default;}
.legend__sw .ev svg{width:12px;height:12px;}
.legend__sw .ev--cluster{width:26px;height:26px;} /* match the Boutel Cluster swatch size */
.legend__sw .ev--cluster .ev__inner svg{width:9px;height:9px;margin-bottom:-1px;}
.legend__sw .ev--cluster .ev__n{font-size:10px;}
/* Large screens (tablets/desktop, tall enough to exclude landscape phones): a bigger, more prominent header.
   Placed at the END of the styles so its offset overrides win over the base .menu-panel/.sugg/.lband rules. */
@media (min-width:820px) and (min-height:680px){
  .top{padding:calc(var(--safe-t) + 14px) 22px 14px;gap:16px;}
  .brand img{height:44px;}
  .search{height:58px;border-radius:13px;padding:0 20px;gap:12px;border-width:2px;}
  .search svg{width:24px;height:24px;flex:0 0 24px;}
  .search input{font-size:20px;}
  .menu{flex:0 0 58px;height:58px;width:58px;border-radius:13px;}
  .menu svg{width:32px;height:32px;}
  /* push the dropdowns/panels/layer UI below the taller header */
  .sugg,.menu-panel{top:calc(var(--safe-t) + 102px);}
  /* the search dropdown butts RIGHT against the search bar (header bottom = safe-t + 86px) and, being
     above the gold tabs (z 1400 > 900), covers them so they can't be misclicked through a gap. */
  .geocomplete{top:calc(var(--safe-t) + 86px + var(--admin-bar-h, 0px));}
  .menu-panel{max-height:calc(100vh - var(--safe-t) - 122px);}
  .lband{top:calc(var(--safe-t) + 108px);}
  .layer-close{top:calc(var(--safe-t) + 166px);}
  #evHint,#favHint,#memToast{top:calc(var(--safe-t) + 142px);} /* clear of the lower desktop tabs */
  .legend{top:calc(var(--safe-t) + 128px);} /* tabs sit lower on the taller desktop header */
}

/* ===== Gold tabs hanging under the header — the map's primary controls, out where they're seen ===== */
.maptabs{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--safe-t) + 54px + var(--admin-bar-h, 0px));z-index:900;display:flex;gap:6px;max-width:calc(100vw - 16px);} /* + admin-bar-h so the tabs drop below the gold admin bar too (like .top/.legend/.menu-panel) */
.maptab{display:inline-flex;align-items:center;gap:7px;border:0;background:var(--gold);color:var(--color-gold-text);font-family:var(--sans);font-weight:700;font-size:13px;line-height:1;padding:9px 14px 10px;border-radius:0 0 13px 13px;box-shadow:0 5px 14px rgba(0,0,0,.3);cursor:pointer;white-space:nowrap;}
.maptab svg{width:16px;height:16px;flex:0 0 16px;display:block;}
.maptab:active{transform:translateY(1px);}
.maptab--locked{background:#cfc9bd;color:#6b665c;} /* Dashboard for guests: grayed until signed in */
.maptab__lock{width:12px;height:12px;flex:0 0 12px;margin-left:-1px;}
.maptab:not(.maptab--locked) .maptab__lock{display:none;} /* lock only shows when locked */
@media (hover:hover){.maptab:hover{filter:brightness(1.05);}}
@media (max-width:380px){.maptab{padding:9px 11px 10px;font-size:12px;gap:5px;}} /* tighten so 3 tabs fit a small phone */

/* Filters drawer: segmented Stays | Map | EV (reuses the shared .nominate-drawer shell) */
.filt-seg{display:flex;gap:2px;background:var(--color-nav-pill);border-radius:11px;padding:3px;margin:2px 0 16px;}
.filt-seg__btn{flex:1 1 0;border:0;background:transparent;padding:9px 10px;border-radius:8px;font-family:var(--sans);font-weight:700;font-size:13px;color:var(--muted);cursor:pointer;}
.filt-seg__btn.is-on{background:var(--teal);color:var(--color-white);box-shadow:0 1px 3px rgba(0,0,0,.2);}
.filt-panel[hidden]{display:none;}
.filt-panel .menu-h{display:none;} /* the section titles are the segments now */

/* Member segment: sign-in CTA (guests) or "show only my ..." lens chips (members) */
.memfilt-hint{font-size:13px;line-height:1.5;color:var(--muted);margin:2px 0 12px;}
.memlens{display:flex;flex-wrap:wrap;gap:8px;}
.memlens-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-family:var(--sans);font-weight:600;font-size:13px;cursor:pointer;}
.memlens-chip svg{width:17px;height:17px;flex:0 0 17px;color:var(--muted);display:block;}
.memlens-chip.is-on{background:var(--teal);border-color:var(--teal);color:#fff;}
.memlens-chip.is-on svg{color:#fff;}
.memfilt-clear{display:block;width:100%;margin-top:14px;padding:10px;border:0;border-radius:9px;background:var(--color-tan-tint);color:var(--teal);font-family:var(--sans);font-weight:700;font-size:13px;cursor:pointer;}
.memfilt-lock{text-align:center;padding:10px 4px 4px;}
.memfilt-lock__ic{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:50%;background:var(--color-tan-tint);color:var(--muted);margin-bottom:12px;}
.memfilt-lock__ic svg{width:20px;height:20px;}
.memfilt-lock__t{font-size:14px;line-height:1.55;color:var(--muted);margin:0 0 16px;}

/* Big screens: the header is taller, so drop the tabs to clear it. Placed AFTER the base
   .maptabs rule so this override wins by source order when the query matches. */
@media (min-width:820px) and (min-height:680px){ .maptabs{top:calc(var(--safe-t) + 86px + var(--admin-bar-h, 0px));} }

/* ── The State drawer (state-drawer.js): the ⓘ State tab + location-aware content ── */
.maptab__full{display:none;} .maptab__abbr{display:inline;font-weight:800;}
/* mobile: drop the ⓘ icon on State + Area so their full labels fit (State's abbr is only a "·") */
@media (max-width:819px){
  #tabState svg, #tabArea svg{display:none;}
  #tabState .maptab__full, #tabArea .maptab__full{display:inline;}
  #tabState .maptab__abbr, #tabArea .maptab__abbr{display:none;}
}
.maptab--disabled{opacity:.42;pointer-events:none;}
.state-drawer .nominate-drawer__inner{padding-top:44px;}
#stateBody .acc{margin:0 0 8px;}
.sd-hero{display:flex;align-items:flex-end;justify-content:center;height:180px;margin:0 0 14px;border-radius:12px;background:linear-gradient(135deg,var(--teal),#0f5f5f);overflow:hidden;}
.sd-hero--area{background:linear-gradient(135deg,#4a4a44,#1A1A18);}
.sd-hero__name{font-family:var(--cond);font-weight:800;font-size:32px;line-height:1;text-transform:uppercase;letter-spacing:-.01em;color:var(--color-white);padding:0 16px 16px;text-align:center;}
/* hero with a real image (state photo or the illustrated region map): image fills, name overlays the bottom */
.sd-hero--img{position:relative;padding:0;background:var(--color-tan-tint);}
.sd-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .4s ease;} /* fade up over the tan placeholder on load instead of popping in (class added onload) */
.sd-hero__img--in{opacity:1;}
.sd-hero__name--over{position:relative;z-index:1;width:100%;padding:26px 16px 12px;text-align:left;font-size:26px;background:linear-gradient(transparent,rgba(0,0,0,.62));}
.sd-chev{flex:0 0 auto;transition:transform .2s ease;}
.acc.open .sd-chev{transform:rotate(180deg);}
.sd-about{margin:0;font-size:14px;line-height:1.6;color:#3a3a35;}
.sd-facts{margin:0;padding-left:18px;font-size:14px;line-height:1.7;color:#3a3a35;}
.sd-facts li{margin:0 0 3px;}
.sd-places{list-style:none;margin:0;padding:0;}
.sd-places li{padding:8px 0;border-top:1px solid var(--line);}
.sd-places li:first-child{border-top:0;padding-top:0;}
.sd-place__name{display:block;font-weight:700;font-size:14px;color:var(--ink);}
.sd-place__desc{display:block;font-size:13px;color:var(--muted);margin-top:1px;}
.sd-bcards{display:flex;flex-direction:column;gap:9px;}
.sd-bcard{display:flex;gap:11px;align-items:center;color:inherit;padding:6px;border-radius:10px;border:1px solid var(--line);}
.sd-bcard__img{width:64px;height:48px;flex:0 0 64px;border-radius:7px;object-fit:cover;}
.sd-bcard__img--none{background:var(--color-teal-tint);display:flex;align-items:center;justify-content:center;color:var(--color-teal);}
.sd-bcard__bed{width:26px;height:26px;display:block;}
.sd-bcard__body{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.sd-bcard__name{display:block;font-weight:700;font-size:14px;color:var(--ink);line-height:1.25;}
.sd-bcard__meta{display:block;font-size:12px;color:var(--muted);margin-top:1px;}
/* "View on Map" text link under the meta line (the card itself is not clickable, so drag-scroll is safe) */
.sd-bcard__map{display:inline-flex;align-items:center;gap:3px;margin-top:5px;padding:0;background:none;border:0;cursor:pointer;color:var(--color-teal);font-family:var(--sans);font-size:12px;font-weight:600;}
.sd-bcard__map:hover{text-decoration:underline;}
.sd-bcard__arrow{width:13px;height:13px;display:block;}
.sd-empty{font-size:13px;color:var(--muted);margin:2px 0;}
@media (min-width:820px){ .maptab__full{display:inline;} .maptab__abbr{display:none;} }

/* ============================================================================
   ACCESSIBLE LIST VIEW ("All Boutels" database) — toggled by the header's
   universal-access button. Covers the map + tabs; the dark header stays on top
   (header is z-1000, this is z-950). Native table / select / buttons so it's
   keyboard- and screen-reader-friendly by default.
   ============================================================================ */
/* header toggle button (icon + short label), matching the header button family */
.top__a11y{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 11px;background:var(--teal);border:0;border-radius:10px;color:#fff;font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.01em;cursor:pointer;}
.top__a11y svg{width:22px;height:22px;flex:0 0 auto;}
.top__a11y:active{transform:scale(.94);}
.top__a11y[aria-pressed="true"]{background:var(--gold);color:var(--color-gold-text);}
.top__a11y-lab{white-space:nowrap;}
@media (max-width:640px){ .top__a11y-lab{display:none;} .top__a11y{padding:0 9px;} } /* phones: icon only, more room for the search bar */
@media (min-width:820px) and (min-height:680px){ .top__a11y{height:58px;border-radius:13px;padding:0 16px;font-size:17px;gap:8px;} .top__a11y svg{width:30px;height:30px;} } /* match the taller desktop header buttons (search/menu = 58px) */

/* the overlay */
/* full-screen, ABOVE the header (z 1200 > header 1000) so the map's search bar is covered —
   the view has its own close button, so there's no confusing second search up top */
.a11y-view{position:fixed;inset:0;z-index:1200;background:var(--bg);color:var(--ink);
  display:flex;flex-direction:column;
  padding-top:calc(var(--admin-bar-h, 0px) + var(--safe-t));
  transform:translateY(100%);transition:transform .28s ease;}
.a11y-view.is-open{transform:none;}
.a11y-view[hidden]{display:none;}
@media (prefers-reduced-motion: reduce){ .a11y-view{transition:none;} }

.a11y-view__bar{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 16px 8px;border-bottom:1px solid var(--line);}
.a11y-view__h{margin:0;font-family:var(--cond);font-weight:800;font-size:26px;line-height:1.1;color:var(--ink);display:flex;flex-direction:column;}
.a11y-view__sub{font-family:var(--sans);font-weight:400;font-size:13px;color:var(--muted);margin-top:2px;}
.a11y-view__close{flex:0 0 auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;border:0;border-radius:10px;cursor:pointer;}
.a11y-view__close svg{width:22px;height:22px;}

.a11y-view__controls{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);}
.a11y-ctl{display:flex;flex-direction:column;gap:4px;}
.a11y-ctl label{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);}
.a11y-ctl select{height:42px;font-size:15px;font-family:var(--sans);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:0 12px;min-width:170px;}
/* search box: smaller text, magnifier icon (like the main header search) */
.a11y-search{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:0 11px;min-width:210px;}
.a11y-search svg{width:15px;height:15px;color:var(--muted);flex:0 0 auto;}
.a11y-search input{flex:1;min-width:0;border:0;background:none;outline:none;height:38px;font-size:14px;font-family:var(--sans);color:var(--ink);}
.a11y-search:focus-within{outline:3px solid var(--teal);outline-offset:2px;}
/* Pets filter matches the State dropdown's height */
.a11y-pets{height:42px;align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:0 18px;cursor:pointer;}
.a11y-pets[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff;}
.a11y-pets[aria-pressed="true"]::before{content:"\2713";font-weight:800;}
.a11y-view__count{margin:0;align-self:flex-end;font-family:var(--sans);font-size:14px;color:var(--muted);min-height:1.4em;}
/* "Scroll →" button: tap to advance one column; flips to ← at the right end. Hidden when the table fits. */
.a11y-scrollhint{margin-left:auto;align-self:flex-end;display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--teal);background:rgba(26,143,124,.09);border:1px solid var(--teal);border-radius:999px;padding:6px 13px;white-space:nowrap;cursor:pointer;}
.a11y-scrollhint svg{width:15px;height:15px;display:block;}
.a11y-scrollhint__arr{display:inline-flex;}
.a11y-scrollhint--back .a11y-scrollhint__arr{transform:scaleX(-1);} /* point the arrow the other way when scrolling back */
.a11y-scrollhint[hidden]{display:none;}
@media (hover:hover){.a11y-scrollhint:hover{background:rgba(26,143,124,.16);}}
@media (prefers-reduced-motion:no-preference){.a11y-scrollhint__arr svg{animation:a11yNudge 1.1s ease-in-out infinite;}}
@keyframes a11yNudge{0%,100%{transform:translateX(0);}50%{transform:translateX(3px);}}
/* brief highlight on the row you'd tapped, when returning to the list from a listing */
.a11y-t__flash{animation:a11yFlash 1.6s ease;}
@keyframes a11yFlash{0%,100%{background:transparent;}25%{background:rgba(232,182,44,.30);}}
@media (prefers-reduced-motion:reduce){.a11y-t__flash{animation:none;background:rgba(232,182,44,.22);}}

/* the scroll region + table */
.a11y-view__tablewrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;}
.a11y-t{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:15px;line-height:1.5;}
.a11y-t caption{text-align:left;}
.a11y-t thead th{position:sticky;top:0;z-index:1;background:var(--cream);color:var(--brown);text-align:left;font-family:var(--cond);font-weight:800;font-size:14px;letter-spacing:.03em;text-transform:uppercase;padding:0;border-bottom:2px solid var(--line);white-space:nowrap;}
.a11y-t thead th button.js-a11y-sort{width:100%;text-align:left;background:none;border:0;cursor:pointer;font:inherit;color:inherit;padding:11px 14px;display:inline-flex;align-items:center;gap:6px;}
/* sortable columns show both arrows (⇅); the active column shows just its direction (↑/↓).
   the arrow lives in an aria-hidden <span> so a screen reader announces the aria-sort state, not the glyph */
.a11y-t thead th .sortarr{font-size:12px;line-height:1;}
.a11y-t thead th .sortarr::before{content:"\21C5";opacity:.5;}
.a11y-t thead th[aria-sort="ascending"] .sortarr::before{content:"\2191";opacity:1;}
.a11y-t thead th[aria-sort="descending"] .sortarr::before{content:"\2193";opacity:1;}
.a11y-t thead th:not(:has(button)){padding:11px 14px;}
.a11y-t tbody th,.a11y-t tbody td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle;text-align:left;font-weight:400;}
.a11y-t tbody tr:nth-child(even){background:#f0ede6;} /* clearly-visible zebra so the eye tracks across all 7 columns */
.a11y-t tbody tr[hidden]{display:none;}
.a11y-t__name{min-width:180px;}
.a11y-t__name a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.a11y-t__name a:hover{text-decoration-thickness:2px;} /* keep dark text on hover — teal text fails AA (3.76:1); thicken the underline instead */
.a11y-t__state,.a11y-t__city{white-space:nowrap;color:var(--ink);}
.a11y-t__addr{color:var(--muted);min-width:160px;}
.a11y-t__amen{display:flex;flex-direction:column;align-items:flex-start;gap:3px;} /* stack the chips so the column stays narrow */
.a11y-t__amen .amenity{margin:0;color:var(--ink);} /* darken chip text to ink for guaranteed AA contrast */
/* Type badge matches the amenity chip: same font-size + pill padding, and NOT uppercase
   (all-caps reads ~2x taller than the lowercase amenity text at the same size). Scoped to the
   table only — the shared .listing__badge stays uppercase everywhere else on the site. */
.a11y-t__tier .listing__badge{font-size:0.75rem;font-weight:500;padding:4px 12px;letter-spacing:.01em;text-transform:none;}
.a11y-t__none{color:var(--muted);}
.a11y-t__fav,.a11y-t__status,.a11y-t__note{white-space:nowrap;}
.a11y-t__sel{min-height:38px;font-size:15px;font-family:var(--sans);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:0 8px;}
/* icon-only pencil note button (no "Add Note" text); fills teal once a note exists */
.a11y-t__notebtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;background:none;border:1px solid var(--line);border-radius:8px;color:var(--muted);cursor:pointer;}
.a11y-t__notebtn svg{width:18px;height:18px;}
.a11y-t__notebtn:disabled{opacity:.4;cursor:default;} /* note disabled until a status is set */
@media (hover:hover){.a11y-t__notebtn:hover{color:var(--teal);border-color:var(--teal);}}
.a11y-t__notebtn--has{color:var(--teal);border-color:var(--teal);background:rgba(26,143,124,.09);}
/* guests: Status + Note render as grayed controls (→ sign-in), matching the grayed favorite star */
.a11y-t__sel--locked{display:inline-flex;align-items:center;gap:6px;min-height:38px;font-size:14px;color:var(--muted);background:#f0ede6;border:1px solid var(--line);border-radius:8px;padding:0 10px;cursor:pointer;white-space:nowrap;}
.a11y-t__sel--locked svg{width:14px;height:14px;flex:0 0 auto;}
.a11y-t__notebtn--locked{color:#b8b3a6;cursor:pointer;}
/* member-column headers (Favorite/Status/Note): gray + lock when signed out; Status gets a "(sign in)" link */
.a11y-t__mh{padding:11px 14px;}
.a11y-t__mh.is-locked{color:var(--muted);}
.a11y-t__mh svg{width:12px;height:12px;vertical-align:middle;margin-left:4px;opacity:.75;}
.a11y-t__signin{background:none;border:0;padding:0;margin-left:6px;color:var(--ink);text-decoration:underline;font-family:var(--sans);font-weight:600;font-size:11px;text-transform:none;letter-spacing:0;cursor:pointer;}
@media (hover:hover){.a11y-t__signin:hover{color:var(--teal);}}
/* deter casual "drag-select the whole list → copy"; the per-row copy button (JS) still works.
   NOTE: a light deterrent only — the rows live in the page source for SEO, so View-Source / scrapers
   get everything regardless. Selection is left ON in the search box + controls. */
.a11y-t{-webkit-user-select:none;user-select:none;}
.a11y-t input,.a11y-t select,.a11y-t textarea{-webkit-user-select:auto;user-select:auto;}
.a11y-t__act--locked svg{width:16px;height:16px;flex:0 0 auto;}
/* phones: tighten to reduce sideways scroll — floor font at 14px (AA), stack amenities, trim widths */
@media (max-width:640px){
  .a11y-t{font-size:14px;}
  .a11y-t tbody th,.a11y-t tbody td{padding:8px 9px;}
  .a11y-t thead th button.js-a11y-sort,.a11y-t thead th:not(:has(button)),.a11y-t__mh{padding:9px 9px;}
  .a11y-t__name{min-width:128px;}
  .a11y-t__addr{min-width:0;}
  .a11y-t__sel{min-height:36px;font-size:14px;}
  .a11y-t__notebtn{width:36px;height:36px;}
}
/* keyboard focus — clear, high-contrast, everywhere in the view */
.a11y-view :focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:3px;}
.a11y-view :focus:not(:focus-visible){outline:none;}
/* the floating map controls (locate z1150, sheet z1100) sit above the z950 overlay — hide them while the list is open */
.a11y-open .locate,.a11y-open .sheet{display:none;}

/* ============================================================================
   Dark Sky Mode — a night stargazing lens. Toggled by #darkSkyBtn, which adds
   body.darksky. The button rides above #locate (its bottom is JS-synced to the
   sheet in applyY, same as locate). Night look = filter the TILE CANVAS only so
   the DOM marker overlays stay crisp; Boutels glow amber; micro-layers hide.
   ============================================================================ */
.darksky-btn{position:fixed;left:12px;bottom:calc(var(--safe-b) + 74px);z-index:1150;height:46px;width:46px;display:flex;align-items:center;justify-content:center;background:var(--night-panel);border:0;border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,.28);cursor:pointer;color:var(--night-star-gold);transition:bottom .28s cubic-bezier(.4,0,.2,1),background .2s ease,box-shadow .2s ease,opacity .2s ease;}
.darksky-btn svg{width:24px;height:24px;}
.darksky-btn:active{transform:scale(.92);}
.darksky-btn.is-on{background:var(--night-accent);color:#fff;box-shadow:0 0 0 2px rgba(244,227,184,.55),0 2px 14px rgba(75,75,143,.7);}
.a11y-open .darksky-btn{display:none;}

/* Dark-sky member filters: slide-out beside the dark-sky button (bottom JS-synced to match it). Opens on toggle. */
.dsfilter{position:fixed;left:66px;bottom:calc(var(--safe-b) + 74px);z-index:1150;display:flex;flex-direction:column;align-items:flex-start;gap:5px;transform:translateX(-10px) scale(.96);transform-origin:left center;opacity:0;pointer-events:none;transition:transform .26s cubic-bezier(.4,0,.2,1),opacity .2s ease,bottom .28s cubic-bezier(.4,0,.2,1);}
.dsfilter__cap{padding:3px 10px;background:var(--night-panel);border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.28);color:var(--night-text-3);font-family:var(--cond);font-weight:800;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;}
.dsfilter__row{position:relative;display:flex;align-items:center;gap:4px;height:46px;padding:0 6px 0 8px;background:var(--night-panel);border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,.28);}
.dsfilter.is-open{transform:none;opacity:1;pointer-events:auto;}
/* Report is its own full-width pill BELOW the Fav/Going/Visited row (moved out so the row can't crop the
   Off button on narrow phones); matches the row's var(--night-panel) bar, centered icon + label. */
.dsfilter__report{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;align-self:stretch;height:40px;padding:0 12px;border:0;border-radius:14px;background:var(--night-panel);box-shadow:0 2px 12px rgba(0,0,0,.28);color:var(--night-text);font-family:var(--cond);font-weight:800;font-size:13px;letter-spacing:.02em;cursor:pointer;white-space:nowrap;}
.dsfilter__report svg{width:16px;height:16px;color:var(--gold);flex:0 0 auto;}
.dsfilter__report:active{transform:scale(.98);}
.dsfilter__report--locked{background:var(--night-panel);color:var(--night-text);opacity:.72;}
.dsfilter__report--locked svg{color:var(--night-text-3);}
@media (hover:hover){.dsfilter__report:hover{background:var(--night-panel-hover);}}
.dsfilter__chips{display:flex;align-items:center;gap:6px;}
.dsfilter__chip{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 11px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:var(--night-text);font-family:var(--cond);font-weight:700;font-size:12.5px;letter-spacing:.01em;cursor:pointer;white-space:nowrap;}
.dsfilter__chip svg{width:15px;height:15px;flex:0 0 auto;}
/* member-state colours: Favorites + Going + Visited icons are all GOLD here for a uniform look (rest AND
   on state — the .is-on rule only recolours the bg/text/ring, so a gold icon stays gold when active). */
.dsfilter__chip--fav > svg,.dsfilter__chip--going > svg,.dsfilter__chip--visited > svg{color:var(--gold);}
.dsfilter__chip.is-on{background:var(--night-accent);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(244,227,184,.55);}
.dsfilter__chip--locked{opacity:.72;}
.dsfilter__lock{display:inline-flex;}
.dsfilter__lock svg{width:12px;height:12px;opacity:.85;color:var(--night-text);}
/* Off = fully exits night mode (turns off the lens, not just collapses the slide-out). Soft-red power glyph signals "turn off" without alarming. */
.dsfilter__off{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 11px;margin-left:6px;border:0;border-left:1.5px solid rgba(255,255,255,.14);border-radius:0 10px 10px 0;background:rgba(255,255,255,.08);color:var(--night-text);font-family:var(--cond);font-weight:800;font-size:12.5px;letter-spacing:.02em;cursor:pointer;white-space:nowrap;}
.dsfilter__off svg{width:15px;height:15px;color:var(--color-error-on-dark);flex:0 0 auto;}
.dsfilter__off:active{transform:scale(.96);}
@media (hover:hover){.dsfilter__off:hover{background:rgba(229,115,115,.2);}}
/* close = a small round X badge in the top-right corner of the slide-out */
.dsfilter__close{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;background:var(--night-accent);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;z-index:1;}
.dsfilter__close svg{width:12px;height:12px;}
.dsfilter__close:active{transform:scale(.9);}
.a11y-open .dsfilter{display:none;}

/* ============================================================================
   Stargazing Report — a night-themed modal (assets/js/modules/stargazing.js): the live
   "should I go tonight?" brief (clouds/moon/aurora/constellations). Members-only.
   ============================================================================ */
/* the card CTA that opens the report */
.sgr-open{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:11px 14px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--night-accent-deep),var(--night-panel));color:var(--night-star-gold);font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:.02em;cursor:pointer;box-shadow:0 2px 10px rgba(43,43,82,.5);}
.sgr-open svg{width:18px;height:18px;flex:0 0 auto;}
.sgr-open span{color:#fff;}
.sgr-open:hover{filter:brightness(1.08);}
.sgr-open:active{transform:translateY(1px);}
.sgr-open--locked{opacity:.92;}
.sgr-open__lock{display:inline-flex;}
.sgr-open__lock svg{width:13px;height:13px;opacity:.8;}
/* lightweight TEXT-LINK variant, tucked at the bottom of a star accordion */
.sgr-open--link{display:inline-block;width:auto;margin:10px 0 0;padding:0;background:none;box-shadow:none;color:var(--teal);font-family:var(--sans);font-weight:700;font-size:13.5px;letter-spacing:0;text-decoration:underline;text-underline-offset:2px;}
.sgr-open--link:hover{filter:none;opacity:.78;}
.sgr-open--link:active{transform:none;}
/* "What You'll See" — evergreen constellations-by-month on the (light) card, each with a dark night-sky figure tile */
.wys-grp{margin:0 0 14px;}
.wys-grp:last-child{margin-bottom:2px;}
.wys-grp__m{font-family:var(--cond);font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--teal);margin:0 0 8px;}
.wys-c{display:flex;align-items:center;gap:11px;margin:8px 0;}
.wys-fig{flex:0 0 auto;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--night-panel),var(--night-bg-2));border-radius:9px;}
.wys-fig .sgr-fig{width:34px;height:34px;}
.wys-fig .sgr-fig--none{color:var(--night-star-gold);}
.wys-c__n{font-family:var(--cond);font-weight:800;font-size:14px;color:var(--ink);}
.wys-c__d{font-family:var(--sans);font-size:12.5px;line-height:1.38;color:#6D6B65;}
.wys-c__d::first-letter,.wysz__d::first-letter{text-transform:uppercase;}/* sentence-case the constellation caption ("the Bull" -> "The Bull") */
/* When to Look — top note + bulleted list by month */
.wtl-note{font-family:var(--sans);font-style:italic;color:#6D6B65;font-size:12.5px;margin:0 0 10px;}
.wtl-list{margin:0;padding:0 0 0 18px;list-style:disc;}
.wtl-list li{font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--ink);margin:0 0 9px;}
.wtl-list li strong{font-weight:700;}/* body sans, just bold — the condensed face read smaller/tighter than the sentence */
/* Things to Do Nearby — plain bulleted text list (not tappable; would pull them off the night-sky pin) */
.tdn-list{margin:0;padding:0 0 0 18px;list-style:disc;}
.tdn-list li{font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--ink);margin:0 0 7px;}
.tdn-list .tdn-mi{color:#6D6B65;font-size:12.5px;}
/* What You'll See — tap a figure to enlarge it (magnifying glass) */
.wys-zoom{position:relative;flex:0 0 auto;padding:0;border:0;background:none;cursor:zoom-in;}
.wys-mag{position:absolute;bottom:-3px;right:-3px;width:17px;height:17px;display:flex;align-items:center;justify-content:center;background:var(--teal);color:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.4);}
.wys-mag svg{width:10px;height:10px;}
.wysz{position:fixed;inset:0;z-index:2200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(10,10,24,.7);opacity:0;pointer-events:none;transition:opacity .2s ease;cursor:zoom-out;}
.wysz.is-open{opacity:1;pointer-events:auto;}
.wysz__card{position:relative;width:min(320px,86vw);background:linear-gradient(160deg,var(--night-surface),var(--night-bg));border-radius:18px;padding:22px;text-align:center;color:var(--night-text);box-shadow:0 24px 70px rgba(0,0,0,.55);}
.wysz__close{position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:0;border-radius:9px;background:rgba(255,255,255,.08);color:var(--night-text-2);cursor:pointer;}
.wysz__close:hover{background:rgba(255,255,255,.16);color:#fff;}
.wysz__close svg{width:13px;height:13px;}
.wysz__fig{width:200px;height:200px;max-width:70vw;max-height:70vw;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,var(--night-panel),var(--night-bg-deep));border-radius:14px;}
.wysz__fig .sgr-fig{width:170px;height:170px;}
.wysz__fig .sgr-fig--none{color:var(--night-star-gold);}
.wysz__n{font-family:var(--cond);font-weight:800;font-size:20px;color:#fff;}
.wysz__d{font-family:var(--sans);font-size:13.5px;line-height:1.45;color:var(--night-text-4);margin-top:4px;}
.sgr-overlay{position:fixed;inset:0;z-index:2100;background:radial-gradient(ellipse 95% 95% at 50% 50%,rgba(9,9,20,.72) 0%,rgba(4,4,11,.93) 100%);opacity:0;pointer-events:none;transition:opacity .25s ease;}/* darker at the edges so the search bar + chrome read clearly as disabled */
.sgr-overlay.is-open{opacity:1;pointer-events:auto;}
.sgr{position:fixed;z-index:2101;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);opacity:0;pointer-events:none;cursor:default;width:min(1040px,calc(100vw - 24px));height:93vh;max-height:min(95vh,940px);display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(160deg,var(--night-surface) 0%,var(--night-surface-deep) 60%,var(--night-bg) 100%);color:var(--night-text);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 0 0 1px rgba(160,160,220,.14);transition:transform .28s cubic-bezier(.2,.7,.3,1),opacity .22s ease;}
.sgr.is-open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto;}
.sgr__close{position:absolute;top:12px;right:12px;z-index:2;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:0;border-radius:9px;background:rgba(255,255,255,.08);color:var(--night-text-2);cursor:pointer;}
.sgr__close:hover{background:rgba(255,255,255,.16);color:#fff;}
.sgr__head{display:flex;align-items:center;gap:12px;padding:20px 46px 14px 20px;}
.sgr__ico{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:radial-gradient(circle at 35% 30%,var(--night-accent-bright) 0%,var(--night-accent-deep) 70%,var(--night-surface-2) 100%);color:var(--night-star-gold);box-shadow:0 0 14px rgba(120,120,220,.5);}
.sgr__ico svg{width:22px;height:22px;}
.sgr__title{font-family:var(--cond);font-weight:800;font-size:20px;letter-spacing:.01em;color:#fff;}
.sgr__place{font-family:var(--sans);font-size:13px;color:var(--night-text-4);margin-top:1px;}
.sgr__body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 20px calc(env(safe-area-inset-bottom,0px) + 20px);}
.sgr__load{padding:14px 0;color:var(--night-muted);font-family:var(--sans);font-size:14px;}
.sgr__load--big{padding:34px 0;text-align:center;}
/* loader: shimmer placeholders for the two live feeds (clouds + aurora) while they fetch */
.sgr__shim{height:76px;border-radius:12px;background:linear-gradient(100deg,rgba(255,255,255,.05) 30%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.05) 70%);background-size:200% 100%;animation:sgrShim 1.2s ease-in-out infinite;}
@keyframes sgrShim{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
@media (prefers-reduced-motion:reduce){.sgr__shim{animation:none;}}
.sgr__muted{color:var(--night-muted);}
.sgr__retry-wrap{text-align:center;padding:6px 0 2px;}
.sgr__retry{margin-top:10px;font-family:var(--sans);font-weight:700;font-size:13px;color:#fff;background:rgba(120,120,220,.28);border:0;border-radius:10px;padding:9px 18px;cursor:pointer;}
.sgr__retry:hover{background:rgba(120,120,220,.42);}
/* location chooser (report opened without a map pin) */
.sgr-loc{max-width:520px;margin:26px auto;padding:0 4px;}
.sgr-loc__h{font-family:var(--cond);font-weight:800;font-size:21px;color:#fff;text-align:center;margin-bottom:16px;}
.sgr-loc__geo{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 16px;border:0;border-radius:12px;background:var(--night-accent);color:#fff;font-family:var(--sans);font-weight:700;font-size:15px;cursor:pointer;}
@media (hover:hover){.sgr-loc__geo:hover{background:var(--night-accent-bright);}}
.sgr-loc__geo:disabled{opacity:.7;cursor:default;}
.sgr-loc__geo-ic{display:inline-flex;}.sgr-loc__geo-ic svg{width:18px;height:18px;}
.sgr-loc__or{text-align:center;font-family:var(--sans);font-size:12.5px;color:var(--night-muted);margin:15px 0;}
.sgr-loc__input{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid rgba(160,160,220,.3);border-radius:12px;background:rgba(255,255,255,.06);color:#fff;font-family:var(--sans);font-size:15px;}
.sgr-loc__input::placeholder{color:var(--night-muted-2);}
.sgr-loc__input:focus{outline:none;border-color:var(--night-accent-soft);}
.sgr-loc__results{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.sgr-loc__result{display:flex;align-items:center;gap:10px;text-align:left;width:100%;padding:11px 13px;border:0;border-radius:10px;background:rgba(255,255,255,.05);color:var(--night-text);font-family:var(--sans);font-size:14px;cursor:pointer;}
@media (hover:hover){.sgr-loc__result:hover{background:rgba(120,120,220,.2);}}
.sgr-loc__result-ic{flex:0 0 auto;color:var(--night-accent-soft);}.sgr-loc__result-ic svg{width:16px;height:16px;display:block;}
.sgr-loc__empty{font-family:var(--sans);font-size:13px;color:var(--night-muted);padding:8px 2px;}
/* "not on our map" sheet message (a searched spot that isn't a curated place) */
.notmap{padding:6px 2px 10px;}
.notmap__p{font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--ink);margin:0 0 8px;}
.sgr__verdict{font-family:var(--sans);font-weight:700;font-size:17px;line-height:1.3;padding:14px 16px;margin:2px 0 6px;border-radius:12px;background:rgba(255,255,255,.06);border-left:4px solid var(--night-glow);}
.sgr__verdict.is-good{border-left-color:var(--night-good);background:rgba(75,191,138,.12);}
.sgr__verdict.is-ok{border-left-color:var(--gold);background:rgba(232,182,44,.1);}
.sgr__verdict.is-bad{border-left-color:var(--color-error-on-dark);background:rgba(229,115,115,.1);}
.sgr__sec{padding:14px 0;border-top:1px solid rgba(160,160,220,.12);}
.sgr__h{font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:15px;color:var(--night-text-hi);margin:0 0 11px;}
.sgr__p{font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--night-text-hi);margin:0;}
.sgr__p + .sgr__p{margin-top:12px;}/* space between stacked paragraphs */
.sgr__p b{color:#fff;}
.sgr__nocaps{text-transform:none;}/* keep "Kp" cased correctly inside an uppercase header */
.sgr__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.sgr__card{border-top:0;padding:12px 14px;background:rgba(255,255,255,.05);border-radius:12px;}
.sgr__clouds{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.sgr__cloud{background:rgba(255,255,255,.05);border-radius:12px;padding:10px 12px;}
.sgr__cloud.is-clear{background:rgba(75,191,138,.12);box-shadow:inset 0 0 0 1px rgba(75,191,138,.3);}
.sgr__cloud-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px;}
.sgr__cloud-lab{font-family:var(--sans);font-weight:700;font-size:13.5px;color:#fff;}
.sgr__cloud-pct{font-family:var(--sans);font-size:11px;color:var(--night-muted);white-space:nowrap;}
.sgr__cloud-bar{height:7px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden;margin:7px 0 6px;}
.sgr__cloud-fill{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--night-good-deep),var(--night-good-bright));}
.sgr__cloud-txt{font-family:var(--sans);font-size:12.5px;line-height:1.35;color:var(--night-text-2);}
.sgr__aurs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px;}
.sgr__aur{background:rgba(255,255,255,.05);border-radius:10px;padding:8px 10px;text-align:center;}
.sgr__aur.is-hit{background:rgba(120,90,200,.22);box-shadow:inset 0 0 0 1px rgba(160,130,240,.45);}
.sgr__aur-lab{display:block;font-family:var(--sans);font-weight:700;font-size:13px;color:#fff;}
.sgr__aur-kp{display:block;font-family:var(--sans);font-size:12px;color:var(--night-text-4);margin:2px 0;}
.sgr__aur-txt{display:block;font-family:var(--sans);font-size:11px;color:var(--night-muted);}
.sgr__aur.is-hit .sgr__aur-txt{color:var(--night-text-warm);}
.sgr__consts{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sgr__const{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border-radius:12px;padding:9px 11px;}
.sgr-fig{flex:0 0 auto;width:40px;height:40px;}
img.sgr-fig{object-fit:contain;display:block;}
.sgr-fig--none{display:flex;align-items:center;justify-content:center;color:var(--night-glow);}
.sgr-fig--none svg{width:20px;height:20px;}
.sgr-fig__l line{stroke:rgba(150,150,220,.5);stroke-width:1.4;}
.sgr-fig__d circle{fill:var(--night-star-gold);}
.sgr__const-n{font-family:var(--sans);font-weight:700;font-size:13.5px;color:#fff;}
.sgr__const-d{font-family:var(--sans);font-size:12px;line-height:1.35;color:var(--night-text-4);margin-top:1px;}
/* Objects tab — constellations + planets, bigger thumbnails + an "up tonight" line */
.sgr__objs{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sgr__obj{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.05);border-radius:12px;padding:12px 13px;}
.sgr__obj-fig{position:relative;flex:0 0 56px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;}
button.sgr__obj-fig{border:0;background:none;padding:0;cursor:zoom-in;}
.sgr__obj-fig .sgr-fig{width:56px;height:56px;}
.sgr__obj-fig--planet{color:var(--night-gold-soft);}.sgr__obj-fig--planet svg{width:46px;height:46px;}
.sgr__obj-img{width:56px;height:56px;object-fit:contain;display:block;} /* real planet photo (contain so Saturn's rings aren't cropped) */
.sgr__obj-b{min-width:0;}
.sgr__obj-n{font-family:var(--sans);font-weight:700;font-size:15px;color:#fff;}
.sgr__obj-d{font-family:var(--sans);font-size:12.5px;line-height:1.4;color:var(--night-text-4);margin-top:2px;}
.sgr__obj-d::first-letter{text-transform:uppercase;}
.sgr__obj-w{font-family:var(--sans);font-size:12px;line-height:1.4;color:var(--night-gold-soft);margin-top:5px;}
/* Sources footer — always visible, never collapsed (attribution for Open-Meteo's CC-BY + crediting NOAA) */
.sgr__sources{max-width:820px;margin:16px auto 0;padding-top:12px;border-top:1px solid rgba(160,160,220,.12);font-family:var(--sans);font-size:11px;line-height:1.5;color:var(--night-muted-2);}
.sgr__sources a{color:var(--night-text-4);text-decoration:underline;}
/* tab bar — icon + label, collapses to icon-only on mobile (mirrors the Member Dashboard treatment) */
.sgr__tabs{display:flex;flex:0 0 auto;border-top:1px solid rgba(160,160,220,.12);border-bottom:1px solid rgba(160,160,220,.14);}
.sgr__tab{position:relative;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 6px;border:0;background:transparent;border-bottom:3px solid transparent;color:var(--night-text-3);cursor:pointer;}
.sgr__tab:not(:last-child){border-right:1px solid rgba(160,160,220,.1);}
.sgr__tab-ic{display:inline-flex;}.sgr__tab-ic svg{width:22px;height:22px;display:block;}
.sgr__tab-label{display:none;font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:14px;}
.sgr__tab.is-active{color:#fff;border-bottom-color:var(--night-vision);background:rgba(238,110,110,.13);}
@media (hover:hover){.sgr__tab:not(.is-active):hover{color:var(--night-text-2);background:rgba(255,255,255,.04);}}
@media (min-width:620px){.sgr__tab-label{display:inline;}}
/* panels — one shown at a time, content in a centered readable column inside the wide panel */
.sgr__panels{max-width:820px;margin:0 auto;}
.sgr__panel{display:none;}
.sgr__panel.is-shown{display:block;}
.sgr__intro{font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--night-text-2);background:rgba(255,255,255,.05);border-radius:12px;padding:12px 14px;margin:14px 0 4px;}
.sgr__subh{font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:13px;color:var(--night-text-3);margin:16px 0 9px;}
.sgr__note{font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--night-muted);margin:10px 0 0;}
/* moon glyph + phase strip */
.sgr-moon{width:34px;height:34px;flex:0 0 auto;}
.sgr-moon__lit{fill:var(--night-star-gold);}.sgr-moon__dark{fill:var(--night-bg-3);}
.sgr__strip{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:12px 0 2px;}
.sgr__ph{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:8px 2px;border-radius:10px;border:1px solid transparent;}
.sgr__ph.is-now{border-color:var(--night-accent-soft);background:rgba(143,141,224,.16);}
.sgr__ph-n{font-family:var(--sans);font-weight:600;font-size:11.5px;line-height:1.25;color:var(--night-text);}
.sgr__ph-rate{font-family:var(--sans);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--night-star-gold);}
.sgr__moon3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.sgr__m3{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;background:rgba(255,255,255,.05);border-radius:12px;padding:11px 8px;}
.sgr__m3-lab{font-family:var(--sans);font-weight:700;font-size:12.5px;color:#fff;}
.sgr__m3-n{font-family:var(--sans);font-size:12px;color:var(--night-text-2);}
.sgr__m3-p{font-family:var(--sans);font-size:11px;color:var(--night-muted);}
/* meteors */
.sgr__meteor{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.05);border-radius:12px;padding:12px 14px;}
.sgr__meteor.is-on{background:rgba(120,90,200,.18);box-shadow:inset 0 0 0 1px rgba(160,130,240,.35);}
.sgr__meteor-ic{flex:0 0 auto;color:var(--night-star-gold);}.sgr__meteor-ic svg{width:26px;height:26px;display:block;}
.sgr__meteor-n{font-family:var(--sans);font-weight:700;font-size:15px;color:#fff;margin-bottom:2px;}
/* I Spy */
.sgr__spy{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.sgr__spy-item{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.05);border-radius:12px;padding:12px 14px;} /* a list of things to find (no check-off) -- the star figure enlarges on tap */
.sgr__spy-zoom{flex:0 0 60px;}
.sgr__spy-item .wys-mag{width:15px;height:15px;bottom:-1px;right:-1px;}
.sgr__spy-fig{flex:0 0 60px;width:60px;height:60px;display:flex;align-items:center;justify-content:center;}
.sgr__spy-fig .sgr-fig{width:60px;height:60px;}
.sgr__spy-fig .sgr-moon{width:56px;height:56px;}
.sgr__spy-star svg{width:46px;height:46px;color:var(--night-star-gold);display:block;}
.sgr__spy-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto;}
.sgr__spy-n{font-family:var(--sans);font-weight:700;font-size:15.5px;line-height:1.2;color:#fff;}
.sgr__spy-d{font-family:var(--sans);font-size:12.5px;line-height:1.4;color:var(--night-text-4);}
.sgr__spy-d::first-letter{text-transform:uppercase;} /* "the Archer" -> "The Archer" */
/* Visibility tab: 3 time tiles (dark window · sunset · sunrise) */
.sgr__times{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.sgr__tile{background:rgba(255,255,255,.05);border-radius:12px;padding:12px 13px;}
.sgr__tile-lab{font-family:var(--sans);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--night-text-5);line-height:1.25;}
.sgr__tile-val{font-family:var(--sans);font-weight:700;font-size:15px;color:#fff;margin-top:5px;}
@media (max-width:479px){.sgr__times{grid-template-columns:1fr;}}
/* Learn */
.sgr__learn{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.05);border-radius:14px;padding:14px;margin-top:12px;}
.sgr__learn-art{flex:0 0 128px;position:relative;padding:0;border:0;background:none;cursor:zoom-in;}
.sgr__learn-fig{width:128px;height:128px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,var(--night-panel),var(--night-bg-deep));border-radius:12px;}
.sgr__learn-fig .sgr-fig{width:98px;height:98px;}
.sgr__learn-n{font-family:var(--cond);font-weight:800;font-size:19px;color:#fff;}
.sgr__learn-sub{font-family:var(--sans);font-size:12.5px;color:var(--night-text-5);margin:1px 0 6px;}
@media (max-width:479px){.sgr__strip{grid-template-columns:repeat(4,1fr);}.sgr__learn-art{flex-basis:96px;}.sgr__learn-fig{width:96px;height:96px;}}
/* Featured constellation (Learn tab): one rich spotlight — art + optional photo gallery + stories */
.sgr__feat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 16px;margin-top:12px;}
.sgr__feat-top{display:flex;align-items:center;gap:14px;}
.sgr__feat-art{position:relative;flex:0 0 96px;width:96px;height:96px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,var(--night-panel),var(--night-bg-deep));border-radius:12px;border:0;padding:0;cursor:zoom-in;}
.sgr__feat-fig{width:78px;height:78px;display:flex;align-items:center;justify-content:center;}
.sgr__feat-fig .sgr-fig{width:78px;height:78px;}
.sgr__feat-n{font-family:var(--cond);font-weight:800;font-size:23px;line-height:1.05;color:#fff;}
.sgr__feat-sub{font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--night-text-3);margin-top:2px;}
.sgr__feat-gal{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 2px;}
.sgr__feat-thumb{position:relative;flex:0 0 auto;width:78px;height:60px;border:0;border-radius:9px;overflow:hidden;padding:0;background:var(--night-bg-deep);cursor:zoom-in;}
.sgr__feat-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.sgr__feat-sec{margin-top:13px;}
.sgr__feat-h{margin:0 0 5px;font-family:var(--sans);font-weight:700;font-size:15.5px;letter-spacing:0;color:var(--night-star-gold);}
.sgr__feat-facts{margin:0;padding-left:18px;}
.sgr__feat-facts li{margin:4px 0;font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--night-text);}
.sgr__feat-credit{margin-top:9px;font-family:var(--sans);font-size:11.5px;font-style:italic;line-height:1.45;color:var(--night-muted-2);}
/* Learn tab: the "from tonight's I Spy game" lead-in + the tonight's-moon block */
.sgr__feat-lead{font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--night-text-2);background:rgba(255,255,255,.05);border-radius:12px;padding:11px 14px;margin:0 0 14px;}
.sgr__feat-moon{display:flex;gap:13px;align-items:flex-start;margin-top:5px;}
.sgr__feat-moon-b{min-width:0;}
.sgr__feat-moon-n{font-family:var(--sans);font-weight:700;font-size:14px;color:var(--night-text);margin-bottom:3px;}
/* photo lightbox variant of the enlarge overlay (real constellation photos) */
.wysz__card--photo{max-width:min(92vw,560px);width:auto;}
.wysz__img{max-width:100%;max-height:70vh;border-radius:10px;display:block;margin:0 auto;}
.a11y-open .sgr,.a11y-open .sgr-overlay{display:none;}
@media (max-width:479px){.sgr__grid,.sgr__clouds,.sgr__aurs,.sgr__consts,.sgr__objs{grid-template-columns:1fr;}}

/* night canvas: dim + indigo-shift the tile canvas ONLY (markers are DOM overlays, untouched) */
body.darksky .maplibregl-canvas{filter:invert(0.9) hue-rotate(190deg) saturate(0.55) brightness(0.88) contrast(0.95);}
/* hide the light-map micro-layers so only Boutels + dark-sky sites remain in night mode */
/* Hide the WHOLE marker wrapper (icon + its badges), not just the inner icon — otherwise the Dark Sky
   Certified badges on gems/parks kept floating in the sky and cluttered it. */
body.darksky .gemwrap,body.darksky .triwrap,body.darksky .evwrap,body.darksky .lpinwrap,body.darksky .region-label{display:none !important;}
/* Night mode: Boutels RECEDE so the dark-sky sites are the subject. They keep their rings + counts but go
   half-transparent, grayscale, smaller, and behind the stars; the count drops to a muted gray. They also
   don't appear at the wide overview at all (JS zoom-gate) — a Boutel only shows once you zoom into a region. */
body.darksky .clusterwrap{opacity:.5 !important;z-index:400 !important;}
body.darksky .cluster{transform:scale(.7);filter:grayscale(1);}
body.darksky .cluster__n{color:#a8a6a0 !important;}
/* the Boutel you CLICK comes back to full strength (no fade, no grayscale) so the selection reads clearly */
body.darksky .clusterwrap:has(.cluster.is-sel){opacity:1 !important;z-index:1150 !important;}
body.darksky .clusterwrap:has(.cluster.is-sel) .cluster{filter:none;}
/* night-mode placement tack (the pin marking what you clicked/searched) = salmon/red, not gold */
body.darksky .selpin__in{color:var(--night-vision);}
body.darksky .viewpin__in{color:var(--night-good);} /* night mode: primary pin = vision-red, companion "view" pin = a distinct green */

/* dark-sky destination marker: a glowing star-and-crescent */
/* CRITICAL: do NOT set position on the marker root. MapLibre's own .maplibregl-marker class sets
   position:absolute, which is how it places the pin; a `position:relative` here loads later and overrides it,
   so the marker falls into normal flow and lands in the WRONG place (and jumps on resize). The badge still
   anchors fine because MapLibre's absolute root IS a positioned ancestor. Also: no transition on transform
   (MapLibre drives transform every frame -> a transition makes markers lag/drift). Hover uses filter. */
.dsky{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--night-glow) 0%,var(--night-accent-deep) 70%,var(--night-surface-2) 100%);color:#fff;box-shadow:0 0 10px 2px rgba(170,170,255,.55),0 1px 4px rgba(0,0,0,.45);cursor:pointer;}
.dsky{z-index:900;} /* dark-sky markers (single + cluster) sit above the dimmed Boutels (400) */
.dsky svg{width:18px;height:18px;filter:drop-shadow(0 0 2px rgba(255,255,255,.5));}
.dsky:hover{filter:brightness(1.12);}
.dsky.is-sel{box-shadow:0 0 18px 6px rgba(244,227,184,.85),0 0 6px rgba(255,255,255,.9);z-index:1200;} /* the CLICKED star rises above the spotlight scrim (1000) so it never dims */
/* clustered dark-sky sites (close-together points roll up like Boutels): a fixed-size WRAPPER keeps the
   circle dead-centered on its point (belt-and-suspenders), the SAME star icon inside, and a count badge. */
.dskywrap{width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:900;} /* cluster marker root; NO position override (MapLibre sets position:absolute) — above the dimmed Boutels (400) */
.dsky--cluster{background:radial-gradient(circle at 35% 30%,var(--night-glow-2) 0%,var(--night-accent-deep) 70%,var(--night-surface-2) 100%);}
/* National Park (single OR a cluster that contains one): a green ring in the National-Parks color, so it reads at a glance */
.dsky--np{box-shadow:0 0 0 4px var(--np),0 0 11px 3px rgba(63,125,79,.6),0 1px 4px rgba(0,0,0,.45);}
.dsky--np.is-sel{box-shadow:0 0 0 4px var(--np),0 0 18px 6px rgba(244,227,184,.85),0 0 6px rgba(255,255,255,.9);} /* keep the green ring when selected */

/* ===== SHARED marker corner-badge: the ONE position-safe way to badge ANY map marker =====
   Why it can't knock a marker off its point: MapLibre sets a DOM marker's ROOT element to position:absolute,
   so an ABSOLUTELY-positioned badge child anchors to that root and never changes the root's box (offsetWidth),
   which is what MapLibre uses to center the marker. RULE for any future badge (map designations, etc.):
   reuse .map-badge and add a --modifier for its colors; NEVER add an in-flow (non-absolute) child to a marker,
   or it will push the icon and shift the pin. (.pin-badge above is the older favorites/status twin of this idea.) */
.map-badge{position:absolute;top:-7px;right:-8px;min-width:15px;height:15px;padding:0 3px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-weight:800;font-size:10px;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.55);pointer-events:none;} /* rides up/out at the corner (overflowing the circle) so it never covers the icon */
.map-badge--dscert{background:var(--night-vision-badge);color:var(--night-vision-ink);border:1.5px solid var(--night-vision-ink);} /* night-vision-red count badge (Dark Sky clusters) */

/* "Dark Sky Certified" chip shown on any card (Boutel / Gem / Park / Rest) inside a certified dark-sky area */
.ds-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:var(--night-accent-deep);color:#fff;font-family:var(--cond);font-weight:700;font-size:11px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;vertical-align:middle;}
.ds-badge svg{width:12px;height:12px;}