:root {
  color-scheme: dark;

  /* ======================================================================
     TYPOGRAPHY
     Change these three variables to update fonts across the entire site.
     ====================================================================== */
  --font-sans: "Manrope", sans-serif;
  --font-mono: var(--font-sans);
  --font-print: var(--font-sans);

  /* ======================================================================
     CORE COLOUR CHANNELS
     RGB channels make translucent colours inherit the same theme palette.
     Enter values as space-separated RGB numbers: 96 199 245
     ====================================================================== */
  --page-rgb: 3 47 43;
  --panel-rgb: 7 58 53;
  --panel-glass-rgb: 5 50 46;
  --surface-alt-rgb: 10 66 60;
  --surface-deep-rgb: 13 71 65;
  --backdrop-rgb: 0 23 21;
  --line-rgb: 176 217 210;
  --mist-rgb: 157 187 182;
  --muted-rgb: 169 199 194;
  --text-rgb: 224 238 235;
  --pale-rgb: 231 244 241;
  --accent-rgb: 96 199 245;
  --lime-rgb: 207 233 118;
  --coral-rgb: 255 158 134;
  --warning-rgb: 255 179 107;
  --white-rgb: 255 255 255;
  --black-rgb: 0 0 0;
  --ink-rgb: 3 47 43;
  --image-overlay-rgb: 1 24 22;

  /* Core solid colours */
  --page: rgb(var(--page-rgb));
  --panel: rgb(var(--panel-rgb));
  --panel-glass: rgb(var(--panel-glass-rgb));
  --surface-alt: rgb(var(--surface-alt-rgb));
  --surface-deep: rgb(var(--surface-deep-rgb));
  --line: rgb(var(--line-rgb) / 0.14);
  --mist: rgb(var(--mist-rgb));
  --muted: rgb(var(--muted-rgb));
  --text: rgb(var(--text-rgb));
  --pale: rgb(var(--pale-rgb));
  --accent: rgb(var(--accent-rgb));
  --lime: rgb(var(--lime-rgb));
  --coral: rgb(var(--coral-rgb));
  --warning: rgb(var(--warning-rgb));
  --white: rgb(var(--white-rgb));
  --black: rgb(var(--black-rgb));
  --ink: rgb(var(--ink-rgb));

  /* Text hierarchy */
  --text-pale: #e7f4f1;
  --text-soft: #dbeae7;
  --text-strong: #f4fbfa;
  --text-hover: #ffffff;
  --control-text: #c8dad6;
  --countdown-text: #d0e1dd;
  --muted-mid: #acc7c2;
  --muted-dark: #a0beba;
  --muted-deep: #92b4af;
  --calendar-event-text: #e1efec;
  --calendar-day-text: #cbe0dc;
  --calendar-meta-text: #b9d0cc;
  --calendar-venue-text: #b4ccc8;
  --calendar-arrow-text: #b9d0cc;
  --section-label: #d2e4e0;
  --success-text: #c9edcf;
  --warning-text: #ffd09e;
  --accent-soft: #8fdcff;
  --accent-hover: #8bdcff;
  --accent-pale: #effbff;
  --active-text: #f2fbff;
  --text-surface: #d9e8e5;

  /* Category colours */
  --category-music: var(--accent);
  --category-art: #c98cff;
  --category-food: #ffb36b;
  --category-talks: var(--lime);
  --category-community: #7ce1bd;
  --category-family: var(--coral);

  /* Floating notices */
  --floating-edge: 16px;
  --results-jump-bottom: 16px;
  --toast-stack-bottom: 16px;
  --floating-light: #e5efed;
  --floating-light-hover: var(--white);
  --floating-ink: var(--ink);
  --floating-subtle: rgb(var(--ink-rgb) / 0.66);
  --floating-border: rgb(var(--ink-rgb) / 0.2);

  /* Print palette */
  --print-paper: var(--white);
  --print-ink: #123633;
  --print-brand: #39726c;
  --print-generated: #567a76;
  --print-summary-bg: #eef4f2;
  --print-secondary: #426662;
  --print-border: #b9cbc8;
  --print-rule: #789994;
  --print-divider: #d0ddda;
  --print-venue: #315a56;
  --print-note-accent: #60a6bf;
  --print-note-bg: #f2f6f5;
  --print-note-text: #234945;
  --print-connection-accent: #6e9892;
  --print-connection-bg: #f3f7f6;
  --print-connection-text: #3d6661;
  --print-danger-accent: #b4483f;
  --print-danger-bg: #fff0ee;
  --print-danger-text: #7b2f29;
  --print-warning-accent: #b9782c;
  --print-warning-bg: #fff6e9;
  --print-warning-text: #76501f;
}

* {
  box-sizing: border-box;
}
html {
  background: var(--page);
}
body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(
      circle at 78% -10%,
      rgb(var(--accent-rgb) / 0.08),
      transparent 30rem
    ),
    radial-gradient(
      circle at 10% 55%,
      rgb(var(--lime-rgb) / 0.035),
      transparent 28rem
    ),
    var(--page);
  color: var(--text);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgb(var(--accent-rgb) / 0.28);
  color: var(--white);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.055;
  z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.shell {
  width: min(1440px, calc(100% - 2rem));
  margin-inline: auto;
}
.hairline {
  border-color: var(--line);
}

.micro {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.chip {
  border: 1px solid rgb(var(--line-rgb) / 0.15);
  background: rgb(var(--panel-rgb) / 0.62);
  color: var(--control-text);
  transition: 0.2s ease;
}
.chip:hover,
.chip.is-active {
  color: var(--text-strong);
  border-color: rgb(var(--accent-rgb) / 0.42);
  background: rgb(var(--accent-rgb) / 0.09);
}

.event-row {
  display: grid;
  grid-template-columns: 72px minmax(210px, 0.9fr) minmax(
      250px,
      1.25fr
    ) 140px 84px;
  align-items: center;
  gap: 1.75rem;
  padding: 1.85rem 0;
  border-bottom: 1px solid var(--line);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.event-row:hover {
  background: linear-gradient(
    90deg,
    rgb(var(--white-rgb) / 0.015),
    rgb(var(--accent-rgb) / 0.025),
    transparent
  );
}

.event-row[hidden] {
  display: none !important;
}

.date-day {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text-soft);
}

.event-title {
  color: var(--text-soft);
  transition: color 0.2s ease;
}
.event-row:hover .event-title {
  color: var(--white);
}

.thumb-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(64px, 1fr);
  gap: 0.45rem;
  overflow: hidden;
}

.thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-deep);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.04);
  transition:
    transform 0.35s ease,
    filter 0.35s ease;
}

.event-row:hover .thumb img {
  transform: scale(1.045);
  filter: saturate(1.02) contrast(1.03);
}

.thumb-count {
  position: absolute;
  inset: auto 0.35rem 0.35rem auto;
  min-width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  background: rgb(var(--ink-rgb) / 0.84);
  color: var(--white);
  font:
    500 0.6rem/1 var(--font-mono);
  backdrop-filter: blur(8px);
}

.save-btn {
  color: var(--muted-dark);
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}
.save-btn:hover {
  color: var(--text-hover);
  transform: translateY(-1px);
}
.save-btn.is-saved {
  color: var(--accent);
}
.save-btn.is-saved svg {
  fill: currentColor;
}

.verified {
  display: inline-grid;
  place-items: center;
  color: var(--accent);
  transform: translateY(-1px);
}

.countdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  font-family: var(--font-mono);
  color: var(--countdown-text);
}

.countdown span {
  display: block;
  text-align: center;
  font-size: 0.67rem;
}

.countdown small {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted-deep);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-rule {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: 2.65rem;
}
.section-rule::after {
  content: "";
  height: 1px;
  background: var(--line);
}

.glass-panel {
  border: 1px solid rgb(var(--line-rgb) / 0.15);
  background: rgb(var(--panel-glass-rgb) / 0.86);
  box-shadow: 0 26px 75px rgb(var(--black-rgb) / 0.28);
  backdrop-filter: blur(22px);
}

.modal-backdrop {
  background: rgb(var(--backdrop-rgb) / 0.72);
  backdrop-filter: blur(9px);
}

.empty-state {
  display: none;
}
.empty-state.is-visible {
  display: grid;
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgb(var(--white-rgb) / 0.025),
    rgb(var(--white-rgb) / 0.075),
    rgb(var(--white-rgb) / 0.025)
  );
  background-size: 200% 100%;
  animation: shimmer 1.45s infinite linear;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

@media (max-width: 1050px) {
  .event-row {
    grid-template-columns: 64px minmax(220px, 1fr) minmax(240px, 1fr) 72px;
  }
  .event-row .countdown-wrap {
    display: none;
  }
}

@media (max-width: 760px) {
  .shell {
    width: min(100% - 1.25rem, 720px);
  }
  .event-row {
    grid-template-columns: 48px 1fr 42px;
    gap: 1rem;
    align-items: start;
    padding-block: 1.5rem;
  }
  .event-row .media-col {
    grid-column: 2 / 4;
    margin-top: 0.25rem;
  }
  .thumb-strip {
    grid-auto-columns: 82px;
    justify-content: start;
  }
  .event-row .event-actions {
    grid-column: 3;
    grid-row: 1;
  }
  .date-day {
    font-size: 0.92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

.calendar-shell {
  display: flex;
  width: min(1120px, calc(100% - 2rem));
  max-height: 92vh;
  flex-direction: column;
  overflow: hidden;
}
.calendar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(105px, 1fr));
  min-width: 760px;
  border-top: 1px solid var(--line);
}

.calendar-weekday {
  padding: 0.8rem 0.7rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: rgb(var(--mist-rgb) / 0.65);
  font:
    500 0.57rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.calendar-day {
  min-height: 118px;
  padding: 0.65rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgb(var(--white-rgb) / 0.008);
}

.calendar-day.is-outside {
  opacity: 0.34;
}
.calendar-day.is-today {
  background: rgb(var(--accent-rgb) / 0.055);
}

.calendar-day-number {
  display: inline-grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border-radius: 999px;
  color: var(--calendar-day-text);
  font:
    500 0.68rem/1 var(--font-mono);
}

.calendar-day.is-today .calendar-day-number {
  background: var(--text-surface);
  color: var(--ink);
}

.calendar-event {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  overflow: hidden;
  border-left: 2px solid var(--accent);
  background: rgb(var(--accent-rgb) / 0.08);
  padding: 0.35rem 0.45rem;
  text-align: left;
  color: var(--calendar-event-text);
  font-size: 0.62rem;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.calendar-event:hover {
  background: rgb(var(--accent-rgb) / 0.16);
  color: var(--white);
}

.calendar-more {
  margin-top: 0.35rem;
  color: var(--muted-dark);
  font:
    500 0.55rem/1.2 var(--font-mono);
}

.calendar-list {
  display: none;
}

.calendar-list-group {
  border-bottom: 1px solid var(--line);
}

.calendar-list-date {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1rem;
  background: rgb(var(--ink-rgb) / 0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.calendar-list-day {
  font:
    600 1.3rem/1 var(--font-mono);
  color: var(--text);
}

.calendar-list-meta {
  color: var(--calendar-meta-text);
  font:
    500 0.58rem/1.45 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.calendar-list-event {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 34px;
  gap: 0.8rem;
  align-items: center;
  width: 100%;
  padding: 1rem;
  border-bottom: 1px solid rgb(var(--line-rgb) / 0.09);
  text-align: left;
  transition: background 0.18s ease;
}

.calendar-list-event:last-child {
  border-bottom: 0;
}

.calendar-list-event:hover,
.calendar-list-event:focus-visible {
  background: rgb(var(--accent-rgb) / 0.07);
  outline: none;
}

.calendar-list-time {
  color: var(--mist);
  font:
    500 0.65rem/1.2 var(--font-mono);
}

.calendar-list-title {
  display: block;
  overflow: hidden;
  color: var(--text-pale);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-list-venue {
  display: block;
  margin-top: 0.3rem;
  overflow: hidden;
  color: var(--calendar-venue-text);
  font-size: 0.66rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-list-arrow {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--calendar-arrow-text);
}

.calendar-list-empty {
  display: grid;
  min-height: 260px;
  place-items: center;
  padding: 2rem;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 760px) {
  .calendar-shell {
    width: 100%;
    height: 94dvh;
    max-height: 94dvh;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .calendar-grid {
    display: none;
  }

  .calendar-list {
    display: block;
  }
}



html.light {
  color-scheme: light;

  /* Core theme channels */
  --page-rgb: 237 244 241;
  --panel-rgb: 248 251 249;
  --panel-glass-rgb: 248 251 249;
  --surface-alt-rgb: 237 244 241;
  --surface-deep-rgb: 248 251 249;
  --line-rgb: 3 47 43;
  --mist-rgb: 57 87 83;
  --muted-rgb: 57 87 83;
  --text-rgb: 23 63 59;
  --accent-rgb: 8 127 174;
  --lime-rgb: 113 140 0;

  /* Solid text overrides */
  --text-pale: var(--ink);
  --text-soft: var(--ink);
  --text-strong: var(--ink);
  --text-hover: var(--ink);
  --control-text: var(--muted);
  --countdown-text: var(--muted);
  --calendar-event-text: var(--ink);
  --calendar-day-text: var(--muted);
  --calendar-meta-text: var(--muted);
  --calendar-venue-text: var(--muted);
  --calendar-arrow-text: var(--muted);
  --section-label: var(--muted);
}

html.light body {
  background:
    radial-gradient(
      circle at 78% -10%,
      rgb(var(--accent-rgb) / 0.08),
      transparent 30rem
    ),
    radial-gradient(
      circle at 10% 55%,
      rgb(var(--lime-rgb) / 0.04),
      transparent 28rem
    ),
    var(--page);
}

html.light .bg-ink\/90 {
  background-color: rgb(var(--page-rgb) / 0.92) !important;
}
html.light .bg-ink,
html.light .bg-\[\#0a3d38\] {
  background-color: var(--page) !important;
}
html.light .bg-panel\/45,
html.light .bg-panel {
  background-color: rgb(var(--panel-rgb) / 0.92) !important;
}
html.light .text-pale,
html.light .text-white {
  color: var(--ink) !important;
}
html.light .text-mist {
  color: var(--muted) !important;
}
html.light .glass-panel {
  background: rgb(var(--panel-rgb) / 0.94);
}
html.light dialog::backdrop {
  background: rgb(var(--ink-rgb) / 0.42);
}
html.light body::before {
  opacity: 0.025;
}

.feature-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgb(var(--panel-glass-rgb) / 0.66);
}

.feature-media {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background: var(--surface-alt);
}

.feature-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--image-overlay-rgb) / 0.16), transparent 38%),
    linear-gradient(0deg, rgb(var(--image-overlay-rgb) / 0.52), transparent 48%);
}

.feature-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;

  /* Permanently crops a few pixels from the image edges */
  transform: scale(1.012);
  transform-origin: center;

  filter: saturate(0.88) contrast(1.03);

  transition:
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.4s ease;
}

.feature-stage:hover .feature-media img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1.03);
}

