/* ============================================
   Pixia - Modern select
   ============================================
   Loaded LAST on every page (patch-pages-i18n.js injects the link after the
   page's own sheets), and every rule here is written at `select:not([multiple])`
   specificity - class level - so it settles the geometry that the eighteen tool
   sheets each approximated differently. Only the properties listed below are
   normalised: each sheet keeps its own surface colour, border colour, font and
   accent, because those come from the sheet's own earlier rule.

   Browsers that support the customisable select (Chromium, Safari 26) get
   `appearance: base-select`, which removes the operating-system picker and lets
   the open list be styled and animated. Others fall back to the native picker -
   already theme-correct via `color-scheme` on :root - with a painted chevron. */

:root {
    --select-radius: 10px;
    --select-pad-end: 32px;
    --select-edge: 11px;
    --select-accent: var(--accent-primary);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa19a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="light"] {
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Each tool keeps its own focus-ring hue: the family names the accent variable
   its sheet already defines, and --accent-primary stays the fallback. */
select.cl-select   { --select-accent: var(--cl-accent, var(--accent-primary)); }
select.rs-select   { --select-accent: var(--rs-accent, var(--accent-primary)); }
select.rb-select   { --select-accent: var(--rb-accent, var(--accent-primary)); }
select.en-select   { --select-accent: var(--en-accent, var(--accent-primary)); }
select.up-select   { --select-accent: var(--up-accent, var(--accent-primary)); }
select.pn-select   { --select-accent: var(--pn-accent, var(--accent-primary)); }
select.op-select   { --select-accent: var(--op-accent, var(--accent-primary)); }
select.oc-select   { --select-accent: var(--oc-accent, var(--accent-primary)); }
select.mg-select   { --select-accent: var(--mg-accent, var(--accent-primary)); }
select.ep-select   { --select-accent: var(--ep-accent, var(--accent-primary)); }
select.exi-select  { --select-accent: var(--exi-accent, var(--accent-primary)); }
select.w2p-select  { --select-accent: var(--w2p-accent, var(--accent-primary)); }
select.wt-select   { --select-accent: var(--wt-accent, var(--accent-primary)); }
select.sg-font-select,
select.sg-file-sel { --select-accent: var(--sg-accent, var(--accent-primary)); }
select.mt-field-select,
.mt-field select   { --select-accent: var(--mt-accent, var(--accent-primary)); }
select.bc-input    { --select-accent: var(--bc-accent, var(--accent-primary)); }
select.qr-input    { --select-accent: var(--qr-accent, var(--accent-primary)); }
select.at-select,
select.ai-sub-select { --select-accent: var(--at-accent, var(--accent-primary)); }

select:not([multiple]) {
    -webkit-appearance: none;
    appearance: none;
    border-radius: var(--select-radius);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

select:not([multiple]):hover:not(:disabled) {
    border-color: var(--glass-border-hover);
}

select:not([multiple]):focus-visible,
select:not([multiple]):open {
    outline: none;
    border-color: var(--select-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--select-accent) 22%, transparent);
}

select:not([multiple]):disabled {
    cursor: not-allowed;
    opacity: .55;
}

/* The create editor's settings column is 90px wide: a 32px gutter would eat the
   value itself, so that family gets the tight version. */
select.ce-setting-select {
    --select-pad-end: 24px;
    --select-edge: 7px;
    --select-radius: 8px;
}

/* ---------- Native picker (Firefox, older Safari) ---------- */
@supports not (appearance: base-select) {
    select:not([multiple]) {
        background-image: var(--select-chevron);
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 14px 14px;
        padding-inline-end: var(--select-pad-end);
    }

    [dir="rtl"] select:not([multiple]) {
        background-position: left 11px center;
    }
}

/* ---------- Styled picker (Chromium 126+, Safari 26) ---------- */
@supports (appearance: base-select) {
    /* Eight sheets already paint a chevron as a background image with a wide
       inline-end gutter sized for it. Under base-select the arrow comes from
       ::picker-icon instead, so both halves of that arrangement are undone here
       - otherwise the control shows two arrows, with the UA one stranded in the
       middle of the old gutter. */
    select:not([multiple]) {
        appearance: base-select;
        background-image: none;
        padding-inline-end: var(--select-edge);
    }

    select:not([multiple])::picker-icon {
        content: var(--select-chevron);
        transition: rotate var(--transition-fast);
    }

    select:not([multiple]):open::picker-icon {
        rotate: 180deg;
    }

    select:not([multiple])::picker(select) {
        appearance: base-select;
        background: var(--bg-secondary);
        color: var(--text-primary);
        border: 1px solid var(--glass-border);
        border-radius: calc(var(--select-radius) + 4px);
        box-shadow: var(--shadow-lg);
        padding: 5px;
        /* Viewport-relative rather than a flat 300px so a short window does not
           get a panel taller than the page around it. Note this does NOT stop
           the picker opening upwards: the UA sizes its placement test on the
           unclamped list, so a long list flips above the control even when the
           capped panel would have fitted below. `position-area: block-end` with
           `position-try-fallbacks: flip-block` changes nothing (that is already
           the UA default), and `position-try-fallbacks: none` does pin it down
           but runs the last options off the bottom edge of the screen, so the
           flip is left to the browser and the entry animation below is written
           to look correct whichever side it lands on. */
        max-height: min(300px, 34vh);
        overflow: auto;
        scrollbar-width: thin;
        opacity: 0;
        /* Deliberately direction-neutral. The UA hangs the picker below the
           control and flips it above when the select sits near the viewport
           bottom, and CSS cannot tell which way it landed, so a slide that
           reads as "grows from the control" is wrong for half the page. A
           centred scale plus fade is correct whichever side it opens on. */
        transform: scale(.97);
        transition: opacity .16s ease, transform .18s cubic-bezier(.2, .8, .3, 1),
                    display .18s allow-discrete, overlay .18s allow-discrete;
    }

    select:not([multiple]):open::picker(select) {
        opacity: 1;
        transform: none;
    }

    @starting-style {
        select:not([multiple]):open::picker(select) {
            opacity: 0;
            transform: scale(.97);
        }
    }

    select:not([multiple]) option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 8px;
        background-color: transparent;
        color: var(--text-primary);
        font-size: inherit;
        line-height: 1.35;
        cursor: pointer;
        transition: background-color .12s ease, color .12s ease;
    }

    select:not([multiple]) option + option {
        margin-top: 1px;
    }

    select:not([multiple]) option:hover,
    select:not([multiple]) option:focus-visible {
        background-color: var(--bg-tertiary);
        outline: none;
    }

    select:not([multiple]) option:checked {
        background-color: color-mix(in srgb, var(--select-accent) 16%, transparent);
        color: var(--text-primary);
        font-weight: 600;
    }

    select:not([multiple]) option::checkmark {
        order: 9;
        margin-inline-start: auto;
        color: var(--select-accent);
    }

    select:not([multiple]) optgroup {
        padding: 6px 10px 2px;
        color: var(--text-tertiary);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    select:not([multiple]) option:disabled {
        opacity: .45;
        cursor: default;
    }

    [dir="rtl"] select:not([multiple]) option::checkmark {
        margin-inline-end: auto;
    }
}