/* Group Schedule Overview */

@layer components {
  /* ── Page layout ── */

  .group-schedule {}

  /* ── Sort pills ── */

  .sort-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-block-end: var(--block-space-l);
  }

  .sort-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-ink-muted);
    text-decoration: none;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;

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

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

    &:hover {
      background: linear-gradient(135deg, oklch(var(--lch-flare)), oklch(var(--lch-golden)));
      filter: brightness(1.1);
    }
  }

  /* ── Meta (festival badge + member count) ── */

  .group-schedule__meta {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    flex-wrap: wrap;
    margin-block-end: var(--block-space);
  }

  .group-schedule__member-count {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
  }

  /* ── Hint ── */

  .group-schedule__hint {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
    margin: 0 0 var(--block-space);
    line-height: 1.6;

    & p {
      margin: 0;
    }

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

  /* ── Day sections ── */

  .group-schedule__day {
    margin-block-end: var(--block-space-l);

    & h2 {
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--color-ink);
      margin: 0;
      padding-block-end: var(--block-space-s);
      border-block-end: 1px solid var(--color-border);
    }
  }

  .group-schedule__day-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--inline-space);
  }

  .group-schedule__slots {
    display: flex;
    flex-direction: column;
  }

  /* ── Slot row (details/summary) ── */

  .group-schedule__item {
    border-block-end: 1px solid color-mix(in oklch, var(--color-border) 60%, transparent);
  }

  .group-schedule__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space-s) var(--inline-space);
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius);
    transition: background 100ms ease;

    &::-webkit-details-marker {
      display: none;
    }

    &:hover {
      background: var(--color-surface);
    }
  }

  .group-schedule__info {
    flex: 1;
    min-width: 0;

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

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

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

  .group-schedule__stage {
    display: inline-block;
    padding: 0.0625rem 0.4375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    margin-inline-start: 0.25rem;
  }

  .group-schedule__stage--flare {
    background: color-mix(in oklch, oklch(var(--lch-flare)) 15%, transparent);
    color: oklch(var(--lch-flare));
  }

  .group-schedule__stage--golden {
    background: color-mix(in oklch, oklch(var(--lch-golden)) 15%, transparent);
    color: oklch(var(--lch-golden));
  }

  .group-schedule__stage--uv {
    background: color-mix(in oklch, oklch(var(--lch-uv)) 15%, transparent);
    color: oklch(var(--lch-uv));
  }

  .group-schedule__stage--laser {
    background: color-mix(in oklch, oklch(var(--lch-laser)) 15%, transparent);
    color: oklch(var(--lch-laser));
  }

  .group-schedule__interest {
    display: flex;
    align-items: center;
    gap: var(--inline-space-s);
    flex-shrink: 0;
  }

  /* ── Avatar stacks (overlapping, max 5) ── */

  .group-schedule__avatars {
    display: flex;
    align-items: center;

    & .avatar {
      margin-inline-start: -8px;
      border: 2px solid var(--color-canvas);
      box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-border) 40%, transparent);

      &:first-child { margin-inline-start: 0; }
    }
  }

  .group-schedule__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-canvas);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-ink-muted);
    margin-inline-start: -8px;
  }

  /* ── Heat bar (flare-to-golden gradient) ── */

  .group-schedule__heat-bar {
    width: 4.5rem;
    height: 8px;
    border-radius: 4px;
    background: var(--color-border);
    overflow: hidden;
  }

  .group-schedule__heat-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, oklch(var(--lch-flare)), oklch(var(--lch-golden)));
    transition: width 200ms ease;
    width: 0;
  }

  .group-schedule__heat-fill--w10 { width: 10%; }
  .group-schedule__heat-fill--w20 { width: 20%; }
  .group-schedule__heat-fill--w30 { width: 30%; }
  .group-schedule__heat-fill--w40 { width: 40%; }
  .group-schedule__heat-fill--w50 { width: 50%; }
  .group-schedule__heat-fill--w60 { width: 60%; }
  .group-schedule__heat-fill--w70 { width: 70%; }
  .group-schedule__heat-fill--w80 { width: 80%; }
  .group-schedule__heat-fill--w90 { width: 90%; }
  .group-schedule__heat-fill--w100 { width: 100%; }

  .group-schedule__count {
    font-size: 0.75rem;
    color: var(--color-ink-muted);
    font-weight: 600;
    min-width: 2.5ch;
    text-align: end;
  }

  /* ── Expanded member details ── */

  .group-schedule__members {
    padding: 0 var(--inline-space) var(--block-space-s);
  }

  .group-schedule__members-label {
    font-size: 0.875rem;
    color: var(--color-ink-muted);
    margin: 0 0 var(--block-space-s);
  }

  .group-schedule__members-label + .group-schedule__members-label {
    margin-block-start: var(--block-space-s);
  }

  .group-schedule__member-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-s);

    & li {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      font-size: 0.875rem;
    }
  }

  /* ── Vote button (enlarged, accent color) ── */

  .vote-toggle {
    flex-shrink: 0;
  }

  .vote-btn {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    min-width: var(--touch-min);
    min-height: 2.25rem;
    padding: 0.25rem 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-ink-muted);
    font-size: 0.875rem;
    border-radius: var(--radius);
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;

    &:hover:not(:disabled) {
      color: oklch(var(--lch-uv));
      background: color-mix(in oklch, oklch(var(--lch-uv)) 8%, transparent);
      border-color: color-mix(in oklch, oklch(var(--lch-uv)) 20%, transparent);
    }

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

  .vote-btn--active {
    color: oklch(var(--lch-uv));
    background: color-mix(in oklch, oklch(var(--lch-uv)) 8%, transparent);
    border-color: color-mix(in oklch, oklch(var(--lch-uv)) 20%, transparent);

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

  .vote-btn__icon {
    font-size: 1rem;
    line-height: 1;
  }

  .vote-btn__count {
    font-size: 0.8125rem;
    font-weight: 700;
  }

  /* ── Daily vote counter ── */

  .vote-counter {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
    margin: 0;
  }

  .vote-counter__badge {
    font-weight: 600;
    color: oklch(var(--lch-uv));
  }

  /* ── Top Picks ── */

  .top-picks {
    list-style: none;
    padding: 0;
    counter-reset: pick;
  }

  .top-picks__item {
    counter-increment: pick;
    border-block-end: 1px solid var(--color-border);
  }

  .top-picks__link {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space-s) 0;
    text-decoration: none;
    color: var(--color-ink);

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

  .top-picks__rank {
    flex-shrink: 0;
    width: 1.5rem;
    text-align: center;
    font-weight: 700;
    color: var(--color-ink-muted);

    &::before {
      content: counter(pick);
    }
  }

  .top-picks__info {
    flex: 1;
    min-width: 0;

    & strong {
      display: block;
    }
  }

  .top-picks__meta {
    font-size: 0.875rem;
    color: var(--color-ink-muted);
  }

  .top-picks__score {
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.875rem;
    color: oklch(var(--lch-flare));
  }

  /* ── Split cards ── */

  .split-card {
    padding: var(--block-space) var(--inline-space);
    margin-block-end: var(--block-space-s);
    background: color-mix(in oklch, var(--color-warning) 4%, var(--color-surface));
    border: 1px solid color-mix(in oklch, var(--color-warning) 15%, var(--color-border));
    border-radius: var(--radius-lg);
  }

  .split-card__time {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-ink);
    margin-block-end: var(--block-space-s);
    display: flex;
    align-items: center;
    gap: 0.5ch;

    &::before {
      content: "⚡";
      font-size: 0.875rem;
    }
  }

  .split-card__stages {
    display: flex;
    gap: var(--inline-space-l);
  }

  .split-card__stage {
    flex: 1;

    & h4 {
      margin: 0 0 var(--block-space-s);
      font-size: 0.9375rem;

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

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

  .split-card__stage-label {
    display: inline-block;
    padding: 0.0625rem 0.4375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    margin-inline-start: 0.25rem;
  }

  /* Reuse stage color classes */
  .split-card__stage-label--flare {
    background: color-mix(in oklch, oklch(var(--lch-flare)) 15%, transparent);
    color: oklch(var(--lch-flare));
  }

  .split-card__stage-label--golden {
    background: color-mix(in oklch, oklch(var(--lch-golden)) 15%, transparent);
    color: oklch(var(--lch-golden));
  }

  .split-card__stage-label--uv {
    background: color-mix(in oklch, oklch(var(--lch-uv)) 15%, transparent);
    color: oklch(var(--lch-uv));
  }

  .split-card__stage-label--laser {
    background: color-mix(in oklch, oklch(var(--lch-laser)) 15%, transparent);
    color: oklch(var(--lch-laser));
  }

  /* ── Footer actions ── */

  .group-schedule__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-s);
    margin-block-start: var(--block-space-l);
  }

  /* ── Responsive ── */

  @media (max-width: 480px) {
    .group-schedule__summary {
      flex-direction: column;
      align-items: start;
    }

    .group-schedule__interest {
      width: 100%;
    }

    .group-schedule__heat-bar {
      flex: 1;
    }

    .split-card__stages {
      flex-direction: column;
    }
  }
}