/* switcher.css — language picker fixed top-right.
 * 12 pills, 2-letter ISO labels. Click navigates to /{lang}/{currentSlug}/.
 * Active pill is filled. Hover state on inactive pills only. */

.lang-switch {
  position: fixed;
  top: var(--space-2, 1rem);
  right: var(--space-2, 1rem);
  z-index: 60;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* mix-blend-mode: difference helps the pills sit on any page bg without re-styling */
  mix-blend-mode: difference;
  color: oklch(0.96 0.005 80);
}
.lang-switch__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
  max-width: 240px;
}
.lang-switch__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  padding: 0.32em 0.55em;
  text-decoration: none;
  color: inherit;
  opacity: 0.55;
  transition: opacity 200ms cubic-bezier(0.25, 1, 0.5, 1);
  border: 1px solid transparent;
}
.lang-switch__pill:hover { opacity: 1; }
.lang-switch__pill:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.lang-switch__pill--active {
  opacity: 1;
  border-color: currentColor;
  cursor: default;
  pointer-events: none;
}

/* RTL: switcher stays top-right but pills naturally align right-to-left thanks to flex-end */
[dir="rtl"] .lang-switch__inner { justify-content: flex-end; }

/* On small screens make pills slightly smaller so all 12 fit */
@media (max-width: 540px) {
  .lang-switch__inner { max-width: 200px; gap: 1px; }
  .lang-switch__pill { min-width: 1.6rem; padding: 0.26em 0.4em; font-size: 0.65rem; }
}

/* Avoid overlap with the .crumb breadcrumb (top-left). On profile pages the
 * crumb anchors top-left so the switcher's top-right slot is always free. */