/*
 * A short validation message under a control that the form states before
 * anything is submitted ("A quarter needs a year first."): caption size, in
 * negative red, set a little apart from the control. Server-side errors keep
 * .field-error (forms.css).
 */
@layer components {
  .field-message {
    display: block;
    margin-block-start: var(--space-2);
    font: var(--text-caption);
    color: var(--color-negative);
  }
}