/* Localisation: script-specific font stacks, right-to-left details, the language switcher, the language
   suggestion bar and the "machine-drafted translation" note. Layout itself uses logical properties in site.css
   (margin-inline-start, inset-inline-end, text-align: start …), so it mirrors automatically under dir="rtl". */

/* ------------------------------------------------------------------ font stacks per script
   Latin and Cyrillic keep IBM Plex (fonts.css). Other scripts: IBM Plex first (for Latin words, numbers and codes
   inside the text), then the script's font. Only Arabic is self-hosted; the others are system fonts present on
   Windows, macOS, iOS, Android and most Linux desktops. */
:root:lang(ar) {
  --tx-font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", "Segoe UI", "Geeza Pro", "Noto Sans Arabic", Tahoma, sans-serif;
  --tx-font-serif: "IBM Plex Serif", "IBM Plex Sans Arabic", "Segoe UI", "Geeza Pro", "Noto Sans Arabic", Tahoma, serif;
  --tx-font-mono: "IBM Plex Mono", ui-monospace, "IBM Plex Sans Arabic", Consolas, monospace;
}
:root:lang(zh-CN) {
  --tx-font-sans: "IBM Plex Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "WenQuanYi Zen Hei", sans-serif;
  --tx-font-serif: "IBM Plex Serif", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "WenQuanYi Zen Hei", sans-serif;
  --tx-font-mono: "IBM Plex Mono", ui-monospace, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", monospace;
}
:root:lang(zh-TW) {
  --tx-font-sans: "IBM Plex Sans", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC", "Source Han Sans TC", "WenQuanYi Zen Hei", sans-serif;
  --tx-font-serif: "IBM Plex Serif", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC", "Source Han Sans TC", "WenQuanYi Zen Hei", sans-serif;
  --tx-font-mono: "IBM Plex Mono", ui-monospace, "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", monospace;
}
:root:lang(ja) {
  --tx-font-sans: "IBM Plex Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "Noto Sans CJK JP", "Noto Sans JP", "IPAPGothic", sans-serif;
  --tx-font-serif: "IBM Plex Serif", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "Noto Sans CJK JP", "Noto Sans JP", "IPAPGothic", sans-serif;
  --tx-font-mono: "IBM Plex Mono", ui-monospace, "Hiragino Sans", "Yu Gothic", Meiryo, "Noto Sans CJK JP", monospace;
}
:root:lang(ko) {
  --tx-font-sans: "IBM Plex Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", "Nanum Gothic", sans-serif;
  --tx-font-serif: "IBM Plex Serif", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", "Nanum Gothic", sans-serif;
  --tx-font-mono: "IBM Plex Mono", ui-monospace, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", monospace;
}
:root:lang(hi) {
  --tx-font-sans: "IBM Plex Sans", "Nirmala UI", "Kohinoor Devanagari", "Noto Sans Devanagari", Mangal, "FreeSans", sans-serif;
  --tx-font-serif: "IBM Plex Serif", "Nirmala UI", "Kohinoor Devanagari", "Noto Sans Devanagari", Mangal, "FreeSans", serif;
  --tx-font-mono: "IBM Plex Mono", ui-monospace, "Nirmala UI", "Noto Sans Devanagari", monospace;
}
:root:lang(am) {
  --tx-font-sans: "IBM Plex Sans", Nyala, "Noto Sans Ethiopic", "Abyssinica SIL", Kefa, "Ebrima", "FreeSerif", sans-serif;
  --tx-font-serif: "IBM Plex Serif", Nyala, "Noto Serif Ethiopic", "Noto Sans Ethiopic", "Abyssinica SIL", Kefa, "Ebrima", "FreeSerif", serif;
  --tx-font-mono: "IBM Plex Mono", ui-monospace, Nyala, "Noto Sans Ethiopic", Ebrima, monospace;
}

