/* ==========================================================================
   custom-select.css — the replacement <select> popup used by both tools.

   Shared on purpose, unlike it-budget.theme.css / cost-of-living.theme.css.
   Those two stay separate because each restyles its own tool's markup and
   merging them would let a change to one silently restyle the other. This file
   is the opposite case: one component, one appearance, rendered into <body>
   outside both wrappers — so it consumes SITE tokens directly rather than the
   tool-local --ink / --raised indirection. Adding a third tool needs no change
   here; it only needs to load this file.

   The point of the whole exercise is the highlighted row: in a native popup its
   background is the desktop's selection colour and its text colour is the
   browser's, so the pairing is unreachable from CSS. Here both halves are ours.
   ========================================================================== */

.cs-panel {
    position: fixed;
    z-index: 2000;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem;
    /* --color-overlay, not --color-raised: raised is only 8 RGB units off the
       card it sits on, so the panel visually merged into it. See the token. */
    background: var(--color-overlay);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    /* On a near-black page a drop shadow alone is almost invisible, so the
       separation is carried by the fill and the hairline; the dark ring just
       stops the border blending into whatever is behind it. */
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.55);
    color: var(--color-text-primary);
    line-height: 1.4;
    /* The panel sits in <body>, outside the tool wrappers that declare these. */
    color-scheme: dark;
    scrollbar-color: var(--color-border-strong) var(--color-overlay);
}

.cs-opt {
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The current value, when it is not the row being pointed at: an amber rule
   rather than a fill, so it stays distinguishable from the active row. */
.cs-opt[data-selected] {
    box-shadow: inset 2px 0 0 var(--color-primary);
    color: var(--color-primary);
}

/* The row under the cursor / arrow keys. Both halves pinned — this exact pair
   is what the native popup would not let us control. #14100A on #E5A344 is the
   site's amber-button pairing (~10:1). */
.cs-opt[data-active] {
    background: var(--color-primary);
    color: #14100A;
    box-shadow: none;
}

.cs-opt[data-disabled] {
    color: var(--color-text-muted);
    cursor: default;
}

.cs-opt[data-disabled][data-active] {
    background: transparent;
    color: var(--color-text-muted);
}

.cs-group {
    padding: 0.5rem 0.6rem 0.25rem;
    color: var(--color-text-secondary);
    font-size: 0.85em;
    font-weight: 600;
}

.cs-group:first-child {
    padding-top: 0.25rem;
}

/* The trigger keeps its own focus ring from the tool themes; this only marks
   the open state so the control does not look inert while the panel is up. */
select[data-cs-open] {
    border-color: var(--color-primary) !important;
}

/* Deliberately animates ONLY transform — never opacity, and no `both` fill.
   An open dropdown must have no invisible frame in any circumstance: if the
   animation clock never advances (it doesn't under headless virtual time, and
   compositor animations can be throttled in a background tab), an opacity-based
   entry leaves the panel present, positioned, and completely unseen. A 2px
   slide degrades to "appears instantly"; a fade degrades to "never appears".
   Fail visible. */
@media (prefers-reduced-motion: no-preference) {
    .cs-panel {
        animation: cs-in 120ms var(--ease-out);
    }

    @keyframes cs-in {
        from {
            transform: translateY(-2px);
        }
    }
}

/* Paper never shows an open popup. beforeprint closes it too; this is the
   belt-and-braces for print paths that skip the event (Save as PDF from some
   engines does). */
@media print {
    .cs-panel {
        display: none !important;
    }
}
