/* 产品迭代工作台 · 第八课作业一
   底座用 product-form.css，这里补：原型卡、大师卡、动作卡、迭代链、对照。 */

.pi-stage-body{position:relative}
.pi-cells{position:absolute;inset:0;pointer-events:none}
.pi-cell{position:absolute;box-sizing:border-box;border:1px solid rgba(139,143,136,.32)}
.pi-cell.alt{border-color:rgba(176,132,66,.5);background:rgba(176,132,66,.04)}
.pi-cell-tag{position:absolute;left:8px;top:7px;background:rgba(255,255,255,.88);border-radius:6px;
  padding:2px 8px;font-size:12px;color:var(--pf-ink2);font-weight:600}
.pi-cell.alt .pi-cell-tag{color:#8a6323}
.pi-cell-dim{position:absolute;left:8px;bottom:7px;font-size:10.5px;color:var(--pf-ink3);
  background:rgba(255,255,255,.8);border-radius:5px;padding:0 5px}

/* 原型卡 */
.pi-src{display:flex;gap:10px;align-items:flex-start}
.pi-src img{width:120px;height:90px;object-fit:cover;border-radius:8px;border:1px solid var(--pf-line2);background:#f1efe9}
.pi-src b{display:block;font-size:13px}
.pi-src small{display:block;font-size:10.5px;color:var(--pf-ink3);line-height:1.6}
.pi-ph{width:120px;height:90px;border-radius:8px;border:1px dashed var(--pf-line);background:#faf9f6}
.pi-needs{margin:6px 0 0;padding-left:18px;font-size:12px;line-height:1.75;color:var(--pf-ink2)}
.pi-list{margin:8px 0 0;padding-left:18px;font-size:11.5px;color:var(--pf-ink2);line-height:1.75}

/* 大师卡 */
.pi-masters{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pi-master{border:1px solid var(--pf-line);background:#fff;border-radius:9px;padding:7px 8px;text-align:left;cursor:pointer;color:var(--pf-ink)}
.pi-master b{display:block;font-size:12.5px;line-height:1.35}
.pi-master b .rec{font-style:normal;color:var(--pf-gold)}
.pi-master small{display:block;font-size:10.5px;color:var(--pf-ink3);line-height:1.4}
.pi-master em{font-style:normal;display:block;font-size:10px;color:var(--pf-accent);margin-top:2px}
.pi-master:hover{border-color:var(--pf-accent)}
.pi-master.on{border-color:var(--pf-accent);background:var(--pf-soft)}
.pi-pal{display:flex;gap:6px;margin-top:8px}
.pi-pal i{width:38px;height:24px;border-radius:5px;border:1px solid rgba(0,0,0,.08)}

/* 语言条 */
.pi-lang{border-top:1px solid var(--pf-line2);padding:7px 0}
.pi-lang:first-child{border-top:0}
.pi-lang b{font-size:12.5px}
.pi-lang p{margin:2px 0 0;font-size:11.5px;color:var(--pf-ink2);line-height:1.65}
.pi-lang em{font-style:normal;display:block;font-size:11px;margin-top:3px;color:var(--pf-ink3)}
.pi-lang em.ok{color:var(--pf-accent)}
.pi-lang em.warn{color:var(--pf-warn)}

/* 动作卡 */
.pi-act{border:1px solid var(--pf-line);background:#fff;border-radius:9px;padding:7px 9px;margin-bottom:6px;cursor:pointer}
.pi-act:hover{border-color:var(--pf-accent)}
.pi-act.on{border-color:var(--pf-accent);background:var(--pf-soft);box-shadow:0 0 0 2px rgba(47,107,82,.12)}
.pi-act.manual{cursor:default;opacity:.85;border-style:dashed}
.pi-act.manual:hover{border-color:var(--pf-line)}
.pi-act b{font-size:12.5px;display:block}
.pi-act b .hand{font-style:normal;font-size:10px;color:var(--pf-ink3);border:1px solid var(--pf-line);
  border-radius:4px;padding:0 4px;margin-left:5px;font-weight:400}
.pi-act p{margin:2px 0 0;font-size:11.5px;color:var(--pf-ink2);line-height:1.6}
.pi-act em{font-style:normal;display:block;font-size:10.5px;margin-top:3px;color:var(--pf-ink3)}
.pi-act em.ok{color:var(--pf-accent)}
.pi-act em.warn{color:var(--pf-warn)}

/* 改动清单 */
.pi-diff{margin:6px 0 8px;padding-left:18px;font-size:11.5px;color:var(--pf-ink2);line-height:1.7}
.pi-diff li{margin-bottom:2px}

/* 迭代链 */
.pi-chain{display:flex;flex-direction:column;gap:6px}
.pi-ver{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--pf-line);border-radius:9px;
  padding:6px;cursor:pointer;background:#fff}
.pi-ver:hover{border-color:var(--pf-accent)}
.pi-ver.on{border-color:var(--pf-accent);background:var(--pf-soft)}
.pi-ver img{width:84px;height:63px;object-fit:cover;border-radius:6px;background:#f1efe9;flex:0 0 84px}
.pi-ver .pi-ph{width:84px;height:63px;flex:0 0 84px}
.pi-ver>div{min-width:0;flex:1}
.pi-ver b{display:block;font-size:12.5px;line-height:1.35}
.pi-ver small{display:block;font-size:11px;color:var(--pf-ink2);line-height:1.55}
.pi-ver small.miss{color:var(--pf-warn)}
.pi-ver em{font-style:normal;display:block;font-size:10.5px;color:var(--pf-ink3);margin-top:2px;line-height:1.5}

/* 对照 */
.pi-ab{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pi-ab figure{margin:0}
.pi-ab img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--pf-line2);background:#f1efe9}
.pi-ab .pi-ph{width:100%;height:auto;aspect-ratio:4/3}
.pi-ab figcaption{font-size:11px;color:var(--pf-ink3);margin-top:3px;text-align:center}

.pi-prompt{margin:8px 0 0;padding:10px 12px;background:#faf9f6;border:1px solid var(--pf-line);border-radius:9px;
  font:12px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word;max-height:360px;overflow:auto}

@media (max-width:980px){
  .pi-masters{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .pi-masters{grid-template-columns:1fr}
  .pi-cell-dim{display:none}
}

/* 语言示例对照小图 */
.pi-eg{display:flex;align-items:center;gap:6px;margin:6px 0 2px}
.pi-eg figure{margin:0;flex:1;min-width:0}
.pi-eg img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;border:1px solid var(--pf-line2);background:#f6f4ee;display:block}
.pi-eg figcaption{font-size:10px;color:var(--pf-ink3);text-align:center;margin-top:2px}
.pi-eg-ar{flex:0 0 auto;color:var(--pf-accent);font-size:15px}
.pi-eg-note{font-style:normal;display:block;font-size:10.5px;color:var(--pf-ink3);line-height:1.5;margin-top:2px}
.pi-lang b .hand{font-style:normal;font-size:10px;color:var(--pf-ink3);border:1px solid var(--pf-line);
  border-radius:4px;padding:0 4px;margin-left:5px;font-weight:400}

/* 动作卡上的徽章 */
.pi-act b{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pi-act b .sug{font-style:normal;font-size:10px;font-weight:600;color:#fff;background:var(--pf-accent);
  border-radius:4px;padding:1px 5px}
.pi-act b .n{font-style:normal;font-size:10px;color:var(--pf-gold);font-weight:400;margin-left:auto}
.pi-act b .ok{font-style:normal;font-size:10px;color:var(--pf-accent);font-weight:400;margin-left:auto}
.pi-act.done{opacity:.66}
.pi-act.done:hover{border-color:var(--pf-line)}
.pi-pre{color:var(--pf-ink2) !important;border-top:1px dashed var(--pf-line2);margin-top:4px;padding-top:4px}

/* 怎么做 */
.pi-how{margin:4px 0 0;padding-left:20px;font-size:12px;color:var(--pf-ink2);line-height:1.8}
.pi-how li{margin-bottom:4px}
.pi-how b{color:var(--pf-ink)}


/* 这一页的右栏要更宽：示例图要看得清 */
.pi-wrap{grid-template-columns:262px minmax(0,1fr) 420px}
@media (max-width:1400px){ .pi-wrap{grid-template-columns:240px minmax(0,1fr) 380px} }
@media (max-width:1180px){ .pi-wrap{grid-template-columns:220px minmax(0,1fr) 340px} }
@media (max-width:980px){ .pi-wrap{grid-template-columns:1fr} }

/* 示例图：更大、可点开 */
.pi-eg{cursor:zoom-in;border-radius:8px;padding:2px;margin:8px 0 3px}
.pi-eg:hover{background:var(--pf-soft)}
.pi-eg img{aspect-ratio:4/3}
.pi-eg figcaption .zoom{font-style:normal;color:var(--pf-accent);margin-left:3px}
.pi-eg-big{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:10px 0}
.pi-eg-big figure{margin:0}
.pi-eg-big img{width:100%;border-radius:10px;border:1px solid var(--pf-line2);background:#f6f4ee;display:block}
.pi-eg-big figcaption{font-size:12px;color:var(--pf-ink3);text-align:center;margin-top:5px}


/* ══════════ 部件清单与参数（第 3 步左栏） ══════════ */
.pi-formcard h3{font-size:12px}
.pi-formcard .pf-note{margin:2px 0 0}

.pi-parts{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.pi-part{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--pf-line2);
  border-radius:8px;background:#fff;cursor:pointer;line-height:1.35}
.pi-part:hover{border-color:var(--pf-line)}
.pi-part.on{border-color:var(--pf-accent);background:var(--pf-soft);box-shadow:inset 2px 0 0 var(--pf-accent)}
.pi-part.off{opacity:.45}
.pi-part>i{width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.14);flex:none}
.pi-part>span{min-width:0;flex:1;display:flex;flex-direction:column}
.pi-part b{font-size:12px;font-weight:600;color:var(--pf-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi-part small{font-size:10px;color:var(--pf-ink3)}
.pi-part>u{flex:none;font-size:10px;color:var(--pf-ink3);text-decoration:none;border:1px solid var(--pf-line2);
  border-radius:5px;padding:1px 5px;background:#fff}
.pi-part>u:hover{color:var(--pf-accent);border-color:var(--pf-accent)}
.pf-link{border:0;background:none;padding:0;font:inherit;color:var(--pf-accent);cursor:pointer;text-decoration:underline}

.pi-f{display:grid;grid-template-columns:62px minmax(0,1fr) 54px 20px;align-items:center;gap:6px;margin:3px 0}
.pi-f label{font-size:11px;color:var(--pf-ink2)}
.pi-f input[type=range]{width:100%;accent-color:var(--pf-accent);height:18px}
.pi-f input[type=number]{width:100%;font-size:11px;padding:2px 4px;border:1px solid var(--pf-line2);
  border-radius:5px;background:#fff;color:var(--pf-ink)}
.pi-f u{font-size:10px;color:var(--pf-ink3);text-decoration:none}
.pi-f2{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:6px;margin:4px 0}
.pi-f2 label{font-size:11px;color:var(--pf-ink2)}
.pi-f2 select{width:100%;font-size:11px;padding:3px 4px;border:1px solid var(--pf-line2);border-radius:5px;background:#fff}
.pi-f2 input[type=color]{width:100%;height:24px;padding:0;border:1px solid var(--pf-line2);border-radius:5px;background:#fff}
.pi-f3{display:flex;gap:12px;margin-top:6px}
.pi-f3 label{font-size:11px;color:var(--pf-ink2);display:flex;align-items:center;gap:4px}

.pi-draft{border-color:var(--pf-accent)}
.pi-draft.empty{border-color:var(--pf-line2)}
.pi-draft.empty h3{color:var(--pf-ink3)}

/* ══════════ 条款：默认只有标题和状态，点开才展开 ══════════ */
.pi-rule{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--pf-line2);
  border-radius:8px;background:#fff;cursor:pointer;margin-top:4px}
.pi-rule:hover{border-color:var(--pf-line)}
.pi-rule b{font-size:12.5px;font-weight:600;color:var(--pf-ink);flex:1;min-width:0}
.pi-rule i{font-style:normal;font-size:10px;padding:1px 6px;border-radius:5px;flex:none;
  background:var(--pf-soft);color:var(--pf-ink2)}
.pi-rule.is-change i{background:rgba(200,90,44,.12);color:var(--pf-gold)}
.pi-rule.is-done i{background:rgba(47,107,82,.12);color:var(--pf-accent)}
.pi-rule.is-na{opacity:.6;background:#faf9f5}
.pi-rule.is-na b{font-weight:500}
.pi-rule.open{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent}
.pi-rule.picked{border-color:var(--pf-accent);background:var(--pf-soft)}
.pi-rule-body{border:1px solid var(--pf-line2);border-top:0;border-radius:0 0 8px 8px;padding:7px 9px 9px;
  background:#fdfcf9;font-size:11.5px;color:var(--pf-ink2);line-height:1.65}
.pi-rule-body p{margin:0 0 4px}
.pi-rule-body em{display:block;font-style:normal;font-size:11px;margin-top:3px}
.pi-rule-body em.ok{color:var(--pf-accent)}
.pi-rule-body em.warn{color:var(--pf-gold)}
.pi-rule-body em.pi-swap{color:var(--pf-ink3)}
.pf-note.sel{color:var(--pf-accent)}
.pi-guide{border-style:dashed}
.pi-rule i.sug{background:var(--pf-accent);color:#fff}

/* ══════════ 撤销 / 还原点 / 出的是哪一版 ══════════ */
.pf-vbtn.warn{border-color:var(--pf-gold);color:var(--pf-gold);background:rgba(200,90,44,.06)}
.pf-vbtn.warn:hover{background:rgba(200,90,44,.12)}
.pf-menu-sep{font-size:10px;color:var(--pf-ink3);padding:7px 10px 3px;border-top:1px solid var(--pf-line2);margin-top:3px}
.pf-menu-sep em{font-style:normal;color:var(--pf-ink3);opacity:.8}
.pf-menu-empty{font-size:11px;color:var(--pf-ink3);padding:4px 10px 8px}
.pi-ver{position:relative}
.pi-use{position:absolute;top:4px;right:4px;font-size:9px;text-decoration:none;color:#fff;background:var(--pf-accent);
  border-radius:4px;padding:1px 5px;line-height:1.5}

/* ══════════ 年龄系列 ══════════ */
.pi-ages{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.pi-age{display:flex;gap:8px;padding:5px;border:1px solid var(--pf-line2);border-radius:8px;background:#fff;cursor:pointer}
.pi-age:hover{border-color:var(--pf-line)}
.pi-age.on{border-color:var(--pf-accent);background:var(--pf-soft)}
.pi-age img,.pi-age .pi-ph{width:52px;height:39px;object-fit:cover;border-radius:5px;background:#eeece5;flex:none}
.pi-age>div{min-width:0;display:flex;flex-direction:column;justify-content:center}
.pi-age b{font-size:12px;font-weight:600;color:var(--pf-ink)}
.pi-age small{font-size:10px;color:var(--pf-ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pi-age small.miss{color:var(--pf-gold)}
.pf-btn.sm{padding:3px 8px;font-size:11px}
.pf-btn.danger{color:var(--pf-gold);border-color:var(--pf-gold)}
.pi-ref{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;margin:4px 0 6px}
.pi-ref>div{display:flex;justify-content:space-between;gap:6px;font-size:11.5px;padding:2px 0;border-bottom:1px dotted var(--pf-line2)}
.pi-ref b{font-weight:500;color:var(--pf-ink2)}
.pi-ref span{color:var(--pf-ink);font-variant-numeric:tabular-nums}
.pf-in{width:100%;font-size:11px;padding:3px 5px;border:1px solid var(--pf-line2);border-radius:5px;background:#fff;color:var(--pf-ink)}