/* Field: label, required/optional marker, hint, error and character count around one control.
   Contract: docs/ui/CONVENTIONS.md. Partial API: web/templates/components/field.html. */
@layer components {
  .field {
    --field-gap: calc(var(--space-1) + var(--space-05)); /* 6px: label to control, control to hint */
    display: grid;
    gap: var(--field-gap);
    min-width: 0;
    align-content: start;

    &[data-layout="inline"] {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      column-gap: var(--space-4);
      > .field-foot { grid-column: 1 / -1; }
    }
  }
  /* A floated legend is no longer "rendered" in the border, so it becomes an ordinary grid item. */
  fieldset.field > .field-label { float: inline-start; }

  .field-label {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--line-xs);
    letter-spacing: var(--tracking-wide);
  }
  .field-required { color: var(--color-danger-text); }
  .field-optional { font-weight: var(--weight-regular); letter-spacing: var(--tracking-normal); }

  .field-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    font-size: var(--text-sm);
    line-height: var(--line-sm);
    &:not(:has(> :not([hidden], [role="status"]))) { display: none; }
    > :not(.field-count) { grid-column: 1; }
  }
  .field-hint { color: var(--color-text-muted); }
  /* A shown error replaces the hint (server-rendered or set by field.js). */
  .field-foot:has(> .field-error:not([hidden])) > .field-hint { display: none; }
  .field-error {
    --icon-size: var(--icon-sm);
    display: flex;
    gap: var(--space-1);
    align-items: flex-start;
    color: var(--color-danger-text);
    > .icon { margin-block-start: 2px; }
  }
  .field-count {
    grid-column: 2;
    grid-row: 1;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    &[data-over] { color: var(--color-danger-text); font-weight: var(--weight-medium); }
  }
}