/* The language picker in the redesign (2026-10-20 go-live build), and the fonts and fixes for the six languages.
   i18n.js mounts the picker in the site pages' header.head and the app's header.rh-bar, just before the sun/moon button,
   and hangs its menu from <body>. Everything here uses pro.css's tokens, so dark.css's palette (and the 404 page's own
   inline tokens) apply as they are. Loaded after dark.css. */

/* ------------------------------------------------------------------ the button: a pill beside the round sun/moon
   button, the same height and hairline; the globe, the language in use, a chevron. The short label sits in a box of
   fixed width, so the button is as wide in German as in Japanese and nothing beside it moves. */
.lang { flex: none; display: inline-flex; align-items: center; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; margin: 0; padding: 0 11px 0 10px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text-2);
  font: 600 14px/1 var(--ui); white-space: nowrap; cursor: pointer; transition: color .15s, border-color .15s, background-color .15s;
}
.lang-btn:hover, .lang-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--line-2); }
.lang-btn[aria-expanded="true"] { background: var(--sunk); }
.lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-btn svg { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.lang-globe { width: 16px; height: 16px; stroke-width: 1.5; }
.lang-chev { width: 10px; height: 10px; stroke-width: 1.6; opacity: .7; transition: transform .15s ease; }
.lang-btn[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }
.lang-code { display: inline-block; width: 1.6em; text-align: center; letter-spacing: .02em; font-variant-numeric: normal; }

/* The site pages' header: the picker is a round button like the sun/moon one beside it, the language's short label in
   it (nav | picker, sun/moon, Launch app). Below 1280px the nav is behind the menu button, and the picker takes the free
   space's place (pages.css gives it to the sun/moon button); on the 404 page (no nav) the same. */
.head-in > .lang-next { margin-left: auto; margin-right: -20px; }
.head-in > .nav + .lang-next { margin-left: 0; }
.head-in > .lang-next + .theme-toggle { margin-left: 0; }
.head .lang-btn { width: 38px; height: 38px; padding: 0; justify-content: center; gap: 0; }
.head .lang-btn .lang-globe, .head .lang-btn .lang-chev { display: none; }
.head .lang-code { width: auto; font-size: 13px; }
@media (max-width: 1279px) { .head-in > .nav + .lang-next { margin-left: auto; } }
@media (max-width: 760px) { .head-in > .lang-next { margin-right: -4px; } }
/* The full nav needs more room in some languages (measured with every link on one line, 2026-10-20): English and French
   about 1,300px of window, German 1,360, Japanese 1,400, Spanish 1,430. Narrower than that, the pages sit behind the menu
   button as they do below 1280px in every language. Korean and Chinese fit from 1280. */
@media (max-width: 1299px) {
  :root[lang="en"] .head .nav { display: none; }
  :root[lang="en"] .head .menu { display: block; }
  :root[lang="en"] .head-in > .nav + .lang-next { margin-left: auto; }
}
@media (max-width: 1319px) {
  :root[lang="fr"] .head .nav { display: none; }
  :root[lang="fr"] .head .menu { display: block; }
  :root[lang="fr"] .head-in > .nav + .lang-next { margin-left: auto; }
}
@media (max-width: 1359px) {
  :root[lang="de"] .head .nav { display: none; }
  :root[lang="de"] .head .menu { display: block; }
  :root[lang="de"] .head-in > .nav + .lang-next { margin-left: auto; }
}
@media (max-width: 1399px) {
  :root[lang="ja"] .head .nav { display: none; }
  :root[lang="ja"] .head .menu { display: block; }
  :root[lang="ja"] .head-in > .nav + .lang-next { margin-left: auto; }
}
@media (max-width: 1429px) {
  :root[lang="es"] .head .nav { display: none; }
  :root[lang="es"] .head .menu { display: block; }
  :root[lang="es"] .head-in > .nav + .lang-next { margin-left: auto; }
}

/* The app's bar: the picker before the sun/moon button, which keeps its own room before Connect. */
.rh-links .lang-next { margin-left: 8px; }
.rh-links .lang-next + .theme-toggle { margin-left: 4px; }

/* ------------------------------------------------------------------ the menu: the app's account menu's finish
   (app-core.css .acct-menu): a white card, a hairline, 14px corners, a soft shadow; the language in use checked. */
.lang-menu {
  position: fixed; z-index: 80; width: 208px; padding: 6px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  box-shadow: 0 24px 50px -20px rgba(13, 13, 15, .35), 0 2px 6px rgba(13, 13, 15, .04);
  animation: lang-in .14s ease-out;
}
.lang-menu.up { animation-name: lang-up; }
@keyframes lang-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes lang-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.lang-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 12px;
  border-radius: 10px; color: var(--ink); font: 500 15px/1.2 var(--ui); text-decoration: none; white-space: nowrap;
}
.lang-menu a:hover, .lang-menu a:focus-visible { background: var(--sunk); outline: none; }
.lang-menu a:focus-visible { box-shadow: inset 0 0 0 1px var(--line-2); }
.lang-menu a[aria-checked="true"] { font-weight: 650; }
.lang-menu svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.lang-menu a[aria-checked="true"] svg { visibility: visible; }
:root[data-theme="dark"] .lang-menu { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .lang-menu { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9); } }

