:root {
  --bg: #08070d;
  --bg-2: #0e0c16;
  --surface: #14121e;
  --surface-2: #1c1929;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --text: #f5f3fb;
  --muted: #a39fb8;
  --dim: #8a85a1;            /* 5.2:1 on a card (audit A02, 23 Oct 2026: #6f6a86 was 3.6:1) */
  --pink: #ff2e93;
  --violet: #8b5cf6;
  --cyan: #22d3ee;
  --amber: #fbbf24;
  --green: #34d399;
  --red: #fb7185;
  --grad: linear-gradient(120deg, var(--pink), var(--violet) 55%, var(--cyan));
  /* white text on colour (audit, 23 Oct 2026): violet links that read (A09), a deeper gradient behind white labels (A04,
     A07, A12; 5.4:1 at its weakest point), and the veil that darkens a type's colours under white text (A03, A10) */
  --violet-text: #a78bfa;
  --grad-solid: linear-gradient(120deg, #be185d, #7c3aed 55%, #0e7490);
  --veil: rgba(8, 7, 13, .5);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --radius: 18px;
  --tabbar-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); overflow-x: hidden; }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  font: 15px/1.45 var(--font);
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(139, 92, 246, .22), transparent 60%),
    radial-gradient(800px 420px at -10% 0%, rgba(255, 46, 147, .16), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: 18px; height: 18px; flex: none; }
[hidden] { display: none !important; }
a { color: inherit; }

.app {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px calc(var(--tabbar-h) + var(--safe-b) + 24px);
}

/* ---------- the slim bar (UX review items 2 and 10, owner, 17 Oct 2026) ----------
   Always at the top: the small logo is the home button (Events tab, tonight, top of the page); on the right "Updated
   13 h ago", a tap opens the Data tab; once the page title has scrolled under the bar, the day or the tab instead. */
.topbar {
  position: sticky; top: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 calc(50% - 50vw) 6px; padding: calc(var(--safe-t) + 8px) max(16px, calc(50vw - 574px)) 8px;
  background: rgba(8, 7, 13, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
}
.mini-home { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin: -8px 0; text-decoration: none; color: var(--text); font: 800 18px/1 var(--font-display); }
.mini-home img { width: 28px; height: 28px; filter: drop-shadow(0 3px 10px rgba(255, 46, 147, .5)); }
.mini-home:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }
.mini-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; font-weight: 700; }
.updated-line { min-width: 0; min-height: 44px; margin: -9px 0; padding: 0 2px; border: 0; background: none; color: var(--muted); font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.updated-line:hover { color: var(--text); }
/* the amber "update stopped" warning, on the test copy only (15 Oct 2026) */
.update-warn {
  margin: 4px auto 10px; max-width: 560px; padding: 9px 13px; border-radius: 12px; font-size: 13px; text-align: center;
  background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .35); color: #fde68a;
}
.banner.warn-stop { font-weight: 600; }

/* ---------- header ---------- */
/* the title and, beside it, the date ("until 05:00" under it after midnight) or the tab's count (UX items 2, 11) */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 10px; }
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
.title-sub { display: grid; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.title-sub span { color: var(--dim); font-weight: 600; }
.title-sub .until { color: #c4b5fd; }
h1 {
  margin: 0;
  font: 800 28px/1.05 var(--font-display);
  letter-spacing: -.02em;
}
.top .icon-btn { flex: none; }
/* one size and corner for every icon control: calendar, Filters, Expand / Collapse, the sheets' close (audit A15) */
.icon-btn {
  position: relative; display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.cal input {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
.icon-btn.cal input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }

/* ---------- day strip ---------- */
.days {
  display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity;
  margin: -3px -16px 0; padding: 5px 16px 10px; scrollbar-width: none;   /* room above for the festival dot */
}
.days::-webkit-scrollbar { display: none; }
.day {
  scroll-snap-align: start; flex: none; min-width: 54px; padding: 6px 7px 7px;
  border-radius: 13px; border: 1px solid var(--line); background: var(--surface);
  display: grid; justify-items: center; gap: 1px; transition: transform .15s ease, border-color .15s;
}
.day:active { transform: scale(.96); }
.day .dw { font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.day .dn { font: 800 18px/1.15 var(--font-display); }
/* the night's programs: how many venues have one, against the busiest night of the strip */
.day .dbar { display: block; width: 32px; height: 3px; margin-top: 3px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.day .dbar i { display: block; width: 0; height: 100%; background: var(--grad); transition: width .3s ease; }
.day.sel { border-color: transparent; background: var(--grad-solid); box-shadow: 0 8px 28px -10px rgba(255, 46, 147, .7); }
.day.sel .dw { color: #fff; }
.day.sel .dbar { background: rgba(255, 255, 255, .3); }
.day.sel .dbar i { background: #fff; }
.day.weekend:not(.sel) .dw { color: var(--pink); }
.day { position: relative; }
/* a night with a festival or a big event: a dot on the chip's corner, clear of its label (the live check of 23 Oct
   2026 found it on the T of "TONIGHT") */
.day.fest::after {
  content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--pink); border: 2px solid var(--bg); box-shadow: 0 0 8px rgba(255, 46, 147, .9);
}
.day.sel.fest::after { background: #fff; box-shadow: none; }
/* the two days before tonight (14 Oct 2026): kept, but set apart from tonight and the coming days */
.day.past:not(.sel) { background: transparent; border-style: dashed; border-color: var(--line-2); }
.day.past:not(.sel) .dn { color: var(--dim); }
.day.past:not(.sel) .dw { color: var(--dim); }
.day.past:not(.sel) .dbar i { opacity: .45; }
.day.past.sel { background: var(--surface-2); border: 1px dashed rgba(255, 255, 255, .35); box-shadow: none; }
.strip-sep { flex: none; align-self: stretch; width: 1px; margin: 6px 2px; background: var(--line-2); }
.past-note {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px;
  padding: 10px 10px 10px 14px; border-radius: 14px; border: 1px dashed var(--line-2);
  background: rgba(255, 255, 255, .03); color: var(--muted); font-size: 13.5px;
}
.past-note[hidden] { display: none; }
.past-note .btn { flex: none; height: 44px; padding: 0 14px; border-radius: 12px; font-size: 13.5px; }
.grid.past-day .card { filter: saturate(.55); }

/* ---------- toolbar / search ---------- */
.toolbar { display: flex; gap: 8px; margin: 2px 0 10px; }
.toolbar .search { flex: 1; min-width: 0; height: 44px; }
.fb-drop.icon-drop { position: relative; flex: none; }
.icon-drop .fb-toggle { position: relative; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 12px; border-color: var(--line); background: var(--surface); }
.icon-drop .fb-toggle:disabled { cursor: default; }
.icon-drop .fb-toggle svg { width: 19px; height: 19px; color: var(--text); }
.icon-drop .fb-toggle > span:not(.n), .icon-drop .fb-toggle svg:last-child { display: none; }
.icon-drop .fb-toggle .n { position: absolute; top: -6px; right: -6px; }
.icon-drop .fb-menu { left: auto; right: 0; width: min(330px, calc(100vw - 32px)); }
#activeFilters { margin: -2px 0 10px; padding-top: 0; border-top: 0; }
.search {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
}
.search:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, .25); }
.search svg { color: var(--dim); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; }
.search input::placeholder { color: var(--dim); }

/* ---------- chips ---------- */
.chips {
  display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 10px; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
/* filters panel (12 Oct 2026): one labelled row per group, chips wrap so every filter stays in sight */
.filterbar {
  display: grid; gap: 10px; margin: 0 0 6px; padding: 12px 14px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
}
.filterbar[hidden] { display: none; }
.fb-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: start; gap: 10px; }
.fb-row[hidden] { display: none; }
.fb-label {
  padding-top: 10px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fb-chips .chip { height: 34px; padding: 0 12px; font-size: 13.5px; background: var(--surface-2); }
.fb-chips .chip.on, .fb-chips .chip[aria-pressed="true"] { background: rgba(139, 92, 246, .18); }
.fb-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.fb-pills:empty { display: none; }
/* filters dropdown (13 Oct 2026): one button, the list of filters opens below it */
.fb-drop { position: relative; }
.fb-drop[hidden] { display: none; }
.fb-toggle {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2);
  font: inherit; font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer;
}
.fb-toggle svg { width: 16px; height: 16px; color: var(--muted); transition: transform .15s; }
.fb-toggle.on { background: rgba(139, 92, 246, .18); border-color: rgba(139, 92, 246, .7); }
.fb-toggle .n {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--grad-solid); font-size: 11px; font-weight: 800; color: #fff;
}
.fb-drop.open .fb-toggle svg:last-child { transform: rotate(180deg); }
.fb-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: min(360px, 100%);
  display: flex; flex-direction: column; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .5);
}
.fb-menu[hidden] { display: none; }
.fb-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 10px;
  padding: 12px 10px; border: 0; border-radius: 10px; background: none;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--text); text-align: left; cursor: pointer;
}
.fb-item:hover, .fb-item:focus-visible { background: var(--surface-2); }
.fb-item .v { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--muted); }
.fb-item.on .v { color: #c4b5fd; }
.fb-item svg { width: 14px; height: 14px; color: var(--dim); transform: rotate(-90deg); }
.pill-clear { height: 44px; padding: 0 10px; border: 0; background: none; color: #f9a8d4; font-size: 13.5px; font-weight: 700; }
@media (max-width: 560px) {
  .fb-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .fb-label { padding-top: 0; }
}
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface);
  font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap;
}
.chip svg { width: 15px; height: 15px; color: var(--muted); }
.chip.on, .chip[aria-pressed="true"] {
  background: rgba(139, 92, 246, .18); border-color: rgba(139, 92, 246, .7); color: #fff;
}
.chip .n {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--grad-solid); font-size: 11px; font-weight: 800; color: #fff;
}
.pill-x {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 10px 0 14px;
  border-radius: 999px; border: 0; background: var(--surface-2); color: var(--text); font-size: 13.5px;
}
.pill-x svg { width: 14px; height: 14px; color: var(--muted); }

