/* The name box reuses the app's dialog styles (core/confirm.js); this only
   adds the text field and its error line. */
.name-input {
  width: 100%;
  margin-top: var(--s-3);
  padding: 11px 12px;
  border: var(--border-w) solid var(--rim-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}
.name-input:focus { outline: none; border-color: var(--accent); }
.name-error {
  margin-top: var(--s-2);
  font-size: 0.78rem;
  font-weight: var(--body-weight-strong);
  color: var(--accent-2);
}