/*!
 * Romuralli — language selector + i18n notices (i18n.css)
 * ---------------------------------------------------------------------------
 * Deliberately tiny and self-contained. It reuses the pages' existing custom
 * properties (--line, --muted, --copper-light, --text, --card) and falls back to
 * literal values so the file is also correct on a page that has not defined
 * them. No @import, no font, no external URL — the live host is PHP-only and the
 * site has no build step.
 *
 * WHY THE SELECTOR IS SMALL AND QUIET
 * Perceived visual complexity was the single largest first-impression lever in
 * a manipulated lab experiment — RP-000020 (B2), p. 14 (complexity main effect
 * partial eta-squared = .581) — and an independent 450-site model reproduced it
 * (RP-000117 (C1), p. 7). Five extra links in the primary nav would buy a
 * language switcher at the cost of the thing the whole page is judged on in
 * 17 ms. So the selector is a separate, low-weight strip in the conventional
 * top position (RP-000211 (D1), p. 317-319: logo and top navigation are fixated
 * within roughly the first four fixations, with a top-left bias).
 *
 * WHY IT IS NOT A <select>
 * A collapsed dropdown hides four of the five, and hiding the next step reads as
 * untrustworthy — RP-000071 (D1), p. 413. Links are also the only form that
 * works with JavaScript disabled.
 *
 * FLAGS ONLY (owner decision 2026-07-26, DECISIONS.md "gh")
 * The strip shows five inline-SVG flags and no words. Two consequences this file
 * has to pay for, because a flag is a weaker control than a labelled link:
 *   1. A flag gives NO hover/press affordance of its own, so the control (not
 *      the artwork) has to look interactive — hence the padded, rounded hit box
 *      with a hover background.
 *   2. "Which one am I on?" cannot be answered by weight or an underline any
 *      more. Non-current flags are dimmed AND the current one carries a ring, so
 *      the state is never colour-only — RP-000200 (D2), p. 2;
 *      RP-000202 (B2), p. 1276 Table 1. aria-current="true" carries the same
 *      information to assistive tech, and the endonym lives in aria-label.
 * The markup is emitted by scripts/build_i18n_pages.js — see langbarHtml() there
 * for why the accessible name is mandatory even though the visual is flags-only.
 *
 * TAP TARGETS
 * 44x44 CSS px minimum on every flag; 48 px on the suggestion banner's controls.
 * RP-000125 (B2), p. 207, p. 210: one-handed thumb error rate stops improving at
 * ~9.6 mm and the authors recommend >= 9.2 mm discrete / >= 9.6 mm serial. Five
 * small flags in a row is exactly the layout that produces mis-taps, so the
 * PADDING does the work and the 24x16 artwork is never the target. The paper's
 * threshold is in PHYSICAL millimetres, which CSS pixels only approximate —
 * noted rather than overclaimed. Caveat the paper states itself: 2006 resistive
 * PDA, N = 20, all right-handed, stationary.
 *
 * TEXT EXPANSION
 * Nothing here has a fixed height and nothing truncates. The flags are
 * language-independent, so the strip no longer changes width with the locale —
 * but the rule still holds for the notices below, where ru/uk/et run longer.
 */

.langbar {
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, .08));
}

.langbar__list {
  display: flex;
  flex-wrap: wrap;                 /* never a horizontal scroll on a narrow phone */
  align-items: center;
  /* RIGHT-ALIGNED ON PURPOSE. The bar sits above <header> and spans the full
     width, so with left alignment the top-left-most rendered pixel on every page
     belonged to the language switcher — and eye-tracking puts the logo and top
     navigation inside roughly the first four fixations with a top-left bias
     (RP-000211 (D1), p. 316-320). index.html's own header note raised this twice
     as an unresolved escalation. Flags are compact enough to move to the trailing
     edge without becoming hard to find, which returns the top-left origin to the
     brand while keeping the switcher in the conventional top strip. */
  justify-content: flex-end;
  gap: 2px 4px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
  max-width: 1200px;
  list-style: none;
}

.langbar__item { margin: 0; }

.langbar__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;                /* RP-000125 (B2), p. 207, p. 210 */
  border-radius: 8px;
  text-decoration: none;
  /* A flag alone offers no affordance, so the CONTROL is what reacts. */
  transition: background-color .12s ease;
}

.langbar__link:hover {
  background: rgba(255, 255, 255, .10);
}