.results-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin: 8px 2px 12px; font-size: 13px; font-weight: 600; color: var(--muted);
}
.results-head #resultCount { color: var(--text); font-size: 15px; font-weight: 700; }
/* the Venues tab's count sits beside its title since 17 Oct 2026 (UX item 11): the line under it only explains it */
.results-head #venueCount { color: var(--muted); font-size: 13px; font-weight: 600; }
.muted { color: var(--dim); }
.banner {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; font-size: 13px;
  background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .35); color: #fde68a;
}

/* ---------- event cards ---------- */
.grid { display: grid; gap: 14px; }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 16px 16px 14px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)), var(--surface);
  border: 1px solid var(--line); overflow: hidden;
  animation: rise .35s ease both;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent, var(--grad));
}
/* each venue type's stripe colours come from its entry in schema.VENUE_TYPES (set on the card by app.js) */
.aka { font-size: 12px; color: var(--muted); margin: -2px 0 6px; overflow-wrap: anywhere; }
/* a 44 px hit area on the text's own line: the padding is taken back by the margins (audit A16) */
.music-more { display: inline-block; padding: 13px 6px; margin: -13px 0 -13px -2px; line-height: 18px; border: 0; background: none; color: var(--violet-text); font-size: 12px; font-weight: 700; white-space: nowrap; }
/* festival cards */
.card.c-fest {
  --accent: var(--grad); border-color: rgba(255, 46, 147, .35);
  background: radial-gradient(120% 70% at 100% 0%, rgba(255, 46, 147, .14), transparent 60%),
              radial-gradient(90% 60% at 0% 100%, rgba(34, 211, 238, .08), transparent 60%), var(--surface);
}
.card.c-fest.cancelled { border-color: var(--line); }
.card.c-fest.cancelled .a-time, .card.c-fest.cancelled .time { color: var(--muted); }
.card.c-fest.cancelled .venue { text-decoration: line-through; text-decoration-color: var(--red); }
.badge.fest { background: var(--grad-solid); color: #fff; }
.badge.cancel { background: rgba(251, 113, 133, .16); color: var(--red); }
.badge.newdates { background: rgba(34, 211, 238, .14); color: var(--cyan); }   /* RESCHEDULED: new dates (18 Oct 2026) */
.badge.mixed { background: rgba(251, 191, 36, .14); color: var(--amber); }
.fest-note { font-size: 12.5px; color: var(--muted); padding: 9px 11px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.fest-note summary { display: flex; align-items: center; min-height: 44px; margin: -12px 0; cursor: pointer; font-weight: 700; color: var(--muted); list-style: none; }
.fest-note summary::-webkit-details-marker { display: none; }
.fest-note[open] summary { margin-bottom: -6px; }
/* one disclosure sign everywhere: the app's chevron (audit A45, 23 Oct 2026: a text arrow here and in the Data tab) */
.fest-note summary::after, .unconf-group summary::after, .info-more > summary::after, .run-notes summary::after {
  content: ""; flex: none; display: inline-block; width: 16px; height: 16px; margin-left: 6px; vertical-align: -3px;
  background: var(--dim); -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat;
  transition: transform .15s;
}
.fest-note[open] summary::after, .unconf-group[open] summary::after, .info-more[open] > summary::after, .run-notes[open] summary::after { transform: rotate(180deg); }
.card.ended { opacity: .55; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }

.time {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.time svg { width: 16px; height: 16px; color: var(--muted); }
/* a refresh in place does not replay the cards' entrance */
.grid.no-anim .card { animation: none; }
/* status badges read with every word capitalised ("Open Now", "Closing Soon"), not in capitals (14 Oct 2026) */
/* every status pill, .badge and .st alike (audit A30, 23 Oct 2026: two shapes and five heights side by side): one
   height, one size, a dot before every state and verdict */
.badge, .st {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; vertical-align: 1px;
}
.badge.live { background: rgba(52, 211, 153, .15); color: var(--green); }
.badge.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); animation: pulse 1.6s infinite; }
.badge.soon { background: rgba(34, 211, 238, .14); color: var(--cyan); }
.badge.soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
/* the venue's closing badges (14 Oct 2026), in the style of "Open now": a coloured pill with a dot */
.badge.closing { background: rgba(251, 191, 36, .15); color: var(--amber); }
.badge.closing::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.badge.closed { background: rgba(251, 113, 133, .15); color: var(--red); }
.badge.closed::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.badge.cat { background: var(--surface-2); color: var(--muted); }
.badge.unconf { background: rgba(251, 191, 36, .14); color: var(--amber); align-self: flex-start; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }

.venue { margin: 0; font: 800 21px/1.15 var(--font-display); letter-spacing: -.01em; }
/* the venue's vibe from the database sits next to its name (13 Oct 2026) */
/* one style for a Vibe, beside the name and in a program's details (audit A44) */
.vibe-tag, .tag.v {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(34, 211, 238, .12); border: 1px solid rgba(34, 211, 238, .35); color: #a5f3fc;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
}
.offer-price { margin-top: 6px; font-weight: 700; color: var(--text); }

/* Google Maps popular times for the day */
.busy { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.busy-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.busy-peak { color: var(--text); }
.busy-bars { display: flex; align-items: flex-end; gap: 3px; height: 46px; }
.busy-bars .bar { flex: 1 1 0; min-width: 4px; border-radius: 4px 4px 2px 2px; background: rgba(163, 159, 184, .45); }
.busy-bars .bar.peak { background: var(--grad); }
.busy-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.busy-src { font-size: 11px; color: var(--dim); }
.etitle { margin: -4px 0 0; font-weight: 700; font-size: 15px; color: #e9d5ff; }
.desc {
  margin: 0; color: var(--muted); font-size: 14px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.desc.open { -webkit-line-clamp: unset; display: block; }
.desc-more { justify-self: start; align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin: -14px 0 -10px; padding: 0; border: 0; background: none; color: var(--violet-text); font-size: 13px; font-weight: 700; text-align: left; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { height: 22px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.tag.g { background: rgba(139, 92, 246, .16); color: #c4b5fd; }

.offer {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(120deg, rgba(255, 46, 147, .12), rgba(139, 92, 246, .1));
  border: 1px solid rgba(255, 46, 147, .25); font-size: 13.5px;
}
.offer svg { color: var(--pink); margin-top: 1px; }
.price { font-weight: 700; font-size: 14px; }
.price small { color: var(--muted); font-weight: 600; }
.lineup { font-size: 13px; color: var(--text); }
.lineup b { color: var(--muted); font-weight: 600; }

.where { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--muted); }
.where svg { width: 16px; height: 16px; margin-top: 1px; color: var(--cyan); flex: none; }
/* a short address that opens to the full one on a tap (14 Oct 2026) */
.where-btn { width: 100%; min-height: 44px; margin: -11px 0; padding: 0; align-items: center; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--muted); }
.where-btn span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.where-btn svg:last-child { color: var(--dim); transition: transform .2s ease; }
.where-btn[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }

.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 8px; margin-top: 2px; }
.act {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
  border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line);
  text-decoration: none; font-size: 13px; font-weight: 700; color: var(--text);
  transition: background .15s, transform .1s;
}
.act:active { transform: scale(.97); }
.act:hover { background: #262238; }
.act.primary { background: var(--grad-solid); border-color: transparent; color: #fff; }
.act svg { width: 17px; height: 17px; }
/* four buttons: a 2 x 2 grid on phones so the labels keep their room */
@media (max-width: 480px) { .actions.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 10px;
  padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--dim);
}
.meta a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
.st::before, .badge.cancel::before, .badge.newdates::before, .badge.later::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.st.OPEN { color: var(--green); }
.st.NA { color: var(--dim); }
.st.RENAMED, .st.MOVED { color: var(--amber); }
/* the Venues tab's verdict (14 Oct 2026) */
.st.st-open, .st.st-wait, .st.st-opens, .st.st-closed { flex: none; }
.st.st-open { color: var(--green); background: rgba(52, 211, 153, .15); }
.st.st-wait { color: var(--muted); background: var(--surface-2); }
.st.st-opens { color: var(--amber); background: rgba(251, 191, 36, .14); }
.vwhy { font-size: 12.5px; color: var(--dim); margin: 2px 0 4px; }
/* the notice on a type whose venues wait for a first check (14 Oct 2026) */
.type-notice {
  position: relative; display: flex; gap: 14px; align-items: flex-start; margin: 0 0 14px; padding: 16px 16px 16px 18px;
  border-radius: var(--radius); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015)), var(--surface);
  border: 1px solid var(--line-2); overflow: hidden;
}
.type-notice[hidden] { display: none; }
.type-notice::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent, var(--grad)); }
.tn-icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); color: var(--text);
}
.tn-icon svg { width: 22px; height: 22px; }
.tn-body { display: grid; gap: 6px; min-width: 0; }
.tn-body b { font: 800 16px/1.25 var(--font-display); }
.tn-body span { color: var(--muted); font-size: 14px; }
.tn-link {
  justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 7px 12px;
  border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text);
  font-size: 13.5px; font-weight: 800; cursor: pointer;
}
.tn-link svg { width: 16px; height: 16px; transform: rotate(-90deg); }
/* only a few left to check: one small, quiet line (16 Oct 2026) */
.type-notice.small { padding: 9px 12px 9px 14px; margin: 0 0 12px; border-radius: 12px; background: var(--surface); border-color: var(--line); }
.type-notice.small::before { width: 3px; opacity: .7; }
.tn-small { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.tn-small svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--dim); }
.tn-link-s { padding: 0; border: 0; background: none; color: var(--cyan); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
/* the next nights with programs, on a night without any (16 Oct 2026) */
.next-nights { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.next-night {
  display: grid; gap: 2px; min-width: 0; flex: 1 1 0; max-width: 104px; padding: 9px 6px; border-radius: 13px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text); text-align: center;
}
.next-night b { font: 800 14.5px/1.1 var(--font-display); white-space: nowrap; }
.next-night span { font-size: 11.5px; color: var(--cyan); font-weight: 700; white-space: nowrap; }
.next-night:active { transform: scale(.97); }

/* skeleton */
.skel { height: 260px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; border: 1px solid var(--line); }
@keyframes shimmer { to { background-position: -200% 0; } }

.empty {
  text-align: center; padding: 48px 20px; border-radius: var(--radius);
  border: 1px dashed var(--line-2); color: var(--muted);
}
.empty h3 { margin: 0 0 6px; color: var(--text); font: 800 19px var(--font-display); }
.empty .btn { margin-top: 14px; }

/* ---------- venues list ---------- */
.list { display: grid; gap: 10px; }
@media (min-width: 760px) { .list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the star (favourites, 15 Oct 2026): outline, filled when starred */
.star {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -11px -11px -11px auto; flex: none;
  border: 0; border-radius: 50%; background: none; color: var(--dim); cursor: pointer;
}
.star svg { width: 21px; height: 21px; fill: none; transition: transform .15s ease; }
.star.on { color: var(--amber); }
.star.on svg { fill: currentColor; }
.star:active svg { transform: scale(.85); }
.star:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.fav-line { font-size: 13px; color: var(--text); }
.fav-line.muted { color: var(--dim); }
.fav-progs { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); display: grid; gap: 3px; }
.fav-progs b { color: var(--text); font-weight: 700; }
.fav-head { grid-column: 1 / -1; margin: 10px 0 0; font: 700 15px var(--font-display); color: var(--muted); }
.fav-note { margin: 18px 4px 0; font-size: 12px; color: var(--dim); text-align: center; }
.st.st-closed { color: var(--red); background: rgba(251, 113, 133, .15); }
.inl-ic svg { width: 15px; height: 15px; vertical-align: -2px; fill: none; }
.more { display: block; width: 100%; margin: 14px 0; height: 46px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 700; }

/* ---------- info ---------- */
.info { display: grid; gap: 14px; }
.panel { min-width: 0; overflow: hidden; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.panel h3 { margin: 0 0 10px; font: 800 17px var(--font-display); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { padding: 12px; border-radius: 14px; background: var(--surface-2); }
.stat b { display: block; font: 800 24px var(--font-display); font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--muted); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* the run log as one block per run, its notes folded when long (audit A34, 23 Oct 2026: a table of narrow columns broke
   words letter by letter and ran for metres on a phone) */
.runs-list { display: grid; gap: 0; }
.run-row { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.run-row:last-child { border-bottom: 0; }
.run-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.run-head b { font-variant-numeric: tabular-nums; }
.run-meta { color: var(--muted); font-size: 12.5px; }
.run-notes { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.run-notes summary { display: flex; align-items: center; min-height: 44px; margin: -10px 0; cursor: pointer; color: var(--violet-text); font-weight: 700; list-style: none; }
.run-notes summary::-webkit-details-marker { display: none; }
.run-notes summary::after { background: var(--violet-text); }

/* ---------- tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: center; gap: 4px;
  padding: 8px 12px calc(8px + var(--safe-b));
  background: rgba(8, 7, 13, .82); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid var(--line);
}
.tab {
  flex: 1; max-width: 180px; display: grid; justify-items: center; gap: 2px; padding: 6px 0;
  border: 0; border-radius: 12px; background: none; color: var(--dim); font-size: 11px; font-weight: 700;
}
.tab svg { width: 22px; height: 22px; }
.tab.active { color: var(--text); }
.tab.active svg { color: var(--pink); }

/* ---------- bottom sheet ---------- */
.scrim { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); }
.sheet {
  position: fixed; z-index: 31; left: 0; right: 0; bottom: 0; max-height: 78dvh;
  display: flex; flex-direction: column; margin: 0 auto; max-width: 640px;
  border-radius: 22px 22px 0 0; background: var(--bg-2); border: 1px solid var(--line-2); border-bottom: 0;
  padding-bottom: var(--safe-b); animation: up .22s ease both;
}
@keyframes up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 760px) { .sheet { bottom: 50%; transform: translateY(50%); border-radius: 22px; border-bottom: 1px solid var(--line-2); animation: none; } }
.grabber { width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 8px auto 0; }
@media (min-width: 760px) { .sheet .grabber { display: none; } }     /* a dialog on a computer, not a sheet (audit A54) */
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px 6px; }
.sheet-head h2 { margin: 0; font: 800 20px var(--font-display); }
.sheet-body { overflow-y: auto; padding: 8px 16px 16px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
/* Only / Except (owner, 17 Oct 2026): the chosen values of an Except filter are struck through in red */
.sheet-mode { padding: 2px 16px 4px; }
.sheet-mode[hidden] { display: none; }
.mode-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); }
.mode-btn { height: 44px; min-width: 90px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 14px; font-weight: 700; cursor: pointer; }
.mode-btn.on { background: rgba(139, 92, 246, .28); color: #fff; }
.mode-btn[data-mode="except"].on { background: rgba(251, 113, 133, .22); color: #fecdd3; }
.mode-hint { margin: 6px 2px 0; font-size: 12.5px; color: var(--muted); }
.sheet-body.except .chip.on, .sheet-body.except .chip[aria-pressed="true"] {
  background: rgba(251, 113, 133, .14); border-color: rgba(251, 113, 133, .7); color: #fecdd3; text-decoration: line-through;
}
.pill-x.exc { background: rgba(251, 113, 133, .14); color: #fecdd3; }
.fb-item.exc .v { color: #fda4af; }
.sheet-body .chip { height: 44px; }
.sheet-body .chip .c { color: var(--dim); font-weight: 600; }
.sheet-body .chip.on .c, .sheet-body .chip[aria-pressed="true"] .c { color: #c4b5fd; }
.sheet-body.except .chip.on .c, .sheet-body.except .chip[aria-pressed="true"] .c { color: #fda4af; }
/* a value no venue on screen carries right now: dashed, still readable (audit A37: faded to 1.8:1) */
.sheet-body .chip.zero { border-style: dashed; color: var(--muted); }
.sheet-body .none { color: var(--muted); font-size: 14px; padding: 6px 2px; }
.sheet-foot { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.btn { height: 48px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 800; padding: 0 18px; }
.btn.primary {
  background: var(--grad-solid); border-color: transparent; color: #fff;
}
.btn.ghost { background: transparent; }

@media (min-width: 760px) {
  h1 { font-size: 34px; }
}

/* ---------- type switch (14 Oct 2026) ----------
   One row of buttons sized to their names, each with its type's colour (the stripe of its cards). When the row is
   wider than the screen it scrolls sideways (swipe, trackpad or the arrows), the hidden end fades out and an arrow
   appears on that side. */
.rail {
  position: relative; margin: 0 0 12px; padding: 4px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line);
}
.segmented {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.segmented::-webkit-scrollbar { display: none; }
.rail.more-next .segmented {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent);
}
.rail.more-prev .segmented {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px);
  mask-image: linear-gradient(90deg, transparent, #000 72px);
}
.rail.more-prev.more-next .segmented {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}
.seg {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-width: 44px;
  padding: 0 15px;
  border: 0; border-radius: 11px; background: none; color: var(--muted); cursor: pointer;
  font-weight: 700; font-size: 14px; letter-spacing: .01em; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.seg .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--grad)); }
@media (hover: hover) { .seg:not(.on):hover { color: var(--text); background: rgba(255, 255, 255, .05); } }
.seg:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.seg[data-type="Festivals"]:not(.on) { color: #f9a8d4; }
/* the chosen type takes its own colours under the veil, so white text reads on the light ones too (audit A03, 23 Oct
   2026: 2.8-4.4:1 under a veil of 24%) */
.seg.on {
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  background: linear-gradient(var(--veil), var(--veil)), var(--seg-on, var(--grad));
  box-shadow: 0 6px 20px -10px rgba(255, 46, 147, .8);
}
.seg.on .dot { background: rgba(255, 255, 255, .92); }
.rail-arrow {
  position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(28, 25, 41, .96); color: var(--text);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
}
.rail-arrow[hidden] { display: none; }
.rail-arrow svg { width: 18px; height: 18px; }
.rail-arrow.prev { left: 4px; }
.rail-arrow.prev svg { transform: rotate(90deg); }
.rail-arrow.next { right: 4px; }
.rail-arrow.next svg { transform: rotate(-90deg); }
@media (max-width: 560px) {
  .seg { padding: 0 12px; gap: 7px; font-size: 13.5px; }
}
/* the arrows lay over the labels (audit A14, A43): none on a touch screen, where the row is swiped; on a computer they
   sit in gutters of their own, beside the labels */
@media (hover: none) { .rail-arrow { display: none !important; } }
@media (hover: hover) {
  .rail.more-prev .segmented { margin-left: 48px; }
  .rail.more-next .segmented { margin-right: 48px; }
}

/* ---------- events inside a venue card ---------- */
.ev {
  display: grid; gap: 7px; padding: 12px; border-radius: 14px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
}
/* an ended program, greyed in colour rather than faded, so it stays readable (audit A36: 1.9:1 at 55%) */
.ev.ended { opacity: 1; }
.ev.ended .a-time, .ev.ended .a-ptitle, .ev.ended .a-psub, .ev.ended .a-time small { color: var(--muted); }
.ev-sched { font-size: 12.5px; margin-top: -4px; }
.ev-src { font-size: 12px; color: var(--dim); }
.ev-src a { display: inline-block; padding: 13px 0; margin: -13px 0; line-height: 18px; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }

/* ---------- venues not confirmed open ---------- */
.unconf-group { margin-top: 18px; }
.unconf-group summary {
  cursor: pointer; list-style: none; padding: 14px 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); font-weight: 700; color: var(--muted);
}
.unconf-group summary::-webkit-details-marker { display: none; }

.unconf-group[open] summary { margin-bottom: 10px; }

/* ---------- List / Map (ROADMAP step 3, owner, 16 Oct 2026) ---------- */
.mode-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 12px;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
}
.mode {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px;
  border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 700;
}
.mode svg { width: 17px; height: 17px; }
.mode.on { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.mode.on svg { color: var(--pink); }
.mode:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }

.map-wrap {
  position: relative; margin: 2px 0 14px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-2); background: #0b0b10; isolation: isolate;
}
/* the Map tab: the map fills the screen from its top to the tab bar (audit A28, 23 Oct 2026: on a computer it began at
   393 px and ran under the tab bar); --map-top is set by app.js */
.map { height: calc(100dvh - var(--map-top, 360px) - var(--tabbar-h) - var(--safe-b) - 12px); min-height: 320px; }
.map-msg {
  position: absolute; inset: 0; z-index: 900; display: grid; place-items: center; padding: 24px;
  text-align: center; color: var(--muted); background: rgba(8, 7, 13, .88);
}
/* Leaflet's stylesheet loads after this one: the map's own rules name .map to come first */
.map.leaflet-container { background: #0b0b10; font: 13px/1.4 var(--font); }
.map .leaflet-bar a, .map .leaflet-bar a:hover { background: var(--surface); color: var(--text); border-bottom-color: var(--line-2); }
/* the zoom buttons a finger can hit (audit A38); the selector outranks Leaflet's own .leaflet-touch rule */
.map.leaflet-container .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
.map .leaflet-bar { border: 1px solid var(--line-2); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.map-note {
  /* a tap on the note reaches the pin under it */
  pointer-events: none;
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 800; padding: 8px 11px; border-radius: 11px;
  font-size: 12px; color: var(--muted); background: rgba(8, 7, 13, .86); border: 1px solid var(--line-2);
}
/* the attribution: the app's dark strip must outrank Leaflet's white one, which loads later (audit A11); its links get a
   44 px hit area on their own line (A38) */
.map.leaflet-container .leaflet-control-attribution { background: rgba(8, 7, 13, .85); color: var(--muted); font-size: 11px; line-height: 18px; padding: 2px 8px; }
.map.leaflet-container .leaflet-control-attribution a { display: inline-block; padding: 13px 2px; margin: -13px 0; color: var(--text); }

/* pins: the type's colours; a festival a diamond; a favourite a star */
.pin-wrap { background: none; border: 0; }
.pin {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(135deg, var(--a), var(--b)); border: 2px solid rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), 0 0 14px var(--a);
}
.pin.fest { border-radius: 4px; transform: rotate(45deg) scale(.86); }
.pin.fav {
  /* the gold of the cards' filled star, whatever the type */
  border: 0; border-radius: 0; box-shadow: none; background: linear-gradient(135deg, #fde68a, #fbbf24 55%, #f59e0b);
  clip-path: polygon(50% 0, 61.8% 35.4%, 98% 35.4%, 68.6% 57.3%, 79.4% 91%, 50% 70%, 20.6% 91%, 31.4% 57.3%, 2% 35.4%, 38.2% 35.4%);
}
.pin-wrap.is-fav { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 7px rgba(251, 191, 36, .75)); z-index: 1000 !important; }
.pin-cluster { background: none; border: 0; }
.pin-cluster span {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 46, 147, .92), rgba(139, 92, 246, .92));
  border: 2px solid rgba(255, 255, 255, .85); color: #fff; font-size: 13px; font-weight: 800;
  box-shadow: 0 0 0 5px rgba(139, 92, 246, .22), 0 0 18px rgba(255, 46, 147, .45);
}

/* the popup: the card's essentials */
.map-pop .leaflet-popup-content-wrapper {
  background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
}
.map-pop .leaflet-popup-tip { background: var(--surface); border: 1px solid var(--line-2); }
.map-pop .leaflet-popup-content { margin: 12px 14px 14px; font-size: 13.5px; line-height: 1.4; }
.map-pop a.leaflet-popup-close-button { display: none; }
.pop { position: relative; }
.pop::before { content: ""; position: absolute; inset: -12px -14px auto; height: 3px; border-radius: 16px 16px 0 0; background: var(--accent, var(--grad)); }
.pop h3 { margin: 4px 0 6px; font: 800 17px/1.2 var(--font-display); letter-spacing: -.01em; }
.pop-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 4px 0; color: var(--text); font-weight: 600; }
.pop-line svg { width: 15px; height: 15px; color: var(--muted); }
.pop-line.muted { color: var(--muted); font-weight: 500; }
.pop-line small { color: var(--muted); font-weight: 600; }
.pop-acts { display: flex; gap: 8px; margin-top: 10px; }
.pop-acts .act { flex: 1; min-height: 44px; }
.map-pop a.act, .map-pop a.act:hover { color: var(--text); }

/* what is not on the map yet */
.map-missing {
  margin: -4px 0 16px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  font-size: 13.5px;
}
.map-missing summary { cursor: pointer; color: var(--muted); font-weight: 700; }
.map-missing p { margin: 8px 0 0; color: var(--dim); }
.mm-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mm-item {
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2);
  color: var(--text); font-size: 13px; font-weight: 600;
}
/* a card opened from the map's list scrolls clear of the slim top bar */
.grid .card { scroll-margin-top: calc(var(--safe-t) + 64px); }

