/* ---------------------------------------------------------------------
   KamerHive — design tokens
--------------------------------------------------------------------- */
:root {
  --red: #c8102e;
  --red-dark: #a30b23;
  --green: #0b6e52;
  --green-dark: #084d39;
  --green-hover: #075942;
  --green-subtle: rgba(11, 110, 82, 0.08);
  --yellow: #f5a623;
  /* ADR-0009 §10 open question 2 — muted/pressed-ink variant of --yellow, used for the
     "Surprise me" picker tile treatment (guided-picker.ejs) so it reads on-brand rather
     than as an arbitrary new color. */
  --gold-ink: #a36b13;
  --brand-green: #0b6e52;
  --brand-gold: #f5a623;
  --brand-red: #c8102e;
  /* Dark-mode audit: several rules referenced --primary (card meta icons, .card-cta
     arrow, the search capsule's focus border) without it ever being defined anywhere —
     an invalid var() reference silently falls back to the property's inherited/initial
     value instead of erroring, so this went unnoticed. Aliased to --green so it inherits
     that token's existing light/dark values automatically. */
  --primary: var(--green);
  --ink: #141816;
  --muted: #5c6560;
  --muted-light: #7a8580;
  --bg: #fbf9f4;
  --bg-alt: #f4efe6;
  --card: #ffffff;
  --border: #e6e0d4;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(14, 24, 20, 0.05);
  --shadow-md: 0 4px 16px -2px rgba(14, 24, 20, 0.08), 0 2px 6px -1px rgba(14, 24, 20, 0.04);
  --shadow-lg: 0 16px 36px -4px rgba(14, 24, 20, 0.14), 0 4px 12px -2px rgba(14, 24, 20, 0.06);
  --shadow-glow: 0 0 24px rgba(11, 110, 82, 0.22);
  --font-head: 'Plus Jakarta Sans', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
/* Browsers give <fieldset> a default min-width based on its content (min-content),
   which stops it shrinking below that even in a normal block layout — a long-standing
   quirk that can force a whole form wider than a narrow viewport. */
fieldset {
  min-width: 0;
}
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  font-weight: 700;
  margin: 0 0 0.5em;
  line-height: 1.2;
}
p {
  margin: 0 0 1em;
  color: var(--ink);
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 0.875rem;
}
.hidden {
  display: none !important;
}

/* ---------------------------------------------------------------------
   HiveMark Bespoke Vector Iconography System
--------------------------------------------------------------------- */
.hive-icon {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    transform 0.15s ease,
    stroke 0.15s ease;
}
.hive-icon-accent {
  fill: currentColor;
  opacity: 0.18;
}
.btn .hive-icon,
.intent-pill .hive-icon,
.cat-chip .hive-icon,
.cat-pill .hive-icon {
  margin-right: 0.35em;
}
.icon-xs {
  width: 14px;
  height: 14px;
}
.icon-sm {
  width: 18px;
  height: 18px;
}
.icon-md {
  width: 22px;
  height: 22px;
}
.icon-lg {
  width: 28px;
  height: 28px;
}
.cat-chip-icon {
  margin-right: 0.4em;
}

/* ---------------------------------------------------------------------
   Buttons & chips
--------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7em 1.3em;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.btn-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: white;
  box-shadow: 0 4px 14px rgba(225, 68, 45, 0.35);
}
.btn-primary:hover {
  box-shadow: 0 6px 18px rgba(225, 68, 45, 0.45);
  transform: translateY(-1px);
}
.btn-secondary {
  background: white;
  color: var(--ink);
  border: 1.5px solid var(--border);
}
.btn-secondary:hover {
  border-color: var(--ink);
}
.btn-danger {
  color: var(--red);
  border-color: var(--red);
}
.btn-danger:hover {
  background: var(--red);
  color: white;
  border-color: var(--red);
}
.btn-sm {
  padding: 0.5em 1em;
  font-size: 0.85rem;
}
.btn-lg {
  padding: 0.9em 1.8em;
  font-size: 1.05rem;
}
.btn-block {
  width: 100%;
}
.btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none !important;
}

.chip {
  padding: 0.45em 1em;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  transition: background 0.15s ease;
}
.chip:hover,
.chip-active {
  background: white;
  color: #16181d;
  border-color: white;
}

.cat-chip {
  flex: 0 0 auto;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  background: white;
  border: 1.5px solid var(--border);
  color: var(--ink);
  white-space: nowrap;
  transition: all 0.15s ease;
}
.cat-chip:hover {
  border-color: var(--red);
}
.cat-chip-active {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}

/* ---------------------------------------------------------------------
   Nav
--------------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 246, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.brand-word {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--ink);
}
.brand-word strong {
  color: var(--brand-green);
}
.brand-word.small {
  font-size: 1.1rem;
}
.brand-mark {
  display: inline-flex;
}
.brand-mark img {
  display: block;
  width: 38px;
  height: 38px;
}
.brand-mark .mark-dark {
  display: none;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
}
.nav-account {
  color: var(--muted);
  font-size: 0.88rem;
  white-space: nowrap;
}
.nav-logout-form {
  display: inline-flex;
  margin-left: -0.75rem;
}
.nav-logout-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.2em;
  color: var(--ink);
}
.nav-logout-btn:hover {
  opacity: 0.7;
}
.mobile-account-email {
  padding: 0.7rem 0.2rem;
  font-weight: 600;
  font-size: 1.02rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.mobile-logout-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  padding: 0.7rem 0.2rem;
  font-weight: 600;
  font-size: 1.02rem;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}

/* ---------------------------------------------------------------------
   Hero
--------------------------------------------------------------------- */
.hero {
  background: linear-gradient(120deg, #14181c 0%, #1e2530 45%, var(--green-dark) 100%);
  padding: 3.5rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 20%, rgba(251, 192, 45, 0.18), transparent 55%),
    radial-gradient(circle at 10% 80%, rgba(225, 68, 45, 0.22), transparent 50%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.hero h1 {
  color: white;
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: -0.02em;
}
.hero h1 .dot {
  color: var(--yellow);
}
.hero-sub {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.05rem;
  max-width: 520px;
  margin: 0 auto 1.75rem;
}
.hero-sub.small {
  max-width: 640px;
  margin: 0 0 1.5rem;
  color: var(--muted);
}

/* Brand lockup: animated logo + tagline at the top of the hero */
.hero-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.hero-brand-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  animation: heroMarkIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hero-brand-mark::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 183, 5, 0.35), rgba(242, 183, 5, 0) 70%);
  animation: heroMarkGlow 3.2s ease-in-out 0.9s infinite;
}
.hero-brand-mark img {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  animation: heroMarkFloat 4.5s ease-in-out 0.9s infinite;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35));
}
.hero-tagline {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow);
  opacity: 0;
  animation: heroTaglineIn 0.7s ease 0.55s both;
}
@keyframes heroMarkIn {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-25deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.08) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes heroMarkFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes heroMarkGlow {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}
@keyframes heroTaglineIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-bar {
  display: flex;
  gap: 0.5rem;
  max-width: 560px;
  margin: 0 auto 1.5rem;
}
.search-bar input {
  flex: 1;
  padding: 0.85em 1.2em;
  border-radius: 999px;
  border: none;
  font-size: 1rem;
  font-family: var(--font-body);
  box-shadow: var(--shadow-md);
}
.search-bar input:focus {
  outline: 2px solid var(--yellow);
}

.city-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

/* ---------------------------------------------------------------------
   Range-chip family — used exclusively by the guided picker's Price step
   (guided-picker.ejs). min-height/inline-flex added for the 44x44 touch-target minimum;
   the visual look (colors, radius, hover/active states) is unchanged from the standalone
   price filter this replaced.
--------------------------------------------------------------------- */
.range-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.3rem 0.95rem;
  border-radius: 20px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}
.range-chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.range-chip-active {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}
.range-chip-active:hover {
  background: var(--ink);
  color: white;
}
/* Instant client-side feedback on tap, ahead of the picker's ~350ms fast-path auto-submit
   (see guided-picker.ejs) — `var(--bg)` rather than a hardcoded white/black text color so
   this stays correctly contrasted in both themes without a separate dark-mode override
   (in dark mode --ink is the light color and --bg is the near-black one, so the pairing
   inverts correctly on its own). */
