/* Schedules: a card per schedule, and the new-schedule flow's own pieces. */

.sched-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sched-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
}

.sched-card--paused {
  border-style: dashed;
}

.sched-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.sched-card__head h3 {
  font-size: var(--text-16);
  font-weight: var(--weight-semibold);
}

.sched-card__when {
  color: var(--text-dim);
  font-size: var(--text-13);
}

.sched-card__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
}

.sched-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sched-card__delete {
  margin-left: auto;
}

/* The When stage: four fields in a row, wrapping when narrow. */
.sched-when {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.sched-preview {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
}

/* One action of the Actions stage. */
.sched-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.sched-step__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sched-step__head h4 {
  font-size: var(--text-14);
  font-weight: var(--weight-semibold);
}

.sched-kinds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-3);
}

.sched-step__fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.sched-step__after {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: 0;
  padding: 0;
}

.sched-step__after legend {
  font-size: var(--text-13);
  font-weight: var(--weight-medium);
}

/* The review's actions in the order they start. */
.sched-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding-left: var(--space-5);
}

.sched-timeline li span {
  display: block;
  font-size: var(--text-12);
}

/* The cron stage: the expression, then ways to start from one. */
.sched-cron {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 36rem;
}

.sched-cron__examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}