:root {
  /* Donker is de standaard: dit is een kaart die je 's avonds openslaat. */
  --bg: #0a0c12;
  --panel: rgba(18, 21, 30, 0.92);
  --border: rgba(255, 255, 255, 0.10);
  --text: #eef1f7;
  --muted: #9aa3b6;
  /* Zachter en warmer dan het oude oranje. Het oranje kwam uit de heatmap die er niet
   * meer is, en zwart-oranje leest als waarschuwingsbord, niet als uitnodiging. */
  --accent: #ff7eb6;
  --accent-on: #2a0a1a;
  --accent-soft: rgba(255, 126, 182, 0.18);
  /* Het woordmerk loopt door de kleuren die ook op de kaart staan: amber (markt),
   * roze (festival), violet (concert). Geen losse huisstijl, maar de kaart zelf. */
  --merk-1: #fbbf24;
  --merk-2: #f472b6;
  --merk-3: #a78bfa;
  --place: #4fd1c5;
  --place-soft: rgba(79, 209, 197, 0.16);
  --chip-bg: rgba(255, 255, 255, .05);
  --chip-hover: rgba(255, 255, 255, .10);
  --scrim-top: rgba(10, 12, 18, .92);
  --scrim-mid: rgba(10, 12, 18, .65);
  --radius: 14px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f7fa;
    --panel: rgba(255, 255, 255, 0.94);
    --border: rgba(15, 20, 35, 0.12);
    --text: #141821;
    --muted: #5b6577;
    --accent: #be185d;
    --accent-on: #fff5f9;
    --accent-soft: rgba(190, 24, 93, 0.12);
    --merk-1: #c2650a;
    --merk-2: #db2777;
    --merk-3: #7c3aed;
    --place: #0f8b80;
    --place-soft: rgba(15, 139, 128, 0.12);
    --chip-bg: rgba(15, 20, 35, .05);
    --chip-hover: rgba(15, 20, 35, .10);
    --scrim-top: rgba(246, 247, 250, .94);
    --scrim-mid: rgba(246, 247, 250, .7);
    --shadow: 0 8px 30px rgba(20, 24, 33, 0.14);
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #f6f7fa;
  --panel: rgba(255, 255, 255, 0.94);
  --border: rgba(15, 20, 35, 0.12);
  --text: #141821;
  --muted: #5b6577;
  --accent: #be185d;
  --accent-on: #fff5f9;
  --accent-soft: rgba(190, 24, 93, 0.12);
  --merk-1: #c2650a;
  --merk-2: #db2777;
  --merk-3: #7c3aed;
  --place: #0f8b80;
  --place-soft: rgba(15, 139, 128, 0.12);
  --chip-bg: rgba(15, 20, 35, .05);
  --chip-hover: rgba(15, 20, 35, .10);
  --scrim-top: rgba(246, 247, 250, .94);
  --scrim-mid: rgba(246, 247, 250, .7);
  --shadow: 0 8px 30px rgba(20, 24, 33, 0.14);
  color-scheme: light;
}

:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
/* dvh volgt de inklappende adresbalk van mobiele browsers; 100vh doet dat niet en
 * zet de onderkant van de kaart onder de balk */
@supports (height: 100dvh) { html, body { height: 100dvh; } }
body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#map { position: absolute; inset: 0; }

/* ---------- topbalk ---------- */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; flex-direction: column; gap: 10px;
  /* absoluut gepositioneerde lagen vallen buiten de padding van :root, dus de
   * veilige zone moet hier zelf: anders ligt de merknaam onder de notch */
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
           16px max(16px, env(safe-area-inset-left, 0px));
  pointer-events: none;
  background: linear-gradient(180deg, var(--scrim-top) 0%, var(--scrim-mid) 55%, transparent 100%);
}
.topbar > * { pointer-events: auto; }
.brandrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
/* Het merkteken staat naast het woordmerk, niet in plaats daarvan: het logo-bestand
 * heeft "maakplannen.nl" al in zich, dus daarvan gebruiken we alleen de kaart. */