.picker-input:checked + .range-chip {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.picker-input:checked + .range-chip .picker-check {
  display: inline-flex;
}
.price-check-icon {
  display: inline-flex;
  vertical-align: -0.15em;
  margin-right: 0.3em;
}

/* ---------------------------------------------------------------------
   Category scroller
--------------------------------------------------------------------- */
.category-scroller-wrap {
  position: relative;
}
.category-scroller {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding: 1.5rem 0 0.5rem;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.scroller-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-30%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-md);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease;
}
.scroller-arrow-left {
  left: -4px;
}
.scroller-arrow-right {
  right: -4px;
}
.scroller-arrow:hover {
  border-color: var(--ink);
}
.scroller-arrow.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 560px) {
  .scroller-arrow {
    display: none;
  }
}
.category-scroller::-webkit-scrollbar {
  display: none;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.6rem;
  margin: 2.5rem 0 1.1rem;
}
.view-toggle-row {
  display: flex;
  margin: 0.75rem 0 0;
}
#event-results {
  scroll-margin-top: 90px;
}
.section-title {
  font-size: 1.4rem;
  margin: 0;
}
.trending-section .section-title {
  margin: 2rem 0 0.85rem;
  line-height: 1.35;
}
.section-count {
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------
   Event grid & card
--------------------------------------------------------------------- */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.25rem;
}
.trending-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.event-card {
  display: block;
  background: var(--card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  position: relative;
}
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-cover {
  position: relative;
  height: 130px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-body {
  padding: 1rem 1.1rem 1.1rem;
}
.card-title {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}
.card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.83rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.card-footer {
  display: flex;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--muted);
  border-top: 1px dashed var(--border);
  padding-top: 0.6rem;
}
.stat {
  font-weight: 600;
}

.cat-pill,
.price-pill,
.countdown-pill {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #16181d;
  backdrop-filter: blur(2px);
}
.cat-pill.light {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.card-cover .cat-pill {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
}
.card-cover .price-pill {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}
.price-pill.price-free {
  background: var(--green);
  color: white;
}
.card-cover .countdown-pill {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  background: rgba(20, 20, 20, 0.55);
  color: white;
}

/* ---------------------------------------------------------------------
   View toggle buttons
--------------------------------------------------------------------- */
.view-toggle {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.2rem;
}
.view-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.3rem 0.55rem;
  border-radius: 8px;
  color: var(--muted);
  transition: all 0.15s ease;
  line-height: 1;
}
.view-btn:hover {
  color: var(--ink);
  background: var(--card);
}
.view-btn-active {
  background: var(--card) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------
   List view
--------------------------------------------------------------------- */
.event-grid.view-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.view-list .event-card {
  display: flex;
  flex-direction: row;
  gap: 0;
  transform: none;
  transition: box-shadow 0.15s ease;
}
.view-list .event-card:hover {
  transform: none;
  box-shadow: var(--shadow-md);
}
.view-list .card-cover {
  width: 160px;
  min-width: 160px;
  height: auto;
  min-height: 120px;
  position: relative;
  padding: 0.6rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.view-list .card-body {
  flex: 1;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.view-list .card-title {
  font-size: 1rem;
  margin-bottom: 0.3rem;
}
.view-list .card-meta {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
}
.view-list .card-footer {
  border-top: none;
  padding-top: 0;
  gap: 0.75rem;
  font-size: 0.8rem;
}
.view-list .countdown-pill,
.view-list .price-pill {
  display: none;
}
.view-list .cat-pill {
  position: static;
  align-self: flex-start;
}
.view-list .fired-up-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  bottom: auto;
  left: auto;
  font-size: 0.65rem;
  padding: 0.2em 0.55em;
}

/* ---------------------------------------------------------------------
   Timeline view
--------------------------------------------------------------------- */
.event-grid.view-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.view-timeline::before {
  content: '';
  position: absolute;
  left: 80px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.view-timeline .event-card {
  display: flex;
  flex-direction: row;
  gap: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0.6rem 0;
  position: relative;
  transform: none;
  border-bottom: 1px solid var(--border);
}
.view-timeline .event-card:hover {
  transform: none;
  box-shadow: none;
}
.view-timeline .event-card:last-child {
  border-bottom: none;
}
.view-timeline .card-cover {
  width: 70px;
  min-width: 70px;
  height: auto;
  min-height: 50px;
  border-radius: var(--radius-sm);
  margin: 0.2rem 1rem 0.2rem 0;
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
/* Timeline dot */
.view-timeline .event-card::before {
  content: '';
  position: absolute;
  left: 76px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--card);
  transform: translateY(-50%);
  z-index: 1;
}
.view-timeline .card-cover .cat-pill,
.view-timeline .card-cover .price-pill,
.view-timeline .card-cover .countdown-pill {
  display: none;
}
.view-timeline .fired-up-badge {
  display: none;
}
.view-timeline .card-body {
  flex: 1;
  padding: 0 0 0 0.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
}
.view-timeline .card-title {
  font-size: 0.95rem;
  margin: 0;
  width: 100%;
}
.view-timeline .card-meta {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  font-size: 0.8rem;
  margin: 0;
  border: none;
}
.view-timeline .card-footer {
  border-top: none;
  padding: 0;
  margin-left: auto;
  gap: 0.5rem;
  font-size: 0.78rem;
}

/* Hide timeline on very small screens — fall back to list */
@media (max-width: 480px) {
  .view-timeline .card-cover {
    display: none;
  }
  .view-timeline::before {
    left: 0;
  }
  .view-timeline .event-card::before {
    left: -4px;
  }
  .view-timeline .card-body {
    padding-left: 1.2rem;
  }
}

/* Category gradients */
.grad-tech {
  background: linear-gradient(135deg, #1f2a44, #3f6fbf);
}
.grad-music {
  background: linear-gradient(135deg, #6a1b4d, #e1442d);
}
.grad-food {
  background: linear-gradient(135deg, #c2410c, #fbc02d);
}
.grad-outdoors {
  background: linear-gradient(135deg, #14532d, #1b8a5a);
}
.grad-business {
  background: linear-gradient(135deg, #1e293b, #475569);
}
.grad-community {
  background: linear-gradient(135deg, #7c2d12, #b45309);
}
.grad-arts {
  background: linear-gradient(135deg, #581c87, #c026d3);
}
.grad-sports {
  background: linear-gradient(135deg, #0f766e, #22c55e);
}
.grad-education {
  background: linear-gradient(135deg, #1d4ed8, #38bdf8);
}
.grad-health {
  background: linear-gradient(135deg, #065f46, #10b981);
}
.grad-fashion {
  background: linear-gradient(135deg, #9d174d, #f472b6);
}
.grad-gaming {
  background: linear-gradient(135deg, #312e81, #7c3aed);
}
.grad-spiritual {
  background: linear-gradient(135deg, #78350f, #d97706);
}
.grad-family {
  background: linear-gradient(135deg, #0e7490, #2dd4bf);
}
.grad-other {
  background: linear-gradient(135deg, #374151, #6b7280);
}

/* ---------------------------------------------------------------------
   Empty state / organizer CTA
--------------------------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
}
.empty-state.small-empty {
  padding: 1.5rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.my-events-section {
  margin-bottom: 2.5rem;
}
.my-events-section h2 {
  margin-bottom: 1rem;
  font-size: 1.15rem;
}
.my-events-signin-hint {
  background: rgba(242, 183, 5, 0.12);
  border-color: var(--brand-gold);
  color: var(--ink);
}
.organizer-cta {
  margin: 3.5rem 0;
}
.organizer-cta-inner {
  background: linear-gradient(120deg, #14181c, var(--green-dark));
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  color: white;
}
.organizer-cta-inner h3 {
  color: white;
  margin-bottom: 0.3rem;
  font-size: 1.3rem;
}
.organizer-cta-inner p {
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  max-width: 420px;
}

/* ---------------------------------------------------------------------
   Event detail page
--------------------------------------------------------------------- */
.detail-cover {
  padding: 2.5rem 0 3rem;
  color: white;
  position: relative;
}
/* Belt-and-suspenders with the gradient overlay above: a photo that's genuinely near-white
   (sky, a white wall, a bright ceiling) can still wash out white text even under a fairly
   dark scrim, so every text node here also gets its own shadow. Inherits to every child
   (back-link, pill, h1, meta-row) without needing to repeat it on each selector. */
.detail-cover-inner {
  position: relative;
  z-index: 1;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.85),
    0 2px 10px rgba(0, 0, 0, 0.55);
}
.back-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
}
.detail-cover .back-link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-block;
  margin-bottom: 1rem;
}
.detail-cover h1 {
  color: white;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin: 0.6rem 0 0.9rem;
  max-width: 760px;
}
.detail-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  align-items: center;
}
.countdown-badge {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0.25em 0.8em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8rem;
}
.countdown-badge-inactive {
  background: var(--red);
  border-color: var(--red);
  color: white;
}
.sticky-event-countdown.countdown-badge-inactive {
  background: none;
  border: none;
  color: var(--red);
  padding: 0;
}
.multiday-badge {
  background: rgba(251, 192, 45, 0.25);
  border: 1px solid rgba(251, 192, 45, 0.6);
  padding: 0.25em 0.8em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8rem;
}

.back-link {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9rem;
}

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  margin-top: -1.5rem;
  margin-bottom: 3rem;
  align-items: start;
}
/* The negative top margin above pulls the content card up to overlap the hero's rounded
   bottom corner — correct when nothing else sits in between. A status banner (cancelled/
   removed/past) is a real in-flow block between the hero and this grid, so the same pull
   would instead swallow the banner's own bottom edge; cancel it out when one is present. */
.past-event-banner ~ .detail-layout,
.cancelled-event-banner ~ .detail-layout {
  margin-top: 0;
}
.detail-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.panel h2 {
  font-size: 1.2rem;
}
.prose {
  color: var(--ink);
  white-space: pre-line;
}

.agenda-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.agenda-list li {
  display: flex;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--border);
}
.agenda-list li:last-child {
  border-bottom: none;
}
.agenda-time {
  font-weight: 700;
  color: var(--red);
  min-width: 60px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.info-item h4 {
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}
.info-item p {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
}

.map-placeholder {
  border-radius: var(--radius-sm);
  padding: 2rem 1.5rem;
  color: white;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 120px;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 0;
}
.faq-item:last-child {
  border-bottom: none;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
}
.faq-item p {
  margin: 0.6rem 0 0;
  color: var(--muted);
}

/* Engagement */
.engagement-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.reaction-bar {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.reaction-bar.small {
  margin-top: 0.5rem;
}
.reaction-btn {
  display: flex;
  align-items: center;
  gap: 0.3em;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3em 0.7em;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--ink);
  transition:
    transform 0.1s ease,
    background 0.15s ease;
}
.reaction-btn:hover {
  background: #f3efe7;
  color: #16181d;
}
.reaction-btn:active {
  transform: scale(0.94);
}
.reaction-btn.reacted {
  background: #fdecea;
  border-color: var(--red);
  color: var(--red-dark);
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.comment-form input,
.comment-form textarea {
  padding: 0.7em 0.9em;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.92rem;
  resize: vertical;
  background: var(--card);
  color: var(--ink);
}
.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--red);
}
.comment-form .btn {
  align-self: flex-end;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.comment {
  display: flex;
  gap: 0.75rem;
}
.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 0.9rem;
}
.comment-body {
  flex: 1;
  min-width: 0;
}
.comment-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.15rem;
}
.organizer-badge {
  background: var(--green);
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15em 0.6em;
  border-radius: 999px;
}
.comment-time {
  font-size: 0.78rem;
}
.comment-body p {
  margin: 0.2rem 0 0.4rem;
  font-size: 0.93rem;
}
.empty-comments {
  color: var(--muted);
  text-align: center;
  padding: 1rem 0;
}

/* Sidebar */
.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 90px;
  min-width: 0;
}
.sidebar-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.interest-count {
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 0.9rem;
}
.interest-count strong {
  display: block;
  font-size: 1.8rem;
  color: var(--ink);
  font-family: var(--font-head);
}
.notify-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.notify-form input {
  padding: 0.65em 0.9em;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  font-family: var(--font-body);
}
.form-hint {
  font-size: 0.78rem;
  color: var(--muted-light);
  margin: 0.2rem 0 0;
  text-align: center;
}
.joined-note {
  text-align: center;
  color: var(--green-dark);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0.9rem 0 0;
}
.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 1.1rem 0;
}
.sidebar-row {
  text-align: center;
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.sidebar-card .btn + .btn {
  margin-top: 0.6rem;
}
.organizer-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0.75rem 0;
}
.organizer-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--yellow));
  color: white;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* ---------------------------------------------------------------------
   Forms (create event)
--------------------------------------------------------------------- */
.form-page {
  padding: 2rem 0 4rem;
  max-width: 760px;
}
.form-page h1 {
  margin-top: 0.75rem;
}
.event-form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 2rem;
}
.event-form legend {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 1rem;
  padding: 0;
}
.event-form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1rem;
  flex: 1;
}
.event-form input,
.event-form select,
.event-form textarea {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  padding: 0.7em 0.9em;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--ink);
}
.event-form input:focus,
.event-form select:focus,
.event-form textarea:focus {
  outline: none;
  border-color: var(--red);
}
.event-form input[type='file']::file-selector-button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  margin-right: 0.8em;
  padding: 0.5em 1em;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
.event-form input[type='file']::file-selector-button:hover {
  border-color: var(--ink);
}
.form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.form-row label {
  min-width: 180px;
}

.field-hint {
  display: block;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--muted);
}
.field-hint-spacer {
  visibility: hidden;
}

.time-picker {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.time-picker-hour,
.time-picker-minute {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  padding: 0.7em 0.5em;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--ink);
  width: 3.6em;
  text-align: center;
}
.time-picker-hour:focus,
.time-picker-minute:focus {
  outline: none;
  border-color: var(--red);
}
.time-picker-sep {
  font-weight: 700;
  color: var(--muted);
}
.time-picker-ampm {
  display: flex;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.time-picker-ampm-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.7em 0.85em;
  border: none;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}
.time-picker-ampm-btn + .time-picker-ampm-btn {
  border-left: 1.5px solid var(--border);
}
.time-picker-ampm-btn.active {
  background: var(--red);
  color: #fff;
}
.time-picker-ampm-btn:hover:not(.active) {
  background: var(--bg);
  color: var(--ink);
}
.time-picker-invalid .time-picker-ampm {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(225, 68, 45, 0.2);
}

.agenda-label {
  margin-top: 0.5rem;
}
.agenda-row,
.faq-row {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.agenda-row input:first-child {
  max-width: 100px;
}
.faq-row input:first-child {
  flex: 1;
}
.faq-row input:last-child {
  flex: 2;
}
/* BL-022 / BL-023 — sponsors & partners and pricing tiers repeaters */
.repeater-row {
  display: grid;
  gap: 0.5rem;
  padding: 0.8rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.repeater-row .repeater-remove {
  justify-self: end;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.repeater-row .repeater-remove:hover,
.repeater-row .repeater-remove:focus-visible {
  color: var(--red);
  background: rgba(225, 68, 45, 0.08);
  outline: none;
}
.sponsor-fields {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.sponsor-fields input {
  flex: 2;
  min-width: 180px;
}
.sponsor-fields select {
  flex: 1;
  min-width: 140px;
}
.sponsor-logo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}
.sponsor-logo input[type='file'] {
  width: 100%;
  border: 1.5px dashed var(--border);
  background: var(--bg);
  font-size: 0.8rem;
  padding: 0.5em;
  border-radius: var(--radius-sm);
}
.current-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.3rem;
}
.current-logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  padding: 2px;
}
.tier-row-meta {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.tier-row-meta input[type='text'] {
  flex: 2;
  min-width: 160px;
}
.tier-row-meta input[type='number'] {
  flex: 1;
  min-width: 120px;
}
/* BL-022 / BL-023 — display: sponsor logo list and pricing tier list */
.sponsor-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.sponsor-logo-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.sponsor-logo-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  padding: 2px;
}
.sponsor-logo-name {
  font-weight: 600;
  font-size: 0.88rem;
}
.sponsor-logo-item .role-tag {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tier-list {
  margin-top: 0.4rem;
}
.tier-item {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
}
.tier-item:last-child {
  border-bottom: none;
}
.tier-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.88rem;
}
.tier-price {
  font-weight: 700;
  color: var(--green-dark);
  white-space: nowrap;
}
.tier-benefits {
  margin: 0.3rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.alert {
  background: #fdecea;
  border: 1px solid var(--red);
  color: var(--red-dark);
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------
   Footer
--------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 0;
  margin-top: 3rem;
}
.footer-inner {
  text-align: center;
  color: var(--muted);
}
.footer-inner p {
  max-width: 420px;
  margin: 0.4rem auto;
  font-size: 0.9rem;
}
.footer-note {
  font-size: 0.78rem !important;
  color: var(--muted-light);
}

/* ---------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------- */
@media (max-width: 860px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }
  .detail-sidebar {
    position: static;
    order: -1;
  }
}
@media (max-width: 560px) {
  .hero {
    padding: 2.5rem 0 2rem;
  }
  .search-bar {
    flex-direction: column;
  }
  .organizer-cta-inner {
    flex-direction: column;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------
   Alerts
--------------------------------------------------------------------- */
.alert-success {
  background: #eaf7ef;
  border-color: var(--green);
  color: var(--green-dark);
}

/* ---------------------------------------------------------------------
   WhatsApp button
--------------------------------------------------------------------- */
.btn-whatsapp {
  background: #25d366;
  color: white;
}
.btn-whatsapp:hover {
  background: #1ebe59;
}

/* ---------------------------------------------------------------------
   Pinned organizer updates (public event page)
--------------------------------------------------------------------- */
.updates-panel {
  background: #fffbeb;
  border-color: var(--yellow);
  color: #6b5a00;
}
.updates-panel h2,
.updates-panel p,
.updates-panel strong {
  color: #6b5a00;
}
.updates-panel .muted {
  color: #92720c;
}
.update-item {
  padding: 0.5rem 0;
}
.update-item + .update-item {
  border-top: 1px dashed var(--border);
  margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------
   Organizer manage dashboard
--------------------------------------------------------------------- */
.manage-page {
  padding: 2rem 0 4rem;
}
.manage-page h1 {
  margin-top: 0.75rem;
}

.manage-link-box {
  background: var(--card);
  border: 1.5px dashed var(--red);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.3rem;
  margin: 1.5rem 0;
}
.manage-link-box label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.copy-row {
  display: flex;
  gap: 0.6rem;
}
.copy-row input {
  flex: 1;
  padding: 0.6em 0.9em;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  font-family: monospace;
  font-size: 0.85rem;
  background: var(--bg);
  color: var(--ink);
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat-card strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.8rem;
}
.stat-card span {
  font-size: 0.82rem;
  color: var(--muted);
}

.manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
}

.manage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  align-items: start;
}
.manage-grid .event-form label {
  margin-bottom: 0.75rem;
}

.table-scroll {
  overflow-x: auto;
}
.interest-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.interest-table th {
  text-align: left;
  padding: 0.5em 0.6em;
  border-bottom: 2px solid var(--border);
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.interest-table td {
  padding: 0.55em 0.6em;
  border-bottom: 1px solid var(--border);
}

.update-list li {
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--border);
}
.update-list li:last-child {
  border-bottom: none;
}
.update-list p {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.manage-page .comment-body form {
  margin-top: 0.5rem;
}

@media (max-width: 760px) {
  .manage-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   Buzz card
--------------------------------------------------------------------- */
.card-page-body {
  background: var(--ink);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.card-page-wrap {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.buzz-card {
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  color: white;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.buzz-card.has-image {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.85),
    0 2px 10px rgba(0, 0, 0, 0.55);
}
.buzz-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand-word.light {
  color: white;
}
.brand-word.light strong {
  color: var(--brand-gold);
}
.buzz-card h1 {
  color: white;
  font-size: 1.6rem;
  margin: 0;
}
.buzz-meta {
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  font-size: 0.92rem;
}

.buzz-stats {
  display: flex;
  justify-content: space-around;
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 1rem 0.5rem;
}
.buzz-stat {
  text-align: center;
}
.buzz-stat strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.6rem;
}
.buzz-stat span {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
}

.buzz-quote {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  font-style: italic;
  font-size: 0.95rem;
}
.buzz-quote span {
  display: block;
  font-style: normal;
  font-weight: 700;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  opacity: 0.85;
}

.buzz-footer {
  margin: 0;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.card-page-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.card-page-actions .form-hint {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------------------------------------------------------------------
   GPS coordinates + clickable map link
--------------------------------------------------------------------- */
.location-map {
  height: 280px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1.5px solid var(--border);
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  z-index: 0;
}
.gps-row label {
  min-width: 140px;
}
a.map-placeholder {
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease;
}
a.map-placeholder:hover {
  filter: brightness(1.1);
}

/* ---------------------------------------------------------------------
   Dev mailbox
--------------------------------------------------------------------- */
.mailbox-page {
  padding: 2rem 0 4rem;
  max-width: 680px;
}
.mailbox-page h1 {
  margin-top: 0.75rem;
}
.mailbox-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mailbox-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--shadow-sm);
}
.mailbox-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.mailbox-type-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.mailbox-type-manage-link {
  background: #fdecea;
  border-color: var(--red);
  color: var(--red-dark);
}
.mailbox-type-interest-notification {
  background: #eaf7ef;
  border-color: var(--green);
  color: var(--green-dark);
}
.mailbox-type-comment-notification {
  background: #fff8e1;
  border-color: var(--yellow);
  color: #92720c;
}
.mailbox-item strong {
  display: block;
  margin-bottom: 0.2rem;
}
.mailbox-item .btn {
  margin-top: 0.6rem;
}
.mailbox-text-preview {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  white-space: pre-line;
}

/* ---------------------------------------------------------------------
   Cover images (cards, detail hero, buzz card) with legibility overlay
--------------------------------------------------------------------- */
.card-cover.has-image,
.detail-cover.has-image,
.buzz-card.has-image {
  background-size: cover;
  background-position: center;
}
.card-cover.has-image::before,
.detail-cover.has-image::before,
.buzz-card.has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Strong at both top and bottom, not just bottom — the top is where the back-link,
     category pill, and title actually sit, so a photo with a light top half (sky, a
     white wall, a bright ceiling) still needs real contrast up there too. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.6));
}
.buzz-card.has-image {
  position: relative;
}
.buzz-card.has-image > * {
  position: relative;
  z-index: 1;
}

.current-cover-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: -0.5rem 0 1rem;
}
.current-cover-preview img {
  width: 90px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.publish-divider {
  height: 1px;
  background: var(--border);
  margin: 2rem 0 1.25rem;
}
.btn-publish {
  font-size: 1.1rem;
  padding: 1em 1.8em;
}

/* ---------------------------------------------------------------------
   Mobile hamburger navigation
--------------------------------------------------------------------- */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.hamburger-btn span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.hamburger-btn[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.hamburger-btn[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
.hamburger-btn[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 1.25rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.mobile-menu.open {
  display: flex;
}
.mobile-menu a:not(.btn) {
  padding: 0.7rem 0.2rem;
  font-weight: 600;
  font-size: 1.02rem;
  border-bottom: 1px solid var(--border);
}
.mobile-menu a.btn {
  margin-top: 0.5rem;
}

@media (max-width: 560px) {
  .nav-links {
    display: none;
  }
  .hamburger-btn {
    display: flex;
  }
}

/* ---------------------------------------------------------------------
   Toasts
--------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--ink);
  color: white;
  padding: 0.7em 1.3em;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  max-width: 90vw;
  text-align: center;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast-error {
  background: var(--red-dark);
}
.toast-success {
  background: var(--green-dark);
}

/* ---------------------------------------------------------------------
   Draft banner (create event form)
--------------------------------------------------------------------- */
.draft-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: #fff8e1;
  border: 1px solid var(--yellow);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.2rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: #92720c;
}
.draft-banner-actions {
  display: flex;
  gap: 0.5rem;
  flex: none;
}

/* ---------------------------------------------------------------------
   Interest form trust signals + celebration
--------------------------------------------------------------------- */
.reminder-opt {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  flex-direction: row;
}
.reminder-opt input {
  width: auto;
}

@keyframes pop-in {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }
  60% {
    transform: scale(1.04);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
.joined-note.celebrate {
  animation: pop-in 0.35s ease;
}

/* ---------------------------------------------------------------------
   Reaction pending state
--------------------------------------------------------------------- */
.reaction-btn.reacting {
  opacity: 0.5;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   Manage dashboard polish
--------------------------------------------------------------------- */
.panel-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--red);
  margin-bottom: 0.4rem;
}
.stat-trend {
  display: block;
  color: var(--green-dark);
  font-weight: 700;
  font-size: 0.72rem;
  margin-top: 0.2rem;
}

/* ---------------------------------------------------------------------
   My Events page
--------------------------------------------------------------------- */
.my-events-page {
  padding: 2rem 0 4rem;
}
.my-events-page h1 {
  margin-top: 0.75rem;
}

.not-found-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* ---------------------------------------------------------------------
   Skip-to-content link
--------------------------------------------------------------------- */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 999;
  background: var(--ink);
  color: white;
  padding: 0.7em 1.2em;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700;
  font-size: 0.9rem;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--yellow);
}

/* ---------------------------------------------------------------------
   Footer grid (trust links)
--------------------------------------------------------------------- */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 1.5rem;
  text-align: left;
  margin-bottom: 1.5rem;
}
.footer-grid h4 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.7rem;
}
.footer-grid a {
  display: block;
  font-size: 0.88rem;
  color: var(--ink);
  padding: 0.25em 0;
}
.footer-grid a:hover {
  text-decoration: underline;
}
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------
   Past event banner
--------------------------------------------------------------------- */
.past-event-banner {
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: white;
  text-align: center;
  padding: 0.6rem 1rem;
  font-weight: 700;
  font-size: 0.9rem;
}
.past-event-banner span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.cancelled-event-banner {
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: white;
  text-align: center;
  padding: 0.6rem 1rem;
  font-weight: 600;
  font-size: 0.9rem;
}
.cancelled-event-banner span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ---------------------------------------------------------------------
   Sticky CTA bar (detail page)
--------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  padding: 0.7rem 0;
  transition: transform 0.25s ease;
}
.sticky-cta.hidden {
  transform: translateY(100%);
}
.sticky-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.sticky-cta .btn {
  flex: none;
}
@media (max-width: 860px) {
  .sticky-cta.hidden {
    display: none;
  }
  .detail-sidebar {
    padding-bottom: 4rem;
  }
}

/* Scrolling activity ticker — replaces the old (redundant) date/location text on the
   sticky bottom bar, since that's already shown in the sticky header above it. */
.sticky-cta-ticker-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.sticky-cta-ticker {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sticky-cta-ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 24s linear infinite;
}
.sticky-cta-ticker-item {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  padding-right: 2.5rem;
}
.sticky-cta-ticker-empty {
  font-size: 0.8rem;
  color: var(--muted);
}
@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Blinking interest count — bold red pulse, meant to grab attention. */
.blink-count {
  color: var(--red);
  font-weight: 800;
  animation: count-blink 0.8s ease-in-out infinite;
}
@keyframes count-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

/* Honeypot spam-trap field — invisible to real visitors, still "visible" (and so
   fillable) to a naive scripted bot that doesn't check layout/CSS. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  overflow: hidden;
}

/* Report / flag disclosure (event sidebar) */
.report-disclosure {
  margin-top: 0.5rem;
  text-align: center;
}
.report-trigger {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--muted);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.report-trigger::-webkit-details-marker {
  display: none;
}
.report-trigger:hover {
  color: var(--red);
}
.report-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.6rem;
  text-align: left;
}
.report-form select,
.report-form textarea {
  padding: 0.5em 0.7em;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.85rem;
  background: var(--card);
  color: var(--ink);
  resize: vertical;
}
.report-form .report-status {
  margin: 0;
  font-size: 0.8rem;
}
.report-form .report-status.success {
  color: var(--brand-green);
}
.report-form .report-status.error {
  color: var(--red);
}

.comment-report-btn {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  font-size: 0.85rem;
  padding: 0.3em;
  margin-left: auto;
  transition: opacity 0.15s ease;
  color: var(--ink);
}
.comment-report-btn:hover {
  opacity: 1;
}
.comment-report-btn.reported {
  opacity: 1;
  cursor: default;
}

/* Legal pages (Terms, Privacy) */
.legal-page {
  max-width: 720px;
  margin: 2rem auto 4rem;
}
.legal-page h1 {
  font-size: 1.8rem;
  margin-bottom: 0.3rem;
}
.legal-page .hero-sub {
  margin-bottom: 1.5rem;
}
.legal-page .legal-disclaimer {
  background: #fff8e1;
  border-left: 3px solid var(--brand-gold);
  color: #78350f;
  padding: 0.8rem 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  border-radius: var(--radius-sm);
  margin-bottom: 2rem;
}
body.dark-mode .legal-page .legal-disclaimer {
  background: rgba(242, 183, 5, 0.12);
  color: #f2b705;
}
@media (prefers-color-scheme: dark) {
  body:not(.light-mode) .legal-page .legal-disclaimer {
    background: rgba(242, 183, 5, 0.12);
    color: #f2b705;
  }
}
.legal-page section {
  margin-bottom: 1.75rem;
}
.legal-page h2 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.legal-page p,
.legal-page li {
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.95rem;
}
.legal-page ul {
  padding-left: 1.3rem;
}
.legal-page li {
  margin-bottom: 0.3rem;
}
.legal-page .legal-updated {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: -0.8rem;
  margin-bottom: 1.5rem;
}

.save-btn.is-saved {
  background: rgba(11, 110, 82, 0.1);
  border-color: var(--brand-green);
  color: var(--brand-green);
}

/* Calendar provider dropdown */
.calendar-dropdown {
  position: relative;
}
.calendar-dropdown-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.4rem);
  z-index: 20;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.calendar-dropdown-menu a {
  display: block;
  padding: 0.55em 0.7em;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.calendar-dropdown-menu a:hover {
  background: var(--bg);
}

/* ---------------------------------------------------------------------
   Sticky condensed event header — appears once the full hero has
   scrolled out of view, so the event name stays visible while reading.
--------------------------------------------------------------------- */
.sticky-event-header {
  position: sticky;
  z-index: 45;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.sticky-event-header.hidden {
  display: none;
}
.sticky-event-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.6rem 1.25rem;
}

/* Left: event name (big), category right underneath it (small) */
.sticky-event-left {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}
.sticky-event-title {
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sticky-event-cat {
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Right: date, location, countdown, grouped together */
.sticky-event-right-group {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: none;
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}
.sticky-event-countdown {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.85rem;
}

@media (max-width: 860px) {
  .sticky-event-location {
    display: none;
  }
}
@media (max-width: 560px) {
  .sticky-event-date {
    display: none;
  }
  .sticky-event-title {
    font-size: 1.05rem;
  }
}

/* ---------------------------------------------------------------------
   Photo gallery carousel
--------------------------------------------------------------------- */
.gallery-carousel {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 1rem 0;
  margin: -0.5rem 0 0.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.gallery-carousel img {
  flex: 0 0 240px;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  scroll-snap-align: start;
}
@media (max-width: 560px) {
  .gallery-carousel {
    margin: 0 -1.25rem;
    padding: 0.75rem 1.25rem;
  }
  .gallery-carousel img {
    flex: 0 0 75vw;
    height: 200px;
  }
}
.gallery-thumb {
  width: 80px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.gallery-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: -0.5rem 0 1rem;
}
.gallery-preview span {
  width: 100%;
}

/* ---------------------------------------------------------------------
   Mobile-specific optimizations
--------------------------------------------------------------------- */
@media (max-width: 560px) {
  .hero {
    padding: 1.5rem 0 1.25rem;
  }
  .hero h1 {
    font-size: 1.6rem;
  }
  .hero-sub {
    font-size: 0.92rem;
    margin-bottom: 1.25rem;
  }
  .search-bar input {
    padding: 0.7em 1em;
    font-size: 0.95rem;
  }
  .cat-chip,
  .chip {
    padding: 0.6em 1.2em;
    min-height: 44px;
  }
  .reaction-btn {
    padding: 0.4em 0.8em;
    min-height: 38px;
  }
  .back-link {
    display: inline-block;
    padding: 0.4em 0;
    min-height: 44px;
  }
  .nav-links .btn {
    padding: 0.6em 1em;
    min-height: 44px;
  }
  .comment-form input,
  .comment-form textarea,
  .notify-form input,
  input,
  select,
  textarea,
  button {
    font-size: 16px !important;
  }
  .form-page {
    padding: 1.25rem 0 3rem;
  }
  .form-page .form-row {
    flex-direction: column;
    gap: 0;
  }
  .form-page .form-row label {
    min-width: unset;
  }
  .gps-row {
    flex-direction: column;
  }
  .gps-row label {
    min-width: unset;
  }
  .detail-cover {
    padding: 1.5rem 0 2rem;
  }
  .detail-cover h1 {
    font-size: 1.4rem;
  }
  .manage-actions .btn {
    flex: 1;
  }
}
@media (max-width: 380px) {
  .event-grid {
    grid-template-columns: 1fr;
  }
  .stat-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
}

/* ---------------------------------------------------------------------
   Admin pages
--------------------------------------------------------------------- */
.admin-page {
  padding: 2rem 0 4rem;
}
.admin-page h1 {
  margin-top: 0.75rem;
}
.admin-nav {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}

.admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.admin-bar-whoami {
  font-size: 0.85rem;
  color: var(--muted);
}
.admin-bar-right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.admin-logout-form {
  margin: 0;
}

.admin-team-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
.admin-team-member {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
}
.admin-team-member-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.admin-role-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2em 0.65em;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
}
.admin-role-owner {
  background: rgba(242, 183, 5, 0.15);
  border-color: var(--brand-gold, #f2b705);
  color: #8a6d00;
}
.admin-team-perm-form .notify-prefs-chips {
  justify-content: flex-start;
}
.admin-team-member-actions {
  margin-top: 0.75rem;
}
.admin-team-remove-form {
  margin-top: 0.6rem;
}

.admin-login-page {
  padding: 4rem 0;
  display: flex;
  justify-content: center;
}
.admin-login-panel {
  width: 100%;
  max-width: 380px;
}
.admin-login-panel h1 {
  margin-top: 0;
}
.admin-login-form {
  margin-top: 1.25rem;
}

/* Pending review list */
.pending-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}
.pending-item {
  display: flex;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease;
  text-decoration: none;
  color: inherit;
}
.pending-item:hover {
  box-shadow: var(--shadow-md);
}
.pending-item-cover {
  width: 120px;
  min-height: 100px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 0.5rem;
}
.pending-item-cover .cat-pill {
  position: static;
}
.pending-item-body {
  flex: 1;
  padding: 1rem 1rem 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.pending-item-body h3 {
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
}
.pending-item-desc {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.4;
  margin: 0.2rem 0;
}
.pending-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.3rem;
}
.pending-item-link {
  display: flex;
  gap: 1rem;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.pending-item-actions {
  flex-shrink: 0;
  width: 170px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  justify-content: center;
  padding: 1rem 1rem 1rem 0;
}
.pending-item-actions input {
  padding: 0.4em 0.6em;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  font-size: 0.8rem;
  background: var(--card);
  color: var(--ink);
}
.pending-mini-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pending-mini-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.pending-mini-item:last-child {
  border-bottom: none;
}
.pending-mini-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* Review page layout */
.review-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.5rem;
}
.review-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.review-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 90px;
}
.review-sidebar .sidebar-card {
  padding: 1.25rem;
}
.review-sidebar textarea {
  resize: vertical;
}

.admin-review-cover {
  padding: 1.5rem 0 2rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  background-size: cover;
  background-position: center;
}
.admin-metadata {
  margin-top: 1rem;
}
.meta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.meta-table td {
  padding: 0.4em 0.6em;
  border-bottom: 1px solid var(--border);
}
.meta-table td:first-child {
  font-weight: 600;
  color: var(--muted);
  width: 140px;
}

@media (max-width: 860px) {
  .review-layout {
    grid-template-columns: 1fr;
  }
  .review-sidebar {
    position: static;
  }
  .pending-item {
    flex-direction: column;
  }
  .pending-item-cover {
    width: 100%;
    height: 100px;
  }
  .pending-item-body {
    padding: 0 1rem 1rem;
  }
  .pending-item-link {
    flex-direction: column;
  }
  .pending-item-actions {
    width: 100%;
    padding: 0 1rem 1rem;
    flex-direction: row;
  }
}

/* ---------------------------------------------------------------------
   Safe area insets (notched phones)
--------------------------------------------------------------------- */
.site-nav {
  padding-top: env(safe-area-inset-top, 0);
}
.toast-container {
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0));
}
@media (max-width: 560px) {
  .mobile-menu {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0));
  }
}

