/* ----------------------------------------------------------------
   my next stop, minimal design system (map-first)
   The map is the UI. One sans stack, flat surfaces, soft shadows,
   one accent. Controls float on the map like Google Maps; the
   answer lives in a clean bottom sheet.
   ---------------------------------------------------------------- */

:root {
  --bg: #f7f8fa;
  --panel: #ffffff;
  --panel-2: #f1f3f5;
  --ink: #1b1e22;
  --muted: #67717c;
  --line: #e4e7eb;
  --accent: #0e7a6c;
  --accent-soft: #e3f2ef;
  --accent-ink: #ffffff;
  --peak: #0f9d6e;
  --shoulder: #d97e06;
  --off: #98928a;
  --avoid: #d4482c;
  --lw: #6366f1;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --elev-1: 0 1px 2px rgba(16, 20, 24, .07), 0 4px 14px rgba(16, 20, 24, .07);
  --elev-2: 0 2px 6px rgba(16, 20, 24, .09), 0 12px 36px rgba(16, 20, 24, .16);
}

:root[data-theme="dark"] {
  --bg: #14171a;
  --panel: #1e2126;
  --panel-2: #272b31;
  --ink: #eceff2;
  --muted: #9aa4af;
  --line: #33383f;
  --accent: #34b3a0;
  --accent-soft: #123029;
  --accent-ink: #06231f;
  --elev-1: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .4);
  --elev-2: 0 2px 6px rgba(0, 0, 0, .45), 0 12px 36px rgba(0, 0, 0, .55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171a;
    --panel: #1e2126;
    --panel-2: #272b31;
    --ink: #eceff2;
    --muted: #9aa4af;
    --line: #33383f;
    --accent: #34b3a0;
    --accent-soft: #123029;
    --accent-ink: #06231f;
    --elev-1: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .4);
    --elev-2: 0 2px 6px rgba(0, 0, 0, .45), 0 12px 36px rgba(0, 0, 0, .55);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  min-height: 100dvh;
}
h1, h2, h3 { line-height: 1.15; margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button, a, select, label { touch-action: manipulation; }
a { color: var(--accent); }
::selection { background: var(--accent); color: var(--accent-ink); }
body { -webkit-tap-highlight-color: transparent; }
.map-overlay-top, .sheet, .dlg, button { user-select: none; -webkit-user-select: none; }

/* icons */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: 0 0 auto; }
.btn .ic, .icon-btn .ic, .card-act .ic, .chip .ic { width: 16px; height: 16px; }
.fact .ic { width: 14px; height: 14px; color: var(--muted); }
.origin-item .ic { width: 16px; height: 16px; color: var(--muted); margin-right: 4px; }
.cat-badge {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; flex: 0 0 auto;
}
.cat-badge .ic { width: 18px; height: 18px; }

/* buttons: layered and tactile, not flat rectangles. A soft top light,
   a deeper bottom edge and an accent glow give them physical presence. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 14px; padding: 12px 20px; font-weight: 650; letter-spacing: .1px;
  transition: transform .14s cubic-bezier(.2,.9,.3,1.3), box-shadow .18s ease, background .12s ease;
}
.btn .ic { transition: transform .15s ease; }
/* solid base first: color-mix() + var() computes to the INITIAL value on
   old engines (not the earlier cascade entry), so the layered treatment
   must live behind @supports or the CTA turns invisible there */
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  box-shadow: var(--elev-1);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--elev-2); }
.btn-primary:hover .ic { transform: translateX(2px); }
.btn-primary:active { transform: translateY(0) scale(.98); }
.btn-primary:disabled { opacity: .5; transform: none; cursor: default; box-shadow: none; }
@supports (background: color-mix(in srgb, red, blue)) {
  .btn-primary {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 86%, #fff) 0%,
      var(--accent) 45%,
      color-mix(in srgb, var(--accent) 84%, #000) 100%);
    border-color: color-mix(in srgb, var(--accent) 62%, #000);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32),
                0 1px 2px rgba(10, 14, 13, .18),
                0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  .btn-primary:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32),
                0 2px 4px rgba(10, 14, 13, .2),
                0 10px 26px color-mix(in srgb, var(--accent) 42%, transparent);
  }
  .btn-primary:active {
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .24), 0 1px 2px rgba(10, 14, 13, .14);
  }
}
/* the wait, wherever it happens: the labelled CTAs swap their text for
   "Locating…" and spin the same icon the map's icon-only button spins */
