/* ─────────── edit ─────────── */
/* There is no title input anywhere: editing line 1 re-files the note. */
.editor-wrapper { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 0.875rem var(--pad) 0; }
.editor-wrapper form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.editor-textarea {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  resize: none;
  background: none;
  border: 0;
  outline: none;
  color: #cfd6e0;
  font-family: var(--mono);
  font-size: 0.84375rem;
  line-height: 1.68;
  padding: 1rem 0 0.75rem;
  caret-color: var(--accent);
}
/* The save state, in the bar beside Save. The prototype puts this above the
 * textarea and pads it there; here it has to sit on the button's centre line. */
.save-status { font-family: var(--mono); font-size: 0.65625rem; color: var(--faint); line-height: 1; letter-spacing: .02em; }

/* one label voice across every form */
.form-field label { font-size: 0.9375rem; color: var(--text); }
/* Helper text under a field is prose, so it reads sans wherever it appears.
 * Anything machine-generated inside it keeps its own mono voice. */
.form-field .hint, .form-field label small {
  display: block;
  margin-top: 0.375rem;
  font-family: var(--sans);
  font-size: 0.78125rem;
  color: var(--muted);
  white-space: normal;
  line-height: 1.5;
}
.form-field label small { margin-top: 0.1875rem; font-weight: 400; }

/* The browser's checkbox at a size worth aiming at. accent-color paints the
 * native control, so the whole of it stays clickable and stays a checkbox to
 * anything reading the page.
 *
 * color-scheme as well as accent-color: without it the box the tick sits in is
 * drawn from the light theme and comes out white on this page. */
.form-field input[type=checkbox] {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  color-scheme: dark;
  accent-color: var(--accent);
  cursor: pointer;
}