/* =====================================================================
   🎉 FUN & ANIMATION
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Animated hero gradient — slow color drift
--------------------------------------------------------------------- */
.hero {
  animation: heroDrift 16s ease infinite alternate;
  background-size: 150% 150%;
}
@keyframes heroDrift {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 100% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
  75% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* ---------------------------------------------------------------------
   2. Floating particles in hero
--------------------------------------------------------------------- */
.hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.particle {
  position: absolute;
  font-size: 1.6rem;
  opacity: 0;
  animation: floatUp 10s ease-in-out infinite;
  will-change: transform, opacity;
}
.p1 {
  left: 5%;
  bottom: -10%;
  animation-delay: 0s;
  font-size: 1.4rem;
}
.p2 {
  left: 15%;
  bottom: -10%;
  animation-delay: 1.2s;
  font-size: 1.8rem;
}
.p3 {
  left: 30%;
  bottom: -10%;
  animation-delay: 2.5s;
  font-size: 1.3rem;
}
.p4 {
  left: 45%;
  bottom: -10%;
  animation-delay: 0.8s;
  font-size: 1.7rem;
}
.p5 {
  left: 60%;
  bottom: -10%;
  animation-delay: 3.2s;
  font-size: 1.5rem;
}
.p6 {
  left: 72%;
  bottom: -10%;
  animation-delay: 1.8s;
  font-size: 1.2rem;
}
.p7 {
  left: 85%;
  bottom: -10%;
  animation-delay: 2s;
  font-size: 1.6rem;
}
.p8 {
  left: 92%;
  bottom: -10%;
  animation-delay: 3.8s;
  font-size: 1.3rem;
}
@keyframes floatUp {
  0% {
    transform: translateY(0) scale(0.6) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  30% {
    opacity: 0.7;
    transform: translateY(-30vh) scale(1) rotate(8deg);
  }
  60% {
    opacity: 0.4;
    transform: translateY(-60vh) scale(0.9) rotate(-5deg);
  }
  90% {
    opacity: 0.15;
    transform: translateY(-85vh) scale(0.7) rotate(3deg);
  }
  100% {
    transform: translateY(-100vh) scale(0.5);
    opacity: 0;
  }
}

/* ---------------------------------------------------------------------
   3. Buzz counter
--------------------------------------------------------------------- */
.buzz-counter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 0.4rem 1rem 0.4rem 0.6rem;
  margin: -0.5rem auto 1.5rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  z-index: 1;
}
.buzz-number {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  display: inline-block;
  animation: buzzPop 0.4s ease;
}
.buzz-label strong {
  color: white;
}
.buzz-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes buzzPop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.7);
  }
}

