/* ════════════════════════════════════════════════════════════════════
   Workbench mode (2026-07-02) — spec §4/§5/§6/§7
   ────────────────────────────────────────────────────────────────────
   State carrier = body[data-workbench="true"]. This partial owns the
   three parallel motions (library slide-out, viewport shrink, panel
   slide-in), the true-masonry card grid, and single-card fullscreen.
   Durations reuse the existing motion tokens (--dur-panel / --ease-out,
   00-tokens-base.css) — no new duration constants (CLAUDE.md §10.2).
   ════════════════════════════════════════════════════════════════════ */

:root {
  --workbench-w: 50vw;   /* left/right 5:5: canvas 50% / measurement panel 50% */
}
@media (max-width: 1200px) { :root { --workbench-w: 50vw; } }
@media (max-width: 860px)  { :root { --workbench-w: 100vw; } }  /* canvas fully behind */

/* Panel container: always present, off-screen until workbench is on.
   液态玻璃（DESIGN.md §6.4，同 .panel-floating 配方，反馈③）：float-bg 玻璃体 +
   backdrop blur/saturate + 高光边(--float-edge) + 三层投影(--float-shadow) + 玻璃噪点
   (24-glass-noise.css 名单已加 #workbench-panel) + 玻璃边(--glass-border)。 */
#workbench-panel {
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  bottom: 0;
  width: var(--workbench-w);
  z-index: 12;                 /* above library(10)/dock(11), below floating panels(1000) */
  display: flex;
  flex-direction: column;
  background-color: var(--float-bg);
  background-image: var(--glass-noise);   /* 2% 单色噪点（用 -color/-image 分写，避免 background 简写清掉噪点） */
  backdrop-filter: blur(var(--float-blur)) saturate(var(--float-sat));
  -webkit-backdrop-filter: blur(var(--float-blur)) saturate(var(--float-sat));
  border-left: 1px solid var(--glass-border);
  box-shadow: var(--float-shadow), var(--float-edge);
  transform: translateX(100%);
  transition: transform var(--dur-panel) var(--ease-out);
  overflow: hidden;
}
body[data-workbench="true"] #workbench-panel { transform: none; }

/* Library slides out (kept in DOM so it slides back on exit). */
#library { transition: transform var(--dur-panel) var(--ease-out); }
body[data-workbench="true"] #library { transform: translateX(-100%); pointer-events: none; }
body[data-workbench="true"] #res-l,
body[data-workbench="true"] .dock-edge-toggle { display: none; }
body[data-workbench="true"] .action-dock {
  left: calc((100% - var(--workbench-w)) / 2);
}

/* Canvas stays FULL-BLEED behind the panel (2026-07-06, user: “不够液态玻璃”).
   The old approach shrank #viewport's right edge, so behind the glass panel sat
   only the flat page bg → the backdrop-filter had nothing to blur and the panel
   read as a solid slab, not glass. Now the 3D scene renders behind the panel
   (like the topbar / dock over the full-bleed canvas, DESIGN.md §6.4) → the
   blur/saturate acts on the live scene = real liquid glass. To keep the bench
   fully visible in the unoccluded left band, scene.js reframes the perspective
   camera with a RIGHT view-offset equal to the panel width (same UX-5
   dock-avoidance machinery, just mirrored to the right edge). */

/* ── "+ Add readout" button — floats at the panel's OUTER top-left corner ────
   (user 2026-07-06: 面板只留瀑布流；折叠头删掉；Add 钮移出面板、贴外缘左上。)
   right edge flush with the panel's left edge → the pill sits just OUTSIDE the
   panel over the canvas. High transparency at rest → solid glass on hover (same
   language as the topbar collapse handle). Shown only in workbench mode with
   ≥1 hidden readout (CSS gate below + the `hidden` attr set in render()). */
