/* 0925 货架(fe2): cube 货架的名字/分组/已放小片/闪一下 + 程序货架 #codeShelf + 零件货架(pickDlg)按动法分层。
   3c.css 一个字不改; 这里只加新类。红 #e0453a 只给 cube 方块, 蓝 #2f6fd6 是 3C 这一行的蓝。 */

/* [hidden] 守卫: 下面几个容器自带 display:flex/grid, 作者样式会压过 UA 的 [hidden] */
.codeshelf[hidden],.mk-have[hidden],.picklayer[hidden],.pickgrid-in[hidden]{display:none!important}

/* ---------- cube 货架: 展开态别被卡片里的长标签撑宽 ----------
   ★ 0925 实测(HEAD 版也一样): 展开态 flex-basis 是 250px, 但 flex 项默认 min-width:auto = 内容最小宽,
   .mk-flag 的 nowrap 长句(「real HW …」)把轨道撑到 ~700px, Blockly 被挤到 22px。以前只有手点 ⇔ 才会展开;
   现在程序货架点缺件的预设会自动展开(shelf.open {tab:'cube'}), 所以在这里收住: 轨道按 250px 算, 标签折行。 */
.shelf.rail{min-width:0}
.shelf.rail.wide .mk-flag{white-space:normal}
@media (max-width:560px){ .shelf.rail.wide{flex-basis:min(250px,60vw)} }

