/* ==========================================================================
   汉兴手册统一皮肤 · hanxing-manual.css
   --------------------------------------------------------------------------
   六个静态页共用：claude / codex / openclaw / Hermes ×2 / index。

   为什么是"皮肤"而不是重写：手册正文一个字都不许改，锚点、目录、答题闯关的
   JS 全靠现有的 class 名和 id 工作。所以这份表**只覆盖不删除**——
   在每个页面 <head> 里那段自带 <style> 的后面挂进来，靠同优先级下的源码顺序取胜。

   两级手段，顺序不要颠倒：

     1. 先改**令牌**。六个页面的配色全部走 CSS 变量（连 153 处内联 style 也是
        color:var(--txt) 这种写法），所以把 :root 那 66 个变量重定向到官网三色，
        九成的视觉就已经过来了，一条选择器都不用写。
     2. 再补**硬编码**。剩下的是写死在规则里的暖色（#f3eee2 的代码底、
        rgba(162,59,42,.05) 这类淡色块、极光渐变层），逐条按类别压掉。

   openclaw 在 <body> 里还有两段 <style>，位置比 <head> 的这个 <link> 靠后，
   只有那八条硬编码规则需要 !important——别把 !important 扩散到别处。

   官网三色系统（见 src/app/globals.css）：
     纸 #ffffff / 墨 #070707 #3a3a3a #6b6b6b / 汉兴红 #d71920 / 线 #e6e6e6 #d2d2d2
   红只做强调与行动，不铺底；层级靠留白和发丝线，不靠灰阶。
   ========================================================================== */

:root {
  /* ---- 官网口径的一手值，下面所有令牌都从这里派生 ---- */
  --hx-paper: #ffffff;
  --hx-paper-2: #f6f6f4; /* 元件级浅填充：代码底、表头、卡片 */
  --hx-paper-3: #ececea;
  --hx-ink: #070707;
  --hx-ink-2: #3a3a3a;
  --hx-ink-3: #6b6b6b;
  --hx-red: #d71920;
  --hx-red-wash: #fcedec;
  --hx-line: #e6e6e6;
  --hx-line-2: #d2d2d2;

  --hx-sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", sans-serif;
  --hx-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* 正文行宽：16px 下 42rem = 672px ≈ 42 个中文字。
     手册最影响阅读的一处就是这个——原来 .main 通栏铺满，1920 屏上一行 90 多字。 */
  --hx-measure: 42rem;

  /* 顶部返回条的高度。侧栏、进度条、锚点滚动偏移都从它算 */
  --hx-bar: 42px;

  /* ---- 令牌重定向 · claude / codex / hermes / hermes-advanced ---- */
  --bg: var(--hx-paper);
  --bg-1: var(--hx-paper-2);
  --bg-2: var(--hx-paper-2);
  --bg-card: var(--hx-paper);
  --bg-glass: var(--hx-paper);
  --border: var(--hx-line);
  --border-2: var(--hx-line-2);
  --text: var(--hx-ink);
  --text-2: var(--hx-ink-2);
  --text-3: var(--hx-ink-3);

  /* --gold 家族原本是"品牌强调"，整条并进汉兴红。
     -2 不再比 -1 亮一档：官网的红只有一个，渐变两端同色即视觉上的纯色。 */
  --gold: var(--hx-red);
  --gold-2: var(--hx-red);
  --gold-soft: var(--hx-red-wash);
  --gold-glow: transparent;

  /* emerald / cyan / violet / rose 是第四到第七种颜色，三色系统里没有它们的位置。
     按语义归并：正向与中性→墨色三档，负向与警示→红。
     答题闯关因此变成"对＝黑、错＝红"，比原来的绿/红更接近官网的表达。 */
  --emerald: var(--hx-ink);
  --emerald-soft: var(--hx-paper-2);
  --cyan: var(--hx-ink-3);
  --cyan-soft: var(--hx-paper-2);
  --violet: var(--hx-ink-2);
  --violet-soft: var(--hx-paper-2);
  --rose: var(--hx-red);
  --rose-soft: var(--hx-red-wash);

  --mono: var(--hx-mono);
  --sans: var(--hx-sans);

  /* 官网没有投影。层级一律交给发丝线 */
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
  --shadow-gold: none;

  /* ---- 令牌重定向 · openclaw ---- */
  --surf: var(--hx-paper);
  --surf2: var(--hx-paper-2);
  --surf3: var(--hx-paper-3);
  --bd: var(--hx-line);
  --bd2: var(--hx-line-2);
  --acc: var(--hx-red);
  --acc2: var(--hx-red);
  --acc3: var(--hx-ink);
  --warn: var(--hx-ink-3);
  --err: var(--hx-red);
  --win: var(--hx-ink-2);
  --mac: var(--hx-ink-2);
  --lnx: var(--hx-ink-2);
  --txt: var(--hx-ink);
  --muted: var(--hx-ink-2);
  --dim: var(--hx-ink-3);
  /* 官网圆角只有 2px（globals.css 的 .btn 等），这里跟齐 */
  --r: 2px;
  --rl: 2px;
  --rxl: 2px;

  /* ---- 令牌重定向 · index 导航站 ---- */
  --bg1: var(--hx-paper-2);
  --bg2: var(--hx-paper-2);
  --card: var(--hx-paper);
  --glass: var(--hx-paper);
  --t2: var(--hx-ink-2);
  --t3: var(--hx-ink-3);
  /* 四个工具原来各有一个品牌色。三色系统下不给工具发色号，统一红 */
  --claude: var(--hx-red);
  --claude2: var(--hx-red);
  --codex: var(--hx-red);
  --codex2: var(--hx-red);
  --claw: var(--hx-red);
  --claw2: var(--hx-red);
  --hermes: var(--hx-red);
  --hermes2: var(--hx-red);
  --em: var(--hx-ink);
  --em-s: var(--hx-paper-2);
  --amber: var(--hx-ink-3);
  --sh: none;
  --shlg: none;
}