.btn.is-busy { pointer-events: none; }
.btn.is-busy .ic { animation: locate-spin 1s linear infinite; }
.btn-big { font-size: 16px; padding: 15px 30px; border-radius: 999px; }
.btn-wide { width: 100%; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 999px; font-size: 16px;
  background: var(--panel); border: 1px solid var(--line);
  display: grid; place-items: center; flex: 0 0 auto;
  transition: background .12s ease, transform .12s ease;
}
.icon-btn:hover { background: var(--panel-2); }
.icon-btn:active { transform: scale(.94); }

/* ----- home ----- */
.screen-home { display: flex; flex-direction: column; min-height: 100dvh; }
.home-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--sat) + 12px) 16px 0;
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 22px; height: 22px; color: var(--accent); }
.brand-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.home-top-acts { display: flex; align-items: center; gap: 8px; }
/* "Install app": phones in a browser tab only (js/pwa.js) */
.install-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px 0 11px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 13.5px; font-weight: 600;
  transition: transform .12s ease;
}
.install-pill .ic { width: 16px; height: 16px; }
.install-pill:active { transform: scale(.95); }

.home {
  width: 100%; max-width: 440px; margin: 0 auto;
  padding: 10vh 20px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
}
.home h1 { font-size: clamp(34px, 9vw, 44px); font-weight: 700; letter-spacing: -.03em; }
.home-sub { font-size: 15px; color: var(--muted); margin: 0 0 8px; }

.home-search-wrap { position: relative; width: 100%; }
.home-search {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 0 16px; height: 52px;
  box-shadow: var(--elev-1);
  transition: border-color .12s ease, box-shadow .15s ease;
}
.home-search:focus-within { border-color: var(--accent); box-shadow: var(--elev-2); }
.home-search .ic { width: 18px; height: 18px; color: var(--muted); }
.home-search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  color: var(--ink); font: inherit; font-size: 16px; height: 100%;
}
.home-search input::placeholder { color: var(--muted); }
.home-search-wrap .search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  text-align: left;
}
.home-hint { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
.btn-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }

/* The home screen's way into the written guides. Without real links here the
   657 generated pages are only reachable through the sitemap, and "/" reads
   to a crawler as a dead end. margin-top:auto parks it at the foot of the
   100dvh column so the hero keeps its position. */
.home-browse {
  margin-top: auto; width: 100%; max-width: 680px;
  margin-inline: auto; padding: 0 20px calc(var(--sab) + 18px);
  text-align: center; font-size: 12.5px; color: var(--muted);
}
.home-browse a { color: var(--muted); text-decoration: none; }
.home-browse a:hover { color: var(--accent); }
.hb-lead { margin: 0 0 14px; font-size: 13px; }
.hb-lead a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.hb-title {
  margin: 0 0 7px; font-size: 11px; font-weight: 620;
  letter-spacing: .06em; text-transform: uppercase; opacity: .75;
}
.hb-row { margin: 0 0 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.hb-row:last-child { margin-bottom: 0; }
.hb-row a { padding: 4px 10px; border-radius: 999px; background: var(--panel-2); }
.hb-row a:hover { background: var(--accent-soft); }

/* shared search results list */
.search-results {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--elev-2);
  overflow-y: auto; max-height: min(42dvh, 320px);
  display: flex; flex-direction: column; padding: 6px;
}
.origin-item {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 10px 10px; border-radius: 10px; font-size: 15px;
}
.origin-item:hover, .origin-item:focus { background: var(--panel-2); }
.origin-item .oi-type { margin-left: auto; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.search-empty { color: var(--muted); font-size: 13.5px; padding: 10px 12px; }

/* ----- map screen ----- */
.screen-map { position: fixed; inset: 0; overflow: hidden; }
.map-el { position: absolute; inset: 0; background: var(--bg); }

.map-overlay-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1050;
  padding: calc(var(--sat) + 10px) 12px 0;
  pointer-events: none;
}
.map-overlay-top > * { pointer-events: none; }

