/* combobox — @tokens: --combobox-max-height

   A searchable / autocomplete select: a text `__input` styled like a select
   (with a chevron) over a floating `__listbox` of `__option`s. CSS STRUCTURE
   ONLY — the search/filter behavior + `.is-open` toggle + `.is-active`
   roving-focus come later from JS, like the other interactive components. Its
   own `.hzo-combobox` root — it mirrors the dropdown panel idiom (surface /
   border / shadow-lg) without colliding with `.hzo-dropdown` or `.hzo-form`.

   Token-only: the panel's scroll cap has no semantic token in the scale, so
   it's a component token with a literal fallback — the same dial pattern
   icon-button.css uses. The chevron is a `background` SVG whose stroke is the
   muted-ink literal (matches the .hzo-form select chevron idiom). Everything
   else reads a semantic/L1 token. */
.hzo-combobox {
    position: relative;
}

/* Trigger — a text input painted like a select; chevron room on the right. */
.hzo-combobox__input {
    width: 100%;
    padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-md);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right var(--space-md) center / 16px 16px;
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: var(--fs-200);
    line-height: var(--lh-normal);
    cursor: text;
    box-sizing: border-box;
    transition: border-color var(--transition-base) ease;
}

/* Floating panel — mirrors the .hzo-dropdown__menu surface idiom; hidden until
   JS adds `.is-open` to the root. */
.hzo-combobox__listbox {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-500);
    margin-top: var(--space-2xs);
    max-height: var(--combobox-max-height, 260px);
    overflow: auto;
    list-style: none;
    padding: 0;
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-lg);
    display: none;
}
.hzo-combobox.is-open .hzo-combobox__listbox { display: block; }

/* Option row — hover / keyboard-active / selected all share the alt-surface
   highlight. `.is-active` is the JS-driven roving-focus row; `[aria-selected]`
   is the committed choice. */
.hzo-combobox__option {
    padding: var(--space-sm) var(--space-md);
    color: var(--text-body);
    cursor: pointer;
}
.hzo-combobox__option:hover,
.hzo-combobox__option.is-active,
.hzo-combobox__option[aria-selected="true"] {
    background: var(--bg-alt);
    color: var(--text-heading);
}

/* A11y — required. Focus ring on the input; disabled state on the input.
   Reduced-motion is handled globally by components/_base/a11y.css. */
.hzo-combobox__input:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}
.hzo-combobox__input[disabled],
.hzo-combobox__input[aria-disabled="true"],
.hzo-combobox.is-disabled {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .hzo-combobox__input { transition: none; }
}