.feature-index {
  position: absolute;
  z-index: 2;
  top: 1.25rem;
  left: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid rgb(var(--white-rgb) / 0.22);
  background: rgb(var(--ink-rgb) / 0.46);
  padding: 0.55rem 0.7rem;
  color: rgb(var(--white-rgb) / 0.78);
  font:
    500 0.55rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

.feature-index strong {
  color: var(--white);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
}






.feature-date-card {
  position: absolute;
  z-index: 2;
  bottom: 1.35rem;
  left: 1.35rem;

  display: block;
  border: 0;
  background: transparent;
  box-shadow: none;

  font-family: var(--font-sans);
}

/* Featured image day and date square */
.feature-date-day {
  display: flex;
  width: 72px;
  height: 72px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;

  padding: 0;
  border: 0;
  background: var(--pale);
  color: var(--ink);

  box-shadow: 0 14px 34px rgb(var(--black-rgb) / 0.24);
}

.feature-date-day span {
  width: 100%;
  text-align: center;
  text-indent: 0.12em;

  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.feature-date-day strong {
  width: 100%;
  text-align: center;

  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.06em;
}


.feature-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3.75rem);
}

.feature-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.feature-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--accent-soft);
  font:
    500 0.58rem/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.feature-details {
  display: grid;
  gap: 0;
  margin-top: 1.7rem;
  border-block: 1px solid var(--line);
}

.feature-detail {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);

  /* Text beside the icons */
  font-size: 0.82rem;
  line-height: 1.5;
}

.feature-detail:last-child {
  border-bottom: 0;
}
.feature-detail svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  stroke-width: 1.8;
}

.feature-save.is-saved {
  border-color: rgb(var(--accent-rgb) / 0.48);
  background: rgb(var(--accent-rgb) / 0.1);
  color: var(--accent-pale);
}

#richSaveButton.is-active svg {
  fill: currentColor;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--line);
  padding: 0.3rem 0.5rem;
  color: var(--muted);
  font:
    500 0.52rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-pill.is-hot {
  border-color: rgb(var(--coral-rgb) / 0.34);
  background: rgb(var(--coral-rgb) / 0.07);
  color: var(--coral);
}

.status-pill.is-live {
  border-color: rgb(var(--lime-rgb) / 0.34);
  background: rgb(var(--lime-rgb) / 0.07);
  color: var(--lime);
}

.status-pill.is-cancelled {
  color: var(--coral);
  text-decoration: line-through;
}

.discovery-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.55rem;
}

.discovery-option,
.mood-option {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid var(--line);
  background: rgb(var(--panel-rgb) / 0.4);
  padding: 0.85rem 0.9rem;
  text-align: left;
  color: var(--mist);
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.discovery-option:hover,
.mood-option:hover,
.discovery-option.is-active,
.mood-option.is-active {
  border-color: rgb(var(--accent-rgb) / 0.42);
  background: rgb(var(--accent-rgb) / 0.075);
  color: var(--text-strong);
  transform: translateY(-1px);
}

.discovery-option svg,
.mood-option svg {
  flex: 0 0 auto;
  color: var(--accent);
}

.discovery-option span,
.mood-option span {
  min-width: 0;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
}

.mood-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
}

.category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  overflow: visible;
}

.category-grid .chip {
  flex: 0 0 auto;
  white-space: normal;
}

.filter-token {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--line);
  padding: 0.4rem 0.65rem;
  color: var(--muted);
  font-size: 0.625rem;
  transition: 0.18s ease;
}

.filter-token:hover {
  border-color: rgb(var(--accent-rgb) / 0.4);
  color: var(--text);
}

.event-row {
  position: relative;
  opacity: 0;
  transform: translateY(6px);
  animation: eventRowIn 0.42s ease forwards;
}

@keyframes eventRowIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.event-meta-line {
  margin-top: 0.18rem;
  color: var(--muted-mid);
  font-size: 0.625rem;
  line-height: 1.45;
}

.premium-search-results {
  max-height: 340px;
  overflow: auto;
  border: 1px solid var(--line);
}

.search-result-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid var(--line);
  padding: 0.78rem 0.85rem;
  text-align: left;
  transition: background 0.16s ease;
}

.search-result-row:hover,
.search-result-row.is-active {
  background: rgb(var(--accent-rgb) / 0.075);
}

mark {
  background: rgb(var(--accent-rgb) / 0.2);
  color: inherit;
}

.map-product-shell {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  min-height: 640px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.map-product-list {
  max-height: 640px;
  overflow: auto;
  border-right: 1px solid var(--line);
  background: rgb(var(--panel-glass-rgb) / 0.6);
}

.map-result-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 1rem;
  width: 100%;
  border-bottom: 1px solid var(--line);
  padding: 1rem;
  text-align: left;
  transition: background 0.18s ease;
}

.map-result-row:hover,
.map-result-row.is-active {
  background: rgb(var(--accent-rgb) / 0.08);
}

.map-result-row img {
  width: 58px;
  height: 58px;
  object-fit: cover;
}

#eventsMap {
  min-height: 640px;
  background: var(--panel);
}

/* Individual event marker */
.notfin-marker {
  position: relative;
  width: 24px;
  height: 24px;
  border: 2px solid var(--pale);
  border-radius: 999px;
  background: var(--page);
  box-shadow:
    0 0 0 4px rgb(var(--ink-rgb) / 0.2),
    0 8px 22px rgb(var(--black-rgb) / 0.38);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* Small centre point */
.notfin-marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--pale);
  transform: translate(-50%, -50%);
}

/* Marker belonging to the highlighted event */
.notfin-marker.is-active {
  transform: scale(1.25);
  border-color: var(--white);
  box-shadow:
    0 0 0 6px rgb(var(--ink-rgb) / 0.28),
    0 10px 30px rgb(var(--black-rgb) / 0.48);
}

.notfin-marker.is-active::after {
  background: var(--white);
}

/* Leaflet cluster container */
.morrow-cluster {
  display: grid !important;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

/* Cluster circle and number */
.morrow-cluster span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 2px solid var(--pale);
  border-radius: 999px;
  background: rgb(var(--ink-rgb) / 0.96);
  color: var(--text-pale);
  box-shadow:
    0 0 0 5px rgb(var(--ink-rgb) / 0.2),
    0 10px 28px rgb(var(--black-rgb) / 0.42);

  /* Matches the larger event titles in the left panel */
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;

  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.morrow-cluster:hover span {
  transform: scale(1.06);
  border-color: var(--white);
  background: var(--panel);
  color: var(--white);
}

.leaflet-control-attribution {
  font-size: 9px !important;
}

dialog {
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
}

dialog::backdrop {
  background: rgb(var(--backdrop-rgb) / 0.74);
  backdrop-filter: blur(9px);
}

dialog[open] {
  animation: dialogEnter 0.24s ease both;
}
@keyframes dialogEnter {
  from {
    opacity: 0;
    transform: translateY(9px) scale(0.992);
  }
}

.dialog-shell {
  width: min(820px, calc(100vw - 2rem));
  max-height: min(92vh, 940px);
  overflow: auto;
}

.dialog-shell-wide {
  width: min(1160px, calc(100vw - 2rem));
  max-height: min(94vh, 980px);
  overflow: auto;
}

.event-gallery {
  display: grid;
  gap: 0.45rem;
  overflow: hidden;
}

.event-gallery[data-count="3"] {
  grid-template-columns: 1.6fr 0.8fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  aspect-ratio: 16 / 8;
}

.event-gallery[data-count="3"] .event-gallery-item:first-child {
  grid-row: 1 / 3;
}

/* Four images: large lead with three supporting images */
.event-gallery[data-count="4"] {
  grid-template-columns: 1.35fr 0.9fr 0.9fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  aspect-ratio: 16 / 8;
}

.event-gallery[data-count="4"] .event-gallery-item:first-child {
  grid-row: 1 / 3;
}

/* Two images: equal 50/50 split */
.event-gallery[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  aspect-ratio: 16 / 8;
}

/* One image: full gallery width */
.event-gallery[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  aspect-ratio: 16 / 8;
}

.event-gallery-item {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-deep);
  color: var(--white);
}

.event-gallery-hidden-item {
  display: none !important;
}

.event-gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--surface-deep);
  transition: transform 0.4s ease, filter 0.4s ease;
}

.event-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgb(var(--black-rgb) / 0.34));
  opacity: 0;
  transition: opacity 0.25s ease;
}

.event-gallery-item:hover img,
.event-gallery-item:focus-visible img {
  transform: scale(1.025);
  filter: saturate(1.05) contrast(1.02);
}

.event-gallery-item:hover::after,
.event-gallery-item:focus-visible::after {
  opacity: 1;
}

.event-gallery-zoom,
.event-gallery-more {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--white-rgb) / 0.24);
  background: rgb(var(--ink-rgb) / 0.72);
  color: var(--white);
  backdrop-filter: blur(10px);
}

.event-gallery-zoom {
  right: 0.75rem;
  bottom: 0.75rem;
  width: 2.4rem;
  height: 2.4rem;
}

.event-gallery-more {
  inset: 0;
  flex-direction: column;
  gap: 0.15rem;
  background: rgb(var(--ink-rgb) / 0.72);
  font-weight: 700;
}

.event-gallery-more strong {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1;
}

.event-gallery-more small {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fancybox__container {
  --fancybox-bg: rgb(var(--backdrop-rgb) / 0.94);
  z-index: 9999;
}

.fancybox__caption {
  font-family: var(--font-sans);
  color: var(--text-strong);
}

.sticky-ticket {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: rgb(var(--panel-glass-rgb) / 0.96);
  backdrop-filter: blur(18px);
}

.toast-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 200;
  display: grid;
  gap: 0.55rem;
  width: min(360px, calc(100vw - 2rem));
}

.toast {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  border: 1px solid rgb(var(--line-rgb) / 0.25);
  background: rgb(var(--panel-glass-rgb) / 0.96);
  padding: 0.85rem 1rem;
  box-shadow: 0 18px 50px rgb(var(--black-rgb) / 0.28);
  backdrop-filter: blur(18px);
  animation: toastEnter 0.24s ease both;
}

@keyframes toastEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 14px rgb(var(--accent-rgb) / 0.65);
  transition:
    width 0.24s ease,
    opacity 0.24s ease;
}

.switch-ui {
  position: relative;
  display: block;
  width: 40px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
}

.switch-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--muted-mid);
  transition: 0.2s ease;
}

input:checked + .switch-ui::after {
  transform: translateX(18px);
  background: var(--accent);
}

.plan-item {
  cursor: grab;
}
.plan-item.dragging {
  opacity: 0.45;
}
.plan-conflict {
  border-left: 2px solid var(--coral);
  background: rgb(var(--coral-rgb) / 0.055);
}

.travel-line {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 0.7rem;
  align-items: center;
  padding: 0.65rem 1rem 0.65rem 2.2rem;
  color: var(--muted-mid);
  font-size: 0.68rem;
}

.step-dot {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted-mid);
  font:
    500 0.62rem/1 var(--font-mono);
}

.step-dot.is-active {
  border-color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.1);
  color: var(--text-pale);
}

