/* ---- Custom dropdown, open list -------------------------------------------------------------
   Paints the part of a <select> the browser will not let style.php reach: the open option list.
   See public/js/customselect.js for why the native control is still underneath all of this.

   The CLOSED control is deliberately not styled here. It keeps being painted by style.php (and
   by .styled-select, .blue, #adminmodeswitch and the rest), with the JS copying that control's
   computed font, colour, padding and border widths onto the element it paints the text in. So
   this file never restates a colour that already lives in style.php, and nothing here drifts
   when the palette there changes.

   Contrast was calculated, not eyeballed, because the brand pink fails on white text (#fff on
   #e8407a is 3.86:1). Every text/background pair below is >= 4.5:1:
     #231f20 on #ffffff  16.30:1   option text
     #ffffff on #5b3fa0   7.88:1   the option under the pointer or the keyboard
     #231f20 on #fde8d8  13.75:1   the option that is currently the select's value
     #5b3fa0 on #f7f3fc   7.20:1   optgroup heading
     #6b6b6b on #ffffff   5.33:1   a disabled option
   And the focus ring, which is an indicator rather than text and so answers to 3:1, is #231f20
   and clears that on every ground a dropdown sits on here: 4.23:1 on the pink .styled-select,
   13.75:1 on the peach #adminmodeswitch, 16.30:1 on a white select, 12.00:1 on the slate one.
   -------------------------------------------------------------------------------------------- */

/* The wrapper the JS puts between an existing .styled-select and its select. Geometry is set
   inline by the JS as well, so the control survives this file failing to load. */
.cs-root {
    position            : relative;
    display             : inline-block;
    max-width           : 100%;
}

/* The element that paints the closed control's text. Transparent by design: the native select
   is still drawing the background, the border and the chevron directly underneath. */
.cs-button {
    background          : transparent;
    user-select         : none;
    -webkit-user-select : none;
}

/* style.php's select:hover cannot match any more, because the pointer now lands on .cs-button.
   This is the one colour duplicated from that file, and it exists so hover does not silently
   disappear from every dropdown on the site. */
.cs-root.cs-hover select {
    border-color        : #8a6fc4;
}

/* The focus ring has to be INSET. .styled-select is height:29px with overflow:hidden and
   #adminmodeswitch is height:26px with overflow:hidden, so an outline drawn outside the box is
   clipped away to nothing, which is how the site's own select:focus outline already goes
   missing inside those wrappers.

   Near black rather than brand purple, and this one was measured too. Focus is now on this
   element, so style.php's select:focus rule can never match and this ring is the only keyboard
   indicator the site has left: it has to clear 3:1 against every ground a dropdown sits on, and
   purple does not (#5b3fa0 on the pink .styled-select.blue is 2.04:1). #231f20 gives 4.23:1 on
   the pink wrapper, 13.75:1 on the peach #adminmodeswitch, 16.30:1 on a plain white select and
   12.00:1 on the slate one. */
.cs-root.cs-focus .cs-button {
    box-shadow          : inset 0 0 0 2px #231f20;
}

/* ---- The list ---------------------------------------------------------------------------- */

/* Appended to <body> and positioned fixed by the JS. It has to escape the overflow:hidden on
   .styled-select and #adminmodeswitch, and it has to be able to sit over the sticky bar. */
.cs-list {
    position            : fixed;
    box-sizing          : border-box;
    margin              : 0;
    padding             : 4px 0;
    background-color    : #ffffff;
    border              : 1px solid #5b3fa0;
    border-radius       : 6px;
    box-shadow          : 0 6px 18px rgba(35, 31, 32, 0.22);
    overflow-y          : auto;
    overflow-x          : hidden;
    /* Keeps a flick of the wheel at the end of the list from scrolling the form behind it. */
    overscroll-behavior : contain;
    font-size           : 14px;
    line-height         : 1.3;
    color               : #231f20;
    /* Firefox. The webkit rules below do the same job in Chrome and Safari. */
    scrollbar-width     : thin;
    scrollbar-color     : #b9a7d6 #ffffff;
}

