/* v25 · 新拟物手感组件（键帽、指示灯、拨动开关、滑轨、机械数字、卡片抽拉）。配合 shared/tactile.js。
 *
 * 规则（与设计稿一致）：
 *  - 只在暖白拟物配色（data-theme="soft"）下生效：每条规则都以 :root[data-theme="soft"] 开头，
 *    四套深色配色逐像素不变（机械数字的 .tk-* 结构只有 tactile.js 在暖白配色下才会生成）。
 *  - 手感只给“能操作的东西”：键帽、开关、滑轨、可抽拉卡片；表格、正文保持平面。
 *  - 钴蓝只表示：按下 / 通电 / 当前 / 关键数据。报警红只表示故障。
 *  - 光的四态（稳定 / 琥珀闪烁 / 虚线空心 / 红色裂纹）含义与动画不变，只是装进“灯座”。
 *  - 动效 120–320 ms 弹簧；系统“减少动态效果”或站内开关（html.hq-reduced / html.x-reduced）打开时全部去掉。
 */

/* ---------- 指示灯：装进灯座 ---------- */
:root[data-theme="soft"] .hq-dot,
:root[data-theme="soft"] .x-dot{box-shadow:0 0 0 3px #E6D9CE,inset 1px 1px 2px rgba(0,0,0,.18)}
:root[data-theme="soft"] .hq-dot.ok,:root[data-theme="soft"] .x-dot.is-ok{background:#0B7480;box-shadow:0 0 0 3px #E6D9CE,0 0 8px rgba(11,116,128,.55)}
:root[data-theme="soft"] .hq-dot.stale,:root[data-theme="soft"] .x-dot.is-stale{background:#C98A1B;box-shadow:0 0 0 3px #E6D9CE,0 0 8px rgba(201,138,27,.6)}
:root[data-theme="soft"] .hq-dot.invalid,:root[data-theme="soft"] .x-dot.is-invalid{background:#E2552D;box-shadow:0 0 0 3px #E6D9CE,0 0 8px rgba(226,85,45,.55)}
:root[data-theme="soft"] .hq-dot.invalid::after,:root[data-theme="soft"] .x-dot.is-invalid::after{background:#F2E8E0}
:root[data-theme="soft"] .hq-dot.missing,:root[data-theme="soft"] .x-dot.is-missing{background:#E6D9CE;border-color:#8A7F75;box-shadow:inset 1px 1px 2px #C9BBAF}
:root[data-theme="soft"] .x-dot.is-assume{background:#EFE2D6;border-color:#8A5400;box-shadow:none}

/* ---------- 链路条：一排键帽 ---------- */
:root[data-theme="soft"] .hq-chain{gap:4px;padding:6px 8px}
:root[data-theme="soft"] .x-rings{gap:4px;padding:4px 6px}
:root[data-theme="soft"] .hq-ring,
:root[data-theme="soft"] .x-ring{border:0!important;border-radius:14px;background:#F2E8E0!important;color:#23201D;box-shadow:-3px -3px 8px #FFFFFF,3px 3px 8px #D6C8BD;
  transition:transform 160ms var(--nm-spring),box-shadow 160ms var(--nm-ease)}
:root[data-theme="soft"] .hq-ring:hover,:root[data-theme="soft"] .x-ring:hover{transform:translateY(-1px);box-shadow:-4px -4px 10px #FFFFFF,4px 4px 10px #D1C2B6}
:root[data-theme="soft"] .hq-ring.on,:root[data-theme="soft"] .hq-ring:active,
:root[data-theme="soft"] .x-ring.is-on,:root[data-theme="soft"] .x-ring:active{transform:translateY(1px);box-shadow:var(--nm-inset-s)!important;color:#2F4BD0}
:root[data-theme="soft"] .hq-ring.on .lab b,:root[data-theme="soft"] .x-ring.is-on>span{color:#2F4BD0}
:root[data-theme="soft"] .hq-ring .lab small,:root[data-theme="soft"] .x-ring small{color:#6E655E}
:root[data-theme="soft"] .hq-arrow{width:14px}

/* ---------- 工位列表：键帽 + 灯 + 键位 ---------- */
:root[data-theme="soft"] #stations{display:grid;gap:8px;padding:2px 4px 6px}
:root[data-theme="soft"] .hq-st{border:0!important;border-radius:14px;background:#F2E8E0!important;color:#23201D;padding:8px 10px;
  box-shadow:-3px -3px 8px #FFFFFF,3px 3px 8px #D6C8BD;transition:transform 160ms var(--nm-spring),box-shadow 160ms var(--nm-ease)}
:root[data-theme="soft"] .hq-st:hover{transform:translateY(-1px);box-shadow:-4px -4px 10px #FFFFFF,4px 4px 10px #D1C2B6}
:root[data-theme="soft"] .hq-st.on,:root[data-theme="soft"] .hq-st:active{transform:translateY(1px);box-shadow:var(--nm-inset-s)}
:root[data-theme="soft"] .hq-st.on .nm b,:root[data-theme="soft"] .hq-st.on .ct{color:#2F4BD0}
:root[data-theme="soft"] .hq-st kbd,:root[data-theme="soft"] .x-modenav kbd{border:0;border-radius:6px;background:#F2E8E0;color:#6E655E;line-height:18px;box-shadow:-1px -1px 3px #FFFFFF,1px 1px 3px #D6C8BD}
:root[data-theme="soft"] .hq-st .nm small,:root[data-theme="soft"] .hq-st .ct small{color:#6E655E}

/* ---------- 液压 2.0 模式条：十个键帽 ---------- */
:root[data-theme="soft"] .x-modes{gap:6px;padding:4px 6px 6px}
:root[data-theme="soft"] .x-mode{border:0!important;border-radius:12px;background:#F2E8E0!important;color:#23201D;box-shadow:-3px -3px 7px #FFFFFF,3px 3px 7px #D6C8BD;
  transition:transform 160ms var(--nm-spring),box-shadow 160ms var(--nm-ease)}
:root[data-theme="soft"] .x-mode:hover{transform:translateY(-1px)}
:root[data-theme="soft"] .x-mode[aria-current="true"]{transform:translateY(1px);box-shadow:var(--nm-inset-s);color:#2F4BD0;font-weight:600}
:root[data-theme="soft"] .x-mode[aria-current="true"]::after{display:none}
:root[data-theme="soft"] .x-mode kbd{color:#6E655E}
:root[data-theme="soft"] .x-modenav{display:grid;gap:8px}
:root[data-theme="soft"] .x-modenav button{border:0!important;border-radius:14px;background:#F2E8E0!important;color:#23201D;box-shadow:-3px -3px 8px #FFFFFF,3px 3px 8px #D6C8BD;transition:transform 160ms var(--nm-spring),box-shadow 160ms var(--nm-ease)}
:root[data-theme="soft"] .x-modenav button[aria-current="true"]{transform:translateY(1px);box-shadow:var(--nm-inset-s);color:#2F4BD0;font-weight:600}
:root[data-theme="soft"] .x-arrow{color:#B5A699}

/* ---------- 可点的数字：小凹槽；变化时机械滚动 ---------- */
:root[data-theme="soft"] .x-num{border:0!important;border-radius:8px;background:#F2E8E0;box-shadow:var(--nm-inset-s)}
:root[data-theme="soft"] .x-num:hover{background:#F2E8E0;box-shadow:inset 2px 2px 6px #D1C2B6,inset -2px -2px 6px #FFFFFF,0 0 0 1px rgba(47,75,208,.35)}
:root[data-theme="soft"] .x-num.is-hot{box-shadow:var(--nm-inset-s),0 0 0 2px rgba(47,75,208,.55)!important}
:root[data-theme="soft"] .x-num.is-hot b{color:#2F4BD0}
:root[data-theme="soft"] .hq-kpi .x{display:inline-block;align-self:flex-start;padding:2px 8px;border-radius:10px;box-shadow:var(--nm-inset-s)}

:root[data-theme="soft"] .tk-roll{display:inline-flex;align-items:baseline;white-space:nowrap}
:root[data-theme="soft"] .tk-d{display:inline-block;height:1.15em;line-height:1.15em;overflow:hidden;vertical-align:bottom}
:root[data-theme="soft"] .tk-s{display:flex;flex-direction:column;transform:translateY(calc(var(--d,0) * -1.15em));
  transition:transform 300ms var(--nm-spring);transition-delay:calc(var(--k,0) * 28ms)}
:root[data-theme="soft"] .tk-s::before{content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";white-space:pre;line-height:1.15em}
:root[data-theme="soft"] .tk-c::before{content:attr(data-c);white-space:pre}
.tk-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 作战地图：凹进去的观察窗 ---------- */
:root[data-theme="soft"] .hq-center{border:0!important;border-radius:24px;background:#F2E8E0}
:root[data-theme="soft"] .hq-mapwrap{border-radius:24px}
:root[data-theme="soft"] .hq-mapwrap::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  box-shadow:inset 6px 6px 16px #D6C8BD,inset -6px -6px 16px #FFFFFF}

/* ---------- 下一步：可抽拉的卡片 ---------- */
:root[data-theme="soft"] .hq-nx{border:0!important;border-radius:14px;background:#F2E8E0!important;color:#23201D;padding:6px 12px 6px 8px;margin:4px 2px;
  box-shadow:-3px -3px 8px #FFFFFF,3px 3px 8px #D6C8BD;touch-action:pan-x;
  transition:transform 320ms var(--nm-spring),box-shadow 160ms var(--nm-ease)}
:root[data-theme="soft"] .hq-nx:hover{transform:translateY(-1px);box-shadow:-4px -4px 10px #FFFFFF,4px 4px 10px #D1C2B6}
:root[data-theme="soft"] .hq-nx .st{border:0;border-radius:6px;color:#0B7480;background:#F2E8E0;box-shadow:var(--nm-inset-s);font-weight:600}
:root[data-theme="soft"] .hq-nx.overdue .st,:root[data-theme="soft"] .hq-nx.overdue .due{color:#8A5400}
:root[data-theme="soft"] .hq-nx .due{color:#6E655E}
:root[data-theme="soft"] .hq-nx.empty{box-shadow:var(--nm-inset-s);color:#6E655E}
:root[data-theme="soft"] .tk-pulling{transition:none!important;cursor:grabbing;z-index:5;position:relative;box-shadow:-8px -8px 18px #FFFFFF,8px 8px 18px #CDBDB0!important}
:root[data-theme="soft"] .tk-pull-ready{box-shadow:-8px -8px 18px #FFFFFF,8px 8px 18px #CDBDB0,0 0 0 2px #2F4BD0!important}

/* ---------- 拨动开关：复选框 → 拨杆（表格内的勾选框保持原样） ---------- */
:root[data-theme="soft"] input[type="checkbox"]:not(td input):not(th input){
  -webkit-appearance:none;appearance:none;flex:none;position:relative;width:38px;height:22px;margin:0 4px 0 0;border:0;border-radius:11px;cursor:pointer;vertical-align:middle;
  background:#F2E8E0;box-shadow:inset 2px 2px 5px #D6C8BD,inset -2px -2px 5px #FFFFFF}
:root[data-theme="soft"] input[type="checkbox"]:not(td input):not(th input)::before{
  content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#F2E8E0;
  box-shadow:-1px -1px 3px #FFFFFF,2px 2px 4px #C9BBAF;transition:transform 240ms var(--nm-spring)}
:root[data-theme="soft"] input[type="checkbox"]:not(td input):not(th input)::after{
  content:"";position:absolute;top:8px;right:7px;width:6px;height:6px;border-radius:50%;background:#C9BBAF;transition:background 200ms,box-shadow 200ms}
:root[data-theme="soft"] input[type="checkbox"]:not(td input):not(th input):checked::before{transform:translateX(16px)}
:root[data-theme="soft"] input[type="checkbox"]:not(td input):not(th input):checked::after{right:auto;left:7px;background:#2F4BD0;box-shadow:0 0 6px rgba(47,75,208,.6)}
:root[data-theme="soft"] input[type="checkbox"]:not(td input):not(th input):disabled{opacity:.5;cursor:not-allowed}
:root[data-theme="soft"] input[type="checkbox"]:not(td input):not(th input):focus-visible{outline:2px solid #2F4BD0;outline-offset:3px}
/* 故障开关通电时用报警色，不用钴蓝 */
:root[data-theme="soft"] .x-faults input[type="checkbox"]:checked::after{background:#E2552D;box-shadow:0 0 6px rgba(226,85,45,.6)}
:root[data-theme="soft"] .x-faults{gap:8px}
:root[data-theme="soft"] .x-faults li{border:0!important;border-radius:14px;background:#F2E8E0;box-shadow:-3px -3px 8px #FFFFFF,3px 3px 8px #D6C8BD;padding:8px 10px;gap:4px 8px}
:root[data-theme="soft"] .x-faults li.is-on{background:#F2E8E0!important;box-shadow:var(--nm-inset-s)}

/* ---------- 滑轨：凹槽 + 凸起拨钮 ---------- */
:root[data-theme="soft"] input[type="range"]{-webkit-appearance:none;appearance:none;height:22px;background:transparent;cursor:pointer}
:root[data-theme="soft"] input[type="range"]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:#F2E8E0;box-shadow:inset 2px 2px 4px #D6C8BD,inset -2px -2px 4px #FFFFFF}
:root[data-theme="soft"] input[type="range"]::-moz-range-track{height:8px;border-radius:4px;background:#F2E8E0;box-shadow:inset 2px 2px 4px #D6C8BD,inset -2px -2px 4px #FFFFFF}
:root[data-theme="soft"] input[type="range"]::-moz-range-progress{height:8px;border-radius:4px;background:rgba(47,75,208,.35)}
:root[data-theme="soft"] input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-6px;border-radius:50%;background:#F2E8E0;
  box-shadow:-2px -2px 5px #FFFFFF,2px 2px 5px #C9BBAF,inset 0 0 0 5px #F2E8E0,inset 0 0 0 7px #2F4BD0}
:root[data-theme="soft"] input[type="range"]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#F2E8E0;
  box-shadow:-2px -2px 5px #FFFFFF,2px 2px 5px #C9BBAF,inset 0 0 0 5px #F2E8E0,inset 0 0 0 7px #2F4BD0}
:root[data-theme="soft"] input[type="range"]:disabled{opacity:.5;cursor:not-allowed}
:root[data-theme="soft"] input[type="range"]:focus-visible{outline:2px solid #2F4BD0;outline-offset:3px;border-radius:6px}

/* 时间机器：凹槽滑轨，钴蓝拨钮（回放中拨钮变琥珀，表示“不是实时”） */
:root[data-theme="soft"] .hq-tm input[type="range"]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:#F2E8E0;box-shadow:inset 2px 2px 4px #D6C8BD,inset -2px -2px 4px #FFFFFF}
:root[data-theme="soft"] .hq-tm input[type="range"]::-moz-range-track{height:8px;border-radius:4px;background:#F2E8E0;box-shadow:inset 2px 2px 4px #D6C8BD,inset -2px -2px 4px #FFFFFF}
:root[data-theme="soft"] .hq-tm input[type="range"]::-webkit-slider-thumb{width:20px;height:20px;margin-top:-6px;background:#F2E8E0;
  box-shadow:-2px -2px 5px #FFFFFF,2px 2px 5px #C9BBAF,inset 0 0 0 5px #F2E8E0,inset 0 0 0 7px #2F4BD0}
:root[data-theme="soft"] .hq-tm input[type="range"]::-moz-range-thumb{width:20px;height:20px;background:#F2E8E0;
  box-shadow:-2px -2px 5px #FFFFFF,2px 2px 5px #C9BBAF,inset 0 0 0 5px #F2E8E0,inset 0 0 0 7px #2F4BD0}

/* 配色选择：五块键帽，当前那块按下 */
:root[data-theme="soft"] .hq-themes{gap:12px}
:root[data-theme="soft"] .hq-themes button,
:root[data-theme="soft"] .theme-option{border:0!important;border-radius:16px;background:#F2E8E0!important;color:#23201D;box-shadow:-3px -3px 8px #FFFFFF,3px 3px 8px #D6C8BD;
  transition:transform 160ms var(--nm-spring),box-shadow 160ms var(--nm-ease)}
:root[data-theme="soft"] .hq-themes button:hover,:root[data-theme="soft"] .theme-option:hover{transform:translateY(-1px)}
:root[data-theme="soft"] .hq-themes button[aria-pressed="true"],
:root[data-theme="soft"] .theme-option[aria-pressed="true"]{transform:translateY(1px);box-shadow:var(--nm-inset-s)!important}
:root[data-theme="soft"] .hq-themes button[aria-pressed="true"] b,
:root[data-theme="soft"] .theme-option[aria-pressed="true"] strong{color:#2F4BD0}
:root[data-theme="soft"] .hq-themes .sw i,:root[data-theme="soft"] .theme-swatches i{border:0;border-radius:50%;box-shadow:0 0 0 2px #F2E8E0,0 0 0 3px #D6C8BD}

/* ---------- 减少动态效果 ---------- */
@media (prefers-reduced-motion: reduce){
  :root[data-theme="soft"] .tk-s,:root[data-theme="soft"] .hq-nx,
  :root[data-theme="soft"] input[type="checkbox"]::before{transition:none!important}
}
:root[data-theme="soft"]:is(.hq-reduced,.x-reduced) .tk-s,
:root[data-theme="soft"]:is(.hq-reduced,.x-reduced) .hq-nx,
:root[data-theme="soft"]:is(.hq-reduced,.x-reduced) input[type="checkbox"]::before{transition:none!important}