/* ═══════════════════════════════════════════════════════════
   MDW 2026 — Main Application Styles
   ═══════════════════════════════════════════════════════════ */

/* Legal footer — small, unobtrusive. Sidebar variant + full-page variant. */
.mdw-legal {
  font-size: 11px;
  color: var(--text2);
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  line-height: 1.6;
  opacity: 0.85;
}
.mdw-legal a {
  color: var(--text2);
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
  margin-right: 10px;
  white-space: nowrap;
}
.mdw-legal a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.mdw-legal .op { display: block; margin-top: 6px; font-size: 10px; opacity: 0.7; }
.mdw-legal .links { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 2px; }

.app-footer {
  max-width: 1100px;
  margin: 32px auto 0;
  padding: 14px 20px 28px;
  border-top: 1px solid var(--border);
  color: var(--text2);
  font-size: 10px;
  line-height: 1.55;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.app-footer:hover { opacity: 0.9; }
.app-footer a { color: var(--text2); text-decoration: none; border-bottom: 1px dotted var(--border); }
.app-footer a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.app-footer .footer-links a { margin-right: 10px; font-size: 10px; }
.app-footer .footer-op { font-weight: 400; }
/* Strip bold emphasis on the operator name in footer — no bragging. */
.app-footer .footer-op strong { font-weight: 400; color: inherit; }

:root {
  /* Dark theme (default).
     Palette philosophy: chroma ~0.07 oklch, L ~70%. Natural-dye family —
     ceramic, clay, wheat, sage, plum — so nothing shouts. Hues still
     distinguishable at the map-marker scale. */
  --bg: #0a0a0a;
  --surface: #141414;
  --surface2: #1e1e1e;
  --border: #2a2a2a;
  --text: #e0e0e0;
  --text2: #888;
  --accent: #7aaea8;   /* ceramic teal  (was #4ecdc4) */
  --accent2: #c08070;  /* terracotta    (was #ff6b6b) */
  --free: #8aa888;     /* sage          (was #4ecdc4) */
  --prereg: #c9a86a;   /* honey         (was #ffd93d) */
  --invite: #c08070;   /* terracotta    (was #ff6b6b) */
  --selected: #d4b882; /* brass         (was #ffd700) */

  --c-like: #c08070;     /* terracotta */
  --c-bookmark: #c9a86a; /* honey */
  --c-planned: #7aaea8;  /* ceramic */
  --c-visited: #a894b8;  /* plum */

  --map-fallback: #1a1a1a;
  --map-tile-url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png';

  /* Translucent panels floating over the map (attribution, count, legend,
     timeline strip). Theme-aware so light-mode map doesn't show dark chips. */
  --overlay-bg: rgba(10, 10, 10, 0.85);
  --overlay-bg-strong: rgba(10, 10, 10, 0.92);
  --overlay-bg-soft: rgba(10, 10, 10, 0.72);
  --pill-count-bg: rgba(255, 255, 255, 0.1);

  /* Unified font stack — single source of truth. Any element that needs
     a different face should reference --font-mono explicitly; otherwise
     it inherits --font-sans through body. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, monospace;
}

[data-theme="light"] {
  --bg: #ffffff;
  --surface: #fafafa;
  --surface2: #f0f0f0;
  --border: #d8d8d8;
  --text: #1a1a1a;
  --text2: #666;
  /* Light theme — darker tonal variants of the same family for contrast. */
  --accent: #4d8882;   /* deeper ceramic  (was #0d9488) */
  --accent2: #9a4a3a;  /* deeper clay     (was #dc2626) */
  --free: #5a7e5a;     /* deeper sage     (was #0d9488) */
  --prereg: #8c6e2e;   /* deeper honey    (was #ca8a04) */
  --invite: #9a4a3a;   /* deeper clay     (was #dc2626) */
  --selected: #8c7330; /* deeper brass    (was #ca8a04) */

  --c-like: #9a4a3a;
  --c-bookmark: #8c6e2e;
  --c-planned: #4d8882;
  --c-visited: #6e5e80; /* deeper plum (was #7c3aed) */

  --map-fallback: #e8e8e8;

  --overlay-bg: rgba(255, 255, 255, 0.92);
  --overlay-bg-strong: rgba(255, 255, 255, 0.96);
  --overlay-bg-soft: rgba(255, 255, 255, 0.85);
  --pill-count-bg: rgba(0, 0, 0, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── Font-size scale (data-fs on <html>) ───
   Uses CSS `zoom` on text-heavy containers. Deliberately skips
   .map-container so Leaflet marker positions are unaffected. */
html[data-fs="sm"] .header,
html[data-fs="sm"] .sidebar,
html[data-fs="sm"] .panel,
html[data-fs="sm"] .mobile-nav,
html[data-fs="sm"] .detail-overlay,
html[data-fs="sm"] .day-legend,
html[data-fs="sm"] .map-legend { zoom: 0.9; }
html[data-fs="lg"] .header,
html[data-fs="lg"] .sidebar,
html[data-fs="lg"] .panel,
html[data-fs="lg"] .mobile-nav,
html[data-fs="lg"] .detail-overlay,
html[data-fs="lg"] .day-legend,
html[data-fs="lg"] .map-legend { zoom: 1.12; }
html[data-fs="xl"] .header,
html[data-fs="xl"] .sidebar,
html[data-fs="xl"] .panel,
html[data-fs="xl"] .mobile-nav,
html[data-fs="xl"] .detail-overlay,
html[data-fs="xl"] .day-legend,
html[data-fs="xl"] .map-legend { zoom: 1.25; }

/* Sidebar "Display" section — font-size buttons */
.fs-pills { display: flex; gap: 6px; }
.fs-pill {
  flex: 1;
  padding: 8px 10px;
  text-align: center;
  background: var(--surface);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
  line-height: 1;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.fs-pill:hover { color: var(--text); border-color: var(--text2); }
.fs-pill.active { background: var(--accent); color: #0a0a0a; border-color: var(--accent); }
.fs-pill[data-fs-set="sm"] { font-size: 11px; }
.fs-pill[data-fs-set="md"] { font-size: 13px; }
.fs-pill[data-fs-set="lg"] { font-size: 15px; }
.fs-pill[data-fs-set="xl"] { font-size: 17px; }

/* Match html background to theme — on iOS PWA, the safe-area regions
   (under the notch + home indicator) fall back to the html element's
   background when content doesn't cover them. Without this, home
   indicator area shows the browser-default white strip. */
html {
  background: var(--bg);
  color-scheme: dark light;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* SEO link graph on index.html — kept in DOM for crawlers (anchor text
   to every hub), clipped to 1×1 offscreen for users. Previously relied
   on body{overflow:hidden; height:100dvh} to hide below the fold, but
   iOS Safari rubber-band scroll and URL-bar collapse could reveal it
   mid-gesture, wrecking the fullscreen app layout. */
.seo-footer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Override Leaflet / MarkerCluster / Supabase widget internal fonts —
   third-party CSS from CDN otherwise wins over our inherited stack. */
.leaflet-container,
.leaflet-container input,
.leaflet-container button,
.leaflet-popup-content,
.leaflet-control,
.marker-cluster div {
  font-family: var(--font-sans) !important;
}

/* ─── Layout ─── */

.app {
  display: grid;
  grid-template-columns: 320px 380px 1fr;
  grid-template-rows: 56px 1fr;
  height: 100dvh;
}
/* Visual swap of map ↔ panel without touching DOM. */
.panel         { order: 2; }
.map-container { order: 3; }

.header {
  grid-column: 1 / -1;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 20px;
}
.header h1 { font-size: 16px; font-weight: 600; letter-spacing: 0.5px; }
.header h1 span { color: var(--accent); }
.header .stats { display: flex; gap: 16px; font-size: 11px; color: var(--text2); }
.header .stats b { color: var(--text); }

/* Primary nav surfaces hub pages (Districts / Designers / FAQ) to users on the
   map page. Mobile version appears at the top of the sidebar drawer instead. */
.header-nav {
  display: flex;
  gap: 18px;
  font-size: 12px;
  letter-spacing: 0.4px;
  margin-left: 4px;
}
.header-nav a {
  color: var(--text2);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.header-nav a:hover { color: var(--text); border-bottom-color: var(--accent); }
.header-nav a.accent { color: var(--accent); font-weight: 500; }
.header-nav a.accent:hover { border-bottom-color: var(--accent); opacity: 0.85; }
@media (max-width: 900px) {
  .header-nav { display: none; }
}

.mobile-hub-nav {
  display: none;
  padding: 14px 16px 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.mobile-hub-nav h3 {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text2);
  margin: 0 0 8px;
  font-weight: 600;
}
.mobile-hub-nav a {
  display: block;
  padding: 10px 0;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.mobile-hub-nav a:last-child { border-bottom: none; }
.mobile-hub-nav a.accent { color: var(--accent); font-weight: 500; }
@media (max-width: 900px) {
  .mobile-hub-nav { display: block; }
}

/* Brand logo — stacked "Milan" / "Design Week 2026" with year in accent.
   Used in both .header (index) and .top-bar (planner). Acts as the Home
   button: click resets filters on index.html (JS) and navigates back to
   /map on planner.html (via href). */
.brand {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text);
  text-decoration: none;
  line-height: 1;
  flex: 0 0 auto;
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
  transition: opacity 0.15s;
}
.brand:hover { opacity: 0.75; }
.brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.brand-line {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.brand-year {
  color: var(--accent);
}
.brand-sub {
  color: var(--text2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 12px;
}

/* ─── Filters ─── */

.filter-section { margin-bottom: 20px; }
.filter-section h3 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text2);
  margin-bottom: 8px;
}

/* Group divider: separates YOU / FILTER tiers inside the sidebar.
   Thin top rule + small uppercase label, heavier breathing above than below. */
.filter-group-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text2);
  opacity: 0.55;
  margin: 24px 0 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-weight: 600;
}
.filter-group-label:first-of-type,
.sidebar > .filter-group-label:first-child {
  margin-top: 4px;
  padding-top: 0;
  border-top: none;
}

/* Sub-label inside a combined filter-section (e.g., "When" holds both
   Date and Hours). Less assertive than the h3; reads as a secondary
   header inside the section. */
.filter-sub-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text2);
  opacity: 0.7;
  margin: 12px 0 6px;
}
.filter-section > .filter-sub-label:first-of-type,
.filter-section > h3 + .filter-sub-label {
  margin-top: 0;
}

.search-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
  border-radius: 4px;
  outline: none;
}
.search-input:focus { border-color: var(--accent); }

/* Day pills */
.day-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.day-pill {
  padding: 4px 8px;
  font-size: 11px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}
.day-pill:hover { border-color: var(--accent); }
.day-pill.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 600;
}
/* M5: focus-visible outlines for keyboard users */
.day-pill:focus-visible,
.access-pill:focus-visible,
.chip:focus-visible,
.interest-pill:focus-visible,
.time-preset:focus-visible,
.mobile-nav-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Chip list (district, category) */
.chip-list { display: flex; flex-wrap: wrap; gap: 4px; }
.chip-list .chip-group-title {
  width: 100%;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text2);
  margin: 6px 0 2px;
}
.chip-list .chip-group-title:first-child { margin-top: 0; }
.chip-list .chip-group-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
}
.chip {
  padding: 3px 8px;
  font-size: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}