/* ---------------------------------------------------------------------
   4+5. Scroll-reveal card entrance (JS adds .scroll-reveal + .visible)
--------------------------------------------------------------------- */
.event-card {
  opacity: 1; /* default visible — animation only when triggered */
}
.event-card.scroll-reveal {
  opacity: 0;
  animation: none;
}
.event-card.scroll-reveal.visible {
  animation: cardSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.06s + 0.15s);
}
@keyframes cardSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------------
   6. Pulsing countdown pill
--------------------------------------------------------------------- */
.countdown-pill {
  animation: countdownPulse 2.4s ease-in-out infinite;
}
@keyframes countdownPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}
/* Stop pulsing on hover so it doesn't fight the user's attention */
.event-card:hover .countdown-pill {
  animation-play-state: paused;
}

/* ---------------------------------------------------------------------
   7. Card hover: gradient shimmer
--------------------------------------------------------------------- */
.card-cover {
  overflow: hidden;
}
.card-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 30%,
    rgba(255, 255, 255, 0.12) 45%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.12) 55%,
    transparent 70%,
    transparent 100%
  );
  transform: translateX(-110%);
  transition: transform 0s;
  pointer-events: none;
}
.event-card:hover .card-cover::after {
  transform: translateX(110%);
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---------------------------------------------------------------------
   8. Button sparkle burst (JS adds .sparkle to trigger sparkles)
--------------------------------------------------------------------- */
.btn-sparkle {
  position: relative;
  overflow: visible;
}
.sparkle-particle {
  position: fixed;
  pointer-events: none;
  z-index: 999;
  font-size: 0.7rem;
  border-radius: 50%;
  animation: sparkleFly 0.7s ease-out forwards;
}
@keyframes sparkleFly {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx, 40px), var(--dy, -60px)) scale(0);
    opacity: 0;
  }
}

/* ---------------------------------------------------------------------
   9. Surprise Me button
--------------------------------------------------------------------- */
.surprise-btn {
  font-size: 1.2rem;
  padding: 0.5em 0.8em !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}
.surprise-btn:hover {
  transform: scale(1.12) rotate(-8deg) !important;
  box-shadow: 0 0 20px rgba(251, 192, 45, 0.4) !important;
}
.surprise-btn:active {
  transform: scale(0.9) rotate(8deg) !important;
}
@keyframes surpriseShake {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  15% {
    transform: translateX(-4px) rotate(-4deg);
  }
  30% {
    transform: translateX(4px) rotate(4deg);
  }
  45% {
    transform: translateX(-3px) rotate(-3deg);
  }
  60% {
    transform: translateX(3px) rotate(3deg);
  }
  75% {
    transform: translateX(-2px) rotate(-2deg);
  }
  90% {
    transform: translateX(2px) rotate(2deg);
  }
}

/* ---------------------------------------------------------------------
   10. Parallax hero
--------------------------------------------------------------------- */
.hero {
  transition: background-position-y 0.1s ease-out;
}

/* ---------------------------------------------------------------------
   11. "Most Fired Up" badge & card glow (fixed alignment, zero clipping)
--------------------------------------------------------------------- */
.event-card-wrapper {
  position: relative;
  display: block;
}
.fired-up-badge {
  /* BUG (customer-reported overlap): this used to be `position: absolute; top: 0.75rem;
     right: 0.75rem`, pinning it to the card's top-right corner — the exact same corner
     .price-pill occupies via its flex position in .card-cover-top, so the two stacked
     directly on top of each other (measured: same top, overlapping x-range). The badge
     actually belongs in .card-cover-bottom (see event-card.ejs), next to the countdown
     pill; static positioning lets it flow there naturally via that row's
     `justify-content: space-between`, instead of being absolutely yanked up to the top
     row. .view-list/.view-timeline below still force their own `position: absolute`
     (higher specificity, so they win regardless of source order) for their own compact
     row layouts — this only changes the default grid/shelf card. */
  position: static;
  background: linear-gradient(135deg, #fbc02d, #f59e0b);
  color: #16181d;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.28em 0.65em;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
  white-space: nowrap;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}
.event-card.fired-up {
  border-color: rgba(251, 192, 45, 0.6);
  box-shadow:
    0 4px 16px rgba(251, 192, 45, 0.15),
    var(--shadow-sm);
}
.event-card.fired-up:hover {
  border-color: var(--yellow);
  box-shadow:
    0 8px 24px rgba(251, 192, 45, 0.25),
    var(--shadow-md);
}

/* Card peek quick button */
.card-peek-btn {
  /* Same missing-color hazard as .theme-toggle — the eye icon uses currentColor and
     otherwise renders black-on-dark-card in dark mode. */
  color: var(--ink);
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  opacity: 0.85;
  transition: all 0.15s ease;
  font-size: 0.85rem;
}
.card-peek-btn:hover {
  opacity: 1;
  transform: scale(1.1);
  border-color: var(--ink);
}
.card-landmark {
  font-size: 0.8rem;
  color: #d97706;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

/* Smart 1-Tap Intent Matrix */
.smart-intent-matrix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.1rem 0 0.5rem;
}
.intent-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.45em 0.9em;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.intent-pill:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}
.intent-pill-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  box-shadow: var(--shadow-md);
}

/* Active filter summary bar */
.filter-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: rgba(27, 138, 90, 0.08);
  border: 1px solid rgba(27, 138, 90, 0.25);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1rem;
  margin: 1rem 0 0.5rem;
  font-size: 0.85rem;
}
.filter-reset-link {
  font-weight: 700;
  color: var(--red);
  text-decoration: underline;
}

/* Map Explorer */
.discovery-map-container {
  margin: 1rem 0 2rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.discovery-map {
  height: 420px;
  width: 100%;
  z-index: 1;
}

/* Quick Peek modal / slide-over */
.quick-peek-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
}
.quick-peek-drawer {
  width: 100%;
  max-width: 440px;
  height: 100%;
  background: var(--card);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  position: relative;
  padding: 1.5rem;
  animation: slideInRight 0.25s ease-out;
}
@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
.quick-peek-close {
  /* Same missing-color hazard as .theme-toggle — the "✕" glyph otherwise renders
     black-on-near-black in dark mode (used by both the homepage quick-peek drawer and
     /map's city drawer, which share this class). */
  color: var(--ink);
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  z-index: 10;
}
.peek-cover-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}

