/* Lineup on wide screens — the day's list or stage grid with a right column
 * of your picks (clashes flagged) and the crew's most-starred sets; artist
 * names open the artist page in the side panel. One column on phones.
 */

@layer components {
  .lineup-side {
    display: none;
  }

  /* Artist names are links that look like the names they were. */
  .lineup-row__link,
  .gantt__block-link,
  :is(.lineup-side__name, .pick-card__name, .conflict-card__artist, .converge-card__name, .split-card__artist) a {
    color: inherit;
    text-decoration: none;

    &:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }

    @media (hover: hover) {
      &:hover { text-decoration: underline; text-underline-offset: 2px; }
    }
  }

  @container main (width > 64rem) {
    .lineup-page:has(.lineup-side) {
      max-inline-size: 88rem;
    }

    .lineup-browse {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 18rem;
      gap: var(--inline-space-l);
      align-items: start;
    }

    .lineup-side {
      display: grid;
      gap: 1.25rem;
      position: sticky;
      inset-block-start: calc(var(--top-nav-inset) + 1rem);
      padding: 1rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-surface);
    }

    /* The stage grid takes the screen's height, not three quarters of it. */
    .lineup-browse .gantt {
      max-block-size: calc(100dvh - var(--top-nav-inset) - 14rem);
    }
  }

  .lineup-side__section {
    display: grid;
    gap: 0.5rem;
  }

  .lineup-side__label {
    margin: 0;
    color: var(--color-ink-muted);
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .lineup-side__list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lineup-side__pick {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-block: 0.5rem;
    border-block-end: 1px solid var(--color-border);

    &:last-child { border-block-end: none; }
  }

  .lineup-side__pick--clash {
    box-shadow: inset 3px 0 0 var(--color-warning);
    padding-inline-start: 0.5rem;
  }

  .lineup-side__time {
    min-width: 2.75rem;
    font-family: "Outfit", system-ui, sans-serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .lineup-side__main {
    flex: 1;
    display: grid;
    min-width: 0;
  }

  .lineup-side__name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lineup-side__meta {
    color: var(--color-ink-muted);
    font-size: 0.75rem;

    & strong { color: var(--color-warning); font-weight: 700; }
  }

  .lineup-side__empty {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: 0.875rem;
  }

  /* ── Artist page in the side panel ── */

  .artist-sheet__photo {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--radius);
  }

  .artist-sheet__body {
    display: grid;
    gap: 1rem;
  }
}