.langbar__flag {
  width: 24px;
  height: 16px;
  display: block;
  flex: none;
  border-radius: 2px;
  /* A white-heavy flag (fi, ru) has no edge against a light surface. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
  /* Dimming is HALF of the current-language cue; the ring below is the other
     half, so the state never depends on colour or opacity alone. */
  opacity: .55;
  transition: opacity .12s ease;
}

.langbar__link:hover .langbar__flag,
.langbar__link:focus-visible .langbar__flag { opacity: 1; }

.langbar__link.is-current .langbar__flag {
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35),
              0 0 0 2px var(--copper-light, #e6a26a);
}

.langbar__link:focus-visible {
  outline: 2px solid var(--copper-light, #e6a26a);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .langbar__link, .langbar__flag { transition: none; }
}

/* Windows high-contrast / forced-colors drops box-shadow, which would leave the
   current language with no indicator at all. Restore it as a real border, and
   stop the OS flattening the flag artwork to two colours. */
@media (forced-colors: active) {
  .langbar__link.is-current { border: 2px solid CanvasText; }
  .langbar__flag { opacity: 1; forced-color-adjust: none; }
}

/* --------------------------------------------------------------------------
 * Language suggestion (built by i18n.js; absent with JS off).
 * A SUGGESTION, never a redirect: it offers a link and can be dismissed. It
 * never overrides a choice the visitor made, and it can never loop.
 * -------------------------------------------------------------------------- */
.lang-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px clamp(16px, 4vw, 48px);
  background: var(--card, rgba(255, 255, 255, .04));
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, .08));
  font-size: 0.85rem;
}

.lang-hint__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 4px 10px;
  color: var(--copper-light, #e6a26a);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The offered language's flag, so the banner is recognisable before it is read.
   Never dimmed and never the only cue — the endonym is right next to it. */
.lang-hint__flag { display: inline-flex; flex: none; }
.lang-hint__flag .langbar__flag {
  width: 22px;
  height: 15px;
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}

.lang-hint__close {
  min-width: 48px;
  min-height: 48px;
  padding: 0 10px;
  background: none;
  border: 0;
  color: var(--muted, #9aa3b2);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.lang-hint__close:hover { color: var(--text, #eef2f7); }

.lang-hint__link:focus-visible,
.lang-hint__close:focus-visible {
  outline: 2px solid var(--copper-light, #e6a26a);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * Partial-translation notice (emitted by the generator only while a locale page
 * still falls back to Finnish for some strings; it disappears at 100%).
 * Saying so plainly is the honest option: an untranslated page is an access
 * gate, not a cosmetic gap — RP-000223 (D1), p. 4, where an untranslated page
 * blocked 27 of 30 participants (90%) from completing a task in the time limit.
 * -------------------------------------------------------------------------- */
.i18n-partial {
  margin: 0;
  padding: 10px clamp(16px, 4vw, 48px);
  background: rgba(230, 162, 106, .10);
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, .08));
  color: var(--text, #eef2f7);
  font-size: 0.85rem;
  line-height: 1.5;
}

.i18n-partial__count { color: var(--muted, #9aa3b2); }

/* --------------------------------------------------------------------------
 * Neutral route (/lang/). Plain, high-contrast, no branding dependency: it must
 * be usable by someone who has landed on a site in a language they cannot read.
 * -------------------------------------------------------------------------- */
.lang-picker { max-width: 640px; margin: 0 auto; padding: 40px 20px; }
.lang-picker h1 { font-size: 1.4rem; margin: 0 0 8px; }
.lang-picker p { color: var(--muted, #9aa3b2); margin: 0 0 24px; font-size: 0.95rem; }
.lang-picker ul { list-style: none; margin: 0; padding: 0; }
.lang-picker li { margin: 0 0 10px; }

.lang-picker a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;                /* comfortably above the 48px floor */
  padding: 10px 16px;
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
  border-radius: 12px;
  color: var(--text, #eef2f7);
  text-decoration: none;
  font-size: 1.05rem;
}

/* The picker keeps the endonym as TEXT (see langRouteHtml) — the flag is only an
   anchor for it. So the flag is never dimmed here and is never the only cue. */
.lang-picker .langbar__flag {
  width: 30px;
  height: 20px;
  flex: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
  opacity: 1;
}

.lang-picker a:hover { border-color: var(--copper-light, #e6a26a); }
.lang-picker a:focus-visible {
  outline: 2px solid var(--copper-light, #e6a26a);
  outline-offset: 2px;
}