/* =========================================
   Lapis Interactive — Global Styles (RC)
   Scope: sitewide tokens, nav (buttons + theme picker), flat accent-outline chips,
          hero/sections, gallery, footer, lightbox close button, settings popover, responsive tweaks.
   Key design holds:
   - Button/select parity (≥44px) with --nav-select-pad-right for in-control chevron
   - Theme select stays native fallback; JS adds custom picker (no DOM breakage)
   - Chips = FLAT TAGS (faint accent wash + accent outline, smaller text/radius, no dots)
   - Non-interactive chips: no hover lift, default cursor, pointer-events:none
   - Micro-phone helpers for long chips (wrap/shorten)
   ========================================= */

/* ----------------
   0) Theme tokens
   ---------------- */
:root{
    --bg-1:#0B1021; --bg-2:#1E1A3A;
    --neon-cyan:#21D4FD; --neon-violet:#9123FF; --neon-pink:#FF4D6D;
    --text:#EDEFFC;
    --accent: var(--neon-cyan);

    --section-gap: clamp(1rem, 2.5svh, 1.75rem);
    --fold-top:    clamp(.5rem, 2.5svh, 1rem);

    --below-fold-offset: 0px;

    /* Background controls (tuned by Settings) */
    --grid-y:.18;  /* horizontal lines */
    --grid-x:.14;  /* vertical lines   */
    --glow-far: 66%;   /* bottom glow  (more % = weaker) */
    --glow-near:76%;   /* top glow     (more % = weaker) */
    --glow-size:1;     /* global glow size scaler */

    /* Flat, background-label chips (no dot, no fill) */
    --chip-bg:     transparent;                 /* no background wash */
    --chip-border: rgba(255,255,255,.14);       /* razor-thin neutral outline */
    --chip-text:   var(--text);                 /* fallback; we dim/tint below */
    --chip-radius: 9px;                         /* smaller than button radius */

    /* Nav theme control: chevron padding + swatch size */
    --nav-select-pad-right: clamp(2.6rem, 2.2rem + 0.7vw, 3rem);
    --nav-swatch-size: .6rem;
}

/* -------------
   1) Base / reset
   ------------- */
*,*::before,*::after{ box-sizing:border-box }
html{ block-size:100% }
body{
    margin:0; color:var(--text);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    overflow-x:hidden; background-color: var(--bg-1);
    display:grid; grid-template-rows:auto 1fr auto; min-block-size:100svh;
    padding-top: var(--nav-offset);
}
@supports (min-height:100dvh){ body{ min-block-size:100dvh } }
main{ grid-row:2 } footer{ grid-row:3 }

.accent-cyan{ --accent: var(--neon-cyan) }
.accent-orange{ --accent:#FF9A3E }
.accent-green{ --accent:#32F2A3 }
.use-accent{ color:var(--accent) }

/* -------------------------
   2) Background (glow + grid)
   ------------------------- */
@keyframes hue{ from{filter:hue-rotate(0)} to{filter:hue-rotate(10deg)} }

#bg{
    position: fixed; inset: 0; z-index: 0; pointer-events: none;

    /* size with vmin so phone portrait/landscape match */
    --rx-far:  clamp(1100px, calc(130vmin * var(--glow-size)), 2200px);
    --ry-far:  clamp( 640px, calc( 80vmin * var(--glow-size)), 1400px);
    --rx-near: clamp( 900px, calc( 95vmin * var(--glow-size)), 1700px);
    --ry-near: clamp( 520px, calc( 55vmin * var(--glow-size)),  980px);
    /* subtle center lift so mid band never goes “black” */
    --rx-mid:  clamp( 720px, calc( 70vmin * var(--glow-size)), 1500px);
    --ry-mid:  clamp( 720px, calc( 70vmin * var(--glow-size)), 1500px);
    --glow-mid: var(--glow-near);

    background:
            radial-gradient(var(--rx-far) var(--ry-far) at 50% 130%,
            color-mix(in hsl, var(--accent), transparent var(--glow-far)), transparent 78%),
            radial-gradient(var(--rx-mid) var(--ry-mid) at 50% 55%,
            color-mix(in hsl, var(--accent), transparent var(--glow-mid)), transparent 65%),
            radial-gradient(var(--rx-near) var(--ry-near) at 85% -15%,
            color-mix(in hsl, var(--accent), transparent var(--glow-near)), transparent 65%),
            var(--bg-1);

    background-blend-mode: screen, screen, screen, normal;
    animation: hue 12s linear infinite alternate;
}
#bg::after{
    content:""; position:absolute; inset:0;
    background:
            linear-gradient(to top,   rgba(255,255,255,var(--grid-y)) 1px, transparent 1px),
            linear-gradient(to right, rgba(255,255,255,var(--grid-x)) 1px, transparent 1px);
    background-size:100% 28px, 32px 100%;
    mix-blend-mode: overlay;
}
nav, header, main, footer{ position:relative; z-index:1 }