.step-dot.is-complete {
  border-color: var(--lime);
  color: var(--lime);
}

@media (max-width: 760px) {
  .feature-stage {
    display: block;
    min-height: 0;
  }

  .feature-media {
    min-height: 0;
    aspect-ratio: 16 / 10.5;
  }

  .feature-copy {
    padding: 1.6rem 1.25rem 1.4rem;
  }




  .feature-date-card {
    right: auto;
    bottom: 0.85rem;
    left: 0.85rem;
  }

  .feature-date-day {
    width: 64px;
    height: 64px;
  }

  .feature-date-day strong {
    font-size: 1.75rem;
  }





  .feature-index {
    top: 0.85rem;
    left: 0.85rem;
  }

  .discovery-grid,
  .mood-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    overflow: visible;
  }

  .discovery-option,
  .mood-option {
    width: 100%;
    min-height: 52px;
    padding: 0.72rem 0.75rem;
  }

  .mood-grid .mood-option:last-child {
    grid-column: 1 / -1;
  }

  .category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    overflow: visible;
  }

  .category-grid .chip {
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding: 0.7rem 0.6rem;
    text-align: center;
  }

  .category-grid .chip:first-child {
    grid-column: 1 / -1;
  }

  .map-product-shell {
    display: block;
    position: relative;
    min-height: calc(100vh - 180px);
  }

  .map-product-list {
    position: absolute;
    right: 0.65rem;
    bottom: 0.65rem;
    left: 0.65rem;
    z-index: 500;
    max-height: 190px;
    border: 1px solid var(--line);
    box-shadow: 0 16px 45px rgb(var(--black-rgb) / 0.28);
  }

  #eventsMap {
    min-height: calc(100vh - 180px);
  }

  .dialog-shell,
  .dialog-shell-wide {
    width: 100vw;
    max-height: 94vh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }

  dialog {
    margin: auto 0 0;
  }

  dialog[open] {
    animation: sheetEnter 0.28s ease both;
  }

  @keyframes sheetEnter {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .event-gallery,
  .event-gallery[data-count="1"],
  .event-gallery[data-count="2"],
  .event-gallery[data-count="3"],
  .event-gallery[data-count="4"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    aspect-ratio: auto;
  }

  .event-gallery-item,
  .event-gallery[data-count="3"] .event-gallery-item:first-child,
  .event-gallery[data-count="4"] .event-gallery-item:first-child {
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }

  .search-result-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }
  .search-result-row > :last-child {
    display: none;
  }
}

/* ===== Larger event listings on all screen sizes ===== */

.section-rule .micro {
  font-size: 0.7rem;
}

/* Give the larger content and controls enough room */
.event-row {
  grid-template-columns:
    82px
    minmax(230px, 0.9fr)
    minmax(280px, 1.25fr)
    160px
    104px;

  gap: 2rem;
  padding-block: 2rem;
}

/* Event title */
.event-row .event-title {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-pale);
}

/* Month and time */
.event-row .date-col > span:first-child,
.event-row .date-col > span:last-child {
  font-size: 0.68rem;
  line-height: 1.35;
}

.event-row .date-col > span:first-child {
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 600;
  color: rgb(var(--mist-rgb) / var(--tw-text-opacity, 1));
}

.event-row .date-col > span:last-child {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
}

/* Date number */
.event-row .date-day {
  font-family: var(--font-sans);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--text-pale);
}

/* Price, venue and town */
.event-row > .min-w-0 > p.font-mono {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.65rem;
  font-weight: 500;
  color: rgb(var(--mist-rgb) / var(--tw-text-opacity, 1));
}

.event-row > .min-w-0 > p.font-mono .text-pale {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-pale);
}

/* Duration, age and distance */
.event-row .event-meta-line {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgb(var(--mist-rgb) / var(--tw-text-opacity, 1));
}

/* Availability and other status labels */
.event-row .status-pill {
  padding: 0.42rem 0.65rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  color: rgb(var(--mist-rgb) / var(--tw-text-opacity, 1));
}

/* Countdown numbers */
.event-row .countdown span {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-pale);
}

/* Countdown labels: days, hrs, min */
.event-row .countdown small {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  color: rgb(var(--mist-rgb) / var(--tw-text-opacity, 1));
}

/* Verified organiser icon */
.event-row .verified svg {
  width: 18px;
  height: 18px;
}

/* Save and open-event controls */
.event-row .event-actions {
  gap: 0.5rem;
}

.event-row .event-actions button {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
}

/* Bookmark colour */
.event-row .save-btn {
  color: var(--text-pale);
}

.event-row .save-btn:hover {
  color: var(--white);
}

.event-row .save-btn.is-saved {
  color: var(--accent);
}

/* Bookmark icon */
.event-row .event-actions button[data-save-event] svg {
  width: 26px;
  height: 26px;
}





/* --------------------------------------------------------------------------
   Return to top
   -------------------------------------------------------------------------- */

.back-to-top {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: calc(
    clamp(1rem, 2.5vw, 2rem) +
    env(safe-area-inset-bottom)
  );
  z-index: 90;

  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;

  border: 1px solid rgb(var(--line-rgb) / 0.24);
  border-radius: 999px;

  background: rgb(var(--ink-rgb) / 0.9);
  color: var(--text-pale);

  box-shadow:
    0 12px 34px rgb(var(--black-rgb) / 0.32);

  cursor: pointer;
  backdrop-filter: blur(16px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);

  transition:
    opacity 0.22s ease,
    visibility 0.22s ease,
    transform 0.22s ease,
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  border-color: var(--text-pale);
  background: var(--pale);
  color: var(--ink);
  transform: translateY(-2px);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.back-to-top svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
}




/* Centre month, date and time on one vertical axis */
.event-row .date-col {
  justify-items: center;
}

.event-row .date-col > span {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.event-row .date-col .date-day {
  justify-content: center;
  text-align: center;

  /* Prevent the number appearing optically offset */
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}



/* Event group headings: Featured, Today, Next week, etc. */
.section-rule .micro {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--mist);
  text-transform: uppercase;
}


@media (max-width: 760px) {
  .back-to-top {
    width: 44px;
    height: 44px;
  }
}



/* ===== Tablet layout ===== */
@media (max-width: 1050px) {
  .event-row {
    grid-template-columns:
      72px
      minmax(220px, 1fr)
      minmax(220px, 1fr)
      104px;

    gap: 1.4rem;
  }
}

/* ===== Mobile layout ===== */
@media (max-width: 760px) {
  .event-row {
    grid-template-columns: 54px minmax(0, 1fr) 52px;
    gap: 0.85rem;
    padding-block: 1.65rem;
  }

  .event-row .date-day {
    font-size: 1.1rem;
  }

  .event-row .event-actions {
    grid-column: 3;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
  }

  .event-row .event-actions button {
    width: 48px;
    height: 48px;
  }
}

/* --------------------------------------------------------------------------
   Event listing refinements: headings, aligned dates, cyan action hovers
   -------------------------------------------------------------------------- */

/* Group headings: Featured, Today, Next week, month names, etc. */
.section-rule .micro {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--section-label);
  text-transform: uppercase;
}

/* Keep month/day/time in the same vertical positions for every event */
.event-row .date-col {
  display: grid;
  grid-template-rows: 16px 34px 16px;
  align-content: center;
  justify-items: start;
  align-self: center;
  width: 82px;
  min-width: 82px;
  row-gap: 3px;
}

.event-row .date-col > span {
  width: 100%;
  margin-top: 0 !important;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

/* Month, TODAY, TOMORROW, etc. */
.event-row .date-col > span:first-child {
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.04em;
  color: var(--mist);
}

/* Date number */
.event-row .date-col .date-day {
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: -0.04em;
  color: var(--text-pale);
}

/* Event time */
.event-row .date-col > span:last-child {
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--accent);
}

/* Bookmark and open-arrow controls */
.event-row .event-actions button {
  color: var(--text-pale);
  transition:
    color 0.18s ease,
    transform 0.18s ease;
}

.event-row .event-actions button:hover,
.event-row .save-btn:hover,
.event-row .event-actions button[data-open-event]:hover {
  color: var(--accent);
  transform: translateY(-1px);
}

/* Keep a selected bookmark cyan */
.event-row .event-actions .save-btn.is-saved,
.event-row .event-actions .save-btn.is-saved:hover {
  color: var(--accent);
}

/* Lucide icons inherit the button colour */
.event-row .event-actions button svg {
  stroke: currentColor;
}

@media (max-width: 760px) {
  .event-row .date-col {
    grid-template-rows: 14px 29px 15px;
    width: 54px;
    min-width: 54px;
    row-gap: 3px;
  }

  .event-row .date-col > span:first-child {
    font-size: 0.62rem;
    line-height: 14px;
  }

  .event-row .date-col .date-day {
    font-size: 1.2rem;
    line-height: 29px;
  }

  .event-row .date-col > span:last-child {
    font-size: 0.68rem;
    line-height: 15px;
  }
}

/* ==========================================================================
   Morrow UX upgrade
   ========================================================================== */

/* List / map segmented control */
.view-switch {
  display: inline-flex;
  height: 40px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(var(--panel-rgb) / 0.55);
}

.view-switch-button {
  display: inline-flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0 0.9rem;
  color: var(--muted);
  font-size: 0.7rem;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.view-switch-button:hover {
  color: var(--white);
}

.view-switch-button.is-active {
  background: rgb(var(--accent-rgb) / 0.12);
  color: var(--active-text);
}

.view-switch-button + .view-switch-button {
  border-left: 1px solid var(--line);
}

/* Intent buttons now adapt to the number of choices */
.discovery-grid {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

/* Whole event rows are actionable */

/* Initial loading skeletons */
.event-skeleton {
  display: grid;
  grid-template-columns:
    82px
    minmax(230px, 0.9fr)
    minmax(280px, 1.25fr)
    104px;
  gap: 2rem;
  align-items: center;
  min-height: 150px;
  border-bottom: 1px solid var(--line);
  animation: eventRowIn 0.35s ease both;
}

.event-skeleton .skeleton {
  display: block;
  border-radius: 2px;
}

.skeleton-date {
  width: 58px;
  height: 70px;
}

.skeleton-copy {
  height: 72px;
}

.skeleton-media {
  height: 96px;
}

.skeleton-action {
  width: 80px;
  height: 42px;
  justify-self: end;
}

/* Enhanced toast actions */
.toast.toast-enhanced {
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
}

.toast-action {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.toast-action:hover {
  color: var(--white);
}

/* Search history */
.search-recent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 0.75rem 0.9rem;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.search-recent-header button {
  color: var(--accent);
  letter-spacing: normal;
  text-transform: none;
}

/* Event-detail quick actions */
.rich-quick-actions {
  position: sticky;
  top: 0;
  z-index: 7;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--line);
  background: rgb(var(--ink-rgb) / 0.96);
  backdrop-filter: blur(18px);
}

.rich-quick-action {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.68rem;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.rich-quick-action:last-child {
  border-right: 0;
}

.rich-quick-action:hover,
.rich-quick-action.is-active {
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--accent);
}

/* Event-plan presentation */
.plan-day + .plan-day {
  border-top: 1px solid var(--line);
}

.plan-day-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  background: rgb(var(--ink-rgb) / 0.97);
  padding: 0.9rem 1rem;
  backdrop-filter: blur(16px);
}

.plan-day-date {
  display: block;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}

.plan-day-count {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.58rem;
}

.plan-day-map-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--line);
  padding: 0 0.75rem;
  color: var(--muted);
  font-size: 0.62rem;
  transition:
    border-color 0.18s ease,
    color 0.18s ease;
}

.plan-day-map-button:hover {
  border-color: rgb(var(--accent-rgb) / 0.45);
  color: var(--accent);
}

.plan-item {
  padding: 1rem;
}

.plan-item-grid {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
}

.plan-drag-handle {
  display: grid;
  width: 30px;
  height: 34px;
  cursor: grab;
  place-items: center;
  color: var(--muted);
}

.plan-item-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.plan-item-actions button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--muted);
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.plan-item-actions button:hover:not(:disabled) {
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--accent);
}

.plan-item-actions button:last-child:hover:not(:disabled) {
  color: var(--category-family);
}

.plan-item-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.25;
}

.plan-connection {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  border-bottom: 1px solid rgb(var(--line-rgb) / 0.08);
  padding: 0.72rem 1rem 0.72rem 3.25rem;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.45;
}

.plan-connection.is-good {
  color: var(--success-text);
}

.plan-connection.is-tight {
  background: rgb(var(--warning-rgb) / 0.045);
  color: var(--warning-text);
}

.plan-connection.is-danger {
  background: rgb(var(--coral-rgb) / 0.055);
  color: var(--category-family);
}

.plan-connection.is-break {
  color: var(--mist);
  background: rgb(var(--white-rgb) / 0.018);
}

.plan-connection.is-break svg {
  color: var(--accent);
}

.local-plan-notice {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 0.6rem;
  border: 1px solid var(--line);
  background: rgb(var(--white-rgb) / 0.018);
  padding: 0.8rem;
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.5;
}

.local-plan-notice strong {
  color: var(--text);
}

