/* YuleFinder — "Christmas red" theme (design A, owner pick 2026-10-01): the coming-soon page's
   velvet red and pine boughs around the chrome, cream paper cards with dark ink, gold trim,
   and the map left a night blue so the pins glow. Built for older eyes and small screens:
   16px base type, high contrast everywhere, 44px targets, decoration kept to the edges, and
   every bar sized with min-height so browser zoom and big fonts never clip anything.
   Dependency-free (Leaflet vendored in lib/). */
/* The hidden attribute always wins over a component's display rule. */
[hidden] { display: none !important; }
:root {
  --velvet: #4a0b16;        /* rails: toolbar, list, footer */
  --velvet2: #7a1424;       /* header top */
  --velvet3: #2b0710;       /* deepest */
  --paper: #fff7ec;         /* cards, panels */
  --paper2: #f3e6d2;        /* tags on paper */
  --inset: #f9eedd;         /* boxes, rows, chips and fields ON paper: a deeper cream, never white
                               (owner, 2026-10-01: white beside the beige looked wrong) */
  --ink: #2a1a12;           /* text on paper */
  --ink-dim: #6b4423;       /* secondary text on paper (6.8:1 on paper) */
  --cream: #fff7ec;         /* text on velvet */
  --cream-dim: #f3d3d6;     /* secondary text on velvet (11:1 on velvet) */
  --gold: #ffc857;
  --gold-ink: #7a4a10;      /* text on a gold tint */
  --red: #a3243a;           /* buttons, links on paper (6.3:1 on paper) */
  --berry: #c8324a;
  --green: #2f7d4f;
  --frost: #9fd8ff;
  --night: #071226;
  --line-paper: rgba(58,9,18,.16);
  --line-velvet: rgba(255,200,87,.35);
  --radius: 14px;
  --shadow: 0 14px 34px rgba(0,0,0,.4);
  --sans: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --topH: 68px;
  --toolH: 56px;
  /* the brand snowglobe as a map pin: dome, base, warm lantern dot, tail tip at bottom-centre
     of the 40x46 box so the Leaflet anchor maths holds ('#' is %23 in a data: URI) */
  --pin-globe: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 46"><path d="M14 34L20 44L26 34Z" fill="%236b4423" stroke="%233a2410" stroke-width="1.2"/><path d="M9 29H31L33 35H7Z" fill="%236b4423" stroke="%233a2410" stroke-width="1"/><rect x="9" y="29" width="22" height="2" fill="%23ffc857"/><circle cx="20" cy="16" r="13" fill="%231c2f66" stroke="%23f7f9ff" stroke-width="1.6"/><path d="M8.5 21C14 18 26 18 31.5 21V27H8.5Z" fill="%23f7f9ff"/><path d="M20 7L26.5 20.5H13.5Z" fill="%232f7d4f"/><circle cx="20" cy="5.6" r="1.9" fill="%23ffc857"/><circle cx="17.5" cy="15" r="1" fill="%23ffc857"/><circle cx="22.5" cy="17.5" r="1" fill="%23c8324a"/><circle cx="12.5" cy="10.5" r=".8" fill="%23f7f9ff"/><circle cx="27.5" cy="9.5" r=".8" fill="%23f7f9ff"/><circle cx="26" cy="14" r=".7" fill="%23f7f9ff"/></svg>');
  --pin-globe-trip: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 46"><path d="M14 34L20 44L26 34Z" fill="%23a8253b" stroke="%23520d18" stroke-width="1.2"/><path d="M9 29H31L33 35H7Z" fill="%23c8324a" stroke="%23520d18" stroke-width="1"/><rect x="9" y="29" width="22" height="2" fill="%23ffc857"/><circle cx="20" cy="16" r="13" fill="%231c2f66" stroke="%23ffc857" stroke-width="2.2"/><path d="M8.5 21C14 18 26 18 31.5 21V27H8.5Z" fill="%23f7f9ff"/><path d="M20 7L26.5 20.5H13.5Z" fill="%232f7d4f"/><circle cx="20" cy="5.6" r="1.9" fill="%23ffc857"/><circle cx="17.5" cy="15" r="1" fill="%23ffc857"/><circle cx="22.5" cy="17.5" r="1" fill="%23c8324a"/><circle cx="12.5" cy="10.5" r=".8" fill="%23f7f9ff"/><circle cx="27.5" cy="9.5" r=".8" fill="%23f7f9ff"/></svg>');
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 16px; }
html, body { height: 100%; margin: 0; }
/* scraped strings (city and venue names) must never widen the page */
body { overflow-wrap: break-word; }
.d-name, .dp-where, .d-about, .mc-name, .mc-meta, .chip, .tag, .tr-name, .tr-meta, .hnote { overflow-wrap: anywhere; }
.chip, .tag { max-width: 100%; }
@supports (height: 100svh) { html, body { height: 100svh; } }
body {
  font-family: var(--sans); color: var(--cream); background: var(--velvet); font-size: 16px; line-height: 1.5;
  display: flex; flex-direction: column; overflow: hidden;
}
button { font-family: inherit; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- topbar: velvet, gold piping, pine boughs at both ends, a string of lights ---------- */
#topbar {
  min-height: var(--topH); flex: 0 0 auto; display: flex; align-items: center; gap: 16px;
  padding: 8px 20px; position: relative; z-index: 30;
  background: linear-gradient(180deg, #8f1a2f, #5c0f1c); border-bottom: 2px solid #d9a13a;
}
.bough { position: absolute; top: -6px; width: 250px; height: 84px; pointer-events: none; opacity: .95; z-index: 0; overflow: visible; }
.bough-l { left: -14px; }
.bough-r { right: -14px; transform: scaleX(-1); }
#topbar > :not(.bough) { position: relative; z-index: 1; }
/* the boughs need ~180px of clear header at each end; below 1400px the search box would pay
   for them, and a usable search matters more than a decoration */
/* 1480, not 1400: at 1440px the boughs' 2 x 180px squeezed the search box to 222px (2026-10-01) */
/* .98 ends: a zoomed browser has fractional widths (1479.3px), and a range ending at 1479px
   then misses while the next starts at 1480px, so neither rule applies */
@media (max-width: 1479.98px) { .bough { display: none; } }
@media (min-width: 1480px) { #topbar { padding-left: 180px; padding-right: 180px; } }
/* fairy lights along the bottom edge: bulbs plus a soft glow that breathes slowly */
#topbar::before, #topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 12px; pointer-events: none; z-index: 2;
  background-image:
    radial-gradient(3px 3px at 14px 6px, var(--gold) 60%, transparent 62%),
    radial-gradient(3px 3px at 46px 6px, var(--frost) 60%, transparent 62%),
    radial-gradient(3px 3px at 78px 6px, #ff9f43 60%, transparent 62%),
    radial-gradient(3px 3px at 110px 6px, #f7f9ff 60%, transparent 62%);
  background-size: 128px 12px; background-repeat: repeat-x;
}
#topbar::after { filter: blur(3px); opacity: .8; animation: yf-twinkle 4s ease-in-out infinite; }
@keyframes yf-twinkle { 0%, 100% { opacity: .85; } 50% { opacity: .35; } }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cream); }
.brand .logo { width: 44px; height: 50px; line-height: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); flex: 0 0 auto; }
.brand .logo svg { display: block; width: 100%; height: 100%; }
.hd-star { transform-origin: 19px 12px; animation: yf-star 4s ease-in-out infinite; }
@keyframes yf-star { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong { font-size: 1.5rem; letter-spacing: -.01em; font-weight: 700; }
.brand-text .accent { color: var(--gold); }
.brand-text small { color: var(--cream-dim); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }

.search-box { flex: 1; max-width: 520px; min-width: 240px; margin: 0 auto; position: relative; display: flex; align-items: center; }
.search-box .search-ic { position: absolute; left: 14px; font-size: 16px; }
#search {
  width: 100%; min-height: 46px; padding: 0 16px 0 42px; border-radius: 999px;
  background: var(--paper); border: 2px solid var(--paper); color: var(--ink); font-size: 1rem; font-family: inherit;
}
#search::placeholder { color: #7a5a3a; }
#search:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,200,87,.35); }

