/* Shared language switcher.
   Palette comes from custom properties so each page can dress it in its own
   colours without forking the component. Defaults suit a dark background. */
.langsw{
  display:inline-flex;align-items:center;gap:2px;padding:3px;
  border:1px solid var(--sw-line,rgba(255,255,255,.18));
  border-radius:999px;
  background:var(--sw-bg,rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  line-height:0;flex:0 0 auto;
}
.langsw button{
  -webkit-appearance:none;appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Noto Sans SC','Segoe UI',sans-serif;
  font-size:11.5px;font-weight:600;line-height:1;letter-spacing:.02em;white-space:nowrap;
  color:var(--sw-ink,rgba(255,255,255,.6));
  padding:9px 11px;min-height:34px;border-radius:999px;
  transition:color .18s ease,background .18s ease;
}
.langsw button:hover{color:var(--sw-ink-on,#fff)}
.langsw button[aria-pressed="true"]{
  background:var(--sw-active,rgba(255,255,255,.15));
  color:var(--sw-ink-on,#fff);
}
.langsw button:focus-visible{outline:2px solid var(--sw-focus,currentColor);outline-offset:2px}

/* The switcher is built by JS; with JS off there is nothing to switch to,
   so the empty shell should not render as a stray pill. */
.langsw:empty{display:none}

@media (prefers-reduced-motion:reduce){
  .langsw button{transition:none}
}