/* ==========================================================================
   1 · 页面骨架
   ========================================================================== */

html {
  /* 锚点跳转要让出顶部返回条，否则标题被压在条下面 */
  scroll-padding-top: calc(var(--hx-bar) + 20px);
}

body {
  padding-top: var(--hx-bar);
  background: var(--hx-paper);
  color: var(--hx-ink);
  font-family: var(--hx-sans);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
}

/* 装饰层全部撤掉：极光渐变、方格网、扫描线、机械蓝图格、粒子画布。
   官网的"科技感"来自黑舞台与留白，不来自背景动效。 */
body::before,
body::after {
  display: none !important;
  content: none !important;
}

#particleCanvas,
.hero-glow,
.hero-mascot {
  display: none !important;
}

/* 磨砂玻璃在纯白纸面上什么也做不到，只会让边界发虚 */
.sidebar,
.to-top,
.q,
.hero-badge {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.sidebar {
  top: var(--hx-bar);
  height: calc(100vh - var(--hx-bar));
  background: var(--hx-paper);
  border-right: 1px solid var(--hx-line);
}

/* body 有了 padding-top，.layout 的 100vh 会多顶出一条返回条的高度 */
.layout {
  min-height: calc(100vh - var(--hx-bar));
}

.progress-track {
  top: var(--hx-bar);
  height: 2px;
  background: var(--hx-line);
}

.progress-fill {
  background: var(--hx-red);
}

.menu-toggle {
  top: calc(var(--hx-bar) + 12px);
  border-radius: 2px;
}

/* ==========================================================================
   2 · 顶部返回条
   固定在最上层：手册是同标签页打开的，读者必须随时回得去。
   克制到只有一条发丝线和 13px 的字——它是路标，不是导航。
   ========================================================================== */

.hx-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--hx-bar);
  padding-inline: clamp(14px, 3vw, 26px);
  background: var(--hx-paper);
  border-bottom: 1px solid var(--hx-line);
  font-family: var(--hx-sans);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.hx-topbar::-webkit-scrollbar {
  display: none;
}

