/* ============================================================
   SLO DOWN — stylesheet
   Order: reset/base -> scheme variables (4) -> map -> markers ->
   sidebar -> theme switcher -> category filter/list -> mobile
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#map {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mapboxgl-ctrl-attrib { font-size: 10px; }

/* ============================================================
   SCHEME VARIABLES — data-scheme on <html> drives all colors
   ============================================================ */

:root,
[data-scheme="light"] {
  /* design pass */
  --plate-frame: rgba(39,55,45,0.16); --mk-shadow: 0 2px 4px rgba(39,40,28,0.28);
  --vig: rgba(39,40,28,0.20); --vig-stop: 58%; --grain: 0.05; --grain-blend: multiply;
  --scrim: rgba(248,247,244,0.62); --ink: #27372D; --intro-sub: #60463C; --emblem-ring: rgba(39,55,45,0.14);
  --bar-bg: var(--card); --bar-border: var(--border); --bar-text: var(--text-muted);
  --district-bg: #27372D; --district-fg: #F8F7F4;
  --bg:             #F8F7F4;
  --card:           #FFFFFF;
  --border:         rgba(39,55,45,0.11);
  --text-primary:   #27372D;
  --text-secondary: #8A7667;
  --text-muted:     #9E978C;
  --accent:         #D46E2A;
  --tag-bg:         #EDE8DF;
  --tag-text:       #60463C;
  --tip-border:     #D46E2A;
  --tip-bg:         #FBF6EE;
  --marker-border:  rgba(39,55,45,0.18);
  --photo-bg:       #EDE8DF;
  --shadow-md:      0 4px 12px rgba(0,0,0,0.12);
  --cat-color:      #2D5A4B;
}

[data-scheme="gear"] {
  /* design pass */
  --plate-frame: rgba(28,36,32,0.18); --mk-shadow: 0 2px 4px rgba(28,36,32,0.26);
  --vig: rgba(28,36,32,0.20); --vig-stop: 58%; --grain: 0.05; --grain-blend: multiply;
  --scrim: rgba(240,242,243,0.62); --ink: #1C2420; --intro-sub: #355140; --emblem-ring: rgba(28,36,32,0.14);
  --bar-bg: var(--card); --bar-border: var(--border); --bar-text: var(--text-muted);
  --district-bg: #1C2420; --district-fg: #F0F2F3;
  --bg:             #F0F2F3;
  --card:           #FFFFFF;
  --border:         rgba(28,36,32,0.1);
  --text-primary:   #1C2420;
  --text-secondary: #355140;
  --text-muted:     #8A9772;
  --accent:         #D46E2A;
  --tag-bg:         #E5E8E6;
  --tag-text:       #355140;
  --tip-border:     #D46E2A;
  --tip-bg:         #F8F9F9;
  --marker-border:  #D4A820;
  --photo-bg:       #E8EAE8;
  --shadow-md:      0 4px 12px rgba(0,0,0,0.12);
  --cat-color:      #2D5A4B;
}

[data-scheme="dark"] {
  /* design pass */
  --plate-frame: rgba(217,198,165,0.14); --mk-shadow: 0 3px 5px rgba(0,0,0,0.55);
  --vig: rgba(0,0,0,0.48); --vig-stop: 50%; --grain: 0.07; --grain-blend: soft-light;
  --scrim: rgba(12,17,14,0.62); --ink: #E9DCC2; --intro-sub: #BCA567; --emblem-ring: rgba(217,198,165,0.16);
  --bar-bg: var(--card); --bar-border: var(--border); --bar-text: var(--text-muted);
  --district-bg: #D9C6A5; --district-fg: #1A2420;
  --bg:             #1A2420;
  --card:           #243028;
  --border:         rgba(217,198,165,0.1);
  --text-primary:   #D9C6A5;
  --text-secondary: #8A9772;
  --text-muted:     #69734B;
  --accent:         #D46E2A;
  --tag-bg:         #2D3D33;
  --tag-text:       #BCA567;
  --tip-border:     #D46E2A;
  --tip-bg:         #252E27;
  --marker-border:  rgba(217,198,165,0.12);
  --photo-bg:       #2D3D33;
  --shadow-md:      0 4px 16px rgba(0,0,0,0.40);
  --cat-color:      #2D5A4B;
}