/* Scripts without italics or case: emphasis by weight/colour, no tracking (letter-spacing breaks Arabic joining) */
:lang(ar) em, :lang(zh) em, :lang(ja) em, :lang(ko) em, :lang(hi) em, :lang(am) em { font-style: normal; }
:lang(ar) .hero h1 em, :lang(zh) .hero h1 em, :lang(ja) .hero h1 em, :lang(ko) .hero h1 em, :lang(hi) .hero h1 em, :lang(am) .hero h1 em { color: var(--link); font-style: normal; }
:lang(ar) *, :lang(ar) *::before { letter-spacing: 0 !important; }
:lang(ar) .eyebrow, :lang(zh) .eyebrow, :lang(ja) .eyebrow, :lang(ko) .eyebrow, :lang(hi) .eyebrow, :lang(am) .eyebrow,
:lang(ar) .footer-grid h2, :lang(zh) .footer-grid h2, :lang(ja) .footer-grid h2, :lang(ko) .footer-grid h2 { letter-spacing: .04em; font-family: var(--tx-font-sans); }
:lang(ar) body { line-height: 1.75; }
:lang(zh) body, :lang(ja) body, :lang(ko) body { line-height: 1.75; }
:lang(hi) body, :lang(am) body { line-height: 1.7; }
:lang(zh) h1, :lang(ja) h1, :lang(ko) h1, :lang(ar) h1, :lang(hi) h1, :lang(am) h1,
:lang(zh) h2, :lang(ja) h2, :lang(ko) h2, :lang(ar) h2, :lang(hi) h2, :lang(am) h2 { letter-spacing: 0; line-height: 1.3; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { word-break: auto-phrase; }
:lang(zh), :lang(ja) { line-break: strict; }
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
.hero h1 { overflow-wrap: break-word; hyphens: auto; }
h1, h2, h3, .btn, .nav-link, .cc-btn { hyphens: auto; }
/* Fallback where the browser has no hyphenation dictionary (long Russian, German, Swahili words at 390 px) */
h1, h2, h3 { overflow-wrap: break-word; }

/* ------------------------------------------------------------------ right-to-left */
/* Code, figures and measured values keep their own direction inside RTL text */
[dir="rtl"] pre, [dir="rtl"] code, [dir="rtl"] kbd, [dir="rtl"] .num, [dir="rtl"] td.n, [dir="rtl"] .checksum { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] pre { text-align: left; }
[dir="rtl"] .hero-figure, [dir="rtl"] .hx, [dir="rtl"] .fig svg { direction: ltr; }
[dir="rtl"] .hero-readout { direction: rtl; }
/* Directional glyphs and icons */
[dir="rtl"] .i-dir, [dir="rtl"] .btn .arrow { transform: scaleX(-1); }
[dir="rtl"] .cc-sw input:checked + span::after { transform: translateX(-20px); }
[dir="rtl"] .hero-meta span::before { content: "— "; }
@media (max-width: 1020px) {
  [dir="rtl"] .nav-link[aria-current="page"], [dir="rtl"] .nav-link[data-current], [dir="rtl"] .nav-trigger[data-current] { box-shadow: inset -3px 0 0 var(--accent); }
}
[dir="rtl"] .code-block .copy-btn { right: 8px; left: auto; }

/* ------------------------------------------------------------------ language switcher (header) */
.lang-menu { position: relative; }
.lang-trigger { width: auto; padding: 0 8px; gap: 6px; display: inline-flex; align-items: center; font: inherit; font-size: .86rem; font-weight: 500; }
.lang-trigger .i-globe { width: 18px; height: 18px; flex: none; }
.lang-cur { max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1180px) { .lang-cur { display: none; } .lang-trigger { width: 38px; padding: 0; justify-content: center; } }
/* The globe adds a fifth header button: tighten the row on the narrowest phones (360 px) so it still fits */
@media (max-width: 380px) { .header-actions { gap: 2px; } .header-actions .icon-btn { width: 36px; } }
.lang-list {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 110; min-width: 220px; max-height: min(70vh, 560px); overflow: auto;
  margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--tx-radius); box-shadow: var(--tx-shadow);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
}
.lang-list[hidden] { display: none; }
.lang-list a { display: block; padding: 7px 10px; border-radius: var(--tx-radius-sm); color: var(--text); text-decoration: none; font-size: .92rem; white-space: nowrap; }
.lang-list a:hover, .lang-list a:focus-visible { background: var(--surface-2); color: var(--heading); }
.lang-list a[aria-current] { color: var(--heading); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
[dir="rtl"] .lang-list a[aria-current] { box-shadow: inset -2px 0 0 var(--accent); }
@media (max-width: 480px) { .lang-list { position: fixed; top: var(--header-h); inset-inline: 8px; min-width: 0; } }

/* ------------------------------------------------------------------ language list (footer) */
.footer-lang { display: flex; align-items: flex-start; gap: 10px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: .84rem; color: var(--text-muted); }
.footer-lang .i-globe { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.footer-lang ul { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.footer-lang a { color: var(--text-muted); text-decoration: none; }
.footer-lang a:hover { color: var(--link); text-decoration: underline; }
.footer-lang [aria-current] { color: var(--heading); font-weight: 600; }
.footer-lang + .footer-base { margin-top: 20px; }

/* ------------------------------------------------------------------ "(English)" labels on links to untranslated pages */
.en-tag { font-size: .8em; font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.btn .en-tag { color: inherit; opacity: .8; }
.en-tag-short {
  display: inline-block; margin-inline-start: .45em; padding: 0 .3em; border: 1px solid var(--rule-strong); border-radius: 3px;
  font-family: var(--tx-font-mono); font-size: .66rem; line-height: 1.5; letter-spacing: .04em; color: var(--text-muted); vertical-align: .12em;
}

/* ------------------------------------------------------------------ language suggestion bar (never a redirect) */
.lang-suggest { background: var(--surface); border-bottom: 1px solid var(--rule); box-shadow: inset 0 2px 0 var(--accent); }
.lang-suggest .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 10px; padding-bottom: 10px; }
.lang-suggest p { margin: 0; font-size: .95rem; color: var(--heading); }

/* ------------------------------------------------------------------ machine-drafted translation note */
.i18n-draft { background: var(--warn-bg, #FFF7E0); border-bottom: 1px dashed var(--accent); font-size: .84rem; color: var(--text); }
.i18n-draft p { margin: 0; padding: 6px 0; }
.i18n-draft a { white-space: nowrap; }
@media print { .lang-menu, .lang-suggest, .footer-lang { display: none !important; } }