/* =================================================================
   LANGUAGE SWITCHER — Google Translate Custom UI
   Fixed floating widget (bottom-right corner) with custom language panel.
   Matches CollabPals design system (flat, Inter font, indigo primary).
   ================================================================= */

/* --- Container (Fixed Position) --- */
.lang-switcher {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 5000;
    font-family: var(--font-family-base, 'Inter', sans-serif);
}
/* Lift above full-screen overlays. Verified z-indexes (2026-05-13):
   - Studio Optimize/Create modal (.ch-opt-modal): 9500
   - Studio Gate modal (insufficient credits): 9600
   - Channel Audit modal (.ch-audit-modal): 10500
   10600 clears all three. Toggled by CollabPals.liftLangSwitcher(true/false). */
.lang-switcher--overlay-mode {
    z-index: 10600;
}

/* Yield to fullscreen Studio Optimize/Create modal on mobile.
   The gtranslate widget pins to bottom-right at z-index 5000 and overlaps the
   modal's bottom-tab bar (~y=688 at 375x812). Hide while the modal is open. */
body:has(#ch-opt-modal.is-visible) .lang-switcher {
    display: none;
}

/* Onboarding reveal page: lift above the sticky bottom action bar
   (~80px tall on desktop, ~66px on mobile — mobile values set in the
   responsive media queries below). */
body.reveal-has-actionbar .lang-switcher {
    bottom: 100px;
}

/* Concierge bubble present (desktop): bubble sits at bottom:24px right:24px
   — same as the lang-switcher default — so lift the switcher above the
   56px bubble + 12px gap. Mobile-specific overrides live in the responsive
   media queries below. Per locked design line 66-67. */
body:has(.cncg-bubble--ready) .lang-switcher {
    bottom: 92px;
}

/* --- Floating Trigger Button --- */
.lang-switcher__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px 0 12px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 99px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
    line-height: 1;
}

