/* ---------- form fields ---------- */
.field {
  display: grid;
  gap: 8px;
}
.field label {
  font: 500 14px/1.3 var(--ui);
  color: var(--ink);
}
.field input,
.field textarea {
  width: 100%;
  font: 400 16px/1.4 var(--ui);
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--field-line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  min-height: 48px;
}
.field input::placeholder,
.field textarea::placeholder { color: #8C899E; }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--laurel);
  outline-offset: 1px;
  border-color: transparent;
}
.field [aria-invalid="true"] { border-color: var(--danger); }

.err {
  margin: 0;
  font-size: 13px;
  color: var(--danger);
}
.err:empty { display: none; }

/* the trap field for bots, out of sight */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ---------- updates by email, without applying ---------- */
.updates-form {
  display: flex;
  gap: 10px;
  flex: 1 1 380px;
  max-width: 520px;
  flex-wrap: wrap;
}
.updates-form .field {
  flex: 1 1 240px;
  gap: 6px;
}
.updates-form input { min-height: 48px; }
.updates-form .btn { min-height: 48px; }

.updates-done {
  flex: 1 1 380px;
  max-width: 520px;
}
.updates-done p { margin: 0; }

.alt-link {
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--field-line);
}
.alt-link:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}