.overlay-bar {
  pointer-events: auto;
  display: flex; align-items: center; gap: 4px;
  background: var(--panel); border-radius: 999px;
  box-shadow: var(--elev-2);
  height: 48px; padding: 0 14px 0 6px;
  max-width: 480px;
}
.bar-home {
  width: 38px; height: 38px; border-radius: 999px; flex: 0 0 auto;
  display: grid; place-items: center; color: var(--accent);
  transition: background .12s ease;
}
.bar-home:hover { background: var(--panel-2); }
.bar-home .ic { width: 21px; height: 21px; }
.bar-origin {
  flex: 1; min-width: 0; text-align: left; align-self: stretch;
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; padding: 0 4px;
}
#originLabel { flex: 1; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-edit { width: 17px; height: 17px; color: var(--muted); flex: 0 0 auto; }

.chip-row {
  pointer-events: none;
  display: flex; gap: 8px; margin-top: 10px;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 4px;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip-row .chip { pointer-events: auto; box-shadow: var(--elev-1); }

/* chips: map row + filter dialog */
.chip {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 8px 14px; font-size: 13.5px; font-weight: 500;
  transition: background .12s ease, border-color .12s ease, transform .1s ease;
}
.chip:active { transform: scale(.96); }
a.chip { text-decoration: none; }
.chip .ic { color: var(--muted); }
.chip small { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.chip.is-on {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent); font-weight: 600;
}
.chip.is-on .ic, .chip.is-on small { color: inherit; }
/* the month picker: a native <select> laid invisibly over the chip. It is
   16px, so iOS opens the picker without zooming the page; the chip's span
   carries the visible text and sets the width. */
.chip-month { position: relative; }
.chip-month select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; padding: 0; border: 0;
  font-size: 16px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.chip-month:focus-within { border-color: var(--accent); }
.chip-month .chip-caret { width: 13px; height: 13px; margin-left: -2px; }
.filter-count {
  background: var(--accent); color: var(--accent-ink);
  border-radius: 99px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700;
}
.filter-count[hidden] { display: none; }

.map-theme-btn {
  position: absolute; z-index: 1040;
  top: calc(var(--sat) + 116px); right: 12px;
  box-shadow: var(--elev-1); border: 0;
}
/* under the theme toggle. On arrival it says "Install app" for a few
   seconds, then folds to the round icon: anchored right, so the label
   grows and shrinks to the left. */
.map-install-btn {
  position: absolute; z-index: 1040;
  top: calc(var(--sat) + 164px); right: 12px;
  width: auto; min-width: 40px; padding: 0 11px;
  display: flex; align-items: center;
  color: var(--accent); box-shadow: var(--elev-1); border: 0;
}
.map-install-btn .ic { width: 18px; height: 18px; }
.map-install-label {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  font-size: 13.5px; font-weight: 600;
  transition: max-width .4s cubic-bezier(.32,.72,.25,1), margin .4s cubic-bezier(.32,.72,.25,1), opacity .25s ease;
}
.map-install-btn.is-labelled .map-install-label { max-width: 110px; margin-left: 7px; opacity: 1; }

/* "my location" over the map. Rides just above the collapsed sheet: JS keeps
   --peek-h in sync with the peek strip, so the button glides with it. An
   expanded sheet owns that whole corner on phones, so the button steps aside
   (desktop docks the sheet to the right, and the override below keeps it). */
.map-locate-btn {
  position: absolute; z-index: 1040;
  right: 12px; bottom: calc(var(--peek-h, 130px) + 12px);
  width: 46px; height: 46px; color: var(--accent);
  box-shadow: var(--elev-1); border: 0;
  transition: background .12s ease, transform .12s ease, opacity .2s ease,
              visibility .2s ease, bottom .3s cubic-bezier(.32,.72,.25,1);
}
.map-locate-btn .ic { width: 22px; height: 22px; }
.map-locate-btn.is-busy { pointer-events: none; }
.map-locate-btn.is-busy .ic { animation: locate-spin 1s linear infinite; opacity: .6; }
.sheet.is-expanded ~ .map-locate-btn { opacity: 0; visibility: hidden; }
@keyframes locate-spin { to { transform: rotate(360deg); } }

/* filter dialog bits */
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.f-label { font-size: 12px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); font-weight: 600; margin-top: 4px; }
.legend-inline { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--muted); }
.legend-inline span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 99px; display: inline-block; }
.dot-peak { background: var(--peak); }
.dot-shoulder { background: var(--shoulder); }
.dot-off { background: var(--off); }
.dot-avoid { background: var(--avoid); }

