/* Profile, preferences and password */

/* Lined up with the heading above, but no wider than reads comfortably. */
.settings { padding-top: 28px; }
.settings > * { max-width: 820px; }
.settings--narrow > * { max-width: 480px; }
.settings__form { display: grid; gap: 8px; }
.settings__section { padding-bottom: 24px; margin-bottom: 8px; border-bottom: 1px solid var(--line); display: grid; gap: 14px; }
.settings__section h2 { font-size: 1.15rem; margin: 0; }
.settings__section > p.muted { margin: -8px 0 0; font-size: 0.9rem; }
.settings__form > .button { justify-self: start; margin-top: 8px; }
.settings textarea {
  width: 100%;
  padding: 0.6em 0.75em;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.settings input[type="number"] {
  width: 100%;
  padding: 0.6em 0.75em;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--paper);
  color: var(--ink);
}

.settings__checks { display: grid; gap: 4px; }
.setting-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border-radius: var(--radius-small);
  cursor: pointer;
}
.setting-check:hover { background: var(--paper-2); }
.setting-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--red); }
.setting-check > span { display: grid; gap: 2px; }
.setting-check .muted { font-size: 0.875rem; }
.settings .field-row > .field { flex: 1 1 220px; }