/* Private editor layout. Controls stay outside the sandbox and use MiruKit's
   shared buttons, theme, work list and history. No viewport-sized overlays. */
body.diagram-page .tabs a[data-diagram-tab]{white-space:nowrap}
body.diagram-page main.wrap{max-width:1600px}
.diagram-heading{display:flex;gap:16px;align-items:center;justify-content:space-between;margin:16px 0 10px}
.diagram-heading h1{font-size:clamp(20px,3vw,28px);margin:0}
.diagram-heading p{margin:4px 0;font-size:13px;color:var(--muted)}
.diagram-bar,.diagram-controls,.diagram-field-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.diagram-bar{padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.diagram-field-row{flex:1}.diagram-field-row label{display:flex;gap:6px;align-items:center;font-size:13px}
.diagram-field-row input{width:150px;min-width:0}
.diagram-controls{margin:10px 0}
.diagram-controls label{display:flex;align-items:center;gap:6px;font-size:13px}
.diagram-controls input{width:150px;min-width:0}
.diagram-controls label,.diagram-field-row label{margin:0}
#diagram-shape{width:auto;min-width:90px}
.diagram-controls button,.diagram-bar button,.diagram-bar select{min-height:44px}
.diagram-stage{position:relative;border:1px solid var(--line);border-radius:10px;background:#f5f7f9;overflow:hidden}
#diagram-frame{display:block;width:100%;height:calc(100dvh - 440px);min-height:360px;border:0;background:#f5f7f9}
#diagram-status{margin:8px 0;min-height:24px;font-weight:600}
#diagram-start{padding:8px 0}#diagram-start>div{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0}
.diagram-hint{font-size:13px;margin:6px 0;color:var(--muted)}
.diagram-count{margin-left:auto;font-size:13px;white-space:nowrap}
.diagram-page .edit-history{margin:0}.diagram-page .edit-history>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.diagram-page .edit-history button{min-height:44px}
.diagram-transfer summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.diagram-transfer nav{display:flex;gap:8px;flex-wrap:wrap;padding:8px}
.diagram-transfer{margin-left:auto}.diagram-note{font-size:13px}
.diagram-fit-short{display:none}
/* File metadata is secondary. Its native disclosure floats without pushing the
   drawing down; shared keyboard/outside-click handling closes it predictably. */
#diagram-file-options{position:relative}
#diagram-file-options>summary{min-height:44px;display:flex;align-items:center;padding:0 10px;cursor:pointer;border:1px solid var(--line);border-radius:10px}
.diagram-file-options-body{position:absolute;top:calc(100% + 6px);left:0;z-index:20;width:300px;max-width:calc(100vw - 52px);padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px #0005;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.diagram-file-options-body .diagram-field-row{flex-basis:100%}
@media(max-width:767px){
 .diagram-heading{align-items:start}.diagram-heading p{font-size:12px}.diagram-bar{padding:8px;gap:6px}
 .diagram-field-row{width:100%;flex-basis:100%}.diagram-field-row label{flex:1}.diagram-field-row input{width:100%;max-width:180px}
 .diagram-bar select{max-width:135px}.diagram-controls input{max-width:130px}.diagram-controls{gap:6px}
 .diagram-controls label{font-size:12px}.diagram-page .header .brand small{display:none}
 #diagram-frame{height:48dvh;min-height:330px}.diagram-page main.wrap{padding-bottom:24px}
 .diagram-transfer{margin-left:0}.diagram-page .edit-history ol img{max-width:64px}
 .diagram-page .history-actions details{max-width:120px}.diagram-page .diagram-hint{font-size:12px}
 /* Keep the first meaningful drawing inside the initial phone viewport. */
 #simple-editor{display:flex;flex-direction:column}
 .diagram-page .edit-history{order:0}.diagram-bar{order:1;flex-wrap:nowrap;justify-content:space-between}
 .diagram-start-actions,.diagram-drawing-hint{order:2}.diagram-stage,#diagram-status{order:3}.diagram-controls{order:4}
 #simple-editor>p:not(#diagram-status):not(.diagram-drawing-hint){order:5}
 .diagram-fit-wide{display:none}.diagram-fit-short{display:inline}
 .diagram-save-format{display:none}
 .diagram-bar button,.diagram-bar summary{font-size:12px;white-space:nowrap;padding-left:8px;padding-right:8px}
 .diagram-bar #diagram-save{min-width:60px}.diagram-transfer nav{position:absolute;right:20px;background:var(--surface);z-index:21;border:1px solid var(--line);border-radius:10px}
 .diagram-file-options-body{width:280px}
}

/* Keep the reset action distinct from template disclosure. Opening templates
   stays under user control across renders; source code rollback restores it. */
.diagram-start-actions{display:flex;align-items:flex-start;gap:12px;margin:8px 0;flex-wrap:wrap}
#diagram-new{min-height:44px;flex-shrink:0}
.diagram-start-actions #diagram-start{flex:1;min-width:180px}
/* MiruKit shell refinement: one file owner, primary save on the right, secondary
   numeric fields collapsed. Editor chrome is themed through its bounded port. */
.diagram-bar{border-radius:12px 12px 0 0;gap:10px}.diagram-bar #diagram-save{order:10;margin-left:auto;min-width:110px}.diagram-transfer{margin-left:0}
.diagram-start-actions{margin:8px 0;align-items:center}#diagram-start{padding:0}#diagram-start summary{font-size:13px;cursor:pointer;padding:10px}
.diagram-precise{margin:4px 0;font-size:13px}.diagram-precise>summary{cursor:pointer;color:var(--muted);padding:8px 0}.diagram-precise[open]{padding-bottom:8px}
.diagram-drawing-hint{margin:6px 0 10px}.diagram-stage{border-radius:12px;background:var(--surface)}
#diagram-frame{height:calc(100dvh - 365px);min-height:490px}.diagram-controls{padding:10px;border:1px solid var(--line);border-radius:10px}
@media(max-width:767px){
 #diagram-frame{height:65dvh;min-height:460px}.diagram-precise{order:4}.diagram-stage{order:3}.diagram-drawing-hint{order:2}
 .diagram-bar{flex-wrap:wrap}.diagram-bar #diagram-save{min-width:64px}.diagram-transfer summary{font-size:12px}.diagram-start-actions{gap:6px}
 .diagram-start-actions #diagram-start{min-width:0}#diagram-start summary{padding:8px 4px}.diagram-bar #diagram-fit{display:inline-flex}
}

@media(max-width:767px){#diagram-frame{height:min(58dvh,520px);min-height:400px}}

/* Local export and selection dialogs use the host file/RPC owners. Menus float
   over the editor; native dialog modality/Escape prevents stale canvas gestures.
   Link data stays inert until the user opens it. Revert this block to roll back. */
#diagram-export-options{position:relative}
#diagram-export-options>summary{min-height:44px;display:flex;align-items:center;padding:0 12px;cursor:pointer;border:1px solid var(--line);border-radius:10px}
.diagram-export-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:25;width:250px;max-width:calc(100vw - 48px);padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px #0006;display:grid;gap:4px}
.diagram-export-menu button{text-align:left;width:100%;min-height:44px;white-space:normal}
.diagram-export-menu p{font-size:12px;color:var(--muted);padding:4px;margin:0}
#diagram-link-dialog{width:520px;max-width:calc(100vw - 32px);max-height:90dvh;overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:20px}
#diagram-link-dialog::backdrop{background:#0009}
#diagram-link-dialog h2{margin:0 0 10px;font-size:20px}
#diagram-link-label{white-space:pre-wrap;max-height:90px;overflow:auto;color:var(--muted);overflow-wrap:anywhere}
#diagram-link-url{width:100%;min-height:44px;margin:8px 0}
#diagram-link-hint{font-size:13px;color:var(--muted)}
#diagram-link-error{color:var(--error,#f4768e);min-height:22px}
.diagram-link-actions{display:flex;gap:8px;flex-wrap:wrap}.diagram-link-actions button,.diagram-link-actions a{min-height:44px}
.diagram-link-actions [hidden]{display:none}
@media(max-width:767px){#diagram-export-options>summary,#diagram-link{font-size:12px;padding:0 8px}.diagram-bar{justify-content:flex-start}.diagram-bar #diagram-save{margin-left:auto}.diagram-export-menu{width:230px;left:50%;transform:translateX(-50%)}.diagram-bar .diagram-transfer{margin-left:0}}