.hx-topbar a {
  color: var(--hx-ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.hx-topbar a:hover {
  color: var(--hx-red);
  border-bottom-color: var(--hx-red);
}

/* 用 a.xxx 而不是 !important 压住上面那条 .hx-topbar a */
.hx-topbar a.hx-topbar-home {
  font-weight: 650;
  color: var(--hx-ink);
  letter-spacing: -0.01em;
}

.hx-topbar-sep {
  color: var(--hx-line-2);
}

/* 当前所在的手册：不是链接，只是告诉读者自己在哪一层 */
.hx-topbar-here {
  color: var(--hx-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   3 · 排版
   正文 16 / 1.75；标题按官网层级 h1≈40 · h2≈28 · h3≈20。
   ========================================================================== */

p,
li,
dd {
  color: var(--hx-ink-2);
  line-height: 1.75;
  overflow-wrap: break-word;
}

p strong,
li strong,
b {
  color: var(--hx-ink);
  font-weight: 650;
}

.hero h1,
h1 {
  font-family: var(--hx-sans);
  font-size: clamp(30px, 4.4vw, 40px);
  font-weight: 640;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--hx-ink);
}

h2,
.sec-header h2 {
  font-family: var(--hx-sans);
  font-size: clamp(23px, 2.6vw, 28px);
  font-weight: 640;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--hx-ink);
  flex-wrap: wrap;
}

h3 {
  font-size: 20px;
  font-weight: 640;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--hx-ink);
}

h4 {
  font-size: 17px;
  font-weight: 650;
  line-height: 1.5;
  color: var(--hx-ink);
}

/* 渐变填色的标题在三色系统里没有意义——两端同色时它只是个透明字。
   把 -webkit-text-fill-color 收回来，否则标题会整块消失。 */
.hero h1 .gradient,
.hero h1 span,
.brand-name,
.hero-stat-num,
.quiz-finish .score,
.hero h1 .g1,
.hero h1 .g2,
.hero h1 .g3 {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--hx-ink);
}

.hero-stat-num,
.hs-num,
.stat-val,
.tool-stat-num,
.quiz-finish .score {
  color: var(--hx-red) !important;
}

/* 装饰性 emoji：手册正文里的图标是内容，不动；
   这些是纯装饰的图标位，去色之后整页才收得进黑白红。 */
.nav-icon,
.sb-icon,
.ico,
.ti,
.c-icon,
.feat-ico,
.callout-icon,
.cap-ico,
.tool-emoji,
.common-ico,
.brand-logo,
.logo-icon,
.quiz-head .emoji,
.quiz-finish .trophy {
  filter: grayscale(1);
}

/* ==========================================================================
   4 · 阅读栏宽
   原来 .main 是通栏：1920 宽的屏上一行能排九十多个中文字，读到第三行就串行。
   给 .main 的直接子级一个 42rem 的居中栏，正文因此稳定在 38–42 字。
   表格、代码块、栅格卡片都在这条栏里，各自横向滚动，不再各自为政。
   ========================================================================== */

/* min-width:0 是这条栏能成立的前提，不是可选项。
   .main 是 .layout 的 flex 子项，flex 子项的 min-width 默认是 auto ——
   它于是不肯缩到"内容的最小宽度"以下。手册里最宽的那个元件（并排的流程条、
   多列栅格）把这个下限顶到 670 多 px，窄屏上 .main 就一直是 716px 宽，
   整页横向溢出。openclaw 的原样式自己写了 min-width:0，其余四本没写。 */
.main {
  min-width: 0;
}

.main > * {
  max-width: var(--hx-measure);
  margin-inline: auto;
}

/* index 是导航站不是读物：它没有长正文，只有四张对比卡，
   收到 42rem 会把卡片挤成两列窄条。给它一个自己的栏宽，但同样不通栏。 */
.wrap {
  max-width: 1020px;
  padding-inline: clamp(18px, 4vw, 40px);
}

.wrap p {
  max-width: var(--hx-measure);
}

