/*
 * 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);
}
*{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;}
/* 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:#E8B62C;}
.legend__circ--boutel{background:#1A8F7C;}
.legend__circ--hm{background:#C9B893;}
.legend__circ--cluster{background:conic-gradient(#E8B62C 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);}
.geocomplete__badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--teal);border:1px solid var(--teal);border-radius:20px;padding:2px 7px;flex:0 0 auto;}

.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.is-disabled{opacity:.3;cursor:default;} /* at peek there's nothing left to collapse -> grayed + inert */
.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);}

.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 */
.bd__snip{padding:10px;border:1px solid var(--line);border-radius:14px;}
/* 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;}
/* 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);}
/* 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{display:flex;align-items:flex-start;gap:5px;}
.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{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:#E8B62C;} /* 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 #E8B62C;}
.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 */
.tri.is-sel::after{content:'';position:absolute;left:50%;top:58%;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 2s ease-in-out infinite;}
/* 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));}
.sqm.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 2s ease-in-out infinite;}
@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{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:5;} /* above every other marker (EV/rest/gem) that may share the spot */
.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 */
@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__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{font-size:12px;margin-top:3px;}
.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{position:fixed;top:0;left:0;right:auto;height:100%;width:min(460px,calc(100vw - 30px));background:var(--color-bg);z-index:2001;transform:translateX(-100%);transition:transform .3s ease;overflow-y:auto;box-shadow:none;} /* box-shadow:none overrides the shared right-drawer shadow, which was bleeding onto the map's left edge from the off-screen closed drawer */
.nominate-drawer.is-open{box-shadow:4px 0 32px rgba(0,0,0,0.16);} /* shadow only when the drawer is actually open (slid in from the left) */
.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;}
.card3__img{width:100%;aspect-ratio:1/.82;object-fit:cover;border-radius:12px;display:block;background:linear-gradient(135deg,#e9e4d8,#d8d2c4);}
.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;}
.card3__namerow{display:flex;align-items:center;flex-wrap:wrap;gap:7px;}
.card3__name{font-family:var(--cond);font-weight:800;font-size:22px;line-height:1.06;color:var(--ink);}
/* badge sits inline to the right of the name, smaller so it doesn't hog the row */
.card3__namerow .listing__badge,.card3__namerow .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--share{background:var(--teal);border-color:var(--teal);color:#fff;}
.card3__actbtn--share svg{color:#fff;}
@media (hover:hover){.card3__actbtn: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,.geocomplete,.menu-panel{top:calc(var(--safe-t) + 102px);}
  .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;}
.sd-hero__img--contain{object-fit:contain;}
.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;}
@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{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:14px;cursor:pointer;background:none;border:0;padding:4px 2px;}
.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;}