/* Language machinery: switcher, footer language list, AI note, "Live AI Translation" badge.
   HEXART: codes in Barlow Condensed caps, Graphite panel with a Slate hairline and a chamfered corner
   (hx-chamfer classes from hexart.css, set in the markup),
   gold only as accent (current language, badge line), motion 200 ms with the entry curve, reduced motion respected. */

/* Switcher */
.vf-langsw {
  position: relative;
}

.vf-langsw__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--hx-space-1);
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--hx-space-2);
  color: var(--hx-fg-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color var(--hx-duration-fast) var(--hx-ease-enter);
}

.vf-langsw__toggle[aria-expanded="true"] {
  color: var(--hx-fg);
}

.vf-langsw__toggle:focus-visible {
  color: var(--hx-fg);
  outline: var(--hx-border-focus) solid var(--hx-focus);
  outline-offset: var(--hx-border-focus-offset);
}

@media (hover: hover) and (pointer: fine) {
  .vf-langsw__toggle:hover {
    color: var(--hx-fg);
  }
}

.vf-langsw__code {
  font-family: var(--hx-font-condensed);
  font-size: 0.875rem;
  font-weight: var(--hx-weight-semibold);
  letter-spacing: var(--hx-tracking-caps-tight);
}

.vf-langsw__chevron {
  width: 12px;
  height: 12px;
  transition: transform var(--hx-duration-fast) var(--hx-ease-enter);
}

.vf-langsw__toggle[aria-expanded="true"] .vf-langsw__chevron {
  transform: rotate(180deg);
}

.vf-langsw__list {
  position: absolute;
  top: calc(100% + var(--hx-space-2));
  inset-inline-end: 0;
  z-index: var(--hx-z-drawer);
  display: grid;
  grid-template-columns: repeat(2, minmax(10rem, 1fr));
  gap: 0 var(--hx-space-2);
  width: max-content;
  max-width: min(36rem, calc(100vw - 2rem));
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  margin: 0;
  padding: var(--hx-space-2);
  list-style: none;
  background-color: var(--hx-surface);
  border: var(--hx-border-hairline) solid var(--hx-line);
  box-shadow: var(--hx-shadow-md);
  animation: vf-langsw-in var(--hx-duration-fast) var(--hx-ease-enter) both;
}

.vf-langsw__list[hidden] {
  display: none;
}

.vf-langsw__item {
  display: flex;
  align-items: center;
  gap: var(--hx-space-3);
  min-height: 44px;
  padding: 0 var(--hx-space-3);
  color: var(--hx-fg-muted);
  text-decoration: none;
  border-inline-start: var(--hx-border-hairline) solid transparent;
}

.vf-langsw__item:focus-visible {
  color: var(--hx-fg);
}

@media (hover: hover) and (pointer: fine) {
  .vf-langsw__item:hover {
    color: var(--hx-fg);
  }
}

.vf-langsw__item[aria-current="true"] {
  color: var(--hx-fg);
  border-inline-start-color: var(--hx-accent);
}

.vf-langsw__icode {
  width: 2.6rem;
  flex: none;
  font-family: var(--hx-font-condensed);
  font-size: 0.8125rem;
  font-weight: var(--hx-weight-semibold);
  letter-spacing: var(--hx-tracking-caps-tight);
  color: var(--hx-accent-text);
}

.vf-langsw__name {
  font-size: var(--hx-text-small);
  white-space: nowrap;
}

@keyframes vf-langsw-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 420px) {
  .vf-langsw__list {
    grid-template-columns: 1fr;
  }
}

/* Footer language list: every language as a plain link, current one marked in gold. */
.vf-langlist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hx-space-1) var(--hx-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--hx-text-small);
}

.vf-langlist a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--hx-fg-muted);
  text-decoration: none;
  transition: color var(--hx-duration-fast) var(--hx-ease-enter);
}

.vf-langlist a:focus-visible {
  color: var(--hx-fg);
}

@media (hover: hover) and (pointer: fine) {
  .vf-langlist a:hover {
    color: var(--hx-fg);
  }
}

.vf-langlist a[aria-current="true"] {
  color: var(--hx-accent-text);
}

.vf-ainote {
  margin: 0;
  font-size: var(--hx-text-small);
  color: var(--hx-fg-muted);
}

/* Badge while machine translations are on their way. */
.vf-i18n-pending {
  position: fixed;
  inset-inline-start: max(var(--hx-space-4), env(safe-area-inset-left, 0px));
  bottom: calc(var(--hx-space-4) + env(safe-area-inset-bottom, 0px));
  z-index: var(--hx-z-toast);
  max-width: calc(100vw - 2 * var(--hx-space-4));
  pointer-events: none;
  animation: vf-i18n-in var(--hx-duration-base) var(--hx-ease-enter) both;
}