.chip:hover { border-color: var(--accent); }
.chip.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.chip .count { color: var(--text2); margin-left: 4px; }
.chip.active .count { color: rgba(0,0,0,0.5); }

/* Access pills */
.access-pills { display: flex; gap: 4px; }

/* Source pills variant — 7 pills (fuorisalone / salone / alcova / brera /
   5vie / dropcity + All). Scroll horizontally on narrow viewports. */
.access-pills.source-pills-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;  /* room for -webkit-scrollbar if enabled */
}
.access-pills.source-pills-scroll::-webkit-scrollbar { display: none; }
.access-pills.source-pills-scroll .access-pill {
  flex: 0 0 auto;
  white-space: nowrap;
}
.access-pill {
  padding: 4px 10px;
  font-size: 11px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
}
.access-pill:hover { border-color: var(--text2); }
.access-pill.active[data-access="free"] { background: var(--free); color: var(--bg); border-color: var(--free); }
.access-pill.active[data-access="pre-registration"] { background: var(--prereg); color: var(--bg); border-color: var(--prereg); }
.access-pill.active[data-access="invitation"] { background: var(--invite); color: var(--bg); border-color: var(--invite); }
/* "All" is the no-filter baseline — don't visually "press" it just because
   it's the current state. Users expected: default load = nothing pressed.
   The class stays for internal state tracking; only the highlight is muted. */
.access-pill.active[data-access="all"],
.access-pill.active[data-source="all"],
.day-pill.active[data-day="all"] {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border);
  font-weight: normal;
}
.time-preset.active[data-from="8"][data-to="25"] {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border);
  font-weight: normal;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  margin-top: 4px;
  cursor: pointer;
}
.toggle-row input[type="checkbox"] { accent-color: var(--accent); }

/* Time range slider */
.time-range-wrap {
  position: relative;
  height: 36px;
  margin-top: 4px;
}
.time-range-wrap input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 36px;
  background: none;
  pointer-events: none;
  outline: none;
}
/* Slider thumb — WebKit and Firefox both need explicit rules.
   22px default / 28px on touch. Previously 16px webkit-only: invisible
   on Firefox mobile and too small to grab on any phone. */
