/* =========================================================================
   家庭能源工具站 · 全站样式表（单一事实源）
   版本 v1.0 · 2026-11-01 · 视觉骨架 L1「工作台」已由用户选定
   -------------------------------------------------------------------------
   规则：
   1. 页面不得写字面 hex / rgb，只能用本文件 :root 的语义 token（门 7.3 会扫）。
   2. 字号只能取 --fs-* 档位；正文 ≥17px、标签 ≥12px（门 7 / 可读性硬线）。
   3. 组件类名遵 `_单页生产SOP与计算器组件规范.md` §2.1：
      .calc / .calc__head / .calc__body / .calc__row / .calc__result /
      .result-item / .calc__reco / .calc__error
   4. 字体：标题 Public Sans 700（自托管 latin 子集，14.3KB）；正文与数据用系统栈。
   5. 无图片、无框架、无渐变装饰；单页 gzip ≤30KB。
   ========================================================================= */

/* ---------- 字体（仅标题，1 个字重） ---------- */
@font-face {
  font-family: "Public Sans";
  src: url("./fonts/public-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 语义 token（只在这里出现颜色/尺寸数值） ---------- */
:root {
  /* 中性色：冷灰纸面 + 纯白板面 */
  --c-bg: #FFFFFF;
  --c-surface: #FFFFFF;
  --c-surface-2: #F6F5F0;
  --c-ink: #0D0D0D;
  --c-ink-2: #333333;
  --c-ink-3: #5C5C5C;
  --c-rule: #B8B3A8;
  --c-rule-strong: #0D0D0D;
  --c-rule-soft: #DDD9D1;

  /* 强调色：深青（不用黄：两家对标站都用黄做 CTA，会撞） */
  --c-accent: #C2321F;
  --c-accent-soft: #FBEAE6;
  --c-accent-ink: #FFFFFF;
  --c-danger: #8E2D1C;
  /* 电器分类色（颜色＝类别，仅用于图标与分类条，不用于大面积底色） */
  --c-rail: #F6F5F0;      /* 右侧工具区底色 */
  --c-rail-foot: #EFEDE6; /* 工具区底部分区 */
  --c-cat-cooling: #1C6DD0;
  --c-cat-light: #8A5200;
  --c-cat-net: #0B7A5A;
  --c-cat-comfort: #B5346B;
  --c-cat-kitchen: #6B46C1;
  --c-cat-medical: #0E6E80;
  --c-cat-brand: #C2321F;
  --c-cat-neutral: #4A4A46;

  /* 字体族 */
  --f-display: "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --f-data: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* 字阶（1.25 比例，正文 17px 起） */
  --fs-xs: 12px;      /* 标签下限 */
  --fs-sm: 13.5px;
  --fs-base: 15px;
  --fs-body: 17px;    /* 正文基准 */
  --fs-lead: 19px;
  --fs-h3: 22px;
  --fs-h2: 34px;
  --fs-h1: 62px;
  --fs-display: 62px;

  /* 行高（随行长，西文） */
  --lh-tight: 1.06;
  --lh-head: 1.15;
  --lh-body: 1.62;

  /* 间距（4 的倍数） */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* 结构 */
  --line: 1px;
  --rail-w: 412px;
  --shell-max: 1320px;
  --measure: 820px;
  --radius: 0px;
  --shadow-card: 0 1px 0 rgba(20, 24, 28, .06);
}

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis: none;
  text-wrap: pretty;
}
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--c-ink); text-underline-offset: 3px; }
img, svg { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- 版式工具 ---------- */
.h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(34px, 4.4vw, var(--fs-h1)); line-height: .98; letter-spacing: -.035em; }
.h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(24px, 2.6vw, var(--fs-h2)); line-height: 1.04; letter-spacing: -.03em; }
.h3 { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-head); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--c-ink-2); max-width: 52ch; }
.prose { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink-2); max-width: 66ch; }
.prose > * + * { margin-top: var(--sp-3); }
.prose strong { color: var(--c-ink); font-weight: 600; }
.lbl {
  font-family: var(--f-data); font-size: var(--fs-xs);
  color: var(--c-ink-3);
}
.num { font-family: var(--f-data); font-variant-numeric: tabular-nums slashed-zero; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--sp-6); }
.divider { border: 0; border-top: var(--line) solid var(--c-rule); margin: var(--sp-6) 0; }

