/* icon-list — @tokens: --icon-list-icon-size

   An unordered list with a leading icon per row (feature bullets, spec sheets,
   "what's included" / checklists). The list resets its native marker and lays
   the rows out on a grid; each row is a flex line with a fixed-size leading
   icon and top-aligned text. The `--checklist` modifier recolours the icon to
   the success role for "✓ included" lists.

   Token-only: gap/colour read the semantic scale; the fixed icon box has no
   semantic token, so it is a component token with a literal fallback (the
   icon-button.css dial pattern). */
.hzo-icon-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-sm);
    color: var(--text-body);
}

.hzo-icon-list__item {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
}

/* Leading icon — accent-tinted, fixed square, never shrinks under long text. */
.hzo-icon-list__icon {
    flex: 0 0 auto;
    width: var(--icon-list-icon-size, 20px);
    height: var(--icon-list-icon-size, 20px);
    color: var(--accent);
}

/* Checklist variant — swap the accent tint for the success (✓ done) role. */
.hzo-icon-list--checklist .hzo-icon-list__icon {
    color: var(--success);
}