/* field — @tokens: (none — layout + typography only, all semantic/L1 tokens)

   A standalone single-field wrapper (label + control + hint + error) for an input
   used OUTSIDE a full `.hzo-form` — e.g. a search box or filter in a widget. This
   styles LAYOUT + label/hint/error TYPOGRAPHY only; it deliberately does NOT touch
   the input element itself (that's the input's own job — `.hzo-form` inputs, native
   controls, or a primitive like `.hzo-range`). Nothing in the wrapper is focusable,
   so no focus idiom here — the control inside carries its own focus ring.

   Token-only: every value is a semantic/L1 token straight off the scale, so there
   are no component-token dials to declare. */
.hzo-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

/* Label — heading-ink, semibold, small-text step. */
.hzo-field__label {
    font-weight: var(--fw-600);
    color: var(--text-heading);
    font-size: var(--fs-100);
    line-height: var(--lh-snug);
}

/* Control slot — holds the input; the input styles itself. */
.hzo-field__control {
    display: block;
}

/* Hint — muted helper text below the control. */
.hzo-field__hint {
    color: var(--text-muted);
    font-size: var(--fs-50);
    line-height: var(--lh-normal);
}

/* Error — same size as the hint, error ink. Hidden by default; the --error
   modifier reveals it (error text only exists when the field is in error). */
.hzo-field__error {
    display: none;
    color: var(--error);
    font-size: var(--fs-50);
    line-height: var(--lh-normal);
}

/* Modifier: error — surface the error message and tint the label to match. */
.hzo-field--error .hzo-field__error {
    display: block;
}
.hzo-field--error .hzo-field__label {
    color: var(--error);
}

/* Modifier: inline — label sits BESIDE the control (label auto, control fills). */
.hzo-field--inline {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-sm);
}
/* Hint + error span both columns so they align under the control. */
.hzo-field--inline .hzo-field__hint,
.hzo-field--inline .hzo-field__error {
    grid-column: 2;
}

/* Disabled — dims the whole field group (the control inside is disabled in its
   own markup; this greys the label/hint to match). No focus idiom: nothing in
   the wrapper is focusable. */
.hzo-field[aria-disabled="true"],
.hzo-field.is-disabled {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}