[data-scheme="midnight"] {
  /* design pass */
  --plate-frame: rgba(122,191,194,0.20); --mk-shadow: 0 3px 6px rgba(0,0,0,0.65);
  --vig: rgba(0,0,0,0.58); --vig-stop: 48%; --grain: 0.08; --grain-blend: soft-light;
  --scrim: rgba(6,12,18,0.66); --ink: #E2EAEC; --intro-sub: #7ABFC2; --emblem-ring: rgba(122,191,194,0.18);
  --bar-bg: var(--card); --bar-border: var(--border); --bar-text: var(--text-muted);
  --district-bg: #E2EAEC; --district-fg: #0C1519;
  --bg:             #0C1519;
  --card:           #12202A;
  --border:         rgba(100,165,168,0.18);
  --text-primary:   #E2EAEC;
  --text-secondary: #7ABFC2;
  --text-muted:     #4E7E8A;
  --accent:         #7ABFC2;
  --tag-bg:         #142130;
  --tag-text:       #8DCDD0;
  --tip-border:     #467D7F;
  --tip-bg:         #0F1C26;
  --marker-border:  rgba(122,191,194,0.22);
  --photo-bg:       #142130;
  --shadow-md:      0 4px 16px rgba(0,0,0,0.50);
  --cat-color:      #2D5A4B;
}

/* ============================================================
   MARKERS (symbology)
   ============================================================ */

/* Positioning anchor Mapbox controls — must have NO transform/transition so
   marker position updates on zoom are not animated (prevents drift/fly). */
.slo-marker-anchor {
  cursor: pointer;
  line-height: 0;
  /* Static filter (not a transform/transition) — safe on the Mapbox-positioned
     anchor; lifts the whole marker (body + badge) off the basemap. */
  filter: drop-shadow(var(--mk-shadow));
}

.slo-marker {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
}
/* Hover lifts and scales the whole unit (marker body + badge) via the scale
   layer below, so the Nick's Pick badge grows and moves with the marker as one
   piece instead of slipping behind the enlarged body. */
.slo-marker-anchor:hover { z-index: 100; }
.slo-marker-anchor:hover .slo-marker-scale { --mk-hover: 1.1; }

.slo-marker__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.slo-marker__icon { display: block; pointer-events: none; }

/* Nick's Pick badge */
.slo-marker__badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  /* Badge tracks the scheme accent (Poppy Bloom on Light/Gear/Dark, Pacific Teal
     on Midnight). The SVG center circle uses currentColor, so it follows too. */
  background: var(--accent);
  color: var(--accent);
  border-radius: 50%;
  border: 2px solid var(--card);
  overflow: hidden;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Standard marker sizes */
.slo-marker--standard { width: 36px; height: 36px; }
[data-scheme="gear"] .slo-marker--standard { width: 40px; height: 40px; }

/* Area POI marker sizes */
.slo-marker--area { width: 36px; height: 36px; }
[data-scheme="gear"] .slo-marker--area { width: 40px; height: 40px; }

/* Nested feature marker */
.slo-marker--nested { width: 32px; height: 32px; background: #FFFFFF; }

/* Marker container form (rounded border-radius + border, or chamfered clip-path)
   is baked INLINE in JS at build time — see buildPOIMarker / buildNestedMarker.
   It is intentionally NOT scheme-scoped in CSS, so a theme-switcher hover
   preview (which only flips data-scheme) can't strip the shape into a square. */

/* Chamfered wrapper (Dark, Midnight) */
.slo-marker-chamfered-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.mapboxgl-marker > * { pointer-events: auto; }

/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  height: 100%;
  z-index: 20;
  overflow: visible;
  transform: translateX(100%);
  transition: transform 0.25s ease-out;
}
.sidebar-wrapper.open { transform: translateX(0); }

.sidebar-panel {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--card);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  transition: background 0.28s ease;
}

/* Folder tabs — only visible while the sidebar is OPEN (never peek when closed).
   Which tab(s) show is driven by data-sv set in setState(). */
.folder-tab {
  position: absolute;
  background: var(--cat-color);
  border-radius: 6px 0 0 6px;
  display: none;
}
.tab-single { left: -26px; top: 48px; width: 26px; height: 40px; z-index: 3; }
.tab-back   { left: -20px; top: 42px; width: 20px; height: 38px; z-index: 1; opacity: 0.42; }
.tab-front  { left: -26px; top: 64px; width: 26px; height: 38px; z-index: 2; }

.sidebar-wrapper.open[data-sv="standard"] .tab-single,
.sidebar-wrapper.open[data-sv="area"]     .tab-single { display: block; }
.sidebar-wrapper.open[data-sv="feature"]  .tab-back,
.sidebar-wrapper.open[data-sv="feature"]  .tab-front  { display: block; }

/* Close button */
.abs-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tag-bg);
  border: none;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  z-index: 10;
}

