*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { -webkit-appearance: none; appearance: none; background: none; border: none; cursor: pointer; font: inherit; outline: none; }
body { -webkit-tap-highlight-color: transparent; }

:root {
  --bg: #0d0d12;
  --surface: #16161f;
  --surface2: #1e1e2a;
  --border: #2a2a3a;
  --accent: #7c4dff;
  --accent-dim: rgba(124,77,255,0.25);
  --accent-glow: rgba(124,77,255,0.12);
  --accent-text: #ffffff;
  --text: #e8e8f0;
  --text-dim: #7878a0;
  --today-color: #ff4d6d;
  --green: #00d4aa;
  --free-color: #38bdf8;
}

/* ── Light mode ───────────────────────────────────────────────── */
html.light {
  --bg: #f0f0f8;
  --surface: #ffffff;
  --surface2: #eceef8;
  --border: #d8d8ee;
  --text: #18182e;
  --text-dim: #6060a0;
  --today-color: #ff4d6d;
  --green: #00b890;
  --free-color: #0ea5e9;
}

html.light .app-header {
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
html.light .cal-options,
html.light .accent-panel,
html.light .day-panel {
  box-shadow: 0 8px 28px rgba(0,0,0,0.10);
}
html.light .event-card { background: var(--surface); }
html.light .event-card:hover { border-color: #c0c0d8; }
html.light .cal-cell { background: var(--surface); }
html.light .cal-cell:not(.empty):hover { background: var(--surface2); border-color: #c8c8e0; }
html.light .verify-panel { background: var(--surface); }
html.light .date-range-field input[type="date"] { color-scheme: light; }
html.light .venue-editor { background: var(--surface2); }
html.light .view-btn.active { box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
html.light .accent-swatch.active { border-color: #333; box-shadow: 0 0 0 2px rgba(0,0,0,0.15); }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}

#app { display: flex; flex-direction: column; min-height: 100vh; }

/* ── Header ───────────────────────────────────────────────────── */
.app-header {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.app-header > .app-title,
.app-header > .venue-manager {
  /* these are siblings inside the row div; see below */
}

.header-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 32px 14px;
  width: 100%;
}

.header-view-toggle {
  display: flex;
}

.app-title { display: flex; align-items: center; gap: 10px; }
.app-title svg { flex-shrink: 0; }
.app-title h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; }

/* ── Venue manager ────────────────────────────────────────────── */
.venue-manager {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.venue-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.venue-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--c) 14%, var(--surface2));
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 20px;
  padding: 5px 10px 5px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  position: relative;
}
.venue-chip.loading { opacity: 0.7; }

.venue-chip.disabled {
  background: var(--surface2);
  border-color: var(--border);
  opacity: 0.55;
}
.venue-chip.disabled .chip-dot {
  background: var(--text-dim);
}
.venue-chip.disabled .chip-label {
  text-decoration: line-through;
  color: var(--text-dim);
}
.chip-count {
  font-size: 0.68rem;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.venue-chip.disabled .chip-count {
  opacity: 0.35;
}

.chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

.chip-solo {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
}

.chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c);
  flex-shrink: 0;
  transition: transform 0.12s, box-shadow 0.12s;
}
.chip-solo:hover .chip-dot {
  transform: scale(1.55);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent);
}

.chip-spinner {
  width: 10px; height: 10px;
  border: 2px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-top-color: var(--c);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.chip-refresh {
  background: none;
  border: none;
  color: color-mix(in srgb, var(--c) 50%, var(--text-dim));
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0 1px;
  display: flex;
  align-items: center;
  transition: color 0.15s, transform 0.2s;
  opacity: 0;
}
.venue-chip:hover .chip-refresh { opacity: 1; }
.chip-refresh:hover { color: var(--text); transform: rotate(-30deg); }

.chip-edit {
  background: none;
  border: none;
  color: color-mix(in srgb, var(--c) 50%, var(--text-dim));
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  padding: 0 1px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
  opacity: 0;
}
.venue-chip:hover .chip-edit,
.venue-chip.editing .chip-edit { opacity: 1; }
.chip-edit:hover { color: var(--text); }

.chip-refresh {
  background: none;
  border: none;
  color: color-mix(in srgb, var(--c) 50%, var(--text-dim));
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0 1px;
  display: flex;
  align-items: center;
  transition: color 0.15s, transform 0.3s;
  opacity: 0;
}
.venue-chip:hover .chip-refresh { opacity: 1; }
.chip-refresh:hover { color: var(--text); transform: rotate(180deg); }

.chip-remove {
  background: none;
  border: none;
  color: color-mix(in srgb, var(--c) 60%, var(--text-dim));
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 0 0 2px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.chip-remove:hover { color: var(--text); }

/* ── Venue chip tooltip ──────────────────────────────────────────── */
.chip-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.75rem;
  line-height: 1.7;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  z-index: 30;
  text-align: left;
  min-width: 160px;
}
.chip-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--border);
}
.venue-chip:hover .chip-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.chip-tooltip-name { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.chip-tooltip-line { color: var(--text-dim); }

.add-venue-form { display: flex; gap: 6px; }

.add-venue-form input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 12px;
  font-size: 0.8rem;
  width: 180px;
  outline: none;
  transition: border-color 0.18s;
}
.add-venue-form input::placeholder { color: var(--text-dim); }
.add-venue-form input:focus { border-color: var(--accent); }

.add-venue-form button {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.add-venue-form button:hover { opacity: 0.85; }
.add-venue-form button:active { opacity: 0.7; }


/* ── Venue pick list ──────────────────────────────────────────── */
.verify-panel {
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-direction: column;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.82rem;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.verify-header {
  padding: 10px 44px 6px 16px;
  color: var(--text-dim);
  font-size: 0.8rem;
}
.verify-header strong { color: var(--text); }

.verify-searching, .verify-none, .verify-error {
  padding: 10px 44px 10px 16px;
  color: var(--text-dim);
}
.verify-none strong { color: var(--text); }
.verify-error { color: #ff6b6b; }
.verify-searching { font-style: italic; }

.venue-match-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 0 6px;
}

.venue-match-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s, border-color 0.12s;
  border-radius: 0;
}
.venue-match-row:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-left-color: var(--accent);
}
.venue-match-row:hover .match-name { color: var(--accent); }
.venue-match-row:hover .match-loc  { color: var(--text); }

