/*
 * .schedule — the attendee-facing program: a single mobile-wide column of day
 * panels → time slots (with BREAK dividers) → expandable talk cards, each with a
 * star (favorite) toggle. Ported from the sibling cohwall-2026 schedule, with
 * class names kept (schedule-*) and colors mapped to Cohwall tokens.
 */
@layer components {
  .schedule {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u-pad) * 1.5);
  }

  /* The turbo frame holds the filter bar + day panels; space them evenly so the
     date chips clear the schedule below and day panels don't touch. */
  .schedule__frame {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u-pad) * 1.5);
  }

  /* Filter bar — All / Favorites, then a chip per day. */
  .schedule-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--u-pad);
  }

  .schedule-filters__group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--u-pad) / 2);
  }

  .schedule-filters__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u-pad) / 4);
    min-inline-size: 2.5rem;
    padding: calc(var(--u-pad) / 2) var(--u-pad);
    border: var(--border-size-1) solid var(--line);
    border-radius: var(--radius-round);
    background: var(--canvas);
    color: var(--ink);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-6);
    text-decoration: none;
  }
  .schedule-filters__chip:hover { background: var(--accent-soft); border-color: var(--accent); }
  .schedule-filters__chip.is-active {
    background: var(--brand-strong);
    border-color: var(--brand-strong);
    color: #fff;
  }
  .schedule-filters__chip .lucide { display: block; }

  /* Day panel — bordered card on the canvas. */
  .schedule-day {
    border: var(--border-size-1) solid var(--line);
    border-radius: var(--radius-2);
    overflow: clip;
  }

  .schedule-day__header {
    padding: var(--u-pad);
    text-align: center;
    border-block-end: var(--border-size-1) solid var(--line);
    background: color-mix(in oklab, var(--canvas), var(--ink) 3%);
  }
  .schedule-day__title { font-size: var(--font-size-3); font-weight: var(--font-weight-7); margin: 0; }
  .schedule-day__date {
    margin: calc(var(--u-pad) / 4) 0 0;
    color: var(--ink-muted);
    font-size: var(--font-size-0);
  }

  .schedule-day__body { padding: var(--u-pad); }

  /* Time slot. */
  .schedule-slot { margin-block-end: calc(var(--u-pad) * 1.5); }
  .schedule-slot:last-child { margin-block-end: 0; }

  .schedule-slot__time {
    margin: 0 0 var(--u-pad);
    color: var(--ink);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-7);
  }

  .schedule-slot__talks {
    display: flex;
    flex-direction: column;
    gap: var(--u-pad);
  }

  /* Break divider between slots. */
  .schedule-break {
    display: flex;
    align-items: center;
    gap: var(--u-pad);
    margin-block: calc(var(--u-pad) * 1.5);
    color: var(--ink-muted);
    font-size: var(--font-size-0);
    text-transform: uppercase;
  }
  .schedule-break::before,
  .schedule-break::after {
    content: "";
    flex: 1;
    block-size: var(--border-size-1);
    background: var(--line);
  }
  .schedule-break__label { font-weight: var(--font-weight-7); letter-spacing: 0.05em; }
  .schedule-break__time { color: var(--ink); }

  /* Individual talk card. */
  .schedule-talk { padding-block: calc(var(--u-pad) / 2); }

  .schedule-talk__header {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--u-pad) / 2);
  }

  /* The star toggle is a button_to form — keep it inline and flush. */
  .schedule-talk__star,
  .schedule-talk__star form { display: inline-flex; margin: 0; }
  .schedule-talk__star { flex-shrink: 0; }

  .schedule-talk__favorite {
    display: inline-flex;
    padding: calc(var(--u-pad) / 4);
    border: none;
    background: none;
    color: var(--ink-muted);
    cursor: pointer;
    transition: color 0.15s ease;
  }
  .schedule-talk__favorite:hover,
  .schedule-talk__favorite.is-active { color: var(--accent); }

  .schedule-talk__info { flex: 1; min-inline-size: 0; cursor: pointer; }

  .schedule-talk__title {
    margin: 0;
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-7);
    line-height: var(--font-lineheight-2);
  }

  .schedule-talk__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc(var(--u-pad) / 4) calc(var(--u-pad) / 2);
    margin: calc(var(--u-pad) / 4) 0 0;
    color: var(--ink-muted);
    font-size: var(--font-size-0);
  }
  .schedule-talk__speaker { color: var(--ink); }
  .schedule-talk__room em { font-style: italic; }

  .schedule-talk__toggle {
    display: inline-flex;
    margin-inline-start: calc(var(--u-pad) / 4);
    color: var(--ink-muted);
    transition: transform 0.2s ease;
  }
  .schedule-talk--expanded .schedule-talk__toggle { transform: rotate(180deg); }

  .schedule-talk__details {
    margin-block-start: var(--u-pad);
    margin-inline-start: calc(1.25rem + var(--u-pad));
    padding-block-start: var(--u-pad);
    border-block-start: var(--border-size-1) solid var(--line);
  }

  .schedule-talk__description,
  .schedule-talk__bio {
    margin-block-end: var(--u-pad);
    color: var(--ink-muted);
    font-size: var(--font-size-0);
    line-height: var(--font-lineheight-3);
  }
  .schedule-talk__track {
    margin: 0 0 var(--u-pad);
    color: var(--ink-muted);
    font-size: var(--font-size-0);
  }
  .schedule-talk__action { text-align: center; }
}