.marque { height: 30px; width: auto; flex: none; }
@media (max-width: 380px) { .marque { display: none; } }
.brand {
  font-weight: 700; font-size: 18px; letter-spacing: -0.02em;
  color: var(--text);
}
/* Verlooptekst, met een terugval op gewone tekst als background-clip ontbreekt -
 * zonder die guard zou het woordmerk daar onzichtbaar worden. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .brand {
    background: linear-gradient(96deg, var(--merk-1) 0%, var(--merk-2) 46%, var(--merk-3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.brand span { font-weight: 700; }
.count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

.chip.theme {
  margin-left: auto;
  font-size: 12px;
  padding: 5px 11px;
  opacity: .85;
}
@media (hover: hover) { .chip.theme:hover { opacity: 1; } }

.chips {
  display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  /* vingervriendelijk horizontaal scrollen zonder dat de kaart meebeweegt */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.chips > * { scroll-snap-align: start; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--text);
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
@media (hover: hover) { .chip:hover { background: var(--chip-hover); } }
.chip[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-on); font-weight: 600;
}
.chip.time[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }

/* Categorieknop draagt de kleur en de glyph van het speldje. Uit: kleur alleen in de
 * glyph. Aan: de knop vult zich met de kleur, zodat je in een oogopslag ziet welke
 * soorten je hebt aangezet. */
.chip.cat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; }
.chip.cat .cg { display: block; flex: 0 0 auto; }
.chip.cat .n {
  font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 600;
  color: var(--muted); padding-left: 1px;
}
@media (hover: hover) {
  .chip.cat:hover { border-color: color-mix(in srgb, var(--cat) 55%, transparent); }
}
.chip.cat[aria-pressed="true"] {
  background: var(--cat);
  border-color: var(--cat);
  color: #fff;
  font-weight: 600;
}
.chip.cat[aria-pressed="true"] .n { color: rgba(255, 255, 255, .8); }
.chip.cat[aria-pressed="true"] .cg [stroke]:not([stroke="none"]) { stroke: #fff; }
.chip.cat[aria-pressed="true"] .cg [fill]:not([fill="none"]) { fill: #fff; }

/* ---------- detailpaneel ---------- */
.panel {
  position: absolute; z-index: 20;
  right: 16px; top: 50%; transform: translateY(-50%);
  width: min(360px, calc(100vw - 32px));
  max-height: min(70vh, 640px);
  overflow-y: auto;
  background: var(--panel);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  display: none;
}
.panel.open { display: block; }
.panel h2 { margin: 0 0 4px; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; }
.panel .when { color: var(--accent); font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.panel .where { color: var(--muted); font-size: 13.5px; margin-bottom: 12px; }
.panel img { width: 100%; border-radius: 10px; margin-bottom: 12px; display: block; }
.panel h2 { display: flex; align-items: flex-start; gap: 9px; }
.pinbadge {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--cat);
  display: grid; place-items: center;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--cat) 45%, transparent);
  margin-top: 1px;
}
.panel .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; padding: 3px 9px 3px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--cat) 16%, transparent);
  color: color-mix(in srgb, var(--cat) 85%, var(--text));
  font-weight: 600;
}
.tag .cg { display: block; }
.panel .meta { font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }
.panel a.cta {
  display: inline-block; margin-top: 10px; padding: 9px 15px;
  background: var(--accent); color: var(--accent-on); text-decoration: none;
  border-radius: 9px; font-weight: 600; font-size: 13.5px;
}
.closebtn {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--chip-bg);
  color: var(--text); cursor: pointer; font-size: 15px; line-height: 1;
}

/* ---------- legenda / status ---------- */
.legend {
  position: absolute; left: 16px; bottom: 16px; z-index: 10;
  background: var(--panel); backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-radius: 11px;
  padding: 11px 13px; font-size: 12px; color: var(--muted);
  box-shadow: var(--shadow); max-width: calc(100vw - 32px);
}
.legend b { color: var(--text); font-weight: 600; }
.legend .row { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.legend .keys { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 7px; }
.legend .key { display: inline-flex; align-items: center; gap: 5px; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--cat); }
.dot.pl { background: var(--muted); opacity: .8; }

.loading {
  position: absolute; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: var(--bg); color: var(--muted); font-size: 14px;
  transition: opacity .4s; 
}
.loading.done { opacity: 0; pointer-events: none; }

