/* PuzzleDuo — i18n.css
   Loaded by every localized page (and, for symmetry, by the English pages).
   Nothing here touches the Latin experience: the rules are scoped to the html
   lang of a translated document, so this file is inert on /.

   Why system fonts: the site self-hosts its two Latin faces (Fraunces,
   Nunito Sans) at a few tens of KB each. CJK and Arabic faces weigh tens of
   megabytes for full coverage, and a visitor already owns the system faces —
   Hiragino, Yu Gothic, PingFang, Malgun Gothic, Noto, Segoe UI. Serving a
   webfont to overwrite a good system face is the wrong trade, so translated
   documents fall back to the platform stack and keep the Latin webfonts for
   the numerals, "A4", "mm" and "PuzzleDuo" that appear inside their text. */

/* ---------------------------------------------------------------- CJK ---- */
/* Line-height first: CJK glyphs fill the em box, so the Latin defaults clip
   accents and collide between lines. Letter-spacing resets: tracking designed
   for Latin letterforms creates gaps inside words, because there are no word
   spaces to absorb them.

   The `i` flag on every selector here is load-bearing, not cosmetic. The
   documents are generated with lang="zh-CN" — region in caps — and an
   attribute selector is case-sensitive unless told otherwise, so
   [lang="zh-cn"] matched nothing at all. The Chinese pages were therefore
   still running on Nunito Sans with whatever CJK face the OS happened to
   substitute, which is why the menu's 日本語 and 简体中文 came out at visibly
   different weights despite identical `color`. */
[lang="ja" i] { line-height: 1.75; letter-spacing: 0; }
[lang="ko" i] { line-height: 1.7; letter-spacing: 0; }
[lang="zh-cn" i], [lang="zh-tw" i] { line-height: 1.7; letter-spacing: 0; }

/* The font variables are set on whatever element carries the lang, not on
   `body` alone. On an English page a lone <a lang="ja"> (one row of the
   language menu) then renders in the Japanese face instead of falling back to
   a thin system substitute beside the Latin rows. */
[lang="ja" i],
[lang="ja" i] input, [lang="ja" i] button, [lang="ja" i] select, [lang="ja" i] textarea {
  --font-display: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", "Noto Serif JP", serif;
  --font-ui: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans CJK JP", "Noto Sans JP", "Meiryo", sans-serif;
}
[lang="ko" i],
[lang="ko" i] input, [lang="ko" i] button, [lang="ko" i] select, [lang="ko" i] textarea {
  --font-display: "Apple SD Gothic Neo", "Nanum Myeongjo", "Noto Serif CJK KR", "Noto Serif KR", serif;
  --font-ui: "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans CJK KR", "Noto Sans KR", sans-serif;
}
[lang="zh-cn" i],
[lang="zh-cn" i] input, [lang="zh-cn" i] button, [lang="zh-cn" i] select, [lang="zh-cn" i] textarea {
  --font-display: "Songti SC", "SimSun", "Noto Serif CJK SC", "Noto Serif SC", serif;
  --font-ui: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
}
[lang="zh-tw" i],
[lang="zh-tw" i] input, [lang="zh-tw" i] button, [lang="zh-tw" i] select, [lang="zh-tw" i] textarea {
  --font-display: "Songti TC", "MingLiU", "PMingLiU", "Noto Serif CJK TC", "Noto Serif TC", serif;
  --font-ui: "PingFang TC", "Microsoft JhengHei", "微軟正黑體", "Noto Sans CJK TC", "Noto Sans TC", sans-serif;
}

/* ---------------------------------------------------------------- arabic */
[lang="ar" i] { line-height: 1.8; }
[lang="ar" i],
[lang="ar" i] input, [lang="ar" i] button, [lang="ar" i] select, [lang="ar" i] textarea {
  --font-display: "Noto Naskh Arabic", "Amiri", "Traditional Arabic", "Times New Roman", serif;
  --font-ui: "Segoe UI", "Noto Sans Arabic", "Dubai", Tahoma, Arial, sans-serif;
}

/* ------------------------------------------------------------------ rtl */
/* The layout is written with physical properties, so a full mirror is out of
   scope. What a reader actually notices is: text runs the wrong way (solved by
   dir="rtl" on <html>, which flex/grid rows honour automatically), the button
   arrow pointing the wrong way, and code/keyboard samples — which are Latin
   tokens ("Space", "Enter") — being scrambled by the bidi algorithm. */
[dir="rtl"] .pf-btn__arrow { transform: scaleX(-1); }
[dir="rtl"] kbd { direction: ltr; unicode-bidi: embed; }
[dir="rtl"] .pf-logo__sub { direction: ltr; unicode-bidi: embed; }
[dir="rtl"] code { direction: ltr; unicode-bidi: embed; }
/* numbers with units and mm measurements stay LTR inside RTL prose */
[dir="rtl"] .pf-readout, [dir="rtl"] .pf-progress__num, [dir="rtl"] .pf-stat strong,
[dir="rtl"] .pf-tray__count, [dir="rtl"] .pf-bar__meta {
  direction: ltr; unicode-bidi: embed;
}