/* ============================================================
   app-select — native single-choice list (the <app-select> tag
   helper). Peer of app-textbox (ADR 0014): same label, height,
   border and focus ring, so the two line up side by side. The
   browser's own arrow is kept; on phones the OS picker opens.
   Themed from semantic tokens only.
   ============================================================ */
@layer components {
    .app-select {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        width: 100%;
    }

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

    .app-select__input {
        box-sizing: border-box;
        width: 100%;
        height: 2rem; /* matches .app-textbox__input */
        font: inherit;
        color: var(--color-ink);
        background-color: var(--color-surface-field);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        padding: 0 var(--space-2);
        cursor: pointer;
        transition: border-color var(--dur-base) var(--ease),
                    box-shadow var(--dur-base) var(--ease);
    }

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

    .app-select__input[aria-invalid="true"] {
        border-color: var(--color-error);
    }

    .app-select__input:disabled {
        background-color: var(--color-surface-alt);
        color: var(--color-ink-mute);
        cursor: not-allowed;
    }

    .app-select--disabled .app-select__label {
        opacity: 0.5;
    }
}