/* -------------
   3) Navigation (fixed; wraps cleanly)
   ------------- */
.site-nav{
    position:fixed; top:0; left:0; right:0; z-index:10;
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    column-gap:.6rem; row-gap:.35rem;
    padding:.6rem .8rem;
    backdrop-filter: blur(8px);
    background: linear-gradient(180deg, rgba(8,12,24,.60), rgba(8,12,24,.46));
    border-bottom: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 8px 24px -16px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.04);
    border-radius: 0 0 12px 12px;
}
.site-nav > *{ min-width:0 }

/* Pill buttons (anchors & buttons share the same class) */
.btn{
    --glow: var(--accent);
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    padding:.9rem 1.2rem; border-radius:12px; white-space:nowrap; flex:0 0 auto;
    color:var(--text); text-decoration:none; font-weight:600; letter-spacing:.02em;
    border:1px solid color-mix(in hsl, var(--glow), transparent 70%);
    background:linear-gradient(180deg, color-mix(in hsl, var(--glow), transparent 88%), rgba(255,255,255,.02));
    box-shadow:0 0 22px -6px color-mix(in hsl, var(--glow), transparent 65%);
    backdrop-filter: blur(4px);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    min-height:44px; cursor:pointer; font-size:16px;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 24px -6px color-mix(in hsl, var(--glow), transparent 30%) }
.btn:focus-visible{ outline:2px solid color-mix(in hsl, var(--glow), white 15%); outline-offset:3px }
.btn--alt{
    opacity:.9; background:rgba(0,0,0,.25);
    border-color:color-mix(in hsl, var(--accent), transparent 72%);
    box-shadow:0 0 18px -6px color-mix(in hsl, var(--accent), transparent 50%);
}
.btn--alt:hover{
    opacity:1; background:rgba(0,0,0,.32);
    box-shadow:0 8px 22px -8px color-mix(in hsl, var(--accent), transparent 35%);
}
.btn--disabled{ --glow:#666; opacity:.6; pointer-events:none; border-color:color-mix(in hsl, var(--glow), transparent 70%); box-shadow:none }

/* Active page (JS sets aria-current="page") */
.site-nav .btn[aria-current="page"]{
    border-color: color-mix(in hsl, var(--accent), transparent 45%);
    box-shadow:
            0 0 0 2px color-mix(in hsl, var(--accent), transparent 78%),
            0 0 22px -6px color-mix(in hsl, var(--accent), transparent 40%);
}

/* ---- 3a) THEME PICKER
   Fallback: native <select> is styled; when JS builds the custom picker,
   body.has-theme-menu hides the native select and chevron.
   A small swatch dot always reflects the current --accent.
--------------------------------------------------------------- */

/* Fallback select (kept for no-JS) */
.site-nav label{
    display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; flex:0 0 auto;
    position:relative; min-width:max-content;
}
/* Swatch dot (fallback) */
.site-nav label::before{
    content:""; inline-size:var(--nav-swatch-size); block-size:var(--nav-swatch-size);
    border-radius:50%; background: var(--accent);
    box-shadow: 0 0 10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.4);
    margin-inline-end:.25rem; transform: translateY(.5px);
}

