/* list-group — @tokens: (none — all semantic/L1)

   A bordered, divided vertical list (Bootstrap list-group idiom): settings
   rows, nav lists, summary line-items. The panel owns one outer border +
   radius and clips its corners; each item carries a bottom divider (the last
   one drops it). The `--interactive` modifier turns items into hoverable /
   focusable rows (links or buttons); the base list is static text.

   Token-only: border/radius/spacing/colour all read the semantic scale. */
.hzo-list-group {
    display: flex;
    flex-direction: column;
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-panel);
    overflow: hidden;
    font-size: var(--fs-200);
    line-height: var(--lh-normal);
}

.hzo-list-group__item {
    padding: var(--space-md);
    border-bottom: var(--border-1) solid var(--border);
    color: var(--text-body);
}
.hzo-list-group__item:last-child { border-bottom: 0; }

/* Selected/current row — brand fill with its paired on-brand ink. */
.hzo-list-group__item.is-active {
    background: var(--brand);
    color: var(--text-on-brand);
}

/* Interactive modifier — items become hoverable / focusable controls.
   Guard the hover fill transition behind reduced-motion. */
.hzo-list-group--interactive .hzo-list-group__item {
    cursor: pointer;
    transition: background var(--transition-base) ease, color var(--transition-base) ease;
}
.hzo-list-group--interactive .hzo-list-group__item:hover {
    background: var(--bg-alt);
}
/* A11y — focus ring + disabled idiom on the interactive rows. */
.hzo-list-group--interactive .hzo-list-group__item:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}
.hzo-list-group--interactive .hzo-list-group__item[disabled],
.hzo-list-group--interactive .hzo-list-group__item[aria-disabled="true"],
.hzo-list-group--interactive .hzo-list-group__item.is-disabled {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .hzo-list-group--interactive .hzo-list-group__item { transition: none; }
}