/* ---------- telefoon ----------
 * De telefoon is de hoofdmarkt, niet een verkleinde desktop. Drie dingen veranderen
 * wezenlijk: duimformaat voor alles wat je aanraakt, het paneel wordt een bottom sheet
 * die je weg kunt vegen, en de kaart krijgt zoveel mogelijk hoogte.
 */
@media (pointer: coarse) {
  /* Apple en Google noemen allebei ~44px als ondergrens voor een raakvlak. De chips
   * zaten op 31px: goed met een muis, frustrerend met een duim. */
  .chip { min-height: 44px; padding: 10px 15px; font-size: 14px; }
  .chip.cat { padding: 8px 14px 8px 11px; gap: 7px; }
  .chip.theme { min-height: 38px; padding: 8px 13px; font-size: 13px; }
  .closebtn { width: 40px; height: 40px; font-size: 20px; }
  /* zoomknoppen zijn overbodig naast knijpzoom en kosten duimruimte;
   * de locatieknop is op een telefoon juist de belangrijkste knop */
  .maplibregl-ctrl-group:has(.maplibregl-ctrl-zoom-in) { display: none; }
}

/* MapLibre-knoppen boven de home-indicator houden */
.maplibregl-ctrl-bottom-right {
  bottom: env(safe-area-inset-bottom, 0px);
  right: env(safe-area-inset-right, 0px);
}
.maplibregl-ctrl-bottom-left { bottom: env(safe-area-inset-bottom, 0px); }

@media (max-width: 640px) {
  .topbar {
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px 12px 12px;
    gap: 8px;
  }
  .brand { font-size: 16px; }
  .legend { display: none; }

  /* Bottom sheet: vol in de breedte, afgeronde bovenhoeken, greep bovenaan. Hij komt
     van onderen in beeld en je veegt hem weg - dat is wat een telefoongebruiker
     verwacht, en het scheelt het mikken op een kruisje. */
  .panel {
    right: 0; left: 0; width: auto;
    top: auto; bottom: 0; transform: none;
    max-height: 72vh;
    border-radius: 18px 18px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 36px rgba(0, 0, 0, .34);
    touch-action: pan-y;
    transition: transform .22s cubic-bezier(.3, .8, .4, 1);
  }
  .panel.open { display: block; animation: sheet-in .26s cubic-bezier(.2, .9, .3, 1); }
  .panel.sleep { transition: none; }           /* tijdens het slepen geen naijlen */
  @keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .panel.open { animation: none; }
    .panel { transition: none; }
  }

  .grip {
    display: block;
    width: 38px; height: 4px; margin: -8px auto 12px;
    border-radius: 999px; background: var(--border);
  }
  .closebtn { top: 14px; right: 14px; }
  .panel h2 { font-size: 19px; padding-right: 44px; }
  .panel a.cta { padding: 13px 18px; font-size: 15px; }   /* duimformaat */
}

/* op de desktop is er geen greep nodig */
.grip { display: none; }

/* Heel smalle toestellen: de merkregel mag wijken, de filters niet. */
@media (max-width: 380px) {
  .brand { display: none; }
  .count { font-size: 12px; }
}

/* Categorie zonder aanbod binnen het actieve tijdfilter: wel zichtbaar (hij vertelt
 * dat de soort bestaat), maar hij hoeft niet om aandacht te vragen. */
.chip.cat.leeg { opacity: .42; }
@media (hover: hover) { .chip.cat.leeg:hover { opacity: .72; } }

/* ---------- acties in het paneel ----------
 * "Meer info" en "Stuur door" staan naast elkaar: de app heet Maakplannen, en een plan
 * maak je zelden in je eentje. Op een telefoon is doorsturen de snelste weg van
 * "dit is leuk" naar een afspraak.
 */
.acties { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.acties .cta { margin-top: 0; }
.deel {
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--text);
  padding: 9px 15px;
  border-radius: 9px;
  font: inherit; font-weight: 600; font-size: 13.5px;
  cursor: pointer;
}
@media (hover: hover) { .deel:hover { background: var(--chip-hover); } }
@media (pointer: coarse) { .deel { min-height: 44px; padding: 12px 18px; font-size: 15px; } }