.site-nav #accent-select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background-image:none;
    padding:.9rem var(--nav-select-pad-right) .9rem 1.1rem;
    padding-inline-end: var(--nav-select-pad-right);
    -webkit-padding-end: var(--nav-select-pad-right);
    min-width: calc(13ch + var(--nav-select-pad-right));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-radius:12px;
    border:1px solid color-mix(in hsl, var(--accent), transparent 70%);
    background:linear-gradient(180deg, color-mix(in hsl, var(--accent), transparent 88%), rgba(255,255,255,.02));
    color:var(--text); font-weight:600; letter-spacing:.02em;
    box-shadow:0 0 22px -6px color-mix(in hsl, var(--accent), transparent 65%);
    backdrop-filter: blur(4px);
    font-size:16px; line-height:normal; min-height:44px; cursor:pointer; flex:0 0 auto;
}
.site-nav label::after{
    content:"▾"; position:absolute; right:.8rem; top:50%; transform:translateY(-52%);
    pointer-events:none; opacity:.85; font-weight:700;
}
.site-nav #accent-select:hover{ box-shadow:0 6px 24px -6px color-mix(in hsl, var(--accent), transparent 30%) }
.site-nav #accent-select:focus-visible{
    outline:2px solid color-mix(in hsl, var(--accent), white 15%); outline-offset:3px; border-radius:12px;
}

/* Hide the fallback select once the custom menu is available */
.has-theme-menu #accent-select{ display:none !important }
.has-theme-menu .site-nav label::after{ display:none !important }
/* When custom menu exists, move the swatch dot into the button instead */
.has-theme-menu .site-nav label::before{ display:none !important }

/* Custom picker: button + popover list (always opens below) */
.theme-picker{ position:relative; display:inline-block }
.theme-btn{ composes: btn; } /* for editors without CSS Modules, just keep .btn rules */
.theme-btn{ padding-right: var(--nav-select-pad-right); }
/* Swatch dot (custom button) */
.theme-btn::before{
    content:""; inline-size:var(--nav-swatch-size); block-size:var(--nav-swatch-size);
    border-radius:50%; background: var(--accent);
    box-shadow: 0 0 10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.4);
    margin-inline-end:.45rem; transform: translateY(.5px);
}
.theme-btn::after{
    content:"▾"; position:absolute; right:.8rem; top:50%; transform:translateY(-52%);
    pointer-events:none; opacity:.85; font-weight:700;
}
.theme-menu{
    position:absolute; top:calc(100% + .5rem); left:0;
    width:max-content; min-width: 12rem; max-width: 90vw; max-height: min(60vh, 420px);
    overflow:auto; z-index: 30;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(12,16,28,.80);
    backdrop-filter: blur(10px);
    border-radius:12px; padding:.35rem; box-shadow:0 12px 36px -12px rgba(0,0,0,.55);
    display:none;
}
.theme-picker.is-open .theme-menu{ display:block }

/* Items */
.theme-item{
    display:flex; align-items:center; gap:.6rem;
    width:100%; border:0; background:transparent; color:var(--text);
    padding:.55rem .6rem; border-radius:10px; cursor:pointer;
    text-align:left; font:inherit; font-weight:600; letter-spacing:.02em;
}
.theme-item .swatch{
    inline-size:1rem; block-size:1rem; border-radius:50%;
    box-shadow: 0 0 10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.4);
}
.theme-item:hover, .theme-item:focus{
    background:rgba(255,255,255,.07); outline:0;
}
.theme-item[aria-selected="true"]::after{
    content:"✓"; margin-inline-start:auto; opacity:.85;
}

/* -------------
   4) Hero
   ------------- */
.hero{ display:grid; place-items:center; text-align:center; padding:6rem 1.5rem 3rem; isolation:isolate; animation:hue 12s linear infinite alternate }
.logo{
    width:min(360px,70vw); display:block; margin:0 auto 1.25rem;
    filter:drop-shadow(0 0 24px color-mix(in hsl, var(--accent), black 40%))
    drop-shadow(0 0 8px color-mix(in hsl, var(--accent), white 35%));
}
.title{
    color: var(--accent);
    font-family:Syncopate, Inter, sans-serif; letter-spacing:.06em;
    font-weight:700; font-size:clamp(1.5rem,1.2rem + 2.2vw,2.6rem);
    margin:.25rem 0 1rem;
}
.tagline{
    color: color-mix(in hsl, var(--accent), white 35%);
    max-width:42rem; margin:0 auto var(--section-gap);
    line-height:1.6; font-size:clamp(1rem,.9rem + .6vw,1.2rem); opacity:.95;
}
.hero--compact{ padding:7rem 1.5rem 2.5rem }

