/* notrack.ai — script-aware typography layer
 *
 * Why this file exists: the site ships 46 locales across 12 writing systems but every page
 * used one Latin-first font stack and Latin display leading (1.05–1.2). Measured on a real
 * 360px viewport: a line box needs 1.34x the font size for Latin, 1.63x for CJK and 1.91x
 * for Myanmar — so Burmese headings were rendering 18px short of what the glyphs require and
 * the stacked marks collided. Complex scripts also lost their font choice to whatever the OS
 * happened to pick, which is why the same page looked "off" in Hindi/Thai/Arabic.
 *
 * Everything here is ADDITIVE and scoped to html[lang=…]: Latin, Cyrillic and Greek pages
 * keep their existing metrics untouched. Only the universal block at the top applies to all.
 * Loaded on every page (and automatically on new ones) from lib/theme_head.php.
 *
 * Deliberately NOT targeted: div/span — the promo/bonus bar is built from divs and belongs to
 * the monetization workstream; it keeps its own tuned line-clamp heights.
 */

/* ─────────────────────────────────────────────────────────────
   1. Universal — safe on every locale, improves ragged wrapping
   ───────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Translations vary 0.44x–4.75x in length, so a heading that is one tidy line in English can
   wrap 4+1 words in German or Burmese. Balanced wrapping evens the lines out instead. */
h1, h2, h3, h4, .balance { text-wrap: balance; }
p, li, dd, blockquote, figcaption { text-wrap: pretty; }

/* Long unbroken strings (URLs, compounds) must never widen the page. */
p, li, dd, dt, blockquote, figcaption, td, th, h1, h2, h3, h4 { overflow-wrap: break-word; }

/* ─────────────────────────────────────────────────────────────
   2. Compound-heavy languages — let long words hyphenate at 360px
      de/nl/fi/hu/el/my routinely produce 20+ character single words.
   ───────────────────────────────────────────────────────────── */
html[lang="de"] :is(p, li, dd, blockquote, h1, h2, h3, h4),
html[lang="nl"] :is(p, li, dd, blockquote, h1, h2, h3, h4),
html[lang="fi"] :is(p, li, dd, blockquote, h1, h2, h3, h4),
html[lang="hu"] :is(p, li, dd, blockquote, h1, h2, h3, h4),
html[lang="el"] :is(p, li, dd, blockquote, h1, h2, h3, h4),
html[lang="da"] :is(p, li, dd, blockquote, h1, h2, h3, h4),
html[lang="no"] :is(p, li, dd, blockquote, h1, h2, h3, h4),
html[lang="sv"] :is(p, li, dd, blockquote, h1, h2, h3, h4) { hyphens: auto; }

/* Greek headings at 1.05 leading clip accents on capitals (Ά, Ή, Ί). */
html[lang="el"] :is(h1, h2, h3, h4) { line-height: 1.25; }

/* ─────────────────────────────────────────────────────────────
   3. Arabic family — ar, fa, ps, ur (RTL)
      Arabic needs a real Naskh face, more leading for the dots/marks below the baseline,
      and a slightly larger size: its effective x-height is well under Latin at the same px.
      Chrome/UI strings are size-locked so button widths never change.
   ───────────────────────────────────────────────────────────── */
html[lang="ar"] body, html[lang="fa"] body, html[lang="ps"] body, html[lang="ur"] body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", "Iranian Sans", Tahoma,
               Arial, sans-serif;
}
html[lang="ar"] :is(h1,h2,h3,h4), html[lang="fa"] :is(h1,h2,h3,h4),
html[lang="ps"] :is(h1,h2,h3,h4), html[lang="ur"] :is(h1,h2,h3,h4) { line-height: 1.45; }
html[lang="ar"] :is(p,li,dd,dt,blockquote,figcaption,td,th),
html[lang="fa"] :is(p,li,dd,dt,blockquote,figcaption,td,th),
html[lang="ps"] :is(p,li,dd,dt,blockquote,figcaption,td,th),
html[lang="ur"] :is(p,li,dd,dt,blockquote,figcaption,td,th) { line-height: 1.85; font-size: 1.06em; }
html[lang="ar"] :is(button,a,label,summary,option,legend),
html[lang="fa"] :is(button,a,label,summary,option,legend),
html[lang="ps"] :is(button,a,label,summary,option,legend),
html[lang="ur"] :is(button,a,label,summary,option,legend) { line-height: 1.5; }
/* Urdu Nastaliq sits lower and needs the most room of the four. */
html[lang="ur"] :is(p,li,dd,blockquote) { line-height: 2; }

/* ─────────────────────────────────────────────────────────────
   4. Hebrew — he (RTL)
   ───────────────────────────────────────────────────────────── */
html[lang="he"] body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
}
html[lang="he"] :is(h1,h2,h3,h4) { line-height: 1.35; }
html[lang="he"] :is(p,li,dd,dt,blockquote,figcaption,td,th) { line-height: 1.7; }
html[lang="he"] :is(button,a,label,summary) { line-height: 1.45; }

