/* Shared single-select controls, including controls created after page load.
   Keep native form semantics and each module's sizing/validation colors. */
:root select:not([multiple]):is(:not([size]),[size="1"]){
    -webkit-appearance:none;
    appearance:none;
    padding-inline-end:44px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2324165F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:16px;
    border-radius:12px;
}
:root select:not([multiple]):is(:not([size]),[size="1"]):focus-visible{
    outline-offset:3px;
    box-shadow:none!important;
}
:root .math-toolbar select:not([multiple]):is(:not([size]),[size="1"]){
    min-inline-size:120px;
    padding-inline-end:30px;
    background-position:right 9px center;
    background-size:14px;
}
/* Leave room for "10" and the selected-option checkmark in the CBT picker. */
:root .exam-display-settings select:not([multiple]):is(:not([size]),[size="1"]){
    min-inline-size:96px;
}
@supports (appearance:base-select) and selector(::picker(select)){
    :root select:not([multiple]):is(:not([size]),[size="1"]),
    :root select:not([multiple]):is(:not([size]),[size="1"])::picker(select){appearance:base-select}
    :root select:not([multiple]):is(:not([size]),[size="1"])::picker-icon{display:none}
    :root select:not([multiple]):is(:not([size]),[size="1"])::picker(select){
        margin-block-start:8px;
        padding:5px;
        inline-size:anchor-size(width);
        min-inline-size:anchor-size(width);
        max-inline-size:calc(100vw - 24px);
        max-block-size:min(320px,60dvh);
        overflow:auto;
        border:1px solid var(--color-control-border);
        border-radius:12px;
        background:var(--color-surface);
        color:var(--color-text);
        box-shadow:0 8px 24px rgb(36 22 95 / 12%);
    }
    :root select:not([multiple]):is(:not([size]),[size="1"]) option{
        display:flex;
        align-items:center;
        gap:12px;
        min-height:44px;
        padding:10px 12px;
        border:0;
        border-radius:8px;
        background:var(--color-surface);
        color:var(--color-text);
        font-size:16px;
        line-height:1.5;
        white-space:normal;
        overflow-wrap:anywhere;
    }
    :root select:not([multiple]):is(:not([size]),[size="1"]) option:enabled:is(:checked,:hover,:focus-visible){
        background:var(--color-surface-soft);
        color:var(--color-deep-indigo);
    }
    :root select:not([multiple]):is(:not([size]),[size="1"]) option:checked{font-weight:600}
    :root select:not([multiple]):is(:not([size]),[size="1"]) option:disabled{
        color:var(--color-muted);
        cursor:not-allowed;
    }
    :root select:not([multiple]):is(:not([size]),[size="1"]) option:focus-visible{
        outline:2px solid var(--color-royal-indigo)!important;
        outline-offset:-2px;
        box-shadow:none!important;
    }
    :root select:not([multiple]):is(:not([size]),[size="1"]) option::checkmark{
        order:1;
        margin-inline-start:auto;
        color:var(--color-royal-indigo);
    }
}
@media(forced-colors:active){
    :root select:not([multiple]):is(:not([size]),[size="1"]){appearance:auto;background-image:none}
    :root select:not([multiple]):is(:not([size]),[size="1"])::picker(select){appearance:auto}
}