/* ocs-calc.css — 思维接触网百科 · 工程计算器（Notion 风格，与 skin/ocs-common.css 令牌对齐） */
:root {
  --ink: #37352F;          /* Notion 墨色正文 */
  --ink-2: #6F6F6B;        /* 次级文字。W6 C2 2026-08-30：原 #787774 在 #F6F8FB 4.21 / #EFF3F8 4.02 不达 4.5；#6F6F6B 4.74 / 4.53 */
  --ink-nav: #6B6A66;      /* R5 P3-2：顶部导航链接（#787774 白底 4.48:1 擦线，加深达标） */
  --ink-3: #6F6F6B;        /* 三级文字。D 2026-08-30 P1-7：原 #9B9B97 12px 单位标签仅 2.39-2.79:1 不达标；
                              #6F6F6B 白底 5.05 / #F6F8FB 4.74 / #EFF3F8 4.53（暗色段 #6F6F6B 为旧值由 swe-chrome.css 覆盖为 #93A4BC，未动） */
  --ink-hint: #6F6F6B;     /* R7 U-2：字段提示文字（白底 5.05:1，原 --ink-3 #9B9B97 仅 2.79:1） */
  --ink-rlabel: #6B6A66;   /* R7 U-4：结果标签（#F7F6F3 底 5.01:1，原 --ink-2 #787774 仅 4.14:1） */
  --ink-unit: #5F5F5B;     /* W6 C3 2026-08-30：primary 结果卡单位标签（#FAEBDD 底 5.49:1；原 --ink-3 #6F6F6B 仅 4.32）；白底 6.41 */
  --accent: #E85D04;       /* 品牌橙（唯一强调色） */
  --accent-deep: #C2410C;  /* R5 P2-6：白字按钮底（对比度 5.18:1） */
  --accent-soft: #FAEBDD;  /* 橙色浅底 */
  --bg: #FFFFFF;           /* 页面底 */
  --subtle: #F7F6F3;       /* 浅灰底（表头/结果卡） */
  --hover: #EFEFED;
  --line: #E9E9E7;         /* 细分隔线 */
  --err: #C92A2A;          /* D 2026-08-30 P2：原 #EB5757 白底 3.48:1（.f-err 12px/红链）不达标，加深同色系（白底 5.46:1，徽标白字 3.48→5.46）；暗色块显式保留 #EB5757 */
  --ok: #448361;
  --warn-bg: #FBF3DB;      /* Notion 黄底 */
  --warn-ink: #7A5A0E;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #D4D4D2; --ink-2: #9B9B9B; --ink-3: #6F6F6B;
    --bg: #191919; --subtle: #242424; --hover: #2A2A2A; --line: #2F2F2F;
    --accent-soft: #3B2E24; --warn-bg: #353126; --warn-ink: #D9C37A;
    --ink-rlabel: #9B9B9B;  /* 暗色结果标签维持原 --ink-2 暗色值（#242424 底 5.58:1，不回归） */
    --ink-hint: #9B9B9B;    /* D 2026-08-30 P2：暗色 hint 原继承亮色 #6F6F6B，深底仅 3.4-3.7:1；#9B9B9B #0B1220 底 6.74 / #101B2E 6.20 / #191919 6.33 */
    --err: #EB5757;         /* D 2026-08-30：亮色 --err 加深后暗色显式回定原红（#101B2E 底 4.95、#191919 底 5.05），防止暗色误用深红 */
    --ink-unit: #9B9B9B;    /* 2026-0830 补遗：暗色 primary 卡实底 #17253D，原 #6F6F6B 仅 3.04 → 5.52 */
  }
  /* W6 C1 2026-08-30：暗色徽标白字压底 3.48→5.46（#C92A2A）；仅收窄 .badge.ng 底色，
     不动 --err 本身——.f-err 暗色文本 #EB5757（5.05/4.95 达标）不受影响 */
  .badge.ng { --err: #C92A2A; }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  overflow-wrap: break-word;
}

