/* ============================================================
   circuit.css —— 电路图 SVG 样式（作图训练器 + 题库配图共用）
   颜色全部走 design token，夜间模式自动适配
   ============================================================ */

.cir-svg { display: block; margin: 0 auto; overflow: visible; touch-action: none; }

/* 导线与元件线条 */
.cir-wire, .cir-lead, .cir-body {
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.cir-thick { stroke-width: 4; }
.cir-dot { fill: var(--ink); stroke: none; }

/* 电表 */
.cir-meter { fill: var(--surface); }
.cir-meter-txt {
  fill: var(--ink); stroke: none;
  font-family: "Cambria Math", Georgia, "Times New Roman", serif;
  font-size: 15px; font-weight: 700; font-style: italic;
  text-anchor: middle;
}
/* 正负极标记 */
.cir-pole {
  fill: var(--ink-3); stroke: none;
  font-size: 13px; font-weight: 700; text-anchor: middle;
  font-family: system-ui, sans-serif;
}
/* 元件标签 L1 / S / R */
.cir-lbl {
  fill: var(--ink-2); stroke: none;
  font-size: 13px; font-weight: 700; text-anchor: middle;
  font-family: system-ui, -apple-system, "PingFang SC", sans-serif;
  letter-spacing: .02em;
}

/* 网格（作图画布） */
.cir-grid line { stroke: var(--line); stroke-width: 1; }
.cir-grid .cir-node { fill: var(--n-300); stroke: none; }

/* 接线柱 */
.cir-term { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.cir-term-on { fill: var(--b-elec); stroke: var(--b-elec); }

/* 高亮 / 弱化 */
.cir-hi .cir-wire, .cir-hi.cir-wire,
.cir-hi .cir-lead, .cir-hi .cir-body { stroke: var(--brand); }
.cir-hi .cir-dot { fill: var(--brand); }
.cir-dim { opacity: .28; }

/* 电流动画 */
.cir-flow path { fill: var(--b-elec); stroke: none; }
.cir-flow { animation: flowPulse 1.5s var(--ease) infinite; }
@keyframes flowPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* 判定反馈 */
.cir-ok .cir-wire, .cir-ok .cir-lead, .cir-ok .cir-body { stroke: var(--ok); }
.cir-bad .cir-wire, .cir-bad .cir-lead, .cir-bad .cir-body { stroke: var(--err); }
.cir-bad { animation: shake 380ms var(--ease); }

/* ---------- 作图训练器 ---------- */
.draw-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--s-5);
  align-items: start;
}
@media (max-width: 1000px) {
  .draw-layout { grid-template-columns: minmax(0, 1fr); }

}

.canvas-shell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3);
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.canvas-shell.tool-wire { cursor: crosshair; }
.canvas-shell.tool-place { cursor: copy; }
.canvas-shell.tool-erase { cursor: not-allowed; }

.canvas-hint {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  color: var(--ink-3); font-size: var(--fs-sm); text-align: center;
  padding: var(--s-6);
}
.canvas-hint .inner { max-width: 340px; line-height: 1.7; }

/* 元件面板 */
.palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.pal-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--s-2) var(--s-1);
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pal-item:hover { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-1px); }
.pal-item[aria-pressed="true"], .pal-item.active {
  border-color: var(--brand); background: var(--brand-soft);
  box-shadow: 0 0 0 2px var(--brand-soft);
}
.pal-item .pal-name { font-size: var(--fs-xs); color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.pal-item.active .pal-name { color: var(--brand-ink); }
.pal-item svg { display: block; }
.pal-item[disabled] { opacity: .4; cursor: not-allowed; pointer-events: none; }
.pal-count {
  display: inline-grid; place-items: center;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--ink-3); color: var(--surface);
  font-size: 10px; font-weight: 800; margin-left: 4px;
}

/* 工具条 */
.toolbar { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }

/* 判定结果面板 */
.verdict { margin-top: var(--s-3); }
.verdict-line {
  display: flex; gap: var(--s-2); align-items: flex-start;
  padding: var(--s-2) 0; font-size: var(--fs-sm); line-height: 1.65;
  border-bottom: 1px dashed var(--line);
}
.verdict-line:last-child { border-bottom: 0; }
.verdict-ico { flex-shrink: 0; width: 18px; text-align: center; font-weight: 800; }
.verdict-err .verdict-ico { color: var(--err); }
.verdict-warn .verdict-ico { color: var(--warn); }
.verdict-ok .verdict-ico { color: var(--ok); }

