:root {
  /* warm ivory theme (shared with guide.html) — paper panels, ink text, teal map accent,
     gold brand. Tokens mirror guide.html's --paper/--ink/--gold family so the map,
     legal pages and the guide read as one site. */
  --bg: #f4efe4;            /* guide --paper */
  --panel: #fdfaf2;
  --panel-2: #efe8d8;       /* guide --paper2 */
  --cream: #faf6ec;         /* header + sidebar */
  --text: #221f18;          /* guide --ink */
  --muted: #6d6555;         /* guide --ink2 */
  --accent: #0f766e;        /* teal — map UI (clusters, filters, focus) */
  --accent-ink: #ffffff;
  --gold: #a07a34;          /* guide --gold — brand wordmark + active language pill */
  --ink-btn: #221f18;       /* dark CTA button, same as guide .cta */
  --resident: #005daa;      /* blue */
  --tour: #e11d48;          /* rose */
  --border: #ddd3bf;        /* guide --line */
  --serif: "Fraunces", "Noto Serif TC", Georgia, serif;
  --shadow: 0 8px 24px rgba(34, 31, 24, .12);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  font-family: "Segoe UI", system-ui, "Microsoft JhengHei", sans-serif;
  background: var(--bg); color: var(--text);
}
body { display: flex; flex-direction: column; height: 100vh; }
#app { display: flex; flex: 1; min-height: 0; width: 100%; }

/* ---------- Top header bar (brand left, live count middle, nav right) ---------- */
#topbar {
  flex: none; height: 58px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: var(--cream); border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06); z-index: 1200;
}
#brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
#brand .brand-logo { height: 34px; width: auto; display: block; flex: none; }
/* brand wordmark — Fraunces serif + gold "Map", identical to guide/me/u (.brand) */
#brand .logo { font-family: var(--serif); font-size: 20px; font-weight: 900; letter-spacing: -.01em; color: var(--text); }
#brand .logo-em { color: var(--gold); }
#brand .tagline { font-size: 13px; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#topnav { display: flex; align-items: center; gap: 14px; }
.nav-link { color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600; }
.nav-link:hover { color: var(--accent); }
/* Language switch: compact pills 繁 / 简 / EN (same as guide/me/u .hl-pick — short labels
   fit the phone header). No flags (country ≠ language). */
#lang-switch { display: inline-flex; align-items: center; gap: 1px;
  border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
#lang-switch .lang-opt { border: none; background: none; cursor: pointer; color: var(--muted);
  font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; line-height: 1; font-family: inherit; text-decoration: none; }
#lang-switch .lang-opt:hover { color: var(--text); }
#lang-switch .lang-opt.active,
#lang-switch .lang-opt[aria-current="true"] { background: var(--gold); color: #fff; } /* aria-current: legal 頁 data-hl-link 由 mm-strings 標 */