/* ---------- 页头（全站一致） ---------- */
.site-header { background: var(--c-surface); border-bottom: var(--line) solid var(--c-rule); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); padding: var(--sp-3) 0;
}
.brand {
  font-family: var(--f-display); font-weight: 700; font-size: 14px;
  text-decoration: none; color: var(--c-ink);
}
.nav { display: flex; gap: var(--sp-5); font-size: var(--fs-sm); }
.nav a { color: var(--c-ink-2); text-decoration: none; }
.nav a:hover { color: var(--c-ink); text-decoration: underline; }
.nav a[aria-current="page"] { color: var(--c-ink); font-weight: 600; }
.site-header .meta { font-family: var(--f-data); font-size: var(--fs-xs); color: var(--c-ink-3);  }

/* ---------- L1 骨架：左侧常驻栏 + 右侧内容 ---------- */
/* 整站居中：1920 屏下不再在右侧留下 620px 空白；工具在右，内容在左 */
.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  min-height: 100vh;
  max-width: var(--shell-max);
  margin-inline: auto;
}
/* 必须显式给 grid-row：否则 auto-placement 会把 pane 排到 rail 下面（第二行） */
.pane { grid-column: 1; grid-row: 1; }
.rail { grid-column: 2; grid-row: 1; }
.rail {
  background: var(--c-rail); border-left: var(--line) solid var(--c-rule);
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
}
.rail__head { height: 78px; padding: 0 var(--sp-4); display: flex; flex-direction: column; justify-content: center; gap: 3px; border-bottom: var(--line) solid var(--c-rule); }
.rail__sub { font-size: 15px; color: var(--c-ink-3); }
.rail__title {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
}
.rail__title h2, .rail__title .h-label { font-family: var(--f-display); font-weight: 700; font-size: 15px; }
.rail__list { flex: 1; overflow-y: auto; padding: 0 var(--sp-2) var(--sp-2); display: flex; flex-direction: column; }
/* 行随可用高度均分，避免底部出现一大块空白（上限 64px，防超高屏被拉长） */
.rail__list > .item { flex: 1 1 auto; max-height: 64px; }
.rail__foot { border-top: var(--line) solid var(--c-rule); padding: 12px var(--sp-4) 14px; background: var(--c-rail-foot); }
.pane { min-width: 0; }
.pane__body { padding: var(--sp-6) var(--sp-7) 0; max-width: calc(var(--measure) + var(--sp-7) * 2); }
.pane__top { padding: 0 var(--sp-7); }
/* 报头内容锁到与正文同宽；线只跨这一段，起点与左侧导航文字对齐 */
.topbar-wrap {
  position: relative;
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: var(--sp-4); max-width: var(--measure); height: 78px;
}
.topbar-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--line); background: var(--c-rule);
}