.wrap .hero p {
  margin-inline: auto;
}

/* ==========================================================================
   5 · 代码
   浅灰底、等宽字、可横向滚动。原来的米黄底 #f3eee2 和"三个红绿灯圆点"
   都是另一套设计语言里的东西，去掉。
   ========================================================================== */

pre,
.code-block,
.filetree,
.tree,
.arch,
.soul-edit,
.term-demo,
.tool-chip .tip {
  background: var(--hx-paper-2);
  border: 1px solid var(--hx-line);
  border-radius: 2px;
  color: var(--hx-ink-2);
}

pre {
  /* 顶部这 32px 不是装饰留白：.code-label 与 .copy-btn 是绝对定位压在
     pre 右上角的（top:10–16px），收成常规内边距会直接盖住第一行命令。
     红绿灯圆点去掉后从 40px 收到 32px，刚好放得下那两个元件。 */
  padding: 32px 18px 16px;
  overflow-x: auto;
  box-shadow: none;
}

pre::before {
  content: none !important;
  display: none !important;
}

pre code,
.code-block pre,
.filetree,
.tree,
.arch,
.soul-edit {
  font-family: var(--hx-mono);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--hx-ink-2);
  background: none;
  border: none;
}

/* 行内 code：浅灰底、墨色字。原来是红字，正文里出现几十次就成了红色噪点 */
code {
  font-family: var(--hx-mono);
  font-size: 0.9em;
  background: var(--hx-paper-2);
  border: 1px solid var(--hx-line);
  border-radius: 2px;
  padding: 1px 6px;
  color: var(--hx-ink);
  overflow-wrap: break-word;
}

pre code {
  padding: 0;
  border-radius: 0;
}

/* 语法高亮收进三档墨色 + 红：注释最淡，关键字用红，其余走墨色。
   五种语法色在三色系统里没法保留，这是可读性与纪律之间的落点。 */
pre .c,
.cm,
.ft-cm,
.tree .note {
  color: var(--hx-ink-3);
  font-style: normal;
}

pre .k,
.ck,
.arch b,
.tree .dir {
  color: var(--hx-red);
}

pre .s,
pre .o,
.cs,
.cv,
.co,
.tree .file,
.arch .arr {
  color: var(--hx-ink-2);
}

.code-head {
  background: var(--hx-paper-2);
  border-bottom: 1px solid var(--hx-line);
}

.code-lang,
.code-label {
  font-family: var(--hx-mono);
  color: var(--hx-ink-3);
}

.copy-btn {
  background: var(--hx-paper);
  border: 1px solid var(--hx-line-2);
  border-radius: 2px;
  color: var(--hx-ink-3);
  font-family: var(--hx-sans);
}

.copy-btn:hover,
.copy-btn.ok {
  background: var(--hx-red);
  border-color: var(--hx-red);
  color: var(--hx-paper);
}

/* ==========================================================================
   6 · 表格
   细线、无斑马纹、表头加粗。窄屏交给容器横向滚动，绝不撑破版心。
   ========================================================================== */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-block: 16px;
}

th {
  padding: 11px 14px;
  text-align: left;
  background: none;
  color: var(--hx-ink);
  font-weight: 650;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  border-bottom: 1px solid var(--hx-ink);
}

td {
  padding: 11px 14px;
  color: var(--hx-ink-2);
  border-bottom: 1px solid var(--hx-line);
  overflow-wrap: break-word;
}

/* 斑马纹与整行 hover 底色都撤掉：官网表格靠线分行 */
tr:hover td,
tr:nth-child(even) td,
.model-table tr:hover td,
.cap-table .hermes-col td {
  background: none;
}

.tbl-wrap {
  overflow-x: auto;
}

/* ==========================================================================
   7 · 卡片 · 提示框 · 徽标
   原来靠七种彩色淡底区分语气。三色系统下改为：默认白底发丝线，
   需要强调的靠左侧一条红边，警示类才用极淡的红washes。
   ========================================================================== */