.match-name {
  font-weight: 600;
  font-size: 0.875rem;
  min-width: 0;
  flex-shrink: 0;
}

.match-loc {
  color: var(--text-dim);
  font-size: 0.8rem;
  flex: 1;
}

.match-count {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.match-added {
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.venue-match-existing {
  opacity: 0.75;
}
.venue-match-existing:hover .match-added {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.verify-close {
  position: absolute;
  top: 6px;
  right: 8px;
}

.verify-btn {
  border: none;
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.verify-btn.secondary { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); }
.verify-btn:hover { opacity: 0.8; }

/* ── Venue editor panel ───────────────────────────────────────── */
.venue-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 24px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  order: -1;
}
.editor-row1 {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.editor-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.editor-field:first-child { flex: 1 1 180px; }
.editor-field:first-child .editor-input { width: 100%; }
.editor-refresh-field { margin-right: auto; }
.editor-address-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.editor-addr-fields {
  display: flex;
  align-items: center;
  gap: 6px;
}
.editor-input-street { width: 320px !important; }
.editor-input-city   { width: 200px !important; }
.editor-input-sm     { width: 80px !important; flex: none; text-transform: uppercase; }

.editor-meta {
  color: var(--text-dim);
  white-space: nowrap;
  min-width: 0;
}
.editor-meta strong { color: var(--text); }

.editor-label {
  color: var(--text-dim);
  font-weight: 600;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.editor-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 5px 10px;
  font-size: 0.82rem;
  width: 160px;
  outline: none;
  transition: border-color 0.15s;
}
.editor-input:focus { border-color: var(--accent); }
.editor-addr-row { display: flex; gap: 6px; }
.editor-addr-row .editor-input { flex: 1; width: auto; }

.editor-verify-btn {
  margin-top: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.78rem;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.editor-verify-btn:hover { border-color: var(--accent); color: var(--text); }

.geocode-loading { font-size: 0.78rem; color: var(--text-muted); margin-top: 8px; }
.geocode-error   { font-size: 0.78rem; color: #e05; margin-top: 8px; }
.geocode-saved   { font-size: 0.78rem; color: var(--accent); margin-top: 8px; }
.geocode-result  { margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--surface); }
.geocode-addr    { font-size: 0.8rem; color: var(--text); margin-bottom: 4px; line-height: 1.4; }
.geocode-map-link { font-size: 0.75rem; color: var(--accent); text-decoration: none; display: block; margin-bottom: 8px; }
.geocode-map-link:hover { text-decoration: underline; }
.geocode-actions { display: flex; gap: 6px; }
.geocode-confirm-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.78rem;
  padding: 4px 10px;
  cursor: pointer;
}
.geocode-cancel-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.78rem;
  padding: 4px 10px;
  cursor: pointer;
}

.swatch-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}

.swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
  flex-shrink: 0;
  padding: 0;
}
.swatch:hover { transform: scale(1.2); }
.swatch.active {
  border-color: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
}

.swatch-custom {
  width: 24px;
  height: 24px;
  padding: 2px;
  border-radius: 50%;
  cursor: pointer;
  background: var(--surface);
  border: 2px solid var(--border);
  transition: border-color 0.15s;
}
.swatch-custom:hover { border-color: var(--text-dim); }

.editor-done-btn {
  margin-left: 0;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: 7px;
  padding: 5px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.editor-done-btn:hover { opacity: 0.85; }

/* ── Venue refresh policy ─────────────────────────────────────── */
.refresh-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.refresh-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text);
  font-size: 0.82rem;
  white-space: nowrap;
  user-select: none;
}
.refresh-toggle input { accent-color: var(--accent); cursor: pointer; }

.editor-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 5px 8px;
  font-size: 0.82rem;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s, opacity 0.15s;
}
.editor-select:focus { border-color: var(--accent); }
.editor-select:disabled { opacity: 0.4; cursor: not-allowed; }

.refresh-meta {
  color: var(--text-dim);
  font-size: 0.72rem;
  white-space: nowrap;
}

/* ── Venue drawer (all viewports) ────────────────────────────── */
.venue-manager { display: none; }   /* always replaced by the drawer toggle */

.venue-drawer-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.venue-drawer-btn:hover,
.venue-drawer-btn.open { color: var(--text); border-color: var(--accent); }

.venue-count-badge {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 700;
}

.venue-drawer-chevron {
  display: flex;
  align-items: center;
  transition: transform 0.2s;
  opacity: 0.7;
}
.venue-drawer-btn.open .venue-drawer-chevron { transform: rotate(180deg); }

/* Mobile-only sources drawer — hidden on desktop */
.sources-drawer { display: none; }
/* "Sources" entry button inside Settings panel — mobile only, hidden on desktop */
.sources-entry-btn { display: none; }

.venue-drawer {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.venue-drawer.open {
  display: block;
  position: relative;
  padding: 14px 24px 14px;
  box-sizing: border-box;
}

/* Two-column layout: left = chips, right = sources */
.venue-drawer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Left column: active chips + add form */
.venue-drawer-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.venue-drawer-left .venue-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.venue-drawer-left .venue-chip {
  font-size: 0.62rem;
  padding: 2px 5px 2px 4px;
  gap: 3px;
}
.venue-drawer-left .chip-dot { width: 6px; height: 6px; }
.venue-drawer-left .chip-label { font-size: 0.62rem; }
.venue-drawer-left .chip-remove { font-size: 0.75rem; }
.venue-drawer-left .chip-edit { font-size: 0.65rem; }
.venue-drawer-left .chip-refresh { font-size: 0.65rem; }

.venue-form-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.venue-drawer .add-venue-form { flex-shrink: 0; }

/* Right column: direct sources */
.venue-direct-sources {
  border-left: 1px solid var(--border);
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.vds-heading {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  padding-bottom: 2px;
}
.vds-heading-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.vds-heading-row .vds-heading { padding-bottom: 0; }
.vds-enable-all {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: 4px;
}
.vds-enable-all:hover { color: var(--text); border-color: var(--text-dim); }
.vds-multi-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.vds-multi-row .vds-row {
  flex: 1 1 auto;
  min-width: 0;
}
.vds-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vds-label {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.vds-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.venue-drawer-close {
  position: absolute;
  top: 12px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  z-index: 1;
}
.venue-drawer-close:hover { color: var(--text); background: var(--border); }
.venue-drawer-close-label { line-height: 1; }

/* ── Main layout ──────────────────────────────────────────────── */
.main-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 16px 24px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  align-items: start;
}

.main-layout.panel-open {
  grid-template-columns: 1fr 400px;
}

/* ── Calendar section ─────────────────────────────────────────── */
.calendar-section { min-width: 0; }

.month-nav-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.month-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 6px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  padding: 12px 24px;
  box-sizing: border-box;
}
.month-nav-bar.view-agenda .month-nav {
  padding: 0;
}

/* Desktop only: keep the agenda filter bar docked below the header on scroll */
@media (min-width: 601px) {
  .month-nav-bar.view-agenda {
    position: sticky;
    top: var(--header-h, 64px);
    z-index: 15;
  }
}

.month-nav h2 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  min-width: 220px;
}

