@layer components {
  /* ======================
   * SCHEDULE SELECT
   * ======================
   * Cards for choosing a schedule to record against.
   */
  .schedule-select-list {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .schedule-select-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--inline-space-lg);
    padding: var(--block-space) var(--inline-space-lg);
    background-color: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .schedule-select-card__info {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-xs);
    min-width: 0;
  }

  .schedule-select-card__location {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--inline-space-sm);
  }

  .schedule-select-card__location i {
    color: var(--color-ink-muted);
  }

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

  .schedule-select-card__meta span {
    display: flex;
    align-items: center;
    gap: var(--inline-space-xs);
  }

  .schedule-select-card__animals {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    display: flex;
    align-items: center;
    gap: var(--inline-space-xs);
  }

  .schedule-select-card__action {
    flex-shrink: 0;
  }

  @media (max-width: 640px) {
    .schedule-select-card {
      flex-direction: column;
      align-items: stretch;
    }

    .schedule-select-card__action {
      border-block-start: 1px solid var(--color-border-subtle);
      padding-block-start: var(--block-space-sm);
    }
  }
}