/* Venue Landmark Taxi Guidance */
.venue-landmark-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.taxi-landmark-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  background: rgba(251, 192, 45, 0.15);
  border: 1px solid rgba(251, 192, 45, 0.4);
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  margin-top: 0.5rem;
  font-size: 0.88rem;
}
.copy-landmark-btn {
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25em 0.65em;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.copy-landmark-btn:hover {
  background: var(--ink);
  color: var(--bg);
}
.map-action-btns {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* WhatsApp Group Invite button & Door Pass */
.btn-whatsapp-group {
  background: #128c7e;
  color: white;
  font-weight: 700;
}
.btn-whatsapp-group:hover {
  background: #075e54;
  color: white;
}
.my-checkin-pass-badge {
  background: rgba(27, 138, 90, 0.12);
  border: 1.5px dashed var(--green);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.6rem 0;
}
.pass-code-val {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--green-dark);
}

/* Camera Scanner Container */
.scanner-container {
  position: relative;
  max-width: 320px;
  margin: 1rem auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
}
.qr-video {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}
.scanner-laser {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: scanLine 2s linear infinite;
}
@keyframes scanLine {
  0% {
    top: 10%;
  }
  50% {
    top: 90%;
  }
  100% {
    top: 10%;
  }
}

/* ---------------------------------------------------------------------
   12. Dark mode
--------------------------------------------------------------------- */
body.dark-mode {
  --bg: #0c1210;
  --bg-alt: #121a17;
  --card: #15201c;
  --ink: #f2f0eb;
  --muted: #8e9b95;
  --muted-light: #6e7a75;
  --border: #202d28;
  --green: #108a67;
  --green-dark: #0b6e52;
  --green-hover: #149c75;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 24px rgba(16, 138, 103, 0.3);
}
body.dark-mode .hero {
  background: linear-gradient(120deg, #0a0c10 0%, #14181c 45%, #0f2a1e 100%);
}
body.dark-mode .site-nav {
  background: rgba(15, 17, 21, 0.92);
}
body.dark-mode .search-bar input {
  background: #1a1d24;
  color: var(--ink);
}
body.dark-mode .cat-chip {
  background: #1a1d24;
  border-color: #2a2d35;
}
body.dark-mode .cat-chip:hover {
  border-color: var(--red);
}
body.dark-mode .cat-chip-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
body.dark-mode .btn-secondary {
  background: #1a1d24;
  color: var(--ink);
  border-color: #2a2d35;
}
body.dark-mode .btn-secondary:hover {
  border-color: var(--ink);
}
body.dark-mode .organizer-cta-inner {
  background: linear-gradient(120deg, #0a0c10, #0f2a1e);
}
body.dark-mode .range-chip {
  background: #1a1d24;
  border-color: #2a2d35;
}
body.dark-mode .range-chip:hover {
  border-color: var(--ink);
}
body.dark-mode .range-chip-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
body.dark-mode .view-toggle {
  background: #1a1d24;
  border-color: #2a2d35;
}
body.dark-mode .view-btn {
  color: var(--muted);
}
body.dark-mode .view-btn:hover {
  background: var(--card);
  color: var(--ink);
}
body.dark-mode .view-btn-active {
  background: var(--card) !important;
  color: var(--ink) !important;
}
body.dark-mode .organizer-cta {
  border-color: #2a2d35;
}
body.dark-mode .brand-word strong {
  color: var(--brand-gold);
}
body.dark-mode .brand-mark .mark-light {
  display: none;
}
body.dark-mode .brand-mark .mark-dark {
  display: block;
}
body.dark-mode .admin-role-owner {
  background: rgba(242, 183, 5, 0.18);
  color: var(--brand-gold);
}

/* Explicit light mode — forces light even if the system prefers dark (used only
   when the user has manually picked light via the toggle). */
.light-mode {
  --bg: #fafaf6;
  --card: #ffffff;
  --ink: #16181d;
  --muted: #6b7280;
  --border: #ece9e2;
  --shadow-sm: 0 1px 3px rgba(20, 15, 10, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 15, 10, 0.08);
  --shadow-lg: 0 16px 40px rgba(20, 15, 10, 0.14);
}

/* Follow the OS/browser dark-mode setting automatically when the user hasn't
   made an explicit choice (i.e. no .light-mode class forcing light instead). */
@media (prefers-color-scheme: dark) {
  body:not(.light-mode) {
    --bg: #0f1115;
    --card: #1a1d24;
    --ink: #e8e6e3;
    --muted: #8b909a;
    --border: #2a2d35;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  }
  body:not(.light-mode) .hero {
    background: linear-gradient(120deg, #0a0c10 0%, #14181c 45%, #0f2a1e 100%);
  }
  body:not(.light-mode) .site-nav {
    background: rgba(15, 17, 21, 0.92);
  }
  body:not(.light-mode) .search-bar input {
    background: #1a1d24;
    color: var(--ink);
  }
  body:not(.light-mode) .cat-chip {
    background: #1a1d24;
    border-color: #2a2d35;
  }
  body:not(.light-mode) .cat-chip:hover {
    border-color: var(--red);
  }
  body:not(.light-mode) .cat-chip-active {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
  body:not(.light-mode) .btn-secondary {
    background: #1a1d24;
    color: var(--ink);
    border-color: #2a2d35;
  }
  body:not(.light-mode) .btn-secondary:hover {
    border-color: var(--ink);
  }
  body:not(.light-mode) .organizer-cta-inner {
    background: linear-gradient(120deg, #0a0c10, #0f2a1e);
  }
  body:not(.light-mode) .range-chip {
    background: #1a1d24;
    border-color: #2a2d35;
  }
  body:not(.light-mode) .range-chip:hover {
    border-color: var(--ink);
  }
  body:not(.light-mode) .range-chip-active {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
  body:not(.light-mode) .view-toggle {
    background: #1a1d24;
    border-color: #2a2d35;
  }
  body:not(.light-mode) .view-btn {
    color: var(--muted);
  }
  body:not(.light-mode) .view-btn:hover {
    background: var(--card);
    color: var(--ink);
  }
  body:not(.light-mode) .view-btn-active {
    background: var(--card) !important;
    color: var(--ink) !important;
  }
  body:not(.light-mode) .brand-word strong {
    color: var(--brand-gold);
  }
  body:not(.light-mode) .brand-mark .mark-light {
    display: none;
  }
  body:not(.light-mode) .brand-mark .mark-dark {
    display: block;
  }
  body:not(.light-mode) .organizer-cta {
    border-color: #2a2d35;
  }
  body:not(.light-mode) .admin-role-owner {
    background: rgba(242, 183, 5, 0.18);
    color: var(--brand-gold);
  }
}

/* Theme toggle button */
.theme-toggle {
  /* WCAG 2.2 AA audit: <button> elements don't inherit body's `color` (UA default is
     buttontext, effectively black) — without this, the icon (drawn with stroke:
     currentColor) rendered pure black on the dark-mode nav background at ~1.1:1
     contrast, i.e. invisible. Same root cause fixed below for .card-peek-btn and
     .quick-peek-close. */
  color: var(--ink);
  background: none;
  border: 1.5px solid var(--border);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.25rem 0.45rem;
  border-radius: 999px;
  transition: all 0.2s ease;
  line-height: 1;
}
.theme-toggle:hover {
  border-color: var(--ink);
  background: var(--card);
}

/* Language switcher */
.lang-switch {
  display: flex;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.lang-switch-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.6rem;
  color: var(--muted);
  text-decoration: none;
  line-height: 1;
}
.lang-switch-btn + .lang-switch-btn {
  border-left: 1.5px solid var(--border);
}
.lang-switch-btn.active {
  background: var(--red);
  color: #fff;
}
.lang-switch-btn:hover:not(.active) {
  background: var(--card);
  color: var(--ink);
}
.lang-switch-mobile {
  align-self: flex-start;
  margin: 0.3rem 0;
}

/* Notification preferences — a symmetric, centered composition rather than a
   standard left-aligned form: every element shares the same central axis. */
.notify-prefs-page h1,
.notify-prefs-page > p.hero-sub {
  text-align: center;
}
.notify-prefs-form {
  max-width: 700px;
  margin: 0 auto;
}
.notify-prefs-email {
  max-width: 380px;
  margin: 0 auto 2rem;
  text-align: center;
}
.notify-prefs-email label {
  display: block;
  margin-bottom: 0.5rem;
}
.notify-prefs-email input {
  width: 100%;
  text-align: center;
}
.notify-prefs-submit {
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
}
.notify-prefs-submit .btn {
  min-width: 280px;
}
.notify-prefs-info {
  max-width: 560px;
  margin: 1.5rem auto 0;
  padding: 1rem;
  background: var(--card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.notify-prefs-info p {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

/* Checkbox chips for notification preferences — same look as .cat-chip on Discover */
.notify-prefs-section {
  margin-bottom: 1.5rem;
  text-align: center;
}
.notify-prefs-section > label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 0.75rem;
}
.notify-prefs-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.chip-check {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.chip-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip-check span {
  display: inline-block;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  background: var(--card);
  border: 1.5px solid var(--border);
  color: var(--ink);
  white-space: nowrap;
  transition: all 0.15s ease;
}
.chip-check input:checked + span {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.chip-check:hover span {
  border-color: var(--red);
}

/* ---------------------------------------------------------------------
   Respect reduced-motion preference — disables the decorative parallax,
   floating particles, sparkle bursts, and looping pulses for anyone who's
   asked their OS for less motion. Functionality is unaffected; only the
   animated transitions are removed or collapsed to be effectively instant.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   Reviews
--------------------------------------------------------------------- */
.review-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.review-form input,
.review-form textarea {
  padding: 0.7em 0.9em;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.92rem;
  resize: vertical;
  background: var(--card);
  color: var(--ink);
}
.review-form input:focus,
.review-form textarea:focus {
  outline: none;
  border-color: var(--red);
}
.review-form .btn {
  align-self: flex-end;
}
.star-picker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.star-picker-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
.star-picker-interactive {
  display: flex;
  gap: 0.15rem;
}
.star-picker-interactive .star-btn {
  font-size: 1.5rem;
  cursor: pointer;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}
.star-picker-interactive .star-btn:hover {
  transform: scale(1.2);
}
.review-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.review {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.review-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.review-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--yellow));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.review-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.review-meta strong {
  font-size: 0.9rem;
}
.review-stars {
  display: inline-flex;
  gap: 0.05rem;
}
.star {
  font-size: 1rem;
  color: var(--border);
}
.star-on {
  color: var(--yellow);
}
.review-summary-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 1rem;
}
.review-summary-stars .star {
  font-size: 1.1rem;
}
.review-time {
  font-size: 0.78rem;
}
.review-text {
  margin: 0.2rem 0 0.4rem;
  font-size: 0.93rem;
  line-height: 1.55;
}
.experience-photo {
  display: block;
  max-width: 280px;
  width: 100%;
  border-radius: var(--radius-sm);
  margin: 0.5rem 0;
}
.experience-photo-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.experience-photo-label input[type='file'] {
  font-size: 0.85rem;
  color: var(--ink);
}
.empty-reviews {
  color: var(--muted);
  font-size: 0.92rem;
  padding: 1rem 0;
  text-align: center;
}

/* ---------------------------------------------------------------------
   Footer: platform review disclosure
--------------------------------------------------------------------- */
.platform-review-disclosure {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.platform-review-trigger {
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.platform-review-trigger::-webkit-details-marker {
  display: none;
}
.platform-review-trigger:hover {
  color: var(--red);
}
.platform-review-disclosure[open] .platform-review-trigger span[aria-hidden] {
  display: inline-block;
  transform: rotate(180deg);
}
.platform-review-panel {
  max-width: 560px;
  margin: 1.25rem auto 0;
  text-align: left;
}

/* ---------------------------------------------------------------------
   Admin: messages page
--------------------------------------------------------------------- */
.admin-page h1 {
  font-size: 1.5rem;
}

/* ---------------------------------------------------------------------
   Reduced motion
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-particles {
    display: none;
  }
}

/* BL-015 — screen-reader-only text for the data-mode toggle (WCAG 2.2 AA: the control
   must be labelled for people who can't see the icon). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* BL-011 — the verified organizer badge.
   Written against the existing tokens (--green, --border, --card) rather than fresh
   colours, and given an explicit dark-mode rule, because the customer's feedback on the
   last redesign was about the look: new UI should read as part of this theme, not as
   something bolted onto it. */
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.28em 0.7em;
  border-radius: 999px;
  background: rgba(27, 138, 90, 0.1);
  color: var(--green-dark);
  border: 1px solid rgba(27, 138, 90, 0.25);
  white-space: nowrap;
  cursor: help;
}
.verified-badge-pending {
  background: rgba(107, 114, 128, 0.1);
  color: var(--muted);
  border-color: rgba(107, 114, 128, 0.25);
}
body.dark-mode .verified-badge {
  background: rgba(27, 138, 90, 0.18);
  color: #7fd6a9;
  border-color: rgba(127, 214, 169, 0.35);
}
body.dark-mode .verified-badge-pending {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted-light);
  border-color: rgba(255, 255, 255, 0.18);
}

/* BL-014 / BL-012 — the freshness stamp and completeness hints sit inside existing
   sidebar and panel components; they need no new colour of their own. */
.freshness-stamp {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--muted);
}

/* BL-012 — the "not confirmed recently" notice.
   Deliberately NOT the red cancelled/past banner it originally borrowed. Reusing that
   gradient made a soft caution look identical to a cancellation, which contradicts the
   rule this feature is built on: an unconfirmed event is marked, never condemned — the
   organizer may simply be offline and the event may well be going ahead. */
.unconfirmed-banner {
  background: rgba(251, 192, 45, 0.16);
  color: #7a5c00;
  border-top: 1px solid rgba(251, 192, 45, 0.5);
  border-bottom: 1px solid rgba(251, 192, 45, 0.5);
  text-align: center;
  padding: 0.6rem 1rem;
  font-weight: 600;
  font-size: 0.88rem;
}
.unconfirmed-banner span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 70ch;
}
body.dark-mode .unconfirmed-banner {
  background: rgba(251, 192, 45, 0.14);
  color: #f6d488;
}

/* BL-014 — alerts that contain real content, not just one line of text.
   There is a global `p { color: var(--ink) }`, so in dark mode a paragraph inside an
   alert rendered near-white on the alert's light background — invisible. Every alert
   until now held a single text node, so nothing had hit it; the completeness gate is the
   first alert with paragraphs, a list and links inside it. Content inherits the alert's
   own colour. */
.alert p,
.alert li,
.alert strong,
.alert a,
.alert-success p,
.alert-success li,
.alert-success strong,
.alert-success a {
  color: inherit;
}
.alert a,
.alert-success a {
  text-decoration: underline;
}
.alert ul,
.alert-success ul {
  margin-bottom: 0;
}

/* ==========================================================================
   Flagship Design System — Deeper Cameroon Green (#0B6E52), Warm Paper & Gold
   ========================================================================== */

/* 🌟 1. Flagship Cameroon Forest Green Hero */
.flagship-hero {
  padding: 3.25rem 1rem 2.75rem !important;
  text-align: left;
  position: relative;
  background: linear-gradient(135deg, #074030 0%, #0b6e52 100%) !important;
  color: #ffffff !important;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-texture-overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.65;
  pointer-events: none;
}

.flagship-hero .hero-inner {
  max-width: 900px !important;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  /* passport-homepage-spec.md §2: "left-aligned text inside a centered max-width
     column." .hero-inner's base rule (legacy hero, still used by other pages) sets
     text-align: center, which — since it's an explicit property on this exact element,
     not just something .flagship-hero's own text-align: left could out-cascade by
     inheritance — silently overrode it here too, centering the picker's step labels,
     chip/tile row legends, and .hero-sub. This re-lefts everything inside the column;
     the column itself stays horizontally centered via the margin: 0 auto above. */
  text-align: left;
}

.flagship-hero .hero-brand {
  margin-bottom: 0.5rem;
}

.flagship-hero .hero-tagline {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
  color: #f5a623 !important;
  text-transform: uppercase !important;
  display: inline-block;
}

.flagship-hero .hero-title {
  font-size: clamp(2.2rem, 4.5vw, 3.3rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.14 !important;
  margin: 0 0 0.75rem !important;
  color: #ffffff !important;
  max-width: 780px;
}

.highlight-gold {
  color: #f5a623 !important;
  text-shadow: 0 0 24px rgba(245, 166, 35, 0.35);
}

.flagship-hero .hero-sub {
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  margin: 0 0 1.75rem !important;
  max-width: 680px;
  /* At 680px with default wrapping this broke into an awkward, ragged two-line wrap.
     text-wrap: balance evens the line lengths; unsupported browsers just keep the
     default wrap (no functional loss). */
  text-wrap: balance;
}

/* 🔍 2. World-Class Main Search & Location Capsule */
.main-search-capsule {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 820px !important;
  min-height: 58px !important;
  margin: 0 0 1rem !important;
  background: #ffffff !important;
  border-radius: 999px !important;
  box-shadow:
    0 16px 40px -6px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  padding: 0.35rem 0.45rem !important;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease !important;
}

body.dark-mode .main-search-capsule {
  background: #15201c !important;
  border-color: #202d28 !important;
  box-shadow: 0 16px 44px -6px rgba(0, 0, 0, 0.65) !important;
}

.main-search-capsule:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 20px 48px -4px rgba(11, 110, 82, 0.35) !important;
}

.search-capsule-input-col {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 180px !important;
  padding: 0 0.95rem !important;
  gap: 0.65rem !important;
}

.search-capsule-icon {
  color: var(--green, #0b6e52) !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0;
}

.search-capsule-input-col input {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  /* Token instead of a hardcoded literal duplicated per-theme below — this already
     matched --ink's light/dark values exactly, so the explicit dark-mode override is
     now redundant and removed. */
  color: var(--ink) !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0.5rem 0 !important;
  margin: 0 !important;
}

.search-capsule-divider {
  width: 1px !important;
  height: 32px !important;
  background: rgba(0, 0, 0, 0.12) !important;
  flex-shrink: 0 !important;
}

body.dark-mode .search-capsule-divider {
  background: rgba(255, 255, 255, 0.16) !important;
}

.search-capsule-city-col {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 180px !important;
  padding: 0 0.95rem !important;
  gap: 0.5rem !important;
}

.search-capsule-select {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0.5rem 0 !important;
}

.search-capsule-select option {
  background: var(--card) !important;
  color: var(--ink) !important;
}

.search-capsule-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  flex-shrink: 0 !important;
}

.search-capsule-submit-btn {
  height: 46px !important;
  padding: 0 1.5rem !important;
  border-radius: 999px !important;
  background: #0b6e52 !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition:
    transform 0.15s ease,
    background 0.15s ease !important;
  box-shadow: 0 4px 14px rgba(11, 110, 82, 0.35) !important;
}

.search-capsule-submit-btn:hover {
  background: #084d39 !important;
  transform: scale(1.02) !important;
}

.search-capsule-surprise-btn {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 50% !important;
  background: var(--bg) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.search-capsule-surprise-btn:hover {
  background: rgba(245, 166, 35, 0.18) !important;
  border-color: #f5a623 !important;
  transform: rotate(15deg) scale(1.05) !important;
}

/* ⚡ 3. Quick Suggestions */
.hero-quick-suggestions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0.85rem 0 2rem;
}

.suggestions-label {
  opacity: 0.75;
  font-weight: 600;
}

.suggestion-link {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color 0.15s ease;
}

.suggestion-link:hover {
  color: #f5a623;
}

.suggestion-dot {
  opacity: 0.4;
}

/* 🛡️ 4. 3 Trust & Truth Feature Pillars */
.hero-trust-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.trust-pillar {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.trust-pillar-icon {
  color: #f5a623;
  margin-top: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(245, 166, 35, 0.16);
}

.trust-pillar-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.82rem;
  line-height: 1.4;
}

.trust-pillar-text strong {
  /* Was a hardcoded near-white left over from when these pillars sat on the dark hero
     (ADR-0009 §7 relocated them into the light .visa-pillars section on the page body).
     Token-based so it's correct in both themes and doesn't rely on the .visa-pillars
     override below outranking this rule by specificity — the only place this class is
     used today is inside .visa-pillars, so fixing it here at the source removes the
     hardcoded-literal footgun instead of just patching it downstream. */
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
}

.trust-pillar-text span {
  color: var(--muted);
}

/* ⚡ 1-Tap Intent Matrix */
.smart-intent-matrix {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.4rem 0 0;
}

.intent-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.intent-pill:hover,
.intent-pill-active {
  background: #0b6e52;
  border-color: #0b6e52;
  color: #ffffff;
  transform: translateY(-1px);
}

/* 🎟️ 3. Pristine Event Pass Cards */
.event-card.pass-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--radius-md, 14px);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  position: relative;
}

.event-card.pass-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -6px rgba(0, 0, 0, 0.12);
  border-color: var(--primary);
}

.card-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Cover Image / Gradient Canvas */
.pass-card .card-cover {
  height: 140px;
  min-height: 140px;
  position: relative;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-size: cover;
  background-position: center;
}

.card-cover-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.card-cover-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Wraps rather than overlapping/overflowing if the countdown pill + fired-up badge
     (see .fired-up-badge above) can't both fit on one line at very narrow widths. */
  flex-wrap: wrap;
  gap: 0.5rem;
  row-gap: 0.35rem;
}

.pass-card .cat-pill {
  position: static !important;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.pass-card .price-pill {
  position: static !important;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.price-pill.price-free {
  background: rgba(22, 163, 74, 0.95);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.price-pill.price-paid {
  background: rgba(0, 0, 0, 0.75);
  color: #fcd34d;
  border: 1px solid rgba(252, 211, 77, 0.4);
}

.pass-card .countdown-pill {
  position: static !important;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ✂️ Die-Cut Perforation Notch */
.card-perforation {
  position: relative;
  height: 1px;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.perf-line {
  flex: 1;
  border-top: 1px dashed var(--border);
}

.perf-notch {
  width: 14px;
  height: 14px;
  background: var(--bg);
  border-radius: 50%;
  position: absolute;
  top: -7px;
  box-shadow: inset 0 0 0 1px var(--border);
  z-index: 3;
}

.perf-notch-left {
  left: -7px;
}

.perf-notch-right {
  right: -7px;
}

/* Card Body */
.pass-card .card-body {
  padding: 1rem 1.15rem;
  background: var(--card);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pass-card .card-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 0.6rem;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pass-card .card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.83rem;
  color: var(--muted);
  margin-bottom: 0.85rem;
}

.meta-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta-icon {
  color: var(--primary);
  display: flex;
  align-items: center;
}

.pass-card .card-landmark {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: #0d9488;
  background: rgba(13, 148, 136, 0.08);
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(13, 148, 136, 0.2);
  margin-top: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark-mode .pass-card .card-landmark {
  color: #5eead4;
  background: rgba(13, 148, 136, 0.16);
  border-color: rgba(94, 234, 212, 0.25);
}

.landmark-icon {
  display: flex;
  align-items: center;
}

.landmark-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pass-card .card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--border);
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: auto;
}

.card-stats {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.stat-fire {
  color: #ea580c;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.stat-chat {
  color: #16a34a;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.card-cta {
  color: var(--primary);
  display: flex;
  align-items: center;
  transition: transform 0.2s ease;
}

.pass-card:hover .card-cta {
  transform: translateX(3px);
}

/* 📱 Responsive Mobile Adjustments */
@media (max-width: 680px) {
  .compact-hero .hero-title {
    font-size: 1.8rem;
  }
  .main-search-capsule {
    flex-direction: column !important;
    border-radius: 20px !important;
    padding: 0.65rem 0.85rem !important;
    gap: 0.5rem !important;
  }
  .search-capsule-input-col {
    width: 100% !important;
    padding: 0.25rem 0 !important;
  }
  .search-capsule-divider {
    display: none !important;
  }
  .search-capsule-city-col {
    width: 100% !important;
    flex: 1 1 100% !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 0.4rem 0 !important;
  }
  body.dark-mode .search-capsule-city-col {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
  }
  .search-capsule-actions {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 0 !important;
  }
  .search-capsule-submit-btn {
    flex: 1 !important;
    justify-content: center !important;
  }
}

/* ---------------------------------------------------------------------
   13. The Passport homepage (ADR-0009) — guided picker, passport strip,
   spotlight card, curated shelves, and the restyled trust pillars.
--------------------------------------------------------------------- */

/* --- Guided picker (§2) --- */
.guided-picker-wrap {
  max-width: 760px;
  margin: 0 auto;
}
.guided-picker {
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem 1.5rem 1.1rem;
  color: var(--ink);
}
body.dark-mode .guided-picker {
  background: rgba(21, 32, 28, 0.97);
}
.picker-step {
  border: none;
  padding: 0;
  margin: 0 0 0.8rem;
}
.picker-step-label {
  display: block;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.45rem;
}
.picker-chip-row,
.picker-tile-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.picker-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.picker-chip {
  position: relative;
  display: inline-flex;
}
.picker-chip-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.picker-check {
  display: none;
  color: currentColor;
}
.picker-input:checked + .picker-chip-label {
  background: var(--green-dark);
  color: #fff;
  border-color: var(--green-dark);
}
.picker-input:checked + .picker-chip-label .picker-check {
  display: inline-flex;
}
.picker-input:focus-visible + .picker-chip-label,
.picker-input:focus-visible + .picker-tile-label,
.picker-input:focus-visible + .range-chip {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}
/* "More cities"/"More categories" (§2 redesign) — a native <details>/<summary> disclosure,
   not a JS-driven button, so a no-JS user can still reach and tick the full multi-select
   list (see guided-picker.ejs's comment on why). Styled to match the chip family; the
   default disclosure triangle is stripped in favour of the explicit caret span so its
   rotation (below) is the only visual "open" cue needed beyond the label text swap. */
.picker-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: none;
  border: 2px dashed var(--border);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  list-style: none;
}
.picker-more-btn::-webkit-details-marker {
  display: none;
}
.picker-more-btn:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}
.picker-more-caret {
  display: inline-block;
  transition: transform 0.15s ease;
  font-size: 0.75em;
}
.picker-more[open] .picker-more-caret {
  transform: rotate(180deg);
}
.picker-more {
  margin-top: 0.4rem;
}
/* Mode switch (§2/§3): while the multi-select panel is open, the short-list chips for
   that same step disappear instead of both being shown at once. Pure CSS (:has()) so this
   holds even with JavaScript disabled — the <details> element's `open` attribute is the
   single source of truth for which view is showing. */
.picker-step:has(#picker-city-more[open]) #picker-city-chips,
.picker-step:has(#picker-city-more[open]) #picker-step2-hint,
.picker-step:has(#picker-cat-more[open]) #picker-cat-tiles {
  display: none;
}
.picker-more-panel {
  margin-top: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
}
.picker-panel-search-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  margin-bottom: 0.6rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
}
.picker-panel-search-input:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 1px;
}
/* Capped and internally scrollable so a 47-option city list (or, defensively, any future
   long category list) can never push the "Search instead" control below the fold — see
   the hard constraint in guided-picker.ejs's header comment. */
.picker-panel-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 224px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.2rem 0.2rem 0.2rem 0;
}
.picker-chip-hidden {
  display: none !important;
}
.picker-panel-empty {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.picker-panel-actions {
  margin-top: 0.65rem;
}
.picker-hint {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
}
.picker-hint a {
  color: var(--green);
  font-weight: 700;
}
.picker-tile {
  display: inline-flex;
}
.picker-tile-label,
.picker-tile-surprise {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 76px;
  min-height: 62px;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-md);
  background: var(--bg-alt);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.8rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  position: relative;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.picker-tile-label .picker-check {
  position: absolute;
  top: 6px;
  right: 6px;
}
.picker-input:checked + .picker-tile-label {
  background: var(--green-dark);
  color: #fff;
  border-color: var(--green-dark);
}
.picker-tile-surprise {
  background: #fdeecb;
  color: var(--gold-ink);
}
body.dark-mode .picker-tile-surprise {
  background: rgba(245, 166, 35, 0.16);
  color: var(--yellow);
}
.picker-tile-surprise:hover {
  border-color: var(--yellow);
}
/* Price step — visually lighter than Step 1/2 (no numbered-step-sized gap below it, since
   it's the last step before the actions row) to keep the picker's default/collapsed
   height inside the compact hero's 1366x650 budget. */
.picker-step-price {
  margin-bottom: 0.4rem;
}
.picker-actions {
  margin-top: 0.25rem;
}
.picker-fallback-submit {
  min-height: 44px;
}
.js-enabled .picker-fallback-submit {
  opacity: 0.001;
  position: absolute;
  pointer-events: none;
}
.js-enabled .picker-fallback-submit:focus-visible {
  opacity: 1;
  position: static;
  pointer-events: auto;
}
.picker-search-toggle {
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.88rem;
  margin: 0.6rem 0 0;
}
.picker-search-toggle-btn {
  background: none;
  border: none;
  padding: 0;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font: inherit;
  min-height: 44px;
}
.search-override {
  max-width: 820px;
  margin: 0 auto;
}
.picker-back-link {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font: inherit;
  padding: 0;
  margin-bottom: 0.6rem;
  min-height: 44px;
}

@media (max-width: 860px) {
  .picker-chip-label,
  .picker-more-btn {
    font-size: 0.85rem;
    padding: 0.5rem 0.9rem;
  }
}
@media (max-width: 560px) {
  .picker-chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.2rem;
  }
  .picker-chip-row::-webkit-scrollbar {
    display: none;
  }
  .picker-tile-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .picker-tile-label,
  .picker-tile-surprise {
    min-width: 0;
  }
  .picker-panel-grid {
    max-height: 200px;
  }
}
@media (max-width: 380px) {
  .guided-picker {
    padding: 1.1rem 1rem 0.9rem;
  }
}

/* --- Passport strip (§3) --- */
.passport-strip {
  margin: 1.75rem 0;
  padding: 1rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.passport-strip-label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex-shrink: 0;
}
.passport-strip-count {
  font-size: 0.8rem;
  color: var(--muted);
}
.passport-strip-scroller-wrap {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
}
.passport-strip-list {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
}
.passport-strip-list::-webkit-scrollbar {
  display: none;
}
.passport-stamp {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px dashed rgba(11, 110, 82, 0.55);
  box-shadow:
    0 0 0 3px var(--bg),
    0 0 0 5px rgba(11, 110, 82, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  text-align: center;
  transform: rotate(var(--rot, 0deg));
  color: var(--green);
}
.passport-stamp-city {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
  padding: 0 0.2rem;
}
.passport-stamp-check {
  display: flex;
}
.passport-stamp-more,
.passport-stamp-next {
  border-style: dashed;
  border-color: var(--border);
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 700;
  box-shadow: none;
  transform: none;
  padding: 0 0.3rem;
}
.passport-stamp-new {
  animation: passportStampPop 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes passportStampPop {
  0% {
    transform: rotate(var(--rot, 0deg)) scale(0.7);
    opacity: 0;
  }
  100% {
    transform: rotate(var(--rot, 0deg)) scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .passport-stamp-new {
    animation: none;
  }
}
.passport-strip-signin {
  flex-basis: 100%;
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.passport-nudge-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1;
  min-width: 24px;
  min-height: 24px;
}
@media (max-width: 760px) {
  .passport-strip {
    flex-direction: column;
    align-items: flex-start;
  }
  .passport-strip-scroller-wrap {
    width: 100%;
  }
}
@media (max-width: 560px) {
  .passport-stamp {
    width: 52px;
    height: 52px;
  }
}

/* --- Editor's Pick spotlight (§4) --- */
.spotlight-card {
  display: flex;
  flex-direction: column;
  margin: 1.75rem 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  background: var(--card);
}
.spotlight-photo {
  position: relative;
  min-height: 180px;
  background-size: cover;
  background-position: center;
}
.spotlight-ribbon {
  position: absolute;
  top: 0.9rem;
  right: 0;
  background: var(--yellow);
  /* Fixed dark ink, not var(--ink): --yellow doesn't change between themes, but --ink
     flips to near-white in dark mode, which dropped this to ~1.8:1 on the gold ribbon.
     Matches the existing self-paired convention on .fired-up-badge (same yellow family). */
  color: #16181d;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 0.4rem 0.9rem;
  border-bottom-left-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.spotlight-content {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.spotlight-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}
.spotlight-title {
  font-size: 1.5rem;
  margin: 0;
  line-height: 1.25;
}
.spotlight-meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 0.4rem;
}
.spotlight-cta {
  align-self: flex-start;
}
@media (min-width: 760px) {
  .spotlight-card {
    flex-direction: row;
    min-height: 230px;
  }
  .spotlight-photo {
    flex: 0 0 50%;
  }
  .spotlight-content {
    flex: 1;
    justify-content: center;
    padding: 2rem;
  }
}

/* --- Curated shelves (§5) --- */
.event-shelf {
  margin: 2rem 0;
}
.shelf-head {
  align-items: baseline;
  justify-content: space-between;
}
.shelf-see-all {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--green);
  white-space: nowrap;
}
.shelf-scroller-wrap {
  position: relative;
}
.shelf-scroller {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0.35rem 0.1rem 0.85rem;
}
.shelf-scroller::-webkit-scrollbar {
  display: none;
}
.shelf-scroller:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}
.shelf-card {
  flex: 0 0 220px;
}
.shelf-card .event-card {
  height: 100%;
}
@media (max-width: 860px) {
  .shelf-card {
    flex-basis: 200px;
  }
}
@media (max-width: 560px) {
  .shelf-card {
    flex-basis: 85%;
  }
  .shelf-scroller-wrap .scroller-arrow {
    display: none;
  }
}

/* --- Trust pillars restyled as "visa page" stamps (§7) --- */
.visa-pillars {
  margin: 2.5rem 0;
}
.visa-pillars .hero-trust-pillars {
  border-top: none;
  padding-top: 0;
}
.visa-pillars .trust-pillar {
  background: var(--card);
  border: 2px dashed rgba(11, 110, 82, 0.35);
  border-radius: var(--radius-md);
  padding: 1.1rem;
}
.visa-pillars .trust-pillar-icon {
  background: rgba(245, 166, 35, 0.14);
  color: var(--gold-ink);
}
body.dark-mode .visa-pillars .trust-pillar-icon {
  color: var(--yellow);
}
/* .trust-pillar-text strong/span color now lives on the base rule above the token fix
   made it redundant here — removed rather than left as a duplicate that could drift. */
@media (max-width: 760px) {
  .visa-pillars .hero-trust-pillars {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   14. Events map page (ADR-0010) — bee/hive markers, legend, filter bar,
   Map/List mode toggle, and the server-rendered accessible list.
--------------------------------------------------------------------- */
.map-page {
  padding-top: 1.5rem;
}
.map-intro h1 {
  font-size: 1.7rem;
  margin-bottom: 0.4rem;
}
.map-hero-sub {
  color: var(--muted);
  max-width: 640px;
}
.map-filter-bar {
  margin: 1.25rem 0;
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.map-filter-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.map-city-filter select {
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.88rem;
}
.map-back-to-list {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px dashed var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.map-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.map-legend-swatch {
  display: inline-flex;
  color: var(--green);
}
.map-legend-hive {
  color: var(--muted);
}
.map-legend-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--green);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 44px;
}

.mode-toggle {
  display: inline-flex;
  gap: 0.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.2rem;
  margin-bottom: 1rem;
}
.mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.5rem 0.9rem;
  min-height: 44px;
  border-radius: 8px;
  color: var(--muted);
  transition: all 0.15s ease;
}
.mode-btn:hover {
  color: var(--ink);
  background: var(--card);
}
.mode-btn[aria-pressed='true'] {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.map-mode-panel {
  position: relative;
}
.events-map-canvas {
  height: 60vh;
  min-height: 360px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  z-index: 1;
}
.map-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--bg);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-weight: 600;
}
.map-empty-overlay {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 1rem 1.25rem;
  text-align: center;
}
@media (max-width: 860px) {
  .events-map-canvas {
    height: 50vh;
  }
}
@media (max-width: 560px) {
  .events-map-canvas {
    height: 45vh;
    min-height: 280px;
  }
}

/* --- Markers --- */
.map-marker-wrap {
  background: transparent;
  border: none;
}
.map-bee-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 40% 40% 40% 40% / 55% 55% 45% 45%;
  background: var(--green);
  border: 2px solid var(--green-dark);
  color: var(--yellow);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  animation: mapBeeBuzz 2.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  cursor: pointer;
}
.map-bee-marker.no-buzz,
.map-bee-marker.is-selected {
  animation: none;
}
.map-bee-marker:hover,
.map-bee-marker:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.45);
  transform: scale(1.08);
}
.map-bee-marker.is-selected {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--green-dark);
  transform: scale(1.15);
}
@keyframes mapBeeBuzz {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(1.5px, -1px) rotate(2deg);
  }
  50% {
    transform: translate(0, 1px) rotate(0deg);
  }
  75% {
    transform: translate(-1.5px, -1px) rotate(-2deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .map-bee-marker {
    animation: none;
  }
}

.map-hive-marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 22%;
  background: var(--bg-alt);
  border: 2px dashed var(--muted);
  box-shadow:
    0 0 0 2px var(--card),
    0 2px 6px rgba(0, 0, 0, 0.2);
  color: var(--green);
  cursor: pointer;
}
.map-hive-marker:hover,
.map-hive-marker:focus-visible {
  outline: none;
  filter: brightness(1.06);
  border-color: var(--ink);
}
.map-hive-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--yellow);
  /* Same fixed-background/flipping-token mismatch as .spotlight-ribbon — see comment
     there. --yellow is constant across themes; --ink is not. */
  color: #16181d;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- City-events drawer (hive marker click) --- */
.city-drawer-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
}
.city-drawer-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
}
.city-drawer-row:hover {
  border-color: var(--green);
}
.city-drawer-row-meta {
  font-size: 0.78rem;
  color: var(--muted);
}
.city-drawer-row-title {
  font-weight: 700;
}

/* --- Accessible list mode --- */
.map-list-city-group {
  margin: 1.75rem 0;
}
.map-list-city-group h3 {
  font-size: 1.1rem;
  margin-bottom: 0.85rem;
}
.map-list-grid {
  margin-bottom: 0;
}
.map-list-card {
  position: relative;
}
.map-approx-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  margin-bottom: 0.4rem;
}

