/* The language switch, and type for the Chinese, Korean and Japanese pages.
   Linked on every page after sky.css. No script: the switch is a <details>
   holding a list of links, and the languages are told apart by <html lang>. */

/* ── the switch in the header ──────────────────────────────────────────── */
.lang-switch {
  position: relative;
  flex: none;
}
.lang-switch summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  font: var(--type-ui);
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.lang-switch summary::-webkit-details-marker {
  display: none;
}
.lang-switch summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-inline-start: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.lang-switch[open] summary::after {
  transform: translateY(1px) rotate(225deg);
}
.lang-switch summary:hover,
.lang-switch[open] summary {
  color: var(--text-strong);
  background: var(--pill);
}
.lang-switch summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.lang-switch summary svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.lang-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 10px);
  right: 0;
  min-width: 168px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--glass-edge);
  border-radius: 18px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  backdrop-filter: blur(30px) saturate(1.5);
  box-shadow: var(--glass-shadow);
}
.lang-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 12px;
  font: var(--type-ui);
  color: var(--text-strong);
  text-decoration: none;
  white-space: nowrap;
}
.lang-menu a:hover {
  background: var(--pill);
  text-decoration: none;
}
.lang-menu a[aria-current="true"] {
  font-weight: var(--weight-medium);
}
.lang-menu a[aria-current="true"]::after {
  content: "✓";
  float: right;
  margin-inline-start: 12px;
  color: var(--text-muted);
}

/* ── the same list in the footer ───────────────────────────────────────── */
.site-footer .footer-base .lang-list {
  flex-basis: 100%;
  margin: 0;
  color: var(--text-muted);
}
.site-footer .footer-base .lang-list a {
  text-decoration: none;
}
.site-footer .footer-base .lang-list a:hover {
  text-decoration: underline;
}
.lang-list [aria-current="true"] {
  color: var(--text-strong);
}

/* On a translated page, a link to a page that exists in English only says so. */
html:not([lang="en"]) a[hreflang="en"]:not(.lang-menu a):not(.lang-list a)::after {
  content: "EN";
  display: inline-block;
  margin-inline-start: 0.4em;
  padding: 1px 4px;
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  font: var(--weight-medium) 10px/1.3 var(--font-mono);
  letter-spacing: 0;
  color: var(--text-muted);
  vertical-align: 0.15em;
  text-decoration: none;
}

/* ── Chinese, Korean and Japanese ──────────────────────────────────────── */
/* Geist draws the Latin letters and digits; the system's CJK font draws the
   rest. The order of each list puts the macOS font first, then the
   Noto and Source Han families that Linux and Android ship, then Windows'.
   lang on <html> also picks the right Han glyph shapes for each language. */
html:lang(zh-Hans) {
  --font-sans: "Geist", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --font-display: var(--font-sans);
}
html:lang(ja) {
  --font-sans: "Geist", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", "Noto Sans JP", "Source Han Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  --font-display: var(--font-sans);
}
html:lang(ko) {
  --font-sans: "Geist", "Apple SD Gothic Neo", "Noto Sans CJK KR", "Noto Sans KR", "Source Han Sans KR", "Malgun Gothic", sans-serif;
  --font-display: var(--font-sans);
}
html:is(:lang(zh-Hans), :lang(ja), :lang(ko)) body {
  font-family: var(--font-sans);
}

/* CJK text is set without tracking: the negative letter-spacing the Latin
   headings use crowds Han and Hangul together. The wordmark and the large
   numbers keep theirs. */
html:is(:lang(zh-Hans), :lang(ja), :lang(ko)) :is(h1, h2, h3, h4, p, li, dt, dd, td, th, figcaption, .eyebrow, .btn, .site-nav a, .header-actions a, .footer-group a, .lang-switch summary, .lead) {
  letter-spacing: 0;
}
html:is(:lang(zh-Hans), :lang(ja), :lang(ko)) .brand-word {
  letter-spacing: var(--logo-tracking);
}
html:is(:lang(zh-Hans), :lang(ja), :lang(ko)) .eyebrow {
  text-transform: none;
}

/* Han and Hangul need more room between lines than Latin. */
html:is(:lang(zh-Hans), :lang(ja), :lang(ko)) :is(p, li, dd, td, th, figcaption, .lead) {
  line-height: 1.8;
}
html:is(:lang(zh-Hans), :lang(ja), :lang(ko)) dt {
  line-height: 1.6;
}
html:is(:lang(zh-Hans), :lang(ja), :lang(ko)) :is(h1, h2) {
  line-height: 1.32;
}
html:is(:lang(zh-Hans), :lang(ja), :lang(ko)) :is(h3, h4) {
  line-height: 1.45;
}
/* Headings balance their lines, so none ends on one lone character;
   paragraphs avoid a last line of one character. */
html:is(:lang(zh-Hans), :lang(ja), :lang(ko)) :is(h1, h2, h3, h4, dt) {
  text-wrap: balance;
}
html:is(:lang(zh-Hans), :lang(ja), :lang(ko)) :is(p, li, dd, figcaption) {
  text-wrap: pretty;
}
/* A two-tone heading sets each half on its own line(s), each balanced: a
   half that has to wrap splits evenly instead of leaving one character, and
   the first half never breaks mid-word to make room for the second. */
html:is(:lang(zh-Hans), :lang(ja), :lang(ko)) :is(.hero h1, .section-head h2) .quiet {
  display: block;
}
/* No synthetic italics on Han and Hangul: emphasis is weight. */
html:is(:lang(zh-Hans), :lang(ja), :lang(ko)) em {
  font-style: normal;
  font-weight: var(--weight-medium);
}

/* Korean breaks between words, never inside one. */
html:lang(ko) body {
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* Chinese and Japanese: no line starts with a small kana or closing
   punctuation; proportional punctuation in headings. */
html:is(:lang(zh-Hans), :lang(ja)) body {
  line-break: strict;
  overflow-wrap: break-word;
}
html:is(:lang(zh-Hans), :lang(ja)) :is(h1, h2) {
  font-feature-settings: "palt";
}
/* Japanese has no spaces between words: in headings and short labels the
   browser breaks between phrases (BudouX, Chromium 119+), so ウォレット
   never becomes ウォレッ / ト. Other browsers ignore the value. */
html:lang(ja) :is(h1, h2, h3, dt, .btn, .eyebrow, figcaption, .lead, .hero-note, .section-head p) {
  word-break: auto-phrase;
}

/* Long addresses and codes still wrap rather than push the page sideways. */
html:is(:lang(zh-Hans), :lang(ja), :lang(ko)) :is(td, dd, li, p) code {
  word-break: break-all;
}