/* =====================================================================
   Distillery Finder: shared styles (v2 redesign)
   ===================================================================== */
:root {
  --primary: #203B32;     /* forest: clusters, selected states, header trip button */
  --primary-hover: #2c4d42;
  --on-primary: #ffffff;  /* text on --primary and --whisky-btn */
  --whisky: #B87932;      /* accent: pins, dots, highlights (not for small text on white) */
  --whisky-btn: #9C6524;  /* buttons with white text */
  --whisky-text: #8F5C20; /* links and small accent text */
  --cream: #F7F4ED;       /* page background */
  --surface: #ffffff;     /* cards, panels, inputs */
  --ink: #252D29;         /* body text */
  --muted: #5E6761;       /* secondary text */
  --faint: #b9bdb6;       /* unavailable letters */
  --placeholder: #7d857f;
  --border: #DDDCD3;
  --border-soft: #eeece6;
  --control-border: #a3a89f;
  --field-border: #c9c8be;
  --mist: #EFEBE2;        /* hover / selected fills */
  --hover-soft: #faf8f3;
  --sea: #DDE9E8;
  --warn-bg: #f4e0da;
  --warn-text: #7d2a1e;
  --error: #a33a2b;
  --ring: #ffffff;        /* outline round clusters and badges on the map */
  --cluster-bg: var(--primary);
  --cluster-text: #ffffff;
  --route: #203B32;       /* trip line on the map (read by map.js) */
  --tiles: saturate(.6) brightness(1.04) contrast(.94);
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Spectral", Georgia, serif;
  --gutter: clamp(16px, 2.5vw, 32px);
  --radius: 14px;
  --shadow: 0 1px 2px rgba(37,45,41,.06), 0 4px 16px rgba(37,45,41,.08);
}

/* Dark theme: black and gold. Set by <html data-theme="dark"> (see SiteLayout). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #C6A15B;     /* antique gold */
  --primary-hover: #D8B76A; /* light gold */
  --on-primary: #141615;
  --whisky: #C6A15B;
  --whisky-btn: #C6A15B;
  --whisky-text: #D8B76A;
  --cream: #141615;       /* soft black */
  --surface: #202522;     /* charcoal */
  --ink: #F2EBDD;         /* warm ivory */
  --muted: #B9BAAE;       /* muted stone */
  --faint: #5B5F55;
  --placeholder: #8E9085;
  --border: #44483D;
  --border-soft: #2E332F;
  --control-border: #6B6F62;
  --field-border: #55594D;
  --mist: #2C312D;
  --hover-soft: #262B28;
  --sea: #123B34;         /* dark teal, shown while tiles load */
  --warn-bg: #3D221C;
  --warn-text: #F2B9AA;
  --error: #F08A78;
  --ring: #C6A15B;
  --cluster-bg: #202522;
  --cluster-text: #F2EBDD;
  --route: #D8B76A;
  --tiles: url(#df-map-tone); /* SVG filter in SiteLayout */
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
}
/* Leaflet's own white chrome */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--ink); }
.leaflet-bar a { background-color: var(--surface); border-bottom-color: var(--border); }
.leaflet-bar a:hover, .leaflet-bar a:focus { background-color: var(--mist); }
:root[data-theme="dark"] .leaflet-container .leaflet-control-attribution { background: rgba(32,37,34,.8); color: var(--muted); }
:root[data-theme="dark"] .leaflet-control-attribution a { color: var(--whisky-text); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--body); color: var(--ink); background: var(--cream);
}
main { flex: 1 0 auto; }
a { color: var(--whisky-text); }
[hidden] { display: none !important; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 5000;
  padding: 10px 14px; border-radius: 8px; background: var(--primary); color: var(--on-primary); text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---- Header ---- */
.site-head {
  display: flex; align-items: center; gap: 12px 28px;
  padding: 14px var(--gutter) 12px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand img { width: 46px; height: 46px; flex: none; }
.brand span { font: 700 28px/1 var(--display); letter-spacing: -.01em; }
.brand:focus-visible { outline: 2px solid var(--whisky); outline-offset: 4px; border-radius: 6px; }

.nav { margin-left: auto; }
.nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px;
  color: var(--ink); text-decoration: none; font: 500 15px var(--body); border-radius: 8px;
}
.nav a[aria-current="page"] { font-weight: 700; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--whisky);
}
.nav a:focus-visible { outline: 2px solid var(--whisky); outline-offset: 1px; }
@media (hover: hover) { .nav a:not([aria-current]):hover { background: var(--mist); } }

