/* The language button (dev/languages.mjs puts it on each page). */
.lang { position: relative; display: inline-flex; flex: none; }
.lang__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 10px; border: 1px solid var(--ink); background: var(--paper-2); color: var(--ink); cursor: pointer; list-style: none; user-select: none;
  font: 400 12px/1 var(--pixel); letter-spacing: var(--pixel-tracking); word-spacing: var(--pixel-word-spacing); text-transform: uppercase; }
.lang__btn::-webkit-details-marker { display: none; }
.lang__btn svg { width: 15px; height: 15px; flex: none; }
.lang__btn:hover, .lang[open] .lang__btn { background: var(--ink); color: var(--paper-2); }
.lang__list { position: absolute; z-index: 60; top: calc(100% + 6px); inset-inline-end: 0; width: 210px; max-height: min(70vh, 460px); overflow-y: auto; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--ink); background: var(--paper-2); box-shadow: 4px 4px 0 var(--shadow); }
.lang .lang__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 6px 10px; color: var(--ink); text-decoration: none; text-transform: none;
  font: 400 15px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; word-spacing: 0; }
.lang .lang__list a i { font: 400 10px/1 var(--pixel); letter-spacing: var(--pixel-tracking); word-spacing: var(--pixel-word-spacing); opacity: .65; }
.lang .lang__list a:hover, .lang .lang__list a:focus-visible { background: rgb(0 0 0 / .08); color: var(--ink); }
.lang .lang__list a[aria-current] { background: var(--ink); color: var(--paper-2); }

/* Home, top bar: left of the star button on wide screens; globe only where the bar is tight. */
.nav__end { align-items: center; gap: 8px; }
.nav__end .lang { display: none; }
@media (min-width: 920px) { .nav__end .lang { display: inline-flex; margin-inline-start: 8px; } }
@media (min-width: 920px) and (max-width: 1099px) { .nav__end .lang__code { display: none; } }
/* Home, phone menu: last row, the list opens in place. */
.nav__lang { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; min-height: 48px; padding: 5px 6px 5px 14px; border-top: 1px solid var(--line, #8b8c87); font-size: 16px; }
.nav__lang .lang { display: contents; }
.nav__lang .lang__list { position: static; flex: 0 0 100%; width: auto; max-height: none; border-width: 1px 0 0; border-color: var(--line, #8b8c87); box-shadow: none; padding: 4px 0 0; }
/* News: the button ends the link row. Privacy: right end of the header. 404: top corner. */
.news-links .lang { margin-inline-start: auto; }
.docs-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page > .lang { position: absolute; top: 16px; inset-inline-end: 16px; }

/* Scripts whose letters join or stack: no extra spacing between letters. */
:root:is([lang="ar"], [lang="hi"]) { --pixel-tracking: 0; }
:root:is([lang="ar"], [lang="hi"]) body :is(*, *::before, *::after) { letter-spacing: 0 !important; }
/* Code and addresses read left to right in every language. */
[dir="rtl"] :is(pre, code, kbd) { direction: ltr; unicode-bidi: isolate; }

/* Translated pages: words run longer, so the top bar keeps the Menu button until the screen is wide. */
@media (min-width: 920px) and (max-width: 1279px) {
  :root:not([lang="en"]) .nav__links, :root:not([lang="en"]) .nav__end .lang { display: none; }
  :root:not([lang="en"]) .nav__toggle:not([hidden]) { display: inline-flex; }
  :root:not([lang="en"]) .nav__compact:not([hidden]) { display: block; }
}
:root:not([lang="en"]) .faq__copy .box { white-space: normal; padding-block: 8px; line-height: 1.3; }
/* The hidden form field sits off the far side, so a right-to-left page gets no sideways scroll. */
[dir="rtl"] .hp { left: auto; right: -9999px; }
@media (max-width: 399px) { :root:not([lang="en"]) .nav .box { padding-inline: 7px; } }
/* Translated buttons and labels may take a second line instead of running out of their box. */
:root:not([lang="en"]) main .box { white-space: normal; text-align: center; line-height: 1.25; padding-block: 6px; }
:root:not([lang="en"]) main :is(small, dd, dt, h2, h3, p, li) { overflow-wrap: anywhere; }
:root:not([lang="en"]) .stats dt { white-space: normal; }
:root:not([lang="en"]) main .box { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 399px) { :root:not([lang="en"]) main .box:not(.box--lg) { padding-inline: 9px; } }

/* Roadmap and What's new: the button sits in the top strip, right after the back link (public/page-words.js moves the link in). */
.site-left { position: fixed; top: 6px; inset-inline-start: 8px; z-index: 31; display: flex; align-items: stretch; gap: 6px; visibility: hidden;
  --paper-2: var(--paper); --pixel: "FK Raster", monospace; --pixel-word-spacing: .3em; }
.site-left.is-ready { visibility: visible; }
.site-left[hidden] { display: none; }
.site-left .site-back { position: static; white-space: nowrap; }
.site-left .lang__btn { min-height: 0; padding: 4px 7px; border-width: 1.5px; gap: 5px; font-size: 9px; }
.site-left .lang__btn svg { width: 9px; height: 9px; }
.site-left .lang__list { inset-inline: 0 auto; }
.site-notify { max-width: calc(100vw - 140px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 479px) { .site-left .lang__code { display: none; } }
[dir="rtl"] .site-notify { right: auto; left: 8px; }