.wb-add-btn {
  position: fixed;
  top: calc(var(--topbar-h) + 12px);
  right: var(--workbench-w);            /* right edge = panel's left edge; opens leftward */
  z-index: 13;                          /* just above the panel (12) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Small "+" tab (user 2026-07-06)：单个加号，贴面板外缘的小方条。 */
  width: 20px;
  height: 24px;
  padding: 0;
  /* At rest: near-invisible — just a faint + hugging the edge. */
  background: var(--ctl-rest);
  border: 1px solid var(--ctl-line);
  border-radius: 6px 0 0 6px;           /* rounded on the outer (left) side */
  color: var(--ink-1);
  opacity: 0.86;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    opacity 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    right var(--dur-panel) var(--ease-out);
}
/* On hover: solidify into a glass pill. */
.wb-add-btn:hover {
  opacity: 1;
  color: var(--ink-1);
  background: var(--float-bg);
  backdrop-filter: blur(var(--float-blur)) saturate(var(--float-sat));
  -webkit-backdrop-filter: blur(var(--float-blur)) saturate(var(--float-sat));
  border-color: var(--glass-border);
  box-shadow: var(--float-shadow), var(--float-edge);
}
.wb-add-btn:focus-visible { outline: none; opacity: 1; box-shadow: 0 0 0 2px var(--overlay-2); }
.wb-add-btn[hidden] { display: none; }
body:not([data-workbench="true"]) .wb-add-btn { display: none; }   /* never outside workbench */

/* ── Masonry (true waterfall: independent flex columns, staggered full height) ──
   反馈（第三轮）①：左右列互不依赖、按内容**错位**；卡片默认显示**完整高度**。用 JS 分列的
   flex 多列（workbench-panel.js columnCount/ensureColumns，index%N 稳定分配）——CSS grid 把
   同行左右卡耦合成等高（高卡溢出遮挡，上一轮的坑），CSS multi-column 又会**困住全屏卡的绝对
   定位**（只铺到列区、铺不满面板）。flex 列两者都避开：列独立、卡自然高、全屏卡 inset:0 正确
   铺满面板。 */
.wb-masonry {
  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
  padding: 12px;
  display: flex;
  align-items: flex-start;    /* 列顶对齐，各列独立向下生长 */
  gap: 12px;
}
.wb-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.wb-card {
  min-width: 0;
  margin: 0;
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: 8px;
  /* 默认高度=内容（完整显示，反馈①）；可手动拖高（resize:vertical → 手柄右下角、只改高度），
     内容超出出滚动条（overflow:auto）。min-height 让拖到最矮时也至少留「分界线以上（卡头）+
     底部圆角」一截（≈ 卡头 30px + 圆角余量 14px）。max-height:max-content = 拖到内容全显后
     不再继续拉高（反馈：没内容可显时限制扩展）。 */
  overflow: auto;
  resize: vertical;
  min-height: 44px;
  max-height: max-content;
}
.wb-card.is-selected { outline: 2px solid var(--sig-select); outline-offset: -1px; }
/* 反馈②：卡片分界线以上（名字 + 按钮）始终可见——卡头 sticky 钉在卡片滚动视口顶部，
   拖矮/滚动都不会滚掉；实色背景遮住下方滚过来的读数。 */
.wb-card-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--line-1);   /* 分界线 */
}
/* 反馈#1：关闭/全屏钮在卡头左侧，器件名右侧。 */
.wb-card-actions { display: flex; gap: 7px; flex: none; align-items: center; }
.wb-card-name {
  margin-left: auto; text-align: right;
  font-size: 12px; font-weight: 600; color: var(--ink-1); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-card-sub { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); flex: none; }
/* 反馈：左上角两颗钮统一改**黑白**（去掉红），方形圆角；全屏钮用「方形四角」全屏图标（SVG）。
   黑白 = 主题自适应 --surface-3 底 + --ink-1 前景（浅色近黑 / 深色近白），字形常显。 */
.wb-tl {
  width: 17px; height: 17px; flex: none; padding: 0;
  border-radius: 4px; cursor: pointer;
  border: 1px solid var(--line-1);
  background: var(--surface-3); color: var(--ink-1);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.wb-tl:hover { background: var(--hover-bg); border-color: var(--hover-border); }
.wb-tl:focus-visible { outline: none; border-color: var(--sig-select); box-shadow: 0 0 0 2px var(--sig-select); }
.wb-tl-close::before { content: "\00d7"; font-size: 13px; line-height: 1; }   /* × */
.wb-tl-fs svg { width: 11px; height: 11px; }                  /* 方形全屏图标（尺寸；显隐见下） */
/* 只显一个图标：未全屏显展开、全屏显收拢。显隐规则都用 class（0,1,0 / 0,2,0），
   不让 `.wb-tl-fs svg`(0,1,1) 的 display 抢赢 → 修「全屏钮有俩图标」。 */
.wb-fs-ic-open { display: block; }
.wb-fs-ic-close { display: none; }
.wb-card.is-fullscreen .wb-fs-ic-open { display: none; }
.wb-card.is-fullscreen .wb-fs-ic-close { display: block; }
.wb-card-body { padding: 10px 12px 12px; }

/* Camera readout display controls: Workbench-only, per camera instance. */
.wb-card-body .cam-view-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin: 0 0 8px;
}
/* 反馈：未展开（masonry）相机卡窄，Palette / Zoom 竖排两行——每行 label 左、控件右，
   不再挤在一行留大空档或换行错位。全屏（.is-fullscreen，宽）仍走上面的单行 space-between。 */
