dl {
  display: grid;
  grid-template-columns: fit-content(20ch) auto;
}

dt {
  font-weight: bold;
  text-align: right;
  grid-column: 1;
  margin-right: 1em;
}

dd {
  grid-column: 2;
  margin-left: 1em;
}

/* Validation feedback via HTML5 pseudo-classes.
   :not(:placeholder-shown) prevents error styling on untouched fields. */
.input:not(:placeholder-shown):invalid,
.textarea:not(:placeholder-shown):invalid {
  border-color: #f14668;
  box-shadow: 0 0 0 0.125em rgba(241, 70, 104, 0.25);
}

.input:not(:placeholder-shown):valid,
.textarea:not(:placeholder-shown):valid {
  border-color: #48c78e;
  box-shadow: 0 0 0 0.125em rgba(72, 199, 142, 0.25);
}

/* Button-style radio group (e.g. timeslot picker). Hides the native radio
   and styles the adjacent .button, toggling an active look via :checked.
   Uses a grid with uniform column widths so rows and columns line up. */
.radio-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.5rem;
}

.radio-buttons label {
  margin: 0;
  cursor: pointer;
  display: block;
}

.radio-buttons .button {
  width: 100%;
}

.radio-buttons input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.radio-buttons .button {
  background-color: var(--slot-bg, whitesmoke);
  border-color: var(--slot-border, #dbdbdb);
}

.radio-buttons input[type="radio"]:checked + .button {
  background-color: var(--slot-color, #3273dc);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}

.radio-buttons input[type="radio"]:focus-visible + .button {
  box-shadow: 0 0 0 0.125em rgba(0, 0, 0, 0.12);
}

/* Per-schedule palette. Each index gets three CSS variables: the saturated
   "selected" colour, and a matched light fill + border used when unselected.
   Extra schedules beyond four wrap around to the default style. */
.sched-color-0 { --slot-color: #3273dc; --slot-bg: #d6e3f5; --slot-border: #9fb8db; }
.sched-color-1 { --slot-color: #b88b00; --slot-bg: #fff7d6; --slot-border: #e9d892; }
.sched-color-2 { --slot-color: #257953; --slot-bg: #e4f5ec; --slot-border: #a3e0bf; }
.sched-color-3 { --slot-color: #b5364b; --slot-bg: #fce8e8; --slot-border: #f0a6b3; }

/* Legend row shown above the timeslot grid when more than one schedule is
   configured, so the user can read the colour key. */
.schedule-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.9em;
  color: #555;
}

.schedule-legend .legend-swatch {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border-radius: 3px;
  margin-right: 0.4em;
  vertical-align: -0.1em;
  background-color: var(--slot-color, #999);
}

.migration-status-message {
  max-width: 40ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}