/* Lineup — slots, stars, timeline, grid view, now-playing, media player */

@layer components {
  .lineup-days {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-s);
    margin-block-end: var(--block-space);
  }

  .lineup-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space);
    align-items: end;
    margin-block-end: var(--block-space-l);

    & .field {
      flex: 1;
      min-width: 10rem;
      margin-block-end: 0;
    }
  }

  .lineup-page {}

  .grid-page {}

  .now-playing-page {}

  .lineup-stage {
    margin-block-end: var(--block-space-l);
  }

  .lineup-stage__heading {
    display: flex;
    align-items: center;
    gap: 0.5ch;
    border-block-end: 2px solid var(--color-border);
    padding-block-end: var(--block-space-s);
  }

  .lineup-stage__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sc);
    flex-shrink: 0;
  }

  .lineup-nav-links {
    display: flex;
    gap: var(--inline-space-s);
    margin-block-start: var(--block-space);
  }

  .lineup-slots {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-s);
  }

  .slot-card {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space-s) 0;
    border-block-end: 1px solid var(--color-border);
  }

  .slot-card__photo {
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    object-fit: cover;
    flex-shrink: 0;
  }

  .slot-card__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklch, var(--color-link) 10%, var(--color-surface));
    color: var(--color-link);
    font-size: 0.875rem;
    font-weight: 700;
  }

  .slot-card__body {
    min-width: 0;
  }

  .slot-card__name {
    margin: 0;
    font-size: 1rem;
  }

  .slot-card__time {
    font-size: 0.875rem;
    color: var(--color-ink);
    margin: 0.125rem 0;
  }

  .slot-card__stage {
    &::before { content: "· "; }
    font-weight: 600;
  }

  /* Star button styles live in schedule.css */

  /* Now Playing */
  .now-playing__slots {
    display: flex;
    flex-direction: column;
  }

  .now-playing__card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space-s) 0;
    border-block-end: 1px solid var(--color-border);
  }

  .now-playing__info {
    flex: 1;
    min-width: 0;

    & h3 {
      margin: 0;
      font-size: 1rem;

      & a {
        text-decoration: none;
        color: var(--color-ink);

        &:hover { color: var(--color-link); }
      }
    }
  }

  /* Media player */
  .media-player {
    margin-block: var(--block-space);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .media-player__header {
    display: flex;
    justify-content: flex-end;
    padding: var(--block-space-s) var(--inline-space);
    background: var(--color-surface);
  }

  .media-player__close {
    background: none;
    border: none;
    font: inherit;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--color-ink-muted);
    padding: 0.25rem;

    &:hover { color: var(--color-ink); }
  }

  .media-player__iframe {
    display: block;
    width: 100%;
    height: 200px;
    border: none;
  }

  /* Timeline — Dual layout (horizontal + vertical) */
  .timeline-page {}

  /* ── Toolbar ── */
  .timeline-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--inline-space);
    margin-block-end: var(--block-space);
  }

  .timeline-toolbar__pills {
    display: flex;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    overflow: hidden;
  }

  .timeline-toolbar__pill {
    min-height: var(--touch-min);
    padding: 0 1rem;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--color-ink-muted);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease;

    &:hover {
      color: var(--color-ink);
      background: color-mix(in oklch, var(--color-ink) 6%, transparent);
    }

    &:not(:first-child) {
      border-inline-start: 1px solid var(--color-border);
    }
  }

  .timeline-toolbar__pill--active {
    color: oklch(100% 0 0);
    background: linear-gradient(135deg, oklch(var(--lch-flare)), oklch(var(--lch-golden)));
    border-color: transparent;
  }

  .timeline-toolbar__overlay {
    display: flex;
    align-items: center;
    gap: 0.5ch;
    font-size: 0.875rem;
    color: var(--color-ink-muted);
    cursor: pointer;
    margin-inline-start: auto;

    & input {
      width: 1.125rem;
      height: 1.125rem;
      accent-color: oklch(var(--lch-golden));
    }
  }

  /* ── Stage color classes ── */
  .s-flare  { --sc: oklch(var(--lch-flare));  --sbg: color-mix(in oklch, oklch(var(--lch-flare))  18%, var(--color-surface)); --sbd: color-mix(in oklch, oklch(var(--lch-flare))  40%, transparent); }
  .s-golden { --sc: oklch(var(--lch-golden)); --sbg: color-mix(in oklch, oklch(var(--lch-golden)) 18%, var(--color-surface)); --sbd: color-mix(in oklch, oklch(var(--lch-golden)) 40%, transparent); }
  .s-uv     { --sc: oklch(var(--lch-uv));     --sbg: color-mix(in oklch, oklch(var(--lch-uv))     18%, var(--color-surface)); --sbd: color-mix(in oklch, oklch(var(--lch-uv))     40%, transparent); }
  .s-laser  { --sc: oklch(var(--lch-laser));  --sbg: color-mix(in oklch, oklch(var(--lch-laser))  18%, var(--color-surface)); --sbd: color-mix(in oklch, oklch(var(--lch-laser))  40%, transparent); }
  .s-sky    { --sc: oklch(var(--lch-sky));    --sbg: color-mix(in oklch, oklch(var(--lch-sky))    18%, var(--color-surface)); --sbd: color-mix(in oklch, oklch(var(--lch-sky))    40%, transparent); }

  /* ── Shared bar styles ── */
  .timeline__bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.125rem;
    padding: 0.375rem 0.625rem;
    margin: 3px 2px;
    border-radius: var(--radius);
    background: var(--sbg);
    border: 1px solid var(--sbd);
    color: var(--color-ink);
    text-decoration: none;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    overflow: hidden;
    min-height: var(--touch-min);
    cursor: pointer;
    transition: filter 150ms ease, opacity 300ms ease, translate 150ms ease;

    &:hover {
      filter: brightness(1.15);
      translate: 0 -1px;
    }
  }

  .timeline__bar-label {
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .timeline__bar-genres {
    display: flex;
    gap: 0.25rem;
  }

  .timeline__genre-pill {
    font-size: 0.5625rem;
    font-weight: 600;
    padding: 0.0625rem 0.3125rem;
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--sc) 20%, transparent);
    color: var(--sc);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  /* Starred glow */
  .timeline__bar--starred {
    box-shadow:
      0 0 0 2px oklch(var(--lch-golden)),
      0 0 12px color-mix(in oklch, oklch(var(--lch-golden)) 40%, transparent);
  }

  /* Schedule overlay dimming */
  .timeline--overlay .timeline__bar:not(.timeline__bar--starred) {
    opacity: 0.2;
  }

  /* ── Horizontal layout (V1) ── */
  .timeline-scroll {
    overflow-x: auto;
    margin-block: var(--block-space);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    -webkit-overflow-scrolling: touch;
  }

  .timeline-h {
    display: grid;
    min-width: max-content;
    gap: 0;
  }

  .timeline-h__corner {
    grid-column: 1;
    grid-row: 1;
    background: var(--color-surface);
    position: sticky;
    left: 0;
    z-index: 4;
    border-block-end: 2px solid var(--color-border);
    border-inline-end: 1px solid var(--color-border);
  }

  .timeline__hour {
    grid-row: 1;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-ink);
    padding: 0.625rem 0.25rem;
    border-block-end: 2px solid var(--color-border);
    white-space: nowrap;
  }

  .timeline__stage-label {
    grid-column: 1;
    background: var(--color-surface);
    padding: 0.5rem 0.75rem;
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--color-ink);
    border-block-end: 1px solid var(--color-border);
    border-inline-end: 1px solid var(--color-border);
    position: sticky;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.5ch;
    min-height: var(--touch-min);
  }

  .timeline__stage-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sc);
    flex-shrink: 0;
  }

  /* Now indicator — horizontal (vertical red line) */
  .timeline__now {
    grid-row: 1 / -1;
    width: 3px;
    background: var(--color-negative);
    z-index: 2;
    pointer-events: none;
    box-shadow:
      0 0 8px color-mix(in oklch, var(--color-negative) 60%, transparent),
      0 0 20px color-mix(in oklch, var(--color-negative) 30%, transparent);
    animation: now-pulse 2s ease-in-out infinite;
  }

  @keyframes now-pulse {
    0%, 100% {
      box-shadow:
        0 0 8px color-mix(in oklch, var(--color-negative) 60%, transparent),
        0 0 20px color-mix(in oklch, var(--color-negative) 30%, transparent);
    }
    50% {
      box-shadow:
        0 0 12px color-mix(in oklch, var(--color-negative) 80%, transparent),
        0 0 32px color-mix(in oklch, var(--color-negative) 50%, transparent);
    }
  }

  /* ── Vertical layout (V2) ── */
  .timeline-v-scroll {
    overflow: auto;
    margin-block: var(--block-space);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    max-height: 75vh;
  }

  .timeline-v {
    display: grid;
    min-width: 40rem;
    position: relative;
  }

  .timeline-v__corner {
    grid-column: 1;
    grid-row: 1;
    background: var(--color-surface);
    position: sticky;
    top: 0;
    left: 0;
    z-index: 6;
    border-block-end: 2px solid var(--color-border);
    border-inline-end: 1px solid var(--color-border);
  }

  .timeline-v__stage-header {
    grid-row: 1;
    padding: 0.625rem 0.375rem;
    font-weight: 700;
    font-size: 0.75rem;
    text-align: center;
    background: var(--color-surface);
    border-block-end: 2px solid var(--color-border);
    border-inline-start: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 5;
    color: var(--sc);
  }

  .timeline-v__time {
    grid-column: 1;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-ink);
    padding: 0.125rem 0.375rem;
    background: var(--color-surface);
    border-inline-end: 1px solid var(--color-border);
    position: sticky;
    left: 0;
    z-index: 4;

    &:nth-child(even of .timeline-v__time) {
      border-block-start: 1px solid color-mix(in oklch, var(--color-border) 40%, transparent);
    }
  }

  /* Vertical bar overrides */
  .timeline-v .timeline__bar {
    border-inline-start: 3px solid var(--sc);
    margin: 1px 2px;
    padding: 0.25rem 0.375rem;
    border-radius: var(--radius-sm);
  }

  .timeline-v .timeline__bar-label {
    font-size: 0.75rem;
  }

  .timeline-v .timeline__bar-time {
    font-size: 0.625rem;
    color: var(--color-ink-muted);
  }

  /* Now indicator — vertical (horizontal red line) */
  .timeline-v__now {
    grid-column: 1 / -1;
    height: 3px;
    background: var(--color-negative);
    z-index: 7;
    pointer-events: none;
    animation: now-pulse 2s ease-in-out infinite;
    position: relative;
  }

  .timeline-v__now-label {
    position: absolute;
    left: 0;
    background: var(--color-negative);
    color: oklch(100% 0 0);
    font-size: 0.5625rem;
    font-weight: 700;
    padding: 0 0.375rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    line-height: 1.6;
  }

  /* Layout toggle visibility */
  .timeline-layout--hidden {
    display: none;
  }

  /* Zoom FAB (floating action button) */
  .timeline-fab {
    position: fixed;
    bottom: calc(4rem + env(safe-area-inset-bottom));
    right: 1rem;
    z-index: 10;
    display: flex;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 16px oklch(0% 0 0 / 0.2);
    overflow: hidden;
  }

  .timeline-fab__btn {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-ink-muted);
    cursor: pointer;
    padding: 0 0.75rem;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    transition: color 150ms ease, background 150ms ease;

    &:hover {
      color: var(--color-ink);
      background: color-mix(in oklch, var(--color-ink) 6%, transparent);
    }

    &:not(:first-child) {
      border-inline-start: 1px solid var(--color-border);
    }
  }

  .timeline-fab__btn--active {
    color: oklch(var(--lch-flare));
    background: color-mix(in oklch, oklch(var(--lch-flare)) 8%, transparent);
  }

  /* Popover: dark card */
  .timeline-popover {
    margin: 0;
    padding: var(--block-space) var(--inline-space-l);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 8px 32px oklch(0% 0 0 / 0.25);
    min-width: 16rem;
    max-width: 20rem;

    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;

    opacity: 1;
    transition:
      opacity 120ms ease,
      overlay 120ms ease allow-discrete,
      display 120ms ease allow-discrete;

    @starting-style { opacity: 0; }

    & h4 {
      margin: 0 0 0.25rem;
      font-size: 1.125rem;

      & a {
        text-decoration: none;
        color: var(--color-ink);

        &:hover { color: var(--color-link); }
      }
    }
  }

  .timeline-popover__time {
    font-size: 0.875rem;
    color: var(--color-ink);
    margin: 0 0 0.25rem;
  }

  .timeline-popover__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inline-space);
    margin-block-start: var(--block-space-s);
    padding-block-start: var(--block-space-s);
    border-block-start: 1px solid var(--color-border);
  }

  /* Grid view (columns = stages, rows = time) */
  .grid-scroll {
    overflow-x: auto;
    margin-block: var(--block-space);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .schedule-grid {
    display: grid;
    min-width: max-content;
  }

  .schedule-grid__corner {
    grid-row: 1;
    grid-column: 1;
    background: var(--color-surface);
    position: sticky;
    left: 0;
    z-index: 2;
    border-block-end: 2px solid var(--color-border);
  }

  .schedule-grid__stage-header {
    grid-row: 1;
    padding: var(--block-space-s) var(--inline-space);
    font-weight: 600;
    font-size: 0.875rem;
    text-align: center;
    background: var(--color-surface);
    border-block-end: 2px solid var(--color-border);
    border-inline-start: 1px solid var(--color-border);
    min-width: 10rem;
  }

  .schedule-grid__time {
    font-size: 0.75rem;
    color: var(--color-ink);
    padding: 0.25rem var(--inline-space-s);
    background: var(--color-surface);
    border-block-start: 1px solid var(--color-border);
    position: sticky;
    left: 0;
    z-index: 1;
  }

  .schedule-grid__slot {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    margin: 1px 2px;
    border-radius: var(--radius-sm);
    background: color-mix(in oklch, var(--color-link) 15%, var(--color-surface));
    border: 1px solid color-mix(in oklch, var(--color-link) 30%, transparent);
    color: var(--color-ink);
    text-decoration: none;
    font-size: 0.8125rem;
    overflow: hidden;
    transition: background 100ms ease;

    &:hover {
      background: color-mix(in oklch, var(--color-link) 30%, var(--color-surface));
    }

    & strong {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    & span {
      font-size: 0.6875rem;
      color: var(--color-ink-muted);
    }
  }
}