.settings-page {
  display: grid;
  gap: 1.25rem;
  max-inline-size: 46rem;
}

.settings-panel {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 1.5rem);
  border: 1px solid var(--color-border);
  border-radius: .75rem;
  background: var(--color-surface);
  overflow-wrap: anywhere;
}

.settings-panel h2,
.settings-form label,
.settings-form legend,
.settings-session-times caption {
  font-weight: 600;
}

.settings-summary,
.settings-hours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: .75rem 1rem;
}

.settings-summary dt {
  color: var(--color-text-subtle);
  font-size: .875rem;
}

.settings-session-times {
  inline-size: 100%;
  text-align: start;
}

.settings-session-times caption,
.settings-session-times :is(th, td) {
  padding-block: .5rem;
  text-align: start;
  vertical-align: top;
}

.settings-session-times :is(th, td) {
  padding-inline-end: .5rem;
  border-block-end: 1px solid var(--color-border);
}

.settings-form,
.settings-form fieldset {
  display: grid;
  gap: 1rem;
  min-inline-size: 0;
}

.settings-form fieldset {
  gap: .5rem;
}

.settings-form .settings-operation-fields {
  gap: 1rem;
}

.settings-form label + select {
  margin-block-start: .25rem;
}

.settings-form select {
  max-inline-size: 100%;
  --input-padding: .625rem 1.75rem .625rem .75rem;
}

.settings-weekdays {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: .5rem;
}

.settings-weekdays > div {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

.settings-weekdays input {
  flex: 0 0 auto;
}

.settings-field-error {
  margin-block-start: .25rem;
  color: var(--color-text-negative);
}

.settings-scheduled-calendar > :is(p, table) {
  margin-block-start: .75rem;
}