.vf-i18n-pending__box {
  --hx-chamfer-edge: var(--hx-line-accent);
  display: flex;
  align-items: center;
  gap: var(--hx-space-3);
  min-height: 56px;
  padding: var(--hx-space-3) var(--hx-space-4);
  color: var(--hx-fg);
  background-color: var(--hx-surface);
  border: var(--hx-border-hairline) solid var(--hx-line-accent);
}

.vf-i18n-pending__copy {
  display: grid;
  gap: 2px;
}

.vf-i18n-pending__brand {
  color: var(--hx-accent-text);
  font-family: var(--hx-font-condensed);
  font-size: 0.875rem;
  font-weight: var(--hx-weight-semibold);
  letter-spacing: var(--hx-tracking-caps);
  text-transform: uppercase;
}

.vf-i18n-pending__status {
  font-family: var(--hx-font-sans);
  font-size: 1rem;
  line-height: 1.4;
}

.vf-i18n-pending__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--hx-accent);
  animation: vf-i18n-pulse var(--hx-duration-cinematic) var(--hx-ease-standard) infinite alternate;
}

@keyframes vf-i18n-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes vf-i18n-pulse {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

@media (max-width: 639.98px) {
  .vf-i18n-pending {
    top: calc(80px + env(safe-area-inset-top, 0px));
    bottom: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vf-langsw__list,
  .vf-i18n-pending,
  .vf-i18n-pending__dot {
    animation: none;
  }

  .vf-langsw__toggle,
  .vf-langsw__chevron,
  .vf-langlist a {
    transition: none;
  }
}

/* 49 languages: three columns where there is room. */
@media (min-width: 760px) {
  .vf-langsw__list {
    grid-template-columns: repeat(3, minmax(10rem, 1fr));
  }
}

/* Scripts beyond Latin. Outfit and Barlow have Latin only, so each script gets the best system face after them
   (Latin names and digits inside the text stay in the brand fonts). Unlayered, so these win over hexart.css. */
html:lang(ar), html:lang(fa) {
  --hx-font-sans: "Outfit", "Segoe UI", "Noto Sans Arabic", "Geeza Pro", "Tahoma", sans-serif;
  --hx-font-condensed: "Barlow Condensed", "Segoe UI", "Noto Sans Arabic", "Geeza Pro", "Tahoma", sans-serif;
}
html:lang(ur) {
  --hx-font-sans: "Outfit", "Noto Nastaliq Urdu", "Urdu Typesetting", "Segoe UI", "Noto Sans Arabic", sans-serif;
  --hx-font-condensed: "Barlow Condensed", "Noto Nastaliq Urdu", "Urdu Typesetting", "Segoe UI", "Noto Sans Arabic", sans-serif;
}
html:lang(he) {
  --hx-font-sans: "Outfit", "Segoe UI", "Arial Hebrew", "Noto Sans Hebrew", sans-serif;
  --hx-font-condensed: "Barlow Condensed", "Segoe UI", "Arial Hebrew", "Noto Sans Hebrew", sans-serif;
}
html:lang(zh) {
  --hx-font-sans: "Outfit", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --hx-font-condensed: "Barlow Condensed", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;
}
html:lang(zh-tw) {
  --hx-font-sans: "Outfit", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", "Source Han Sans TC", sans-serif;
  --hx-font-condensed: "Barlow Condensed", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", sans-serif;
}
html:lang(ja) {
  --hx-font-sans: "Outfit", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --hx-font-condensed: "Barlow Condensed", "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans JP", sans-serif;
}
html:lang(ko) {
  --hx-font-sans: "Outfit", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif;
  --hx-font-condensed: "Barlow Condensed", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}
html:lang(hi), html:lang(mr) {
  --hx-font-sans: "Outfit", "Nirmala UI", "Kohinoor Devanagari", "Noto Sans Devanagari", "Mangal", sans-serif;
  --hx-font-condensed: "Barlow Condensed", "Nirmala UI", "Kohinoor Devanagari", "Noto Sans Devanagari", sans-serif;
}
html:lang(bn) {
  --hx-font-sans: "Outfit", "Nirmala UI", "Kohinoor Bangla", "Noto Sans Bengali", "Vrinda", sans-serif;
  --hx-font-condensed: "Barlow Condensed", "Nirmala UI", "Kohinoor Bangla", "Noto Sans Bengali", sans-serif;
}
html:lang(gu) {
  --hx-font-sans: "Outfit", "Nirmala UI", "Gujarati Sangam MN", "Noto Sans Gujarati", "Shruti", sans-serif;
  --hx-font-condensed: "Barlow Condensed", "Nirmala UI", "Gujarati Sangam MN", "Noto Sans Gujarati", sans-serif;
}
html:lang(pa) {
  --hx-font-sans: "Outfit", "Nirmala UI", "Gurmukhi MN", "Noto Sans Gurmukhi", "Raavi", sans-serif;
  --hx-font-condensed: "Barlow Condensed", "Nirmala UI", "Gurmukhi MN", "Noto Sans Gurmukhi", sans-serif;
}
html:lang(ta) {
  --hx-font-sans: "Outfit", "Nirmala UI", "Tamil Sangam MN", "Noto Sans Tamil", "Latha", sans-serif;
  --hx-font-condensed: "Barlow Condensed", "Nirmala UI", "Tamil Sangam MN", "Noto Sans Tamil", sans-serif;
}
html:lang(te) {
  --hx-font-sans: "Outfit", "Nirmala UI", "Kohinoor Telugu", "Noto Sans Telugu", "Gautami", sans-serif;
  --hx-font-condensed: "Barlow Condensed", "Nirmala UI", "Kohinoor Telugu", "Noto Sans Telugu", sans-serif;
}
html:lang(kn) {
  --hx-font-sans: "Outfit", "Nirmala UI", "Kannada Sangam MN", "Noto Sans Kannada", "Tunga", sans-serif;
  --hx-font-condensed: "Barlow Condensed", "Nirmala UI", "Kannada Sangam MN", "Noto Sans Kannada", sans-serif;
}
html:lang(ml) {
  --hx-font-sans: "Outfit", "Nirmala UI", "Malayalam Sangam MN", "Noto Sans Malayalam", "Kartika", sans-serif;
  --hx-font-condensed: "Barlow Condensed", "Nirmala UI", "Malayalam Sangam MN", "Noto Sans Malayalam", sans-serif;
}
html:lang(th) {
  --hx-font-sans: "Outfit", "Leelawadee UI", "Thonburi", "Noto Sans Thai", "Tahoma", sans-serif;
  --hx-font-condensed: "Barlow Condensed", "Leelawadee UI", "Thonburi", "Noto Sans Thai", sans-serif;
}
/* Vietnamese stacks several diacritics on one letter: one system face for the whole word, no mixing with Outfit. */
html:lang(vi) {
  --hx-font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", "Noto Sans", "Arial", sans-serif;
  --hx-font-condensed: "Segoe UI", system-ui, -apple-system, "Noto Sans", "Arial", sans-serif;
}

/* Joined and syllabic scripts break apart with letter spacing; caps tracking means nothing without capitals. */
html:is(:lang(ar), :lang(fa), :lang(ur), :lang(hi), :lang(mr), :lang(bn), :lang(gu), :lang(pa), :lang(ta), :lang(te), :lang(kn), :lang(ml), :lang(th)) * {
  letter-spacing: normal !important;
}
html:is(:lang(zh), :lang(ja), :lang(ko)) {
  --hx-tracking-caps: 0.04em;
  --hx-tracking-caps-wide: 0.06em;
  --hx-tracking-caps-tight: 0.02em;
}

/* Tall scripts (marks above and below the line) need more line height than the tight Latin display settings. */
html:is(:lang(ar), :lang(fa), :lang(hi), :lang(mr), :lang(bn), :lang(gu), :lang(pa), :lang(ta), :lang(te), :lang(kn), :lang(ml), :lang(th), :lang(vi)) :is(h1, h2, h3, .vf-display, .vf-h2, .seq-cap strong, .vf-quote, .vf-plan3__value) {
  line-height: 1.35 !important;
}
html:lang(ur) :is(h1, h2, h3, .vf-display, .vf-h2, .seq-cap strong, .vf-quote) {
  line-height: 1.75 !important;
}
html:lang(ur) body {
  line-height: 1.9;
}
html:is(:lang(zh), :lang(ja), :lang(ko)) :is(h1, h2, h3, .vf-display, .vf-h2, .seq-cap strong) {
  line-height: 1.25 !important;
}

/* Right-to-left: logical properties do most of it; these are the physical leftovers. */
[dir="rtl"] .vf-langsw__chevron,
[dir="rtl"] .hx-link--action::after {
  transform: scaleX(-1);
}
[dir="rtl"] .vf-url__value,
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] .hx-mono,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
}
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] .vf-masked {
  direction: ltr;
  text-align: end;
}