/* Layout: one-screen app. Sidebar of filters and places on the left, 3D map fills the rest,
   detail card floats over the map on the right. On phones the sidebar and detail become sheets.
   Colour carries one idea: cold blue for resorts up high, warm amber for feeder towns below. */
:root {
  --bg: #eef2f5;
  --panel: #ffffff;
  --panel-2: #f5f7f9;
  --ink: #15202b;
  --muted: #5a6876;
  --line: #dbe2e8;
  --resort: #2c66d0;
  --base: #c97a06;
  --base-soft: #fbf0dc;
  --good: #1f7a4a;
  --good-soft: #e3f3e9;
  --snow-good: #1b8f5a;
  --snow-fair: #c98a00;
  --snow-poor: #c2412d;
  --star: #e0a400;
  --star-soft: #fdf4d6;
  --sep: #dbe6f7;
  --resort-soft: #e8effc;
  --run-green: #2e9e5b;
  --run-blue: #2f6fd6;
  --run-red: #d9372b;
  --run-black: #111820;
  --shadow: 0 10px 30px rgba(20, 35, 50, 0.16);

  --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  --side: 340px;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d141b;
    --panel: #141d26;
    --panel-2: #1a2531;
    --ink: #e6edf3;
    --muted: #92a1af;
    --line: #26333f;
    --resort: #6f9ff2;
    --sep: #1d2f48;
    --resort-soft: #18263a;
    --base: #f0a83a;
    --base-soft: #3a2a10;
    --good: #6fd19a;
    --good-soft: #143224;
    --snow-good: #5fd39a;
    --snow-fair: #f0b43c;
    --snow-poor: #f07a63;
    --star: #f5c33b;
    --star-soft: #3a2f0d;
    --run-black: #e6edf3;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
    --icon-filter: invert(1);
  }
}
:root[data-theme="dark"] {
  --sep: #1d2f48;
  --resort-soft: #18263a;
  --icon-filter: invert(1);
  --bg: #0d141b;
  --panel: #141d26;
  --panel-2: #1a2531;
  --ink: #e6edf3;
  --muted: #92a1af;
  --line: #26333f;
  --resort: #6f9ff2;
  --base: #f0a83a;
  --base-soft: #3a2a10;
  --good: #6fd19a;
  --good-soft: #143224;
  --snow-good: #5fd39a;
  --snow-fair: #f0b43c;
  --snow-poor: #f07a63;
  --star: #f5c33b;
  --star-soft: #3a2f0d;
  --run-black: #e6edf3;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--resort); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }

.app { display: grid; grid-template-columns: var(--side) 1fr; height: 100%; }
.app.side-collapsed { grid-template-columns: 0 1fr; }
.app.side-collapsed .sidebar { visibility: hidden; padding: 0; border: 0; }
.app:not(.side-collapsed) #sidebar-toggle { display: none; }

.icon-btn {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--panel-2); color: var(--ink); padding: 0;
}
.icon-btn:hover { background: var(--line); }
.icon-btn svg { width: 16px; height: 16px; transition: transform .2s; }

/* ---------- sidebar ---------- */
.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 18px 16px;
  gap: 16px;
}
.brand { position: relative; padding-right: 40px; }
.brand #sidebar-hide { position: absolute; top: -2px; right: 0; }
.brand h1 { font-size: 26px; line-height: 1; font-weight: 700; }
.origin { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.origin strong { color: var(--ink); font-weight: 600; }
p.origin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#origin { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 3px 6px; font-weight: 600; color: var(--ink); max-width: 100%; }
.marker.origin { opacity: 0.55; }
.marker.origin.is-current { opacity: 1; z-index: 2; }
.marker.origin:not(.is-current) .tag { background: rgba(13, 20, 27, 0.6); }

.segmented {
  display: grid;
  grid-template-columns: auto 1fr 1.3fr;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.segmented button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 500;
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--muted);
}
.header-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; margin-right: -40px; }
.header-btns .shortlist-btn { margin-top: 0; }
.share-btn {
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
  padding: 4px 11px; font-size: 14px; font-weight: 500;
}
.plan-note { margin: 0; font-size: 12px; color: var(--muted); }
.plan-note .link { font-size: 12px; color: var(--ink); }
#plan-link { width: 100%; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); }
.who { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 10px; margin-right: -40px; }
.who-label { width: 100%; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lvl-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
  padding: 4px 10px 4px 8px; font-size: 13.5px; font-weight: 500;
}
.lvl-btn::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--run-green); }
.lvl-btn.intermediate::before { background: var(--run-red); }
.lvl-btn.expert::before { background: var(--run-black); }
.lvl-btn[aria-pressed="true"] { border-color: var(--ink); background: var(--panel-2); font-weight: 600; }
.easy-start { margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--good-soft); font-size: 14px; }
.easy-start strong { color: var(--good); }
.shortlist-btn {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
  padding: 4px 6px 4px 11px; font-size: 14px; font-weight: 500;
}
.shortlist-btn > span[aria-hidden] { color: var(--star); }
.shortlist-btn[aria-pressed="true"] { border-color: var(--star); background: var(--star-soft); }
.shortlist-btn .count {
  min-width: 18px; padding: 1px 5px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--line); color: var(--ink); font-variant-numeric: tabular-nums;
}
.segmented button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.dot { display: inline-block; width: 10px; height: 10px; flex: none; }
.dot.resort { background: var(--resort); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.dot.base { background: var(--base); border-radius: 50%; }

.filters { display: grid; gap: 0; }
/* Each section sits apart, split by a faint blue rule. */
.filters > .field, .filters > .filters-head { padding: 22px 0; border-top: 1px solid var(--sep); }
.filters > .field:first-child { border-top: 0; padding-top: 4px; }
.filters > .filters-head + .field { border-top: 0; padding-top: 4px; }
.field { gap: 8px; }
.toggles { gap: 10px; }
.field { display: grid; gap: 6px; }
.field label, .label, .s-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600;
}
.field label { display: flex; align-items: center; }
.field label output { margin-left: auto; }
.field output { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; font-size: 14px; }
input[type="range"] { width: 100%; accent-color: var(--resort); margin: 0; }
.range-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.field-note { margin: 0; font-size: 12px; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 14px;
  color: var(--muted);
}
.chips button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); font-weight: 500; }