/* ----- leaflet chrome (follows the site theme; extra specificity to
   beat the later-injected leaflet.css) ----- */
.screen-map .leaflet-top.leaflet-right { top: calc(var(--sat) + 106px); }
@media (max-width: 899px) { .screen-map .leaflet-control-zoom { display: none; } }
.screen-map .map-el .leaflet-bar { border: 0; border-radius: 12px; box-shadow: var(--elev-1); overflow: hidden; }
.screen-map .map-el .leaflet-bar a {
  width: 40px; height: 40px; line-height: 40px;
  background: var(--panel); color: var(--ink); border-bottom-color: var(--line);
}
.screen-map .map-el .leaflet-bar a.leaflet-disabled { color: var(--muted); }
.screen-map .map-el .leaflet-control-attribution {
  background: color-mix(in srgb, var(--panel) 80%, transparent); color: var(--muted);
  font-size: 10px; border-radius: 8px;
}
.screen-map .map-el .leaflet-control-attribution a { color: var(--muted); }
.screen-map .map-el .leaflet-tooltip:not(.route-label) {
  background: var(--panel); color: var(--ink); border-color: var(--line);
}
.screen-map .map-el .leaflet-tooltip-top:not(.route-label)::before { border-top-color: var(--line); }

/* map markers */
.origin-dot-anchor { background: none; border: 0; }
.origin-dot {
  width: 16px; height: 16px; border-radius: 99px;
  background: #1a73e8; border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .4);
  position: relative;
}
.origin-dot i {
  position: absolute; inset: -3px; border-radius: 99px; display: block;
  background: rgba(26, 115, 232, .35);
  animation: pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: .8; }
  70% { transform: scale(3); opacity: 0; }
  100% { transform: scale(3); opacity: 0; }
}
/* the single floating route label (a Leaflet tooltip) */
.route-label {
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--elev-1);
  font: 600 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 4px 10px; white-space: nowrap; cursor: pointer;
}
.route-label::before { display: none; }
/* it hides itself when the route on screen is narrower than the label */
.leaflet-tooltip.route-label { transition: opacity .25s ease; pointer-events: auto; }
.route-label-hidden { opacity: 0 !important; pointer-events: none !important; }

/* ----- bottom sheet -----
   Fixed-height panel moved ONLY via transform: collapsed is the same panel
   translated down until just the half card shows. Every frame of a slide
   or drag is compositor-only. JS measures the half card and keeps the resting
   translateY inline (px); the transform below is the pre-JS position. */