/* ---------- cube 货架: 图标下面常驻一个小名字(轨道态也看得见) ---------- */
.mk-card .mk-ico{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;width:52px;min-width:0}
.mk-rname{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  width:100%;font-size:10px;line-height:1.15;text-align:center;color:var(--text,#1e293b);
  overflow-wrap:anywhere;word-break:break-word}
.shelf.rail:not(.wide) .mk-card .mk-ico{width:auto;max-width:50px}
.shelf.rail:not(.wide) .mk-rname{max-width:50px}

/* 组头: Act (OUT) 在前, Sense (IN) 在后 */
.mk-grp{margin:8px 8px 2px;font-size:10.5px;font-weight:700;letter-spacing:.03em;line-height:1.2}
.mk-grp[data-grp="out"]{color:#b91c1c}
.mk-grp[data-grp="in"]{color:#1d4ed8}
.shelf.rail:not(.wide) .mk-grp{margin:6px 1px 0;font-size:9px;text-align:center;letter-spacing:0}

/* 卡片后面: 这一种已经放了的每一颗, 一个 ✕ 小片(悬停时 ✕ 变实) */
.mk-have{display:flex;flex-wrap:wrap;gap:3px;margin:-2px 6px 5px;padding-left:4px}
.shelf.rail:not(.wide) .mk-have{justify-content:center;margin:-2px 1px 5px;padding:0}
.mk-have .mk-hchip{display:inline-flex;align-items:center;gap:2px;max-width:100%;min-width:0;
  font-size:10px;line-height:1;padding:2px 4px;border-radius:4px;border:1px solid;cursor:pointer;background:#fff}
.mk-have .mk-hchip.out{color:#b91c1c;border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.07)}
.mk-have .mk-hchip.in{color:#1d4ed8;border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.07)}
.mk-have .mk-hchip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44px}
.mk-have .mk-hchip .x{opacity:.4;font-size:9px}
.mk-have .mk-hchip:hover,.mk-have .mk-hchip:focus-visible{border-color:currentColor}
.mk-have .mk-hchip:hover .x,.mk-have .mk-hchip:focus-visible .x{opacity:1}
/* R4(0926): 小片也能拖(换挂点)。touch-action:none —— 不然触屏上一拖就被货架的纵向滚动抢走(pointercancel);
   user-select:none —— 鼠标从按钮上拖出去别顺手选中一片字。单击仍然是删除, 所以光标用 grab 而 ✕ 照旧。 */
.mk-have .mk-hchip{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.mk-have .mk-hchip.dragging{opacity:.45;border-style:dashed;cursor:grabbing}

/* 程序货架点了缺件的预设 -> 缺的那几种闪 1.2s */
@keyframes mk-flash-red{0%,100%{box-shadow:0 0 0 0 rgba(224,69,58,0)}35%,70%{box-shadow:0 0 0 3px rgba(224,69,58,.6)}}
@keyframes mk-flash-blue{0%,100%{box-shadow:inset 0 0 0 0 rgba(47,111,214,0)}35%,70%{box-shadow:inset 0 0 0 2px rgba(47,111,214,.7)}}
.mk-card.flash{animation:mk-flash-red .6s ease-in-out 2;border-color:#e0453a}

/* ---------- 程序货架: Code 面板顶上一行, 横向滚动, 永远不撑宽页面 ---------- */
.codeshelf{flex:0 0 auto;display:flex;align-items:center;gap:6px;height:30px;max-height:30px;padding:0 8px;
  min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap;
  border-bottom:1px solid var(--border,rgba(0,0,0,.09));background:#fbfcfe;scrollbar-width:thin}
.codeshelf.flash{animation:mk-flash-blue .6s ease-in-out 2}
.codeshelf .cs-lbl{flex:0 0 auto;font-size:10.5px;font-weight:700;color:var(--muted,#64748b);letter-spacing:.03em}
.codeshelf .cs-card{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;
  font-size:11px;line-height:1;border-radius:6px;border:1px solid #2f6fd6;background:#fff;color:#1d3f7a;cursor:pointer;
  white-space:nowrap}
.codeshelf .cs-card.ok:hover{background:rgba(47,111,214,.08);border-color:#2f6fd6}
.codeshelf .cs-card.miss{border-style:dashed;border-color:rgba(47,111,214,.5);color:var(--muted,#64748b)}
.codeshelf .cs-card.miss:hover{background:rgba(0,0,0,.03);border-color:rgba(47,111,214,.7)}
.codeshelf .cs-sq{display:inline-flex;gap:2px}
.codeshelf .cs-sq i{display:block;width:7px;height:7px;border-radius:1.5px;background:#e0453a}
.codeshelf .cs-sq i.off{background:transparent;border:1px dashed #e0453a;box-sizing:border-box}
.codeshelf .cs-wall{border:1px dashed rgba(0,0,0,.25);color:var(--muted,#64748b);background:transparent;cursor:default}
.codeshelf .cs-fallback{flex:0 0 auto;font-size:11px;color:var(--muted,#64748b);font-style:italic}

/* ---------- 零件货架: 按动法分层 ---------- */
.pickgrid.layered{display:block}
.pickgrid .pickline{margin:0 0 8px;font-size:12px;color:var(--muted,#64748b)}
.picklayer{margin:0 0 12px}
.picklayer h4{position:sticky;top:0;z-index:1;display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  margin:0 0 6px;padding:4px 0;font-size:12.5px;background:#fff}
.picklayer h4 .ic{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:5px;background:#2f6fd6;color:#fff;font-size:12px}
.picklayer h4 .mut{font-weight:400;font-size:11px}
.picklayer .picktag{font-size:10.5px;font-weight:400;padding:1px 7px;border-radius:99px;
  background:rgba(0,0,0,.06);color:var(--muted,#64748b)}
.picklayer.grey h4 .ic{background:#9aa3af}
.pickgrid-in{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}

/* 0926 construct 融合: 每层「这一层有哪几类机构」—— 一排会动的立体小卡, 点一类只留下用到它的模型 */
.pickkinds{margin:-2px 0 10px}
.pickkinds .pk-toggle{font-size:12px;font-weight:700;color:#2f6fd6;background:none;border:1px dashed #2f6fd6;border-radius:12px;
  padding:2px 10px;cursor:pointer}
.pickkinds .pk-toggle:hover{background:#eef3fd}
.pickkinds .pk-row{display:flex;gap:8px;overflow-x:auto;padding:8px 2px 6px;scrollbar-width:thin;max-width:100%}
.pickkinds .pk-row[hidden],.pickkinds .pk-note[hidden],.pickcell[hidden]{display:none!important}
.kchip{flex:none;width:104px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 4px 5px;cursor:pointer;
  background:#fffdf8;border:1px solid rgba(29,29,31,.22);border-radius:9px;color:#1d1d1f}
.kchip.new{border-style:dashed}
.kchip:hover{border-color:#2f6fd6}
.kchip.on{border:2px solid #2f6fd6;background:#eef3fd}
.kchip svg{width:96px;height:auto;display:block}
.kchip .kn{font-size:11px;line-height:1.25;text-align:center;font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kchip .kc{font-size:10px;color:#6b6a66}
.pickkinds .pk-note{font-size:12px;margin:2px 2px 0}
@media (max-width:560px){ .kchip{width:92px} .kchip svg{width:84px} }

/* 0927 真人模拟录屏: 马达挂点列表 —— 贴地驱动轮 / 车里的轴(shelf.js motorMountRoles) */
.mk-mbtn .role{display:inline-block;margin-left:6px;padding:0 6px;border-radius:9px;font-size:10.5px;font-weight:700;line-height:16px}
.mk-mbtn .role.wheel{background:#dcfce7;color:#166534}
.mk-mbtn .role.inner{background:#f1f5f9;color:#64748b}
/* 0927 录屏闭环: 仿真里能用、真搭固定不住(装配方案 no_anchor / no_bracket / no_space) */
.mk-mbtn .role.nofit{background:#fef3c7;color:#92400e;font-weight:600}
.mk-mbtn.is-inner{opacity:.8}

@media (prefers-reduced-motion: reduce){
  .mk-card.flash,.codeshelf.flash{animation:none!important}
}