.top-actions { display: flex; align-items: center; gap: 10px; }
/* Mid-width desktops: the header ran out of room and the search box shrank to "Se" at 1024px
   (owner, 2026-10-01). "Add a market" and "Get in touch" become round icon buttons; the label
   stays in the accessibility tree (font-size 0, not display:none) and as the tooltip. Below
   960px the tagline under the wordmark goes too. Phones (<= 820px) use the menu instead. */
@media (min-width: 820.02px) and (max-width: 1199.98px) {
  .top-actions a.btn-ghost { font-size: 0; gap: 0; width: 46px; min-width: 46px; padding: 0; justify-content: center; }
  .top-actions a.btn-ghost[href="submit.html"]::before { content: "\FF0B"; font-size: 1.3rem; line-height: 1; }
  .top-actions a.btn-ghost[href="contact.html"]::before { content: "\2709"; font-size: 1.15rem; line-height: 1; }
}
@media (min-width: 820.02px) and (max-width: 959.98px) { .brand-text small { display: none; } }
.hamb { display: none; border: 2px solid var(--cream); border-radius: 12px; width: 46px; height: 46px;
  background: transparent; color: var(--cream); cursor: pointer; align-items: center; justify-content: center; flex: 0 0 auto; }
.hamb:hover, .hamb[aria-expanded="true"] { border-color: var(--gold); }
.btn { border: 0; border-radius: 999px; min-height: 44px; padding: 8px 18px; font-weight: 700; font-size: .95rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: inherit; line-height: 1.2; }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--cream); border: 2px solid rgba(255,247,236,.55); }
.btn-ghost:hover { border-color: var(--gold); }
.btn-accent { background: linear-gradient(180deg, #ffd27a, #ffb52e); color: #3a2410; border: 2px solid var(--gold); box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.btn-accent:hover { filter: brightness(1.05); }
.count-pill { background: rgba(58,36,16,.18); border-radius: 999px; padding: 0 8px; font-size: .85rem; margin-left: 2px; }
.lang-sel { background: transparent; color: var(--cream); border: 2px solid rgba(255,247,236,.55); border-radius: 999px; min-height: 44px;
  padding: 0 12px; font-size: .9rem; font-weight: 700; font-family: inherit; cursor: pointer; }
.lang-sel:hover, .lang-sel:focus { border-color: var(--gold); outline: none; }
/* The open list is drawn by the browser on white: options must not inherit the cream text
   the closed control uses on the red bar (owner report 2026-09-30: unreadable). */
.lang-sel option { color: var(--ink); background: var(--paper); font-weight: 600; }

/* ---------- toolbar: velvet, cream controls ---------- */
#toolbar {
  min-height: var(--toolH); flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 8px 14px; padding: 8px 20px; background: var(--velvet); border-bottom: 1px solid var(--line-velvet); z-index: 20;
}
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter { min-height: 42px; padding: 0 12px; border-radius: 10px; background: var(--paper); color: var(--ink);
  border: 2px solid var(--paper); font-size: .95rem; cursor: pointer; font-family: inherit; }
.filter:focus { outline: none; border-color: var(--gold); }
.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .95rem; font-weight: 600; min-height: 42px;
  background: transparent; border: 2px solid rgba(255,200,87,.6); padding: 0 12px; border-radius: 10px; color: var(--cream); }
.toggle input { accent-color: var(--gold); width: 18px; height: 18px; }
.trip-toggle { border-color: var(--gold); }
.result-meta { color: var(--cream-dim); font-size: .95rem; white-space: nowrap; }
.result-meta #count { color: var(--cream); font-weight: 800; font-size: 1.05rem; }
.filter-toggle { display: none; }
.filters-done { display: none; }

/* ---------- main layout ---------- */
#app { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 400px 1fr; position: relative; }
#sidebar { position: relative; border-right: 1px solid var(--line-velvet); overflow-y: auto; min-height: 0;
  background: linear-gradient(180deg, var(--velvet), var(--velvet3)); }
