/* ==========================================================
   智乐园 · 工坊 — 工程计算器共用样式「纸墨」
   仅供 /tools/ 下的计算器页面引入，须在 site.css 之后。
   三色：纸白 #FAF8F4 / 墨黑 #1C1B18 / 朱砂 #9E2F23。
   无图标、无渐变、无彩块；直角为主，以线为界。
   ========================================================== */

/* ---------- 页面骨架 ---------- */
.calc-main { padding-bottom: var(--s-8); }
.calc-main .page-hero { margin-bottom: var(--s-6); }
.calc-main .page-hero p { max-width: 760px; }

/* 规范依据条 */
.basis-bar {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  font-size: 12.5px; color: var(--ink-faint);
  letter-spacing: .04em; margin-top: var(--s-3);
}
.basis-bar span {
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: 1px 9px; font-family: var(--f-mono); font-size: 11.5px;
}

/* ---------- 分栏（页签） ---------- */
.calc-tabs {
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--s-8); align-items: baseline;
}
.calc-tabs button, .calc-tabs a {
  padding: 8px 2px 12px; border: none; background: none; cursor: pointer;
  font-family: var(--f-serif); font-size: 15px; letter-spacing: .1em;
  color: var(--ink-soft); border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.calc-tabs button:hover, .calc-tabs a:hover { color: var(--ink); }
.calc-tabs button.active, .calc-tabs button.on,
.calc-tabs a.active {
  color: var(--cinnabar); border-bottom-color: var(--cinnabar); font-weight: 600;
}

/* ---------- 面板 ----------
   .tab-content / .panel 为旧引擎脚本所依赖的类名，一并对齐 */
.calc-panel, .tab-content, .panel { display: none; }
.calc-panel.active, .tab-content.active, .panel.active { display: block; }

/* ---------- 卡片 ---------- */
.calc-card {
  background: #FFFDF9;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  margin-bottom: var(--s-6);
}
.calc-card > h2 {
  font-size: 19px; letter-spacing: .04em;
  padding-bottom: var(--s-3); margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
}
.calc-card > h2 .std {
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 400;
  color: var(--ink-faint); letter-spacing: .03em; white-space: nowrap;
}
.calc-card > .lead {
  font-size: 13.5px; color: var(--ink-soft);
  font-family: var(--f-serif); margin-bottom: var(--s-4); line-height: 1.9;
}
.calc-card > h3, .calc-sub {
  font-size: 14px; letter-spacing: .1em; color: var(--ink-soft);
  font-family: var(--f-serif);
  margin: var(--s-6) 0 var(--s-3);
  padding-bottom: 5px; border-bottom: 1px solid var(--hairline);
}
.calc-card > h3:first-child, .calc-sub:first-child { margin-top: 0; }

/* ---------- 表单 ---------- */
.field-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: var(--s-4) var(--s-6); margin-bottom: var(--s-6);
}
.field-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label {
  font-size: 13px; color: var(--ink); letter-spacing: .02em; line-height: 1.5;
}
.field > label .u {
  color: var(--ink-faint); font-family: var(--f-mono);
  font-size: 11.5px; margin-left: 4px; letter-spacing: 0;
}
.field input, .field select, .field textarea {
  height: 38px; padding: 0 10px; width: 100%;
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
  font-size: 14px; font-family: var(--f-sans);
  outline: none; transition: border-color .15s, background .15s;
}
.field input:hover, .field select:hover { border-color: var(--ink-faint); }
.field input:focus, .field select:focus {
  border-color: var(--cinnabar); background: #FFFDF9;
}
.field .rng {
  font-size: 11.5px; color: var(--ink-faint);
  font-family: var(--f-mono); letter-spacing: .01em; line-height: 1.6;
}
/* 非法输入标记 */
.field.bad > label { color: var(--cinnabar); }
.field.bad input, .field.bad select { border-color: var(--cinnabar); background: #FBF2F0; }
.field.bad .rng { color: var(--cinnabar); }

/* ---------- 操作区 ---------- */
.calc-actions {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  align-items: center; margin: var(--s-2) 0 0;
}
.calc-actions .btn { padding: 9px 24px; font-size: 14px; }
.calc-actions .hintline {
  font-size: 12.5px; color: var(--ink-faint); letter-spacing: .03em;
}

/* ---------- 输出区 ---------- */
.result {
  display: none; margin-top: var(--s-6);
  padding: var(--s-4) var(--s-6);
  background: var(--paper-deep);
  border: 1px solid var(--hairline); border-left: 3px solid var(--cinnabar);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 14px;
}
.result.show { display: block; }
.result > h3 {
  font-size: 15px; letter-spacing: .1em; font-family: var(--f-serif);
  margin-bottom: var(--s-3);
}
.result > h3 ~ h3 {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}
.result-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-4); padding: 6px 0;
  border-bottom: 1px dotted var(--hairline);
}
.result-row:last-child { border-bottom: none; }
.result .label, .result-row .label {
  color: var(--ink-soft); font-size: 13px; letter-spacing: .02em;
}
.result .value {
  font-family: var(--f-mono); font-size: 15px; font-weight: 600;
  color: var(--cinnabar); font-variant-numeric: tabular-nums;
}
.result .unit {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--ink-faint); font-weight: 400; margin-left: 2px;
}
.result .ok { color: var(--ink); font-weight: 600; }
.result .warn { color: var(--cinnabar); font-weight: 600; }