.sheet {
  position: absolute; left: 0; right: 0; margin-inline: auto;
  bottom: 0; z-index: 1100;
  width: 100%; max-width: 560px;
  height: calc(100% - var(--sat) - 120px);
  background: var(--panel);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -6px 30px rgba(10, 12, 14, .18);
  display: flex; flex-direction: column;
  transform: translateY(calc(100% - var(--peek-h, 300px)));
  transition: transform .3s cubic-bezier(.32,.72,.25,1);
  will-change: transform;
}
:root[data-theme="dark"] .sheet { box-shadow: 0 -6px 30px rgba(0, 0, 0, .5); }
.sheet.is-expanded { transform: translateY(0); }
.sheet.is-dragging { transition: none; }

/* collapsed = the half card (the answer card and its next-row, the rest
   below the fold); expanded = everything, scrollable. Only the expanded
   sheet scrolls: at rest the card is the top of the sheet and a wheel or
   finger on it pulls the sheet, not the content. */
.sheet:not(.is-expanded) .sheet-body { overflow: hidden; }

.sheet-handle {
  flex: 0 0 auto; padding: 8px 0 4px; display: grid; place-items: center; width: 100%;
  touch-action: none;
}
.sheet-handle span {
  width: 36px; height: 4px; border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 20%, transparent); display: block;
}
.sheet-body {
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 16px calc(14px + var(--sab));
  display: flex; flex-direction: column; gap: 12px;
}

.sheet-empty { padding: 14px 6px 24px; color: var(--muted); font-size: 14px; text-align: center; }
.sheet-empty b { display: block; color: var(--ink); margin-bottom: 4px; font-size: 15px; }

.btn-back {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  transition: background .12s ease, transform .12s ease;
}
.btn-back:hover { background: var(--panel-2); }
.btn-back:active { transform: scale(.92); }
.btn-back .ic { width: 16px; height: 16px; }

/* the full card: the answer wears its category's colors */
.sheet-full { display: flex; flex-direction: column; gap: 12px; }
.sheet-card {
  border-radius: 18px; color: #fff; padding: 15px 16px;
  display: flex; flex-direction: column; gap: 10px;
  isolation: isolate; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14),
              inset 0 1px 0 rgba(255, 255, 255, .2), var(--elev-1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}
.card-head { display: flex; align-items: flex-start; gap: 12px; }
.card-head-main { flex: 1; min-width: 0; }
.card-glyph {
  width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .24);
  display: grid; place-items: center;
}
.card-glyph .ic { width: 23px; height: 23px; }
.card-name { font-size: 24px; font-weight: 700; letter-spacing: -.02em; text-shadow: 0 2px 14px rgba(0, 0, 0, .3); }
.card-state { font-size: 13px; color: rgba(255, 255, 255, .92); margin-top: 2px; }
.card-dist { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card-dist .ic { width: 15px; height: 15px; opacity: .9; }
.card-dist b { font-weight: 800; }
.sheet-card { cursor: pointer; }
.sheet.is-expanded .sheet-card { cursor: default; }

.badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  font-size: 12px; font-weight: 650; border-radius: 999px; padding: 4px 10px;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .25);
  color: #fff; text-shadow: none;
}
.badge-season-peak { background: rgba(16, 185, 129, .4); border-color: rgba(110, 231, 183, .6); }
.badge-season-shoulder { background: rgba(245, 158, 11, .36); border-color: rgba(253, 230, 138, .55); }
.badge-season-off { background: rgba(120, 120, 120, .42); }
.badge-season-avoid { background: rgba(212, 72, 44, .5); border-color: rgba(254, 178, 160, .6); }
.badge-festival { background: rgba(232, 137, 12, .42); border-color: rgba(253, 186, 116, .65); }
.badge-lw { background: rgba(99, 102, 241, .42); border-color: rgba(165, 180, 252, .6); }

