/*
 * 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 (playground/onboarding/docs use --line/--ink/--surface;
 * stats/cases use --line/--ink/--panel). Logical properties keep it RTL-ready.
 */
.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)));
}

.i18n-lang-btn[aria-pressed="true"] {
  color: #fff;
  background: var(--accent, var(--indigo, #3b5bdb));
}

.i18n-lang-btn:focus-visible {
  outline: 2px solid var(--accent, var(--indigo, #3b5bdb));
  outline-offset: 1px;
}