/* ==========================================================================
   hydro-typography.css —— 版式层 v14（20px 基准 + wiki 同宽容器 + 标题字体）
   作用域：hydro-ui-apple addon，/public 挂静态，模板尾部一行 link 引入

   本版实现《OJ 字体全套改造方案（最终版）》：
     · 主线是 rem 基准 16 → 20（等效 Ctrl++ 125%），不是继续放大字号系数
     · 窄屏基准 13 → 16（不再缩到 81%）
     · 字重 300 → 400、强调 700
     · 行高 1 → 1.5、段落 margin 1em、容器 padding 16/24、行宽 42em
     · 容器宽度对齐 wiki：1220px，≥1600 时 1342px（wiki 61rem × 20/22px）

   v14（2026-10-19）只动 h1：
     页面标题由 32px 鸿蒙 Regular 换成 28px 汉仪文黑 85W（子集分片字体），
     Latin 一并交给 85W，去掉「Fira 拉丁 + 鸿蒙汉字」的骨架拼接感。

   加载顺序：
     theme-*.css → hydro-apple.css（设计系统）→ hydro-home.css（首页）
     → fonts-fira.css / fonts-harmony/*.css / fonts-mono.css
     → fonts-hanyi/fonts-hanyi.css（标题）→ 本文件

   ⚠ 为什么多数选择器带 :root:root
     Hydro 运行时（entry.js）会二次注入 /theme-*.css?hash，文档顺序在本文件之后，
     同特异度规则会被反超。:root:root 把特异度抬到 (0,2,x)，不依赖加载顺序。
     例外：表单控件 / 图标不能抬特异度（会压掉 .icon 的 hydro-icons 字体）。

   ⚠ 与方案原文的四处偏差（均为实测后修正，详见 TYPOGRAPHY.md）
     1. .row 的 max-width 在本主题里已经是 px（980 / 1200），不是 rem，
        不会随 20px 基准溢出。按需求把它统一成 wiki 的 61rem 实际值：
        1220px，≥1600 时 1342px（wiki 此时根字号 22px）。
     2. 方案里 h4~h6 写 0.8rem，那会让 h4（16px）比正文（20px）还小；
        改为 1rem，保持「h4 与正文同号」的原始语义。
     3. .typo h1 补一条 1.6rem / 500：不补的话正文 h1 会是 1.8em = 36px，
        比页面标题（32px）还大，层级倒挂。
   ========================================================================== */

/* ==========================================================================
   B1 · 字体栈
   ========================================================================== */

/* 1. 变量层 ---------------------------------------------------------------
   主题把 --font-family 定义在 body 上，变量取「最近祖先的定义」，
   所以必须跟着定义在 body（且要压过运行时注入的 body 规则）。         */