/* ---------- 顶栏：白底细线（Notion 化） ---------- */
.calc-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 10px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.calc-header .brand {
  font-weight: 700; font-size: 15px; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
}
.calc-header .brand::before {
  content: "";
  width: 10px; height: 10px; border-radius: 3px;
  background: var(--accent);
  display: inline-block;
}
.calc-header nav { display: flex; gap: 4px; flex-wrap: wrap; }
.calc-header a {
  color: var(--ink-nav);
  text-decoration: none;
  font-size: 13.5px;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background .15s, color .15s;
}
.calc-header a:hover { color: var(--ink); background: var(--hover); }
.calc-header a.active { color: var(--ink); background: var(--subtle); font-weight: 600; }

/* ---------- 版心 ---------- */
.calc-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 20px 110px;
}

.calc-wrap h1 {
  font-size: 26px; font-weight: 700; letter-spacing: -.01em;
  margin: 16px 0 6px;
}
.calc-desc { color: var(--ink-2); font-size: 14.5px; margin: 0 0 20px; max-width: 65ch; }

/* ---------- 卡片：细边 + 微影（Notion page block） ---------- */
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 18px;
}
.card h2 {
  font-size: 15px; font-weight: 600;
  margin: 0 0 14px;
  color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.card h2::before {
  content: "";
  width: 5px; height: 16px; border-radius: 2.5px;
  background: var(--accent);
  flex: none;
}

/* ---------- 输入区 ---------- */
.f-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 14px 18px;
}
.field label {
  display: block; font-size: 13.5px; font-weight: 600;
  margin-bottom: 5px; color: var(--ink);
}
.field .unit { color: var(--ink-3); font-weight: 400; font-size: 12px; margin-left: 4px; }
.field input, .field select {
  width: 100%;
  padding: 8px 11px;
  font-size: 16px;             /* 移动端免缩放 */
  font-family: inherit;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  transition: border-color .15s, box-shadow .15s;
}
.field input:hover, .field select:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1.5px var(--accent);
}
.field .hint { font-size: 13px; color: var(--ink-hint); margin: 4px 0 0; }
.field .f-err { display: none; font-size: 12px; color: var(--err); margin: 4px 0 0; }
.field.err input, .field.err select { border-color: var(--err); box-shadow: 0 0 0 1.5px var(--err); }
.field.err .f-err { display: block; }
.field.err .hint { display: none; }

/* ---------- 结果区 ---------- */
.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 12px;
}
.result-item {
  background: var(--subtle);
  border-radius: 5px;
  padding: 12px 14px;
}
.result-item .r-label { font-size: 12px; color: var(--ink-rlabel); margin-bottom: 2px; }
.result-item .r-value {
  font-size: 24px; font-weight: 700;
  color: var(--ink);                 /* 数值用墨色（Notion 数字风） */
  font-variant-numeric: tabular-nums;
  word-break: break-all;
  line-height: 1.25;
}
.result-item.primary { background: var(--accent-soft); }
.result-item.primary .r-value { color: var(--accent); }
.result-item .r-unit { font-size: 12px; color: var(--ink-unit, var(--ink-3)); margin-left: 3px; font-weight: 400; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 16px;
  border-radius: 999px;
  color: #fff; font-weight: 600; font-size: 15px;
}
.badge.ok { background: var(--ok); }
.badge.ng { background: var(--err); }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; }

/* ---------- 警示（Notion callout 黄底） ---------- */
.warn-box {
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-left: 3px solid #D9730D;
  border-radius: 5px;
  padding: 11px 14px;
  font-size: 13.5px;
  margin-top: 14px;
}

/* ---------- 数据说明（待核实标注） ---------- */
.data-note { font-size: 13px; color: var(--ink-2); }
.data-note .todo-verify {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 4px;
  padding: 0 6px;
  font-size: 12px;
  margin-left: 4px;
}
.data-note table { border-collapse: collapse; width: 100%; margin-top: 8px; }
.data-note th, .data-note td {
  border: none; border-bottom: 1px solid var(--line);
  padding: 7px 9px; font-size: 13px; text-align: left;
}
.data-note th { background: var(--subtle); font-weight: 600; }

