@layer components {
  /* ======================
   * SCHEDULE PAGE
   * ====================== */

  .schedule-section {
    margin-block-end: var(--block-space-lg);
  }

  .schedule-section:last-child {
    padding-block-end: var(--block-space-lg);
  }

  .schedule-section__title {
    display: flex;
    align-items: center;
    gap: var(--inline-space-sm);
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0;
    padding-block-end: var(--block-space-sm);
    border-block-end: 2px solid var(--color-border);
    margin-block-end: var(--block-space);
  }

  .schedule-section__title--overdue {
    color: oklch(45% 0.18 25);
    border-color: oklch(70% 0.15 25);
  }

  .schedule-section__title--due-today {
    color: oklch(45% 0.15 70);
    border-color: oklch(70% 0.12 70);
  }

  .schedule-section__title--upcoming {
    color: var(--color-ink-muted);
    border-color: var(--color-border);
  }

  /* Card grid */
  .schedule-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: var(--block-space);
  }

  /* Individual card */
  .schedule-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--block-space) var(--inline-space-lg);
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-sm);
  }

  .schedule-card__header {
    display: flex;
    align-items: center;
    gap: var(--inline-space-sm);
    flex-wrap: wrap;
  }

  .schedule-card__name {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--color-link);
    text-decoration: none;
  }

  .schedule-card__name:hover {
    text-decoration: underline;
  }

  .schedule-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
  }

  .schedule-card__facility,
  .schedule-card__frequency {
    display: flex;
    align-items: center;
    gap: var(--inline-space-xs);
  }

  .schedule-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inline-space);
    padding-block-start: var(--block-space-sm);
    border-block-start: 1px solid var(--color-border-light);
  }

  .schedule-card__due-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink-muted);
  }

  /* ======================
   * SCHEDULE BANNER (home page)
   * ====================== */
  .schedule-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inline-space-lg);
    padding: var(--block-space-sm) var(--inline-space-lg);
    background-color: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-block-end: var(--block-space);
  }

  .schedule-banner__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--inline-space-lg);
  }

  .schedule-banner__item {
    display: flex;
    align-items: center;
    gap: var(--inline-space-xs);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .schedule-banner__item--overdue {
    color: oklch(45% 0.18 25);
  }

  .schedule-banner__item--due-today {
    color: oklch(45% 0.15 70);
  }

  .schedule-banner__link {
    font-size: var(--text-sm);
    color: var(--color-link);
    text-decoration: none;
    white-space: nowrap;
  }

  .schedule-banner__link:hover {
    text-decoration: underline;
  }
}