/* The language menu: a plain <details>, so it works without a script. Only brands with a language switched on
   load this file. Colours come from the template's own variables, with something readable if it has none. */
.lang-menu { position: relative; display: inline-block; font-size: 13px; line-height: 1.4; }
.lang-menu > summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; cursor: pointer; list-style: none; white-space: nowrap; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary::after { content: "▾"; opacity: .6; }
.lang-menu > ul { position: absolute; z-index: 1000; inset-inline-end: 0; margin: 4px 0 0; padding: 4px; min-width: 160px; list-style: none;
  background: var(--surface, var(--panel, var(--bg, #fff))); color: var(--ink, var(--text, #111)); border: 1px solid var(--line, var(--border, rgba(127,127,127,.4))); }
.lang-menu > ul a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; color: inherit; text-decoration: none; white-space: nowrap; }
.lang-menu > ul a:hover, .lang-menu > ul a:focus-visible { background: rgba(127,127,127,.18); }
.lang-menu > ul a[aria-current] { font-weight: 600; }
.lang-menu .wz-flag { font-size: 16px; }
.lang-corner { position: fixed; z-index: 1000; inset-block-end: 12px; inset-inline-end: 12px; border-radius: 6px;
  background: var(--surface, var(--panel, var(--bg, #fff))); color: var(--ink, var(--text, #111)); border: 1px solid var(--line, var(--border, rgba(127,127,127,.4))); }
.lang-corner .lang-menu > ul { inset-block-end: 100%; margin: 0 0 4px; }
/* On a phone the menu shrinks to its flag, so it fits a template's narrowest strip. */
@media (max-width: 640px) {
  .lang-menu > summary { padding: 2px 4px; gap: 3px; }
  .lang-menu .lang-name { display: none; }
}

/* Arabic and Chinese use the fonts of the reader's own system: the sites' web fonts have no such letters, and a Chinese
   web font would be megabytes. Arabic's letters join, so spacing between them breaks the words, and tall headings need room. */
:lang(ar) body, :lang(ar) body * { letter-spacing: 0 !important; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { line-height: 1.35; }
:lang(ar) em, :lang(ar) i, :lang(ar) cite, :lang(zh) em, :lang(zh) i, :lang(zh) cite { font-style: normal; }
/* Written left to right whatever the page does: charts, whose time runs that way, and server names and addresses, which
   would otherwise have their punctuation thrown to the wrong end. */
[dir="rtl"] svg, [dir="rtl"] canvas { direction: ltr; }
[dir="rtl"] a[href*="/servers/"], [dir="rtl"] code, [dir="rtl"] kbd, [dir="rtl"] input:not([type="search"]) { unicode-bidi: plaintext; }
/* Every other language runs longer than the English these bars were drawn for. A menu wraps to a second line rather than push
   the search and the theme button off the window, where body's sideways clip would put them out of reach. */
html:not(:lang(en)) :is(.nav-links, .lb-nav, .ob-nav, .hp-nav, .bc-nav, .tm-keys-in, .ck-keys) { flex-wrap: wrap; min-width: 0; }
html:not(:lang(en)) .nb-tools { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
@media (max-width: 480px) { html:not(:lang(en)) .ck-brand { flex: 0 1 auto; min-width: 0; } html:not(:lang(en)) .ck-brand-text, html:not(:lang(en)) .ck-brand-text > * { min-width: 0; white-space: normal; letter-spacing: .06em; } }