/* 读数面板 */
.readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: var(--s-2); }
.readout-cell {
  padding: var(--s-3); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); text-align: center;
}
.readout-k { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; margin-bottom: 2px; }
.readout-v {
  font-size: var(--fs-lg); font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.25;
}
.readout-u { font-size: var(--fs-xs); color: var(--ink-2); font-weight: 600; margin-left: 2px; }

/* 步骤提示 */
.steps { counter-reset: st; }
.steps li {
  list-style: none; position: relative; padding-left: 30px; margin-bottom: var(--s-3);
  line-height: 1.65; font-size: var(--fs-sm);
}
.steps li::before {
  counter-increment: st; content: counter(st);
  position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-ink);
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
}

/* ---------- 虚拟实验室 ---------- */
.lab-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-5); align-items: start; }
@media (max-width: 1000px) { .lab-layout { grid-template-columns: minmax(0, 1fr); } }
.lab-panel { display: flex; flex-direction: column; gap: var(--s-4); }
.ctrl-row { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.ctrl-row .label { margin: 0; min-width: 92px; flex-shrink: 0; }
.ctrl-row output {
  min-width: 74px; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: var(--fs-base); color: var(--brand-ink);
}
.slider-wrap { flex: 1; min-width: 90px; }

/* 数据记录表 */
.data-log { max-height: 220px; overflow-y: auto; }

/* 图表 */
.chart-svg { display: block; width: 100%; height: auto; }
.chart-axis { stroke: var(--n-400); stroke-width: 1.5; }
.chart-grid-l { stroke: var(--line-soft); stroke-width: 1; }
.chart-tick { fill: var(--ink-3); font-size: 10px; font-family: system-ui, sans-serif; }
.chart-lbl { fill: var(--ink-2); font-size: 12px; font-weight: 600; font-family: system-ui, sans-serif; }
.chart-pt { fill: var(--brand); stroke: var(--surface); stroke-width: 1.5; }
.chart-pt-2 { fill: var(--b-therm); }
.chart-pt-3 { fill: var(--ok); }
.chart-pt-4 { fill: var(--warn); }
.chart-line { stroke: var(--brand); stroke-width: 2; fill: none; }
.chart-line-2 { stroke: var(--b-therm); }
.chart-line-3 { stroke: var(--ok); }
.chart-line-4 { stroke: var(--warn); }
.chart-line, .chart-line-2, .chart-line-3, .chart-line-4 { stroke-width: 2; fill: none; }

/* ---------- 作图交互层 ---------- */
/* 节点点击热区：透明，悬停/聚焦时显形 */
.cir-nodehit {
  fill: transparent; stroke: transparent; stroke-width: 0;
  cursor: pointer; transition: fill var(--t-fast) var(--ease);
}
.cir-nodehit:hover { fill: color-mix(in srgb, var(--brand) 22%, transparent); }
.tool-wire .cir-nodehit, .tool-place .cir-nodehit { fill: color-mix(in srgb, var(--brand) 8%, transparent); }
.tool-wire .cir-nodehit:hover, .tool-place .cir-nodehit:hover {
  fill: color-mix(in srgb, var(--brand) 30%, transparent);
}

/* 元件/导线点击热区（删除、改错） */
.cir-hit {
  stroke: transparent; stroke-width: 20; fill: none;
  cursor: pointer; pointer-events: stroke;
}
.tool-erase .cir-hit { stroke: color-mix(in srgb, var(--err) 10%, transparent); }
.tool-erase .cir-hit:hover { stroke: color-mix(in srgb, var(--err) 45%, transparent); }
.cir-hit-locked { cursor: not-allowed; }
.tool-erase .cir-hit-locked:hover { stroke: color-mix(in srgb, var(--warn) 30%, transparent); }

/* 待放置的第一个节点 */
.cir-pending {
  fill: var(--brand); stroke: var(--surface); stroke-width: 3;
  animation: pop var(--t-slow) var(--ease-out) both;
}

/* ---------- 滑动变阻器专项（放大示意图） ---------- */
.cir-coil { stroke: var(--ink-3); stroke-width: 1; opacity: .55; }
.rheo-term {
  fill: var(--surface); stroke: var(--ink); stroke-width: 2.5;
  cursor: pointer; transition: fill var(--t-fast) var(--ease), stroke var(--t-fast) var(--ease), r var(--t-fast) var(--ease);
}
.rheo-term:hover { fill: var(--brand-soft); stroke: var(--brand); }
.rheo-term.on { fill: var(--b-elec); stroke: var(--b-elec); }
.rheo-term-txt {
  fill: var(--ink); stroke: none; font-size: 15px; font-weight: 800;
  text-anchor: middle; pointer-events: none;
  font-family: "Cambria Math", Georgia, serif; font-style: italic;
}
.rheo-term.on + .rheo-term-txt, .rheo-term-txt:hover { fill: var(--ink); }
.rheo-link {
  stroke: var(--b-elec); stroke-width: 3; stroke-dasharray: 7 5;
  fill: none; opacity: .85; animation: dashMove 1.1s linear infinite;
}
@keyframes dashMove { to { stroke-dashoffset: -24; } }

/* ---------- 章节页 ---------- */
.sec-nav {
  position: sticky; top: var(--nav-h);
  display: flex; gap: var(--s-1); overflow-x: auto;
  padding: var(--s-2) 0; margin-bottom: var(--s-4);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px); z-index: 20;
  scrollbar-width: thin;
}
.sec-nav button {
  flex-shrink: 0; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: all var(--t-fast) var(--ease); white-space: nowrap;
}
.sec-nav button:hover { border-color: var(--brand); color: var(--brand-ink); }
.sec-nav button[aria-current="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

.point-list { display: grid; gap: var(--s-3); }
.point {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); border-left: 3px solid var(--n-300);
}
.point-t { font-weight: 750; flex-shrink: 0; min-width: 96px; font-size: var(--fs-sm); color: var(--ink); }
.point-d { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.72; }
@media (max-width: 640px) {
  .point { flex-direction: column; gap: var(--s-1); }
  .point-t { min-width: 0; }
}