.why {
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px; padding: 10px 14px; font-size: 14px; line-height: 1.5;
}

.facts { display: flex; flex-wrap: wrap; gap: 6px; }
.fact {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px; padding: 5px 11px;
  font-size: 12.5px; font-weight: 600; text-shadow: none;
}
.fact .ic { color: rgba(255, 255, 255, .85); }

.sheet-actions { display: flex; flex-direction: column; gap: 8px; }
.sheet-next-row { display: flex; gap: 8px; }
.btn-back-lg { width: 46px; height: auto; border-radius: 12px; flex: 0 0 auto; }
.sheet-next { flex: 1; }
.sheet-acts { display: flex; gap: 8px; }
.card-act {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); padding: 9px 4px; font-size: 11px; font-weight: 500; text-decoration: none;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent), 0 1px 2px rgba(16, 20, 24, .06);
  transition: background .12s ease, transform .12s ease, box-shadow .15s ease;
}
.card-act:hover { background: var(--panel-2); transform: translateY(-1px); box-shadow: var(--elev-1); }
.card-act:active { transform: translateY(0) scale(.97); }
.card-act .ic { color: var(--accent); }
.card-act.is-done { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* local places: what to do once you are there. Plain rows on the panel,
   the kind badge borrows its category colour so the list reads as one
   system with the chips and cards. */
.sheet-spots { display: flex; flex-direction: column; }
.spot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.spot {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 9px 11px 10px 9px; border-radius: 12px;
  background: var(--panel-2); color: var(--ink); text-decoration: none;
  transition: background .12s ease, transform .12s ease;
}
.spot:hover { background: var(--accent-soft); }
.spot:active { transform: scale(.985); }
.spot .cat-badge { margin-top: 1px; }
.spot-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.spot-name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.spot-meta { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.spot-note { font-size: 12.5px; line-height: 1.42; color: var(--muted); margin-top: 3px; }

/* alternates: small colorful category tiles */
.sheet-alts { padding-bottom: 6px; }
.alt-head { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 2px 6px; }
.alt-head h3 { font-size: 14px; font-weight: 600; }
.alt-count { color: var(--muted); font-size: 12px; }
.alt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.alt-card {
  position: relative; overflow: hidden; border-radius: 15px; color: #fff;
  padding: 13px 11px 11px; min-height: 96px; text-align: left;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), var(--elev-1);
  isolation: isolate; text-shadow: 0 1px 2px rgba(0, 0, 0, .32);
  transition: transform .13s ease, box-shadow .15s ease;
}
.alt-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), var(--elev-2); }
.alt-card:active { transform: translateY(0) scale(.97); }
.alt-card .alt-glyph { position: absolute; top: 9px; right: 10px; opacity: .75; color: #fff; }
.alt-card .alt-glyph .ic { width: 18px; height: 18px; }
.alt-card .alt-status {
  position: absolute; top: 11px; left: 11px; width: 8px; height: 8px;
  border-radius: 99px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
.alt-name { font-size: 15px; font-weight: 650; line-height: 1.15; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.alt-sub { font-size: 11.5px; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }

/* ----- dialogs ----- */
/* fallback for browsers without native <dialog>: gate on the open attribute */
dialog:not([open]) { display: none; }
dialog[open] { display: block; }

.dlg {
  border: 0; border-radius: 20px 20px 0 0;
  padding: 0; margin: 0;
  width: 100%; max-width: 560px; max-height: 82dvh;
  background: var(--panel); color: var(--ink);
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); top: auto;
  box-shadow: var(--elev-2);
}
.dlg::backdrop { background: rgba(10, 12, 14, .45); }
.dlg-form { display: flex; flex-direction: column; gap: 14px; padding: 20px 18px calc(18px + var(--sab)); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; }
.dlg-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.dlg-head .icon-btn { width: 34px; height: 34px; font-size: 14px; }
.dlg-sep { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; }
.dlg-sep::before, .dlg-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.dlg-input {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel-2); color: var(--ink);
  padding: 13px 16px; font-size: 16px; outline: none;
}
.dlg-input:focus { border-color: var(--accent); background: var(--panel); }
.dlg .search-results { border: 0; box-shadow: none; padding: 0; border-radius: 0; }

/* saved lists */
.saved-wrap { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 58dvh; }
.saved-wrap h3 { font-size: 14px; font-weight: 600; padding-top: 6px; }
.saved-hint { color: var(--muted); font-size: 12.5px; margin: -4px 0 0; }
.saved-list { display: flex; flex-direction: column; gap: 8px; }
.saved-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel-2); border-radius: 12px;
  padding: 10px 12px;
}
.saved-item .s-main { all: unset; cursor: pointer; flex: 1; min-width: 0; }
.saved-item .s-name { font-weight: 600; font-size: 14px; }
.saved-item .s-sub { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-item .s-remove { color: var(--muted); font-size: 15px; padding: 6px; }
.saved-empty { color: var(--muted); font-size: 13px; padding: 4px 2px; }

/* install steps */
.install-app { display: flex; align-items: center; gap: 14px; }
.install-app img { width: 56px; height: 56px; border-radius: 14px; flex: 0 0 auto; box-shadow: var(--elev-1); }
.install-app p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.install-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.install-steps li {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel-2); border-radius: 12px; padding: 10px 12px;
  font-size: 14px; line-height: 1.4;
}
.install-steps b { font-weight: 650; }
.step-ic {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--panel); color: var(--accent);
}
.step-ic .ic { width: 18px; height: 18px; }