/* Light / dark toggle: shows the moon in light mode, the sun in dark mode */
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; margin-right: -16px; padding: 0;
  border: 1px solid var(--border); border-radius: 10px; background: none; color: var(--ink); cursor: pointer;
}
.theme-btn svg { width: 20px; height: 20px; }
.theme-btn__sun { display: none; }
:root[data-theme="dark"] .theme-btn__sun { display: block; }
:root[data-theme="dark"] .theme-btn__moon { display: none; }
.theme-btn:focus-visible { outline: 2px solid var(--whisky); outline-offset: 2px; }
@media (hover: hover) { .theme-btn:hover { background: var(--mist); } }

.tripnav {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 42px; padding: 6px 14px 6px 12px; border-radius: 10px;
  background: var(--primary); color: var(--on-primary); text-decoration: none; font: 600 15px var(--body);
}
.tripnav svg { width: 20px; height: 20px; flex: none; }
.tripnav__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--cream); color: var(--primary); font: 700 12px var(--body);
}
.tripnav:focus-visible { outline: 2px solid var(--whisky); outline-offset: 2px; }
@media (hover: hover) { .tripnav:hover { background: var(--primary-hover); } }

@media (max-width: 860px) {
  .site-head { flex-wrap: wrap; padding: 10px 12px 4px; }
  .brand img { width: 38px; height: 38px; }
  .brand span { font-size: 23px; }
  .theme-btn { margin: 0 -4px 0 auto; width: 38px; height: 38px; }
  .tripnav { min-height: 38px; padding: 4px 10px; font-size: 14px; }
  .nav { order: 3; width: 100%; margin: 0 -6px; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; min-height: 38px; padding: 6px 10px; font-size: 14px; }
  .nav a[aria-current="page"]::after { left: 10px; right: 10px; }
}

/* ---- Page intro ---- */
.intro { padding: 10px var(--gutter) 20px; }
.intro h1 { margin: 0; font: 700 clamp(30px, 4.2vw, 50px)/1.05 var(--display); letter-spacing: -.02em; color: var(--ink); }
.intro p { margin: 10px 0 0; max-width: 60ch; font: 500 clamp(17px, 1.6vw, 20px)/1.45 var(--display); color: var(--muted); }
@media (max-width: 860px) { .intro { padding: 8px 12px 14px; } }

