/* ==========================================================================
   COMPONENTS · FIELD — a form field group: a furniture label, the control
   (styled in the elements layer), an optional help line and an error that
   appears on .op-field--invalid. The commerce/auth surfaces are built from
   these.
   ========================================================================== */

.op-field {
  display: grid;
  gap: var(--space-3xs);
}

.op-field__label {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--text);
}
.op-field__optional {
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--text-3xs);
  color: var(--text-muted);
}
.op-field__required { color: var(--accent); }

.op-field__help {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.op-field__error {
  display: none;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--critical);
}

/* — Invalid state — */
.op-field--invalid .op-field__control,
.op-field--invalid input,
.op-field--invalid textarea,
.op-field--invalid select {
  border-color: var(--critical);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--critical) 30%, transparent);
}
.op-field--invalid .op-field__error { display: block; }

/* — Inline field (label beside control), e.g. a search row — */
.op-field--inline {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-xs);
}

/* A small mono prefix/suffix attached to a control (e.g. a $ or a unit) */
.op-field__addon-group {
  display: flex;
  align-items: stretch;
}
.op-field__addon {
  display: inline-flex;
  align-items: center;
  padding-inline: 0.7em;
  background: var(--surface-sunken);
  border: 1px solid var(--rule-strong);
  font-family: var(--font-data);
  color: var(--text-secondary);
}
.op-field__addon-group .op-field__addon:first-child { border-right: 0; border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.op-field__addon-group input { border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }