/*
 * Language switcher — shared, framework-free styles.
 * Uses each page's own CSS custom properties with safe fallbacks so it inherits
 * the host page's palette (docs/pricing/register use --line/--ink/--surface). Logical properties
 * keep it RTL-ready. The playground/onboarding/stats/cases pages this also served were deleted
 * with the v1 console in Wave B.
 */
.i18n-switcher {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
  padding: 2px;
  max-width: 100%;
  border: 1px solid var(--line, #d8dee9);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface, var(--panel, #fff));
}

.i18n-lang-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 5px 9px;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--ink-soft, #5b6b82);
  cursor: pointer;
}

.i18n-lang-btn:hover {
  color: var(--ink, #1c2733);
  background: var(--accent-tint, var(--panel-muted, rgba(0, 0, 0, 0.05)));
}

/*
 * The SELECTED language must be readable, so the fill is --brand (#0369a1), NOT --accent. Every
 * consumer of this file is a docs page where --accent is the bright sky #38bdf8, and white on that
 * is 2.14:1 — a WCAG AA failure on the one control whose whole job is to show which language is
 * active. --brand is the deep, white-text-safe end of the same ramp: 5.93:1. The former
 * `var(--indigo, #3b5bdb)` fallback chain is gone with the v1 palette — nothing defines --indigo.
 */
.i18n-lang-btn[aria-pressed="true"] {
  color: #fff;
  background: var(--brand, #0369a1);
}

.i18n-lang-btn:focus-visible {
  outline: 2px solid var(--brand, #0369a1);
  outline-offset: 1px;
}