/* Crew tab — converge / splits / full timeline (spec §4.1).
 *
 * Two collapsible sections up top answer "where does the crew meet"
 * and "where does the crew split"; a non-collapsible full timeline
 * below stays the source of truth. Info-blue for converge/split
 * cards; golden-yellow is reserved for personal conflict cards
 * on the My picks tab (spec §4.2).
 */

@layer components {
  .crew-page {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    padding: 0 var(--inline-space);
  }

  /* ── Converge section ────────────────────────────────────────────── */

  .converge-section__cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .converge-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--inline-space);
    padding: 0.75rem;
    border-radius: var(--radius);
    border: 0.5px solid color-mix(in oklch, oklch(var(--lch-laser)) 40%, transparent);
    background: color-mix(in oklch, oklch(var(--lch-laser)) 10%, var(--color-surface));
  }

  .converge-card--majority {
    background: color-mix(in oklch, var(--color-ink) 8%, var(--color-surface));
    border-color: color-mix(in oklch, var(--color-ink) 20%, var(--color-border));
  }

  .converge-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-inline-size: 0;
  }

  .converge-card__name {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-ink);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .converge-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
  }

  .converge-card__stage {
    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);
  }

  /* ── Splits section ──────────────────────────────────────────────── */

  .splits-section__cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .split-card {
    border: 0.5px solid color-mix(in oklch, oklch(var(--lch-sky)) 45%, transparent);
    border-radius: var(--radius);
    background: color-mix(in oklch, oklch(var(--lch-sky)) 8%, var(--color-surface));
  }

  .split-card__header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: color-mix(in oklch, oklch(var(--lch-sky)) 16%, var(--color-surface));
    color: oklch(var(--lch-sky));
    border-start-start-radius: var(--radius);
    border-start-end-radius: var(--radius);
  }

  .split-card__time {
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-ink);
  }

  .split-card__subtitle {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
    margin-inline-start: auto;
  }

  .split-card__rows {
    padding: 0.25rem 0.75rem;
  }

  .split-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-block: 0.5rem;
    border-block-end: 0.5px dashed var(--color-border);

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

  .split-card__row-body {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-inline-size: 0;
  }

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

  .split-card__stage {
    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);
  }

  /* ── No-consensus status note ────────────────────────────────────── */

  .no-consensus-note {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    border: 0.5px dashed var(--color-border);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    color: var(--color-ink-muted);

    & strong {
      color: var(--color-ink);
      font-weight: 600;
    }
  }

  /* ── Full timeline ───────────────────────────────────────────────── */

  .crew-timeline__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inline-space);
    padding-block: var(--block-space-s);
  }

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

  .crew-timeline__export {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
  }

  .crew-timeline__rows {
    display: flex;
    flex-direction: column;
  }

  .crew-timeline__empty {
    padding: var(--block-space);
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
  }
}