/*
 * core_ui / core-preferences.css
 * ---------------------------------------------------------------------
 * THE preference pill: the currency and language controls, one definition.
 *
 * There used to be five. site_khouse and site_peaknetwork each carried a
 * 45-line kd-preferences.css copy, khouse's kd-chrome.css overrode part of
 * its own copy with a second, differently-shaped .kd-langpill, core-nav.css
 * held a ported .core-langswitch button group, and this file held a third
 * shape for the currency picker. The visible result was a language control
 * whose 44px select punched 8px out through the top and bottom of the 28px
 * wrapper meant to contain it, a currency control that never got a wrapper
 * at all and rendered as a bare rectangle beside it, and two live tenants
 * showing different option text for the same two languages.
 *
 * COMPACT SURFACE, FULL-SIZE TARGET -- the rule the old copies wrote down
 * and never implemented. The WRAPPER is the only thing that paints: it
 * carries the pill's height, radius, border and background. The <select>
 * paints NOTHING and keeps a >= --core-pref-hit box on both axes, so its
 * transparent hit area deliberately extends past the painted pill. That is
 * why there is no `overflow: hidden` here and must never be one: clipping
 * the overflow would clip the hit area with it (a clipped region is not
 * hit-tested either), which is exactly the WCAG 2.5.8 floor this keeps.
 *
 * SELF-CONTAINED BY DESIGN. The live kd-* tenants do not load core_ui's
 * stylesheet bundle on the surfaces these controls live on -- they link
 * this file directly, the same way they already link core-layout.css. So
 * every value below comes from a --core-pref-* custom property with a
 * literal fallback, and a skin overrides only those properties. A skin
 * never restates the component.
 */

.core-prefs {
    display: inline-flex;
    align-items: center;
    gap: var(--core-pref-gap, 8px);
}

/* One control. The form is layout only -- it never paints, because the
 * no-JavaScript submit buttons live inside it and must sit OUTSIDE the
 * pill rather than break its shape. */
.core-pref {
    display: inline-flex;
    align-items: center;
    gap: var(--core-pref-gap, 8px);
}

/* The pill: the ONLY painted surface. A <label> wrapping the select, so it
 * needs no id -- both controls render twice per page (toolbar and mobile
 * drawer) and duplicate ids would be invalid markup. */
.core-pref__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    block-size: var(--core-pref-height, 28px);
    border: var(--core-pref-border-w, 1px) solid var(--core-pref-border-color, currentColor);
    border-radius: var(--core-pref-radius, 999px);
    background: var(--core-pref-bg, var(--theme-bg, transparent));
    color: var(--core-pref-ink, var(--theme-ink, inherit));
}

/* The flag: decoration for the CURRENT choice, never the label (a flag is
 * a country, not a language -- the option text carries the code). Absolute
 * so it costs the pill no width of its own: it sits inside the padding the
 * select already reserves. pointer-events:none so the select underneath
 * stays the click target across the whole pill. */
.core-pref__flag {
    position: absolute;
    inset-inline-start: var(--core-pref-pad, 8px);
    inline-size: var(--core-pref-flag-size, 11px);
    block-size: auto;
    border-radius: 1px;
    pointer-events: none;
}

.core-pref__select {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    inline-size: var(--core-pref-width, 3.5rem);
    /* The hit area, in both axes. Wider than the painted pill is tall on
     * purpose -- see the header comment. */
    min-inline-size: var(--core-pref-hit, var(--core-touch-min, 44px));
    min-block-size: var(--core-pref-hit, var(--core-touch-min, 44px));
    padding-block: 0;
    padding-inline: var(--core-pref-pad, 8px) calc(var(--core-pref-arrow-inset, 6px) + 10px);
    border: 0;
    border-radius: inherit;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--core-pref-arrow-inset, 6px) center;
    background-size: 8px 6px;
    color: inherit;
    cursor: pointer;
    font-family: var(--core-pref-font, var(--theme-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace));
    font-size: var(--core-pref-text, 11px);
    letter-spacing: var(--core-pref-track, 0.08em);
    text-align: start;
    text-transform: uppercase;
}

/* Only the language control reserves room for a flag, so only it pays for
 * that room -- but BOTH controls keep the same --core-pref-width, because
 * they sit side by side and two "how do I want to see this site" choices
 * that do not match read as one broken control. The width is sized for the
 * language pill, which is the wider of the two once the flag and the skin's
 * mono letter-spacing are paid for; measure with a canvas against the real
 * computed font before changing it, not by eye. */
.core-pref--language .core-pref__select {
    padding-inline-start: calc(var(--core-pref-pad, 8px) + var(--core-pref-flag-size, 11px) + 4px);
}

/* Focus paints on the PILL, not on the select: the select's box is bigger
 * than the visible control, so a ring drawn on it would float clear of the
 * thing the eye is following. :focus-within is what moves it. */
.core-pref__pill:focus-within {
    outline: 2px solid var(--core-pref-focus, var(--theme-accent, currentColor));
    outline-offset: 2px;
}
.core-pref__select:focus-visible { outline: none; }
.core-pref__pill:hover { border-color: var(--core-pref-border-hover, var(--core-pref-ink, currentColor)); }

/* The real submit, kept for scripting-off visitors. autosubmit-select.js
 * hides it only AFTER attaching its change handler, so a blocked script
 * leaves a working two-step form rather than a dropdown that does nothing.
 * Full-size because it is a button, not a compact display surface. */
.core-pref__go {
    min-inline-size: var(--core-pref-hit, var(--core-touch-min, 44px));
    min-block-size: var(--core-pref-hit, var(--core-touch-min, 44px));
    padding-inline: var(--core-pref-pad, 8px);
    border: var(--core-pref-border-w, 1px) solid var(--core-pref-border-color, currentColor);
    border-radius: var(--core-pref-radius, 999px);
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-family: var(--core-pref-font, var(--theme-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace));
    font-size: var(--core-pref-text, 11px);
}
.core-pref__go[hidden] { display: none; }

.core-pref__reset {
    min-block-size: var(--core-pref-hit, var(--core-touch-min, 44px));
    padding-inline: var(--core-pref-pad, 8px);
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
}