/* Language switcher, shared by the landing and the docs. It takes its colour
   from where it sits, so it fits any header or footer. */
.lang { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 800; line-height: 1; }
.lang a { color: inherit !important; text-decoration: none !important; opacity: .62; padding: 5px 7px; border-radius: 999px; }
.lang a:hover, .lang a:focus-visible { opacity: 1; }
.lang a[aria-current] { opacity: 1; box-shadow: inset 0 0 0 1.5px currentColor; }
/* Japanese: break lines between phrases, not inside words. */
html:lang(ja) body { line-break: strict; word-break: auto-phrase; }

/* Where it sits */
.top .lang { margin-left: 4px; }
.eyebrow .lang { float: right; margin-top: -5px; letter-spacing: 0; }
.topbar .lang { margin-left: auto; }
@media (min-width: 1001px) { .topbar nav ~ .lang { margin-left: 0; } }
.topbar:not(.scrolled) .lang { color: var(--maroon); }
@media (max-width: 520px) { .top .lang { display: none; } }