/* 读图与建模 · 第七课练习一二三
   复用 product-form.css 的底座，这里只补：图纸面板、候选格角标、选项按钮、分层格子。 */

/* ── 舞台：左边图纸，右边三维 ── */
.rm-stage-body{display:flex;align-items:stretch;height:min(70vh,680px)}
.rm-paper{flex:0 0 330px;max-width:40%;height:100%;border-right:1px solid var(--pf-line2);
  background:#fbfaf7;padding:10px 11px 12px;display:flex;flex-direction:column;gap:6px;overflow:auto}
.rm-paper-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.rm-paper-head b{font-size:12.5px}
.rm-paper-head small{font-size:10.5px;color:var(--pf-ink3)}
.rm-stage-body .pf-canvas-hold{flex:1 1 auto;min-width:0;height:100%;min-height:0}

/* ── 三视图图纸 ── */
.rm-sheet{display:block;width:100%;background:#fff;border:1px solid var(--pf-line2);border-radius:8px}
.rm-sheet-grid line{stroke:#eeebe4;stroke-width:1}
.rm-sheet-line{fill:none;stroke:#2b2e2a;stroke-width:2.2;stroke-linecap:square}
.rm-sheet-mine{fill:none;stroke:#d08a4e;stroke-width:5;stroke-linecap:round;opacity:.65}
.rm-sheet-label{fill:var(--pf-ink3);font-size:10.5px;text-anchor:middle}
.rm-sheet-note{margin:4px 0 0;font-size:10.5px;color:var(--pf-ink3);display:flex;align-items:center;gap:4px}
.rm-sheet-note i{display:inline-block;width:14px;height:4px;border-radius:2px;background:#d08a4e}
.rm-sheet-note i.tgt{background:#2b2e2a}

/* ── 三维格子角标 ── */
.rm-cells{position:absolute;inset:0;pointer-events:none}
.rm-cell{position:absolute;box-sizing:border-box;border:1px solid rgba(139,143,136,.38)}
.rm-cell.on{border-color:var(--pf-accent);box-shadow:inset 0 0 0 1px rgba(47,107,82,.34)}
.rm-cell-tag{position:absolute;left:7px;top:6px;display:inline-flex;align-items:baseline;gap:5px;
  background:rgba(255,255,255,.86);border-radius:6px;padding:1px 7px;font-size:11.5px;color:var(--pf-ink2)}
.rm-cell-tag b{font-size:13px;color:var(--pf-ink);font-weight:600}
.rm-cell.on .rm-cell-tag b{color:var(--pf-accent)}
.rm-cell-tag i{font-style:normal;font-size:10px;color:var(--pf-accent)}
.rm-cell-dim{position:absolute;left:7px;bottom:6px;font-size:10.5px;color:var(--pf-ink3);
  background:rgba(255,255,255,.8);border-radius:5px;padding:0 5px}
.rm-cell-max{position:absolute;right:6px;top:5px;pointer-events:auto;border:1px solid var(--pf-line);
  background:rgba(255,255,255,.9);border-radius:5px;font-size:11px;line-height:1.5;padding:0 5px;
  cursor:pointer;color:var(--pf-ink2)}
.rm-cell-max:hover{border-color:var(--pf-accent);color:var(--pf-accent)}

/* ── 题目列表 ── */
.rm-qbtn{display:block;width:100%;text-align:left;border:1px solid var(--pf-line);background:#fff;
  border-radius:9px;padding:6px 9px;margin-bottom:5px;cursor:pointer;color:var(--pf-ink)}
.rm-qbtn b{display:block;font-size:12.5px;font-weight:600}
.rm-qbtn i{font-style:normal;display:block;font-size:10.5px;color:var(--pf-ink3)}
.rm-qbtn:hover{border-color:var(--pf-accent)}
.rm-qbtn.on{border-color:var(--pf-accent);background:var(--pf-soft)}
.rm-qbtn.ok b::after{content:" ✓";color:var(--pf-accent)}
.rm-qbtn.bad b::after{content:" ✕";color:var(--pf-warn)}

/* ── 选项 ── */
.rm-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0 2px}
.rm-opt{border:1px solid var(--pf-line);background:#fff;border-radius:9px;padding:9px 0;font-size:16px;
  font-weight:600;cursor:pointer;color:var(--pf-ink2)}
.rm-opt:hover{border-color:var(--pf-accent);color:var(--pf-accent)}
.rm-opt.on{border-color:var(--pf-accent);background:var(--pf-soft);color:var(--pf-accent)}
.rm-opt.right{border-color:var(--pf-accent);background:var(--pf-accent);color:#fff}
.rm-opt.wrong{border-color:var(--pf-warn);background:var(--pf-warn-soft);color:var(--pf-warn)}

/* ── 分层格子 ── */
.rm-layers{display:flex;flex-direction:column;gap:7px}
.rm-layer{display:flex;align-items:center;gap:7px}
.rm-layer>b{flex:0 0 42px;font-size:10.5px;color:var(--pf-ink3);font-weight:500}
.rm-lgrid{display:grid;gap:2px;flex:0 0 auto}
.rm-lc{width:17px;height:17px;padding:0;border:1px solid var(--pf-line);background:#fff;border-radius:3px;cursor:pointer}
.rm-lc:hover{border-color:var(--pf-accent)}
.rm-lc.on{background:var(--pf-accent);border-color:var(--pf-accent)}
.rm-lc:disabled{cursor:default;opacity:.7}

.rm-list{margin:6px 0 0;padding-left:18px;font-size:11.5px;color:var(--pf-ink2);line-height:1.75}
.rm-list li{margin-bottom:3px}
.rm-list b{color:var(--pf-ink)}

@media (max-width:1180px){
  .rm-paper{flex-basis:280px}
}
@media (max-width:980px){
  .rm-stage-body{flex-direction:column;height:auto}
  .rm-paper{flex:0 0 auto;max-width:none;height:auto;border-right:0;border-bottom:1px solid var(--pf-line2)}
  .rm-stage-body .pf-canvas-hold{height:min(54vh,440px)}
}
@media (max-width:560px){
  .rm-cell-dim{display:none}
  .rm-lc{width:15px;height:15px}
}

/* ── 题号小方块（题库变多之后） ── */
.rm-chips{display:flex;flex-wrap:wrap;gap:5px}
.rm-chip{width:27px;height:27px;padding:0;border:1px solid var(--pf-line);background:#fff;border-radius:8px;
  font-size:12.5px;font-weight:600;color:var(--pf-ink2);cursor:pointer;position:relative}
.rm-chip:hover{border-color:var(--pf-accent);color:var(--pf-accent)}
.rm-chip.on{border-color:var(--pf-accent);background:var(--pf-soft);color:var(--pf-accent)}
.rm-chip.ok::after{content:"✓";position:absolute;right:-2px;top:-5px;font-size:10px;color:var(--pf-accent)}
.rm-chip.bad::after{content:"✕";position:absolute;right:-2px;top:-5px;font-size:10px;color:var(--pf-warn)}
.rm-cur{margin:7px 0 0;font-size:12.5px;color:var(--pf-ink);font-weight:600}
.rm-cur i{font-style:normal;display:block;font-size:10.5px;color:var(--pf-ink3);font-weight:400}

/* ── 图纸上的「前」标注与可点视图 ── */
.rm-sheet-front{fill:#2f6b52;font-size:10px;font-weight:600;text-anchor:middle}
.rm-sheet-label.on{fill:var(--pf-accent);font-weight:600}
.rm-sheet-hit{fill:transparent;cursor:pointer}
.rm-sheet-hit:hover{fill:rgba(47,107,82,.07)}
.rm-sheet-note b{color:var(--pf-ink2)}