/* ═══════════════════════════════════════════════════════════
   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;
}

/* 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 {
    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; }