/* 判定印 */
.verdict {
  display: inline-block; padding: 1px 12px;
  border: 1px solid; border-radius: var(--r-sm);
  font-family: var(--f-serif); font-size: 13.5px; letter-spacing: .16em;
}
.verdict-pass { color: var(--ink); border-color: var(--ink); background: transparent; }
.verdict-fail { color: var(--cinnabar); border-color: var(--cinnabar); background: #FBF2F0; }

/* 提示条（非法输入 / 空输入） */
.result.alarm { border-left-color: var(--ink); background: #FBF2F0; }
.notice {
  display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: 13.5px; line-height: 1.9; color: var(--ink);
}
.notice .mk {
  flex-shrink: 0; width: 26px; height: 26px; margin-top: 2px;
  border: 1px solid var(--cinnabar); border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-family: var(--f-serif); font-size: 14px; color: var(--cinnabar);
}
.notice b { color: var(--cinnabar); font-weight: 600; }
.notice ul { margin: 4px 0 0 18px; padding: 0; font-size: 13px; color: var(--ink-soft); }
.notice li { margin: 2px 0; }

/* ---------- 表格 ---------- */
.result-table, .data-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; margin-top: var(--s-2);
}
.result-table th, .result-table td,
.data-table th, .data-table td {
  padding: 8px 10px; text-align: left;
  border-bottom: 1px solid var(--hairline);
}
.result-table thead th, .data-table thead th {
  background: var(--paper-deep); color: var(--ink-soft);
  font-weight: 600; font-size: 12px; letter-spacing: .06em;
  font-family: var(--f-sans); white-space: nowrap;
}
.result-table tbody tr:last-child td,
.data-table tbody tr:last-child td { border-bottom: none; }
.result-table td.num, .data-table td.num,
.result-table th.num-th, .data-table th.num-th { text-align: right; }
.result-table td.num, .data-table td.num {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.data-table tbody tr:hover { background: var(--paper-deep); }

.table-scroll {
  overflow-x: auto; border: 1px solid var(--hairline);
  border-radius: var(--r-sm); -webkit-overflow-scrolling: touch;
}
.table-scroll table { min-width: 100%; }
.table-scroll thead th { position: sticky; top: 0; z-index: 1; }

/* ---------- 图示 ---------- */
.svg-wrap {
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); padding: var(--s-4); margin-top: var(--s-4);
}
.svg-wrap .cap {
  font-size: 12px; color: var(--ink-faint);
  letter-spacing: .16em; font-family: var(--f-serif); margin-bottom: var(--s-2);
}
.svg-wrap svg { display: block; width: 100%; height: auto; max-width: 680px; margin: 0 auto; }

.canvas-wrap {
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); padding: var(--s-4);
}
.canvas-wrap canvas {
  display: block; max-width: 100%; height: auto; margin: 0 auto;
  background: #FFFDF9; border: 1px solid var(--hairline); border-radius: var(--r-sm);
}

/* ---------- 注脚 ---------- */
.note {
  font-size: 12.5px; color: var(--ink-faint);
  line-height: 1.95; margin-top: var(--s-3);
}
.note b { color: var(--ink-soft); font-weight: 600; }
.note code, .mono { font-family: var(--f-mono); font-size: 12px; color: var(--ink-soft); }

/* ---------- 用法示例 ---------- */
.usage {
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
}
.usage > h4 {
  font-size: 12px; font-family: var(--f-serif);
  letter-spacing: .4em; color: var(--ink-faint);
  font-weight: 400; margin-bottom: var(--s-3);
}
.usage-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-6); align-items: start;
}
.usage dl { margin: 0; font-size: 13px; }
.usage dt {
  color: var(--ink-faint); font-size: 11.5px;
  letter-spacing: .2em; margin-bottom: 5px; font-family: var(--f-serif);
}
.usage dd {
  margin: 0 0 var(--s-3); color: var(--ink-soft);
  font-family: var(--f-mono); font-size: 12.5px; line-height: 1.95;
}
.usage dd:last-child { margin-bottom: 0; }
.usage dd em { font-style: normal; color: var(--cinnabar); }
.usage .btn { margin-top: var(--s-3); padding: 7px 18px; font-size: 13px; }

