/* Language switcher in the announcement bar.
   The design export shipped a static "EN ▾" label styled as .topbar__lang; this
   turns that same slot into a real control and adds the menu it never had. */

.langsel{position:relative;display:inline-flex}

.langsel__toggle{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:0;padding:0 2px;margin:0;cursor:pointer;
  font:inherit;font-weight:600;color:#e6ebf7;line-height:1;
  border-radius:6px;
}
.langsel__toggle:hover{color:#fff}
.langsel__toggle:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.langsel__toggle svg{width:13px;height:13px}
.langsel__globe{width:14px;height:14px;opacity:.85}
.langsel__chevron{transition:transform .16s}
.langsel.is-open .langsel__chevron{transform:rotate(180deg)}

.langsel__menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:70;min-width:172px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-md);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s,transform .16s,visibility .16s;
}
.langsel.is-open .langsel__menu{opacity:1;visibility:visible;transform:translateY(0)}

.langsel__menu a{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:8px;
  color:var(--ink);font-size:14px;font-weight:500;text-decoration:none;
}
.langsel__menu a:hover{background:var(--bg-soft)}
.langsel__menu a[aria-current="true"]{color:var(--brand);font-weight:600}
.langsel__code{
  min-width:26px;font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--muted);
}
.langsel__menu a[aria-current="true"] .langsel__code{color:var(--brand)}

/* The menu stays right-aligned at every width: the bar drops its secondary
   items on small screens but the switcher keeps its place at the right end, and
   a left-aligned menu would hang off the viewport — widening the document even
   while closed, since it is only hidden, not removed from layout. */