/* -------------
   5) Sections/CTA/typography
   ------------- */
.section{ padding:5rem 1.5rem; text-align:center }
.section h2{
    font-family:Syncopate, Inter, sans-serif; letter-spacing:.05em;
    font-size:clamp(1.3rem,1rem + 1.5vw,2rem); color:var(--accent); margin-bottom:2rem
}
.cta-row{ display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center }
p{ margin:0; line-height:1.7 }
ul{ line-height:1.7 }
.container{ max-width:1100px; margin:0 auto }
.stack-sm > * + *{ margin-top:.6rem } .stack-md > * + *{ margin-top:1rem }
.mt-gap{ margin-top:var(--section-gap) } .mb-gap{ margin-bottom:var(--section-gap) }
.mt-lg{ margin-top:calc(var(--section-gap) * 1.5) } .mb-lg{ margin-bottom:calc(var(--section-gap) * 1.5) }
.gap-lg{ gap:clamp(1rem, 2.2vw, 1.5rem) }

/* 6) Chips — background labels (elliptical, subdued) */
.pills{ display:flex; flex-wrap:wrap; gap:.5rem }

.pill,
.btn.pill{
    display:inline-flex; align-items:center; justify-content:center;
    padding:.22rem .78rem;
    border-radius:9999px;                         /* fully elliptical */
    background: var(--chip-bg);
    border: 1px solid var(--chip-border);
    color: color-mix(in srgb, var(--text), black 28%);  /* neutral, dimmer (~72%) */
    font-weight:600;
    font-size:.85rem; line-height:1.2;            /* smaller, quieter */
    font-variant-caps:all-small-caps;
    letter-spacing:.05em;
    white-space:nowrap;

    user-select:none; cursor:default; pointer-events:none;
    text-decoration:none; box-shadow:none; backdrop-filter:none; transform:none;
}

/* Modern browsers: add a tiny accent hue whisper (safe, ≤10%) */
@supports (color: color-mix(in srgb, white, black)){
    .pill, .btn.pill{
        /* Start from the dimmer neutral, then nudge 9% toward the accent */
        color: color-mix(
                in srgb,
                color-mix(in srgb, var(--text), black 28%),
                var(--accent) 9%
        );
    }
}

/* No dots */
.pill::before{ content:none !important }

/* Stay totally flat */
.pill:hover, .pill:active, .pill:focus,
.btn.pill:hover, .btn.pill:active, .btn.pill:focus{ transform:none; outline:0; box-shadow:none }

/* Long-label helper */
.pill--shorten{ overflow:hidden; text-overflow:ellipsis }

/* Micro-phones (≤360px): wrap + slightly smaller */
@media (max-width:360px){
    .pill, .btn.pill{
        white-space:normal;
        font-size:.82rem;
        padding:.2rem .6rem;
    }
}

/* -------------
   7) Gallery/Capsule base
   ------------- */
.shots{ display:grid; gap:.9rem; grid-template-columns:repeat(3,1fr) }
@media (max-width:900px){ .shots{ grid-template-columns:1fr } }
.shot{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); box-shadow:0 8px 24px -12px rgba(0,0,0,.5); cursor:zoom-in; transition:transform .25s ease, box-shadow .25s ease, filter .25s ease }
.shot:hover{ transform:scale(1.05); box-shadow:0 12px 32px -12px rgba(0,0,0,.6); filter:saturate(1.05) }
.capsule__media{ position:relative; overflow:hidden; border-radius:16px }
.cap-img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center }

/* -------------
   8) Footer
   ------------- */
footer{ padding:2rem 1rem; text-align:center; opacity:.85; font-size:.9rem; background:transparent }
.footer-links{ margin-top:.4rem; font-size:.85rem }
.footer-links a{ color:var(--text); text-decoration:none }
.footer-links a:hover{ color:var(--accent); text-decoration:underline }
.footer-links a:focus-visible{ outline:2px solid color-mix(in hsl, var(--accent), white 15%); outline-offset:2px; border-radius:4px }
.footer-tagline{ margin-top:.5rem; font-size:.85rem; opacity:.8 }
.footer-location{ margin-top:.25rem; font-size:.85rem; opacity:.85 }