/* ---- Footer ---- */
.site-foot { flex: none; border-top: 1px solid var(--border); margin-top: 24px; }
.site-foot__in {
  padding: 18px var(--gutter) 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  font-size: 14px; color: var(--muted);
}
.site-foot ul { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.site-foot a { color: var(--muted); }

/* =====================================================================
   Map layout: filter panel beside the map (desktop),
   floating search + bottom sheet over the map (phones)
   ===================================================================== */
.map-layout {
  position: relative;
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px;
  padding: 0 var(--gutter);
  height: clamp(540px, 78vh, 840px);
}
.map-layout:fullscreen, .map-layout:-webkit-full-screen { height: 100%; padding: 12px; background: var(--cream); }
.map-wrap {
  position: relative; min-width: 0; height: 100%;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
#map { position: absolute; inset: 0; background: var(--sea); font-family: var(--body); }
/* Calmer base map: standard OpenStreetMap tiles, softened */
.leaflet-tile-pane { filter: var(--tiles); }

@media (max-width: 860px) {
  .map-layout { display: block; padding: 0; height: calc(100svh - 150px); min-height: 460px; max-height: 780px; }
  .map-wrap { border-radius: 0; border-inline: 0; box-shadow: none; }
}

/* ---- Support bar ---- */
.support {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px;
  padding: 16px var(--gutter) 4px;
}
.support__text { font: 500 17px/1.3 var(--display); color: var(--muted); }
.support__text .short { display: none; }
.support__btn {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 40px; padding: 8px 18px; border-radius: 999px;
  background: var(--whisky-btn); color: var(--on-primary); text-decoration: none; font: 600 15px var(--body);
}
.support__btn svg { width: 18px; height: 18px; flex: none; }
.support__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (hover: hover) { .support__btn:hover { background: var(--whisky-text); } }
@media (max-width: 600px) {
  .support { padding: 12px; justify-content: space-between; flex-wrap: nowrap; }
  .support__text { font-size: 15px; }
  .support__text .long { display: none; }
  .support__text .short { display: inline; }
  .support__btn { min-height: 36px; padding: 6px 13px; gap: 6px; font-size: 13px; }
  .support__btn svg { width: 15px; height: 15px; }
}

/* ---- Finder panel ---- */
.finder {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 16px 0;
}
.finder__bar { display: flex; gap: 8px; flex: none; }
.search { position: relative; flex: 1; min-width: 0; }
.search svg {
  position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.finder input {
  width: 100%; font: 16px var(--body);
  border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px 11px 38px; color: var(--ink);
  background: var(--surface); -webkit-appearance: none; appearance: none;
}
.finder input::placeholder { color: var(--placeholder); }
.finder input:focus { outline: 2px solid var(--whisky); outline-offset: 1px; border-color: transparent; }

.filter-btn { display: none; }

.filters { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 8px -16px 0; }
.sheet__head, .sheet__foot { display: none; }
.filters__body { overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 8px; }
.fgroup + .fgroup { border-top: 1px solid var(--border); margin-top: 4px; }
.fgroup__head {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px;
  padding: 8px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 700 18px var(--display); color: var(--ink);
}
.fgroup__sum {
  margin-left: auto; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 13px var(--body); color: var(--muted);
}
.fgroup__head svg { width: 16px; height: 16px; flex: none; transition: transform .2s; }
.fgroup__head[aria-expanded="true"] svg { transform: rotate(180deg); }
.fgroup__head:focus-visible { outline: 2px solid var(--whisky); outline-offset: 2px; border-radius: 4px; }
.fgroup__hint { margin: -4px 0 8px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }

.opts { display: flex; flex-direction: column; padding-bottom: 8px; }
.opt {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 40px; padding: 6px 4px;
  border: 0; border-bottom: 1px solid var(--border-soft); border-radius: 0; background: none; cursor: pointer; text-align: left;
  font: 15px var(--body); color: var(--ink); touch-action: manipulation;
}
.opts .opt:last-child { border-bottom: 0; }
.opt .box {
  width: 20px; height: 20px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--control-border); border-radius: 5px; background: var(--surface); color: var(--on-primary);
}
.opt .box svg { width: 13px; height: 13px; opacity: 0; }
.opt[aria-pressed="true"] .box { background: var(--primary); border-color: var(--primary); }
.opt[aria-pressed="true"] .box svg { opacity: 1; }
.opt .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.opt .lbl { flex: 1; min-width: 0; }
.opt .n { color: var(--muted); font-size: 13px; }
.opt:disabled { opacity: .4; cursor: default; }
.opt:focus-visible { outline: 2px solid var(--whisky); outline-offset: -2px; border-radius: 6px; }
@media (hover: hover) { .opt:not(:disabled):hover { background: var(--hover-soft); } }

/* Facilities: chips with icons, everywhere */
.opts.chips { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.chips .opt {
  width: auto; min-height: 40px; padding: 6px 12px; gap: 7px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 14px;
}
.chips .opt .box { display: none; }
.chips .opt .lbl { flex: none; }
.chips .opt .ico { width: 18px; height: 18px; flex: none; color: var(--muted); }
.chips .opt[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.chips .opt[aria-pressed="true"] .ico, .chips .opt[aria-pressed="true"] .n { color: var(--on-primary); }
@media (hover: hover) { .chips .opt:not(:disabled):not([aria-pressed="true"]):hover { background: var(--mist); } }

/* Visitor settings ("Include distilleries closed to visitors" on the map, "Only distilleries
   open to visitors" on the dart page): settings, so they keep their tick box everywhere */
.open-only { padding: 6px 0 4px; border-bottom: 1px solid var(--border); }
.open-only .opt { border: 0; font-weight: 600; padding: 6px 0; }
@media (max-width: 860px) {
  .open-only .opt { width: 100%; border: 0 !important; border-radius: 0; background: none; padding: 4px 0; min-height: 40px; }
  .open-only .opt .box { display: flex; }
  .open-only .opt[aria-pressed="true"] { background: none; }
}

/* "N more match among distilleries closed to visitors" under the search box */
.closed-hint { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--mist); font-size: 14px; line-height: 1.4; color: var(--ink); }
.closed-hint button { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--whisky-text); text-decoration: underline; }
.closed-hint button:focus-visible { outline: 2px solid var(--whisky); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 860px) { .closed-hint { margin: 6px 0 0; padding: 6px 8px; font-size: 13px; } }

/* Shown in place of a website link when a distillery has none */
.nosite { color: var(--muted); font-size: 14px; }

.finder__meta {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 -16px; padding: 10px 16px 12px; border-top: 1px solid var(--border);
}
.clear-all, .help-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 36px; padding: 4px 2px; border: 0; background: none; cursor: pointer;
  font: 14px var(--body); color: var(--ink);
}
.clear-all { color: var(--whisky-text); text-decoration: underline; }
.help-btn svg, .clear-all svg { width: 17px; height: 17px; flex: none; }
.clear-all:focus-visible, .help-btn:focus-visible { outline: 2px solid var(--whisky); outline-offset: 1px; border-radius: 4px; }
@media (hover: hover) { .help-btn:hover { text-decoration: underline; } }

.scrim { display: none; }

@media (max-width: 860px) {
  .finder {
    position: absolute; z-index: 1001; top: 8px; left: 8px; right: 8px;
    padding: 8px; border-radius: 12px; border: 0;
    box-shadow: 0 2px 10px rgba(37,45,41,.2);
  }
  .finder__meta { margin: 0; padding: 4px 4px 0; border: 0; }
  .clear-all, .help-btn { min-height: 30px; font-size: 13px; }

  .filter-btn {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    min-height: 44px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer;
    font: 600 15px var(--body); color: var(--ink);
  }
  .filter-btn svg { width: 18px; height: 18px; flex: none; }
  .filter-btn.active { border-color: var(--primary); background: var(--mist); }
  .filter-btn:focus-visible { outline: 2px solid var(--whisky); outline-offset: 2px; }
  .filter-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    background: var(--primary); color: var(--on-primary); font: 700 12px var(--body);
  }

  .filters {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    max-height: 78%; margin: 0;
    background: var(--surface); border-radius: 16px 16px 0 0; box-shadow: 0 -4px 20px rgba(37,45,41,.25);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .filters.open { transform: none; visibility: visible; transition: transform .25s ease; }
  .sheet__head {
    display: flex; align-items: center; justify-content: space-between; flex: none;
    padding: 4px 6px 4px 16px; border-bottom: 1px solid var(--border);
  }
  .sheet__head h2 { margin: 0; font: 700 20px var(--display); }
  .sheet__close {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border: 0; background: none; color: var(--ink); cursor: pointer;
  }
  .sheet__close svg { width: 20px; height: 20px; }
  .sheet__close:focus-visible { outline: 2px solid var(--whisky); outline-offset: -4px; border-radius: 8px; }

  /* Regions become chips in the sheet too */
  .opts { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .opt {
    width: auto; min-height: 40px; padding: 4px 12px; gap: 7px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  }
  .opts .opt:last-child { border-bottom: 1px solid var(--border); }
  .opt .box { display: none; }
  .opt .lbl { flex: none; }
  .opt[aria-pressed="true"] { border-color: var(--primary); background: var(--mist); font-weight: 600; }
  .chips .opt { border-radius: 999px; }

  .sheet__foot {
    display: flex; align-items: center; gap: 12px; flex: none;
    padding: 10px 16px; border-top: 1px solid var(--border);
  }
  .sheet__clear {
    padding: 8px 4px; border: 0; background: none; cursor: pointer;
    font: 15px var(--body); color: var(--whisky-text); text-decoration: underline;
  }
  .sheet__done {
    flex: 1; min-height: 46px; border: 0; border-radius: 10px; cursor: pointer;
    background: var(--primary); color: var(--on-primary); font: 600 16px var(--body);
  }
  .sheet__clear:focus-visible, .sheet__done:focus-visible { outline: 2px solid var(--whisky); outline-offset: 2px; }

  .scrim {
    display: block; position: fixed; inset: 0; z-index: 1150;
    background: rgba(37,45,41,.35); opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  .scrim.show { opacity: 1; pointer-events: auto; }
  .finder.sheet-open { z-index: 1200; }
}

/* ---- Map toolbar: count + Map/List ---- */
.map-tools {
  position: absolute; z-index: 1000; left: 12px; top: calc(var(--finder-h, 0px) + 12px);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: calc(100% - 340px);
}
.count-pill, .seg {
  display: inline-flex; align-items: center; min-height: 40px;
  background: var(--surface); border-radius: 10px; box-shadow: 0 1px 6px rgba(37,45,41,.16);
}
.count-pill { gap: 8px; padding: 6px 12px; font: 600 14px var(--body); color: var(--ink); }
.count-pill img { width: 20px; height: 20px; flex: none; }
.count-pill .status { margin: 0; }
.seg { padding: 4px; gap: 2px; }
.seg button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px;
  border: 0; border-radius: 7px; background: none; cursor: pointer; font: 600 14px var(--body); color: var(--ink);
}
.seg button svg { width: 17px; height: 17px; }
.seg button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.seg button:focus-visible { outline: 2px solid var(--whisky); outline-offset: 1px; }
@media (hover: hover) { .seg button:not([aria-pressed="true"]):hover { background: var(--mist); } }
@media (max-width: 860px) {
  .map-tools { left: 8px; top: calc(var(--finder-h, 100px) + 14px); max-width: calc(100% - 16px); gap: 6px; }
  .count-pill { min-height: 36px; padding: 4px 10px; font-size: 13px; }
  .count-pill img { width: 17px; height: 17px; }
  .seg button { min-height: 28px; padding: 3px 10px; font-size: 13px; }
}

/* ---- List view ---- */
.listview {
  position: absolute; z-index: 990; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--cream); padding: 68px 16px 24px;
}
.listview ol { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; display: grid; gap: 10px; }
.lrow {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.lrow h3 { margin: 0; font: 700 19px/1.2 var(--display); }
.lrow h3 a { color: inherit; text-decoration: none; }
.lrow h3 a:focus-visible { outline: 2px solid var(--whisky); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) { .lrow h3 a:hover { color: var(--primary); text-decoration: underline; text-decoration-color: var(--whisky); text-underline-offset: 3px; } }
.lrow .meta { margin: 3px 0 0; font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.lrow .meta .region { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.lrow .meta .dot { width: 10px; height: 10px; border-radius: 50%; }
.lrow .meta .lrow__web { color: var(--whisky-text); text-underline-offset: 2px; }
.lrow .tags { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 8px 0 0; padding: 0; }
.lrow .tags li { padding: 3px 8px; border-radius: 999px; background: var(--mist); color: var(--ink); font: 600 12px/1.3 var(--body); }
.lrow .tags li.warn { background: var(--warn-bg); color: var(--warn-text); }
.lrow__act { display: flex; flex-direction: column; gap: 6px; }
.lrow__act button, .lrow__act a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px 12px;
  border-radius: 8px; font: 600 14px var(--body); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.lrow__show { border: 1px solid var(--primary); background: var(--primary); color: var(--on-primary); }
.lrow__act .tripbtn { border: 1px solid var(--primary); background: var(--surface); color: var(--primary); }
.lrow__act .tripbtn.in { background: var(--mist); }
.lrow__act .tripbtn:disabled { border-color: var(--border); color: var(--muted); cursor: default; }
.lrow__act .lbl-short { display: none; }
.lrow__act button:focus-visible { outline: 2px solid var(--whisky); outline-offset: 2px; }
.listview__empty { max-width: 820px; margin: 24px auto; font-size: 15px; color: var(--muted); }
@media (max-width: 860px) {
  .listview { padding: calc(var(--finder-h, 100px) + 62px) 8px 96px; }
  .lrow { grid-template-columns: 1fr; padding: 12px; }
  .lrow__act { flex-direction: row; }
  .lrow__act button { flex: 1; }
}

/* ---- Gesture hint ---- */
.gesture-hint {
  position: absolute; z-index: 999; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(37,45,41,.45); color: #fff; font: 600 16px var(--body); text-align: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.gesture-hint.show { opacity: 1; }

/* ---- Map controls ---- */
.leaflet-bar { border: 0 !important; box-shadow: 0 1px 6px rgba(37,45,41,.2) !important; border-radius: 10px !important; overflow: hidden; }
.leaflet-touch .leaflet-control-zoom a, .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; color: var(--ink); }
.ctl-btn.leaflet-bar a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: var(--surface); color: var(--ink); cursor: pointer;
}
.ctl-btn svg { width: 20px; height: 20px; }
.ctl-btn.leaflet-bar a:focus-visible { outline: 2px solid var(--whisky); outline-offset: -2px; }
.ctl-btn.busy svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (hover: hover) { .ctl-btn.leaflet-bar a:hover { background: var(--mist); } }
.leaflet-control-attribution { font-size: 11px; }

/* "You are here" */
.here-dot { width: 18px; height: 18px; border-radius: 50%; background: #2F6FD0; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(47,111,208,.2), 0 1px 3px rgba(0,0,0,.3); }

/* ---- Pins ---- */
.still-pin { width: 31px; height: 40px; position: relative; }
.still-pin svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.trip-badge {
  position: absolute; top: -9px; right: -11px;
  min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 11px; border: 2px solid var(--ring); background: var(--primary); color: var(--on-primary);
  font: 700 12px/18px var(--body); text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.pin-label {
  position: absolute; left: 29px; top: 14px; display: none;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface); box-shadow: 0 1px 3px rgba(37,45,41,.3);
  font: 600 12px/1.35 var(--body); color: var(--ink); cursor: pointer;
}
#map.labels .pin-label { display: block; }
#map.labels .label-hidden .pin-label { display: none; }
@media (max-width: 600px) { .pin-label { font-size: 11px; max-width: 140px; padding: 2px 7px; } }

.cluster {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--cluster-text); font: 700 15px var(--body);
  background: var(--cluster-bg); border: 3px solid var(--ring);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* ---- Popup ---- */
.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 6px 24px rgba(37,45,41,.22); }
.leaflet-popup-content { margin: 14px 16px; min-width: 210px; }
.leaflet-container a.leaflet-popup-close-button { width: 32px; height: 32px; font-size: 22px; line-height: 30px; color: var(--muted); }
.pop h3 { font: 700 21px/1.2 var(--display); margin: 0 28px 4px 0; color: var(--ink); }
.pop .meta { font-size: 14px; color: var(--muted); margin: 0 0 4px; line-height: 1.4; }
.pop .region { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.pop .region .dot { width: 10px; height: 10px; border-radius: 50%; }
.pop .tags { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 8px 0 0; padding: 0; }
.pop .tags li { padding: 4px 8px; border-radius: 999px; background: var(--mist); color: var(--ink); font: 600 12px/1.2 var(--body); }
.pop .tags li.warn { background: var(--warn-bg); color: var(--warn-text); }
.pop .actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pop a.btn {
  flex: 1 1 120px; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 44px; padding: 8px 10px; border-radius: 10px;
  text-decoration: none; font: 600 15px var(--body);
}
.pop a.primary { background: var(--whisky-btn); color: var(--on-primary); }
.pop a.secondary { border: 1px solid var(--border); color: var(--ink); }
.pop .lbl-short { display: none; }
.pop .tripbtn {
  flex: 1 1 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--primary); border-radius: 10px; background: var(--surface); color: var(--primary);
  font: 600 15px var(--body); cursor: pointer;
}
.pop .tripbtn.in { background: var(--primary); color: var(--on-primary); }
.pop .tripbtn:disabled { border-color: var(--border); color: var(--muted); cursor: default; }
@media (hover: hover) {
  .pop a.primary:hover { background: var(--whisky-text); }
  .pop a.secondary:hover { background: var(--mist); }
  .pop .tripbtn:not(.in):not(:disabled):hover { background: var(--mist); }
}
.pop a.link { display: inline-block; padding: 6px 0; color: var(--whisky-text); font-size: 14px; }
.pop a:focus-visible, .pop .tripbtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pop .note { margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--border); font-size: 12px; line-height: 1.4; color: var(--muted); }
@media (max-width: 600px) {
  .leaflet-popup-content { margin: 10px 12px; min-width: 0; }
  .leaflet-container a.leaflet-popup-close-button { width: 28px; height: 28px; font-size: 20px; line-height: 26px; }
  .pop h3 { font-size: 18px; margin: 0 22px 2px 0; }
  .pop .meta { font-size: 13px; margin: 0 0 2px; line-height: 1.35; }
  .pop .tags { margin-top: 6px; }
  .pop .tags li { padding: 3px 7px; font-size: 11px; }
  .pop .actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
  .pop a.btn, .pop .tripbtn { min-height: 40px; padding: 4px; border-radius: 8px; font-size: 13px; line-height: 1.2; text-align: center; }
  .pop .lbl-long { display: none; }
  .pop .lbl-short { display: inline; }
  .pop a.link { font-size: 13px; padding: 6px 0 0; }
  .pop .note { font-size: 11px; padding-top: 6px; }
}

/* ---- Trip panel ---- */
.trip {
  position: absolute; z-index: 1000; top: 12px; right: 12px;
  width: min(310px, calc(100% - 24px));
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: 12px; box-shadow: 0 2px 12px rgba(37,45,41,.18);
}
.trip__toggle {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px;
  padding: 8px 12px; border: 0; background: none; cursor: pointer;
  font: 700 18px var(--display); color: var(--ink); text-align: left;
}
.trip__toggle:focus-visible { outline: 2px solid var(--whisky); outline-offset: -2px; border-radius: 12px; }
.trip__icon {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; background: var(--whisky); color: var(--on-primary);
}
.trip__icon svg { width: 20px; height: 20px; }
.trip__title { display: flex; flex-direction: column; min-width: 0; }
.trip__sub { margin-top: 1px; font: 400 13px/1.3 var(--body); color: var(--muted); }
.trip:not(.empty) .trip__sub { display: none; }
.trip__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--primary); color: var(--on-primary); font: 700 13px var(--body);
}
.trip__info { margin-left: auto; width: 18px; height: 18px; flex: none; color: var(--muted); }
.trip:not(.empty) .trip__info { display: none; }
.trip__chev { margin-left: auto; width: 18px; height: 18px; flex: none; transition: transform .2s; }
.trip:not(.collapsed) .trip__chev { transform: rotate(180deg); }
.trip.empty .trip__count, .trip.empty .trip__chev, .trip.empty .trip__body { display: none; }
.trip__body { overflow-y: auto; padding: 0 12px 10px; }
.trip.collapsed .trip__body { display: none; }
.trip ol { list-style: none; margin: 0; padding: 0; }
.stop { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-top: 1px solid var(--border); }
.stop__n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--on-primary); font: 700 13px var(--body);
}
.stop__name {
  flex: 1; min-width: 0; padding: 6px 2px; border: 0; background: none; cursor: pointer; text-align: left;
  font: 15px var(--body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stop__btn {
  flex: none; width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer;
}
.stop__btn svg { width: 16px; height: 16px; }
.stop__btn:disabled { opacity: .3; cursor: default; }
.stop__name:focus-visible, .stop__btn:focus-visible { outline: 2px solid var(--whisky); outline-offset: 1px; }
@media (hover: hover) {
  .stop__name:hover { color: var(--whisky-text); text-decoration: underline; }
  .stop__btn:not(:disabled):hover { border-color: var(--muted); }
}
.trip__here {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  border-top: 1px solid var(--border); font: 15px var(--body); color: var(--ink); cursor: pointer;
}
.trip__here input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--primary); cursor: pointer; }
.trip__here.is-disabled { color: var(--muted); cursor: default; }
.trip__note { margin: 8px 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.trip__go {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 8px 10px; border-radius: 10px;
  background: var(--whisky-btn); color: var(--on-primary); text-decoration: none; font: 600 15px var(--body);
}
.trip__go[aria-disabled="true"] { background: var(--mist); color: var(--muted); pointer-events: none; }
@media (hover: hover) { .trip__go:hover { background: var(--whisky-text); } }
.trip__go:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.trip__clear {
  display: block; margin: 6px auto 0; padding: 8px; border: 0; background: none; cursor: pointer;
  font: 14px var(--body); color: var(--whisky-text); text-decoration: underline;
}
@media (max-width: 860px) {
  .trip { top: auto; left: 8px; right: 60px; bottom: 16px; width: auto; }
  .trip__toggle { font-size: 17px; min-height: 48px; }
  .trip__icon { width: 30px; height: 30px; }
  .trip__sub { font-size: 12px; }
}

/* ---- Toast ---- */
.toast {
  position: absolute; z-index: 1100; left: 50%; bottom: 28px;
  width: max-content; max-width: min(420px, calc(100% - 24px));
  padding: 10px 16px; border-radius: 10px; background: var(--primary); color: var(--on-primary);
  font: 500 14px/1.4 var(--body); box-shadow: 0 4px 16px rgba(37,45,41,.35);
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 860px) {
  .toast { left: 8px; right: 60px; bottom: 84px; width: auto; max-width: none; transform: translateY(12px); font-size: 13px; padding: 9px 12px; }
  .toast.show { transform: none; }
}

/* ---- How to use this map ---- */
.help {
  width: min(460px, calc(100% - 24px)); max-height: calc(100% - 24px);
  padding: 0; border: 0; border-radius: 16px; color: var(--ink); background: var(--surface);
  box-shadow: 0 10px 40px rgba(37,45,41,.35);
}
.help[open] { display: flex; flex-direction: column; }
.help::backdrop { background: rgba(37,45,41,.45); }
.help__head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 6px 6px 6px 20px; border-bottom: 1px solid var(--border);
}
.help__head h2 { margin: 0; font: 700 22px var(--display); }
.help__close {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--ink); cursor: pointer;
}
.help__close svg { width: 20px; height: 20px; }
.help__body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 8px; }
.help ol { list-style: none; margin: 0; padding: 0; }
.hstep { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.hstep__n {
  grid-row: 1 / span 3; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--on-primary); font: 700 14px var(--body);
}
.hstep h3 { margin: 3px 0 2px; font: 700 18px var(--display); }
.hstep p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.demo { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.demo-search { width: 170px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--muted); }
.demo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; }
.demo-chip .dot { width: 9px; height: 9px; border-radius: 50%; }
.demo-pin { width: 23px; height: 30px; }
.demo-pin svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.demo-cluster {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--on-primary); font: 700 13px var(--body);
  border: 2px solid var(--ring); box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.demo-btn { padding: 8px 14px; border-radius: 8px; font: 600 14px var(--body); }