.lang-switcher__btn:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.lang-switcher__btn--active {
    background-color: var(--color-primary, #4F46E5);
    border-color: var(--color-primary, #4F46E5);
    color: #ffffff;
}

.lang-switcher__btn--active:hover {
    background-color: var(--color-primary-dark, #4338CA);
    border-color: var(--color-primary-dark, #4338CA);
    color: #ffffff;
}

.lang-switcher__btn i {
    font-size: 1rem;
}

/* Inherited #94a3b8, measured 2.55:1. Set explicitly so the language code is
   readable wherever the switcher is mounted. */
.lang-switcher__current {
    color: var(--color-gray-500);
    letter-spacing: 0.05em;
    font-size: 0.8rem;
}

/* Translated indicator dot — shows when page is not in English */
.lang-switcher__btn--translated::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background-color: #22c55e;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

.lang-switcher__btn {
    position: relative;
}

/* --- Panel (Opens Upward from Button) --- */
.lang-switcher__panel {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    width: 300px;
    max-height: 70vh;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 8px 10px -6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

.lang-switcher__panel--open {
    opacity: 1;
    transform: translateY(0);
}

/* --- Panel Header --- */
.lang-switcher__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
    background-color: #f8fafc;
}

.lang-switcher__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lang-switcher__title i {
    color: var(--color-primary, #4F46E5);
    font-size: 1rem;
}

.lang-switcher__close-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lang-switcher__close-btn:hover {
    background-color: #e2e8f0;
    color: #64748b;
}

/* --- Search Input --- */
.lang-switcher__search {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.lang-switcher__search-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: inherit;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lang-switcher__search-input:focus {
    border-color: var(--color-primary, #4F46E5);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.lang-switcher__search-input::placeholder {
    color: #94a3b8;
}

/* --- Panel Body (Scrollable Language List) --- */
.lang-switcher__body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
}

/* Section dividers between language groups */
.lang-switcher__divider {
    height: 1px;
    background-color: #f1f5f9;
    margin: 4px 16px;
}

/* --- Individual Language Button --- */
.lang-switcher__lang {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 9px 16px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.12s ease;
    gap: 8px;
    position: relative;
    font-family: inherit;
}

.lang-switcher__lang:hover {
    background-color: #f8fafc;
}

.lang-switcher__lang--active {
    background-color: #eff6ff;
}

.lang-switcher__lang--active:hover {
    background-color: #dbeafe;
}

.lang-switcher__native {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    min-width: 0;
}

.lang-switcher__lang--active .lang-switcher__native {
    color: var(--color-primary, #4F46E5);
}

.lang-switcher__label {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-left: auto;
    flex-shrink: 0;
}

.lang-switcher__check {
    color: var(--color-primary, #4F46E5);
    font-size: 0.75rem;
    margin-left: 6px;
    flex-shrink: 0;
}

/* --- Panel Footer --- */
.lang-switcher__footer {
    padding: 8px 16px;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.lang-switcher__powered {
    font-size: 0.75rem;
    color: #cbd5e1;
}

/* =================================================================
   LANGUAGE NUDGE TOOLTIP
   Auto-detection nudge for non-English browser users. Shown once,
   positioned above the globe button. Dismissed via X or auto after 10s.
   ================================================================= */

.lang-nudge {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 34px 10px 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    font-size: 0.85rem;
    z-index: 1;
}

.lang-nudge--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Small arrow pointing down toward the globe button */
.lang-nudge::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 16px;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    transform: rotate(45deg);
}

.lang-nudge__greeting {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.9rem;
}

.lang-nudge__text {
    color: #64748b;
}

.lang-nudge__cta {
    background-color: var(--color-primary, #4F46E5);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    margin-left: 4px;
    transition: background-color 0.15s ease;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
}

.lang-nudge__cta:hover {
    background-color: var(--color-primary-dark, #4338CA);
}

.lang-nudge__dismiss {
    position: absolute;
    top: 4px;
    right: 8px;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
}

.lang-nudge__dismiss:hover {
    color: #64748b;
}

/* =================================================================
   GOOGLE TRANSLATE OVERRIDES
   Hide the default Google banner/bar, body offset, and all visual
   artifacts. The translate engine needs its <select> element
   (.goog-te-combo) inside #google_translate_element to remain
   renderable — everything else gets nuked.
   ================================================================= */

/* Hide ALL Google Translate banner/toolbar elements.
   Google renamed .goog-te-banner-frame to obfuscated class names,
   so we target iframe.skiptranslate which is more stable. */
.goog-te-banner-frame,
iframe.skiptranslate {
    display: none !important;
}

/* Google adds a body > div.skiptranslate wrapper for its toolbar UI.
   This is SEPARATE from #google_translate_element (which holds the
   <select> we need). Safe to display:none — the <select> lives in
   our own #google_translate_element div inside the page, not here. */
body > .skiptranslate {
    display: none !important;
}

/* Reset ALL body positioning Google sets (inline styles).
   Google adds: position:relative, top:40px, and sometimes margin-top.
   The translated-ltr/rtl class is on <html>, not <body>. */
.translated-ltr body,
.translated-rtl body {
    top: 0 !important;
    margin-top: 0 !important;
    position: static !important;
}

/* Google sets html { height: 100% } inline — reset to auto so the
   page scrolls naturally. */
html.translated-ltr,
html.translated-rtl {
    height: auto !important;
}

/* Hide the Google Translate gadget visually but keep it functional.
   Uses off-screen positioning (NOT display:none) so the <select>
   element (.goog-te-combo) remains interactive for programmatic control. */
#google_translate_element {
    position: fixed !important;
    top: -200px !important;
    left: -200px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Google sometimes adds a spinner — hide it */
.goog-te-spinner-pos {
    display: none !important;
}

/* Catch-all: any Google Translate tooltip, popup, or overlay */
.goog-te-menu-value,
.goog-te-gadget,
.goog-tooltip {
    display: none !important;
}

/* =================================================================
   TRANSLATED TEXT OVERFLOW FIXES
   When Google Translate produces longer text than English, buttons
   and nav items can overflow. These rules ONLY apply when the page
   is translated (html.translated-ltr / html.translated-rtl), so the
   English layout stays untouched.
   ================================================================= */

/* Buttons: allow text to wrap instead of overflowing */
.translated-ltr .btn,
.translated-ltr .button,
.translated-ltr .btn-youtube,
.translated-ltr .header-upgrade-btn,
.translated-ltr .alternative-payments__links a,
.translated-rtl .btn,
.translated-rtl .button,
.translated-rtl .btn-youtube,
.translated-rtl .header-upgrade-btn,
.translated-rtl .alternative-payments__links a {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    height: auto !important;
    min-height: 40px;
}

/* Nav links: allow wrapping and slightly smaller text */
.translated-ltr .main-nav a,
.translated-rtl .main-nav a {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.3;
}

/* Pricing table: tier names, badges, and savings labels */
.translated-ltr .benefit-card__title,
.translated-ltr .benefit-card__price,
.translated-ltr .billing-toggle__savings,
.translated-ltr .result-chip,
.translated-ltr .benefit-badge--chip,
.translated-ltr .benefit-badge--float,
.translated-ltr .benefit-badge--popular,
.translated-rtl .benefit-card__title,
.translated-rtl .benefit-card__price,
.translated-rtl .billing-toggle__savings,
.translated-rtl .result-chip,
.translated-rtl .benefit-badge--chip,
.translated-rtl .benefit-badge--float,
.translated-rtl .benefit-badge--popular {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    text-overflow: ellipsis;
    overflow: visible !important;
}

/* Wallet pill in header: allow content to flex naturally */
.translated-ltr .wallet-section span,
.translated-rtl .wallet-section span {
    white-space: normal !important;
    overflow: visible !important;
}

/* Tab buttons (ambassador dashboard, etc.) */
.translated-ltr .toolkit-tabs__button,
.translated-rtl .toolkit-tabs__button {
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

/* Mobile nav username */
.translated-ltr .mobile-nav-user-name,
.translated-rtl .mobile-nav-user-name {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* Tables: allow cell text to wrap when translated */
.translated-ltr .table-responsive .table,
.translated-rtl .table-responsive .table {
    white-space: normal !important;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 991px) {
    /* Default: brand/public pages have no bottom nav — keep it low */
    .lang-switcher {
        bottom: 20px;
        right: 16px;
    }

    /* Creator member area: bottom-nav only (no FAB) — lift above nav */
    body:has(.mobile-bottom-nav) .lang-switcher {
        bottom: 92px;
    }

    /* Creator member area: bottom-nav + FAB both present — lift above FAB */
    body:has(.mobile-bottom-nav):has(.mobile-fab) .lang-switcher {
        bottom: 144px;
    }

    /* Checkout pages: focused 30-second payment flow. The floating EN globe
       overlaps the social-proof "203 COUNTRIES" cell mid-page and competes
       with the sticky Pay button for attention. Hide it on mobile checkout —
       language can be switched anywhere else in the app. */
    body.checkout-pe-page .lang-switcher,
    body.brand-checkout-pe-page .lang-switcher,
    body.buy-credits-checkout-pe-page .lang-switcher {
        display: none !important;
    }

    /* Brand member area: brand-mobile-fab present (24px bottom + 56px height + 8px gap) */
    body:has(.brand-mobile-fab) .lang-switcher {
        bottom: 88px;
    }

    /* Hire pages: sticky CTA bar visible — lift above it (52px bar + 12px gap) */
    body:has(.hire-sticky-cta--visible) .lang-switcher {
        bottom: 72px;
    }

    /* Onboarding reveal: sticky action bar at bottom (~66px tall on mobile) */
    body.reveal-has-actionbar .lang-switcher {
        bottom: 84px;
    }

    /* Concierge bubble present: bubble sits at bottom:92px (above the
       mobile-bottom-nav), so lift the lang-switcher above the bubble
       (~56px bubble + 12px gap above the 92px baseline). Per locked
       design line 66-67. */
    body:has(.cncg-bubble--ready) .lang-switcher {
        bottom: 160px;
    }
}

/* Hide language switcher while mobile nav is open to prevent overlap */
body.mobile-nav-open .lang-switcher {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

@media (max-width: 480px) {
    .lang-switcher {
        bottom: 16px;
        right: 8px; /* right-edge aligned with the concierge circle */
    }

    /* Creator member area */
    body:has(.mobile-bottom-nav) .lang-switcher {
        bottom: 88px;
    }

    /* Brand member area: fab is 52px tall at 20px bottom → top at 72px; add 12px gap */
    body:has(.brand-mobile-fab) .lang-switcher {
        bottom: 84px;
    }

    /* Hire pages: sticky CTA bar */
    body:has(.hire-sticky-cta--visible) .lang-switcher {
        bottom: 68px;
    }

    /* Onboarding reveal: sticky action bar at bottom (~62px on small mobile) */
    body.reveal-has-actionbar .lang-switcher {
        bottom: 80px;
    }

    /* Concierge bubble present (small-mobile): bubble at bottom:92px + 56px
       + 8px gap fits in 156px from bottom (slightly tighter than 480-768
       breakpoint to keep the switcher inside thumb-reach on 320-375px). */
    body:has(.cncg-bubble--ready) .lang-switcher {
        bottom: 156px;
    }

    .lang-switcher__btn {
        height: 44px;
        padding: 0 12px 0 12px;
        font-size: 0.8rem;
    }

    .lang-switcher__panel {
        width: 260px;
        max-height: 60vh;
    }

    .lang-nudge {
        white-space: normal;
        max-width: calc(100vw - 32px);
        right: 0;
        font-size: 0.8rem;
        padding: 8px 30px 8px 10px;
    }
}

/* Tiny phones */
@media (max-width: 360px) {
    .lang-switcher {
        bottom: 84px;
        right: 8px;
    }

    .lang-switcher__panel {
        width: 240px;
    }
}

/* =================================================================
   GLOBE IN THE TOP HEADER BAR (creator member area, ALL widths)
   language-switcher.js relocates #lang-switcher into the member
   header's right cluster (before the bell) and adds
   .lang-switcher--in-header, at EVERY width now (not just phones).
   It renders as a compact "globe + EN" language pill matching the other
   flat header icon buttons, with the panel + nudge dropping DOWN from the
   bar. This frees the bottom-right corner for the Concierge on desktop
   and mobile alike. The visible "EN" label is deliberate: a bare globe
   reads ambiguously (region / website), the label makes it unmistakably a
   LANGUAGE switch. Brand / public / minimal layouts have no .member-header,
   so they keep the floating bottom-right pill.
   ID+class specificity (1,1,0) intentionally beats the body:has(...)
   bottom-dodge rules (0,2,0) above so the reposition wins cleanly.
   ================================================================= */
#lang-switcher.lang-switcher--in-header {
    position: relative;   /* flow inside the header-right flex row */
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 5001;
    display: inline-flex;
    align-items: center;
}

/* In the header the globe no longer needs to lift above full-screen
   Studio / Channel Audit modals (those cover the header anyway). Keep it
   at header level so its overlay-mode z-index bump never pokes through an
   open modal. */
#lang-switcher.lang-switcher--in-header.lang-switcher--overlay-mode {
    z-index: 5001;
}

    /* Compact "globe + EN" language pill, styled flat and MUTED to match the
       sibling header icon buttons (.header-notification-btn: gray-400, ~34px,
       transparent). The muted grey keeps it from standing out against the
       bell / message icons; the visible label keeps it legible as language. */
    .lang-switcher--in-header .lang-switcher__btn {
        height: 34px;
        width: auto;
        padding: 0 8px;
        gap: 5px;
        justify-content: center;
        background-color: transparent;
        border: none;
        border-radius: 8px;
        box-shadow: none;
        color: var(--color-gray-400);
    }
    .lang-switcher--in-header .lang-switcher__btn:hover {
        background-color: var(--color-gray-100);
        border-color: transparent;
        box-shadow: none;
        transform: none;
        color: var(--color-gray-600);
    }
    .lang-switcher--in-header .lang-switcher__btn:active {
        background-color: var(--color-gray-100);
        transform: scale(0.96);
    }
    /* Translated state: flat indigo tint (no filled pill). The green
       --translated dot already signals an active translation. */
    .lang-switcher--in-header .lang-switcher__btn--active,
    .lang-switcher--in-header .lang-switcher__btn--active:hover {
        background-color: rgba(79, 70, 229, 0.12);
        border-color: transparent;
        color: var(--color-primary, #4F46E5);
    }
    .lang-switcher--in-header .lang-switcher__btn i {
        font-size: 0.95rem;   /* globe glyph, matches sibling header icons */
    }
    /* Globe + language label ("EN", or the active language code once
       translated). The visible label is what makes the control read as a
       LANGUAGE switch rather than a bare globe. */
    .lang-switcher--in-header .lang-switcher__current {
        display: inline;
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.03em;
    }

    /* Panel drops DOWN from the bar as a top-right sheet. Fixed so it is
       anchored to the viewport right edge (not the globe, which sits ~108px
       in), keeping it on-screen down to 320px. The header's backdrop-filter
       makes this resolve relative to the full-width top bar either way. */
    .lang-switcher--in-header .lang-switcher__panel {
        position: fixed;
        top: 64px;
        right: 12px;
        left: auto;
        bottom: auto;
        width: min(320px, calc(100vw - 24px));
        max-height: calc(100vh - 84px);
        transform: translateY(-8px);
        z-index: 10000;
    }
    .lang-switcher--in-header .lang-switcher__panel--open {
        transform: translateY(0);
    }

    /* Auto-detection nudge flips to drop DOWN, arrow pointing UP at the bar. */
    .lang-switcher--in-header .lang-nudge {
        position: fixed;
        top: 64px;
        right: 12px;
        left: auto;
        bottom: auto;
        max-width: calc(100vw - 24px);
        transform: translateY(-4px);
        z-index: 10001;
    }
    .lang-switcher--in-header .lang-nudge--visible {
        transform: translateY(0);
    }
    .lang-switcher--in-header .lang-nudge::after {
        top: -6px;
        bottom: auto;
        right: 20px;
        border-right: none;
        border-bottom: none;
        border-left: 1px solid #e2e8f0;
        border-top: 1px solid #e2e8f0;
    }

/* Touch target: the switcher is 40px tall, just under the 44px minimum. */
@media (max-width: 767px) {
    .lang-switcher__btn {
        height: 44px;
    }
}

/* =================================================================
   PUBLIC / BRAND FOUNDATION HEADER (.fndc-hdr, ink top bar).
   The same relocation used in the member area, applied to the public
   and brand marketing headers (founder, 2026-08-27). DESKTOP renders
   the "globe + EN" pill in the ink top bar; MOBILE renders it as a
   "Language" row inside the hamburger drawer so the header CTA is
   never crowded. language-switcher.js decides which by width.
   ================================================================= */

/* Drawer label: only visible in the mobile drawer row. Hidden in the
   floating pill and the header-pill placements. */
.lang-switcher__drawer-label { display: none; }

/* --- DESKTOP: pill in the ink header. The base .lang-switcher--in-header
   pill uses gray-400 text (correct on a white bar); recolour it light on
   the ink foundation header so it matches the nav links + CTA. --- */
.fndc-hdr--ink .lang-switcher--in-header .lang-switcher__btn,
.fndc-hdr--ink .lang-switcher--in-header .lang-switcher__current {
    color: var(--fnd-on-ink-soft, rgba(255, 255, 255, 0.72));
}
.fndc-hdr--ink .lang-switcher--in-header .lang-switcher__btn:hover,
.fndc-hdr--ink .lang-switcher--in-header .lang-switcher__btn:hover .lang-switcher__current {
    background-color: rgba(255, 255, 255, 0.085);
    color: #fff;
}

/* --- MOBILE: full-width row inside the ink hamburger drawer, matching the
   drawer's own nav links (.fndc-drawer-body a: 50px, light text, gap 13). --- */
.lang-switcher--in-drawer {
    display: block;
    width: 100%;
}
.lang-switcher--in-drawer .lang-switcher__btn {
    width: 100%;
    min-height: 50px;
    height: auto;
    justify-content: flex-start;
    gap: 13px;
    padding: 0 12px;
    border-radius: var(--fnd-r-sm, 8px);
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: var(--fnd-on-ink-soft, rgba(255, 255, 255, 0.72));
    font-family: var(--fnd-body-font, 'Inter', sans-serif);
    font-size: 16.5px;
    font-weight: 500;
}
.lang-switcher--in-drawer .lang-switcher__btn:hover {
    background-color: rgba(255, 255, 255, 0.075);
    color: #fff;
    transform: none;
}
.lang-switcher--in-drawer .lang-switcher__btn:active {
    background-color: rgba(255, 255, 255, 0.075);
    transform: scale(0.99);
}
.lang-switcher--in-drawer .lang-switcher__btn i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
}
.lang-switcher--in-drawer .lang-switcher__drawer-label {
    display: inline;
    font-size: 16.5px;
    font-weight: 500;
}
.lang-switcher--in-drawer .lang-switcher__current {
    margin-left: auto;
    font-size: 0.82rem;
    font-weight: 700;
    opacity: 0.75;
    letter-spacing: 0.03em;
}

/* =================================================================
   ONBOARDING REVEAL (base_minimal.twig) — 2026-09-03
   The reveal shell has no .member-header / .fndc-hdr, so
   language-switcher.js never relocates the pill; it stays the floating
   bottom-right widget and lands ON TOP of the essence-card copy at 375px
   (it hid the end of "...feel more confident debating games..."). Every
   other member surface avoids this by parking the pill in the header;
   the reveal has a top bar too, so pin the pill into its right edge and
   flip the panel + nudge to drop DOWN, out of the reading flow.

   Scoped to body.reveal-has-actionbar, which BOTH reveal branches carry
   (old + foundation), so it fixes whichever one the switch renders. The
   #lang-switcher.lang-switcher (1,1,0) specificity beats the (0,2,0)
   bottom-dodge rules above without !important, matching the technique the
   --in-header block already uses.
   ================================================================= */
body.reveal-has-actionbar #lang-switcher.lang-switcher {
    /* ABSOLUTE, NOT FIXED. `.minimal-header` is position:static, so it scrolls
       away with the page. A FIXED pill stayed pinned at top:14px while the bar
       it was supposed to be sitting in scrolled out from under it, and from
       ~64px of scroll onward it floated over the body — at 375px it cut
       straight through the "Football" chip in the themes row. That is the same
       overlap this block exists to remove, just moved to the other end of the
       page. Absolute anchors it to the document instead of the viewport, so it
       rides the header off-screen and can never cover content at any scroll
       position. (Caught by the sweep, 2026-09-03; the first check only looked
       at the page unscrolled, where it happened to line up.) */
    position: absolute;
    top: 14px;
    right: 12px;
    bottom: auto;
    left: auto;
    z-index: 5001;
}

/* Panel and nudge open UPWARD by default (bottom-anchored). With the pill
   now at the top of the viewport that would push them off-screen, so flip
   both to fixed, dropping DOWN from the bar's right edge. */
body.reveal-has-actionbar .lang-switcher__panel {
    position: fixed;
    top: 66px;
    right: 12px;
    left: auto;
    bottom: auto;
    transform: translateY(-8px);
}
body.reveal-has-actionbar .lang-switcher__panel--open {
    transform: translateY(0);
}
body.reveal-has-actionbar .lang-nudge {
    position: fixed;
    top: 66px;
    right: 12px;
    left: auto;
    bottom: auto;
    transform: translateY(-4px);
}
body.reveal-has-actionbar .lang-nudge--visible {
    transform: translateY(0);
}
/* Arrow flips to point UP at the bar instead of down at the (now absent)
   floating button. */
body.reveal-has-actionbar .lang-nudge::after {
    top: -6px;
    bottom: auto;
    right: 20px;
    border-right: none;
    border-bottom: none;
    border-left: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
}