/* ============ i18n language switcher (Sayso landing, 2026-05-22) ============
   Mounted into .nav-cta-group on desktop / .nav-cta parent on mobile by _i18n.js.
   Kept in its own file so both index.html (which loads _base.css) and m.html
   (which has its own inline CSS and does NOT import _base.css) can pick up the
   styling via a single `<link>` — without this file, m.html rendered the
   dropdown unstyled, which let all 7 language buttons stack inline in the
   header, breaking the mobile nav.
   ============================================================================ */
.i18n-switcher {
  position: relative;
  margin-right: 12px;
}
.i18n-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-900, #1f1d2b);
  background: transparent;
  border: 1px solid var(--paper-200, #e8e4dc);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.i18n-switcher-btn:hover {
  background: var(--paper-50, #f7f5f1);
  border-color: var(--paper-300, #d8d2c6);
}
.i18n-switcher-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--paper-200, #e8e4dc);
  border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,.12);
  padding: 6px;
  z-index: 100;
  /* Default hidden. `.open` class wins (same selector specificity,
     latter rule wins). Earlier version relied on the [hidden] HTML
     attribute, but `display: flex` on the class beat the UA
     `[hidden] { display: none }` rule, so the menu never collapsed.
     Without `display: none` here m.html (which lacks our flex rule
     via _base.css) renders the 7 buttons inline in the header. */
  display: none;
  flex-direction: column;
}
.i18n-switcher-menu.open {
  display: flex;
}

/* Mobile (≤720px): center the switcher pill on the TRUE horizontal
   axis of the nav, not the leftover-space midpoint that flex
   `justify-content: space-between` would give it.
   With a 3-child flex (wordmark · switcher · CTA) the middle child
   sits wherever the remaining space puts it — and because the CTA
   ("Download ↗") is much wider than the wordmark, the switcher
   ended up visibly off-center. On iPhones with Dynamic Island that
   misalignment reads as obviously wrong because the DI defines a
   strong centered visual axis right above the nav.
   Fix: pull the switcher out of the flex flow with `position:
   absolute` and center it relative to .nav-inner (which we mark
   position: relative). wordmark and CTA then reflow as if the
   switcher weren't there — space-between gives them their original
   left/right anchoring back, restoring the wordmark-left look. */
@media (max-width: 720px) {
  .nav-inner {
    position: relative;
  }
  .i18n-switcher {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
  .i18n-switcher-menu {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
  }
}
.i18n-option {
  text-align: left;
  padding: 8px 12px;
  font-family: var(--ff-sans, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-900, #1f1d2b);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.i18n-option:hover { background: var(--paper-50, #f7f5f1); }
.i18n-option.active {
  background: var(--ember-500, #d97757);
  color: #fff;
}