.month-nav .nav-btns { display: flex; gap: 6px; margin-left: auto; }

.nav-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  width: 34px;
  height: 34px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1;
}
.nav-btn:hover { background: var(--surface2); border-color: var(--accent); }

.today-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 0 12px;
  height: 34px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.today-btn:hover { background: var(--surface2); color: var(--text); }

/* ── View toggle ──────────────────────────────────────────────── */
.view-toggle {
  display: flex;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  transition: border-color 0.15s;
}
.view-toggle:hover { border-color: var(--accent); }

.view-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.view-btn:hover { color: var(--text); }
.view-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ── Agenda view ──────────────────────────────────────────────── */
.agenda-view {
  display: flex;
  flex-direction: column;
}

.agenda-day { margin-bottom: 8px; }

.agenda-date-header {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  padding: 14px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.agenda-date-header.today { color: var(--text); }

.today-pill {
  background: var(--today-color);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.06em;
}

.agenda-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  transition: background 0.12s;
  border-radius: 8px;
}
.agenda-row:hover { background: var(--surface2); }
.agenda-row:last-child { border-bottom: none; }

/* Individual festival-day sets nested under their festival's master row */
.agenda-row--nested {
  margin-left: 36px;
  margin-right: 20px;
  padding-left: 14px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.agenda-row--nested .agenda-thumb { width: 56px; height: 56px; }
/* Set time moves inline next to the name, so actions sit right under the
   stage badge instead of spread across the row's full height. */
.agenda-row--nested .agenda-right { justify-content: flex-start; gap: 8px; }
/* Name + full time range can run long — wrap instead of ellipsis-clipping
   the time, unlike the single-line truncation used elsewhere. */
.agenda-row--nested .agenda-event-name {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
/* Desktop: show the stage name under the artist name (like mobile already
   does) instead of as a separate right-side badge, for nested festival sets. */
@media (min-width: 601px) {
  .agenda-row--nested .title-venue {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c);
    margin-top: 2px;
    letter-spacing: 0.01em;
  }
  .agenda-row--nested .agenda-right .venue-badge-inline {
    display: none;
  }
}
.agenda-inline-time {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-weight: 500;
  margin-left: 8px;
}
.set-duration {
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.7;
}

.agenda-thumb {
  width: 90px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface2);
}
.agenda-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agenda-thumb--empty { opacity: 0; }

.event-card-img--placeholder {
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--border);
}
.event-card-img--placeholder::after {
  content: "♪";
  font-size: 1.6rem;
  opacity: 0.4;
}

.agenda-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 60px; /* match thumbnail so address bottom-aligns with image */
}

/* Full-address dropdown in the left info column */
.agenda-info .addr-dropdown {
  margin-top: auto;
  padding-top: 2px;
}
.agenda-info .addr-options {
  left: 0;
  right: auto;
}

.agenda-event-name {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agenda-supporting {
  font-size: 0.77rem;
  color: var(--text-dim);
}
.tour-name {
  font-weight: 600;
  color: var(--text-secondary);
}

/* Row of small status badges (New/conflict/Free/age) — flex-row so they
   sit side by side instead of each stacking on its own line, which is
   what happened when they were bare siblings inside .agenda-info's
   flex-column (each one became its own full-width flex item). */
.agenda-badges {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* "Newly added" highlight — shows published within the last 7 days */
.new-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
  padding: 1px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.event-card-body .new-badge { margin-bottom: 8px; }


.agenda-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 5px;
  flex-shrink: 0;
}

.agenda-times {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-end;
}
.agenda-time {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-weight: 500;
}
.time-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin-right: 4px;
}
/* Mobile-only icon + compact time ("6:30p") — swapped in for .time-label +
   .time-full via the max-width:600px override below. */
.time-icon {
  display: none;
  vertical-align: -1px;
  margin-right: 3px;
  opacity: 0.65;
}
.time-compact { display: none; }

/* ── Address directions dropdown ──────────────────────────────────────────── */
.addr-dropdown {
  position: relative;
  display: inline-block;
}

.addr-summary {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  list-style: none;
  font-size: 0.72rem;
  color: var(--text-dim);
  user-select: none;
  transition: color 0.15s;
}
.addr-summary::-webkit-details-marker { display: none; }
.addr-summary:hover { color: var(--text); }
.addr-dropdown[open] .addr-summary { color: var(--text); }
.addr-dropdown[open] .addr-pin-icon { color: var(--accent); }

.addr-pin-icon {
  flex-shrink: 0;
  transition: color 0.15s;
}
.addr-summary:hover .addr-pin-icon { color: var(--accent); }

.addr-city-text { line-height: 1; }
.addr-text-short { display: none; }

.addr-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  z-index: 200;
  min-width: 230px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

.addr-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 0.8rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.addr-option:hover {
  background: var(--accent-glow);
  color: var(--accent);
}


/* Event card — block, with spacing matching old address line */
.event-card-body .addr-dropdown {
  display: block;
  margin-bottom: 8px;
  margin-top: -4px;
}


.agenda-ticket-btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-text);
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.agenda-ticket-btn:hover { opacity: 0.85; }

.agenda-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Add to Calendar dropdown ─────────────────────────────────── */
.cal-dropdown {
  position: relative;
}