.cs-list[hidden] {
    display             : none !important;
}

.cs-list-above {
    box-shadow          : 0 -6px 18px rgba(35, 31, 32, 0.22);
}

.cs-list::-webkit-scrollbar {
    width               : 10px;
}

.cs-list::-webkit-scrollbar-track {
    background          : #ffffff;
    border-radius       : 6px;
}

.cs-list::-webkit-scrollbar-thumb {
    background          : #b9a7d6;
    border              : 2px solid #ffffff;
    border-radius       : 6px;
}

/* ---- Options ----------------------------------------------------------------------------- */

.cs-option {
    padding             : 7px 12px 7px 14px;
    /* Long option text wraps instead of widening the list past the control or overflowing
       sideways. Section and item names on this site get long. */
    white-space         : normal;
    /* break-word first for engines that never shipped `anywhere` (Safari before 15.4). */
    overflow-wrap       : break-word;
    overflow-wrap       : anywhere;
    cursor              : pointer;
    /* Left border rather than padding, so the marker on the selected row below does not shift
       the text of every other row. */
    border-left         : 3px solid transparent;
}

/* The select's current value. Named with the pink from the palette on the warm tab colour, so
   it reads as "this is what is set" without competing with the keyboard position. */
.cs-option-selected {
    background-color    : #fde8d8;
    border-left-color   : #e8407a;
    font-weight         : 600;
}

/* Where the pointer or the keyboard is. One option carries this at a time, and it is the only
   thing aria-activedescendant points at. */
.cs-option-active,
.cs-option-selected.cs-option-active {
    background-color    : #5b3fa0;
    border-left-color   : #5b3fa0;
    color               : #ffffff;
}

.cs-option-disabled {
    color               : #6b6b6b;
    cursor              : default;
    background-color    : #ffffff;
    border-left-color   : transparent;
    font-weight         : normal;
}

/* A disabled option is never the active one by pointer or arrow key, but it can be the opening
   position when the select's value is the "Select" placeholder the site's dropdowns start on,
   which is what the native control does too. It must not look clickable then. */
.cs-option-disabled.cs-option-active {
    background-color    : #f2f2f2;
    color               : #5e5a5b;
}

/* ---- Option groups ----------------------------------------------------------------------- */

.cs-group + .cs-group .cs-group-label {
    border-top          : 1px solid #ede7f7;
}

/* Sticky, so that in a long grouped list (the item pickers group by genre) you can still see
   which group you are scrolled into. */
.cs-group-label {
    position            : sticky;
    top                 : -4px;
    background-color    : #f7f3fc;
    color               : #5b3fa0;
    font-size           : 11px;
    font-weight         : 700;
    letter-spacing      : 0.06em;
    text-transform      : uppercase;
    padding             : 5px 12px 5px 14px;
}

/* Options inside a group are indented so the grouping is visible without colour alone. */
.cs-group .cs-option {
    padding-left        : 26px;
}

/* ---- Accessibility and output ------------------------------------------------------------ */

/* Windows high contrast and forced-colours mode throw out author colours. Say what the roles
   are in system terms instead, so the list stays readable rather than becoming a white block. */
@media (forced-colors: active) {
    .cs-list {
        border          : 1px solid CanvasText;
        background-color: Canvas;
        color           : CanvasText;
    }
    .cs-option-active,
    .cs-option-selected.cs-option-active {
        background-color: Highlight;
        color           : HighlightText;
        border-left-color: Highlight;
    }
    .cs-option-disabled {
        color           : GrayText;
    }
    .cs-root.cs-focus .cs-button {
        outline         : 2px solid CanvasText;
        outline-offset  : -3px;
    }
}

/* The list is a transient popup. It has no business in a printed entry form or report. */
@media print {
    .cs-list {
        display         : none !important;
    }
}