/* Each language's name in its own letters. */
.lang-menu a:lang(ko), .lang-code:lang(ko), .menu-lang a:lang(ko) { font-family: "Instrument Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; }
.lang-menu a:lang(zh-CN), .lang-code:lang(zh-CN), .menu-lang a:lang(zh-CN) { font-family: "Instrument Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; }
.lang-menu a:lang(ja), .lang-code:lang(ja), .menu-lang a:lang(ja) { font-family: "Instrument Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", system-ui, sans-serif; }

/* ------------------------------------------------------------------ the menu button's panel (below 1280px): the
   languages as a row of links under the site map. It shows only where the header has no room for the picker (phones);
   wider, the picker stays in the header. */
.menu-lang { display: none; }
@media (max-width: 760px) {
  .head-in:has(> details[data-menu]) > .lang-next, .head-in > .lang-next.lang-hasmenu { display: none; }
  .head-in:has(> details[data-menu]) > .lang-next + .theme-toggle, .head-in > .lang-next.lang-hasmenu + .theme-toggle { margin-left: auto; }
  .menu-lang { display: block; grid-column: 1 / -1; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
  .menu-lang > p { padding: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text-3); }
  .menu-lang > div { display: flex; flex-wrap: wrap; gap: 8px; }
  .menu-in .menu-lang a:not(.btn) { display: inline-flex; align-items: center; width: auto; height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--text-2); text-decoration: none; background: var(--surface); }
  .menu-in .menu-lang a:not(.btn):hover { color: var(--ink); border-color: var(--line-2); }
  .menu-in .menu-lang a[aria-current="true"] { color: var(--ink); border-color: var(--ink); }
}

/* ------------------------------------------------------------------ phones: the app's bar is full (the mark, search,
   the sun/moon button, Connect), so the picker becomes a round button like the sun/moon one, the language's short
   label alone. */
@media (max-width: 640px) {
  .rh-links .lang-next { margin-left: 0; }
  .rh-links .lang-next + .theme-toggle { margin-left: 6px; }
  .rh-bar .lang-btn { width: 36px; height: 36px; padding: 0; justify-content: center; gap: 0; }
  .rh-bar .lang-btn .lang-globe, .rh-bar .lang-btn .lang-chev { display: none; }
  .rh-bar .lang-code { width: auto; font-size: 13px; }
}
/* Narrower than 420px the bar has no room for a fourth button beside the wordmark (the search would slide over it at
   360): the picker steps down to the right end of the tab strip under the bar, the same 36px round button, and the
   strip keeps that corner free. */
@media (max-width: 420px) {
  .rh-bar .lang-next { position: absolute; right: 0; top: calc(100% + 4px); margin: 0; z-index: 1; }
  .rh-links .lang-next + .theme-toggle { margin-left: 0; }
  .rh-bar .rh-sub-in { width: calc(100% - 2 * clamp(20px, 2.4vw, 48px) - 46px); margin-left: clamp(20px, 2.4vw, 48px); }
}
@media (max-width: 760px), (pointer: coarse) { .lang-menu a { min-height: 44px; } }
@media (hover: none) { .lang-btn:hover:not([aria-expanded="true"]) { color: var(--text-2); border-color: var(--line); } }
@media (prefers-reduced-motion: reduce) { .lang-menu { animation: none; } .lang-chev { transition: none; } }

/* ------------------------------------------------------------------ Korean, Chinese and Japanese
   Instrument Sans and Archivo have no Korean, Chinese or Japanese letters: each stack falls back to the system's own face
   for them while Latin letters and numbers keep the brand's. */
:root[lang="ko"] {
  --ui: 'Instrument Sans', "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --display: 'Archivo', "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}
:root[lang="zh-CN"] {
  --ui: 'Instrument Sans', "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --display: 'Archivo', "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}
:root[lang="ja"] {
  --ui: 'Instrument Sans', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
  --display: 'Archivo', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
}
/* Korean keeps words whole when a line wraps; Japanese never breaks before small kana or closing punctuation. */
:root[lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; }
:root[lang="ja"] body { line-break: strict; }
/* The display cut's tight tracking is for Latin letters: Korean, Chinese and Japanese headlines get a touch of air. */
:root:is([lang="ko"], [lang="zh-CN"], [lang="ja"]) :is(h1, h2, h3, .title) { letter-spacing: -.01em; }
/* Chinese and Japanese put no space after their commas, so a list of file names ("/caps.json、/burns.json、...") is one
   run a line cannot break; it breaks inside the run rather than push the page sideways at phone width. */
:root:is([lang="zh-CN"], [lang="ja"]) body { overflow-wrap: break-word; }

/* Japanese headlines break between phrases, not inside a word ("株式貸 / 借"), where the browser knows how (Chrome). */
:root[lang="ja"] :is(h1, h2, h3) { word-break: auto-phrase; }

/* ------------------------------------------------------------------ German, Spanish and French
   One long word in a big headline ("Nutzungsbedingungen" at 390px) is wider than the phone: it breaks rather than
   push the page sideways, and on a phone the legal page's title hyphenates. Never hyphens everywhere: wide, they split
   words that fit on the next line ("Ak-tienleihe", "Ro-binhood"). */
:root:is([lang="de"], [lang="es"], [lang="fr"]) :is(h1, h2, h3) { overflow-wrap: break-word; }
@media (max-width: 480px) { :root:is([lang="de"], [lang="es"], [lang="fr"]) main.legal h1 { hyphens: auto; } }
/* An order card with five tabs (the coin desk's Short, Lend, Borrow, Launch, List) is set for English words; on a
   phone the longer ones tighten the gap, and if they still do not fit the row scrolls inside the card, never the page
   (contain: the row's own width never widens the card). */
@media (max-width: 480px) {
  :root:not([lang="en"]) .order-tabs { gap: 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; contain: inline-size; }
  :root:not([lang="en"]) .order-tabs::-webkit-scrollbar { display: none; }
  :root:not([lang="en"]) .order-tabs button { flex: none; }
  :root:not([lang="en"]) .order-tabs button[aria-selected="true"]::after { bottom: 0; }
}