/* all-theatres page: floating search panel + small venue dots */
#venue-panel {
  position: absolute; z-index: 1000; top: 14px; left: 14px; width: min(330px, 80vw);
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px; box-shadow: var(--shadow);
}
#vsearch {
  width: 100%; padding: 10px 13px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); font-size: 14px; outline: none;
}
#vsearch:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15,118,110,.15); }
#vcount { margin-top: 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
#vresults { list-style: none; margin: 8px 0 0; padding: 0; max-height: 46vh; overflow-y: auto; }
#vresults li { padding: 8px 10px; border-radius: 8px; cursor: pointer; line-height: 1.35; }
#vresults li:hover { background: var(--panel-2); }
#vresults li.more { cursor: default; color: var(--muted); font-size: 12px; }
#vresults li.more:hover { background: none; }
#vresults .vn { color: var(--text); font-weight: 600; font-size: 13px; }
#vresults .vc { color: var(--muted); font-size: 12px; }
.venue-dot-wrap { background: none; border: none; }
.venue-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(15,23,42,.4);
}
/* dark ink CTA pill — same treatment as guide.html .nav a.cta */
.nav-cta {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: var(--ink-btn, var(--text)); color: #f4efe4; text-decoration: none;
  font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 999px;
  transition: background .12s, transform .12s;
}
.nav-cta:hover { background: #000; transform: translateY(-1px); }

/* ---------- Sidebar ---------- */
#sidebar {
  width: 360px; min-width: 360px;
  background: var(--cream); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.tagline { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

#controls { padding: 14px 20px; border-bottom: 1px solid var(--border); }
#search {
  width: 100%; padding: 10px 13px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 14px;
  outline: none; transition: border-color .12s, box-shadow .12s;
}
#search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15,118,110,.15); }
#search::placeholder { color: var(--muted); }
#filters { display: flex; gap: 10px; margin-top: 12px; }
.chip { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.resident { background: var(--resident); }
.dot.tour { background: var(--tour); }

/* Tradition/origin tag filters — toggleable pills below the search box. Each pill
   carries its tradition's accent colour; none-selected == show all. */
#tag-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tagchip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px; cursor: pointer; user-select: none;
  font-size: 12px; font-weight: 600; line-height: 1;
  color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--border); transition: all .12s;
}
.tagchip:hover { border-color: var(--tag-color, var(--accent)); color: var(--text); }
.tagchip .tdot { width: 8px; height: 8px; border-radius: 50%; background: var(--tag-color, var(--accent)); flex: none; }
.tagchip .tcount { font-size: 11px; color: var(--muted); font-weight: 600; }
.tagchip.on {
  color: #fff; background: var(--tag-color, var(--accent));
  border-color: var(--tag-color, var(--accent));
}
.tagchip.on .tdot { background: rgba(255,255,255,.9); }
.tagchip.on .tcount { color: rgba(255,255,255,.85); }
.tagchip.tag-zero:not(.on) { opacity: .4; }   /* no shows of this tradition this month */

.tag-badge {
  display: inline-block; margin: 2px 0 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #fff; background: var(--tag-color, #64748b);
}

