/* Language switcher: a pill that opens an in-app menu of languages (works on every page, no app.js needed). */
.lang-switch { position: relative; display: inline-block; margin: 0; --ls-border: var(--border, var(--line, #d7dee8)); --ls-bg: var(--surface, var(--sheet, #fff)); --ls-ink: var(--ink-2, #334155); --ls-text: var(--heading, var(--ink, #0b1f3a)); --ls-brand: var(--brand, #02478d); --ls-tint: var(--brand-tint, #e8f0fa); --ls-shadow: var(--shadow-md, 0 14px 36px rgba(2, 30, 70, .18)); }
.lang-switch > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 10px 0 11px; border: 1px solid var(--ls-border); border-radius: 999px; background: var(--ls-bg); color: var(--ls-ink); font: inherit; font-size: .86rem; font-weight: 600; line-height: 1; cursor: pointer; user-select: none; -webkit-user-select: none; transition: border-color .15s, color .15s, background .15s; }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary::marker { content: ""; }
.lang-switch > summary:hover, .lang-switch[open] > summary { border-color: var(--ls-brand); color: var(--ls-brand); }
.lang-switch > summary:focus-visible { outline: 2px solid var(--ls-brand); outline-offset: 2px; }
.lang-switch .ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lang-current { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.lang-current b { font-weight: 800; font-size: .76rem; letter-spacing: .06em; }
.lang-name { font-weight: 500; }
.lang-caret { width: 14px; height: 14px; opacity: .8; transition: transform .15s; }
.lang-switch[open] .lang-caret { transform: rotate(180deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 120; min-width: 216px; margin: 0; padding: 6px; border: 1px solid var(--ls-border); border-radius: 14px; background: var(--ls-bg); box-shadow: var(--ls-shadow); animation: lang-pop .14s ease-out; }
@keyframes lang-pop { from { opacity: 0; transform: translateY(-4px); } }
.lang-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--ls-text); font: inherit; font-size: .9rem; line-height: 1.2; text-align: left; cursor: pointer; }
.lang-opt:hover, .lang-opt:focus-visible { background: var(--ls-tint); color: var(--ls-brand); outline: none; }
.lang-code { flex: none; min-width: 32px; padding: 3px 6px; border-radius: 6px; background: var(--ls-tint); color: var(--ls-brand); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-align: center; }
.lang-label { flex: 1; }
.lang-check { width: 16px; height: 16px; opacity: 0; color: var(--ls-brand); }
.lang-opt.is-current { font-weight: 700; }
.lang-opt.is-current .lang-code { background: var(--ls-brand); color: #fff; }
.lang-opt.is-current .lang-check { opacity: 1; }
.lang-switch.light > summary { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .38); color: #fff; }
.lang-switch.light > summary:hover, .lang-switch.light[open] > summary { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .6); color: #fff; }
.lang-float { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 90; }
.lang-float > summary { min-height: 40px; box-shadow: var(--ls-shadow); }
.lang-float .lang-menu { top: auto; bottom: calc(100% + 8px); }
@media (max-width: 999px) { body:has(.tabbar) .lang-float { bottom: calc(84px + env(safe-area-inset-bottom)); } }
.snav-foot .lang-switch { display: block; width: 100%; }
.snav-foot .lang-switch > summary { width: 100%; justify-content: flex-start; border-radius: 12px; }
.snav-foot .lang-name { display: inline; }
.snav-foot .lang-menu { left: 0; right: 0; top: auto; bottom: calc(100% + 8px); }
@media (max-width: 640px) { .lang-switch:not(.lang-float) > summary .lang-name { display: none; } .lang-switch > summary { padding: 0 9px 0 10px; } }