/* Plan map */
.plan-map {
  min-height: min(68vh, 680px);
  background: var(--panel);
}

.plan-map-marker-wrap {
  background: transparent;
  border: 0;
}

.plan-map-marker {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 2px solid var(--pale);
  border-radius: 999px;
  background: var(--page);
  color: var(--text);
  box-shadow:
    0 0 0 5px rgb(var(--ink-rgb) / 0.2),
    0 8px 24px rgb(var(--black-rgb) / 0.35);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
}

/* Calendar filter summary */
.calendar-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.calendar-filter-label {
  color: var(--muted);
  font-size: 0.62rem;
}

.calendar-clear-filters {
  margin-left: auto;
  color: var(--accent);
  font-size: 0.62rem;
}

.calendar-clear-filters:hover {
  color: var(--white);
}

/* Swipeable image viewer */
.image-viewer-shell {
  position: relative;
  display: grid;
  width: min(1200px, 100vw);
  height: min(94vh, 900px);
  place-items: center;
  overflow: hidden;
  background: var(--black);
}

.image-viewer-shell img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  touch-action: pan-y pinch-zoom;
}

.image-viewer-toolbar {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  left: 0.75rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.image-viewer-counter {
  border-radius: 999px;
  background: rgb(var(--black-rgb) / 0.58);
  padding: 0.45rem 0.7rem;
  color: var(--white);
  font-size: 0.68rem;
  backdrop-filter: blur(12px);
}

.image-viewer-close {
  display: grid;
  width: 42px;
  height: 42px;
  pointer-events: auto;
  place-items: center;
  border-radius: 999px;
  background: rgb(var(--black-rgb) / 0.58);
  color: var(--white);
  backdrop-filter: blur(12px);
}

.image-viewer-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 999px;
  background: rgb(var(--black-rgb) / 0.55);
  color: var(--white);
  transform: translateY(-50%);
  backdrop-filter: blur(12px);
}

.image-viewer-nav.is-prev {
  left: 1rem;
}

.image-viewer-nav.is-next {
  right: 1rem;
}

/* Larger saved count on small screens */
@media (max-width: 760px) {
  #savedCount {
    min-width: 20px !important;
    padding: 3px 5px !important;
    font-size: 10px !important;
  }

  .event-skeleton {
    grid-template-columns: 54px minmax(0, 1fr) 52px;
    gap: 0.85rem;
  }

  .event-skeleton .skeleton-media {
    display: none;
  }

  .skeleton-action {
    width: 46px;
  }

  .rich-quick-actions {
    grid-template-columns: repeat(4, minmax(72px, 1fr));
    overflow-x: auto;
  }

  .rich-quick-action {
    flex-direction: column;
    gap: 0.25rem;
    min-height: 58px;
    font-size: 0.58rem;
  }

  .plan-bar {
    right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    left: 0.75rem;
    width: auto;
  }

  .results-jump-bar {
    right: 4.7rem;
    bottom: calc(5.65rem + env(safe-area-inset-bottom));
    left: 0.75rem;
    justify-content: space-between;
  }

  .back-to-top {
    right: 0.85rem;
    bottom: calc(5.65rem + env(safe-area-inset-bottom));
  }

  .plan-day-header {
    align-items: flex-start;
  }

  .plan-day-map-button {
    max-width: 118px;
    text-align: center;
  }

  .plan-item {
    padding: 0.9rem 0.75rem;
  }

  .plan-item-grid {
    grid-template-columns: 24px minmax(0, 1fr) 38px;
    gap: 0.55rem;
  }

  .plan-item-actions {
    flex-direction: column;
  }

  .plan-connection {
    padding-left: 2.25rem;
  }

  .image-viewer-nav {
    width: 42px;
    height: 42px;
  }

  .image-viewer-nav.is-prev {
    left: 0.5rem;
  }

  .image-viewer-nav.is-next {
    right: 0.5rem;
  }
}

#richNoTicketMessage:not(.hidden) {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  border: 1px solid var(--line);
  background: rgb(var(--white-rgb) / 0.018);
  padding: 0.65rem 0.9rem;
  color: var(--text);
}

.calendar-active-filters.hidden {
  display: none;
}

.results-jump-bar[hidden] {
  display: none !important;
}

@media (max-width: 767px) {
  .rich-event-content {
    display: flex;
    flex-direction: column;
  }

  .rich-event-facts {
    order: -1;
  }
}

/* ========================================================================
   Floating notices — final layout
   ======================================================================== */



.back-to-top {
  position: fixed !important;
  right: var(--floating-edge) !important;
  bottom: calc(
    var(--floating-edge) +
    env(safe-area-inset-bottom)
  ) !important;
  left: auto !important;
  top: auto !important;
  z-index: 198;
  border-color: var(--floating-border);
  background: var(--floating-light);
  color: var(--floating-ink);
  box-shadow:
    0 15px 38px rgb(var(--backdrop-rgb) / 0.28),
    0 1px 0 rgb(var(--white-rgb) / 0.72) inset;
  backdrop-filter: none;
}

.back-to-top:hover {
  border-color: rgb(var(--ink-rgb) / 0.3);
  background: var(--floating-light-hover);
  color: var(--floating-ink);
}

.back-to-top:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.toast-stack {
  position: fixed !important;
  right: var(--floating-edge) !important;
  bottom: calc(
    var(--toast-stack-bottom) +
    env(safe-area-inset-bottom)
  ) !important;
  left: auto !important;
  top: auto !important;
  width: min(
    390px,
    calc(100vw - (var(--floating-edge) * 2))
  ) !important;
  z-index: 6000 !important;
}

.toast {
  width: 100%;
  border-color: var(--floating-border);
  background: var(--floating-light);
  color: var(--floating-ink);
  box-shadow:
    0 18px 50px rgb(var(--backdrop-rgb) / 0.3),
    0 1px 0 rgb(var(--white-rgb) / 0.74) inset;
  backdrop-filter: none;
}

.toast-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: rgb(var(--ink-rgb) / 0.1);
  color: var(--floating-ink);
}

.toast-message {
  color: var(--floating-ink);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.45;
}

.toast-action {
  border-radius: 999px;
  background: var(--accent);
  padding: 0.5rem 0.75rem;
  color: var(--floating-ink);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.toast-action:hover {
  background: var(--accent-hover);
  color: var(--floating-ink);
}

.toast-dismiss {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  color: var(--floating-subtle);
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.toast-dismiss:hover {
  background: rgb(var(--ink-rgb) / 0.09);
  color: var(--floating-ink);
}

.results-jump-bar {
  position: fixed !important;
  right: var(--floating-edge) !important;
  bottom: calc(
    var(--results-jump-bottom) +
    env(safe-area-inset-bottom)
  ) !important;
  left: auto !important;
  top: auto !important;
  z-index: 197;
  width: min(
    390px,
    calc(100vw - (var(--floating-edge) * 2))
  ) !important;
  min-height: 58px;
  border: 1px solid var(--floating-border);
  border-radius: 0;
  background: var(--floating-light);
  padding: 0.65rem 0.7rem 0.65rem 1rem;
  color: var(--floating-ink);
  box-shadow:
    0 18px 50px rgb(var(--backdrop-rgb) / 0.3),
    0 1px 0 rgb(var(--white-rgb) / 0.74) inset;
  backdrop-filter: none;
}

.results-jump-bar span {
  color: var(--floating-ink);
  font-size: 0.75rem;
  font-weight: 600;
}

.results-jump-bar button {
  min-height: 38px;
  border-radius: 999px;
  background: var(--accent);
  padding: 0 1rem;
  color: var(--floating-ink);
  font-size: 0.68rem;
  font-weight: 700;
}

.results-jump-bar button:hover {
  background: var(--accent-hover);
}

/* Featured event category: FILM, MUSIC, FOOD, etc. */
#featureCategory {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}



/* --------------------------------------------------------------------------
   Event-details spacing and highlighted booking bar
   -------------------------------------------------------------------------- */

/* Leave breathing room below Add to plan / Calendar / Directions / Share */
.rich-event-content {
  padding-top: 1.5rem;
}

/* Invert the sticky price and booking bar */
.sticky-ticket {
  border-top: 1px solid rgb(var(--ink-rgb) / 0.2) !important;
  background: var(--pale);
  color: var(--ink);
  box-shadow: 0 -12px 32px rgb(var(--backdrop-rgb) / 0.2);
  backdrop-filter: none;
}

/* Price */
.sticky-ticket #richStickyPrice {
  color: var(--ink) !important;
}

/* Availability text: Pay on the door, limited places, etc. */
.sticky-ticket #richAvailability {
  color: rgb(var(--ink-rgb) / 0.7) !important;
}

/* No booking required message */
.sticky-ticket #richNoTicketMessage:not(.hidden) {
  border-color: rgb(var(--ink-rgb) / 0.25);
  background: rgb(var(--ink-rgb) / 0.05);
  color: var(--ink);
}

/* Actual ticket/booking button */
.sticky-ticket #richTicketButton {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--text-pale);
}

.sticky-ticket #richTicketButton:hover {
  background: var(--panel);
  color: var(--white);
}

/* Ensure icons inherit the new colours */
.sticky-ticket svg {
  stroke: currentColor;
}

@media (max-width: 760px) {
  .rich-event-content {
    padding-top: 1.1rem;
  }

  .sticky-ticket {
    gap: 0.75rem;
    padding: 0.85rem 1rem;
  }
}