.toggle { display: flex; gap: 10px; align-items: center; font-size: 14px; cursor: pointer; }
/* Drawn tick box, so it looks the same in light and dark mode on every phone. */
.toggle input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 20px; height: 20px; margin: 0; border-radius: 6px;
  border: 1.5px solid var(--muted); background: var(--panel); display: grid; place-items: center;
}
.toggle input:checked {
  border-color: var(--resort); background: var(--resort) no-repeat center / 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.toggle input:focus-visible { outline: 2px solid var(--resort); outline-offset: 2px; }

/* vibe */
.label-note { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; margin-left: 4px; }
.vibes { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vibe {
  font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); white-space: nowrap;
}
.vibe.on { border-color: var(--ink); }
.compare .vibes { margin: 0; }

/* trip cost */
.trip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
/* Your trip: small groups with room between them. */
.filters > .field:has(.trip-head) { gap: 22px; }
.trip-group { display: grid; gap: 8px; }
.sub-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.trip-grid label, .kids-field, .field .arrive { font-size: 12px !important; gap: 5px !important; }
.trip-grid label {
  display: grid; gap: 3px; font-size: 11px; color: var(--muted);
  text-transform: none; letter-spacing: 0; font-weight: 500;
}
.trip-grid input {
  width: 100%; min-width: 0; padding: 6px 8px; font-size: 15px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
  font-variant-numeric: tabular-nums;
}
.segmented.two { grid-template-columns: 1fr 1fr; }
.kids-field { display: grid; gap: 3px; font-size: 11px; color: var(--muted); font-weight: 500; }
.stepper { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); height: 35px; }
.stepper button { border: 0; background: none; font-size: 18px; line-height: 1; color: var(--ink); height: 100%; padding: 0; }
.stepper button:disabled { color: var(--line); cursor: default; }
.stepper output { font-size: 15px; font-weight: 600; color: var(--ink); min-width: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.kid-ages { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.kid-ages:empty { display: none; }
.field .kid-ages label { display: grid; gap: 3px; font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500; }
.kid-ages select { padding: 6px 6px; font-size: 14px; font-weight: 600; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); width: 100%; }
.trip { display: grid; gap: 6px; }
.trip-total { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.trip-total strong { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.trip-total span { color: var(--muted); font-size: 14px; }
.trip-who { margin: 0; font-size: 13px; color: var(--muted); }
.ski-at { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ski-at select { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 5px 8px; }
.access { margin: 0; font-size: 14px; display: grid; gap: 2px; }
.field .arrive { display: grid; gap: 3px; font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500; }
.arrive input { padding: 6px 8px; font-size: 15px; font-weight: 600; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
/* Trip sheet: slides in over the place panel, same size and place. */
.tripsheet { z-index: 8; animation: sheet-in .22s ease-out; }
@keyframes sheet-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tripsheet { animation: none; } }
.trip-teaser {
  display: grid; gap: 4px; text-align: left; width: 100%;
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
}
.trip-teaser:hover { border-color: var(--ink); }
.tt-total { color: var(--muted); font-size: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tt-total strong { color: var(--ink); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tt-go { font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; }
.tt-go i { font-style: normal; font-size: 18px; line-height: 1; }
.stay { display: grid; gap: 8px; }
/* fit and school */
.fit, .school { display: grid; gap: 8px; }
.school p, .season-line { margin: 0; font-size: 14px; }
.season-line { color: var(--muted); margin-top: 4px; }
.warn { color: var(--snow-poor); }
.fit-head { margin: 0; display: flex; align-items: center; gap: 12px; }
.fit-score {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 3px solid var(--good); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.fit-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 14px; }
.fit-reasons li { display: flex; gap: 8px; }
.fit-reasons li::before { content: "✓"; color: var(--good); font-weight: 700; width: 12px; flex: none; }
.fit-reasons li.no::before { content: "✗"; color: var(--snow-poor); }
.fit-reasons li.no { color: var(--muted); }
.fit-pill {
  display: inline-grid; place-items: center; min-width: 24px; height: 18px; margin-right: 6px; padding: 0 4px;
  border-radius: 999px; background: var(--good-soft); color: var(--good); font-size: 11px; font-weight: 700;
  vertical-align: 1px; font-variant-numeric: tabular-nums;
}
.field .toggle { display: flex; justify-content: flex-start; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; color: var(--ink); }
.trip-head { display: flex; justify-content: space-between; align-items: center; }
.currency { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--panel-2); }
.currency button { border: 0; background: transparent; border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.currency button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.segmented.three { grid-template-columns: repeat(3, 1fr); }
.segmented.three button { padding-inline: 4px; font-size: 13px; }
.week-note { margin: 0; font-size: 12px; color: var(--muted); }
.week-note:empty { display: none; }
.week-note[data-crowd="very busy"], .week-note[data-crowd="busy"] { color: var(--snow-fair); }
.field .arrive select { padding: 6px 8px; font-size: 14px; font-weight: 500; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); }
.stay-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stay-links a {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name go" "what go"; gap: 1px 10px; align-items: center;
  padding: 9px 12px; border-radius: 8px; background: var(--panel-2); color: var(--ink); text-decoration: none;
}
.stay-links a:hover { background: var(--line); }
.stay-links b { grid-area: name; font-weight: 600; }
.stay-links span { grid-area: what; font-size: 12.5px; color: var(--muted); }
.stay-links i { grid-area: go; font-style: normal; color: var(--muted); }
.cost-lines { list-style: none; margin: 4px 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.cost-lines li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.cost-lines li span { display: grid; min-width: 0; }
.cost-lines small { color: var(--muted); font-size: 12px; }
.cost-lines b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trip-line { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.trip-line .save { color: var(--good); font-weight: 600; }
.trip-line .dearer { color: var(--muted); }

/* snow */
.flake { font-style: normal; font-size: 12px; line-height: 1; }
.flake.good { color: var(--snow-good); }
.flake.fair { color: var(--snow-fair); }
.flake.poor { color: var(--snow-poor); }
.months button { min-width: 46px; }
.snow-key { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.snow-key span { display: inline-flex; gap: 4px; align-items: center; }
.snow { display: grid; gap: 8px; }
.snow-verdict { margin: 0; }
.snow-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.snow-months { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.sm {
  display: grid; justify-items: center; gap: 2px; padding: 6px 0 5px;
  border-radius: 6px; background: var(--panel-2); border: 1.5px solid transparent;
  font-size: 12px; color: var(--muted);
}
.sm b { font-weight: 600; }
.sm .flake { font-size: 15px; }
.sm.picked { border-color: var(--ink); color: var(--ink); background: var(--panel); }
.link { border: 0; background: none; padding: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* shortlist */
.shortlist-tools { display: grid; gap: 10px; }
.shortlist-tools p { margin: 0; font-size: 13px; color: var(--muted); }
.tool-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-row button { padding: 7px 12px; }
#saved-link { width: 100%; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); }
.saved-star { font-style: normal; color: var(--star); font-size: 12px; }
.save-icon { color: var(--muted); }
.save-icon[aria-pressed="true"] { color: var(--star); --star-fill: var(--star); }
.d-foot .save-btn[aria-pressed="true"] { background: var(--star-soft); border-color: var(--star); color: var(--ink); }
.marker.is-saved::after {
  content: "★"; position: absolute; top: -9px; right: -7px;
  font-size: 11px; line-height: 1; color: var(--star);
  text-shadow: 0 0 2px #000, 0 0 2px #000;
}

.list-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  border-top: 1px solid var(--line); padding-top: 12px;
  font-size: 13px; color: var(--muted);
}
.sort { display: flex; gap: 6px; align-items: center; }
.sort select { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 3px 6px; font-size: 13px; }

.results { list-style: none; margin: 0 -8px; padding: 0; display: grid; gap: 2px; }
.result {
  width: 100%;
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  border: 0; background: transparent; text-align: left;
  padding: 8px; border-radius: 8px;
}
.result:hover { background: var(--panel-2); }
.result.is-active { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.r-main { display: grid; min-width: 0; }
.r-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-side { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.r-time { font-size: 14px; font-weight: 500; }
.r-price { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.empty { color: var(--muted); padding: 12px 8px; font-size: 14px; }

.data-note { margin-top: auto; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.data-note p { margin: 6px 0 0; }
.bands { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.bands b { display: inline-block; min-width: 30px; color: var(--ink); }

/* ---------- map stage ---------- */
.stage { position: relative; min-width: 0; min-height: 0; }
#map { position: absolute; inset: 0; background: #b9c9d6; }

.map-tools { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 8px; z-index: 2; pointer-events: none; }
.map-tools > * { pointer-events: auto; }
.tool-group { display: flex; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.tool {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: var(--panel); color: var(--ink);
  padding: 7px 12px; font-size: 14px; font-weight: 500;
  border-radius: 8px; box-shadow: var(--shadow);
}
.tool-group .tool { border-radius: 0; box-shadow: none; }
.tool-group { box-shadow: var(--shadow); border-radius: 8px; overflow: hidden; }
.tool[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
/* The way into the filters: the one coloured button on the map. */
.tool-main { background: var(--resort); color: #fff; font-weight: 600; }
.tool-main .count { background: #fff; color: var(--resort); border-radius: 999px; padding: 0 6px; font-size: 12px; font-weight: 700; line-height: 18px; }
.filters-head { font-size: 20px; margin: 0; padding-bottom: 14px !important; }

/* Two tabs: set up the search, then look at the places it finds. */
.tabs {
  position: sticky; top: -20px; z-index: 3; margin: 0 -18px; padding: 8px 18px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--panel);
  border-bottom: 1px solid var(--sep);
}
.tabs button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; background: transparent; color: var(--muted); padding: 9px 8px; border-radius: 8px;
  font-size: 15px; font-weight: 600;
}
.tabs button[aria-selected="true"] { background: var(--resort-soft); color: var(--resort); }
.tabs .count { background: var(--panel-2); color: var(--ink); border-radius: 999px; padding: 0 7px; font-size: 12px; line-height: 18px; }
.view { display: grid; gap: 16px; }
.view[hidden] { display: none; }
.view .list-head { border-top: 0; padding-top: 0; }
.show-places { position: sticky; bottom: -16px; margin: 0 -18px; padding: 12px 18px 16px; background: linear-gradient(transparent, var(--panel) 30%); }
.show-places .primary { background: var(--resort); color: #fff; padding: 12px; font-size: 16px; }
.filters-head .ic { width: 20px; height: 20px; color: var(--resort); }
.label .ic, .who-label .ic, .field label .ic { width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; color: var(--resort); }
.only-mobile { display: none; }

.snow-legend {
  position: absolute; left: 12px; bottom: 72px; z-index: 2; width: 250px; max-width: calc(100% - 24px);
  background: var(--panel); border-radius: 10px; box-shadow: var(--shadow); padding: 10px 12px;
  display: grid; gap: 6px;
}
.sl-title { margin: 0; font-size: 13px; font-weight: 600; }
.sl-months { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.sl-months button { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 3px 0; font-size: 12px; color: var(--muted); }
.sl-months button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.sl-scale { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.sl-ramp { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(150,190,255,.35), rgba(200,225,255,.7), #fff); box-shadow: inset 0 0 0 1px var(--line); }
.sl-note { margin: 0; font-size: 11px; color: var(--muted); }
.snow-hist { border-collapse: separate; border-spacing: 3px; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; margin: -3px; }
.snow-hist th { font-weight: 500; color: var(--muted); font-size: 12px; text-align: center; }
.snow-hist th[scope="row"] { text-align: left; white-space: nowrap; padding-right: 4px; }
.snow-hist td { text-align: center; padding: 5px 0; border-radius: 6px; background: var(--panel-2); font-weight: 600; border: 1.5px solid transparent; }
.snow-hist td.good { color: var(--snow-good); }
.snow-hist td.fair { color: var(--snow-fair); }
.snow-hist td.poor { color: var(--snow-poor); }
.snow-hist td.picked { border-color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.legend {
  position: absolute; left: 12px; bottom: 28px; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  background: var(--panel); border-radius: 8px; box-shadow: var(--shadow);
  padding: 7px 12px; font-size: 12px; color: var(--muted); max-width: calc(100% - 24px);
}
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.mk { display: inline-block; width: 12px; height: 12px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.mk.resort { background: var(--resort); clip-path: polygon(50% 0, 100% 100%, 0 100%); border: 0; box-shadow: none; }
.mk.base { background: var(--base); border-radius: 50%; }
.mk.origin { background: var(--ink); border-radius: 3px; }
.ln { display: inline-block; width: 20px; height: 0; border-top: 3px solid var(--base); }
.ln.road { border-top-style: dashed; }
.ln.ski { border-top: 2px solid #fff; box-shadow: 0 0 0 1px rgba(11, 21, 32, 0.5); }
.ln.park { border-top: 4px solid #ff5fa2; }
.park-verdict { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.park-features { list-style: none; padding: 0; margin: 8px 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.park-features li { padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
#f-park-needs { margin-top: 8px; }
.park-pill { padding: 2px 10px; border-radius: 999px; font-weight: 600; font-size: 14px; background: var(--panel-2); color: var(--ink); }
.park-pill.awesome { background: #ff5fa2; color: #fff; }
.park-pill.good { background: var(--good-soft); color: var(--good); }
.park-pill.none { color: var(--muted); }
.lift-pop .maplibregl-popup-content {
  padding: 6px 10px; border-radius: 8px; font: 13px/1.3 var(--font-body);
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow);
}
.lift-pop .maplibregl-popup-content b { display: block; font-weight: 600; }
.lift-pop .maplibregl-popup-content span { color: var(--muted); }
.lift-pop .maplibregl-popup-tip { display: none; }

/* markers */
.marker {
  border: 0; background: none; padding: 0;
  width: 22px; height: 22px; display: grid; place-items: center;
  transition: opacity .2s;
}
.marker .pin { display: block; transition: transform .15s; }
.marker.resort .pin {
  width: 18px; height: 16px; background: var(--resort);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.marker.base .pin {
  width: 14px; height: 14px; border-radius: 50%; background: var(--base);
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.marker.origin .pin {
  width: 16px; height: 16px; border-radius: 4px; background: #15202b;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.marker .tag {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; pointer-events: none;
  background: rgba(13, 20, 27, 0.82); color: #fff;
  font: 500 12px/1 var(--font-body); padding: 4px 6px; border-radius: 4px;
  opacity: 0; transition: opacity .15s;
}
.marker .tag em { font-style: normal; opacity: .7; margin-left: 2px; }
.marker.origin .tag, .labels-on .marker .tag, .marker:hover .tag, .marker:focus-visible .tag,
.marker.is-selected .tag, .marker.is-related .tag { opacity: 1; }
.marker:hover .pin, .marker.is-related .pin { transform: scale(1.2); }
.marker.is-selected .pin { transform: scale(1.55); }
.marker.is-selected { z-index: 3; }
.marker.is-related { z-index: 2; }
.has-selection .marker:not(.is-selected):not(.is-related):not(.origin) { opacity: 0.35 !important; }
.has-selection .marker:not(.is-selected):not(.is-related) .tag { opacity: 0; }

.minutes.reach { background: var(--ink); color: var(--panel); }
.minutes {
  background: var(--panel); color: var(--ink);
  font: 600 12px/1 var(--font-body); font-variant-numeric: tabular-nums;
  padding: 3px 6px; border-radius: 999px; box-shadow: var(--shadow); pointer-events: none;
}

/* ---------- detail card ---------- */
.detail {
  position: absolute; top: 12px; right: 56px; bottom: 12px; z-index: 7;
  width: 400px; max-width: calc(100% - 24px);
  background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow-y: auto; padding: 20px 20px 16px;
  display: flex; flex-direction: column; gap: 16px;
}
.detail > * { flex-shrink: 0; }
/* The title bar stays pinned while the panel scrolls, so close and minimise are always in reach. */
.d-head {
  position: sticky; top: -20px; z-index: 4;
  margin: -20px -20px -8px; padding: 20px 114px 12px 20px;
  background: var(--panel); border-radius: var(--radius) var(--radius) 0 0;
  transition: box-shadow .15s;
}
.detail.scrolled .d-head { box-shadow: 0 1px 0 var(--line), 0 8px 14px -10px rgba(0, 0, 0, 0.35); }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.d-head h2 { font-size: 28px; line-height: 1.02; margin-top: 4px; font-weight: 700; }
.character { margin: 0; color: var(--muted); }
.d-intro .vibes { margin-top: 10px; }
.d-actions { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; }

/* Minimised: just the name bar, so the map is clear. Tap the bar to expand. */
.detail.is-min { bottom: auto; overflow: hidden; padding-block: 12px; cursor: pointer; }
.detail.is-min > :not(.d-head), .detail.is-min .character, .detail.is-min .vibes { display: none; }
.detail.is-min .d-head h2 { font-size: 20px; }
.detail.is-min .d-head { margin: -12px -20px; padding-block: 12px; }
.detail.is-min .d-actions { top: 50%; transform: translateY(-50%); }
.detail.is-min #detail-min svg { transform: rotate(180deg); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.stat { background: var(--panel); padding: 9px 10px; display: grid; gap: 1px; min-width: 0; }
.stat .s-label { font-size: 10.5px; }
.s-value { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-note { font-size: 12px; color: var(--muted); }

.getting { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 14px; }
.getting .s-label { width: 100%; }
.badge { font-size: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.badge.good { background: var(--good-soft); border-color: transparent; color: var(--good); font-weight: 600; }

.ski p { margin: 4px 0 0; }
.suits { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.levels { display: inline-flex; gap: 3px; vertical-align: middle; }
.lv { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.lv.beginner { background: var(--run-green); }
.lv.intermediate { background: var(--run-red); }
.lv.expert { background: var(--run-black); }
.run-mix { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin: 10px 0 6px; background: var(--panel-2); }
.run-mix i { display: block; height: 100%; }
.run-mix .green, .run-key .green::before { background: var(--run-green); }
.run-mix .blue, .run-key .blue::before { background: var(--run-blue); }
.run-mix .red, .run-key .red::before { background: var(--run-red); }
.run-mix .black, .run-key .black::before { background: var(--run-black); }
.run-key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); margin: 0; }
.run-key span { display: inline-flex; align-items: center; gap: 5px; }
.run-key span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.expert-line { margin-top: 10px !important; font-size: 14px; }
.fit-group { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.fit-group b { color: var(--ink); }
.lv.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }

.alt { display: grid; gap: 8px; }
.alt h3 { font-size: 19px; }
.alt:first-of-type h3 { color: var(--ink); }
.hint { margin: 0; color: var(--muted); font-size: 14px; }
.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.link-row {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "main hop" "main add";
  gap: 4px 10px; align-items: start;
  background: var(--panel-2); border-radius: 8px; padding: 9px 10px;
}
.lr-main { grid-area: main; border: 0; background: none; padding: 0; text-align: left; display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.lr-main > span { display: grid; gap: 2px; min-width: 0; }
.lr-name { font-weight: 600; }
.lr-name em { white-space: nowrap; }
.lr-name em { font-style: normal; color: var(--muted); font-weight: 500; margin-left: 4px; font-size: 13px; }
.lr-main:hover .lr-name { text-decoration: underline; text-underline-offset: 3px; }
.lr-sub { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gain { font-size: 12.5px; font-weight: 600; color: var(--good); }
.lr-hop { grid-area: hop; display: grid; justify-items: end; text-align: right; font-size: 12px; color: var(--muted); max-width: 130px; }
.lr-hop strong { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.add {
  grid-area: add; justify-self: end; border: 1px solid var(--line); background: var(--panel);
  border-radius: 999px; padding: 1px 9px; font-size: 12px;
}
.add[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }

.primary, .secondary, .ghost {
  border-radius: 8px; padding: 9px 14px; font-weight: 600; font-size: 14px;
}
.primary { border: 0; background: var(--base); color: #1b1203; }
.primary:disabled { opacity: .5; cursor: default; }
.secondary { border: 1px solid var(--line); background: var(--panel); }
.secondary[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.ghost { border: 1px solid var(--line); background: transparent; }
.wide { width: 100%; }
.d-foot { margin-top: auto; display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- compare ---------- */
.compare-bar {
  position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 9;
  display: flex; gap: 10px; align-items: center;
  background: var(--panel); border-radius: 999px; box-shadow: var(--shadow);
  padding: 6px 6px 6px 10px; max-width: calc(100% - 24px);
}
.compare-chips { display: flex; gap: 6px; overflow-x: auto; min-width: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: var(--panel-2); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 13px; font-weight: 500;
}
.chip button { border: 0; background: none; width: 22px; height: 22px; border-radius: 50%; font-size: 16px; line-height: 1; color: var(--muted); }
.compare-bar .primary { border-radius: 999px; white-space: nowrap; }
@media (min-width: 900px) {
  .detail:not([hidden]) ~ .compare-bar { left: calc((100% - 468px) / 2); max-width: calc(100% - 492px); }
}

.compare {
  position: absolute; inset: 12px; z-index: 12;
  background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; min-height: 0;
}
.compare header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.compare h2 { font-size: 24px; }
.compare-scroll { overflow: auto; padding: 0 20px 16px 0; }
.compare table { border-collapse: collapse; width: 100%; min-width: 560px; font-variant-numeric: tabular-nums; }
/* Many places: each column keeps a readable width and the row labels stay in view while it scrolls sideways. */
.compare td, .compare thead th:not(:first-child) { min-width: 170px; }
.compare tbody th, .compare thead th:first-child { position: sticky; left: 0; background: var(--panel); z-index: 2; box-shadow: 1px 0 0 var(--line); }
.compare thead th:first-child { z-index: 3; }
.compare tbody th, .compare thead th:first-child { min-width: 150px; padding-left: 20px; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.compare thead th { position: sticky; top: 0; background: var(--panel); padding-top: 16px; z-index: 1; }
.compare tbody th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; width: 150px; }
.compare td { font-weight: 500; }
.compare td small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.compare td.best { background: var(--good-soft); color: var(--good); }
.compare td.best small { color: var(--good); opacity: .85; }
.compare .long { font-weight: 400; color: var(--muted); font-size: 14px; display: block; max-width: 34ch; }
.col-name { display: block; border: 0; background: none; padding: 0; font: 600 18px/1.15 var(--font-display); text-align: left; margin-top: 2px; }
.col-name:hover { text-decoration: underline; }
.compare thead th.base { box-shadow: inset 0 3px 0 var(--base); }
.compare thead th.resort { box-shadow: inset 0 3px 0 var(--resort); }
.col-x, .col-save {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
  border-radius: 999px; padding: 3px 10px 3px 7px; font-size: 12.5px; font-weight: 500;
}
.col-x svg { width: 11px; height: 11px; }
.col-x:hover, .col-x:focus-visible, .col-save:hover, .col-save:focus-visible { border-color: var(--ink); }
.col-save { margin-left: 6px; padding-left: 10px; }
.compare-undo { margin-right: auto; margin-left: 16px; font-size: 14px; color: var(--muted); }
.compare-undo .link { color: var(--resort); font-weight: 600; }
.compare-note { color: var(--muted); font-size: 12px; margin: 12px 0 0; }

/* MapLibre controls inherit the theme */
.maplibregl-ctrl-group { background: var(--panel); box-shadow: var(--shadow) !important; }
.maplibregl-ctrl-group button + button { border-top-color: var(--line); }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: var(--icon-filter, none); }
.save-ctrl { position: relative; }
.save-ctrl button { display: grid; place-items: center; color: var(--ink); }
.save-ctrl svg { width: 18px; height: 18px; }
.save-tip {
  position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; padding: 6px 10px; border-radius: 8px; font-size: 13px;
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.save-ctrl.show-tip .save-tip { opacity: 1; }

/* ---------- phones and small tablets ---------- */
@media (max-width: 899px) {
  .origin .countries { display: none; }
  /* Phones: a slim strip at the bottom, clear of the wrapped map buttons and the credits button. */
  .snow-legend { left: 12px; right: 52px; bottom: 12px; width: auto; gap: 6px; padding: 10px 12px; }
  .snow-legend .sl-note { display: none; }
  #map.has-selection ~ .snow-legend { display: none; }
  .app { grid-template-columns: 1fr; }
  .app:not(.side-collapsed) #sidebar-toggle { display: inline-flex; }
  .brand #sidebar-hide svg { transform: rotate(-90deg); }
  .sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    max-height: 82%; border-right: 0; border-radius: 16px 16px 0 0;
    box-shadow: var(--shadow);
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(105%); transition: transform .25s ease;
  }
  .sidebar.open { transform: none; }
  .detail {
    top: auto; right: 0; left: 0; bottom: 0; width: auto; max-width: none;
    max-height: 58%; border-radius: 16px 16px 0 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .legend, .maplibregl-ctrl-top-right .maplibregl-ctrl-group:not(.save-ctrl) { display: none; }
  .maplibregl-ctrl-top-right { top: 48px; }
  .compare-bar { bottom: 16px; }
  .detail.is-min { bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .detail:not([hidden]):not(.is-min) ~ .compare-bar { bottom: calc(58% + 10px); }
  .detail.is-min:not([hidden]) ~ .compare-bar { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .compare { inset: 0; border-radius: 0; }
  .compare tbody th, .compare thead th:first-child { min-width: 92px; width: 92px; padding-left: 14px; padding-right: 8px; font-size: 10.5px; }
  .compare td, .compare thead th:not(:first-child) { min-width: 150px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .d-head h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* First screen: pick a country, then the map starts from its main airport. */
.welcome {
  position: absolute; z-index: 3; left: 50%; bottom: 84px; transform: translateX(-50%);
  width: min(520px, calc(100% - 32px)); padding: 20px 20px 18px;
  background: var(--panel); color: var(--ink); border-radius: 16px; box-shadow: var(--shadow);
  display: grid; gap: 6px;
}
.welcome[hidden] { display: none; }
.welcome h2 { font-size: 24px; }
.welcome p { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.welcome-countries { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.welcome-countries[data-cols="1"] { grid-template-columns: 1fr; }
.welcome-countries button {
  display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
}
.welcome-countries button:hover, .welcome-countries button:focus-visible { border-color: var(--resort); background: var(--resort-soft); }
.welcome-countries b { font-size: 17px; font-weight: 600; }
.welcome-countries span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 899px) {
  .welcome { bottom: 56px; padding: 16px 16px 14px; }
  .welcome h2 { font-size: 20px; }
  .welcome p { font-size: 13px; }
}

/* Winter and summer: one switch in the panel, one on the map. Summer turns the accent green. */
:root[data-season="summer"] .winter-only, :root[data-season="winter"] .summer-only { display: none !important; }
.side-season { margin-top: -4px; }
.side-season button { padding: 8px 12px; font-size: 15px; font-weight: 600; }
.tool-season .tool { gap: 6px; }
@media (min-width: 900px) {
  .app:not(.side-collapsed) .tool-season { display: none; }
}
.park-pill.sm { font-size: 11.5px; padding: 1px 8px; letter-spacing: 0; }
:root[data-season="summer"] {
  --resort: #1f8a4c;
  --resort-soft: #e3f3e9;
  --sep: #d3eadb;
}
@media (prefers-color-scheme: dark) {
  :root[data-season="summer"]:not([data-theme="light"]) { --resort: #5fcf8c; --resort-soft: #143224; --sep: #1d3a2b; }
}
:root[data-season="summer"][data-theme="dark"] { --resort: #5fcf8c; --resort-soft: #143224; --sep: #1d3a2b; }

/* A place hovered in the list: bigger, ringed in yellow, with its name showing, above its neighbours. */
.marker.is-hover { z-index: 5; opacity: 1 !important; }
.marker.is-hover .pin { transform: scale(1.7); }
.marker.is-hover .tag { opacity: 1 !important; background: #15202b; box-shadow: 0 0 0 2px #ffd400; }
.marker.is-hover::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border-radius: 50%; border: 4px solid #ffd400; box-shadow: 0 0 0 2px rgba(13, 20, 27, .8), 0 0 16px rgba(255, 212, 0, .9);
  animation: hover-ring 1s ease-in-out infinite; pointer-events: none;
}
@keyframes hover-ring { 0%, 100% { transform: scale(.85); } 50% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .marker.is-hover::before { animation: none; } }

/* Map toolbar: Filters, season, and a Layers menu that holds the map options. */
.layers { position: relative; }
.layers-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 4; min-width: 210px;
  display: grid; gap: 8px; padding: 10px; background: var(--panel); border-radius: 12px; box-shadow: var(--shadow);
}
.layers-panel[hidden] { display: none; }
.layers-panel .tool { box-shadow: none; background: var(--panel-2); justify-content: flex-start; }
.layers-panel .tool-group { box-shadow: none; background: var(--panel-2); }
.layers-panel .tool-group .tool { flex: 1; justify-content: center; background: transparent; }
.layers-panel #toggle-3d, .layers-panel #toggle-snow, .layers-panel #clear-map { width: 100%; }
/* On and off is clear: the chosen one is filled in the accent colour. */
.layers-panel .tool[aria-pressed="true"], .tool-season .tool[aria-pressed="true"] { background: var(--resort); color: #fff; }
.season-seg button[aria-pressed="true"] { background: var(--resort) !important; color: #fff !important; box-shadow: none !important; }
.tool-season .tool[aria-pressed="false"] { background: var(--panel); color: var(--muted); }
.tool-season .tool { justify-content: center; }
.show-places { display: grid; gap: 8px; }
#clear-filters { text-align: center; }
@media (min-width: 900px) {
  /* Plenty of room: the layer options sit in the row, no menu. */
  .layers-btn { display: none; }
  .layers { position: static; display: contents; }
  .layers-panel { display: flex !important; position: static; padding: 0; background: none; box-shadow: none; gap: 8px; min-width: 0; }
  .layers-panel .tool { background: var(--panel); box-shadow: var(--shadow); }
  .layers-panel .tool-group { background: var(--panel); box-shadow: var(--shadow); }
  .layers-panel .tool-group .tool { box-shadow: none; background: transparent; }
  .layers-panel .tool[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
  .layers-panel .tool-group .tool[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
  .layers-panel #toggle-3d, .layers-panel #toggle-snow, .layers-panel #clear-map { width: auto; }
}
@media (max-width: 899px) {
  /* One even row: Filters, the season switch (takes the space left), Layers as an icon. */
  .map-tools { right: 12px; flex-wrap: nowrap; gap: 6px; }
  .map-tools .tool { padding: 9px 11px; font-size: 14px; }
  .tool-main { flex: none; }
  .tool-season { flex: 1; min-width: 0; }
  .tool-season .tool { flex: 1; padding-inline: 6px; gap: 5px; }
  .layers-btn { padding: 9px 11px; }
  .layers-text { display: none; }
  .layers-btn[aria-expanded="true"] { background: var(--resort); color: #fff; }
  .save-ctrl { display: none; }
}

/* The Layers menu sits above the map labels and pins while it is open. */
.map-tools:has(.layers-btn[aria-expanded="true"]) { z-index: 6; }
@media (max-width: 899px) {
  .map-tools { z-index: 4; }
}

/* Place panel: a faint line and room above each section, so the sections are easy to spot. */
.detail { gap: 18px; }
.detail > section, .detail > .getting, .detail > .d-foot { border-top: 1px solid var(--sep); padding-top: 18px; }
.detail.tripsheet > section:first-of-type { border-top: 0; padding-top: 0; }
.detail > .d-foot { margin-top: 2px; }
.detail.is-min > .d-foot { display: none; }

.hist-lead { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.hist-lead strong { color: var(--ink); font-weight: 600; }
.snow-hist .of { font-size: 0.72em; font-weight: 500; opacity: .6; margin-left: 1px; }

/* Stacking, bottom to top: map pins (up to 5), the Layers menu (6), place card (7), trip sheet (8), shortlist bar (9), side panel on phones (10), comparison (12). */
.welcome { z-index: 6; }

.hist-lead { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 14px; color: var(--ink); }
.info-btn { display: inline-flex; border: 0; background: none; padding: 2px; color: var(--muted); border-radius: 50%; }
.info-btn svg { width: 17px; height: 17px; }
.info-btn:hover, .info-btn:focus-visible, .info-btn[aria-expanded="true"] { color: var(--resort); }
.info-text { margin: -2px 0 10px; padding: 8px 10px; font-size: 13.5px; color: var(--muted); background: var(--panel-2); border-radius: 8px; }
.info-text[hidden] { display: none; }

/* (i) buttons on labels sit tight beside the text. */
.s-label .info-btn, .label .info-btn, label .info-btn, .sl-title .info-btn { vertical-align: middle; margin-left: 4px; text-transform: none; }
.s-label .info-btn svg, .label .info-btn svg { width: 15px; height: 15px; }
.info-btn svg.ic { width: 17px; height: 17px; stroke-width: 1.7; }
.hist-lead span { color: var(--muted); }
.field-note.info-text { margin: 0; }
.week-note:empty { display: none; }
.data-note .hist-lead { margin-bottom: 6px; }
.sl-note.info-text { margin: 4px 0 0; }

/* Quick start: three questions on the first screen. */
.qs-step { margin: 0 0 2px !important; font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--resort) !important; }
.welcome-countries b { display: flex; align-items: center; gap: 8px; }
.welcome-countries b .lv { width: 12px; height: 12px; flex: none; }
.welcome-countries b .ic { width: 20px; height: 20px; color: var(--resort); }
.qs-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.qs-foot .link { font-size: 13.5px; color: var(--muted); }
.qs-foot #qs-skip { margin-left: auto; }

/* Phones: the trip panel rests at the bottom with its title showing; tap it or drag up to open. */
.sheet-grip { display: none; }
@media (max-width: 899px) {
  :root { --peek: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .sheet-grip {
    display: flex; align-items: center; justify-content: space-between; position: sticky; top: -20px; z-index: 5;
    margin: -20px -18px 0; padding: 22px 18px 12px; height: 62px; flex: none;
    background: var(--panel); border: 0; border-radius: 16px 16px 0 0; color: var(--ink);
    font-size: 17px; font-weight: 700; text-align: left;
  }
  .grip-bar { position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--line); }
  .grip-title { display: inline-flex; align-items: center; gap: 8px; }
  .grip-chev { width: 22px; height: 22px; color: var(--muted); transition: transform .2s; }
  .sidebar.open .grip-chev { transform: rotate(180deg); }
  .sidebar { transform: translateY(calc(100% - var(--peek))); }
  .sidebar.open { transform: none; }
  .app.card-open .sidebar:not(.open) { transform: translateY(105%); }
  #sidebar-toggle, .app:not(.side-collapsed) #sidebar-toggle { display: none !important; }
  .brand #sidebar-hide { display: none; }
  .brand h1, .side-season { display: none; } /* the map already carries the title area and the season switch */
  .header-btns { margin-top: 0; }
  .maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { margin-bottom: var(--peek); }
  .app.card-open .maplibregl-ctrl-bottom-right, .app.card-open .maplibregl-ctrl-bottom-left { margin-bottom: 0; }
  .compare-bar { bottom: calc(var(--peek) + 10px); }
  .snow-legend { bottom: calc(var(--peek) + 8px); }
  .welcome { bottom: calc(var(--peek) + 14px); }
  .sheet-grip.nudge { animation: grip-nudge 1.1s ease-in-out 2; }
}
@keyframes grip-nudge { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .sheet-grip.nudge { animation: none; } }

/* The first questions come before the trip panel: it stays out of sight until they are answered or skipped. */
.app.quick-open { grid-template-columns: 1fr; }
.app.quick-open .sidebar, .app.quick-open #sidebar-toggle { display: none !important; }

/* Flying into: the title on its own line, the airport picker under it. */
p.origin { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; margin-top: 14px; }
p.origin label { display: flex; align-items: center; gap: 8px; }
p.origin #origin { width: 100%; padding: 8px 10px; font-size: 15px; }
p.origin .countries { display: none; }

/* "View map": the way back to the map from the trip panel on a phone. */
.narrow-only { display: none; }
.places-bar { position: sticky; bottom: -16px; z-index: 4; margin: 0 -18px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--panel) 70%, transparent); order: 99; }
@media (max-width: 899px) {
  .narrow-only { display: inline-flex; justify-content: center; }
  .places-bar.narrow-only { display: block; }
  .places-bar .primary { width: 100%; }
  .app.quick-open .compare-bar { display: none; }
  .app.quick-open .welcome { bottom: 16px; }
  .app.quick-open .maplibregl-ctrl-bottom-right, .app.quick-open .maplibregl-ctrl-bottom-left { margin-bottom: 0; }
}
/* A tap on a phone leaves :hover on, which looks like a choice was made. Only a mouse gets the hover look. */
@media (hover: none) {
  .welcome-countries button:hover { border-color: var(--line); background: var(--panel-2); }
}
#view-map-2 { background: var(--resort); color: #fff; border-color: transparent; }

/* Compact bottom bar: View map and Show places side by side; Clear map is a small link. */
.show-places { grid-template-columns: auto 1fr; gap: 8px; align-items: stretch; }
.show-places .primary, .show-places .secondary { padding: 11px 14px; font-size: 15px; min-height: 0; }
.show-places #show-places { width: auto; }
@media (min-width: 900px) { .show-places { grid-template-columns: 1fr; } }
.clear-row { margin: 0; text-align: center; }
.clear-row .link { font-size: 13px; color: var(--muted); }
.places-bar { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.places-bar .primary { padding: 11px 14px; font-size: 15px; }

/* trip cost card: the next primary action, in the accent colour */
.trip-teaser { background: var(--resort); border-color: var(--resort); color: #fff; }
.trip-teaser:hover { border-color: var(--resort); filter: brightness(1.08); }
.trip-teaser .s-label, .trip-teaser .tt-total { color: rgba(255, 255, 255, 0.82); }
.trip-teaser .tt-total strong { color: #fff; }
.trip-teaser .tt-go { color: #fff; }

.welcome-countries.fresh button:hover { border-color: var(--line); background: var(--panel-2); }

/* Search: a button in the toolbar that opens a field and a short list of matches. */
.search { position: relative; }
.search-btn[aria-expanded="true"] { background: var(--resort); color: #fff; }
.search-panel {
  position: absolute; top: calc(100% + 8px); left: 0; width: min(320px, calc(100vw - 24px)); padding: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.search-panel input { width: 100%; padding: 10px 12px; font-size: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--ink); }
.search-panel input:focus { outline: 2px solid var(--resort); outline-offset: -1px; }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-results:not(:empty) { margin-top: 6px; }
.search-results button { border: 0; background: transparent; box-shadow: none; display: grid; gap: 1px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; color: var(--ink); }
.search-results button:hover, .search-results button:focus-visible { background: var(--resort-soft); }
.search-results b { font-weight: 600; font-size: 15px; }
.search-results span { font-size: 12.5px; color: var(--muted); }
.search-results .none { padding: 9px 10px; font-size: 14px; color: var(--muted); }
.map-tools:has(.search-btn[aria-expanded="true"]) { z-index: 6; }
@media (max-width: 899px) {
  .search-btn { padding: 9px 11px; }
  .search-text { display: none; }
  .search-panel { position: fixed; top: 60px; left: 12px; right: 12px; width: auto; }
}

.est-note { margin: 6px 2px 0; font-size: 12.5px; color: var(--muted); }

/* Plan your trip and Places are the two main steps, so they carry the accent colour. */
.tabs { background: var(--panel); }
.tabs button { background: var(--resort-soft); color: var(--resort); font-size: 16px; padding: 12px 8px; }
.tabs button[aria-selected="true"] { background: var(--resort); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.tabs button[aria-selected="true"] .count { background: #fff; color: var(--resort); font-weight: 700; }
.tabs .count { background: var(--resort); color: #fff; }
.tool-main { padding-block: 11px; font-size: 16px; box-shadow: 0 3px 12px rgba(0, 0, 0, .3); }
@media (max-width: 899px) {
  .sheet-grip { background: var(--resort); color: #fff; font-size: 18px; box-shadow: 0 -4px 16px rgba(0, 0, 0, .25); }
  .sheet-grip .grip-bar { background: rgba(255, 255, 255, .6); }
  .sheet-grip .grip-chev { color: #fff; }
  .map-tools .tool-main { padding: 11px 13px; }
}

.sheet-grip { touch-action: none; }

/* Home screen, About and Feedback */
.home { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: linear-gradient(rgba(10, 20, 35, .55), rgba(10, 20, 35, .8)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3C/svg%3E"); backdrop-filter: blur(6px); }
.home[hidden] { display: none; }
.home-card { width: min(440px, 100%); padding: 32px 26px 22px; background: var(--panel); color: var(--ink); border-radius: 20px; box-shadow: var(--shadow); display: grid; gap: 12px; text-align: center; justify-items: center; }
.home-eyebrow { margin: 0; display: inline-flex; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--resort); }
.home-card .home-title { margin: 0; font-size: 40px; letter-spacing: -0.03em; }
.home-line { margin: 0 0 6px; font-size: 17px; line-height: 1.45; color: var(--muted); }
.home-start { width: 100%; padding: 15px; font-size: 18px; border-radius: 12px; background: var(--resort); color: #fff; }
.home-card .link { font-size: 15px; color: var(--muted); }
.home-foot { margin: 8px 0 0; display: flex; gap: 22px; }
.home-foot .link { font-size: 13.5px; }
.info-dialog { width: min(480px, calc(100vw - 24px)); max-height: 86vh; padding: 24px 22px 20px; border: 0; border-radius: 16px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.info-dialog::backdrop { background: rgba(10, 20, 35, .6); }
.info-dialog h2 { margin: 0 0 8px; font-size: 22px; }
.info-dialog h3 { margin: 16px 0 6px; font-size: 15px; }
.info-dialog p, .info-dialog li { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.info-dialog ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.info-dialog .link { font-size: 14.5px; color: var(--resort); text-decoration: underline; }
.dialog-close { position: absolute; top: 12px; right: 12px; margin: 0; }
.feedback { display: grid; gap: 6px; }
.feedback label { font-size: 13.5px; font-weight: 600; margin-top: 6px; }
.feedback label span { font-weight: 400; color: var(--muted); }
.feedback textarea, .feedback input { padding: 10px 12px; font: inherit; font-size: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--ink); resize: vertical; }
.feedback .primary { margin-top: 10px; padding: 12px; background: var(--resort); color: #fff; font-size: 16px; }
.feedback .fb-note { margin: 4px 0 0; font-size: 12.5px; }

.welcome-countries button[data-v="any"] { grid-column: 1 / -1; background: transparent; border-style: dashed; }

.welcome-countries:has(.compact) { max-height: 46vh; overflow-y: auto; }
.welcome-countries button.compact { padding: 11px 12px; }
.welcome-countries button.compact b { font-size: 15px; }
.welcome-countries .flag { font-size: 20px; line-height: 1; margin-right: 8px; }
.welcome-countries button.compact b { display: flex; align-items: center; }

/* On phones the shortlist bar and the snow key both sit above the bottom panel: stack them instead of overlapping. */
@media (max-width: 899px) {
  .stage:has(.compare-bar:not([hidden])) .snow-legend { bottom: calc(var(--peek) + 86px); }
}

/* Things to do */
.act-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.act-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; background: var(--panel-2); border-radius: 8px; font-size: 14px; }
.act-list b { font-weight: 600; }
.act-list span { color: var(--muted); text-align: right; }

/* Confirm box */
.confirm-dialog { width: min(380px, calc(100vw - 24px)); }
.confirm-dialog p { margin: 0 0 16px; }
.confirm-row { display: flex; gap: 10px; justify-content: flex-end; }
.confirm-row button { padding: 11px 16px; font-size: 15px; }
.primary.danger { background: #c0392b; color: #fff; }

/* Star on each row of the Places list: save a place without opening it. */
.results .row { position: relative; }
.results .row .result { padding-right: 46px; }
.results .row-save { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; background: transparent; border: 0; }
.confirm-stack { display: grid; gap: 10px; }
.confirm-stack button { padding: 12px 16px; font-size: 15px; width: 100%; }
.confirm-stack .link { text-align: center; color: var(--muted); }