/* ----- toast ----- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(-8px);
  top: calc(var(--sat) + 14px); bottom: auto; z-index: 1300;
  background: var(--ink); color: var(--bg);
  border-radius: 999px; padding: 10px 18px; font-size: 13.5px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  max-width: 88vw; text-align: center;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ----- phones ----- */
/* The chip row has to fit in one line on a 360px screen with the Reel chip
   whole: chips tighten first, then Filters and Saved go icon-only (their
   glyphs are the universal ones, and both keep aria-label and title). */
@media (max-width: 479px) {
  .chip-row { gap: 6px; }
  .chip-row .chip { padding: 8px 11px; font-size: 13px; }
}
@media (max-width: 419px) {
  .chip-row .chip-label-opt { display: none; }
}
@media (max-width: 899px) {
  /* the map credit stays readable above the sheet instead of under it */
  .screen-map .leaflet-bottom.leaflet-left {
    bottom: calc(var(--peek-h, 130px) + 2px);
    transition: bottom .3s cubic-bezier(.32,.72,.25,1);
  }
}
@media (max-height: 700px) {
  .home { padding-top: 6vh; }
}

/* ----- desktop ----- */
@media (min-width: 900px) {
  /* floating card, Google-style: sheet docks right, overlays stay left */
  .sheet {
    left: auto; right: 16px; margin: 0; bottom: 16px;
    width: 400px; border-radius: 16px;
    height: calc(100% - 32px);
    box-shadow: var(--elev-2);
  }
  .map-overlay-top { padding: 16px 16px 0; max-width: 480px; }
  .map-theme-btn { right: 432px; top: 16px; }
  /* tablets in landscape: below the zoom control, which sits at top 64px */
  .map-install-btn { right: 432px; top: 164px; }
  /* clear of the docked sheet, so it never has to hide */
  .map-locate-btn { right: 432px; bottom: 16px; }
  .sheet.is-expanded ~ .map-locate-btn { opacity: 1; visibility: visible; }
  .screen-map .leaflet-top.leaflet-right { top: 64px; right: 424px; }
  .home { padding-top: 20vh; }
}

@media (prefers-reduced-motion: reduce) {
  .origin-dot i { animation: none; }
  * { transition: none !important; }
}