/* ---------------------------------------------------------------------
   Dark-mode contrast remediation (WCAG 2.2 AA)

   Customer-reported: "very unattractive in dark theme, a lot is not
   readable." Each rule below was measured in-browser against its real
   effective background, not eyeballed. The recurring root cause is a
   value that is correct in light mode but inverts badly in dark:
   either a token that flips (--ink is near-black light / near-white
   dark, so a hardcoded `color: white` on `background: var(--ink)`
   becomes white-on-white), or a mid-tone brand green that has enough
   contrast on cream but not on near-black.

   Targets: 4.5:1 for text, 3:1 for icon-only controls.
--------------------------------------------------------------------- */

/* .skip-link sets `background: var(--ink); color: white`. --ink flips to
   near-white in dark mode, leaving white text on a near-white chip
   (measured 1.25:1). Pin both ends so it reads in either theme. */
body.dark-mode .skip-link {
  background: #0b6e52;
  color: #ffffff;
}

/* Brand green #108a67 clears AA on cream but lands at 3.9:1 (stamp) and
   4.37:1 ("See all") on the dark surfaces, and both are small text. */
body.dark-mode .passport-stamp-city,
body.dark-mode .shelf-see-all {
  color: #2fb98d;
}

/* White on the light success green measured 3.3:1 at 11.5px. Deepen the
   fill in dark mode rather than dimming the label. */