/* -------------
   9) First-fold utilities
   ------------- */
:root{ --nav-offset:4.5rem }
.pt-nav{ padding-top:var(--nav-offset) }
.h1-spaced{ margin-top:1.25rem }

/* Motion safety */
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }

/* ================================
   10) Tiny-height safeguard
   ================================ */
@media (max-height: 420px){
    :root{ --fold-top: clamp(.25rem, 1.5svh, .5rem); --section-gap: clamp(.5rem, 1.75svh, 1rem) }
    main{ min-block-size:0 }
}

/* ================================
   11) Tablet/Desktop comfort
   ================================ */
@media (min-width: 768px){
    :root{
        --fold-top: clamp(1rem, 3.5svh, 4rem);
        --section-gap: clamp(1.25rem, 3svh, 2.25rem);
        --below-fold-offset: max(12svh, 140px);
    }
    body{
        min-block-size:max(
                calc(100dvh + var(--below-fold-offset)),
                calc(100svh + var(--below-fold-offset)),
                calc(100vh  + var(--below-fold-offset)),
                900px
        );
    }
}

/* ================================
   12) Large/Fullscreen comfort
   ================================ */
@media (min-width: 1280px){
    :root{
        --fold-top: clamp(1.5rem, 4svh, 5rem);
        --section-gap: clamp(1.5rem, 3.5svh, 2.75rem);
    }
}

/* First block after hero */
.fold-start{ margin-block-start: var(--fold-top) }
main > :first-child:not(.fold-start){ margin-block-start: 0 }
main > .fold-start:first-child{ margin-block-start: var(--fold-top) }

/* ================================
   13) Small/short screens: hero ordering
   ================================ */
@media (max-width: 640px), (max-height: 480px){
    .hero{ display:flex; flex-direction:column; align-items:center }
    .hero .title, .hero .tagline { order:1 }
    .hero .logo{ order:2 }
    .hero > .section{ order:3 }
    .hero > .cta-row{ order:4 }
}

/* ================================
   14) Micro phones (≤420px) portrait
   ================================ */
@media (max-width: 420px) and (orientation: portrait){
    .site-nav{ padding:.35rem .55rem; column-gap:.42rem; row-gap:.34rem }
    .site-nav .btn{ padding:.75rem 1rem; border-radius:11px; font-size:.97rem }
    .site-nav label{ font-size:.9rem }
    .site-nav #accent-select{
        max-width:50vw; min-width:0;
        padding-right: calc(var(--nav-select-pad-right) + .15rem);
        padding-inline-end: calc(var(--nav-select-pad-right) + .15rem);
        -webkit-padding-end: calc(var(--nav-select-pad-right) + .15rem);
    }
    .hero, .hero.hero--compact{ padding-top: var(--nav-offset) }
}

/* ================================
   15) Ultra-compact phones (≤360px): tidy two-line nav
   ================================ */
@media (max-width:360px){
    .site-nav{ column-gap:.4rem; row-gap:.32rem }
    .site-nav .btn{ padding:.7rem .9rem; font-size:.95rem }
    .site-nav label{ font-size:.88rem; gap:.4rem }
    .site-nav #accent-select{ max-width:48vw }
    .site-nav .site-settings .btn{ padding:.65rem .9rem; font-size:.95rem }
}

/* ================================
   16) Stronger grid on short/small screens
   ================================ */
@media (max-width: 480px){ :root{ --grid-y:.32; --grid-x:.25 } }
@media (max-height: 480px){ :root{ --grid-y:.32; --grid-x:.25 } }

/* ================================
   17) Compact variants used by About/404
   ================================ */
.hero.hero--compact{
    padding-top: calc(var(--nav-offset) + clamp(0.75rem, 3.5svh, 2rem));
    padding-bottom: clamp(0.75rem, 2.5svh, 1.25rem);
}
@media (min-width: 1024px){
    .hero.hero--compact{
        padding-top: calc(var(--nav-offset) + clamp(1.25rem, 5svh, 4rem));
        padding-bottom: clamp(2rem, 5svh, 6rem);
    }
}

