/* ============================================================
   app-searchselect — searchable single-choice list (the
   <app-searchselect> tag helper, app-searchselect.js). The
   button matches app-textbox; the panel opens beneath it on
   every device. Themed from semantic tokens only.
   ============================================================ */
@layer components {
    .app-searchselect {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        width: 100%;
    }

    .app-searchselect__label {
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
    }

    .app-searchselect__button {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        width: 100%;
        height: 2rem; /* matches .app-textbox__input */
        padding: 0 var(--space-3);
        font: inherit;
        color: var(--color-ink);
        text-align: start;
        background: var(--color-surface-field);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

    .app-searchselect__button:focus-visible {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 2px var(--color-accent-soft);
    }

    .app-searchselect__text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-searchselect__chevron {
        color: var(--color-ink-mute);
    }

    .app-searchselect__panel {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 50; /* above page cards and inputs; there is no z-index token */
        box-sizing: border-box;
        width: max(100%, 16rem);
        margin-top: var(--space-1);
        padding: var(--space-2);
        background: var(--color-surface-field);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
    }

    .app-searchselect__search {
        box-sizing: border-box;
        width: 100%;
        height: 2.25rem;
        margin-bottom: var(--space-2);
        padding: 0 var(--space-3);
        font: inherit;
        font-size: 1rem; /* 16px: below it iPhone Safari zooms the page when the box takes focus */
        color: var(--color-ink);
        background: var(--color-surface-field);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
    }

    .app-searchselect__search:focus-visible {
        outline: none;
        border-color: var(--color-accent);
    }

    .app-searchselect__list {
        max-height: 18rem;
        margin: 0;
        padding: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        list-style: none;
    }

    .app-searchselect__option {
        padding: var(--space-2);
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

    .app-searchselect__option:hover,
    .app-searchselect__option.is-active {
        background: var(--color-accent-wash);
    }

    .app-searchselect__option[aria-selected="true"] {
        font-weight: 600;
    }

    .app-searchselect__empty {
        margin: 0;
        padding: var(--space-2);
        color: var(--color-ink-mute);
    }
}