/* Legal / content pages (privacy, terms) */
.legal { max-width: 760px; margin: 0 auto; padding: 32px 24px 64px; line-height: 1.7; color: var(--text); }
.legal h1 { font-size: 26px; margin: 0 0 4px; }
.legal .updated { color: var(--muted); font-size: 13px; margin: 0 0 28px; }
.legal h2 { font-size: 18px; margin: 28px 0 8px; }
.legal p, .legal li { font-size: 15px; color: #45403a; }
.legal ul { padding-left: 22px; }
.legal a { color: var(--gold); }
.foot-links { margin-top: 8px; font-size: 13px; color: var(--muted); }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--gold); }
/* 共用頁尾(與 guide 同款):左標語、右金色連結列 — about/privacy/terms 用 */
.site-foot { border-top: 1px solid var(--border); padding: 30px 0 44px; color: var(--muted); font-size: 14px; margin-top: 56px; }
.site-foot .sf-in { max-width: 1080px; margin: 0 auto; padding: 0 26px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.site-foot .sp { margin-left: auto; }
.site-foot a { color: var(--gold); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }

/* 本月上演即時計數 — 在 #controls 內、搜尋欄下方(底線之上) */
#count { margin: 9px 3px 0; font-size: 12px; color: var(--muted); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#show-list { list-style: none; margin: 0; padding: 0 8px 10px; overflow-y: auto; flex: 1; }
/* Until app.js finishes its first render with real data (adds body.ready), hide the
   crawler-only prerendered list AND the count line — otherwise a language switch (which
   navigates between the /en//zh-hans//zh-hant/ trees) flashes the SEO list, then a
   misleading "0 musicals · 0 locations" while data is still loading. */
body:not(.ready) #show-list,
body:not(.ready) #count { visibility: hidden; }

/* ===== show list — per-show tinted cards, alternating teal / amber theme ===== */
.show-group { list-style: none; border-radius: 12px; margin: 5px 3px; overflow: hidden; }
.show-group.tA { --acc:#0d9488; --acc2:#5cc3b7; --tint:#eef6f4; --hov:#e3f0ed; --grad:rgba(13,148,136,.16); background: var(--tint); }
.show-group.tB { --acc:#b07d1e; --acc2:#e3c47f; --tint:#faf3e2; --hov:#f3ead2; --grad:rgba(196,142,40,.22); background: var(--tint); }

.show-item { display: flex; gap: 13px; padding: 12px 13px; cursor: pointer; }
.show-item.header { padding-bottom: 4px; align-items: center; }
.show-item.single:hover, .show-item.header:hover, .show-item.active { background: var(--hov); }
.show-item .thumb {
  width: 62px; height: 93px; flex: none; border-radius: 7px;
  background: #e9e2d2 center/cover no-repeat; display: grid; place-items: center;
}
.thumb.noimg, .poster-pin.noimg, .tt-poster.noimg { background: linear-gradient(135deg, #e9e2d2, #d8cfba); }
.glyph { color: var(--accent); font-size: 18px; opacity: .85; }
.show-item .info { min-width: 0; flex: 1; }
.show-item .title { font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--text); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.city-count { font-size: 14px; color: #4a443a; margin-top: 4px; }

/* venue / city / date trio — shared by single card and each multi-city stop */
.ven { font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.32; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.city { font-size: 14px; color: #4a443a; line-height: 1.3; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdate { font-size: 13.5px; color: var(--muted); line-height: 1.3; margin-top: 5px; display: flex; align-items: center; gap: 5px; }
.vdate.now { color: var(--acc); font-weight: 600; }
.vdot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); flex: none; }

/* single: a short vertical bar down the left of the trio (cleaner than a floating ring;
   echoes the multi-city spine). */
.single .loc { position: relative; padding-left: 21px; margin-top: 7px; }
.single .loc::before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 5px; width: 2.5px; border-radius: 2px; background: var(--acc); }

/* multi: expand chevron + gradient stops block with rings joined by a spine */
.chev { color: var(--muted); font-size: 14px; margin-left: 6px; align-self: center; flex: none; transition: transform .15s; }
.show-group.open .chev { transform: rotate(180deg); }
.stops { max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.show-group.open .stops { max-height: 3000px; }
.stops-inner { position: relative; margin: 5px 12px 9px; padding: 8px 8px 8px 26px; border-radius: 10px; background: linear-gradient(100deg, var(--grad), transparent 62%); }
.stop { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 6px; border-radius: 9px; cursor: pointer; }
.stop:hover, .stop.active { background: var(--hov); }
/* multi-city "spine": a route timeline (dot + connecting line) down the left of the
   stops, while each stop keeps its own production poster (they differ per city). */
.stop::before { content: ""; position: absolute; left: -16px; top: 13px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--panel); border: 2.5px solid var(--acc); box-sizing: border-box; z-index: 1; }
.stop::after { content: ""; position: absolute; left: -11.5px; top: 18px; bottom: -16px; width: 2px;
  background: var(--acc2); border-radius: 2px; }
.stop:last-child::after { display: none; }
.stop .stop-thumb { width: 40px; height: 60px; flex: none; border-radius: 5px; background: #e9e2d2 center/cover no-repeat; display: grid; place-items: center; }
.stop .stop-thumb .glyph { font-size: 14px; }
.stop .si { flex: 1; min-width: 0; padding-top: 1px; }
.chev-r { color: #beb4a0; font-size: 17px; align-self: center; flex: none; }

/* gentle breathing on the long-running status dot (disabled if user reduces motion) */
@keyframes mm-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.vdot.pulse { animation: mm-breathe 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .vdot.pulse { animation: none; } }
.type-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.type-dot.resident { background: var(--resident); }
.type-dot.tour { background: var(--tour); }
.badge-unverified {
  font-size: 10px; color: #92670a; border: 1px solid #f0d488; background: #fdf6e3;
  border-radius: 5px; padding: 1px 5px; margin-left: auto;
}
.empty { text-align: center; color: var(--muted); padding: 40px 16px; font-size: 14px; }
.empty span { font-size: 12px; opacity: .8; }

#foot { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 5px 16px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); background: var(--panel); }
#foot .foot-links { flex: none; white-space: nowrap; }

/* ---------- Map ---------- */
#map { flex: 1; height: 100%; background: #dfe6ec; position: relative; }

/* ---------- Time bar (date slider + calendar) ---------- */
#timebar {
  position: absolute; z-index: 1000; left: 23.5%; right: 23.5%; bottom: 22px;
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 18px; box-shadow: var(--shadow);
}
#timebar .tb-btn {
  flex: none; border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  border-radius: 9px; padding: 6px 11px; font-size: 13px; font-weight: 600; cursor: pointer;
}
#timebar .tb-btn:hover { border-color: var(--accent); }
#timebar .tb-btn.playing { background: var(--accent); color: #fff; border-color: var(--accent); }
#timebar .tb-now { color: var(--accent); }
#time-range { flex: 1; min-width: 180px; accent-color: var(--accent); cursor: pointer; }
#timebar .tb-date {
  flex: none; border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  border-radius: 9px; padding: 5px 8px; font-size: 13px; font-family: inherit;
}
/* 月份選擇器:label 用頁面語言顯示(fmtYM),原生 input 透明墊底只出月曆
   (原生 month input 顯示格式跟瀏覽器 UI 語言走,英文頁在中文瀏覽器會變「2026年07月」) */
#time-month-wrap { position: relative; flex: none; display: inline-flex; }
#time-month-label {
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  border-radius: 9px; padding: 5px 10px; font-size: 13px; white-space: nowrap; pointer-events: none;
}
#time-month-wrap #time-month {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0;
}
@media (max-width: 680px) {
  #timebar { left: 4%; right: 4%; bottom: 10px; padding: 8px 10px; gap: 6px; }
  #time-range { min-width: 90px; }
}

/* poster marker */
.mm-icon { background: none; border: none; }
.poster-pin {
  width: 52px; height: 72px; border-radius: 10px;
  background: #e9e2d2 center/cover no-repeat;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 12px rgba(15,23,42,.45);
  display: grid; place-items: center;
  transition: transform .12s ease;
}
.leaflet-marker-icon:hover .poster-pin { transform: scale(1.35); }

/* hover tooltip card */
.mm-tip { background: none; border: none; box-shadow: none; padding: 0; white-space: normal; }
.mm-tip::before { display: none; }
.tt-title, .tt-sub { overflow-wrap: anywhere; }
.tt {
  display: flex; gap: 12px; width: 300px; padding: 12px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow);
}
.tt-poster {
  width: 96px; height: 134px; flex: none; border-radius: 10px;
  background: #e9e2d2 center/cover no-repeat; display: grid; place-items: center;
}
.tt-meta { min-width: 0; align-self: center; }
.tt-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 5px; }
.tt-sub { font-size: 13px; color: var(--muted); }
.tt-date { font-size: 13px; color: var(--accent); margin-top: 7px; font-weight: 700; }

