/* Field (card C39), from the brand kit: the label, hint, error and control
   chrome that Input, Select and Textarea share. Values come only from
   tokens.css. The kit repeated these rules in each of the three; they are
   written once here. */
.q-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.q-field__label {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}

.q-field__opt {
  font-weight: var(--weight-regular);
  color: var(--text-muted);
}

.q-field__hint {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.q-field__err {
  font-size: var(--text-caption);
  color: var(--status-danger-fg);
}

.q-control {
  width: 100%;
  height: var(--height-control);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  color: var(--text-body);
  transition: var(--transition-control);
}

.q-control::placeholder {
  color: var(--text-placeholder);
}

.q-control:hover {
  border-color: var(--q-green-mid);
}

/* The ring is a shadow, which forced-colours mode removes, so a transparent
   outline stands behind it: forced-colours mode paints that outline in a
   system colour and the focus stays visible. */
.q-control:focus {
  outline: 2px solid transparent;
  border-color: var(--q-green);
  box-shadow: var(--ring-focus);
}

.q-control[disabled] {
  background: var(--surface-sunken);
  color: var(--text-muted);
  cursor: not-allowed;
}

.q-control[disabled]:hover {
  border-color: var(--border-default);
}

.q-control--invalid,
.q-control--invalid:hover,
.q-control--invalid:focus {
  border-color: var(--status-danger-fg);
}

.q-control--mono {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
}