/*
 * Het opstelscherm (onderdeel 5).
 *
 * Geen enkele nieuwe kleur en geen enkele nieuwe maat: alles hieronder gebruikt
 * de tokens uit §3 en §4. §9 van de bouwstenen zegt dat een scherm dat iets
 * nodig heeft wat daar niet staat een ontwerpvraag is en geen implementatiedetail
 * - dus staat hier alleen plaatsing.
 */

.mail-relatie {
  font-size: var(--fs-support);
}

/* Het adres onder de keuze. Klein, want de naam is waar je op tikt. */
.mail-adres {
  margin-top: 8px;
  font-size: var(--fs-support-sm);
  color: var(--muted-2);
  word-break: break-all;
}

/*
 * "Ontvangers zien namens ...". Dat is een gevolg dat je vóór het versturen wilt
 * weten en niet erna (§11.2).
 */
.mail-namens {
  margin-top: 6px;
  font-size: var(--fs-support-sm);
  color: var(--gold-light);
}

/*
 * "algemeen" achter de relatienaam in de ontvangerkeuze. Klein en rustig: het is
 * een toelichting bij een naam en geen tweede naam.
 */
.chip-bij {
  margin-left: 6px;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 400;
}

.mail-leeg {
  margin-top: 10px;
  font-size: var(--fs-support);
  color: var(--muted);
  line-height: 1.45;
}

/*
 * Het berichtveld. Ruim, want dit is waar het werk gebeurt, en meeschalend met
 * de lettergrootte van het toestel (§16.5) - vandaar `em` en geen vaste hoogte.
 */
.mail-bericht {
  width: 100%;
  margin-top: 10px;
  min-height: 12em;
  padding: 12px 14px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.45;
  resize: vertical;
}
.mail-bericht::placeholder {
  color: var(--muted-2);
}
.mail-bericht:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/*
 * De regel onder de knop. Normaal geruststellend ("er gaat pas iets weg als je
 * hierop tikt"), en oranje zodra hij een reden draagt waarom het niet kan.
 */
.dock-note-warn {
  color: var(--warn);
}

/*
 * Het bevestigingsvenster stond hier, en is eruit.
 *
 * §16.3 staat bevestigen toe bij iets dat onomkeerbaar én ingrijpend is, en
 * "een mail versturen" staat daar met zoveel woorden. Maar sinds
 * `BOUWOPDRACHT-2.md` §2 verstuurt de app niet meer zelf: hij opent je
 * mailprogramma, en het onomkeerbare gebeurt dáár. Een venster dat vraagt of je
 * zeker weet dat je een venster wilt openen, is de bevestigingsvraag waar §16.3
 * juist vanaf wil.
 */