.wb-card:not(.is-fullscreen) .wb-card-body .cam-view-controls { flex-direction: column; align-items: stretch; gap: 6px; }
.wb-card:not(.is-fullscreen) .wb-card-body .cam-view-field { justify-content: space-between; width: 100%; }
.wb-card-body .cam-view-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 10px;
  color: var(--ink-3);
}
.wb-card-body .cam-view-field span {
  flex: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.wb-card-body .cam-palette-select {
  min-width: 0;
  max-width: 112px;
  height: 24px;
  padding: 0 22px 0 7px;
  border: 1px solid var(--line-1);
  border-radius: 4px;
  background: var(--surface-1);
  color: var(--ink-1);
  font: 11px var(--font-ui);
}
.wb-card-body .cam-zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.wb-card-body .cam-view-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-2);
  font: 500 11px var(--font-mono);
  line-height: 1;
  cursor: pointer;
}
.wb-card-body .cam-zoom-select {
  width: 52px;
  height: 24px;
  padding: 0 18px 0 7px;
  border: 1px solid var(--line-1);
  border-radius: 4px;
  background: var(--surface-1);
  color: var(--ink-1);
  font: 11px var(--font-mono);
  line-height: 1;
}
.wb-card-body .cam-view-btn:hover:not(:disabled) {
  background: var(--hover-bg);
  border-color: var(--hover-border);
  color: var(--ink-1);
}
.wb-card-body .cam-view-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ── Fullscreen card = split: left readout, right adjustments (6:4，反馈④) ── */
.wb-card.is-fullscreen {
  position: absolute; inset: 0;                 /* fill the whole panel (header removed) */
  z-index: 5; margin: 0; border-radius: 0; display: flex; flex-direction: column; overflow: hidden;
  resize: none; max-height: none;               /* 全屏铺满：关掉 masonry 卡的手动 resize + max-content 上限 */
}
body.wb-has-fullscreen .wb-card:not(.is-fullscreen) { visibility: hidden; }
/* Split only in fullscreen; a normal masonry card shows readout only. */
.wb-card-split { display: block; }
.wb-card-fs-controls { display: none; }
.wb-card.is-fullscreen .wb-card-split { flex: 1 1 auto; display: flex; min-height: 0; }
.wb-card.is-fullscreen .wb-card-body {
  flex: 0 0 60%; min-width: 0; overflow-y: auto; border-right: 1px solid var(--line-1);
}
.wb-card.is-fullscreen .wb-card-fs-controls {
  display: block; flex: 1 1 40%; min-width: 0; overflow-y: auto; padding: 8px 12px 16px;
}
/* 反馈③：纯读数卡（无可调项，如功率计/相机/光谱）全屏时无右栏，读数铺满整卡。 */
.wb-card.is-fullscreen.wb-fs-noctl .wb-card-body { flex: 1 1 100%; border-right: none; }
.wb-card.is-fullscreen.wb-fs-noctl .wb-card-fs-controls { display: none; }

/* Temp (control-only) card has no readout → stack: thin note on top, params fill below. */
.wb-card-temp.is-fullscreen .wb-card-split { flex-direction: column; }
.wb-card-temp.is-fullscreen .wb-card-body { flex: 0 0 auto; border-right: none; border-bottom: 1px solid var(--line-1); }
.wb-card-temp.is-fullscreen .wb-card-fs-controls { flex: 1 1 auto; }

/* Fold away the PM readout's Path row in workbench (反馈⑤). */
.wb-card-body .m-row-path { display: none; }

