:root {
  --ink: #161616;
  --ink-2: #222222;
  --ink-3: #2d2d2d;
  --line: rgba(232, 222, 202, 0.13);
  --ivory: #ebe5da;
  --muted: #b7af9f;
  --gold: #c8a76c;
  --gold-soft: rgba(200, 167, 108, 0.16);
  --danger: #e0907a;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background:
    var(--ink);
  background-attachment: fixed;
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
em { font-style: italic; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

main { max-width: 560px; margin: 0 auto; padding: 0 0 calc(120px + var(--safe-b)); }

/* Header */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 22px 14px;
  background: rgba(22, 22, 22, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; }
.monogram {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--gold); border-radius: 50%;
  font-family: var(--serif); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; color: var(--gold);
}
.monogram svg { width: 13px; height: 26px; }
.brand-text { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 400; }
.brand-text em { font-family: var(--serif); text-transform: none; letter-spacing: 0.02em; font-size: 17px; color: var(--gold); }

.compass-toggle {
  display: flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 14px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  transition: border-color .2s, color .2s;
}
.compass-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.compass-toggle[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
.compass-toggle[hidden] { display: none; }
/* Phones: compact header buttons (icon-only compass, no globe) so the logo has room. */
@media (max-width: 480px) {
  .compass-toggle { width: 40px; padding: 0; justify-content: center; }
  .compass-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .top-tools { gap: 6px; }
  .lang { padding: 0 10px; }
  .lang svg { display: none; }
}

/* Hero */
.hero { padding: 18px 22px 8px; animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.eyebrow {
  margin: 0 0 10px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold);
}
.hero h1 {
  margin: 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(46px, 13vw, 64px); line-height: 0.95; letter-spacing: -0.01em;
}
.hero h1 em { color: var(--gold); }
.hero-line { margin: 14px 0 0; color: var(--muted); max-width: 30ch; }

/* Place search */
.search { position: relative; z-index: 15; padding: 20px 16px 0; animation: rise .8s .06s cubic-bezier(.2,.7,.2,1) both; }
.search-box {
  display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 8px 0 16px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.search-box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.search-box > svg { flex: 0 0 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; }
.search-box input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; outline: none;
  font-size: 17px; font-weight: 300; -webkit-appearance: none; appearance: none;
}
.search-box input::placeholder { color: #8a8478; font-family: var(--serif); font-style: italic; font-size: 19px; }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-clear { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 12px; background: var(--ink-3); color: var(--muted); }
.search-clear svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.search-clear[hidden] { display: none; }

.suggest {
  position: absolute; left: 16px; right: 16px; top: calc(100% + 6px); z-index: 25;
  list-style: none; margin: 0; padding: 6px; max-height: min(60dvh, 420px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--ink-2);
  border: 1px solid rgba(200, 167, 108, 0.28); border-radius: 18px; box-shadow: 0 24px 60px rgba(5, 8, 9, 0.75);
  animation: drop .18s cubic-bezier(.2,.7,.2,1) both;
}
.search > .suggest { top: 82px; }
.suggest[hidden] { display: none; }
.suggest.in-sheet { position: relative; left: 0; right: 0; top: 0; margin-top: 6px; max-height: 280px; box-shadow: none; background: var(--ink); border-color: var(--line); }
.suggest-item + .suggest-head { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 14px; }
.suggest-head { padding: 12px 10px 6px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.suggest-item {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; cursor: pointer;
  transition: background .15s;
}
.suggest-item:active, .suggest-item[aria-selected="true"] { background: var(--ink-3); }
@media (hover: hover) { .suggest-item:hover { background: var(--ink-3); } }
.suggest-icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 10px; background: var(--ink-3); color: var(--muted); }
.suggest-item.pick .suggest-icon { background: var(--gold-soft); color: var(--gold); }
.suggest-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.suggest-text { flex: 1; min-width: 0; }
.suggest-text strong, .suggest-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-text strong { font-weight: 400; font-size: 15px; }
.suggest-text small { font-size: 12px; color: var(--muted); }
.suggest-text mark { background: none; color: var(--gold); }
.suggest-dist { flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.suggest-status { padding: 10px 10px 8px; font-size: 13px; color: var(--muted); font-style: italic; }

.found {
  position: relative; margin-top: 12px; padding: 18px 18px 14px 20px;
  background: linear-gradient(160deg, var(--gold-soft), rgba(34, 34, 34, 0.8) 60%);
  border: 1px solid rgba(200, 167, 108, 0.32); border-radius: 18px;
  animation: rise .45s cubic-bezier(.2,.7,.2,1) both;
}
.found[hidden] { display: none; }

/* Cities */
.cities {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 22px 22px 6px; scrollbar-width: none;
  animation: rise .8s .1s cubic-bezier(.2,.7,.2,1) both;
}
.cities::-webkit-scrollbar { display: none; }
.city {
  flex: 0 0 auto; scroll-snap-align: start;
  min-width: 118px; padding: 12px 14px 11px; text-align: left;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px;
  transition: transform .2s, border-color .2s, background .2s;
}
.city:active { transform: scale(.97); }
.city strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.1; }
.city span { font-size: 11px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.city[aria-current="true"] { border-color: var(--gold); background: linear-gradient(160deg, var(--gold-soft), var(--ink-2) 70%); }
.city[aria-current="true"] span { color: var(--gold); }

/* Filters */
.filters {
  display: flex; gap: 6px; overflow-x: auto; padding: 14px 22px 4px; scrollbar-width: none;
  animation: rise .8s .18s cubic-bezier(.2,.7,.2,1) both;
}
.filters::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; min-height: 40px; padding: 8px 16px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line);
  font-size: 14px; letter-spacing: 0.04em; color: var(--muted);
  transition: all .2s;
}
.chip[aria-pressed="true"] { background: var(--ivory); color: var(--ink); border-color: var(--ivory); font-weight: 400; }

/* Spots */
.spots { list-style: none; margin: 0; padding: 14px 16px 0; display: grid; gap: 12px; counter-reset: spot; }
.spot {
  position: relative; counter-increment: spot;
  padding: 18px 18px 14px 20px;
  background: linear-gradient(180deg, rgba(42, 42, 42, 0.7), rgba(34, 34, 34, 0.7));
  border: 1px solid var(--line); border-radius: 18px;
  animation: rise .6s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.spot::before {
  content: counter(spot, decimal-leading-zero);
  position: absolute; right: 18px; top: 14px;
  font-family: var(--serif); font-style: italic; font-size: 15px; color: rgba(200, 167, 108, 0.32);
}
.spot.nearest { border-color: rgba(200, 167, 108, 0.32); }
.spot.nearest::after {
  content: "Closest to you"; position: absolute; left: 20px; top: -9px;
  padding: 1px 8px; border-radius: 999px; background: var(--gold); color: var(--ink);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
}
.spot-meta { display: flex; gap: 10px; align-items: baseline; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.spot-cat { color: var(--gold); }
.spot-area { color: var(--muted); }
.spot-name { margin: 6px 40px 6px 0; font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.1; }
.spot-note { margin: 0; color: #d3ccbf; font-size: 15px; }
.spot-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
}
.distance { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ivory); }
.arrow {
  width: 22px; height: 22px; padding: 3px; border-radius: 50%;
  background: var(--gold-soft); fill: var(--gold);
  transition: transform .35s cubic-bezier(.3,.7,.3,1);
}
.distance[data-bearing="none"] .arrow { opacity: .35; }
.spot-foot .distance { flex: 1 1 100%; }
.spot-actions { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.link {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px;
  border-radius: 12px; background: none; border: 1px solid var(--line);
  font-size: 14px; letter-spacing: 0.03em; color: var(--ivory); text-decoration: none; white-space: nowrap;
  transition: background .2s;
}
.link:active { background: var(--ink-3); }
.link.ride { color: var(--gold); border-color: rgba(200, 167, 108, 0.32); background: var(--gold-soft); }

.empty { padding: 40px 22px; text-align: center; color: var(--muted); font-family: var(--serif); font-size: 22px; font-style: italic; }

.footnote { margin: 28px 22px 0; color: var(--muted); font-size: 13px; text-align: center; }

/* Dock */
.dock {
  position: fixed; left: 50%; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 8px;
  width: min(calc(100% - 24px), 520px); padding: 8px;
  background: rgba(34, 34, 34, 0.82); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 18px 40px rgba(5, 8, 9, 0.55);
}
.dock-icon {
  display: grid; place-items: center; flex: 0 0 52px; height: 52px; border-radius: 16px;
  background: var(--ink-3); color: var(--ivory);
}
.dock-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.dock-icon svg .fill { fill: currentColor; stroke: none; }
.dock-icon:active { transform: scale(.95); }
.pickup {
  position: relative; flex: 1; height: 52px; border: 0; border-radius: 16px;
  background: linear-gradient(135deg, #d9bd86, var(--gold) 50%, #a98a53);
  color: var(--ink); font-weight: 500; font-size: 15px; letter-spacing: 0.06em;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform .15s;
}
.pickup:active { transform: scale(.98); }
.pulse { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.pulse::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--ink);
  animation: ping 1.8s ease-out infinite;
}

/* Sheet */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 40; background: rgba(8, 10, 11, 0.6);
  animation: fade .25s both;
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  max-width: 560px; margin: 0 auto; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 22px calc(22px + var(--safe-b));
  background: var(--ink-2); border: 1px solid var(--line); border-bottom: 0; border-radius: 26px 26px 0 0;
  animation: slideUp .38s cubic-bezier(.2,.8,.2,1) both;
}
.sheet[hidden], .sheet-backdrop[hidden] { display: none; }
.sheet-handle { width: 40px; height: 4px; border-radius: 4px; background: var(--ink-3); margin: 0 auto 14px; }
.sheet-head h2, .done h2 { margin: 0 0 16px; font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1; }
.sheet-head h2 em, .done h2 em { color: var(--gold); }

.pin {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px; margin-bottom: 16px;
  border-radius: 14px; background: var(--ink); border: 1px solid var(--line);
}
.pin strong { display: block; font-weight: 400; }
.pin span { font-size: 13px; color: var(--muted); }
.pin-dot { flex: 0 0 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: var(--muted); position: relative; }
.pin[data-state="locating"] .pin-dot::after,
.pin[data-state="ok"] .pin-dot::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid currentColor;
  animation: ping 1.6s ease-out infinite;
}
.pin[data-state="locating"] .pin-dot { color: var(--muted); }
.pin[data-state="ok"] .pin-dot { background: var(--gold); color: var(--gold); }
.pin[data-state="off"] .pin-dot { background: var(--danger); }

.field { display: block; margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.field > span, .field > label > span, .field legend { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding: 0; }
.field small { text-transform: none; letter-spacing: 0; }
.field input, .field textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px;
  background: var(--ink); border: 1px solid var(--line); font-size: 16px; font-weight: 300;
  transition: border-color .2s;
}
.field textarea { resize: none; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field input::placeholder, .field textarea::placeholder { color: #6b675f; }
.err { display: block; font-style: normal; font-size: 13px; color: var(--danger); min-height: 0; }
.err:empty { display: none; }
.err:not(:empty) { margin-top: 6px; }
.later { margin-top: 8px; color-scheme: dark; }
.later[hidden] { display: none; }

.row { display: flex; align-items: center; justify-content: space-between; }
.row > span { margin: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 400px) { .two { grid-template-columns: 1fr; gap: 0; } }

.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--ink); border: 1px solid var(--line); border-radius: 12px; }
.segmented label { position: relative; }
.segmented input, .sheet .segmented input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: 9px 4px; text-align: center; border-radius: 9px; font-size: 14px; color: var(--muted); transition: all .2s; }
.segmented input:checked + span { background: var(--ivory); color: var(--ink); font-weight: 400; }
.segmented input:focus-visible + span { outline: 1px solid var(--gold); }

.stepper { display: flex; align-items: center; gap: 4px; background: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.stepper button { width: 38px; height: 34px; border: 0; border-radius: 9px; background: var(--ink-3); font-size: 18px; }
.stepper output { min-width: 32px; text-align: center; font-family: var(--serif); font-size: 22px; }

.form-error { color: var(--danger); font-size: 14px; margin: 0 0 10px; }
.form-error:empty { display: none; }

.submit {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 54px;
  border: 0; border-radius: 16px; text-decoration: none;
  background: linear-gradient(135deg, #d9bd86, var(--gold) 50%, #a98a53);
  color: var(--ink); font-weight: 500; font-size: 15px; letter-spacing: 0.06em;
}
.submit[disabled] { opacity: .6; }
.submit.loading span::after { content: "…"; }
.submit.wa { background: var(--ivory); }
.ghost { display: block; width: 100%; margin-top: 8px; padding: 12px; background: none; border: 0; color: var(--muted); font-size: 14px; }

.done { text-align: center; padding: 10px 0 0; }
.done[hidden] { display: none; }
.seal svg { width: 64px; height: 64px; fill: none; stroke: var(--gold); stroke-width: 1.4; margin-bottom: 10px; }
.seal path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .6s .2s ease-out forwards; }
.ref { margin: 0 0 8px; color: var(--muted); letter-spacing: 0.08em; }
.ref strong { color: var(--ivory); font-weight: 500; letter-spacing: 0.14em; }
.done-copy { color: #d3ccbf; margin: 0 auto 20px; max-width: 34ch; }

/* Pickup sheet: a light "ivory card" so the form reads clearly in any light.
   The colour tokens are remapped inside the sheet, so every rule above
   picks up dark text on light surfaces. */
.sheet-backdrop { background: rgba(8, 10, 11, 0.72); }
.sheet {
  --ivory: #1d2224; --muted: #5b564d; --ink: #ffffff; --ink-2: #f6f1e7; --ink-3: #ebe3d3;
  --line: #d8cdb8; --gold: #8f6a2f; --gold-soft: rgba(143, 106, 47, 0.12); --danger: #b03a26;
  color: var(--ivory); background: var(--ink-2); border-color: transparent;
  padding-top: 12px;
}
.sheet-handle { background: #cfc4ae; }
.sheet-close {
  position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ivory);
}
.sheet-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sheet .eyebrow { color: var(--gold); }
.sheet-head h2 { margin-bottom: 6px; padding-right: 44px; }
.sheet-intro { margin: 0 0 16px; font-size: 15px; color: var(--muted); }

.step { margin: 0 0 12px; padding: 14px 14px 2px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.step-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 16px; font-weight: 500; letter-spacing: 0.01em; }
.step-no {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ivory); color: #fff; font-size: 13px; font-weight: 500;
}
.sheet .pin { background: var(--ink-2); border-color: transparent; margin-bottom: 14px; }
.sheet .pin strong { font-weight: 500; }
.sheet .pin span { font-size: 14px; }

.sheet .field > span, .sheet .field > label > span, .sheet .field legend {
  margin-bottom: 7px; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; text-transform: none; color: var(--ivory);
}
.sheet .field small { font-weight: 400; color: var(--muted); }
.sheet .field input, .sheet .field textarea {
  background: #fbf9f4; border: 1.5px solid var(--line); font-weight: 400; color: var(--ivory);
}
.sheet .field input:focus, .sheet .field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.sheet .field input::placeholder, .sheet .field textarea::placeholder { color: #8a8478; }
.sheet .field input[aria-invalid="true"] { border-color: var(--danger); background: #fdf3f0; }
.sheet .later { color-scheme: light; }
.sheet .segmented { background: var(--ink-2); border-color: transparent; }
.sheet .segmented span { padding: 11px 4px; font-size: 15px; color: var(--ivory); }
.sheet .segmented input:checked + span { background: var(--ivory); color: #fff; }
.sheet .row { margin-bottom: 14px; }
.sheet .stepper { background: var(--ink-2); border-color: transparent; }
.sheet .stepper button { width: 44px; height: 40px; background: #fff; border: 1px solid var(--line); color: var(--ivory); font-size: 20px; }
.sheet .err { font-size: 14px; }
.sheet .suggest.in-sheet { background: #fff; }

.sheet .submit { height: 56px; margin-top: 4px; background: var(--ivory); color: #f6f1e7; font-size: 16px; }
.sheet .submit.wa { background: #1f7a4c; color: #fff; }
.sheet .ghost { color: var(--muted); font-size: 15px; }
.sheet .done-copy { color: var(--muted); }
.sheet .ref strong { color: var(--ivory); }

/* Walking map entry cards */
.tours { padding: 26px 16px 4px; animation: rise .8s .1s cubic-bezier(.2,.7,.2,1) both; }
.tour-cards {
  display: flex; gap: 10px; margin: 0 -16px; padding: 0 16px 4px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none;
}
.tour-cards::-webkit-scrollbar { display: none; }
.tour-card {
  position: relative; display: flex; flex: 0 0 min(84%, 340px); min-height: 200px; padding: 0; overflow: hidden; text-align: left;
  scroll-snap-align: start;
  border: 1px solid rgba(200, 167, 108, 0.35); border-radius: 18px; background: var(--ink-2);
  transition: transform .15s, border-color .2s;
}
.tour-card:active { transform: scale(.98); }
@media (hover: hover) { .tour-card:hover { border-color: var(--gold); } .tour-card:hover img { transform: scale(1.05); } }
.tour-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tour-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 22, 22, 0.05) 20%, rgba(22, 22, 22, 0.92) 78%); }
.tour-card-body { position: relative; z-index: 1; align-self: flex-end; display: flex; flex-direction: column; gap: 3px; padding: 14px; }
.tour-card-body .eyebrow { margin: 0; font-size: 10px; }
.tour-card strong { font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.02; }
.tour-card-meta { font-size: 11px; letter-spacing: 0.06em; color: #d3ccbf; }
.tour-card-cta { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.tour-card-cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Walking map view */
.tourview {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column;
  background: var(--ink);
  animation: fade .25s both;
}
.tourview[hidden] { display: none; }
.tour-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 10px;
  border-bottom: 1px solid var(--line);
}
.tour-heading { flex: 1; min-width: 0; }
.tour-heading .eyebrow { margin: 2px 0 4px; font-size: 10px; }
.tour-heading h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1; }
.tour-line { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.tour-icon {
  display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 14px;
  background: var(--ink-3); border: 1px solid var(--line); color: var(--ivory);
}
.tour-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tour-icon[hidden] { display: none; }
.tour-start {
  flex: 0 0 auto; align-self: center; padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(135deg, #d9bd86, var(--gold) 50%, #a98a53);
  color: var(--ink); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-decoration: none;
}
.tour-switch { display: flex; gap: 6px; padding: 10px 16px; }
.tour-switch button {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: none;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.tour-switch button[aria-pressed="true"] { background: var(--ivory); border-color: var(--ivory); color: var(--ink); font-weight: 400; }

.tour-map-wrap { position: relative; flex: 1; min-height: 0; }
.tour-map { position: absolute; inset: 0; background: #1b1f21; }
.tour-map-status { position: absolute; left: 0; right: 0; top: 30%; margin: 0; text-align: center; color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 20px; display: none; }
.tour-map-status button { background: none; border: 0; color: var(--gold); text-decoration: underline; font: inherit; }
.tour-map[data-state="loading"] ~ .tour-map-status.loading,
.tour-map[data-state="error"] ~ .tour-map-status.error { display: block; }
.tour-tools { position: absolute; top: 12px; right: 12px; z-index: 500; display: flex; flex-direction: column; gap: 8px; }
.tour-zoom { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.tour-zoom .tour-icon { border: 0; border-radius: 0; }
.tour-zoom .tour-icon + .tour-icon { border-top: 1px solid var(--line); }
.tour-icon[aria-pressed="true"] { color: var(--gold); border-color: rgba(200, 167, 108, 0.32); }
.tour-toast {
  position: absolute; left: 50%; top: 14px; z-index: 600; transform: translateX(-50%); margin: 0;
  max-width: calc(100% - 120px); padding: 8px 14px; border-radius: 999px;
  background: rgba(22, 22, 22, 0.94); border: 1px solid var(--line); color: var(--ivory); font-size: 13px; text-align: center;
  animation: fade .2s both;
}
.tour-toast[hidden] { display: none; }
.tour-tools .tour-icon { background: rgba(34, 34, 34, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.tour-me span {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: #6fb3ff; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(111, 179, 255, 0.25);
}

/* Stop cards over the bottom of the map */
.tour-stops {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 500;
  display: flex; gap: 10px; margin: 0; padding: 0 16px calc(16px + var(--safe-b)); list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.tour-stops::-webkit-scrollbar { display: none; }
.tour-stop {
  flex: 0 0 min(82%, 340px); scroll-snap-align: center;
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(34, 34, 34, 0.96); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 40px rgba(5, 8, 9, 0.55);
  transition: border-color .2s;
}
.tour-stop.active { border-color: rgba(200, 167, 108, 0.32); }
.tour-stop figure { position: relative; margin: 0; height: 128px; background: var(--ink-3); }
.tour-stop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stop-no {
  position: absolute; left: 12px; top: 10px; padding: 2px 9px; border-radius: 999px;
  background: var(--gold); color: var(--ink); font-family: var(--serif); font-weight: 600; font-size: 15px;
}
.credit {
  position: absolute; right: 8px; bottom: 6px; padding: 1px 6px; border-radius: 6px;
  background: rgba(22, 22, 22, 0.7); color: #d3ccbf; font-size: 9px; letter-spacing: 0.04em; text-decoration: none;
}
.stop-body { padding: 12px 14px 8px; }
.stop-name { margin: 0 0 4px; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.1; }
.stop-note {
  margin: 0; font-size: 13px; line-height: 1.45; color: #d3ccbf;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.stop-count { margin: 0 0 2px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.stop-next { margin: 8px 0 0; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.stop-body .spot-actions { margin-top: 10px; }

/* Phones: compact cards (photo beside the text) so the map keeps most of the screen. */
@media (max-width: 899px) {
  .tour-head { padding-bottom: 8px; align-items: center; }
  .tour-heading h2 { font-size: 22px; }
  .tour-line { display: none; }
  .tour-switch { padding: 8px 16px; }
  .tour-stops { padding-bottom: calc(12px + var(--safe-b)); }
  .tour-stop { flex-basis: min(86%, 360px); flex-direction: row; min-height: 0; }
  .tour-stop figure { flex: 0 0 96px; height: auto; min-height: 136px; }
  .stop-no { left: 8px; top: 8px; font-size: 13px; padding: 1px 7px; }
  .credit { left: 6px; right: auto; bottom: 6px; font-size: 8px; }
  .stop-body { flex: 1; min-width: 0; padding: 10px 12px 6px; }
  .stop-name { font-size: 19px; }
  .stop-note { font-size: 12.5px; -webkit-line-clamp: 2; }
  .stop-next { margin-top: 6px; font-size: 10px; }
  .stop-body .spot-actions { margin-top: 6px; gap: 6px; }
  .stop-body .link { min-height: 40px; font-size: 13px; padding: 0 6px; }
}

/* Small phones (iPhone SE and similar). */
@media (max-width: 380px) {
  .tour-head { gap: 10px; padding-left: 12px; padding-right: 12px; }
  .tour-heading h2 { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tour-heading .eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.12em; }
  .tour-start { padding: 9px 11px; font-size: 12px; }
  .tour-stop { flex-basis: 90%; }
  .tour-stop figure { flex-basis: 74px; }
  .stop-body { padding: 9px 10px 6px; }
  .stop-name { font-size: 18px; }
  .stop-body .link { font-size: 12.5px; padding: 0 4px; }
}

@media (min-width: 900px) {
  .tour-stops { top: 0; left: auto; width: 380px; flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 12px 16px calc(16px + var(--safe-b)); scroll-snap-type: y proximity; }
  .tour-stop { flex: 0 0 auto; }
  .tour-tools { right: auto; left: 12px; }
}

/* Skeleton */
.skeleton { height: 170px; border-radius: 18px; background: linear-gradient(90deg, var(--ink-2), var(--ink-3), var(--ink-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes slideUp { from { transform: translateY(100%); } }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ---------- Guest features: language, weather, saved, hours, booking, trains, info ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.top-tools { display: flex; align-items: center; gap: 8px; }
.lang {
  position: relative; display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
}
.lang svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.lang select {
  appearance: none; -webkit-appearance: none; border: 0; background: none; color: var(--ivory);
  font: 500 12px/1 var(--sans); letter-spacing: 0.12em; padding: 0 2px; cursor: pointer;
}
.lang select:focus-visible { outline: 1px solid var(--gold); border-radius: 4px; }
.lang option { color: #15191a; }

.weather { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--ivory); }
.weather[hidden] { display: none; }
.wx-range { color: var(--muted); font-size: 13px; }

/* Place cards: save heart replaces the running number */
.spot::before { content: none; }
.spot-meta { position: relative; padding-right: 44px; flex-wrap: wrap; row-gap: 2px; }
.save {
  position: absolute; right: -8px; top: -10px; display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; background: none; color: var(--muted);
}
.save svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .2s; }
.save[aria-pressed="true"] { color: var(--gold); }
.save[aria-pressed="true"] svg { fill: currentColor; }
.save:active svg { transform: scale(.85); }
.chip-saved[aria-pressed="false"] { color: var(--gold); border-color: rgba(200, 167, 108, 0.35); }
.spot-hours { margin: 4px 0 0; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.spot-hours::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.spot-hours[data-open="true"] { color: #9fcf9a; }
.spot-hours[data-open="true"]::before { background: #7fbf79; }
.spot-hours[hidden] { display: none; }
.spot-foot .reserve {
  flex: 1 1 100%; color: var(--ink); border: 0; font-weight: 500;
  background: linear-gradient(135deg, #d9bd86, var(--gold) 50%, #a98a53);
}
.saved-bar { padding: 12px 16px 0; }
.saved-bar[hidden] { display: none; }
.saved-share {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 12px;
  border: 1px solid rgba(200, 167, 108, 0.32); color: var(--gold); text-decoration: none; font-size: 14px;
}
.saved-share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.empty { font-size: 19px; }

/* Booking sheet extras */
.res-place { margin: 0; font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.res-what { margin: 2px 0 14px; color: var(--muted); font-size: 14px; }
.sheet .two.keep { grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet .field input[type="date"], .sheet .field input[type="time"] { color-scheme: light; min-height: 50px; }
.sheet .field[hidden], .sheet .row[hidden] { display: none; }
#resForm .err:not(:empty) { margin: -6px 0 12px; }

/* Live departures */
.trains { margin: 28px 16px 0; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--ink-2); }
.trains[hidden] { display: none; }
.trains-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.trains-head h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.15; }
.trains-refresh { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--muted); }
.trains-refresh svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.departures { list-style: none; margin: 0; padding: 0; }
.dep { display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.dep:first-child { border-top: 0; }
.dep-time strong { display: block; font-weight: 500; font-size: 16px; }
.dep-time em { display: block; font-style: normal; font-size: 12px; color: var(--danger); }
.dep-line { min-width: 0; display: flex; align-items: center; gap: 8px; }
.dep-line b {
  flex: 0 0 auto; padding: 2px 6px; border-radius: 6px; background: #eb0000; color: #fff;
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
}
.dep-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.dep-side { text-align: right; font-size: 12px; color: var(--muted); }
.dep-in { display: block; color: var(--ivory); font-size: 13px; }
.dep-status { padding: 12px 0; color: var(--muted); font-size: 14px; font-style: italic; }
.trains-source { margin: 8px 0 0; font-size: 11px; color: var(--muted); }

/* Good to know */
.info { margin: 28px 16px 0; }
.info-item { border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); margin-bottom: 8px; }
.info-item summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 52px; padding: 0 16px; font-size: 15px; cursor: pointer;
}
.info-item summary::-webkit-details-marker { display: none; }
.info-item summary::after { content: "+"; font-size: 22px; color: var(--gold); font-weight: 300; transition: transform .2s; }
.info-item[open] summary::after { transform: rotate(45deg); }
.info-item p { margin: 0; padding: 0 16px 14px; font-size: 14px; line-height: 1.55; color: #d3ccbf; }
.sos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px 16px; }
.sos a {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--ink); text-decoration: none; color: var(--ivory);
}
.sos strong { font-size: 20px; font-weight: 500; color: var(--gold); }
.sos span { font-size: 12px; color: var(--muted); }
.info-cta { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0 16px 16px; border-radius: 12px; background: #1f7a4c; color: #fff; text-decoration: none; font-size: 14px; }

/* Add to home screen */
.install {
  position: fixed; left: 12px; right: 12px; z-index: 31; max-width: 520px; margin: 0 auto;
  bottom: calc(96px + var(--safe-b));
  display: flex; align-items: center; gap: 10px; padding: 10px 6px 10px 12px;
  background: #f6f1e7; color: #1d2224; border-radius: 16px; box-shadow: 0 18px 40px rgba(5, 8, 9, 0.55);
  animation: rise .4s cubic-bezier(.2,.7,.2,1) both;
}
.install[hidden] { display: none; }
.install img { flex: 0 0 36px; border-radius: 9px; background: #15191a; }
.install p { flex: 1; margin: 0; font-size: 13px; line-height: 1.4; }
.install-go { flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: #1d2224; color: #f6f1e7; font-size: 13px; }
.install-x { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: #5b564d; }
.install-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.pickup { white-space: nowrap; }
@media (max-width: 380px) {
  .pickup { font-size: 14px; letter-spacing: 0.02em; gap: 8px; padding: 0 8px; }
  .lang { padding: 0 8px; }
  .lang svg { display: none; }
  .brand-text { letter-spacing: 0.2em; }
}

/* ---------- Travel tools: trip planner, summit forecast, arrival kit ---------- */
.arr-open {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px; padding: 0 16px;
  border-radius: 999px; border: 1px solid rgba(200, 167, 108, 0.32); background: var(--gold-soft);
  color: var(--gold); font-size: 14px; letter-spacing: 0.02em;
}
.arr-open svg { width: 18px; height: 18px; fill: currentColor; }

.trip { padding: 22px 16px 0; }
.trip-card { padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--ink-2); }
.trip-from { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.trip-from svg { flex: 0 0 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 1.6; }
.trip-input {
  position: relative; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--ink);
}
.trip-input:focus-within { border-color: var(--gold); }
.trip-input > svg { flex: 0 0 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.trip-input input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: 16px; font-weight: 300; -webkit-appearance: none; appearance: none; }
.trip-input input::-webkit-search-cancel-button { display: none; }
.trip-suggest { left: 0; right: 0; top: calc(100% + 6px); }
.trip-suggest .suggest-item { padding: 12px 10px; font-size: 15px; }
.trip-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.trip-quick .chip { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.trip-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.trip-actions .link[hidden] { display: none; }
.trip-actions .link:only-child { grid-column: 1 / -1; }

.conns { list-style: none; margin: 10px 0 0; padding: 0; }
.conns:empty { display: none; }
.conn { border-top: 1px solid var(--line); }
.conn:first-child { border-top: 0; }
.conn-sum {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; width: 100%; padding: 12px 2px;
  border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
}
.conn-times { display: flex; align-items: baseline; gap: 8px; font-size: 18px; }
.conn-times strong { font-weight: 500; }
.conn-arrow { color: var(--gold); }
.conn-meta { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.conn-lines { grid-row: 1; grid-column: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.conn-lines b, .conn-steps b {
  padding: 2px 6px; border-radius: 6px; background: #eb0000; color: #fff; font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
}
.conn-sum[aria-expanded="true"] .conn-times strong:first-child { color: var(--gold); }
.conn-steps { list-style: none; margin: 0 0 12px; padding: 4px 0 0 12px; border-left: 2px solid var(--gold-soft); }
.conn-steps li { display: grid; grid-template-columns: 46px 1fr; gap: 8px; padding: 6px 0; font-size: 14px; }
.conn-steps .step-time { color: var(--muted); font-size: 13px; }
.conn-steps small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.conn-steps .walk-step { color: var(--muted); font-style: italic; }
.conn-status { padding: 12px 2px; color: var(--muted); font-size: 14px; font-style: italic; }

.mountains { margin: 28px 16px 0; }
.mtn-sub { margin: 0 0 12px 6px; font-size: 13px; color: var(--muted); }
.mtn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mtn { padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); }
.mtn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mtn-head strong { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.1; }
.mtn-head span { flex: 0 0 auto; font-size: 12px; color: var(--muted); text-align: right; }
.mtn-days { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mtn-day { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--ink-3); }
.mtn-day small { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.mtn-day b { font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.mtn-day b::before { content: ""; flex: 0 0 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.mtn-day.clear { background: rgba(127, 191, 121, 0.14); }
.mtn-day.clear b { color: #a8d8a2; }
.mtn-day.clear b::before { background: #7fbf79; }
.mtn-day.mixed { background: rgba(200, 167, 108, 0.14); }
.mtn-day.mixed b { color: #e2c891; }
.mtn-day.mixed b::before { background: var(--gold); }
.mtn-day.cloud b { color: #b9b4aa; }
.mtn-more {
  display: block; width: 100%; min-height: 44px; margin-top: 8px; border-radius: 12px;
  border: 1px solid var(--line); background: none; color: var(--gold); font-size: 14px;
}

/* Arrival sheet (light) */
.segmented.two-way { grid-template-columns: 1fr 1fr; }
.arr-to { margin: 4px 0 0; font-weight: 500; font-size: 15px; }
.conns.light { margin-top: 4px; }
.arr-ride { width: 100%; margin: 6px 0 14px; }
.fx { display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.fx-in, .fx-sel {
  display: flex; align-items: center; height: 54px; padding: 0 12px; border-radius: 12px;
  background: #fbf9f4; border: 1.5px solid var(--line);
}
.fx-in:focus-within { border-color: var(--gold); }
.fx-in input { flex: 1; min-width: 0; width: 100%; border: 0; background: none; outline: none; font-size: 20px; font-weight: 500; color: var(--ivory); }
.fx-code { flex: 0 0 auto; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: var(--muted); }
.fx-sel select { width: 100%; border: 0; background: none; font-size: 17px; font-weight: 500; color: var(--ivory); }
.fx-swap {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ivory);
}
.fx-swap svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fx-out { margin: 14px 0 2px; font-family: var(--serif); font-size: 34px; line-height: 1.1; }
.fx-tips { margin: 0; font-size: 14px; color: var(--ivory); }
.fx-note { margin: 6px 0 14px; font-size: 12px; color: var(--muted); }
.arr-list { list-style: none; margin: 0 0 6px; padding: 0; }
.arr-list li { padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--ink-3); font-size: 14px; line-height: 1.5; color: var(--muted); }
.arr-list li:last-child { border-bottom: 0; margin-bottom: 0; }
.arr-list strong { display: block; margin-bottom: 2px; color: var(--ivory); font-weight: 500; font-size: 15px; }

/* Trains card: departure board by default, connections after a search */
.board { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.board[hidden], .trip-head[hidden], .conns[hidden], .trip-actions[hidden] { display: none; }
.board .trains-head h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.15; }
.trip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.trip-head h3 { margin: 0; min-width: 0; font-family: var(--serif); font-weight: 500; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-head .link { flex: 0 0 auto; min-height: 36px; font-size: 13px; padding: 0 12px; }
.trip-input .search-clear { flex: 0 0 34px; width: 34px; height: 34px; }

/* Official SBB ticket shop link at the foot of the Trains card */
.sbb {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px;
  border-radius: 14px; background: #eb0000; color: #fff; text-decoration: none;
}
.sbb > svg:first-child { flex: 0 0 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.sbb span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sbb strong { font-weight: 500; font-size: 15px; }
.sbb small { font-size: 12px; opacity: .9; }
.sbb .ext { flex: 0 0 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sbb:active { filter: brightness(.92); }

/* ---------- Premium ---------- */
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hero-actions .arr-open { margin-top: 0; }
.premium-open, .premium-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px; background: linear-gradient(135deg, #d9bd86, var(--gold) 50%, #a98a53);
  color: var(--ink); font-size: 14px; font-weight: 500; letter-spacing: 0.04em;
}
.premium-open svg, .premium-cta svg { width: 16px; height: 16px; fill: currentColor; }
.premium-card {
  margin: 28px 16px 0; padding: 22px 18px; border-radius: 20px; text-align: center;
  border: 1px solid rgba(200, 167, 108, 0.32);
  background: radial-gradient(120% 100% at 50% 0%, rgba(200, 167, 108, 0.18), transparent 70%), var(--ink-2);
}
.premium-card .eyebrow { margin: 0 0 6px; }
.premium-card h2 { margin: 0 0 8px; font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.05; }
.premium-card h2 em { color: var(--gold); }
.premium-card p:not(.eyebrow) { margin: 0 auto 16px; max-width: 32ch; font-size: 14px; color: #d3ccbf; }
.premium-cta { width: 100%; min-height: 50px; font-size: 15px; }

.prem-perks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.prem-perks li { padding: 12px 14px 12px 40px; position: relative; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-size: 14px; color: var(--muted); line-height: 1.45; }
.prem-perks li::before { content: "✦"; position: absolute; left: 15px; top: 12px; color: var(--gold); }
.prem-perks strong { display: block; color: var(--ivory); font-weight: 500; font-size: 15px; }
.prem-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pchip {
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line);
  background: #fbf9f4; color: var(--ivory); font-size: 14px;
}
.pchip[aria-pressed="true"] { background: var(--ivory); border-color: var(--ivory); color: #fff; }
.pchip[aria-pressed="true"]::before { content: "✓ "; }
.prem-note { margin: 4px 0 12px; font-size: 13px; color: var(--muted); text-align: center; }
#premForm .err:not(:empty) { margin: -6px 0 12px; }

/* ---------- Places as a horizontal, swipeable row ---------- */
.spots {
  display: flex; gap: 12px; align-items: stretch;
  padding: 18px 16px 6px; scroll-padding: 0 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.spots::-webkit-scrollbar { display: none; }
.spot { flex: 0 0 min(86%, 360px); scroll-snap-align: start; display: flex; flex-direction: column; }
.spot .spot-note { flex: 1; }
.spot .spot-foot { margin-top: 14px; }
.spot.nearest::after { content: attr(data-near); }
.spots > .skeleton { flex: 0 0 min(86%, 360px); }
.spots > .empty { flex: 1 1 100%; }

.spots-nav { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px 0; }
.spots-nav[hidden] { display: none; }
.spots-dots { display: flex; gap: 2px; }
.spots-dot { width: 22px; height: 28px; border: 0; background: none; display: grid; place-items: center; padding: 0; }
.spots-dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: width .2s, background .2s; }
.spots-dot[aria-current="true"]::after { width: 18px; border-radius: 4px; background: var(--gold); }
.spots-count { min-width: 44px; text-align: center; font-size: 13px; color: var(--muted); letter-spacing: 0.06em; }
.spots-arrow {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--ink-2); color: var(--ivory);
}
.spots-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spots-arrow:disabled { opacity: .35; }
/* With many places, dots get long: phones show the counter instead. */
@media (max-width: 899px) { .spots-dots:has(:nth-child(9)) { display: none; } }

/* ---------- Section titles: one clear, readable style for every main topic ---------- */
.section-title {
  margin: 0 0 14px 6px; padding: 0;
  font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.1;
  letter-spacing: 0; text-transform: none; color: var(--ivory);
}
.section-title::after {
  content: ""; display: block; width: 32px; height: 2px; margin-top: 8px; border-radius: 2px; background: var(--gold);
}
.tours, .trip { padding-top: 34px; }
.mountains, .info { margin-top: 38px; }
.mountains .section-title { margin-bottom: 4px; }
.mountains .section-title::after { margin-bottom: 10px; }
.mtn-sub { font-size: 14px; }
.places-title { margin: 34px 22px 0; }
.cities { padding-top: 14px; }
@media (max-width: 380px) { .section-title { font-size: 28px; } }

/* Cuisine filter under "Dine" */
.cuisines { padding-top: 0; }
.cuisines[hidden] { display: none; }
.cuisines .chip { min-height: 36px; font-size: 13px; }

/* Premium card now closes the page */
.premium-card { margin-top: 38px; }

/* ---------- Must-see day trips and Christmas markets ---------- */
.sights, .xmas { margin-top: 38px; }
.sights .section-title, .xmas .section-title { margin-left: 22px; }
.section-sub { margin: -4px 22px 14px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.xmas-season { color: var(--gold); }
.sight-list, .market-list {
  list-style: none; margin: 0; display: flex; gap: 12px; padding: 4px 16px 6px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; overscroll-behavior-x: contain; scrollbar-width: none;
}
.sight-list::-webkit-scrollbar, .market-list::-webkit-scrollbar { display: none; }
.sight {
  flex: 0 0 min(86%, 360px); scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px; background: var(--ink-2);
}
.sight figure { position: relative; margin: 0; height: 170px; background: var(--ink-3); }
.sight figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sight figure.no-photo img { display: none; }
.sight-time {
  position: absolute; left: 12px; bottom: 10px; padding: 3px 10px; border-radius: 999px;
  background: rgba(22, 22, 22, 0.82); color: var(--ivory); font-size: 12px; letter-spacing: 0.04em;
}
.sight-body { flex: 1; display: flex; flex-direction: column; padding: 14px 16px 14px; }
.sight-region, .market-city { margin: 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.sight h3, .market h3 { margin: 4px 0 6px; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.1; }
.sight-train { margin: 0 0 8px; font-size: 13px; color: var(--ivory); min-height: 1.2em; }
.sight-train:not(:empty)::before { content: "🚆 "; }
.sight-note, .market-note { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: #d3ccbf; flex: 1; }
.pass-badge {
  align-self: flex-start; margin: 0 0 12px; padding: 4px 10px; border-radius: 8px;
  background: rgba(235, 0, 0, 0.14); color: #ff9c9c; font-size: 12px; line-height: 1.35;
}
.pass-badge.free, .pass-badge.included { background: rgba(127, 191, 121, 0.14); color: #a8d8a2; }
.sight-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sight-actions .link { font-size: 13px; padding: 0 6px; }
.sight-dir { margin-top: 10px; text-align: center; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.mtn .pass-badge { margin: -4px 0 10px; }

.market {
  flex: 0 0 min(78%, 320px); scroll-snap-align: start; display: flex; flex-direction: column; padding: 16px;
  border: 1px solid rgba(200, 167, 108, 0.35); border-radius: 18px;
  background: radial-gradient(120% 80% at 100% 0%, rgba(200, 167, 108, 0.16), transparent 60%), var(--ink-2);
}
.market-place { margin: 0 0 8px; font-size: 13px; color: var(--muted); }

/* Swiss Travel Pass guide inside the Trains card */
.pass-guide { margin-top: 10px; background: var(--ink); }
.pass-guide ul { list-style: none; margin: 0; padding: 0 16px 6px; }
.pass-guide li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: #d3ccbf; }
.pass-guide li:first-child { border-top: 0; padding-top: 0; }
.pass-guide li strong { display: block; color: var(--ivory); font-weight: 500; }
.pass-link { background: var(--ink-3); color: var(--ivory); }

/* Audio guide on walking-map stops */
.stop-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.listen {
  display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px; border-radius: 999px;
  border: 1px solid rgba(200, 167, 108, 0.32); background: var(--gold-soft); color: var(--gold); font-size: 12px;
}
.listen[hidden] { display: none; }
.listen svg { width: 12px; height: 12px; fill: currentColor; }
.listen .pause, .listen[aria-pressed="true"] .play { display: none; }
.listen[aria-pressed="true"] .pause { display: block; }
.listen[aria-pressed="true"] { background: var(--gold); color: var(--ink); }

/* ---------- Unique experiences (Premium) ---------- */
.experiences {
  margin: 38px 0 0; padding: 26px 0 22px;
}
.experiences .section-title { margin-left: 22px; }
.exp-eyebrow { margin: 0 22px 8px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.exp-list {
  list-style: none; margin: 0; display: flex; gap: 12px; padding: 4px 16px 6px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; overscroll-behavior-x: contain; scrollbar-width: none;
}
.exp-list::-webkit-scrollbar { display: none; }
.exp {
  flex: 0 0 min(86%, 360px); scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(200, 167, 108, 0.32); border-radius: 18px; background: var(--ink-2);
}
.exp figure { position: relative; margin: 0; height: 190px; background: var(--ink-3); }
.exp figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.experiences:not(.unlocked) .exp figure img { filter: saturate(0.85) brightness(0.8); }
.exp-badge {
  position: absolute; right: 12px; top: 12px; padding: 4px 10px; border-radius: 999px;
  background: rgba(22, 22, 22, 0.85); color: var(--gold); font-size: 12px; letter-spacing: 0.04em;
}
.unlocked .exp-badge { background: var(--gold); color: var(--ink); }
.exp-body { flex: 1; display: flex; flex-direction: column; padding: 14px 16px 16px; }
.exp h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 500; font-size: 25px; line-height: 1.1; }
.exp-teaser { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: #d3ccbf; }
.exp-includes { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.exp-includes li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.45; color: var(--ivory); }
.exp-includes li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); font-size: 12px; top: 2px; }
.exp-cta {
  margin-top: auto; min-height: 48px; border: 0; border-radius: 14px; font-size: 15px; font-weight: 500;
  background: linear-gradient(135deg, #d9bd86, var(--gold) 50%, #a98a53); color: var(--ink);
}
.exp-cta.locked { background: transparent; border: 1px solid rgba(200, 167, 108, 0.32); color: var(--gold); }
.exp-cta.locked::before { content: "🔒 "; }
.exp-unlock { margin: 16px 16px 0; padding: 14px; border: 1px dashed rgba(200, 167, 108, 0.32); border-radius: 16px; }
.exp-unlock[hidden], .exp-lock-again[hidden] { display: none; }
.exp-unlock label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--ivory); }
.exp-code-row { display: flex; gap: 8px; }
.exp-code-row input {
  flex: 1; min-width: 0; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--ink); font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; outline: none;
}
.exp-code-row input:focus { border-color: var(--gold); }
.exp-code-row input[aria-invalid="true"] { border-color: var(--danger); }
.exp-code-row button { flex: 0 0 auto; padding: 0 18px; border: 0; border-radius: 12px; background: var(--ivory); color: var(--ink); font-size: 15px; font-weight: 500; }
.exp-unlock .err:not(:empty) { display: block; margin-top: 8px; }
.exp-lock-again { display: block; margin: 14px auto 0; border: 0; background: none; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

/* Christmas market dates */
.market-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; }
.market-when { font-size: 15px; font-weight: 500; color: var(--ivory); }
.market-open { padding: 2px 9px; border-radius: 999px; background: rgba(127, 191, 121, 0.18); color: #a8d8a2; font-size: 12px; }

/* ---------- Header brand: "powered by" + the official logo, on one line ---------- */
/* The brand takes whatever width the buttons leave and the logo shrinks to fit,
   so it can never run under the language or compass buttons. */
.top { gap: 12px; }
.top-tools { flex: 0 0 auto; }
.brand { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-powered {
  flex: 0 0 auto; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; line-height: 1.2;
}
.brand-logo { display: block; flex: 0 1 116px; min-width: 56px; width: 116px; max-width: 100%; height: auto; }
.brand:active { opacity: .85; }
/* Narrow phones: "powered by" folds onto two short lines. */
@media (max-width: 390px) {
  .brand { gap: 8px; }
  .brand-powered { white-space: normal; width: 4.6em; font-size: 9px; letter-spacing: 0.12em; text-align: right; }
}

.powered { margin: 34px 16px 0; text-align: center; }
.powered a {
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 22px;
  border-top: 1px solid var(--line); text-decoration: none; color: var(--muted);
}
.powered-by { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.powered img { height: 54px; width: auto; }
.powered-site { font-size: 13px; color: var(--gold); }

/* ---------- Day-trip cards: open the detail page ---------- */
.sight { cursor: pointer; }
.sight-more {
  margin-top: 10px; min-height: 44px; border-radius: 12px; border: 1px solid rgba(200, 167, 108, 0.32);
  background: var(--gold-soft); color: var(--gold); font-size: 14px; font-weight: 500;
}

/* Day-trip detail page (light sheet) */
.sight-sheet { padding-top: 12px; }
.sight-hero { margin: 0 -22px 16px; height: 210px; overflow: hidden; background: var(--ink-3); }
.sight-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sight-sheet .sheet-close { z-index: 2; background: rgba(255, 255, 255, 0.92); }
.sight-sheet h2 { margin: 2px 0 8px; font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.05; }
.sight-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; font-size: 14px; color: var(--ivory); }
.sight-facts [hidden] { display: none; }
.sight-sheet .pass-badge { background: var(--ink-3); color: var(--ivory); }
.sight-sheet .pass-badge.free, .sight-sheet .pass-badge.included { background: #e3f1df; color: #2f6b29; }
.sight-about { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; color: var(--ivory); }
.itinerary { list-style: none; margin: 0 0 12px; padding: 0; position: relative; }
.itinerary li { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 0 0 14px 18px; }
.itinerary li::before { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.itinerary li:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 17px; bottom: 0; width: 1px; background: var(--line); }
.it-when { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); padding-top: 2px; }
.it-what { font-size: 14.5px; line-height: 1.5; color: var(--ivory); }
.sight-tips { margin: 0 0 12px; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.sight-tips li { margin-bottom: 6px; }
.sight-sheet-actions { display: grid; gap: 8px; margin-top: 4px; }
.sight-plan-btn { background: linear-gradient(135deg, #d9bd86, var(--gold) 50%, #a98a53) !important; color: #1d2224 !important; }
.sight-sheet-actions .ghost { text-align: center; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 360px) { .itinerary li { grid-template-columns: 76px 1fr; } }

/* ---------- Live location card ---------- */
.loc-card {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 12px 12px 12px 14px;
  border-radius: 16px; border: 1px solid var(--line); background: var(--ink-2);
}
.loc-icon { position: relative; flex: 0 0 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--ink-3); color: var(--muted); }
.loc-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.loc-dot { position: absolute; right: -1px; top: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink-2); background: var(--muted); }
.loc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.loc-text strong { font-size: 15px; font-weight: 500; color: var(--ivory); }
.loc-text small { font-size: 13px; line-height: 1.4; color: var(--muted); }
.loc-btn {
  flex: 0 0 auto; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #d9bd86, var(--gold) 50%, #a98a53); color: var(--ink); font-size: 14px; font-weight: 500;
}
.loc-btn[hidden] { display: none; }
.loc-card[data-state="live"] { border-color: rgba(127, 191, 121, 0.5); background: rgba(127, 191, 121, 0.08); }
.loc-card[data-state="live"] .loc-icon { color: #a8d8a2; background: rgba(127, 191, 121, 0.16); }
.loc-card[data-state="live"] .loc-dot { background: #7fbf79; }
.loc-card[data-state="live"] .loc-dot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #7fbf79; animation: ping 1.8s ease-out infinite;
}
.loc-card[data-state="off"] { border-color: rgba(200, 167, 108, 0.32); }
.loc-card[data-state="off"] .loc-icon { color: var(--gold); }
.loc-card[data-state="off"] .loc-dot { background: var(--danger); }
.loc-card[data-state="finding"] .loc-dot { background: var(--gold); animation: fade 1s ease-in-out infinite alternate; }

/* ---------- Christmas market detail page ---------- */
.market { cursor: pointer; }
.mkt-banner {
  margin: 0 -22px 14px; padding: 18px 0; text-align: center; font-size: 22px; letter-spacing: 0.6em; color: #b58a3a;
  background: radial-gradient(120% 140% at 50% 0%, rgba(200, 167, 108, 0.35), rgba(200, 167, 108, 0.08) 70%);
}
.market-sheet h2 { margin: 2px 0 6px; font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1.05; }
.mkt-place { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.mkt-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 16px; color: var(--ivory); }
.mkt-when strong { font-weight: 500; }
.market-sheet .market-open { background: #e3f1df; color: #2f6b29; }
.market-sheet [hidden] { display: none; }
.mkt-hours { margin: 0 0 12px; font-size: 14px; color: var(--ivory); }
.mkt-list { margin: 0 0 12px; padding-left: 18px; font-size: 14.5px; line-height: 1.55; color: var(--ivory); }
.mkt-list li { margin-bottom: 6px; }
.mkt-list li::marker { color: var(--gold); }
.mkt-train { margin: 0 0 10px; font-size: 14px; color: var(--ivory); }
.mkt-train:not(:empty)::before { content: "🚆 "; }

/* ======================================================================
   Trains card, mobile-first: From/To route, departure time, live board
   and connection cards with a step timeline.
   ====================================================================== */
.trip-card { padding: 12px; }

/* From / To, stacked like a transit app, with a swap button between them */
.route { position: relative; border: 1px solid var(--line); border-radius: 16px; background: var(--ink); }
.route-row { position: relative; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 6px 54px 6px 14px; }
.route-row + .route-row { border-top: 1px solid var(--line); }
.route-dot { flex: 0 0 12px; height: 12px; border-radius: 50%; }
.route-dot.from { border: 2px solid var(--gold); }
.route-dot.to { background: var(--gold); }
.route-row:first-child .route-dot::after {
  content: ""; position: absolute; left: 19px; top: calc(50% + 9px); height: 34px; border-left: 2px dotted rgba(200, 167, 108, 0.32);
}
.route-field { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.route-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.route-here-tag { margin-left: 4px; text-transform: none; letter-spacing: 0; color: #a8d8a2; }
.route-here-tag[hidden] { display: none; }
.route-field input {
  width: 100%; min-width: 0; height: 30px; padding: 0; border: 0; background: none; outline: none;
  font-size: 17px; font-weight: 400; color: var(--ivory); -webkit-appearance: none; appearance: none;
}
.route-field input::placeholder { color: #8a8478; font-weight: 300; }
.route-field input::-webkit-search-cancel-button { display: none; }
.route-field .trip-suggest { top: calc(100% + 8px); left: -26px; right: -44px; z-index: 30; }
.route-btn {
  position: absolute; right: 54px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--ink-3); color: var(--muted);
}
.route-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.route-btn[hidden] { display: none; }
#tripHere.active { color: #a8d8a2; }
.route-swap {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(200, 167, 108, 0.32); background: var(--ink-2); color: var(--gold);
}
.route-swap svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Leave now / Depart at… */
.when-row { margin-top: 10px; }
.when-seg { grid-template-columns: 1fr 1fr; }
.when-seg span { font-size: 14px; padding: 10px 4px; }
.trip-at {
  width: 100%; height: 48px; margin-top: 8px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--ink); color: var(--ivory); font-size: 16px; color-scheme: dark;
}
.trip-at[hidden] { display: none; }

/* Destination shortcuts: one swipeable row */
.trip-quick { flex-wrap: nowrap; overflow-x: auto; margin: 12px -12px 0; padding: 0 12px 2px; scrollbar-width: none; }
.trip-quick::-webkit-scrollbar { display: none; }
.trip-quick .chip { flex: 0 0 auto; }

/* Live departure board */
.board .trains-head { margin-bottom: 0; }
.trains-updated { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.departures .dep {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 12px 0;
}
.dep-when { display: flex; flex-direction: column; gap: 1px; }
.dep-in { font-size: 19px; font-weight: 500; color: var(--ivory); line-height: 1.1; white-space: nowrap; }
.dep.soon .dep-in { color: var(--gold); }
.dep-at { font-size: 12px; color: var(--muted); }
.dep-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dep-to { font-size: 16px; color: var(--ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-meta { display: flex; align-items: center; gap: 6px; }
.dep-meta b { padding: 2px 6px; border-radius: 6px; background: #eb0000; color: #fff; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; }
.dep-meta em { font-style: normal; font-size: 12px; font-weight: 500; color: #ff8f80; }
.dep-pl {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 6px;
  border-radius: 10px; background: var(--ink-3); border: 1px solid var(--line);
}
.dep-pl small { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dep-pl strong { font-size: 17px; font-weight: 500; color: var(--ivory); line-height: 1; }
.trains-more {
  display: block; width: 100%; min-height: 44px; margin-top: 4px; border-radius: 12px; border: 1px solid var(--line);
  background: none; color: var(--gold); font-size: 14px;
}
.trains-more[hidden] { display: none; }

/* Connection cards */
.trip-head h3 { font-size: 22px; }
.conns { display: grid; gap: 10px; }
.conns .conn { border: 1px solid var(--line); border-radius: 16px; background: var(--ink); overflow: hidden; }
.conns .conn:first-child { border-top: 1px solid var(--line); }
.conns .conn-sum { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px; }
.conn-tags { display: flex; gap: 6px; }
.conn-tag { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; }
.conn-tag.fastest { background: rgba(127, 191, 121, 0.18); color: #a8d8a2; }
.conn-tag.night { background: rgba(200, 167, 108, 0.16); color: var(--gold); }
.conn-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.conns .conn-times { font-size: 24px; gap: 10px; }
.conn-dur { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: var(--ink-3); font-size: 13px; color: var(--ivory); }
.conn-info { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 14px; color: var(--muted); }
.conn-in { color: var(--gold); font-weight: 500; }
.conn-pl { color: var(--ivory); }
.conn-late { color: #ff8f80; font-weight: 500; }
.conns .conn-lines { grid-row: auto; grid-column: auto; justify-content: flex-start; flex-wrap: nowrap; overflow: hidden; }
.conn-more { font-size: 12px; color: var(--muted); align-self: center; }
.conn-toggle { font-size: 13px; color: var(--gold); }

/* Step timeline inside a connection */
.conns .conn-steps { margin: 0; padding: 4px 14px 14px; border-left: 0; border-top: 1px solid var(--line); list-style: none; }
.conn-steps .leg { position: relative; display: block; padding: 10px 0 10px 18px; border-left: 2px solid rgba(200, 167, 108, 0.32); margin-left: 6px; }
.leg-stop { display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; align-items: baseline; position: relative; }
.leg-stop::before { content: ""; position: absolute; left: -25px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); border: 2px solid var(--gold); }
.leg-time { font-size: 15px; font-weight: 500; color: var(--ivory); }
.leg-station { font-size: 15px; color: var(--ivory); min-width: 0; overflow-wrap: anywhere; }
.leg-pl { font-size: 12px; color: var(--muted); white-space: nowrap; }
.leg-ride { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 8px 56px; font-size: 13px; color: var(--muted); }
.leg-ride b { padding: 2px 6px; border-radius: 6px; background: #eb0000; color: #fff; font-size: 11px; font-weight: 500; }
.leg-ride small { color: var(--muted); }
.conn-steps .leg-walk, .conn-steps .leg-change { display: block; font-style: normal; margin: 2px 0 2px 6px; padding: 6px 0 6px 18px; border-left: 2px dotted var(--line); font-size: 13px; color: var(--muted); }
.conn-steps .leg-change { color: var(--gold); }

@media (max-width: 360px) {
  .conns .conn-times { font-size: 21px; }
  .departures .dep { grid-template-columns: 56px 1fr auto; gap: 10px; }
  .leg-ride { margin-left: 0; }
}
.trip-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.trip-actions .link { white-space: normal; min-width: 0; text-align: center; line-height: 1.25; padding: 6px 8px; }

/* ---------- Trains card: compact version ---------- */
.trip-card { padding: 10px; }
.route { border-radius: 14px; }
.route-row { min-height: 50px; padding: 4px 50px 4px 12px; gap: 9px; }
.route-dot { flex-basis: 10px; height: 10px; }
.route-row:first-child .route-dot::after { left: 16px; top: calc(50% + 8px); height: 28px; }
.route-label { font-size: 10px; letter-spacing: 0.1em; }
.route-field input { height: 26px; font-size: 16px; }
.route-btn { right: 50px; width: 32px; height: 32px; }
.route-btn svg { width: 16px; height: 16px; }
.route-swap { right: 7px; width: 36px; height: 36px; }
.route-swap svg { width: 18px; height: 18px; }

.when-row {
  display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 0 12px; height: 42px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--ink);
}
.when-row > svg { flex: 0 0 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; }
.when-row .trip-at { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; background: none; font-size: 16px; }

.trip-quick { margin-top: 8px; }
.trip-quick .chip { min-height: 32px; padding: 4px 11px; font-size: 13px; }

.board { margin-top: 10px; padding-top: 8px; }
.board .trains-head h3, .trip-head h3 { font-size: 19px; }
.trains-refresh { flex-basis: 34px; height: 34px; }
.trains-updated { font-size: 11px; margin-bottom: 0; }
.departures .dep { grid-template-columns: 54px 1fr auto; gap: 10px; padding: 9px 0; }
.dep-in { font-size: 17px; }
.dep-at { font-size: 11px; }
.dep-to { font-size: 15px; }
.dep-main { gap: 3px; }
.dep-pl { min-width: 38px; height: 38px; border-radius: 9px; }
.dep-pl strong { font-size: 15px; }
.dep-pl small { font-size: 8px; }
.trains-more { min-height: 38px; font-size: 13px; }

.trip-head { margin-top: 10px; padding-top: 8px; }
.trip-head .link { min-height: 32px; font-size: 12px; padding: 0 10px; }
.conns { gap: 8px; margin-top: 8px; }
.conns .conn { border-radius: 14px; }
.conns .conn-sum { gap: 6px; padding: 11px 12px; }
.conns .conn-times { font-size: 21px; gap: 8px; }
.conn-dur { padding: 3px 9px; font-size: 12px; }
.conn-info { font-size: 13px; gap: 4px 10px; }
.conn-tag { font-size: 10px; padding: 1px 8px; }
.conn-toggle { font-size: 12px; }
.conns .conn-steps { padding: 2px 12px 12px; }
.conn-steps .leg { padding: 8px 0 8px 16px; }
.leg-time, .leg-station { font-size: 14px; }
.leg-ride { margin: 6px 0 6px 56px; }
.conn-steps .leg-walk, .conn-steps .leg-change { padding: 4px 0 4px 16px; font-size: 12px; }

.sbb { margin-top: 10px; padding: 10px 12px; }
.sbb strong { font-size: 14px; }
.sbb small { font-size: 11px; }
.pass-guide { margin-top: 8px; }
.pass-guide summary { min-height: 46px; font-size: 14px; }
@media (max-width: 360px) {
  .departures .dep { grid-template-columns: 50px 1fr auto; }
  .conns .conn-times { font-size: 19px; }
}

/* ======================================================================
   Navigation: ☰ menu button, sticky section bar, menu, back to top
   ====================================================================== */
.menu-btn {
  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ivory);
}
.menu-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.menu-btn[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); }

.section-nav {
  position: sticky; top: var(--header-h, 69px); z-index: 19;
  background: rgba(22, 22, 22, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.section-nav-track { display: flex; gap: 6px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none; }
.section-nav-track::-webkit-scrollbar { display: none; }
.section-tab {
  flex: 0 0 auto; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid transparent;
  background: none; color: var(--muted); font-size: 13px; letter-spacing: 0.02em; white-space: nowrap;
}
.section-tab[aria-current="true"] { background: var(--gold-soft); border-color: rgba(200, 167, 108, 0.32); color: var(--gold); font-weight: 500; }

/* Jumps land just below the header and the section bar. */
#walks, #placesTitle, #daytrips, #experiences, #christmas, #mountains, #trains, #info {
  scroll-margin-top: calc(var(--header-h, 69px) + var(--nav-h, 51px) + 10px);
}

.to-top {
  position: fixed; right: 16px; bottom: calc(96px + var(--safe-b)); z-index: 29;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(200, 167, 108, 0.32); background: rgba(34, 34, 34, 0.92); color: var(--gold);
  box-shadow: 0 10px 24px rgba(5, 8, 9, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.to-top[hidden] { display: none; }
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.menu-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(8, 10, 11, 0.6); animation: fade .2s both; }
.menu-backdrop[hidden], .menu[hidden] { display: none; }
.menu {
  position: fixed; left: 0; right: 0; top: 0; z-index: 61; max-width: 560px; margin: 0 auto;
  max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 18px;
  background: var(--ink-2); border-bottom: 1px solid rgba(200, 167, 108, 0.35); border-radius: 0 0 22px 22px;
  box-shadow: 0 24px 60px rgba(5, 8, 9, 0.7); animation: menuDown .25s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes menuDown { from { transform: translateY(-16px); opacity: 0; } }
.menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.menu-head .eyebrow { margin: 0; }
.menu-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ivory); }
.menu-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 2px; text-align: left;
  border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ivory);
}
.menu-icon { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--ink-3); color: var(--gold); }
.menu-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.menu-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.menu-text strong { font-size: 16px; font-weight: 500; }
.menu-text small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.menu-go { font-size: 22px; color: var(--gold); }
.menu-actions { display: grid; gap: 8px; margin-top: 14px; }
.menu-action {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--ink-3); color: var(--ivory); font-size: 14px;
}
.menu-action.gold { border: 0; background: linear-gradient(135deg, #d9bd86, var(--gold) 50%, #a98a53); color: var(--ink); font-weight: 500; }
.menu-compass { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.menu-compass > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-compass strong { font-size: 14px; font-weight: 500; color: var(--ivory); }
.menu-compass small { font-size: 12px; color: var(--muted); }
.menu-compass:has(.compass-toggle[hidden]) { display: none; }
.menu-compass .compass-toggle { flex: 0 0 auto; width: auto; padding: 8px 14px; }
.menu-compass .compass-toggle span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }

/* ---------- Photos on place cards ---------- */


/* Walking map: clearer route, start/finish, next-stop button */
.tour-stop .stop-next {
  display: flex; align-items: center; gap: 6px; width: 100%; margin: 6px 0 8px; padding: 7px 10px;
  border: 1px solid rgba(200,167,108,.4); border-radius: 10px; background: rgba(200,167,108,.1);
  color: var(--gold); font: 500 12px/1.3 var(--sans); letter-spacing: 0; text-transform: none; text-align: left; cursor: pointer;
}
.tour-stop .stop-next span { flex: 1; min-width: 0; }
.tour-stop .stop-next svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.tour-stop .stop-next:disabled { border-color: transparent; background: none; padding-left: 0; cursor: default; opacity: .8; }
.tour-stop .stop-next:disabled svg { display: none; }
/* Pinch to zoom on phones; the +/- buttons only on wide screens */
@media (max-width: 899px) { .tour-zoom { display: none; } }

/* Weather card at the top: one compact row, then the next hours */
.weather {
  display: block; margin-top: 14px; padding: 10px 14px; max-width: 420px;
  border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.03);
}
.wx-main { display: flex; align-items: center; gap: 10px; }
.wx-icon svg { display: block; width: 28px; height: 28px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wx-now { margin: 0; display: flex; align-items: baseline; gap: 8px; min-width: 0; line-height: 1.2; }
.wx-now strong { font-family: var(--sans); font-weight: 500; font-size: 22px; color: var(--ivory); }
.wx-now span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-facts { list-style: none; margin: 0 0 0 auto; padding: 0; display: grid; gap: 2px; text-align: right; font-size: 12px; line-height: 1.3; color: var(--ivory); white-space: nowrap; }
.wx-facts li:last-child { color: var(--muted); }
.wx-hours { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); }
.wx-hours[hidden] { display: none; }
.wx-hours li { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11px; color: var(--muted); }
.wx-hours svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wx-hours strong { font-weight: 500; font-size: 12px; color: var(--ivory); }
@media (max-width: 350px) { .wx-hours li { flex-direction: column; gap: 2px; } }

/* "3 / 14" under the day trips and markets */
.carousel-count { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 10px 16px 0; font-size: 13px; letter-spacing: .08em; color: var(--muted); }
.carousel-count span { min-width: 54px; text-align: center; font-variant-numeric: tabular-nums; }
.carousel-count button {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--ink-2); color: var(--gold); cursor: pointer;
}
.carousel-count button:disabled { opacity: .35; cursor: default; }
.carousel-count svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Pickup: live location or another place */
.pick-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; margin-bottom: 12px; border-radius: 14px; background: var(--ink-2); }
.pick-mode button {
  display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 8px; border: 0; border-radius: 10px;
  background: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer;
}
.pick-mode button[aria-pressed="true"] { background: var(--ink); color: var(--ivory); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.pick-mode svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sheet .pin[hidden] { display: none; }

/* Calmer top: location as one slim line, the two actions side by side */
.loc-card {
  gap: 8px; margin: 0 0 16px; padding: 5px 5px 5px 12px; min-height: 40px;
  border-radius: 999px; background: rgba(255,255,255,.03);
}
.loc-icon { flex: 0 0 18px; height: 18px; background: none !important; border-radius: 0; }
.loc-icon svg { width: 16px; height: 16px; }
.loc-dot { width: 8px; height: 8px; border-width: 1.5px; right: -2px; top: -1px; }
.loc-text { flex-direction: row; align-items: baseline; gap: 6px; overflow: hidden; white-space: nowrap; }
.loc-text strong { flex: none; font-size: 13px; }
.loc-text small { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.loc-card[data-state="off"] .loc-text small,
.loc-card[data-state="finding"] .loc-text small { display: none; }
.loc-btn { min-height: 30px; padding: 0 14px; font-size: 13px; }
/* Blocked: the steps to fix it need room, so the line opens up */
.loc-card[data-help="true"] { border-radius: 16px; padding: 10px 10px 10px 14px; align-items: flex-start; }
.loc-card[data-help="true"] .loc-text { flex-direction: column; white-space: normal; gap: 2px; }
.loc-card[data-help="true"] .loc-text small { display: block; overflow: visible; }

.hero-actions { display: flex; gap: 8px; }
.hero-actions .arr-open {
  min-height: 42px; padding: 0 18px; justify-content: center; font-size: 13px; letter-spacing: .02em; white-space: nowrap;
}
.hero-actions svg { flex: none; width: 15px; height: 15px; }

/* Clear at the top: one compact table */
.mtn-list { gap: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); overflow: hidden; }
.mtn-row { display: grid; grid-template-columns: 1fr 76px 76px; align-items: center; gap: 6px; padding: 9px 12px; }
.mtn-row + .mtn-row { border-top: 1px solid var(--line); }
.mtn-cols { padding-top: 8px; padding-bottom: 6px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mtn-cols span:not(:first-child) { text-align: center; }
.mtn-name { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mtn-name strong { font-family: var(--serif); font-weight: 500; font-size: 16px; line-height: 1.15; }
.mtn-name small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtn-row .mtn-day {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; padding: 5px 4px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; line-height: 1.15; text-align: center; background: var(--ink-3); color: #b9b4aa;
}
.mtn-row .mtn-day::before { content: ""; flex: 0 0 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mtn-row .mtn-day.none::before { display: none; }
.mtn-row .mtn-day.clear { background: rgba(127, 191, 121, 0.14); color: #a8d8a2; }
.mtn-row .mtn-day.mixed { background: rgba(200, 167, 108, 0.14); color: #e2c891; }
@media (max-width: 350px) { .mtn-row { grid-template-columns: 1fr 66px 66px; padding: 8px 10px; } .mtn-row .mtn-day { font-size: 10.5px; } .mtn-cols { font-size: 9px; letter-spacing: .04em; } }

/* ---------- Softer page: more room between sections ---------- */
.tours, .trip { padding-top: 52px; }
.mountains, .info, .sights, .xmas, .premium-card { margin-top: 56px; }
.experiences { margin-top: 56px; padding-top: 34px; padding-bottom: 30px; }
.places-title { margin-top: 52px; }
.section-sub { margin-bottom: 18px; }

/* Long sections fold behind one calm row */
.fold { border: 1px solid var(--line); border-radius: 18px; background: var(--ink-2); }
.fold-sum { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; cursor: pointer; list-style: none; }
.fold-sum::-webkit-details-marker { display: none; }
.fold-icon { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-soft); color: var(--gold); }
.fold-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fold-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fold-text strong { font-size: 15px; font-weight: 500; color: var(--ivory); }
.fold-text small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.fold-chev { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.fold[open] .fold-chev { transform: rotate(180deg); }
.fold[open] .fold-sum { border-bottom: 1px solid var(--line); }
.fold .trip-card { border: 0; border-radius: 0 0 18px 18px; background: none; }
.fold-body { padding: 12px 12px 4px; }
.fold-body .info-item { background: var(--ink); }
/* Cards show a two-line teaser; the full text is one tap away in the detail */
.sight-note, .market-note { flex: 0 0 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Quick answers ---------- */
.faq-open svg { stroke-width: 1.6; }
.faq-sheet { display: flex; flex-direction: column; height: min(86dvh, 720px); overflow: hidden; padding-bottom: calc(12px + var(--safe-b)); }
.faq-sheet[hidden] { display: none; }
.faq-head { display: flex; align-items: center; gap: 12px; padding: 0 52px 12px 0; border-bottom: 1px solid var(--line); }
.faq-avatar {
  flex: 0 0 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  background: #1d2224; color: #c8a76c; font-family: var(--serif); font-size: 16px; letter-spacing: .04em;
}
.faq-head h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.1; }
.faq-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.faq-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 0 6px; }
.faq-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.faq-msg { max-width: 86%; animation: rise .3s both; }
.faq-msg p { margin: 0; padding: 10px 14px; font-size: 14.5px; line-height: 1.5; border-radius: 18px; }
.faq-msg.bot { align-self: flex-start; }
.faq-msg.bot p { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.faq-msg.me { align-self: flex-end; }
.faq-msg.me p { background: #1d2224; color: #f3ede2; border-bottom-right-radius: 6px; }
.faq-go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--gold); background: var(--gold-soft); color: var(--gold); font: inherit; font-size: 13px; font-weight: 500;
  text-decoration: none; cursor: pointer;
}
.faq-go::after { content: "→"; }
.faq-go.wa { border-color: #25a35a; background: rgba(37, 163, 90, 0.1); color: #1e8a4c; }
.faq-chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 8px 0 10px; margin: 0 -22px; padding-left: 22px; padding-right: 22px;
  border-top: 1px solid var(--line);
}
.faq-chips::-webkit-scrollbar { display: none; }
.faq-chips:empty { display: none; }
.faq-chip {
  flex: none; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  color: var(--ivory); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer;
}
.faq-form { display: flex; gap: 8px; }
.faq-form input {
  flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ivory); font: inherit; font-size: 16px;
}
.faq-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.faq-send {
  flex: 0 0 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: #1d2224; color: #c8a76c; cursor: pointer;
}
.faq-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Calm reading on the dark page: a little more line spacing for body text */
body { line-height: 1.55; }
.sight-note, .market-note, .spot-note, .exp-teaser, .section-sub { line-height: 1.6; }

/* ---------- Our places: city line, tiles, simple cards, detail ---------- */
.places-where { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 2px 22px 0; font-size: 16px; color: var(--ivory); }
.places-change {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 2px; border: 0; background: none;
  color: var(--gold); font: inherit; font-size: 14px; cursor: pointer;
}
.places-change svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.places-change[aria-expanded="true"] svg { transform: rotate(180deg); }
.places-saved {
  margin-left: auto; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: none;
  color: var(--muted); font: inherit; font-size: 13px; cursor: pointer;
}
.places-saved[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
.cities[hidden] { display: none; }
.cities { padding-top: 10px; }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 16px 0; }
.tile {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 48px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2);
  color: var(--ivory); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.tile span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tile[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); }
.tile:active { transform: scale(.97); }
.cuisines { margin-top: 10px; }

.spot { cursor: pointer; }
.spot-meta { margin: 0; padding-right: 0; display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-meta .spot-area::before { content: " · "; color: var(--muted); }
.spot-name { margin: 6px 0 6px; }
.spot .spot-note { flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spot-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; min-height: 28px; }
.spot-row .distance[hidden] { display: none; }
.spot-more {
  margin-left: auto; display: inline-flex; align-items: center; gap: 2px; padding: 4px 0; border: 0; background: none;
  color: var(--gold); font: inherit; font-size: 13px; cursor: pointer;
}
.spot-more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spot .spot-foot { margin-top: 12px; padding-top: 0; border-top: 0; }
.spot-main { flex: 1 1 100%; }
.spot-foot a.spot-main { border-color: rgba(200, 167, 108, 0.32); color: var(--gold); }

.place-sheet h2 { margin: 6px 48px 8px 0; font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1.05; }
.place-hours, .place-dist { margin: 0 0 6px; display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted); }
.place-hours[hidden], .place-dist[hidden] { display: none; }
.place-hours::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.place-hours[data-open="true"] { color: #2f7a3a; }
.place-hours[data-open="true"]::before { background: #3f9a4a; }
.place-note { margin: 10px 0 18px; font-size: 16px; line-height: 1.6; }
.place-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.place-main, .place-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 10px; border-radius: 14px;
  font: inherit; font-size: 15px; text-decoration: none; cursor: pointer;
}
.place-main { grid-column: 1 / -1; border: 0; color: #1d2224; font-weight: 500; background: linear-gradient(135deg, #d9bd86, #c8a76c 50%, #a98a53); }
.place-main[hidden] { display: none; }
.place-btn { border: 1px solid var(--line); background: #fff; color: var(--ivory); }
.place-save { grid-column: 1 / -1; border-style: dashed; color: var(--muted); }
.place-save svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.place-save[aria-pressed="true"] { color: var(--gold); border-style: solid; border-color: var(--gold); }
.place-save[aria-pressed="true"] svg { fill: currentColor; }
/* On phones the icon sits above the word, so longer labels (Entspannen, Se détendre) fit */
@media (max-width: 520px) {
  .tile { flex-direction: column; justify-content: center; gap: 4px; min-height: 62px; padding: 8px 4px; text-align: center; font-size: 13px; }
  .tile span { max-width: 100%; }
}
/* Exactly two lines of description; the row below sits at the bottom of the card */
.spot .spot-note { flex: 0 0 auto; }
.spot .spot-row { margin-top: auto; padding-top: 12px; }

/* ---------- Boats on the lakes ---------- */
.fold + .fold { margin-top: 10px; }
.boats-body { padding: 12px 14px 14px; }
.boat-lakes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 14px; background: var(--ink); }
.boat-lakes button {
  min-height: 40px; padding: 4px 6px; border: 0; border-radius: 10px; background: none;
  color: var(--muted); font: inherit; font-size: 13.5px; line-height: 1.2; cursor: pointer;
}
.boat-lakes button[aria-pressed="true"] { background: var(--ink-3); color: var(--ivory); }
.boat-pier { margin: 12px 2px 4px; font-size: 13px; color: var(--muted); }
.boat-list { margin: 0; padding: 0; }
.boat-list .dep-in { font-variant-numeric: tabular-nums; }
.boat-note { margin: 12px 2px 8px; font-size: 12.5px; color: var(--muted); }
.boat-link { display: inline-block; padding: 4px 2px; color: var(--gold); font-size: 14px; text-decoration: none; }

.boat-days { display: inline-grid; grid-template-columns: auto auto; gap: 4px; margin-top: 10px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.boat-days button { padding: 6px 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.boat-days button[aria-pressed="true"] { background: var(--ivory); color: var(--ink); }
.boat-via { display: block; font-style: normal; font-size: 12.5px; color: var(--gold); }
.boat-via:empty { display: none; }
.boat-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.boat-shop {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 999px;
  background: linear-gradient(135deg, #d9bd86, var(--gold) 50%, #a98a53); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none;
}

/* ---------- Experience cards in the same shape as the day-trip cards ---------- */
.exp { border-color: rgba(200, 167, 108, 0.32); }
.exp figure { height: 170px; }
.exp-badge { left: auto; right: 12px; top: 12px; background: rgba(22, 22, 22, 0.88); border: 1px solid rgba(200, 167, 108, 0.4); }
.exp .sight-time { left: 12px; bottom: 10px; }
.exp-body { padding: 14px 16px 14px; }
.exp-kind { margin: 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.exp h3 { margin: 4px 0 6px; font-size: 24px; }
.exp-teaser { margin: 0 0 12px; font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.exp-cta.locked {
  min-height: 44px; border-radius: 12px; border: 1px solid rgba(200, 167, 108, 0.32);
  background: var(--gold-soft); color: var(--gold); font-size: 14px; font-weight: 500;
}

/* ---------- Top of the page: location and "Just landed?" share one row ---------- */
.hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.hero-top .loc-card { flex: 1 1 auto; min-width: 0; margin: 0; min-height: 38px; padding: 4px 4px 4px 12px; }
.hero-top .loc-text small:empty { display: none; }
.hero-top .loc-card[data-state="live"] .loc-text small { display: none; }
.hero-top .loc-btn { min-height: 30px; padding: 0 12px; }
.hero-top .arr-open { flex: 0 0 auto; min-height: 38px; margin: 0; padding: 0 14px; font-size: 13px; gap: 6px; }
.hero-top .arr-open svg { width: 15px; height: 15px; }
/* Blocked location needs its explanation: the card takes the full row */
.hero-top .loc-card[data-help="true"] { flex-basis: 100%; }
/* ---------- A lighter logo in the header ---------- */
.brand-logo { flex-basis: 92px; width: 92px; }
.brand-powered { font-size: 9px; }

/* ---------- Location switch (iPhone style) ---------- */
.hero-top .loc-card { flex: 0 1 auto; gap: 8px; padding: 4px 5px 4px 12px; }
.loc-switch {
  position: relative; flex: none; width: 46px; height: 28px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 0; background: rgba(232, 222, 202, 0.18); transition: background .2s;
}
.loc-knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); transition: transform .2s cubic-bezier(.3,.7,.3,1.2);
}
.loc-switch[aria-checked="true"] { background: #4caf63; }
.loc-switch[aria-checked="true"] .loc-knob { transform: translateX(18px); }
.loc-card[data-state="finding"] .loc-switch { background: rgba(76, 175, 99, 0.55); }
.hero-top .loc-text strong { font-size: 13.5px; white-space: nowrap; }
.hero-top .arr-open { flex: 1 1 auto; justify-content: center; }
/* Very narrow phones: drop the plane icon so both stay on one row in every language */
@media (max-width: 360px) {
  .hero-top { gap: 6px; }
  .hero-top .loc-card { padding-left: 10px; gap: 6px; }
  .hero-top .arr-open { min-width: 0; padding: 0 10px; font-size: 12.5px; }
  .hero-top .arr-open svg { display: none; }
}

/* ---------- Walk info (Lucerne) ---------- */
.walk-info {
  position: absolute; top: 12px; left: 12px; right: 68px; z-index: 520; max-height: calc(100% - 24px); overflow: auto;
  border: 1px solid var(--line); border-radius: 16px; background: rgba(22, 22, 22, 0.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 28px rgba(5, 8, 9, 0.45);
}
.walk-info[hidden] { display: none; }
.walk-info:not([open]) { right: auto; max-width: calc(100% - 80px); }
.walk-info summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; list-style: none; cursor: pointer; font-size: 13px; }
.walk-info summary::-webkit-details-marker { display: none; }
.walk-info summary > svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; }
.walk-info summary span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.walk-info summary strong { font-weight: 500; color: var(--ivory); }
.walk-info summary small { color: var(--muted); font-size: 12px; margin-left: 4px; }
.walk-chev { transition: transform .2s; }
.walk-info[open] .walk-chev { transform: rotate(180deg); }
.walk-body { padding: 0 14px 14px; }
.walk-facts { list-style: none; margin: 0; padding: 10px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; border-top: 1px solid var(--line); }
.walk-facts li { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.walk-facts small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.walk-facts strong { font-size: 15px; font-weight: 500; color: var(--ivory); }
.walk-facts span { font-size: 12px; line-height: 1.35; color: var(--muted); }
.walk-facts span:empty { display: none; }
.walk-route { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ivory); }
.walk-route small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.walk-eat-title { margin: 0; padding: 10px 0 6px; border-top: 1px solid var(--line); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.walk-eat-title[hidden] { display: none; }
.walk-eats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.walk-eats li { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.walk-eats b {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--gold); font-size: 11px; font-weight: 500;
}
.walk-eats span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.walk-eats strong { font-size: 14px; font-weight: 500; color: var(--ivory); }
.walk-eats small { font-size: 12px; line-height: 1.35; color: var(--muted); }
.walk-hint { margin: 12px 0 0; font-size: 12px; color: var(--muted); }

/* Stop cards: local tip, coffee nearby and Skip */
.stop-tip, .stop-eat {
  display: flex; gap: 6px; margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ivory);
}
.stop-tip[hidden], .stop-eat[hidden] { display: none; }
.stop-tip b, .stop-eat b { flex: none; font-weight: 400; }
.stop-tip span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #d3ccbf; }
.stop-eat span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gold); }
.stop-top .skip {
  margin-left: auto; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: none;
  color: var(--muted); font: inherit; font-size: 12px; cursor: pointer;
}
.stop-top .skip + .listen { margin-left: 6px; }
.stop-top .skip[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.tour-stop.skipped figure, .tour-stop.skipped .stop-name, .tour-stop.skipped .stop-note,
.tour-stop.skipped .stop-tip, .tour-stop.skipped .stop-eat { opacity: .4; }
.tour-stop.skipped .stop-next, .tour-stop.skipped .spot-actions { display: none; }
.tour-pin.skipped { opacity: .35; filter: grayscale(1); }
.stop-top .stop-count { white-space: nowrap; }
.stop-top .skip { padding: 3px 9px; font-size: 11.5px; }
/* Narrow phones: "Listen" becomes just the play icon, so Skip and Listen both fit */
@media (max-width: 380px) {
  .stop-top .listen span { display: none; }
  .stop-top .listen { padding: 0 8px; }
}
@media (max-width: 380px) {
  .stop-top { gap: 4px; }
  .stop-top .stop-count { letter-spacing: 0.06em; }
  .stop-top .skip { padding: 3px 7px; }
  .stop-top .skip + .listen { margin-left: 2px; }
}

/* ---------- Premium pop-up before booking a restaurant ---------- */
.gate-sheet h2 { margin: 6px 48px 6px 0; font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.1; }
.gate-sheet h2 em { color: var(--gold); }
.gate-place { margin: 0 0 16px; font-size: 14px; color: var(--muted); }
.gate-price {
  display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line);
}
.gate-price strong { font-family: var(--serif); font-weight: 600; font-size: 32px; color: var(--ivory); }
.gate-price span { font-size: 14px; color: var(--muted); }
.gate-perks { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 8px; }
.gate-perks li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.45; }
.gate-perks li::before { content: "✦"; position: absolute; left: 0; top: 1px; color: var(--gold); font-size: 13px; }
.gate-go {
  display: block; width: 100%; min-height: 52px; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, #d9bd86, #c8a76c 50%, #a98a53); color: #1d2224; font: inherit; font-size: 16px; font-weight: 500;
}
.gate-later { display: block; width: 100%; margin-top: 8px; min-height: 44px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 15px; cursor: pointer; }
.gate-note { margin: 6px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }

/* ---------- Location label: shrinks with "…" instead of running into the switch ---------- */
.hero-top .loc-text { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.hero-top .loc-text strong { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hero-top .loc-switch { flex: none; }

/* ---------- Insider tips: grab bar to swipe it closed ---------- */
.walk-info { transition: transform .15s ease-out, opacity .15s; }
.walk-grab { display: none; width: 100%; padding: 6px 0 10px; border: 0; background: none; cursor: pointer; }
.walk-info[open] .walk-grab { display: block; position: sticky; bottom: 0; background: linear-gradient(transparent, rgba(22, 22, 22, 0.96) 40%); }
.walk-grab span { display: block; width: 44px; height: 5px; margin: 0 auto; border-radius: 3px; background: rgba(232, 222, 202, 0.45); }
.walk-eat-title { border-top: 1px solid var(--line); }
.walk-eats + .walk-facts { margin-top: 12px; }

/* ---------- Our places: one swipeable row of cities, the chosen one in gold ---------- */
.places-where { margin-top: 4px; }
.places-hint { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.city-wrap { position: relative; }
.city-wrap::after {
  content: ""; position: absolute; top: 8px; right: 0; bottom: 0; width: 44px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ink) 85%);
}
.city-wrap.at-end::after { opacity: 0; }
.city-switch {
  display: flex; gap: 8px; margin: 8px 0 0; padding: 2px 16px 4px; overflow-x: auto; scroll-snap-type: x proximity;
  scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.city-switch::-webkit-scrollbar { display: none; }
.city-switch .city {
  flex: none; min-width: 0; margin: 0; padding: 8px 16px 7px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--ink-2); text-align: center; scroll-snap-align: start; box-shadow: none;
}
.city-switch .city strong { font-size: 18px; color: var(--ivory); white-space: nowrap; }
.city-switch .city span { display: block; margin-top: 1px; font-size: 10px; letter-spacing: .12em; color: var(--muted); white-space: nowrap; }
.city-switch .city[aria-current="true"] { border-color: transparent; background: linear-gradient(135deg, #d9bd86, var(--gold) 50%, #a98a53); }
.city-switch .city[aria-current="true"] strong { color: var(--ink); }
.city-switch .city[aria-current="true"] span { color: rgba(22, 22, 22, 0.7); }

/* Heart on the place cards */
.spot { position: relative; }
.spot .spot-meta { padding-right: 40px; }
.spot > .save {
  position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
}
.spot > .save svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.spot > .save[aria-pressed="true"] { color: var(--gold); }
.spot > .save[aria-pressed="true"] svg { fill: currentColor; }

/* ---------- Boats: the chosen lake in gold ---------- */
.boat-lakes button[aria-pressed="true"] { background: linear-gradient(135deg, #d9bd86, var(--gold) 50%, #a98a53); color: var(--ink); font-weight: 500; }

/* ---------- Trains: changes and travel time at a glance ---------- */
.conn-tags { flex-wrap: wrap; margin-bottom: 6px; }
.conn-tag { font-size: 12px; padding: 3px 10px; }
.conn-tag.direct { background: rgba(127, 191, 121, 0.18); color: #a8d8a2; }
.conn-tag.change { background: rgba(232, 160, 80, 0.18); color: #f0b779; }
.conn-dur { display: flex; flex-direction: column; align-items: flex-end; gap: 0; padding: 4px 12px; border-radius: 12px; line-height: 1.15; }
.conn-dur small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.conn-dur strong { font-size: 17px; font-weight: 500; color: var(--ivory); }
.conn-times { font-size: 20px; }
.leg-change { padding: 8px 10px !important; margin: 4px 0; border-radius: 10px; background: rgba(232, 160, 80, 0.12); color: #f0b779; font-weight: 500; }

/* Popular destinations: a clear label and bigger chips */
.quick-label { margin: 14px 2px 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.trip-quick { margin-top: 8px; }
.trip-quick .chip.quick { min-height: 40px; padding: 0 14px; border-color: rgba(200, 167, 108, 0.45); color: var(--ivory); font-size: 14px; }

/* ---------- Mountains & ski slopes ---------- */
.mtn-ski { display: block; margin-top: 2px; font-size: 11.5px; color: #9fc6e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtn-season { margin: 14px 4px 6px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.mtn-ask { display: block; margin: 0 4px; padding: 6px 0; border: 0; background: none; color: var(--gold); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.mtn-ask::after { content: " ›"; }

/* Buy this exact train on SBB */
.conn-buy {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin: 0 0 12px; border-radius: 12px;
  background: linear-gradient(135deg, #d9bd86, var(--gold) 50%, #a98a53); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none;
}
.conn-buy-note { margin: 8px 2px 4px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.conn-buy-note[hidden] { display: none; }
.conn-buy { min-height: 42px; border: 1px solid rgba(200, 167, 108, 0.45); background: var(--gold-soft); color: var(--gold); }

/* ---------- Walking map: simple stop cards ---------- */
.tour-stop { cursor: pointer; }
.tour-stop .stop-count { margin: 0; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.tour-stop .stop-name { margin: 3px 0 4px; }
.tour-stop .stop-note { -webkit-line-clamp: 2; }
.stop-story {
  display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 0; padding: 2px 0; border: 0; background: none;
  color: var(--ivory); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(200, 167, 108, 0.6);
}

/* The story of a stop */
.story-backdrop { position: absolute; inset: 0; z-index: 700; background: rgba(8, 10, 11, 0.5); }
.story-backdrop[hidden], .story[hidden] { display: none; }
.story {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 710; max-height: 88%; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 22px 22px 0 0; background: var(--ink-2); box-shadow: 0 -12px 40px rgba(5, 8, 9, 0.5);
  animation: slideUp .3s cubic-bezier(.2,.8,.2,1) both;
}
@media (min-width: 900px) { .story { left: auto; width: 420px; right: 12px; bottom: 12px; border-radius: 22px; } }
.story-photo { position: relative; margin: 0; height: 210px; background: var(--ink-3); }
.story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 22px 22px 0 0; }
.story-photo::after { content: ""; position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: 3px; background: rgba(255, 255, 255, 0.7); }
.story-no {
  position: absolute; left: 14px; bottom: 12px; padding: 3px 10px; border-radius: 999px; background: var(--gold); color: var(--ink);
  font-family: var(--serif); font-size: 15px; font-weight: 600;
}
.story-close {
  position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: rgba(22, 22, 22, 0.75); color: #fff; cursor: pointer;
}
.story-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.story-body { padding: 16px 18px calc(18px + var(--safe-b)); }
.story-count { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.story-body h2 { margin: 4px 0 10px; font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.05; }
.story-text { margin: 0 0 14px; font-size: 15.5px; line-height: 1.65; color: #ddd6c9; }
.story-tip { display: flex; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--gold-soft); font-size: 14px; line-height: 1.5; color: var(--ivory); }
.story-tip[hidden] { display: none; }
.story-tip b { font-weight: 400; }
.story-eats { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.story-eats li { display: flex; gap: 8px; align-items: flex-start; }
.story-eats li b { font-weight: 400; }
.story-eats span { display: flex; flex-direction: column; }
.story-eats strong { font-size: 14px; font-weight: 500; color: var(--gold); }
.story-eats small { font-size: 12.5px; color: var(--muted); }
.story-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.story-skip { display: block; margin: 10px auto 0; padding: 6px 12px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.story-skip[aria-pressed="true"] { color: var(--gold); }
.story-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.story-nav button {
  display: inline-flex; align-items: center; gap: 6px; max-width: 48%; min-height: 40px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line); background: none; color: var(--ivory); font: inherit; font-size: 13px; cursor: pointer;
}
.story-nav button[hidden] { display: none; }
.story-nav #storyNext { margin-left: auto; border-color: rgba(200, 167, 108, 0.45); color: var(--gold); }
.story-nav span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-nav svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* "You are here": a little person in a blue circle */
.tour-me { position: relative; }
.tour-me .me-pulse {
  position: absolute; inset: -6px; border-radius: 50%; background: rgba(66, 150, 255, 0.28); animation: ping 1.8s ease-out infinite;
}
.tour-me .me-person {
  position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: #2f80ed; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.tour-me .me-person svg { width: 20px; height: 20px; fill: #fff; }
.tour-me em {
  position: absolute; left: 50%; top: 40px; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px;
  background: #2f80ed; color: #fff; font: 600 10px/1.6 var(--sans); font-style: normal; letter-spacing: .06em; white-space: nowrap;
}

/* ---------- App-style bottom bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  padding: 6px 6px calc(6px + var(--safe-b)); max-width: 560px; margin: 0 auto;
  background: rgba(22, 22, 22, 0.94); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(5, 8, 9, 0.45);
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 6px 2px 4px; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: 10.5px; letter-spacing: .02em; cursor: pointer;
}
.tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tab span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab[aria-current="true"] { color: var(--gold); }
.tab[aria-current="true"] svg { stroke-width: 1.9; }
.tab-pickup {
  flex: none; height: auto; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 0 4px; border: 0;
  background: none; color: var(--gold); font-size: 10.5px; font-weight: 500; letter-spacing: .02em;
}
.tab-pickup-circle {
  display: grid; place-items: center; width: 54px; height: 54px; margin-top: -24px; border-radius: 50%;
  background: linear-gradient(135deg, #d9bd86, var(--gold) 50%, #a98a53); border: 4px solid var(--ink);
  box-shadow: 0 8px 20px rgba(5, 8, 9, 0.5);
}
.tab-pickup-label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Concierge sheet */
.help-sheet h2 { margin: 4px 48px 16px 0; font-family: var(--serif); font-weight: 500; font-size: 30px; }
.help-actions { display: grid; gap: 8px; }
.help-btn {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 16px;
  border: 1px solid var(--line); background: #fff; color: var(--ivory); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.help-btn svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.help-btn span { display: flex; flex-direction: column; gap: 2px; }
.help-btn strong { font-size: 16px; font-weight: 500; }
.help-btn small { font-size: 13px; color: var(--muted); }
.help-btn.gold { border: 0; background: linear-gradient(135deg, #d9bd86, #c8a76c 50%, #a98a53); color: #1d2224; }
.help-btn.gold svg { stroke: #1d2224; }
.help-btn.gold small { color: rgba(34, 34, 34, 0.75); }

/* Walk time from you to the stop, on the map */
.route-info {
  position: absolute; left: 12px; top: 60px; z-index: 515; max-width: calc(100% - 80px); margin: 0; padding: 7px 12px;
  border-radius: 999px; background: #2f80ed; color: #fff; font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  animation: rise .3s both;
}
.route-info[hidden] { display: none; }
.walk-info[open] ~ .route-info { display: none; }

/* Location pill keeps its size; "Just landed?" gives way instead */
.hero-top .loc-card { flex: 0 0 auto; max-width: 62%; }
.hero-top .arr-open { flex: 1 1 0; min-width: 0; }
.hero-top .arr-open span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Trip steps: station names, times and platforms easier to read */
.leg-stop { grid-template-columns: 54px 1fr auto; gap: 10px; }
.leg-time, .conn-steps .leg-time { font-size: 17px; font-weight: 500; }
.leg-station, .conn-steps .leg-station { font-size: 17px; font-weight: 400; line-height: 1.3; }
.leg-pl {
  padding: 2px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--ink-3);
  font-size: 13.5px; font-weight: 500; color: var(--ivory);
}
.leg-ride, .conn-steps .leg-ride { margin-left: 64px; font-size: 14px; }
.leg-ride b { font-size: 12px; padding: 2px 7px; }
.leg-change { font-size: 14.5px; }
@media (max-width: 360px) {
  .leg-stop { grid-template-columns: 48px 1fr auto; gap: 8px; }
  .leg-time, .leg-station { font-size: 16px; }
  .leg-ride, .conn-steps .leg-ride { margin-left: 0; }
}

/* Bottom bar: bigger labels */
.tab, .tab-pickup { font-size: 12px; }
.tab svg { width: 24px; height: 24px; }

/* ================= App touches ================= */
/* Greeting above the city */
.hero-hello { margin: 4px 0 2px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* Header slims down while scrolling */
.top { transition: padding .25s ease; }
.brand-logo { transition: width .25s ease, flex-basis .25s ease; }
body.scrolled .top { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); padding-bottom: 8px; }
body.scrolled .brand-logo { flex-basis: 78px; width: 78px; }

/* Section headers: title on the left, a quiet count on the right */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.section-head .section-title { margin-bottom: 14px; }
.section-count {
  flex: none; margin: 0 22px 22px 0; padding: 4px 10px; border-radius: 999px;
  background: var(--ink-2); border: 1px solid var(--line); font-size: 12px; color: var(--muted); white-space: nowrap;
}
.section-count:empty { display: none; }
.tours .section-count { margin-right: 6px; }
.sights .section-head .section-title, .xmas .section-head .section-title, .experiences .section-head .section-title { margin-left: 22px; }

/* Cards: one rounded shape with soft depth */
.spot, .sight, .market, .exp, .tour-card, .fold, .weather, .mtn-list, .trip-card, .premium-card {
  border-radius: 22px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 14px 30px rgba(0, 0, 0, 0.28);
}
.sight figure img, .exp figure img { border-radius: 22px 22px 0 0; }

/* Touch feedback: things you can tap press down slightly, like in an app */
button, a, .spot, .sight, .market, .tour-card, .tile, .city, .chip { -webkit-tap-highlight-color: transparent; }
.spot, .sight, .market, .tour-card, .exp, .tile, .city, .chip, .fold-sum, .help-btn, .link, .conn-sum,
.section-tab, .tab, .tab-pickup, .cat, .faq-chip, .conn-buy, .sight-more, .gate-go, .place-main {
  transition: transform .12s ease, background-color .2s, border-color .2s, opacity .2s;
}
.spot:active, .sight:active, .market:active, .tour-card:active, .exp:active { transform: scale(.98); }
.tile:active, .city:active, .chip:active, .cat:active, .faq-chip:active, .section-tab:active,
.link:active, .help-btn:active, .conn-buy:active, .sight-more:active, .gate-go:active, .place-main:active { transform: scale(.96); }
.fold-sum:active, .conn-sum:active { opacity: .85; }
.tab:active, .tab-pickup:active { transform: scale(.92); }

/* Sections glide in */
.pre-reveal { opacity: 0; transform: translateY(18px); }
main > section, main > .section-head, main > .places-title { transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .pre-reveal { opacity: 1; transform: none; } }

/* ---------- Buy now on SBB: a compact pill ---------- */
.conn-buy {
  display: inline-flex; align-self: flex-start; width: auto; min-height: 36px; margin: 0 0 12px; padding: 0 14px; gap: 8px;
  border-radius: 999px; font-size: 13.5px;
}
.conn-buy b { font-weight: 500; padding-left: 8px; border-left: 1px solid rgba(200, 167, 108, 0.4); }
.conn-buy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.conn { display: flex; flex-direction: column; }

/* ---------- Our places: two slim rows, then the places ---------- */
.places-head .places-saved { margin: 0 22px 22px 0; }
/* cities: one slim swipeable row, name and distance on one line */
.city-switch { margin-top: 2px; padding-top: 0; gap: 6px; }
.city-switch .city { display: flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 999px; }
.city-switch .city strong { font-family: var(--sans); font-size: 15px; font-weight: 500; }
.city-switch .city span { display: inline; margin: 0; font-size: 11px; letter-spacing: .04em; text-transform: none; }
/* categories: one swipeable row of chips with icons instead of six big tiles */
.tiles {
  display: flex; gap: 6px; margin: 10px 0 0; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none;
}
.tiles::-webkit-scrollbar { display: none; }
.tiles .tile, .tiles .tile:active {
  flex: none; flex-direction: row; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px;
  border-radius: 999px; font-size: 14px; text-align: left;
}
.tiles .tile svg { width: 17px; height: 17px; }
.tiles .tile[aria-pressed="true"] { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
.tiles .tile[aria-pressed="true"] svg { stroke: var(--ink); }
@media (max-width: 520px) {
  .tiles .tile { flex-direction: row; min-height: 38px; padding: 0 14px; font-size: 14px; }
}
/* the place card: a little more air */
.spot .spot-meta { letter-spacing: .1em; }
.conn-buy { margin-left: 12px; }

/* Cuisines under Dine: a slim third row, smaller than the categories */
.filters.cuisines {
  display: flex; gap: 6px; margin: 8px 0 0; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none;
}
.filters.cuisines[hidden] { display: none; }
.filters.cuisines::-webkit-scrollbar { display: none; }
.filters.cuisines .chip { flex: none; min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 999px; }
.filters.cuisines .chip[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }

/* ---------- Soft alternating bands ----------
   One flat page colour. Every other section sits on the same barely lighter
   background with soft edges, so sections alternate plain, lighter, plain.
   Out of season Christmas is hidden, so the sections after it swap to keep this. */
.band {
  margin-top: 40px; padding-top: 28px; padding-bottom: 32px;
  background: linear-gradient(180deg,
    rgba(235, 229, 218, 0) 0,
    rgba(235, 229, 218, 0.05) 48px,
    rgba(235, 229, 218, 0.05) calc(100% - 48px),
    rgba(235, 229, 218, 0) 100%);
}
.band .places-title, .places-block .section-head .places-title { margin-top: 0; }
.xmas.band, .trip.band { margin-top: 40px; }
.trip.band { padding-top: 28px; }
.band + section, .band + .experiences { margin-top: 40px; }
@media (min-width: 561px) { .band { border-radius: 28px; } }

/* The top section bar is off: the bottom bar and the menu do the navigating. */
.section-nav[hidden] { display: none; }

/* The city name next to the location switch is never cut: the card takes the
   width it needs and "Just landed?" uses the rest, or moves to its own line. */
.hero-top .loc-card { flex: 0 0 auto; max-width: 100%; }
.hero-top .loc-text,
.hero-top .loc-text strong { flex: none; overflow: visible; text-overflow: clip; }
.hero-top .arr-open { flex: 1 1 0; min-width: 112px; }


/* ---------- Our places, app style ----------
   One city button, the kinds of place as tiles you see all at once, and a
   short list nearest first. Each kind has its own soft colour, used on its
   tile and on the icon of every place of that kind. */
.tile, .place-row { --c: var(--gold); }
[data-cat="dine"] { --c: #e0a088; }
[data-cat="stay"] { --c: #9cc0e2; }
[data-cat="shop"] { --c: #9fcca9; }
[data-cat="see"] { --c: #bcaedf; }
[data-cat="unwind"] { --c: #8ccac3; }

.city-pick {
  display: flex; align-items: center; gap: 8px; width: calc(100% - 32px); min-height: 50px; margin: 0 16px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2);
  color: var(--ivory); font: inherit; text-align: left; cursor: pointer;
}
.city-pick[hidden] { display: none; }
.city-pick:active { transform: scale(.985); }
.city-pick-pin { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.city-pick strong { font-size: 16px; font-weight: 500; white-space: nowrap; }
.city-pick-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.city-pick-note::before { content: "· "; }
.city-pick-note[data-here="true"] { color: #8fca89; }
.city-pick-change { margin-left: auto; flex: none; display: flex; align-items: center; gap: 3px; font-size: 13px; color: var(--gold); }
.city-pick-change svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.tiles {
  display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 8px;
  margin: 12px 16px 0; padding: 0; overflow: visible;
}
.tiles .tile, .tiles .tile:active, .tiles .tile[aria-pressed] {
  flex-direction: column; justify-content: center; align-items: center; gap: 5px; min-width: 0; min-height: 70px;
  padding: 10px 4px 8px; border-radius: 16px; font-size: 12.5px; text-align: center; color: var(--ivory);
  background: color-mix(in srgb, var(--c) 9%, transparent); border: 1px solid color-mix(in srgb, var(--c) 26%, transparent);
}
.tiles .tile svg, .tiles .tile[aria-pressed="true"] svg { width: 23px; height: 23px; stroke: var(--c); }
.tiles .tile span { max-width: 100%; }
.tiles .tile[aria-pressed="true"] {
  background: color-mix(in srgb, var(--c) 19%, transparent); border: 1.5px solid var(--c); color: var(--ivory); font-weight: 500;
}
@media (max-width: 520px) {
  .tiles .tile { flex-direction: column; min-height: 66px; padding: 9px 4px 7px; font-size: 12px; }
}

.places-info { margin: 18px 22px 2px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.places-info[hidden] { display: none; }
.spots.place-list {
  display: block; margin: 0 16px; padding: 0; overflow: visible; scroll-snap-type: none; list-style: none;
}
.place-list > .empty { padding: 18px 4px; color: var(--muted); }
.place-row {
  display: flex; align-items: center; gap: 2px; border-bottom: 1px solid rgba(235, 229, 218, 0.08);
}
.place-row:last-child { border-bottom: 0; }
.row-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.row-main:active { opacity: .75; }
.row-icon {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
}
.row-icon svg { width: 21px; height: 21px; fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.row-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-text strong { font-size: 15.5px; font-weight: 500; color: var(--ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-text small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-open { color: #8fca89; }
.row-save {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer;
}
.row-save svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.row-save[aria-pressed="true"] { color: var(--gold); }
.row-save[aria-pressed="true"] svg { fill: currentColor; }
.row-chev { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; cursor: pointer; }
.places-more {
  display: block; width: calc(100% - 32px); min-height: 44px; margin: 10px 16px 0; border: 1px solid var(--line); border-radius: 999px;
  background: none; color: var(--gold); font: inherit; font-size: 14px; cursor: pointer;
}
.places-more[hidden] { display: none; }

/* City panel */
.city-list { list-style: none; margin: 4px 0 0; padding: 0; }
.city-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 15px 4px;
  border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ivory); font: inherit; text-align: left; cursor: pointer;
}
.city-list li:last-child .city-row { border-bottom: 0; }
.city-row strong { font-family: var(--serif); font-size: 24px; font-weight: 500; }
.city-row span { font-size: 13px; color: var(--muted); }
.city-row[aria-current="true"] strong { color: var(--gold); }
.city-row[aria-current="true"] span::after { content: " ✓"; color: var(--gold); }
.city-sheet h2 { margin: 0 0 6px; padding-right: 44px; font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1.05; }

/* ---------- Day trips, app style ----------
   A switch for the kind of trip, then big photos two by two, closest first.
   Each kind keeps one soft colour: on its switch and on each photo's tag. */
.trip-themes, .dtrip { --c: var(--gold); }
[data-theme="peaks"] { --c: #9cc0e2; }
[data-theme="water"] { --c: #8ccac3; }
[data-theme="towns"] { --c: #e0b48a; }
[data-theme="trains"] { --c: #e08c8c; }

.trip-themes {
  display: flex; gap: 0; margin: 4px 16px 0; padding: 4px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--ink-2);
}
.trip-theme {
  flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 0 6px; border: 0; border-radius: 999px; background: none;
  color: var(--muted); font: inherit; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.trip-theme:not([data-theme="all"])::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--c); vertical-align: 1px;
}
.trip-theme[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--ivory); font-weight: 500; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.trip-theme[data-theme="all"][aria-pressed="true"] { background: var(--ivory); color: var(--ink); box-shadow: none; }

#tripsInfo { margin-top: 16px; }
.trip-grid {
  list-style: none; margin: 8px 16px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.trip-open {
  display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.trip-open:active { transform: scale(.98); }
.dtrip figure {
  position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--ink-2);
  border: 1px solid rgba(235, 229, 218, 0.08);
}
.dtrip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dtrip figure.no-photo img { visibility: hidden; }
.dtrip figure::after {
  content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, transparent, rgba(12, 14, 15, 0.88));
}
.trip-tag {
  position: absolute; left: 9px; top: 9px; z-index: 1; padding: 3px 9px 3px 8px; border-radius: 999px;
  background: rgba(22, 22, 22, 0.78); color: var(--ivory); font-size: 11px; letter-spacing: .04em;
}
.trip-tag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--c); vertical-align: 1px; }
.trip-name {
  position: absolute; left: 12px; right: 10px; bottom: 10px; z-index: 1;
  font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.05; color: #fff;
}
.trip-facts { display: flex; justify-content: space-between; gap: 6px; padding: 7px 4px 0; font-size: 12.5px; color: var(--muted); }
.trip-train { white-space: nowrap; color: var(--ivory); }
.trip-time { white-space: nowrap; text-align: right; }
#tripsMore { margin-top: 16px; }
.trip-theme[data-theme="all"] { flex: 0 0 auto; padding: 0 14px; }
@media (max-width: 380px) {
  .trip-theme { font-size: 12.5px; padding: 0 3px; }
  .trip-theme:not([data-theme="all"])::before { display: none; }
  .trip-theme[data-theme="all"] { padding: 0 11px; }
}

/* Day trips swipe sideways: tall photo cards, the next one peeking in. */
.trip-grid {
  display: flex; gap: 12px; margin: 8px 0 0; padding: 0 16px 4px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none;
}
.trip-grid::-webkit-scrollbar { display: none; }
.trip-grid > .dtrip { flex: 0 0 min(68%, 280px); scroll-snap-align: start; }
.dtrip .trip-name { font-size: 25px; left: 14px; bottom: 14px; }
.dtrip .trip-tag { left: 12px; top: 12px; font-size: 11.5px; }
.dtrip .trip-facts { font-size: 13px; padding: 8px 4px 0; }

/* Day trip card: where it is under the name, one line about it, train time
   and length, and what the Swiss Travel Pass covers. */
.dtrip .trip-title { position: absolute; left: 14px; right: 12px; bottom: 13px; z-index: 1; display: flex; flex-direction: column; gap: 3px; }
.dtrip .trip-title .trip-name { position: static; }
.trip-region { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
.trip-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 9px 4px 0; font-size: 13px; line-height: 1.4; color: var(--muted);
}
.dtrip .trip-facts { padding: 7px 4px 0; }
.dtrip .trip-time { color: var(--ivory); }
.dtrip .pass-badge { display: inline-block; margin: 8px 0 0 2px; padding: 4px 10px; font-size: 11.5px; line-height: 1.3; border-radius: 10px; }

/* Restaurant photo at the top of the details panel */
.place-photo { margin: 0 -22px 16px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-3); }
.place-photo[hidden] { display: none; }
.place-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.place-sheet:has(.place-photo:not([hidden])) { padding-top: 0; }
.place-sheet:has(.place-photo:not([hidden])) .sheet-handle { position: absolute; left: 50%; top: 8px; margin: 0 0 0 -20px; z-index: 2; background: rgba(255,255,255,.75); }
.place-sheet .sheet-close { z-index: 2; }

/* ---------- Our places: the kinds of place in one row you swipe ---------- */
.tiles {
  display: flex; gap: 8px; margin: 12px 0 0; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none;
  scroll-padding: 0 16px; overscroll-behavior-x: contain;
}
.tiles::-webkit-scrollbar { display: none; }
.tiles .tile, .tiles .tile:active, .tiles .tile[aria-pressed] {
  flex: none; flex-direction: row; gap: 7px; min-width: 0; min-height: 44px; padding: 0 15px 0 12px;
  border-radius: 14px; font-size: 14px;
}
.tiles .tile svg, .tiles .tile[aria-pressed="true"] svg { width: 20px; height: 20px; }
@media (max-width: 520px) {
  .tiles .tile { flex-direction: row; min-height: 44px; padding: 0 14px 0 11px; font-size: 13.5px; }
}

/* ---------- Mountains & ski slopes, in the same style ---------- */
[data-theme="ski"] { --c: var(--gold); }
.mtn-filter { margin: 4px 0 0; }
.mtn-filter .trip-theme[data-theme="all"] { flex: 1 1 0; }
.mtn-filter .trip-theme::before { display: none; }
.mtn-filter .trip-theme[data-theme="ski"]::before { display: inline-block; content: "⛷"; width: auto; height: auto; background: none; margin-right: 5px; }
#mtnSub { margin: 16px 6px 8px; }
.mtn-row { grid-template-columns: 38px minmax(0, 1fr) 74px 74px; gap: 8px; padding: 10px 12px; }
.mtn-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(235, 229, 218, 0.07); color: #b9b4aa; }
.mtn-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.mtn-icon.clear { background: rgba(127, 191, 121, 0.24); color: #a8d8a2; }
.mtn-icon.mixed { background: rgba(200, 167, 108, 0.24); color: #e2c891; }
.mtn-name strong { font-family: var(--sans); font-size: 15px; }
#mtnMore { margin: 12px 0 0; width: 100%; }
#mtnMore[hidden] { display: none; }
.mtn-skicard {
  margin: 14px 0 0; padding: 14px 16px; border-radius: 16px;
  background: var(--ink-2); border: 1px solid var(--line);
}
.mtn-skicard .mtn-season { margin: 0; color: var(--ivory); opacity: .88; }
.mtn-skicon { color: #9cc0e2; }
.mtn-skicard .mtn-ask { margin: 10px 0 0; padding: 0; }
@media (max-width: 350px) {
  .mtn-row { grid-template-columns: 32px minmax(0, 1fr) 64px 64px; gap: 6px; padding: 8px 10px; }
  .mtn-icon { width: 32px; height: 32px; border-radius: 10px; }
}

/* v65: bigger day trip photos, no description, a clear Swiss Travel Pass line;
   bigger kind switch, bigger place tiles, bigger bottom bar. */
.trip-themes { padding: 5px; }
.trip-theme { min-height: 44px; font-size: 14.5px; padding: 0 8px; }
.trip-theme:not([data-theme="all"])::before { width: 8px; height: 8px; margin-right: 6px; }
.trip-theme[data-theme="all"] { padding: 0 16px; }
@media (max-width: 380px) {
  .trip-theme { font-size: 13.5px; padding: 0 4px; }
  .trip-theme[data-theme="all"] { padding: 0 12px; }
}
.trip-grid > .dtrip { flex: 0 0 min(80%, 330px); }
.dtrip .trip-name { font-size: 27px; }
.trip-pass {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px;
  margin: 9px 2px 0; padding: 7px 8px 7px 12px; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line);
}
.trip-pass-label { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.trip-pass-val { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.trip-pass.free .trip-pass-val { background: rgba(127, 191, 121, 0.18); color: #a8d8a2; }
.trip-pass.paid .trip-pass-val { background: rgba(200, 167, 108, 0.18); color: #e2c891; }

.tiles { gap: 10px; }
.tiles .tile, .tiles .tile:active, .tiles .tile[aria-pressed] { gap: 9px; min-height: 54px; padding: 0 18px 0 15px; border-radius: 16px; font-size: 15.5px; }
.tiles .tile svg, .tiles .tile[aria-pressed="true"] svg { width: 23px; height: 23px; }
@media (max-width: 520px) {
  .tiles .tile { min-height: 52px; padding: 0 17px 0 14px; font-size: 15px; }
}

.tab, .tab-pickup { font-size: 12px; gap: 4px; }
.tab svg { width: 27px; height: 27px; }
.tab-pickup-circle { width: 58px; height: 58px; }
@media (max-width: 350px) { .tab, .tab-pickup { font-size: 11px; } .tab svg { width: 25px; height: 25px; } }
@media (max-width: 380px) { .trip-pass { flex-direction: column; align-items: flex-start; padding: 8px 10px; } }

/* v66: day trips start right after the switch; train ride and time needed in
   two clear boxes; bigger bottom bar. */
.trip-grid { margin-top: 16px; }
.dtrip .trip-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 2px 0; padding: 0; }
.trip-fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 11px 9px; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line); }
.trip-fact small { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-fact strong { font-size: 16px; font-weight: 500; color: var(--ivory); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-fact-time { border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 10%, var(--ink-2)); }
.dtrip .trip-fact-time strong { color: #e2c891; text-align: left; }
.dtrip .trip-pass { margin-top: 8px; }

.tab, .tab-pickup { font-size: 13px; }
.tab svg { width: 29px; height: 29px; }
.tab-pickup-circle { width: 60px; height: 60px; }
@media (max-width: 350px) { .tab, .tab-pickup { font-size: 12px; } .tab svg { width: 27px; height: 27px; } }
@media (max-width: 380px) { .trip-fact { padding: 8px 9px 9px; } .trip-fact strong { font-size: 14.5px; line-height: 1.25; white-space: normal; } }

/* v67: a cloud on the summit icon when it is partly or fully hidden */
.mtn-icon svg .cloud { fill: #e6e1d7; stroke: var(--ink-2); stroke-width: 1.3; }
.mtn-icon.mixed svg .cloud { fill: #efe4cc; }
.mtn-icon svg { width: 22px; height: 22px; }

/* v68: summits show one chosen day and the temperature at the top */
.mtn-controls { display: flex; justify-content: space-between; gap: 8px; margin: 12px 0 0; }
.mtn-switch { display: inline-flex; flex: none; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--ink-2); }
.mtn-switch button {
  min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: none;
  color: var(--muted); font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer;
}
.mtn-switch button[aria-pressed="true"] { background: var(--ivory); color: var(--ink); font-weight: 500; }
.mtn-row { grid-template-columns: 38px minmax(0, 1fr) 74px 56px; }
.mtn-temp { font-size: 15px; font-weight: 500; color: var(--ivory); text-align: right; white-space: nowrap; }
@media (max-width: 350px) {
  .mtn-switch button { padding: 0 10px; font-size: 13px; }
  .mtn-row { grid-template-columns: 32px minmax(0, 1fr) 64px 50px; }
  .mtn-temp { font-size: 14px; }
}
.mtn-row .mtn-name small { white-space: normal; }

/* v69: live MeteoSwiss readings need a little more room */
.mtn-row { grid-template-columns: 38px minmax(0, 1fr) 74px 64px; }
.mtn-temp { font-size: 14.5px; }
.mtn-source { margin: 10px 6px 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.mtn-source[hidden] { display: none; }
@media (max-width: 350px) {
  .mtn-row { grid-template-columns: 32px minmax(0, 1fr) 62px 56px; }
  .mtn-temp { font-size: 13px; }
}

/* Korean and Chinese: their own fonts behind the Latin ones, upright text, tighter caps */
html:lang(ko) { --serif: "Cormorant Garamond", "Noto Serif KR", "Apple SD Gothic Neo", serif; --sans: "Jost", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; word-break: keep-all; }
html:lang(zh) { --serif: "Cormorant Garamond", "Noto Serif SC", "Songti SC", serif; --sans: "Jost", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }
html:lang(ko) body, html:lang(zh) body { font-weight: 400; }
html:lang(ko) .search-box input::placeholder, html:lang(zh) .search-box input::placeholder,
html:lang(ko) .empty, html:lang(zh) .empty, html:lang(ko) .conn-status, html:lang(zh) .conn-status,
html:lang(ko) .dep-status, html:lang(zh) .dep-status, html:lang(ko) .suggest-status, html:lang(zh) .suggest-status { font-style: normal; }
html:lang(ko) .eyebrow, html:lang(zh) .eyebrow, html:lang(ko) .places-info, html:lang(zh) .places-info { letter-spacing: .04em; }
html:lang(ko) .hero h1, html:lang(zh) .hero h1 { line-height: 1.22; }
html:lang(ko) .section-title, html:lang(zh) .section-title { line-height: 1.25; }

/* v70: the digital maps, clearer. Named map buttons, "where next" on two lines,
   the map credit above the cards, the first-time hint clear of the buttons. */
.tour-start { display: inline-flex; align-items: center; gap: 5px; }
.tour-start svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tour-tools > .tour-icon { flex-direction: column; gap: 1px; width: 52px; height: 52px; padding: 0; }
.tour-tools > .tour-icon svg { width: 19px; height: 19px; }
.tour-tools > .tour-icon span { max-width: 100%; font-size: 10px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-toast { left: 12px; right: 72px; top: 62px; max-width: none; transform: none; padding: 10px 14px; border-radius: 14px; text-align: left; line-height: 1.4; }
.tour-stop .stop-next span { display: flex; flex-direction: column; gap: 1px; }
.tour-stop .next-name { font-size: 13px; font-weight: 500; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; }
.tour-stop .next-walk { font-size: 11.5px; color: #d3ccbf; opacity: .85; text-transform: none; letter-spacing: 0; }
.tour-stop .next-walk:empty { display: none; }
#walkFacts { border-top: 0; padding-top: 2px; }
.story .walk-eat-title { padding-top: 12px; border-top: 1px solid var(--line); }
.story .walk-eat-title[hidden] { display: none; }
/* Nothing on the map screen gets cut: long names and labels wrap instead. */
.tour-stop .next-name { white-space: normal; }
.walk-info summary span { white-space: normal; }
.walk-info summary small { display: block; margin-left: 0; }
@media (max-width: 350px) {
  .tour-heading h2 { white-space: normal; line-height: 1.05; }
  .tour-heading .eyebrow { white-space: normal; }
  .tour-start svg { display: none; }
}

/* v71: photo credits, small and quiet in the corner of the picture */
.sight-hero { position: relative; }
.photo-credit { position: absolute; right: 8px; bottom: 6px; z-index: 1; font-size: 9px; letter-spacing: .02em; color: rgba(255, 255, 255, 0.72); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); pointer-events: none; }
.photo-credit:empty { display: none; }
.sight-hero .photo-credit { padding: 1px 6px; border-radius: 6px; background: rgba(15, 18, 19, 0.45); color: rgba(255, 255, 255, 0.85); text-shadow: none; }

/* v72: summit rows rebuilt. Name and details on the left, temperature above the
   view on the right, all rows lined up the same way on every phone. */
.mtn-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; padding: 12px; align-items: center; }
.mtn-row .mtn-name { gap: 3px; }
.mtn-row .mtn-name strong { line-height: 1.2; }
.mtn-facts { display: flex; flex-wrap: wrap; gap: 1px 9px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.mtn-facts span { white-space: nowrap; }
.mtn-now { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.mtn-row .mtn-temp { font-size: 16px; line-height: 1.1; text-align: right; }
.mtn-row .mtn-day { width: auto; min-height: 0; padding: 3px 9px; gap: 5px; font-size: 11.5px; line-height: 1.3; white-space: nowrap; }
@media (max-width: 350px) {
  .mtn-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; padding: 10px; }
  .mtn-row .mtn-temp { font-size: 15px; }
  .mtn-row .mtn-day { padding: 3px 7px; font-size: 11px; }
  .mtn-facts { gap: 0 7px; font-size: 11.5px; }
}

/* v73: iPhone polish. Map: no seams between map squares, numbers that read as
   numbers, smaller pins, nothing on top of the tips box. Summits: no coloured
   emoji, details toned by meaning. */
.stop-no, .story-no { font-family: var(--sans); font-weight: 600; font-size: 12px; line-height: 1.5; min-width: 22px; text-align: center; }
.route-info { top: 90px; }
.tour-toast { top: 90px; }
.stop-story { text-decoration: none; color: var(--ivory); }
.stop-story span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(200, 167, 108, 0.6); }
.credit { background: rgba(22, 22, 22, 0.45); opacity: .8; }
.mtn-filter .trip-theme[data-theme="ski"]::before { display: none; }
.mtn-facts .ice { color: #9fc6e8; }
.mtn-facts .free { color: #a8d8a2; }
.mtn-source { font-size: 11.5px; opacity: .85; }

/* ---------- Ski slopes: open or closed ---------- */
.mtn-controls[hidden], .mtn-skicard[hidden], #mtnSub[hidden] { display: none; }
.ski-row { display: block; padding: 0; }
.ski-row a { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px; color: inherit; text-decoration: none; }
.mtn-filter + .mtn-controls[hidden] + #mtnSub[hidden] + .mtn-list { margin-top: 14px; }
/* The ski list only: near black with a thin gold edge, so red and green stand out */
.ski-list { background: #0f0f0f; border-color: rgba(200, 167, 108, 0.55); }
.ski-list .ski-row + .ski-row { border-top-color: rgba(232, 222, 202, 0.1); }
.ski-list .mtn-facts .ice { color: #d9bd86; }
.ski-list .mtn-icon { background: rgba(200, 167, 108, 0.14); color: #d9bd86; }
.ski-list .mtn-icon.clear { background: rgba(127, 191, 121, 0.22); color: #a8d8a2; }
.ski-list .ski-row .mtn-day { background: rgba(235, 229, 218, 0.08); color: #b9b4aa; }
.ski-list .ski-row .mtn-day.clear { background: rgba(127, 191, 121, 0.22); color: #a8d8a2; }
.ski-list .ski-row .mtn-day.cloud { background: rgba(229, 72, 62, 0.24); color: #ff9b92; }

/* These two have side margins of their own: full width, so the band has no side edges */
.mountains.band, .info.band { margin-left: 0; margin-right: 0; padding-left: 16px; padding-right: 16px; }

/* Christmas hidden: the sections after it swap, to keep plain, lighter, plain */
.xmas[hidden] ~ .sights, .xmas[hidden] ~ .mountains, .xmas[hidden] ~ .info { background: none; }
.xmas[hidden] ~ .experiences, .xmas[hidden] ~ .trip { background: linear-gradient(180deg, rgba(235, 229, 218, 0) 0, rgba(235, 229, 218, 0.05) 48px, rgba(235, 229, 218, 0.05) calc(100% - 48px), rgba(235, 229, 218, 0) 100%); }

/* ---------- The walking map: sharp, calm, one thing at a time ---------- */
/* isolate: the map's pins stay inside the map, under the tips box and the story sheet */
.tour-map { background: #1b1e1f; isolation: isolate; }
.tourview.map-light .tour-map { background: #f5f1e9; }
/* The map library's own styles load later and would collapse the map to no height */
.tour-map.maplibregl-map { position: absolute; }
.tour-map .maplibregl-canvas { outline: none; }
.tour-map .maplibregl-ctrl-bottom-right { bottom: var(--tour-cards, 0); }
.tour-map .maplibregl-ctrl-attrib {
  margin: 0; padding: 1px 6px; border-radius: 8px 0 0 0; background: rgba(22, 22, 22, 0.55);
  color: var(--muted); font: 9px/1.4 var(--sans);
}
.tour-map .maplibregl-ctrl-attrib a { color: inherit; }
/* Pins: a small number; the current stop opens up to its photo and name */
.tour-pin { position: absolute; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.tour-pin b {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
  background: var(--ink); color: var(--gold); border: 1.5px solid var(--gold);
  font: 600 12px/1 var(--sans); box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.tour-pin img, .tour-pin .tour-label { display: none; }
.tour-pin.active img {
  position: absolute; left: -12px; top: -12px; display: block; width: 52px; height: 52px; max-width: none;
  border-radius: 50%; object-fit: cover; border: 2.5px solid var(--gold); background: var(--ink-3); box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.tour-pin.active b { inset: auto -14px auto auto; top: -14px; width: 22px; height: 22px; background: var(--gold); color: var(--ink); border-color: var(--gold); font-size: 11px; }
.tour-pin.active .tour-label {
  position: absolute; left: 50%; top: 44px; transform: translateX(-50%); display: block; padding: 3px 10px; border-radius: 999px;
  background: rgba(22, 22, 22, 0.94); color: var(--ivory); font: 500 12px/1.4 var(--sans); white-space: nowrap; box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.tour-pin.skipped { opacity: .35; filter: grayscale(1); }
.tour-me { width: 36px; height: 36px; pointer-events: none; }
/* The walk message sits just above the cards, not over the map's middle */
.route-info { top: auto; bottom: calc(var(--tour-cards, 0px) + 22px); left: 12px; right: auto; max-width: calc(100% - 24px); padding: 5px 12px; font-size: 12.5px; transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 899px) {
  .tour-switch { padding: 6px 16px; }
  .tour-switch button { min-height: 30px; padding: 0 14px; font-size: 11px; }
  /* Smaller tools and a one-line tips box leave the map room */
  .tour-tools { gap: 6px; top: 10px; right: 10px; }
  .tour-tools > .tour-icon { width: 46px; height: 46px; border-radius: 13px; gap: 1px; }
  .tour-tools > .tour-icon svg { width: 17px; height: 17px; }
  .tour-tools > .tour-icon span { font-size: 9px; }
  .walk-info:not([open]) summary { padding: 6px 10px; }
  .walk-info:not([open]) summary small { display: inline; margin-left: 4px; }
  /* A compact stop card: name, a short description, what's next */
  .tour-stop { flex-basis: min(88%, 350px); }
  .tour-stop figure { flex: 0 0 76px; min-height: 0; }
  .tour-stop .stop-next svg { display: none; }
  .stop-body { padding: 8px 10px 8px; }
  .stop-count { display: none; }
  .stop-name { margin: 0 0 2px; font-size: 18px; }
  .stop-note { font-size: 12px; line-height: 1.35; }
  .stop-story { margin-top: 3px; font-size: 12px; }
  .tour-stop .stop-next { display: flex; flex-direction: row; gap: 5px; margin: 5px 0 0; padding: 5px 8px; font-size: 11px; white-space: nowrap; }
  .tour-stop .stop-next > span { display: flex; flex-direction: row; align-items: baseline; gap: 6px; min-width: 0; }
  .tour-stop .stop-next .next-name { flex: 0 1 auto; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tour-stop .stop-next .next-walk { flex: none; font-size: 11px; }
}

/* ---------- Unique experiences: the photo is the card ---------- */
.experiences { padding-top: 0; padding-bottom: 0; }
.exp { position: relative; min-height: 440px; flex-basis: min(86%, 350px); border-color: rgba(200, 167, 108, 0.45); background: var(--ink-2); }
.exp figure { position: absolute; inset: 0; height: auto; }
.exp figure img, .experiences:not(.unlocked) .exp figure img { border-radius: 0; filter: none; }
.exp-badge {
  position: absolute; z-index: 1; top: 12px; bottom: auto; padding: 4px 10px; border: 1px solid rgba(200, 167, 108, 0.45); border-radius: 999px;
  background: rgba(22, 22, 22, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 11.5px; line-height: 1.4; letter-spacing: .02em;
}
.exp-badge { left: 12px; right: auto; color: var(--gold); }
.unlocked .exp-badge { background: var(--gold); color: var(--ink); }
.exp-body { position: relative; flex: 0 0 auto; margin-top: auto; padding: 16px; }
.exp h3 { margin: 0 0 6px; font-size: 29px; line-height: 1.08; color: var(--ivory); }
.exp-teaser { margin: 0 0 14px; color: #e4ddd0; -webkit-line-clamp: 3; }
.exp-includes li { color: #e4ddd0; font-size: 13.5px; }
.exp-cta, .exp-cta.locked {
  width: 100%; min-height: 48px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #d9bd86, #c8a76c 50%, #a98a53);
  color: #1d2224; font: 500 15px/1.2 var(--sans); cursor: pointer;
}
.exp-cta.locked::before { content: none; }
/* The photo above, the words on a calm dark panel that it fades into */
.exp-badge { white-space: nowrap; }
.exp-time {
  position: absolute; z-index: 1; top: 12px; right: 12px; padding: 4px 11px; border-radius: 999px;
  background: var(--ivory); color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.4; white-space: nowrap;
}
.exp-body { padding: 4px 18px 18px; background: #15191a; }
.exp-body::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 90px; background: linear-gradient(180deg, transparent, #15191a); pointer-events: none; }
.exp h3 { margin-bottom: 8px; }
.exp-teaser { margin-bottom: 16px; font-size: 15px; line-height: 1.5; color: var(--ivory); }

/* ---------- Christmas markets: easy to spot ---------- */
.xmas-season { display: block; width: fit-content; margin: 0 0 8px; padding: 3px 11px; border: 1px solid rgba(200, 167, 108, 0.55); border-radius: 999px; background: rgba(200, 167, 108, 0.14); color: var(--gold); font-weight: 500; }
.market { flex-basis: min(84%, 340px); border: 1px solid rgba(200, 167, 108, 0.65); background: radial-gradient(130% 90% at 100% 0%, rgba(200, 167, 108, 0.3), transparent 65%), var(--ink-2); }
.market h3 { font-size: 27px; }
.market-when { color: var(--gold); font-size: 16px; }
.market .link.ride { border: 0; background: linear-gradient(135deg, #d9bd86, #c8a76c 50%, #a98a53); color: #1d2224; font-weight: 500; }

/* ---------- Section titles: bigger and clearer, so the page reads as chapters ---------- */
.section-title { font-size: 36px; font-weight: 600; line-height: 1.08; color: #f7f2e8; letter-spacing: -.005em; text-wrap: balance; }
.section-title::after { width: 48px; height: 2px; }
.section-head .section-title { min-width: 0; }
/* On phones the counter under each row already says "1 / 14", so the title gets the whole line */
@media (max-width: 560px) { .section-head .section-count { display: none; } }
@media (max-width: 350px) { .section-title { font-size: 31px; } }

/* Bottom bar: the car on the gold button */
.tab-pickup-circle svg { width: 32px; height: 32px; fill: none; stroke: #1d2224; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Market cards: the city first, clear at a glance */
.market-city { display: flex; align-items: center; gap: 5px; margin: 0 0 2px; color: var(--gold); font-size: 15px; font-weight: 500; letter-spacing: .05em; text-transform: none; }
.market-city svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
/* Market details: opening times in their own box */
.mkt-hours { margin: 4px 0 14px; padding: 12px 14px; border: 1px solid var(--gold); border-radius: 14px; background: #fff; }
.mkt-hours-title { margin: 0 0 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8a6a2f; font-weight: 500; }
.mkt-hours ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.mkt-hours li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; color: var(--muted); }
.mkt-hours li strong { color: var(--ivory); font-size: 16px; font-weight: 500; text-align: right; }
.mkt-hours-note { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* Christmas markets: a light snowfall */
.xmas { position: relative; }
/* Behind the words and cards, so a flake never looks like a speck on the text */
.snow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.xmas > :not(.snow) { position: relative; }
.snow i { position: absolute; top: -16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3E%3Cg id='a'%3E%3Cpath d='M12 2v20M12 6l-3-3M12 6l3-3M12 18l-3 3M12 18l3 3'/%3E%3C/g%3E%3Cuse href='%23a' transform='rotate(60 12 12)'/%3E%3Cuse href='%23a' transform='rotate(120 12 12)'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .75; will-change: transform; animation: snowfall linear infinite; }
@keyframes snowfall { to { transform: translate3d(var(--drift, 0), 720px, 0) rotate(240deg); } }
@media (prefers-reduced-motion: reduce) { .snow { display: none; } }

/* A place's keyword, right under its name */
.row-tag { color: var(--gold); font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.place-tag { margin: 0 0 8px; color: #8a6a2f; font-size: 15px; font-weight: 500; }
.place-tag[hidden] { display: none; }

/* ---------- Walking maps: the first thing to reach for ---------- */
.tour-card { flex-basis: min(88%, 350px); min-height: 250px; border: 1.5px solid rgba(200, 167, 108, 0.75); }
.tour-card::after { background: linear-gradient(180deg, transparent 22%, rgba(22, 22, 22, 0.72) 52%, rgba(22, 22, 22, 0.94) 80%); }
.tour-card-body { width: 100%; padding: 16px; }
.tour-card strong { font-size: 28px; }
.tour-card-meta { font-size: 12px; color: #ebe5da; }
.tour-card-cta {
  align-self: flex-start; margin-top: 10px; padding: 9px 16px; border-radius: 999px; background: linear-gradient(135deg, #d9bd86, #c8a76c 50%, #a98a53);
  color: #1d2224; font-size: 12.5px; font-weight: 500; letter-spacing: 0.06em;
}

/* ---------- Itineraries: numbered steps, easy to follow on the go ---------- */
.itinerary { margin-top: 4px; }
.itinerary li { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 0 0 16px; }
.itinerary li::before { display: none; }
.itinerary li:not(:last-child)::after { left: 14.5px; top: 32px; bottom: 2px; background: var(--line); }
.it-no { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #c8a76c; color: #1d2224; font-size: 14px; font-weight: 500; }
.it-text { min-width: 0; padding-top: 3px; }
.it-when { display: flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 2px; color: var(--ivory); font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.it-when svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.it-what { display: block; color: var(--ivory); font-size: 15px; line-height: 1.45; }
.itinerary li.optional .it-no { background: none; border: 1.5px dashed var(--gold); color: var(--gold); }
.itinerary li.optional .it-what { color: var(--muted); }
@media (max-width: 360px) { .itinerary li { grid-template-columns: 30px minmax(0, 1fr); } }
/* Season tabs on trips that change through the year */
.season-tabs { display: flex; gap: 4px; margin: 2px 0 10px; padding: 4px; border-radius: 999px; background: var(--ink-3); }
.season-tabs[hidden], .season-note[hidden] { display: none; }
.season-tabs button { flex: 1; min-height: 38px; padding: 0 8px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 500 14px/1.2 var(--sans); cursor: pointer; }
.season-tabs button[aria-pressed="true"] { background: #1d2224; color: #f6f1e7; }
.season-note { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid #c8a76c; background: rgba(200, 167, 108, 0.14); color: var(--ivory); font-size: 14px; line-height: 1.45; }

/* ---------- App layout: one screen at a time ---------- */
.off-screen { display: none !important; }
main { padding-bottom: calc(150px + var(--safe-b)); }
main > section.band, .xmas[hidden] ~ .experiences, .xmas[hidden] ~ .trip { background: none; }
main > section:not(.hero):not(.search):not(.home-menu) { margin-top: 0; padding-top: 22px; }
.mountains.band, .info.band { padding-left: 16px; padding-right: 16px; }
.tabbar { grid-template-columns: repeat(5, 1fr); }
.tab { font-size: 12px; }
.tab svg { width: 26px; height: 26px; }

/* Pick me up: always one tap away, just above the bar */
.float-pickup {
  position: fixed; z-index: 31; right: max(12px, calc(50vw - 268px)); bottom: calc(82px + var(--safe-b)); display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 16px 0 12px;
  border: 0; border-radius: 999px; background: linear-gradient(135deg, #d9bd86, #c8a76c 50%, #a98a53); color: #1d2224; font: 500 14px/1 var(--sans);
  box-shadow: 0 8px 22px rgba(5, 8, 9, 0.5); cursor: pointer;
}
.float-pickup svg { width: 24px; height: 24px; fill: none; stroke: #1d2224; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.float-pickup:active { transform: scale(.96); }

/* Home: short, starts from what the guest wants */
.hero { padding-bottom: 0; }
.hero .weather { margin-top: 26px; }
.hero-top { margin-bottom: 10px; }
.hero-hello { margin: 0 0 2px; }
.home-menu { padding: 26px 16px 0; }
.home-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.home-actions button {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; height: 92px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--ink-2); color: var(--ivory); font: 500 15.5px/1.2 var(--sans); text-align: left; cursor: pointer;
}
.home-actions svg { width: 28px; height: 28px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.home-actions button:active { transform: scale(.97); }
.home-more { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.home-more li { border-bottom: 1px solid var(--line); }
.home-more button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 0; border: 0; background: none; color: var(--ivory); text-align: left; font: inherit; cursor: pointer; }
.home-more .menu-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.home-more strong { font-size: 15px; font-weight: 500; }
.home-more small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-chev { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* "Trains & boats" is the longest tab label */
.tab[data-tab="trains"] span { font-size: 11px; letter-spacing: 0; }
html:lang(fr) .tab[data-tab="trains"] span { font-size: 10px; }

/* The landing page: lighter, so it's easier to read */
body[data-screen="home"] {
  --muted: #d4cdbf; --line: rgba(232, 222, 202, 0.2);
}
body[data-screen="home"] .hero-line, body[data-screen="home"] .hero-hello { color: #dcd5c7; }

/* Home boxes: each says what it opens */
.home-actions button {
  position: relative; height: auto; min-height: 126px; padding: 14px; gap: 12px; justify-content: flex-start;
  border: 1px solid rgba(200, 167, 108, 0.55); background: var(--ink-2); box-shadow: 0 4px 14px rgba(5, 8, 9, 0.22);
}
.home-actions svg:first-child { width: 42px; height: 42px; padding: 9px; border-radius: 12px; background: rgba(200, 167, 108, 0.18); stroke-width: 1.7; }
.home-label { display: flex; flex-direction: column; gap: 3px; padding-right: 10px; font-size: 16px; }
.home-label small { color: var(--muted); font-size: 12.5px; font-weight: 400; line-height: 1.3; }
.home-actions .home-chev { position: absolute; top: 14px; right: 10px; width: 18px; height: 18px; padding: 0; background: none; }

/* Home: the other sections matter too, so they read at a glance */
.home-more button { gap: 14px; padding: 15px 0; }
.home-more .menu-icon { flex-basis: 46px; height: 46px; border-radius: 14px; }
.home-more .menu-icon svg { width: 24px; height: 24px; }
.home-more strong { font-size: 18px; }
.home-more small { font-size: 14px; line-height: 1.35; white-space: normal; }
.home-more .home-chev { width: 20px; height: 20px; }
.home-label { font-size: 17px; }
.home-label small { font-size: 13px; }

/* All four Home boxes on the first screen, in their usual shape */
.hero { padding-top: 8px; }
.hero-top { margin-bottom: 6px; }
.hero h1 { font-size: 36px; line-height: 1.04; }
.hero-line { margin-top: 6px; font-size: 14px; line-height: 1.35; }
.hero .weather { margin-top: 12px; padding-top: 8px; padding-bottom: 8px; }
.home-menu { padding-top: 10px; }
.home-actions { gap: 8px; grid-auto-rows: 1fr; }
.home-actions button { min-height: 108px; padding: 11px 12px; gap: 7px; }
.home-actions svg:first-child { width: 34px; height: 34px; padding: 7px; border-radius: 10px; }
.home-label { padding-right: 0; font-size: 16px; }
.home-label small { font-size: 12.5px; }
.home-actions .home-chev { top: 12px; right: 10px; }

/* Pick me up folds to a round button */
.float-pickup { transition: padding .25s ease, gap .25s ease; }
.float-pickup span { max-width: 130px; overflow: hidden; white-space: nowrap; transition: max-width .25s ease, opacity .2s ease; }
.float-pickup.compact { gap: 0; padding: 0 12px; }
.float-pickup.compact span { max-width: 0; opacity: 0; }

/* Good to know on Home: slim, one fact at a time */
.home-tip { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 64px; margin-top: 8px; padding: 8px 12px 8px 14px; border: 1px solid rgba(200, 167, 108, 0.55); border-radius: 16px; background: rgba(200, 167, 108, 0.1); color: var(--ivory); text-align: left; font: inherit; cursor: pointer; }
.home-tip[hidden], .local-tips[hidden] { display: none; }
.home-tip-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.3; }
.home-tip-text small { color: var(--gold); font-size: 11.5px; letter-spacing: .03em; }
.home-tip-text strong { font-weight: 500; }
/* The full list at the top of Good to know */
.local-tips { margin: 0 0 14px; padding: 14px; border: 1px solid rgba(200, 167, 108, 0.45); border-radius: 18px; background: var(--ink-2); }
.local-tips .eyebrow { margin: 0 0 8px; }
.local-tips ul { list-style: none; margin: 0; padding: 0; }
.local-tips li { display: flex; flex-direction: column; gap: 1px; padding: 9px 0; border-top: 1px solid var(--line); }
.local-tips li:first-child { border-top: 0; padding-top: 0; }
.local-tips strong { color: var(--gold); font-size: 15.5px; font-weight: 500; }
.local-tips span { color: var(--ivory); font-size: 14.5px; line-height: 1.4; }

/* Landing page: the Good to know box stays quiet, the gold is for the boxes above */
.home-tip { border-color: var(--line); background: var(--ink-2); }
.home-tip-text small { color: var(--muted); }
.home-tip .home-chev { stroke: var(--muted); }

/* Route map on a day trip: small in the page, full screen on a tap */
.route-from { margin: -6px 0 10px; font-size: 14px; color: var(--muted); }
.route-slot { height: 210px; margin-bottom: 12px; }
.route-map { position: relative; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; background: #1b1e1f; isolation: isolate; }
.route-canvas { position: absolute; inset: 0; }
.route-canvas.maplibregl-map { position: absolute; }
.route-open {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: flex-end; padding: 10px 10px 24px;
  background: none; border: 0; cursor: pointer;
}
.route-open span { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-family: inherit; color: #161616; background: #c8a76c; }
.route-overlay { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #161616; animation: fade .2s both; }
.route-overlay[hidden] { display: none; }
.route-overlay .sheet-close { z-index: 3; top: calc(14px + var(--safe-t, 0px)); background: #161616; color: #f3efe6; border-color: rgba(243, 239, 230, .25); }
.route-big-slot { flex: 1; min-height: 0; }
.route-big-slot .route-map { border-radius: 0; }
.route-big-slot .route-open { display: none; }
.route-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 14px calc(12px + var(--safe-b)); background: #161616; scrollbar-width: none; }
.route-chips::-webkit-scrollbar { display: none; }
.route-chips button {
  flex: none; display: flex; align-items: center; gap: 7px; padding: 7px 12px 7px 7px; border-radius: 999px; font: inherit; font-size: 13px;
  color: #f3efe6; background: #242424; border: 1px solid rgba(243, 239, 230, .16); cursor: pointer;
}
.route-chips b, .route-pin b, .route-legend .no {
  display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; font-size: 13px; font-weight: 600; color: #161616; background: #c8a76c;
}
.route-chips .all { padding-left: 12px; }
.route-pin { display: flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; pointer-events: none; }
.route-pin b { border: 2px solid #161616; box-sizing: content-box; }
.route-pin span { display: none; padding: 2px 7px; border-radius: 6px; font-size: 12px; white-space: nowrap; color: #f3efe6; background: rgba(22, 22, 22, .86); }
.route-big-slot .route-pin span { display: block; }
.route-pin.far { visibility: hidden; }
.route-legend { list-style: none; margin: 0 0 12px; padding: 0; }
.route-legend li { position: relative; display: flex; gap: 11px; padding-bottom: 12px; }
.route-legend li:last-child { padding-bottom: 0; }
.route-legend li:not(:last-child)::before { content: ""; position: absolute; left: 11.5px; top: 26px; bottom: 2px; width: 1px; background: var(--line); }
.route-legend strong { display: block; font-size: 15px; font-weight: 500; line-height: 24px; }
.route-legend small { display: block; font-size: 13px; line-height: 1.4; color: var(--muted); }
.route-map .maplibregl-ctrl-attrib { padding: 1px 6px; font-size: 9px; line-height: 1.3; color: rgba(243, 239, 230, .7); background: rgba(22, 22, 22, .55); border-radius: 0 6px 0 0; }
.route-map .maplibregl-ctrl-attrib a { color: inherit; }
.route-map .maplibregl-ctrl-bottom-left .maplibregl-ctrl { margin: 0; }

/* Home boxes: solid gold icons, no outline, a little larger */
.home-actions button { min-height: 118px; padding: 12px 14px; gap: 9px; border-color: transparent; background: #242424; box-shadow: none; }
.home-actions svg:first-child { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--gold); stroke: #161616; stroke-width: 1.8; }
.home-label { font-size: 16.5px; }
.home-actions .home-chev { top: 14px; right: 11px; }

/* Location problem: the steps wrap inside the box and the switch stays beside them */
.hero-top .loc-card[data-help="true"] { flex-basis: 100%; flex-wrap: nowrap; align-items: flex-start; height: auto; }
.hero-top .loc-card[data-help="true"] .loc-text { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; overflow: visible; white-space: normal; gap: 3px; }
.hero-top .loc-card[data-help="true"] .loc-text small { display: block; overflow: visible; white-space: normal; text-overflow: clip; line-height: 1.4; }
.hero-top .loc-card[data-help="true"] #locBtn { flex: none; }

/* Location pill: city name with a small arrow opens the list; the switch stays on the right */
.hero-top .loc-card { cursor: pointer; }
.loc-pick { display: inline-flex; align-items: center; gap: 3px; min-height: 30px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.loc-pick svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-top .loc-card[data-state="live"] .loc-pick svg { stroke: #a8d8a2; }
.hero-top .loc-card[data-help="true"] .loc-pick { min-height: 22px; }
@media (max-width: 360px) {
  .hero-top .arr-open { min-width: 84px; }
}

/* Top row: a clear city selector with its switch, and a small Just landed */
.hero-top { flex-wrap: nowrap; align-items: center; }
.hero-top .loc-card { flex: 1 1 auto; max-width: none; min-height: 44px; gap: 8px; padding: 3px 6px 3px 11px; border-color: rgba(200, 167, 108, 0.45); }
.hero-top .loc-card[data-help="true"] { flex-wrap: nowrap; }
.hero-top:has(.loc-card[data-help="true"]) { flex-wrap: wrap; }
.hero-top .loc-text { flex: 1 1 auto; min-width: 0; }
.loc-pick { flex: 1 1 auto; justify-content: flex-start; gap: 7px; min-width: 0; text-align: left; }
.loc-pick-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.loc-hint { font-size: 11px; color: var(--gold); white-space: nowrap; }
.hero-top .loc-pick strong { font-size: 15px; font-weight: 500; white-space: nowrap; }
.loc-chev { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); }
.loc-chev svg, .hero-top .loc-card[data-state="live"] .loc-chev svg { width: 13px; height: 13px; fill: none; stroke: #161616; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero-top .arr-open { flex: 0 0 auto; min-width: 0; min-height: 30px; padding: 0 10px; gap: 4px; font-size: 11.5px; color: var(--muted); background: none; border-color: var(--line); }
.hero-top .arr-open span { overflow: visible; }
.hero-top .arr-open svg { display: block; width: 12px; height: 12px; }
@media (max-width: 360px) {
  .hero-top .arr-open { min-width: 0; padding: 0 8px; }
  .hero-top .arr-open svg { display: none; }
}

/* Greeting and city read as one line of thought, the description follows softly */
.hero #cityTitle { margin-top: 8px; margin-bottom: 0; }
.hero #cityLine { margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--muted); }
.hero .weather { margin-top: 12px; }

/* Pill in two parts: choose a city on the left, live location with its switch on the right */
.hero-top .loc-card { padding: 4px 8px 4px 13px; gap: 9px; min-height: 48px; }
.loc-live { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-left: 9px; border-left: 1px solid var(--line); cursor: pointer; }
.loc-live-label { display: flex; align-items: center; gap: 2px; font-size: 10.5px; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.loc-live .loc-icon { flex: 0 0 12px; width: 12px; height: 12px; }
.loc-live .loc-icon svg { width: 12px; height: 12px; }
.loc-live .loc-dot { width: 6px; height: 6px; border-width: 1px; right: -1px; top: -1px; }
.loc-live .loc-switch { width: 38px; height: 22px; }
.loc-live .loc-knob { top: 2px; left: 2px; width: 18px; height: 18px; }
.loc-live .loc-switch[aria-checked="true"] .loc-knob { transform: translateX(16px); }
.hero-top .loc-card[data-state="live"] .loc-live-label { color: #a8d8a2; }
@media (max-width: 360px) {
  .hero-top .loc-card { padding-left: 10px; gap: 6px; }
  .loc-live { padding-left: 6px; }
  .loc-live-label { font-size: 9.5px; }
  .loc-live .loc-icon { display: none; }
  .loc-hint { font-size: 10px; }
  .hero-top .loc-pick strong { font-size: 14px; }
  .loc-pick { gap: 4px; }
}
.loc-live .loc-dot { display: none; }
.hero-top .loc-card { min-height: 46px; padding-top: 3px; padding-bottom: 3px; }
.hero #cityTitle { margin-top: 6px; }

/* Top of Home: a light row with no boxes, and the city in the heading is the dropdown */
.hero-top { flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 10px; margin-bottom: 4px; }
.hero-top .loc-card, .hero-top .loc-card[data-state], .hero-top .loc-card[data-help="true"] {
  flex: 0 1 auto; display: block; max-width: none; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: default;
}
.loc-live { flex-direction: row; align-items: center; gap: 8px; min-height: 40px; padding: 0; border: 0; }
.loc-live-label { gap: 5px; font-size: 13px; color: var(--ivory); }
.hero-top .loc-card[data-state="live"] .loc-live-label { color: var(--ivory); }
.loc-live .loc-icon { flex: 0 0 15px; display: grid; width: 15px; height: 15px; color: var(--gold); }
.loc-live .loc-icon svg { width: 15px; height: 15px; }
.loc-live .loc-switch { width: 36px; height: 21px; }
.loc-live .loc-knob { top: 2px; left: 2px; width: 17px; height: 17px; }
.loc-live .loc-switch[aria-checked="true"] .loc-knob { transform: translateX(15px); }
#locDetail { display: none; }
.hero-top .loc-card[data-help="true"] { flex-basis: 100%; }
.hero-top .loc-card[data-help="true"] #locDetail { display: block; margin: 0 0 6px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.hero-top .arr-open { flex: 0 0 auto; min-height: 40px; padding: 0; gap: 4px; font-size: 12.5px; color: var(--muted); background: none; border: 0; border-radius: 0; }
.hero-top .arr-open svg { display: block; width: 13px; height: 13px; }

.hero #cityTitle { margin-top: 8px; }
.hero-city { display: inline-flex; align-items: baseline; gap: 7px; padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: inherit; text-align: left; cursor: pointer; }
.hero-city svg { align-self: center; flex: none; width: 21px; height: 21px; margin-top: 5px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero-hint { display: block; margin: 3px 0 0; padding: 0; border: 0; background: none; font: 400 12.5px/1.3 var(--sans); color: var(--gold); text-align: left; cursor: pointer; }
.hero #cityLine { margin-top: 7px; }
html[lang="ko"] .hero h1, html[lang^="zh"] .hero h1 { font-size: 32px; line-height: 1.12; }
@media (max-width: 360px) {
  .hero-top .arr-open svg { display: none; }
  .loc-live-label { font-size: 12px; }
  .loc-live .loc-icon { display: grid; }
}
.hero-top { margin-bottom: 2px; }
.hero #cityLine { margin-top: 6px; }
.hero .weather { margin-top: 10px; }
.hero-top .arr-open { min-height: 28px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; }

/* Greeting and city on one line */
.hero #cityTitle { white-space: nowrap; line-height: 1.15; margin-top: 12px; }
html[lang="ko"] .hero h1, html[lang^="zh"] .hero h1 { line-height: 1.15; }
.hero-city { gap: .16em; vertical-align: baseline; }
.hero-city svg { align-self: center; width: .58em; height: .58em; margin-top: .1em; stroke-width: 1.7; }
.hero-hint { margin-top: 4px; }
.hero #cityLine { margin-top: 10px; }
.hero .weather { margin-top: 16px; }
.home-actions button { min-height: 124px; }
.hero-hint { width: fit-content; margin-top: 1px; white-space: nowrap; }

/* The city is a slim gold pill inside the heading: clearly tappable, no extra line needed */
.hero-city { align-items: center; gap: .14em; padding: .02em .28em .06em .34em; border: 1px solid rgba(200, 167, 108, 0.5); border-radius: 999px; }
.hero-city svg { align-self: center; margin-top: .06em; }
.hero #cityLine { margin-top: 9px; }
.hero-city { padding: 0; border: 0; border-radius: 0; gap: .16em; }

/* City dropdown: a thin gold underline and a solid gold arrow, like the icons in the boxes below */
.hero-city { gap: .22em; }
.hero-city em { padding-bottom: .02em; border-bottom: 1px solid rgba(200, 167, 108, 0.65); line-height: 1.05; }
.hero-city svg { box-sizing: border-box; width: .72em; height: .72em; margin-top: .08em; padding: .09em; border-radius: 50%; background: var(--gold); stroke: #161616; stroke-width: 2.6; }
.hero-city em { padding-bottom: 0; border-bottom: 0; line-height: inherit; }

/* Walking map: city tabs on the left, the live location switch on the right */
.tour-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 14px; }
.tour-bar .tour-switch { flex: 0 1 auto; min-width: 0; }
.tour-live { flex: none; }
.tour-live .loc-live-label { font-size: 12.5px; }
.tour-live[data-state="finding"] .loc-switch { background: rgba(76, 175, 99, 0.55); }
@media (max-width: 360px) {
  .tour-live .loc-icon { display: none; }
  .tour-live .loc-live-label { font-size: 11.5px; }
}

/* More room under the top row, before the greeting */
.hero-top { margin-bottom: 12px; }
.hero #cityTitle { margin-top: 12px; }
.hero #cityTitle { margin-top: 26px; }

/* Good to know: deep sage green, set apart from the four boxes */
.home-tip { background: #23302a; border-color: rgba(168, 196, 166, 0.28); }
.home-tip small, #homeTipTitle { color: #a8c4a6; }
.home-tip strong, #homeTipTerm { color: #eef2ea; }
.home-tip-text, #homeTipText { color: #e2e8dd; }
.home-tip .home-chev { stroke: #a8c4a6; }

/* Every inner page starts with a small way back to Home */
.screen-back { display: inline-flex; align-items: center; gap: 3px; min-height: 34px; margin: 10px 0 0 14px; padding: 0 13px 0 8px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ivory); font: 400 13px/1 var(--sans); cursor: pointer; }
.screen-back svg { width: 15px; height: 15px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Phones: no description under the greeting, so the top stays calm */
@media (max-width: 767px) {
  .hero #cityLine { display: none; }
  .hero .weather { margin-top: 22px; }
}

/* A short note on a day trip's photo, such as summer-only opening */
.trip-badge { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 5px 10px; border-radius: 999px; background: rgba(22, 22, 22, 0.82); color: #f3efe6; font: 500 12px/1.2 var(--sans); }
.trip-badge[hidden] { display: none; }
.sight-hero .trip-badge { top: auto; right: auto; left: 12px; bottom: 12px; }

/* Day trips: search box with suggestions */
.trip-search { position: relative; z-index: 12; margin: 0 22px 12px; }
.trip-search > svg { position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.trip-search input { box-sizing: border-box; width: 100%; height: 46px; padding: 0 14px 0 42px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); color: var(--ivory); font: 400 16px/1.2 var(--sans); -webkit-appearance: none; appearance: none; }
.trip-search input::placeholder { color: var(--muted); }
.trip-search input:focus { outline: 0; border-color: rgba(200, 167, 108, 0.6); }
.trip-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.trip-search-list { top: 52px; left: 0; right: 0; }
.trip-search-list .suggest-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.trip-search-list strong { font-weight: 500; font-size: 15.5px; }
.trip-search-list small { font-size: 12.5px; color: var(--muted); }
.trip-search-none { padding: 12px 10px; font-size: 14px; color: var(--muted); }

/* Inside a day trip: the Swiss Travel Pass answer stands out */
.sight-sheet .pass-badge { display: flex; align-items: center; gap: 12px; margin: 12px 0 16px; padding: 12px 14px; border: 1px solid #e0cda6; border-radius: 16px; background: #f6ecd8; color: #5f4718; }
.sight-sheet .pass-badge.covered { border-color: #bcd9b5; background: #e3f1df; color: #24561f; }
.pass-mark { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #a9812f; color: #fff; font: 600 18px/1 var(--sans); }
.pass-badge.covered .pass-mark { background: #3f8a37; }
.pass-words { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pass-words small { font-size: 12.5px; opacity: .85; }
.pass-words strong { font-size: 18px; font-weight: 600; line-height: 1.2; }

/* The pass answer: one slim, quiet line */
.sight-sheet .pass-badge { gap: 8px; margin: 10px 0 14px; padding: 7px 12px 7px 8px; border: 0; border-radius: 12px; background: rgba(169, 129, 47, 0.1); color: #5f4718; }
.sight-sheet .pass-badge.covered { background: rgba(63, 138, 55, 0.09); color: #2f5f2a; }
.pass-mark { width: 20px; height: 20px; font-size: 11.5px; font-weight: 600; }
.pass-words { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 7px; }
.pass-words small { font-size: 13px; opacity: .8; }
.pass-words strong { font-size: 14px; font-weight: 500; line-height: 1.35; }

/* Smallest phones: Live location and Just landed stay on one line */
@media (max-width: 360px) {
  .hero-top .arr-open { padding: 0 7px; font-size: 11px; }
  .hero-top .loc-live { gap: 5px; }
  .hero-top .loc-live-label { gap: 3px; font-size: 11.5px; }
  .hero-top .loc-live .loc-switch { width: 32px; height: 19px; }
  .hero-top .loc-live .loc-knob { width: 15px; height: 15px; }
  .hero-top .loc-live .loc-switch[aria-checked="true"] .loc-knob { transform: translateX(13px); }
}

/* Phones: more room between the greeting and the weather */
@media (max-width: 767px) {
  .hero .weather { margin-top: 42px; }
}

/* The Swiss map under the logo */
.swiss-pick { margin: 26px 16px 28px; text-align: center; }
.swiss-pick h2 { margin: 0 0 12px; font: 500 25px/1.2 var(--serif); color: var(--ivory); }
.swiss-map { max-width: 440px; margin: 0 auto; }
.swiss-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.swiss-lakes { fill: #24383b; stroke: rgba(200, 167, 108, 0.35); stroke-width: 1; }
.swiss-border { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linejoin: round; }
.swiss-pin { cursor: pointer; outline: 0; -webkit-tap-highlight-color: transparent; }
.swiss-pin .hit { fill: transparent; }
.swiss-pin .ring { fill: rgba(200, 167, 108, 0.24); }
.swiss-pin .dot { fill: var(--gold); stroke: #161616; stroke-width: 3; }
.swiss-pin text { font: 500 38px var(--sans); fill: #f3efe6; paint-order: stroke; stroke: #161616; stroke-width: 9px; stroke-linejoin: round; }
.swiss-pin.current text { fill: var(--gold); }
.swiss-pin.current .ring { fill: rgba(200, 167, 108, 0.42); }
.swiss-pin:focus-visible .ring { stroke: var(--ivory); stroke-width: 3; }
.swiss-pin .ring { transform-box: fill-box; transform-origin: center; animation: swissPulse 2.6s ease-in-out infinite; }
@keyframes swissPulse { 50% { transform: scale(1.25); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .swiss-pin .ring { animation: none; } }
.swiss-credit { margin: 8px 0 0; font-size: 10px; color: var(--muted); opacity: .75; }

/* Privacy page and the small links to it */
.privacy-link { display: block; margin: 12px auto 0; padding: 6px 10px; border: 0; background: none; color: var(--muted); font: 400 12.5px/1.2 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.privacy-note { margin: 10px 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.privacy-note button { padding: 0; border: 0; background: none; color: var(--gold); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.privacy-backdrop { z-index: 70; }
.privacy-sheet { z-index: 71; }
.privacy-sheet h2 { margin: 6px 44px 4px 0; font: 500 32px/1.1 var(--serif); }
.privacy-updated { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.privacy-intro { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.privacy-body h3 { margin: 18px 0 5px; font-size: 15.5px; font-weight: 600; }
.privacy-body p { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-line; color: var(--muted); }

/* Our places: five equal boxes, then two places on every row */
.places-block { --c: var(--gold); }
.places-block .tile, .places-block .place-row { --c: var(--gold); }
.places-block .tiles {
  display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 6px; flex-wrap: nowrap; overflow: visible; margin: 12px 16px 10px; padding: 0;
}
.places-block .tiles .tile, .places-block .tiles .tile:active, .places-block .tiles .tile[aria-pressed] {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; width: auto; min-height: 66px; padding: 8px 2px;
  border: 1px solid transparent; border-radius: 13px; background: #242424; color: #c9c2b4; font-size: 11.5px; line-height: 1.15; text-align: center; box-shadow: none;
}
.places-block .tiles .tile span { white-space: normal; overflow-wrap: anywhere; }
.places-block .tiles .tile svg, .places-block .tiles .tile[aria-pressed="true"] svg { width: 21px; height: 21px; stroke: var(--gold); }
.places-block .tiles .tile[aria-pressed="true"] { border-color: var(--gold); background: rgba(200, 167, 108, 0.13); color: #f3efe6; font-weight: 500; }
.spots.place-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; overflow: visible; margin: 0 16px; padding: 0; scroll-snap-type: none;
}
.spots.place-list .empty { grid-column: 1 / -1; }
.spots.place-list .place-row {
  position: relative; display: block; flex: none; width: auto; min-width: 0; min-height: 118px; margin: 0; padding: 0; border: 0; border-radius: 14px; background: #242424; overflow: hidden;
}
.spots.place-list .row-main { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; height: 100%; min-height: 118px; padding: 10px 11px 11px; border: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer; box-sizing: border-box; }
.spots.place-list .row-icon { width: 32px; height: 32px; flex: none; border-radius: 10px; background: rgba(200, 167, 108, 0.15); color: var(--gold); }
.spots.place-list .row-icon svg { width: 18px; height: 18px; stroke: var(--gold); }
.spots.place-list .row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%; }
.spots.place-list .row-text strong { font-size: 14.5px; font-weight: 500; line-height: 1.2; white-space: normal; }
.spots.place-list .row-tag { display: block; font-size: 12.5px; line-height: 1.25; color: var(--gold); white-space: normal; }
.spots.place-list .row-text small { font-size: 12px; line-height: 1.3; color: var(--muted); white-space: normal; }
.spots.place-list .row-save { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; margin: 0; padding: 0; display: grid; place-items: center; background: none; border: 0; }
.spots.place-list .row-chev { display: none; }
.places-block .places-info { margin: 10px 16px 8px; }
.places-block .places-more { margin: 10px 16px 0; width: calc(100% - 32px); }

/* Our places: one soft color per category, used only for icons, tags and the selected box */
.places-block [data-cat="picks"] { --c: #c8a76c; }
.places-block [data-cat="dine"] { --c: #d39a82; }
.places-block [data-cat="stay"] { --c: #a5ba9c; }
.places-block [data-cat="shop"] { --c: #c9a3ad; }
.places-block [data-cat="see"] { --c: #93b5ad; }
.places-block .tiles .tile svg, .places-block .tiles .tile[aria-pressed="true"] svg { stroke: var(--c); }
.places-block .tiles .tile[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.spots.place-list .row-icon { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.spots.place-list .row-icon svg { stroke: var(--c); }
.spots.place-list .row-tag { color: var(--gold); }

/* Place cards: larger names and details */
.spots.place-list .row-text strong { font-size: 16.5px; line-height: 1.2; }
.spots.place-list .row-tag { font-size: 14px; line-height: 1.25; }
.spots.place-list .row-text small { font-size: 13.5px; line-height: 1.3; }

/* Saved day trips: a heart on each card and in the trip page */
.dtrip { position: relative; }
.trip-save { position: absolute; top: 8px; right: 8px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(22, 22, 22, 0.62); cursor: pointer; }
.trip-save svg { width: 21px; height: 21px; fill: none; stroke: #f3efe6; stroke-width: 1.8; stroke-linejoin: round; }
.trip-save[aria-pressed="true"] svg { fill: var(--gold); stroke: var(--gold); }
.dtrip .trip-badge { top: 56px; }
.sight-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sight-title-row h2 { min-width: 0; }
.trip-save.in-sheet { position: static; flex: none; width: 42px; height: 42px; background: transparent; border: 1px solid var(--line); }
.trip-save.in-sheet svg { stroke: var(--ivory); }
.trip-save.in-sheet[aria-pressed="true"] svg { fill: var(--gold); stroke: var(--gold); }
.trip-theme[data-theme="saved"] { color: var(--gold); }

/* The viewpoints map: no skipping and no walk details */
.tourview.views #storySkip, .tourview.views #walkInfo { display: none; }
.tour-switch[hidden] { display: none; }

/* Saved day trips, listed under the cards */
.saved-trips { margin: 18px 16px 0; padding: 14px; border-radius: 18px; background: #1f1f1f; border: 1px solid rgba(200, 167, 108, 0.35); }
.saved-trips[hidden] { display: none; }
.saved-trips-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 500 16px/1.2 var(--sans); color: var(--ivory); }
.saved-trips-title svg { width: 19px; height: 19px; fill: var(--gold); stroke: var(--gold); stroke-width: 1.6; }
.saved-trips-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.saved-trips-list li { display: flex; align-items: center; gap: 6px; }
.saved-trip-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px; border: 0; border-radius: 14px; background: #262626; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.saved-trip-open img { flex: none; width: 58px; height: 58px; border-radius: 10px; object-fit: cover; background: #2d2b27; }
.saved-trip-open span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.saved-trip-open strong { font-size: 15.5px; font-weight: 500; }
.saved-trip-open small { font-size: 12.5px; color: var(--muted); }
.saved-trip-chev { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-right: 4px; }
.trip-save.in-list { position: static; flex: none; width: 40px; height: 40px; background: transparent; }
.trip-save.in-list svg { fill: var(--gold); stroke: var(--gold); }
/* Phones: the kind switch always shows whole words */
@media (max-width: 430px) {
  .trip-theme { text-overflow: clip; padding: 0 2px; font-size: 13.5px; }
  .trip-theme:not([data-theme="all"])::before { width: 6px; height: 6px; margin-right: 4px; }
  .trip-theme[data-theme="all"] { padding: 0 12px; }
}
@media (max-width: 360px) {
  .trip-theme { font-size: 12.5px; }
  .trip-theme:not([data-theme="all"])::before { display: none; }
}
/* Saving a trip: the photo glides down, the new row glows once */
.save-ghost { position: fixed; z-index: 60; border-radius: 14px; object-fit: cover; pointer-events: none; box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(200,167,108,.6); will-change: transform, opacity; }
@keyframes savedGlow {
  0% { box-shadow: 0 0 0 0 rgba(200,167,108,0); background: #262626; }
  35% { box-shadow: 0 0 0 1px rgba(200,167,108,.75), 0 0 18px rgba(200,167,108,.25); background: #2b2924; }
  100% { box-shadow: 0 0 0 0 rgba(200,167,108,0); background: #262626; }
}
.saved-trips-list li.just-saved .saved-trip-open { animation: savedGlow 1.6s ease-out; }
.saved-trips-list li.just-saved { animation: savedIn .5s ease-out; }
@keyframes savedIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* More breathing room between the weather and the four cards */
.home-menu { padding-top: 24px; }

/* Live summit webcams: a small window in each row ... */
.mtn-row { grid-template-columns: 60px minmax(0, 1fr) 70px 70px; }
.mtn-cam { position: relative; width: 60px; height: 46px; padding: 0; border: 0; border-radius: 11px; overflow: hidden; background: #2a2a2a; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(235, 229, 218, 0.12); }
.mtn-cam img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .4s ease; }
.mtn-cam.loading img { opacity: 0; }
.mtn-cam.loading { background: linear-gradient(100deg, #262626 30%, #313131 50%, #262626 70%) 0 0 / 200% 100%; animation: camShimmer 1.4s linear infinite; }
@keyframes camShimmer { to { background-position: -200% 0; } }
.mtn-cam > .mtn-icon { display: none; }
.mtn-cam.failed { box-shadow: none; background: none; cursor: default; pointer-events: none; }
.mtn-cam.failed img, .mtn-cam.failed .mtn-cam-live { display: none; }
.mtn-cam.failed > .mtn-icon { display: grid; width: 46px; height: 46px; }
.mtn-cam-live { position: absolute; left: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: #e2675c; box-shadow: 0 0 0 2px rgba(22, 22, 22, 0.55); animation: camPulse 2.4s ease-in-out infinite; }
@keyframes camPulse { 50% { opacity: .45; } }
.mtn-cam:active { transform: scale(.96); }
@media (max-width: 360px) {
  .mtn-row { grid-template-columns: 50px minmax(0, 1fr) 64px 64px; gap: 6px; padding: 9px 10px; }
  .mtn-cam { width: 50px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .mtn-cam-live, .mtn-cam.loading { animation: none; } }

/* ... and a big view you can swipe around */
.cam-view { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(10, 10, 10, 0); transition: background .25s ease; }
.cam-view[hidden] { display: none; }
.cam-view.open { background: rgba(10, 10, 10, 0.72); }
.cam-sheet { width: 100%; max-width: 760px; max-height: 92vh; overflow: auto; padding: 18px 0 calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #161616; border-top: 1px solid rgba(200, 167, 108, 0.35); transform: translateY(24px); opacity: 0; transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .25s ease; }
.cam-view.open .cam-sheet { transform: none; opacity: 1; }
@media (min-width: 761px) { .cam-view { align-items: center; } .cam-sheet { border-radius: 22px; border: 1px solid rgba(200, 167, 108, 0.35); } }
.cam-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 18px 14px; }
.cam-kicker { position: relative; margin: 0; padding-left: 14px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.cam-kicker .mtn-cam-live { left: 0; top: 4px; box-shadow: none; }
.cam-title { margin: 4px 0 2px; font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.1; color: var(--ivory); }
.cam-time { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--muted); }
.cam-close { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #222; color: var(--ivory); cursor: pointer; }
.cam-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cam-pano { height: min(54vh, 340px); overflow-x: auto; overflow-y: hidden; background: #222; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
.cam-pano::-webkit-scrollbar { display: none; }
.cam-pano img { display: block; height: 100%; width: auto; max-width: none; }
.cam-pano:not(.is-pano) { height: auto; overflow: hidden; }
.cam-pano:not(.is-pano) img { width: 100%; height: auto; }
.cam-hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 18px 0; font-size: 13px; color: var(--muted); }
.cam-hint[hidden] { display: none; }
.cam-hint svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cam-site { display: block; margin: 12px 18px 0; text-align: center; font-size: 13px; color: var(--gold); text-decoration: none; }
@media (min-width: 361px) {
  .mtn-row { grid-template-columns: 68px minmax(0, 1fr) 70px 70px; }
  .mtn-cam { width: 68px; height: 54px; }
}
.mtn-cam .mtn-cam-live { left: 6px; top: 6px; width: 8px; height: 8px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
@media (max-width: 360px) {
  .mtn-row { grid-template-columns: 44px minmax(0, 1fr) 60px 60px; gap: 6px; padding: 9px 9px; }
  .mtn-cam { width: 44px; height: 40px; border-radius: 9px; }
  .mtn-name strong { font-size: 13.5px; hyphens: auto; overflow-wrap: break-word; }
  .mtn-row .mtn-temp { font-size: 15px; }
}
/* Summits without a working webcam keep the mountain icon, centred in the same column */
.mtn-row > .mtn-icon { justify-self: center; width: 44px; height: 44px; }
.mtn-cam.failed { display: grid; place-items: center; }
.mtn-cam.failed > .mtn-icon { width: 44px; height: 44px; }
@media (max-width: 360px) { .mtn-row > .mtn-icon, .mtn-cam.failed > .mtn-icon { width: 38px; height: 38px; } }

/* Summit rows with webcams: three columns only, so the temperature sits on the right edge;
   slightly bigger text now that the rows are taller. */
.mtn-row { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; padding: 12px 16px 12px 12px; }
.mtn-cam { width: 72px; height: 56px; }
.mtn-row > .mtn-icon, .mtn-cam.failed > .mtn-icon { width: 48px; height: 48px; }
.mtn-row .mtn-name strong { font-size: 17px; }
.mtn-row .mtn-facts { font-size: 13.5px; gap: 2px 10px; }
.mtn-row .mtn-temp { font-size: 18px; font-weight: 600; }
.mtn-row .mtn-day { font-size: 12.5px; padding: 4px 10px; }
.mtn-now { min-width: 84px; gap: 7px; }
@media (max-width: 360px) {
  .mtn-row { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px 10px 10px; }
  .mtn-cam { width: 52px; height: 44px; }
  .mtn-row > .mtn-icon, .mtn-cam.failed > .mtn-icon { width: 40px; height: 40px; }
  .mtn-row .mtn-name strong { font-size: 15px; }
  .mtn-row .mtn-facts { font-size: 12.5px; gap: 1px 8px; }
  .mtn-row .mtn-temp { font-size: 16px; }
  .mtn-row .mtn-day { font-size: 11.5px; padding: 3px 8px; }
  .mtn-now { min-width: 0; }
}

/* Boat pier map: where to board, right under the pier name */
.pier-box { margin: 4px 0 12px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #1b1e1f; }
.pier-map { position: relative; height: 170px; isolation: isolate; }
.pier-map .maplibregl-ctrl-attrib { padding: 1px 6px; font-size: 9px; line-height: 1.3; color: rgba(243, 239, 230, .7); background: rgba(22, 22, 22, .55); border-radius: 0 6px 0 0; }
.pier-map .maplibregl-ctrl-attrib a { color: inherit; }
.pier-pin { min-width: 24px; height: 24px; padding: 0 6px; display: grid; place-items: center; border-radius: 12px; background: #161616; color: var(--gold); border: 1.5px solid var(--gold); font: 600 12px/1 var(--sans); transition: transform .25s ease, background .25s ease, color .25s ease; }
.pier-pin.on { z-index: 2; background: var(--gold); color: #161616; transform: scale(1.3); box-shadow: 0 0 0 5px rgba(200, 167, 108, .28); }
.pier-landmark { padding: 2px 8px; border-radius: 6px; background: rgba(22, 22, 22, .82); color: var(--ivory); font-size: 11px; white-space: nowrap; }
.pier-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px 9px 12px; background: #1f1f1f; }
.pier-hint { font-size: 12px; color: var(--muted); line-height: 1.3; }
.pier-walk { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(200, 167, 108, .16); color: var(--gold); font-size: 13px; font-weight: 500; text-decoration: none; }
.pier-walk svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#boatList li.dep { cursor: pointer; }
#boatList li.dep.chosen .dep-pl { background: var(--gold); }
#boatList li.dep.chosen .dep-pl small, #boatList li.dep.chosen .dep-pl strong { color: #161616; }


/* Swiss Travel Pass checker: an entry card under the day trips, and a sheet */
.stp-mark { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(200, 167, 108, 0.16); color: var(--gold); border: 1px solid rgba(200, 167, 108, 0.5); font: 600 18px/1 var(--sans); }
.stp-open { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 14px 16px 0; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--ink-2); color: var(--ivory); font: inherit; text-align: left; cursor: pointer; }
.stp-open-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stp-open-text strong { font-size: 15.5px; font-weight: 500; }
.stp-open-text small { font-size: 13px; color: var(--muted); }
.stp-open .home-chev { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stp-kicker { display: flex; align-items: center; gap: 8px; padding-left: 0; }
.stp-kicker .stp-mark { width: 18px; height: 18px; font-size: 13px; border-radius: 4px; }
.stp-body { padding: 0 18px; }
.stp-label { margin: 6px 0 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stp-days { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.stp-days button { flex: 1 0 auto; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ivory); font: inherit; font-size: 14px; cursor: pointer; }
.stp-days button[aria-pressed="true"] { background: var(--ivory); color: #161616; border-color: var(--ivory); font-weight: 500; }
.stp-trips { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.stp-trips li + li { border-top: 1px solid var(--line); }
.stp-trips label, .stp-airport { display: flex; align-items: center; gap: 10px; padding: 11px 12px; cursor: pointer; }
.stp-trips input, .stp-airport input { flex: none; width: 20px; height: 20px; accent-color: var(--gold); }
.stp-trip-name { flex: 1; min-width: 0; font-size: 15px; }
.stp-trips small { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.stp-airport { margin-top: 8px; padding-left: 12px; font-size: 14px; color: var(--ivory); }
.stp-result { margin-top: 14px; padding: 14px; border-radius: 16px; background: #1f1f1f; border: 1px solid rgba(200, 167, 108, 0.35); }
.stp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14px; color: var(--muted); }
.stp-row strong { font-size: 18px; font-weight: 600; color: var(--ivory); white-space: nowrap; }
.stp-verdict { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.4; color: var(--ivory); }
.stp-verdict.yes { color: #a8d8a2; }
.stp-verdict.even { color: #e2c891; }
.stp-verdict.no { color: #e8b0a8; }
.stp-note { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
/* The answer stays in view at the bottom while the guest ticks trips */
.stp-result { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); z-index: 2; margin: 14px -18px 0; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; border: 0; border-top: 1px solid rgba(200, 167, 108, 0.45); background: #1f1f1f; box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.45); }
.stp-verdict { margin-top: 8px; padding-top: 8px; font-size: 14px; }
/* Restaurant photos: the owner's credit on the photo */
.place-photo { position: relative; }
.place-photo .photo-credit { padding: 1px 6px; border-radius: 6px; background: rgba(15, 18, 19, 0.45); color: rgba(255, 255, 255, 0.85); text-shadow: none; font-size: 10px; }
/* Pass price under each day choice */
.stp-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.stp-days button { min-height: 54px; padding: 6px 2px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1.15; }
.stp-days button span { font-size: 14px; }
.stp-days button small { font-size: 11.5px; color: var(--gold); white-space: nowrap; }
.stp-days button[aria-pressed="true"] small { color: #6b5323; font-weight: 600; }
.stp-link { margin: 14px 0 4px; padding: 12px; border-radius: 999px; background: linear-gradient(135deg, #d8bc84, #b8955a); color: #161616; font-size: 14.5px; font-weight: 500; }
@media (max-width: 360px) { .stp-days button span { font-size: 12.5px; } .stp-days button small { font-size: 10.5px; } }
/* Pass checker in Good to know */
.stp-open-info { width: 100%; margin: 0 0 12px; }
/* Swiss flag, drawn in outline: no red, in the guide's gold */
.stp-mark { width: 34px; height: 34px; border: 0; border-radius: 10px; background: rgba(200, 167, 108, 0.13); }
.stp-mark svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linejoin: round; }
.stp-kicker .stp-mark { width: 20px; height: 20px; border-radius: 0; background: none; }
.stp-kicker .stp-mark svg { width: 18px; height: 18px; }
.stp-open > .stp-mark { width: 38px; height: 38px; }
.stp-open > .stp-mark svg { width: 26px; height: 26px; }
/* Webcam credits: a small © on each window, the full owner name in the big view */
.mtn-cam-copy { position: absolute; right: 4px; bottom: 3px; z-index: 1; font-size: 10px; line-height: 1; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); pointer-events: none; }
.mtn-cam.failed .mtn-cam-copy { display: none; }
.cam-pano-wrap { position: relative; }
.cam-credit { right: 10px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(15, 18, 19, 0.6); color: rgba(255, 255, 255, 0.92); text-shadow: none; font-size: 11px; }