@media (max-width: 760px) {
  :root {
    --floating-edge: 10px;
  }

  .toast-stack,
  .results-jump-bar {
    right: var(--floating-edge) !important;
    left: var(--floating-edge) !important;
    width: auto !important;
    max-width: none !important;
  }

  .toast {
    width: 100%;
  }

  .toast.toast-enhanced {
    grid-template-columns:
      28px
      minmax(0, 1fr)
      auto
      30px;

    column-gap: 0.65rem;
    row-gap: 0;
    align-items: center;
  }

  .toast.toast-enhanced .toast-icon {
    grid-column: 1;
    grid-row: 1;
  }

  .toast.toast-enhanced .toast-message {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .toast.toast-enhanced .toast-action {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    white-space: nowrap;
  }

  .toast.toast-enhanced .toast-dismiss {
    grid-column: 4;
    grid-row: 1;
  }

  .results-jump-bar {
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   Event-list action and heading cleanup
   -------------------------------------------------------------------------- */

/* The whole row opens the event, so only the bookmark needs its own column. */
@media (min-width: 1051px) {
  .event-row {
    grid-template-columns:
      82px
      minmax(230px, 0.9fr)
      minmax(280px, 1.25fr)
      160px
      56px;
  }
}

@media (min-width: 761px) and (max-width: 1050px) {
  .event-row {
    grid-template-columns:
      72px
      minmax(220px, 1fr)
      minmax(220px, 1fr)
      56px;
  }
}

/* "12 events found" now matches TODAY / NEXT WEEK section headings. */
.event-result-count {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--mist);
  text-transform: uppercase;
}

/* Free only, More filters and Soonest first use the same type size and colour,
   but retain normal sentence case. */
.event-list-control {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: var(--mist);
  text-transform: none;
}

.event-list-control:hover {
  color: var(--accent);
}

.event-list-control svg {
  color: currentColor;
  stroke: currentColor;
}


/* ========================================================================
   Stability and accessibility upgrade
   ======================================================================== */

/* The title remains the keyboard-accessible action. Pointer users may also
   click any non-interactive area of the row; JavaScript handles that safely. */
.event-row {
  cursor: pointer;
}

.event-row-link::after {
  content: none !important;
}

.event-row .event-title,
.event-row .verified,
.event-row .event-actions {
  position: relative;
  z-index: 2;
}

.event-row .verified {
  pointer-events: none;
}

.event-row button,
.event-row a,
.event-row input,
.event-row select,
.event-row textarea {
  cursor: pointer;
}

.event-row-link:focus-visible {
  outline: none;
}

.event-row:has(.event-row-link:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: rgb(var(--accent-rgb) / 0.055);
}

/* Event trust and contextual corrections */
.event-correction-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.event-correction-actions button {
  min-height: 34px;
  border: 1px solid var(--line);
  padding: 0.45rem 0.7rem;
  color: var(--muted);
  font-size: 0.65rem;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.event-correction-actions button:hover,
.event-correction-actions button:focus-visible {
  border-color: rgb(var(--accent-rgb) / 0.45);
  background: rgb(var(--accent-rgb) / 0.07);
  color: var(--text);
  outline: none;
}

/* Personal notes in the saved-event plan */
.plan-note-field > span {
  display: block;
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.plan-note-field textarea {
  width: 100%;
  margin-top: 0.4rem;
  resize: vertical;
  border: 1px solid var(--line);
  background: rgb(var(--white-rgb) / 0.018);
  padding: 0.65rem 0.75rem;
  color: var(--text);
  font: inherit;
  font-size: 0.7rem;
  line-height: 1.5;
  outline: none;
}

.plan-note-field textarea::placeholder {
  color: rgb(var(--muted-rgb) / 0.55);
}

.plan-note-field textarea:focus {
  border-color: rgb(var(--accent-rgb) / 0.55);
  background: rgb(var(--accent-rgb) / 0.035);
}

/* Long breaks are informational rather than an implied continuous journey. */
.plan-connection.is-break {
  background: rgb(var(--white-rgb) / 0.018);
  color: var(--mist);
}

.plan-connection.is-break svg {
  color: var(--accent);
}

/* Dedicated printable event-plan document. */
#printPlan {
  display: none;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 14mm;
  }

  html,
  body {
    background: var(--white) !important;
  }

  body.printing-plan::before {
    display: none !important;
  }

  body.printing-plan > *:not(#printPlan) {
    display: none !important;
  }

  body.printing-plan #printPlan {
    display: block !important;
    width: 100% !important;
    color: var(--print-ink) !important;
    font-family: var(--font-print) !important;
  }

  .print-plan-sheet {
    width: 100%;
    margin: 0;
    color: var(--print-ink);
    font-size: 10.5pt;
    line-height: 1.45;
  }

  .print-plan-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20mm;
    padding-bottom: 7mm;
    border-bottom: 2px solid var(--print-ink);
  }

  .print-plan-brand {
    margin: 0 0 2mm;
    color: var(--print-brand);
    font-size: 8pt;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .print-plan-header h1 {
    margin: 0;
    color: var(--print-ink);
    font-size: 24pt;
    line-height: 1.05;
  }

  .print-plan-generated {
    margin: 0;
    color: var(--print-generated);
    font-size: 8.5pt;
    white-space: nowrap;
  }

  .print-plan-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 5mm 10mm;
    margin: 6mm 0 2mm;
    padding: 4mm;
    border: 1px solid var(--print-border);
    background: var(--print-summary-bg);
  }

  .print-plan-summary span {
    color: var(--print-secondary);
    font-size: 9pt;
  }

  .print-plan-summary strong {
    color: var(--print-ink);
  }

  .print-plan-status {
    margin: 0 0 7mm;
    color: var(--print-secondary);
    font-size: 9pt;
  }

  .print-plan-day {
    margin-top: 8mm;
    break-inside: auto;
  }

  .print-plan-day-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8mm;
    padding-bottom: 2.5mm;
    border-bottom: 1px solid var(--print-rule);
    break-after: avoid;
  }

  .print-plan-day-header h2 {
    margin: 0;
    color: var(--print-ink);
    font-size: 15pt;
    line-height: 1.2;
  }

  .print-plan-day-header span {
    color: var(--print-generated);
    font-size: 8.5pt;
  }

  .print-plan-event {
    display: grid;
    grid-template-columns: 25mm minmax(0, 1fr);
    gap: 5mm;
    padding: 5mm 0;
    border-bottom: 1px solid var(--print-divider);
    break-inside: avoid;
  }

  .print-plan-time {
    padding-top: 0.5mm;
    color: var(--print-ink);
  }

  .print-plan-time strong,
  .print-plan-time span {
    display: block;
  }

  .print-plan-time strong {
    font-size: 12pt;
  }

  .print-plan-time span {
    margin-top: 1mm;
    color: var(--print-generated);
    font-size: 8.5pt;
  }

  .print-plan-event-copy h3 {
    margin: 0;
    color: var(--print-ink);
    font-size: 12.5pt;
    line-height: 1.25;
  }

  .print-plan-venue,
  .print-plan-meta {
    margin: 1.5mm 0 0;
  }

  .print-plan-venue {
    color: var(--print-venue);
    font-size: 9.5pt;
  }

  .print-plan-meta {
    color: var(--print-generated);
    font-size: 8.8pt;
  }

  .print-plan-note {
    margin-top: 3mm;
    padding: 3mm;
    border-left: 3px solid var(--print-note-accent);
    background: var(--print-note-bg);
    color: var(--print-note-text);
    font-size: 9pt;
  }

  .print-plan-connection {
    margin: 3mm 0 0 25mm;
    padding: 2.5mm 3mm;
    border-left: 3px solid var(--print-connection-accent);
    background: var(--print-connection-bg);
    color: var(--print-connection-text);
    font-size: 8.5pt;
    break-inside: avoid;
  }

  .print-plan-connection.is-danger {
    border-left-color: var(--print-danger-accent);
    background: var(--print-danger-bg);
    color: var(--print-danger-text);
  }

  .print-plan-connection.is-tight {
    border-left-color: var(--print-warning-accent);
    background: var(--print-warning-bg);
    color: var(--print-warning-text);
  }

  .print-plan-footer {
    margin-top: 10mm;
    padding-top: 4mm;
    border-top: 1px solid var(--print-border);
    color: var(--print-generated);
    font-size: 8pt;
  }
}

/* Booking action visibility must override the element's flex utility class. */
#richTicketButton[hidden],
#richNoTicketMessage[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Compact A4 event-plan print layout
   -------------------------------------------------------------------------- */
@media print {
  @page {
    size: A4 portrait;
    margin: 8mm;
  }

  .print-plan-sheet {
    font-size: 8.25pt !important;
    line-height: 1.22 !important;
  }

  .print-plan-header {
    gap: 8mm !important;
    padding-bottom: 3mm !important;
    border-bottom-width: 1px !important;
  }

  .print-plan-brand {
    margin-bottom: 0.8mm !important;
    font-size: 6.5pt !important;
  }

  .print-plan-header h1 {
    font-size: 16pt !important;
    line-height: 1 !important;
  }

  .print-plan-generated {
    font-size: 6.8pt !important;
  }

  .print-plan-summary {
    gap: 2mm 6mm !important;
    margin: 3mm 0 1.5mm !important;
    padding: 2mm 2.5mm !important;
  }

  .print-plan-summary span {
    font-size: 7.2pt !important;
  }

  .print-plan-status {
    margin: 0 0 3mm !important;
    font-size: 7.2pt !important;
  }

  .print-plan-day {
    margin-top: 4mm !important;
  }

  .print-plan-day-header {
    gap: 4mm !important;
    padding-bottom: 1.3mm !important;
  }

  .print-plan-day-header h2 {
    font-size: 10.5pt !important;
    line-height: 1.1 !important;
  }

  .print-plan-day-header span {
    font-size: 6.8pt !important;
  }

  .print-plan-event {
    grid-template-columns: 18mm minmax(0, 1fr) !important;
    gap: 3mm !important;
    padding: 2.2mm 0 !important;
  }

  .print-plan-time {
    padding-top: 0 !important;
  }

  .print-plan-time strong {
    font-size: 9pt !important;
  }

  .print-plan-time span {
    margin-top: 0.3mm !important;
    font-size: 6.8pt !important;
  }

  .print-plan-event-copy h3 {
    font-size: 9.5pt !important;
    line-height: 1.15 !important;
  }

  .print-plan-venue,
  .print-plan-meta {
    margin-top: 0.6mm !important;
  }

  .print-plan-venue {
    font-size: 7.4pt !important;
  }

  .print-plan-meta {
    font-size: 6.9pt !important;
  }

  .print-plan-note {
    margin-top: 1.2mm !important;
    padding: 1.5mm 2mm !important;
    border-left-width: 2px !important;
    font-size: 7pt !important;
  }

  .print-plan-connection {
    margin: 1.2mm 0 0 18mm !important;
    padding: 1.2mm 2mm !important;
    border-left-width: 2px !important;
    font-size: 6.8pt !important;
    line-height: 1.15 !important;
  }

  .print-plan-footer {
    margin-top: 5mm !important;
    padding-top: 2mm !important;
    font-size: 6.5pt !important;
  }
}

/* ==========================================================================
   Follow venues and organisers
   ========================================================================== */

.profile-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.profile-follow-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(var(--white-rgb) / 0.018);
  padding: 0.45rem 0.75rem;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.profile-follow-button:hover,
.profile-follow-button:focus-visible {
  border-color: rgb(var(--accent-rgb) / 0.48);
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--accent);
  outline: none;
  transform: translateY(-1px);
}

.profile-follow-button.is-active {
  border-color: rgb(var(--accent-rgb) / 0.52);
  background: rgb(var(--accent-rgb) / 0.12);
  color: var(--accent);
}

.profile-follow-button svg {
  flex: 0 0 auto;
  stroke: currentColor;
}

.following-dialog-shell {
  width: min(980px, calc(100vw - 2rem));
}

.following-section + .following-section {
  margin-top: 2rem;
}

.following-section-heading {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.75rem;
  color: var(--muted);
}

.following-section-heading h3 {
  color: var(--text-pale);
  font-size: 0.82rem;
  font-weight: 700;
}

.following-section-heading span {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.58rem;
}

.following-profile-list {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.following-profile-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  border: 1px solid var(--line);
  background: rgb(var(--white-rgb) / 0.012);
  padding: 0.75rem;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

.following-profile-card:hover {
  border-color: rgb(var(--accent-rgb) / 0.3);
  background: rgb(var(--accent-rgb) / 0.035);
}

.following-profile-main {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 24px;
  gap: 0.9rem;
  align-items: center;
  min-width: 0;
  text-align: left;
}

.following-profile-media {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgb(var(--white-rgb) / 0.035);
}

.following-profile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.following-profile-initial {
  color: var(--text-pale);
  font-size: 1rem;
  font-weight: 700;
}

.following-profile-copy {
  min-width: 0;
}

.following-profile-type {
  display: block;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.following-profile-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  color: var(--text-pale);
  font-size: 0.86rem;
  font-weight: 700;
}

.following-profile-secondary,
.following-profile-events {
  display: block;
  margin-top: 0.25rem;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.following-profile-events {
  color: var(--muted-mid);
}

.following-profile-arrow {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.following-card-unfollow {
  min-width: 132px;
}

.following-empty-state {
  display: grid;
  min-height: 300px;
  place-items: center;
  align-content: center;
  padding: 2rem;
  text-align: center;
  color: var(--muted);
}

.following-empty-state h3 {
  margin-top: 1rem;
  color: var(--text-pale);
  font-size: 1rem;
  font-weight: 700;
}

.following-empty-state p {
  max-width: 460px;
  margin-top: 0.65rem;
  font-size: 0.76rem;
  line-height: 1.7;
}

.following-empty-state strong {
  color: var(--text-pale);
}

@media (max-width: 760px) {
  .profile-section-heading {
    align-items: flex-start;
  }

  .profile-follow-button {
    min-height: 34px;
    padding-inline: 0.65rem;
    font-size: 0.61rem;
  }

  .following-dialog-shell {
    width: 100vw;
  }

  .following-profile-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .following-profile-main {
    grid-template-columns: 48px minmax(0, 1fr) 18px;
    gap: 0.7rem;
  }

  .following-profile-media {
    width: 48px;
    height: 48px;
  }

  .following-card-unfollow {
    width: 100%;
    min-width: 0;
  }

  .following-profile-secondary,
  .following-profile-events {
    white-space: normal;
  }
}

/* Header count badges for Following and Saved */
#followingHeaderCount,
#savedCount {
  font-variant-numeric: tabular-nums;
}

#followingButton.text-cyan svg,
#savedButton.text-cyan svg {
  stroke: currentColor;
}


/* --------------------------------------------------------------------------
   Accessibility and contrast pass
   -------------------------------------------------------------------------- */

/* Every visible text element now uses Manrope. The old mono variable remains
   only as a compatibility alias for existing utility classes and selectors. */
:where(body, button, input, select, textarea, kbd, code, samp, pre) {
  font-family: var(--font-sans);
}

/* Tailwind opacity utilities such as text-mist/45 were too faint for small
   captions and labels on the dark green surfaces. Keep the hierarchy, but
   raise the minimum contrast. */
.text-mist\/40,
.text-mist\/45,
.text-mist\/50,
.text-mist\/55,
.text-mist\/60,
.text-mist\/65 {
  color: rgb(var(--mist-rgb) / 0.82) !important;
}

.text-white\/60 {
  color: rgb(var(--white-rgb) / 0.86) !important;
}

.text-cyan\/75 {
  color: var(--accent) !important;
}

.text-lime\/80 {
  color: var(--lime) !important;
}

.placeholder\:text-mist\/40::placeholder,
.placeholder\:text-mist\/50::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgb(var(--mist-rgb) / 0.78) !important;
  opacity: 1;
}

/* Disabled and coming-soon controls still look inactive, but remain readable. */
.cursor-not-allowed.opacity-40,
.cursor-not-allowed.opacity-50,
.cursor-not-allowed.opacity-60,
button:disabled.opacity-40,
button:disabled.opacity-50,
button:disabled.opacity-60,
input:disabled.opacity-40,
input:disabled.opacity-50,
input:disabled.opacity-60 {
  opacity: 0.72 !important;
}

/* Calendar days outside the visible month were too low-contrast on mobile. */
.calendar-day.is-outside {
  opacity: 0.62;
}

/* Keyboard accessibility: consistent visible focus across desktop and mobile. */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgb(var(--accent-rgb) / 0.18);
}

/* Preserve clear focus on pale buttons and badges. */
.bg-pale:focus-visible,
.bg-cyan:focus-visible,
.toast-action:focus-visible,
.results-jump-bar button:focus-visible {
  outline-color: var(--white);
  box-shadow: 0 0 0 4px rgb(var(--ink-rgb) / 0.34);
}