body.dark-mode .price-pill.price-free {
  background: #0e7a35;
  color: #ffffff;
}

/* Footer note used a hardcoded mid-grey (4.23:1). --muted already
   resolves to an accessible tone in dark mode. */
body.dark-mode .footer-note {
  color: var(--muted);
}

/* --muted-light is the de-emphasised tone (footer links, fine print).
   Its dark value (#6e7a75) measured 4.23:1 on the footer surface, just
   under AA for body text. Lifted at the token level so every consumer
   benefits rather than patching individual selectors. */
body.dark-mode {
  --muted-light: #93a09a;
}

/* Light-mode contrast fixes.

   --gold-ink was introduced for the "Surprise me" picker tile: the tile
   sits on a 16%-alpha gold wash over the cream page, and #a36b13 on that
   composite measured 3.91:1 (needs 4.5:1 at 12.8px). Deepened to keep the
   gold identity while clearing AA.

   --muted-light (footer links, fine print) measured 3.65:1 on cream. */
:root {
  --gold-ink: #8a5a10;
  --muted-light: #646d78;
}

/* Two pre-existing card-level contrast misses (predate the Passport work,
   both on the ticket-stub card). Colour-only changes: card geometry and
   markup from ADR-0008 are untouched.
   .stat-fire  : #ea580c on white measured 3.56:1 at 13px bold.
   .price-free : white on rgba(22,163,74,.95) measured 3.56:1 at 11.5px. */
.stat-fire {
  color: #c2410c;
}
.price-pill.price-free {
  background: #0e7a35;
}

/* The darker .stat-fire orange above clears AA on white but drops to
   3.26:1 on the dark card, so dark mode needs the lighter end instead. */
body.dark-mode .stat-fire {
  color: #fb923c;
}

/* ---------------------------------------------------------------------
   Customer-reported overlap fixes
--------------------------------------------------------------------- */

/* Quick-peek: the ✕ is absolutely positioned at the drawer's top-right. When an
   event has no cover image, the first content row (category pill left, price pill
   right) becomes the top row and the price slides straight under the button.
   Reserve the button's footprint on whatever element lands first. */
.quick-peek-content > *:first-child:not(.peek-cover-img):not(.peek-skeleton) {
  padding-right: 3rem;
}

/* Passport strip: the scroller arrows are absolutely positioned over the list
   edges (left: -4px), so once a user has collected enough stamps for the row to
   scroll, the left arrow lands on top of the first stamp (measured: arrow spans
   316-348, first stamp 328-375). Reserve a lane at each end for them, and give the
   label a little more room so the rotated stamp and its ring never crowd the text. */
.passport-strip {
  gap: 1.5rem;
}
.passport-strip-list {
  padding-left: 2rem;
  padding-right: 2rem;
}

/* ---------------------------------------------------------------------
   Hero: centred copy, and compact enough that the guided picker and the
   "Search instead" control are both fully visible on landing.

   Measured before this change at 1366x650 (a common laptop viewport):
   the picker was cut off by 13px and the search toggle by 70px, so the
   customer had to scroll to reach either. The hero column stays centred
   via .hero-inner's `margin: 0 auto`; only the copy is re-centred — the
   picker's own step labels and chip rows stay left-aligned, since those
   are form controls and read better ranged left.
--------------------------------------------------------------------- */
.flagship-hero .hero-brand,
.flagship-hero .hero-title,
.flagship-hero .hero-sub {
  text-align: center;
}
.flagship-hero .hero-sub {
  margin-left: auto;
  margin-right: auto;
}
.flagship-hero {
  padding: 2rem 1rem 1.75rem !important;
}
.flagship-hero .hero-title {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important;
  margin: 0 0 0.5rem !important;
}
.flagship-hero .hero-sub {
  margin-bottom: 1.1rem !important;
}
.flagship-hero .hero-brand {
  margin-bottom: 0.35rem;
}
.guided-picker {
  padding: 1.1rem 1.25rem 0.9rem;
}

/* Trim a further ~12px so the search toggle also clears a 600px-tall viewport
   (1280x600 measured the toggle 1px below the fold before this). */
.flagship-hero {
  padding-top: 1.6rem !important;
}
.flagship-hero .hero-sub {
  margin-bottom: 0.85rem !important;
}
.guided-picker {
  padding-bottom: 0.75rem;
}

/* Third compaction pass — the picker grew a third step (Price, customer request) after the
   two passes above were measured. Screenshotted at 1366x650 with all three steps present:
   "Search instead" landed ~50px below the fold. This, combined with the step/label/tile
   spacing trims earlier in this file's picker section, recovers that (and then some, for
   headroom) without shrinking anything below the 44px touch-target floor. */
.flagship-hero {
  padding-top: 1.15rem !important;
  padding-bottom: 1.15rem !important;
}
.flagship-hero .hero-sub {
  margin-bottom: 0.5rem !important;
}
.flagship-hero .hero-title {
  margin-bottom: 0.35rem !important;
}
.flagship-hero .hero-brand {
  margin-bottom: 0.25rem;
}
.guided-picker {
  padding-top: 0.75rem;
  padding-bottom: 0.4rem;
}
.picker-step {
  margin-bottom: 0.65rem;
}
.picker-step-price {
  margin-bottom: 0.25rem;
}
.picker-search-toggle {
  margin-top: 0.45rem;
}
.picker-tile-label,
.picker-tile-surprise {
  min-height: 54px;
}