/* ---------- 吊弦长度表（Notion 表：仅水平线） ---------- */
.len-table { border-collapse: collapse; width: 100%; margin-top: 12px; }
.len-table th, .len-table td {
  border: none; border-bottom: 1px solid var(--line);
  padding: 7px 9px; font-size: 13px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.len-table th { background: var(--subtle); font-weight: 600; white-space: nowrap; }
.len-table tr:hover td { background: var(--hover); }

/* ---------- 安装曲线温度档表（与 len-table 同风格） ---------- */
.mini-table { border-collapse: collapse; width: 100%; }
.mini-table th, .mini-table td {
  border: none; border-bottom: 1px solid var(--line);
  padding: 7px 9px; font-size: 13px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.mini-table th { background: var(--subtle); font-weight: 600; white-space: nowrap; }

#chart { width: 100%; height: 320px; }

/* ---------- 公式区 ---------- */
.formula { font-size: 15px; overflow-x: auto; color: var(--ink); }
.formula table { border-collapse: collapse; }
.formula td { border: none; border-bottom: 1px solid var(--line); padding: 6px 10px 6px 0; }
/* D 2026-08-30 P1-8：移动端宽公式截断修复——滚动收进块级公式自身（原 .formula 整卡横滚
   连带标题/说明一起滑出），两侧 16px 渐隐提示可横向滚动；公式不超宽时居中于容器中段，
   渐隐带为空白，桌面观感不变。仅命中 MathJax 块级公式，行内公式与其余 11 台非公式内容不受影响。 */
mjx-container[display="block"],
mjx-container[display="true"] {
  overflow-x: auto;
  max-width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

/* ---------- 导出区 ---------- */
.export-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn {
  border: 0; border-radius: 5px;
  padding: 9px 18px;
  font-size: 14px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent-deep); color: #fff; }
.btn-primary:hover { background: #D94F0E; }
.btn-ghost { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--hover); }
.export-hint { font-size: 12px; color: var(--ink-3); width: 100%; margin: 4px 0 0; }

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
  .calc-wrap { padding: 16px 14px 24px; }
  .calc-wrap h1 { font-size: 22px; }
  .calc-header { padding: 8px 14px; }
  /* R6 P2-3：移动端 header 链接高度 32.3px < WCAG 2.5.8 的 36px；
     加 min-height 让 flex 项最小高度达标，flex 包裹换行仍正常。 */
  .calc-header a { min-height: 36px; display: inline-flex; align-items: center; }
  /* R6 P1-1：原 position:fixed 在首屏会遮住底部输入框；改为文档流内堆叠。
     桌面端 flex 横向并排不变（.export-bar 基础样式不变）。 */
  .export-bar {
    flex-direction: column;
    gap: 8px;
    background: var(--bg);
    border-top: 1px solid var(--line);
    padding: 12px 0 0;
    margin-top: 16px;
  }
  .btn { width: 100%; }
  .export-hint { display: none; }
}

/* ---------- 页脚 ---------- */
.calc-footer {
  text-align: center; font-size: 12.5px;
  color: var(--ink-3);
  padding: 20px 16px 28px;
  border-top: 1px solid var(--line);
  margin-top: 12px;
}

/* ---------- 打印 ---------- */
@media print {
  .calc-header, .export-bar, form .hint { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border: 0; box-shadow: none; padding: 8px 0; }
}
/* R5U-7：wiki 夜间主题同步（父页 localStorage → html.ocs-dark；与 prefers 暗色同值） */
html.ocs-dark {
  --ink: #D4D4D2; --ink-2: #9B9B9B; --ink-3: #6F6F6B;
  --bg: #191919; --subtle: #242424; --hover: #2A2A2A; --line: #2F2F2F;
  --accent-soft: #3B2E24; --warn-bg: #353126; --warn-ink: #D9C37A;
  --ink-rlabel: #9B9B9B;
  --ink-hint: #9B9B9B;    /* D 2026-08-30 P2：同上，暗色 hint 提亮（#0B1220 底 6.74:1，swe-chrome 暗板同值域） */
  --err: #EB5757;         /* D 2026-08-30：暗色显式回定原红，防亮色深红外溢 */
  --ink-unit: #9B9B9B;    /* 2026-0830 补遗：暗色 primary 卡实底 #17253D，原 #6F6F6B 仅 3.04 → 5.52 */
}
/* W6 C1：同 prefers 暗色通道，徽标白字压底改 #C92A2A（5.46:1），--err 本身不动 */
html.ocs-dark .badge.ng { --err: #C92A2A; }
html.ocs-dark body { background: var(--bg); color: var(--ink); }