/* Empty state (no detectors on the bench). */
.wb-empty {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 32px; color: var(--ink-3); font-size: 12px; line-height: 1.6;
}

/* ── Hidden-readout drawer (fixed popover under the floating Add button) ── */
.wb-drawer {
  position: fixed; z-index: 14;                 /* JS sets top/right, anchored to .wb-add-btn */
  min-width: 200px; max-width: 320px;
  background: var(--surface-1); border: 1px solid var(--line-1); border-radius: 8px;
  box-shadow: var(--float-shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px;
  animation: menu-pop var(--dur-enter) var(--ease-out);
}
.wb-drawer-item {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  font: inherit; font-size: 12px; color: var(--ink-1); text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  padding: 6px 8px; cursor: pointer;
}
.wb-drawer-item:hover { background: var(--hover-bg); border-color: var(--hover-border); }

/* Fullscreen enter transition. */
.wb-card.is-fullscreen { animation: wb-fs-in var(--dur-panel) var(--ease-out); }
@keyframes wb-fs-in { from { opacity: 0.4; } to { opacity: 1; } }

/* Relocated Inspector controls (params section + AOI) sit flush in the right panel. */
.wb-card-fs-controls #ins-tunables-section { margin: 0 0 10px; display: block; }
.wb-card-fs-controls #ins-aoi-mount { display: block; }
.wb-card-fs-controls .ins-section-eyebrow,
.wb-card-fs-controls .ins-section-title {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);  /* §4.7 R1/R3 — 阶下限 11 */
}

/* Non-detector temporary fullscreen card (no readout, control-only). */
.wb-card-temp { outline: 2px solid var(--sig-select); outline-offset: -1px; }
.wb-readout-none {
  font-size: 11px; color: var(--ink-3); font-style: italic;
  padding: 10px 12px; letter-spacing: 0.02em;
}

/* PM readout: flatten the nested `.measurement` card frame inside wb-card-body
   (only the power meter reuses the framed component; frog/camera/spectrum render flat). */
.wb-card-body .measurement { margin: 0; padding: 0; background: none; border: none; border-radius: 0; }

/* Scene-level pump/probe delay readout. */
.ppd-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ppd-kicker {
  font-size: 10px; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.ppd-value {
  font-family: var(--font-mono); font-size: 22px; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--ink-1);
}
.ppd-status { font-size: 12px; color: var(--ink-2); }
.ppd-rows { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.ppd-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11px; line-height: 1.35; color: var(--ink-3);
}
.ppd-row b {
  min-width: 0; text-align: right; font-family: var(--font-mono); font-weight: 500;
  color: var(--ink-1); overflow-wrap: anywhere;
}
.ppd-card.is-unresolved .ppd-value { color: var(--ink-3); font-size: 16px; }

/* TA typical-result preview (timing chain complete + |delay| within threshold;
   pump-probe-delay-card taPreviewState). Illustrative image, not simulated. */
.ppd-ta-preview { margin: 4px 0 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ppd-ta-preview img {
  display: block; width: 100%; height: auto;
  border-radius: 6px; border: 1px solid var(--line-1);
}
.ppd-ta-preview figcaption { font-size: 11px; color: var(--ink-3); }
.ppd-ta-dev { font-size: 10px; color: var(--ink-3); opacity: .75; font-family: var(--font-mono); }

/* Floating Inspector stays hidden in workbench — its params/AOI are relocated
   into the fullscreen card's right panel (workbench-panel relocateInspectorControls). */
body[data-workbench="true"] #panel-inspector { display: none !important; }

/* 反馈#2：工作台模式下这些画布浮层不该压在测量面板上（面板是液态玻璃、会透出）——
   浏览器式画布标签条、3D 比例尺、CAD 件号气泡在工作台态隐藏，退出即恢复。!important 是为
   了压过 scale-bar.js 每帧写的 inline `display`（否则内联样式赢）。修图层逻辑，非只调 z-index。*/
body[data-workbench="true"] #canvas-tabs,
body[data-workbench="true"] .scalebar,
body[data-workbench="true"] #help-fab,                                       /* 右上角 ? 速查钮：工作台下隐藏 */
body[data-workbench="true"] .overhead-stack { display: none !important; }   /* 器件上方悬浮气泡（读数 chip / ⚙ 药丸 / 件号气泡）整层隐藏，不压面板 */