/* T-17 画布 UI 外壳(视口 / 右侧坞 / 文本编辑框)。

   🔴 布局骨架 = **视口占满 + 右侧固定坞**(XMind 式两栏)。
   历史两轮踩过的坑都指向同一条规矩 —— 面板既不能是"随选择出现/消失的列",
   也不能是"浮在图上的层":
   · 面板曾作为画布的 flex 兄弟(选择一变列宽就变)⇒ 每次选中图都跳一下;
   · 候选面板曾绝对定位浮在图上 ⇒ 盖住图元与图层面板(「换图标」点不到的实测缺陷)。
   固定坞把"面板占哪块"从"内容决定"变成"常量",跳变与遮挡从结构上不再可能出现。 */
.schemata-canvas,
.schemata-viewport,
.schemata-dock,
.schemata-dock > * {
  /* 组件自带 border-box:坞宽必须是**常量** 248px ——
     宿主没有全局重置(harness 就是)时 content-box 会把它撑成 273px。 */
  box-sizing: border-box;
}
.schemata-canvas {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 100%;
  min-height: 320px;
  outline: none;
  background: #ffffff;
  border: 1px solid #dde3ec;
  border-radius: 12px;
  /* 滚轮是画布平移(见 view.ts onWheel),外层容器一律不滚 —— 嵌套滚动条是三份
     overflow 互相打架的产物(实测:页面滚、卡片滚、画布再滚)。 */
  overflow: hidden;
}
/* 视口:SVG 的窗口。overflow:hidden 是语义性的 —— 窗口外的世界不画出来,
   平移/缩放只改 viewBox(纯装饰态,不进 IR)。 */
.schemata-viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #eef1f5;
}
/* 🔴 SVG 铺满视口(width/height 100%),缩放由 viewBox 自己完成 ——
   窗口纵横比恒等于视口纵横比(view.ts windowMm),不会出现信箱边或变形。
   ⚠️ 元素上的 `width="180mm"` 等属性仍由 render() 写(那是 IR 语义),CSS 只覆盖布局。 */