.time-range-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.time-range-wrap input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
  pointer-events: auto;
}
.time-range-wrap input[type="range"]::-moz-range-track {
  background: transparent;
  border: none;
}
@media (pointer: coarse) {
  .time-range-wrap input[type="range"]::-webkit-slider-thumb,
  .time-range-wrap input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }
}
.time-track {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--surface2);
  border-radius: 2px;
}
.time-track-fill {
  position: absolute;
  top: 16px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
}
.time-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text2);
  margin-top: 2px;
}
.time-value {
  font-size: 12px;
  color: var(--accent);
  text-align: center;
  margin-bottom: 4px;
  font-weight: 600;
}
.time-presets {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.time-preset {
  padding: 3px 8px;
  font-size: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  color: var(--text2);
}
.time-preset:hover { border-color: var(--accent); color: var(--text); }

/* ─── Map ─── */

.map-container { position: relative; overflow: hidden; background: var(--bg); }
#map { width: 100%; height: 100%; background: var(--bg); }

/* Override Leaflet defaults — empty tile slots during load flash gray/white.
   Force theme-matching bg at every layer + on the <img> tiles themselves. */
.leaflet-container,
.leaflet-map-pane,
.leaflet-tile-pane,
.leaflet-layer,
.leaflet-tile-container,
.leaflet-pane {
  background: var(--map-fallback) !important;
}
.leaflet-tile {
  background: var(--map-fallback) !important;
}

/* Leaflet controls — zoom +/− buttons, attribution bar default to white */
.leaflet-bar,
.leaflet-bar a,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.leaflet-bar a:hover {
  background: var(--surface2) !important;
  color: var(--accent) !important;
}
.leaflet-bar a.leaflet-disabled {
  background: var(--surface) !important;
  color: var(--text2) !important;
}
.leaflet-bar {
  box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}

.leaflet-control-attribution {
  background: var(--overlay-bg-soft) !important;
  color: var(--text2) !important;
  backdrop-filter: blur(6px);
  padding: 2px 6px !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a {
  color: var(--accent) !important;
}
/* Hide the Ukraine flag emoji in attribution */
.leaflet-attribution-flag { display: none !important; }

.map-count {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  background: var(--overlay-bg);
  border: 1px solid var(--border);
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 4px;
  backdrop-filter: blur(8px);
}
.map-count b { color: var(--accent); }

/* Day legend (shown in Planning mode) */
.day-legend {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 999;
  background: var(--overlay-bg);
  border: 1px solid var(--border);
  padding: 8px 12px;
  font-size: 10px;
  border-radius: 4px;
  backdrop-filter: blur(8px);
}
.day-legend.active { display: block; }

/* Map legend — marker color key, shown bottom-left on desktop */
.map-legend {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 999;
  background: var(--overlay-bg);
  border: 1px solid var(--border);
  padding: 6px 10px;
  font-size: 10px;
  border-radius: 4px;
  backdrop-filter: blur(8px);
  line-height: 1.4;
  pointer-events: none;  /* don't block map clicks */
}
.map-legend .ml-row { display: flex; align-items: center; gap: 6px; }
.map-legend .ml-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}
.map-legend .ml-teal   { background: #7aaea8; }
.map-legend .ml-orange { background: #c9996f; }
.map-legend .ml-terracotta { background: #b07a4f; }
.map-legend .ml-gold   { background: #d4b882; }

/* Hide map legend on mobile — sidebar Source pills already serve */
@media (max-width: 768px) { .map-legend { display: none; } }

/* ─── Fiera floor plan — button + modal ─── */
.fiera-open-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 7px 10px;
  background: rgba(201, 153, 111, 0.12);
  border: 1px solid #c9996f;
  color: #c9996f;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.fiera-open-btn:hover { background: rgba(201, 153, 111, 0.22); }

.fiera-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fiera-modal.open { display: flex; }
.fiera-body { flex: 1; overflow: auto; padding: 0; }
.fiera-body .hall-map-wrap { margin: 0; border: none; border-radius: 0; }

@media (max-width: 768px) {
  .fiera-modal { padding: 0; }
  .fiera-modal-box { max-width: 100vw; max-height: 100vh; border-radius: 0; }
}

/* ─── Fiera modal: search strip + split map/list layout ─── */
.fiera-modal-box-split {
  /* The split layout needs wider-than-default sizing to avoid cramping
     the hall schematic when the list panel is present. */
  width: min(1400px, 96vw);
  max-height: 90vh;
}

.fiera-search-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.fiera-search-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  min-width: 0;
}
.fiera-search-wrap:focus-within { border-color: #c9996f; }
.fiera-search-icon {
  color: var(--text2);
  font-size: 14px;
  flex-shrink: 0;
}
.fiera-search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 0;
  outline: none;
  min-width: 0;
}
.fiera-search-input::-webkit-search-cancel-button { display: none; }
.fiera-search-clear {
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.fiera-search-clear:hover { color: var(--text); border-color: var(--text2); }
.fiera-search-count {
  font-size: 11px;
  color: var(--text2);
  white-space: nowrap;
  min-width: 90px;
  text-align: right;
}

.fiera-body-split {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.fiera-pane {
  overflow: auto;
  min-width: 0;
  min-height: 0;
}
.fiera-pane-map {
  flex: 1 1 58%;
  padding: 12px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.fiera-pane-map .hall-map-wrap {
  margin: 0;
  border: none;
  background: transparent;
  width: 100%;
}
.fiera-pane-list {
  flex: 1 1 42%;
  background: var(--surface2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fiera-list-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text);
  flex-shrink: 0;
}
.fiera-list-scope { flex: 1; min-width: 0; }
.fiera-list-scope-hall { font-weight: 600; color: var(--text); }
.fiera-list-scope-meta { color: var(--text2); font-weight: 400; }
.fiera-list-scope-hint {
  color: var(--text2);
  font-size: 11px;
  font-style: italic;
}
.fiera-list-hall-link {
  font-size: 11px;
  color: var(--text2);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  white-space: nowrap;
}
.fiera-list-hall-link:hover { color: #c9996f; border-color: #c9996f; }
.fiera-list-clear-hall {
  font-size: 11px;
  color: var(--text2);
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.fiera-list-clear-hall:hover { color: var(--text); border-color: var(--text2); }

.fiera-list-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text2);
  font-size: 12px;
}
.fiera-exh-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  overflow-y: auto;
  flex: 1;
}
.fiera-exh-group {
  padding: 10px 6px 4px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text2);
  font-weight: 600;
}
.fiera-exh-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.fiera-exh-row:hover,
.fiera-exh-row:focus {
  border-color: #c9996f;
  outline: none;
}
.fiera-exh-booth {
  font-size: 10px;
  font-weight: 700;
  color: #c9996f;
  letter-spacing: 1px;
  text-align: center;
}
.fiera-exh-body { min-width: 0; }
.fiera-exh-title {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.fiera-exh-meta {
  font-size: 10px;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fiera-exh-country {
  font-size: 9px;
  color: var(--text2);
  padding: 2px 6px;
  background: var(--surface2);
  border-radius: 3px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Hall visual states in match-mode */
.hallmap-hall.dimmed { opacity: 0.7; }
.hallmap-hall.dimmed.interactive { cursor: pointer; }
.hallmap-hall.dimmed:hover { opacity: 1; }

/* Mobile: stack map above list */
@media (max-width: 900px) {
  .fiera-modal-box-split {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
  .fiera-body-split { flex-direction: column; }
  .fiera-pane-map {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 8px;
  }
  .fiera-pane-list { flex: 1 1 auto; min-height: 280px; }
  .fiera-search-strip { padding: 8px 10px; }
  .fiera-search-count { display: none; }
}

/* ─── Shared exhibitor-detail overlay (hall page + Fiera modal) ─── */
/* z-index must clear .fiera-modal (10000) so the detail can open
   on top of the floor-plan modal without visual stacking bugs. */
.exh-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10100;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 16px;
}
.exh-modal.open { display: flex; }
.exh-modal-box {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-width: 560px;
  width: 100%;
  padding: 28px 28px 24px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
.exh-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  color: var(--text2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}
.exh-modal-close:hover { background: var(--surface2); color: var(--text); }
.exh-det-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
  padding-right: 36px;
  line-height: 1.3;
  color: var(--text);
}
.exh-det-sub {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 16px;
}
.exh-det-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.exh-det-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  font-size: 12px;
  line-height: 1.5;
}
.exh-det-label {
  color: var(--text2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-top: 2px;
}
.exh-det-value { color: var(--text); }
.exh-det-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0 14px;
  border-top: 1px solid var(--border);
}
.exh-det-link {
  font-size: 11px;
  padding: 6px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
}
.exh-det-link:hover { border-color: #c9996f; color: #c9996f; }
.exh-det-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.exh-det-action {
  font-size: 11px;
  padding: 8px 14px;
  background: #c9996f;
  border: 1px solid #c9996f;
  border-radius: 4px;
  color: #0a0a0a;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.exh-det-action:hover { filter: brightness(1.1); }
.exh-det-action-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
  font-weight: 500;
}
.exh-det-action-secondary:hover {
  color: #c9996f;
  border-color: #c9996f;
  filter: none;
}

.fiera-modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-width: 95vw;
  max-height: 90vh;
  width: 1400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}
.fiera-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.fiera-modal-head h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.fiera-close {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.fiera-close:hover { color: var(--c-like); }

/* Clean SVG schematic of the Salone hall layout. Used inline in the
   detail overlay + expanded in the Floor-plan modal. */
.hall-map-wrap {
  margin: 10px 0 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.hall-map-svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface2);
}

.hall-map-caption {
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text2, #888);
  background: var(--surface2, #1e1e1e);
  border-top: 1px solid var(--border, #2a2a2a);
  text-align: center;
}

/* Hover feedback for interactive (modal) mode */
.hallmap-hall.interactive rect {
  transition: stroke-width 0.12s, fill-opacity 0.12s;
}
.hallmap-hall.interactive:hover rect {
  stroke: #c9996f;
  stroke-width: 2;
  fill-opacity: 1;
}

/* Active hall outer ring pulse */
.hallmap-pulse {
  animation: hallmap-pulse-anim 1.6s ease-out infinite;
}
@keyframes hallmap-pulse-anim {
  0%   { opacity: 1; stroke-width: 2; }
  50%  { opacity: 0.3; stroke-width: 6; }
  100% { opacity: 1; stroke-width: 2; }
}

.fiera-hint {
  padding: 10px 20px 14px;
  font-size: 11px;
  color: var(--text2);
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--surface2);
}

@media (max-width: 768px) {
  .fiera-svg-wrap { padding: 8px; }
  .fiera-modal-head h3 { font-size: 12px; }
}

.day-legend h4 {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text2);
  margin-bottom: 6px;
  font-weight: 500;
}
.day-legend .dl-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.day-legend .dl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.4);
}
.day-legend .dl-label {
  color: var(--text);
  font-size: 10px;
}
.day-legend .dl-count {
  color: var(--text2);
  font-size: 9px;
  margin-left: auto;
}

/* ─── Timeline strip (bottom, Planning mode) ─── */

.timeline-strip {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 998;
  background: var(--overlay-bg-strong);
  border-top: 1px solid var(--border);
  padding: 10px 14px 12px;
  backdrop-filter: blur(8px);
  font-size: 10px;
}
.timeline-strip.active { display: block; }

.tl-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.tl-day-chip {
  padding: 3px 10px;
  font-size: 10px;
  font-family: inherit;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 3px;
  cursor: pointer;
}
.tl-day-chip:hover { color: var(--text); }
.tl-day-chip.active { font-weight: 600; }

.tl-summary {
  margin-left: auto;
  color: var(--text2);
  font-size: 10px;
}

.tl-axis {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text2);
  margin-bottom: 2px;
  padding: 0 2px;
}
.tl-tick { text-align: center; }

.tl-track {
  position: relative;
  height: 28px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.tl-gap {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(201,168,106,0.08),
    rgba(201,168,106,0.08) 6px,
    transparent 6px,
    transparent 12px
  );
  border-left: 1px dashed rgba(201,168,106,0.3);
  border-right: 1px dashed rgba(201,168,106,0.3);
  pointer-events: none;
}

.tl-block {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 4px;
  opacity: 0.9;
  transition: opacity 0.1s;
  z-index: 2;
}
.tl-block:hover { opacity: 1; }
.tl-block-label {
  font-size: 9px;
  color: #000;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ─── Event list panel ─── */

.panel {
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: relative;           /* anchor for .detail-overlay inside */
}
/* Search sits directly above the event list — primary discovery affordance.
   z-index must be above .detail-overlay (10) so it stays visible when an
   event detail is open inside the panel. */
.panel-search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 20;
}
.panel-search .search-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  border-radius: 6px;
  outline: none;
}
.panel-search .search-input:focus {
  border-color: var(--accent);
  background: var(--bg);
}
.panel-header {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.panel-header #list-count { flex-shrink: 0; }

/* Quick filter bar — 3 high-value toggles directly under the search input.
   Scrolls horizontally on narrow viewports so tiny mobile widths don't
   force a wrap-and-stack. */
.panel-quick {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 48px;  /* approx height of .panel-search */
  z-index: 19;
}
.panel-quick::-webkit-scrollbar { display: none; }
.quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: 11px;
  color: var(--text2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
}
.quick-btn:hover { color: var(--text); border-color: var(--text2); }
.quick-btn .btn-icon { width: 12px; height: 12px; display: inline-flex; }
.quick-btn .btn-icon svg { width: 12px; height: 12px; }
.quick-btn.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.quick-btn.active .btn-icon { color: var(--bg); }

/* Compact time range row — lives right under .panel-quick. Full-width
   slider with tick labels, no text readout (fill bar does the job).
   NOT sticky: three sticky rows (search + quick + hours) crowds the
   panel top. Hours scrolls with the list. */
.panel-hours {
  padding: 4px 14px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.panel-hours .time-range-wrap {
  margin-top: 0;
  margin-bottom: 0;
}
.panel-hours .time-labels {
  font-size: 9px;
  padding: 0 4px;
  margin-top: 0;
}

/* Active filter chips — inline summary of every non-default filter with × to
   clear. Renders in .panel-header alongside the count. */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  justify-content: flex-end;
}
.active-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 8px;
  font-size: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  white-space: nowrap;
}
.active-filter-x {
  width: 14px;
  height: 14px;
  line-height: 12px;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  font-family: inherit;
  border-radius: 50%;
}
.active-filter-x:hover { background: var(--bg); color: var(--c-like); }

/* Seed bar — shown under .panel-search when the current query resolves
   to one or more known nodes in brand_network.json. Hidden when empty. */
.panel-seed {
  display: none;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 10px;
  color: var(--text2);
}
.panel-seed.active { display: flex; }
.panel-seed .seed-label {
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-right: 2px;
}
.panel-seed .seed-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  white-space: nowrap;
}
.panel-seed .seed-chip .type {
  opacity: 0.55;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Seed-chip family — muted border + softer text. Same palette grammar as map. */
.panel-seed .seed-chip-brand     { border-color: #b89a4f; color: #d4b882; }
.panel-seed .seed-chip-designer  { border-color: #a894b8; color: #c2b3cf; }
.panel-seed .seed-chip-publisher { border-color: #8095b3; color: #b1c0d4; }
.panel-seed .seed-chip-venue     { border-color: #8aa888; color: #b0c8af; }
.panel-seed .seed-chip-group     { border-color: #b98a98; color: #d0b5bd; }
.panel-seed .seed-chip-holding   { border-color: #b98a98; color: #d0b5bd; }
.panel-seed .seed-chip-gallery   { border-color: #c9996f; color: #d8b59a; }
.panel-seed .seed-chip-institution { border-color: #6b9080; color: #99b8a6; }
.panel-seed .seed-chip-platform  { border-color: #5c7a89; color: #8fa5b1; }
.panel-seed .seed-stats { margin-left: auto; font-size: 10px; opacity: 0.7; }
.panel-seed .seed-clear {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.panel-seed .seed-clear:hover { color: var(--accent); border-color: var(--accent); }

.event-list {
  flex: 1;
  overflow-y: auto;
  /* pan-y lets the list scroll vertically while denying the browser the
     option to hijack the gesture for pull-to-refresh / sheet drag. Without
     this, fast swipes in the list can leak into a sheet drag. */
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.event-card {
  display: block;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
  color: var(--text);
  text-decoration: none;
}
.event-card:hover { background: var(--surface2); }
.event-card.active { background: var(--surface2); border-left: 3px solid var(--accent); }
.ev-title { font-size: 12px; font-weight: 500; margin-bottom: 3px; line-height: 1.3; }
.ev-title .star { color: var(--selected); font-size: 10px; }
.ev-meta { font-size: 10px; color: var(--text2); }
.ev-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.ev-tag {
  font-size: 9px;
  padding: 1px 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text2);
}

/* ─── Network-expansion grouping (Q.K3) ─── */
/* When a search surfaces events via the brand-network graph (not a direct
 * title/address substring match), group them under explicit section headers
 * and tint the cards so the user can tell which matches are related vs.
 * direct. Clicking the "via Apartamento" badge pivots the search to that
 * brand node so the user can traverse the graph manually. */
.ev-group-header {
  padding: 8px 12px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.ev-group-header-hop0 { color: var(--accent); }
.ev-group-header-hop1 { color: #b8885a; }
.ev-group-header-hop2 { color: var(--text2); opacity: 0.8; }
.event-card-network { opacity: 0.88; }
.event-card-network-hop2 { opacity: 0.78; }
.event-card-network::before {
  content: '';
  display: inline-block;
  width: 3px;
  align-self: stretch;
  margin-right: 8px;
  background: #b8885a;
  border-radius: 1px;
  float: left;
  height: 100%;
}
.event-card-network-hop2::before { background: var(--text2); }
.ev-network-badge {
  display: inline-block;
  margin-top: 5px;
  font-size: 9px;
  padding: 1px 6px;
  background: rgba(184, 136, 90, 0.12);
  border: 1px solid rgba(184, 136, 90, 0.4);
  border-radius: 10px;
  color: #b8885a;
  cursor: pointer;
  font-weight: 500;
}
.ev-network-badge:hover {
  background: rgba(184, 136, 90, 0.22);
  border-color: #b8885a;
}
.ev-network-badge-hop2 {
  background: rgba(140, 140, 140, 0.1);
  border-color: rgba(140, 140, 140, 0.4);
  color: var(--text2);
}

/* ─── Event detail: network-relations hint + section ─── */
/* Hint: 1-line link under the action bar summarising "network reaches N events
 * via X / Y / Z". Clicking scrolls to the full section below. */
.det-network-hint-wrap {
  margin: 6px 0 12px;
}
.det-network-hint {
  display: inline-block;
  padding: 6px 10px;
  font-size: 11px;
  background: rgba(122, 174, 168, 0.08);
  border: 1px solid rgba(122, 174, 168, 0.32);
  border-radius: 4px;
  color: var(--accent);
  text-decoration: none;
  transition: background 0.15s;
}
.det-network-hint:hover {
  background: rgba(122, 174, 168, 0.16);
  text-decoration: none;
}

/* Shared heading for Schedule / Comments / Related via network —
   each sits in its own visually separated block so the detail panel
   doesn't read as one continuous wall of text. */
.det-section-title {
  font-size: 12px;
  font-weight: 600;
  margin: 28px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--text);
}

/* Full section — grouped related events, listed per "via" node. */
.det-network-section {
  margin-top: 28px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.det-network-section-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text);
}
.det-network-group { margin-bottom: 14px; }
.det-network-group:last-child { margin-bottom: 0; }
.det-network-group-caption {
  font-size: 10px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.det-network-row {
  padding: 8px 10px;
  border-left: 2px solid rgba(184, 136, 90, 0.5);
  background: var(--surface2);
  margin-bottom: 4px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.det-network-row:hover {
  background: var(--surface);
  border-left-color: var(--accent);
}
.det-network-row-title {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.det-network-row-meta {
  font-size: 10px;
  color: var(--text2);
  margin-top: 2px;
}

/* ─── Detail overlay ─── */

/* JS moves this element inside .panel on init, so `position: absolute`
   anchors it to the panel column automatically. Overlay sits above the
   sticky search bar (z:20) so the event title is never covered. */
.detail-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface);
  z-index: 30;
  overflow-y: auto;
}
.detail-overlay.open { display: block; }
.detail-overlay[hidden] { display: none !important; }

.detail-close {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  width: 36px; height: 36px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

/* No top padding — the sticky header sits at y=0 of content and provides
   its own 16px top padding. Prevents the sticky from having to use
   `top: -16px` (which clipped 16px off its visible height when stuck). */
.detail-content { padding: 0 16px 16px; }
.detail-content h2 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  padding-right: 40px;
  line-height: 1.4;
}

/* Sticky header inside the detail overlay — title + Share + × close +
   interest bar stay pinned at the top while the rest of the content
   scrolls. `top: 0` means no clipping when stuck: visible height is
   identical at-rest and stuck. Horizontal negative margin lets the
   opaque background span the full overlay width (content has 16px
   horizontal padding it needs to counteract). */
.detail-sticky-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  margin: 0 -16px 12px;
  padding: 16px 16px 8px;
  border-bottom: 1px solid var(--border);
}
.detail-sticky-head .interest-bar { margin-bottom: 0; }
.det-desc-wrap { margin-bottom: 16px; }
.det-desc { font-size: 12px; line-height: 1.6; color: var(--text2); }
.det-desc-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.det-desc-toggle {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.det-desc-toggle:hover { opacity: 0.75; }
.det-row { display: flex; gap: 8px; font-size: 11px; margin-bottom: 6px; }
.det-label { color: var(--text2); min-width: 70px; }
.det-link { color: var(--accent); }

/* Schedule table in detail */
.sched-table {
  width: 100%;
  font-size: 11px;
  border-collapse: collapse;
  margin-top: 12px;
}
.sched-table th {
  text-align: left;
  color: var(--text2);
  font-weight: normal;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
}
.sched-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
}
.abadge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 10px;
}
.abadge-free { background: var(--free); color: var(--bg); }
.abadge-prereg { background: var(--prereg); color: var(--bg); }
.abadge-invite { background: var(--invite); color: var(--bg); }

/* ─── Interest UI (in detail + sidebar) ─── */

.interest-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}
.int-btn {
  flex: 1;
  padding: 6px 0;
  font-family: inherit;
  font-size: 11px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.int-btn svg { width: 13px; height: 13px; }
.int-btn:hover { border-color: var(--text); color: var(--text); }
.int-btn.active-like     { background: #c0807022; border-color: var(--c-like);     color: var(--c-like); }
.int-btn.active-bookmark { background: #c9a86a22; border-color: var(--c-bookmark); color: var(--c-bookmark); }
.int-btn.active-planned  { background: #7aaea822; border-color: var(--c-planned);  color: var(--c-planned); }
.int-btn.active-visited  { background: #a894b822; border-color: var(--c-visited);  color: var(--c-visited); }

/* Plan form */
.plan-form {
  display: none;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 14px;
}
.plan-form.open { display: block; }
.plan-form label {
  font-size: 10px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 3px;
  margin-top: 8px;
}
.plan-form label:first-child { margin-top: 0; }
.plan-form input[type="time"],
.plan-form textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 8px;
  font-family: inherit;
  font-size: 11px;
  border-radius: 3px;
  outline: none;
}
.plan-form textarea { height: 48px; resize: vertical; }

/* Day-button grid — replaces the 7-day dropdown (faster tap target) */
.day-btn-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  border-radius: 3px;
}
.day-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 5px 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.1s;
  line-height: 1;
}
.day-btn-d {
  font-size: 9px;
  letter-spacing: 0.3px;
  opacity: 0.75;
}
.day-btn-n {
  font-size: 13px;
  font-weight: 600;
}
.day-btn:hover { border-color: var(--text); color: var(--text); }
.day-btn.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.day-btn.active .day-btn-d { opacity: 1; }
.day-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Compact variant inside map popup — same grid, smaller padding */
.popup-plan .day-btn {
  padding: 3px 1px;
}
.popup-plan .day-btn-d { font-size: 8px; }
.popup-plan .day-btn-n { font-size: 11px; }
.popup-plan .day-btn-grid { gap: 2px; margin-bottom: 4px; }

/* Multi-slot list inside plan/visit panels */
.plan-slot-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.plan-slot-empty {
  font-size: 11px;
  color: var(--text2);
  font-style: italic;
  padding: 6px 0;
}
.plan-slot-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.plan-slot-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.plan-slot-title {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}
.plan-slot-note {
  font-size: 11px;
  color: var(--text2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.plan-slot-thumb {
  width: 80px;
  max-height: 80px;
  border-radius: 3px;
  object-fit: cover;
  margin-top: 4px;
}
.plan-slot-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.plan-slot-btn {
  padding: 3px 8px;
  font-size: 10px;
  background: var(--surface);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: inherit;
  cursor: pointer;
}
.plan-slot-btn:hover { color: var(--text); border-color: var(--text2); }
.plan-slot-del:hover { color: var(--c-like); border-color: var(--c-like); }
.plan-slot-add {
  padding: 6px;
  font-size: 11px;
  background: transparent;
  color: var(--text2);
  border: 1px dashed var(--border);
  border-radius: 3px;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 8px;
  width: 100%;
}
.plan-slot-add:hover { color: var(--text); border-color: var(--text2); }
.plan-slot-editor {
  padding-top: 6px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.plan-form .plan-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.plan-form .plan-save {
  flex: 1;
  padding: 6px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 3px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  font-weight: 600;
}
.plan-form .plan-cancel {
  padding: 6px 12px;
  background: var(--surface);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

/* Rating stars */
.rating-stars { display: inline-flex; gap: 2px; }
.rating-star {
  cursor: pointer;
  font-size: 14px;
  color: var(--border);
  transition: color 0.1s;
}
.rating-star.filled { color: var(--c-bookmark); }
.rating-star:hover { color: var(--c-bookmark); }

/* Interest indicator dot on event cards */
.ev-interest {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.ev-interest-like     { background: var(--c-like); }
.ev-interest-bookmark { background: var(--c-bookmark); }
.ev-interest-planned  { background: var(--c-planned); }
.ev-interest-visited  { background: var(--c-visited); }

/* Editorial FEATURED pill — promoted events per web/curation.json */
.ev-featured {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  margin-right: 5px;
  border-radius: 2px;
  background: var(--accent);
  color: var(--bg);
  vertical-align: middle;
  text-transform: uppercase;
}

/* Header interest counts */
.header-interests {
  display: flex;
  gap: 10px;
  font-size: 11px;
  margin-left: auto;
  align-items: center;
}
.header-interests a {
  color: var(--text2);
  text-decoration: none;
  transition: color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.header-interests a:hover { color: var(--text); }
.header-interests a svg {
  display: block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.header-interests .hi-count {
  font-variant-numeric: tabular-nums;
  min-width: 0.8em;
  text-align: left;
}
.hi-like     { color: var(--c-like)     !important; }
.hi-bookmark { color: var(--c-bookmark) !important; }
.hi-planned  { color: var(--c-planned)  !important; }
.hi-visited  { color: var(--c-visited)  !important; }

/* Interest filter pills in sidebar */
.interest-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.interest-pill {
  padding: 3px 8px;
  font-size: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
}
.interest-pill:hover { border-color: var(--text); }
.interest-pill.active-like     { background: #c0807033; border-color: var(--c-like);     color: var(--c-like); }
.interest-pill.active-bookmark { background: #c9a86a33; border-color: var(--c-bookmark); color: var(--c-bookmark); }
.interest-pill.active-planned  { background: #7aaea833; border-color: var(--c-planned);  color: var(--c-planned); }
.interest-pill.active-visited  { background: #a894b833; border-color: var(--c-visited);  color: var(--c-visited); }

.planner-link {
  display: block;
  text-align: center;
  padding: 8px;
  margin-top: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--accent);
  text-decoration: none;
  font-size: 11px;
}
.planner-link:hover { border-color: var(--accent); }

/* Pill counts: small parenthesized number after pill label */
.interest-pill .pill-count {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  background: var(--pill-count-bg);
  border-radius: 8px;
  font-size: 9px;
  font-weight: 600;
  vertical-align: 1px;
}
.interest-pill.active-like .pill-count,
.interest-pill.active-bookmark .pill-count,
.interest-pill.active-planned .pill-count,
.interest-pill.active-visited .pill-count {
  background: rgba(0,0,0,0.25);
}

/* My List inline preview — saved events grouped by interest type */
.my-list-preview {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.my-list-preview:empty { margin-top: 0; }
.mlp-group {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}
.mlp-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 6px;
}
.mlp-item {
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s;
}
.mlp-item:hover,
.mlp-item:focus-visible {
  background: var(--surface);
  outline: none;
}
.mlp-title {
  font-size: 11px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mlp-meta {
  font-size: 9px;
  color: var(--text2);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mlp-more {
  display: block;
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 10px;
  color: var(--accent);
  text-decoration: none;
  text-align: center;
}
.mlp-more:hover { text-decoration: underline; }

/* Permanent map labels.
   Two visibility tiers:
     - Saved events (.mdw-marker-label-{like|bookmark|planned|visited}):
       always visible — user wants to spot their shortlist.
     - Discovery events (.mdw-marker-label-discovery): only visible when
       map has .zoom-deep class (zoom >= 17, clustering disabled). Below
       that threshold, 461 labels would overlap into noise. */
.mdw-marker-label.leaflet-tooltip {
  background: var(--overlay-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto !important;
}
.mdw-marker-label.leaflet-tooltip::before { display: none; }
.mdw-marker-label-like     { border-color: var(--c-like) !important; }
.mdw-marker-label-bookmark { border-color: var(--c-bookmark) !important; }
.mdw-marker-label-planned  { border-color: var(--c-planned) !important; }
.mdw-marker-label-visited  { border-color: var(--c-visited) !important; }
/* Discovery labels — visibility controlled per-element by JS collision
   detection (MDW.refreshLabelCollisions). Slightly muted so saved labels
   still visually dominate when both are shown. */
.mdw-marker-label-discovery {
  opacity: 0.88;
  background: var(--overlay-bg-soft);
}

/* Stack tooltip — multiple events at the same GPS render as a vertical
   list of label rows inside a scrollable container. Keeps the single-label
   design language but skips the "click the cluster number to spiderfy"
   step: all titles are readable immediately, scroll past 7-ish. */
.mdw-marker-label-stack.leaflet-tooltip {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.mdw-marker-label-stack.leaflet-tooltip::before { display: none; }
.mdw-stack-scroll {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.mdw-stack-scroll::-webkit-scrollbar { width: 6px; }
.mdw-stack-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.mdw-stack-row {
  background: var(--overlay-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}
.mdw-stack-row:hover {
  background: color-mix(in srgb, var(--overlay-bg) 80%, var(--accent) 20%);
}
.mdw-stack-row.mdw-marker-label-discovery {
  opacity: 0.88;
  background: var(--overlay-bg-soft);
}

/* Highlight ring when an event is selected via list/detail click — pulse
   draws the user's eye to which dot among many they just opened. */
.mdw-marker-highlight {
  animation: mdwPulse 1.4s ease-out 2;
  z-index: 1000 !important;
}
@keyframes mdwPulse {
  0%   { transform: scale(1);   filter: drop-shadow(0 0 0 var(--accent)); }
  50%  { transform: scale(1.6); filter: drop-shadow(0 0 12px var(--accent)); }
  100% { transform: scale(1);   filter: drop-shadow(0 0 0 var(--accent)); }
}

/* ─── Leaflet overrides ─── */

.leaflet-popup-content-wrapper {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
  padding: 2px !important;
}
.leaflet-popup-tip { background: var(--surface) !important; }
.leaflet-popup-content { font-family: inherit !important; font-size: 12px !important; margin: 10px 12px !important; min-width: 220px; }

/* Compact event popup */
.popup-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.3;
  cursor: pointer;
}
.popup-title:hover { color: var(--accent); }
.popup-venue {
  font-size: 10px;
  color: var(--text2);
  margin-bottom: 8px;
  line-height: 1.3;
}
.popup-actions {
  display: flex;
  gap: 3px;
  margin-top: 6px;
}
.popup-btn {
  flex: 1;
  padding: 4px 0;
  font-family: inherit;
  font-size: 11px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  transition: all 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.popup-btn svg { width: 13px; height: 13px; }
.popup-btn:hover { border-color: var(--text); color: var(--text); }
.popup-btn.active-like     { background: #c0807022; border-color: var(--c-like);     color: var(--c-like); }
.popup-btn.active-bookmark { background: #c9a86a22; border-color: var(--c-bookmark); color: var(--c-bookmark); }
.popup-btn.active-planned  { background: #7aaea822; border-color: var(--c-planned);  color: var(--c-planned); }
.popup-btn.active-visited  { background: #a894b822; border-color: var(--c-visited);  color: var(--c-visited); }

/* Inline plan form in popup */
.popup-plan {
  display: none;
  margin-top: 6px;
  padding: 8px;
  background: var(--surface2);
  border-radius: 3px;
  border: 1px solid var(--border);
}
.popup-plan.open { display: block; }
.popup-plan-row {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.popup-plan input[type="time"] {
  flex: 1;
  padding: 4px 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 10px;
  border-radius: 2px;
  outline: none;
}
.popup-plan-save {
  width: 100%;
  padding: 4px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 2px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}
.popup-sign-in {
  font-size: 10px;
  color: var(--text2);
  text-align: center;
  padding: 4px;
}
.popup-sign-in a { color: var(--accent); cursor: pointer; }

/* ─── Scrollbar ─── */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ─── Mobile UI additions ─── */

/* Hidden on desktop by default (grid children won't steal a slot) */
.mobile-nav { display: none; }
.mobile-hamburger { display: none; }
.mobile-sheet-handle { display: none; }
.sidebar-backdrop { display: none; }

/* iOS safe-area variables (notch / home indicator / dynamic island) */
:root {
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left: env(safe-area-inset-left, 0px);
  --sa-right: env(safe-area-inset-right, 0px);
}

@media (max-width: 768px) {
  /* M3: larger touch targets. Apple HIG 44px / Material 48px.
     Pills grow from 22-26px → ~36-40px height with generous tap padding. */
  .day-pill, .access-pill, .interest-pill {
    padding: 9px 14px;
    font-size: 12px;
    border-radius: 6px;
  }
  .chip {
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 6px;
  }
  .time-preset {
    padding: 9px 12px;
    font-size: 11px;
  }
  /* M15: prevent iOS zoom-on-focus. All form controls ≥16px font-size. */
  .plan-form input[type="time"],
  .plan-form textarea,
  .popup-plan input[type="time"],
  .comment-form textarea,
  .comment-vis {
    font-size: 16px;
  }

  .app {
    grid-template-columns: 1fr;
    grid-template-rows:
      calc(48px + var(--sa-top))
      1fr
      calc(56px + var(--sa-bottom));
  }

  .header {
    padding: var(--sa-top) calc(12px + var(--sa-right)) 0 calc(12px + var(--sa-left));
    gap: 10px;
  }
  .header h1 { font-size: 14px; }
  .header .stats { display: none; }
  .brand-line { font-size: 10px; letter-spacing: 1px; }
  .brand-year { display: none; }
  .header-interests {
    gap: 6px;
    font-size: 10px;
  }
  .header-interests a:not(.auth-btn) {
    display: inline-block;
    min-width: 24px;
    text-align: center;
  }
  .header-interests a[style*="accent"] {
    display: none;
  }

  .mobile-hamburger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    color: var(--text);
    font-size: 16px;
  }
  .mobile-hamburger svg { width: 18px; height: 18px; }

  /* Active filter badge */
  .filter-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: var(--accent);
    color: var(--bg);
    font-size: 9px;
    font-weight: 700;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .filter-badge:empty { display: none; }

  .sidebar {
    position: fixed;
    top: calc(48px + var(--sa-top));
    left: 0;
    bottom: calc(56px + var(--sa-bottom));
    width: calc(280px + var(--sa-left));
    max-width: 85vw;
    padding-left: calc(12px + var(--sa-left));
    z-index: 1500;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.5);
    border-right: 1px solid var(--border);
  }
  .sidebar.open { transform: translateX(0); }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    /* M2: safe-area aware so no seam between header bottom and backdrop top */
    inset: calc(48px + var(--sa-top)) 0 calc(56px + var(--sa-bottom)) 0;
    background: rgba(0,0,0,0.5);
    z-index: 1400;
  }
  .sidebar.open ~ .sidebar-backdrop { display: block; }

  .map-container {
    grid-row: 2;
    grid-column: 1;
  }

  /* Panel = bottom sheet with 3 snap points.
     Sized by top+bottom (not fixed height) so it never overshoots above
     the header or into the nav. Previously used height:85dvh which made
     snap-full push the panel behind the header (z:0 < panel z:1200), so
     the header appeared to be "pushed up" past the viewport. */
  .panel {
    position: fixed;
    /* Panel fits between header bottom and nav top — transform-based
       snap states move it within this box instead of over it. */
    top: calc(48px + var(--sa-top));
    bottom: calc(56px + var(--sa-bottom));
    left: 0;
    right: 0;
    height: auto;
    z-index: 1200;
    border-left: none;
    border-top: 1px solid var(--border);
    transform: translateY(calc(100% - 80px));  /* peek shows handle + search */
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    will-change: transform;
    touch-action: pan-x;
  }
  .panel.snap-peek { transform: translateY(calc(100% - 80px)); }
  .panel.snap-half { transform: translateY(50%); }
  .panel.snap-full { transform: translateY(0); }

  /* Mobile panel-search styling — thumb-friendly, iOS-safe font-size */
  .panel-search {
    padding: 8px 12px;
  }
  .panel-search .search-input {
    padding: 10px 14px;
    font-size: 16px;  /* iOS needs >=16 to prevent zoom-on-focus */
  }

  /* During drag, disable transition */
  .panel.dragging { transition: none !important; }

  /* Internal list scrolls within the panel. Panel is now sized by top +
     bottom so max-height doesn't need an absolute cap — just fill the
     remaining space after handle + search + header. */
  .panel .event-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    flex: 1 1 auto;
    min-height: 0;
  }

  .mobile-sheet-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .mobile-sheet-handle::before {
    content: '';
    width: 40px;
    height: 3px;
    background: var(--border);
    border-radius: 2px;
  }

  .mobile-nav {
    display: flex;
    grid-row: 3;
    grid-column: 1;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 1300;
    padding-bottom: var(--sa-bottom);
    padding-left: var(--sa-left);
    padding-right: var(--sa-right);
  }
  .mobile-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--text2);
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
    padding: 6px 0;
  }
  .mobile-nav-btn.active { color: var(--accent); }
  .mobile-nav-btn .icon { font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
  .mobile-nav-btn .icon svg { width: 18px; height: 18px; }

  .detail-overlay {
    /* Override base `position: absolute` — on mobile the overlay stays at
       body level (app.ts skips the .panel reparent) so it must anchor to
       the viewport directly. Without this the overlay would render in
       document flow at body, pushed below the fold. */
    position: fixed;
    z-index: 1350;  /* above .panel(1200) + .mobile-nav(1300), below .sidebar(1500) */
    width: 100%;
    max-width: 100%;
    left: 0;
    top: 0;
    bottom: calc(56px + var(--sa-bottom));
    height: auto;
    padding-top: var(--sa-top);
    border-right: none;
    box-shadow: none;
  }
  /* M1: close button must clear the notch AND stay visible while user
     scrolls the overlay. Fixed (not absolute) so it doesn't scroll away
     with the content. Overlay is full-width on mobile so fixed is safe. */
  .detail-close {
    position: fixed;
    top: calc(12px + var(--sa-top));
    right: 12px;
    width: 44px;
    height: 44px;
  }

  .day-legend {
    top: 50px;
    right: 6px;
    padding: 6px 10px;
  }

  .timeline-strip {
    /* Clear the mobile-nav (56) + home indicator (sa_bottom) */
    bottom: calc(56px + var(--sa-bottom));
    padding: 8px 10px 10px;
  }

  .leaflet-bottom.leaflet-right {
    /* Zoom control: above nav + home indicator (+ 10px breathing room) */
    bottom: calc(66px + var(--sa-bottom)) !important;
  }

  /* M-footer: belt-and-suspenders — make absolutely sure the nav fills
     the bottom safe-area region. iOS PWA sometimes shows a hairline gap
     below the nav's padding if background isn't on a fully-expanded box. */
  .mobile-nav::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--sa-bottom);
    background: var(--surface);
    pointer-events: none;
  }
  .mobile-nav { position: relative; }
}

@media (max-width: 360px) {
  .header h1 { font-size: 12px; }
  .header-interests { font-size: 9px; gap: 4px; }
  .sidebar { width: 90vw; }
  .brand-line { font-size: 9px; letter-spacing: 0.8px; }
}

/* ─── Responsive (desktop scales) ─── */

@media (min-width: 769px) and (max-width: 1100px) {
  .app { grid-template-columns: 260px 300px 1fr; }
}

/* ─── Near (address search) ─── */

.near-results {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  max-height: 150px;
  overflow-y: auto;
  margin-top: 4px;
  display: none;
}
.near-results.active { display: block; }
.near-result-item {
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  line-height: 1.3;
}
.near-result-item:hover { background: var(--surface); color: var(--accent); }
.near-result-item:last-child { border-bottom: none; }

.near-controls {
  background: var(--surface2);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 8px;
  margin-top: 6px;
  font-size: 11px;
}
.near-active {
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
  word-break: break-word;
}
.near-radius-row {
  color: var(--text2);
  font-size: 10px;
  margin: 4px 0 2px;
}
.near-radius-label #near-radius-val { color: var(--accent); font-weight: 600; }
.near-controls input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  background: transparent;
  accent-color: var(--accent);
  outline: none;
  cursor: pointer;
  margin: 2px 0;
}
.near-controls input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
}
.near-controls input[type="range"]::-moz-range-track {
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  border: none;
}
.near-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
  margin-top: -8px;
}
.near-controls input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
}
@media (pointer: coarse) {
  .near-controls input[type="range"] {
    height: 26px;
  }
  .near-controls input[type="range"]::-webkit-slider-thumb,
  .near-controls input[type="range"]::-moz-range-thumb {
    width: 26px;
    height: 26px;
  }
  .near-controls input[type="range"]::-webkit-slider-thumb {
    margin-top: -11px;
  }
}
.near-clear {
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.near-clear:hover { color: var(--c-like); border-color: var(--c-like); }

.near-me-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 6px;
  font-size: 11px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  margin-top: 6px;
}
.near-me-btn:hover { border-color: var(--accent); }
.near-me-btn .btn-icon,
.near-me-btn svg { display: inline-flex; }
.near-me-btn svg { width: 13px; height: 13px; }

/* ─── Comments ─── */

.det-comments-wrap {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.det-comments-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.det-comments-toggle:hover .det-comments-toggle-label { color: var(--accent); }
.det-comments-toggle-caret {
  font-size: 10px;
  color: var(--text2);
  transition: transform 0.15s;
}
.det-comments-toggle[aria-expanded="true"] { margin-bottom: 12px; }
.det-comments-wrap #det-comments { margin-top: 4px; }

.comment-form {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}
.comment-form textarea {
  width: 100%;
  min-height: 60px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px;
  font-family: inherit;
  font-size: 12px;
  border-radius: 3px;
  resize: vertical;
  outline: none;
}
.comment-form textarea:focus { border-color: var(--accent); }
.comment-star {
  cursor: pointer;
  color: var(--border);
  font-size: 16px;
  user-select: none;
}
.comment-star.filled { color: var(--c-bookmark); }
.comment-vis {
  width: 100%;
  padding: 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  border-radius: 3px;
  margin-bottom: 6px;
}
.comment-submit {
  width: 100%;
  padding: 6px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 3px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.comment-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.comment-row {
  background: var(--surface2);
  border-left: 2px solid var(--accent);
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 3px;
  position: relative;
}
.comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 11px;
}
.comment-name { font-weight: 600; color: var(--text); }
.comment-rating { color: var(--c-bookmark); font-size: 10px; }
.comment-time { color: var(--text2); font-size: 10px; margin-left: auto; }
.comment-body { font-size: 12px; color: var(--text); line-height: 1.4; white-space: pre-wrap; }
.comment-delete {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text2);
  font-size: 9px;
  cursor: pointer;
  font-family: inherit;
}
.comment-delete:hover { color: var(--c-like); }

/* Phase 3b: comment reaction bar */
.reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 2px 8px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.12s;
  line-height: 1.3;
}
.reaction-btn svg { width: 12px; height: 12px; }
.reaction-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.reaction-btn.mine {
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  border-color: var(--accent);
  color: var(--accent);
}
.reaction-btn:disabled { opacity: 0.5; cursor: wait; }