/* Shared custom <select> replacement — the pill button + listbox menu used across the
   bespoke admin screens. Markup contract:

     <div class="cil-select" data-custom-select>
       <input type="hidden" data-select-value value="…">
       <button class="cil-select__button" aria-haspopup="listbox" aria-expanded="false">
         <span class="cil-select__label" data-select-label>…</span>
         <svg class="cil-toolbar__chevron">…</svg>
       </button>
       <ul class="cil-select__menu" role="listbox" tabindex="-1" hidden>
         <li role="option" data-value="…" aria-selected="…"><span>…</span><svg class="cil-select__check">…</svg></li>
       </ul>
     </div>

   Behaviour lives in design-system/select.js. */
/* Add data-no-submit to the .cil-select root when it sits inside a form the visitor is still
   filling in; without it, picking an option submits that form. */


.cil-select { position: relative; display: inline-block; }
/* An open menu must float above whatever panel follows the field — sibling panels otherwise paint
   over the dropdown and make the lower options unclickable. */
.cil-select.is-open { z-index: 80; }
.cil-select__button {
    display: inline-flex; align-items: center; gap: 8px;
    padding-block: 11px;
    padding-inline-start: 18px;
    padding-inline-end: 40px;
    border: 1px solid var(--cil-border);
    background: var(--cil-surface-1);
    border-radius: 999px;
    font: inherit;
    font-weight: 500;
    color: var(--cil-text);
    line-height: 1.35;
    min-width: 180px;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
    position: relative;
}
.cil-select__button:hover { border-color: var(--cil-blue); background: var(--cil-white); }
.cil-select__button:focus-visible,
.cil-select.is-open .cil-select__button {
    outline: 0;
    border-color: var(--cil-blue);
    background: var(--cil-white);
    box-shadow: 0 0 0 3px var(--cil-blue-soft);
    color: var(--cil-blue-dark);
}
.cil-select__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cil-toolbar__chevron {
    position: absolute;
    inset-inline-end: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cil-text-soft);
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s ease;
}
.cil-select:hover .cil-toolbar__chevron { color: var(--cil-blue); }
.cil-select.is-open .cil-toolbar__chevron { color: var(--cil-blue); transform: translateY(-50%) rotate(180deg); }

.cil-select__menu {
    /* select.js switches this to position:fixed while the menu is open and sets its coordinates
       from the button's viewport rect. Absolute is the closed/no-JS resting state: an absolutely
       positioned menu counts towards the document's scroll height, which stretched the page when
       one opened near the foot of a screen. */
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    min-width: 100%;
    background: var(--cil-white);
    border: 1px solid var(--cil-border);
    border-radius: var(--cil-radius-md);
    box-shadow: 0 12px 32px rgba(50,51,51,0.14), 0 2px 6px rgba(50,51,51,0.06);
    padding: 6px;
    margin: 0;
    list-style: none;
    z-index: 100;
    max-height: 320px;
    overflow-y: auto;
    /* Reserve the scrollbar gutter always. Without it, a list that starts unclamped and then gains
       a scrollbar loses width, its labels re-wrap, and every row grows taller — so a height that
       was measured as a whole number of rows ends up slicing the last one in half. */
    scrollbar-gutter: stable;
    transform-origin: top;
    transform: scaleY(0.85) translateY(-4px);
    opacity: 0;
    transition: transform 0.16s ease, opacity 0.16s ease;
}
.cil-select__menu[hidden] { display: none; }
.cil-select.is-open .cil-select__menu {
    transform: scaleY(1) translateY(0);
    opacity: 1;
}
/* A menu placed above the field grows from its foot, so the opening animation has to run the
   other way — scaling from `top` made it appear to drop out of the field it sits over.
   select.js adds this class when it flips. */
.cil-select.is-above .cil-select__menu {
    transform-origin: bottom;
    transform: scaleY(0.85) translateY(4px);
}
.cil-select.is-above.is-open .cil-select__menu { transform: scaleY(1) translateY(0); }
.cil-select__menu li {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 14px;
    border-radius: var(--cil-radius-sm);
    cursor: pointer;
    color: var(--cil-text);
    font-size: 14px;
    transition: background 0.12s ease, color 0.12s ease;
    user-select: none;
}
.cil-select__menu li:hover,
.cil-select__menu li.is-active { background: var(--cil-blue-soft); color: var(--cil-blue-dark); }
.cil-select__menu li[aria-selected="true"] { font-weight: 700; color: var(--cil-blue-dark); }
.cil-select__check { color: var(--cil-blue); opacity: 0; flex-shrink: 0; }
.cil-select__menu li[aria-selected="true"] .cil-select__check { opacity: 1; }