/* Site-wide language toggle. Shared by every page, because the first version of this lived
inline in the homepage alone: the switcher worked there, and every page behind it was a
dead end — Tunto's pages were English-only, Ennakko's were Ukrainian-only, and a visitor
who picked a language on the front door lost it on the next tap.
Both languages ship in the markup and CSS hides one, rather than JavaScript rewriting text.
The copy stays in the HTML where it can be read, diffed and indexed, and there is no moment
where the page sits empty waiting for a script.
Scoped under `body`, not `[lang]` at large: the script moves the document's own `lang` to
"uk", so a bare `[lang="uk"] { display:none }` would match `` itself and blank the page.
Hiding only — never a `display` to restore. A visible pair keeps whatever display it already
had, so a `` stays a block and an `
` a list-item without this file knowing about either.
The corollary: never put `lang` on an element the page styles with its own `display` (a flex
masthead, a grid card). Tag the text inside it instead. */
html:not(.uk) body [lang="uk"] { display: none; }
html.uk body [lang="en"] { display: none; }
/* The switcher is two buttons rather than a dropdown: with exactly two languages a select hides
one of them behind a tap, and the whole control is narrower than the word "Language". */
.langs {
display: flex; gap: 2px; padding: 3px; flex: 0 0 auto;
border: 1px solid var(--line); border-radius: 999px;
}
.langs button {
appearance: none; border: 0; background: transparent; cursor: pointer;
font: 600 13px/1 inherit; letter-spacing: .02em;
color: var(--ink-faint, var(--ink3, currentColor));
padding: 7px 11px; border-radius: 999px;
}
.langs button:hover { color: var(--ink); }
/* Ink-on-page-colour by default, which every palette here passes at AA without this file
needing to know the page's accent. The homepage overrides it back to its pink. */
.langs button[aria-pressed="true"] {
background: var(--lang-on-bg, var(--ink));
color: var(--lang-on-ink, var(--bg));
}
.langs button:focus-visible {
outline: 2px solid var(--accent-ink, var(--ink));
outline-offset: 2px;
}
/* Pages whose title row is the brand itself (the two app pages) have nowhere to put the
switcher inline, so it gets its own right-aligned row above the title. */
.i18n-bar { display: flex; justify-content: flex-end; margin: 0 0 18px; }
/* Where a page already has a brand row, the switcher joins it instead — the same
brand-left / language-right shape as the homepage. */
.masthead .langs { margin-left: auto; }