.demo-btn.outline { border: 1px solid var(--primary); color: var(--primary); background: var(--surface); }
.demo-btn.amber { background: var(--whisky-btn); color: var(--on-primary); }
.help__tips { list-style: none; margin: 14px 0 4px; padding: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.help__tips li { position: relative; padding-left: 16px; margin-bottom: 6px; }
.help__tips li::before { content: "•"; position: absolute; left: 3px; }
.help__foot { flex: none; padding: 12px 20px 16px; border-top: 1px solid var(--border); }
.help__done {
  width: 100%; min-height: 46px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--primary); color: var(--on-primary); font: 600 16px var(--body);
}
.help__close:focus-visible { outline: 2px solid var(--whisky); outline-offset: -4px; border-radius: 8px; }
.help__done:focus-visible { outline: 2px solid var(--whisky); outline-offset: 2px; }
@media (max-width: 600px) {
  .help { width: calc(100% - 16px); max-height: calc(100% - 16px); }
  .help__head { padding-left: 16px; }
  .help__body { padding: 0 16px 6px; }
  .help__foot { padding: 10px 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .filters, .filters.open, .scrim, .fgroup__head svg, .toast, .gesture-hint, .trip__chev { transition: none !important; }
  .ctl-btn.busy svg { animation: none; }
}

/* =====================================================================
   Cookie consent bar
   Sits above the map and toasts, below the mobile filter sheet (1150+).
   ===================================================================== */
.consent {
  position: fixed; z-index: 1140; left: 16px; bottom: 16px;
  width: min(400px, calc(100% - 32px)); padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  font: 14px/1.5 var(--body); color: var(--ink);
}
.consent[hidden] { display: none; }
.consent p { margin: 0; }
.consent a { color: var(--whisky-text); text-underline-offset: 2px; }
.consent__actions { display: flex; gap: 8px; margin-top: 12px; }
.consent__btn {
  flex: 1; min-height: 40px; padding: 6px 14px;
  border: 1px solid var(--primary); border-radius: 10px; background: var(--surface); color: var(--primary);
  font: 600 14px var(--body); cursor: pointer;
}
.consent__btn:focus-visible, .consent a:focus-visible { outline: 2px solid var(--whisky); outline-offset: 2px; }
@media (hover: hover) { .consent__btn:hover { background: var(--mist); } }
@media (max-width: 600px) { .consent { left: 8px; bottom: 8px; width: calc(100% - 16px); padding: 12px 14px; } }