/*
 * The festival programme page's own sticky header, day tabs, friend-list
 * chips, and filter form -- everything above the actual session list/
 * calendar. Every color/type/spacing value is a var() from tokens.css, same
 * rule as every other component (see components.css's own doc comment).
 */

.programme-header {
  position: sticky;
  top: 0;
  z-index: 9;
  background: var(--color-background);
  border-bottom: var(--border-width-rule) solid var(--color-border);
  margin: 0 calc(-1 * var(--space-4));
  padding: 0 var(--space-4);
}

/* In calendar view the day timeline is wider than the page column, so as it scrolls up it would show on
   either side of this narrower sticky header. Give the header a backing as wide as the window (behind its
   own content, with the same rule underneath) so the timeline slides under it and is cut off there.
   The backing is as wide as the window including any scrollbar, hence the clip on the page. */
.programme-header--calendar::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: calc(-1 * var(--border-width-rule));
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--color-background);
  border-bottom: var(--border-width-rule) solid var(--color-border);
}

body:has(.programme-header--calendar) {
  overflow-x: clip;
}

.programme-header__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-2);
}

.programme-header__back {
  flex: none;
  font-weight: var(--font-weight-black);
  font-size: 1rem;
  color: var(--color-text);
  text-decoration: none;
}

.programme-header__title {
  flex: 1 1 auto;
  min-width: 0;
}

.programme-header__name {
  font-weight: var(--font-weight-black);
  font-size: 0.9375rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.programme-header__dates {
  font-size: 0.6875rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Day tabs (horizontal scroll, active day filled in the accent color) */
.day-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-top: 1px solid var(--color-border-subtle);
  /* Run to the header's full width, not just its padded inner width (same technique as
     .programme-header itself against the page shell). */
  margin: 0 calc(-1 * var(--space-4));
  /* Still swipeable/scrollable, just without the browser's own scrollbar. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.day-tabs::-webkit-scrollbar {
  display: none;
}

.day-tabs__link {
  /* Grow to share the bar when there are only a few days; never shrink below the label,
     so many days still overflow and scroll. */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  white-space: nowrap;
  border-right: 1px solid var(--color-border-subtle);
}

.day-tabs__link:hover {
  background: var(--color-accent-tint);
}

.day-tabs__weekday {
  font-size: 0.5625rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.day-tabs__date {
  font-weight: var(--font-weight-black);
  font-size: 0.9375rem;
  line-height: 1.1;
}

/* Friend-list chips row */
.programme-header__lists {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border-subtle);
}

.programme-header__load-list {
  font-size: 0.6875rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-accent);
}

.programme-description {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  margin: var(--space-4) 0;
}

/* Filter form (facets + friend-list toggles) -- closed by default, shown
   only while its own #filters fragment is the current URL target (the
   header's "Filter" button links to it; "Close filters" below links back
   to a bare "#" to clear the fragment) -- no client-side script involved,
   same as every other toggle on this page. */
.programme-filters {
  display: none;
  border: var(--border-width-rule) solid var(--color-border);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  /* The sticky .programme-header (back/title row + day tabs + view toggle,
     tallest with all three present) sits pinned over the top of the
     viewport, so jumping straight to #filters's own top edge tucks it
     behind that header -- confirmed live. scroll-margin-top can't read the
     header's actual rendered height in pure CSS, so this is a fixed value
     generous enough to clear it in every combination rather than an exact
     measurement; a little extra gap above the panel beats it being hidden. */
  scroll-margin-top: 14rem;
}

.programme-filters:target {
  display: block;
}

/* Label and input share one row, every label the same fixed width (long
   enough for "Certificate", the longest one) so every input lines up in a
   column regardless of its own label's length. */
.programme-filters .field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.programme-filters .field > span {
  flex: 0 0 6rem;
  margin-bottom: 0;
}

.programme-filters .field > .input {
  flex: 1 1 auto;
}

.programme-filters__lists {
  border: 1px solid var(--color-border-subtle);
  padding: var(--space-3);
  margin: 0 0 var(--space-3);
}

.programme-filters__lists legend {
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0 var(--space-1);
}

.programme-filters__list-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  margin-bottom: var(--space-2);
}

.programme-filters__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.programme-filters__close {
  margin-left: auto;
}

.programme-empty {
  color: var(--color-text-muted);
  margin: var(--space-6) 0;
}

/* Day heading (List view) */
.programme-day {
  margin-top: var(--space-2);
}

.programme-day__heading {
  /* Day-tab links jump here; the sticky .programme-header would otherwise
     cover the first session (see .programme-filters for why this is a
     fixed generous value rather than a measured one). */
  scroll-margin-top: 14rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-2);
  margin: 0 calc(-1 * var(--space-4));
}

.programme-day__heading h1 {
  font-size: 1.375rem;
  line-height: 1;
  margin: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.programme-day__count {
  font-size: 0.6875rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.programme-day__sessions {
  border-top: var(--border-width-rule) solid var(--color-border);
  margin: 0 calc(-1 * var(--space-4));
}

/* The day currently in view (set by programme-days.js as the list scrolls). */
.day-tabs__link--active {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.day-tabs__link--active .day-tabs__weekday {
  color: inherit;
  opacity: 0.9;
}

.day-tabs__link--active:hover {
  background: var(--color-accent-hover);
}