/* ==========================================================================
   Language switch — rendered by js/i18n.js into
   <div class="lang-switch" data-lang-switch></div>
   ========================================================================== */

/* While a translation is being applied the page stays hidden (max. 1.5 s, see i18n.js) */
html.i18n-pending body { visibility: hidden; }

/* ── Container: slim tab docked to the right edge ── */
.lang-switch {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 0.25rem 0.3rem;
    padding-left: calc(0.25rem + env(safe-area-inset-left, 0px));
    border-left: none;                                    /* docked to the left edge */
    border-radius: 0 0.7rem 0.7rem 0;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    font-family: var(--font-mono);
}
html:not(.has-i18n) .lang-switch { display: none; }   /* JavaScript off → no switch */
.lang-switch:empty { visibility: hidden; }            /* keeps its space until i18n.js fills it */

/* ── Globe with a hairline divider underneath ── */
.lang-switch-icon {
    box-sizing: content-box;
    width: 0.95rem;
    height: 0.95rem;
    padding: 0 0.35rem 0.45rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid var(--accent-dim-text);
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.6;
    opacity: 0.75;
}

/* ── Buttons: flag on top, code below ── */
.lang-switch-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 2.1rem;
    padding: 0.4rem 0 0.3rem;
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.62rem;
    line-height: 1;
    letter-spacing: 0.1em;
    text-indent: 0.1em;                   /* keeps the code optically centered */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;   /* no grey flash on tap */
    touch-action: manipulation;                 /* no double-tap zoom delay */
    transition: color var(--duration-fast) ease,
                background var(--duration-fast) ease,
                transform var(--duration-fast) ease;
}

/* ── Flag ── */
.lang-flag {
    width: 1.15rem;
    height: 0.77rem;                      /* 3:2 */
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
    filter: grayscale(1);
    opacity: 0.55;
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),   /* springy overshoot */
                box-shadow 0.35s ease,
                filter var(--duration-fast) ease,
                opacity var(--duration-fast) ease;
}

/* ── Active state: accent bar on the left edge + full-color flag ── */
.lang-switch-btn::before {
    content: "";
    position: absolute;
    right: -0.25rem;
    top: 22%;
    bottom: 22%;
    width: 2px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: var(--text-glow);
    transform: scaleY(0);
    transition: transform var(--duration-fast) ease;
}
.lang-switch-btn[aria-pressed="true"] { color: var(--accent); }
.lang-switch-btn[aria-pressed="true"]::before { transform: scaleY(1); }
.lang-switch-btn[aria-pressed="true"] .lang-flag {
    filter: none;
    opacity: 1;
}

/* ── Hover pop (only on devices that can really hover) ── */
@media (hover: hover) {
    .lang-switch-btn:hover {
        color: var(--accent);
        background: var(--accent-tint-3);
    }
    .lang-switch-btn:hover .lang-flag {
        filter: none;
        opacity: 1;
        transform: translateY(-2px) scale(1.4);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2),
                    0 4px 10px rgba(0, 0, 0, 0.35);
    }
}

/* ── Press feedback ── */
.lang-switch-btn:active { transform: scale(0.94); }

.lang-switch-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* ── Touch devices: the flag pops once when its language gets selected ── */
@keyframes lang-flag-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.35) translateY(-1px); }
    100% { transform: scale(1); }
}
@media (hover: none) {
    .lang-switch-btn[aria-pressed="true"] .lang-flag {
        animation: lang-flag-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
}

@media (max-width: 1250px) {
    .lang-switch {
        border: 1px solid var(--accent-dim-text);
    }
}

/* ── Mobile: floating pill in the bottom-right thumb zone ── */
@media (max-width: 730px) {
    .lang-switch {
        top: auto;
        left: auto;
        right: calc(0.9rem + env(safe-area-inset-right, 0px));
        bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));   /* clears the iPhone home bar */
        transform: none;
        flex-direction: row;
        gap: 0.15rem;
        padding: 0.25rem 0.25rem 0.25rem 0.8rem;
        border-radius: 999px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
    }

    /* Globe on the left, short vertical divider */
    .lang-switch-icon {
        padding: 0 0.65rem 0 0;
        margin: 0 0.2rem 0 0;
        border-bottom: 0;
        border-right: 1px solid var(--accent-dim-text);
    }

    /* Round 44px buttons */
    .lang-switch-btn {
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        justify-content: center;
        gap: 0.22rem;
        border-radius: 50%;
        font-size: 0.58rem;
    }
    .lang-flag {
        width: 1.2rem;
        height: 0.8rem;
    }

    /* Active = tinted circle instead of the edge bar */
    .lang-switch-btn::before { display: none; }
    .lang-switch-btn[aria-pressed="true"] {
        background: var(--accent-tint-2);
        box-shadow: inset 0 0 0 1px var(--accent-border);
    }
}

/* ── Reduced motion: keep the color changes, drop the movement ── */
@media (prefers-reduced-motion: reduce) {
    .lang-switch-btn,
    .lang-switch-btn::before,
    .lang-flag {
        transition: color var(--duration-fast) ease,
                    background var(--duration-fast) ease,
                    filter var(--duration-fast) ease,
                    opacity var(--duration-fast) ease;
    }
    .lang-switch-btn:active,
    .lang-switch-btn:hover .lang-flag { transform: none; }
    .lang-switch-btn[aria-pressed="true"] .lang-flag { animation: none; }
}