.cal-summary {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 2px;
  color: var(--text-dim);
  cursor: pointer;
  list-style: none;
  user-select: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.cal-summary::-webkit-details-marker { display: none; }
.cal-summary:hover { color: var(--text); }
.cal-dropdown[open] .cal-summary { color: var(--accent); }

.cal-chevron {
  font-size: 0.65rem;
  transition: transform 0.15s;
  display: inline-block;
}
.cal-dropdown[open] .cal-chevron { transform: scaleY(-1); }

.cal-options {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  min-width: 180px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  z-index: 100;
}

.cal-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  transition: background 0.12s;
}
.cal-option:hover { background: var(--border); }

.cal-brand-icon,
.maps-brand-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

/* ── Ticket link ──────────────────────────────────────────────────── */
.ticket-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.15s;
}
.ticket-btn-primary:hover { color: var(--accent); }

.ticket-free-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--free-color, #38bdf8);
  letter-spacing: 0.04em;
}

.agenda-empty {
  color: var(--text-dim);
  text-align: center;
  padding: 20px 20px;
  font-size: 0.9rem;
}

.event-summary {
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: center;
}
.event-summary strong { color: var(--accent); }

/* ── Calendar grid ────────────────────────────────────────────── */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.cal-day-header {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-dim);
  padding: 6px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cal-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-height: 96px;
  padding: 9px 10px 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  user-select: none;
}

.cal-cell.empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
  pointer-events: none;
}

.cal-cell:not(.empty):hover {
  background: var(--surface2);
  border-color: #3a3a50;
}

.cal-cell.has-events {
  background: var(--accent-glow);
  border-color: var(--accent-dim);
}

.cal-cell.has-events:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.cal-cell.selected {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 20%, transparent) !important;
}

.day-num {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cal-cell.has-events .day-num { color: var(--text); }

.cal-cell.today .day-num {
  background: var(--today-color);
  color: #fff;
  font-weight: 700;
}

.cal-event-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cal-event-item {
  font-size: 0.67rem;
  font-weight: 600;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  border-left: 2px solid var(--c);
  padding: 1px 4px;
  border-radius: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.cal-event-more {
  font-size: 0.62rem;
  color: var(--text-dim);
  font-weight: 600;
  padding-left: 3px;
  margin-top: 1px;
}

/* ── Status ───────────────────────────────────────────────────── */
.status-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  font-size: 0.95rem;
  color: var(--text-dim);
  flex-direction: column;
  gap: 10px;
}
.status-msg.error { color: #ff6b6b; }

/* ── Day panel ────────────────────────────────────────────────── */
.day-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 12px;
  position: sticky;
  top: 74px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* ── Compact day panel rows ───────────────────────────────────── */
.dpr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid var(--c);
  padding-left: 8px;
  border-radius: 4px;
  margin-bottom: 4px;
}
.dpr-row:last-child { border-bottom: none; margin-bottom: 0; }
.dpr-thumb {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface2);
}
.dpr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dpr-thumb--empty { background: color-mix(in srgb, var(--c) 15%, var(--surface2)); }
.dpr-info {
  flex: 1;
  min-width: 0;
}
.dpr-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dpr-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
}
.dpr-time {
  font-size: 0.6rem;
  color: var(--text-dim);
  font-weight: 600;
}
.dpr-venue {
  font-size: 0.6rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dpr-actions {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}
.dpr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.1s, border-color 0.1s;
}
.dpr-btn:hover { color: var(--text); border-color: var(--accent); }
.dpr-btn.saved { color: var(--accent); border-color: var(--accent); }
.dpr-actions .addr-dropdown {
  position: relative;
  display: flex;
}
.dpr-actions .addr-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  cursor: pointer;
  list-style: none;
  transition: color 0.1s, border-color 0.1s;
}
.dpr-actions .addr-summary::-webkit-details-marker { display: none; }
.dpr-actions .addr-summary:hover { color: var(--text); border-color: var(--accent); }
.dpr-actions .addr-dropdown[open] .addr-options {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  min-width: 200px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.day-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.day-panel-date {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.close-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.close-btn:hover { color: var(--text); background: var(--border); }

.no-shows {
  color: var(--text-dim);
  font-size: 0.875rem;
  padding: 20px 0;
}

/* ── Event card ───────────────────────────────────────────────── */
.event-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface2);
  margin-bottom: 12px;
  transition: border-color 0.15s;
}
.event-card:last-child { margin-bottom: 0; }
.event-card:hover { border-color: #3a3a50; }

.event-card-img {
  width: 100%;
  height: 148px;
  overflow: hidden;
  background: var(--border);
}

.event-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.event-card:hover .event-card-img img { transform: scale(1.03); }

.event-card-body { padding: 14px; }

.venue-badge-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c);
  margin-bottom: 6px;
}
.venue-badge-link {
  text-decoration: none;
  transition: opacity 0.15s;
}
.venue-badge-link:hover { opacity: 0.75; }

.venue-badge-inline::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c);
  flex-shrink: 0;
}

.event-card-name {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
}

.event-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.event-time {
  font-size: 0.8rem;
  color: var(--text);
  font-weight: 600;
}
.event-door {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.performers-list {
  margin-bottom: 10px;
}

.performer-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-dim);
  padding: 2px 0;
}
.performer-item.headliner {
  color: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
}

.headliner-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  padding: 1px 5px;
  border-radius: 4px;
  flex-shrink: 0;
}

.evening-with-label {
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  opacity: 0.55;
  flex-shrink: 0;
}

.ticket-section { display: flex; flex-direction: column; gap: 10px; }

/* ── Header actions (venues + appearance) ─────────────────────── */
.app-title { gap: 10px; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ── Appearance picker (theme + accent combined) ──────────────── */
.appearance-picker { position: relative; }

.appearance-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.appearance-btn:hover,
.appearance-picker.open .appearance-btn { color: var(--text); border-color: var(--accent); }

.appearance-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
  border: 1.5px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
}
html.light .appearance-dot { border-color: rgba(0,0,0,0.18); }

.appearance-chevron {
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: transform 0.2s;
}
.appearance-picker.open .appearance-chevron { transform: rotate(180deg); }

.appearance-panel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  z-index: 200;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
html.light .appearance-panel { box-shadow: 0 8px 28px rgba(0,0,0,0.10); }

.appearance-section-label {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
}

.theme-options {
  display: flex;
  gap: 6px;
}

.theme-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.theme-option:hover { color: var(--text); }
.theme-option.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}

.appearance-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