/* Improve small badges without changing layout. */
#followingHeaderCount,
#savedCount,
#savedDrawerCount,
#followingCount,
#advancedFilterCount {
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
  font-weight: 800;
}

/* Ensure micro labels inherit the single typeface and do not become too faint. */
.micro,
.status-pill,
.calendar-weekday,
.calendar-list-meta,
.calendar-more,
.step-dot,
.thumb-count {
  font-family: var(--font-sans) !important;
}

/* ==========================================================================
   Accessibility readability pass — colour, contrast and minimum text sizes
   ========================================================================== */

/*
  This block deliberately sits at the end of the stylesheet so it can correct
  older tiny utility sizes without changing the layout structure.
*/

:root {
  /* Stronger default text palette */
  --muted-rgb: 190 216 211;
  --text-rgb: 235 247 244;
  --pale-rgb: 245 252 250;

  --text-pale: #f5fcfa;
  --text-soft: #e9f6f3;
  --text-strong: #ffffff;
  --text-hover: #ffffff;
  --control-text: #d7e9e5;
  --countdown-text: #e0f0ed;
  --muted-mid: #c7dfda;
  --muted-dark: #bcd7d2;
  --muted-deep: #b1d0ca;
  --calendar-event-text: #f0faf8;
  --calendar-day-text: #d9ece8;
  --calendar-meta-text: #c9dfdb;
  --calendar-venue-text: #c7dfda;
  --calendar-arrow-text: #d0e5e1;
  --section-label: #e0f0ed;

  /* Readable type scale */
  --font-size-ui-min: 0.8125rem; /* 13px */
  --font-size-ui-small: 0.875rem; /* 14px */
  --font-size-ui-body: 1rem; /* 16px */
  --line-height-readable: 1.45;
}

html.light {
  --muted-rgb: 43 70 66;
  --mist-rgb: 43 70 66;
  --text-rgb: 12 45 40;

  --text-pale: var(--ink);
  --text-soft: var(--ink);
  --text-strong: var(--ink);
  --text-hover: var(--ink);
  --control-text: var(--ink);
  --countdown-text: var(--ink);
  --muted-mid: #2b4642;
  --muted-dark: #2b4642;
  --muted-deep: #2b4642;
  --calendar-meta-text: #2b4642;
  --calendar-venue-text: #2b4642;
  --section-label: #2b4642;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

body {
  font-size: var(--font-size-ui-body);
  line-height: var(--line-height-readable);
}

/* Tailwind utility classes used in the markup that were too small or faint. */
.text-xs,
[class*="text-[9px]"],
[class*="text-[10px]"],
[class*="text-[11px]"] {
  font-size: var(--font-size-ui-min) !important;
  line-height: 1.35 !important;
}

.text-mist,
.text-mist\/40,
.text-mist\/45,
.text-mist\/50,
.text-mist\/55,
.text-mist\/60,
.text-mist\/65,
.text-mist\/70 {
  color: var(--control-text) !important;
}

.text-cyan\/75,
.text-lime,
.text-coral {
  color: var(--text-strong) !important;
}

.placeholder\:text-mist\/50::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgb(var(--text-rgb) / 0.72) !important;
  opacity: 1;
}

.opacity-40,
.opacity-50,
[aria-disabled="true"].opacity-40,
[aria-disabled="true"].opacity-50,
.cursor-not-allowed.opacity-40,
.cursor-not-allowed.opacity-50 {
  opacity: 0.72 !important;
}

/* Small labels and microcopy: keep the style, remove the eye-strain. */
.micro,
.section-rule .micro,
.feature-kicker,
.feature-index,
.status-pill,
.filter-token,
.event-result-count,
.event-list-control,
.view-switch-button,
.search-recent-header,
.search-recent-header button,
.toast-message,
.toast-action,
.plan-day-count,
.plan-day-map-button,
.plan-connection,
.local-plan-notice,
.calendar-filter-label,
.calendar-clear-filters,
.results-jump-bar span,
.results-jump-bar button,
#featureCategory {
  font-size: var(--font-size-ui-min) !important;
  line-height: 1.35 !important;
}

/* Core buttons and chips. */
.chip,
.discovery-option span,
.mood-option span,
.category-grid .chip,
.rich-quick-action,
.calendar-event,
.calendar-more,
.calendar-list-time,
.calendar-list-venue,
.event-meta-line,
.event-row > .min-w-0 > p.font-mono,
.event-row > .min-w-0 > p.font-mono .text-pale,
.event-row .status-pill,
.plan-item,
.plan-item-actions button,
.plan-drag-handle {
  font-size: var(--font-size-ui-small) !important;
  line-height: 1.45 !important;
}

/* Event rows: strengthen hierarchy without changing the grid. */
.event-row .event-title {
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.15rem) !important;
  line-height: 1.45 !important;
  color: var(--text-strong) !important;
}

.event-row .date-col > span:first-child,
.event-row .date-col > span:last-child {
  font-size: var(--font-size-ui-min) !important;
  line-height: 1.2 !important;
  color: var(--control-text) !important;
}

.event-row .date-col .date-day {
  color: var(--text-strong) !important;
}

.event-row .countdown span {
  font-size: 1rem !important;
  color: var(--text-strong) !important;
}

.event-row .countdown small {
  font-size: 0.75rem !important;
  color: var(--control-text) !important;
}

/* Calendar and date-rail readability. */
.calendar-weekday,
.calendar-list-meta,
.calendar-active-filters,
.calendar-day-number,
.date-rail-day,
.date-rail-count,
.mobile-tab-label {
  font-size: var(--font-size-ui-min) !important;
  line-height: 1.25 !important;
}

.calendar-day.is-outside {
  opacity: 0.68 !important;
}

.calendar-event {
  white-space: normal;
}

.calendar-list-title {
  font-size: 0.9375rem !important;
  line-height: 1.35 !important;
}

/* Details panels and forms. */
.rich-event-content,
.rich-event-content p,
.rich-event-facts,
.dialog-shell,
.dialog-shell-wide,
.premium-search-results,
.search-result-row,
.submit-preview,
.following-dialog,
.plan-dialog {
  color: var(--text);
}

.rich-event-content p,
.rich-event-facts,
.search-result-row,
.following-dialog p,
.plan-dialog p {
  font-size: var(--font-size-ui-small);
  line-height: 1.55;
}

input,
select,
textarea {
  font-size: 1rem !important;
  line-height: 1.45 !important;
  color: var(--text) !important;
}

/* Tap targets: at least 44px high where practical. */
button,
[role="button"],
.chip,
.view-switch-button,
.rich-quick-action,
.calendar-event,
.calendar-list-event,
.search-result-row,
.plan-item-actions button,
.results-jump-bar button,
.toast-action {
  min-height: 44px;
}

/* Icon-only header buttons should remain compact but usable. */
#menuButton,
#searchButton,
#locationButton,
#followingButton,
#savedButton,
#closeDrawer {
  min-width: 44px;
  min-height: 44px;
}

/* Make focus clearly visible against dark and light themes. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent) !important;
  outline-offset: 4px !important;
}

/* Mobile: avoid tiny text and cramped controls. */
@media (max-width: 760px) {
  body {
    font-size: 1rem;
  }

  .shell {
    width: min(100% - 1rem, 720px);
  }

  .event-row {
    gap: 0.95rem;
    padding-block: 1.45rem;
  }

  .event-row .event-title {
    font-size: 1rem !important;
  }

  .event-row .date-col > span:first-child,
  .event-row .date-col > span:last-child {
    font-size: 0.75rem !important;
  }

  .event-row .date-col .date-day {
    font-size: 1.35rem !important;
  }

  .feature-detail,
  .feature-copy p,
  .rich-quick-action,
  .discovery-option span,
  .mood-option span,
  .category-grid .chip,
  .toast-message,
  .results-jump-bar span {
    font-size: 0.875rem !important;
    line-height: 1.45 !important;
  }

  .micro,
  .section-rule .micro,
  .feature-kicker,
  #featureCategory {
    font-size: 0.8125rem !important;
    letter-spacing: 0.1em;
  }

  .calendar-list-title {
    font-size: 1rem !important;
  }

  .calendar-list-time,
  .calendar-list-venue,
  .calendar-list-meta {
    font-size: 0.8125rem !important;
  }

  .mobile-bottom-nav,
  .mobile-bottom-nav button,
  .mobile-tab-label {
    font-size: 0.8125rem !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line: rgb(var(--line-rgb) / 0.32);
    --control-text: #ffffff;
    --muted-mid: #ffffff;
    --muted-dark: #ffffff;
    --muted-deep: #ffffff;
  }

  .text-mist,
  .text-mist\/40,
  .text-mist\/45,
  .text-mist\/50,
  .text-mist\/55,
  .text-mist\/60,
  .text-mist\/65,
  .text-mist\/70 {
    color: #ffffff !important;
  }
}

/* ==========================================================================
   Booking status readability fix
   --------------------------------------------------------------------------
   The no-ticket message sits inside the inverted light sticky ticket bar.
   It also carries the Tailwind text-mist class in the HTML. The accessibility
   pass correctly makes text-mist stronger for dark backgrounds using
   !important, but that made this one light-bar status too pale.
   ========================================================================== */

.sticky-ticket #richNoTicketMessage:not(.hidden) {
  border-color: rgb(var(--ink-rgb) / 0.35) !important;
  background: rgb(var(--ink-rgb) / 0.08) !important;
  color: var(--ink) !important;
  font-size: 0.875rem !important;
  font-weight: 600;
  line-height: 1.35 !important;
}

.sticky-ticket #richNoTicketMessage:not(.hidden)::before {
  content: "";
  display: none;
}

.sticky-ticket #richNoTicketMessage[hidden],
.sticky-ticket #richNoTicketMessage.hidden {
  display: none !important;
}

.sticky-ticket #richTicketButton {
  color: var(--text-pale) !important;
}

/* ==========================================================================
   Event gallery default view — cropped cover thumbnails
   --------------------------------------------------------------------------
   Fancybox still opens the full image when clicked. This only affects the
   images as displayed inside the event information dialog before opening.
   ========================================================================== */

.event-gallery img {
  object-fit: cover !important;
  object-position: center center;
  background: var(--surface-deep);
}

.event-gallery-item {
  background: var(--surface-deep);
}

/* Event detail and featured-card behaviour fixes */
#richEventDescription {
  white-space: pre-line;
}

#richOrganiserSection.hidden {
  display: none !important;
}

.feature-stage[data-open-event] {
  cursor: pointer;
}

.feature-stage[data-open-event]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}

.feature-stage[data-open-event] button {
  cursor: pointer;
}

/* ==========================================================================
   Event-detail information pills
   --------------------------------------------------------------------------
   These labels are generated as inline spans. Making them true inline-flex
   elements centres the text vertically inside the rounded shape and prevents
   the global chip tap-target rules from producing visually lopsided bubbles.
   ========================================================================== */

#richEventTags {
  align-items: center;
  gap: 0.625rem;
}

#richEventTags .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 36px;
  max-width: 100%;
  padding: 0.55rem 0.9rem !important;
  border-radius: 999px !important;
  border-color: rgb(var(--line-rgb) / 0.24);
  background: rgb(var(--panel-rgb) / 0.74);
  color: var(--text-soft) !important;
  font-size: 0.75rem !important;
  font-weight: 500;
  line-height: 1.05 !important;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
}

@media (max-width: 640px) {
  #richEventTags {
    gap: 0.5rem;
  }

  #richEventTags .chip {
    min-height: 34px;
    padding: 0.5rem 0.8rem !important;
    font-size: 0.72rem !important;
  }
}

/* ==========================================================================
   Full-review fixes: plan ordering, event status and long-content resilience
   ========================================================================== */

.status-pill.is-postponed {
  border-color: rgb(var(--warning-rgb) / 0.42);
  background: rgb(var(--warning-rgb) / 0.09);
  color: var(--warning-text);
}

.status-pill.is-soldout {
  border-color: rgb(var(--coral-rgb) / 0.42);
  background: rgb(var(--coral-rgb) / 0.09);
  color: var(--coral);
}

.countdown .text-coral {
  color: var(--coral) !important;
}

/* Preserve complete event names without allowing unusually long titles to
   dominate a row. */
