/* =============================================================================
   Pigeon Effect: the language toggle and the Chinese typography
   -----------------------------------------------------------------------------
   Linked on every page (base.html, the tool shell, the indicator board, the
   Faces viewer), after tokens.css. Plain CSS, linked with {% static_v %}.
   The fonts themselves are the --pe-font stack in tokens.css.
   ============================================================================= */

/* 1. The language switch -------------------------------------------------------
   One link to this page in the other language, labelled in that language
   ("中文" / "English"). In the site header it is a header control (.pe-ctl in
   tailwind.css: the shared box, states and orange underline), so these rules
   skip it; in a tool bar (paper and surface grounds, .u-page, the board, the
   Faces viewer) it is a plain uppercase link in the tools' ink. */
.pe-lang { text-decoration: none; white-space: nowrap; }
.pe-lang:not(.pe-ctl) {
    color: rgb(var(--pe-ink-2));
    font-size: 12px; line-height: 1;
    text-transform: uppercase; letter-spacing: .12em;
    transition: color .2s ease;
}
.pe-lang:not(.pe-ctl):hover { color: rgb(var(--pe-ink)); }
/* The Faces viewer's footer is the chrome band: its inks, in both themes. */
.viewer-footer .pe-lang:not(.pe-ctl) { color: rgb(var(--pe-on-chrome-2)); }
.viewer-footer .pe-lang:not(.pe-ctl):hover { color: rgb(var(--pe-on-chrome)); }
.pe-lang:not(.pe-ctl):focus-visible { outline: 2px solid rgb(var(--pe-accent-strong)); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
    .pe-lang:not(.pe-ctl) { transition: none; }
}

/* 2. Chinese pages ------------------------------------------------------------
   Han characters are taller than Latin x-height and carry their own spacing,
   so the Latin settings the templates use would crowd or scatter them:
     - line breaking by the strict (CJK) rules, no punctuation at a line start;
     - spacing between Han and Latin/digits where the browser supports it;
     - tracking: the uppercase labels' .2-.5em gaps break a two-character word
       into two loose glyphs, so every tracked label drops to .06em. Inline
       styles set that tracking, hence !important (the wordmark keeps its own);
     - tight line-heights (1.05, leading-none/-tight) let wrapped Han lines
       touch; they open to 1.3;
     - Space Mono has no light weight, so font-light rendered as 400 in Latin;
       the CJK fonts do have one, which made Chinese lighter than the Latin
       beside it. It stays 400;
     - no synthetic italics: Chinese has none. */
/* Chinese punctuation that Latin fonts also carry (“ ” ‘ ’ — …): Space Mono,
   first in the stack, would set it half-width, so on Chinese pages these few
   code points come from the system's CJK font. local() only: nothing is
   downloaded. */
@font-face {
    font-family: 'PE CJK Punctuation';
    src: local('PingFang SC'), local('PingFangSC-Regular'), local('Hiragino Sans GB'),
         local('Microsoft YaHei'), local('MicrosoftYaHei'), local('Noto Sans CJK SC'),
         local('NotoSansCJKsc-Regular'), local('Source Han Sans SC'), local('SourceHanSansSC-Regular'),
         local('Noto Sans SC');
    unicode-range: U+2014, U+2018-201D, U+2026;
}
html:lang(zh) {
    --pe-font: 'PE CJK Punctuation', 'Space Mono', 'Courier New', var(--pe-font-cjk), monospace;
    line-break: strict;
    overflow-wrap: break-word;
    text-autospace: normal;
}
html:lang(zh) [style*="letter-spacing"]:not(#wordmark a),
html:lang(zh) [class*="tracking-"],
html:lang(zh) .u-label {
    letter-spacing: .06em !important;
}
html:lang(zh) .leading-none:not(#wordmark a),
html:lang(zh) .leading-tight,
html:lang(zh) [style*="line-height: 1.0"],
html:lang(zh) [style*="line-height: 1.1"],
html:lang(zh) [style*="line-height:1.0"],
html:lang(zh) [style*="line-height:1.1"] {
    line-height: 1.3 !important;
}
html:lang(zh) .font-light { font-weight: 400; }
/* A Han line can break after any character, which leaves a lone "析。”" on
   the last line; pretty wrapping pulls a few characters down with it.
   text-wrap-style, never the text-wrap shorthand: that also sets
   text-wrap-mode back to wrap and undid every `white-space: nowrap` on a p
   or li (the board's group credits wrapped into a column). */
html:lang(zh) p, html:lang(zh) li { text-wrap-style: pretty; }
/* Han glyphs at the Latin labels' 11px are at the edge of legibility (the
   strokes of 联 or 视 merge), so the nav, the most read label, goes up a step. */
html:lang(zh) .nav-link { font-size: 13px; }
html:lang(zh) #mobile-menu .nav-link { font-size: 14px; }
/* The tool button (.pe-tool-btn) likewise: Han at 11px with .25em tracking
   came apart into loose glyphs. */
html:lang(zh) .pe-tool-btn { font-size: 13px; letter-spacing: .08em; }
/* And the reading-progress label ("还剩 24 分钟"); its box still sizes itself
   to the longest label, so it keeps one width here too. */
html:lang(zh) .pe-progress { font-size: 13px; letter-spacing: .06em; }
html:lang(zh) em, html:lang(zh) i, html:lang(zh) .italic { font-style: normal; }

/* The reads' drop cap is a Latin convention: on a Chinese lede it caught a digit
   (the 2 of 2008年) and pulled one character out of the first line. */
html:lang(zh) .adl-lede::first-letter,
html:lang(zh) .sup-lede::first-letter {
    float: none; font-size: inherit; line-height: inherit; font-weight: inherit; margin: 0; color: inherit;
}

/* A heading's last line could be one character (the 年 after a year, which may
   break from its digits); balanced lines keep it with the rest. */
html:lang(zh) h1, html:lang(zh) h2, html:lang(zh) h3 { text-wrap-style: balance; }