/* 电器行（左栏用） */
.item {
  display: grid; grid-template-columns: 18px 10px 20px 1fr auto; gap: 7px;
  align-items: center; padding: 8px var(--sp-3); border: 1px solid transparent;
  border-radius: var(--radius); cursor: pointer;
}
.item:hover { background: var(--c-rail-foot); }
.item[data-on="true"] { background: var(--c-surface); border-color: var(--c-rule-soft); }
.item__name { font-size: 16px; line-height: 1.3; }
.item__ic { width: 20px; height: 20px; fill: none; stroke: var(--c-ink-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.item[data-on="false"] .item__ic { stroke: var(--c-ink-3); }
.item__io { display: flex; align-items: center; gap: 4px; font-family: var(--f-data); font-size: 14px; color: var(--c-ink-3); }
.item input[type="checkbox"] {
  appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--c-ink-3);
  border-radius: 2px; background: var(--c-surface); margin: 0; position: relative; cursor: pointer;
}
.item input[type="checkbox"]:checked { background: var(--c-accent); border-color: var(--c-accent); }
.item input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 4.5px; top: 1px; width: 6px; height: 10px;
  border: 1.5px solid var(--c-accent-ink); border-top: 0; border-left: 0; transform: rotate(40deg);
}
.item input[type="number"] {
  width: 42px; border: var(--line) solid var(--c-rule); background: var(--c-surface);
  font-family: var(--f-data); font-size: 15px; text-align: right; padding: 3px 4px;
  appearance: textfield; cursor: text; border-radius: 0;
}
.item input[type="number"]:hover { border-color: var(--c-ink-3); }
.item input[type="number"]:focus-visible { border-color: var(--c-accent); outline: 2px solid var(--c-accent-soft); }
.item input[type="number"]::-webkit-outer-spin-button,
.item input[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* 合计（左栏底部常驻） */
.totals__row { display: flex; align-items: baseline; justify-content: space-between; padding: 5px 0; line-height: 1.35; }
.totals__row span { font-family: var(--f-body); font-size: 14px; color: var(--c-ink-3); }
.totals__row b { font-family: var(--f-display); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.totals__row--hero b { font-size: 23px; color: var(--c-accent); letter-spacing: -.02em; }

/* 轻量文字按钮（左栏 Reset 等） */
.btn-link {
  font-family: var(--f-data); font-size: var(--fs-xs); 
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px;
}
.btn-link:hover { color: var(--c-ink); }
/* ---------- 计算器组件（SOP §2.1 规定的五件） ---------- */
.calc { background: var(--c-surface); border: 1px solid var(--c-rule); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.calc__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border-bottom: var(--line) solid var(--c-rule);
}
.calc__head h2 { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h3); }
.calc__head p { font-size: var(--fs-sm); color: var(--c-ink-3); margin-top: 2px; }
.calc__body { padding: var(--sp-2) 0; }
.calc__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 132px 96px;
  gap: var(--sp-3); align-items: center;
  padding: var(--sp-2) var(--sp-4); border-bottom: var(--line) solid var(--c-rule);
}
.calc__row:last-child { border-bottom: 0; }
.calc__row:hover { background: var(--c-surface-2); }
.calc__row label { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: 15px; min-height: 32px; }
.calc__row .hint { display: block; font-size: var(--fs-xs); color: var(--c-ink-3); font-weight: 400; }
.calc__input {
  width: 100%; border: 1px solid var(--c-rule); border-radius: 2px; background: var(--c-surface);
  font-family: var(--f-data); font-size: var(--fs-sm); text-align: right; padding: 3px 4px;
  font-variant-numeric: tabular-nums; appearance: textfield;
}
.calc__input::-webkit-outer-spin-button,
.calc__input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.calc__input:focus { border-color: var(--c-accent); }
.calc__unit { font-family: var(--f-data); font-size: var(--fs-xs); color: var(--c-ink-3); }
.calc__result {
  border-top: var(--line) solid var(--c-rule-strong); background: var(--c-surface);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.result-item { padding: var(--sp-3) var(--sp-4); border-right: var(--line) solid var(--c-rule); }
.result-item:last-child { border-right: 0; }
.result-item dt, .result-item .k { font-family: var(--f-body); font-size: var(--fs-xs); color: var(--c-ink-3); }
.result-item dd, .result-item .v {
  margin: 4px 0 0; font-family: var(--f-display); font-weight: 700;
  font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.result-item--hero .v, .result-item--hero dd { color: var(--c-accent); }
.result-item .u { font-family: var(--f-body); font-weight: 400; font-size: var(--fs-xs); color: var(--c-ink-3); margin-left: 3px; }
.calc__reco { border-top: var(--line) solid var(--c-rule); padding: var(--sp-3) var(--sp-4); background: var(--c-surface-2); }
.calc__error {
  margin: var(--sp-2) var(--sp-4); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-danger); color: var(--c-danger);
  font-size: var(--fs-sm); border-radius: 2px; background: var(--c-surface);
}
.calc__error[hidden] { display: none; }

/* ---------- 首图位（先用纯色占位，替换真图时只改 background） ---------- */
.plate { height: 200px; background: #EDEAE2; margin-bottom: var(--sp-5); }

/* ---------- 正文块 ---------- */
.section { padding: var(--sp-7) 0 0; max-width: var(--measure); }
.section > .h2 { padding-bottom: 0; border-bottom: 0; margin-bottom: var(--sp-3); }
.answer {
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-4);
  background: var(--c-surface); border-left: 3px solid var(--c-accent); max-width: 58ch;
}
.answer p { font-size: var(--fs-base); line-height: 1.62; color: var(--c-ink-2); }
.answer p + p { margin-top: var(--sp-2); }
.answer b { color: var(--c-ink); font-weight: 600; }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-2); }
.facts > div { background: var(--c-surface); border: 1px solid var(--c-rule); padding: var(--sp-3); border-radius: var(--radius); }
.fact__k { font-family: var(--f-body); font-size: var(--fs-xs); margin-bottom: 5px; }
.fact__v { margin: 0; font-size: 14px; line-height: 1.5; color: var(--c-ink-2); }
.facts .fml { display: block; margin-top: 7px; font-family: var(--f-data); font-size: 14px; color: var(--c-accent); }

