:root {
  /* DESIGN.md Typography: self-hosted Noto first (common/fonts/fonts.css, linked
     on every page), the system fonts after it only as the fallback.  Simplified
     Chinese names on Japanese pages fall through to the SC files.  "Noto Sans
     JP UI" / "Noto Sans SC UI" are the same fonts cut to the interface's own
     characters (tools/build_ui_font_subset.py); each sits only at the head of
     its own language, so English pages and fallbacks never download them. */
  --ssj-font-ui: "Noto Sans JP UI", "Noto Sans JP", "Noto Sans SC", "Yu Gothic UI", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --ssj-font-display: "Noto Serif JP", "Noto Serif SC", "Yu Mincho", "Hiragino Mincho ProN", serif;
  /* Audit IDs, employee numbers, codes (owner 2026-10-19); Plex has no kana or
     kanji, so those characters fall through to the UI font. */
  --ssj-font-mono: "IBM Plex Mono", var(--ssj-font-ui);
  --ssj-weight-regular: 400;
  --ssj-weight-emphasis: 600;
}

/* The server renders Japanese as its safe fallback. Keep the first frame
   hidden only while the synchronous language preflight and deferred page
   controller agree on the user's stored language. The preflight has its own
   fail-open timeout, so a script failure cannot leave the page invisible. */
html[data-i18n-boot="pending"] body {
  visibility: hidden !important;
}

html[data-i18n-boot="ready"] body {
  visibility: visible !important;
}

html:lang(zh),
html:lang(zh-CN) {
  --ssj-font-ui: "Noto Sans SC UI", "Noto Sans SC", "Noto Sans JP", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", sans-serif;
  --ssj-font-display: "Noto Serif SC", "Noto Serif JP", "Source Han Serif SC", "STSong", "SimSun", serif;
}

html:lang(en) {
  /* English uses the Latin glyphs of the same Noto families (DESIGN.md). */
  --ssj-font-ui: "Noto Sans JP", "Noto Sans SC", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --ssj-font-display: "Noto Serif JP", "Noto Serif SC", Georgia, "Times New Roman", serif;
}

body,
button,
input,
select,
textarea {
  font-family: var(--ssj-font-ui) !important;
  font-synthesis: none;
}

body { font-weight: var(--ssj-weight-regular) !important; }
body * { font-family: var(--ssj-font-ui) !important; }

h1,
.page-title,
.page-head h1,
.person-strip h1,
.hero-title {
  font-family: var(--ssj-font-display) !important;
  font-weight: var(--ssj-weight-emphasis) !important;
}

/* Keep the original display typeface and component weight hierarchy. Only
   first-level page titles are made heavier, with every nested glyph matching.
   700 since 2026-10-19 (owner: the Noto Serif title at 600 read too thin;
   DESIGN.md allows 600-700 for display / page titles). */
h1,
.page-title,
.page-head h1,
.person-strip h1,
.hero-title,
h1 *,
.page-title *,
.page-head h1 *,
.person-strip h1 *,
.hero-title * {
  font-family: var(--ssj-font-display) !important;
  font-weight: 700 !important;
  font-synthesis: none;
}

/* Owner 2026-10-19: page titles 40px (DESIGN.md Display) from tablet width up;
   phones keep each page's own size.  Chinese titles are LXGW WenKai Bold with a
   0.5px stroke (Noto Serif SC's thin horizontals read too light); Japanese and
   English titles stay Noto Serif.  The font is vendored by
   tools/vendor_title_font.py; characters it lacks fall back to Noto Serif SC. */
@media (min-width: 761px) {
  h1,
  .page-title,
  .page-head h1,
  .person-strip h1,
  .hero-title {
    font-size: 40px !important;
    line-height: 48px !important;
  }
}
html:lang(zh) :is(h1, .page-title, .person-strip h1, .hero-title),
html:lang(zh) :is(h1, .page-title, .person-strip h1, .hero-title) * {
  font-family: "LXGW WenKai", var(--ssj-font-display) !important;
  -webkit-text-stroke: .5px currentColor;
}

/* Section headings are sans 600 (DESIGN.md Typography: serif only for page
   titles and brand moments); s126 S07 took the serif off h2. */
h2,
h2 * {
  font-family: var(--ssj-font-ui) !important;
  font-weight: var(--ssj-weight-emphasis) !important;
}

h3,
h4,
h5,
h6,
strong,
b,
button,
label,
.rail-nav a,
.workspace-tabs button,
.topbar .crumb {
  font-weight: var(--ssj-weight-emphasis) !important;
}

.eyebrow,
[class*="kicker"] {
  font-family: var(--ssj-font-ui) !important;
}

/* Japanese pages: Noto Sans JP's kana and punctuation are full-width, the old
   Yu Gothic UI ones were proportional (about 13% narrower on running text).
   "palt" gives the proportional widths back.  :where() keeps the specificity at
   zero, so the mono list below (which sets the feature back to normal) and the
   per-table rule win.  Chinese and English pages are not touched. */
:where(html:lang(ja)) * {
  font-feature-settings: "palt" !important;
}

/* CJK running text: Noto is wider than the old system fonts, so lines more
   often end with one orphaned character (「…くださ/い。」). pretty balances the
   last lines; it only changes where lines break, never what fits. */
:where(html:lang(ja), html:lang(zh), html:lang(zh-CN)) :is(p, li, dd, td, h1, h2, h3, .audit-title) {
  text-wrap: pretty;
}

/* staff-reports.css asks the report table for "tnum"; the !important above
   would drop it, so on Japanese pages the table keeps both. */
:where(html:lang(ja)) .report-table,
:where(html:lang(ja)) .report-table * {
  font-feature-settings: "palt", "tnum" !important;
}

/* The one list of what is set in IBM Plex Mono: codes and IDs (owner
   2026-10-19).  Page css names var(--ssj-font-mono) only for these selectors;
   tests/unit/test_self_hosted_fonts.py keeps the two in step.  Codes are
   never set proportionally, so palt is switched off here as well. */
code,
kbd,
samp,
pre,
.mono,
.line-code,
.fll-code,
.ssj-line-code,
.payroll-preview-engagement,
.account-form-grid input[readonly],
.stage-rail .rail-brand small,
.payroll-attention-code,
.cycle-item strong,
.cycle-pin strong,
.people-picker-trigger-meta,
.track-summary #engagement-code,
.assignee-chip small,
.streamer-chip small,
.history-type,
.history-person small,
.history-proof,
.kind-chip,
.audit-sequence,
.audit-evidence dd,
.audit-seq,
.audit-action,
.audit-hash,
.link-card .link-row .link-row-url,
.payslip-cycle {
  font-family: var(--ssj-font-mono) !important;
  font-feature-settings: normal !important;
}

.lead,
.page-lead,
.form-help,
.session-guidance,
.contact-note {
  font-family: var(--ssj-font-ui) !important;
  font-weight: 400 !important;
}

/* The grey date under the page crumb (2026.10.19 · JST) keeps the system face
   it had before the Noto switch (owner 2026-10-19).  html body raises the
   selectors over ops-shell.css's own !important rule. */
html body .ops-main > .topbar > div:not(.preferences) time,
html body .topbar time,
html body #business-date,
html body .business-date {
  font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif !important;
}
html:lang(zh) body .ops-main > .topbar > div:not(.preferences) time,
html:lang(zh) body .topbar time,
html:lang(zh) body #business-date,
html:lang(zh) body .business-date {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif !important;
}
html:lang(en) body .ops-main > .topbar > div:not(.preferences) time,
html:lang(en) body .topbar time,
html:lang(en) body #business-date,
html:lang(en) body .business-date {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}