/* ---------- 术语／速查小抄 ---------- */
.cheat {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-4); margin-top: var(--s-4);
}
.cheat div {
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4); background: var(--paper);
}
.cheat dt, .cheat b {
  display: block; font-size: 12.5px; color: var(--ink);
  font-weight: 600; margin-bottom: 3px; letter-spacing: .04em;
}
.cheat p, .cheat dd {
  margin: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.85;
}

/* ---------- 弹层（计算书） ---------- */
.sheet-mask {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(28, 27, 24, .55);
  padding: var(--s-8) var(--s-4);
  overflow-y: auto;
}
.sheet-mask.open { display: block; }
.sheet-box {
  position: relative; max-width: 820px; margin: 0 auto;
  background: var(--paper); border: 1px solid var(--ink);
  border-radius: var(--r-lg); padding: var(--s-8);
}
.sheet-box h2 {
  font-size: 22px; letter-spacing: .1em;
  padding-bottom: var(--s-3); margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}
.sheet-close {
  position: absolute; top: var(--s-4); right: var(--s-4);
  width: 30px; height: 30px; border: 1px solid var(--hairline);
  border-radius: var(--r-sm); background: transparent; cursor: pointer;
  font-family: var(--f-serif); font-size: 15px; color: var(--ink-soft);
  line-height: 1; transition: all .15s;
}
.sheet-close:hover { border-color: var(--cinnabar); color: var(--cinnabar); }
.sheet-text {
  white-space: pre-wrap; font-family: var(--f-mono);
  font-size: 12.5px; line-height: 1.95; color: var(--ink);
  background: #FFFDF9; border: 1px solid var(--hairline);
  border-radius: var(--r-sm); padding: var(--s-4) var(--s-6);
  max-height: 60vh; overflow-y: auto;
}

/* ---------- 检索工具条 ---------- */
.seek-bar {
  display: flex; gap: var(--s-4); flex-wrap: wrap;
  align-items: center; margin-bottom: var(--s-4);
}
.seek-bar input[type="text"], .seek-bar input[type="search"] {
  flex: 1; min-width: 200px; height: 36px; padding: 0 2px;
  border: none; border-bottom: 1px solid var(--hairline);
  background: transparent; color: var(--ink);
  font-size: 14px; font-family: var(--f-sans); outline: none;
}
.seek-bar input:focus { border-bottom-color: var(--cinnabar); }
.seek-bar input::placeholder { color: var(--ink-faint); }
.seek-bar select {
  height: 36px; padding: 0 10px;
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
  font-size: 13.5px; font-family: var(--f-sans); outline: none;
}
.seek-bar select:focus { border-color: var(--cinnabar); }
.seek-bar .count {
  margin-left: auto; font-size: 12.5px; color: var(--ink-faint);
  font-family: var(--f-mono); letter-spacing: .03em;
}
.seek-bar .count em { font-style: normal; color: var(--cinnabar); }

/* 空结果 */
.empty-row td {
  text-align: center; color: var(--ink-faint);
  font-family: var(--f-serif); letter-spacing: .2em; padding: var(--s-8) 0;
}

/* ---------- 标记（替代彩色徽标） ---------- */
.pill {
  display: inline-block; padding: 1px 9px;
  font-size: 12px; letter-spacing: .04em;
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  color: var(--ink-soft); background: transparent;
  font-family: var(--f-sans); white-space: nowrap;
}
.pill-1 { color: var(--ink-faint); border-color: var(--hairline); }
.pill-2 { color: var(--ink-soft); border-color: var(--ink-faint); }
.pill-3 { color: var(--ink); border-color: var(--ink-soft); }
.pill-4 { color: var(--cinnabar); border-color: var(--cinnabar); background: #FBF2F0; }

/* ---------- 响应式 ---------- */
@media (max-width: 760px) {
  .field-grid, .field-grid.cols-2 { grid-template-columns: 1fr; }
  .usage-grid { grid-template-columns: 1fr; }
  .calc-card { padding: var(--s-4); }
  .calc-tabs { gap: var(--s-4); }
  .calc-tabs button { font-size: 14px; letter-spacing: .06em; }
  .calc-card > h2 { flex-direction: column; gap: 4px; font-size: 17px; }
  .sheet-box { padding: var(--s-6) var(--s-4); }
}