/* ---------- 表格 ---------- */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: var(--sp-2); font-variant-numeric: tabular-nums; }
.table caption { caption-side: top; text-align: left; font-family: var(--f-data); font-size: var(--fs-xs); color: var(--c-ink-3); padding-bottom: 6px; }
.table th, .table td { text-align: right; padding: var(--sp-2) 9px; border-bottom: 1px solid var(--c-rule-soft); }
.table th:first-child, .table td:first-child { text-align: left; }
.table thead th {
  font-family: var(--f-body);
  background: var(--c-surface-2); border-bottom: var(--line) solid var(--c-rule-strong);
  font-family: var(--f-data); font-size: 12px; font-weight: 400; color: var(--c-ink-2); white-space: nowrap;
}
.table tfoot td { border-top: var(--line) solid var(--c-rule-strong); border-bottom: 0; font-weight: 600; background: var(--c-surface-2); }
.table .d { font-family: var(--f-data); font-size: 14px; }

/* ---------- 卡片 / FAQ / 披露 ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: var(--sp-3); border-top: var(--line) solid var(--c-rule-strong); }
.card { background: transparent; border: 0; border-right: 1px solid var(--c-rule-soft); border-radius: 0; display: flex; flex-direction: column; padding: var(--sp-3) var(--sp-4); }
.cards > .card:last-child { border-right: 0; }
.cards > .card:first-child { padding-left: var(--sp-3); }
.card__top { padding: 0 0 var(--sp-2); border-bottom: 0; font-family: var(--f-body); font-size: 15px; color: var(--c-ink-3); }
.card__body { padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.card h3 { font-family: var(--f-display); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.card p { font-size: 15px; line-height: 1.5; color: var(--c-ink-2); }
.card__spec { font-family: var(--f-data); font-size: 15px; color: var(--c-ink-3); border-top: 0; padding-top: 0; margin-top: auto; }
.card a { font-size: 14px; font-weight: 600; color: var(--c-accent); text-decoration: none; border-bottom: 1px solid var(--c-accent); align-self: flex-start; }

.disclosure {
  font-size: 15px; line-height: 1.55; color: var(--c-ink-2);
  background: var(--c-surface); border: 1px solid var(--c-rule);
  padding: var(--sp-3); margin: var(--sp-3) 0; max-width: 70ch; border-radius: var(--radius);
}
.faq > div { padding: var(--sp-3) 0; border-bottom: var(--line) solid var(--c-rule); }
.faq dt { font-family: var(--f-display); font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.faq dd { margin: 0; font-size: var(--fs-base); line-height: 1.6; color: var(--c-ink-2); max-width: 66ch; }
.sources { font-size: 15px; color: var(--c-ink-2); margin-top: var(--sp-2); }
.sources ol { margin: 6px 0 0; padding-left: 20px; }
.sources .u { font-family: var(--f-data); font-size: 14px; color: var(--c-ink-3); word-break: break-all; }
.disclaimer { margin-top: var(--sp-4); font-size: 15px; line-height: 1.55; color: var(--c-ink-2); border-top: var(--line) solid var(--c-rule); padding-top: var(--sp-3); max-width: 70ch; }

/* ---------- 页脚 ---------- */
.site-footer { margin-top: var(--sp-7); border-top: var(--line) solid var(--c-rule-strong); padding: var(--sp-5) 0 var(--sp-8); font-size: 15px; color: var(--c-ink-2); }
.site-footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
.site-footer__label { font-family: var(--f-body); font-size: 12px; font-weight: 400; color: var(--c-ink-3); margin: 0 0 6px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 4px; }
.site-footer a { color: var(--c-ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--c-ink); text-decoration: underline; }
.site-footer__bottom {
  margin-top: var(--sp-4); padding-top: var(--sp-2); border-top: var(--line) solid var(--c-rule);
  display: flex; justify-content: space-between; gap: var(--sp-4);
  font-family: var(--f-data); font-size: 12px; color: var(--c-ink-3);
}

