/* Form layout shared by every screen: a label above each control, as the desktop forms do. */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-2) var(--s-3);
}

.form-grid--tight { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-size: var(--t-base); color: var(--c-text); }
.field__hint { font-size: var(--t-xs); color: var(--c-text-gray); }
.field__error { font-size: var(--t-base); color: var(--c-error); }
.field input, .field select, .field textarea { width: 100%; }
.field textarea { min-height: 60px; resize: vertical; }
.field--check { flex-direction: row; align-items: center; gap: 0; }
.field--check label { display: inline-flex; align-items: center; }

.form-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin-top: var(--s-3); }
.form-actions button { min-width: 75px; }

.inline-form { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.inline-form input { flex: 1 1 200px; }

.msg { padding: 4px 8px; border: 1px solid var(--c-info-border); margin: var(--s-2) 0; background: var(--c-info); }
.msg--error { color: var(--c-error); }
.msg--ok { color: var(--c-success); }
.msg--info { color: var(--c-text); }

fieldset { border: 1px solid var(--c-etched); padding: var(--s-2) var(--s-3); margin: 0 0 var(--s-2); }
legend { padding: 0 3px; }