:root:root body,
:root:root {
  --font-family: "Fira Sans", "HarmonyOS Sans SC", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --code-font-family: "JetBrains Mono", "Fira Mono", "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;
  /* 标题专用：汉仪文黑 85W（子集 + 分片，见 fonts-hanyi/fonts-hanyi.css）
     Latin 也走它，避免「Fira 的 t1 + 鸿蒙的汉字」两种骨架拼在一起。 */
  --font-display: "HanYi WenHei 85", "Fira Sans", "HarmonyOS Sans SC",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* 2. 字体绑定 -------------------------------------------------------------
   body 用高特异度钉住；表单控件用 inherit，避免 (0,2,x) 压掉 .icon 的图标字体 */
:root:root body {
  font-family: var(--font-family);
}
input,
textarea,
select,
button {
  font-family: inherit;
}
code,
kbd,
pre,
samp,
.cm-s-vjcm,
.cm-editor .cm-content {
  font-family: var(--code-font-family);
}

/* 鸿蒙 @font-face 的 size-adjust 在 fonts-harmony/*.css 里，本版 104%
   （20px 下墨迹 19.55 vs 雅黑 19.6，差 0.05px；见 TYPOGRAPHY.md §3） */

/* ==========================================================================
   B2 · 尺度：rem 基准 16 → 20（核心）
   ========================================================================== */

/* 3. 根字号 ---------------------------------------------------------------
   原状：桌面浏览器默认 16px；≤600px 时主题写死 html{font-size:13px}
   这里 :root 特异度 (0,1,0) 高于 html (0,0,1)，且注入更晚，可稳定覆盖 */
:root:root {
  font-size: 20px;
}

@media only screen and (max-width: 600px) {
  :root:root {
    font-size: 16px;   /* 窄屏不再缩到 13px（81%） */
  }
}

/* 4. 随基准放大的固定尺寸 ------------------------------------------------
   以下三处原来用 rem 表达，基准提到 20px 后会变成 56.25 / 48.75 / 66px，
   直接钉成设计值，避免顶栏在小数像素上抖动 */
:root:root .nav {
  height: 56px;
}
:root:root .nav .nav__item {
  /* 行盒 49 + 上下 padding 3.4×2 = 55.8，正好装进 56px 的 nav；
     写 50 会变成 56.8，多出 0.8px 溢出到彩虹分隔线 */
  line-height: 49px;
}
:root:root .header--mobile {
  min-height: 56px;
}

/* 5. 容器宽度对齐 wiki -----------------------------------------------------
   wiki 的 .md-grid 是 `max-width:61rem`，而它的根字号是 20px（≥1600 时 22px），
   所以实测等于 1220px，宽屏 1342px。OJ 原来是 1200 / 980（960 档固定），
   这里统一成同一组值，并让 nav / main / footer 三处同步（否则顶栏与正文错位）。
   注意：模板里 .row 的 980 是主题自带的，必须用同等特异度覆盖。            */
:root:root .nav > .row,
:root:root .main > .row,
:root:root .footer > .row {
  max-width: 1220px;
}
@media only screen and (min-width: 1600px) {
  :root:root .nav > .row,
  :root:root .main > .row,
  :root:root .footer > .row {
    max-width: 1342px;
  }
}

/* ==========================================================================
   B3 · 字重 / 字号层级
   ========================================================================== */

/* 5. 字重 ---------------------------------------------------------------
   原状：h1~h6 统一 300；strong/b 是 400，等于没有强调层级              */
:root:root h1, :root:root h2, :root:root h3,
:root:root h4, :root:root h5, :root:root h6 {
  font-weight: 400;
}
:root:root strong,
:root:root b,
:root:root .typo strong,
:root:root .typo b {
  font-weight: 700;
}

/* 6. 字号层级 -------------------------------------------------------------
   20px 基准下：1.4rem=28 / 1.25rem=25 / 1rem=20 / 0.8rem=16              */

/* 页面标题（h1.section__title / 正文 h1）----------------------------------
   原状 1.6rem=32px、鸿蒙 Regular、灰 #646464：字大而字面单薄，顶上像贴了
   一块灰砖。这里换成汉仪文黑 85W（标题专用子集字体），并把字号收到
   1.3rem=26px —— 85W 是 Heavy 一档，比鸿蒙 Regular 重得多，字号砍掉
   19%（32→26）后整块墨量才回落到「结实但不压人」，字面也更「方」。
   · letter-spacing .02em：85W 字面收紧，加一点字距才不挤
   · font-synthesis: none：85W 只有一档，禁止浏览器再叠一次伪粗
   · :not(.training-section-status--text)：题单右侧「已完成/进行中」也是
     h1.section__title，不能跟着放大加粗（单独在下面收小）              */
:root:root h1.section__title:not(.training-section-status--text),
:root:root .section__header h1.section__title:not(.training-section-status--text),
:root:root .typo h1 {
  font-family: var(--font-display);
  font-size: 1.3rem;      /* 26px */
  font-weight: 400;
  line-height: 1.35;      /* 35.1px（原固定 35px） */
  letter-spacing: .02em;
  font-synthesis: none;
}

/* 题单章节标题（h1#node-1.section__title）---------------------------------
   一页几十个章节，不能按「页面标题」的规格排，否则整页都在喊。
   收小到 1.1rem=22px，只保留 85W 的字面气质。                          */
:root:root .training__section h1.section__title:not(.training-section-status--text),
:root:root .training__section h1[id^="node-"] {
  font-size: 1.1rem;      /* 22px */
  line-height: 1.35;
}

/* 题单章节状态：沿用正文字体，18px，不再参与标题字号 */
:root:root h1.training-section-status--text {
  font-family: var(--font-family);
  font-size: .9rem;       /* 18px */
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  font-synthesis: none;
}
:root:root .typo h2,
:root:root h2.section__title {
  font-size: 1.25rem;     /* 25px */
  font-weight: 400;
  line-height: 1.2;
  margin: 1em 0 .6em;
}
:root:root .typo h3,
:root:root h3.section__title {
  font-size: 1rem;        /* 20px */
  font-weight: 400;
  line-height: 1.3;
  margin: 1em 0 .5em;
}
:root:root .typo h4, :root:root .typo h5, :root:root .typo h6 {
  font-size: 1rem;        /* 20px，与正文同号（方案原文 0.8rem 会更小，已修正） */
  font-weight: 400;
  line-height: 1.4;
}

/* 行内 code：0.8rem = 16px（正文 20px 的 80%，与 wiki 的 14/16 同比例） */
:root:root :not(pre) > code,
:root:root :not(pre) > kbd,
:root:root .typo :not(pre) > code,
:root:root .typo :not(pre) > kbd {
  font-size: .8rem;
}

/* ==========================================================================
   B4 · 行高 / 间距 / 留白 / 行宽
   ========================================================================== */

/* 7. 行高与块间距 ---------------------------------------------------------
   原状：body{line-height:1} → 正文行高等于字号；.typo p 用 padding .27em */
:root:root body {
  line-height: 1.5;
}
:root:root .typo {
  line-height: 1.5;
}
:root:root .typo > :first-child {
  margin-top: 0;
}
:root:root .typo p {
  margin: 1em 0;          /* 20px @20 基准 */
  padding: 0;             /* 原 padding .27em 0，与 margin 语义重复 */
  line-height: 1.6;       /* 32px */
  font-size: inherit;
}
:root:root .typo li,
:root:root .typo ol,
:root:root .typo ul {
  line-height: 1.6;
}
:root:root .typo blockquote {
  margin: 1.2em 0;
  padding: .25em 0 .25em 1em;
  border-left: 3px solid rgba(0, 0, 0, .12);
  line-height: 1.6;
}
:root:root .typo hr {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
}
:root:root .typo table th,
:root:root .typo table td {
  line-height: 1.5;
}

/* 代码块：Prism 用 pre[class*="language-"]{font-family:Consolas,...} (0,1,1)
   压过了继承栈，不抬特异度拉不回来；字号统一到 16px，行高 1.5 便于阅读 */
:root:root .typo pre,
:root:root .typo pre code,
:root:root .typo pre[class*="language-"],
:root:root .typo pre[class*="language-"] code,
:root:root .typo code[class*="language-"],
:root:root pre.syntax-hl,
:root:root pre.syntax-hl code,
:root:root .md-editor-scrn pre.syntax-hl code {
  font-family: var(--code-font-family);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
}

/* 连字必须关：JetBrains Mono / Fira 会把 >= 显示成 ≥、!= 显示成 ≠、-> 显示成 →，
   初学者照着屏幕敲会直接编译失败。行内 code 同样处理。 */
:root:root .typo code,
:root:root .typo kbd,
:root:root .typo samp,
:root:root code {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
}
:root:root .typo pre {
  font-size: .8rem;       /* 16px */
  line-height: 1.5;       /* 24px */
  margin: 1em 0;
  padding: .75rem 1rem;
}

/* 8. 内边距与正文行宽 -----------------------------------------------------
   原状：.section__header 15px 15px 0；.section__body .7em .9375rem       */
:root:root .section__header {
  padding: 1.2rem 1.5rem 0;    /* 24 / 30 */
}
/* 主题有一条 `.section > .section__body:last-child{padding-bottom:.9375rem}`
   特异度更高，必须用同样的复合选择器再抬一级 */
:root:root .section__body {
  padding: 1rem 1.5rem 1.2rem; /* 20 / 30 / 24 */
}
:root:root .section > .section__body:first-child {
  padding-top: 1rem;
}
:root:root .section > .section__body:last-child {
  padding-bottom: 1.2rem;
}
:root:root .section + .section {
  margin-top: 1.5rem;
}

/* 行宽 42em = 840px @20 基准（约 40 汉字/行）。
   OJ 题目卡片正文容器 870px，840 只收 30px，不会出现空白带。
   h2 / h3 同样写 42em：它们字号更大，42em 反而超过容器，等于不生效。      */
:root:root .typo > p,
:root:root .typo > ul,
:root:root .typo > ol,
:root:root .typo > blockquote,
:root:root .typo > h2,
:root:root .typo > h3 {
  max-width: 42em;
}
/* 表格 / 代码块不受行宽限制（各自横向滚动） */
:root:root .typo table,
:root:root .typo pre {
  max-width: none;
}
/* ≥1600 时容器涨到 1342，正文列 969px；42em（840）会右侧空出 129px，
   看着像排版缺一块。宽屏下放开行宽，让正文吃满列宽（约 46 字/行）。      */
@media only screen and (min-width: 1600px) {
  :root:root .typo > p,
  :root:root .typo > ul,
  :root:root .typo > ol,
  :root:root .typo > blockquote,
  :root:root .typo > h2,
  :root:root .typo > h3 {
    max-width: none;
  }
}
/* 错误页容器：主题写死 43.75rem，20px 基准下 = 875px，768 宽度直接横向溢出 */
:root:root .error__container {
  max-width: 100%;
}

/* 题目内容：语言切换 tab（简体中文 / English）与正文之间留白 ----------------
   主题用 `.section__tab-header{padding-bottom:20px;margin-bottom:-20px}` 把
   tab 的下内边距抵消掉了，于是 tab 底边与 .typo 顶边完全贴合，正文标题
   看起来像直接挂在 tab 上。给 wrapper 单独补 1.1rem（20px 基准 22px，
   窄屏 16 基准 17.6px）——用 wrapper 而不是 container，没有 tab 的页面
   不会多出一块空白。                                                   */
:root:root .problem-content .section__tab-header-wrapper {
  margin-bottom: 1.1rem;
}

/* 无障碍：图片不超出容器 */
:root:root .typo img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   B5 · 首页字体收口
   ========================================================================== */

/* 首页 hero / 资源区是营销排版，字号用 clamp(px, vw) 固定，不受行宽限制 */
:root:root .oj-slogan-grid h1,
:root:root .oj-resource-block h3 {
  max-width: none;
}
:root:root.page--homepage {
  --hz-font-sans: "SF Pro Text", "Fira Sans", "HarmonyOS Sans SC", -apple-system,
    BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --hz-font-display: "SF Pro Display", "Fira Sans", "HarmonyOS Sans SC",
    -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    sans-serif;
  --hz-font-mono: "JetBrains Mono", "Fira Mono", Consolas, monospace;
}