/*
 * Story 120: the sticky "My list" bar, present on every page within a
 * festival (rendered globally from _Layout.cshtml; MyListStatusBarViewComponent
 * itself decides when there's nothing to show). Sticks to the bottom of the
 * viewport so status/actions are reachable without hunting while scrolling
 * a long programme, per the story's own wording.
 */
.my-list-status-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border-top: var(--border-width-rule) solid var(--color-border);
  /* Reach the page shell's full width (same technique as .programme-header), not
     just its padded inner width -- otherwise the bar is 16px narrower each side
     than the header and the cards it sits under. */
  margin: 0 calc(-1 * var(--space-4));
}

.my-list-status-bar__summary {
  flex: 1 1 auto;
  min-width: 0;
}

.my-list-status-bar__count {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
  line-height: 1.2;
}

.my-list-status-bar__clashes {
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  margin-top: 2px;
}