/* ---------- 响应式（1000 / 560 两个断点） ---------- */
@media (max-width: 1000px) {
  .shell { grid-template-columns: 1fr; max-width: none; }
  .rail { grid-column: 1; grid-row: 1; position: static; height: auto; border-left: 0; border-bottom: var(--line) solid var(--c-rule); }
  .pane { grid-column: 1; grid-row: 2; }
  .rail__list { max-height: 260px; }
  .pane__top { padding: var(--sp-3) var(--sp-4); }
  .pane__body { padding: var(--sp-5) var(--sp-4) 0; }
  .nav { display: none; }
  .facts, .cards { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .wrap { padding: 0 var(--sp-4); }
}
@media (max-width: 560px) {
  :root { --fs-body: 16px; }
  .calc__row { grid-template-columns: minmax(0, 1fr) 112px 74px; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
  .calc__result { grid-template-columns: 1fr 1fr; }
  .result-item { border-bottom: var(--line) solid var(--c-rule); }
  .table { font-size: 14px; }
  .table thead th { white-space: normal; font-size: 12px; letter-spacing: 0; }
  .table th, .table td { padding: 7px 5px; }
}

/* ---------- 首页补充 ---------- */
.topbar-wrap { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--sp-4);
  max-width: var(--measure); height: 78px; border-bottom: var(--line) solid var(--c-rule); }
.answer-box { margin: var(--sp-5) 0 0; padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--c-accent); max-width: 60ch; }
.answer-box p + p { margin-top: var(--sp-2); }
.answer-box b { color: var(--c-ink); }
.rail__cta { padding: var(--sp-3) 0 0; }
.rail__cta a { font-size: 15px; font-weight: 600; color: var(--c-accent); text-decoration: none;
  border-bottom: 2px solid var(--c-accent); }
.totals { display: flex; flex-direction: column; gap: 0; }

