docs(styles): explain toolbar inheritance and workspace layering

src/components/ui/icon-button.module.css

@@ -18,6 +18,7 @@
 /* SVG 同时约束宽高与 flex-basis，防止图标在文字/布局挤压下变形。 */
 .button svg { width: var(--toolbar-icon-size, 20px); height: var(--toolbar-icon-size, 20px); flex: 0 0 var(--toolbar-icon-size, 20px); }
 /* 悬停填底、键盘可见焦点描边、禁用态降低透明度并提示不可操作。 */
+/* hover 未排除 :disabled，禁用按钮仍可能命中悬停底色；真正禁用语义由原生 disabled 属性承担。 */
 .button:hover { background: #e9e7e3; }
 .button:focus-visible { outline: 2px solid #9d7d66; outline-offset: 2px; }
 .button:disabled { opacity: 0.45; cursor: not-allowed; }

src/components/ui/toolbar.module.css

@@ -1,6 +1,7 @@
 /* Toolbar 共享表面：统一控件尺寸变量、排列间距、边框和背景；不负责自身在画布中的定位。 */
 /* 提供后代按钮消费的 CSS 变量；半透明背景与 backdrop blur 处理工具栏背后的内容。 */
 .surface {
+  /* 变量按 DOM 继承：渲染到 body Portal 的浮层不会仅因 React 父子关系继承此处尺寸。 */
   --toolbar-icon-size: 20px;
   --toolbar-control-width: 32px;
   --toolbar-control-height: 32px;

src/components/workspace/editable-title.module.css

@@ -9,6 +9,7 @@
 .title[data-selected="true"] { background: #ede5dc; border-color: #d3c0b2; }
 .title:disabled { cursor: default; }
 /* 编辑态给定目标宽度但受上方 max-width 限制，readonly 时降低透明度。 */
+/* max-width:100% 相对包含块，不是固定视口保证；浮动条宿主还需 min-width:0/宽度预算配合。 */
 .input { width: 220px; border-color: #a47764; background: white; outline: none; }
 .input[readonly] { opacity: 0.65; }
 /* 错误框显示在标题下方，并以视口宽度限制最大宽度；长说明允许换行。 */

src/components/workspace/workspace.module.css

@@ -128,6 +128,7 @@
 .settingsActions button[type="submit"] { background: #37352f; color: white; border-color: #37352f; }
 .settingsActions button:disabled { opacity: 0.5; cursor: not-allowed; }
 /* 固定全视口画布置于底层；点阵背景与加载/错误状态由后续类分别承担。 */
+/* 主画布铺满整个视口，不按侧栏宽度缩窄；侧栏/浮动条通过更高层级叠在画布上方。 */
 .graph { position: fixed; inset: 0; z-index: 0; display: flex; width: 100%; height: 100dvh; background: #fffefb; }
 .graphSurface { width: 100%; height: 100%; background-image: radial-gradient(#b8aea245 1px, transparent 1px); background-size: 22px 22px; }
 .graphStatus { position: absolute; left: 50%; top: 72px; transform: translateX(-50%); max-width: calc(100vw - 48px); padding: 8px 12px; border-radius: 6px; background: #fffefbe6; color: #9a948c; text-align: center; font-size: 13px; }
@@ -173,4 +174,5 @@
 .directoryToggle { display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #87837c; cursor: pointer; }
 .directoryToggle:hover { background: #eae7e2; }
 .directoryToggle:focus-visible { outline: 2px solid #9b877a; outline-offset: -2px; }
+/* 此处旋转过渡没有单独的 reduced-motion 覆盖；上面的媒体查询只关闭指定的菜单/浮动条效果。 */
 .directoryToggle svg { transition: transform 120ms ease; }