.card,
.feat,
.cmd-card,
.road-card,
.vs-col,
.step,
.qcard,
.labbox,
.flow-step,
.cl-item,
.gh-stats,
.tbl-item,
.q,
.q-opt,
.quiz-wrap,
details.cheat,
.qscore-bar {
  background: var(--hx-paper);
  border-color: var(--hx-line);
  border-radius: 2px;
  box-shadow: none !important;
}

.card:hover,
.feat:hover,
.cmd-card:hover,
.road-card:hover,
.step:hover,
.flow-step:hover,
.card.clickable:hover,
.skill-card:hover {
  border-color: var(--hx-line-2);
  transform: none;
  box-shadow: none !important;
}

/* 提示框：语气全部由左边线承担——中性用墨线，警示用红线 */
.callout,
.info {
  background: var(--hx-paper-2) !important;
  border: 1px solid var(--hx-line) !important;
  border-left: 2px solid var(--hx-ink) !important;
  border-radius: 2px;
  color: var(--hx-ink-2);
}

.callout-warn,
.danger,
.keypoint,
.security-notice {
  background: var(--hx-red-wash) !important;
  border-color: var(--hx-line) !important;
  border-left-color: var(--hx-red) !important;
}

.callout-tip,
.callout-info,
.tip,
.note,
.warn {
  border-left-color: var(--hx-ink) !important;
}

/* 彩色小徽标统一成"浅灰底 + 墨字"，只有真正的警示留红 */
.pill,
.b-min,
.b-rec,
.b-ok,
.cl-tag,
.t-feat,
.t-fix,
.t-sec,
.sk-badge,
.sec-tag,
.mb,
.mo,
.ps-ok,
.ps-opt,
.qlevel,
.module-tag,
.q-level,
.sk-tag,
.rec-chip,
.filter-btn {
  background: var(--hx-paper-2) !important;
  border-color: var(--hx-line) !important;
  border-radius: 2px;
  color: var(--hx-ink-2) !important;
}

.t-brk,
.mr,
.ps-no,
.q-level.hard,
.filter-btn.active {
  background: var(--hx-red-wash) !important;
  color: var(--hx-red) !important;
}

/* 渐变小方块（章节号、进度条填充）压成纯色 */
.sec-num,
.sec-num.green,
.sec-num.amber,
.sec-num.red,
.labbox .sec-num.lab,
.logo-icon,
.spec-fill,
.spec-fill.cyan,
.spec-fill.violet,
.spec-fill.emerald,
.spec-fill.rose,
.check-bar-fill,
.quiz-progress-fill,
.chat-msg.user {
  background: var(--hx-red) !important;
  border-radius: 2px;
  color: var(--hx-paper) !important;
  text-shadow: none !important;
}

/* 圆点、状态灯：只有两种状态——在与不在 */
.cl-dot,
.cl-dot.g,
.cl-dot.b,
.cl-dot.a,
.cl-dot.r,
.pulse,
.tl-dot,
.tl-dot.blue,
.tl-dot.green,
.tl-dot.purple,
.tl-dot.amber,
.hero-badge .dot {
  background: var(--hx-red) !important;
  border-color: var(--hx-red) !important;
}

/* 按钮统一到官网口径：实心红 = 主行动，白底细线 = 次行动，圆角 2px */
.btn,
.btn-gh,
.btn-acc,
.tool-btn,
.labbtn,
.qreset,
.tab,
.os-btn,
.mob-tab {
  border-radius: 2px;
  font-family: var(--hx-sans);
  box-shadow: none !important;
}

.btn-primary,
.btn-acc,
.tool-btn,
.nav-badge.hot {
  background: var(--hx-red) !important;
  border-color: var(--hx-red) !important;
  color: var(--hx-paper) !important;
}

.btn-primary:hover,
.btn-acc:hover,
.tool-btn:hover {
  background: #c91812 !important;
  transform: none;
}

.btn-ghost,
.btn-gh {
  background: var(--hx-paper) !important;
  border-color: var(--hx-line-2) !important;
  color: var(--hx-ink) !important;
}