/* ---------- 正文区视觉锚点：分节图标 / 数据图 / 链路示意图 ---------- */
.h2 { display: flex; align-items: center; gap: 10px; }
.h2__ic {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: var(--c-accent); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.figure { margin: var(--sp-4) 0; }
.figure__scroll { overflow-x: auto; }
.figure svg { width: 100%; height: auto; display: block; min-width: 560px; }
.figure figcaption {
  margin-top: var(--sp-1); font-size: 14.5px; color: var(--c-ink-3); max-width: 62ch;
}
.chart-bar { fill: var(--c-accent); }
.chart-bar--muted { fill: #E3DED4; }
.chart-label { font-family: var(--f-data); font-size: 13px; fill: var(--c-ink-3); }
.chart-value { font-family: var(--f-data); font-size: 13px; fill: var(--c-ink); }
.chart-axis { stroke: var(--c-rule-soft); stroke-width: 1; }
.flow-node { fill: none; stroke: var(--c-ink-2); stroke-width: 1.6; }
.flow-text { font-family: var(--f-body); font-size: 13px; fill: var(--c-ink-2); }
.flow-arrow { stroke: var(--c-ink-3); stroke-width: 1.6; fill: none; }

/* 三个数字说明：竖线分栏 + 分节图标（不用卡片边框） */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0;
  border: 0; border-radius: 0; padding: 0; margin: var(--sp-4) 0 0; }
.facts > div { padding: var(--sp-3) var(--sp-4); border-right: 1px solid var(--c-rule-soft); }
.facts { border-top: 0; }
.facts > div:last-child { border-right: 0; }
.facts > div:first-child { padding-left: var(--sp-3); }
.fact__k { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--c-ink-2);
  font-family: var(--f-body); letter-spacing: 0; text-transform: none; margin-bottom: 6px; }
.fact__k svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--c-accent);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fact__v { margin: 0; font-size: 15.5px; color: var(--c-ink-2); line-height: 1.5; }
@media (max-width: 900px) {
  .facts { grid-template-columns: 1fr; }
  .facts > div { border-right: 0; border-bottom: 1px solid var(--c-rule-soft); padding-left: 0; }
  .facts > div:last-child { border-bottom: 0; }
}

/* 四个结果数字：dt 带小图标 */
.result-item dt { display: flex; align-items: center; gap: 7px; }
.result-item dt svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--c-accent);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.result-item--hero dt svg { width: 20px; height: 20px; }

/* 表格行首小图标 */
.tbl__cell { display: inline-flex; align-items: center; gap: 8px; }
.tbl__ic { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--c-ink-3);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.table tbody tr:hover .tbl__ic { stroke: var(--c-accent); }

/* 分类色竖条（右栏行首） */
.item { grid-template-columns: 18px 10px 20px 1fr auto; }
.item__bar { width: 10px; height: 26px; border-radius: 2px; background: var(--c, var(--c-rule)); flex: none; }
.item[data-on="false"] .item__bar { opacity: .45; }
/* 图标与勾选框跟随分类色 */
.item__ic { stroke: var(--c, var(--c-ink-2)); }
.item input[type="checkbox"]:checked { background: var(--c, var(--c-accent)); border-color: var(--c, var(--c-accent)); }
/* 正文图标同样跟随分类色 */
.h2__ic, .tbl__ic { stroke: var(--c, var(--c-accent)); }
.tbl__ic { stroke: var(--c, var(--c-ink-3)); }

/* 右栏列头：与 .item 用同一套网格 + 内层复刻 .item__io 的宽度，× 才能精确对齐 */
.rail__colhead {
  display: grid; grid-template-columns: 18px 10px 20px 1fr auto; gap: 7px;
  align-items: center; padding: var(--sp-1) calc(var(--sp-3) + var(--sp-2)) 4px;
}
.rail__colhead .iohead {
  grid-column: 5; display: grid; grid-template-columns: 44px 9px 46px 8px; gap: 4px;
  font-size: 12.5px; color: var(--c-ink-3); line-height: 1.2;
}
.rail__colhead .iohead > span:nth-child(1) { text-align: right; }
.rail__colhead .iohead > span:nth-child(2) { text-align: center; }
.rail__colhead .iohead > span:nth-child(3) { text-align: right; white-space: nowrap; overflow: visible; }
.rail__colhead .iohead > span:nth-child(4) { }

