/* 布景屏的 UI（拟物化第 5 批，2026-08-29）。
 *
 * 台子那一半在 js/render/props/workBench.js（台面前沿、台腿、地上那圈光）。
 * 这个文件管**台面上摆着什么**。
 *
 * ---- 这一屏的语汇：工作台 ----
 *
 * 别的屏是"你走进一个地方"，这一屏是"你在这个地方干活"。所以它的物件不是
 * 建筑，是**工具**：分格盘、插板、两个开关，还有台面正中那张图纸（画布）。
 *
 * ⚠️ **画布本身一个字不改。** 它是这一轮里唯一一处 DOM 和 canvas 有**双向**
 * 交互的地方（点选放置 + 拖拽改朝向，有自己的命中测试）。给它换个边框可以，
 * 碰它的尺寸、比例、命中坐标都不行——`LayoutEditor` 是按显示尺寸换算世界
 * 坐标的，动一下就是"点哪儿放哪儿"整体偏移。
 *
 * ---- 爆炸半径 ----
 *
 * 每一条选择器都钉在 `.view[data-view="layout"]` 里。tools/workBench.test.js 扫。
 */

/* ==================== 面板 = 台面 ====================
 *
 * ⚠️ **它的下沿就是台面的前沿**：背景那边的 `contentBox()` 读的正是这个
 * border-box，台面板的厚度、台腿的起点、地上那圈光的中心全从它推。
 * 所以这个文件不许改它的盒子。
 */
.view[data-view="layout"] .card {
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 90%, var(--stone-lit)) 0%,
    var(--stone-face) 70%,
    color-mix(in srgb, var(--stone-face) 84%, var(--stone-deep)) 100%);
  box-shadow:
    /* 上棱迎光：那盏聚光的灯在正上方 */
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 26%, transparent),
    inset 1px 0 0 var(--stone-seam),
    inset -1px 0 0 var(--stone-seam),
    0 1px 0 var(--stone-seam);
}

/* ==================== 分格盘 ====================
 *
 * 草案 4.6：「`#deco-palette` → 分格木盘：每种装饰一格，拿起来的那一件浮起」。
 * 这座城里没有木头，换成**凿出格子的石盘**：盘身凹进台面，每格再凹一层,
 * 拿起来的那一件**浮出格子**（凸出 + 接地影）。
 *
 * ⚠️ 盘子画成 CSS 而不是台子层：台面板是不透明的，背景在它后面透不出来
 * （4.8 那一轮在"五道横缝"上撞过两次同一件事）。
 */
.view[data-view="layout"] .layout-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 6px;
}
/* ---- 那一栏（2026-08-30）----
 *
 * 用户定的形状：「下方或者侧方有一栏，可以选收藏品或者装饰两个标签，
 * 小图能看到是什么，拖上去就能布置。」
 *
 * 盘身还是那块**凿出格子的石盘**，只是从画布上方搬到了下方，而且里面多了
 * 一排标签页。搬到下面是因为**手要从栏里往缸里走**——那个方向和"把东西放进
 * 缸"是一致的，放在上面等于让人把东西往下按。 */
