/* ==========================================================================
   POM - language switching, shared by the landing page and by /v1.

   Both languages ship inside the HTML. Only the visibility changes, and it
   changes in CSS, so the page is complete and readable with JavaScript off.
   Portuguese is the base: with no [data-lang] on the root, pt-BR is what
   shows. i18n.js only sets the attribute and remembers the choice.
   ========================================================================== */

:root:not([data-lang="en"]) .t-en { display: none !important; }
:root[data-lang="en"]       .t-pt { display: none !important; }

/* ------------------------------ the switch -------------------------------
   Two flags in one pill. Sits in the topbar and again in the footer, so the
   reader never has to scroll back up to change language. */

.langs {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-solid);
}

.lang {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px 4px 5px;
  border: 0; border-radius: 999px;
  background: none; color: var(--ink-3);
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lang img {
  width: 17px; height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--line-soft);
  opacity: .55;
  transition: opacity .15s ease;
}
.lang:hover { color: var(--ink); }
.lang:hover img { opacity: .85; }

.lang[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}
.lang[aria-pressed="true"] img { opacity: 1; }

/* No JavaScript means no working switch, so do not advertise one. */
.no-js .langs { display: none; }