.event-row .event-title,
.plan-item [data-open-event] {
  display: -webkit-box !important;
  overflow: hidden;
  max-width: 100%;
  white-space: normal !important;
  text-overflow: clip;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.plan-item {
  position: relative;
  cursor: default;
  transition:
    background 0.16s ease,
    box-shadow 0.16s ease,
    opacity 0.16s ease;
}

.plan-drag-handle {
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.plan-drag-handle:hover,
.plan-drag-handle:focus-visible {
  border-color: rgb(var(--accent-rgb) / 0.4);
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--accent);
}

.plan-drag-handle:active {
  cursor: grabbing;
}

.plan-item.dragging {
  opacity: 0.42;
}

.plan-item.drop-before {
  box-shadow: inset 0 3px 0 var(--accent);
}

.plan-item.drop-after {
  box-shadow: inset 0 -3px 0 var(--accent);
}

@media (max-width: 640px) {
  .plan-item-grid {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .plan-item-actions {
    grid-column: 2;
    justify-content: flex-start;
    margin-top: 0.4rem;
  }
}

.plan-connection.is-manual {
  background: rgb(var(--accent-rgb) / 0.045);
  color: var(--accent-pale);
}

/* ==========================================================================
   Morrow map experience
   --------------------------------------------------------------------------
   A richer split-view on desktop and a draggable-style bottom sheet on
   mobile. These rules intentionally sit after the original map styles so the
   rest of the public event catalogue is unaffected.
   ========================================================================== */

.map-experience {
  position: relative;
  isolation: isolate;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(330px, 0.78fr) minmax(0, 1.42fr);
  height: clamp(640px, calc(100vh - 110px), 820px);
  height: clamp(640px, calc(100dvh - 110px), 820px);
  min-height: 640px;
  overflow: hidden;
  border: 1px solid rgb(var(--line-rgb) / 0.2);
  background:
    linear-gradient(145deg, rgb(var(--panel-rgb) / 0.98), rgb(var(--page-rgb) / 0.98));
  box-shadow: 0 24px 80px rgb(var(--black-rgb) / 0.2);
}

.map-results-panel {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid rgb(var(--line-rgb) / 0.18);
  background:
    radial-gradient(circle at 0 0, rgb(var(--accent-rgb) / 0.055), transparent 18rem),
    rgb(var(--panel-glass-rgb) / 0.94);
  transition:
    width 0.24s ease,
    min-width 0.24s ease,
    opacity 0.18s ease,
    transform 0.24s ease;
}

.map-results-header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 92px;
  padding: 1.15rem 1.2rem;
  border-bottom: 1px solid rgb(var(--line-rgb) / 0.16);
  background: rgb(var(--panel-rgb) / 0.88);
  backdrop-filter: blur(18px);
}

.map-sheet-handle {
  display: none;
}

.map-panel-toggle {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid rgb(var(--line-rgb) / 0.2);
  padding: 0.55rem 0.75rem;
  color: var(--control-text);
  font-size: 0.68rem;
  line-height: 1;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.map-panel-toggle:hover,
.map-panel-toggle:focus-visible {
  border-color: rgb(var(--accent-rgb) / 0.5);
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--white);
}

.map-product-list {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  background: transparent;
  scrollbar-color: rgb(var(--line-rgb) / 0.34) transparent;
  scrollbar-width: thin;
}

.map-product-list::-webkit-scrollbar {
  width: 7px;
}

.map-product-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 99px;
  background: rgb(var(--line-rgb) / 0.3);
  background-clip: padding-box;
}

.map-result-row {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 18px;
  gap: 0.95rem;
  width: 100%;
  min-height: 132px;
  align-items: start;
  border: 0;
  border-bottom: 1px solid rgb(var(--line-rgb) / 0.14);
  padding: 1rem 1.05rem;
  color: inherit;
  text-align: left;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.map-result-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: transparent;
  transition: background 0.18s ease;
}

.map-result-row:hover,
.map-result-row:focus-visible,
.map-result-row.is-active {
  outline: 0;
  background:
    linear-gradient(90deg, rgb(var(--accent-rgb) / 0.1), transparent 75%),
    rgb(var(--white-rgb) / 0.018);
}

.map-result-row:hover::before,
.map-result-row:focus-visible::before,
.map-result-row.is-active::before {
  background: var(--accent);
}

.map-result-row.is-active {
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.16);
}

.map-result-row.is-unmapped {
  opacity: 0.78;
}

.map-result-media {
  position: relative;
  display: block;
  width: 82px;
  height: 96px;
  overflow: hidden;
  background: var(--surface-deep);
}

.map-result-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.03);
  transition: transform 0.3s ease;
}

.map-result-row:hover .map-result-media img,
.map-result-row:focus-visible .map-result-media img {
  transform: scale(1.045);
}

.map-result-colour {
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: var(--category-colour, var(--accent));
}

.map-result-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.map-result-kicker {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--muted-mid);
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
}

.map-result-kicker > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-result-status {
  flex: 0 0 auto;
  border: 1px solid rgb(var(--line-rgb) / 0.18);
  padding: 0.3rem 0.45rem;
  color: var(--calendar-meta-text);
  letter-spacing: 0.04em;
}

.map-result-status.is-live,
.map-result-status.is-soon {
  border-color: rgb(var(--lime-rgb) / 0.32);
  background: rgb(var(--lime-rgb) / 0.07);
  color: var(--lime);
}

.map-result-status.is-cancelled,
.map-result-status.is-postponed,
.map-result-status.is-soldout {
  border-color: rgb(var(--coral-rgb) / 0.34);
  background: rgb(var(--coral-rgb) / 0.07);
  color: var(--coral);
}

.map-result-copy strong {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 0.62rem;
  color: var(--text-strong);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.32;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.map-result-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.42rem;
  margin-top: 0.42rem;
  overflow: hidden;
  color: var(--muted-mid);
  font-size: 0.66rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-result-meta svg {
  flex: 0 0 auto;
  color: var(--accent-soft);
}

.map-result-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  margin-top: 0.65rem;
  color: var(--text-surface);
  font-size: 0.62rem;
  font-weight: 600;
}

.map-result-foot span + span::before {
  content: "·";
  margin-right: 0.65rem;
  color: rgb(var(--line-rgb) / 0.72);
}

.map-result-arrow {
  align-self: center;
  color: rgb(var(--mist-rgb) / 0.55);
  transition:
    color 0.18s ease,
    transform 0.18s ease;
}

.map-result-row:hover .map-result-arrow,
.map-result-row:focus-visible .map-result-arrow,
.map-result-row.is-active .map-result-arrow {
  color: var(--accent-soft);
  transform: translate(2px, -2px);
}

.map-canvas-shell {
  position: relative;
  isolation: isolate;
  z-index: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--surface-deep);
}

#eventsMap {
  width: 100%;
  min-height: 0;
  height: 100%;
  background: var(--surface-deep);
}

#eventsMap .leaflet-tile-pane {
  filter: saturate(0.5) brightness(0.82) contrast(1.06) hue-rotate(116deg);
}

#eventsMap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 350;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--page-rgb) / 0.13), transparent 22%),
    radial-gradient(circle at 50% 50%, transparent 46%, rgb(var(--page-rgb) / 0.11));
  mix-blend-mode: multiply;
}

.map-floating-toolbar {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 560;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.map-tool-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  border: 1px solid rgb(var(--line-rgb) / 0.24);
  padding: 0.62rem 0.8rem;
  background: rgb(var(--page-rgb) / 0.9);
  color: var(--text-soft);
  box-shadow: 0 10px 32px rgb(var(--black-rgb) / 0.2);
  backdrop-filter: blur(16px);
  font-size: 0.66rem;
  font-weight: 650;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.map-tool-button:hover,
.map-tool-button:focus-visible,
.map-tool-button.is-loading {
  border-color: rgb(var(--accent-rgb) / 0.56);
  background: rgb(var(--panel-rgb) / 0.96);
  color: var(--white);
  transform: translateY(-1px);
}

.map-tool-button.is-loading svg {
  animation: mapControlPulse 0.9s ease-in-out infinite alternate;
}

@keyframes mapControlPulse {
  to { opacity: 0.38; transform: scale(0.86); }
}

.map-tool-button-list {
  display: none;
}

.map-search-area {
  border-color: rgb(var(--accent-rgb) / 0.5);
  color: var(--accent-pale);
}

.map-search-area:hover,
.map-search-area:focus-visible {
  border-color: rgb(var(--accent-rgb) / 0.78);
}

.map-search-area[hidden] {
  display: none !important;
}

.map-legend {
  position: absolute;
  right: auto;
  bottom: 1rem;
  left: 1rem;
  z-index: 560;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border: 1px solid rgb(var(--line-rgb) / 0.18);
  padding: 0.55rem 0.7rem;
  background: rgb(var(--page-rgb) / 0.86);
  color: var(--muted-mid);
  box-shadow: 0 8px 30px rgb(var(--black-rgb) / 0.18);
  backdrop-filter: blur(14px);
  font-size: 0.58rem;
}

.map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
}

.map-legend-marker {
  width: 11px;
  height: 11px;
  border: 2px solid var(--pale);
  border-radius: 50%;
  background: var(--accent);
}

.map-legend-cluster {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid var(--pale);
  border-radius: 50%;
  background: var(--page);
  color: var(--pale);
  font-style: normal;
  font-size: 0.55rem;
}

.morrow-marker-wrap {
  border: 0 !important;
  background: transparent !important;
}

.morrow-map-marker {
  position: relative;
  width: 28px;
  height: 28px;
  border: 3px solid var(--pale);
  border-radius: 50% 50% 50% 10%;
  background: var(--marker-colour, var(--accent));
  box-shadow:
    0 0 0 4px rgb(var(--page-rgb) / 0.28),
    0 10px 28px rgb(var(--black-rgb) / 0.42);
  transform: rotate(-45deg);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.morrow-map-marker span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--page);
  transform: translate(-50%, -50%);
}

.morrow-map-marker.is-active {
  z-index: 2;
  border-color: var(--white);
  box-shadow:
    0 0 0 7px rgb(var(--accent-rgb) / 0.22),
    0 14px 34px rgb(var(--black-rgb) / 0.5);
  transform: rotate(-45deg) scale(1.24);
}

.morrow-cluster span {
  width: 44px;
  height: 44px;
  border-color: var(--pale);
  background:
    radial-gradient(circle at 35% 28%, rgb(var(--accent-rgb) / 0.28), transparent 45%),
    rgb(var(--page-rgb) / 0.96);
}

.morrow-map-popup .leaflet-popup-content-wrapper,
.morrow-map-popup .leaflet-popup-tip {
  background: rgb(var(--page-rgb) / 0.98);
  color: var(--text);
  box-shadow: 0 20px 55px rgb(var(--black-rgb) / 0.42);
}

.morrow-map-popup .leaflet-popup-content-wrapper {
  overflow: hidden;
  border: 1px solid rgb(var(--line-rgb) / 0.22);
  border-radius: 0;
}

.morrow-map-popup .leaflet-popup-content {
  width: auto !important;
  margin: 0;
}

.map-popup-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  min-width: 260px;
}

.map-popup-card > img {
  width: 92px;
  height: 100%;
  min-height: 156px;
  object-fit: cover;
}

.map-popup-copy {
  min-width: 0;
  padding: 0.9rem;
}

.map-popup-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted-mid);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-popup-kicker > span:first-child {
  position: relative;
  padding-left: 0.7rem;
}

.map-popup-kicker > span:first-child::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--category-colour, var(--accent));
  transform: translateY(-50%);
}

.map-popup-status {
  color: var(--calendar-meta-text);
}

.map-popup-status.is-live,
.map-popup-status.is-soon {
  color: var(--lime);
}

.map-popup-status.is-cancelled,
.map-popup-status.is-postponed,
.map-popup-status.is-soldout {
  color: var(--coral);
}

.map-popup-copy h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0.55rem 0 0;
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.map-popup-copy p {
  overflow: hidden;
  margin: 0.36rem 0 0;
  color: var(--muted-mid);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-popup-copy button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 0.38rem;
  margin-top: 0.7rem;
  border: 0;
  padding: 0.48rem 0.65rem;
  background: var(--pale);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.61rem;
  font-weight: 700;
}

.map-empty-state {
  display: grid;
  min-height: 360px;
  place-items: center;
  align-content: center;
  padding: 2rem;
  color: var(--mist);
  text-align: center;
}

.map-empty-state h3 {
  margin: 1rem 0 0;
  color: var(--pale);
  font-size: 1rem;
  font-weight: 600;
}

.map-empty-state p {
  max-width: 17rem;
  margin: 0.55rem auto 0;
  font-size: 0.75rem;
  line-height: 1.6;
}

.map-empty-state button {
  min-height: 40px;
  margin-top: 1rem;
  border: 1px solid rgb(var(--line-rgb) / 0.22);
  padding: 0.55rem 0.8rem;
  color: var(--pale);
  font-size: 0.68rem;
}

.map-experience.is-list-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}

.map-experience.is-list-collapsed .map-results-panel {
  min-width: 0;
  width: 0;
  border-right: 0;
  opacity: 0;
  pointer-events: none;
}

.map-experience.is-list-collapsed .map-tool-button-list {
  display: inline-flex;
}

#eventsMap .leaflet-control-zoom {
  overflow: hidden;
  border: 1px solid rgb(var(--line-rgb) / 0.2);
  border-radius: 0;
  box-shadow: 0 10px 28px rgb(var(--black-rgb) / 0.22);
}

#eventsMap .leaflet-control-zoom a {
  width: 38px;
  height: 38px;
  border: 0;
  border-bottom: 1px solid rgb(var(--line-rgb) / 0.18);
  background: rgb(var(--page-rgb) / 0.92);
  color: var(--pale);
  font-family: var(--font-sans);
  line-height: 38px;
}

#eventsMap .leaflet-control-zoom a:hover {
  background: var(--panel);
  color: var(--white);
}