.accent-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.accent-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
  flex-shrink: 0;
  padding: 0;
}
.accent-swatch:hover { transform: scale(1.2); }
.accent-swatch.active {
  border-color: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
}
html.light .accent-swatch.active { border-color: #333; box-shadow: 0 0 0 2px rgba(0,0,0,0.15); }

.bg-swatch-reset {
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}
.bg-swatch-reset.active { border-color: #fff; color: var(--text); }

.accent-custom {
  width: 100%;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--surface);
  padding: 2px;
}

.font-size-az {
  display: flex;
  justify-content: space-between;
  padding: 0 36px;
  align-items: flex-end;
  margin-bottom: 4px;
}
.font-az-sm { font-size: 0.65rem; color: var(--text-dim); line-height: 1; }
.font-az-lg { font-size: 1.1rem;  color: var(--text-dim); line-height: 1; }

.font-size-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.font-slider-track {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.font-slider-ticks {
  display: flex;
  justify-content: space-between;
  padding: 0 6px;
  margin-top: 4px;
}
.font-slider-ticks span {
  width: 2px;
  height: 5px;
  background: var(--text-dim);
  border-radius: 1px;
  opacity: 0.5;
}
.font-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  outline: none;
  cursor: pointer;
}
.font-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.font-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}
.font-step-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 1rem;
  font-weight: 600;
  width: 28px;
  height: 28px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  line-height: 1;
}
.font-step-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.font-step-btn:disabled { opacity: 0.3; cursor: default; }

.settings-io {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.settings-io-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 0;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.settings-io-btn:hover { border-color: var(--accent); color: var(--text); }

/* ── Bookmark button ──────────────────────────────────────────── */
.bookmark-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s;
  flex-shrink: 0;
  padding: 2px;
}
.bookmark-btn:hover { color: var(--accent); }
.bookmark-btn.saved { color: var(--accent); }

/* ── My Shows count badge on view toggle ──────────────────────── */
.mycal-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 9px;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0 4px;
  margin-left: 1px;
  line-height: 1;
}

/* ── My Shows subscribe bar ───────────────────────────────────── */
.mycal-subscribe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  position: relative;
}
/* When nested inline inside .month-nav (My Shows: sits beside the h2 rather
   than as its own full-width row like Agenda's), the border-top/padding
   above are for a full-width block and just render as a floating line. */
.month-nav .mycal-subscribe {
  border-top: none;
  padding: 0;
}
.agenda-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.mycal-sub-webcal {
  position: absolute;
  right: 24px;
}

.mycal-sub-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.mycal-sub-btn:hover { color: var(--text); border-color: var(--accent); }
.mycal-sub-btn.copied {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
/* Subscribe button sits at the right edge of the controls row */
.mycal-sub-webcal { flex-shrink: 0; }

/* Agenda show count, above the first date group */
.agenda-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  padding: 0 4px;
}
.agenda-count {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: 0;
}
.agenda-count strong { color: var(--accent); font-weight: 700; }
.clear-myshows-btn {
  font-size: 0.72rem;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
}
.clear-myshows-btn:hover { color: var(--text); border-color: var(--text-dim); }


/* "Show Newly Added" filter toggle — green to match the badge, filled when on */
.mycal-sub-btn.toggle-new:hover { color: var(--green); border-color: var(--green); }
.mycal-sub-btn.toggle-new.active {
  color: var(--accent-text);
  background: var(--green);
  border-color: var(--green);
}

