/* definition-list — @tokens: --definition-list-gap, --definition-list-inline-gap

   A styled semantic <dl>. Structural primitive (no interaction) — term/description
   pairs for glossaries, meta panels, spec summaries. The element selectors (dt/dd)
   are scoped UNDER the root class per the authoring standard's semantic-element
   rule; they borrow no other block's classes and belong to this block only.

   Token-only: the pair rhythm + the inline column gap have no single semantic role
   that fits, so they are component tokens with a space-scale literal fallback (the
   icon-button.css dial pattern). Everything else reads an L1/L2 token directly.
   Static/structural, so no focus/disabled a11y idioms — nothing here is focusable. */
.hzo-definition-list {
    margin: 0;
    font-size: var(--fs-200);
    line-height: var(--lh-normal);
    color: var(--text-body);
}

/* Term — heading ink, semibold, one step below body for a label feel. */
.hzo-definition-list dt {
    font-weight: var(--fw-600);
    color: var(--text-heading);
    font-size: var(--fs-100);
}

/* Description — body ink; reset the UA left indent; carry the pair rhythm below. */
.hzo-definition-list dd {
    margin: 0 0 var(--definition-list-gap, var(--space-md));
    color: var(--text-body);
}
.hzo-definition-list dd:last-child {
    margin-bottom: 0;
}

/* Inline — dt/dd side-by-side on a two-column grid (label auto, value fills).
   The row gap keeps the vertical rhythm; the column gap separates term from
   description. */
.hzo-definition-list--inline {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-xs) var(--definition-list-inline-gap, var(--space-md));
    align-items: baseline;
}
.hzo-definition-list--inline dd {
    margin: 0;
}