.schemata-viewport svg {
  display: block;
  width: 100%;
  height: 100%;
}
.schemata-canvas:focus-visible { border-color: #0e7c72; }

/* 空格按住 = 平移手势预备态;拖动中给 grabbing。 */
.schemata-canvas.schemata-panning .schemata-viewport { cursor: grab; }
.schemata-canvas.schemata-panning:active .schemata-viewport { cursor: grabbing; }

/* 视口缩放控件(浮在**视口**右下角,不在坞里 —— 它是视口自己的仪表)。 */
.schemata-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #dde3ec;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(20, 30, 40, 0.08);
  font: 12px/1 "PingFang SC", system-ui, sans-serif;
  user-select: none;
}
.schemata-zoom button {
  border: none;
  background: transparent;
  color: #1b1d21;
  font-size: 15px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 6px;
  cursor: pointer;
}
.schemata-zoom button:hover { background: #eef2f6; }
.schemata-zoom .schemata-zoom-value {
  min-width: 42px;
  text-align: center;
  color: #33404e;
  cursor: pointer;
}
.schemata-zoom .schemata-zoom-value:hover { color: #0e7c72; }

/* ── 右侧固定坞:属性 / 候选 / 图层 ──────────────────────────────────
   宽度是**常量**(248px),选择怎么变都不动 —— 这是"图不跳"的全部秘密。
   三块面板的下单顺序由 `order` 定死(与 DOM append 次序解耦:
   drawOverlay 每次都会 remove+append,不钉住的话面板会互相换位)。 */
.schemata-dock {
  flex: 0 0 248px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 12px 12px;
  background: #ffffff;
  border-left: 1px solid #e6ebf2;
  font: 12px/1.5 "PingFang SC", system-ui, sans-serif;
  color: #1b1d21;
}
.schemata-dock[hidden] { display: none; }
.schemata-dock-head {
  order: 0;
  display: flex;
  justify-content: flex-end;
  flex: none;
  margin-bottom: 2px;
}
.schemata-dock-toggle {
  border: 1px solid transparent;
  background: transparent;
  color: #8b94a3;
  font: 12px/1 inherit;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.schemata-dock-toggle:hover { border-color: #dde3ec; color: #0e7c72; background: #f4f6fa; }
.schemata-canvas.is-dock-collapsed .schemata-dock {
  flex-basis: 34px;
  padding: 6px 4px;
}
.schemata-canvas.is-dock-collapsed .schemata-dock > :not(.schemata-dock-head) { display: none; }
/* 收起后只剩这一个按钮:必须一眼看得见("点得着的收起"才是退路)。 */
.schemata-canvas.is-dock-collapsed .schemata-dock-toggle {
  border-color: #dde3ec;
  background: #fff;
  color: #0e7c72;
  box-shadow: 0 1px 4px rgba(20, 30, 40, 0.10);
}

/* 属性面板(M-08):坞内的一块,不是浮层。 */
.schemata-props {
  order: 2;
  display: grid;
  gap: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef1f6;
}
.schemata-props h4 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #5a6577;
  word-break: break-all;
}
.schemata-field-group {
  display: grid;
  gap: 6px;
  padding: 6px 0;
  border-top: 1px solid #eef1f6;
}
.schemata-field-group:first-of-type { border-top: none; }
.schemata-field { display: grid; gap: 2px; }
.schemata-field > label {
  display: grid;
  gap: 3px;
  font-size: 11px;
  color: #5a6577;
}
.schemata-props input[type="color"] {
  width: 100%;
  height: 22px;
  padding: 1px;
  border: 1px solid #dde3ec;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}
.schemata-props input[type="number"],
.schemata-props select {
  width: 100%;
  padding: 3px 5px;
  border: 1px solid #dde3ec;
  border-radius: 5px;
  font: inherit;
  color: inherit;
  background: #fff;
}
.schemata-props input[type="number"]:focus,
.schemata-props select:focus { outline: 2px solid rgba(14, 124, 114, 0.35); outline-offset: -1px; }
.schemata-hint { color: #8b94a3; font-size: 10px; line-height: 1.4; }

/* 属性面板的「文字装不进框」告警与一键处置按钮(Q21→Q12)。 */
.schemata-warning {
  display: block;
  color: #b45309;
  line-height: 1.45;
}
.schemata-fit-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.schemata-fit-actions button {
  flex: 1 1 auto;
  padding: 4px 6px;
  font: 12px/1.3 "PingFang SC", system-ui, sans-serif;
  color: #0e7c72;
  background: #f0fdfa;
  border: 1px solid #0e7c72;
  border-radius: 6px;
  cursor: pointer;
}
.schemata-fit-actions button:hover { background: #ccfbf1; }

/* 换图标排在属性之前:选中节点后第一眼要能看到"换个样子"的入口 ——
   属性面板很长,放在前面会把候选挤到折叠线以下(用户得先滚才知道有它)。 */
.schemata-picker {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid #eef1f6;
}
.schemata-picker-head {
  font: 11.5px/1.4 "PingFang SC", system-ui, sans-serif;
  color: #6b7280;
  padding: 0 2px 2px;
}
/* 候选多了要能滚(素材库有 75 条时,24 个候选一屏放不下) */
.schemata-picker-list {
  display: grid;
  gap: 4px;
  overflow-y: auto;
  min-height: 0;
  max-height: 290px;
}
.schemata-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #f4f6fa;
  cursor: pointer;
  font: 13px/1.4 "PingFang SC", system-ui, sans-serif;
  text-align: left;
  max-width: 240px;
}
.schemata-picker-item:hover { border-color: #0e7c72; color: #0e7c72; }
.schemata-picker-thumb {
  width: 26px; height: 26px; flex: none;
  object-fit: contain;
  background: #ffffff;
  border: 1px solid #e6ebf2;
  border-radius: 6px;
}
.schemata-picker-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── T-37 · 图层面板:排序 / 锁定 / 编组 ─────────────────────────────────
   坞内的一块(与属性面板同一条规矩,见文件头)。 */
.schemata-layers {
  order: 3;
  padding: 8px 0 0;
}
.schemata-layers .schemata-panel-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #5a6577;
}
.schemata-layer-list { display: grid; gap: 2px; }
.schemata-layer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 3px 4px;
  border-radius: 6px;
  cursor: pointer;
}
.schemata-layer-row:hover { background: #f4f6fa; }
.schemata-layer-row.is-selected { background: #eaf5f3; }
.schemata-layer-row.is-locked { color: #8b94a3; cursor: not-allowed; }
.schemata-layer-row.is-locked:hover { background: transparent; }
.schemata-layer-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.schemata-layer-actions { display: flex; gap: 2px; flex: 0 0 auto; }
.schemata-layer-btn {
  min-width: 20px;
  padding: 1px 3px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  font: 12px/1.4 inherit;
  color: inherit;
}
.schemata-layer-btn:hover { border-color: #dde3ec; background: #fff; color: #0e7c72; }
.schemata-layers button[data-action="group"] {
  margin-top: 8px;
  width: 100%;
  padding: 5px 8px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #f4f6fa;
  cursor: pointer;
  font: inherit;
}
.schemata-layers button[data-action="group"]:hover:not(:disabled) { border-color: #0e7c72; color: #0e7c72; }
.schemata-layers button[data-action="group"]:disabled { color: #b6bdc9; cursor: not-allowed; }

.schemata-text-editor {
  position: fixed;
  z-index: 40;
  padding: 4px 6px;
  font: 13px/1.4 "PingFang SC", system-ui, sans-serif;
  border: 1px solid #0e7c72;
  border-radius: 6px;
  background: #ffffff;
  color: #1b1d21;
  /* 编辑器是 textarea(多行往返靠它):不给拉伸把手,高度随行数走 */
  resize: none;
  overflow: hidden;
  display: block;
}

/* 右键上下文菜单:就地出现、用完即走(与坞的分工见 view.ts::openContextMenu)。
   位置由 JS 按光标/视口边缘算,这里只管外观。 */
.schemata-menu {
  position: fixed;
  z-index: 60;
  min-width: 172px;
  padding: 5px;
  border: 1px solid #dde3ec;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.16);
  font: 13px/1.2 "PingFang SC", system-ui, sans-serif;
}
.schemata-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #1b1d21;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.schemata-menu button:hover:not(:disabled) { background: #eef7f6; color: #0e7c72; }
.schemata-menu button:disabled { color: #b6bdc9; cursor: not-allowed; }
.schemata-menu button.danger:hover:not(:disabled) { background: #fdecec; color: #c0392b; }
.schemata-menu kbd {
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #8b94a3;
  background: #f4f6fa;
  border: 1px solid #e3e8f0;
  border-radius: 4px;
  padding: 1px 5px;
}
.schemata-menu .sep { height: 1px; margin: 5px 6px; background: #edf0f5; }