/* My picks tab — personal schedule reference (spec §4.2).
 *
 * Chronological stream of pick cards, conflict cards, and gap
 * connectors. The NOW strip above is rendered by now_indicator.css.
 * Past picks during the festival get a dimmed variant; the currently-
 * playing set gets the 2px featured border — the only exception to
 * the 0.5px border rule (per design-system).
 *
 * Legacy .personal-schedule__* and .schedule-slot__* classes from the
 * pre-redesign layout are removed here; the festivals/editions public
 * personal_schedule page uses its own minimal rules inline for now.
 */

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

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

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

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

  .my-picks__items {
    display: flex;
    flex-direction: column;
  }

  /* ── Pick card ───────────────────────────────────────────────────── */

  .pick-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--inline-space-s) var(--inline-space);
    padding: 0.75rem;
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);

    & + & { margin-block-start: 0.5rem; }
  }

  /* Gentle drop-in on first paint — feels like the day's plan is
   * assembling itself. Respects reduced-motion. */
  @media (prefers-reduced-motion: no-preference) {
    .pick-card {
      @starting-style {
        opacity: 0;
        transform: translateY(4px);
      }
      transition: opacity 240ms ease, transform 240ms ease;
    }
  }

  .pick-card__time-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

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

  .pick-card__reminder {
    margin-inline-start: auto;
  }

  .pick-card__body {
    grid-column: 1 / 2;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

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

  .pick-card__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);
  }

  .pick-card__crew {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    align-self: center;
  }

  /* Featured variant (currently playing) — 2px info border. Spec §4.2. */
  .pick-card--featured {
    border-width: 2px;
    border-color: oklch(var(--lch-laser));
    background: color-mix(in oklch, oklch(var(--lch-laser)) 8%, var(--color-surface));
  }

  .pick-card__now-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    background: oklch(var(--lch-laser));
    color: oklch(17% 0.02 276);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
  }

  /* Past variant — dimmed, no reminder chip. */
  .pick-card--past {
    opacity: 0.55;

    & .pick-card__name { color: var(--color-ink-muted); }
  }

  /* ── Gap connector ───────────────────────────────────────────────── */

  .pick-gap {
    display: flex;
    justify-content: center;
    padding-block: 0.375rem;
  }

  .pick-gap__label {
    font-size: 0.6875rem;
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums;
  }

  /* ── Conflict card (warning yellow) ──────────────────────────────── */

  .conflict-card {
    border: 0.5px solid color-mix(in oklch, oklch(var(--lch-golden)) 50%, transparent);
    border-radius: var(--radius);
    background: color-mix(in oklch, oklch(var(--lch-golden)) 6%, var(--color-surface));
  }

  .conflict-card + .pick-card,
  .pick-card + .conflict-card,
  .conflict-card + .conflict-card { margin-block-start: 0.5rem; }

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

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

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

  .conflict-card__rows {
    padding: 0.5rem 0.75rem;
  }

  .conflict-card__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.375rem;
    border-block-end: 0.5px dashed var(--color-border);

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

  .conflict-card__artist {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-ink);
  }

  .conflict-card__stage {
    margin-inline-start: auto;
    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);
  }

  .conflict-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-block-start: 0.5px solid var(--color-border);
  }

  .conflict-card__keep {
    flex: 1 1 auto;
  }

  /* ── Reminder chip ───────────────────────────────────────────────── */

  .reminder-chip__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-ink-muted);
    font-size: 0.6875rem;
    cursor: pointer;

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

  .reminder-chip--active .reminder-chip__trigger {
    background: color-mix(in oklch, oklch(var(--lch-golden)) 14%, var(--color-surface));
    border-color: color-mix(in oklch, oklch(var(--lch-golden)) 35%, transparent);
    color: oklch(var(--lch-golden));
  }

  /* Anchor the popover to its chip — the native popover API without
   * anchor-positioning defaults to the viewport's top-left; force it
   * below the chip and right-aligned instead so the picker sits under
   * the button a user just tapped. */
  .reminder-chip {
    position: relative;
  }

  .reminder-chip__popover {
    position: absolute;
    inset-block-start: calc(100% + 0.25rem);
    inset-inline-end: 0;
    inset-inline-start: auto;
    margin: 0;
    padding: 0.375rem;
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px -12px oklch(0% 0 0 / 0.4);
    min-inline-size: 11rem;
  }

  .reminder-chip__popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.25rem 0.25rem 0.5rem;
  }

  .reminder-chip__popover-title {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-ink-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
  }

  .reminder-chip__popover-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 24px;
    block-size: 24px;
    background: transparent;
    border: 0;
    color: var(--color-ink-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;

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

  .reminder-chip__option {
    display: block;
  }

  .reminder-chip__option-btn {
    display: block;
    inline-size: 100%;
    padding: 0.5rem;
    background: transparent;
    border: 0;
    text-align: start;
    font-size: 0.8125rem;
    color: var(--color-ink);
    border-radius: var(--radius-sm);
    cursor: pointer;

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

  .reminder-chip__option-btn--active {
    background: color-mix(in oklch, oklch(var(--lch-golden)) 16%, var(--color-surface));
    color: oklch(var(--lch-golden));
    font-weight: 600;
  }

  /* ── Calendar sync footer ────────────────────────────────────────── */

  .calendar-sync {
    margin-block-start: var(--block-space-l);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
  }

  .calendar-sync__summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    cursor: pointer;
    list-style: none;

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

  .calendar-sync__text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1 1 auto;

    & strong {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--color-ink);
    }
    & span {
      font-size: 0.8125rem;
      color: var(--color-ink-muted);
    }
  }

  .calendar-sync__chevron {
    font-size: 1rem;
    color: var(--color-ink-muted);
    transition: transform 150ms ease;
  }

  .calendar-sync[open] .calendar-sync__chevron {
    transform: rotate(90deg);
  }

  .calendar-sync__options {
    padding: 0 0.75rem 0.75rem;
    border-block-start: 0.5px solid var(--color-border);
  }

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

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

    & .calendar-sync__option-text {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;

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

  .calendar-sync__subscription {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
  }

  .calendar-sync__url {
    flex: 1 1 100%;
    padding: 0.375rem 0.5rem;
    background: var(--color-canvas);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: 0.6875rem;
    color: var(--color-ink-muted);
  }
}