.view[data-view="layout"] .deco-dock {
  margin: 8px 0 4px;
  padding: 6px;
  border-radius: 1px;
  /* 盘身：凹进台面的一块。 */
  background: var(--stone-deep);
  box-shadow:
    inset 0 2px 5px -1px rgba(0, 0, 0, 0.7),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 10%, transparent);
}
/* 标签页借基础层那套石头（style.css 的 .screen-tabs），只把外边距收一收。 */
.view[data-view="layout"] .dock-tabs {
  margin-bottom: 6px;
}
.view[data-view="layout"] .dock-grid {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.view[data-view="layout"] .dock-empty {
  margin: 4px 2px;
}
/* 缩略图：**那件东西真正的样子**（LayoutEditor 用和缸里同一份画法画进去）。
   这里只给它一个凹格，不碰里面一个像素。 */
.view[data-view="layout"] .chip-art {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 1px;
  background: var(--stone-deep);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
}
/* 已经摆在缸里的那件：留一道金边，和"选中"是同一套语义色。
   ⚠️ 用 outline 而不是 border——border 会改盒子大小，一排格子会跟着抖。 */
.view[data-view="layout"] .deco-chip.is-placed .chip-art {
  outline: 1px solid color-mix(in srgb, var(--other) 60%, transparent);
  outline-offset: -1px;
}
/* 一格：竖着排（图在上、名字在下），因为图变成了 46px 的方块。 */
.view[data-view="layout"] .deco-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  /* flex 项默认可以被压到内容宽度以下。窄屏上五个标签挤在 282px 里就会
     被压扁，"水草丛"断成"水草 / 丛"——名字断在词中间比换一行难读得多。
     容器本来就 flex-wrap，禁止收缩之后它们会老老实实换行。 */
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 5px 6px;
  border: 0;
  border-radius: 1px;
  color: inherit;
  font: inherit;
  font-size: var(--fs-sm);
  cursor: var(--cur-pointer);
  /* 没拿起来的那几件：**躺在格子里**（凹进去）。 */
  background: var(--stone-seam);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
.view[data-view="layout"] .deco-chip:hover:not(:disabled) {
  background: color-mix(in srgb, var(--stone-seam) 70%, var(--stone-face));
}
/* 拿起来的那一件：**浮出格子**。 */
.view[data-view="layout"] .deco-chip.selected {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 84%, var(--stone-lit)) 0%,
    var(--stone-face) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 34%, transparent),
    0 1px 0 var(--stone-seam),
    0 3px 7px -3px rgba(0, 0, 0, 0.9);
  /* ⚠️ 选中的高亮色**一个字不动**：`--other` 那个金是"选中"的语义色。 */
  outline: 1px solid var(--other);
  outline-offset: -1px;
}
.view[data-view="layout"] .deco-chip:disabled { opacity: 0.35; cursor: var(--cur-no); }
/* ⚠️ 这里原来有 `.deco-swatch`——一格里那个 10px 的品牌色小方块。**删了**：
   格子里现在是**那件东西真正的样子**（.chip-art，LayoutEditor 用和缸里同一份
   画法画进去的）。一个色块和一张画像并排出现时，色块只是噪点。 */
.view[data-view="layout"] .deco-cost { color: var(--ink-dim); font-size: var(--fs-xs); }

/* ==================== 预算 = 一块插板 ====================
 *
 * 草案 4.6：「预算条 → 10 孔插板：插满即满。**「预算固定 10 点，不能扩容」
 * 这句话由物件本身说出来**（插板上就只有十个孔），不用再写一遍」。
 *
 * 孔的个数由 `LayoutEditor` 按 `LAYOUT_BUDGET` 生成，不写死在 CSS 里
 * ——写死就是给那条规则开了第二个来源。
 */
.view[data-view="layout"] .layout-budget {
  font-size: var(--fs-sm);
  color: var(--ink-dim);
  min-width: 110px;
}
/* ⚠️ 板要比孔**亮**。第一版板是 seam、孔是"seam 再压一档"——实测两者只差
   1~2/255，整块插板读作一条黑杠，十个孔一个都看不见。
   板是一块**压在台面上的石片**（凸出、上棱迎光），孔是凿进它的十个坑。 */
