.ui-language { position: relative; font: inherit; text-align: start; }
.ui-language summary { cursor: pointer; padding: 8px 12px; border: 1px solid currentColor; border-radius: 18px; list-style: none; white-space: nowrap; }
.ui-language summary::-webkit-details-marker { display: none; }
.ui-language-panel { position: absolute; z-index: 110; inset-inline-end: 0; top: calc(100% + 8px); width: min(300px, calc(100vw - 32px)); padding: 12px; background: #fff; color: #151515; border: 2px solid #151515; border-radius: 12px; box-shadow: 4px 4px 0 #151515; }
.ui-language-panel input { box-sizing: border-box; width: 100%; margin: 0 0 8px; padding: 10px; border: 1px solid #777; border-radius: 6px; font: inherit; }
.ui-language-panel button { display: block; width: 100%; text-align: start; margin: 0; padding: 10px; border: 0; border-radius: 6px; background: #fff; color: #151515; font: inherit; cursor: pointer; box-shadow: none; transform: none; }
.ui-language-panel button[aria-pressed="true"] { background: #d8ff49; font-weight: bold; }
.ui-language-panel button:hover { background: #eee; }
.ui-language :focus-visible { outline: 3px solid #245fe9; outline-offset: 2px; }

/* On a phone the language button is the first thing on its wrapped row,
   hard against the LEFT edge. The panel is anchored to the button's right
   edge (inset-inline-end), so a 300px panel hung ~200px off the left of the
   screen and the first letters of every language were cut off. Anchor it to
   the button's left edge instead, and never wider than the screen. */
@media (max-width: 760px) {
  /* The button is not at a predictable x on a wrapped row, so no anchor to it
     can be safe. Make the nav row the containing block and span it. */
  .ui-language { position: static; }
  .ui-language-panel { inset-inline-start: 0; inset-inline-end: 0; width: auto; }
}