/* ================================
   18) Phone-landscape nudges (Home only)
   ================================ */
@media (max-height: 480px) and (min-width: 640px){
    body:not(.about-page):not(.contact-page):not(.error-page) .hero{ padding-top: calc(var(--nav-offset) + .25rem) }
}
@media (max-height: 430px) and (min-width: 640px){
    body:not(.about-page):not(.contact-page):not(.error-page) .hero{ padding-top: var(--nav-offset) }
}
@media (max-height: 440px) and (min-width: 820px){
    body:not(.about-page):not(.contact-page):not(.error-page) .hero .logo{ margin-top:-6px }
}

/* ================================
   19) Lightbox close button
   ================================ */
#lb .lb-close{
    position:absolute; top:1rem; right:1rem;
    border:1px solid rgba(255,255,255,.25);
    background: rgba(0,0,0,.35); color:var(--text);
    font-size: 1.4rem; line-height:1; padding:.4rem .6rem;
    border-radius:10px; cursor:pointer; z-index:2;
    box-shadow:
            0 0 0 2px color-mix(in hsl, var(--accent), transparent 82%),
            0 0 18px -4px color-mix(in hsl, var(--accent), transparent 48%);
}
#lb .lb-close:hover{
    background: rgba(0,0,0,.5);
    box-shadow:
            0 0 0 2px color-mix(in hsl, var(--accent), transparent 75%),
            0 0 26px -6px color-mix(in hsl, var(--accent), transparent 38%);
}
#lb .lb-close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ================================
   20) Settings popover (nav controls)
   ================================ */
.site-settings{ position:relative }
.settings-panel{
    position:absolute; right:0; top:calc(100% + .5rem);
    width:min(320px, 92vw);
    border:1px solid rgba(255,255,255,.12);
    background: rgba(12,16,28,.75);
    backdrop-filter: blur(10px);
    border-radius:12px; padding:.9rem .9rem .85rem; z-index:20;
    box-shadow:0 12px 36px -12px rgba(0,0,0,.55);
}
.settings-row{ display:grid; grid-template-columns:auto 1fr; gap:.6rem .8rem; align-items:center }
.settings-row + .settings-row{ margin-top:.6rem }
.settings-label{ font-size:.9rem; opacity:.9 }
.settings-panel input[type="range"]{ width:100% }

/* Actions row (Reset + Close) */
.settings-actions{
    display:flex; justify-content:flex-end; gap:.5rem;
    margin-top:.85rem;
}
.btn--sm{ padding:.45rem .65rem; border-radius:10px; font-size:.95rem }
.btn--icon{ padding:.35rem .55rem; line-height:1; font-size:1.15rem }

/* In-panel buttons: no lift */
.settings-panel .btn{ padding:.45rem .7rem; font-size:.9rem; border-radius:10px; min-height:unset }
.settings-panel .btn:hover{ transform:none }

/* ================================
   Settings → Map ping overrides
   Purpose: make the custom UI select match Theme,
   but without the swatch dot; ensure chevron space.
   ================================ */

/* Hide the accent swatch dot only inside Settings panel */
.settings-panel .ui-select__btn.theme-btn::before { display: none; }

/* Restore right padding so chevron ("▾") is visible */
.settings-panel .ui-select__btn.theme-btn { padding-right: var(--nav-select-pad-right); }

/* ================================
   21) Micro-phone helpers for chips (≤360px)
   ================================ */
@media (max-width:360px){
    .pill, .btn.pill{
        white-space: normal;
        line-height:1.25;
        padding:.32rem .56rem;
        font-size:.92rem; /* slightly smaller on tiny screens */
    }
    .pill--shorten{
        white-space: nowrap;
        max-width: 18ch;
    }
}

/* =========================================
   UI Select alias — hide native <select> when enhanced
   ========================================= */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* Ensure our generic control reuses Theme popover styles */
.ui-select { position: relative; }

/* Honor [hidden] for the menu (Theme CSS might use a class toggle) */
.ui-select .theme-menu[hidden] { display: none !important; }

/* Basic popover positioning; Theme styles handle look & feel */
.ui-select .theme-menu {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    min-width: 100%;
    z-index: 50;
    display: block;
}