/* Shared form and control primitives.
 *
 * These classes are consumed across unrelated surfaces — the guided analysis form, the
 * draft workbench, the timeline filters, the login sheet and the shared components module
 * — but were declared inside `screens-operator.css`, a route stylesheet. A global
 * primitive owned by a route stylesheet is the same structural coupling that produced the
 * masthead logout defect: the route that happens to declare it silently becomes the
 * authority for every other consumer.
 *
 * Nothing here is restyled. The declarations are moved verbatim so ownership is correct
 * without changing a single rendered value. Contextual overrides such as
 * `.auth-form .field` and `.draft-instruction-field .field-help` are more specific and
 * continue to win, which is why this layer loads before the surfaces that refine it.
 */

.field { display: grid; min-width: 0; align-content: start; gap: var(--space-1); }
.field > span,
.check-field > span {
  color: var(--ink-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.field input,
.field select { width: 100%; min-width: 0; max-width: 100%; }
.field input[type="file"] { padding: var(--space-2); }
.field input.is-superseded { background: var(--paper-sunken); }

.check-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.6rem;
  padding: var(--space-2) var(--space-3);
  border: var(--border-hair) solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-sunken);
}
.check-field input { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; min-height: 0; }

.field-help,
.provider-description {
  max-width: var(--reading-max);
  margin: var(--space-3) 0 0;
  color: var(--slate-600);
  font-size: var(--text-xs);
}

.field-error {
  margin: 0;
  color: var(--alert-ink);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.field-error::before { content: "✕\00a0"; }

.field-count {
  margin: var(--space-1) 0 0;
  color: var(--slate-600);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
}


/* Stacked forms are used by template management and supplementary uploads. They previously
 * relied on raw label/input flow, which left native file controls and long textareas with
 * intrinsic widths that could force page-level horizontal scrolling on phones. */
.field-stack {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.field-stack > label {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.field-stack > label > span {
  color: var(--ink-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.field-stack :is(input, select, textarea),
.field textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.compact-form {
  max-width: 42rem;
}