﻿.form-section {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  padding: 14px;
}
.form-section h3 { margin: 0 0 8px; }
.form-section summary {
  cursor: pointer;
  grid-column: 1 / -1;
}
.form-section summary h3 {
  display: inline;
}
.form-section .muted { margin-top: 0; }
.input, .select, .textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-height: 42px;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
}
.input-invalid { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; }
.required-marker {
  color: var(--danger);
  font-weight: 900;
  margin-left: 3px;
}
.checkbox-input {
  accent-color: var(--brand);
  flex: 0 0 auto;
  height: 18px;
  margin: 0;
  width: 18px;
}
.field:has(.checkbox-input) {
  align-items: center;
  display: flex;
  gap: 10px;
}
.field:has(.checkbox-input) > label {
  margin: 0;
  order: 2;
}
.field:has(.checkbox-input) > .checkbox-input {
  order: 1;
}
.field:has(.checkbox-input) > .field-errors {
  flex-basis: 100%;
  order: 3;
}
.checkbox-explainer {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  padding: 9px 10px;
}
.checkbox-explainer .check-row {
  justify-content: flex-start;
}
.checkbox-explainer .helptext {
  margin: 0;
  max-width: 46rem;
}
.checkbox-explainer-layout {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}
.checkbox-explainer-layout .check-row {
  align-self: center;
}
.checkbox-group {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}
.checkbox-group label {
  align-items: center;
  display: flex;
  gap: 10px;
  margin: 0;
}
.checkbox-group input[type="checkbox"] {
  accent-color: var(--brand);
  flex: 0 0 auto;
  height: 18px;
  margin: 0;
  width: 18px;
}
.errors { margin: 0 0 16px; padding: 0; list-style: none; }
.errors li, .message {
  overflow-wrap: anywhere;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff1f2;
  color: var(--danger);
  margin-bottom: 8px;
}
.field-errors { margin-top: 7px; margin-bottom: 0; }
.field-errors li { padding: 7px 10px; }
.error-summary {
  border: 1px solid #fecaca;
  border-left: 5px solid var(--danger);
  border-radius: 12px;
  background: #fff1f2;
  color: var(--danger);
  margin-bottom: 18px;
  padding: 14px 16px;
  overflow-wrap: anywhere;
}
.error-summary h2 { font-size: 1rem; margin: 0 0 8px; }
.error-summary ul { margin: 0; padding-left: 20px; }
.error-summary a { text-decoration: underline; }
.message.success { background: #ecfdf5; color: var(--good); }
#status-settings input[type="color"] {
  min-height: 34px;
  padding: 3px;
  width: 4.5rem;
}

