/* ATV 站：车间蓝 + 警示黄，接线图的样式 */
:root {
  --bg: #f6f7f8;
  --surface-2: #eceff2;
  --text: #1e2328;
  --muted: #5d6670;
  --line: #dde2e7;
  --accent: #1f6f8b;
  --accent-ink: #ffffff;
  --accent-soft: #dcecf2;
  --accent-3: #c99a00;
  --accent-3-soft: #fbf1cc;
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wr-part: #ffffff;
  --wr-part-edge: #9aa6b2;
  --wr-bus: #1f9d55;
}
/* 上面改了哪些浅色变量，深色模式就必须同样全部改一遍，否则会盖掉引擎里的深色配色 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15191d;
    --surface-2: #232a30;
    --text: #e8edf1;
    --muted: #9aa6b2;
    --line: #333c44;
    --accent: #5fb3d3;
    --accent-ink: #10161a;
    --accent-soft: #1d3440;
    --accent-3: #f2c94c;
    --accent-3-soft: #3a3220;
    --font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --wr-part: #1e252b;
    --wr-part-edge: #6b7884;
    --wr-bus: #48c27e;
  }
}

/* ---------- 接线图 ---------- */
.diagram-wrap { background: var(--surface-2); border-radius: var(--radius); padding: 10px; margin: 10px 0; overflow-x: auto; }
.diagram-wrap svg { display: block; width: 100%; min-width: 640px; height: auto; }
.wr-part rect { fill: var(--wr-part); stroke: var(--wr-part-edge); stroke-width: 1.5; }
.wr-name { font: 600 15px var(--font); fill: var(--text); text-anchor: middle; }
.wr-note { font: 12px var(--font); fill: var(--muted); text-anchor: middle; }
.wr-note.left { text-anchor: start; }
.wr-note.right { text-anchor: end; }
.wr-term { fill: var(--wr-part); stroke: var(--text); stroke-width: 1.5; }
.wr-edge { stroke: rgba(0, 0, 0, .35); fill: none; stroke-linejoin: round; }
.wr-dot { fill: var(--text); }
.wr-gnd { stroke: var(--text); stroke-width: 3; }
.wr-bus { stroke: var(--wr-bus); stroke-width: 7; stroke-linecap: round; }
.wr-tag { fill: var(--accent); stroke: var(--wr-part); stroke-width: 2; }
.wr-num { font: 700 12px var(--font); fill: #fff; text-anchor: middle; }
.wr-code { font: 700 12px var(--font-mono); fill: var(--text); paint-order: stroke; stroke: var(--surface-2); stroke-width: 4px; }
.wr-tape { fill: var(--muted); }
.wr { transition: opacity .15s; }
.wr.dim { opacity: .15; }
.wr.done .wr-tag { fill: var(--ok); }

/* 选项 */
.opts { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.opts label.inline { flex: 0 0 auto; font-size: 15px; }

/* 逐根线的清单 */
.steps-title { margin-top: 30px; }
.steps { list-style: none; padding: 0; margin: 0; }
.steps li { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin: 10px 0; background: var(--surface); }
.steps li.done { opacity: .6; }
.steps li label { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 400; flex-direction: row; cursor: pointer; }
.steps li p { margin: 6px 0 0 30px; font-size: 15px; }
.steps li .test { color: var(--muted); }
.steps .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.steps li.done .n { background: var(--ok); }
.sw { display: inline-block; width: 30px; height: 12px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .35); }

.warn-box { border-left: 4px solid var(--accent-3); background: var(--accent-3-soft); padding: 12px 16px; border-radius: var(--radius-sm); margin: 16px 0; }
.parts-box { border: 1px dashed var(--line); background: var(--surface-2); padding: 14px 16px; border-radius: var(--radius-sm); margin: 24px 0 8px; }
.parts-box p { margin: 10px 0 0; }

@media print {
  .diagram-wrap { background: #fff; padding: 0; }
  .diagram-wrap svg { min-width: 0; }
  .steps li { break-inside: avoid; }
  .steps input { display: none; }
}