/* ---------- venue logos (ROADMAP step 4, 16 Oct 2026; logos only since 18 Oct 2026) ---------- */
.vphoto {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line-2); background: var(--surface);
}

/* the Festivals & Big Events list: a heading per month (owner, 16 Oct 2026) */
.month-head {
  grid-column: 1 / -1; margin: 10px 2px 2px; font: 800 15px/1.2 var(--font-display); letter-spacing: .02em;
  color: var(--muted); text-transform: uppercase;
}
.month-head:first-child { margin-top: 0; }

/* ---------- the cards: A (expanded) and C (one row per venue), owner's OK of 16 Oct 2026 ---------- */
/* "Expand all" / "Collapse all" at the right of each list's count */
.results-head { align-items: center; flex-wrap: wrap; }
.results-head .vw-btn { margin-left: auto; }
.vw-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: 700 12.5px/1 var(--font); cursor: pointer;
}
.vw-btn svg { width: 15px; height: 15px; }
.vw-btn:empty { display: none; }
/* the logo over the venue's initials in its type's colours */
/* the initials: white on the type's colours under the veil (audit A10: 1.9-2.4:1 on the amber, orange and cyan types) */
.av {
  position: relative; flex: none; display: grid; place-items: center; overflow: hidden; color: #fff;
  background: linear-gradient(var(--veil), var(--veil)), linear-gradient(135deg, var(--a, #8b5cf6), var(--b, #22d3ee));
  font: 800 15px/1 var(--font-display);
}
.av .vphoto { position: absolute; inset: 0; width: 100%; height: 100%; flex: none; border: 0; border-radius: 0; object-fit: cover; }
.date-block {
  flex: none; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; align-content: center;
  background: var(--surface-2); border: 1px solid var(--line-2); font: 800 10.5px/1.15 var(--font); text-transform: uppercase;
  color: var(--muted);
}
.date-block b { font: 800 20px/1 var(--font-display); color: var(--text); }

/* A: the card (Option 1, owner, 17 Oct 2026): six parts in the same order on every card of every type: the head, Music
   (.a-tags), tonight's line (.a-ton), the programs (.a-progs), the address (.a-where), the buttons (.a-acts). On a
   computer the parts of the cards of a row line up and the buttons sit at the bottom (subgrid, below) */
.a-card { padding: 14px; }
.a-head { display: flex; align-items: flex-start; gap: 12px; }
.a-head .av { width: 46px; height: 46px; border-radius: 50%; }
.a-id { flex: 1; min-width: 0; }
.a-id .venue { margin: 0; font: 800 19px/1.22 var(--font-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
/* the type and area line a little bigger (owner, 16 Oct 2026); the Vibe tags on it (17 Oct 2026) */
.a-meta { margin-top: 4px; color: #cfcbe0; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.a-meta .dot {
  display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px;
  background: linear-gradient(135deg, var(--a, #8b5cf6), var(--b, #22d3ee));
}
.a-meta .vibe-tag { margin-left: 6px; vertical-align: 1px; }
/* the badges of a favourite festival kept together (audit A56: "New dates" after the place, "In 148 Days" alone) */
.a-badges { display: inline-flex; flex-wrap: nowrap; gap: 4px; vertical-align: 1px; }
/* the star and the fold arrow: 44 px each, 4 px apart (audit A13: 34 and 32 px, 2 px apart) */
.a-tools { flex: none; display: flex; align-items: center; gap: 4px; margin: -9px -10px 0 0; }
.a-tools .star { margin: 0; }
.fold-btn {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; color: var(--muted);
  background: radial-gradient(circle closest-side, var(--surface-2) 72%, transparent 74%);
  display: grid; place-items: center; cursor: pointer;
}
.fold-btn svg { width: 16px; height: 16px; transform: rotate(180deg); }
.a-card .aka { margin: 0; font-size: 13px; line-height: 1.45; }
.a-id .aka { margin-top: 4px; font-size: 12px; }
.a-card .music-more { font-size: 13px; }
.a-card .vwhy { margin: 0; }
.a-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.st.st-src, .st.st-n {
  flex: none; padding: 3px 9px; border-radius: 999px; font-size: 11px; letter-spacing: .03em; white-space: nowrap;
  color: var(--muted); background: var(--surface-2);
}
/* tonight's line: the hours, the state, the busy times in small at the right, all on one line; a tap on the busy times
   turns them into the chart, a tap on the chart back */
.a-ton { display: grid; gap: 8px; align-content: start; }
.a-tonight {
  display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 9px; border-radius: 12px; white-space: nowrap;
  background: var(--bg-2); font-size: 13.5px; font-weight: 600;
}
.a-tonight.a-chips { flex-wrap: wrap; white-space: normal; }
.a-tonight:empty { display: none; }
.a-tonight .time { min-width: 0; white-space: normal; font-size: 13.5px; }
.a-tonight .time .rng { white-space: nowrap; }

.a-tonight .time.approx { color: #d6d3e4; }
.a-tonight .js-badge { flex: none; display: inline-flex; gap: 4px; }
.a-tonight .js-badge:empty { display: none; }
/* the busy pill: 44 px to a finger, the pill drawn inside (audit A17: 24 px) */
.busy-s {
  position: relative; isolation: isolate; flex: none; margin: -10px -6px -10px auto; display: inline-flex; align-items: center;
  gap: 5px; height: 44px; padding: 0 13px; border: 0; border-radius: 999px; background: none; color: var(--muted);
  font: 700 11.5px/1 var(--font); white-space: nowrap; cursor: pointer;
}
.busy-s::before { content: ""; position: absolute; inset: 10px 6px; z-index: -1; border-radius: 999px; background: var(--surface-2); }
.busy-s[hidden] { display: none; }
/* the pill's chart keeps one width however many hours it has, so the hours beside it always fit */
.busy-s .spark { width: 30px; }

.busy-s .spark i { flex: 1 1 0; width: auto; min-width: 1px; }
.a-chart { cursor: pointer; }
.a-chart .busy-head { align-items: center; }
.a-chart .busy-head svg { width: 14px; height: 14px; color: var(--dim); }
.spark { display: inline-flex; align-items: flex-end; gap: 1px; height: 14px; }
.spark i { width: 2px; border-radius: 1px; background: var(--dim); }
.spark i.pk { background: var(--pink); }
/* the programs: each on one line (the title cut with "…", in full in its details); up to three, "+N more" for the rest */
.a-progs { display: grid; align-content: start; }
.ev.a-prog {
  grid-template-columns: 52px minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 9px 0;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; cursor: pointer;
}
.ev.a-prog:last-child { border-bottom: 0; }
.a-time { font: 800 15px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.a-time small { display: block; color: var(--dim); font: 600 11px/1.3 var(--font); }
/* a favourite's program: its day ("Tonight", "Sat 31") in small above its time (audit A22) */
.ev.a-prog.with-day { grid-template-columns: 60px minmax(0, 1fr) auto; }
.a-time .a-day { display: block; margin-bottom: 2px; color: var(--cyan); font: 800 11px/1.2 var(--font); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.a-pmain { min-width: 0; display: grid; gap: 3px; justify-items: start; }
.a-ptitle { max-width: 100%; font-weight: 700; font-size: 15px; line-height: 1.3; color: #e9d5ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-psub { max-width: 100%; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-time .tba { color: var(--dim); font: 700 12px/1.3 var(--font); }       /* no start time published (audit A31) */
/* the price once in an open program: in its details, not on its line too (audit A50) */
.a-prog:has(> .a-tog[aria-expanded="true"]) .psub-price { display: none; }
.a-more { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin: -4px 0 -10px; padding: 0; border: 0; background: none; color: var(--violet-text); font: 700 13px var(--font); cursor: pointer; }
.a-rest { display: grid; }
.a-rest[hidden] { display: none; }
.a-none { margin: 0; padding: 6px 0; color: var(--dim); font-size: 13px; }
.a-tog, .det-tog { cursor: pointer; }
/* a program's arrow: 44 px to a finger, a 30 px circle to the eye (audit A18) */
.a-tog {
  width: 44px; height: 44px; margin: -7px -7px -7px 0; border: 0; border-radius: 50%; color: var(--muted);
  background: radial-gradient(circle closest-side, var(--surface-2) 68%, transparent 70%);
  display: grid; place-items: center;
}
.a-tog svg, .det-tog svg { width: 16px; height: 16px; transition: transform .15s; }
.a-tog[aria-expanded="true"] svg, .det-tog[aria-expanded="true"] svg { transform: rotate(180deg); }
.a-detail { grid-column: 2 / -1; display: grid; gap: 8px; padding-top: 4px; cursor: auto; }
.det-tog {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -8px 0; padding: 0;
  border: 0; background: none; color: var(--violet-text); font: 700 13px/1 var(--font);
}
.a-progs .price, .a-progs .lineup { padding: 3px 0; }
/* the address on one line (a tap shows it in full) */
.a-where { min-width: 0; }
.a-where .where { white-space: nowrap; min-width: 0; }
.a-where .where span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.a-where .where-btn[aria-expanded="true"], .a-where .where-btn[aria-expanded="true"] span { white-space: normal; }
/* the same four buttons on every card, same order and size; a link the venue does not have greyed */
.actions.a-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.a-acts .act { display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; min-height: 54px; padding: 7px 4px; font-size: 11.5px; }
.a-acts .act span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a link the venue does not have: dashed and dim, still readable (audit A36: 2.5:1 at 30%) */
.a-acts .act.off { pointer-events: none; color: var(--dim); background: transparent; border-style: dashed; }
/* on a computer, the six parts of the cards of a row line up and the buttons sit at the bottom (Option 1) */
@media (min-width: 760px) {
  .grid > .a-card, .list > .a-card, .group-closed > .a-card { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 10px; }
  .grid > .a-card > .a-acts, .list > .a-card > .a-acts, .group-closed > .a-card > .a-acts { align-self: end; }
  .grid > .row-card, .list > .row-card, .group-closed > .row-card { grid-row: span 6; align-self: start; }
  .grid .month-head { display: none; }
}
@media (min-width: 1100px) { .list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* C: one row per venue; a tap opens its card */
.row-card {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 12px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--line); cursor: pointer;
  animation: rise .35s ease both; scroll-margin-top: calc(var(--safe-t) + 64px);
}
.row-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.row-card .av { width: 56px; height: 56px; border-radius: 14px; }
.row-card.c-fest-row { border-color: rgba(255, 46, 147, .35); }
/* a cancelled festival's row: struck through, its time and price no longer in colour (audit A58) */
.row-card.cancelled .c-l1 b { text-decoration: line-through; text-decoration-color: var(--red); }
.row-card.cancelled .c-l2, .row-card.cancelled .c-l2 .t { color: var(--muted); }
.row-card.cancelled .badge.fest { background: var(--surface-2); color: var(--muted); }
.c-main { min-width: 0; }
.c-l1 { display: flex; align-items: flex-start; gap: 8px; }
/* the whole name, never cut (the Venues-tab fix): it wraps beside the badge, which stays small */
.c-l1 b { flex: 1; min-width: 0; font: 800 16px/1.25 var(--font-display); overflow-wrap: anywhere; }
.c-l1 .js-badge { flex: none; display: inline-flex; gap: 4px; }
.c-l1 .js-badge:empty { display: none; }
.c-l1 .badge, .c-l1 .st { flex: none; margin-top: 1px; }
/* the program line on two lines at most (audit A41: long titles cut at once); tonight's badge at its start, so the name
   has the row's width (A48: names in two or three lines beside the badge) */
.c-l2 { margin-top: 3px; font-size: 14px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-l2 .js-badge { display: inline-flex; gap: 4px; margin-right: 6px; vertical-align: 1px; }
.c-l2 .js-badge:empty { display: none; }
.c-l2 .t { color: var(--cyan); font-weight: 800; margin-right: 6px; }
.c-l3 { margin-top: 2px; color: var(--dim); font-size: 12.5px; }
.row-card .aka { margin: 2px 0 0; font-size: 12.5px; color: var(--dim); }
.row-card .music-more { font-size: 12.5px; }
.c-chev { color: var(--dim); }
.c-chev svg { width: 18px; height: 18px; transform: rotate(-90deg); }
.grid.past-day .row-card { filter: saturate(.55); }
.grid.no-anim .row-card { animation: none; }
@media (prefers-reduced-motion: reduce) { .row-card { animation: none; } }

/* the map popup in the card's look */
.pop .a-head { gap: 10px; }
.pop .a-head .av { width: 40px; height: 40px; }
.pop .date-block { width: 46px; height: 46px; }
.pop .a-name h3 { margin: 0; font: 800 16.5px/1.2 var(--font-display); }
.pop .a-meta { margin-top: 2px; font-size: 13px; }
.pop .a-head .star { margin: -10px -12px -10px 0; }
.pop .a-tonight { margin-top: 10px; padding: 6px 9px; }
.pop-prog { margin-top: 8px; font-weight: 600; }
.pop-prog b { margin-right: 4px; color: var(--cyan); }
.pop-prog small { color: var(--muted); }

/* ---------- UX review, built 17 Oct 2026 (owner's choice: items 1, 2, 3, 4, 10, 11, 12) ---------- */
/* 2: the count, then List / Map and Expand / Collapse as small icon switches */
.results-head { align-items: center; flex-wrap: nowrap; }
.rh-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.results-head .vw-btn { margin-left: 0; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 12px; }
.results-head .vw-btn svg { width: 18px; height: 18px; }
#resultCount b.now { color: var(--green); font-weight: 800; }
.count-skel { display: inline-block; width: 170px; height: 15px; vertical-align: -2px; border-radius: 8px;
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear; }

/* 1: tonight's groups; the closed venues folded at the end */
.group-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 8px 2px 0;
  font: 800 12px/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.group-head:first-child { margin-top: 0; }
.group-head .k { margin-left: auto; color: var(--dim); letter-spacing: 0; }
.gdot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
.gdot.live, .gdot.open { background: var(--green); box-shadow: 0 0 8px rgba(52, 211, 153, .8); }
.gdot.soon { background: var(--cyan); }
.gdot.later { background: var(--violet); }
.group-fold { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  margin-top: 6px; padding: 14px; border-radius: 16px; border: 1px dashed var(--line-2); background: rgba(255, 255, 255, .02);
  color: var(--muted); font: 700 14px var(--font); }
.group-fold svg { transform: rotate(-90deg); transition: transform .15s; }
.group-fold[aria-expanded="true"] svg { transform: none; }
.group-closed { display: contents; }
.group-closed > .row-card, .group-closed > .card { background: var(--bg-2); }
.group-closed .av { filter: grayscale(.6); }
.badge.later { background: rgba(139, 92, 246, .16); color: #c4b5fd; }
.c-l2.was { color: var(--muted); }
.c-l2.was .t { color: var(--dim); }
.ended-tag { color: var(--dim); font-size: 12px; font-weight: 700; }

/* 3: the map's legend, the pins by tonight's group, clusters with their share open, the card over the map */
/* the legend (audit A26, A27, 23 Oct 2026): one row that scrolls on a phone (it wrapped to four rows above the map); a
   switch for "Open now only", then the key, each ring as the pins draw it, in the list's order and words */
.map-legend { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; padding: 4px 10px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line); background: var(--bg-2); }
.map-legend::-webkit-scrollbar { display: none; }
.lg-toggle { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 8px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: 700 13px var(--font); white-space: nowrap; cursor: pointer; }
.lg-toggle .sw { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); flex: none; }
.lg-toggle .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: transform .15s; }
.lg-toggle[aria-pressed="true"] { border-color: rgba(52, 211, 153, .6); background: rgba(52, 211, 153, .12); }
.lg-toggle[aria-pressed="true"] .sw { background: var(--green); border-color: transparent; }
.lg-toggle[aria-pressed="true"] .sw::after { transform: translateX(12px); background: #fff; }
.lg-key { flex: none; display: flex; align-items: center; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lg-item { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font: 700 12.5px var(--font); white-space: nowrap; }
.lg-item b { color: var(--text); font-weight: 800; }
.lg-pin { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .92);
  background: linear-gradient(135deg, var(--violet), var(--cyan)); }
.lg-pin.s-closed { width: 9px; height: 9px; }
.pin.s-open, .lg-pin.s-open { box-shadow: 0 0 0 3px var(--green), 0 0 16px rgba(52, 211, 153, .9); }
.pin.s-opening, .lg-pin.s-opening { box-shadow: 0 0 0 3px var(--cyan), 0 0 12px rgba(34, 211, 238, .8); }
.pin.s-closing, .lg-pin.s-closing { box-shadow: 0 0 0 3px var(--amber), 0 0 12px rgba(251, 191, 36, .8); }
.pin.s-later, .lg-pin.s-later { box-shadow: 0 0 0 3px var(--violet), 0 0 10px rgba(139, 92, 246, .7); }
/* Closed in the list's red, dimmed and smaller (A27: grey here, red in the list) */
.pin.s-closed, .lg-pin.s-closed { filter: saturate(.3) brightness(.6); border-color: rgba(255, 255, 255, .5); box-shadow: 0 0 0 2px var(--red); }
.pin-cluster.share span { border: 0; background: conic-gradient(var(--green) calc(var(--p) * 1%), rgba(120, 116, 140, .85) 0);
  box-shadow: 0 0 14px rgba(0, 0, 0, .5); position: relative; z-index: 0; }
.pin-cluster.share span::before { content: ""; position: absolute; inset: 5px; z-index: -1; border-radius: 50%; background: #1c1929; }
.pop-acts .act.ico { flex: 0 0 44px; padding: 0; }
.pop-acts button.act { color: var(--text); font: 700 13px var(--font); }
.pop-prog.was { color: var(--muted); }
.pop-prog.was b { color: var(--dim); }
.card-sheet { max-width: 560px; max-height: 86dvh; }
/* the card over the map: one frame, the close button at its top right (audit A60: a second frame under an empty row) */
.card-sheet .sheet-head { position: absolute; top: 14px; right: 10px; z-index: 2; padding: 0; }
.card-sheet-body { overflow-y: auto; padding: 14px 12px 16px; overscroll-behavior: contain; }
.card-sheet-body .card { animation: none; border: 0; background: none; padding: 0; overflow: visible; }
.card-sheet-body .card::before { display: none; }
.card-sheet-body .a-head { padding-right: 46px; }
.card-sheet-body .fold-btn { display: none; }

/* 4: empty states with an icon and a way forward; loading shaped like the rows */
.empty .em-ic { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 46, 147, .35), rgba(139, 92, 246, .25)); color: #fff; }
.empty .em-ic svg { width: 26px; height: 26px; }
.empty .btn { margin-top: 16px; }
.skel-row { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 11px 12px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.skel-row .sq, .skel-row u { display: block; border-radius: 8px;
  background: linear-gradient(90deg, var(--surface-2) 0%, #2a2540 50%, var(--surface-2) 100%); background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear; }
.skel-row .sq { width: 56px; height: 56px; border-radius: 14px; }
.skel-row u { height: 12px; margin: 7px 0; }
.skel-row u:nth-child(1) { width: 62%; } .skel-row u:nth-child(2) { width: 88%; } .skel-row u:nth-child(3) { width: 45%; }

/* 12: the Data tab: the plain summary, then the owner's details folded */
.info-summary .plain { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 0; font-size: 14px; }
.info-summary .plain dt { color: var(--muted); font-weight: 600; }
.info-summary .plain dd { margin: 0; min-width: 0; }
/* About Nightlife Dubai (going online, 23 Oct 2026): the contact for venues, Privacy and Terms; inline links keep a 44 px
   target and take the height back */
.info-about p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.info-about p:last-child { margin-bottom: 0; }
.info-about a { color: var(--violet-text); display: inline-block; padding: 13px 4px; margin: -13px -4px; }
.info-more { display: grid; gap: 14px; }
.info-more > summary { cursor: pointer; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  color: var(--muted); font-weight: 700; list-style: none; }
.info-more > summary::-webkit-details-marker { display: none; }
.info-more[open] > summary { margin-bottom: 14px; }
@media (max-width: 420px) { .info-summary .plain { grid-template-columns: 1fr; gap: 2px; } .info-summary .plain dd { margin-bottom: 8px; } }

/* ---------- the owner's batch of 23 Oct 2026 and the audit's fixes ---------- */
/* the Map tab tonight: the legend carries the counts, so the count line goes and the map gets its room */
#view-events.legend-on .results-head { display: none; }
/* a part with nothing in it takes no room on a phone (audit A56: an empty programs gap); on a computer every card keeps
   its six parts, lined up across the row */
@media (max-width: 759px) { .a-card > div:empty, .a-card > .a-ton:not(:has(*)) { display: none; } }
/* the tabs at the top on a computer, in the slim bar (audit A54, 23 Oct 2026: the phone's 75 px bottom bar stayed across
   the window, over the content) */
@media (min-width: 900px) and (hover: hover) {
  .topbar { min-height: 56px; }
  .tabbar {
    top: 0; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); z-index: 26; gap: 4px;
    padding: calc(var(--safe-t) + 6px) 0 6px; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .tab { flex: none; max-width: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font-size: 14px; }
  .tab svg { width: 18px; height: 18px; }
  .tab:hover { color: var(--text); }
  .tab.active { background: var(--surface-2); }
  .app { padding-bottom: 32px; }
  :root { --tabbar-h: 0px; }
}

/* Privacy and Terms (going online, 23 Oct 2026): a plain page in the app's colours, readable at phone width */
.doc-page { padding: calc(16px + var(--safe-t)) 16px calc(32px + var(--safe-b)); }
.doc { max-width: 720px; margin: 0 auto; }
.doc-home { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; }
.doc h1 { font-family: var(--font-display); font-size: 30px; line-height: 1.15; margin: 18px 0 4px; }
.doc h2 { font-size: 17px; margin: 26px 0 6px; }
.doc p { margin: 0 0 10px; color: var(--text); line-height: 1.55; }
.doc .doc-date { color: var(--muted); font-size: 13px; }
.doc a { color: var(--violet-text); }
.doc .doc-links { margin-top: 28px; }
.doc .doc-links a { display: inline-block; padding: 12px 2px; }

/* ---------- the design batch (owner, 23 Oct 2026: the UX review's items 6, 8 and 9 as additions to the current look) */
/* item 6: each type button's count, greyed at 0; on a phone a grid button beside the row opens every type at once */
.seg .cnt { font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; }
.seg .cnt:empty { display: none; }
.seg.on .cnt { color: rgba(255, 255, 255, .8); }
.seg.zero:not(.on) { color: var(--dim); }
.seg.zero:not(.on) .dot { opacity: .45; }
.type-row { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; }
.type-row .rail { flex: 1; min-width: 0; margin: 0; }
#allTypesBtn { flex: none; width: 44px; height: 54px; border-radius: 14px; }
@media (hover: hover) { #allTypesBtn { display: none; } }
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 16px calc(18px + var(--safe-b)); overflow-y: auto; }
.type-tile {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font: 700 14px/1.2 var(--font);
  text-align: left; cursor: pointer;
}
.type-tile .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--grad)); }
.type-tile .l { flex: 1; min-width: 0; }
.type-tile .cnt { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.type-tile.on { border-color: transparent; background: var(--grad-solid); }
.type-tile.on .cnt { color: rgba(255, 255, 255, .85); }
.type-tile.zero:not(.on) { color: var(--dim); }
/* item 8: quick filters under the search */
.quick-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -2px -16px 10px; padding: 0 16px; }
.quick-chips::-webkit-scrollbar { display: none; }
.quick-chips[hidden] { display: none; }
.qchip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: 700 13.5px var(--font);
  white-space: nowrap; cursor: pointer;
}
.qchip svg { width: 15px; height: 15px; }
.qchip .n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgba(255, 255, 255, .18);
  font-size: 11.5px; line-height: 18px; text-align: center; }
.qchip.on { border-color: transparent; background: var(--grad-solid); color: #fff; }
.qchip.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.qchip.on.live::before { background: #fff; }
/* item 9: a festival of several days, its range in the date block */
.date-block.range b { font-size: 15px; letter-spacing: -.01em; }
.date-block.range { font-size: 9.5px; }