/* State views */
.sv { display: none; }
.sv.on { display: block; animation: svIn 0.2s ease; }
@keyframes svIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Header block (design pass — category eyebrow + threaded color) */
.poi-header { position: relative; padding: 18px 18px 14px; border-bottom: 1px solid var(--cat-color); }
.contour-tex::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Cg fill='none' stroke='%238A9772' stroke-width='1'%3E%3Cpath d='M0,16 C20,8 40,8 60,16 C80,24 100,24 120,16 C140,8 160,8 180,16 C200,24 220,24 240,16'/%3E%3Cpath d='M0,48 C20,40 40,40 60,48 C80,56 100,56 120,48 C140,40 160,40 180,48 C200,56 220,56 240,48'/%3E%3Cpath d='M0,80 C20,72 40,72 60,80 C80,88 100,88 120,80 C140,72 160,72 180,80 C200,88 220,88 240,80'/%3E%3Cpath d='M0,112 C20,104 40,104 60,112 C80,120 100,120 120,112 C140,104 160,104 180,112 C200,120 220,120 240,112'/%3E%3Cpath d='M0,144 C20,136 40,136 60,144 C80,152 100,152 120,144 C140,136 160,136 180,144 C200,152 220,152 240,144'/%3E%3C/g%3E%3C/svg%3E");
}
.poi-header > * { position: relative; z-index: 1; }
.poi-header::after { content:''; position:absolute; left:0; bottom:-1px; height:2px; width:56px; background:var(--cat-color); z-index:2; }

.eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.eyebrow-chip { width:26px; height:26px; flex-shrink:0; background:var(--cat-color); display:flex; align-items:center; justify-content:center; }
[data-scheme="light"] .eyebrow-chip, [data-scheme="gear"] .eyebrow-chip { border-radius:28%; }
[data-scheme="dark"] .eyebrow-chip, [data-scheme="midnight"] .eyebrow-chip { clip-path: polygon(22% 0%,78% 0%,100% 22%,100% 78%,78% 100%,22% 100%,0% 78%,0% 22%); }
.eyebrow-chip img { display:block; }
.eyebrow-label { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-secondary); }

.name-row { display:flex; align-items:flex-start; gap:8px; }
.poi-poppy { color: var(--accent); flex-shrink: 0; display: flex; align-items: center; margin-top: 3px; }
.poi-name { font-family:'Barlow',sans-serif; font-weight:600; font-size:23px; line-height:1.16; letter-spacing:-0.01em; color:var(--text-primary); }