#eventsMap .leaflet-control-attribution {
  background: rgb(var(--page-rgb) / 0.7);
  color: rgb(var(--mist-rgb) / 0.75);
}

#eventsMap .leaflet-control-attribution a {
  color: var(--accent-soft);
}

@media (max-width: 1020px) and (min-width: 761px) {
  .map-experience {
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
  }

  .map-result-row {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .map-result-media {
    width: 68px;
    height: 84px;
  }

  .map-result-arrow {
    display: none;
  }
}

@media (max-width: 760px) {
  .map-experience {
    display: block;
    min-height: min(760px, calc(100dvh - 118px));
    overflow: hidden;
    border-right: 0;
    border-left: 0;
    margin-right: -1rem;
    margin-left: -1rem;
    box-shadow: none;
  }

  .map-canvas-shell,
  #eventsMap {
    min-height: min(760px, calc(100dvh - 118px));
    height: min(760px, calc(100dvh - 118px));
  }

  .map-results-panel {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
    z-index: 620;
    min-height: 0;
    height: min(52dvh, 430px);
    border: 1px solid rgb(var(--line-rgb) / 0.2);
    background: rgb(var(--page-rgb) / 0.95);
    box-shadow: 0 -12px 50px rgb(var(--black-rgb) / 0.34);
    backdrop-filter: blur(20px);
    transition:
      height 0.24s ease,
      transform 0.24s ease,
      opacity 0.18s ease;
  }

  .map-results-panel.is-collapsed {
    width: auto;
    min-width: 0;
    height: 92px;
    border-right: 1px solid rgb(var(--line-rgb) / 0.2);
    opacity: 1;
    pointer-events: auto;
  }

  .map-results-header {
    min-height: 90px;
    padding: 1.25rem 0.95rem 0.85rem;
    cursor: ns-resize;
    touch-action: pan-x;
  }

  .map-sheet-handle {
    position: absolute;
    top: 0.48rem;
    left: 50%;
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgb(var(--line-rgb) / 0.38);
    transform: translateX(-50%);
  }

  .map-panel-toggle {
    min-width: 42px;
    padding-inline: 0.65rem;
  }

  .map-panel-toggle span {
    display: none;
  }

  .map-results-panel.is-collapsed .map-product-list {
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .map-product-list {
    transition: opacity 0.16s ease;
  }

  .map-result-row {
    grid-template-columns: 72px minmax(0, 1fr) 16px;
    min-height: 120px;
    padding: 0.85rem;
  }

  .map-result-media {
    width: 72px;
    height: 88px;
  }

  .map-result-copy strong {
    font-size: 0.88rem;
  }

  .map-result-meta {
    font-size: 0.62rem;
  }

  .map-result-status {
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .map-floating-toolbar {
    top: 0.65rem;
    right: 0.65rem;
    left: 0.65rem;
    justify-content: flex-start;
    gap: 0.4rem;
  }

  .map-tool-button {
    min-height: 40px;
    padding: 0.58rem 0.68rem;
    background: rgb(var(--page-rgb) / 0.93);
  }

  .map-tool-button span {
    display: none;
  }

  .map-tool-button-list {
    display: inline-flex;
  }

  .map-search-area {
    max-width: calc(100% - 2rem);
    white-space: nowrap;
  }

  .map-legend {
    display: none;
  }

  #eventsMap .leaflet-control-zoom {
    margin-right: 0.7rem;
    margin-bottom: 7rem;
  }

  .map-results-panel:not(.is-collapsed) ~ .map-canvas-shell #eventsMap .leaflet-control-zoom {
    margin-bottom: min(54dvh, 450px);
  }

  .map-popup-card {
    grid-template-columns: 78px minmax(0, 1fr);
    min-width: 230px;
  }

  .map-popup-card > img {
    width: 78px;
    min-height: 146px;
  }

  .morrow-map-popup .leaflet-popup-content-wrapper {
    max-width: calc(100vw - 2rem);
  }

  .map-experience.is-list-collapsed {
    display: block;
  }

  .map-experience.is-list-collapsed .map-results-panel {
    width: auto;
    min-width: 0;
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 430px) {
  .map-result-kicker {
    font-size: 0.55rem;
  }

  .map-result-foot {
    font-size: 0.58rem;
  }

  .map-result-foot span + span::before {
    margin-right: 0.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-results-panel,
  .map-result-row,
  .map-tool-button,
  .morrow-map-marker {
    transition: none !important;
  }
}

/* Final map-state refinements */
.map-panel-toggle svg {
  transition: transform 0.18s ease;
}

.map-panel-toggle.is-collapsed svg {
  transform: rotate(180deg);
}

.map-tool-button-list.is-active {
  border-color: rgb(var(--accent-rgb) / 0.48);
  background: rgb(var(--accent-rgb) / 0.1);
  color: var(--accent-pale);
}

@media (max-width: 760px) {
  .map-product-list {
    position: static;
    inset: auto;
    z-index: auto;
    max-height: none;
    border: 0;
    box-shadow: none;
  }
}


/* ==========================================================================
   Map interaction refinement: desktop wheel zoom + mobile page-safe mode
   ========================================================================== */

.map-sheet-instruction,
.map-interaction-gate,
.map-interaction-done {
  display: none;
}

@media (min-width: 761px) {
  #eventsMap {
    cursor: grab;
  }

  #eventsMap:active {
    cursor: grabbing;
  }
}

@media (max-width: 760px) {
  .map-experience {
    height: clamp(520px, 68dvh, 650px);
    min-height: 0;
  }

  .map-canvas-shell,
  #eventsMap {
    height: 100%;
    min-height: 0;
  }

  .map-results-panel {
    height: min(46dvh, 390px);
  }

  .map-results-panel.is-collapsed {
    height: 86px;
  }

  .map-results-header {
    min-height: 84px;
    padding: 1.05rem 0.85rem 0.72rem;
    cursor: default;
    touch-action: pan-y;
  }

  .map-sheet-handle {
    top: 0.38rem;
  }

  .map-sheet-instruction {
    display: block;
    margin-top: 0.38rem;
    color: rgb(var(--mist-rgb) / 0.72);
    font-size: 0.6rem;
    line-height: 1.3;
  }

  .map-panel-toggle {
    min-width: auto;
    min-height: 40px;
    gap: 0.38rem;
    padding: 0.58rem 0.68rem;
    border-color: rgb(var(--accent-rgb) / 0.34);
    background: rgb(var(--accent-rgb) / 0.075);
    color: var(--accent-pale);
    white-space: nowrap;
  }

  .map-panel-toggle span {
    display: inline;
    font-size: 0.64rem;
  }

  .map-panel-toggle svg {
    width: 14px;
    height: 14px;
  }

  .map-tool-button-list span {
    display: inline;
  }

  .map-interaction-gate {
    position: absolute;
    inset: 3.6rem 0 0;
    z-index: 575;
    width: 100%;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 1.25rem;
    background: rgb(var(--page-rgb) / 0.05);
    color: var(--pale);
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }

  .map-interaction-gate:not([hidden]) {
    display: flex;
  }

  .map-interaction-card {
    display: grid;
    max-width: 16rem;
    place-items: center;
    gap: 0.35rem;
    border: 1px solid rgb(var(--line-rgb) / 0.28);
    padding: 0.85rem 1rem;
    background: rgb(var(--page-rgb) / 0.92);
    box-shadow: 0 16px 44px rgb(var(--black-rgb) / 0.3);
    backdrop-filter: blur(18px);
    text-align: center;
  }

  .map-interaction-card svg {
    color: var(--accent-soft);
  }

  .map-interaction-card strong {
    font-size: 0.76rem;
    font-weight: 700;
  }

  .map-interaction-card small {
    color: var(--muted-mid);
    font-size: 0.58rem;
    line-height: 1.45;
  }

  .map-interaction-done {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 605;
    min-height: 40px;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgb(var(--accent-rgb) / 0.5);
    padding: 0.55rem 0.72rem;
    background: rgb(var(--page-rgb) / 0.95);
    color: var(--accent-pale);
    box-shadow: 0 10px 32px rgb(var(--black-rgb) / 0.24);
    backdrop-filter: blur(16px);
    font-size: 0.65rem;
    font-weight: 700;
  }

  .map-interaction-done:not([hidden]) {
    display: inline-flex;
  }

  .map-canvas-shell.is-map-interactive .map-floating-toolbar {
    padding-right: 4.4rem;
  }

  .map-canvas-shell:not(.is-map-interactive) #eventsMap .leaflet-control-container {
    opacity: 0.48;
    pointer-events: none;
  }

  .map-canvas-shell.is-map-interactive #eventsMap {
    touch-action: none;
  }

  #eventsMap .leaflet-control-zoom {
    margin-bottom: 6.5rem;
  }

  .map-results-panel:not(.is-collapsed) ~ .map-canvas-shell #eventsMap .leaflet-control-zoom {
    margin-bottom: min(48dvh, 410px);
  }
}

@media (max-width: 390px) {
  .map-panel-toggle span {
    max-width: 5rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .map-sheet-instruction {
    max-width: 12rem;
  }
}


/* ========================================================================== 
   Mobile map refinement v2
   --------------------------------------------------------------------------
   Keep the map visually generous while placing the event list in normal
   document flow beneath it. This avoids permanently covering the map and
   makes the sections following the map straightforward to reach.
   ========================================================================== */

@media (max-width: 760px) {
  .map-experience {
    display: flex;
    height: auto;
    min-height: 0;
    flex-direction: column;
    overflow: visible;
  }

  .map-canvas-shell {
    order: 1;
    height: clamp(560px, 78dvh, 760px);
    min-height: 560px;
    flex: none;
  }

  #eventsMap {
    height: 100%;
    min-height: 100%;
  }

  .map-results-panel,
  .map-results-panel.is-collapsed,
  .map-experience.is-list-collapsed .map-results-panel {
    position: relative;
    inset: auto;
    order: 2;
    z-index: 2;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    opacity: 1;
    border: 1px solid rgb(var(--line-rgb) / 0.2);
    border-top: 0;
    background: rgb(var(--panel-rgb) / 0.96);
    box-shadow: none;
    pointer-events: auto;
    transform: none;
    backdrop-filter: blur(18px);
    scroll-margin-top: 5rem;
  }

  .map-results-header {
    min-height: 78px;
    padding: 0.9rem 0.9rem;
    cursor: default;
    touch-action: pan-y;
  }

  .map-sheet-handle {
    display: none;
  }

  .map-sheet-instruction {
    margin-top: 0.3rem;
  }

  .map-product-list {
    max-height: min(54dvh, 440px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid rgb(var(--line-rgb) / 0.14);
  }

  .map-results-panel.is-collapsed .map-product-list {
    display: none;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .map-panel-toggle {
    min-width: 7.4rem;
    justify-content: center;
  }

  .map-panel-toggle span {
    display: inline;
  }

  #eventsMap .leaflet-control-zoom,
  .map-results-panel:not(.is-collapsed) ~ .map-canvas-shell #eventsMap .leaflet-control-zoom {
    margin-right: 0.7rem !important;
    margin-bottom: 0.7rem !important;
  }

  .map-interaction-gate {
    inset: 3.6rem 0 0;
  }
}

@media (max-width: 390px) {
  .map-canvas-shell {
    height: clamp(540px, 76dvh, 690px);
    min-height: 540px;
  }

  .map-panel-toggle {
    min-width: 6.8rem;
  }
}

/* Event plan: mobile action placement and touch clarity */
@media (max-width: 640px) {
  .plan-item-grid {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 0.65rem;
  }

  .plan-item-actions {
    grid-column: 1 / -1;
    grid-row: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    margin: 0.2rem 0 0 calc(28px + 0.65rem);
    padding-top: 0.65rem;
    border-top: 1px solid rgb(var(--line-rgb) / 0.12);
  }

  .plan-item-actions button {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid rgb(var(--line-rgb) / 0.16);
    border-radius: 4px;
    background: rgb(var(--ink-rgb) / 0.34);
  }

  .plan-item-actions button:last-child {
    margin-left: 0.25rem;
    border-color: rgb(255 138 123 / 0.28);
    color: rgb(255 180 168 / 0.9);
  }

  .plan-item-actions button:disabled {
    background: transparent;
    opacity: 0.28;
  }
}

/* Event plan: keep mobile reorder/remove controls together and out of the content column. */
@media (max-width: 640px) {
  .plan-item-grid {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 0.65rem;
  }

  .plan-item-actions {
    grid-column: 1 / -1;
    grid-row: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    margin: 0.2rem 0 0 calc(28px + 0.65rem);
    padding-top: 0.65rem;
    border-top: 1px solid rgb(var(--line-rgb) / 0.12);
  }

  .plan-item-actions button {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid rgb(var(--line-rgb) / 0.16);
    border-radius: 4px;
    background: rgb(var(--ink-rgb) / 0.34);
  }

  .plan-item-actions button:last-child {
    margin-left: 0.25rem;
    border-color: rgb(255 138 123 / 0.28);
    color: rgb(255 180 168 / 0.9);
  }

  .plan-item-actions button:disabled {
    background: transparent;
    opacity: 0.28;
  }
}