/* popup */
.mm-popup .leaflet-popup-content-wrapper { background: var(--panel); color: var(--text); border-radius: 14px; box-shadow: var(--shadow); }
.mm-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.mm-popup .leaflet-popup-tip { background: var(--panel); }
/* poster fills the full card height; its width follows aspect ratio (no crop,
   no blank space). The card widens to fit. */
.popup { display: flex; gap: 0; align-items: stretch; }
.pop-poster { height: 340px; width: auto; max-width: 340px; object-fit: cover; display: block; border-radius: 14px 0 0 14px; }
/* DEFINITE width (set inline by tile count in popupHtml) — never fit-content: Leaflet
   measures the popup to size the white wrapper, and fit-content made it under-measure →
   text+tiles overflowed the box. border-box keeps poster(≤340)+body(≤380) within maxWidth. */
.pop-body { box-sizing: border-box; flex: none; padding: 16px 18px; align-self: center; }
.p-tag { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 6px; color: var(--accent-ink); font-weight: 700; }
.p-tag.resident { background: var(--resident); }
.p-tag.tour { background: var(--tour); }
.p-title { font-size: 19px; font-weight: 800; margin: 8px 0 7px; color: var(--text); line-height: 1.2; }
/* official site sits on the title but is deliberately UN-advertised — identical to plain
   text, no arrow/underline/colour — so it doesn't pull clicks from the affiliate tiles. */
