yugoo-design 0.2.5 → 0.2.7

package/payload/shared/authoring/studio-creators/source/docs/panel-uiux-standard.md

@@ -18,6 +18,7 @@
 `packages/panel/src/visual-components.css` 这一基础样式维护入口，不各自复制
 样式、追加覆盖文件或重新拼装常见操作。交互行为由组件实现，不能只靠 CSS 或
 文档约定保证一致。主题资源、宿主壳和专业图形资源不构成另一套 Kit 基础样式。
+独立预览入口须带齐组件所需的基础与画布样式，不能依赖宿主先加载；实际检查画布定位和控件图标，不能只核对节点存在。
 
 Bundle 作者决定业务信息的归属、关系、次序和合适的已支持形态，组件自动承担
 共同的视觉与交互默认值。信息组织是否帮助人理解和改写仍须审视，但作者无需
@@ -516,6 +517,8 @@ Studio 统一按用户需要采取的动作选择反馈形态，复用 `packages
 
 通知不遮挡输入框、保存/取消操作或键盘焦点，遵循 Studio 的边界和语义层级。普通状态更新使用非打断的可访问通告，重要失败按需告警；不得让逐条校验输出反复抢读。明暗主题、长错误、窄内容区和展开详情均须实际检查。`role="alert"` 只提供语义，不提供样式或正确的布局；仅添加类名或统一红色不能证明符合本规范。
 
+读取待保存修改失败时，现有保存错误对话框提供“重试读取”，重新准备原样草稿；恢复后仍由用户明确保存。不能要求用户改一个字、丢弃草稿或重开页面才能解除旧网络错误，也不能借重试自动重发写入或对话。已提交但结果未确认的保存仍沿用原有核对流程。
+
 Studio 与 Companion 的宿主会话复用同一消息和工作记录组件。展示实际公开回复、
 工具动作及其结果；工作记录可折叠，用户主动收起后轮询不重新展开。工作中使用
 同一圆形等待指示，停止操作放在输入框的发送按钮位置，不增加估算进度条。

package/payload/shared/web/client.js

@@ -100431,11 +100431,25 @@ function BoardRecordId({ record, binding, manifest, section }) {
 }
 function BoardMap({ groups, binding, onSelect, label, manifest, section }) {
 	const { t } = usePanelI18n();
-	const { nodes, edges } = (0, import_react.useMemo)(() => boardMapProjection(groups, binding, label), [
+	const { nodes: projectedNodes, edges } = (0, import_react.useMemo)(() => boardMapProjection(groups, binding, label), [
 		groups,
 		binding,
 		label
 	]);
+	const [nodes, setNodes] = (0, import_react.useState)(projectedNodes);
+	const nodeSignature = JSON.stringify(projectedNodes);
+	(0, import_react.useEffect)(() => {
+		setNodes((current) => {
+			const previous = new Map(current.map((node) => [node.id, node]));
+			return projectedNodes.map((node) => ({
+				...previous.get(node.id),
+				...node
+			}));
+		});
+	}, [nodeSignature]);
+	const onNodesChange = (0, import_react.useCallback)((changes) => {
+		setNodes((current) => applyNodeChanges(changes, current));
+	}, []);
 	const marker = `board-${(0, import_react.useId)().replaceAll(":", "")}`;
 	const [hovered, setHovered] = (0, import_react.useState)();
 	const [flow, setFlow] = (0, import_react.useState)();
@@ -100485,6 +100499,7 @@ function BoardMap({ groups, binding, onSelect, label, manifest, section }) {
 			})] })
 		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(index$2, {
 			onInit: setFlow,
+			onNodesChange,
 			nodes: nodes.map((node) => ({
 				...node,
 				data: {
@@ -262842,6 +262857,7 @@ function InstanceWorkbench({ client, id, locale, onBack, onChanged, onExport, re
 	const [preparedDraft, setPreparedDraft] = (0, import_react.useState)();
 	const [saveIssuesOpen, setSaveIssuesOpen] = (0, import_react.useState)(false);
 	const [preparingDraft, setPreparingDraft] = (0, import_react.useState)(false), [draftError, setDraftError] = (0, import_react.useState)("");
+	const [prepareRetry, setPrepareRetry] = (0, import_react.useState)(0);
 	const [mountActions, setMountActions] = (0, import_react.useState)();
 	const [loaded, setLoaded] = (0, import_react.useState)(false), [sourceBusy, setBusy] = (0, import_react.useState)(false), [error, setError] = (0, import_react.useState)("");
 	const [opening, setOpening] = (0, import_react.useState)(true);
@@ -262966,7 +262982,8 @@ function InstanceWorkbench({ client, id, locale, onBack, onChanged, onExport, re
 	}, [
 		draftKey,
 		client,
-		draftClient
+		draftClient,
+		prepareRetry
 	]);
 	(0, import_react.useEffect)(() => {
 		if (!candidateKey) {
@@ -263638,11 +263655,15 @@ function InstanceWorkbench({ client, id, locale, onBack, onChanged, onExport, re
 				onClose: () => setSaveIssuesOpen(false),
 				locale,
 				title: saveBlocker || (zh ? "暂不能保存这次修改" : "These changes cannot be saved yet"),
-				message: zh ? "修改和输入已保留。请继续编辑或在原对话中请求修复，然后重新保存。" : "Your changes and input are retained. Continue editing or request a repair in the existing conversation, then save again.",
+				message: draftError ? zh ? "修改和输入已保留。连接恢复后可重试读取，成功后再保存。" : "Your changes and input are retained. Retry reading when the connection recovers, then save." : zh ? "修改和输入已保留。请继续编辑或在原对话中请求修复，然后重新保存。" : "Your changes and input are retained. Continue editing or request a repair in the existing conversation, then save again.",
 				details: saveDetails,
-				actions: [{
-					label: zh ? "继续编辑" : "Continue editing",
+				actions: [...draftError && !sourceLocked ? [{
+					label: zh ? "重试读取" : "Retry reading",
 					primary: true,
+					onClick: () => setPrepareRetry((value) => value + 1)
+				}] : [], {
+					label: zh ? "继续编辑" : "Continue editing",
+					primary: !draftError,
 					onClick: () => {
 						setTab("files");
 						setTimeout(() => sourceEditor.current?.focus(), 0);
@@ -268284,6 +268305,9 @@ function StudioConversationLayout({ rpc, readConversation, checkConnection, pres
 	});
 }
 //#endregion
+//#region \0dsh-design-css:inline:0e9f302d41955acf9e839975ce6240355a382a6ab39f89f7be228eb83ff8e0ee:style.css.mjs
+var _dsh_design_css_inline_0e9f302d41955acf9e839975ce6240355a382a6ab39f89f7be228eb83ff8e0ee_style_css_default = "/* this gets exported as style.css and can be used for the default theming */\n/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */\n.react-flow {\n  direction: ltr;\n\n  --xy-edge-stroke-default: #b1b1b7;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #555;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);\n\n  --xy-minimap-background-color-default: #fff;\n  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #e2e2e2;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: transparent;\n  --xy-background-pattern-dots-color-default: #91919a;\n  --xy-background-pattern-lines-color-default: #eee;\n  --xy-background-pattern-cross-color-default: #e2e2e2;\n  background-color: var(--xy-background-color, var(--xy-background-color-default));\n  --xy-node-color-default: inherit;\n  --xy-node-border-default: 1px solid #1a192b;\n  --xy-node-background-color-default: #fff;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;\n  --xy-node-border-radius-default: 3px;\n\n  --xy-handle-background-color-default: #1a192b;\n  --xy-handle-border-color-default: #fff;\n\n  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #fefefe;\n  --xy-controls-button-background-color-hover-default: #f4f4f4;\n  --xy-controls-button-color-default: inherit;\n  --xy-controls-button-color-hover-default: inherit;\n  --xy-controls-button-border-color-default: #eee;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #ffffff;\n  --xy-edge-label-color-default: inherit;\n  --xy-resize-background-color-default: #3367d9;\n}\n.react-flow.dark {\n  --xy-edge-stroke-default: #3e3e3e;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #727272;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);\n\n  --xy-minimap-background-color-default: #141414;\n  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #2b2b2b;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: #141414;\n  --xy-background-pattern-dots-color-default: #555;\n  --xy-background-pattern-lines-color-default: #333;\n  --xy-background-pattern-cross-color-default: #333;\n  --xy-node-color-default: #f8f8f8;\n  --xy-node-border-default: 1px solid #3c3c3c;\n  --xy-node-background-color-default: #1e1e1e;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;\n\n  --xy-handle-background-color-default: #bebebe;\n  --xy-handle-border-color-default: #1e1e1e;\n\n  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #2b2b2b;\n  --xy-controls-button-background-color-hover-default: #3e3e3e;\n  --xy-controls-button-color-default: #f8f8f8;\n  --xy-controls-button-color-hover-default: #fff;\n  --xy-controls-button-border-color-default: #5b5b5b;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #141414;\n  --xy-edge-label-color-default: #f8f8f8;\n}\n.react-flow__background {\n  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));\n  pointer-events: none;\n  z-index: -1;\n}\n.react-flow__container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.react-flow__pane {\n  z-index: 1;\n  touch-action: none;\n}\n.react-flow__pane.draggable {\n    cursor: grab;\n  }\n.react-flow__pane.dragging {\n    cursor: grabbing;\n  }\n.react-flow__pane.selection {\n    cursor: pointer;\n  }\n.react-flow__viewport {\n  transform-origin: 0 0;\n  z-index: 2;\n  pointer-events: none;\n}\n.react-flow__renderer {\n  z-index: 4;\n}\n.react-flow__selection {\n  z-index: 6;\n}\n.react-flow__nodesselection-rect:focus,\n.react-flow__nodesselection-rect:focus-visible {\n  outline: none;\n}\n.react-flow__edge-path {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));\n  fill: none;\n}\n.react-flow__connection-path {\n  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));\n  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));\n  fill: none;\n}\n.react-flow .react-flow__edges {\n  position: absolute;\n}\n.react-flow .react-flow__edges svg {\n    overflow: visible;\n    position: absolute;\n    pointer-events: none;\n  }\n.react-flow__edge {\n  pointer-events: visibleStroke;\n}\n.react-flow__edge.selectable {\n    cursor: pointer;\n  }\n.react-flow__edge.animated path {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n.react-flow__edge.animated path.react-flow__edge-interaction {\n    stroke-dasharray: none;\n    animation: none;\n  }\n.react-flow__edge.inactive {\n    pointer-events: none;\n  }\n.react-flow__edge.selected,\n  .react-flow__edge:focus,\n  .react-flow__edge:focus-visible {\n    outline: none;\n  }\n.react-flow__edge.selected .react-flow__edge-path,\n  .react-flow__edge.selectable:focus .react-flow__edge-path,\n  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {\n    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));\n  }\n.react-flow__edge-textwrapper {\n    pointer-events: all;\n  }\n.react-flow__edge .react-flow__edge-text {\n    pointer-events: none;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n/* Arrowhead marker styles - use CSS custom properties as default */\n.react-flow__arrowhead polyline {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n}\n.react-flow__arrowhead polyline.arrowclosed {\n  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n}\n.react-flow__connection {\n  pointer-events: none;\n}\n.react-flow__connection .animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\nsvg.react-flow__connectionline {\n  z-index: 1001;\n  overflow: visible;\n  position: absolute;\n}\n.react-flow__nodes {\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n.react-flow__node {\n  position: absolute;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n  box-sizing: border-box;\n  cursor: default;\n}\n.react-flow__node.selectable {\n    cursor: pointer;\n  }\n.react-flow__node.draggable {\n    cursor: grab;\n    pointer-events: all;\n  }\n.react-flow__node.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__nodesselection {\n  z-index: 3;\n  transform-origin: left top;\n  pointer-events: none;\n}\n.react-flow__nodesselection-rect {\n    position: absolute;\n    pointer-events: all;\n    cursor: grab;\n  }\n.react-flow__handle {\n  position: absolute;\n  pointer-events: none;\n  min-width: 5px;\n  min-height: 5px;\n  width: 6px;\n  height: 6px;\n  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));\n  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));\n  border-radius: 100%;\n}\n.react-flow__handle.connectingfrom {\n    pointer-events: all;\n  }\n.react-flow__handle.connectionindicator {\n    pointer-events: all;\n    cursor: crosshair;\n  }\n.react-flow__handle-bottom {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n.react-flow__handle-top {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-left {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-right {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n.react-flow__edgeupdater {\n  cursor: move;\n  pointer-events: all;\n}\n.react-flow__pane.selection .react-flow__panel {\n  pointer-events: none;\n}\n.react-flow__panel {\n  position: absolute;\n  z-index: 5;\n  margin: 15px;\n}\n.react-flow__panel.top {\n    top: 0;\n  }\n.react-flow__panel.bottom {\n    bottom: 0;\n  }\n.react-flow__panel.top.center, .react-flow__panel.bottom.center {\n      left: 50%;\n      transform: translateX(-15px) translateX(-50%);\n    }\n.react-flow__panel.left {\n    left: 0;\n  }\n.react-flow__panel.right {\n    right: 0;\n  }\n.react-flow__panel.left.center, .react-flow__panel.right.center {\n      top: 50%;\n      transform: translateY(-15px) translateY(-50%);\n    }\n.react-flow__attribution {\n  font-size: 10px;\n  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));\n  padding: 2px 3px;\n  margin: 0;\n}\n.react-flow__attribution a {\n    text-decoration: none;\n    color: #999;\n  }\n@keyframes dashdraw {\n  from {\n    stroke-dashoffset: 10;\n  }\n}\n.react-flow__edgelabel-renderer {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  left: 0;\n  top: 0;\n}\n.react-flow__viewport-portal {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.react-flow__minimap {\n  background: var(\n    --xy-minimap-background-color-props,\n    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))\n  );\n}\n.react-flow__minimap-svg {\n    display: block;\n  }\n.react-flow__minimap-mask {\n    fill: var(\n      --xy-minimap-mask-background-color-props,\n      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-mask-stroke-color-props,\n      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-mask-stroke-width-props,\n      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))\n    );\n  }\n.react-flow__minimap-node {\n    fill: var(\n      --xy-minimap-node-background-color-props,\n      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-node-stroke-color-props,\n      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-node-stroke-width-props,\n      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))\n    );\n  }\n.react-flow__background-pattern.dots {\n    fill: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))\n    );\n  }\n.react-flow__background-pattern.lines {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))\n    );\n  }\n.react-flow__background-pattern.cross {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))\n    );\n  }\n.react-flow__controls {\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));\n}\n.react-flow__controls.horizontal {\n    flex-direction: row;\n  }\n.react-flow__controls-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 26px;\n    width: 26px;\n    padding: 4px;\n    border: none;\n    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));\n    border-bottom: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n    color: var(\n      --xy-controls-button-color-props,\n      var(--xy-controls-button-color, var(--xy-controls-button-color-default))\n    );\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__controls-button svg {\n      width: 100%;\n      max-width: 12px;\n      max-height: 12px;\n      fill: currentColor;\n    }\n.react-flow__edge.updating .react-flow__edge-path {\n      stroke: #777;\n    }\n.react-flow__edge-text {\n    font-size: 10px;\n  }\n.react-flow__node.selectable:focus,\n  .react-flow__node.selectable:focus-visible {\n    outline: none;\n  }\n.react-flow__node-input,\n.react-flow__node-default,\n.react-flow__node-output,\n.react-flow__node-group {\n  padding: 10px;\n  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));\n  width: 150px;\n  font-size: 12px;\n  color: var(--xy-node-color, var(--xy-node-color-default));\n  text-align: center;\n  border: var(--xy-node-border, var(--xy-node-border-default));\n  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));\n}\n.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {\n      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));\n    }\n.react-flow__node-input.selectable.selected,\n    .react-flow__node-input.selectable:focus,\n    .react-flow__node-input.selectable:focus-visible,\n    .react-flow__node-default.selectable.selected,\n    .react-flow__node-default.selectable:focus,\n    .react-flow__node-default.selectable:focus-visible,\n    .react-flow__node-output.selectable.selected,\n    .react-flow__node-output.selectable:focus,\n    .react-flow__node-output.selectable:focus-visible,\n    .react-flow__node-group.selectable.selected,\n    .react-flow__node-group.selectable:focus,\n    .react-flow__node-group.selectable:focus-visible {\n      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));\n    }\n.react-flow__node-group {\n  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));\n}\n.react-flow__nodesselection-rect,\n.react-flow__selection {\n  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));\n  border: var(--xy-selection-border, var(--xy-selection-border-default));\n}\n.react-flow__nodesselection-rect:focus,\n  .react-flow__nodesselection-rect:focus-visible,\n  .react-flow__selection:focus,\n  .react-flow__selection:focus-visible {\n    outline: none;\n  }\n.react-flow__controls-button:hover {\n      background: var(\n        --xy-controls-button-background-color-hover-props,\n        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))\n      );\n      color: var(\n        --xy-controls-button-color-hover-props,\n        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))\n      );\n    }\n.react-flow__controls-button:disabled {\n      pointer-events: none;\n    }\n.react-flow__controls-button:disabled svg {\n        fill-opacity: 0.4;\n      }\n.react-flow__controls-button:last-child {\n    border-bottom: none;\n  }\n.react-flow__controls.horizontal .react-flow__controls-button {\n    border-bottom: none;\n    border-right: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n  }\n.react-flow__controls.horizontal .react-flow__controls-button:last-child {\n    border-right: none;\n  }\n.react-flow__resize-control {\n  position: absolute;\n}\n.react-flow__resize-control.left,\n.react-flow__resize-control.right {\n  cursor: ew-resize;\n}\n.react-flow__resize-control.top,\n.react-flow__resize-control.bottom {\n  cursor: ns-resize;\n}\n.react-flow__resize-control.top.left,\n.react-flow__resize-control.bottom.right {\n  cursor: nwse-resize;\n}\n.react-flow__resize-control.bottom.left,\n.react-flow__resize-control.top.right {\n  cursor: nesw-resize;\n}\n/* handle styles */\n.react-flow__resize-control.handle {\n  width: 5px;\n  height: 5px;\n  border: 1px solid #fff;\n  border-radius: 1px;\n  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  translate: -50% -50%;\n}\n.react-flow__resize-control.handle.left {\n  left: 0;\n  top: 50%;\n}\n.react-flow__resize-control.handle.right {\n  left: 100%;\n  top: 50%;\n}\n.react-flow__resize-control.handle.top {\n  left: 50%;\n  top: 0;\n}\n.react-flow__resize-control.handle.bottom {\n  left: 50%;\n  top: 100%;\n}\n.react-flow__resize-control.handle.top.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.bottom.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.top.right {\n  left: 100%;\n}\n.react-flow__resize-control.handle.bottom.right {\n  left: 100%;\n}\n/* line styles */\n.react-flow__resize-control.line {\n  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  border-width: 0;\n  border-style: solid;\n}\n.react-flow__resize-control.line.left,\n.react-flow__resize-control.line.right {\n  width: 1px;\n  transform: translate(-50%, 0);\n  top: 0;\n  height: 100%;\n}\n.react-flow__resize-control.line.left {\n  left: 0;\n  border-left-width: 1px;\n}\n.react-flow__resize-control.line.right {\n  left: 100%;\n  border-right-width: 1px;\n}\n.react-flow__resize-control.line.top,\n.react-flow__resize-control.line.bottom {\n  height: 1px;\n  transform: translate(0, -50%);\n  left: 0;\n  width: 100%;\n}\n.react-flow__resize-control.line.top {\n  top: 0;\n  border-top-width: 1px;\n}\n.react-flow__resize-control.line.bottom {\n  border-bottom-width: 1px;\n  top: 100%;\n}\n.react-flow__edge-textbg {\n  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));\n}\n.react-flow__edge-text {\n  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));\n}\n";
+//#endregion
 //#region \0dsh-design-css:inline:5183fe2efe63e8c164d0a3c73458cdc0bb3f362547cd2bdcb09eeb8b40fecedd:visual-components.css.mjs
 var _dsh_design_css_inline_5183fe2efe63e8c164d0a3c73458cdc0bb3f362547cd2bdcb09eeb8b40fecedd_visual_components_css_default = ".dsh-design-panel { container-type: inline-size; container-name: ygd-panel; min-width: 0; font: var(--ygd-panel-text-size, 14px)/1.6 var(--font-main, var(--ds-font-main, system-ui, sans-serif)); color: var(--ds-text-primary, #272727); --ygd-panel-detail-section-gap: 16px; --ygd-panel-detail-control-gap: 8px; --ygd-panel-heading-weight: 600; --ygd-panel-control-focus: var(--ds-brand-bg-default, #7c5af6); }\n.dsh-design-dock-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--ds-space-3,12px) var(--ds-space-4,16px); }\n.dsh-design-dock-panel-body.dsh-design-dock-panel-workspace { height: 100%; overflow: hidden; padding: 0; }\n.dsh-design-panel[data-layout=workspace], .dsh-design-panel:has(> .dsh-panel-guided-content) { height: 100%; min-height: 0; }\n.dsh-design-dock-panel-body:has(> .dsh-design-panel > .dsh-panel-guided-content) { overflow: hidden; }\n/* One geometry boundary for catalog-owned workspaces and transparent view switches.\n   Components keep their own navigation/content scrolling; the boundary adds no inset. */\n.dsh-design-workspace-surface { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); flex: 1; width: 100%; height: 100%; min-width: 0; min-height: 0; }\n.dsh-design-workspace-surface > * { min-width: 0; min-height: 0; }\n.dsh-design-dock-empty { padding: var(--ds-space-5,20px); color: var(--ds-text-tertiary,#6d6d6d); font-size: var(--ds-font-body-lv2,14px); }\n.dsh-panel-sample-preview { display: flex; flex: 1; height: 100%; min-width: 0; min-height: 0; }\n.dsh-design-auto-surface { display: contents; }\n.ygd-reference-hub { display: flex; flex: 1; width: 100%; flex-direction: column; height: 100%; min-height: 400px; min-width: 0; }\n.ygd-reference-hub-body { display: grid; grid-template-columns: minmax(0,1fr) 248px; flex: 1; min-height: 320px; overflow: hidden; }\n.ygd-reference-hub-canvas { min-width: 0; min-height: 320px; background: var(--ds-fill-2,#fafafa); }\n.ygd-reference-hub-card { display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--ds-line-2,#ddd); border-radius: 12px; background: var(--ds-bg-white,#fff); color: var(--ds-text-primary,#272727); box-shadow: 0 2px 6px #00000006; }\n.ygd-reference-hub-card.is-center { border-color: var(--ds-brand-3,#ded4fb); }\n.ygd-reference-hub-card.is-active { border-color: var(--ds-brand-6,#7c5af6); box-shadow: 0 0 0 2px var(--ds-brand-2,#eee9fb); }\n.ygd-reference-hub-card.is-muted { opacity: .45; }\n.ygd-reference-hub-card-title { display: flex; flex-shrink: 0; align-items: center; gap: 12px; }\n.ygd-reference-hub-card-title > div { min-width: 0; }\n.ygd-reference-hub-card-title small { display: block; font-size: 11px; line-height: 18px; font-weight: 400; color: var(--ds-text-secondary,#666); margin-bottom: 2px; }\n.ygd-reference-hub-card-title svg { flex: none; margin-top: 2px; color: var(--ds-brand-6,#7c5af6); }\n.ygd-reference-hub-card-title strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }\n.ygd-reference-hub-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 8px 0 0; font-size: 13px; line-height: 20px; color: var(--ds-text-secondary,#666); overflow-wrap: anywhere; }\n.ygd-reference-hub-card-foot { display: grid; gap: 10px; margin-top: auto; padding-top: 12px; font-size: 12px; line-height: 18px; color: var(--ds-text-secondary,#666); }\n.ygd-reference-hub-card-foot span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n.ygd-reference-hub-card-entry { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 18px; color: var(--ds-text-secondary,#666); min-width: 0; }\n.ygd-reference-hub-card-entry > svg { flex: none; }\n.ygd-reference-hub-card-entry > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n.ygd-reference-hub-card-entry small { flex: none; padding: 0 4px; border-radius: 4px; background: var(--ds-brand-1,#f3effc); color: var(--ds-brand-6,#7c5af6); }\n.ygd-record-portrait { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 16px; background: var(--ds-brand-1,#eeecfa); }\n.ygd-record-portrait.is-variant-1 { background: var(--ds-success-1,#e6f2ed); }\n.ygd-record-portrait.is-variant-2 { background: var(--ds-warning-1,#fbefdf); }\n.ygd-record-portrait > svg { display: block; width: 44px; height: 44px; margin: 0; }\n.ygd-reference-hub-symbol { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--ds-brand-1,#eeecfa); color: var(--ds-brand-6,#7c5af6); }\n.ygd-reference-hub-symbol > svg { width: 20px; height: 20px; margin: 0; color: inherit; }\n.ygd-reference-hub-card:is(.is-left,.is-right) .ygd-reference-hub-symbol { background: var(--ds-success-1,#e6f2ed); color: var(--ds-success-6,#407b6c); }\n.ygd-reference-hub-card.is-bottom .ygd-reference-hub-symbol { background: var(--ds-info-1,#e8f0fa); color: var(--ds-info-6,#486f97); }\n.ygd-reference-hub-card.is-bottom.is-kind-alternate .ygd-reference-hub-symbol { background: var(--ds-warning-1,#faf0e3); color: var(--ds-warning-6,#8b6433); }\n.ygd-reference-hub-model { display: flex; align-items: center; gap: 8px; color: var(--ds-text-secondary,#666); }\n.ygd-reference-hub-model > svg { flex: none; }\n.ygd-reference-hub-model > span { min-width: 0; }\n.ygd-reference-hub-capabilities { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--ds-line-1,#e8e8e8); font-size: 11px; }\n.ygd-reference-hub-capabilities > span { display: flex; gap: 4px; align-items: center; }\n.ygd-reference-hub-capabilities small { color: var(--ds-text-tertiary,#777); }\n.ygd-reference-hub-consumers { display: block; margin-top: auto; padding-top: 12px; font-size: 11px; line-height: 18px; color: var(--ds-text-secondary,#666); }\n.ygd-reference-hub-core { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }\n.ygd-reference-hub-core small { font-size: 11px; line-height: 18px; color: var(--ds-text-secondary,#666); }\n.ygd-reference-hub-core strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-size: 14px; line-height: 20px; font-weight: 500; overflow-wrap: anywhere; }\n.ygd-reference-hub .react-flow__node-hubGroup { border: 1px dashed var(--ds-brand-3,#e2dced); border-radius: 16px; background: var(--ds-brand-1,#faf8ff); pointer-events: none; }\n.ygd-reference-hub .react-flow__node-hubGroup.is-role-frame { border-style: solid; border-radius: 28px; }\n.ygd-reference-hub-group-label { padding: 8px 16px; font-size: 12px; line-height: 18px; color: var(--ds-text-secondary,#777); }\n.ygd-reference-hub-role-heading { display: flex; align-items: center; gap: 12px; padding: 20px 24px; max-width: 640px; }\n.ygd-reference-hub-role-heading > div { min-width: 0; }\n.ygd-reference-hub-role-heading strong { font-size: 16px; line-height: 24px; font-weight: 500; }\n.ygd-reference-hub-role-heading p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 4px 0; font-size: 12px; line-height: 18px; color: var(--ds-text-secondary,#666); }\n.ygd-reference-hub .react-flow__node-hubColumnLabel { text-align: center; pointer-events: none; }\n.ygd-reference-hub.is-focus-portrait .dsh-canvas-node-handle { opacity: 0; pointer-events: none; }\n.ygd-reference-hub-resource-heading { display: flex; align-items: center; gap: 8px; min-height: 32px; flex: none; }\n.ygd-reference-hub-resource-heading .ygd-reference-hub-symbol { width: 28px; height: 28px; border-radius: 8px; }\n.ygd-reference-hub-resource-heading .ygd-reference-hub-symbol > svg { width: 16px; height: 16px; }\n.ygd-reference-hub-resource-heading strong { font-size: 14px; line-height: 20px; font-weight: 500; }\n.ygd-reference-hub-resource-heading small { margin-left: auto; font-size: 12px; color: var(--ds-text-secondary,#666); }\n.ygd-reference-hub-resource-list { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: auto; overscroll-behavior: contain; margin-top: 8px; }\n.ygd-reference-hub-resource-list > button { display: block; width: 100%; min-height: 36px; flex: none; padding: 8px; border: 1px solid var(--ds-line-1,#e8e8e8); border-radius: 8px; background: var(--ds-fill-1,#fafafa); color: var(--ds-text-primary,#272727); font: 12px/20px var(--font-main,system-ui,sans-serif); text-align: start; cursor: pointer; }\n.ygd-reference-hub-resource-list > button > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }\n.ygd-reference-hub-resource-list > button > small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; margin-top: 4px; font-size: 11px; line-height: 18px; color: var(--ds-text-secondary,#666); overflow-wrap: anywhere; }\n.ygd-reference-hub-resource-list > button:is(:hover,[aria-pressed=true]) { background: var(--ds-brand-1,#f3effc); color: var(--ds-brand-6,#7c5af6); }\n.ygd-reference-hub-resource-list > button:focus-visible { outline: 2px solid var(--ds-brand-6,#7c5af6); outline-offset: -2px; }\n.ygd-reference-hub-column-label { display: inline-block; padding: 0 6px; font-size: 11px; line-height: 18px; white-space: nowrap; color: var(--ds-text-secondary,#666); background: var(--ds-brand-1,#faf8ff); }\n.ygd-reference-hub-edge-label { position: absolute; padding: 1px 6px; border-radius: 4px; background: var(--ds-bg-white,#fff); font-size: 11px; line-height: 18px; color: var(--ds-text-secondary,#666); pointer-events: none; }\n.ygd-reference-hub-detail { min-width: 0; overflow: auto; padding: 16px; border-left: 1px solid var(--ds-line-1,#e8e8e8); background: var(--ds-bg-white,#fff); font-size: 13px; line-height: 1.6; }\n.ygd-reference-hub-detail h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }\n.ygd-reference-hub-detail h3 svg { flex: none; }\n.ygd-reference-hub-profile-heading > small { display: block; font-size: 11px; color: var(--ds-text-secondary,#666); margin-bottom: 16px; }\n.ygd-reference-hub-profile-heading .ygd-record-portrait { width: 66px; height: 66px; border-radius: 20px; margin-bottom: 16px; }\n.ygd-reference-hub-profile-heading .ygd-record-portrait > svg { width: 56px; height: 56px; }\n.ygd-reference-hub-profile-heading h3 { font-size: 18px; line-height: 26px; font-weight: 500; }\n.ygd-reference-hub-detail p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }\n.ygd-reference-hub-detail-section { margin-top: var(--ygd-panel-detail-section-gap,16px); }\n.ygd-reference-hub-detail-section h4 { margin: 0 0 8px; font-size: 12px; line-height: 20px; font-weight: 500; color: var(--ds-text-secondary,#666); }\n.ygd-reference-hub-entry { margin-top: 12px; padding-left: 10px; border-left: 2px solid var(--ds-brand-2,#e6ddfa); }\n.ygd-reference-hub-entry strong { display: block; font-size: 13px; line-height: 20px; font-weight: 500; }\n.ygd-reference-hub-entry-position { display: block; margin-top: 4px; font-size: 12px; line-height: 18px; color: var(--ds-text-secondary,#666); white-space: pre-wrap; overflow-wrap: anywhere; }\n.ygd-reference-hub-entry > summary { align-items: flex-start; }\n.ygd-reference-hub-entry > summary > .dsh-panel-disclosure-icon { margin-top: 2px; }\n.ygd-reference-hub-entry > summary:hover strong { color: var(--ds-brand-6,#7c5af6); }\n.ygd-reference-hub-entry > summary:focus-visible { outline: 2px solid var(--ds-brand-6,#7c5af6); outline-offset: 4px; border-radius: 2px; }\n.ygd-reference-hub-detail-model { display: flex; align-items: flex-start; gap: 8px; }\n.ygd-reference-hub-detail-model > svg { margin-top: 3px; flex: none; color: var(--ds-brand-6,#7c5af6); }\n.ygd-reference-hub-detail-model small { font-size: 11px; color: var(--ds-text-secondary,#666); }\n.ygd-reference-hub-detail-model p { margin-top: 2px; }\n.ygd-reference-hub-detail-model + .ygd-reference-hub-neighbors { margin-top: 8px; }\n.ygd-reference-hub-facts { display: grid; gap: 8px; margin: 8px 0 0; }\n.ygd-reference-hub-facts dt { font-size: 11px; line-height: 18px; color: var(--ds-text-secondary,#666); }\n.ygd-reference-hub-facts dd { margin: 2px 0 0; font-size: 12px; line-height: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }\n.ygd-reference-hub-handoff + .ygd-reference-hub-handoff { margin-top: 8px; }\n.ygd-reference-hub-handoff summary { cursor: pointer; font-size: 12px; line-height: 20px; overflow-wrap: anywhere; }\n.ygd-reference-hub-neighbors { display: grid; gap: 8px; }\n.ygd-reference-hub-neighbors button { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--ds-line-1,#e8e8e8); border-radius: 8px; background: var(--ds-bg-white,#fff); text-align: start; font: inherit; color: inherit; overflow-wrap: anywhere; cursor: pointer; }\n.ygd-reference-hub-neighbors svg { flex: none; }\n.ygd-reference-hub-consumer-model { display: block; font-size: 11px; line-height: 18px; color: var(--ds-text-secondary,#666); }\n.ygd-reference-hub-detail-action { margin-top: 16px; }\n.ygd-reference-hub-profile-action { display: block; width: 100%; min-height: 36px; margin-top: 16px; padding: 8px 12px; border: 0; border-radius: 8px; background: var(--ds-brand-6,#7c5af6); color: var(--ds-bg-white,#fff); font: inherit; cursor: pointer; }\n.ygd-reference-hub-profile-action:hover { background: var(--ds-brand-7,#6849d8); }\n.ygd-reference-hub-profile-action:focus-visible { outline: 2px solid var(--ds-brand-6,#7c5af6); outline-offset: 2px; }\n.ygd-reference-hub-compact-heading { display: flex; align-items: center; gap: 12px; }\n.ygd-reference-hub-compact-heading > div { min-width: 0; }\n.ygd-reference-hub-compact-heading > svg { flex: none; width: 24px; height: 24px; color: var(--ds-text-secondary,#666); }\n.ygd-reference-hub-compact-heading small { display: block; font-size: 11px; line-height: 18px; color: var(--ds-text-secondary,#666); }\n.ygd-reference-hub-detail.is-compact h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 500; }\n.ygd-reference-hub-compact-actions { display: grid; gap: 8px; margin: 16px 0; }\n.ygd-reference-hub-compact-actions > button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 36px; margin: 0; padding: 8px 12px; border-radius: 8px; font: 13px/20px var(--font-main,system-ui,sans-serif); cursor: pointer; }\n.ygd-reference-hub-compact-actions > .ygd-reference-hub-detail-action { border: 1px solid var(--ds-line-2,#ddd); background: transparent; color: var(--ds-text-primary,#272727); }\n.ygd-reference-hub-compact-actions > .ygd-reference-hub-detail-action:is(:hover,:focus-visible) { border-color: var(--ds-brand-6,#7c5af6); color: var(--ds-brand-6,#7c5af6); }\n.ygd-reference-hub-detail.is-compact .ygd-reference-hub-brief { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; font-size: 12px; line-height: 20px; }\n.ygd-reference-hub-detail.is-compact .ygd-reference-hub-entry { margin-top: 8px; }\n.ygd-reference-hub-detail.is-compact .ygd-reference-hub-entry strong,\n.ygd-reference-hub-detail.is-compact .ygd-reference-hub-entry-position { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }\n.ygd-reference-hub-resource-counts { display: flex; gap: 12px; flex-wrap: wrap; }\n.ygd-reference-hub-resource-counts > span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 20px; }\n.ygd-reference-hub-resource-counts svg { flex: none; color: var(--ds-text-secondary,#666); }\n.ygd-reference-hub-resource-counts small { color: var(--ds-text-secondary,#666); }\n.ygd-reference-hub-overflow-count { display: block; margin-top: 8px; font-size: 12px; color: var(--ds-text-secondary,#666); }\n@container (max-width: 760px) { .ygd-reference-hub-body { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(320px,1fr) auto; overflow: auto; } .ygd-reference-hub-detail { max-height: 220px; border-left: 0; border-top: 1px solid var(--ds-line-1,#e8e8e8); } }\n.dsh-design-auto-surface .dsh-design-panel .dsh-design-record { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }\n.dsh-design-auto-surface .dsh-design-panel .dsh-design-record-title:not(.dsh-design-record-header) { grid-column: 1 / -1; padding-bottom: 12px; border-bottom: 1px solid var(--ds-line-1, #e8e8e8); }\n.dsh-design-auto-surface .dsh-design-panel .dsh-design-record [data-field$='description'],\n.dsh-design-auto-surface .dsh-design-panel .dsh-design-record [data-field$='summary'],\n.dsh-design-auto-surface .dsh-design-panel .dsh-design-record [data-field$='detail'] { grid-column: 1 / -1; }\n.dsh-design-auto-surface .dsh-design-panel .dsh-design-schema-field { display: block; max-width: 900px; padding: 0 18px; }\n.dsh-design-auto-surface .dsh-design-panel .dsh-design-schema-field :is(input, textarea, select) { display: block; width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--ds-line-2, #dfdfdf); border-radius: 7px; background: #fff; color: inherit; font: inherit; }\n.dsh-design-auto-surface .dsh-design-panel .dsh-design-schema-field textarea { min-height: 92px; resize: vertical; }\n.dsh-design-auto-surface .dsh-design-panel .dsh-design-structured-data,\n.dsh-design-auto-surface .dsh-design-panel .dsh-design-artifact-section { max-width: 900px; margin: 10px 18px 18px; padding: 16px 18px; border: 1px solid var(--ds-line-1, #e8e8e8); border-radius: 10px; background: var(--ds-fill-1, #fff); }\n.dsh-design-auto-surface .dsh-design-panel .dsh-design-structured-list { display: grid; gap: 10px; min-width: 0; }\n.dsh-design-auto-surface .dsh-design-panel .dsh-design-structured-row { display: grid; grid-template-columns: minmax(100px, 28%) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ds-line-1, #e8e8e8); }\n.dsh-design-auto-surface .dsh-design-panel .dsh-design-structured-row:last-child { border-bottom: 0; }\n.dsh-design-auto-surface .dsh-design-panel .dsh-design-structured-branch summary { cursor: pointer; color: var(--ds-brand-7, #6745e4); }\n.dsh-design-root .dsh-design-auto-wait { max-width: 900px; margin: 24px auto; padding: 28px; border: 1px solid var(--ds-line-1, #e8e8e8); border-radius: 16px; background: linear-gradient(145deg, #fff, var(--ds-brand-1, #f7f4fe)); box-shadow: 0 10px 32px rgb(30 20 65 / 6%); color: var(--ds-text-primary, #272727); }\n.dsh-design-root .dsh-design-auto-wait-heading { display: flex; align-items: center; gap: 18px; }\n.dsh-design-root .dsh-design-auto-wait-heading h2 { margin: 0; font-size: 18px; font-weight: 650; }\n.dsh-design-root .dsh-design-auto-wait-heading p { margin: 4px 0 0; color: var(--ds-text-secondary, #4c4c4c); font-size: 13px; }\n.dsh-design-root .dsh-design-auto-wait-orb { flex: none; width: 46px; height: 46px; border-radius: 15px; background: radial-gradient(circle at 35% 30%, #fff 0, #dfd2ff 35%, #7c5af6 100%); box-shadow: 0 0 0 5px rgb(124 90 246 / 10%); animation: dsh-design-auto-breathe 2.2s ease-in-out infinite; }\n.dsh-design-root .dsh-design-auto-wait-preview { display: grid; gap: 12px; margin-top: 28px; padding: 22px; border: 1px solid var(--ds-line-1, #e8e8e8); border-radius: 12px; background: #fff; }\n.dsh-design-root .dsh-design-auto-wait-line,\n.dsh-design-root .dsh-design-auto-wait-card span { display: block; height: 12px; border-radius: 999px; background: linear-gradient(90deg, #efebf8 25%, #faf8ff 50%, #efebf8 75%); background-size: 200% 100%; animation: dsh-design-auto-shimmer 1.8s linear infinite; }\n.dsh-design-root .dsh-design-auto-wait-line.is-title { width: 42%; height: 18px; }\n.dsh-design-root .dsh-design-auto-wait-line.is-short { width: 63%; }\n.dsh-design-root .dsh-design-auto-wait-card { display: grid; gap: 12px; margin-top: 8px; padding: 20px; border: 1px solid var(--ds-line-1, #e8e8e8); border-radius: 10px; }\n.dsh-design-root .dsh-design-auto-wait-card span:nth-child(2) { width: 75%; }\n.dsh-design-root .dsh-design-auto-wait-card span:nth-child(3) { width: 52%; }\n.dsh-design-root .dsh-design-auto-wait-error { margin: 18px 0 0; color: var(--ds-error-text-primary, #b42318); font-size: 12px; overflow-wrap: anywhere; }\n.dsh-design-root .dsh-design-auto-wait-source { margin-top: 22px; color: var(--ds-text-secondary, #4c4c4c); font-size: 12px; }\n.dsh-design-root .dsh-design-auto-wait-source summary { width: fit-content; cursor: pointer; }\n.dsh-design-root .dsh-design-auto-wait-source pre { max-height: 50vh; margin: 10px 0 0; overflow: auto; padding: 14px; border: 1px solid var(--ds-line-1, #e8e8e8); border-radius: 8px; background: #fff; white-space: pre-wrap; overflow-wrap: anywhere; }\n@keyframes dsh-design-auto-breathe { 50% { transform: scale(1.07); box-shadow: 0 0 0 9px rgb(124 90 246 / 7%); } }\n@keyframes dsh-design-auto-shimmer { to { background-position: -200% 0; } }\n@media (prefers-reduced-motion: reduce) { .dsh-design-root .dsh-design-auto-wait-orb, .dsh-design-root .dsh-design-auto-wait-line, .dsh-design-root .dsh-design-auto-wait-card span { animation: none; } }\n@container (max-width: 620px) { .dsh-design-auto-surface .dsh-design-panel .dsh-design-record { grid-template-columns: minmax(0, 1fr); } }\n.dsh-design-panel *, .dsh-design-panel *::before, .dsh-design-panel *::after { box-sizing: border-box; }\n.dsh-design-panel .dsh-design-field { margin: 0 0 16px; min-width: 0; }\n.dsh-design-panel .dsh-design-field-label { display: block; font-size: var(--ygd-panel-text-size, 14px); line-height: 20px; font-weight: var(--ygd-panel-heading-weight, 600); margin-bottom: 8px; color: var(--ds-text-primary, #272727); }\n.dsh-design-panel .dsh-design-field-input,\n.dsh-design-panel .dsh-design-source-add { display: block; width: 100%; min-width: 0; max-width: 100%; font: inherit; line-height: 1.5; padding: 8px 12px; border: 1px solid var(--ds-fill-5, #dfdfdf); border-radius: 8px; background: var(--ds-bg-white, #fff); color: inherit; }\n.dsh-design-panel textarea.dsh-design-field-input { min-height: 88px; resize: vertical; }\n.dsh-design-panel .dsh-design-field-value { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }\n.dsh-design-panel .dsh-design-record { padding: 18px; margin-bottom: 16px; border: 1px solid var(--ds-line-1, #e8e8e8); border-radius: 8px; background: #fff; min-width: 0; }\n.dsh-design-panel .dsh-design-record-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: var(--ygd-panel-heading-weight, 600); margin-bottom: 16px; overflow-wrap: anywhere; }\n.dsh-design-panel :is(.dsh-design-grouped-records, .dsh-design-nested-collection, .dsh-design-related-artifacts) { display: grid; gap: 12px; min-width: 0; }\n.dsh-design-panel :is(.dsh-design-grouped-records-group, .dsh-design-nested-parent, .dsh-design-nested-child) { min-width: 0; border: 1px solid var(--ds-line-1, #e8e8e8); border-radius: 8px; background: var(--ds-fill-1, #fff); }\n.dsh-design-panel :is(.dsh-design-grouped-records-group, .dsh-design-nested-parent, .dsh-design-nested-child) > summary { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; cursor: pointer; font-weight: var(--ygd-panel-heading-weight, 600); overflow-wrap: anywhere; }\n.dsh-design-panel :is(.dsh-design-grouped-records-group, .dsh-design-nested-parent) > summary span { color: var(--ds-text-tertiary, #6d6d6d); font-size: 12px; font-weight: 400; white-space: nowrap; }\n.dsh-design-panel :is(.dsh-design-grouped-records-items, .dsh-design-nested-children) { display: grid; gap: 8px; padding: 0 12px 12px; min-width: 0; }\n.dsh-design-panel .dsh-design-grouped-record { min-width: 0; border: 1px solid var(--ds-line-1, #e8e8e8); border-radius: 8px; background: var(--ds-fill-1, #fff); }\n.dsh-design-panel .dsh-design-grouped-record > summary { padding: 9px 12px; cursor: pointer; font-weight: 550; overflow-wrap: anywhere; }\n.dsh-design-panel .dsh-design-grouped-record > .dsh-design-record-form { padding: 0 12px 12px; }\n.dsh-design-panel .dsh-design-grouped-record .dsh-design-record { margin: 0; padding: 12px; }\n.dsh-design-panel .dsh-design-nested-child > .dsh-design-structured-list { padding: 0 12px 12px; }\n.dsh-design-panel .dsh-design-related-artifact-group { min-width: 0; padding: 12px; border: 1px solid var(--ds-line-1, #e8e8e8); border-radius: 8px; background: var(--ds-fill-1, #fff); }\n.dsh-design-panel .dsh-design-related-artifact-group h4 { margin: 0 0 8px; font-size: 13px; overflow-wrap: anywhere; }\n:where(.dsh-design-panel :is(.dsh-design-record, .dsh-design-record-form, .dsh-design-source-list)) button,\n.dsh-design-panel .dsh-design-record-add { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; cursor: pointer; color: var(--ds-text-secondary, #4c4c4c); border: 1px solid var(--ds-fill-5, #dfdfdf); border-radius: 8px; background: var(--ds-bg-white, #fff); padding: 5px 10px; }\n.dsh-design-panel :is(input, textarea, select, button, summary):focus-visible { outline: 2px solid var(--ygd-panel-control-focus, var(--ds-brand-bg-default, #7c5af6)); outline-offset: 2px; }\n.dsh-design-panel button.dsh-panel-select-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; height: 36px; padding: 4px 12px; border: 1px solid var(--ds-fill-5, #dfdfdf); border-radius: 8px; background: var(--ds-bg-white, #fff); color: inherit; font: inherit; font-size: var(--ygd-panel-text-size, 14px); line-height: 20px; text-align: start; cursor: pointer; }\n.dsh-panel-select-trigger > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.dsh-panel-select-icon { display: flex; flex: none; align-items: center; color: var(--ds-icon-outline-default, #6d6d6d); }\n.dsh-panel-select-trigger:disabled { cursor: not-allowed; opacity: .6; }\n.dsh-design-panel .dsh-design-rows { max-width: 100%; overflow-x: auto; }\n.dsh-design-panel .dsh-design-rows-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }\n.dsh-design-panel .dsh-design-rows-table :is(th, td) { text-align: left; padding: 8px; border: 1px solid var(--ds-line-1, #e8e8e8); vertical-align: top; }\n.dsh-design-panel .dsh-design-rows-table th { font-weight: 500; background: var(--ds-fill-2, #f7f7f7); white-space: nowrap; }\n.dsh-design-panel .dsh-design-rows-table .dsh-design-field-input { min-width: 100px; }\n.dsh-design-panel :is(.dsh-design-field-choices) { display: grid; gap: 8px; }\n.dsh-design-panel :is(.dsh-design-field-choice) { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 24px; }\n.dsh-panel-disclosure-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ds-text-tertiary, #777); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }\n.dsh-panel-disclosure { display: flex; align-items: center; gap: 8px; cursor: pointer; }\n.dsh-panel-disclosure-label { min-width: 0; overflow-wrap: anywhere; text-align: start; }\n/* Inline headings align with their body; tree chevrons keep their own layout. */\n.dsh-design-panel button.dsh-panel-disclosure { padding: 4px 0; min-height: 28px; justify-content: flex-start; border: 0; border-radius: 0; background: transparent; }\nsummary.dsh-panel-disclosure { list-style: none; }\nsummary.dsh-panel-disclosure::-webkit-details-marker { display: none; }\ndetails[open] > summary.dsh-panel-disclosure > .dsh-panel-disclosure-icon { transform: rotate(90deg); }\n.dsh-design-panel .dsh-design-question-list { max-width: 900px; margin-inline: auto; padding: 18px; }\n.dsh-design-panel .dsh-design-node-description { color: var(--ds-text-tertiary, #6d6d6d); margin: 0 0 18px; }\n/* Bound the desktop row even when the sidebar allows its canvas-edge entry to overflow. */\n.dsh-panel-workspace { position: relative; display: grid; grid-template-columns: var(--dsh-panel-sidebar-width, 220px) 1px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); width: 100%; height: 100%; min-height: 0; background: var(--ds-fill-1, #fff); }\n.dsh-panel-workspace-sidebar { min-width: 0; min-height: 0; overflow: auto; background: var(--ds-fill-1, #fff); }\n.dsh-panel-workspace-resize-handle { position: relative; z-index: 5; width: 1px; min-height: 0; background: var(--ds-divider-default, var(--ds-line-1, #e8e8e8)); cursor: col-resize; touch-action: none; }\n.dsh-panel-workspace-resize-handle::after { content: ''; position: absolute; inset: 0 -7px; }\n.dsh-panel-workspace-resize-handle:hover,\n.dsh-panel-workspace-resize-handle:focus-visible,\n.dsh-panel-workspace.is-resizing .dsh-panel-workspace-resize-handle { background: var(--ds-brand-6, #7c5af6); outline: 0; }\nhtml[data-dsh-panel-resizing=true], html[data-dsh-panel-resizing=true] * { cursor: col-resize !important; user-select: none !important; }\n.dsh-panel-workspace-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0; overflow: hidden; background: var(--ds-fill-1, #fff); }\n.dsh-panel-workspace-content { flex: 1; min-width: 0; min-height: 0; overflow: auto; padding: var(--ygd-panel-content-gutter, 16px); }\n/* One content gutter. Workspace and transparent composition containers never\n   add a second inset; the guidance and the visible content surface own it. */\n.dsh-panel-workspace, .dsh-panel-guided-content { --ygd-panel-content-gutter: 16px; --ygd-panel-tabs-gutter: 16px; }\n/* Optional action guidance belongs to the Panel, not its navigation or toolbar. */\n.dsh-panel-workspace-guidance { position: absolute; left: 8px; bottom: 8px; z-index: 6; display: inline-flex; padding: 0; }\n.dsh-panel-workspace.has-guidance > .dsh-panel-workspace-sidebar { padding-bottom: 40px; box-sizing: border-box; }\n.dsh-design-panel button.dsh-panel-guidance-trigger { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--ds-fill-1, #fff); color: var(--ds-text-tertiary, #6d6d6d); font: inherit; font-size: 12px; cursor: pointer; }\n.dsh-design-panel button.dsh-panel-guidance-trigger:hover { color: var(--ds-text-primary, #272727); background: var(--ds-fill-3, #f0f0f3); }\n.dsh-design-panel button.dsh-panel-guidance-trigger:focus-visible { outline: 2px solid var(--ds-brand-6, #7c5af6); outline-offset: 2px; }\n.dsh-panel-guidance-popup { position: fixed; z-index: 100; box-sizing: border-box; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto; padding: 12px 16px; border: 1px solid var(--ds-divider-default, var(--ds-line-1, #e8e8e8)); border-radius: 8px; background: var(--ds-fill-1, #fff); color: var(--ds-text-secondary, #4c4c4c); font-size: 13px; font-weight: 400; line-height: 1.65; white-space: normal; overflow-wrap: anywhere; box-shadow: 0 4px 16px #0002; }\n.dsh-panel-guided-content { position: relative; display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; }\n.dsh-panel-guided-body { flex: 1; min-height: 0; overflow: auto; padding-bottom: 40px; }\n.dsh-panel-guided-content[data-layout=workspace] > .dsh-panel-guided-body { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }\n.dsh-panel-workspace-navigation > header { padding: 12px 16px; }\n.dsh-panel-workspace-navigation h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 400; line-height: 20px; }\n.dsh-panel-workspace-nav-icon { display: inline-flex; width: 16px; height: 16px; flex: none; }\n.dsh-panel-workspace-nav-icon svg { width: 16px; height: 16px; }\n.dsh-panel-workspace-navigation header p { margin: 5px 0 0; color: var(--ds-text-tertiary, #6d6d6d); font-size: 12px; line-height: 1.55; }\n.dsh-panel-workspace-nav-items { display: grid; gap: 4px; padding: 0 20px 16px 16px; }\n.dsh-panel-workspace-nav-items button { display: block; width: 100%; min-height: 36px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ds-text-primary, #272727); text-align: left; font: inherit; font-size: 14px; font-weight: 500; line-height: 20px; cursor: pointer; }\n.dsh-panel-workspace-nav-items button:hover { background: var(--ds-bg-gary-hover, #f0f0f3); }\n.dsh-panel-workspace-nav-items button[aria-current=page] { background: #f3f0ff; color: #10082b; }\n.dsh-panel-workspace-nav-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }\n.dsh-panel-workspace-nav-eyebrow { display: block; margin-bottom: 4px; color: var(--ds-text-tertiary, #777); font-size: 12px; font-weight: 400; line-height: 16px; }\n.dsh-panel-workspace-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }\n.dsh-panel-workspace-current { flex: none; color: var(--ds-brand-8, #5335b7); font-size: 11px; font-weight: 400; }\n.dsh-panel-workspace-nav-description { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-text-tertiary, #777); font-size: 12px; font-weight: 400; line-height: 16px; }\n.dsh-question-workspace .dsh-panel-workspace-nav-label { white-space: normal; overflow-wrap: anywhere; }\n.dsh-question-workspace .dsh-panel-workspace-nav-items { grid-template-columns: minmax(0, 1fr); }\n.dsh-question-workspace .dsh-panel-workspace-nav-items button { min-width: 0; }\n.dsh-question-workspace .dsh-panel-workspace-navigation > header { overflow-wrap: anywhere; }\n.dsh-question-workspace .dsh-panel-workspace-nav-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }\n.dsh-panel-workspace-nav-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; color: var(--ds-text-secondary, #4c4c4c); font-size: 11px; font-weight: 400; line-height: 16px; }\n.dsh-panel-workspace-nav-meta { margin-left: auto; }\n.dsh-panel-workspace-nav-status { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-line-3, #bbb); }\n.dsh-panel-workspace-nav-items button[data-status=complete] .dsh-panel-workspace-nav-status { background: var(--ds-success-6, #22a06b); }\n.dsh-panel-workspace-nav-items button[data-status=partial] .dsh-panel-workspace-nav-status { background: var(--ds-warning-6, #d98b00); }\n.dsh-panel-workspace-tree { min-width: 0; padding: 14px 8px 18px; }\n.dsh-panel-workspace-tree > header { display: flex; align-items: center; gap: 8px; padding: 0 8px 10px; }\n.dsh-panel-workspace-tree > header > svg { flex: none; width: 16px; height: 16px; color: var(--ds-text-tertiary, #777); }\n.dsh-panel-workspace-tree > header h2 { margin: 0; min-width: 0; color: var(--ds-text-primary, #272727); font-size: 14px; font-weight: 400; line-height: 20px; overflow-wrap: anywhere; }\n.dsh-panel-workspace-tree-body { display: grid; gap: 4px; }\n.dsh-panel-workspace-tree-group { min-width: 0; }\n.dsh-panel-workspace-tree-group-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 8px; overflow: hidden; border: 0; border-radius: 8px; background: transparent; color: var(--ds-text-primary, #272727); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }\n.dsh-panel-workspace-tree-group-toggle:hover { background: var(--ds-fill-3, #f0f0f3); }\n.dsh-panel-workspace-tree-group-toggle svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ds-text-tertiary, #777); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }\n.dsh-panel-workspace-tree-group-toggle span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }\n.dsh-panel-workspace-tree-children { min-width: 0; margin-left: 16px; padding-left: 16px; }\n.dsh-panel-workspace-tree-branch { position: relative; min-width: 0; }\n/* Only children of an expanded collection have incoming branches. */\n:is(.dsh-panel-workspace-tree-children, .dsh-panel-workspace-tree-subgroup-children) > .dsh-panel-workspace-tree-branch,\n.dsh-panel-workspace-tree-record-children > .dsh-panel-workspace-tree-branch,\n.dsh-panel-workspace-tree-record-children > .dsh-panel-workspace-tree-subgroup { position: relative; --dsh-tree-row-height: 36px; }\n:is(.dsh-panel-workspace-tree-children, .dsh-panel-workspace-tree-subgroup-children) > .dsh-panel-workspace-tree-branch::before,\n.dsh-panel-workspace-tree-record-children > .dsh-panel-workspace-tree-branch::before,\n.dsh-panel-workspace-tree-record-children > .dsh-panel-workspace-tree-subgroup::before { content: ''; position: absolute; top: -10px; height: 100%; left: -16px; width: 1px; background: var(--ds-border-default, #dfdfdf); pointer-events: none; }\n:is(.dsh-panel-workspace-tree-children, .dsh-panel-workspace-tree-subgroup-children) > .dsh-panel-workspace-tree-branch:last-child::before,\n.dsh-panel-workspace-tree-record-children > .dsh-panel-workspace-tree-branch:last-child::before,\n.dsh-panel-workspace-tree-record-children > .dsh-panel-workspace-tree-subgroup:last-child::before { height: 18px; }\n:is(.dsh-panel-workspace-tree-children, .dsh-panel-workspace-tree-subgroup-children) > .dsh-panel-workspace-tree-branch::after,\n.dsh-panel-workspace-tree-record-children > .dsh-panel-workspace-tree-branch::after,\n.dsh-panel-workspace-tree-record-children > .dsh-panel-workspace-tree-subgroup::after { content: ''; position: absolute; top: calc(var(--dsh-tree-row-height) * .35 - 6px); left: -16px; width: 16px; height: 12px; border-bottom: 1px solid var(--ds-border-default, #dfdfdf); border-left: 1px solid var(--ds-border-default, #dfdfdf); border-radius: 0 0 0 12px; pointer-events: none; }\n.dsh-panel-workspace-tree-item,\n.dsh-panel-workspace-choice,\n.dsh-panel-workspace-tree-add { display: flex; align-items: flex-start; gap: 8px; width: 100%; min-height: 36px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ds-text-secondary, #4c4c4c); font: inherit; font-size: 14px; line-height: 20px; text-align: left; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }\n.dsh-panel-workspace-tree-label { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }\n.dsh-panel-workspace-tree-trailing { display: inline-flex; align-items: center; flex: none; gap: 8px; min-height: 20px; }\n.dsh-panel-workspace-tree-item:hover,\n.dsh-panel-workspace-choice:hover:not(:disabled),\n.dsh-panel-workspace-tree-add:hover:not(:disabled) { background: var(--ds-fill-3, #f0f0f3); }\n.dsh-panel-workspace-choice[aria-pressed=true],\n.dsh-panel-workspace-tree-item[aria-current=page] { background: var(--ds-brand-1, #f3f0ff); color: var(--ds-text-primary, #272727); font-weight: 500; }\n.dsh-panel-workspace-tree-add { color: var(--ds-text-tertiary, #6d6d6d); }\n.dsh-panel-workspace-tree-add:hover { color: var(--ds-brand-8, #5032bc); }\n.dsh-panel-workspace-tree-add > span { flex: none; font-size: 15px; line-height: 20px; }\n.dsh-panel-workspace-choice:disabled,\n.dsh-panel-workspace-tree-add:disabled { opacity: .45; cursor: not-allowed; }\n.dsh-panel-workspace-choice { flex-direction: column; gap: 6px; }\n.dsh-panel-workspace-choice + .dsh-panel-workspace-choice { margin-top: 4px; }\n.dsh-panel-workspace-choice strong { font: inherit; font-weight: 500; }\n.dsh-panel-workspace-choice small { font-size: 12px; line-height: 18px; color: var(--ds-text-secondary, #666); }\n.dsh-panel-workspace-tree-record-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; min-width: 0; }\n.dsh-panel-workspace-tree-record-row > .dsh-panel-workspace-tree-item { min-width: 0; }\n.dsh-panel-workspace-tree-record-toggle { display: grid; place-items: center; width: 32px; height: 36px; padding: 0 !important; border: 0; border-radius: 6px; background: transparent; color: var(--ds-text-tertiary, #777); cursor: pointer; }\n.dsh-panel-workspace-tree-record-toggle:hover { background: var(--ds-fill-3, #f0f0f3); }\n.dsh-panel-workspace-tree-record-toggle svg,\n.dsh-panel-workspace-tree-subgroup-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }\n.dsh-panel-workspace-tree-record-children { margin-left: 16px; padding-left: 16px; }\n.dsh-panel-workspace-tree-subgroup { min-width: 0; }\n.dsh-panel-workspace-tree-subgroup-toggle:hover { background: var(--ds-fill-3, #f0f0f3); }\n.dsh-panel-workspace-tree-subgroup-toggle span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }\n.dsh-panel-workspace-tree-subgroup-toggle small { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--ds-fill-3, #f0f0f3); color: var(--ds-text-tertiary, #777); font-size: 10px; line-height: 18px; text-align: center; }\n.dsh-panel-workspace-tree-subgroup-children { margin-left: 16px; padding-left: 16px; }\n.dsh-panel-workspace-tip { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 4px; padding: 9px 11px; border: 1px solid var(--ds-notice-3, #d2e4ff); border-radius: 8px; background: var(--ds-notice-1, #f8f9ff); color: var(--ds-text-secondary, #4c4c4c); font-size: 12px; line-height: 1.55; }\n.dsh-panel-workspace-tip-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--ds-notice-7, #2365a7); }\n.dsh-panel-workspace-tip-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }\n.dsh-panel-workspace-tip > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }\n.dsh-design-panel button.dsh-panel-guidance-dismiss { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; min-width: 24px; height: 24px; min-height: 24px; margin: -3px -3px -3px 0; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ds-text-secondary, #6d6d6d); cursor: pointer; }\n.dsh-design-panel button.dsh-panel-guidance-dismiss:hover { background: var(--ds-bg-gary-hover, #f0f0f3); }\n.dsh-design-panel button.dsh-panel-guidance-dismiss:focus-visible { outline: 2px solid var(--ds-brand-6, #7c5af6); outline-offset: 2px; }\n.dsh-question-workspace-content { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--ygd-panel-content-gutter, 16px) 16px; }\n.dsh-question-workspace-sticky { position: sticky; top: 0; z-index: 2; padding-top: 1px; background: var(--ds-fill-1, #fff); }\n.dsh-question-workspace-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 11px 0 10px; margin-bottom: 2px; border-bottom: 1px solid var(--ds-divider-default, var(--ds-line-1, #e8e8e8)); background: var(--ds-fill-1, #fff); }\n.dsh-question-workspace-header h2 { margin: 0; font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }\n.dsh-question-workspace-header > div { min-width: 0; }\n.dsh-question-workspace-header p { margin: 3px 0 0; color: var(--ds-text-tertiary, #6d6d6d); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }\n.dsh-question-workspace-header > span { flex: none; color: var(--ds-text-tertiary, #6d6d6d); font-size: 12px; }\n.dsh-standard-question-list { display: grid; gap: 12px; padding-top: 12px; }\n.dsh-question-workspace .dsh-standard-question-list { padding: 12px 16px 16px; }\n.dsh-question-workspace .dsh-panel-workspace-main > p[role=alert] { margin: 12px 16px 0; }\n.dsh-standard-question-empty { margin: 0; padding: 28px 16px; color: var(--ds-text-tertiary, #6d6d6d); text-align: center; }\n.dsh-standard-question-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 12px 16px; border: 1px solid var(--ds-fill-6, #e8e8e8); border-radius: 12px; background: var(--ds-fill-1, #fff); }\n.dsh-standard-question-card-group { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 12px 16px; border: 1px solid var(--ds-fill-6, #e8e8e8); border-radius: 12px; background: var(--ds-fill-1, #fff); }\n.dsh-standard-question-card-group-title { margin: 0; font-size: 14px; font-weight: 500; line-height: 26px; }\n.dsh-standard-question-card.is-embedded { padding: 0; border: 0; border-radius: 0; background: transparent; }\n.dsh-standard-question-card.is-embedded .dsh-standard-question-heading h3 { position: relative; padding-left: 20px; }\n.dsh-standard-question-card.is-embedded .dsh-standard-question-heading h3::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #10082b; }\n.dsh-standard-question-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }\n.dsh-standard-question-heading { min-width: 0; }\n.dsh-standard-question-heading h3 { margin: 0; font-size: 14px; font-weight: 500; line-height: 26px; overflow-wrap: anywhere; }\n.dsh-standard-question-heading p { margin: 2px 0 0; color: var(--ds-text-7, #6d6d6d); font-size: 14px; line-height: 22px; }\n.dsh-standard-question-actions { display: flex; flex: none; align-items: center; gap: 8px; transition: opacity .2s; }\n.dsh-standard-question-actions button { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0; border: 0; background: transparent; color: var(--ds-text-9, #4c4c4c); font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }\n.dsh-standard-question-actions button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }\n.dsh-standard-question-actions button:hover { color: var(--ds-brand-text-primary, #6745e4); }\n.dsh-standard-question-actions button:disabled { color: var(--ds-text-4, #aaa); cursor: not-allowed; }\n@media (min-width: 768px) {\n  .dsh-standard-question-actions button { opacity: 0; pointer-events: none; }\n  .dsh-standard-question-card:hover .dsh-standard-question-actions button,\n  .dsh-standard-question-card:focus-within .dsh-standard-question-actions button { opacity: 1; pointer-events: auto; }\n}\n.dsh-standard-question-rejected { padding: 2px 7px; border-radius: 999px; background: var(--ds-error-light-bg-default, #fff0f0); color: var(--ds-error-text-primary, #b42318); font-size: 11px; }\n.dsh-standard-question-editor, .dsh-standard-question-result { min-width: 0; background: transparent; }\n.dsh-standard-question-answer-shell, .dsh-design-panel .dsh-panel-prose-editor { padding: 12px; border: 1px solid var(--ds-fill-5, #dfdfdf); border-radius: 8px; background: var(--ds-bg-white, #fff); }\n.dsh-standard-question-answer-shell:focus-within, .dsh-design-panel .dsh-panel-prose-editor:focus-within { outline: 2px solid var(--ygd-panel-control-focus, var(--ds-brand-bg-default, #7c5af6)); outline-offset: 2px; }\n.dsh-standard-question-text { display: block; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; height: 96px; min-height: 96px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ds-text-primary, #272727); font: inherit; font-size: 14px; line-height: 20px; resize: none; }\n/* The shell is the focus indicator; avoid a second inner outline from the panel reset. */\n.dsh-design-panel .dsh-standard-question-answer-shell .dsh-standard-question-text:focus-visible { outline: 0; box-shadow: none; }\n.dsh-standard-question-text::placeholder { color: var(--ds-text-placeholder, #999); opacity: 1; }\n.dsh-standard-question-detail { display: block; box-sizing: border-box; width: 100%; min-width: 0; height: 36px; min-height: 36px; padding: 4px 12px; border: 1px solid var(--ds-fill-5, #e3e3e8); border-radius: 8px; background: #fff; color: inherit; font: inherit; font-size: 14px; }\n.dsh-standard-question-detail-label { display: block; margin-top: 12px; }\n.dsh-question-attachment-controls .dsh-standard-question-detail-label { margin-top: 0; }\n.dsh-question-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }\n.dsh-standard-question-context { margin: 8px 0 0; min-width: 0; }\n.dsh-standard-question-context > span { color: var(--ds-text-secondary, #4c4c4c); font-size: 12px; line-height: 1.5; }\n.dsh-standard-question-answer-info { min-height: 32px; padding: 7px 10px; border: 1px solid var(--ds-line-1, #e3e3e8); border-radius: 8px; background: #fff; color: var(--ds-text-primary, #272727); font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }\n.dsh-standard-question-options { display: grid; gap: 12px; }\n.dsh-standard-question-option { position: relative; display: flex; box-sizing: border-box; align-items: center; gap: 8px; min-height: 38px; padding: 7px 10px; border: 1px solid var(--ds-line-3, #dfdfdf); border-radius: 8px; background: #fff; font-size: 14px; line-height: 22px; cursor: pointer; transition: border-color .15s, background-color .15s; }\n.dsh-standard-question-option:hover { border-color: var(--ds-line-4, #c5c5c5); background: var(--ds-bg-white-hover, #f7f7f7); }\n.dsh-standard-question-option.is-selected { border-color: var(--ds-brand-bg-default, #7c5af6); background: var(--ds-brand-light-bg-default, #f5f1ff); }\n.dsh-standard-question-option.is-disabled { border-color: var(--ds-line-2, #dfdfdf); background: var(--ds-fill-2, #f7f7f7); color: var(--ds-text-disabled, #aaa); cursor: not-allowed; }\n.dsh-standard-question-option input { appearance: none; box-sizing: border-box; flex: 0 0 16px; width: 16px; height: 16px; margin: 0; border: 2px solid var(--ds-line-4, #c5c5c5); border-radius: 4px; background: #fff; cursor: inherit; }\n.dsh-standard-question-option input[type='radio'] { border-radius: 50%; }\n.dsh-standard-question-option input:checked { border-color: var(--ds-brand-bg-default, #7c5af6); background-color: var(--ds-brand-bg-default, #7c5af6); }\n.dsh-standard-question-option input[type='radio']:checked { background-image: radial-gradient(circle, #fff 0 3px, transparent 3.5px); }\n.dsh-standard-question-option input[type='checkbox']:checked { background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\"); }\n.dsh-standard-question-option input:focus-visible { outline: 2px solid var(--ds-brand-bg-default, #7c5af6); outline-offset: 2px; }\n.dsh-standard-question-option input:disabled { border-color: var(--ds-line-2, #dfdfdf); background-color: var(--ds-fill-2, #f7f7f7); }\n.dsh-standard-question-option input:disabled:checked { border-color: var(--ds-brand-bg-disabled, #c6b5f7); background-color: var(--ds-brand-bg-disabled, #c6b5f7); }\n.dsh-standard-question-option > span:not(.dsh-standard-question-recommended) { min-width: 0; overflow-wrap: anywhere; }\n.dsh-standard-question-recommended { flex: none; padding: 3px 6px; border-radius: 2px; background: linear-gradient(90deg, #865ff1 0%, #8a97ea 100%); color: #fff; font-size: 11px; font-weight: 500; line-height: 1; }\n.dsh-standard-question-recommended.is-fixed { position: absolute; right: -8px; top: -6px; font-size: 10px; transform: scale(.85); transform-origin: top right; }\n.dsh-standard-question-result > div:not(.dsh-question-attachments):not(.dsh-standard-question-context), .dsh-design-panel .dsh-panel-prose-reading { padding: 9px 12px; border-radius: 8px; background: var(--ds-fill-2, #f7f7f7); color: var(--ds-text-primary, #272727); white-space: pre-wrap; overflow-wrap: anywhere; }\n.dsh-standard-question-result > div.is-empty { color: var(--ds-text-tertiary, #6d6d6d); }\n.dsh-standard-question-result p { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px; margin: 8px 0 0; color: var(--ds-text-secondary, #4c4c4c); white-space: pre-wrap; overflow-wrap: anywhere; }\n.dsh-standard-question-result p span { color: var(--ds-text-tertiary, #6d6d6d); font-size: 12px; }\n.dsh-question-attachments { display: grid; gap: 8px; margin-top: 12px; }\n.dsh-standard-question-answer-shell .dsh-question-attachments, .dsh-standard-question-result .dsh-question-attachments { margin-top: 0; }\n.dsh-question-attachment-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }\n.dsh-question-attachment { position: relative; box-sizing: border-box; overflow: hidden; border: 1px solid var(--ds-line-1, #e3e3e8); border-radius: 8px; background: var(--ds-fill-2, #f7f7f7); }\n.dsh-question-attachment.is-image { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 64px; height: 64px; padding: 4px; }\n.dsh-question-attachment.is-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }\n.dsh-question-attachment.is-file { display: flex; align-items: center; gap: 8px; max-width: 100%; height: 40px; padding: 0 32px 0 8px; }\n.dsh-question-attachment-icon { flex: none; color: var(--ds-text-tertiary, #777); font-size: 16px; }\n.dsh-question-attachment-name { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }\n.dsh-question-attachment.is-image .dsh-question-attachment-name { font-size: 10px; }\n.dsh-question-attachment-size { flex: none; color: var(--ds-text-tertiary, #777); font-size: 10px; white-space: nowrap; }\n.dsh-question-attachment button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; padding: 4px; border: 0; border-radius: 4px; background: transparent; color: var(--ds-text-tertiary, #777); cursor: pointer; }\n.dsh-question-attachment button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }\n.dsh-question-attachment button:hover { background: var(--ds-fill-4, #e8e8e8); color: var(--ds-text-primary, #272727); }\n.dsh-question-attachment.is-image button { right: 0; top: 0; transform: none; border-radius: 0 0 0 6px; background: rgb(0 0 0 / 65%); color: #fff; }\n@media (min-width: 768px) {\n  .dsh-question-attachment.is-image button { opacity: 0; }\n  .dsh-question-attachment.is-image:hover button,\n  .dsh-question-attachment.is-image:focus-within button { opacity: 1; }\n}\n.dsh-question-attachment-controls { display: flex; gap: 4px; justify-content: flex-end; align-items: flex-end; min-height: 32px; }\n.dsh-question-attachment-answer { flex: 1; min-width: 0; }\n.dsh-question-attachment-add { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ds-text-secondary, #555); font: inherit; cursor: pointer; }\n.dsh-question-attachment-add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }\n.dsh-question-attachment-add:hover { background: var(--ds-fill-3, #f0f0f3); color: var(--ds-brand-8, #5335b7); }\n.dsh-question-attachment-add:disabled { opacity: .5; cursor: not-allowed; }\n.dsh-question-attachment-error { margin: 0; color: var(--ds-error-text-primary, #b42318); font-size: 12px; }\n.dsh-artifact-workspace { display:flex; flex-direction:column; height:100%; min-height:0; }\n.dsh-artifact-workspace .dsh-panel-workspace-tree-item small { display:block; color:var(--ds-text-secondary,#76727f); font-size:11px; }\n.dsh-artifact-content { container: ygd-reading / inline-size; flex:1; min-height:0; min-width:0; overflow:auto; display:flex; flex-direction:column; padding:12px var(--ygd-panel-content-gutter,16px); gap:8px; }\n.dsh-artifact-content > ul { flex:none; margin:0; padding-left:24px; }\n.dsh-artifact-content > section { flex:none; }\n.dsh-artifact-content > section a { display:block; overflow-wrap:anywhere; }\n.dsh-artifact-card { flex:none; border:1px solid var(--ds-line-1,#e4e1e9); border-radius:8px; padding:16px; background:var(--ds-bg-white,#fff); }\n.dsh-artifact-card > button { display:flex; align-items:center; gap:16px; width:100%; text-align:left; background:none; border:0; cursor:pointer; }\n.dsh-artifact-card > button strong { flex:1; }\n.dsh-artifact-card li,.dsh-artifact-content > ul li { line-height:1.7; }\n.dsh-artifact-preview { flex:none; min-height:180px; }\n.dsh-artifact-preview.is-document { flex:1; display:flex; flex-direction:column; min-height:400px; }\n.dsh-artifact-preview iframe { flex:1; width:100%; min-height:360px; border:0; background:#fff; }\n.dsh-artifact-toolbar-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-inline-start:auto; }\n.dsh-artifact-toolbar-actions > [role=status] { color:var(--ds-text-secondary,#666); font-size:12px; }\n.dsh-artifact-markdown { padding:16px; background:var(--ds-bg-white,#fff); border:1px solid var(--ds-line-1,#e4e1e9); border-radius:8px; font-size:var(--ygd-panel-text-size,14px); overflow-wrap:anywhere; line-height:1.65; }\n.dsh-artifact-markdown :is(h1,h2,h3,h4,h5,h6) { margin:1em 0 .5em; line-height:1.4; font-weight:600; color:var(--ds-text-primary,#272727); }\n.dsh-artifact-markdown h1 { font-size:1.43em; }\n.dsh-artifact-markdown h2 { font-size:1.29em; }\n.dsh-artifact-markdown h3 { font-size:1.14em; }\n.dsh-artifact-markdown :is(h4,h5,h6) { font-size:1em; }\n.dsh-artifact-markdown :is(p,ul,ol,pre,blockquote,.dsh-artifact-markdown-table) { margin:.6em 0; }\n.dsh-artifact-markdown li + li { margin-top:.25em; }\n.dsh-artifact-markdown :is(ul,ol) { padding-inline-start:1.5em; }\n.dsh-artifact-markdown > :first-child { margin-top:0; }\n.dsh-artifact-markdown > :last-child { margin-bottom:0; }\n.dsh-artifact-markdown blockquote { padding-inline-start:12px; border-inline-start:3px solid var(--ds-line-2,#ccc); color:var(--ds-text-secondary,#666); }\n.dsh-artifact-markdown a { color:var(--ds-brand-7,#6745e4); text-underline-offset:2px; }\n.dsh-artifact-markdown-table { max-width:100%; overflow-x:auto; }\n.dsh-artifact-markdown img { max-width:100%; } .dsh-artifact-markdown pre { overflow:auto; }\n.dsh-artifact-markdown table { border-collapse:collapse; width:max-content; min-width:100%; } .dsh-artifact-markdown th,.dsh-artifact-markdown td { border:1px solid var(--ds-line-1,#e4e1e9); padding:8px; max-width:28em; }\n.dsh-artifact-warning { flex:none; margin:8px 16px 0; padding:8px 12px; border-left:3px solid #ba8510; }\n.dsh-record-workspace { position: relative; container-type: inline-size; height: 100%; min-width: 0; min-height: 0; color: var(--ds-text-primary, #272727); }\n.dsh-board-detail-workspace .dsh-record-workspace-frame { height: auto; }\n.dsh-board-detail-workspace .dsh-panel-workspace-main { overflow: visible; }\n.dsh-board-detail-workspace .dsh-relation-graph { min-height: 420px; }\n.dsh-record-workspace-frame { height: 100%; min-height: 0; }\n/* Workspace fallbacks must never override a shared component's own contract. */\n:where(.dsh-record-workspace) button, :where(.dsh-record-workspace) input { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }\n:where(.dsh-record-workspace) button { cursor: pointer; border: 1px solid var(--ds-fill-5, #dfdfdf); border-radius: 8px; background: var(--ds-bg-white, #fff); padding: 5px 9px; color: inherit; }\n:where(.dsh-record-workspace) button:hover { background: var(--ds-other-overlay-1, #f0f0f3); }\n.dsh-record-workspace button:focus-visible, .dsh-record-workspace input:focus-visible { outline: 2px solid var(--ygd-panel-control-focus, var(--ds-brand-bg-default, #7c5af6)); outline-offset: 2px; }\n.dsh-design-panel .dsh-design-record-actions { display: inline-flex; align-items: center; flex-shrink: 0; gap: 2px; }\n.dsh-design-panel .dsh-design-record-actions > button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--ds-radius-4, 4px); background: transparent; color: var(--ds-icon-outline-default, var(--ds-text-primary, #272727)); }\n.dsh-design-panel .dsh-design-record-actions > button > svg { flex-shrink: 0; width: 16px; height: 16px; pointer-events: none; }\n.dsh-design-panel .dsh-design-record-actions > button:hover:not(:disabled) { background: var(--ds-bg-gary-hover, var(--ds-other-overlay-1, #f0f0f3)); }\n.dsh-design-panel .dsh-design-record-actions > button:active:not(:disabled) { background: var(--ds-bg-gary-active, var(--ds-other-overlay-2, #e8e8e8)); }\n.dsh-design-panel .dsh-design-record-actions > button:disabled { color: var(--ds-text-disabled, #a3a3a3); cursor: not-allowed; background: transparent; }\n.dsh-design-panel .dsh-design-record-actions > button.dsh-panel-disclosure { width: auto; padding: 0 6px; gap: 4px; white-space: nowrap; }\n/* Anchor branches to the first 36px row, not the height of expanded descendants.\n * Long labels grow the row instead of clipping or overlapping the next row. */\n.dsh-panel-workspace-tree button:is(.dsh-panel-workspace-tree-group-toggle, .dsh-panel-workspace-tree-item, .dsh-panel-workspace-tree-add, .dsh-panel-workspace-tree-subgroup-toggle) { box-sizing: border-box; height: auto; min-height: 36px; padding: 8px; border: 0; font-size: 14px; line-height: 20px; gap: 8px; border-radius: 8px; }\n.dsh-panel-workspace-tree-subgroup-toggle { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 5px; width: 100%; min-height: 30px; padding: 4px 6px; overflow: hidden; border: 0; border-radius: 7px; background: transparent; color: var(--ds-text-secondary, #4c4c4c); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }\n.dsh-panel-workspace-tree-record-row > button.dsh-panel-workspace-tree-item { padding-left: 0; }\n.dsh-panel-workspace-tree-record-row:has(> .dsh-panel-workspace-tree-record-spacer) { grid-template-columns: minmax(0, 1fr); }\n.dsh-panel-workspace-tree-record-spacer { width: 22px; display: none; }\n.dsh-panel-workspace-tree-record-row:has(> .dsh-panel-workspace-tree-record-spacer) > button.dsh-panel-workspace-tree-item { padding-left: 8px; }\n.dsh-panel-workspace-tree-record-row.has-toggle-column { grid-template-columns: 32px minmax(0, 1fr); }\n.dsh-panel-workspace-tree-record-row.has-toggle-column > .dsh-panel-workspace-tree-record-spacer { display: block; width: 32px; }\n.dsh-panel-workspace-tree-record-row.has-toggle-column > button.dsh-panel-workspace-tree-item { padding-left: 0; }\n.dsh-record-workspace-body { display: flex; flex-direction: column; flex: 1; gap: 0; min-width: 0; min-height: 0; overflow: auto; }\n.dsh-record-workspace-body.is-split-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 31%); overflow: hidden; }\n.dsh-record-workspace-body > .dsh-record-inspector { flex: 1; }\n.dsh-record-workspace-body > * { min-width: 0; }\n.dsh-design-auto-text.is-workspace-content { flex: none; margin: 12px var(--ygd-panel-content-gutter, 16px); overflow-wrap: anywhere; }\n.dsh-record-map-heading { flex: 1; min-width: 0; text-align: left; border: 0 !important; background: transparent !important; color: inherit !important; font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 500; }\n.dsh-record-map-heading > span { overflow-wrap: anywhere; }\n.dsh-relation-issues { flex: none; padding: 8px 12px; background: var(--ds-warning-1, #fff8e6); font-size: 13px; }\n.dsh-relation-issues p { margin: 0 0 8px; }\n.dsh-relation-issues > div { display: flex; flex-wrap: wrap; gap: 8px; }\n.dsh-business-node-detail { position: absolute; bottom: -12px; right: -4px; z-index: 2; opacity: 0; pointer-events: none; font-size: 12px !important; background: var(--ds-brand-8, #6338cf) !important; color: white !important; }\n.dsh-business-node:hover .dsh-business-node-detail,\n.dsh-business-node:focus-within .dsh-business-node-detail { opacity: 1; pointer-events: auto; }\n.dsh-record-workspace-body > :only-child { grid-column: 1 / -1; border-left: 0; }\n/* Help belongs inside its field. The parent owns the next 16px boundary;\n   descriptions must not add another trailing margin to that boundary. */\n.dsh-design-field-description, .dsh-design-panel .dsh-design-field-description { margin: 0; margin-top: var(--ygd-panel-detail-control-gap, 8px); color: var(--ds-text-7, #677080); font-size: 12px; line-height: 1.6; }\n.dsh-token-items { display: flex; flex-wrap: wrap; gap: 8px; }\n.dsh-token-item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--ds-divider-default, #e3e6ec); border-radius: 16px; max-width: 100%; }\n.dsh-token-item strong { overflow-wrap: anywhere; font-weight: 500; }\n.dsh-token-item small { display: block; margin-top: 4px; color: var(--ds-text-7, #677080); }\n.dsh-token-item button { flex: none; }\n.dsh-design-panel .dsh-token-list.is-chips .dsh-token-item { gap: 4px; padding: 3px 8px; min-height: 32px; border-radius: 999px; }\n.dsh-design-panel .dsh-token-item > button.dsh-token-remove { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; min-width: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ds-text-secondary, #6d6d6d); line-height: 1; }\n.dsh-design-panel .dsh-token-item > button.dsh-token-remove > svg { flex: none; width: 16px; height: 16px; pointer-events: none; }\n.dsh-design-panel .dsh-token-item > button.dsh-token-remove:hover { background: var(--ds-bg-gary-hover, var(--ds-other-overlay-1, #f0f0f3)); color: var(--ds-text-primary, #272727); }\n.dsh-token-list.is-cards .dsh-token-item { border-radius: 6px; padding: 12px; }\n.dsh-token-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }\n.dsh-token-add input { flex: 1; min-width: 120px; }\n.dsh-token-add input, .dsh-token-add select { min-height: 36px; font: inherit; padding: 7px 12px; border: 1px solid var(--ds-fill-5, #dfdfdf); border-radius: 8px; background: var(--ds-bg-white, #fff); color: inherit; }\n.dsh-token-list .dsh-token-item { border-style: solid; border-width: 1px; background: var(--ds-fill-1, #fff); }\n.dsh-token-list.is-cards.is-menu .dsh-token-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }\n.dsh-token-menu-add { position: relative; min-width: 0; max-width: 100%; }\n.dsh-token-list .dsh-token-add-trigger { display: flex; align-items: flex-start; gap: 12px; min-height: 80px; width: 100%; border: 1px dashed var(--ds-divider-default, #d8dce5); border-radius: 6px; text-align: left; padding: 12px; }\n.dsh-token-list .dsh-token-add-trigger[hidden] { display: none; }\n.dsh-token-list.is-menu small { font-size: 14px; line-height: 20px; }\n.dsh-token-add-trigger > svg, .dsh-token-menu button > svg { flex: none; margin-top: 2px; }\n.dsh-token-copy { flex: 1; min-width: 0; }\n.dsh-token-copy strong { display: block; font-weight: 500; }\n.dsh-token-copy small { display: block; margin-top: 2px; color: var(--ds-text-7, #677080); }\n.dsh-token-icon { flex: none; padding: 8px; border-radius: 6px; background: var(--ds-fill-2, #f1f2f5); }\n.dsh-token-list.is-cards.is-menu .dsh-token-item { align-items: flex-start; gap: 12px; min-width: 0; }\n.dsh-token-list.is-cards.is-menu .dsh-token-item small { margin-top: 2px; }\n.dsh-token-custom-header > button { display: inline-flex; align-items: center; justify-content: center; padding: 4px; min-width: 24px; min-height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--ds-text-7, #677080); }\n.dsh-token-custom-header > button:hover { background: var(--ds-fill-2, #f1f2f5); color: var(--ds-text-9, #252b3a); }\n.dsh-token-list .dsh-token-add-trigger:hover { border-color: var(--ds-primary-default, #8056e8); background: var(--ds-fill-2, #f1f2f5); }\n.dsh-token-list.is-cards.is-menu .dsh-token-item > span:not(.dsh-token-icon) { flex: 1; min-width: 0; }\n@container (max-width: 560px) { .dsh-token-list.is-cards.is-menu .dsh-token-items { grid-template-columns: minmax(0, 1fr); } }\n.dsh-token-menu { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; width: min(100%, 256px); padding: 4px; border: 1px solid var(--ds-divider-default, #d8dce5); border-radius: 6px; background: var(--ds-fill-1, #fff); box-shadow: 0 4px 12px #0002; }\n.dsh-token-list .dsh-token-menu button { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px; text-align: left; }\n.dsh-token-menu button:focus-visible { outline: 2px solid var(--ygd-panel-control-focus, var(--ds-brand-bg-default, #7c5af6)); outline-offset: -2px; }\n.dsh-token-menu small { display: block; margin-top: 2px; color: var(--ds-text-7, #677080); }\n.dsh-token-custom-card { min-height: 80px; border: 1px dashed var(--ds-primary-default, #8056e8); border-radius: 6px; padding: 12px; }\n.dsh-token-custom-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }\n.dsh-token-custom-card .dsh-token-add { margin-top: 8px; }\n.dsh-record-preview { padding: 16px; overflow: auto; min-width: 0; font-size: 14px; line-height: 1.6; }\n.dsh-record-preview > small { display: block; font-size: 14px; font-weight: 500; line-height: 20px; }\n.dsh-record-map:not(.is-compact) { display: grid; gap: var(--ygd-panel-detail-control-gap, 8px); min-width: 0; }\n.dsh-record-map > section { border: 1px solid var(--ds-divider-default, #e3e6ec); padding: 12px; margin: 0; border-radius: 8px; }\n.dsh-record-map:not(.is-compact) > section { display: grid; gap: var(--ygd-panel-detail-section-gap, 16px); min-width: 0; }\n.dsh-design-panel .dsh-record-map:not(.is-compact) > section > .dsh-design-field { margin: 0; }\n.dsh-record-map header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n.dsh-record-map-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }\n.dsh-record-map-actions button { min-width: 28px; min-height: 28px; }\n.dsh-record-map input:is([type=\"checkbox\"], [type=\"radio\"]) { width: auto; flex: none; }\n.dsh-record-map > section > label { display: grid; gap: var(--ygd-panel-detail-control-gap, 8px); margin: 0; }\n.dsh-record-map input:not([type=\"checkbox\"]):not([type=\"radio\"]), .dsh-record-map textarea, .dsh-record-map select { width: 100%; font: inherit; padding: 8px 12px; border: 1px solid var(--ds-fill-5, #dfdfdf); border-radius: 8px; background: var(--ds-bg-white, #fff); color: inherit; }\n.dsh-record-related-editor { margin-top: 24px; border-top: 1px solid var(--ds-divider-default, #e3e6ec); padding-top: 18px; }\n.dsh-record-related-editor > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n.dsh-record-related-editor > header h3 { margin: 0; font-size: 14px; line-height: 20px; font-weight: var(--ygd-panel-heading-weight, 600); }\n.dsh-record-related-editor > p { color: var(--ds-text-7, #677080); font-size: 12px; line-height: 1.6; }\n.dsh-record-inspector .dsh-record-related-editor .dsh-design-record { border: 1px solid var(--ds-divider-default, #e3e6ec); border-radius: 8px; padding: 16px; margin: 12px 0; }\n.dsh-record-preview article { border: 1px solid var(--ds-divider-default, #e3e6ec); border-radius: 8px; padding: 16px; margin-top: 12px; }\n.dsh-record-preview article > h3 { margin: 0; font-size: 14px; line-height: 20px; font-weight: var(--ygd-panel-heading-weight, 600); overflow-wrap: anywhere; }\n.dsh-record-preview article > p { margin: 8px 0 0; }\n.dsh-record-preview article > strong { display: block; margin-top: 12px; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }\n.dsh-record-preview p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }\n.dsh-record-inspector { height: 100%; box-sizing: border-box; padding: var(--ygd-panel-content-gutter, 16px); min-width: 0; min-height: 0; overflow: auto; --ygd-panel-tabs-gutter: 0px; }\n.dsh-record-workspace-body.is-split-view > :not(:first-child) { border-left: 1px solid var(--ds-divider-default, #e3e6ec); }\n.dsh-record-inspector-content > .dsh-design-record-form > .dsh-design-record,\n.dsh-record-inspector-content > .dsh-math-document,\n.dsh-record-inspector > .dsh-record-related-editor > .dsh-design-record-form > .dsh-design-record { margin: 0; padding: 0; border: 0; background: transparent; }\n.dsh-record-inspector input, .dsh-record-inspector textarea, .dsh-record-inspector select { max-width: 100%; box-sizing: border-box; }\n.dsh-record-inspector-back { margin: 0 0 12px; border: 0 !important; padding: 3px 0 !important; background: transparent !important; color: var(--ds-brand-8, #5335b7) !important; font-size: 12px !important; }\n/* Surfaces own their gutter and form rhythm, independent of tab/stack depth.\n   Transparent containers distribute space without padding their children. */\n.dsh-design-record-fields { display: contents; }\n.dsh-record-workspace-header { flex: none; min-width: 0; }\n.dsh-record-workspace-frame.is-record-preview > .dsh-panel-workspace-main { container: record-preview-main / inline-size; }\n.dsh-record-inspector-content > .dsh-design-record-form > .dsh-design-record { display: grid; gap: var(--ygd-panel-detail-section-gap, 16px); }\n.dsh-record-inspector-content > .dsh-design-record-form > .dsh-design-record > .dsh-design-record-title:not(.dsh-design-record-header) { margin: 0; }\n.dsh-record-inspector-content > .dsh-design-record-form > .dsh-design-record > .dsh-design-record-fields { display: grid; gap: var(--ygd-panel-detail-section-gap, 16px); }\n.dsh-record-inspector-content > .dsh-design-record-form > .dsh-design-record > .dsh-design-record-fields > .dsh-design-field { margin: 0; }\n.dsh-record-inspector-content > .dsh-design-record-form > .dsh-design-record > .dsh-design-record-fields .dsh-design-field-description { margin-bottom: 0; }\n.dsh-record-inspector > .dsh-record-related-editor { display: grid; gap: var(--ygd-panel-detail-control-gap, 8px); margin-top: var(--ygd-panel-detail-section-gap, 16px); padding-top: 0; border-top: 0; }\n.dsh-record-inspector > .dsh-record-related-editor > p { margin: 0; }\n.dsh-record-inspector > .dsh-record-related-editor > .dsh-design-record-form { display: grid; gap: var(--ygd-panel-detail-section-gap, 16px); }\n.dsh-record-inspector > .dsh-record-related-editor > .dsh-design-record-form > .dsh-design-record { margin: 0; padding: 12px; }\n/* Opt-in section headers; legacy forms retain their existing layout. */\n.dsh-design-panel .dsh-design-record.has-form-header { display: grid; gap: var(--ygd-panel-detail-section-gap, 16px); padding: 16px; }\n.dsh-design-panel .dsh-design-record.has-form-header.is-card { padding: 12px; overflow: hidden; }\n.dsh-design-panel .dsh-design-record-header { font-size: 14px; line-height: 20px; height: 44px; min-height: 44px; min-width: 0; margin: 0; padding: 0 16px; border-bottom: 1px solid var(--ds-border-default, #dfdfdf); background: var(--ds-bg-gary-default, #f7f7f7); }\n/* Retained card/form composition owns its old inset; workspace headers stand alone. */\n.dsh-design-panel .has-form-header .dsh-design-record-header { margin: -16px -16px 0; }\n.dsh-design-panel .has-form-header .dsh-design-record-header.is-card { height: 40px; min-height: 40px; margin: -12px -12px 0; padding: 0 12px; }\n.dsh-design-panel .has-form-header .dsh-design-record-fields { display: grid; gap: var(--ygd-panel-detail-section-gap, 16px); }\n.dsh-design-panel .has-form-header .dsh-design-record-fields > .dsh-design-field { margin: 0; }\n.dsh-design-panel .dsh-design-record-header-input { display: block; flex: 1; width: 100%; min-width: 0; max-width: 36rem; height: 32px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-weight: var(--ygd-panel-heading-weight, 600); box-shadow: none; }\n.dsh-design-panel .dsh-design-record-header-content { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 36rem; margin-right: auto; }\n.dsh-design-panel .dsh-design-record-header-content > .dsh-design-record-header-input { flex: 0 1 auto; width: auto; min-width: min(8ch, 100%); max-width: 100%; field-sizing: content; }\n.dsh-design-panel button.dsh-panel-title-edit { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; min-width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ds-text-tertiary, #777); cursor: pointer; }\n.dsh-design-panel button.dsh-panel-title-edit:hover { background: var(--ds-bg-gary-hover, #f0f0f3); color: var(--ds-text-primary, #272727); }\n.dsh-design-panel button.dsh-panel-title-edit:focus-visible { outline: 2px solid var(--ds-brand-6, #7c5af6); outline-offset: 2px; }\n.dsh-design-panel .dsh-design-record-header-input:hover { box-shadow: inset 0 0 0 1px var(--ds-border-default, #dfdfdf); }\n.dsh-design-panel .dsh-design-record-header-input:focus-visible { outline: 2px solid var(--ygd-panel-control-focus, var(--ds-brand-bg-default, #7c5af6)); outline-offset: 2px; background: var(--ds-bg-white-default, #fff); }\n.dsh-design-panel .dsh-design-record-header-label { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.dsh-design-panel .dsh-design-record-header-ordinal { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: var(--radius-sm, 4px); background: var(--ds-bg-white-default, #fff); color: var(--ds-text-secondary, #6d6d6d); font-weight: 400; }\n/* Same-record projections inherit the inspector gutter, not separate card gutters. */\n.dsh-record-inspector-views { display: grid; gap: var(--ygd-panel-detail-section-gap, 16px); min-width: 0; }\n.dsh-record-inspector .dsh-record-inspector-views > .dsh-design-record-form > .dsh-design-record { padding: 0; }\n/* A composed inspector owns its gutter once, including title-only projections.\n   Standalone cards retain their own border/header geometry. */\n.dsh-record-inspector:has(> .dsh-record-inspector-content:first-child > .dsh-design-record-form:first-child > .dsh-design-record.has-form-header.is-detail),\n.dsh-record-inspector:has(> .dsh-record-inspector-content:first-child > .dsh-record-inspector-views:first-child > .dsh-design-record-form:first-child > .dsh-design-record.has-form-header.is-detail) { padding-top: 0; }\n.dsh-design-panel .dsh-record-inspector-content :is(.dsh-design-record-form, .dsh-design-record-fields):empty { display: none; }\n.dsh-design-panel .dsh-record-inspector-content > .dsh-design-record-form > .dsh-design-record.has-form-header.is-detail,\n.dsh-design-panel .dsh-record-inspector-content > .dsh-record-inspector-views > .dsh-design-record-form > .dsh-design-record.has-form-header.is-detail { padding: 0; }\n.dsh-design-panel .dsh-record-inspector-content > .dsh-design-record-form > .dsh-design-record > .dsh-design-record-header.is-detail,\n.dsh-design-panel .dsh-record-inspector-content > .dsh-record-inspector-views > .dsh-design-record-form > .dsh-design-record > .dsh-design-record-header.is-detail { margin: 0 -16px; padding: 0 16px; }\n/* Finite section-owned composition, never Kit or business-field selectors. */\n.dsh-design-panel .dsh-design-record-fields.has-form-body { display: grid; gap: var(--ygd-panel-detail-section-gap, 16px); min-width: 0; }\n.dsh-design-panel .dsh-design-form-group { display: grid; gap: var(--ygd-panel-detail-control-gap, 8px); min-width: 0; margin: 0; }\n.dsh-design-panel .dsh-design-form-group-fields { display: grid; gap: var(--ygd-panel-detail-section-gap, 16px); min-width: 0; }\n.dsh-design-panel .dsh-design-form-group.has-separator { border-top: 1px solid var(--ds-border-default, #dfdfdf); padding-top: 12px; }\n.dsh-design-panel .dsh-design-form-group-content { min-width: 0; }\n.dsh-design-panel .dsh-design-form-group-content.has-sidecar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; gap: 16px; }\n.dsh-design-panel .dsh-design-form-group-content > .dsh-record-preview { min-width: 0; }\n.dsh-design-panel .dsh-design-form-group-title { margin: 0; font-size: 14px; line-height: 20px; font-weight: var(--ygd-panel-heading-weight, 600); }\n.dsh-design-panel .dsh-design-form-group.is-collapsible { display: block; }\n.dsh-design-panel .dsh-design-form-group.is-collapsible > summary { min-height: 24px; }\n.dsh-design-panel .dsh-design-form-group.is-collapsible[open] > .dsh-design-form-group-content { margin-top: var(--ygd-panel-detail-section-gap, 16px); }\n.dsh-design-panel .dsh-design-form-group.is-collapsible[open] > .dsh-design-form-group-description { margin-top: var(--ygd-panel-detail-control-gap, 8px); }\n.dsh-design-form-tabs { min-width: 0; }\n.dsh-design-form-tab-content { display: grid; gap: var(--ygd-panel-detail-section-gap, 16px); padding-top: var(--ygd-panel-detail-section-gap, 16px); min-width: 0; }\n.dsh-design-panel .dsh-design-form-group-description { margin: 0; color: var(--ds-text-secondary, #6d6d6d); font-size: 12px; line-height: 1.5; }\n.dsh-design-panel .has-form-body .dsh-design-field { margin: 0; min-width: 0; }\n.dsh-design-panel .dsh-design-form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }\n.dsh-design-panel .dsh-design-form-text { flex-shrink: 0; color: var(--ds-text-secondary, #6d6d6d); }\n.dsh-design-panel .dsh-design-field.is-width-fill { flex: 1 1 128px; min-width: 0; }\n.dsh-design-panel .dsh-design-field.is-width-auto { flex: 0 0 auto; }\n.dsh-design-panel .dsh-design-field.is-width-auto > .dsh-design-field-input { width: auto; }\n.dsh-design-panel .dsh-design-field.is-label-inline { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px 12px; }\n.dsh-design-panel .dsh-design-field.is-label-inline > .dsh-design-field-label { margin: 0; padding-top: 5px; color: inherit; }\n/* The inline grid owns this 8px boundary, including its narrow-screen stack. */\n.dsh-design-panel .dsh-design-field.is-label-inline > .dsh-design-field-description { grid-column: 2; margin-top: 0; }\n.dsh-design-panel .dsh-design-field.is-label-visually_hidden > .dsh-design-field-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }\n.dsh-design-panel .dsh-design-required-mark { color: var(--ds-text-secondary, #6d6d6d); font-size: inherit; font-weight: 400; white-space: pre; }\n/* A hidden caption without a matching group heading still needs one visible\n   requirement cue. The cue owns a narrow column, never an extra blank row. */\n.dsh-design-panel .dsh-design-field.has-inline-required { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4px; }\n.dsh-design-panel .dsh-design-field.has-inline-required > .dsh-design-required-mark { grid-column: 2; grid-row: 1; }\n.dsh-design-panel .dsh-design-field.has-inline-required > .dsh-design-field-description { grid-column: 1 / -1; }\n.dsh-design-panel .has-form-body .dsh-design-field-input { min-height: 32px; padding: 4px 8px; }\n/* Composition must not collapse the editing space of multiline controls. */\n.dsh-design-panel .has-form-body textarea.dsh-design-field-input { min-height: 88px; padding: 8px 12px; }\n/* Ordinary single-line controls share native Input geometry across compositions. */\n.dsh-design-panel input.dsh-design-field-input,\n.dsh-design-panel .has-form-body input.dsh-design-field-input,\n.dsh-design-panel .dsh-record-map input:not([type=\"checkbox\"]):not([type=\"radio\"]) { box-sizing: border-box; height: 36px; min-height: 36px; font-family: inherit; font-style: inherit; font-weight: inherit; font-size: var(--ygd-panel-text-size,14px); line-height: 20px; padding: 4px 12px; border: 1px solid var(--ds-fill-5, #dfdfdf); border-radius: 8px; background: var(--ds-bg-white, #fff); color: inherit; }\n.dsh-design-panel select.dsh-design-field-input, .dsh-design-panel .has-form-body select.dsh-design-field-input, .dsh-design-panel .dsh-record-map select,\n.dsh-design-panel button.dsh-panel-select-trigger.dsh-design-field-input { height: 36px; min-height: 36px; font: inherit; font-size: var(--ygd-panel-text-size,14px); line-height: 20px; padding: 4px 12px; border-radius: 8px; }\n.dsh-design-panel :is(.dsh-design-field-input, .dsh-design-source-add):focus-visible { box-shadow: none; }\n.dsh-design-panel :is(input.dsh-design-field-input, .dsh-record-map input:not([type=\"checkbox\"]):not([type=\"radio\"]))::placeholder { color: var(--ds-text-placeholder, #999); }\n.dsh-design-panel :is(input.dsh-design-field-input, .dsh-record-map input:not([type=\"checkbox\"]):not([type=\"radio\"])):disabled { cursor: not-allowed; opacity: .5; }\n.dsh-design-panel .dsh-record-map > section > label > span:first-child { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ds-text-primary, #272727); }\n/* Simple record cards distinguish the record title from its field captions.\n   Nested typed forms and compact tables retain their own heading hierarchy. */\n.dsh-design-panel .dsh-record-map:not(.is-compact) > section > header > strong { font-size: 14px; line-height: 20px; font-weight: 500; }\n.dsh-design-panel .dsh-record-map:not(.is-compact) > section > label > span:first-child { font-size: 12px; line-height: 18px; font-weight: 400; color: var(--ds-text-secondary, #6d6d6d); }\n.dsh-design-panel .dsh-record-map > .dsh-record-map-add, .dsh-design-panel .dsh-record-related-editor > .dsh-record-related-add { display: inline-flex; align-items: center; justify-content: center; justify-self: start; gap: 8px; height: 28px; padding: 5px 12px; border: 0; border-radius: var(--button-radius, var(--ds-radius-4, 4px)); background: transparent; color: var(--ds-text-primary, #272727); font-family: inherit; font-style: inherit; font-weight: 400; font-size: 12px; line-height: 18px; cursor: pointer; }\n.dsh-design-panel :is(.dsh-record-map-add, .dsh-record-related-add) > svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; }\n.dsh-design-panel :is(.dsh-record-map-add, .dsh-record-related-add):hover:not(:disabled) { background: var(--ds-other-overlay-1, #f0f0f3); }\n.dsh-design-panel :is(.dsh-record-map-add, .dsh-record-related-add):active:not(:disabled) { background: var(--ds-other-overlay-2, #e8e8e8); }\n.dsh-design-panel .dsh-record-map > .dsh-record-map-add:disabled, .dsh-design-panel .dsh-record-related-editor > .dsh-record-related-add:disabled { color: var(--ds-text-disabled, #a3a3a3); cursor: not-allowed; background: transparent; }\n.dsh-design-panel .dsh-record-map:not(.is-compact) > .dsh-record-map-add,\n.dsh-design-panel .dsh-record-related-editor > .dsh-record-related-add { margin-inline-start: 13px; padding-inline: 0; }\n.dsh-design-panel .dsh-design-field-choices.is-column { display: grid; gap: 8px; }\n.dsh-design-panel .dsh-design-field-choices.is-row_wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }\n.dsh-design-panel .dsh-design-field-choices.is-row_scroll { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; overflow-x: auto; padding-bottom: 4px; }\n.dsh-design-panel .dsh-design-field-choices:is(.is-row_wrap, .is-row_scroll) > .dsh-design-field-choice { flex-shrink: 0; gap: 6px; }\n.dsh-design-panel .dsh-custom-choice.has-choice-layout > .dsh-design-field-input { margin-top: 12px; }\n@container (max-width: 480px) { .dsh-design-panel .dsh-design-field.is-label-inline { grid-template-columns: minmax(0, 1fr); } .dsh-design-panel .dsh-design-field.is-label-inline > .dsh-design-field-description { grid-column: 1; } }\n.dsh-workspace-cover, .dsh-workspace-cover-base { position: relative; height: 100%; min-height: 0; }\n/* A mounted but hidden form must not enlarge the visible canvas's scroll area. */\n.dsh-workspace-cover-base[aria-hidden='true'] { overflow: clip; }\n.dsh-workspace-cover-surface[aria-hidden='true'] { overflow: clip; }\n.dsh-workspace-cover-surface { position: absolute; inset: 0; z-index: 2; display: flex; background: var(--ds-bg-default, #fff); }\n.dsh-design-panel :is(.dsh-workspace-cover-return, .dsh-panel-workspace-map-toggle) { position: absolute; top: 36vh; transform: translateY(-50%); width: 24px; height: 48px; display: grid; place-items: center; padding: 0; border: 1px solid var(--ds-line-1, #e8e8e8); background: var(--ds-bg-white, #fff); color: var(--ds-text-tertiary, #777); cursor: pointer; z-index: 3; }\n.dsh-workspace-cover-return { right: 0; border-radius: 8px 0 0 8px; }\n.dsh-workspace-cover-return svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }\n.dsh-record-board { height: 100%; min-height: 0; }\n.dsh-record-board .dsh-panel-workspace-sidebar, .dsh-record-workspace-frame.is-canvas-switch .dsh-panel-workspace-sidebar { position: relative; overflow: visible; }\n.dsh-record-board .dsh-panel-workspace-tree, .dsh-record-workspace-frame.is-canvas-switch .dsh-panel-workspace-tree { height: 100%; overflow: auto; }\n.dsh-panel-workspace-map-toggle { right: 0; border-radius: 8px 0 0 8px; }\n.dsh-record-board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; flex: none; border-bottom: 1px solid var(--ds-line-1, #e8e8e8); }\n.dsh-record-board-toolbar > .dsh-panel-select-trigger { margin-left: auto; }\n.dsh-record-board-toolbar button, .dsh-record-board-toolbar select, .dsh-record-board-priority button { height: 28px; padding: 0 8px; font-size: 12px; border: 1px solid var(--ds-line-1, #e8e8e8); border-radius: 6px; background: var(--ds-bg-white, #fff); color: inherit; }\n.dsh-record-board-content { flex: 1; min-height: 0; overflow: auto; padding: var(--ygd-panel-content-gutter, 16px); }\n.dsh-record-board-group { border: 1px solid var(--ds-line-1, #e8e8e8); border-radius: 12px; padding: 12px; margin-bottom: 16px; background: var(--ds-bg-gary-default, #f5f5f9); }\n.dsh-record-board-group-heading { width: 100%; display: flex; align-items: center; gap: 6px; border: 0; background: transparent; color: inherit; font-size: 14px; font-weight: 500; line-height: 24px; text-align: start; padding: 0; cursor: pointer; }\n.dsh-record-board-group-heading[aria-expanded=true] > svg { transform: rotate(90deg); }\n.dsh-record-board-group-heading small { color: var(--ds-text-tertiary, #777); font-weight: 400; }\n.dsh-record-board-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }\n.dsh-record-board-cards[hidden], .dsh-record-board-cards > article[hidden], .dsh-record-board-group[hidden] { display: none; }\n.dsh-record-board-cards > article { border: 1px solid var(--ds-line-1, #e8e8e8); background: var(--ds-static-white, #fff); border-radius: 8px; padding: 10px 12px; min-width: 0; }\n.dsh-record-board-cards > article:hover { box-shadow: var(--ds-shadow-1-center); }\n.dsh-record-board-cards > article > header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }\n.dsh-record-board-cards h4 { font-size: 14px; line-height: 28px; font-weight: 500; margin: 0; overflow-wrap: anywhere; }\n.dsh-record-board-cards > article > header h4 { min-width: 0; max-width: 100%; }\n.dsh-record-board-id { min-width: 0; max-width: 50%; flex: 0 1 auto; color: var(--ds-text-secondary, #555); font-size: 12px; font-weight: 400; line-height: 28px; overflow-wrap: anywhere; }\n.dsh-record-board-cards .dsh-design-record-header-input { height: 28px; font-size: inherit; font-weight: inherit; }\n.dsh-record-board-description { font-size: 12px; line-height: 24px; color: var(--ds-text-7, #666); overflow-wrap: anywhere; }\n.dsh-record-board-description p { margin: 0; white-space: pre-wrap; }\n.dsh-record-board-description-editor { width: 100%; min-height: 88px; box-sizing: border-box; resize: vertical; border: 1px solid var(--ds-fill-5, #dfdfdf); background: var(--ds-bg-white, #fff); border-radius: 8px; padding: 8px 12px; font: inherit; font-size: 14px; line-height: 24px; }\n.dsh-record-board-badge { height: 28px; min-width: 96px; font-size: 12px; border-radius: 999px; border: 1px solid var(--ds-line-1, #e8e8e8); background: var(--ds-bg-white, #fff); color: inherit; padding: 0 8px; white-space: nowrap; }\n.dsh-record-board-priority { display: flex; align-items: center; gap: 8px; }\n.dsh-record-board-priority .dsh-record-board-badge { display: inline-flex; align-items: center; min-width: 0; }\n.dsh-record-board-cards > article.is-rejected :is(h4, .dsh-record-board-description) { opacity: .5; }\n.dsh-record-board-actions { display: flex; justify-content: flex-end; gap: 0; margin-top: 4px; min-height: 28px; }\n.dsh-record-board-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 8px; }\n.dsh-record-board-footer > .dsh-record-board-actions { margin-top: 0; margin-left: auto; }\n.dsh-record-board-actions button { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 8px; background: transparent; border: 0; border-radius: 6px; color: inherit; font-size: 12px; cursor: pointer; }\n.dsh-record-board-actions button:hover:not(:disabled) { background: var(--ds-other-overlay-1, #f0f0f3); }\n@media (hover: hover) { .dsh-record-board-cards > article:not(.is-editing):not(:hover):not(:focus-within) > .dsh-record-board-footer > .dsh-record-board-actions { opacity: 0; } }\n.dsh-record-board-editor { margin-top: 8px; border-top: 1px solid var(--ds-line-1, #e8e8e8); padding-top: 8px; font-size: 12px; }\n.dsh-record-board-editor summary { cursor: pointer; font-weight: 500; padding: 4px 0; }\n.dsh-record-board-editor .dsh-design-record { padding: 0; border: 0; background: transparent; }\n.dsh-record-board-map { flex: 1; min-height: 0; }\n.dsh-source-reference { margin-top: 10px; overflow-wrap: anywhere; }\n.dsh-source-reference p { font-size: 12px; line-height: 1.6; margin: 8px 0; }\n.dsh-source-reference pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; max-height: 260px; overflow: auto; }\n.dsh-preview-workspace { height:100%; min-height:0; color:var(--ds-text-primary,#272727); }\n.dsh-preview-workspace .dsh-panel-workspace-main { display:flex; flex-direction:column; min-height:0; overflow:hidden; }\n.dsh-preview-presets { display:flex; flex-direction:column; gap:10px; padding:14px; overflow:auto; }\n.dsh-preview-presets h3 { font-size:13px; margin:0 0 4px; }\n.dsh-preview-presets-title { display: flex; align-items: center; gap: 8px; }\n.dsh-preview-presets button { display:flex; flex-direction:column; gap:6px; text-align:left; background:var(--ds-bg-default,#fff); color:inherit; border:1px solid var(--ds-border-default,#e4e4e7); border-radius:8px; padding:12px; cursor:pointer; }\n.dsh-preview-presets button[aria-pressed=true] { border-color:var(--ds-brand-bg-default,#7354d2); box-shadow:0 0 0 1px var(--ds-brand-bg-default,#7354d2); }\n.dsh-preview-presets small { color:var(--ds-text-secondary,#666); line-height:1.5; }\n.dsh-preview-swatches { display:flex; gap:2px; width:100%; height:14px; overflow:hidden; border-radius:4px; }\n.dsh-preview-swatches i { flex:1; }\n.dsh-preview-swatches i:first-child { flex:2; }\n.dsh-preview-toolbar { display:flex; align-items:center; gap:8px; padding:10px var(--ygd-panel-content-gutter, 16px); border-bottom:1px solid var(--ds-border-default,#e4e4e7); flex:none; }\n.dsh-preview-toolbar strong { flex:1; min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n.dsh-preview-toolbar button, .dsh-preview-adjustments button { color:inherit; background:var(--ds-bg-default,#fff); border:1px solid var(--ds-border-default,#ddd); border-radius:8px; min-height:32px; font:inherit; padding:5px 10px; cursor:pointer; white-space:nowrap; }\n.dsh-preview-workspace button:disabled { opacity:.55; cursor:default; }\n.dsh-preview-description { margin:0; padding:8px var(--ygd-panel-content-gutter, 16px); font-size:12px; line-height:1.6; color:var(--ds-text-secondary,#666); flex:none; }\n.dsh-preview-main { padding:var(--ygd-panel-content-gutter, 16px); display:flex; flex:1; min-height:0; min-width:0; position:relative; overflow:hidden; }\n.dsh-live-preview { height:100%; flex:1; min-height:0; min-width:0; overflow:hidden; background:var(--ds-bg-default,#fff); }\n.dsh-live-preview iframe { display:block; }\n.dsh-preview-adjustments { position:absolute; inset:0 0 0 auto; width:min(320px,100%); z-index:2; background:var(--ds-bg-default,#fff); display:flex; flex-direction:column; border-left:1px solid var(--ds-border-default,#ddd); box-shadow:-4px 0 16px #00000010; }\n.dsh-preview-adjustments > header { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px; font-size:14px; flex:none; }\n.dsh-preview-adjustments > div { flex:1; min-height:0; overflow:auto; }\n.dsh-preview-adjustments > footer { padding:12px; border-top:1px solid var(--ds-border-default,#ddd); font-size:12px; }\n.dsh-preview-adjustments > footer p { margin:0 0 8px; line-height:1.5; }\n.dsh-preview-control-group { padding:0 12px 12px; border-bottom:1px solid var(--ds-border-default,#e4e4e7); }\n.dsh-preview-control-group h4 { margin:16px 0 8px; font-size:14px; line-height:20px; font-weight:500; }\n.dsh-preview-control-group summary { padding-top:12px; font-size:13px; font-weight:600; cursor:pointer; }\n.dsh-preview-control-group p { font-size:12px; line-height:1.5; color:var(--ds-text-secondary,#666); }\n.dsh-preview-control-group .dsh-design-schema-field { display:flex; flex-direction:column; gap:8px; margin-block:16px; font-size:12px; }\n/* Parameter inspectors use the compact 32px variant, not browser-default fonts. */\n.dsh-design-panel .dsh-preview-control-group :is(input,select,textarea) { min-width:0; max-width:100%; min-height:32px; font-family:inherit; font-style:inherit; font-weight:inherit; font-size:14px; line-height:20px; border:1px solid var(--ds-fill-5,#dfdfdf); border-radius:8px; padding:5px 10px; color:inherit; background:var(--ds-bg-white,#fff); }\n.dsh-design-panel .dsh-preview-control-group :is(input,select) { height:32px; }\n.dsh-color-control { display:flex; align-items:center; gap:8px; min-width:0; }\n.dsh-color-control input[type=color], .dsh-design-panel .dsh-preview-control-group input[type=color] { flex:none; width:32px; height:32px; min-height:32px; padding:2px; }\n.dsh-color-control input[type=text] { min-width:0; flex:1; }\n.dsh-document-workspace { height: 100%; min-height: 0; }\n.dsh-document-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px var(--ygd-panel-content-gutter, 16px); border-bottom: 1px solid var(--ds-line-1, #e8e8e8); flex: none; }\n.dsh-document-toolbar strong { flex: 1; overflow-wrap: anywhere; }\n.dsh-document-toolbar button, .dsh-document-sources button { min-height: 32px; font: inherit; padding: 5px 10px; border: 1px solid var(--ds-fill-5, #dfdfdf); border-radius: 8px; background: var(--ds-bg-white, #fff); color: inherit; }\n.dsh-document-legend, .dsh-document-sources { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; padding: 8px 18px; border-bottom: 1px solid var(--ds-line-1, #e8e8e8); }\n.dsh-document-legend { border-left: 3px solid #b7a5ec; }\n.dsh-document-body { flex: 1; min-height: 0; display: flex; padding: var(--ygd-panel-content-gutter, 16px); }\n.dsh-document-body iframe { flex: 1; min-width: 0; height: 100%; border: 1px solid var(--ds-line-1, #e8e8e8); background: #fff; border-radius: 6px; }\n.dsh-document-body > p { margin: auto; }\n.dsh-record-context { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ds-divider-default, #e8e8e8); }\n.dsh-record-context > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }\n.dsh-record-context > header h3 { margin: 0; font-size: 13px; font-weight: 650; }\n.dsh-record-context > header p { margin: 2px 0 0; color: var(--ds-text-tertiary, #6d6d6d); font-size: 11px; line-height: 1.45; }\n.dsh-record-context > header > span { flex: none; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--ds-fill-3, #f0f0f3); color: var(--ds-text-tertiary, #6d6d6d); font-size: 11px; text-align: center; }\n/* Inheritance is a navigable source reference, not a count badge or editable field. */\n.dsh-record-inheritance { display: grid; gap: 8px; min-width: 0; margin: 0 0 var(--ygd-panel-detail-section-gap, 16px); padding: 12px; border: 1px solid var(--ds-divider-default, #e3e6ec); border-radius: 8px; background: var(--ds-fill-2, #f8f8fa); }\n.dsh-record-inheritance-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }\n.dsh-record-inheritance-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ds-text-secondary, #6d6d6d); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }\n.dsh-record-inheritance-label > svg { flex: none; }\n.dsh-record-inheritance-parents { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }\n.dsh-record-inheritance .dsh-record-inheritance-parent { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; min-height: 28px; padding: 3px 8px; border: 1px solid var(--ds-border-default, #dfdfdf); border-radius: 6px; background: var(--ds-bg-white-default, #fff); color: var(--ds-brand-8, #5335b7); font-size: 14px; font-weight: 500; line-height: 20px; text-align: left; cursor: pointer; }\n.dsh-record-inheritance-parent > span { min-width: 0; overflow-wrap: anywhere; }\n.dsh-record-parent-select { display: grid; gap: var(--ygd-panel-control-gap, 8px); margin-bottom: var(--ygd-panel-detail-section-gap, 16px); font-size: 14px; line-height: 20px; }\n.dsh-record-parent-select select { width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--ds-border-default, #dfdfdf); border-radius: 8px; background: var(--ds-bg-white-default, #fff); color: var(--ds-text-primary, #222); font: inherit; }\n.dsh-record-parent-select select:focus-visible { outline: 2px solid var(--ygd-panel-control-focus, #7c5af6); outline-offset: 2px; }\n.dsh-record-parent-inline { display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%; margin-inline-start:auto; font-size:12px; font-weight:400; color:var(--ds-text-secondary,#666); }\n.dsh-record-parent-inline > span:first-child { flex:none; }\n.dsh-design-panel .dsh-record-parent-inline > .dsh-panel-select-trigger { width:clamp(100px,16cqi,200px); height:32px; padding-inline:8px; font-size:inherit; }\n.dsh-design-panel .dsh-record-parent-inline > .dsh-record-parent-source { display:inline-flex; align-items:center; justify-content:center; flex:none; width:28px; height:28px; padding:0; border:0; background:transparent; }\n.dsh-record-parent-value { min-width:0; overflow-wrap:anywhere; }\n.dsh-design-panel .dsh-design-record-header:has(.dsh-record-parent-inline) { height:auto; min-height:44px; flex-wrap:wrap; gap:8px; }\n.dsh-design-panel .dsh-related-record-table { min-width:0; max-width:100%; }\n.dsh-design-panel .dsh-related-record-table table { table-layout:auto; min-width:660px; margin-bottom:0; font-size:var(--ygd-panel-text-size,14px); }\n.dsh-design-panel .dsh-related-record-table :is(th,td) { padding:8px; }\n.dsh-design-panel .dsh-related-record-table :is(th,td):not(.dsh-related-record-actions):not(.dsh-related-record-actions-heading) { min-width:170px; }\n.dsh-design-panel .dsh-related-record-table .dsh-design-field { margin:0; }\n.dsh-design-panel .dsh-related-record-table .dsh-design-field + .dsh-design-field { margin-top:8px; }\n.dsh-design-panel .dsh-related-record-table .dsh-design-field-input { min-width:140px; }\n.dsh-design-panel .dsh-related-record-table .dsh-design-field-choices { min-width:210px; }\n.dsh-design-panel .dsh-related-record-table :is(.dsh-related-record-actions,.dsh-related-record-actions-heading) { width:1%; white-space:nowrap; }\n.dsh-design-panel .dsh-related-record-table .dsh-related-record-detail[hidden] { display:none; }\n/* Actual Panel width controls compact tool density, not physical screen size.\n   Preserve input/target sizes, auxiliary-text floor and browser text zoom. */\n@container ygd-panel (max-width:560px) {\n  .dsh-design-panel > * { --ygd-panel-text-size:13px; --ygd-panel-detail-section-gap:12px; --ygd-panel-detail-control-gap:6px; font-size:var(--ygd-panel-text-size); }\n  .dsh-design-panel .dsh-design-field-label,\n  .dsh-design-panel .dsh-panel-workspace-navigation h2,\n  .dsh-design-panel .dsh-panel-workspace-nav-items button,\n  .dsh-design-panel .dsh-panel-workspace-tree button:is(.dsh-panel-workspace-tree-group-toggle,.dsh-panel-workspace-tree-item,.dsh-panel-workspace-tree-add,.dsh-panel-workspace-tree-subgroup-toggle) { font-size:var(--ygd-panel-text-size,13px); }\n  .dsh-design-panel .dsh-document-toolbar { padding:8px 12px; gap:8px; }\n  .dsh-design-panel .dsh-record-parent-inline { margin-inline-start:0; }\n}\n@container ygd-reading (max-width:560px) {\n  .dsh-artifact-markdown { --ygd-panel-text-size:13px; padding:12px; }\n}\n.dsh-record-inherited-related { display: grid; gap: var(--ygd-panel-control-gap, 8px); padding: 12px; border: 1px solid var(--ds-border-default, #dfdfdf); border-radius: 8px; background: var(--ds-fill-2, #f8f8fa); }\n.dsh-record-inherited-related > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }\n.dsh-record-inherited-related h3 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; }\n.dsh-record-inherited-source { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 3px 6px; border: 0; background: transparent; color: var(--ds-brand-8, #5335b7); font: inherit; font-size: 12px; cursor: pointer; }\n.dsh-panel-workspace-tree > :where(header:has(> [data-sidebar-icon])) { display: flex; align-items: center; gap: 8px; }\n.dsh-panel-workspace-sidebar [data-sidebar-icon][aria-hidden] { flex: none; width: 16px; height: 16px; color: var(--ds-text-tertiary, #777); }\n.dsh-record-inheritance-parent > svg { flex: none; }\n.dsh-record-inheritance .dsh-record-inheritance-parent:hover { border-color: var(--ds-brand-8, #5335b7); background: var(--ds-fill-3, #f0f0f3); }\n.dsh-record-inheritance .dsh-record-inheritance-parent:focus-visible { outline: 2px solid var(--ygd-panel-control-focus, var(--ds-brand-bg-default, #7c5af6)); outline-offset: 2px; }\n.dsh-record-inheritance > p { margin: 0; color: var(--ds-text-secondary, #6d6d6d); font-size: 12px; line-height: 20px; overflow-wrap: anywhere; }\n.dsh-record-graph-summary > .dsh-record-inheritance { margin-top: var(--ygd-panel-detail-section-gap, 16px); }\n.dsh-record-context-summary { display: grid; gap: 5px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ds-divider-default, #e8e8e8); }\n.dsh-record-context-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; color: var(--ds-text-secondary, #4c4c4c); font-size: 12px; }\n.dsh-record-context-summary strong { min-width: 22px; padding: 1px 6px; border-radius: 999px; background: var(--ds-fill-3, #f0f0f3); color: var(--ds-text-tertiary, #777); font-size: 11px; font-weight: 550; text-align: center; }\n.dsh-record-context-summary p { margin: 3px 0 0; color: var(--ds-text-tertiary, #777); font-size: 11px; line-height: 1.5; }\n.dsh-record-graph-summary .dsh-record-context-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 10px; }\n.dsh-record-graph-summary .dsh-record-context-summary strong { flex-basis: 100%; padding: 0; background: none; text-align: left; }\n.dsh-record-graph-summary .dsh-record-context-summary button { max-width: 100%; overflow-wrap: anywhere; font-size: 12px; }\n.dsh-record-hierarchy-create { width: 100%; margin-top: 14px; border-style: dashed !important; color: var(--ds-brand-8, #5335b7) !important; }\n.dsh-record-create-backdrop { position: absolute; z-index: 20; inset: 0; display: flex; justify-content: flex-end; background: rgb(20 24 35 / 22%); }\n.dsh-record-create-sheet { display: flex; flex-direction: column; width: min(390px, 100%); height: 100%; border-left: 1px solid var(--ds-line-2, #dfdfdf); background: var(--ds-fill-1, #fff); box-shadow: -12px 0 28px rgb(20 24 35 / 12%); }\n.dsh-record-create-sheet > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; border-bottom: 1px solid var(--ds-divider-default, #e8e8e8); }\n.dsh-record-create-sheet > header h2 { margin: 0; font-size: 16px; font-weight: 650; }\n.dsh-record-create-sheet > header p { margin: 5px 0 0; color: var(--ds-text-tertiary, #6d6d6d); font-size: 12px; line-height: 1.55; }\n.dsh-record-create-sheet > header button { flex: none; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; font-size: 20px; line-height: 1; }\n.dsh-record-create-sheet-body { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px; }\n.dsh-record-create-sheet-body > label { display: grid; gap: 6px; color: var(--ds-text-secondary, #4c4c4c); font-size: 13px; font-weight: 550; }\n.dsh-record-create-sheet-body input { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--ds-line-2, #dfdfdf); border-radius: 7px; background: #fff; color: inherit; }\n.dsh-record-create-parent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin-top: 18px; padding: 10px 12px; border-radius: 8px; background: var(--ds-fill-2, #f7f7f7); font-size: 12px; }\n.dsh-record-create-parent span { color: var(--ds-text-tertiary, #6d6d6d); }\n.dsh-record-create-parent strong { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }\n.dsh-record-create-inherits { margin: 12px 0 0; color: var(--ds-text-tertiary, #6d6d6d); font-size: 12px; line-height: 1.6; }\n.dsh-record-create-sheet > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--ds-divider-default, #e8e8e8); }\n.dsh-record-create-sheet > footer button { min-width: 72px; }\n.dsh-record-create-sheet > footer button.is-primary { border-color: var(--ds-brand-7, #6745e4); background: var(--ds-brand-7, #6745e4); color: #fff; }\n.dsh-record-create-sheet > footer button:disabled { cursor: not-allowed; opacity: .45; }\n.dsh-canvas-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 28px; margin-bottom: 8px; }\n.dsh-canvas-toolbar-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }\n.dsh-canvas-toolbar-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ds-text-primary, #222); font-size: 14px; line-height: 20px; font-weight: 500; overflow-wrap: anywhere; }\n.dsh-canvas-toolbar-counts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ds-text-tertiary, #6d6d6d); font-size: 12px; line-height: 18px; font-weight: 400; }\n.dsh-canvas-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }\n.dsh-canvas-toolbar-actions button.is-active { border-color: var(--ds-brand-7, #6745e4); background: var(--ds-brand-1, #f3f0ff); color: var(--ds-brand-8, #5335b7); }\n.react-flow__handle.dsh-canvas-node-handle { width: 11px; height: 11px; border: 2px solid var(--ds-static-white, #fff); background: var(--ds-text-tertiary, #6c7594); }\n.react-flow__handle.dsh-canvas-node-handle:hover { background: var(--ds-brand-7, #6745e4); }\n.dsh-relation-connect-guide { margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--ds-brand-3, #ddd3ff); border-radius: 7px; background: var(--ds-brand-1, #f7f4fe); color: var(--ds-text-secondary, #4c4c4c); font-size: 12px; }\n.dsh-relation-connect-guide strong { color: var(--ds-brand-8, #5335b7); }\n.dsh-relation-graph { box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 12px 16px 0; }\n.dsh-visual-canvas { flex: 1; height: auto; min-height: 300px; position: relative; border: 1px solid #dce0e8; border-radius: 10px; overflow: hidden; background: #fafbfe; }\n.dsh-visual-canvas .react-flow__node { border-radius: 8px; border: 1px solid #aeb9cf; padding: 12px; font-size: 13px; line-height: 1.5; background: #fff; color: #25324a; }\n.dsh-visual-canvas .react-flow__node.selected { border: 2px solid #7154bf; box-shadow: 0 0 0 3px #eee9fc; }\n.dsh-visual-canvas .react-flow__edge.selected .react-flow__edge-path { stroke: #7154bf; stroke-width: 3; }\n.dsh-visual-canvas .react-flow__handle { width: 11px; height: 11px; border: 2px solid #fff; background: #6c7594; transition: transform .12s ease, background .12s ease; }\n.dsh-visual-canvas .react-flow__handle:hover { z-index: 2; background: var(--ds-brand-7, #6745e4); }\n.dsh-visual-canvas .react-flow__node-business-record { width: 180px; padding: 0; border: 0; background: transparent; box-shadow: none; }\n.dsh-visual-canvas .react-flow__node-business-record.selected { border: 0; box-shadow: none; }\n.dsh-business-node { position: relative; box-sizing: border-box; width: 180px; min-height: 64px; padding: 10px 12px; border: 1px solid #aeb9cf; border-radius: 10px; background: #fff; color: #25324a; box-shadow: 0 2px 7px rgb(35 47 73 / 7%); }\n.dsh-business-node.is-selected { border-color: #7154bf; box-shadow: 0 0 0 3px #eee9fc, 0 4px 10px rgb(35 47 73 / 10%); }\n.dsh-business-node.is-connection-source { border-color: var(--ds-brand-7, #6745e4); background: var(--ds-brand-1, #f7f4fe); box-shadow: 0 0 0 4px var(--ds-brand-2, #eae5ff); }\n.dsh-business-node-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1px 7px; }\n.dsh-business-node-symbol { grid-row: 1 / span 2; color: var(--ds-brand-7, #6745e4); font-size: 17px; line-height: 1; }\n.dsh-business-node-title { min-width: 0; font-size: 14px; line-height: 20px; font-weight: 500; white-space: normal; overflow-wrap: anywhere; }\n.dsh-business-node-kind { color: var(--ds-text-tertiary, #6d6d6d); font-size: 10px; line-height: 1.3; }\n.dsh-business-edge-label { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; max-width: 200px; width: max-content; padding: 4px 8px; border: 1px solid #dce0e8; border-radius: 6px; background: var(--ds-fill-1, #fff); color: #38445a; white-space: normal; overflow-wrap: anywhere; box-shadow: 0 1px 3px rgb(35 47 73 / 6%); }\n.dsh-business-edge-label strong { font-size: 12px; line-height: 18px; font-weight: 500; }\n.dsh-business-edge-label small { font-size: 12px; line-height: 18px; color: var(--ds-text-tertiary, #666); }\n.dsh-business-edge-annotation { box-sizing: border-box; max-width: 150px; width: max-content; padding: 2px 4px; border-radius: 3px; background: var(--ds-fill-1, #fff); color: var(--ds-text-primary, #333); font-size: 12px; line-height: 18px; white-space: normal; overflow-wrap: anywhere; }\n.dsh-business-edge-label.is-pending { border-style: dashed; color: #626a78; }\n.dsh-visual-empty { position: absolute; top: 42%; width: 100%; text-align: center; pointer-events: none; color: #737b8b; }\n.dsh-auto-panel-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 16px; padding: 8px 12px; border: 1px solid var(--ds-divider-default, #ddd); border-radius: 8px; background: var(--ds-fill-2, #f5f7fa); color: var(--ds-text-secondary, #444); font-size: 12px; }\n.dsh-auto-panel-notice p, .dsh-auto-panel-notice details { flex-basis: 100%; margin: 0; overflow-wrap: anywhere; }\n.dsh-navigation-frame > .dsh-panel-workspace-main { container: navigation-content / inline-size; }\n.dsh-navigation-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 300px; height: 100%; min-height: 0; min-width: 0; }\n.dsh-navigation-map { min-width: 0; min-height: 350px; }\n.dsh-navigation-inspector { padding: 16px; min-width: 0; overflow: auto; overflow-wrap: anywhere; border-left: 1px solid var(--ds-divider-default, #ddd); }\n.dsh-navigation-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-block: 12px; }\n.dsh-navigation-actions:empty { display: none; }\n.dsh-navigation-entry { display: inline-flex; align-items: center; gap: 6px; }\n.dsh-navigation-entry input { flex: none; }\n@container navigation-content (max-width: 600px) {\n  .dsh-navigation-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(280px, 45%) minmax(0, 1fr); }\n  .dsh-navigation-map { min-height: 0; }\n  .dsh-navigation-inspector { border-left: 0; border-top: 1px solid var(--ds-divider-default, #ddd); }\n}\n.dsh-visual-hint { font-size: 12px; line-height: 1.6; color: #697285; margin: 10px 0; }\n.dsh-record-workspace [role=alert] { padding: 8px; background: #fff5e6; color: #854708; font-size: 12px; overflow-wrap: anywhere; }\n.dsh-record-matrix h3 { font-size: 15px; margin: 6px 0 10px; }\n.dsh-record-artifact h3 { font-size: 15px; margin: 6px 0 10px; }\n.dsh-record-artifact iframe { width: 100%; height: 560px; border: 1px solid #dce0e8; border-radius: 8px; background: white; }\n/* Artifact surfaces fill their slot through transparent tabs/stacks. Inline\n   related collections retain their own bounded document reading frame. */\n.dsh-record-artifact { box-sizing: border-box; display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; height: 100%; padding: var(--ygd-panel-content-gutter, 16px); overflow: hidden; }\n.dsh-record-artifact > iframe { flex: 1; min-height: 0; height: 100%; }\n.dsh-record-matrix { box-sizing: border-box; min-width: 0; padding: var(--ygd-panel-content-gutter, 16px); overflow: auto; }\n.dsh-record-related-artifacts { display: grid; gap: var(--ygd-panel-detail-section-gap, 16px); margin-top: var(--ygd-panel-detail-section-gap, 16px); min-width: 0; }\n.dsh-record-related-artifacts .dsh-record-artifact { min-width: 0; flex: none; height: auto; padding: 0; overflow: visible; }\n.dsh-record-related-artifacts .dsh-record-artifact h3 { font-size: 14px; font-weight: 500; margin: 0 0 8px; color: var(--ds-text-primary); }\n.dsh-artifact-explanation { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 8px; color: var(--ds-text-secondary); }\n.dsh-record-artifact .dsh-artifact-details-link { display: block; padding: 0; margin: 0 0 8px; min-height: 24px; border: 0; background: transparent; color: var(--ds-text-secondary, #6d6d6d); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }\n.dsh-record-related-artifacts .dsh-record-artifact iframe { flex: none; height: 560px; box-sizing: border-box; display: block; max-width: 100%; border-color: var(--ds-border); }\n.dsh-component-tabs-panel > .dsh-record-related-artifacts { box-sizing: border-box; margin: 0; padding: 16px; height: 100%; overflow: auto; }\n.dsh-matrix-scroll { overflow: auto; }\n.dsh-record-matrix table { border-collapse: collapse; width: 100%; font-size: 13px; }\n.dsh-record-matrix th, .dsh-record-matrix td { border: 1px solid #dce0e8; padding: 10px; text-align: left; }\n.dsh-record-matrix th { background: #f5f6fa; font-weight: 500; white-space: nowrap; }\n.dsh-record-matrix td input { width: 100%; min-width: 130px; box-sizing: border-box; border: 1px solid #dce0e8; background: #fff; color: inherit; border-radius: 4px; padding: 7px; }\n@container (max-width: 720px) {\n  .dsh-record-workspace-body.is-split-view { display: flex; flex: 1; min-height: 0; overflow: auto; }\n  .dsh-record-workspace-body.is-split-view > :not(:first-child) { border-left: 0; border-top: 1px solid var(--ds-divider-default, #e3e6ec); }\n  .dsh-visual-canvas { flex: none; height: 380px; min-height: 0; }\n}\n/* Detail + preview responds to its own content width, not the enclosing host. */\n@container record-preview-main (max-width: 720px) {\n  .dsh-record-workspace-frame.is-record-preview > .dsh-panel-workspace-main > .dsh-record-workspace-body { display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; overflow: auto; }\n  .dsh-record-inspector.is-preview-pane { height: auto; overflow: visible; border-top: 0; }\n  .dsh-record-preview.is-preview-pane { overflow: visible; border-left: 0; }\n}\n.dsh-diagram-workspace { display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; color:var(--ds-text-primary,#22232a); }\n.dsh-diagram-heading { display:flex; align-items:center; gap:8px; padding:10px var(--ygd-panel-content-gutter, 16px); border-bottom:1px solid var(--ds-line-1,#ddd); flex-shrink:0; }\n.dsh-diagram-status { flex: none; color: var(--ds-text-secondary, #6d6d6d); font-size: 12px; }\n.dsh-diagram-heading strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n/* Match the native Flow Button outline/sm contract without a provider dependency. */\n.dsh-diagram-heading > button,.dsh-bpmn-toolbar > button,.dsh-navigation-preview-actions button,.dsh-navigation-map-cover > header button,.dsh-navigation-connection-editor button {\n  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;\n  height:1.75rem; padding:5px .75rem; flex-shrink:0;\n  border:1px solid var(--ds-fill-6,#e8e8e8); border-radius:var(--button-radius,var(--ds-radius-4,8px));\n  background-color:hsl(var(--background,0 0% 100%)); color:var(--ds-text-primary,#272727);\n  font-family:inherit; font-size:12px; font-weight:400; line-height:18px;\n  white-space:nowrap; cursor:pointer; box-shadow:none; transition:background-color .15s,color .15s,border-color .15s;\n}\n.dsh-diagram-heading > button:hover:not(:disabled),.dsh-bpmn-toolbar > button:hover:not(:disabled),.dsh-navigation-preview-actions button:hover:not(:disabled),.dsh-navigation-map-cover > header button:hover:not(:disabled),.dsh-navigation-connection-editor button:hover:not(:disabled) {\n  background-color:var(--ds-bg-white-hover,#f7f7f7); color:hsl(var(--accent-foreground,0 0% 15.3%));\n}\n.dsh-diagram-heading > button:active:not(:disabled),.dsh-bpmn-toolbar > button:active:not(:disabled),.dsh-navigation-preview-actions button:active:not(:disabled),.dsh-navigation-map-cover > header button:active:not(:disabled),.dsh-navigation-connection-editor button:active:not(:disabled) {\n  background-color:hsl(var(--active,0 0% 94.5%));\n}\n.dsh-diagram-heading > button:focus-visible,.dsh-bpmn-toolbar > button:focus-visible,.dsh-navigation-preview-actions button:focus-visible,.dsh-navigation-map-cover > header button:focus-visible,.dsh-navigation-connection-editor button:focus-visible {\n  outline:2px solid var(--ds-brand-6,#7c5af6); outline-offset:2px;\n}\n.dsh-diagram-heading > button:disabled,.dsh-bpmn-toolbar > button:disabled,.dsh-navigation-preview-actions button:disabled,.dsh-navigation-map-cover > header button:disabled,.dsh-navigation-connection-editor button:disabled {\n  opacity:1; border-color:var(--ds-divider-default,#e8e8e8); color:var(--ds-text-disabled,#aaa);\n  background-color:hsl(var(--background,0 0% 100%)); cursor:not-allowed;\n}\n.dsh-diagram-details { flex:1; min-height:0; overflow:auto; background:var(--ds-bg-gary-default,var(--ds-fill-2,#f8f8fa)); }\n.dsh-diagram-stage { flex:1; min-height:180px; min-width:0; position:relative; }\n.dsh-diagram-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; padding:16px; box-sizing:border-box; overflow:auto; }\n.dsh-bpmn-surface { height:100%; min-height:0; display:flex; flex-direction:column; position:relative; }\n.dsh-bpmn-toolbar { display:flex; gap:6px; padding:6px 10px; flex-shrink:0; }\n.dsh-bpmn-canvas { flex:1; min-height:0; background:#fff; color:#20232b; }\n.dsh-bpmn-canvas[inert] { pointer-events:none; }\n.dsh-diagram-summary { margin:0; flex-shrink:0; border-top:1px solid var(--ds-line-1,#ddd); background:var(--ds-fill-2,#f8f8fa); }\n.dsh-diagram-summary>div { display:grid; grid-template-columns:5rem minmax(0,1fr); padding:7px 12px; gap:12px; font-size:13px; }\n.dsh-diagram-summary dt { color:var(--ds-text-secondary,#666); }\n.dsh-diagram-summary dd { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n.dsh-canvas-workspace, .dsh-canvas-surface { display:flex; flex-direction:column; height:100%; min-height:0; min-width:0; overflow:hidden; }\n.dsh-canvas-stage, .dsh-canvas-editor { flex:1; min-height:0; min-width:0; position:relative; }\n.dsh-canvas-heading { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; }\n.dsh-canvas-heading > .dsh-design-record-header-content { flex: 1; margin-right: 0; }\n.dsh-canvas-heading input { box-sizing:border-box; flex:1; min-width:100px; height:36px; padding:4px 12px; border:1px solid var(--ds-fill-5,#dfdfdf); border-radius:8px; color:inherit; background:#fff; font-family:inherit; font-style:inherit; font-weight:inherit; font-size:14px; line-height:20px; }\n.dsh-canvas-heading button { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:28px; padding:5px 12px; border:1px solid var(--ds-fill-6,#e8e8e8); border-radius:var(--button-radius,var(--ds-radius-4,4px)); color:var(--ds-text-primary,#272727); background:var(--ds-bg-white-default,#fff); font-family:inherit; font-style:inherit; font-size:12px; font-weight:400; line-height:18px; white-space:nowrap; cursor:pointer; }\n.dsh-canvas-heading button:hover:not(:disabled) { background:var(--ds-bg-white-hover,#f7f7f7); }\n.dsh-canvas-heading button.dsh-canvas-delete { border:0; background:transparent; }\n.dsh-canvas-heading button.dsh-canvas-delete:hover:not(:disabled) { background:var(--ds-other-overlay-1,rgba(0,0,0,.04)); }\n.dsh-canvas-heading input:disabled { opacity:.5; cursor:not-allowed; }\n.dsh-canvas-heading button:disabled { color:var(--ds-text-disabled,#aaa); cursor:not-allowed; }\n.dsh-canvas-workspace > p, .dsh-canvas-surface > p { flex:none; margin:0; padding:8px 12px; font-size:12px; background:var(--ds-bg-gary-default,#f3f4f6); }\n.dsh-navigation-preview { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }\n.dsh-navigation-preview > .dsh-live-preview { flex: 1; min-height: 0; }\n.dsh-design-panel .dsh-navigation-record-node [role=\"status\"] {\n  font-size: 12px;\n  color: var(--ds-text-secondary, #555562);\n}\n.dsh-design-panel .react-flow__node.selected .dsh-navigation-record-node {\n  outline: 2px solid var(--ds-brand-border-default, #7462d6);\n}\n.dsh-navigation-group-header { display: flex; align-items: center; gap: 6px; min-width: 0; }\n.dsh-navigation-group-header input { min-width: 0; width: 0; flex: 1; border: 0; padding: 2px 4px; background: transparent; color: inherit; font: inherit; font-weight: 600; }\n.dsh-navigation-group-header input:focus { outline: 1px solid var(--ds-brand-text-primary, #4169c1); background: var(--ds-static-white, #fff); }\n.dsh-navigation-group-header input:disabled { opacity: 1; }\n.dsh-navigation-group-header span { font-size: 11px; white-space: nowrap; color: var(--ds-text-tertiary, #707070); }\n.dsh-navigation-group-header button { border: 0; background: transparent; color: inherit; padding: 2px 5px; cursor: pointer; }\n.dsh-navigation-group-header button:disabled { opacity: .4; cursor: default; }\n\n/* Shared declarative tabs: intentionally separate from the host tab strip. */\n.dsh-component-tabs, .dsh-design-stack { min-width: 0; min-height: 0; display: flex; flex-direction: column; flex: 1; }\n.dsh-component-tabs { overflow: hidden; }\n.dsh-design-stack { gap: var(--ygd-panel-detail-section-gap, 16px); }\n.dsh-component-tabs-list { padding-inline: var(--ygd-panel-tabs-gutter, var(--ygd-panel-content-gutter, 16px)); display: flex; flex: none; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--ds-border-primary, #ddd); }\n.dsh-component-tabs-list > [role=\"tab\"] { border: 0; border-radius: 0; border-bottom: 2px solid transparent; padding: 9px 12px; color: var(--ds-text-secondary, #555); background: transparent; font: inherit; white-space: nowrap; cursor: pointer; }\n.dsh-component-tabs-list > [role=\"tab\"][aria-selected=\"true\"] { border-bottom-color: var(--ds-brand-text-primary, #4169c1); color: var(--ds-brand-text-primary, #4169c1); }\n.dsh-component-tabs-list > [role=\"tab\"]:focus-visible, .dsh-component-tabs-panel:focus-visible { outline: 2px solid var(--ds-brand-text-primary, #4169c1); outline-offset: -2px; }\n.dsh-component-tabs > .dsh-component-tabs-panel { overflow: auto; display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }\n.dsh-component-tabs > .dsh-component-tabs-panel[hidden] { display: none !important; }\n\n.dsh-record-board-overview { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 12px 16px 16px; background: #f7f7f7; }\n.dsh-record-board-overview > header select { height: 28px; border: 1px solid var(--ds-line-1, #ddd); border-radius: 6px; background: var(--ds-bg-white, #fff); color: inherit; padding: 0 8px; }\n\n\n.dsh-record-board-group-heading > svg { margin-left: auto; }\n.dsh-record-request-dialog { width: min(684px, calc(100vw - 48px)); box-sizing: border-box; border: 0; border-radius: 12px; padding: 24px; color: var(--ds-text-primary, #222); background: var(--ds-bg-white, #fff); box-shadow: 0 4px 14px #0000001a, 0 0 1px #0000004d; }\n.dsh-record-request-dialog::backdrop { background: #0006; }\n.dsh-record-request-dialog header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }\n.dsh-record-request-dialog h2 { margin: 0; font-size: 18px; font-weight: 600; }\n.dsh-record-request-dialog header button { border: 0; background: transparent; display: flex; color: inherit; }\n.dsh-record-request-dialog label { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; font-size: 14px; }\n.dsh-record-request-dialog em { color: var(--ds-error-6, #dc2626); font-style: normal; }\n.dsh-record-request-dialog :is(input, textarea, select) { font: inherit; border: 1px solid var(--ds-fill-5, #ddd); border-radius: 8px; padding: 8px 12px; background: inherit; color: inherit; }\n.dsh-record-request-dialog textarea { resize: vertical; }\n.dsh-record-request-dialog footer { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }\n.dsh-record-request-dialog footer button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ds-line-1, #ddd); background: transparent; color: inherit; border-radius: 8px; min-height: 36px; padding: 0 16px; font-size: 14px; }\n.dsh-record-request-dialog footer button[type=submit] { background: var(--ds-brand-bg-default, #6155f5); border-color: transparent; color: white; }\n.dsh-record-request-dialog button:disabled { opacity: .5; cursor: not-allowed; }\n\n.dsh-board-map-node { position: relative; box-sizing: border-box; width: 200px; border: 1px solid var(--ds-line-1, #ddd); border-radius: 12px; background: white; padding: 10px 16px; color: var(--ds-text-primary, #222); font-size: 14px; line-height: 1.25; font-weight: 600; cursor: pointer; }\n.dsh-board-map-node > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.dsh-board-map-node.is-branch { font-size: 16px; }\n.dsh-board-map-node.is-branch > span { white-space: normal; overflow-wrap: anywhere; }\n.dsh-board-map-node.is-rejected { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }\n.dsh-board-map-node:hover { border-color: var(--ds-brand-5, #8b5cf6); box-shadow: var(--ds-shadow-2-center); }\n.dsh-board-map-node .react-flow__handle { opacity: 0; }\n.dsh-board-map-tooltip { display: none; position: absolute; top: 100%; left: 0; width: 276px; padding: 10px 12px; border-radius: 12px; background: white; box-shadow: var(--ds-shadow-2-center, 0 4px 16px #0002); font-size: 12px; font-weight: 400; color: var(--ds-text-primary, #222); z-index: 10; }\n.dsh-board-map-tooltip strong { font-size: 14px; font-weight: 500; }\n.dsh-board-map-tooltip p { margin: 6px 0 12px; color: var(--ds-text-tertiary, #777); }\n.dsh-board-map-node:hover .dsh-board-map-tooltip { display: block; }\n.dsh-record-board-map .react-flow__node:has(.dsh-board-map-node:hover) { z-index: 100 !important; }\n\n.dsh-compact-record-details { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }\n.dsh-compact-record-details > section > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }\n.dsh-compact-record-details h5 { font-size: 12px; font-weight: 500; margin: 0 0 4px; }\n.dsh-compact-record-details .dsh-design-field { margin: 0; gap: 0; }\n.dsh-compact-record-details .dsh-design-field > .dsh-design-field-label { display: none; }\n.dsh-compact-record-details :is(input,textarea) { min-height: 28px; box-sizing: border-box; border: 1px solid transparent; border-radius: 6px; background: transparent; padding: 4px 8px; font-size: 12px; line-height: 20px; color: var(--ds-text-secondary, #555); }\n.dsh-compact-record-details :is(input,textarea):is(:hover,:focus) { border-color: var(--ds-line-1, #ddd); }\n.dsh-record-board .dsh-compact-record-details :is(input,textarea) { width: 100%; border-color: var(--ds-fill-5, #dfdfdf); border-radius: 8px; background: var(--ds-bg-white, #fff); padding: 8px 12px; }\n/* Detail groups remain full-width; nested tables own their readable columns. */\n:is(.dsh-record-board-editor, .dsh-board-detail-definition) {\n  /* Semantic tokens do not inherit the hosts' conflicting ds-space indices. */\n  --ygd-panel-detail-section-gap: 16px;\n  --ygd-panel-detail-control-gap: 8px;\n}\n.dsh-record-board-editor > summary, .dsh-board-detail-definition > summary { font-size: 14px; line-height: 20px; font-weight: 400; }\n/* One section rhythm, including the disclosure-to-first-section boundary.\n   Titles, inputs, list rows and their Add action stay inside that section. */\n.dsh-record-board-editor > :is(section, .dsh-compact-record-details) { margin-top: var(--ygd-panel-detail-section-gap, 16px); }\n.dsh-record-board-editor > section > h5 { margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: var(--ygd-panel-heading-weight, 600); }\n:is(.dsh-record-board-editor, .dsh-board-detail-definition) .dsh-compact-record-details { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--ygd-panel-detail-section-gap, 16px); padding-top: 0; font-size: 12px; }\n:is(.dsh-record-board-editor, .dsh-board-detail-definition) .dsh-compact-record-details > section { min-width: 0; }\n:is(.dsh-record-board-editor, .dsh-board-detail-definition) .dsh-compact-record-details > section:is([data-detail-control=\"source_reference_map\"], :has(.dsh-record-map-table)) { grid-column: 1 / -1; }\n:is(.dsh-record-board-editor, .dsh-board-detail-definition) .dsh-compact-record-details > section > header { margin-bottom: var(--ygd-panel-detail-control-gap, 8px); }\n:is(.dsh-record-board-editor, .dsh-board-detail-definition) .dsh-compact-record-details > section > header > h5 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; }\n.dsh-design-panel :is(.dsh-record-board-editor, .dsh-board-detail-definition) .dsh-compact-record-details :is(input, textarea, select, .dsh-design-field-value) { font: inherit; font-size: 12px; line-height: 20px; color: var(--ds-text-secondary, #555); }\n.dsh-design-panel :is(.dsh-record-board-editor, .dsh-board-detail-definition) .dsh-compact-record-details textarea { min-height: 36px; height: auto; padding: 7px 12px; field-sizing: content; resize: vertical; }\n.dsh-compact-record-details button { min-height: 24px; padding: 0 4px; font-size: 12px; color: var(--ds-text-tertiary, #777); background: transparent; border: 0; border-radius: 4px; }\n.dsh-compact-detail-add { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; color: var(--ds-text-tertiary, #777); }\n.dsh-record-map.is-compact > section { position: relative; border: 0; padding: 0 32px 0 20px; margin-bottom: 4px; background: transparent; }\n.dsh-record-map.is-compact > section > header { min-height: 0; margin: 0; }\n.dsh-record-map.is-compact > section > header > strong { position: absolute; left: 0; top: 4px; line-height: 20px; color: var(--ds-text-tertiary, #777); font-weight: 400; }\n.dsh-record-map.is-compact .dsh-record-map-actions { position: absolute; right: 0; top: 0; }\n.dsh-record-map.is-compact > section > label { display: flex; flex-direction: column; gap: 0; margin: 0; font-size: 12px; }\n.dsh-record-map.is-compact > section > label:only-of-type > span:first-child { display: none; }\n/* Reserve the real action width; ordered rows can have more than a delete button. */\n.dsh-design-panel :is(.dsh-record-board-editor, .dsh-board-detail-definition) .dsh-record-map.is-compact > section:not(:has(> header > .dsh-record-map-heading)) { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 6px; padding: 0; margin: 0 0 var(--ygd-panel-detail-control-gap, 8px); }\n.dsh-design-panel :is(.dsh-record-board-editor, .dsh-board-detail-definition) .dsh-record-map.is-compact > section:not(:has(> header > .dsh-record-map-heading)) > header { display: contents; }\n.dsh-design-panel :is(.dsh-record-board-editor, .dsh-board-detail-definition) .dsh-record-map.is-compact > section:not(:has(> header > .dsh-record-map-heading)) > header > strong { position: static; grid-column: 1; grid-row: 1; align-self: start; margin-top: 8px; font-size: 12px; line-height: 20px; text-align: center; }\n.dsh-design-panel :is(.dsh-record-board-editor, .dsh-board-detail-definition) .dsh-record-map.is-compact > section:not(:has(> header > .dsh-record-map-heading)) > header > .dsh-record-map-actions { position: static; grid-column: 3; grid-row: 1; align-self: start; margin-top: 4px; }\n.dsh-design-panel :is(.dsh-record-board-editor, .dsh-board-detail-definition) .dsh-record-map.is-compact > section:not(:has(> header > .dsh-record-map-heading)) > :is(label, .dsh-design-field) { grid-column: 2; min-width: 0; gap: 4px; }\n.dsh-design-panel :is(.dsh-record-board-editor, .dsh-board-detail-definition) .dsh-record-map.is-compact > section > label > span:first-child { font-size: 12px; line-height: 20px; font-weight: 400; color: var(--ds-text-secondary, #555); }\n.dsh-design-panel :is(.dsh-record-board-editor, .dsh-board-detail-definition) .dsh-record-map.is-compact > section > label > span:last-child { font-size: 12px; line-height: 20px; color: var(--ds-text-secondary, #555); white-space: pre-wrap; overflow-wrap: anywhere; }\n.dsh-design-panel :is(.dsh-record-board-editor, .dsh-board-detail-definition) .dsh-record-map.is-compact > section:not(:has(> header > .dsh-record-map-heading)):not(:has(> label > :is(input, textarea, select))) > header > strong { margin-top: 0; }\n/* Match the input inset: the list's 24px number slot + 6px gap, or the table's 48px number column. */\n.dsh-design-panel :is(.dsh-record-board-editor, .dsh-board-detail-definition) .dsh-record-map.is-compact:not(:has(> .dsh-record-map-table-scroll, > section > header > .dsh-record-map-heading)) > .dsh-record-map-add { margin-inline-start: 30px; padding-inline: 0; }\n.dsh-design-panel .dsh-record-map.is-compact:has(> .dsh-record-map-table-scroll) > .dsh-record-map-add { margin-inline-start: 48px; padding-inline: 0; }\n.dsh-record-map-table-scroll { max-width: 100%; overflow-x: auto; }\n.dsh-record-map-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }\n.dsh-record-map-table :is(th, td) { text-align: left; vertical-align: top; padding: 0 12px var(--ygd-panel-detail-control-gap, 8px) 0; }\n.dsh-record-map-table thead th { font-size: 13px; line-height: 20px; font-weight: 400; color: var(--ds-text-secondary, #555); }\n.dsh-record-map-table tbody th { padding-top: 8px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ds-text-tertiary, #777); }\n.dsh-record-map-table tbody th > span { display: block; }\n.dsh-record-map-table tbody tr:not(:has(:is(input, textarea, select))) > th { padding-top: 0; }\n.dsh-record-map-table tbody td > span { display: block; font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }\n.dsh-design-panel :is(.dsh-record-board-editor, .dsh-board-detail-definition) .dsh-record-map-table :is(th, td > span) { font-size: 12px; color: var(--ds-text-secondary, #555); }\n.dsh-design-panel .dsh-record-map-table tr > th:first-child { text-align: center; padding-inline: 0; }\n/* Inline-control descenders must not add an unowned gap below table inputs. */\n.dsh-design-panel .dsh-record-map-table td > :is(input, textarea, select) { display: block; }\n.dsh-design-panel .dsh-record-map-table td > textarea { min-height: 36px; height: auto; field-sizing: content; resize: vertical; }\n.dsh-record-map.is-compact .dsh-record-map-table .dsh-record-map-actions { display: flex; position: static; margin-top: 4px; }\n.dsh-record-map-table td:last-child { padding-right: 0; }\n\n.dsh-record-workspace-canvas { position: relative; display: flex; flex: 1; min-width: 0; min-height: 0; background: #f7f7f7; }\n.dsh-record-workspace-canvas > .dsh-relation-graph { flex: 1; min-width: 0; }\n.dsh-record-workspace-open-detail { position: absolute; right: 16px; bottom: 16px; z-index: 3; border: 1px solid var(--ds-line-1, #ddd); border-radius: 6px; padding: 6px 12px; background: white; color: var(--ds-text-primary, #222); }\n.dsh-record-workspace-body.is-detail-cover { display: flex; flex: 1; min-height: 0; }\n.dsh-board-detail-workspace { min-height: 360px; margin-top: 12px; border-top: 1px solid var(--ds-divider-default, #e3e6ec); height: min(640px, 75vh); border: 1px solid var(--ds-line-1, #ddd); border-radius: 8px; overflow: hidden; }\n\n.dsh-diagram-tag { flex-shrink: 0; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; background: #f9fafb; color: #4b5563; }\n.dsh-diagram-tag.is-danger { background: #fef2f2; color: #dc2626; }\n.dsh-diagram-tag.is-warning { background: #fffbeb; color: #b45309; }\n.dsh-diagram-tag.is-success { background: #ecfdf5; color: #047857; }\n.dsh-record-facts { padding: 16px; display: flex; flex-direction: column; gap: 16px; }\n.dsh-record-facts-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(260px,100%),1fr)); gap: 16px; }\n.dsh-record-facts-row > section { min-width: 0; border: 1px solid #ecebee; border-radius: 8px; padding: 16px; background: white; font-size: 14px; line-height: 22px; color: var(--ds-text-primary, #10082bd9); overflow-wrap: anywhere; }\n.dsh-record-facts h5 { font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin: 0 0 10px; }\n.dsh-record-facts p { margin: 0; }\n.dsh-record-facts ul { display: flex; flex-direction: column; gap: 6px; padding-left: 16px; margin: 0; }\n.dsh-record-facts li::marker { color: var(--ds-brand-bg-default, #663ae8); }\n.dsh-record-facts-chips { display: flex; gap: 8px; flex-wrap: wrap; }\n.dsh-record-facts-chips span { background: var(--ds-fill-3, #f3f0fa); border-radius: 4px; padding: 2px 8px; font-size: 12px; }\n.dsh-record-facts-entries { display: flex; flex-direction: column; gap: 8px; }\n.dsh-record-facts-entries dl { margin: 0; border: 1px solid #ecebee; background: #fafafc; padding: 12px; border-radius: 6px; }\n.dsh-record-facts-entries dl > div { display: flex; gap: 8px; }\n.dsh-record-facts-entries dt { color: var(--ds-text-tertiary, #999); font-size: 12px; flex-shrink: 0; }\n.dsh-record-facts-entries dd { margin: 0; }\n\n.dsh-record-board-priority-select { position: relative; display: inline-flex; align-items: center; }\n.dsh-record-board-priority-select > i { position: absolute; left: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--ds-icon-outline-muted, #aaa); pointer-events: none; }\n.dsh-record-board-priority-select[data-rank=\"0\"] > i { background: var(--ds-brand-bg-default, #6155f5); }\n.dsh-record-board-priority-select[data-rank=\"1\"] > i { background: var(--ds-brand-light-border, #c4b5fd); }\n.dsh-design-panel .dsh-record-board-priority-select > button.dsh-panel-select-trigger { height: 28px; min-width: 80px; padding: 0 8px 0 24px; border-radius: 6px; font-size: 12px; }\n.dsh-design-panel :is(.dsh-record-board-toolbar, .dsh-record-board-overview > header) button.dsh-panel-select-trigger { height: 28px; padding: 0 8px; border-radius: 6px; font-size: 12px; }\n\n.dsh-record-workspace-body.is-detail-cover > .dsh-record-inspector { flex: 1; width: auto; border: 0; }\n/* Integrated by the shared stylesheet owner; not an independent style authority. */\n.dsh-navigation-artifact .dsh-panel-workspace-tree { position: relative; }\n.dsh-navigation-detail-header { flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid var(--ds-divider-default, #ddd); }\n.dsh-navigation-artifact .dsh-navigation-preview { height: 100%; min-height: 0; }\n.dsh-navigation-map-cover > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ds-divider-default, #ddd); background: var(--ds-bg-white, #fff); }\n/* Artifact navigation shares the native flat list and single preview toolbar. */\n.dsh-navigation-artifact .dsh-panel-workspace-tree-branch::before,\n.dsh-navigation-artifact .dsh-panel-workspace-tree-branch::after { display: none; }\n.dsh-navigation-artifact .dsh-panel-workspace-tree-branch { padding-left: 0; }\n.dsh-navigation-entry-badge { flex: none; border-radius: 4px; padding: 2px 4px; font-size: 10px; line-height: 1; background: var(--ds-brand-light-bg-default, #f3edff); color: var(--ds-brand-text-primary, #7c3aed); }\n.dsh-navigation-preview > header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; flex-shrink: 0; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--ds-divider-default, #ddd); background: var(--ds-bg-white, #fff); }\n.dsh-navigation-preview-title, .dsh-navigation-preview-actions, .dsh-navigation-binding-controls { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.dsh-navigation-preview-title strong { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }\n.dsh-navigation-preview-actions { flex-wrap: wrap; }\n.dsh-navigation-binding-controls select { max-width: 224px; min-width: 80px; height: 32px; }\n.dsh-navigation-binding-controls button { display: inline-flex; align-items: center; gap: 6px; }\n.dsh-navigation-binding-hint { order: 1; padding: 8px 16px; font-size: 13px; background: var(--ds-brand-light-bg-default, #f3edff); color: var(--ds-brand-text-primary, #7c3aed); }\n.dsh-navigation-map-cover { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }\n.dsh-navigation-map-spec { flex: none; max-height: 35%; overflow: auto; border-bottom: 1px solid var(--ds-divider-default, #ddd); }\n.dsh-navigation-map-stage { flex: 1; min-height: 0; position: relative; }\n.dsh-navigation-connection-editor > button { float: right; }\n\n.dsh-navigation-visual-check { flex: none; padding: 8px 16px; font-size: 12px; border-bottom: 1px solid; }\n.dsh-navigation-visual-check.is-pass { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }\n.dsh-navigation-visual-check.is-fail { background: #fef2f2; color: #dc2626; border-color: #fecaca; }\n.dsh-navigation-visual-check ul { margin: 4px 0 0; padding-left: 20px; }\n\n.dsh-design-panel .dsh-navigation-record-node {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column; gap: 0; width: 320px; padding: 0;\n  border: 1px solid var(--ds-border-default, #d8d8df); border-radius: 12px;\n  background: var(--ds-fill-0, #fff);\n  color: var(--ds-text-primary, #24242b);\n  overflow-wrap: anywhere; min-height: 228px; overflow: hidden; box-shadow: 0 1px 2px #0001; }\n.dsh-design-panel .dsh-navigation-thumbnail { height: 172px; width: 318px;\n  overflow: hidden;\n  pointer-events: none;\n  background: var(--ds-fill-1, #f6f6f8); border-bottom: 1px solid var(--ds-divider-default, #ddd); }\n.dsh-design-panel .dsh-navigation-thumbnail iframe {\n  width: 1280px;\n  height: 768px;\n  border: 0; transform: scale(.2484375);\n  transform-origin: top left; }\n.dsh-navigation-record-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; }\n.dsh-navigation-record-info > div { min-width: 0; }\n.dsh-navigation-record-info strong { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.dsh-navigation-record-info strong svg { flex: none; color: var(--ds-brand-text-primary); }\n.dsh-navigation-record-caption { display: block; margin-top: 2px; font-size: 12px; color: var(--ds-text-tertiary); }\n.dsh-navigation-connection-editor { position: absolute; right: auto; top: auto; z-index: 5; width: min(480px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; padding: 12px; border: 1px solid var(--ds-divider-default, #ddd); border-radius: 12px; background: var(--ds-bg-white, #fff); box-shadow: var(--ds-shadow-1-center, 0 2px 8px #0002); bottom: 16px; left: 50%; transform: translateX(-50%); }\n.dsh-navigation-connection-editor header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }\n.dsh-navigation-connection-editor label { display: block; margin-top: 12px; font-size: 14px; }\n.dsh-navigation-connection-editor input { display: block; width: 100%; margin-top: 6px; }\n\n.dsh-navigation-preview-actions button.dsh-navigation-entry, .dsh-navigation-preview-actions button[data-preview-refresh] { border-color: transparent; background: transparent; }\n.dsh-navigation-binding-controls select, .dsh-navigation-connection-editor input { border: 1px solid var(--ds-fill-5, #dfdfdf); border-radius: 8px; background: var(--ds-bg-white, #fff); color: inherit; font: inherit; padding: 4px 8px; }\n.dsh-navigation-map-spec summary { padding: 10px 16px; font-size: 12px; }\n\n.dsh-record-board-open-details { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; border-top: 1px solid var(--ds-divider-default, #ddd); margin-top: 12px; padding: 10px 0 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }\n.dsh-board-detail-cover { display: flex; flex: 1; flex-direction: column; height: 100%; min-width: 0; min-height: 0; background: var(--ds-bg-white, #fff); }\n.dsh-board-detail-cover > header { display: flex; align-items: baseline; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--ds-divider-default, #ddd); }\n.dsh-board-detail-cover > header strong { font-size: 14px; }\n.dsh-board-detail-cover > header span { font-size: 12px; color: var(--ds-text-secondary); }\n.dsh-board-detail-definition { flex: none; max-height: 40%; overflow: auto; border-bottom: 1px solid var(--ds-divider-default, #ddd); }\n.dsh-board-detail-definition > summary { padding: 10px 16px; cursor: pointer; font-size: 12px; }\n.dsh-board-detail-definition > .dsh-compact-record-details { padding: 0 16px 12px; }\n.dsh-board-detail-cover > .dsh-board-detail-workspace { flex: 1; height: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; }\n.dsh-board-detail-cover .dsh-record-workspace-frame { height: 100%; }\n.dsh-board-detail-cover .dsh-panel-workspace-main { overflow: hidden; }\n\n/* A diagram and its context share one workspace, never parallel tab authorities. */\n.dsh-diagram-body { display:flex; flex:1; min-width:0; min-height:0; }\n.dsh-diagram-body.has-inspector { display:grid; grid-template-columns:minmax(260px,1fr) minmax(300px,40%); }\n.dsh-diagram-inspector { min-width:0; min-height:0; overflow:auto; border-left:1px solid var(--ds-line-1,#e8e8e8); padding:var(--ds-space-4,16px); background:var(--ds-bg-white,#fff); }\n.dsh-diagram-inspector-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }\n.dsh-diagram-inspector-heading h2 { font-size:14px; font-weight:600; margin:0; }\n.dsh-diagram-inspector-heading button { color:var(--ds-brand-6,#6d5dfc); font:inherit; font-size:12px; border:0; background:transparent; cursor:pointer; }\n.dsh-diagram-context-group { margin-top:16px; padding-top:12px; border-top:1px solid var(--ds-line-1,#e8e8e8); }\n.dsh-diagram-context-group > summary { font-size:14px; font-weight:600; cursor:pointer; padding:4px 0 10px; }\n.dsh-diagram-context-group > summary span { color:var(--ds-text-secondary,#666); font-weight:400; margin-left:6px; }\n.dsh-diagram-context-record { margin:8px 0; border:1px solid var(--ds-line-1,#e8e8e8); border-radius:var(--ds-radius-4,8px); }\n.dsh-diagram-context-record > summary { padding:12px; font-size:13px; font-weight:500; cursor:pointer; }\n.dsh-diagram-context-record > div { padding:0 12px; }\n.dsh-diagram-context-hint { font-size:12px; line-height:1.6; color:var(--ds-text-secondary,#666); margin:8px 12px; }\n.dsh-diagram-selected .djs-visual > :first-child { stroke:var(--ds-brand-6,#6d5dfc) !important; stroke-width:3px !important; }\n@container (max-width: 800px) {\n .dsh-diagram-body.has-inspector { display:flex; flex-direction:column; overflow:auto; }\n .dsh-diagram-body.has-inspector > .dsh-diagram-stage { flex:none; height:50vh; min-height:300px; }\n .dsh-diagram-inspector { overflow:visible; border-left:0; border-top:1px solid var(--ds-line-1,#e8e8e8); }\n}\n\n.dsh-diagram-bound-fields > .dsh-design-record-form > .dsh-design-record > .dsh-design-record-title { display:none; }\n\n/* Lifecycle projections use the shared table and field controls. */\n.dsh-design-panel .dsh-design-studio { padding: 16px; min-width: 0; }\n.dsh-design-panel .dsh-design-studio > header { margin-bottom: 16px; }\n.dsh-design-panel .dsh-design-studio-matrix .dsh-design-studio-action { min-width: 160px; font-weight: 500; line-height: 1.6; }\n.dsh-design-panel .dsh-design-studio-matrix .dsh-design-field-input { min-width: 160px; width: 100%; }\n/* Dynamic sample tables share the record workspace's content width and tokens. */\n.dsh-design-panel .dsh-data-table { min-width: 0; width: 100%; color: var(--ds-text-primary,#272727); font: 13px/1.5 var(--font-main,system-ui,sans-serif); }\n.dsh-design-panel .dsh-data-table button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 4px 8px; border: 1px solid var(--ds-line-2,#ddd); border-radius: 6px; background: var(--ds-bg-white,#fff); color: inherit; font: inherit; cursor: pointer; }\n.dsh-design-panel .dsh-data-table button:disabled { opacity: .5; cursor: default; }\n.dsh-design-panel .dsh-data-table button:not(:disabled):hover { background: var(--ds-fill-1,#f6f6f6); }\n.dsh-design-panel .dsh-data-table :is(button,input,select,textarea):focus-visible { outline: 2px solid var(--ds-brand-6,#7c5af6); outline-offset: -2px; }\n.dsh-design-panel .dsh-data-table-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }\n.dsh-design-panel .dsh-data-table-views { display: inline-flex; padding: 2px; border-radius: 6px; background: var(--ds-fill-1,#f6f6f6); }\n.dsh-design-panel .dsh-data-table-views button { border: 0; background: transparent; }\n.dsh-design-panel .dsh-data-table-views button[aria-pressed=true] { background: var(--ds-bg-white,#fff); color: var(--ds-brand-6,#7c5af6); box-shadow: 0 1px 3px #00000012; }\n.dsh-design-panel .dsh-data-table-count { color: var(--ds-text-secondary,#666); font-size: 12px; }\n.dsh-design-panel .dsh-data-table-actions { display: flex; gap: 6px; margin-left: auto; }\n.dsh-design-panel .dsh-data-table-scroll { overflow: auto; max-height: 520px; max-width: 100%; border: 1px solid var(--ds-line-2,#ddd); border-radius: 6px; overscroll-behavior: contain; }\n.dsh-design-panel .dsh-data-table table { border-collapse: separate; border-spacing: 0; width: 100%; margin: 0; text-align: left; }\n.dsh-design-panel .dsh-data-table :is(th,td) { padding: 0; border: 0; border-right: 1px solid var(--ds-line-1,#e8e8e8); border-bottom: 1px solid var(--ds-line-1,#e8e8e8); min-width: 140px; height: 36px; text-align: start; font-weight: 400; }\n.dsh-design-panel .dsh-data-table tr > :last-child { border-right: 0; }\n.dsh-design-panel .dsh-data-table tbody tr:last-child > * { border-bottom: 0; }\n.dsh-design-panel .dsh-data-table th { background: var(--ds-fill-1,#f6f6f6); font-weight: 500; }\n.dsh-design-panel .dsh-data-table thead th { position: sticky; top: 0; z-index: 1; }\n.dsh-design-panel .dsh-data-table tbody th, .dsh-design-panel .dsh-data-table-index-heading { padding: 6px 10px; }\n.dsh-design-panel .dsh-data-table .dsh-data-table-column { display: flex; width: 100%; justify-content: flex-start; border: 0; border-radius: 0; padding: 7px 10px; background: transparent; white-space: nowrap; }\n.dsh-design-panel .dsh-data-table .dsh-data-table-column:disabled { opacity: 1; }\n.dsh-design-panel .dsh-data-table-column > svg { margin-left: auto; color: var(--ds-text-secondary,#666); }\n.dsh-design-panel .dsh-data-table-type, .dsh-design-panel .dsh-data-table-column small { font-size: 11px; color: var(--ds-text-secondary,#666); }\n.dsh-design-panel .dsh-data-table td > :is(input,select) { display: block; box-sizing: border-box; min-width: 140px; width: 100%; min-height: 36px; padding: 7px 10px; margin: 0; border: 0; border-radius: 0; background: var(--ds-bg-white,#fff); color: inherit; font: inherit; }\n.dsh-design-panel .dsh-data-table td > :is(input,select):focus { outline: 2px solid var(--ds-brand-6,#7c5af6); outline-offset: -2px; }\n.dsh-design-panel .dsh-data-table td > [aria-invalid=true] { box-shadow: inset 0 -2px var(--ds-danger-6,#d03050); background: var(--ds-danger-1,#fff2f2); }\n.dsh-design-panel .dsh-data-table td > span { display: block; padding: 7px 10px; }\n.dsh-design-panel .dsh-data-table .is-missing, .dsh-design-panel .dsh-data-table input::placeholder { color: var(--ds-text-tertiary,#999); }\n.dsh-design-panel .dsh-data-table .dsh-data-table-row-number { min-width: 38px; width: 38px; padding: 6px; text-align: center; font-size: 12px; color: var(--ds-text-secondary,#666); }\n.dsh-design-panel .dsh-data-table .dsh-data-table-row-action { min-width: 36px; width: 36px; text-align: center; }\n.dsh-design-panel .dsh-data-table-row-action button { padding: 4px; min-height: 26px; border: 0; background: transparent; }\n.dsh-design-panel .dsh-data-table-row-action button:hover { color: var(--ds-danger-6,#d03050); }\n.dsh-design-panel .dsh-data-table .dsh-data-table-add-row { margin-top: 8px; color: var(--ds-text-secondary,#666); border: 0; }\n.dsh-design-panel .dsh-data-table-help { margin: 8px 0 0; color: var(--ds-text-secondary,#666); font-size: 12px; }\n.dsh-design-panel .dsh-data-table-notice { margin: 8px 0; color: var(--ds-text-secondary,#666); }\n.dsh-design-panel .dsh-data-table-error { margin: 8px 0; color: var(--ds-danger-6,#d03050); overflow-wrap: anywhere; }\n.dsh-design-panel .dsh-data-table-empty { padding: 24px 16px; border: 1px dashed var(--ds-line-2,#ddd); border-radius: 6px; text-align: center; }\n.dsh-design-panel .dsh-data-table-empty p { color: var(--ds-text-secondary,#666); margin: 8px 0 12px; }\n.dsh-design-panel .dsh-data-table-overlay { position: fixed; z-index: 100; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: #0004; }\n.dsh-design-panel .dsh-data-table-field-dialog { box-sizing: border-box; width: 420px; max-width: 100%; max-height: 90vh; overflow: auto; padding: 16px; border: 1px solid var(--ds-line-2,#ddd); border-radius: 10px; background: var(--ds-bg-white,#fff); box-shadow: 0 12px 32px #0002; }\n.dsh-design-panel .dsh-data-table-dialog-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }\n.dsh-design-panel .dsh-data-table-dialog-title > button { border: 0; padding: 4px; }\n.dsh-design-panel .dsh-data-table-field-dialog label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 12px; }\n.dsh-design-panel .dsh-data-table-field-dialog :is(input,select,textarea) { box-sizing: border-box; width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--ds-line-2,#ddd); border-radius: 6px; background: var(--ds-bg-white,#fff); color: inherit; font: 13px/1.5 var(--font-main,system-ui,sans-serif); }\n.dsh-design-panel .dsh-data-table-field-dialog textarea { resize: vertical; }\n.dsh-design-panel .dsh-data-table-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n.dsh-design-panel .dsh-data-table-field-order { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }\n.dsh-design-panel .dsh-data-table button.is-danger { color: var(--ds-danger-6,#d03050); margin-left: auto; }\n.dsh-design-panel .dsh-data-table-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ds-line-1,#e8e8e8); }\n.dsh-design-panel .dsh-data-table button.is-primary { background: var(--ds-brand-6,#7c5af6); color: var(--ds-bg-white,#fff); border-color: transparent; }\n.dsh-design-panel .dsh-data-table button.is-primary:hover { background: var(--ds-brand-7,#6849d8); }\n\n/* Mathematical reading: explanation first, formula beside its business meaning. */\n.dsh-design-panel .dsh-math-document.has-form-header { padding: 0; min-width: 0; color: var(--ds-text-primary, #272727); font-size: var(--ygd-panel-text-size, 14px); line-height: 1.7; }\n.dsh-design-panel .dsh-math-document h3, .dsh-design-panel .dsh-math-document h4 { margin: 0; font-size: 14px; font-weight: 600; }\n.dsh-design-panel .dsh-math-document p { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }\n.dsh-design-panel .dsh-math-entry { padding: 16px 0; border-bottom: 1px solid var(--ds-line-2, #e9e9ed); min-width: 0; }\n.dsh-design-panel .dsh-math-entry:last-of-type { border-bottom: 0; }\n.dsh-design-panel .dsh-math-entry.is-statement { margin-top: 12px; padding: 12px; border: 1px solid var(--ds-line-1, #e8e8e8); border-radius: var(--ds-radius-4, 8px); background: var(--ds-bg-white, #fff); }\n.dsh-design-panel .dsh-math-entry.is-statement .dsh-panel-prose-reading { padding: 0; border-radius: 0; background: transparent; }\n.dsh-design-panel .dsh-math-entry-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }\n.dsh-design-panel .dsh-math-entry-heading h4 { flex: 1; min-width: 0; overflow-wrap: anywhere; }\n.dsh-design-panel .dsh-math-card-toggle { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 0; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; line-height: inherit; text-align: start; cursor: pointer; }\n.dsh-design-panel .dsh-math-card-toggle > span:first-child { min-width: 0; overflow-wrap: anywhere; }\n.dsh-design-panel .dsh-math-edit, .dsh-design-panel .dsh-math-add, .dsh-design-panel .dsh-math-remove { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--ds-text-secondary, #6d6d6d); padding: 4px 0; font: inherit; font-size: 12px; cursor: pointer; flex-shrink: 0; }\n.dsh-design-panel .dsh-math-edit:hover, .dsh-design-panel .dsh-math-add:hover { color: var(--ds-brand-bg-default, #663ae8); }\n.dsh-design-panel .dsh-math-expression { padding: 12px 16px; margin-top: 8px; background: var(--ds-fill-2, #f7f7f7); border-radius: var(--ds-radius-4, 8px); min-width: 0; }\n.dsh-design-panel .dsh-math-formula { display: block; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 4px 0; font-size: 18px; }\n.dsh-design-panel .dsh-math-formula.is-inline { display: inline-block; vertical-align: middle; padding: 0; font-size: 17px; }\n.dsh-design-panel .dsh-math-formula math { margin: 0; text-align: left; }\n.dsh-design-panel .dsh-math-formula math[display=block] { display: block math; width: max-content; min-width: 0; }\n.dsh-design-panel .dsh-math-error { font-size: 12px; color: var(--ds-error-text-primary, #b02d2f); }\n.dsh-design-panel .dsh-math-error code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 4px; }\n.dsh-design-panel .dsh-math-error.is-inline { display: inline; }\n.dsh-design-panel .dsh-math-error.is-inline code { display: inline; margin: 0 4px; }\n.dsh-design-panel .dsh-math-empty, .dsh-design-panel .dsh-math-edit-hint { color: var(--ds-text-tertiary, #6d6d6d); font-size: 12px; }\n.dsh-design-panel .dsh-math-source { margin-top: 8px; color: var(--ds-text-tertiary, #6d6d6d); font-size: 12px; }\n.dsh-design-panel .dsh-math-source summary, .dsh-design-panel .dsh-math-disclosure > summary { cursor: pointer; width: fit-content; display: flex; align-items: center; gap: 8px; list-style: none; }\n.dsh-design-panel .dsh-math-source summary::-webkit-details-marker, .dsh-design-panel .dsh-math-disclosure > summary::-webkit-details-marker { display: none; }\n.dsh-design-panel .dsh-math-source code { display: block; overflow-wrap: anywhere; white-space: pre-wrap; margin-top: 8px; }\n.dsh-design-panel .is-statement .dsh-math-source { padding-top: 8px; border-top: 1px solid var(--ds-line-1, #e8e8e8); }\n.dsh-design-panel .dsh-math-disclosure > summary { font-weight: 500; }\n.dsh-design-panel .dsh-math-disclosure[open] > :not(summary) { margin-top: 16px; }\n.dsh-design-panel .dsh-math-editor { display: grid; gap: 8px; margin-top: 8px; }\n.dsh-design-panel .dsh-math-editor label { display: grid; gap: 8px; min-width: 0; }\n.dsh-design-panel .dsh-math-editor label > span { font-size: 12px; color: var(--ds-text-secondary, #6d6d6d); }\n.dsh-design-panel .dsh-math-editor textarea:not(.dsh-panel-prose-input) { width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--ds-line-3, #ddd); border-radius: var(--ds-radius-4, 8px); background: var(--ds-bg-white-default, #fff); color: inherit; font: inherit; field-sizing: content; resize: vertical; min-height: 36px; }\n.dsh-design-panel .dsh-math-editor textarea[data-math-kind=formula] { font-family: ui-monospace, monospace; }\n.dsh-design-panel .dsh-math-document :is(button, summary, textarea, .dsh-math-formula):focus-visible { outline: 2px solid var(--ygd-panel-control-focus, #663ae8); outline-offset: 3px; }\n.dsh-design-panel .dsh-math-details { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 8px 0 0; font-size: 12px; }\n.dsh-design-panel .dsh-math-details > div { display: flex; gap: 8px; }\n.dsh-design-panel .dsh-math-details dt { color: var(--ds-text-tertiary, #6d6d6d); }\n.dsh-design-panel .dsh-math-details dd { margin: 0; overflow-wrap: anywhere; }\n.dsh-design-panel .dsh-math-evidence { display: grid; gap: 16px; }\n.dsh-design-panel :is(.dsh-math-output, .dsh-math-checks) { padding: 12px; }\n.dsh-design-panel .dsh-math-check-status { max-width: 55%; padding: 2px 8px; border-radius: 4px; background: var(--ds-fill-2, #f7f7f7); color: var(--ds-text-secondary, #4c4c4c); font-size: 12px; overflow-wrap: anywhere; }\n.dsh-design-panel .dsh-math-provenance dl { display: grid; gap: 16px; margin: 0; }\n.dsh-design-panel .dsh-math-provenance dt { color: var(--ds-text-secondary, #4c4c4c); font-size: 12px; }\n.dsh-design-panel .dsh-math-provenance dd { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }\n.dsh-design-panel .dsh-math-file { margin-top: 8px; }\n.dsh-design-panel .dsh-math-file > summary > span { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }\n.dsh-design-panel .dsh-math-file > summary code { font-size: 12px; overflow-wrap: anywhere; }\n.dsh-design-panel .dsh-math-file-path { font-size: 12px; color: var(--ds-text-tertiary, #6d6d6d); overflow-wrap: anywhere; }\n.dsh-design-panel .dsh-math-file-preview { max-height: 360px; overflow: auto; margin: 8px 0 0; padding: 12px; border-radius: var(--ds-radius-4, 8px); background: var(--ds-fill-2, #f7f7f7); color: var(--ds-text-primary, #272727); font: 12px/1.6 ui-monospace, monospace; white-space: pre; }\n.dsh-design-panel .dsh-math-card { border: 1px solid var(--ds-line-1, #e8e8e8); border-radius: var(--ds-radius-4, 8px); background: var(--ds-bg-white, #fff); }\n.dsh-design-panel .dsh-math-card > summary { width: auto; padding: 12px; font-size: 14px; }\n.dsh-design-panel .dsh-math-card[open] > .dsh-math-card-content { margin-top: 0; padding: 0 12px 12px; }\n.dsh-design-panel .dsh-math-card-content > * + * { margin-top: 16px; }\n.dsh-design-panel .dsh-math-section-hint { color: var(--ds-text-secondary, #4c4c4c); font-size: 12px; }\n.dsh-design-panel .dsh-math-card-content > .dsh-math-section-hint { margin-top: 0; }\n.dsh-design-panel .dsh-math-count { margin-left: 8px; color: var(--ds-text-tertiary, #6d6d6d); font-size: 12px; font-weight: 400; }\n.dsh-design-panel .dsh-math-inline-notation { margin-top: 12px; }\n.dsh-design-panel .dsh-math-inline-notation > summary { font-size: 12px; color: var(--ds-text-secondary, #4c4c4c); }\n.dsh-design-panel .dsh-math-inline-notation[open] > :not(summary) { margin-top: 8px; }\n.dsh-design-panel .dsh-math-notation-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ds-text-secondary, #4c4c4c); }\n.dsh-design-panel .dsh-math-inline-notation .dsh-math-notation-heading { justify-content: flex-end; }\n.dsh-design-panel .dsh-math-notation-heading button { padding: 0; border: 0; background: transparent; color: var(--ds-text-tertiary, #6d6d6d); font: inherit; cursor: pointer; }\n.dsh-design-panel .dsh-math-inline-notation dl { margin: 8px 0 0; display: grid; gap: 8px; }\n.dsh-design-panel .dsh-math-inline-notation dl > div { display: grid; grid-template-columns: minmax(56px, 80px) minmax(0, 1fr); gap: 12px; align-items: baseline; }\n.dsh-design-panel .dsh-math-inline-notation dd { margin: 0; overflow-wrap: anywhere; }\n.dsh-design-panel .dsh-math-inline-notation dt .dsh-math-formula { font-size: 15px; }\n.dsh-design-panel .dsh-math-document p .dsh-math-formula.is-inline, .dsh-design-panel .dsh-math-document dd .dsh-math-formula.is-inline { font-size: 1.05em; vertical-align: -.15em; }\n.dsh-design-panel .dsh-math-all-notation { min-width: 0; }\n.dsh-design-panel .is-notation .dsh-math-entry { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 16px; padding: 12px 0; }\n.dsh-design-panel .is-notation .dsh-math-entry-heading { flex-direction: column; align-items: flex-start; gap: 4px; }\n.dsh-design-panel .is-notation .dsh-math-entry-body > .dsh-math-meaning { margin-top: 0; padding: 0; border-radius: 0; background: transparent; }\n.dsh-design-panel .dsh-math-entry-body[hidden] { display: none; }\n\n.dsh-design-panel .dsh-math-title-edit { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; font-size: 14px; font-weight: 600; }\n.dsh-design-panel .dsh-math-title-edit > .dsh-math-editor { flex: 1; min-width: 0; margin: 0; }\n.dsh-design-panel .dsh-math-symbol-heading { min-width: 0; flex: 1; }\n.dsh-design-panel .dsh-math-expression > .dsh-math-editor { margin-top: 12px; }\n.dsh-design-panel .dsh-math-details .dsh-math-editor { margin: 0; }\n.dsh-design-panel .dsh-math-entry-actions { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 8px; }\n.dsh-design-panel .dsh-math-entry-actions .dsh-math-edit-hint { flex: 1; }\n.dsh-design-panel .dsh-math-remove { color: var(--ds-error-text-primary, #b02d2f); }\n\n/* Shared prose appearance follows Smart Question's saved/editor treatment. */\n.dsh-design-panel .dsh-panel-prose-input { display: block; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ds-text-primary, #272727); font: inherit; field-sizing: content; resize: vertical; }\n.dsh-design-panel .dsh-panel-prose-editor .dsh-panel-prose-input:focus-visible { outline: 0; box-shadow: none; }\n@media (hover: hover) {\n  .dsh-design-panel :is(.dsh-math-entry, .dsh-math-text) > .dsh-math-entry-heading > .dsh-math-edit[aria-expanded=false] { opacity: 0; }\n  .dsh-design-panel :is(.dsh-math-entry, .dsh-math-text):is(:hover, :focus-within) > .dsh-math-entry-heading > .dsh-math-edit[aria-expanded=false] { opacity: 1; }\n}\n";
 //#endregion
@@ -268322,7 +268346,7 @@ function PanelSamplePreview({ skill, panelYaml, sample, artifacts, value, onChan
 	}, [artifacts]);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		className: "dsh-panel-sample-preview",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: _dsh_design_css_inline_5183fe2efe63e8c164d0a3c73458cdc0bb3f362547cd2bdcb09eeb8b40fecedd_visual_components_css_default + "\n" + _dsh_design_css_inline_3ba2975403771833450da8a6e1f189fb4d51af53e46c17815befabd59948c5e5_panel_content_state_css_default }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DslPanel, {
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: _dsh_design_css_inline_0e9f302d41955acf9e839975ce6240355a382a6ab39f89f7be228eb83ff8e0ee_style_css_default + "\n" + _dsh_design_css_inline_5183fe2efe63e8c164d0a3c73458cdc0bb3f362547cd2bdcb09eeb8b40fecedd_visual_components_css_default + "\n" + _dsh_design_css_inline_3ba2975403771833450da8a6e1f189fb4d51af53e46c17815befabd59948c5e5_panel_content_state_css_default }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DslPanel, {
 			skill,
 			panelYaml,
 			draft,

package/release-hosts.json

@@ -4,7 +4,7 @@
     "dsh": {
       "aggregatePackage": "@yugoo-design/dsh-design-system-dsh",
       "registry": "https://registry.npmjs.org",
-      "aggregateVersion": "0.2.5"
+      "aggregateVersion": "0.2.7"
     }
   }
 }