/* ─────────────────────────────────────────────────────────────
   5. Devanagari (hi) and Bengali (bn)
      Matras sit above and below the line; at 1.1 leading they overlap the neighbouring line.
   ───────────────────────────────────────────────────────────── */
html[lang="hi"] body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", "Mangal",
               Arial, sans-serif;
}
html[lang="bn"] body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Noto Sans Bengali", "Nirmala UI", "Bangla Sangam MN", "Vrinda",
               Arial, sans-serif;
}
html[lang="hi"] :is(h1,h2,h3,h4), html[lang="bn"] :is(h1,h2,h3,h4) { line-height: 1.5; }
html[lang="hi"] :is(p,li,dd,dt,blockquote,figcaption,td,th),
html[lang="bn"] :is(p,li,dd,dt,blockquote,figcaption,td,th) { line-height: 1.85; font-size: 1.06em; }
html[lang="hi"] :is(button,a,label,summary), html[lang="bn"] :is(button,a,label,summary) { line-height: 1.55; }

/* ─────────────────────────────────────────────────────────────
   6. Thai (th) — no word spaces, tall vowel/tone stacks
   ───────────────────────────────────────────────────────────── */
html[lang="th"] body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Noto Sans Thai", "Leelawadee UI", "Thonburi", Tahoma, Arial, sans-serif;
}
html[lang="th"] :is(h1,h2,h3,h4) { line-height: 1.6; }
html[lang="th"] :is(p,li,dd,dt,blockquote,figcaption,td,th) { line-height: 1.9; font-size: 1.06em; }
html[lang="th"] :is(button,a,label,summary) { line-height: 1.6; }
/* Thai has no spaces between words: let the browser use dictionary breaking, and never
   break mid-cluster (which would orphan a tone mark). */
html[lang="th"] :is(p,li,dd,blockquote,h1,h2,h3,h4) { line-break: loose; word-break: normal; }

/* ─────────────────────────────────────────────────────────────
   7. Myanmar (my) — the extreme case: 1.91x natural line box, strings up to 4.75x English
   ───────────────────────────────────────────────────────────── */
html[lang="my"] body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Noto Sans Myanmar", "Myanmar Text", "Myanmar Sangam MN", "Padauk",
               Arial, sans-serif;
}
/* 1.9 is not a stylistic choice: measured natural line box for Burmese is 1.9x the font size,
   and headings wrap often here (strings run up to 4.75x English), so anything tighter makes
   consecutive lines collide. */
html[lang="my"] :is(h1,h2,h3,h4) { line-height: 1.9; }
html[lang="my"] :is(p,li,dd,dt,blockquote,figcaption,td,th) { line-height: 2; font-size: 1.06em; }
html[lang="my"] :is(button,a,label,summary,option) { line-height: 1.7; }

/* ─────────────────────────────────────────────────────────────
   8. CJK (ja, zh-CN, zh-TW) and Hangul (ko)
      Dense square glyphs: they read as a wall without generous leading, and negative
      letter-spacing (a Latin display trick) actively damages them.
   ───────────────────────────────────────────────────────────── */
html[lang="ja"] body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Hiragino Sans",
               "Yu Gothic UI", "Noto Sans JP", Meiryo, "Segoe UI", Roboto, sans-serif;
}
/* NB: <html lang> carries the hreflang value, not the locale code — zh-CN ships as
   lang="zh-Hans" and zh-TW as lang="zh-Hant", so an exact [lang="zh-CN"] never matches. */
html[lang="zh-Hans"] body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Roboto, sans-serif;
}
html[lang="zh-Hant"] body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang TC",
               "Microsoft JhengHei", "Noto Sans TC", "Segoe UI", Roboto, sans-serif;
}
html[lang="ko"] body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Malgun Gothic", "Noto Sans KR", "Segoe UI", Roboto, sans-serif;
}
html[lang="ja"] :is(h1,h2,h3,h4), html[lang^="zh"] :is(h1,h2,h3,h4),
html[lang="ko"] :is(h1,h2,h3,h4) { line-height: 1.4; }
html[lang="ja"] :is(p,li,dd,dt,blockquote,figcaption,td,th),
html[lang^="zh"] :is(p,li,dd,dt,blockquote,figcaption,td,th),
html[lang="ko"] :is(p,li,dd,dt,blockquote,figcaption,td,th) { line-height: 1.8; font-size: 1.03em; }
html[lang="ja"] :is(button,a,label,summary), html[lang^="zh"] :is(button,a,label,summary),
html[lang="ko"] :is(button,a,label,summary) { line-height: 1.5; }
/* Keep CJK punctuation from starting a line. */
html[lang="ja"] :is(p,li,h1,h2,h3,h4), html[lang^="zh"] :is(p,li,h1,h2,h3,h4),
html[lang="ko"] :is(p,li,h1,h2,h3,h4) { line-break: strict; }