/* "Tonight" filter toggle — pink, distinct from New's teal */
.mycal-sub-btn.toggle-tonight:hover { color: var(--tonight-color, #ec4899); border-color: var(--tonight-color, #ec4899); }
.mycal-sub-btn.toggle-tonight.active {
  color: #fff;
  background: var(--tonight-color, #ec4899);
  border-color: var(--tonight-color, #ec4899);
}

/* "Free" filter toggle — teal accent */
.mycal-sub-btn.toggle-free:hover { color: var(--free-color, #38bdf8); border-color: var(--free-color, #38bdf8); }
.mycal-sub-btn.toggle-free.active {
  color: #fff;
  background: var(--free-color, #38bdf8);
  border-color: var(--free-color, #38bdf8);
}

/* Date Range dropdown — jump to a date, or filter to a date range */
.date-range-dropdown { position: relative; }
.date-range-dropdown summary { list-style: none; }
.date-range-dropdown summary::-webkit-details-marker { display: none; }

.date-range-popover {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.date-range-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--text-dim);
  font-weight: 600;
}
.date-range-optional { font-weight: 400; text-transform: none; }

/* Venue picker dropdown — quick multi-select enable/disable from Agenda's sub-header */
.venue-picker-dropdown { position: relative; }

.venue-picker-popover {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  min-width: 240px;
  max-width: 280px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.venue-picker-actions {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.venue-picker-action {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 0;
  cursor: pointer;
}
.venue-picker-action:hover { color: var(--text); border-color: var(--text-dim); }

.venue-picker-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
}

.venue-picker-group-heading {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  padding: 6px 4px 2px;
}
.venue-picker-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 4px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text);
}
.venue-picker-group { padding-left: 16px; }
.venue-picker-row:hover { background: var(--surface); }
.venue-picker-row input[type="checkbox"] { margin: 0; cursor: pointer; flex-shrink: 0; }
.venue-picker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.venue-picker-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.date-range-field input[type="date"] {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 8px;
  font-size: 0.8rem;
  color-scheme: dark;
}

.date-range-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.date-range-go, .date-range-clear {
  flex: 1;
  border-radius: 6px;
  border: 1px solid var(--border);
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.date-range-go {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.date-range-clear {
  background: none;
  color: var(--text-dim);
}
.date-range-clear:hover { color: var(--text); border-color: var(--text-dim); }

/* FREE badge on agenda rows */
.free-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--free-color, #38bdf8);
  background: color-mix(in srgb, var(--free-color, #38bdf8) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--free-color, #38bdf8) 35%, transparent);
  padding: 1px 4px;
  border-radius: 6px;
  white-space: nowrap;
  letter-spacing: 0;
  margin-left: 4px;
  flex-shrink: 0;
  vertical-align: middle;
}
/* Inside the badges row, spacing comes from its flex gap instead — the
   base margin-left above is still needed for .free-badge's other uses
   (venue chips, venue picker) where it isn't wrapped in that row. */
.agenda-badges .free-badge { margin-left: 0; }

/* Age restriction badge on agenda rows — shown whenever the source calls it out (All Ages, 18+, 21+) */
.age-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--age-color, #f59e0b);
  background: color-mix(in srgb, var(--age-color, #f59e0b) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--age-color, #f59e0b) 35%, transparent);
  padding: 1px 4px;
  border-radius: 6px;
  white-space: nowrap;
  letter-spacing: 0;
  flex-shrink: 0;
}

/* Conflict badge on agenda rows */
.conflict-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: #e67e22;
  background: rgba(230, 126, 34, 0.12);
  border: 1px solid rgba(230, 126, 34, 0.3);
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Past shows date header — dimmer than upcoming */
.past-header {
  opacity: 0.65;
}

/* ── Venue quick-add buttons ──────────────────────────────────────── */
.fa-quickadd-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.fa-venue-btn {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.fa-venue-btn:hover:not(:disabled) { background: var(--surface); border-color: var(--accent); color: var(--accent); }
.fa-venue-btn.added, .fa-venue-btn:disabled { opacity: 0.45; cursor: default; }

/* Search bar */
.search-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
}
.search-input::placeholder { color: var(--text-dim); }
.search-clear {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.search-clear:hover { color: var(--text); }

/* Music platform dropdown */
.music-dropdown { position: relative; }
.music-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 2px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
}
.music-btn:hover { color: var(--text); }
.music-label { font-size: 0.82rem; font-weight: 500; }
.music-options {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  min-width: 170px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  z-index: 200;
}
.music-loading, .music-none {
  display: block;
  padding: 10px 14px;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.music-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  transition: background 0.12s;
}
.music-option:hover { background: var(--border); }

/* Setlist dropdown */
.setlist-dropdown { position: relative; }
.setlist-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 2px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
}
.setlist-btn:hover { color: var(--text); }
.setlist-label { font-size: 0.82rem; font-weight: 500; }
.setlist-options {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  width: 260px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  z-index: 200;
  max-height: min(80vh, 600px);
  overflow-y: auto;
}
.setlist-loading, .setlist-none {
  font-size: 0.8rem;
  color: var(--text-dim);
}
.setlist-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 7px;
}
.setlist-date { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.setlist-venue { font-size: 0.75rem; color: var(--text-dim); }
.setlist-songs {
  margin: 0 0 8px;
  padding: 0 0 8px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.setlist-songs li {
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.4;
}
.setlist-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.setlist-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.setlist-link:hover { text-decoration: underline; }
.setlist-copy-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-dim);
  font-size: 0.75rem;
  padding: 2px 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.setlist-copy-btn:hover { color: var(--text); border-color: var(--text-dim); }

.btn-label-mobile { display: none; }
@media (max-width: 600px) {
  .btn-label-full { display: none; }
  .btn-label-mobile { display: inline; }
  .desktop-only { display: none !important; }

  /* Tighten the Agenda filter row so Venues/Date/Tonight/Free/New fit on
     one line instead of the last button wrapping. */
  .agenda-filters { gap: 5px; flex-wrap: nowrap; }
  .agenda-filters .mycal-sub-btn { padding: 7px 8px; gap: 3px; }
}

/* ── My Shows empty state ─────────────────────────────────────── */
.mycal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 80px 24px;
  color: var(--text-dim);
  text-align: center;
}
.mycal-empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.mycal-empty-sub {
  font-size: 0.85rem;
  max-width: 280px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Responsive: icon-only buttons on mobile ─────────────────── */
.ticket-icon { display: block; flex-shrink: 0; }

@media (max-width: 600px) {
  /* Non-nested rows: times align with the venue line, action icons align
     with the address line. The title/venue/badges/support/address column
     and the times/icons column flow independently, so matching their rows
     up needs real grid row-tracking — flexbox can't do it. Uses CSS subgrid
     (NOT display:contents — that combo silently fails to render on Safari/
     iOS when paired with an absolutely-positioned sibling, which is exactly
     what the thumbnail is here). .agenda-info/.agenda-right stay real grid
     containers whose rows subgrid from the parent, so row N lines up
     across both columns. Explicit grid-template-rows (not implicit/auto-
     generated) per Safari's own subgrid guidance. Thumbnail is absolute-
     positioned rather than spanning the grid rows — a spanning item forces
     the browser to dump its full height onto one arbitrary auto track
     (empirically, row 1, blowing the title row out to 70px tall) instead of
     distributing across all rows. */
  .agenda-row:not(.agenda-row--nested) {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: repeat(5, auto);
    padding-left: 78px;
    min-height: 70px;
    column-gap: 8px;
    row-gap: 2px;
    align-items: start;
  }
  .agenda-row:not(.agenda-row--nested) .agenda-thumb { position: absolute; left: 0; top: 0; }
  .agenda-row:not(.agenda-row--nested) .agenda-info,
  .agenda-row:not(.agenda-row--nested) .agenda-right {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    align-content: start;
    align-items: start;
    min-width: 0;
  }
  .agenda-row:not(.agenda-row--nested) .agenda-info  { grid-column: 1; }
  .agenda-row:not(.agenda-row--nested) .agenda-right {
    grid-column: 2;
    justify-items: end;
  }
  /* Was margin-top:auto to bottom-align address in the old flex-column
     layout — grid row-tracking handles that now. */
  .agenda-row:not(.agenda-row--nested) .addr-dropdown { margin-top: 0; }
  .agenda-actions {
    flex-direction: row;
    justify-content: flex-end;
    gap: 1px;
  }
  .ticket-label, .music-label, .setlist-label, .cal-chevron { display: none; }
  /* A few px smaller/tighter than before — claws back some width for the
     title column (this row was 82-103px wide for 4-5 icons). */
  .agenda-actions .bookmark-btn,
  .agenda-actions .ticket-btn-primary,
  .agenda-actions .music-btn,
  .agenda-actions .setlist-btn,
  .agenda-actions .cal-summary {
    padding: 3px;
  }
  .agenda-actions svg { width: 10px; height: 10px; }
  /* Override global tap-target sizes for icons inside the agenda action strip */
  .agenda-actions .bookmark-btn svg { width: 10px; height: 10px; }
  .agenda-actions .ticket-btn-primary svg { width: 10px; height: 10px; }
  .agenda-row { gap: 8px; }
  .agenda-thumb { width: 70px; height: 70px; }
  .agenda-row--nested { margin-left: 14px; margin-right: 0; padding-left: 8px; }
  .agenda-row--nested .agenda-thumb { width: 48px; height: 48px; }

  /* Tighten line-height + font size so the text column's height tracks
     closer to the 70px thumbnail instead of consistently running taller. */
  .agenda-info { gap: 2px; }
  .agenda-row:not(.agenda-row--nested) .agenda-event-name { font-size: 0.85rem; line-height: 1.18; }
  .agenda-row:not(.agenda-row--nested) .agenda-supporting { font-size: 0.72rem; line-height: 1.25; }
  .agenda-info .addr-summary { font-size: 0.68rem; }

  /* Pair stage name + set time on one line instead of the name; keep the
     festival name (below) to a single line so it doesn't eat extra height. */
  .agenda-row--nested .agenda-event-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 0;
    column-gap: 8px;
  }
  .agenda-row--nested .title-short { flex: 1 0 100%; order: 1; }
  .agenda-row--nested .agenda-inline-time { order: 2; margin-left: 0; min-width: 62px; }
  .agenda-row--nested .title-venue { order: 3; margin-top: 0; }
  .agenda-row--nested .agenda-supporting {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Redundant on mobile — the festival's own listing already implies this */
  .festival-various { display: none; }
  /* Same: the act is already nested under its festival's master row, so
     repeating the festival name on every set is redundant on mobile. */
  .festival-tag { display: none; }

  /* Larger tap targets on mobile (outside agenda strip) */
  .bookmark-btn { padding: 8px; }
  .bookmark-btn svg { width: 18px; height: 18px; }
  .ticket-btn-primary { padding: 8px; }
  .ticket-btn-primary svg { width: 16px; height: 16px; }
  .agenda-ticket-btn { padding: 8px 14px; font-size: 0.8rem; }

  /* Allow event titles to wrap, but cap at 2 lines — a long album-release-
     style title could otherwise wrap 4+ lines and tower over the 70px
     thumbnail, leaving a lot of dead space beneath it. Clamp title-short
     itself, not the whole .agenda-event-name box — that box also contains
     the venue-name line right after the title, which a box-level clamp
     would cut off along with any title overflow. */
  .agenda-event-name {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .agenda-row:not(.agenda-row--nested) .title-short {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Doors/Show times: icon + compact time ("6:30p") instead of the text
     label + full "6:30 PM" — much narrower, and groups tightly with the
     action icons right below instead of needing as much width. */
  .agenda-time { display: flex; align-items: center; }
  .time-label, .time-full { display: none; }
  .time-icon, .time-compact { display: inline-flex; align-items: center; }
  .time-compact { display: inline; }

  /* Show artist-only title; hide full "Artist at Venue" title */
  .title-full  { display: none; }
  .title-short { display: block; }

  /* Cap the support-act line to one line, ellipsized — was wrapping 2-3
     lines for a long bill, the biggest single contributor to rows towering
     over the thumbnail. */
  .agenda-row:not(.agenda-row--nested) .agenda-supporting {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Address: the info column is narrow once the thumbnail and the times/
     icons column both claim their space, so the full street address (fine
     on desktop's wider row) isn't worth the space here — show city/state
     only, same full/short swap the title uses. Full address + directions
     are still one tap away in the dropdown. */
  .agenda-info .addr-summary { min-width: 0; }
  .agenda-info .addr-city-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .agenda-info .addr-text-full  { display: none; }
  .agenda-info .addr-text-short { display: block; }

  /* Hide redundant right-side venue badge */
  .agenda-right .venue-badge-inline { display: none; }

  /* On mobile: hide Month button; keep Agenda + My Shows */
  .view-btn-month { display: none; }
  .agenda-count { display: none; }
  .mycal-subscribe { margin-bottom: 8px; }
  /* Agenda filter bar: This Weekend + Subscribe are desktop-only */
  .month-nav-bar.view-agenda .toggle-weekend { display: none; }
  .month-nav-bar.view-agenda .mycal-sub-webcal { display: none; }
  .agenda-date-header { padding-top: 6px; font-size: 0.68rem; }
  .nav-btns .nav-btn, .nav-btns .today-btn { display: none; }
  /* Compact the remaining toggle buttons */
  .view-label { display: none; }
  .view-btn { padding: 6px 10px; gap: 0; }
  .view-toggle { gap: 1px; }

  /* Mobile venue drawer — stack columns */
  .venue-drawer.open { padding: 10px 14px; }
  .venue-drawer-cols { grid-template-columns: 1fr; gap: 12px; }
  /* On mobile, direct sources move to the sources-drawer; hide from venue drawer */
  .venue-direct-sources { display: none; }
  /* Sources entry button — visible on mobile only */
  .sources-entry-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
  }
  .sources-entry-btn:hover { background: var(--accent); color: #fff; }
  /* Sources drawer: full-width below header, scrollable */
  .sources-drawer.open {
    display: block;
    position: relative;
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 10px 14px 14px;
    max-height: 70vh;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .sources-drawer-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
  .vds-multi-row { gap: 4px; }
  .vds-multi-row .vds-row:first-child { flex: 0.75 1 auto; }
  .venue-form-row { width: 100%; }
  .venue-form-row .add-venue-form { flex: 1; min-width: 0; }
  .venue-drawer .add-venue-form input { flex: 1; min-width: 0; width: auto; }
  .venue-drawer.open { overflow-x: hidden; }
  .venue-drawer-btn { padding: 6px 10px; font-size: 0.78rem; }

  /* Tighten mobile layout spacing */
  .main-layout { padding: 8px 14px; }
  .month-nav h2 { display: none; }
  .month-nav { padding: 4px 14px; gap: 8px; align-items: center; flex-wrap: nowrap; }
  .month-nav .nav-btns { order: 2; }
  .month-nav .mycal-subscribe { order: 1; margin-bottom: 0; gap: 4px; flex: 1; flex-wrap: nowrap; align-items: center; }
  .month-nav .mycal-subscribe .mycal-past-toggle { margin-left: auto; }
  .month-nav .mycal-subscribe .agenda-new-btn { margin-left: auto; margin-right: 6px; }
  .month-nav .mycal-subscribe .btn-label-full { display: none; }
  .month-nav .mycal-subscribe .mycal-sub-webcal { display: none; }
  .month-nav .mycal-subscribe .toggle-weekend { display: none; }
  .nav-view-label { font-size: 0.8rem; font-weight: 600; color: var(--text-dim); white-space: nowrap; }

  .month-nav .mycal-subscribe .mycal-sub-btn { padding: 6px 8px; font-size: 0.72rem; }

  /* Tighten mobile header row — 3-column layout centers the nav icons
     regardless of how wide the logo or right-side controls end up */
  .header-row { display: grid; grid-template-columns: auto 1fr auto; padding: 6px 14px; gap: 6px; }
  .app-title { justify-self: start; }
  .header-view-toggle { justify-self: center; }
  .header-actions { justify-self: end; }
  .app-title h1 { display: none; }
  .nav-btns .view-toggle { display: none; }
  .venue-drawer-btn { padding: 5px 8px; font-size: 0.73rem; gap: 4px; border: none; }
  .venue-drawer-label { display: none; }
  .venue-count-badge { display: none; }
  .venue-chip { font-size: 0.68rem; padding: 4px 8px 4px 6px; }
  .appearance-dot { display: none; }
  .appearance-btn { padding: 5px 8px; gap: 4px; border: none; }
  .view-toggle { border: none; }
  .mycal-sub-btn { border: none; }
  .appearance-panel { right: 0; left: auto; }

  /* Search / Past Shows: full-width input instead of shrink-to-fit. Padding
     reduced from the base 8px — .search-bar-wrap is nested inside .month-nav
     (which already contributes its own 8px top/bottom), so the base padding
     double-stacked and made this row taller than every other tab's. */
  .search-bar-wrap { width: 100%; margin: 0; padding: 6px 12px; box-sizing: border-box; }

  /* Agenda filter row: the base .mycal-subscribe padding was bumped for
     desktop height-matching, but Agenda's bar isn't nested inside
     .month-nav (unlike My Shows), so it never picked up the compact
     mobile padding — reset it here. Its border-top is also its own
     (separate from .app-header's border-bottom below) and creates the
     same kind of redundant seam right under the icon row. The base
     class also carries a margin-bottom (for desktop spacing before the
     event list) that the nested My Shows/agenda-new-btn case zeroes
     out but this non-nested case never did, making Agenda's row taller
     on the bottom than every other tab's sub-header row. */
  .month-nav-bar.view-agenda .mycal-subscribe { padding: 4px 14px; margin-bottom: 0; border-top: none; }

  /* Header/sub-header/content all share the same background on mobile —
     the borders were just stray seams, not meaningful dividers */
  .app-header, .month-nav-bar { border-bottom: none; }

  /* My Shows: Clear all is a rare, destructive action — save the space */
  .clear-myshows-btn { display: none; }

  /* Jump to Date popover: centering on the button (its default, desktop
     behavior) pushes it off the left edge of the screen, since the
     button sits near the left of the filter row on mobile. Anchor to
     the button's left edge instead. */
  .date-range-popover { left: 0; transform: none; }

  /* Venue name as small colored subheading below artist */
  .title-venue {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c);
    margin-top: 2px;
    letter-spacing: 0.01em;
  }
}

/* Desktop: full title only — hide the mobile-only pieces */
@media (min-width: 601px) {
  .title-short { display: none; }
  .title-venue { display: none; }
  .nav-view-label { display: none; }
  .month-nav .mycal-subscribe { margin-bottom: 0; width: 100%; }
  /* View toggle is always in the header; hide the secondary copy */
  .nav-btns .view-toggle { display: none; }
  .header-row .app-title { flex: 1; }
  .header-row .header-actions { flex: 1; justify-content: flex-end; margin-left: 0; }
  /* Direct source rows: label left, buttons right on desktop */
  .vds-row { flex-direction: row; align-items: baseline; gap: 8px; }
  .vds-label { font-size: 0.68rem; text-transform: none; letter-spacing: normal; font-weight: 600; min-width: 100px; flex-shrink: 0; }
  /* My Shows: keep Past Shows + Subscribe inline with h2 */
  .view-mycal .month-nav .nav-btns { margin-left: 0; }
  .view-mycal .month-nav .mycal-subscribe { width: auto; margin-left: auto; }
  /* Upcoming Shows: subscribe bar is now a separate full-width row */
  .view-agenda .month-nav .nav-btns { margin-left: 0; }
  /* Search / Past Shows: input bar fills remaining header space */
  .view-search .month-nav .nav-btns { margin-left: 0; }
  .view-search .month-nav h2 { min-width: 0; }
  .view-search .month-nav .search-bar-wrap { flex: 1; margin: 0; margin-left: 16px; }
  .view-past .month-nav .nav-btns { margin-left: 0; }
  .view-past .month-nav h2 { min-width: 0; }
  .view-past .month-nav .search-bar-wrap { flex: 1; margin: 0; margin-left: 16px; }
}

/* ── Footer stats ─────────────────────────────────────────────── */
.app-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 24px 18px;
  font-size: 0.68rem;
  color: var(--text-dim);
  opacity: 0.55;
  letter-spacing: 0.02em;
  transition: opacity 0.2s;
}
.app-footer:hover { opacity: 0.85; }
.footer-text { display: flex; align-items: center; gap: 0; flex-wrap: wrap; justify-content: center; }
.footer-sep { margin: 0 6px; opacity: 0.5; }
.footer-warn { color: var(--today-color); font-weight: 500; }

/* ── Image lightbox ────────────────────────────────────────────── */
.agenda-thumb:not(.agenda-thumb--empty):not(.event-card-img--placeholder),
.event-card-img:not(.event-card-img--placeholder),
.dpr-thumb:not(.dpr-thumb--empty):not(.event-card-img--placeholder) {
  cursor: zoom-in;
}
.agenda-thumb:not(.agenda-thumb--empty) img,
.event-card-img img,
.dpr-thumb:not(.dpr-thumb--empty) img {
  transition: opacity 0.12s;
}
.agenda-thumb:not(.agenda-thumb--empty):hover img,
.event-card-img:hover img,
.dpr-thumb:not(.dpr-thumb--empty):hover img {
  opacity: 0.8;
}

#img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: lightbox-in 0.15s ease;
}
#img-lightbox[hidden] { display: none; }
@keyframes lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 60px rgba(0, 0, 0, 0.7);
  cursor: default;
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 1.4rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

body.lightbox-open { overflow: hidden; }