/* ── Active pill (used on schedule page nav) ──────────────────────────────── */

.pill--active {
  background: var(--purple);
  color: var(--white) !important;
  border-color: var(--purple);
}

/* ── Schedule main ───────────────────────────────────────────────────────── */
/* z-index: 10 keeps it above the header waves that bleed 720 px downward.   */
/* padding-bottom gives the footer's purple wave (top: -320px) room to sit   */
/* in empty space rather than overlapping the schedule grid.                  */

.sched-main {
  position: relative;
  z-index: 10;
  padding-bottom: 100px;
}

/* ── Schedule page intro ──────────────────────────────────────────────────── */

.sched-intro {
  padding: 28px 0 16px;
  text-align: center;
}

.sched-intro p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 1rem;
}

/* ── Legend ───────────────────────────────────────────────────────────────── */

.sched-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: center;
  padding: 12px 1rem 20px;
}

.sched-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
}

.sched-legend__swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── Outer scroll container ───────────────────────────────────────────────── */
/* Fixed height makes this a proper bounded scroll region — both axes work     */
/* freely inside the box, sticky headers work, and users scroll the page by   */
/* touching anywhere outside. This avoids the axis-locking problem on mobile  */
/* that any touch-action workaround can't fully solve.                         */

.sched-scroll {
  overflow: auto;
  max-height: min(75vh, 880px);
  border-top: 2px solid rgba(0,0,0,.10);
  border-bottom: 2px solid rgba(0,0,0,.10);
}

/* ── Sticky header row (time labels) ─────────────────────────────────────── */

.sched-head {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--white);
  border-bottom: 2px solid rgba(0,0,0,.12);
}

.sched-head__corner {
  width: 130px;
  flex-shrink: 0;
  height: 40px;
  position: sticky;
  left: 0;
  z-index: 30;
  background: var(--white);
  border-right: 2px solid rgba(0,0,0,.10);
}

/* Time label bar */
.sched-timebar {
  position: relative;
  height: 40px;
  flex-shrink: 0;
  background: var(--white);
}

.sched-tick {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.63rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1;
  user-select: none;
}

.sched-tick--hour {
  color: var(--ink);
}

/* ── Body: label column + grid area ──────────────────────────────────────── */

.sched-body {
  display: flex;
}

/* Sticky left column with venue label buttons */
.sched-labelcol {
  display: flex;
  flex-direction: column;
  position: sticky;
  left: 0;
  z-index: 10;
  flex-shrink: 0;
  border-right: 2px solid rgba(0,0,0,.10);
}

.sched-vlabel {
  width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 8px;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.15);
  line-height: 1.3;
  letter-spacing: 0.01em;
  cursor: pointer;
  flex-shrink: 0;
}

.sched-vlabel:hover {
  filter: brightness(1.1);
}

.sched-vlabel:focus-visible {
  outline: 3px solid rgba(255,255,255,.7);
  outline-offset: -3px;
}

/* ── Grid area (horizontal venue tracks) ─────────────────────────────────── */

.sched-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/* Vertical grid lines — positioned absolutely, span full grid height via CSS */
.sched-vlines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}

.sched-vline {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed rgba(0,0,0,.07);
}

.sched-vline--hour {
  border-left: 1px solid rgba(0,0,0,.15);
}

/* ── Individual venue track (one horizontal row per venue) ───────────────── */

.sched-vtrack {
  flex-shrink: 0;
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* ── Act block ───────────────────────────────────────────────────────────── */

.sched-act {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 5px;
  padding: 4px 6px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: filter 0.12s, box-shadow 0.12s;
}

.sched-act:hover {
  filter: brightness(1.1);
  z-index: 5;
  box-shadow: 0 3px 10px rgba(0,0,0,.28);
}

.sched-act:focus-visible {
  outline: 3px solid rgba(138,31,120,.45);
  outline-offset: 1px;
  z-index: 5;
}

.sched-act__name {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  display: block;
  word-break: break-word;
}

.sched-act__time {
  font-size: 0.61rem;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ── "Now" indicator (vertical red line at current time on event day) ─────── */

.sched-now-line {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 2px solid #e63946;
  z-index: 8;
  pointer-events: none;
}

.sched-now-line::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e63946;
}