/* 小时单位后缀 */
.item__unit { font-family: var(--f-data); font-size: 13px; color: var(--c-ink-3); }
/* 右栏输入型行变体见文件末尾（必须在所有 @media 之外）*/
.item input[data-k="qty"] { width: 44px; }
.item input[data-k="hours"] { width: 46px; }

/* 导航里"未发布"的栏目：不可点、灰字（避免 404） */
.nav__soon { color: var(--c-ink-3); cursor: default; }
.site-footer .nav__soon { color: var(--c-ink-3); }

/* 右栏：品牌副标（说明站点定位）+ 列表行说明 */
.rail__note { display: block; font-size: 12.5px; color: var(--c-ink-3); margin-top: 2px; }
.rail__title { flex-wrap: wrap; row-gap: 2px; }
.site-footer__tag { margin-top: var(--sp-2); color: var(--c-ink-3); }

/* 页脚域名：单独一行并突出 */
.site-footer__url { margin-top: 8px; }
.site-footer__url a {
  font-family: var(--f-display); font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  color: var(--c-accent); text-decoration: none;
  border-bottom: 2px solid var(--c-accent); padding-bottom: 2px;
}
.site-footer__url a:hover { color: var(--c-ink); border-bottom-color: var(--c-ink); }

/* ===================================================================
   右栏「输入型」行变体（第 4 / 13 页等只有数字输入的工具栏）
   -------------------------------------------------------------------
   ⚠️ 必须放在文件末尾、且必须在所有 @media 之外。
   2026-11-02 事故：初版写进了 @media (max-width:900px) 块里，
   桌面端不生效 → 4 个子元素落进 .item 的 5 列网格（第 3 列只有 20px），
   导致名称被挤成两行、输入框压在文字上。
   用 .item.item--field 双类提高权重，确保压过 .item 的单类规则。
   =================================================================== */
.item.item--field {
  grid-template-columns: 10px 20px minmax(0, 1fr) auto;
  cursor: default;
  min-height: 46px;
}
.item.item--field input[type="number"] { width: 78px; }
.item.item--field .item__io { gap: 5px; }
.item.item--field .item__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 输入行少时不让列表撑满，结果面板紧贴输入行，避免中间一大块空白 */
.rail__list--fields { flex: 0 0 auto; overflow: visible; padding-bottom: var(--sp-3); }
/* 输入行少时，用一段说明文字吃掉中段空白，让结果面板钉在栏底（与首页一致）*/
.rail__filler { flex: 1 1 auto; padding: var(--sp-2) var(--sp-4) var(--sp-3); font-size: 13.5px; line-height: 1.6; color: var(--c-ink-3); }
.rail__filler b { color: var(--c-ink-2); font-weight: 600; }
.rail__filler p + p { margin-top: 8px; }

/* 键盘用户跳转链接（2026-11-03 审计补） */
.skip { position:absolute; left:-9999px; top:0; font-size:14px; }
.skip:focus { left:8px; top:8px; z-index:9999; background:#fff; color:#1A1A1A;
  padding:8px 12px; border:2px solid #C2321F; text-decoration:none; }
/* 单栏布局（404 等页使用，2026-11-03 补齐未定义类） */
.pane--single { max-width: 720px; }
.shell--single { grid-template-columns: 1fr; }

/* 点击目标 ≥ 24×24（2026-11-03 审计：375px 下 28 个目标仅 19–23px） */
.nav a, .nav__soon, .site-footer a { display: inline-flex; align-items: center; min-height: 24px; }
.skip { min-height: 24px; padding-top: 2px; padding-bottom: 2px; }