/* ============================================================================
   Language switcher — a disclosure, not a segmented control.

   WHY THE REDESIGN
   The segmented control was fine at two locales and full at four: its width
   grows with every language, and the nav also has to fit a theme switch and an
   install CTA. This trigger is CONSTANT WIDTH, so the twentieth language costs
   the nav nothing.

   WHY <details> AND NOT A BUTTON + JS MENU
   `<details>/<summary>` opens and closes with **no JavaScript at all**, and the
   browser supplies the keyboard behaviour (Enter/Space) and the expanded state
   to screen readers for free. The contents are ordinary `<a href>` links, so a
   crawler and a no-JS visitor both get a plain list of locale links. JavaScript
   only adds what a native disclosure lacks: close on outside click, close on
   Escape, and returning focus to the trigger.

   The current locale is marked three ways — `aria-current`, the accent, and a
   `■` glyph — because status is never carried by colour alone in this system.
   ========================================================================== */

.lang{position:relative}
.lang > summary{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 11px;
  border:1px solid var(--line);border-radius:10px;background:var(--raised);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;list-style:none;user-select:none;white-space:nowrap;
  transition:color 140ms ease-out,background-color 140ms ease-out
}
.lang > summary::-webkit-details-marker{display:none}   /* Safari's default triangle */
.lang > summary::marker{content:""}
.lang > summary:hover{color:var(--ink)}
.lang > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lang[open] > summary{color:var(--ink);background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px var(--accent-line)}
.lang .globe{width:14px;height:14px;flex:none;opacity:.85}
.lang .cur{font-weight:500}
.lang .chev{font-size:9px;line-height:1;opacity:.7;transition:transform 140ms ease-out}
.lang[open] .chev{transform:rotate(180deg)}

/* The sheet scales by wrapping into columns rather than growing taller for
   ever; past roughly fourteen locales it scrolls instead of leaving the
   viewport. */
.lang-sheet{
  position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px;
  min-width:210px;max-width:min(88vw,332px);max-height:min(62vh,420px);overflow-y:auto;
  padding:6px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--paper);box-shadow:var(--sh-2)
}
.lang-sheet a{
  display:flex;align-items:center;gap:9px;min-height:44px;padding:0 11px;border-radius:var(--r-sm);
  font-size:13.5px;line-height:1.3;color:var(--muted);text-decoration:none;white-space:nowrap
}
.lang-sheet a:hover{color:var(--ink);background:var(--raised)}
.lang-sheet a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.lang-sheet a .mk{font-family:var(--mono);font-size:9px;width:9px;flex:none;opacity:0}
.lang-sheet a[aria-current="true"]{color:var(--accent-text);background:var(--accent-soft);font-weight:600}
.lang-sheet a[aria-current="true"] .mk{opacity:1}
.lang-sheet a .code{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--subtle);margin-left:auto;padding-left:10px}

/* The sheet is capped at two columns (~332px) rather than widening with the
   locale count: a right-anchored sheet wide enough for four columns runs off the
   left edge as soon as the trigger sits on the left, which it does below 1080
   where the nav collapses. Past ~9 locales it scrolls, which is bounded and
   predictable; growing sideways is not.
   Below 1080 the nav-tail is left-aligned, so the sheet anchors left too. */
@media (max-width:1080px){
  .lang-sheet{right:auto;left:0}
}
@media (max-width:640px){
  .lang-sheet{min-width:min(88vw,330px);
    grid-template-columns:repeat(auto-fill,minmax(136px,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .lang > summary,.lang .chev{transition:none}
}