.btn-ghost:hover,
.btn-gh:hover {
  border-color: var(--hx-red) !important;
  color: var(--hx-red) !important;
  transform: none;
}

/* 侧栏当前项：左边一条红线，不铺渐变底 */
.nav-item.active,
.sb-link.active,
.tab.active,
.mob-tab.active {
  background: var(--hx-paper-2) !important;
  border-left-color: var(--hx-red);
  color: var(--hx-red) !important;
}

.nav-item:hover,
.sb-link:hover {
  background: var(--hx-paper-2);
  color: var(--hx-ink);
}

/* openclaw 剩下的低透明度暖色块：单条看不出来，堆在一页上就是一层旧色调。
   统一压成"浅灰底 + 墨色左边线"，警示类才留红。 */
.update-bar,
.gh-mini,
.os-btn,
.os-btn.win-a,
.os-btn.mac-a,
.os-btn.lnx-a,
.sk-cmd,
.recommend-box,
.cli-chk,
.cli-warn,
.qwhy,
.filter-btn.active-green,
.win-opt.active {
  background: var(--hx-paper-2) !important;
  border-color: var(--hx-line) !important;
}

.os-btn.win-a,
.os-btn.mac-a,
.os-btn.lnx-a {
  /* 三个系统页签只区分"选中/未选中"，不各自发一个色号 */
  color: var(--hx-ink) !important;
  border-bottom-color: var(--hx-red) !important;
}

.cli-cross {
  background: var(--hx-red-wash) !important;
  border-color: var(--hx-red) !important;
}

.qwhy {
  border-left-color: var(--hx-ink) !important;
}

/* 技能卡按分类铺的渐变角标，五个类各一个颜色，直接撤掉 */
.skill-card::before,
.skill-card.cat-productivity::before,
.skill-card.cat-dev::before,
.skill-card.cat-marketing::before,
.skill-card.cat-comms::before,
.skill-card.cat-ops::before {
  background: none !important;
}

.skill-card.cat-productivity:hover,
.skill-card.cat-dev:hover,
.skill-card.cat-marketing:hover,
.skill-card.cat-comms:hover,
.skill-card.cat-ops:hover {
  border-color: var(--hx-line-2) !important;
}

/* openclaw hero 的暖色渐变盒 → 白底一条底线，和官网的版块开场一致 */
.hero {
  background: none !important;
  border: none;
  border-bottom: 1px solid var(--hx-line);
  border-radius: 0;
}

.hero::before,
.hero::after {
  display: none !important;
  content: none !important;
}

.hero-badge {
  background: var(--hx-paper-2);
  border: 1px solid var(--hx-line);
  border-radius: 2px;
  color: var(--hx-ink-2);
}

/* openclaw 的 <body> 内联样式块排在这个 <link> 后面，
   下面这几条是唯一需要 !important 才压得住的——别再往这一段加东西。
   类名就是中文（原文如此，CSS 标识符允许非 ASCII，不要转义）。 */
.qlevel.入门,
.qlevel.进阶,
.qlevel.精通 {
  background: var(--hx-paper-2) !important;
  color: var(--hx-ink-2) !important;
}

.qopt.correct {
  background: var(--hx-paper-2) !important;
  border-color: var(--hx-ink) !important;
}

.qopt.wrong,
.q-opt.wrong {
  background: var(--hx-red-wash) !important;
  border-color: var(--hx-red) !important;
}

.milestone,
.capstone {
  background: var(--hx-paper-2) !important;
  border-left-color: var(--hx-ink) !important;
}

.labbtn {
  border-color: var(--hx-line-2) !important;
  color: var(--hx-ink) !important;
}

.labbtn:hover {
  background: var(--hx-red) !important;
  border-color: var(--hx-red) !important;
  color: var(--hx-paper) !important;
}

/* 答题闯关：对＝墨、错＝红 */
.q-opt.correct .q-opt-mark,
.q.done .q-num,
.check-item.done .check-box,
.milestone input[type="checkbox"]:checked {
  background: var(--hx-ink) !important;
  border-color: var(--hx-ink) !important;
  color: var(--hx-paper) !important;
}