.sv-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--tag-bg);
  color: var(--tag-text);
  white-space: nowrap;
}
[data-scheme="gear"] .tag { background: var(--cat-color); color: #FFFFFF; }

/* Plate (hero) — framed photo, or designed no-photo emblem */
.plate { position:relative; width:100%; aspect-ratio:3/2; background:var(--photo-bg); overflow:hidden; }
.plate img { width:100%; height:100%; object-fit:cover; display:block; }
.plate::before { content:''; position:absolute; inset:0; z-index:3; pointer-events:none; box-shadow: inset 0 0 0 1px var(--plate-frame); }
.plate::after  { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(transparent 58%, rgba(0,0,0,0.42)); }
.plate-caption { position:absolute; left:14px; bottom:11px; z-index:4; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.92); display:flex; align-items:center; gap:7px; }
.plate-caption .pin { width:11px; height:11px; display:block; }
.plate.emblem { display:flex; align-items:center; justify-content:center;
  background: radial-gradient(120% 120% at 50% 35%, color-mix(in srgb, var(--cat-color) 62%, #000) 0%, color-mix(in srgb, var(--cat-color) 40%, #000) 100%); }
.plate.emblem .contour-wrap { position:absolute; inset:0; z-index:0; opacity:0.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath d='M0,16 C20,8 40,8 60,16 C80,24 100,24 120,16 C140,8 160,8 180,16 C200,24 220,24 240,16'/%3E%3Cpath d='M0,48 C20,40 40,40 60,48 C80,56 100,56 120,48 C140,40 160,40 180,48 C200,56 220,56 240,48'/%3E%3Cpath d='M0,80 C20,72 40,72 60,80 C80,88 100,88 120,80 C140,72 160,72 180,80 C200,88 220,88 240,80'/%3E%3Cpath d='M0,112 C20,104 40,104 60,112 C80,120 100,120 120,112 C140,104 160,104 180,112 C200,120 220,120 240,112'/%3E%3Cpath d='M0,144 C20,136 40,136 60,144 C80,152 100,152 120,144 C140,136 160,136 180,144 C200,152 220,152 240,144'/%3E%3C/g%3E%3C/svg%3E"); }
.plate.emblem .emblem-icon { position:relative; z-index:1; width:96px; height:96px; color:rgba(255,255,255,0.18); }
.plate.emblem .emblem-icon svg { width:100%; height:100%; display:block; }
.plate.emblem .plate-caption { color:rgba(255,255,255,0.62); }

/* Content block */
.poi-content { padding: 15px 16px; display: flex; flex-direction: column; gap: 14px; }
.poi-desc {
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-primary);
}

/* Note callout */
.notes-block {
  border-left: 3px solid var(--tip-border);
  background: var(--tip-bg);
  padding: 9px 12px;
  border-radius: 0 4px 4px 0;
}
.notes-txt { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* Metadata with line icons */
.poi-meta { padding:14px 18px 20px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:11px; }
.meta-row { display:flex; gap:11px; align-items:flex-start; }
.meta-ico { width:14px; height:14px; flex-shrink:0; margin-top:2px; color:var(--text-muted); }
.meta-ico svg { width:100%; height:100%; display:block; }
.meta-body { flex:1; min-width:0; }
.meta-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}
.meta-val { font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 13px; color: var(--text-secondary); }
.meta-val a { color: var(--accent); text-decoration: none; }
.meta-val a:hover { text-decoration: underline; }
.hours-line { line-height: 1.5; }
.hours-line + .hours-line { margin-top: 1px; }

/* Explore section */
.explore-sep { border-top: 1px solid var(--border); }
.explore-label { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); padding:14px 18px 6px; }
.feature-row { display:flex; align-items:center; gap:12px; padding:10px 18px; cursor:pointer; transition:background .12s ease; }
.feature-row + .feature-row { border-top:1px solid var(--border); }
.feature-row:hover { background:var(--tip-bg); }
.fmk { width:30px; height:30px; flex-shrink:0; background:var(--cat-color); display:flex; align-items:center; justify-content:center; }
[data-scheme="light"] .fmk, [data-scheme="gear"] .fmk { border-radius:28%; }
[data-scheme="dark"] .fmk, [data-scheme="midnight"] .fmk { clip-path:polygon(22% 0%,78% 0%,100% 22%,100% 78%,78% 100%,22% 100%,0% 78%,0% 22%); }
.fmk img { width:18px; height:18px; display:block; }
.finfo { flex:1; min-width:0; }
.feyebrow { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-muted); margin-bottom:1px; }
.fname { font-family:'Barlow',sans-serif; font-weight:600; font-size:13.5px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fright { display:flex; align-items:center; gap:9px; flex-shrink:0; }
.fstat { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:10px; letter-spacing:.04em; color:var(--text-secondary); }
.fpoppy { width:14px; height:14px; color:var(--accent); }
.fpoppy svg { width:100%; height:100%; display:block; }
.fchevron { color:var(--text-muted); font-size:17px; line-height:1; }

/* Back strip (Feature Detail) */
.back-strip {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  padding: 10px 12px 10px 14px;
  background: var(--tag-bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.btn-back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0;
}
.btn-back svg { flex-shrink: 0; }
.btn-back .back-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back-strip .btn-close {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
}

/* Feature detail header */
.fd-type-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Trail stats */
.trail-stats { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px; }
.stat-chip {
  background: var(--tag-bg);
  border-radius: 6px;
  padding: 7px 11px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.stat-num { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 15px; color: var(--text-primary); }
.stat-unit {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.diff-badge {
  border-radius: 100px;
  padding: 6px 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  align-self: center;
}

/* ============================================================
   THEME SWITCHER
   ============================================================ */

.ts { position: fixed; top: 12px; right: 12px; z-index: 100; }
/* Hidden while the right-side sidebar is open (would otherwise sit under it).
   The wordmark lives in this cluster, so it hides with the cluster. */
.ts.ts-hidden { display: none; }
/* Top-right cluster is one unified pill: the wordmark and the theme button share
   a single card, divided by a hairline. The popover (right:0 of .ts) drops under
   the button at the right end. */
.ts-bar {
  display: flex;
  align-items: stretch;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease;
}
[data-scheme="dark"]     .ts-bar { box-shadow: 0 2px 12px rgba(0,0,0,0.50); }
[data-scheme="midnight"] .ts-bar { box-shadow: 0 2px 12px rgba(0,0,0,0.60); }

.ts-btn {
  align-self: stretch;
  min-width: 40px;
  border: none;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  outline: none;
  transition: background 0.18s ease;
}
.ts-btn:hover { background: var(--tag-bg); }
.ts-btn:active { background: var(--border); }

.ts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2.5px;
  width: 20px;
  height: 20px;
}
.ts-dot { border-radius: 2px; transition: box-shadow 0.18s ease; }
.dot-light    { background: #EEE8DE; border: 1px solid rgba(39,55,45,0.22); }
.dot-gear     { background: #EAECEE; border: 1.5px solid #D4A820; }
.dot-dark     { background: #243028; border: 1px solid rgba(217,198,165,0.22); }
.dot-midnight { background: #12202A; border: 1px solid rgba(122,191,194,0.30); }
.ts-dot.is-active.dot-light,
.ts-dot.is-active.dot-gear,
.ts-dot.is-active.dot-dark     { box-shadow: 0 0 0 1.5px #D46E2A; }
.ts-dot.is-active.dot-midnight { box-shadow: 0 0 0 1.5px #7ABFC2; }

.ts-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  display: grid;
  grid-template-columns: 60px 60px;
  gap: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.07);
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease, background 0.28s ease, border-color 0.28s ease;
}
.ts-popover.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
[data-scheme="dark"]     .ts-popover { box-shadow: 0 6px 24px rgba(0,0,0,0.55), 0 1px 6px rgba(0,0,0,0.35); }
[data-scheme="midnight"] .ts-popover { box-shadow: 0 6px 24px rgba(0,0,0,0.65), 0 1px 6px rgba(0,0,0,0.45); }

.ts-swatch {
  width: 60px;
  height: 76px;
  border-radius: 7px;
  border: 1.5px solid transparent;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.ts-swatch:hover { transform: scale(1.05); }
.ts-swatch-body { flex: 1; display: flex; align-items: center; justify-content: center; }
.ts-mini-mk {
  width: 18px;
  height: 18px;
  background: #2D5A4B;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ts-mini-mk::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.90); }
.ts-accent-band { height: 16px; width: 100%; flex-shrink: 0; }

.ts-swatch[data-swatch="light"] { border-color: rgba(39,55,45,0.10); }
.ts-swatch[data-swatch="light"] .ts-swatch-body { background: #F8F7F4; }
.ts-swatch[data-swatch="light"] .ts-mini-mk { border-radius: 28%; border: 1.5px solid rgba(39,55,45,0.18); }
.ts-swatch[data-swatch="light"] .ts-accent-band { background: #D46E2A; }

.ts-swatch[data-swatch="gear"] { border-color: rgba(28,36,32,0.08); }
.ts-swatch[data-swatch="gear"] .ts-swatch-body { background: #F0F2F3; }
.ts-swatch[data-swatch="gear"] .ts-mini-mk { border-radius: 28%; border: 2px solid #D4A820; }
.ts-swatch[data-swatch="gear"] .ts-accent-band { background: #D4A820; }

.ts-swatch[data-swatch="dark"] { border-color: rgba(217,198,165,0.10); }
.ts-swatch[data-swatch="dark"] .ts-swatch-body { background: #1A2420; }
.ts-swatch[data-swatch="dark"] .ts-mini-mk { border-radius: 0; clip-path: polygon(22% 0%, 78% 0%, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0% 78%, 0% 22%); }
.ts-swatch[data-swatch="dark"] .ts-accent-band { background: #D46E2A; }

.ts-swatch[data-swatch="midnight"] { border-color: rgba(100,165,168,0.18); }
.ts-swatch[data-swatch="midnight"] .ts-swatch-body { background: #0C1519; }
.ts-swatch[data-swatch="midnight"] .ts-mini-mk { border-radius: 0; clip-path: polygon(22% 0%, 78% 0%, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0% 78%, 0% 22%); }
.ts-swatch[data-swatch="midnight"] .ts-accent-band { background: #7ABFC2; }

.ts-swatch.is-active[data-swatch="light"],
.ts-swatch.is-active[data-swatch="gear"],
.ts-swatch.is-active[data-swatch="dark"]     { border-color: #D46E2A; }
.ts-swatch.is-active[data-swatch="midnight"] { border-color: #7ABFC2; }

/* ============================================================
   CATEGORY FILTER + LIST
   ============================================================ */

.lv {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: min(440px, 92vw);
  z-index: 50;
  transform: translateX(calc(-100% + 36px));
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.lv.open { transform: translateX(0); }

.lv-tab {
  position: absolute;
  top: 48px;
  right: 0;
  width: 36px;
  height: 52px;
  background: var(--accent);
  border-radius: 0 8px 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #FFFFFF;
  transition: opacity 0.15s ease, background 0.28s ease;
  z-index: 2;
}
.lv-tab:hover { opacity: 0.85; }

.lv-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 36px);
  height: 100%;
  background: var(--card);
  box-shadow: 3px 0 8px rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background 0.28s ease;
}
[data-scheme="dark"]     .lv-panel { box-shadow: 3px 0 16px rgba(0,0,0,0.45); }
[data-scheme="midnight"] .lv-panel { box-shadow: 3px 0 16px rgba(0,0,0,0.55); }

.lv-filters {
  flex-shrink: 0;
  padding: 13px 16px 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.lv-filters::-webkit-scrollbar { display: none; }

.lv-cat { flex-shrink: 0; cursor: pointer; transition: opacity 0.18s ease, transform 0.12s ease; }
.lv-cat:hover { transform: scale(1.10); }
.lv-cat.dimmed { opacity: 0.22; }
.lv-cat-mk {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28%;
  transition: box-shadow 0.15s ease;
}
[data-scheme="dark"]     .lv-cat-mk,
[data-scheme="midnight"] .lv-cat-mk {
  border-radius: 0;
  clip-path: polygon(22% 0%,78% 0%,100% 22%,100% 78%,78% 100%,22% 100%,0% 78%,0% 22%);
}
.lv-cat.active .lv-cat-mk { box-shadow: 0 0 0 2.5px var(--accent); }
[data-scheme="dark"]     .lv-cat.active,
[data-scheme="midnight"] .lv-cat.active { filter: drop-shadow(0 0 0 3px var(--accent)); }
[data-scheme="dark"]     .lv-cat.active .lv-cat-mk,
[data-scheme="midnight"] .lv-cat.active .lv-cat-mk { box-shadow: none; }

.lv-clear {
  flex-shrink: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--tag-bg);
  border: none;
  border-radius: 6px;
  padding: 6px 11px;
  cursor: pointer;
  white-space: nowrap;
  display: none;
  transition: color 0.15s ease, background 0.28s ease;
}
.lv-clear.visible { display: block; }
.lv-clear:hover { color: var(--text-primary); }

.lv-list {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 40px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.lv-list::-webkit-scrollbar { width: 4px; }
.lv-list::-webkit-scrollbar-track { background: transparent; }
.lv-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.lv-card-wrap { position:relative; cursor:pointer; transition:transform .12s ease; }
.lv-card-wrap:hover { transform:translateY(-2px); }
.lv-card { background:var(--card); border:1px solid var(--border); border-radius:10px;
  overflow:hidden; display:flex; flex-direction:column; height:100%;
  transition:background .28s, border-color .28s, box-shadow .12s; }
.lv-card-wrap:hover .lv-card { box-shadow:var(--shadow-md); }

.lv-card-plate { position:relative; width:100%; height:116px; background:var(--photo-bg); overflow:hidden; }
.lv-card-plate img { width:100%; height:100%; object-fit:cover; display:block; }
.lv-card-plate::before { content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--plate-frame); }
.lv-card-plate.emblem { display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 32%,
    color-mix(in srgb,var(--cat-color) 62%,#000) 0%, color-mix(in srgb,var(--cat-color) 40%,#000) 100%); }
.lv-card-contour { position:absolute; inset:0; z-index:0; opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath d='M0,16 C20,8 40,8 60,16 C80,24 100,24 120,16 C140,8 160,8 180,16 C200,24 220,24 240,16'/%3E%3Cpath d='M0,48 C20,40 40,40 60,48 C80,56 100,56 120,48 C140,40 160,40 180,48 C200,56 220,56 240,48'/%3E%3Cpath d='M0,80 C20,72 40,72 60,80 C80,88 100,88 120,80 C140,72 160,72 180,80 C200,88 220,88 240,80'/%3E%3Cpath d='M0,112 C20,104 40,104 60,112 C80,120 100,120 120,112 C140,104 160,104 180,112 C200,120 220,120 240,112'/%3E%3Cpath d='M0,144 C20,136 40,136 60,144 C80,152 100,152 120,144 C140,136 160,136 180,144 C200,152 220,152 240,144'/%3E%3C/g%3E%3C/svg%3E"); }
.lv-card-emblem { position:relative; z-index:1; width:52px; height:52px; color:rgba(255,255,255,0.20); }
.lv-card-emblem svg { width:100%; height:100%; display:block; }

.lv-card-poppy { position:absolute; top:8px; right:8px; z-index:3; width:18px; height:18px;
  color:var(--accent); filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.lv-card-poppy svg { width:100%; height:100%; display:block; }

.lv-card-badge { position:absolute; top:100px; left:10px; z-index:4; width:30px; height:30px;
  background:var(--cat-color); display:flex; align-items:center; justify-content:center;
  border:2px solid var(--card); pointer-events:none; }
[data-scheme="light"] .lv-card-badge, [data-scheme="gear"] .lv-card-badge { border-radius:30%; box-shadow:0 1px 4px rgba(0,0,0,.22); }
[data-scheme="dark"] .lv-card-badge, [data-scheme="midnight"] .lv-card-badge {
  clip-path:polygon(22% 0%,78% 0%,100% 22%,100% 78%,78% 100%,22% 100%,0% 78%,0% 22%); }
.lv-card-badge img { display:block; }

.lv-card-body { padding:14px 13px 13px; display:flex; flex-direction:column; gap:4px; }
.lv-card-eyebrow { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:9.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--text-muted); }
.lv-card-name-row { display:flex; align-items:flex-start; gap:5px; }
.lv-card-name { font-family:'Barlow',sans-serif; font-weight:600; font-size:14.5px; line-height:1.2;
  letter-spacing:-.005em; color:var(--text-primary); }
.lv-card-desc { font-family:'Barlow',sans-serif; font-weight:400; font-size:12px; line-height:1.5;
  color:var(--text-secondary); margin-top:2px; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; }

.lv-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; gap: 8px; }
.lv-empty-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lv-empty-sub { font-family: 'Barlow', sans-serif; font-size: 12px; color: var(--text-muted); opacity: 0.65; }

.lv-mobile-trigger { display: none; }

/* ============================================================
   MOBILE (<= 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Theme switcher hidden on mobile */
  .ts { display: none; }

  /* Sidebar becomes a bottom sheet */
  .sidebar-wrapper {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: 65vh;
    transform: translateY(100%);
  }
  .sidebar-wrapper.open { transform: translateY(0); }
  .folder-tab { display: none !important; }
  .sidebar-panel {
    border-left: none;
    border-radius: 16px 16px 0 0;
    max-height: 65vh;
  }

  /* Desktop list panel hidden; mobile FAB + sheet shown */
  .lv { display: none; }

  .lv-mobile-trigger {
    display: flex;
    position: fixed;
    bottom: 20px;
    left: 16px;
    z-index: 90;
    align-items: center;
    gap: 7px;
    background: var(--accent);
    color: #FFFFFF;
    border: none;
    border-radius: 100px;
    padding: 10px 16px 10px 12px;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    transition: opacity 0.15s ease;
  }
  .lv-mobile-trigger:hover { opacity: 0.85; }
  .lv-mobile-trigger.hidden { display: none; }

  .lv-mobile-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90vh;
    background: var(--card);
    border-radius: 14px 14px 0 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.30s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s ease;
  }
  .lv-mobile-sheet.open { transform: translateY(0); }

  .lv-sheet-handle {
    width: 32px;
    height: 4px;
    background: var(--text-muted);
    opacity: 0.4;
    border-radius: 100px;
    margin: 12px auto 8px;
    flex-shrink: 0;
  }
  .lv-mobile-sheet .lv-filters { border-bottom: 1px solid var(--border); }
  .lv-mobile-sheet .lv-list { grid-template-columns: 1fr; }
}

/* Hide mobile sheet container on desktop */
@media (min-width: 769px) {
  .lv-mobile-sheet, .lv-mobile-trigger { display: none; }
}

/* ============================================================
   DESIGN PASS — MAP CHARACTER (atmosphere, attribution bar,
   masthead, loader, intro)
   ============================================================ */

/* Atmosphere overlays (over map, under panels) */
.atmo-vignette, .atmo-grain, .atmo-frame { position:fixed; inset:0; pointer-events:none; z-index:5; }
.atmo-vignette { background: radial-gradient(ellipse 80% 80% at 50% 46%, transparent var(--vig-stop), var(--vig) 100%); }
.atmo-grain {
  opacity:var(--grain); mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.atmo-frame { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); }

/* Attribution bar — restyle Mapbox's own controls into a full-width footer */
.mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right { bottom:0; margin:0; z-index:6; }
.mapboxgl-ctrl-bottom-right { left:0; right:0; width:100%; }
.mapboxgl-ctrl-attrib.mapboxgl-ctrl {
  width:100%; min-height:24px; margin:0;
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
  padding:0 12px 0 96px;
  background:var(--bar-bg); border-top:1px solid var(--bar-border);
  color:var(--bar-text);
  font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:.04em;
  border-radius:0;
}
.mapboxgl-ctrl-attrib a { color:var(--accent); text-decoration:none; }
.mapboxgl-ctrl-attrib a:hover { text-decoration:underline; }
.mapboxgl-ctrl-attrib-button { display:none; }
.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-logo { margin:4px 0 4px 12px; }

/* Masthead — now the left half of the top-right pill (.ts-bar); no own card. */
.masthead { display:flex; align-items:center; gap:9px; padding:7px 12px; background:none; border:none;
  box-shadow:none; border-radius:0; }
.masthead.hidden { display:none; }
.masthead-poppy { width:18px; height:18px; color:var(--accent); flex-shrink:0; }
.masthead-poppy svg { width:100%; height:100%; display:block; }
.masthead-text { display:flex; flex-direction:column; line-height:1; }
.masthead-name { font-family:'Barlow',sans-serif; font-weight:700; font-size:16px; letter-spacing:-0.01em; color:var(--text-primary); }
.masthead-eyebrow { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); margin-top:3px; }

/* Loader — above UI, below the intro */
.loader { position:fixed; inset:0; z-index:150; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:var(--scrim); backdrop-filter:blur(3px); transition:opacity .45s ease, visibility .45s; }
.loader.gone { opacity:0; visibility:hidden; }
.loader-poppy { width:40px; height:40px; color:var(--accent); animation:loaderPulse 1.25s ease-in-out infinite; }
.loader-poppy svg { width:100%; height:100%; display:block; }
@keyframes loaderPulse { 0%,100% { transform:scale(0.86); opacity:.55; } 50% { transform:scale(1.04); opacity:1; } }
.loader-label { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-secondary); }

/* Intro cover */
.intro { position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:24px;
  background:var(--scrim); backdrop-filter:blur(7px) saturate(0.9);
  transition:opacity .6s ease, visibility .6s; }
.intro.gone, html.intro-seen .intro { opacity:0; visibility:hidden; }
.intro-eyebrow { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:13px; letter-spacing:.32em; text-transform:uppercase; color:var(--intro-sub); margin-bottom:18px; }
.intro-title { font-family:'Barlow',sans-serif; font-weight:700; color:var(--ink); font-size:clamp(54px,11vw,116px); line-height:.92; letter-spacing:-.02em; text-transform:uppercase; }
.intro-rule { width:54px; height:3px; background:var(--accent); margin:22px 0 18px; }
.intro-sub { font-family:'Barlow',sans-serif; font-weight:500; font-size:clamp(14px,1.7vw,17px); color:var(--ink); max-width:30ch; line-height:1.5; opacity:.92; }
.legend { display:flex; gap:12px; margin:34px 0 30px; flex-wrap:wrap; justify-content:center; }
.legend-chip { width:36px; height:36px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.28); }
.legend-chip img { width:30px; height:30px; display:block; }
[data-scheme="light"] .legend-chip, [data-scheme="gear"] .legend-chip { border-radius:28%; }
[data-scheme="dark"] .legend-chip, [data-scheme="midnight"] .legend-chip { clip-path:polygon(22% 0%,78% 0%,100% 22%,100% 78%,78% 100%,22% 100%,0% 78%,0% 22%); }
.intro-btn { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:var(--accent); border:none; border-radius:100px; padding:13px 30px; cursor:pointer; }
[data-scheme="midnight"] .intro-btn { color:#06222a; }

/* ============================================================
   DESIGN PASS — CLUSTERING (zoom-scale layer + district placard)
   ============================================================ */

/* Lever 1 — global marker zoom-scaling. No transition (track zoom exactly);
   composes with the inner hover scale. */
.slo-marker-scale {
  /* zoom lever (--mk-scale) and hover lever (--mk-hover) compose multiplicatively
     on one transform so the badge (a child of this layer) always scales with the body. */
  transform: scale(calc(var(--mk-scale, 1) * var(--mk-hover, 1)));
  transform-origin: center center;
  position: relative;
  transition: transform 0.15s ease;
}

/* Inline svg sizing for the eyebrow chip (district uses inline svg, not the white img) */
.eyebrow-chip svg { width:17px; height:17px; display:block; }
/* Inline svg sizing for the list-card badge (district uses inline svg) */
.lv-card-badge svg { width:18px; height:18px; display:block; }

/* District placard marker */
.slo-district { cursor:pointer; user-select:none; -webkit-user-select:none; transition: transform 0.15s ease; }
.slo-district:hover { transform: scale(1.1); }
.placard {
  display:flex; align-items:center; gap:8px;
  background:var(--district-bg); color:var(--district-fg);
  padding:6px 11px 6px 8px; border-radius:8px;
}
.placard-glyph { width:18px; height:18px; flex-shrink:0; color:var(--district-fg); }
.placard-glyph svg { width:100%; height:100%; display:block; }
.placard-name {
  font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:13px; line-height:1;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
.placard-count {
  font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:11px; line-height:1;
  font-variant-numeric:tabular-nums; padding:2px 7px; border-radius:20px;
  background:var(--district-fg); color:var(--district-bg);
}