:root {
  color-scheme: light;
  --ink:#133b36;
  --paper:#fffaf1;
  --paper-strong:#fffdf9;
  --coral:#f25576;
  --leaf:#247a61;
  --muted:#65736d;
  --line:#e6dac9;
  --shadow:0 16px 42px rgba(19,59,54,.18);
  --music:#ef4f78;
  --food:#e79b38;
  --wellness:#2f9a75;
  --community:#7357bd;
  --sports:#e2673f;
  --arts:#268ca0;
  --other:#5f716c;
}

* { box-sizing:border-box; }
html,body,.map-shell,#event-map { width:100%; height:100%; margin:0; }
body { overflow:hidden; background:#dce8df; color:var(--ink); font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,a { -webkit-tap-highlight-color:transparent; }
.map-shell { position:relative; min-height:100dvh; }
#event-map { position:absolute; inset:0; z-index:0; background:#dfe9e2; }
.leaflet-container { font:inherit; }
.leaflet-control-attribution { margin:0 8px calc(env(safe-area-inset-bottom) + 4px) 0!important; border-radius:6px; opacity:.82; }
.leaflet-control-zoom { margin-right:14px!important; margin-bottom:170px!important; border:0!important; box-shadow:var(--shadow)!important; }
.leaflet-control-zoom a { color:var(--ink)!important; border-color:var(--line)!important; }

.map-header {
  position:absolute;
  z-index:500;
  top:calc(env(safe-area-inset-top) + 10px);
  left:12px;
  right:12px;
  max-width:660px;
  margin:auto;
  padding:15px 15px 13px;
  border:1px solid rgba(230,218,201,.85);
  border-radius:22px;
  background:rgba(255,250,241,.95);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}
.brand-row { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.brand { margin:0 0 2px; color:var(--coral); font-size:.66rem; font-weight:900; letter-spacing:.16em; }
h1 { margin:0; font-family:Georgia,serif; font-size:clamp(1.55rem,6vw,2rem); line-height:1; }
.language-toggle { flex:0 0 auto; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:white; color:var(--ink); font-weight:900; cursor:pointer; }
.category-row { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; }
.category-row::-webkit-scrollbar { display:none; }
.category-row { margin-top:8px; }
.date-picker { margin-top:12px; }
.date-picker-heading { display:grid; grid-template-columns:36px 1fr 36px; align-items:center; gap:5px; }
.date-arrow,.date-range-label { min-height:32px; border:0; background:transparent; color:var(--ink); cursor:pointer; }
.date-arrow { border-radius:50%; font-size:1.55rem; line-height:1; }
.date-arrow:active { background:#f1eadf; }
.date-range-label { font-size:.73rem; font-weight:900; letter-spacing:.03em; text-transform:uppercase; }
.date-strip { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin-top:3px; }
.date-chip { position:relative; display:flex; min-width:0; min-height:51px; flex-direction:column; align-items:center; justify-content:center; gap:1px; border:1px solid transparent; border-radius:13px; background:transparent; color:var(--muted); cursor:pointer; }
.date-chip.today:not(.active) { border-color:var(--line); background:var(--paper-strong); }
.date-chip.active { border-color:var(--ink); background:var(--ink); color:white; box-shadow:0 5px 12px rgba(19,59,54,.17); }
.date-weekday { max-width:100%; overflow:hidden; font-size:.58rem; font-weight:900; text-overflow:ellipsis; text-transform:uppercase; }
.date-number { font-family:Georgia,serif; font-size:1.05rem; font-weight:800; line-height:1; }
.date-count { position:absolute; top:3px; right:4px; display:grid; min-width:14px; height:14px; place-items:center; border-radius:99px; background:var(--coral); color:white; font-size:.48rem; font-weight:900; padding:0 3px; }
.category-chip { flex:0 0 auto; min-height:34px; border:1px solid var(--line); border-radius:999px; background:var(--paper-strong); color:var(--ink); font-size:.76rem; font-weight:800; padding:7px 11px; cursor:pointer; }
.category-chip { display:flex; align-items:center; gap:6px; }
.category-chip::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--chip-color,var(--other)); }
.category-chip.active { border-color:var(--chip-color,var(--other)); box-shadow:inset 0 0 0 1px var(--chip-color,var(--other)); }

.map-status {
  position:absolute;
  z-index:450;
  top:calc(env(safe-area-inset-top) + 225px);
  left:50%;
  transform:translateX(-50%);
  max-width:calc(100% - 30px);
  margin:0;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(19,59,54,.9);
  box-shadow:0 8px 20px rgba(19,59,54,.18);
  color:white;
  font-size:.72rem;
  font-weight:800;
  white-space:nowrap;
}

.event-marker { border:0; background:transparent; }
.event-pin {
  position:relative;
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border:3px solid white;
  border-radius:50% 50% 50% 10%;
  transform:rotate(-45deg);
  background:var(--pin-color,var(--other));
  box-shadow:0 6px 14px rgba(19,59,54,.35);
}
.event-pin span { transform:rotate(45deg); color:white; font-size:.7rem; font-weight:900; }
.event-marker.selected .event-pin { width:42px; height:42px; margin:-4px 0 0 -4px; box-shadow:0 0 0 5px rgba(255,255,255,.65),0 8px 18px rgba(19,59,54,.4); }

.event-sheet {
  position:absolute;
  z-index:600;
  left:10px;
  right:10px;
  bottom:calc(env(safe-area-inset-bottom) + 10px);
  max-width:620px;
  max-height:min(44dvh,430px);
  margin:auto;
  overflow:auto;
  border:1px solid rgba(230,218,201,.92);
  border-radius:23px;
  background:rgba(255,253,249,.97);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}
.event-sheet.intro { max-width:440px; }
.sheet-grabber { position:sticky; z-index:2; top:0; width:42px; height:4px; margin:8px auto 2px; border-radius:99px; background:#c9c0b4; }
#sheet-content { padding:9px 18px 18px; }
.sheet-eyebrow { margin:0 0 5px; color:var(--coral); font-size:.65rem; font-weight:900; letter-spacing:.14em; }
.selected-date { margin:0 0 6px; color:var(--muted); font-size:.72rem; font-weight:900; text-transform:capitalize; }
.event-sheet h2 { margin:0; font-family:Georgia,serif; font-size:1.5rem; line-height:1.08; }
.sheet-intro { margin:7px 0 0; color:var(--muted); font-size:.82rem; line-height:1.4; }
.venue-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.venue-heading span { color:var(--muted); font-size:.72rem; font-weight:800; }
.event-list { display:grid; gap:10px; }
.event-card { border-top:1px solid var(--line); padding-top:12px; }
.event-card:first-child { border-top:0; padding-top:4px; }
.event-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:7px; }
.category-label,.date-label { padding:5px 8px; border-radius:999px; font-size:.65rem; font-weight:900; }
.category-label { background:color-mix(in srgb,var(--category-color) 17%,white); color:var(--category-color); }
.date-label { background:#f1eadf; color:#58655f; }
.event-card h3 { margin:0; font-family:Georgia,serif; font-size:1.18rem; line-height:1.1; }
.event-description { display:-webkit-box; margin:7px 0 0; overflow:hidden; color:#405650; font-size:.78rem; line-height:1.4; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.event-actions { display:flex; gap:7px; margin-top:11px; }
.event-action { display:flex; flex:1; min-height:39px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:white; text-align:center; text-decoration:none; font-size:.72rem; font-weight:900; padding:8px 10px; }
.event-action.primary { flex:1.2; border-color:var(--coral); background:var(--coral); color:white; }
.event-action.icon { flex:0 0 42px; min-width:42px; padding:8px; font-size:1rem; }
.empty-sheet { padding:10px 0 4px; color:var(--muted); font-size:.84rem; line-height:1.45; }

@media (min-width:760px) {
  .map-header { left:24px; right:auto; width:420px; margin:0; }
  .map-status { top:auto; left:24px; bottom:24px; transform:none; }
  .event-sheet { left:auto; right:24px; bottom:24px; width:420px; margin:0; max-height:calc(100dvh - 48px); }
  .leaflet-control-zoom { margin-bottom:24px!important; margin-right:468px!important; }
}

@media (max-width:430px) {
  .map-header { padding:13px 13px 11px; }
  .category-row { margin-right:-13px; padding-right:13px; }
  .map-status { top:calc(env(safe-area-inset-top) + 217px); }
  .event-sheet { max-height:42dvh; }
}
