.diagram-heading,.diagram-title-row{display:flex;align-items:center;justify-content:space-between;gap:20px}.diagram-heading{margin-bottom:12px}.diagram-heading h1{margin:0}.diagram-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;margin-top:24px}.diagram-library{border-right:1px solid var(--line,#e6e1eb);padding-right:20px;min-width:0}.diagram-library label{display:grid;gap:8px}.diagram-list-item{display:grid;gap:8px;text-align:left;width:100%;border:0;border-bottom:1px solid var(--line,#e6e1eb);background:transparent;padding:16px 10px;white-space:normal;overflow-wrap:anywhere}.diagram-list-item span{font-size:12px;color:var(--muted,#736b80)}.diagram-list-item.selected{background:var(--accent-soft,#fff0e9);color:var(--accent,#c63c18)}.diagram-title-row>label{flex:1;min-width:160px}.diagram-title-row>.row{flex-shrink:0}.diagram-workbench{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(280px,1.1fr);gap:24px;align-items:start}.diagram-controls,.diagram-preview{min-width:0}.diagram-workbench h2{font-size:18px;margin:0 0 16px}.diagram-preview{position:sticky;top:12px}.diagram-preview iframe{display:block;width:100%;height:520px;border:1px solid var(--line,#e6e1eb);border-radius:12px;background:#fff}.diagram-source{margin-top:20px}.diagram-source summary,.diagram-versions summary{padding:12px 0;cursor:pointer}.diagram-source textarea{font-family:Consolas,monospace;font-size:14px;line-height:1.65;tab-size:4;width:100%}.diagram-node-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-height:260px;overflow:auto}.diagram-node-list label{font-size:12px}.diagram-add{display:flex;align-items:end;gap:12px;margin-top:16px}.diagram-add label{flex:1;min-width:0}.diagram-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.diagram-links button{grid-column:1/-1}.diagram-empty{padding:48px 24px;max-width:600px}.diagram-empty p{line-height:1.7}.diagram-version{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--line,#e6e1eb)}.diagram-versions pre{white-space:pre-wrap}.diagram-chat-button{margin-left:12px}.diagram-layout .form-stack{gap:14px}.diagram-layout input,.diagram-layout textarea,.diagram-layout select{min-width:0;max-width:100%}.diagram-layout [hidden]{display:none!important}.diagram-title-row .row button{white-space:nowrap}html[data-theme="dark"] .diagram-list-item.selected{background:#3b2c28;color:#ffab89}html[data-theme="dark"] .diagram-preview iframe{background:#20232c}html[data-theme="dark"] .diagram-layout{--line:#484451;--muted:#b7afc3}@media(max-width:1200px){.diagram-workbench{grid-template-columns:1fr}.diagram-preview{position:static}.diagram-title-row{align-items:stretch;flex-direction:column}.diagram-preview iframe{height:420px}}@media(max-width:700px){.diagram-layout{grid-template-columns:1fr;gap:20px}.diagram-library{border-right:0;padding-right:0}.diagram-library #diagram-list{display:flex;overflow-x:auto;max-height:170px}.diagram-list-item{min-width:180px;max-width:230px}.diagram-heading{align-items:stretch;flex-direction:column}.diagram-title-row>.row{flex-wrap:wrap}.diagram-node-list{grid-template-columns:1fr 1fr}.diagram-add{align-items:stretch;flex-direction:column}.diagram-preview iframe{height:360px}.diagram-version{flex-wrap:wrap}}

.diagram-node-list label,.diagram-links label{min-width:0}.diagram-source .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.diagram-layout .hint,.diagram-heading+p.hint{color:#6e677a}html[data-theme="dark"] .diagram-layout .hint,html[data-theme="dark"] .diagram-heading+p.hint{color:var(--muted)}

.diagram-zoom{display:flex;align-items:center;gap:8px;font-size:12px}.diagram-zoom select{padding:6px 8px}.diagram-preview>.row{align-items:start}.diagram-preview>.row>.row{justify-content:flex-end}

#diagram-render-details pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.6}#diagram-render-details{margin-bottom:16px}

/* The board uses the shared menu → workspace → information rail. */
[data-workspace-kind=diagram] .workspace-columns{margin:0;min-width:0}[data-workspace-kind=diagram] [hidden]{display:none!important}[data-workspace-kind=diagram] .workspace-dialog{overflow:hidden;display:flex;flex-direction:column}[data-workspace-kind=diagram] .diagram-fields{display:flex;flex-direction:column;height:100%;min-height:0}[data-workspace-kind=diagram] .diagram-library{padding:0;border-right:0}[data-workspace-kind=diagram] #diagram-list{max-height:240px;overflow:auto;margin-top:10px}[data-workspace-kind=diagram] .diagram-list-item{min-width:0;max-width:none}[data-workspace-kind=diagram] .diagram-title-row{display:grid;gap:12px}[data-workspace-kind=diagram] .diagram-title-row>label{min-width:0}[data-workspace-kind=diagram] .diagram-title-row>.row{flex-wrap:wrap}[data-workspace-kind=diagram] .diagram-title-row .row button{white-space:normal;min-height:44px}[data-workspace-kind=diagram] .form-stack{display:grid;gap:14px}[data-workspace-kind=diagram] input,[data-workspace-kind=diagram] textarea,[data-workspace-kind=diagram] select{max-width:100%;min-width:0}[data-workspace-kind=diagram] #diagram-surface:not(.drawing-expanded){height:100%;min-height:0;display:flex;flex-direction:column}[data-workspace-kind=diagram] #diagram-surface:not(.drawing-expanded)>.drawing-layout{display:flex;flex:1;min-height:0}[data-workspace-kind=diagram] #diagram-surface:not(.drawing-expanded) .drawing-stage{height:100%;width:100%;min-height:260px}[data-workspace-kind=diagram] #diagram-native-tools>.drawing-inspector{display:grid;grid-template-columns:1fr;max-height:none;overflow:visible;padding:0}[data-workspace-kind=diagram] #diagram-native-tools>.drawing-inspector h3{font-size:14px}[data-workspace-kind=diagram] #diagram-native-tools>.drawing-status{font-size:12px}[data-workspace-kind=diagram] #diagram-native-tools>.drawing-toolbar,[data-workspace-kind=diagram] #diagram-native-tools>.drawing-shapes{gap:6px}[data-workspace-kind=diagram] #diagram-native-tools>.drawing-size-controls label{min-width:0}[data-workspace-kind=diagram] #diagram-native-tools>.drawing-arranging .drawing-arrange-controls{align-items:stretch;flex-direction:column}[data-workspace-kind=diagram] #diagram-native-tools>.drawing-ratios .drawing-ratio-fields{flex-direction:column}[data-workspace-kind=diagram] .diagram-workbench{display:flex;flex-direction:column;min-height:0;height:100%;gap:0}[data-workspace-kind=diagram] .diagram-preview{position:static;display:flex;flex-direction:column;height:100%;width:100%;min-height:0}[data-workspace-kind=diagram] .diagram-preview iframe{flex:1;min-height:200px;height:100%}[data-workspace-kind=diagram] .diagram-controls{min-width:0}[data-workspace-kind=diagram] .diagram-node-list{grid-template-columns:1fr}[data-workspace-kind=diagram] .diagram-links{grid-template-columns:1fr}[data-workspace-kind=diagram] #diagram-error:empty{display:none}[data-workspace-kind=diagram] #diagram-error{padding:12px;flex-shrink:0}
@media(max-width:1050px){.dialog-workspace[data-workspace-kind=diagram]{height:calc(100dvh - 20px);min-height:0}[data-workspace-kind=diagram] .workspace-columns{display:grid;grid-template-columns:minmax(0,1fr)}[data-workspace-kind=diagram] .workspace-dialog{height:auto;min-height:0}[data-workspace-kind=diagram] #diagram-list{display:grid}[data-workspace-kind=diagram] .diagram-library #diagram-list{display:grid}}
@media(max-width:600px){.dialog-workspace[data-workspace-kind=diagram]{height:calc(100dvh - 16px)}}

[data-workspace-kind=diagram] #diagram-native-tools button{min-height:44px}[data-workspace-kind=diagram] #diagram-native-tools>.drawing-inspector input[type=color]{min-height:44px}