:root {
  /* So native controls (date picker icon, etc.) render for a dark
     background instead of defaulting to light-mode chrome. */
  color-scheme: dark;
  --bg: #16161a;
  --surface: #202024;
  --surface-glass: rgba(32, 32, 36, 0.55);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: rgba(0, 0, 0, 0.45);
  --text: #f0eee9;
  --muted: #9a9a9a;
  --border: #333338;
  --accent: #a78bfa;
  --famous: #38bdf8;
  --new: #fbbf24;
}

/* LA gets a warmer red/orange theme instead of NYC's purple/blue - the
   ambient background glow (see body, below) is computed from --accent and
   --famous via color-mix(), so overriding just these two here re-colors
   the whole page's accent scheme, times, and highlights automatically. */
body.city-la {
  --accent: #f87171;
  --famous: #fb923c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "DM Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  /* Soft colored glow behind the frosted-glass cards - without it the
     blur has nothing to catch and the glass effect reads as flat gray. */
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
    radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--famous) 18%, transparent), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}

header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px clamp(16px, 4vw, 48px);
  background: var(--surface-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--glass-border);
}

.header-left {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  flex-direction: column;
}

header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.brand-subtitle {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.7;
}

.city-toggle {
  display: flex;
  gap: 4px;
  background: var(--surface-glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 3px;
}

.city-toggle button {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.city-toggle button:hover:not(.active) {
  color: var(--text);
}

.city-toggle button.active {
  background: var(--accent);
  color: var(--bg);
}

.page-nav {
  display: flex;
  gap: 16px;
}

.page-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  padding-bottom: 2px;
  white-space: nowrap;
}

.page-nav a:hover {
  color: var(--text);
}

.page-nav a.active {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}

.mobile-break {
  display: none;
}

#comedian-search {
  font-size: 1rem;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  min-width: 240px;
}

#date-picker {
  font-size: 1rem;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
}

.date-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.date-nav button {
  font-size: 1.1rem;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  cursor: pointer;
}

.date-nav button:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Below this width, .header-left's own box just gets in the way of the
   grouping we want - display:contents removes it so brand/city-toggle/
   page-nav become direct flex children of <header> alongside .date-nav,
   letting each wrap independently instead of as a fixed cluster. */
@media (max-width: 640px) {
  .header-left {
    display: contents;
  }

  /* auto margin pushes the pill to the right edge, level with the title,
     without stretching the pill's own background/border box. */
  .city-toggle {
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* Forces a hard line-break after the city toggle - without this, the
     browser is free to pack .page-nav onto the same line as the toggle
     whenever there's room, instead of down with .date-nav/#comedian-search
     where we actually want it. */
  .mobile-break {
    display: block;
    flex-basis: 100%;
    height: 0;
  }

  /* flex-basis is deliberately a small explicit px value, not auto - auto
     would use the plain <input>'s much wider default intrinsic size (~190px)
     to decide whether it fits on the nav's line at all, wrapping it to its
     own line on anything narrower than ~390px regardless of min-width. */
  #comedian-search {
    flex: 1 1 40px;
    min-width: 40px;
    font-size: 0.85rem;
    padding: 6px 8px;
  }

  /* Trimmed down so page-nav + date-nav/#comedian-search can share the row
     that follows. */
  .page-nav {
    gap: 8px;
  }

  .page-nav a {
    font-size: 0.8rem;
    padding: 2px 0;
  }

  /* Same fix as #comedian-search above - min-width:0 overrides the default
     "auto" floor (which is based on this element's full natural content
     width) so it's actually allowed to share a line with .page-nav instead
     of always wrapping to its own. */
  .date-nav {
    gap: 4px;
    flex: 1 1 40px;
    min-width: 0;
    justify-content: flex-end;
  }

  .date-nav button {
    width: 26px;
    height: 26px;
    font-size: 1rem;
  }

  #date-picker {
    font-size: 0.8rem;
    padding: 5px 6px;
  }
}

main {
  padding: 16px clamp(16px, 4vw, 48px) 48px;
  /* A grid lays cards into strict rows sized by the tallest card in each
     row, leaving gaps under shorter neighbors. Multi-column flow instead
     packs each card immediately after the previous one in its column. */
  column-width: 340px;
  column-gap: 24px;
}

.venue-group {
  background: var(--surface-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 24px;
  break-inside: avoid;
  box-shadow: 0 8px 32px var(--glass-shadow);
}

.venue-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  margin: 0 0 16px;
}

.venue-logo {
  height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* The Stand's wordmark reads visually heavier/larger than the others at
   the same pixel height, so it gets a smaller cap to match. Margin (not
   padding - box-sizing: border-box would just shrink the image to fit
   within the height instead) restores the vertical space the shorter
   image gives up, so its heading still occupies roughly the same height
   as the others. */
.venue-logo-the_stand {
  height: 38px;
  margin: 9px 0;
}

/* Improv's wordmark is an even wider/flatter ratio (~5.5:1) than The
   Stand's - same margin-not-padding logic to give back the vertical space. */
.venue-logo-improv {
  height: 30px;
  margin: 13px 0;
}

.venue-name {
  font-size: 1.2rem;
  font-weight: 700;
}

.venue-subtitle {
  color: var(--muted);
  font-size: 0.85rem;
}


.show {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--glass-border);
}

.show:first-of-type {
  border-top: none;
}

.show-time {
  flex: 0 0 72px;
  font-weight: 600;
  color: var(--accent);
}

.show-title {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.new-badge {
  color: var(--new);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: 6px;
}

.show-title[href] {
  cursor: pointer;
}

.show-title[href]:hover {
  color: var(--accent);
  text-decoration: underline;
}

.show-room, .show-comedians {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 2px;
}

.show-room {
  font-style: italic;
}

.show-comedians {
  display: flex;
  flex-wrap: wrap;
  /* Ample space between names instead of comma-separating them. */
  column-gap: 14px;
  row-gap: 2px;
}

/* Marks a name found in the Wikidata + Wikipedia-sourced notable-comedian
   list (see standup/build_comedian_index.py) - a best-effort signal, not a
   claim of exhaustive fame-checking. */
.famous {
  color: var(--famous);
  font-weight: 600;
}

.empty {
  color: var(--muted);
  padding: 32px;
  text-align: center;
  column-span: all;
}