/* ============================================================================
   主从视图：右侧详情面板（点行不跳页）
   —— 这是本轮交互重构的主角。
   ⚠️ 面板是 fixed 浮层，会盖住顶栏右侧的搜索框与密度按钮（上一轮真踩过，
      断言全绿但截图里搜索框整个不见了）。所以宽屏时给工作区让位，
      窄屏面板全屏时不加让位（否则整页被挤窄）。
   ============================================================================ */
.panel{
  position:fixed;top:var(--top);right:0;bottom:0;width:var(--panel-w);
  background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--sh-pop);
  display:flex;flex-direction:column;z-index:25;
  transform:translateX(100%);transition:transform .22s var(--move);
  /* ⚠️ 收起时用 visibility 彻底摘出绘制与溢出计算。
     只靠 translateX(100%) 是**不够**的：元素被平移到 left=414 right=828，
     仍然参与横向溢出 → 实测 390px 的手机上 innerWidth 被撑成 **414**，
     整页出现横向滚动，连带 .top 的 scrollWidth 也变成 414。
     visibility:hidden 的元素不产生溢出框，pointer-events:none 保证收起的面板点不到。
     transition 里带上 visibility 且延迟到动画结束（.22s），否则会「一收起就消失」看不出滑动。 */
  visibility:hidden;pointer-events:none;
  transition:transform .22s var(--move),visibility 0s linear .22s;
}
.panel[data-open="true"]{
  transform:translateX(0);visibility:visible;pointer-events:auto;
  transition:transform .22s var(--move),visibility 0s;
}
@media (min-width:861px){
  .work{transition:padding-right .22s var(--move)}
  body[data-panel="open"] .work{padding-right:var(--panel-w)}
}
@media (prefers-reduced-motion:reduce){
  .panel{transition:none}
  .work{transition:none}
}

.p-hd{padding:16px 18px 12px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:10px}
.p-hd h2{font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.p-hd .sub{font-size:12px;color:var(--ink3);margin-top:2px}
.p-x{
  width:30px;height:30px;flex:0 0 auto;border-radius:var(--r-sm);margin-left:auto;
  display:flex;align-items:center;justify-content:center;color:var(--ink3);
}
.p-x:hover{background:var(--surface3);color:var(--ink)}
.p-bd{flex:1;overflow:auto;padding:16px 18px}
.p-ft{
  padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;
  background:var(--surface2);
}

/* 详情里的可编辑字段：点一下就变输入框，不用跳编辑页 */
.p-edit{display:flex;flex-direction:column;gap:10px}
.p-f{display:flex;flex-direction:column;gap:5px}
.p-f label{font-size:12px;color:var(--ink3);font-weight:600}
.p-f input,.p-f select,.p-f textarea{
  height:32px;padding:0 9px;border-radius:var(--r-sm);border:1px solid var(--line2);
  background:var(--surface);font-size:13px;width:100%;
}
.p-f textarea{height:auto;min-height:76px;padding:8px 9px;line-height:1.6;resize:vertical}
.p-f input:focus,.p-f select:focus,.p-f textarea:focus{border-color:var(--brand);outline:none}

/* 详情里的小结块 */
.p-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.p-stats > div{padding:9px 10px;border-radius:var(--r-sm);background:var(--surface2);border:1px solid var(--line)}
.p-stats b{display:block;font-size:18px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.p-stats span{font-size:11px;color:var(--ink3)}