/* Approved canvas-controls layout. The artwork and camera remain document based. */
:root{--muted:#666;--control-outline:#00000024;--control-available:1;--grid-2:#217949;--grid-3:#b33e37;--canvas-gap:24px;--workspace-top:96px;--toolbar-control:44px;--toolbar-height:44px;--footer-height:44px}
body{min-height:100dvh;background:var(--workspace)}
body[data-theme=dark]{--control-outline:#ffffff26;--grid-2:#5ed79b;--grid-3:#ff837c}
#workspace{position:fixed;inset:var(--workspace-top) var(--edge-right) var(--edge-bottom) var(--edge-left);width:auto;height:auto;display:grid;grid-template-columns:44px 44px minmax(0,1fr) 44px;grid-template-rows:auto minmax(0,1fr) 44px;align-items:center;column-gap:var(--canvas-gap);row-gap:12px;padding:0;overflow:visible;background:transparent;pointer-events:none;z-index:1}
#editor-stage{display:contents}
#canvas-settings{grid-column:2/-1;grid-row:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 24px;max-width:100%;min-width:0;justify-self:center}
/* This is only a fit/layout reference. It never clips or captures drawing. */
#canvas-fit-area{grid-column:3;grid-row:2;align-self:stretch;width:100%;height:100%;min-height:0;min-width:0;pointer-events:none}
#board-frame{position:fixed;inset:0;overflow:hidden;width:100%;height:100%;background:var(--workspace);z-index:0}
#board{position:absolute;inset:0;width:100%;height:100%;background:transparent}
#canvas-settings>*,#canvas-options,#drawing-colors,#bottom-controls>*,#sheets{pointer-events:auto}
#document-label{z-index:2}
#canvas-options,#drawing-colors{grid-row:2;display:flex;flex-direction:column;align-items:center;gap:var(--canvas-gap);width:44px;min-height:0;max-height:100%}
#canvas-options{grid-column:2;overflow:auto;scrollbar-width:thin;scrollbar-color:transparent transparent}
#canvas-options:hover,#canvas-options:focus-within{scrollbar-color:var(--control-outline) transparent}
#drawing-colors{grid-column:4}
.direct-group{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;width:44px;max-width:100%;border:0;outline:1px solid var(--control-outline);outline-offset:-1px;border-radius:13px;background:transparent;flex-shrink:0}
.direct-group button.icon,#bottom-controls button.icon{width:44px;height:44px;min-height:44px;padding:8px;flex-shrink:0;border-radius:8px}
.direct-group button svg,#bottom-controls button svg{width:24px;height:24px;opacity:var(--control-available)}
.direct-group button:hover svg,#bottom-controls button:hover svg{opacity:1}
.direct-group button[aria-pressed=true] svg,#bottom-controls button[aria-pressed=true] svg{opacity:1}
.direct-group button[aria-pressed=true],#bottom-controls button[aria-pressed=true]{background:transparent}
.direct-group button:disabled,#bottom-controls button:disabled{opacity:1}
.direct-group button:disabled svg,#bottom-controls button:disabled svg{opacity:.2}
.direct-group .shape-outline{fill:none;stroke:currentColor;stroke-width:1.8}
.direct-group [aria-pressed=true] .shape-outline{fill:currentColor;stroke:none}
#bottom-controls button[aria-pressed=true]:after{content:'';position:absolute;bottom:2px;width:3px;height:3px;border-radius:50%;background:currentColor}
.direct-dimensions{display:flex;align-items:center;justify-content:center;gap:2px;font:17px/24px 'Arial Narrow','Roboto Condensed',sans-serif;font-stretch:condensed;color:var(--muted);white-space:nowrap;min-height:40px}
.direct-dimensions input{width:calc(var(--digits,2) * 1ch + 10px);min-width:28px;max-width:76px}
.direct-dimensions input,.direct-interval input{height:36px;border:0;border-bottom:1px solid var(--control-outline);border-radius:4px 4px 0 0;padding:0 3px;background:transparent;text-align:center;font:inherit;font-variant-numeric:tabular-nums;color:inherit;appearance:textfield;-moz-appearance:textfield}
:is(.direct-dimensions,.direct-interval) input::-webkit-inner-spin-button,:is(.direct-dimensions,.direct-interval) input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
:is(.direct-dimensions,.direct-interval) input:hover:not(:disabled),:is(.direct-dimensions,.direct-interval) input:focus{background:var(--selected)}
:is(.direct-dimensions,.direct-interval) input:focus{outline-offset:0;outline-color:currentColor}
.direct-dimensions input:disabled{opacity:.35}
.direct-grid-levels{display:flex;align-items:center;gap:8px;height:44px;border:0;outline:none;padding:0;background:transparent}
.direct-grid-value{display:flex;align-items:center;width:96px;gap:0;color:var(--grid-2)}
.direct-grid-value[data-level='1']{color:var(--grid-3)}
.direct-interval{display:grid;align-items:center;grid-template-columns:minmax(0,1fr) 8px minmax(0,1fr);width:64px;font:17px/24px 'Arial Narrow','Roboto Condensed',sans-serif;text-align:center}
.direct-interval input{width:100%;min-width:0;padding:0}
.direct-grid-value[data-enabled=false] .direct-interval{opacity:.4}
.direct-grid-value[data-editing=true] input{border-bottom-color:currentColor}
.direct-grid-toggle{width:32px;height:44px;min-height:44px;padding:0;flex:none;color:inherit}
.direct-grid-toggle:before{content:'';position:absolute;left:3px;top:15px;width:26px;height:14px;border-radius:8px;background:var(--muted);opacity:.25}
.direct-grid-toggle:after{content:'';position:absolute;left:5px;top:17px;width:10px;height:10px;border-radius:50%;background:var(--muted)}
.direct-grid-toggle[aria-checked=true]:before{background:currentColor;opacity:.65}
.direct-grid-toggle[aria-checked=true]:after{transform:translateX(12px);background:var(--workspace)}
.color-group{min-height:0;max-height:100%;gap:8px;flex-shrink:1}
.quick-swatches{display:flex;flex-direction:column;gap:4px;overflow:auto;min-height:0;max-width:100%;scrollbar-width:thin;scrollbar-color:transparent transparent;padding:2px 0}
.quick-swatches:hover,.quick-swatches:focus-within{scrollbar-color:var(--control-outline) transparent}
.quick-swatch{width:44px;height:44px;min-height:44px;padding:8px;flex-shrink:0}
.quick-swatch .swatch-paper,.quick-swatch .swatch-paper>span{display:block;width:28px;height:28px;border-radius:6px}
.quick-swatch .swatch-paper{box-shadow:inset 0 0 0 1px var(--control-outline)}
.quick-swatch[aria-pressed=true]{background:transparent;box-shadow:none}
.quick-swatch[aria-pressed=true] .swatch-paper{outline:2px solid var(--text);outline-offset:3px}
.quick-swatch:hover .swatch-paper{outline:1px solid var(--muted);outline-offset:3px}
.quick-swatch[aria-pressed=true]:hover .swatch-paper{outline-width:2px;outline-color:var(--text)}
.color-group .palette-button{border-top:1px solid var(--control-outline);border-radius:0 0 13px 13px;flex:none}
#bottom-controls{grid-column:2/-1;grid-row:3;justify-self:center;display:flex;gap:24px;align-items:center;justify-content:center;max-width:100%}
#bottom-controls #navigation,#bottom-controls #dock{position:static;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:max-content;max-width:none;height:44px;display:flex;align-items:center;justify-content:center;padding:0;gap:4px;border:0;outline:1px solid var(--control-outline);outline-offset:-1px;border-radius:13px;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#bottom-controls #navigation .zoom-value{min-width:48px;padding:0;height:44px;font-size:12px}
.tool-divider{height:20px;width:1px;background:var(--control-outline);margin:0 3px;flex:none}
#header .header-group,#sheets>.glass{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;outline:1px solid var(--control-outline);outline-offset:-1px;padding:0;gap:4px;border-radius:13px}
#header .mark,#header button{width:44px;height:44px;min-height:44px;padding:8px}
#header button svg{width:24px;height:24px;opacity:var(--control-available)}
#header .mark svg{width:30px;height:30px;opacity:1}
#header button:hover svg,#sheets button:hover svg{opacity:1}
#header button[aria-pressed=true] svg{opacity:1}
#header button[aria-pressed=true]{background:transparent}
#header{flex-wrap:nowrap;gap:8px}
#document-label{top:calc(var(--edge-top) + 52px)}
#sheets{grid-column:1;grid-row:2;position:static;transform:none;flex-direction:column;gap:12px;max-width:44px;max-height:100%;padding:0}
#sheets>.glass{flex-direction:column;width:44px}
#sheets button{width:44px;height:44px;min-width:44px;min-height:44px;padding:6px}
#sheets button[aria-pressed=true]{background:transparent;outline:2px solid var(--text);outline-offset:-3px}
#sheets button svg{width:30px;height:30px}
#sheets .sheet-actions button svg{width:24px;height:24px;opacity:var(--control-available)}
#grid-handle{position:absolute;width:44px;height:44px;min-height:44px;padding:7px;transform:translate(-50%,-50%);touch-action:none;color:var(--grid-2);cursor:nwse-resize;border-radius:50%;z-index:2;background:transparent}
#grid-handle[data-level='1']{color:var(--grid-3)}
#grid-handle:before{content:'';position:absolute;inset:7px;border:2px solid currentColor;border-radius:8px;background:var(--workspace);box-shadow:0 1px 8px #0006}
#grid-handle span{position:relative;color:var(--text);font-size:13px;font-weight:650}
#grid-handle[hidden]{display:none}
#panel{z-index:5}
#panel.color-panel,#panel.geometry-panel{top:96px;bottom:auto;right:16px;left:auto;transform:none;width:340px;max-height:calc(100dvh - 112px)}
#panel.header-panel{top:calc(var(--edge-top) + 52px)}
#toast{z-index:20}
@media(max-width:899px){
 #workspace{--canvas-gap:12px;grid-template-columns:44px minmax(0,1fr) 44px;grid-template-rows:auto auto minmax(0,1fr) 44px;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));row-gap:8px}
 #sheets{grid-column:1/-1;grid-row:1;flex-direction:row;max-width:100%;max-height:44px;justify-self:center}
 #sheets>.glass{flex-direction:row;width:auto;max-width:100%}
 #sheets .sheet-list{max-width:calc(100vw - 140px)}
 #canvas-settings{grid-column:1/-1;grid-row:2}
 #canvas-fit-area{grid-column:2;grid-row:3}
 #canvas-options{grid-column:1;grid-row:3}
 #drawing-colors{grid-column:3;grid-row:3}
 #bottom-controls{grid-column:1/-1;grid-row:4}
 #panel.color-panel,#panel.geometry-panel{left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:45dvh}
}
@media(max-width:700px){
 :root{--canvas-gap:12px;--workspace-top:92px}
 #canvas-settings{gap:4px 12px}
 .direct-dimensions{font-size:16px;gap:0}
 .direct-dimensions input{max-width:62px;padding:0 2px;height:40px;min-width:26px}
 .direct-interval{font-size:16px}
 .direct-interval input{height:40px}
 #bottom-controls{gap:12px}
 #bottom-controls #dock,#bottom-controls #navigation{gap:0}
 #bottom-controls button.icon{width:40px;padding:7px}
 #bottom-controls #navigation .zoom-value{min-width:38px}
 .tool-divider{margin:0 1px}
 .direct-group{border-radius:12px}
 #header .header-group,#header .modes{gap:0}
 #header button,#header .mark{width:40px}
 #document-label{font-size:10px}
}
@media(max-width:380px){#bottom-controls{gap:8px}#bottom-controls button.icon{width:32px}#bottom-controls #navigation .zoom-value{min-width:32px}#header button,#header .mark{width:36px;padding:6px}.header-left{gap:6px}}
@media(max-height:500px) and (min-width:700px){
 :root{--workspace-top:82px;--canvas-gap:12px}
 #workspace{grid-template-columns:44px 44px minmax(0,1fr) 44px;grid-template-rows:auto minmax(0,1fr) 44px;row-gap:8px}
 #sheets{grid-column:1;grid-row:2;flex-direction:column;max-width:44px;max-height:100%}
 #sheets>.glass{flex-direction:column;width:44px}
 #canvas-settings{grid-column:2/-1;grid-row:1}
 #canvas-fit-area{grid-column:3;grid-row:2}
 #canvas-options{grid-column:2;grid-row:2}
 #drawing-colors{grid-column:4;grid-row:2}
 #bottom-controls{grid-column:2/-1;grid-row:3}
}
@media(prefers-contrast:more){:root{--control-available:.8;--control-outline:#777}}
/* Keep pointer ownership on the stable SVG root while artwork is redrawn. */
#board>*{pointer-events:none}

/* Floating controls must remain readable when paper moves beneath them. */
:root{--toolbar-surface:rgba(245,245,245,.7);--toolbar-backdrop:blur(18px)}
body[data-theme=dark]{--toolbar-surface:rgba(28,28,28,.7)}
:is(#header .header-group,#sheets>.glass,.direct-group,#bottom-controls #navigation,#bottom-controls #dock,#canvas-settings>.direct-dimensions,#canvas-settings>.direct-grid-levels,#document-label>span){
 background:var(--toolbar-surface);
 -webkit-backdrop-filter:var(--toolbar-backdrop);
 backdrop-filter:var(--toolbar-backdrop);
}
#canvas-settings>.direct-dimensions,#canvas-settings>.direct-grid-levels{border-radius:13px;padding-inline:8px}
#document-label>span{border-radius:6px;padding:3px 6px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 :root{--toolbar-surface:var(--opaque)}
 body[data-theme=dark]{--toolbar-surface:var(--opaque)}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 :root{--toolbar-surface:var(--opaque);--toolbar-backdrop:none}
 body[data-theme=dark]{--toolbar-surface:var(--opaque)}
}

/* Drawing first: a stable disclosure slot, with configuration above the canvas.
   Setup is absolutely positioned; opening it never changes the Fit reference. */
:root{--control-available:1}
#workspace{grid-template-columns:44px minmax(0,1fr) 44px;grid-template-rows:44px minmax(0,1fr) 44px}
#canvas-settings{grid-column:1/-1;grid-row:1;position:relative;height:44px;display:block;width:max-content;max-width:100%;z-index:3;pointer-events:none}
#canvas-fit-area{grid-column:2;grid-row:2}
#sheets{grid-column:1;grid-row:2}
#drawing-colors{grid-column:3;grid-row:2}
#bottom-controls{grid-column:1/-1;grid-row:3}
.setup-bar{outline:1px solid var(--control-outline);outline-offset:-1px;display:flex;align-items:center;gap:12px;padding:0 12px 0 4px;height:44px;border-radius:14px;pointer-events:auto;white-space:nowrap}
.setup-bar,#setup-controls{background:var(--toolbar-surface);backdrop-filter:var(--toolbar-backdrop);-webkit-backdrop-filter:var(--toolbar-backdrop)}
#setup-toggle{height:36px;min-height:36px;display:flex;align-items:center;gap:7px;padding:0 10px;border-radius:10px;font-size:13px;font-weight:550}
#setup-toggle>svg{width:18px;height:18px}
#setup-toggle>.setup-chevron{width:12px;height:12px;opacity:.7;transition:transform .15s}
#setup-toggle[aria-expanded=true]{background:var(--selected)}
#setup-toggle[aria-expanded=true]>.setup-chevron{transform:rotate(180deg)}
#sheet-summary{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
#setup-controls{position:absolute;top:52px;left:50%;transform:translateX(-50%);width:min(600px,calc(100vw - 24px));max-height:calc(100dvh - 220px);overflow:auto;overscroll-behavior:contain;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:14px 16px 8px;border-radius:18px;box-shadow:0 8px 28px #0002;pointer-events:auto;scrollbar-width:thin;scrollbar-color:transparent transparent}
#setup-controls:hover,#setup-controls:focus-within{scrollbar-color:var(--control-outline) transparent}
#setup-controls[hidden]{display:none}
#setup-fields{display:contents}
#setup-controls .setup-label{font:500 12px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--text);margin-right:8px;flex-shrink:0}
#setup-controls .direct-dimensions{font-size:16px;color:var(--text);justify-content:flex-start;min-height:44px}
#setup-controls .direct-dimensions input{height:36px;max-width:68px}
#setup-controls .dimension-unit{font-size:11px;color:var(--muted);padding-left:3px}
#setup-controls .sheet-gap{font:500 12px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;gap:5px}
#setup-controls .sheet-gap input{font:400 16px/24px 'Arial Narrow','Roboto Condensed',sans-serif;font-stretch:condensed;font-variant-numeric:tabular-nums;width:58px}
#setup-controls .direct-grid-levels{order:2;flex-basis:100%;gap:16px;flex-wrap:wrap;height:auto;min-height:44px}
#setup-controls .direct-grid-value{width:108px;gap:4px}
#setup-controls .direct-interval{width:72px;font-size:16px}
#setup-controls #canvas-options{order:1;flex-basis:100%;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 20px;width:auto;max-height:none;overflow:visible;margin-top:8px;padding-top:8px;border-top:1px solid var(--control-outline)}
#setup-controls #canvas-options:empty{display:none}
#setup-controls .direct-group{flex-direction:row;width:auto;gap:0;outline:none;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#setup-controls .direct-group button.icon{width:40px;height:40px;min-height:40px;padding:9px}
#setup-controls .direct-group button svg{width:22px;height:22px}
#setup-controls .direct-group button[aria-pressed=true]{background:var(--selected);border-radius:10px}
.setup-footer{order:3;flex-basis:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;border-top:1px solid var(--control-outline);padding-top:4px;font-size:11px;color:var(--muted)}
.setup-footer button{min-height:40px;padding:0 4px;font-size:12px;color:var(--text);gap:6px}
#bottom-controls #dock{padding:4px;height:44px;gap:2px}
#bottom-controls #dock button.icon{width:36px;height:36px;min-height:36px;padding:7px;border-radius:9px}
#bottom-controls #dock button[aria-pressed=true],#header .modes button[aria-pressed=true]{background:var(--selected)}
#bottom-controls button[aria-pressed=true]:after{display:none}
#bottom-controls #navigation .fit-action{height:36px;min-height:36px;font-size:12px;padding:0 8px;border-radius:9px;white-space:nowrap}
#bottom-controls #navigation .fit-action[aria-pressed=true]{background:var(--selected)}
#bottom-controls #navigation{padding:0 4px;gap:0}
#bottom-controls .tool-divider{margin:0 5px}
#bottom-controls button:disabled svg,.direct-group button:disabled svg{opacity:.25}
#header .modes{padding:4px;background:transparent;border-radius:13px}
#header .modes button{width:36px;height:36px;min-height:36px;padding:6px;border-radius:9px}
@media(max-width:899px){
 #workspace{grid-template-rows:44px 44px minmax(0,1fr) 44px}
 #sheets{grid-column:1/-1;grid-row:1}
 #canvas-settings{grid-column:1/-1;grid-row:2}
 #canvas-fit-area{grid-column:2;grid-row:3}
 #drawing-colors{grid-column:3;grid-row:3}
 #bottom-controls{grid-column:1/-1;grid-row:4}
 #setup-controls{max-height:calc(100dvh - 280px)}
}
@media(max-width:700px){
 #workspace{grid-template-rows:44px 44px minmax(0,1fr) 96px}
 #bottom-controls{display:flex;flex-direction:column;gap:8px;align-items:center;width:100%}
 #bottom-controls #navigation{height:44px;flex-shrink:0;max-width:100%}
 #bottom-controls #navigation button.icon{width:40px}
 #bottom-controls #dock{height:44px;flex-shrink:0}
 #bottom-controls #dock button.icon{width:40px}
 #setup-controls{padding:10px 12px 4px;max-height:calc(100dvh - 280px)}
 #setup-fields{gap:4px 12px}
 #setup-controls .direct-dimensions{font-size:16px;flex-wrap:wrap;gap:1px}
 #setup-controls .direct-dimensions:not(.sheet-gap){flex-basis:100%}
 #setup-controls .direct-dimensions:not(.sheet-gap) .setup-label{flex-basis:100%;padding:3px 0}
 #setup-controls .direct-grid-levels{gap:8px;justify-content:flex-start}
 #setup-controls .direct-grid-levels>.setup-label{margin-right:2px}
 #setup-controls .direct-grid-value{width:96px;gap:0}
 #setup-controls .direct-interval{width:64px}
 #sheet-summary{font-size:11px}
 #setup-toggle{font-size:13px}
 .setup-bar{gap:8px}
}
/* Short landscape keeps rails vertical and the footer on one row. */
@media(max-height:500px) and (min-width:700px){
 #workspace{grid-template-rows:44px minmax(0,1fr) 44px}
 #sheets{grid-column:1;grid-row:2}
 #canvas-settings{grid-column:1/-1;grid-row:1}
 #canvas-fit-area{grid-column:2;grid-row:2}
 #drawing-colors{grid-column:3;grid-row:2}
 #bottom-controls{grid-row:3;flex-direction:row}
 #setup-controls{max-height:calc(100dvh - 190px)}
}
@media(prefers-contrast:more){:root{--control-available:1}}

/* Setup establishes the common glyph size and foreground. Button hit areas,
   artwork thumbnails, the app mark and color-mode previews retain their sizes. */
:root{--ui-icon-size:18px}
#header button.icon>svg,
#bottom-controls button.icon>svg,
#sheets .sheet-actions button>svg,
.direct-group button.icon>svg,
#setup-controls .direct-group button>svg,
#panel button.icon>svg,#panel .grid-choice>svg,
dialog button.icon>svg,
#setup-toggle>svg:not(.setup-chevron){
 width:var(--ui-icon-size);height:var(--ui-icon-size);color:var(--text);
}
#drawing-colors .palette-button svg circle{fill:currentColor}