/* ─────────────────────────────────────────────────────────────
   8b. Kill Latin display tracking on every non-Latin script.
       `.tracking-tight` (-0.025em) sits on 14 localized headings. In Arabic, Urdu, Persian
       and Pashto negative tracking pulls apart the cursive joins; in Devanagari, Bengali,
       Thai and Myanmar it crowds the conjuncts and stacked marks; in CJK it cramps the
       already-square glyphs. It is a Latin-only refinement.
   ───────────────────────────────────────────────────────────── */
html[lang="ar"] *, html[lang="fa"] *, html[lang="ps"] *, html[lang="ur"] *,
html[lang="he"] *, html[lang="hi"] *, html[lang="bn"] *, html[lang="th"] *,
html[lang="my"] *, html[lang="ja"] *, html[lang^="zh"] *, html[lang="ko"] * {
  letter-spacing: normal;
}

/* ─────────────────────────────────────────────────────────────
   9. Chat message bodies — the product surface, worth an explicit floor.
      .markdown-body renders model output; complex scripts get the same treatment there.
   ───────────────────────────────────────────────────────────── */
html[lang="my"] .markdown-body, html[lang="th"] .markdown-body,
html[lang="hi"] .markdown-body, html[lang="bn"] .markdown-body,
html[lang="ur"] .markdown-body { line-height: 1.95; }
html[lang="ar"] .markdown-body, html[lang="fa"] .markdown-body,
html[lang="ps"] .markdown-body, html[lang="he"] .markdown-body { line-height: 1.8; }
html[lang="ja"] .markdown-body, html[lang^="zh"] .markdown-body,
html[lang="ko"] .markdown-body { line-height: 1.8; }

/* Headings inside model answers are set at 1.24 for every locale — the single highest-traffic
   tight value on the site. h5/h6 are included here because the generic heading rules above
   only reach h1–h4. */
html[lang="my"] .markdown-body :is(h1,h2,h3,h4,h5,h6) { line-height: 1.9; }
html[lang="th"] .markdown-body :is(h1,h2,h3,h4,h5,h6),
html[lang="hi"] .markdown-body :is(h1,h2,h3,h4,h5,h6),
html[lang="bn"] .markdown-body :is(h1,h2,h3,h4,h5,h6),
html[lang="ur"] .markdown-body :is(h1,h2,h3,h4,h5,h6) { line-height: 1.55; }
html[lang="ar"] .markdown-body :is(h1,h2,h3,h4,h5,h6),
html[lang="fa"] .markdown-body :is(h1,h2,h3,h4,h5,h6),
html[lang="ps"] .markdown-body :is(h1,h2,h3,h4,h5,h6),
html[lang="he"] .markdown-body :is(h1,h2,h3,h4,h5,h6) { line-height: 1.45; }
html[lang="ja"] .markdown-body :is(h1,h2,h3,h4,h5,h6),
html[lang^="zh"] .markdown-body :is(h1,h2,h3,h4,h5,h6),
html[lang="ko"] .markdown-body :is(h1,h2,h3,h4,h5,h6) { line-height: 1.45; }

/* ─────────────────────────────────────────────────────────────
   10. Micro-labels in complex scripts
       Several chat labels sit at 10.4–12px, often with text-transform:uppercase. Uppercase
       is a no-op outside Latin/Cyrillic/Greek, so those strings get none of the cap-height
       that makes the size survivable in English — they are simply tiny. These are wrapping
       or auto-width elements, so a floor does not change any control's fixed geometry.
   ───────────────────────────────────────────────────────────── */
html[lang="my"] :is(.hint, .meta, .ci-time, .ce-shuffle, .turn-control label, .bubble .tag),
html[lang="th"] :is(.hint, .meta, .ci-time, .ce-shuffle, .turn-control label, .bubble .tag),
html[lang="hi"] :is(.hint, .meta, .ci-time, .ce-shuffle, .turn-control label, .bubble .tag),
html[lang="bn"] :is(.hint, .meta, .ci-time, .ce-shuffle, .turn-control label, .bubble .tag),
html[lang="ar"] :is(.hint, .meta, .ci-time, .ce-shuffle, .turn-control label, .bubble .tag),
html[lang="fa"] :is(.hint, .meta, .ci-time, .ce-shuffle, .turn-control label, .bubble .tag),
html[lang="ur"] :is(.hint, .meta, .ci-time, .ce-shuffle, .turn-control label, .bubble .tag),
html[lang="ps"] :is(.hint, .meta, .ci-time, .ce-shuffle, .turn-control label, .bubble .tag),
html[lang="he"] :is(.hint, .meta, .ci-time, .ce-shuffle, .turn-control label, .bubble .tag) {
  font-size: 12.5px;
}