.q-feedback.ok {
  background: var(--hx-paper-2);
  border-color: var(--hx-line);
  color: var(--hx-ink);
}

.q-feedback.no {
  background: var(--hx-red-wash);
  border-color: var(--hx-red);
  color: var(--hx-red);
}

/* Hermes 基础篇里仅有的 14 处写死颜色，全部在 style="" 上——
   内联样式只有 !important 压得住。别的五个页面的内联样式都走变量，不用管。 */
.tl[style] {
  /* 终端窗口的三个圆点是窗框装饰，不承载语义，收成一档线色 */
  background: var(--hx-line-2) !important;
}

.tfill[style*="#c8541b"] {
  /* 耗时对比的基线条：灰。上面压白字，用 ink-3 才够对比度 */
  background: var(--hx-ink-3) !important;
}

.tfill[style*="#3f6b4f"] {
  /* 对比后更短的那条才是结论，给红 */
  background: var(--hx-red) !important;
}

[style*="color:#8a5a3a"],
[style*="color:#b07d23"] {
  color: var(--hx-ink-2) !important;
}

.to-top {
  background: var(--hx-paper);
  border: 1px solid var(--hx-line-2);
  border-radius: 2px;
  color: var(--hx-ink-2);
  box-shadow: none;
}

.to-top:hover {
  border-color: var(--hx-red);
  color: var(--hx-red);
  transform: none;
}

.footer {
  border-top: 1px solid var(--hx-line);
  color: var(--hx-ink-3);
}

/* ==========================================================================
   8 · 窄屏（390 实测基准）
   一条硬线：正文不许溢出，宽内容各自横向滚动。
   ========================================================================== */

@media (max-width: 900px) {
  /* 侧栏收起后返回条就是唯一的出口，位置要更稳 */
  .hx-topbar {
    font-size: 12.5px;
  }
}

@media (max-width: 720px) {
  :root {
    --hx-bar: 40px;
  }

  /* display:block + overflow-x:auto 是宽表格在窄屏唯一不撑破版心的做法。
     中文能任意换行，多数表格其实压得下，压不下的那几张才真的出滚动条。 */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  pre,
  .code-block pre,
  .filetree,
  .tree,
  .arch,
  .gh-stats {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

    /* 同一个 min-width:auto 的坑，在每个 display:flex 的元件里再踩一遍：
     提示框、步骤条、时间线的文字栏都是 flex 子项，里面只要有一段
     不可断行的命令或 URL，这一栏就撑到那段的宽度，把整页顶出去。 */
  .callout > *,
  .info > *,
  .step > *,
  .cl-item > *,
  .capstone > *,
  .q-opt > *,
  .qopt > *,
  .milestone > *,
  .gh-st > * {
    min-width: 0;
  }

  /* 长命令、长 URL 在 346px 的栏里必须能断。
     用 anywhere 不用 break-word：只有 anywhere 会同时缩小元素的
     min-content 宽度，break-word 让它照样把父容器顶开。 */
  code,
  td,
  .callout-body,
  .info,
  .sd,
  .c-desc {
    overflow-wrap: anywhere;
  }

  /* 栅格一律退成单列，minmax(255px,1fr) 在 346px 的可用宽里会顶出去 */
  .cmd-grid,
  .feat-grid,
  .cheat-grid,
  .grid,
  .vs,
  .roadmap {
    grid-template-columns: 1fr;
  }

  /* 流程条在窄屏改竖排，箭头的绝对定位跟着撤掉 */
  .flow {
    flex-direction: column;
  }

  .flow-step:not(:last-child)::after {
    content: none;
  }

  .flow-step:first-child,
  .flow-step:last-child {
    border-radius: 2px;
  }
}

/* ==========================================================================
   9 · 打印
   ========================================================================== */

@media print {
  body {
    padding-top: 0;
  }

  .hx-topbar {
    display: none;
  }
}