.m-list { list-style: none; margin: 0; padding: 10px 10px 140px; }
.list-grip { display: none; }
/* the reindeer from the coming-soon page peeks up from the corner; desktop only, never over a control */
.deer { position: absolute; right: 6px; bottom: -22px; width: 112px; height: 130px; pointer-events: none; z-index: 0; }
@media (max-width: 1240px) { .deer { display: none; } .m-list { padding-bottom: 12px; } }
.m-card {
  background: var(--paper); color: var(--ink); border: 1px solid var(--line-paper); border-left: 5px solid transparent; border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer; position: relative; box-shadow: 0 10px 26px rgba(0,0,0,.3);
  transition: box-shadow .15s, transform .12s; z-index: 1;
}
.m-card:hover { box-shadow: 0 0 0 3px var(--gold), 0 12px 28px rgba(0,0,0,.35); transform: translateY(-1px); }
.m-card.active { box-shadow: 0 0 0 3px var(--gold), 0 12px 28px rgba(0,0,0,.35); }
.m-card.in-trip { border-left-color: var(--berry); }
.m-card.open { border-left-color: var(--gold); }
.m-card.open.in-trip { border-left-color: var(--berry); }
.mc-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding-right: 36px; margin-bottom: 4px; }
.mc-name { font-weight: 700; font-size: 1.1rem; display: block; flex: 1 1 auto; min-width: 0; color: var(--ink); text-decoration: none; line-height: 1.25; }
.mc-name:hover { color: var(--red); text-decoration: underline; }
.mc-meta { color: var(--ink-dim); font-size: .95rem; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.mc-date-row { margin-top: 4px; }
.mc-count { color: var(--red); font-weight: 700; white-space: nowrap; }
.mc-hours, .mc-dist { white-space: nowrap; }
.mc-free { color: var(--green); font-weight: 700; }
.mc-tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.mc-links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.mc-lnk { font-size: .85rem; font-weight: 700; text-decoration: none; min-height: 36px;
  border-radius: 999px; padding: 4px 12px; display: inline-flex; align-items: center; gap: 4px; }
.tag { font-size: .8rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--paper2); color: #4a2c14; }
.tag.type { background: #ffe6b3; color: var(--gold-ink); font-weight: 700; }
/* "Add to my trip": a gold star on a velvet disc with gold trim (owner, 2026-10-01: a star
   fits the season, and the old white "+" disc vanished into the beige card). Outline when
   off, filled and glowing when the market is in the trip. */
.mc-trip { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--gold);
  background: radial-gradient(circle at 50% 35%, #9b1d33 0%, #6e1022 70%, #5a0c1b 100%); border: 2px solid var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(43,7,16,.35); transition: transform .08s, box-shadow .15s; }
.mc-trip svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.mc-trip:hover { transform: scale(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 12px rgba(255,200,87,.55); }
.mc-trip.on svg { fill: var(--gold); }
.mc-trip.on { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 3px rgba(255,200,87,.3), 0 0 14px rgba(255,200,87,.6); }
.mc-trip:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* "Add to my trip": Santa's sleigh tows a copy of the card up to the My trip button and
   drops it on it (app.js sledToTrip; owner, 2026-10-01). Card, rope, sleigh in one row, the
   sleigh in front; mirrored when the button is to the left. Decorative, never clickable. The
   widths here are mirrored in app.js (ROW = 268, CARD = 150). */
.sled-fly { position: fixed; left: 0; top: 0; z-index: 4000; width: 268px; height: 56px; display: flex; align-items: center;
  pointer-events: none; will-change: transform; }
.sled-fly.rev { flex-direction: row-reverse; }
.sled-svg { flex: 0 0 96px; width: 96px; height: 56px; overflow: visible; filter: drop-shadow(0 3px 4px rgba(43,7,16,.45)); }
.sled-fly.rev .sled-svg { transform: scaleX(-1); }
.sled-rope { flex: 0 0 22px; height: 2px; margin-top: 18px; background: var(--gold); border-radius: 1px; }
.sled-card { flex: 0 0 150px; width: 150px; box-sizing: border-box; padding: 7px 10px; border-radius: 10px;
  background: var(--paper); color: var(--ink); border: 2px solid var(--gold); border-left: 5px solid var(--berry);
  box-shadow: 0 8px 18px rgba(43,7,16,.4); font-weight: 700; font-size: .8rem; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform-origin: 50% 50%; }
.sled-spark { position: fixed; z-index: 3999; width: 6px; height: 6px; border-radius: 50%; pointer-events: none;
  background: var(--gold); box-shadow: 0 0 8px var(--gold); }
@keyframes trip-bump { 0% { transform: scale(1); } 35% { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(255,200,87,.45), 0 0 22px rgba(255,200,87,.85); } 100% { transform: scale(1); } }
.trip-bump { animation: trip-bump .6s ease-out; }
/* touch screens get the 44px target; (hover: none), because the one (pointer: coarse) block
   is the iOS focus-zoom rule and must stay last (tests/test_ios_focus_zoom.py) */
@media (hover: none) { .mc-trip { width: 44px; height: 44px; top: 8px; right: 8px; } }
.m-card.past { opacity: .72; }
.past-badge { position: absolute; top: 14px; right: 56px; background: var(--paper2); color: var(--ink-dim);
  font-weight: 700; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.status-badge { display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap;
  font-weight: 700; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.status-badge.cancelled { background: #fbe3e7; color: #8f1a2f; border: 1px solid var(--berry); }
.status-badge.postponed { background: #fff0cc; color: var(--gold-ink); border: 1px solid #d9a13a; }
.m-card.cancelled .mc-name { text-decoration: line-through; opacity: .8; }
.empty { color: var(--cream-dim); font-size: 1rem; padding: 16px; text-align: center; }

/* ---------- map: ordinary world-map colours (CARTO Voyager, untinted — owner, 2026-10-01).
   The festive look lives in the chrome around it; the map itself stays the plain, readable
   map everyone knows. Only a soft shadow where the velvet list meets it. ---------- */
#mapWrap { position: relative; min-height: 0; background: #f2efe9; }
#map { position: absolute; inset: 0; background: #f2efe9; }
#mapWrap::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 18px; z-index: 460; pointer-events: none;
  background: linear-gradient(90deg, rgba(43,7,16,.28), transparent); }
.map-full { position: absolute; top: 12px; right: 12px; z-index: 590; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer;
  background: var(--paper); border: 2px solid var(--gold); color: var(--ink); box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.map-full:hover { background: var(--inset); color: var(--red); }
.map-full .ic-exit { display: none; }
body.mapfull .map-full .ic-exit { display: block; }
body.mapfull .map-full .ic-expand { display: none; }
body.mapfull #topbar, body.mapfull #toolbar, body.mapfull #sidebar, body.mapfull #sitefoot { display: none; }
body.mapfull #app { grid-template-columns: 1fr; }
/* markers are snowglobes; on a light map they need a firm shadow rather than a glow.
   The tail tip lands on the divIcon anchor. */
.pin { width: 32px; height: 37px; margin: -11px 0 0 -3px; transform-origin: 50% 100%;
  background: var(--pin-globe) center/contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.pin.trip { background-image: var(--pin-globe-trip); filter: drop-shadow(0 0 5px rgba(200,50,74,.7)) drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.pin.past { filter: grayscale(.85) opacity(.6) drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.pin.active { transform: scale(1.3); filter: drop-shadow(0 0 6px var(--gold)) drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.pin-ic { display: inline-block; width: 13px; height: 15px; vertical-align: -2px; background: var(--pin-globe) center/contain no-repeat; }
.leaflet-top, .leaflet-bottom { z-index: 550; }
.leaflet-control-attribution { background: rgba(255,247,236,.85); color: #4a2c14; font-size: 11px; padding: 2px 8px; border-radius: 8px 0 0 0; }
.leaflet-control-attribution a { color: #7a1424; }
.leaflet-bar { border: 2px solid var(--gold) !important; box-shadow: 0 6px 16px rgba(0,0,0,.4) !important; }
.leaflet-bar a { background: var(--paper); color: var(--ink); border-bottom-color: #e3c9a8; width: 40px; height: 40px; line-height: 40px; font-size: 22px; }
.leaflet-bar a:hover { background: var(--inset); color: var(--red); }
.leaflet-bar a.leaflet-disabled { background: var(--paper2); color: #a08a70; }
.pin-tip { background: var(--paper); color: var(--ink); border: 2px solid var(--berry); border-radius: 10px;
  padding: 8px 12px; font-size: .95rem; line-height: 1.35; box-shadow: 0 6px 18px rgba(0,0,0,.5); font-family: var(--sans); }
.pin-tip::before { display: none; }
.yf-cluster-wrap { background: none; }
.yf-cluster { width: 100%; height: 100%; position: relative; background: var(--pin-globe) center/contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.yf-cluster .cnt { position: absolute; top: -8px; right: -12px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; color: #3a2410; line-height: 1;
  background: var(--gold); border: 2px solid var(--paper); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.yf-cluster.mid .cnt { background: #ffd27a; }
.yf-cluster.big .cnt { background: var(--berry); color: var(--cream); font-size: .9rem; }

/* ---------- the home map on MapLibre GL (2026-10-14; Leaflet before, still used by the trip
   show and the hub maps) ----------
   Everything below reproduces what Leaflet's stylesheet and panes did, so pins and controls
   look and stack as before: pins are DOM above the canvas, and every map layer stays UNDER
   the detail panel (z 600), the way Leaflet's whole map pane did. */
#map .pin-wrap { width: 26px; height: 26px; }
#map .maplibregl-marker { z-index: 500; cursor: pointer; }
#map .maplibregl-marker.yf-mk-trip { z-index: 501; }               /* trip pins over the crowd */
#map .maplibregl-marker.yf-mk-active { z-index: 502; }
#map .maplibregl-popup { z-index: 520; }                           /* the hover tooltip */
#map .maplibregl-ctrl-top-left, #map .maplibregl-ctrl-top-right,
#map .maplibregl-ctrl-bottom-left, #map .maplibregl-ctrl-bottom-right { z-index: 550; }
/* the globe floats in a winter night (the stars are drawn by app.js) */
#map.space { background-color: #081127; background-repeat: repeat; }
#mapWrap.globe { background: #081127; }
/* Santa's two layers (app.js startSanta): one under the map canvas, one over the pins */
#map .yf-santa { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#map .yf-santa-front { z-index: 505; }     /* over the pins; the tooltip (520) and the panel (600) above him */
/* boot: the planet and its pins fade in over the night sky once the first tiles are drawn */
#map .maplibregl-canvas-container, #map .yf-santa { transition: opacity .8s ease; }
#map.booting .maplibregl-canvas-container, #map.booting .yf-santa { opacity: 0; }
/* zoom buttons, as Leaflet's were */
#map .yf-zoom { border: 2px solid var(--gold); border-radius: 6px; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,.4); margin: 12px 0 0 12px; }
#map .yf-zoom button { display: block; width: 40px; height: 40px; padding: 0; border: 0; border-bottom: 1px solid #e3c9a8;
  background: var(--paper); color: var(--ink); font: 700 22px/40px var(--sans); cursor: pointer; }
#map .yf-zoom button:last-child { border-bottom: 0; }
#map .yf-zoom button:hover { background: var(--inset); color: var(--red); }
#map .maplibregl-ctrl-attrib { background: rgba(255,247,236,.85); color: #4a2c14; font-size: 11px; line-height: 1.4; padding: 2px 8px; border-radius: 8px 0 0 0; margin: 0; }
#map .maplibregl-ctrl-attrib a { color: #7a1424; }
.maplibregl-popup.pin-tip-pop { pointer-events: none; }
.maplibregl-popup.pin-tip-pop .maplibregl-popup-tip { display: none; }
.maplibregl-popup.pin-tip-pop .maplibregl-popup-content { background: var(--paper); color: var(--ink); border: 2px solid var(--berry); border-radius: 10px;
  padding: 8px 12px; font-size: .95rem; line-height: 1.35; box-shadow: 0 6px 18px rgba(0,0,0,.5); font-family: var(--sans); }
/* Globe / Flat, beside the full-page button */
.proj-switch { position: absolute; top: 12px; right: 66px; z-index: 590; display: flex; height: 44px;
  border-radius: 10px; overflow: hidden; background: var(--paper); border: 2px solid var(--gold); box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.proj-switch button { display: inline-flex; align-items: center; gap: 6px; padding: 0 13px; border: 0;
  background: transparent; color: var(--ink); font: 700 14px var(--sans); cursor: pointer; white-space: nowrap; }
.proj-switch button + button { border-left: 1px solid #e3c9a8; }
.proj-switch button:hover { background: var(--inset); color: var(--red); }
.proj-switch button[aria-pressed="true"] { background: var(--red); color: var(--cream); }

/* ---------- detail panel: paper, with a velvet ribbon along the top ---------- */
.detail { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 92%); z-index: 600;
  background: var(--paper); color: var(--ink); border-left: 1px solid var(--line-paper); overflow-y: auto; padding: 22px 22px 30px;
  border-top: 8px solid var(--velvet2); box-shadow: inset 0 3px 0 var(--gold), -14px 0 30px rgba(0,0,0,.35); }
.detail-close, .modal-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 10px;
  background: var(--velvet); border: 2px solid var(--velvet); color: var(--cream); font-size: 18px; cursor: pointer; }
.detail-close:hover, .modal-close:hover { border-color: var(--gold); }
.detail-close { z-index: 5; box-shadow: 0 2px 10px rgba(0,0,0,.35); }   /* above the panel's photo banner */
/* The panel's top is the market page's design B (owner, 2026-10-01): a photo banner with the
   name over it (velvet with snow when there is no photo yet), and a ticket card overlapping it
   with When / Open / Weather / Entry, then the countdown under a candy-cane post with a
   lantern ball at each end. app.js heroHtml() / ticketHtml(); build_pages.py draws the page. */
.dp-hero { position: relative; margin: -22px -22px 0; min-height: 236px; display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; color: var(--cream); background: var(--velvet); }
.dp-hero.nophoto { min-height: 190px; background: radial-gradient(120% 90% at 70% 0%, #a3243a 0%, #7a1424 45%, #4a0b16 100%); }
.dp-hero-img, .dp-hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dp-hero-img img { object-fit: cover; }
.dp-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(43,7,16,.12) 0%, rgba(43,7,16,.28) 42%, rgba(43,7,16,.9) 100%); }
.dp-hero.nophoto .dp-shade { opacity: .35;
  background: radial-gradient(rgba(255,247,236,.55) 1.2px, transparent 1.8px) 0 0/26px 26px,
              radial-gradient(rgba(255,247,236,.35) 1px, transparent 1.5px) 13px 13px/26px 26px; }
.dp-hero-in { position: relative; padding: 60px 22px 50px; pointer-events: none; }
.dp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dp-tag { font-size: .8rem; font-weight: 700; padding: 4px 11px; border-radius: 20px; background: var(--gold); color: var(--velvet); }
.dp-tag.o { background: rgba(43,7,16,.4); border: 1.5px solid var(--gold); color: var(--gold); }
.dp-tag.cancelled { background: #ffd9de; color: #8f1a2f; }
.dp-tag.postponed { background: #ffe6b3; color: var(--gold-ink); }
.dp-tag.ended { background: var(--paper2); color: var(--ink-dim); }
.dp-hero .d-name { color: var(--cream); font-size: 1.75rem; font-weight: 700; line-height: 1.12; margin-right: 40px; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.dp-where { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; font-size: 1rem; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.dp-where svg { color: var(--gold); flex: 0 0 auto; }
.dp-credit { position: absolute; left: 12px; top: 10px; max-width: calc(100% - 80px); font-size: .7rem; color: rgba(255,247,236,.92);
  text-shadow: 0 1px 3px rgba(0,0,0,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-ticket { position: relative; margin: -36px 4px 0; background: var(--paper); border: 2px solid var(--gold); border-radius: 16px;
  box-shadow: 0 12px 28px rgba(43,7,16,.28); }
.dp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px 2px 12px; }
.dp-fact { padding: 9px 12px; }
.dp-fact:nth-child(odd) { border-right: 2px dashed rgba(163,36,58,.22); }
.dp-fact:last-child:nth-child(odd) { border-right: 0; grid-column: 1 / -1; }
.dp-flbl { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.dp-fbig { margin-top: 4px; font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.dp-fbig.free { color: var(--green); }
.dp-fsub { margin-top: 2px; font-size: .85rem; color: var(--ink-dim); }
.dp-frost { color: #1f4f7a; font-weight: 600; }
.dp-stub { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 12px 10px;
  border-radius: 0 0 14px 14px; background: linear-gradient(180deg, var(--red), var(--velvet2)); color: var(--cream); }
.dp-stub.off { background: linear-gradient(180deg, #6b4423, #4a2c14); }
.dp-stub .s1 { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ffe6b3; }
.dp-stub .s2 { font-size: 1.7rem; line-height: 1; font-weight: 700; color: var(--gold); }
.dp-stub .s3 { font-size: .9rem; font-weight: 700; }
.dp-stub::before, .dp-stub::after { content: ""; position: absolute; pointer-events: none; }
.dp-stub::before { left: -2px; right: -2px; top: -7px; height: 14px; border-radius: 7px;
  background: repeating-linear-gradient(-45deg, #fff7ec 0 5px, #c8324a 5px 10px);
  box-shadow: 0 0 0 1.5px #7a1424, inset 0 -3px 4px rgba(43,7,16,.3), inset 0 2px 2px rgba(255,247,236,.6); }
.dp-stub::after { left: -15px; right: -15px; top: -13px; height: 26px;
  background: radial-gradient(circle at 13px 50%, #fffbe6 0, #ffe6a3 3px, #ffc857 7px, #b8862b 11px, transparent 12px),
              radial-gradient(circle at calc(100% - 13px) 50%, #fffbe6 0, #ffe6a3 3px, #ffc857 7px, #b8862b 11px, transparent 12px);
  filter: drop-shadow(0 0 1px #7a1424) drop-shadow(0 0 6px rgba(255,200,87,.85)); }
.d-section-h { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-dim); margin: 20px 0 10px; font-weight: 700; }
.d-about { color: #4a2c14; font-size: 1rem; line-height: 1.55; margin: 16px 0 2px; }
.d-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 16px; }
.d-btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; min-height: 44px; padding: 8px 18px; border-radius: 999px; font-size: .95rem; }
/* The money buttons are shiny metallic red with gold trim and a soft glow (owner,
   2026-10-01, after FestLocator's metal theme). Three layers: a diagonal sheen that sweeps
   across, a bevel (bright top edge, darker waist), and the red body. Text stays cream with a
   dark shadow, so the label reads at 6:1 or better over the body. The panel's buttons sweep
   slowly on their own; a list of cards would shimmer all at once, so card links only sweep
   on hover. Reduced motion stops both (the rule at the end of the file). */
.d-money, .mc-lnk {
  color: #fff7ec; text-shadow: 0 1px 0 rgba(60,4,14,.6);
  border: 1.5px solid rgba(255,200,87,.95);
  background-color: #a3243a;
  background-image:
    linear-gradient(105deg, transparent 40%, rgba(255,255,255,.30) 48%, transparent 57%),
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 44%, rgba(0,0,0,.20) 52%, rgba(255,255,255,.06) 100%),
    linear-gradient(180deg, #cf3a52 0%, #a3243a 48%, #7f1528 53%, #9c2035 100%);
  background-size: 220% 100%, 100% 100%, 100% 100%;
  background-position: -60% 0, 0 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.3),
              0 0 10px rgba(200,50,74,.45), 0 2px 6px rgba(43,7,16,.3);
}
.d-money { animation: yf-sheen 6s linear infinite; }
.d-money:hover, .mc-lnk:hover {
  color: var(--cream); animation: yf-sheen 1.6s linear infinite;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.3),
              0 0 16px rgba(255,120,140,.6), 0 2px 8px rgba(43,7,16,.35);
}
@keyframes yf-sheen { to { background-position: 280% 0, 0 0, 0 0; } }
.d-full { background: var(--paper); color: var(--velvet); border: 2px solid var(--velvet); }
.d-full:hover { background: var(--velvet); color: var(--cream); }
.d-officialsite { color: var(--red); font-weight: 700; text-decoration: underline; font-size: 1rem; padding: 8px 4px; }
.d-trip, .d-share { cursor: pointer; font-weight: 700; font-size: .95rem; min-height: 44px; padding: 8px 18px; border-radius: 999px; font-family: inherit;
  background: transparent; color: var(--red); border: 2px solid var(--red); }
.d-trip:hover, .d-share:hover { background: #fbe3e7; }
.d-trip.on { background: var(--berry); border-color: var(--berry); color: var(--cream); }
.d-data-credit { color: var(--ink-dim); font-size: .8rem; margin: 16px 0 0; }
.d-data-credit a { color: inherit; text-decoration: underline; }
.hours { display: grid; gap: 6px; max-width: 380px; }
.hrow { display: flex; justify-content: space-between; gap: 16px; padding: 8px 12px; border: 1px solid var(--line-paper); border-radius: 10px; background: var(--inset); font-size: 1rem; }
.hrow span { color: var(--ink-dim); }
.hnote { color: #4a2c14; font-size: .95rem; margin: 6px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: .95rem; padding: 7px 13px; border-radius: 20px; background: var(--inset); border: 1px solid var(--line-paper); color: var(--ink); }
#sidebar::-webkit-scrollbar, .detail::-webkit-scrollbar { width: 12px; }
#sidebar::-webkit-scrollbar-thumb { background: #8f1a2f; border-radius: 8px; }
.detail::-webkit-scrollbar-thumb { background: #d9b382; border-radius: 8px; }

/* ---------- My trip modal: paper ---------- */
.link-btn { background: none; border: 0; color: var(--red); cursor: pointer; text-decoration: underline; font-size: .9rem; font-family: inherit; min-height: 32px; }
.modal { position: fixed; inset: 0; z-index: 1500; background: rgba(43,7,16,.78); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-card { position: relative; width: 100%; max-width: 600px; max-height: 92vh; overflow: hidden; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink); border-top: 8px solid var(--velvet2); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); }
.tr-title { margin: 0 0 6px; font-size: 1.5rem; }
.tr-lead { color: var(--ink-dim); font-size: .95rem; line-height: 1.5; margin: 0 0 12px; }
.tr-window { color: var(--red); font-weight: 700; font-size: 1rem; margin: 0 0 12px; min-height: 18px; }
.tr-list { overflow-y: auto; min-height: 20px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; }
.tr-empty { color: var(--ink-dim); font-size: .95rem; margin: 4px 0; }
.tr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border: 1px solid var(--line-paper); border-radius: 12px; background: var(--inset); }
.tr-main { flex: 1 1 200px; min-width: 0; }
.tr-name { font-weight: 700; text-decoration: none; color: var(--ink); font-size: 1.05rem; }
.tr-name:hover { color: var(--red); text-decoration: underline; }
.tr-meta { color: var(--ink-dim); font-size: .9rem; margin-top: 2px; }
.tr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tr-foot { margin-top: 14px; text-align: right; }

/* ---------- season timeline ---------- */
#viewSwitch { position: absolute; left: 414px; bottom: 14px; z-index: 590; display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: var(--velvet); border: 2px solid var(--gold); box-shadow: 0 8px 30px rgba(0,0,0,.45); }
#viewSwitch button { border: 0; border-radius: 999px; min-height: 40px; padding: 6px 18px; font-weight: 700; font-size: .95rem; cursor: pointer; background: transparent;
  color: var(--cream); white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; font-family: inherit; }
#viewSwitch .vs-ic { flex: 0 0 auto; }
#viewSwitch button.on { background: var(--gold); color: #3a2410; }
body.mapfull #viewSwitch { left: 14px; }
#calWrap { display: none; position: relative; }
body.calview #mapWrap { display: none; }
body.calview #calWrap { display: flex; flex-direction: column; min-height: 0; background: var(--velvet3); }
.cal-head { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 12px 16px; }
#calTitle { font-size: 1.3rem; font-weight: 700; min-width: 240px; text-align: center; text-transform: capitalize; }
.cal-nav { width: 44px; height: 44px; border-radius: 10px; background: var(--paper); border: 2px solid var(--paper); color: var(--ink); font-size: 24px; cursor: pointer; line-height: 1; }
.cal-nav:hover { border-color: var(--gold); }
.cal-exitfull { display: none; position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 10px;
  background: var(--paper); border: 2px solid var(--paper); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; z-index: 5; }
body.mapfull .cal-exitfull { display: flex; }
.cal-wd { position: relative; height: 30px; margin: 0 26px; border-bottom: 1px solid var(--line-velvet); }
.tl-mk { position: absolute; top: 4px; font-size: .75rem; letter-spacing: .22em; color: var(--cream-dim); border-left: 1px solid var(--line-velvet); padding-left: 8px; }
#calGrid { flex: 1; overflow-y: auto; padding: 10px 26px 18px; }
.tl-rows { position: relative; min-height: 100%; }
.tl-line { position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgba(255,247,236,.25); }
.tl-line.now { border-left: 1px dashed var(--gold); }
.tl-line.xmas { border-left: 2px solid var(--berry); }
.tl-row { position: relative; height: 38px; }
.tl-bar { position: absolute; top: 7px; height: 24px; border-radius: 12px; border: 0; cursor: pointer; padding: 0; }
.tl-bar.all { background: rgba(255,247,236,.28); box-shadow: inset 0 0 0 1px rgba(255,247,236,.6); }
.tl-bar.all:hover { box-shadow: inset 0 0 0 2px var(--gold); }
.tl-bar.trip { background: var(--berry); box-shadow: inset 0 0 0 2px var(--gold); }
.tl-lbl { position: absolute; top: 9px; font-size: .95rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  text-shadow: 0 2px 10px rgba(0,0,0,.9); max-width: 34%; overflow: hidden; text-overflow: ellipsis; color: var(--cream); }
.tl-lbl.flip { text-align: right; }
.tl-lbl.trip { color: var(--gold); }
.tl-empty { padding: 40px 0; text-align: center; color: var(--cream-dim); }

/* ---------- toast / footer ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1600; background: var(--paper);
  border: 2px solid var(--berry); color: var(--ink); padding: 12px 18px; border-radius: 12px; box-shadow: var(--shadow); font-size: 1rem; max-width: 90vw; }
#sitefoot { flex: 0 0 auto; min-height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 4px 20px;
  font-size: .85rem; color: var(--cream-dim); border-top: 1px solid var(--line-velvet); background: var(--velvet3); z-index: 750; gap: 14px; }
#sitefoot nav { display: flex; align-items: center; gap: 18px; }
#sitefoot a { color: var(--cream); text-decoration: none; }
#sitefoot a:hover { text-decoration: underline; }
.foot-credit { color: var(--cream-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .foot-credit { display: none; } }

/* ---------- legal / privacy page ---------- */
.legal h2 { margin: 26px 0 8px; font-size: 1.25rem; color: var(--red); }
.legal p, .legal li { color: #4a2c14; line-height: 1.65; font-size: 1rem; }
.legal ul { padding-left: 20px; }
.legal a { color: var(--red); }
.legal .updated { font-size: .9rem; color: var(--ink-dim); }

/* ---------- form pages (submit, contact): paper card on velvet ---------- */
body.page-form { display: block; overflow: auto; background: radial-gradient(1200px 600px at 70% -10%, #8f1a2f, var(--velvet) 60%); }
.form-wrap { max-width: 780px; margin: 28px auto 60px; padding: 0 18px; }
.form-card { background: var(--paper); color: var(--ink); border-top: 8px solid var(--velvet2); border-radius: 18px; padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow); }
.form-card h1 { margin: 0 0 8px; font-size: clamp(1.8rem, 1rem + 2vw, 2.5rem); }
.form-card h1 + .form-lead { color: var(--ink-dim); margin: 0 0 22px; line-height: 1.55; font-size: 1.05rem; }
.form-hint { margin: 2px 0 20px; padding: 12px 14px; border-radius: 12px; background: var(--inset); border: 1px solid var(--line-paper); color: #4a2c14; font-size: .95rem; line-height: 1.5; }
.form-hint strong { color: var(--ink); }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field > span { font-size: 1rem; font-weight: 700; color: var(--ink); }
.field > span i { color: var(--red); font-style: normal; }
.field > span small { font-weight: 500; color: var(--ink-dim); }
.field input, .field textarea, .field select { font: inherit; font-size: 1rem; min-height: 46px; padding: 10px 13px; border-radius: 10px; background: var(--inset); border: 2px solid #d9c3a3; color: var(--ink); width: 100%; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(163,36,58,.2); }
.field textarea { resize: vertical; min-height: 120px; }
.field-row { display: flex; gap: 14px; }
.field-row .field { flex: 1; }
.field-hint { color: var(--ink-dim); font-size: .95rem; margin: -6px 0 16px; }
.field-hint.addr-found { color: #2d6a2d; font-weight: 600; }
.field-hint.addr-none { color: var(--red); font-weight: 600; }
#addrStatus:empty { display: none; }
.pick-map { height: 260px; border-radius: 12px; overflow: hidden; border: 2px solid #d9c3a3; cursor: crosshair; background: #f2efe9; }
.latlng-row { display: flex; gap: 10px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.latlng-row input { flex: 1; min-width: 140px; }
.latlng-readout { font-size: .9rem; color: var(--ink-dim); white-space: nowrap; }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-group .chip { cursor: pointer; user-select: none; font-size: .95rem; font-weight: 600; min-height: 40px; padding: 7px 14px; background: var(--inset); color: #4a2c14; border: 2px solid #d9c3a3; }
.chip-group .chip.on { background: #ffe6b3; border-color: var(--gold); color: var(--gold-ink); }
.chip-group .chip:hover { border-color: var(--red); }
.tri { display: flex; gap: 8px; flex-wrap: wrap; }
.wl-typeahead { position: relative; flex: 1; }
.suggest-box { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 4px; list-style: none; max-height: 260px; overflow-y: auto;
  background: var(--paper); border: 2px solid #d9c3a3; border-radius: 10px; box-shadow: var(--shadow); }
.suggest-box li { padding: 10px 12px; border-radius: 7px; font-size: 1rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.suggest-box li.hi, .suggest-box li:hover { background: var(--red); color: var(--cream); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-err { color: #8f1a2f; font-size: 1rem; min-height: 18px; margin-bottom: 8px; font-weight: 600; }
.form-err a { color: var(--red); }
.btn-lg { min-height: 52px; padding: 12px 26px; font-size: 1.1rem; }
body.page-form .btn-accent { background: var(--red); color: var(--paper); border-color: var(--red); }
body.page-form .btn-accent:hover { background: var(--berry); }
body.page-form .toggle { color: var(--ink); border-color: #d9c3a3; }
body.page-form .toggle input { accent-color: var(--red); }
#submitBtn { width: 100%; justify-content: center; }
.thanks { text-align: center; padding: 20px 0; }
.thanks-ic { font-size: 54px; }
.thanks h2 { margin: 6px 0; }
.thanks p { color: var(--ink-dim); margin-bottom: 18px; font-size: 1.05rem; }
.thanks .btn { margin-right: 12px; }
body.page-form .thanks .btn-ghost { color: var(--red); border-color: var(--red); }

/* accessibility: no motion for anyone who asked for none */
@media (prefers-reduced-motion: reduce) {
  body.yule, body.yule *, body.yule #topbar::before, body.yule #topbar::after, body.yule .hd-star { animation: none !important; }
}

/* ---------- responsive (phones) ---------- */
@media (max-width: 820px) {
  #topbar { position: relative; z-index: 1300; flex-wrap: nowrap; padding: 8px 14px; gap: 8px; }
  .search-box { order: 0; flex: 1 1 auto; max-width: none; min-width: 0; }
  .brand { flex: 0 0 auto; }
  .brand-text small { display: none; }
  /* the wordmark is clipped, not display:none — it is the home link's only accessible name */
  .brand-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .brand .logo { width: 40px; height: 46px; }
  .hamb { display: flex; }
  /* #topbar > .top-actions, not .top-actions: `#topbar > :not(.bough) { position: relative }` outranked
     the class, so on phones the menu sat IN the header row, squeezed the search box and ran off
     the right edge (owner's phone, 2026-10-01). Same specificity, later in the file: this wins. */
  #topbar > .top-actions { display: none; position: absolute; top: 100%; right: 10px; z-index: 1200; max-width: calc(100vw - 20px); flex-direction: column; align-items: stretch; gap: 8px; padding: 12px;
    background: var(--velvet); border: 2px solid var(--gold); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.6); min-width: 260px; }
  #topbar > .top-actions.open { display: flex; }
  .top-actions .btn { justify-content: flex-start; }
  .filter-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; order: 0; flex: 0 0 auto; padding: 0 14px; border-radius: 999px;
    background: transparent; color: var(--cream); border: 2px solid rgba(255,247,236,.6); font-size: .95rem; font-weight: 700; font-family: inherit; cursor: pointer; }
  .filter-toggle .ft-arrow { transition: transform .15s; }
  #filterToggle[aria-expanded="true"] .ft-arrow { transform: rotate(180deg); }
  #filterToggle[aria-expanded="true"] { border-color: var(--gold); }
  #toolbar .filters { display: none; flex-basis: 100%; }
  #toolbar.filters-open .filters { display: flex; }
  #app { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  /* THE LIST IS A FILMSTRIP OVER THE MAP. One number for the collapsed strip. */
  #app { --strip-card: 150px; --strip-chrome: 35px; --strip-block: calc(var(--strip-card) + var(--strip-chrome)); --vs-block: 58px; }
  #sidebar { position: absolute; inset: auto 0 var(--vs-block) 0; height: var(--strip-block); z-index: 1100;
    background: transparent; border: 0; border-radius: 0; overflow: visible; pointer-events: none; }
  #list { display: flex; gap: 10px; padding: 6px 12px 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; pointer-events: auto; touch-action: pan-x; overscroll-behavior-x: contain; }
  #list::-webkit-scrollbar { display: none; }
  .list-grip { display: block; pointer-events: auto; touch-action: none; width: 100%; padding: 9px 0 5px; border: 0; background: none; cursor: grab; }
  .list-grip:active { cursor: grabbing; }
  .list-grip::before { content: ""; display: block; width: 52px; height: 6px; margin: 0 auto; border-radius: 999px; background: rgba(255,247,236,.85); box-shadow: 0 2px 12px rgba(0,0,0,.7); }
  .list-grip:focus-visible::before { background: var(--gold); outline: none; }
  #sidebar.expanded { height: 76%; pointer-events: auto; display: flex; flex-direction: column; background: var(--velvet); border-top: 2px solid var(--gold);
    border-radius: 16px 16px 0 0; box-shadow: 0 -12px 34px rgba(0,0,0,.55); }
  #sidebar.expanded #list { display: block; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none; padding: 2px 12px 14px;
    pointer-events: auto; touch-action: pan-y; overscroll-behavior-y: contain; }
  #sidebar.expanded #list .m-card { flex: none; width: auto; height: auto; margin-bottom: 10px; scroll-snap-align: none; }
  #sidebar.expanded #list .m-card .mc-tags { display: flex; }
  #list .m-card { pointer-events: auto; flex: 0 0 clamp(230px, 80%, 320px); height: var(--strip-card); margin-bottom: 0; overflow: hidden; scroll-snap-align: center; }
  #list .m-card .mc-tags { display: none; }
  #empty:not(.hidden) { margin: 6px 12px 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--paper); color: var(--ink); text-align: center; box-shadow: 0 10px 26px rgba(0,0,0,.55); }
  .leaflet-bottom { bottom: calc(var(--vs-block) + var(--strip-block) + 10px); }
  .leaflet-bottom.leaflet-right { bottom: 16px; }
  .leaflet-control-attribution { max-width: calc(100vw - 250px); white-space: normal; text-align: right; font-size: 10px; line-height: 1.35; border-radius: 8px 0 0 8px; }
  #map .maplibregl-ctrl-bottom-left { bottom: calc(var(--vs-block) + var(--strip-block) + 10px); }
  #map .maplibregl-ctrl-bottom-right { bottom: 16px; }
  #map .maplibregl-ctrl-attrib { max-width: calc(100vw - 250px); white-space: normal; text-align: right; font-size: 10px; line-height: 1.35; border-radius: 8px 0 0 8px; }
  /* phones: under the full-page button, icons only */
  .proj-switch { top: 64px; right: 12px; height: 42px; }
  .proj-switch button { padding: 0 11px; }
  .proj-switch button span { display: none; }
  #viewSwitch { left: 14px; bottom: 12px; }
  #mapWrap::after { display: none; }        /* no list beside the map on a phone */
  body.calview #sidebar { display: none; }
  #mapWrap { grid-row: 1; }
  .detail { width: 100%; z-index: 1200; top: auto; bottom: 0; height: 60%; border-left: 0; border-radius: 16px 16px 0 0;
    box-shadow: inset 0 3px 0 var(--gold), 0 -12px 34px rgba(0,0,0,.55); display: flex; flex-direction: column; overflow: hidden; padding: 0 18px 16px; }
  .detail.tall { height: 92%; }
  .detail-grip { display: block; flex: 0 0 auto; }
  .detail .list-grip::before { background: #b9364d; box-shadow: none; }
  #detailBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-top: 2px; display: flex; flex-direction: column; }
  /* flex-shrink 0: in this scrolling column, a child with overflow:hidden (the photo link)
     may shrink to nothing once the content is taller than the sheet; it showed a credit
     under a 1px photo on phones (2026-09-30). Children keep their height; the body scrolls. */
  #detailBody > *            { order: 7; flex-shrink: 0; }
  #detailBody > .dp-hero     { order: 1; }
  #detailBody > .dp-ticket   { order: 2; }
  #detailBody > .d-actions   { order: 3; }
  /* the sheet's body scrolls, so a bleed past its padding is cut off: a rounded card instead */
  .detail .dp-hero { margin: 0; border-radius: 14px; min-height: 176px; }
  .detail .dp-hero.nophoto { min-height: 150px; }
  .detail .dp-stub::after { left: -4px; right: -4px; }   /* the lantern balls stay inside the sheet: no sideways scroll */
  .detail .dp-hero-in { padding: 34px 16px 46px; }
  .detail .dp-hero .d-name { font-size: 1.45rem; }
  .detail .detail-close { top: 6px; right: 10px; }
  #toolbar { flex-wrap: wrap; gap: 8px; position: relative; overflow: visible; z-index: 1100; min-height: 0; padding: 0; border-bottom: 0; }
  #toolbar.filters-open { padding: 0; border-bottom: 0; z-index: 1250; }
  /* Phones: the filters open as a panel OVER the map. In the toolbar's flow they pushed the map
     down to a sliver under the card strip (owner, 2026-10-01). Five controls, not eight: region
     is folded into the grouped country list, sort stays "soonest first", and closed markets are
     a desktop option. The big button shows the count and closes the panel. */
  #toolbar.filters-open .filters { position: absolute; top: 0; left: 0; right: 0; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px;
    padding: 12px 14px 16px; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); overflow-y: auto;
    background: var(--velvet); border-bottom: 2px solid var(--gold); box-shadow: 0 18px 40px rgba(0,0,0,.55); }
  #toolbar.filters-open .filters .filter, #toolbar.filters-open .filters .toggle { width: 100%; max-width: none; }
  #f-continent, #f-sort, .past-toggle { display: none !important; }
  .filters-done { display: flex; justify-content: center; width: 100%; min-height: 52px; font-size: 1.05rem; margin-top: 4px; }
  #toolbar.filters-open ~ #app #sidebar { display: none; }
  body #toolbar:not(.filters-open) { border-bottom: 0; }
  #toolbar .result-meta { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: auto; max-width: calc(100% - 120px);
    overflow: hidden; text-overflow: ellipsis; pointer-events: none; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--gold); background: var(--velvet); }
  #toolbar.filters-open .result-meta { display: none; }       /* the closing button carries the count */
  body.calview #toolbar { min-height: 0; padding: 6px 14px; border-bottom: 1px solid var(--line-velvet); }
  body.calview #toolbar .result-meta { position: static; transform: none; width: 100%; max-width: none; padding: 0; border: 0; background: none; }
  #calGrid { padding: 8px 12px calc(var(--vs-block, 58px) + 14px); }
  .cal-wd { margin: 0 12px; }
  .tl-lbl { font-size: .85rem; max-width: 42%; }
  #calTitle { font-size: 1.1rem; min-width: 150px; }
  .field-row { flex-direction: column; gap: 0; }
}
@media (max-width: 700px) {
  /* one row: the essential links only — the © line and the disclosure stay on every static page */
  #sitefoot { min-height: 30px; padding: 2px 10px; gap: 10px; font-size: .85rem; justify-content: center; overflow: hidden; white-space: nowrap; }
  #sitefoot > span:first-child, #sitefoot .foot-credit { display: none; }
  #sitefoot nav { gap: 14px; }
}
@media (max-width: 480px) { .modal-card { overflow-y: auto; } }

/* ===== Play my trip (tripshow.js): the visitor's trip as a slideshow, the regional video's
   shape on the site (owner, 2026-10-03). Velvet with cream type, gold for what to look at;
   the photos sit whole on cream postcards with their credit printed underneath. ===== */
html.ts-open { overflow: hidden; }
.tr-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tr-play { font: 700 15px var(--sans); padding: .6em 1.2em; border-radius: 999px; border: 2px solid var(--gold);
  background: var(--gold); color: var(--velvet); cursor: pointer; }
.tr-play:hover { background: #ffd77f; }
.tshow { position: fixed; inset: 0; z-index: 4000; overflow: hidden; color: var(--cream); font-family: var(--sans);
  background: radial-gradient(130% 90% at 70% 0%, #a3243a 0%, var(--velvet2) 45%, var(--velvet) 100%); }
.tshow.hidden { display: none; }
.ts-snow { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ts-scene { position: absolute; inset: 0 0 88px; z-index: 1; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.ts-scene.on { opacity: 1; visibility: visible; }
.ts-intro, .ts-end { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.ts-pres { font-weight: 600; font-size: clamp(18px, 2.4vw, 30px); }
.ts-pres b { color: var(--gold); }
.ts-title, .ts-etitle { margin: .15em 0 .3em; color: var(--gold); font-weight: 700; line-height: 1.05; font-size: clamp(40px, 7vw, 100px);
  text-shadow: 0 4px 24px rgba(0,0,0,.35); }
.ts-etitle { font-size: clamp(32px, 5vw, 72px); }
.ts-sub, .ts-esub { margin: 0; font-weight: 600; color: #ffe6b3; font-size: clamp(16px, 2vw, 26px); }
.ts-intro.on > *, .ts-end.on > * { animation: ts-up .7s both; }
.ts-intro.on > :nth-child(2), .ts-end.on > :nth-child(2) { animation-delay: .5s; }
.ts-intro.on > :nth-child(3), .ts-end.on > :nth-child(3) { animation-delay: 1s; }
.ts-end.on > :nth-child(4) { animation-delay: 1.4s; }
.ts-deer { width: clamp(110px, 12vw, 170px); height: auto; margin: 18px 0 8px; transform-origin: 50% 100%; }
.ts-end.on .ts-deer { animation: ts-hop .8s .7s both; }
.ts-eacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }

.ts-mapbox { position: absolute; inset: 0; background: #f2efe9; }
.ts-cap { position: absolute; left: 50%; bottom: 22px; z-index: 1001; transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100% - 32px);
  padding: .4em 1.1em .5em; border-radius: 999px; background: rgba(58,9,18,.97); border: 3px solid var(--gold);
  font-weight: 700; text-align: center; font-size: clamp(16px, 2.2vw, 28px); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.ts-map.on .ts-cap { animation: ts-cap .6s .4s both; }
.ts-route { transition: stroke-dashoffset 2.8s ease-in-out .9s; filter: drop-shadow(0 0 1.5px var(--velvet)) drop-shadow(0 0 1.5px var(--velvet)); }
.ts-pinwrap .pin { animation: ts-pop .45s both; }
.ts-num { position: absolute; left: 21px; top: -32px; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--velvet);
  font: 700 15px/28px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--velvet), 0 3px 8px rgba(0,0,0,.4); animation: ts-pop .4s both; }

.ts-stop { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 4vw; padding: 4vh 5vw 2vh; }
.ts-cards { display: grid; place-items: center; min-width: 0; }
.ts-pc { grid-area: 1 / 1; margin: 0; padding: 12px 12px 0; border-radius: 6px; background: #fffaf2; max-width: 100%;
  box-shadow: 0 26px 54px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.3); transform: rotate(-2.4deg); animation: ts-in-l .8s cubic-bezier(.2,1.25,.4,1) both; }
.ts-pc img { display: block; width: auto; height: auto; max-width: 44vw; max-height: calc(100vh - 250px); border-radius: 2px; }
.ts-pc figcaption { padding: 8px 4px 10px; color: #5a4636; font-weight: 600; font-size: 13px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
.ts-pc figcaption a { color: inherit; text-decoration: none; }
.ts-pc figcaption a:hover { text-decoration: underline; }
.ts-pc1 { opacity: 0; transform: translate(3%, 4%) rotate(2.8deg); animation: none; }
.ts-pc1.in { animation: ts-in-r .8s cubic-bezier(.2,1.25,.4,1) both; }
.ts-nophoto { padding-bottom: 12px; }
.ts-nophoto > div { width: min(44vw, 640px); aspect-ratio: 3 / 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  border-radius: 2px; background: radial-gradient(120% 90% at 70% 0%, #a3243a 0%, #7a1424 45%, #4a0b16 100%); color: var(--cream); }
.ts-nophoto b { font-size: clamp(24px, 3vw, 44px); }
.ts-np-globe { width: 25%; aspect-ratio: 40 / 46; background: var(--pin-globe) center / contain no-repeat; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.ts-info { position: relative; z-index: 2; min-width: 0; }   /* above a wide second postcard */
.ts-info > * { animation: ts-up .55s both; }
.ts-info > :nth-child(1) { animation-delay: .3s; }
.ts-info > :nth-child(2) { animation-delay: .45s; }
.ts-info > :nth-child(3) { animation-delay: .6s; }
.ts-info > :nth-child(4) { animation-delay: .8s; }
.ts-info > :nth-child(5) { animation-delay: 1s; }
.ts-head { display: flex; align-items: center; gap: .28em; font-weight: 700; font-size: clamp(36px, 5.2vw, 84px); line-height: 1; }
.ts-badge { flex: 0 0 auto; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: var(--velvet); font-size: .62em; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.ts-town { text-shadow: 0 4px 24px rgba(0,0,0,.35); overflow-wrap: anywhere; }
.ts-name { margin-top: .45em; color: var(--gold); font-weight: 700; line-height: 1.2; font-size: clamp(18px, 2.3vw, 34px); }
.ts-when { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-top: .6em; font-weight: 600; font-size: clamp(16px, 1.9vw, 26px); }
.ts-free { font-size: .8em; padding: .1em .75em .15em; border-radius: 999px; background: #2f7d4f; color: #fff; }
.ts-chips { display: flex; flex-wrap: wrap; gap: .5em; margin-top: 1em; font-size: clamp(14px, 1.5vw, 21px); }
.ts-chips span { padding: .25em .85em .3em; border-radius: 999px; border: 2px solid var(--gold); background: rgba(58,9,18,.9); font-weight: 600; }
.ts-acts { display: flex; flex-wrap: wrap; gap: .6em; margin-top: 1.4em; }
.ts-act { font: 600 15px var(--sans); padding: .6em 1.15em; border-radius: 999px; border: 2px solid rgba(255,247,236,.75);
  background: rgba(58,9,18,.6); color: var(--cream); text-decoration: none; cursor: pointer; }
.ts-act:hover { border-color: var(--gold); }
.ts-act.gold { background: var(--gold); border-color: var(--gold); color: var(--velvet); }

.ts-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 88px; display: flex; align-items: center; gap: 10px; padding: 0 16px;
  background: linear-gradient(rgba(43,7,16,0), rgba(43,7,16,.7)); }
.ts-btn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,247,236,.75); background: rgba(58,9,18,.9);
  color: var(--cream); font-size: 20px; line-height: 1; cursor: pointer; }
.ts-btn:hover:not(:disabled) { border-color: var(--gold); }
.ts-btn:disabled { opacity: .35; cursor: default; }
.ts-strip { position: relative; flex: 1; min-width: 0; display: flex; margin: 0 0 0 10px; padding: 0; list-style: none; }
.ts-strip::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 3px; border-radius: 2px; background: rgba(255,247,236,.3); }
.ts-strip li { flex: 1; min-width: 0; position: relative; }
.ts-strip button { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 5px 2px; border: 0; background: none;
  color: rgba(255,247,236,.7); font: 600 13px var(--sans); cursor: pointer; }
.ts-dot { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; border: 3px solid rgba(255,247,236,.8); background: var(--velvet); transition: transform .3s; }
.ts-strip li.done .ts-dot { background: var(--gold); border-color: var(--gold); }
.ts-strip li.cur .ts-dot { background: var(--gold); border-color: var(--cream); transform: scale(1.35); }
.ts-strip li.cur button { color: var(--cream); font-weight: 700; }
.ts-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-strip.many li:not(.cur) .ts-lbl { visibility: hidden; }
.tshow .ts-close { z-index: 5; border-color: rgba(255,247,236,.75); }
.tshow.paused *, .tshow.paused *::before { animation-play-state: paused !important; }

@keyframes ts-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes ts-cap { from { opacity: 0; transform: translate(-50%, 22px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ts-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes ts-hop { 0% { opacity: 0; transform: translateY(60px); } 60% { opacity: 1; transform: translateY(-10px); } 100% { opacity: 1; transform: none; } }
@keyframes ts-in-l { from { opacity: 0; transform: translateX(-55vw) rotate(-10deg); } to { opacity: 1; transform: rotate(-2.4deg); } }
@keyframes ts-in-r { from { opacity: 0; transform: translate(55vw, 4%) rotate(10deg); } to { opacity: 1; transform: translate(3%, 4%) rotate(2.8deg); } }

/* phones and tall screens: the postcards on top, the facts under them, the strip as dots */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1024px) {
  .ts-stop { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; gap: 22px; padding: 64px 16px 8px; overflow-y: auto; }
  .ts-pc img { max-width: calc(100vw - 60px); max-height: 40vh; }
  .ts-pc figcaption { max-width: calc(100vw - 60px); font-size: 12px; }
  .ts-nophoto > div { width: calc(100vw - 60px); }
  .ts-info { text-align: center; }
  .ts-head, .ts-when, .ts-chips, .ts-acts { justify-content: center; }
  .ts-head { font-size: 40px; }
  .ts-name { font-size: 20px; }
  .ts-when { font-size: 17px; }
  .ts-chips { font-size: 15px; }
  .ts-lbl { display: none; }
  .ts-bar { gap: 8px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .tshow *, .tshow *::before { animation: none !important; transition: none !important; }
  .ts-pc1.in { opacity: 1; }
  .ts-route { stroke-dashoffset: 0 !important; }
}

/* ===== iOS focus zoom — KEEP LAST. WebKit zooms the page when a control under 16px is focused
   and stays zoomed; keyed on the touch keyboard, not the screen. Never maximum-scale=1. ===== */
@media (pointer: coarse) {
  input, select, textarea, #search, .filter, .lang-sel, .field input, .field textarea, .field select { font-size: 16px; }
  input[type="checkbox"], input[type="radio"] { font-size: inherit; }
}