/* Lineup list — chronological day view (spec §4.3).
 *
 * Shared row component (.lineup-row) reused by Lineup, My picks, and
 * the Crew tab's full timeline. The toolbar carries the search field,
 * filter button (wired in chunk D), and view toggle (wired in chunk G).
 */

@layer components {
  .lineup-list {
    padding: 0 var(--inline-space);
  }

  /* ── Toolbar ─────────────────────────────────────────────────────── */

  .lineup-toolbar {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-block: var(--block-space-s);
  }

  .lineup-toolbar__search {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
  }

  .lineup-toolbar__search-icon {
    position: absolute;
    inset-inline-start: 0.625rem;
    width: 14px;
    height: 14px;
    color: var(--color-ink-muted);
    pointer-events: none;
  }

  .lineup-toolbar__input {
    inline-size: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    min-height: var(--touch-min);
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-ink);
    font: inherit;

    &::placeholder { color: var(--color-ink-muted); }
    &:focus-visible {
      outline: 2px solid oklch(var(--lch-flare));
      outline-offset: 1px;
    }
  }

  .lineup-toolbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: var(--touch-min);
    min-block-size: var(--touch-min);
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-ink);
    cursor: pointer;

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    &:hover:not(:disabled) {
      background: color-mix(in oklch, var(--color-ink) 5%, var(--color-surface));
    }

    &:focus-visible {
      outline: 2px solid oklch(var(--lch-flare));
      outline-offset: 1px;
    }
  }

  /* ── Section header ──────────────────────────────────────────────── */

  .lineup-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--inline-space);
    padding-block: var(--block-space-s);
  }

  .lineup-section-header__title {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-ink);
    margin: 0;
  }

  .lineup-section-header__count {
    color: var(--color-ink-muted);
    font-weight: 500;
  }

  .lineup-section-header__starred {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
  }

  /* ── Row ─────────────────────────────────────────────────────────── */

  .lineup-list__rows {
    display: flex;
    flex-direction: column;
    container-type: inline-size;
  }

  .lineup-row {
    display: grid;
    grid-template-columns: 3.5rem 1fr auto auto;
    align-items: center;
    gap: var(--inline-space);
    padding-block: 0.625rem;
    border-block-end: 0.5px solid var(--color-border);
  }

  /* Author display: grid wins over the UA `[hidden] { display: none }`
   * rule by source order. Reassert hide-when-hidden so client-side
   * filters (lineup-search) actually take rows out of layout. */
  .lineup-row[hidden] {
    display: none;
  }

  .lineup-row:last-child {
    border-block-end: 0;
  }

  .lineup-row__time {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    font-variant-numeric: tabular-nums;
  }

  .lineup-row__start {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-ink);
  }

  .lineup-row__duration {
    font-size: 0.6875rem;
    color: var(--color-ink-muted);
  }

  .lineup-row__body {
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .lineup-row__name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-ink);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* On narrow rows (mobile), let long artist names wrap to a second
   * line instead of mid-word truncation like "BRING ME THE HORI…". */
  @container (inline-size < 26rem) {
    .lineup-row__name {
      white-space: normal;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
    }
  }

  .lineup-row__stage {
    align-self: flex-start;
    padding: 0.125rem 0.4375rem;
    background: color-mix(in oklch, var(--sc) 16%, var(--color-surface));
    color: var(--sc);
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }

  .lineup-row__crew {
    flex: 0 0 auto;
  }

  .lineup-row__star {
    flex: 0 0 auto;
    min-inline-size: 2rem;
    display: inline-flex;
    justify-content: center;
  }

  .lineup-list__empty {
    padding-block: var(--block-space-l);
  }

  /* Starred row treatment: subtle left accent. Uses :has() so the
   * accent updates live when the wish toggle flips after a turbo_stream
   * replacement — no second stream to flip data-starred on the row. */
  .lineup-row:has(.wish-btn--active) {
    box-shadow: inset 2px 0 0 oklch(var(--lch-golden));
    padding-inline-start: 0.5rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    .lineup-row {
      @starting-style { opacity: 0; translate: 0 2px; }
      transition: opacity 150ms ease, translate 150ms ease;
    }
  }
}