/* ---------------------------------------------------------------------
   OS-dark parity (no-JS fallback)

   Two dark themes exist in this stylesheet: the explicit `body.dark-mode`
   class, and the `@media (prefers-color-scheme: dark) body:not(.light-mode)`
   block. They define DIFFERENT token sets — the media block omits
   --bg-alt, --muted-light, --green*, and --shadow-glow — so any component
   built on those tokens rendered with light-theme surfaces under
   OS-dark. The guided picker's chips and tiles were the visible casualty:
   near-white --ink text on a cream --bg-alt chip, measured at 1.09:1.

   With JS, the theme bootstrap now applies the real .dark-mode class, so
   the complete palette and every component rule apply. This block is the
   no-JS safety net: it brings the media-query path up to the same token
   set and carries over the component rules that only had .dark-mode
   variants. Values deliberately mirror body.dark-mode exactly.
--------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  body:not(.light-mode) {
    --bg-alt: #121a17;
    --muted-light: #93a09a;
    --green: #108a67;
    --green-dark: #0b6e52;
    --green-hover: #149c75;
    --shadow-glow: 0 0 24px rgba(16, 138, 103, 0.3);
  }
  body:not(.light-mode) .guided-picker {
    background: var(--card);
    border: 1px solid var(--border);
  }
  body:not(.light-mode) .skip-link {
    background: #0b6e52;
    color: #ffffff;
  }
  body:not(.light-mode) .passport-stamp-city,
  body:not(.light-mode) .shelf-see-all {
    color: #2fb98d;
  }
  body:not(.light-mode) .price-pill.price-free {
    background: #0e7a35;
    color: #ffffff;
  }
  body:not(.light-mode) .footer-note {
    color: var(--muted);
  }
  body:not(.light-mode) .stat-fire {
    color: #fb923c;
  }
}

/* ---------------------------------------------------------------------
   Picker density: the new Step 3 (price) added ~80px, leaving only 2px of
   headroom below "Search instead" at 1366x650 and pushing it off-screen
   entirely at 1280x600. Trim the vertical rhythm rather than the content.
   Touch targets stay >=44px (chips keep their min-height untouched); only
   the oversized icon tiles and the inter-step gaps give ground.
--------------------------------------------------------------------- */
.picker-step {
  margin-bottom: 0.45rem;
}
.picker-step-label {
  margin-bottom: 0.3rem;
}
.picker-tile-label,
.picker-tile-surprise {
  min-height: 60px;
  padding: 0.45rem 0.5rem;
}
.flagship-hero .hero-sub {
  margin-bottom: 0.7rem !important;
}

/* On short viewports the expanded city/category panel would put its Apply
   button below the fold, so cap the scrolling option grid harder there.
   The panel already scrolls internally (max-height + overflow-y: auto). */
@media (max-height: 720px) {
  .picker-panel-grid {
    max-height: 150px;
  }
}

/* ---------------------------------------------------------------------
   Hero alignment (customer-reported, twice)

   .hero-title and .hero-sub each carry a max-width (780px / 680px) but no
   auto side margins, so inside the 900px hero column their BOXES sat flush
   left while `text-align: center` only centred the text within those boxes.
   Measured at 1366px: hero column centre 676, picker centre 676, but title
   centre 636 and sub centre 586 — the copy was visibly off-axis, and the
   title's edges (246/1026) didn't line up with the guided picker's
   (296/1056).

   Fix: centre both boxes, and match the title's width to the picker so the
   header and the card share the same left and right edge.
--------------------------------------------------------------------- */
.flagship-hero .hero-title,
.flagship-hero .hero-sub {
  max-width: 760px !important;
  margin-inline: auto !important;
}

/* ---------------------------------------------------------------------
   Event page: status banner must not be covered by the detail card

   `.detail-layout` carries `margin-top: -24px` so the content card
   deliberately overlaps the cover image. That device doesn't account for
   the optional status banners that render between the two. When one is
   present the card is pulled up over the banner's last 24px instead, and
   because `.detail-sidebar` is `position: sticky` (a positioned element)
   it paints on top of the static banner — measured: banner 361-425,
   sidebar starting 401, hiding the second line of the notice.

   Cancel the pull-up whenever a banner precedes the layout, and give the
   banner its own stacking position so nothing can paint over it.
--------------------------------------------------------------------- */
.unconfirmed-banner ~ .detail-layout,
.cancelled-event-banner ~ .detail-layout,
.past-event-banner ~ .detail-layout {
  margin-top: 0;
}
.unconfirmed-banner,
.cancelled-event-banner,
.past-event-banner {
  position: relative;
  z-index: 3;
}

/* =======================================================================
   Event form — pricing-mode branch (frontend-engineer, 2026-08-21)
   "Once user selects paid, next thing to do is ask if the pricing is
   tiered or single priced" — event-form.ejs's #paid-options now asks a
   real fieldset/legend radio question ("How is this priced?") right after
   Event type/Capacity, instead of a tier repeater buried below a lone
   Price field. #single-price-panel / #tiered-price-panel are toggled by
   the :has() rules below alone (no static server-rendered "hidden" class
   on either — that would fight the live radio toggle with !important),
   the same technique already used for the guided picker's "More cities"/
   "More categories" mode switch. This holds with JavaScript fully
   disabled; app/public/js/main.js only adds the readonly/derived-price
   sync and disables (never clears) the inactive branch's tier inputs so
   a mode switch can't submit contradictory data.
   Selectors are prefixed with `.event-form` to out-specificity the
   generic `.event-form fieldset` / `.event-form legend` / `.event-form
   label` rules (1482-1521 above) this radio group nests inside.
========================================================================= */
#paid-options:has(#pricingMode-tiers:checked) #single-price-panel {
  display: none;
}
#paid-options:has(#pricingMode-single:checked) #tiered-price-panel {
  display: none;
}
/* The shared #price field/hint (see the BL-023 comment above it in event-form.ejs) reads as
   a live "derived from your cheapest tier" display, not a second competing input, the moment
   Several ticket tiers is chosen — not only once a tier row actually has content. Matches the
   JS-enabled behaviour in main.js's syncPriceField (isTiersMode gates readonly/hint there
   too) so a no-JS session gets the same visual signal without waiting on a round trip. */
#paid-options:has(#pricingMode-single:checked) #price-derived-hint {
  display: none;
}
#paid-options:has(#pricingMode-tiers:checked) #price {
  background: var(--bg-alt);
  color: var(--muted);
  cursor: not-allowed;
}
.event-form .pricing-mode-fieldset {
  margin: 0 0 1.1rem;
}
.event-form .pricing-mode-legend {
  font-family: inherit;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.55rem;
}
.pricing-mode-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.pricing-mode-option {
  position: relative;
  display: flex;
  flex: 1 1 220px;
}
/* Visually-hidden native radio (same clip-rect pattern as .picker-input) so the styled
   card is driven by real :checked state — keyboard-operable, works with a screen reader,
   and is what the :has() rules above key off. */
.pricing-mode-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.event-form .pricing-mode-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 44px;
  margin-bottom: 0;
  padding: 0.75rem 0.95rem;
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--border);
  font-size: 0.95rem;
  font-weight: 400;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.pricing-mode-check {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
/* Selected state is never colour-only: the checkmark icon appears, the border switches
   from the neutral outline to a solid brand colour, and the title/description text swaps
   to white-on-green (9.8:1 / 6.2:1 measured in light / dark) — three independent signals. */
.pricing-mode-input:checked + .pricing-mode-card {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: #fff;
}
.pricing-mode-input:checked + .pricing-mode-card .pricing-mode-check {
  display: inline-flex;
}
.pricing-mode-input:focus-visible + .pricing-mode-card {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}
.pricing-mode-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.pricing-mode-title {
  font-weight: 700;
}
.pricing-mode-desc {
  font-size: 0.82rem;
  color: var(--muted);
}
.pricing-mode-input:checked + .pricing-mode-card .pricing-mode-desc {
  color: #fff;
}
.pricing-panel {
  margin-bottom: 0.5rem;
}
@media (max-width: 480px) {
  .pricing-mode-option {
    flex-basis: 100%;
  }
}

/* ---------------------------------------------------------------------
   Event alerts redesign (notify-preferences.ejs) — collapsed into native
   details/summary disclosures reusing the guided picker's vocabulary
   (.picker-more / .picker-more-btn / .picker-more-panel / .picker-panel-grid /
   .picker-tile / .picker-chip) instead of a second dropdown style, plus a
   status card and a static "what you'll get" preview. All colour via tokens
   so both themes stay at zero contrast failures.
--------------------------------------------------------------------- */
.notify-status {
  max-width: 560px;
  margin: 0 auto 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card);
  text-align: center;
}
.notify-status p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
}
.notify-status-on {
  display: none;
}
/* Off/on swap works with zero JS: :has() reads the real category checkboxes
   wherever they live in the DOM, checked or not, open panel or collapsed. */
.notify-prefs-page:has(input[name='categories']:checked) .notify-status-off {
  display: none;
}
.notify-prefs-page:has(input[name='categories']:checked) .notify-status-on {
  display: block;
}

.notify-preview {
  max-width: 420px;
  margin: 0 auto 1.75rem;
  text-align: center;
}
.notify-preview-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.notify-preview-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  text-align: left;
  box-shadow: var(--shadow-sm);
}
.notify-preview-heading {
  margin: 0 0 0.6rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}
.notify-preview-event {
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  margin-bottom: 0.75rem;
}
.notify-preview-event strong {
  display: block;
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.notify-preview-btn {
  pointer-events: none;
}
.notify-preview-caption {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.notify-disclosure {
  max-width: 560px;
  margin: 0 auto 0.85rem;
}
.notify-disclosure .picker-more-btn {
  width: 100%;
  min-height: 52px;
  justify-content: space-between;
  font-size: 0.95rem;
}
.notify-disclosure-title {
  color: var(--ink);
}
.notify-disclosure-state {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.82rem;
  margin-right: auto;
  margin-left: 0.6rem;
  text-align: right;
}
.notify-disclosure .picker-more-panel {
  text-align: left;
}
.notify-disclosure .picker-panel-grid {
  justify-content: center;
  max-height: none;
  overflow: visible;
}
.notify-disclosure-intro {
  margin: 0 0 0.75rem;
}
.notify-preset-actions {
  display: none;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  justify-content: center;
}
.js-enabled .notify-preset-actions {
  display: flex;
}
.notify-more-info-body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 420px) {
  .notify-disclosure-state {
    display: block;
    text-align: left;
    margin-left: 0;
  }
  .notify-disclosure .picker-more-btn {
    flex-wrap: wrap;
    row-gap: 0.2rem;
  }
}

/* Alignment fix — same class of bug as the homepage flagship hero: .hero-sub.small sets a
   max-width (640px) but its margin shorthand ("0 0 1.5rem") pins left/right to 0 instead of
   auto, so inside .form-page's centred 760px column the sub-heading sat flush left while
   text-align:center only centred the glyphs *inside* that left-anchored box. Measured at
   1366px before this rule: container/h1 centre 683px, sub-heading centre 623px (60px
   off-axis), sub-heading edges 303-943px vs a card below (e.g. .notify-status, 403-963px)
   — neither axis nor edges lined up. margin-inline:auto re-centres it on the same axis as
   the container, h1 and every card below. Scoped to .notify-prefs-page (not the shared
   .hero-sub.small rule) so legal/other form pages that haven't been measured for this are
   left untouched. */
.notify-prefs-page > p.hero-sub {
  margin-inline: auto;
}

/* ---------------------------------------------------------------------
   Navigation: hold its shape in French

   French labels run ~20% longer than English ("Découvrir"/"Discover",
   "Mes événements"/"My Events", "+ Créer un événement"/"+ Create Event").
   Measured at 1366px: the English nav needs 745px and leaves a 157px gap
   after the wordmark; the French nav needs 901px, which consumes the whole
   gap (brand right edge 314, first item left edge 314 — touching) and
   forces labels to wrap onto a second line, so items sat at different
   heights and the row looked scattered.

   Three fixes: never break a label mid-phrase; guarantee separation from
   the wordmark; and tighten spacing progressively as room runs out, so the
   items keep the same order and alignment they have in English. The nav
   also now collapses to the hamburger before it gets genuinely cramped,
   rather than holding on until 560px.
--------------------------------------------------------------------- */
.nav-links > a,
.nav-links > span,
.nav-links > button,
.nav-links .btn,
.nav-links .lang-switch {
  white-space: nowrap;
}
.nav-inner {
  gap: 1.5rem;
}

@media (max-width: 1200px) {
  .nav-links {
    gap: 0.75rem;
    font-size: 0.9rem;
  }
  .nav-links .btn {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
}

@media (max-width: 1040px) {
  .nav-links {
    gap: 0.55rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 920px) {
  .nav-links {
    display: none;
  }
  .hamburger-btn {
    display: flex;
  }
}

/* At full desktop width the French nav still needed ~915px against ~877px
   of usable room, so it spilled 17px past the .wrap boundary and no longer
   lined up with the page content below it. The document already carries
   `<html lang>`, so the extra tightening can be scoped to French only and
   English keeps its roomier spacing untouched. Below 1200px the
   language-agnostic rules above take over. */
@media (min-width: 1201px) {
  html[lang='fr'] .nav-links {
    gap: 0.7rem;
    font-size: 0.92rem;
  }
  html[lang='fr'] .nav-links .btn {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
}

/* French runs out of room well before English does: measured at 950px the
   English nav still fits with an 80px gap, while the French one overflows
   its container and pushes the page into horizontal scroll. Rather than
   collapsing English earlier than it needs, French switches to the
   hamburger sooner. Above this width French has been verified to fit
   (1200px: 20px clearance, 1366px: ends at x=1216, same as English). */
@media (max-width: 1100px) {
  html[lang='fr'] .nav-links {
    display: none;
  }
  html[lang='fr'] .hamburger-btn {
    display: flex;
  }
}