.view[data-view="layout"] .budget-board {
  display: flex;
  gap: 3px;
  margin-top: 5px;
  padding: 3px;
  border-radius: 1px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 88%, var(--stone-lit)) 0%,
    var(--stone-face) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 24%, transparent),
    0 1px 0 var(--stone-seam);
}
/* 一个空孔：凿进去的一个小方坑。 */
.view[data-view="layout"] .budget-hole {
  width: 9px;
  height: 9px;
  border-radius: 1px;
  background: #000;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.9),
    /* 孔的下唇迎着光：没有这一道，黑方块读作"贴上去的"而不是"凿进去的" */
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 18%, transparent);
}
/* 插上了：一根塞子，凸出来一点，颜色是"选中"那个金（语义色，不动）。 */
.view[data-view="layout"] .budget-hole.is-filled {
  background: var(--other);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 5px color-mix(in srgb, var(--other) 45%, transparent);
}

/* ==================== 图纸 ====================
 *
 * ⚠️ 只换边框和角，**尺寸/比例/命中一律不碰**（见文件开头）。 */
.view[data-view="layout"] .layout-tip { margin: 2px 0 8px; }
.view[data-view="layout"] .layout-canvas {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  /* 实际比例由 LayoutEditor 按世界尺寸设成 inline style；
     这里只是个占位，免得图片加载前布局跳动。 */
  aspect-ratio: 3 / 2;
  border-radius: 1px;
  border: 0;
  cursor: var(--cur-aim);
  touch-action: none; /* 指针拖拽改朝向时别让页面跟着滚 */
  /* 图纸压在台面上：一圈凿边 + 一道接地影。 */
  box-shadow:
    inset 0 0 0 1px var(--stone-seam),
    0 2px 6px -3px rgba(0, 0, 0, 0.9);
}

/* ==================== 两个开关 ====================
 *
 * 保存是主动作（凸得最明显），清空是撤销（暗一档）——和强化那一块
 * "退掉"的处置同一条：**撤销不该和主动作抢**。 */
/* ⚠️ `:not(.primary-btn)` 是 2026-08-30 加的：这条通用规则是"这一屏按钮的
   默认材料"，而主行动按钮**自带语义**（它是这一屏要你按的那一颗）。
   和图鉴那次标签页同一条判据：**默认材料只回答"它是什么做的"，
   回答不了"它是不是主角"。** 主行动的样子在 css/stone.css 末尾统一给。 */
.view[data-view="layout"] .controls button:not(.primary-btn) {
  border: 0;
  border-radius: 1px;
  padding: 8px 18px;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 84%, var(--stone-lit)) 0%,
    var(--stone-face) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 28%, transparent),
    0 1px 0 var(--stone-seam),
    0 3px 7px -3px rgba(0, 0, 0, 0.85);
}
.view[data-view="layout"] .controls button:not(.primary-btn):hover:not([disabled]) {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 42%, transparent),
    0 1px 0 var(--stone-seam),
    0 4px 9px -3px rgba(0, 0, 0, 0.9);
}
.view[data-view="layout"] .controls button:not(.primary-btn):active:not([disabled]) {
  transform: translateY(1px);
  background: var(--stone-deep);
  box-shadow: inset 0 2px 5px -1px rgba(0, 0, 0, 0.75);
}
.view[data-view="layout"] .controls #clear-layout-btn {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 70%, var(--stone-deep)) 0%,
    var(--stone-deep) 100%);
}

/* ==================== 给台子留出站的地方 ====================
 *
 * 这一屏的面板里装着一张 640×400 的画布，内容一高，面板的下沿就贴到画面
 * 底边——1280×720 实测地平线以下**只剩 24px**，台腿和地上那圈光都没地方站
 * （家具那边有一条 `MIN_ROOM` 的退化路径兜着，但那时它只说得出半句话）。
 *
 * ⚠️ 加在 `.screen-body` 上，**不是 `.card` 上**：地平线读的是 card 的
 * border-box，往它身上加 margin 就是把地平线悄悄挪走，而背景那边不会知道。 */
/* ⚠️ 这里原来是 `padding-bottom: 96px`（壳之前自己垫的那段地面）。**删了**
   ——地面现在由 `--horizon` 那条带管，两处一起留会多出一段空（账在
   css/atlas.css 里同一处改动）。 */