.p-title-link { color: inherit; text-decoration: none; }
.p-title-link:hover { color: inherit; text-decoration: none; }
.p-row { font-size: 14px; color: var(--muted); margin: 4px 0; }
.p-row b { color: var(--text); font-weight: 600; }
.p-row.warn { color: #92670a; }
/* override Leaflet's default .leaflet-popup-content a colour (higher specificity) */
.mm-popup .pop-cta {
  display: inline-block; margin-top: 11px; font-size: 13px; font-weight: 700;
  color: #ffffff !important; background: var(--accent); padding: 7px 13px;
  border-radius: 9px; text-decoration: none;
}
.mm-popup .pop-cta:hover { filter: brightness(1.08); text-decoration: none; }
/* stacked, equal-width, aligned link buttons grouped under a small label */
.pop-link-group { margin-top: 9px; }
.pop-link-group .pl-label {
  display: block; font-size: 11px; font-weight: 700; color: var(--muted);
  letter-spacing: .5px; margin-bottom: 4px;
}
.mm-popup .pop-cta.sm {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  padding: 6px 10px; font-size: 12px; margin: 0 0 5px 0;
}
/* ticket section: a clear "購票" header + square per-platform logo tiles in a row.
   header signals purpose (JustWatch/Songkick pattern); tiles read as tappable buttons. */
.pop-tix { margin-top: 13px; }
.pop-tix-h {
  font-size: 13px; font-weight: 800; color: var(--text, #1f2937);
  letter-spacing: .5px; margin-bottom: 9px;
}
/* tiles keep a fixed 110px (3 fit a full-width body); the BODY shrinks to fit when there
   are fewer tiles (see .pop-body width:fit-content) so a lone source doesn't strand blank
   space — the panel narrows rather than the tile stretching. */
.pop-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
/* Non-commission buy tiles (teatromadrid…) when a monetised tile exists: hidden,
   not removed — delete this one rule to switch them back on. Selector must outrank
   `.mm-popup .pop-tile` (0,2,0), hence the 3-class specificity. */
.mm-popup .pop-tile.pop-tile-hidden { display: none; }
.mm-popup .pop-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 8px; width: 110px; min-height: 120px; box-sizing: border-box; padding: 13px 6px 10px;
  border: 1px solid var(--border, #ddd3bf); border-radius: 14px; background: var(--panel);
  text-decoration: none; color: var(--text, #1f2937);
  transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
}
.mm-popup .pop-tile:hover {
  border-color: var(--accent); background: #fffdf6;
  box-shadow: 0 4px 12px rgba(15,23,42,.12);
  transform: translateY(-1px); text-decoration: none;
}
.pop-tile-ico { width: 52px; height: 52px; display: grid; place-items: center; }
.pop-tile-ico img { width: 52px; height: 52px; object-fit: contain; border-radius: 11px; }
.pop-tile-label {
  font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center;
  color: var(--text, #1f2937);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pop-tile-arr {
  font-size: 13px; line-height: 1; margin-top: auto;
  color: var(--muted, #94a3b8); transition: color .15s, transform .15s;
}
.mm-popup .pop-tile:hover .pop-tile-arr { color: var(--accent); transform: translateX(2px); }

/* marker cluster — size scales with count via iconCreateFunction */
.mm-cluster-wrap { background: none; border: none; }
.mm-cluster {
  display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-weight: 800;
  border: 3px solid rgba(255,255,255,.85);
  box-shadow: 0 3px 10px rgba(15,23,42,.35);
  transition: transform .12s ease;
}
.mm-cluster span { font-size: inherit; line-height: 1; }
/* hover: JS raises z-index above neighbours + grow slightly, like the poster cards */
.leaflet-marker-icon:hover .mm-cluster { transform: scale(1.25); }

/* visible live zoom-level readout (under the +/- buttons) */
.mm-zoom-level {
  background: var(--panel, #fdfaf2); border: 1px solid var(--border, #ddd3bf); border-radius: 6px;
  padding: 3px 9px; font: 700 13px/1 system-ui, sans-serif;
  color: var(--text, #221f18); box-shadow: 0 1px 4px rgba(34,31,24,.2);
  text-align: center; pointer-events: none; user-select: none;
}

/* ============ Top filter bar layout (filters live over the map) ============
   The tradition pills moved out of the narrow sidebar into a bar over the map, so the
   sidebar is all list. The live count sits under the search box (v1.18.1). */
#topnav .foot-link { color: var(--muted); text-decoration: none; font-size: 13px; }
#topnav .foot-link:hover { color: var(--accent); }

#mapcol { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#mapcol #map { flex: 1; height: auto; min-height: 0; }

#filterbar { flex: none; min-width: 0; display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 16px 4px; background: var(--panel); border-bottom: 1px solid var(--border); }
#filterbar .fb-lbl { flex: none; font-size: 11px; font-weight: 600; color: var(--muted); padding-top: 7px; }
/* full tradition names on one row; if they don't fit, a thin light scrollbar appears */
#filterbar #tag-filters { flex: 1; min-width: 0; margin: 0; display: flex; flex-wrap: nowrap; gap: 6px;
  overflow-x: auto; overflow-y: hidden; padding-bottom: 6px;
  scrollbar-width: thin; scrollbar-color: #cfc4a9 #efe8d8; }
#filterbar #tag-filters::-webkit-scrollbar { height: 7px; }
#filterbar #tag-filters::-webkit-scrollbar-thumb { background: #cfc4a9; border-radius: 4px; }
#filterbar #tag-filters::-webkit-scrollbar-thumb:hover { background: #bdb08f; }
#filterbar #tag-filters::-webkit-scrollbar-track { background: #efe8d8; border-radius: 4px; }
#filterbar .tagchip { flex: none; white-space: nowrap; color: #45403a; }
#filterbar .tagchip .tcount { font-size: 1em; color: #6d6555; }

/* denser sidebar cards — more shows visible now the filters left the sidebar */
#show-list .show-item { padding: 7px 11px; gap: 10px; }
#show-list .show-item .thumb { width: 44px; height: 63px; }
#show-list .show-item .title { font-size: 14.5px; }
#show-list .ven, #show-list .city, #show-list .vdate, #show-list .city-count { font-size: 12.5px; }
#show-list .show-group { margin: 3px 3px; }
#show-list .stop .stop-thumb { width: 32px; height: 46px; }

@media (max-width: 680px) {
  #app { flex-direction: column; }
  #sidebar { width: 100%; min-width: 0; height: 42%; }
  #mapcol { height: 58%; }
  #topbar { padding: 0 8px; height: 52px; }
  #topnav { gap: 6px; }
  #brand { gap: 7px; }
  #brand .brand-logo { height: 28px; }
  #brand .logo { font-size: 17px; }
  #brand .tagline { display: none; }
  #topnav .foot-link { display: none; }        /* Privacy/Terms drop off the phone nav (kept on desktop) */
  #topnav .nav-link { display: none; }         /* Privacy/Terms/Guide drop off the phone nav (My Musicals + lang stay) */
  #lang-switch .lang-opt { padding: 4px 7px; }
  #filterbar { padding: 6px 12px 3px; }
  .nav-cta { font-size: 13px; padding: 7px 12px; }
  /* 360px(Galaxy 級)窄機仍要塞下 品牌+繁简EN+CTA:上面全部收緊後總寬 ~310px */
  /* ── 手機版 popup = 底部彈出可捲 sheet ──(2026-07-04 使用者回報)
     原本錨定 marker:桌面 340px 橫卡在手機短地圖框裝不下,且 autoPan 一開就觸發 markercluster 重聚合→marker+popup
     被移除=「閃一下消失」。改成:autoPan 關掉(見 app.js)+ 這裡把 popup 用 position:fixed 貼到畫面底部、滿寬、
     可上下拉動。不再錨定 marker→不飄出畫面、不被側欄擋、不受地圖移動影響。 */
  .mm-popup.leaflet-popup { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; margin: 0 !important; transform: none !important; width: 100% !important; max-width: 100% !important; z-index: 1200; }
  .mm-popup .leaflet-popup-content-wrapper { border-radius: 16px 16px 0 0; width: 100%; box-shadow: 0 -10px 34px rgba(0,0,0,.42); }
  .mm-popup .leaflet-popup-tip-container { display: none; }   /* 底部彈出不需要指向 marker 的尖角 */
  /* 關閉鈕:sheet 右上角、圓形深底、觸控友善(原本 Leaflet 定位在移到 body 後會跑掉) */
  .mm-popup .leaflet-popup-close-button { position: absolute !important; top: 8px; right: 10px; width: 34px; height: 34px; font-size: 24px; line-height: 32px; text-align: center; background: rgba(0,0,0,.42); color: #fff; border-radius: 50%; z-index: 3; }
  .popup { flex-direction: column; }
  .pop-poster { height: auto; width: 100%; max-width: 100%; max-height: 24vh; border-radius: 0; }
  .pop-body { width: 100% !important; align-self: stretch; padding: 14px 16px 18px; }
  .mm-popup .leaflet-popup-content { max-height: 66vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; margin: 0; }
  .p-title { font-size: 17px; }
}