.pit-list { display: grid; gap: var(--s-3); }
.pit {
  padding: var(--s-3) var(--s-4);
  background: var(--warn-soft); border: 1px solid var(--warn-line);
  border-radius: var(--r-sm); font-size: var(--fs-sm); line-height: 1.72; color: var(--ink);
}
.pit::before { content: '⚠ '; color: var(--warn); font-weight: 800; }

.exp-card { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.exp-steps { counter-reset: es; padding-left: 0; }
.exp-steps li {
  list-style: none; position: relative; padding-left: 28px; margin-bottom: var(--s-2);
  font-size: var(--fs-sm); line-height: 1.7;
}
.exp-steps li::before {
  counter-increment: es; content: counter(es);
  position: absolute; left: 0; top: 2px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--surface); color: var(--info);
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
}

/* ---------- 磁吸放置 / 连续画线（自绘交互层） ---------- */
/* 元件吸附预览：指针停在哪个格子就高亮那条边 */
.cir-snap-line {
  stroke: var(--brand); stroke-width: 3;
  stroke-dasharray: 7 5; stroke-linecap: round;
  opacity: .85;
  animation: cir-dash .9s linear infinite;
}
.cir-snap-dot {
  fill: var(--brand); stroke: var(--surface); stroke-width: 2;
  opacity: .9;
}
/* 连续画线时的轨迹与笔尖 */
.cir-trace-line {
  stroke: var(--brand); stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .72;
}
.cir-trace-head {
  fill: var(--brand); stroke: var(--surface); stroke-width: 2.5;
}
/* 拖动元件时原位置的虚影 */
.cir-drag-origin {
  stroke: var(--ink-3); stroke-width: 2.5;
  stroke-dasharray: 3 5; stroke-linecap: round;
  opacity: .45;
}
.canvas-shell.cir-dragging { cursor: grabbing; }
@keyframes cir-dash { to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) {
  .cir-snap-line { animation: none; }
}

/* 手机端题目文字默认折叠 3 行，点"展开全文"再看完整要求（不然长题目会把画布推到屏幕外） */
.prompt-clamp {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ════ 手机端覆盖（必须放在文件最后：同特异性下后写的才生效）════ */
@media (max-width: 640px) {
  /* 元件盒改成横向滚动的一行：原来 2 列竖排会把画布挤出屏幕，选个元件要滚上滚下 */
  .palette {
    display: flex; flex-wrap: nowrap; grid-template-columns: none;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: var(--s-2); padding: 2px 2px 10px;
  }
  .palette > * { flex: 0 0 auto; width: 104px; }
  .palette::-webkit-scrollbar { height: 4px; }
  .palette::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
}