@font-face{font-family:Interface;src:local('Segoe UI')}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font:13px Interface,system-ui,sans-serif;color:#d7dfe9;background:#111720}button,input,select{font:inherit}button{color:inherit;background:transparent;border:1px solid transparent;border-radius:5px;cursor:pointer;padding:7px 10px;white-space:nowrap}button:hover{background:#2d3849}button:disabled{opacity:.32;cursor:default}button.active{background:#283e4b;color:#90d7bd;border-color:#365b5e}button.primary{color:#102c25;background:#9cdec2;font-weight:600}button.primary:hover{background:#b7ecd5}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #9cdec2;outline-offset:2px}input,select{background:#151c26;color:#d7dfe9;border:1px solid #384252;border-radius:4px;padding:6px;min-width:0}input[type=number]{width:100%}input[type=checkbox]{accent-color:#90d7bd}input[type=search]{width:100%;margin:12px 0}label{display:flex;align-items:center;gap:7px;color:#9eacbf;font-size:12px}#app{height:100dvh;display:flex;flex-direction:column;min-width:760px}header{height:58px;flex:none;border-bottom:1px solid #303a48;display:flex;align-items:center;padding:0 18px;gap:26px;background:#19212d}.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}.brand svg{color:#a1dfc6}.brand strong{font-size:16px;font-weight:600;letter-spacing:-.35px}.brand strong span{font-weight:400;color:#879bb0}.brand small{font-size:9px;padding:3px 5px;background:#344039;color:#a0c9b4;border-radius:3px;letter-spacing:1px}#project-name{font-size:12px;color:#99aabd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:35vw}.header-actions{margin-left:auto;display:flex;gap:6px}.toolbar{height:48px;background:#1c2532;display:flex;align-items:center;gap:14px;padding:0 12px;border-bottom:1px solid #364050;flex:none}.toolbar .button-group{display:flex;gap:2px;border-right:1px solid #374253;padding-right:12px}.toolbar .button-group button{font-size:20px;padding:3px 7px;min-width:29px}.toolbar button span{font-size:11px}.toolbar label{gap:6px}.toolbar select{padding:5px}.spacer{flex:1}main{display:flex;flex:1;min-height:0}nav{width:57px;flex:none;background:#19212d;border-right:1px solid #303a48;padding:10px 6px;display:flex;flex-direction:column;gap:5px}nav button{width:44px;height:42px;position:relative;padding:8px}nav svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}nav button small{position:absolute;bottom:1px;right:3px;font-size:8px;color:#6d8096}#workspace{flex:1;position:relative;background:#111721;min-width:0;overflow:hidden}#canvas{width:100%;height:100%;display:block;touch-action:none;outline:none}#canvas[data-tool=select]{cursor:default}#canvas:not([data-tool=select]){cursor:crosshair}#board-label{position:absolute;left:22px;top:18px;pointer-events:none;color:#738497;font:11px monospace;letter-spacing:.5px}#view-controls{position:absolute;bottom:19px;right:20px;background:#1d2734;border:1px solid #3a4658;border-radius:6px;display:flex;align-items:center;gap:8px}#view-controls button{font-size:18px;padding:4px 10px}#zoom-label{font:11px monospace;min-width:45px;text-align:center}#hint{position:absolute;left:21px;bottom:24px;pointer-events:none;color:#7f91a8;font-size:11px;max-width:calc(100% - 190px)}#toast{position:absolute;left:50%;top:16px;transform:translateX(-50%);background:#263b3d;border:1px solid #588c7b;padding:12px 18px;border-radius:6px;max-width:90%;display:none;box-shadow:0 4px 20px #0004;z-index:5}#toast.error{border-color:#d68770;background:#442f31}#drop-zone{position:absolute;inset:12px;border:2px dashed #93d6bb;background:#1b3e3aeb;display:none;place-items:center;font-size:22px;pointer-events:none}aside{width:258px;background:#1b2430;border-left:1px solid #364050;flex:none;display:flex;flex-direction:column;overflow:auto}.panel-tabs{display:flex;border-bottom:1px solid #344052;padding:8px 12px;gap:8px}.panel-tabs button{font-size:12px;flex:1}.panel-tabs .active{border-color:transparent;background:#2b3849;color:#edf2f7}#properties-panel,#macros-panel{padding:14px 16px}#properties-panel{min-height:260px}.panel-heading{font-weight:600;color:#d2dce7;font-size:12px;display:flex;justify-content:space-between;margin:0 0 16px}.panel-heading small{font-size:10px;color:#73869c;font-weight:400}.field{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:9px 0}.field label{font-size:11px;flex:1}.field input,.field select{width:120px}.field input[type=checkbox]{width:auto}.field input[type=text]{width:130px}.field-pair{display:flex;gap:10px}.field-pair .field{display:block;width:50%}.field-pair input{width:100%;margin-top:5px}.muted{color:#8294a9;font-size:11px;line-height:1.65}.small-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:15px}.small-actions button{border:1px solid #38485a;font-size:11px}.divider{border-top:1px solid #354052;margin:17px 0}.layers-section{padding:16px;margin-top:auto;border-top:1px solid #344052}#layers{display:flex;flex-direction:column;gap:4px}.layer{display:flex;align-items:center;border-radius:5px;gap:5px;padding:0 5px}.layer.active{background:#29394a}.layer input{flex:none;margin:0 4px}.layer button{display:flex;gap:8px;align-items:center;width:100%;text-align:left;font-size:11px;padding:8px 3px}.layer .chip{border-radius:3px;display:inline-flex;width:27px;height:20px;align-items:center;justify-content:center;font:10px monospace;color:#15212b}.layer .radio{margin-left:auto;font-size:8px;color:#8db9b8}.aside-footer{border-top:1px solid #344052;padding:13px 16px;color:#7d91a6;font-size:10px;display:flex;align-items:center;gap:7px}.dot{width:5px;height:5px;background:#9bdcc0;border-radius:50%}.board-bar{height:36px;border-top:1px solid #364050;background:#19222e;display:flex;align-items:center;padding-right:18px;flex:none}.board-bar>button{padding:3px 12px;font-size:18px}#board-tabs{display:flex;max-width:75%;overflow:auto;height:100%;padding-left:57px}#board-tabs button{border-radius:0;border-right:1px solid #344050;font-size:11px;padding:6px 18px}#board-tabs .active{border-bottom:2px solid #9cdec2;background:#25323f}#object-count{font-size:11px;color:#73879d}footer{display:flex;align-items:center;gap:22px;padding:0 18px;background:#121b26;height:28px;flex:none;color:#8b9db2;font:10px monospace}footer #tool-label{color:#c4d1df}dialog{background:#202b39;color:#d7e0eb;border:1px solid #485b70;border-radius:10px;padding:20px 24px;min-width:420px;max-width:640px;box-shadow:0 20px 80px #0008}dialog::backdrop{background:#09121bb0}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.dialog-header h2{font-size:18px;margin:0}.dialog-header button{font-size:22px}.dialog-actions,#dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}dialog .field input,dialog .field select{width:220px}dialog p,dialog li{font-size:12px;line-height:1.7;color:#aebed0}dialog kbd{border:1px solid #536173;padding:1px 5px;border-radius:4px;font-size:11px}.wide{width:100%;border:1px solid #4b5b6e}#macro-list{max-height:320px;overflow:auto}#macro-list button{display:block;width:100%;text-align:left;overflow:hidden;text-overflow:ellipsis;font-size:11px;border-bottom:1px solid #344052}#macro-list small{display:block;color:#73879d;margin-top:4px}.tag{background:#2c414a;color:#9bc8c5;padding:3px 6px;border-radius:4px;font-size:10px}@media(max-width:1100px){.toolbar{gap:7px}.toolbar .button-group{padding-right:5px;gap:0}.toolbar label{font-size:10px}.toolbar button{font-size:11px}aside{width:235px}.brand strong{font-size:14px}#project-name{max-width:24vw}.toolbar .button-group button{padding:3px 5px}#snap-toggle{font-size:0}#snap-toggle:after{content:'⌖';font-size:18px}}@media print{header,.toolbar,nav,aside,.board-bar,footer,#board-label,#view-controls,#hint,#toast{display:none!important}#app,main,#workspace{display:block;height:auto;background:white}#canvas{width:100%;height:90vh}}
#properties-panel,#macros-panel,.layers-section,.panel-tabs,.aside-footer{flex-shrink:0}
[hidden]{display:none!important}
#components-panel{padding:14px 16px;flex-shrink:0}#component-list{margin-top:12px;max-height:300px;overflow:auto}#component-list button{display:grid;grid-template-columns:auto 1fr;gap:7px;width:100%;text-align:left;border-bottom:1px solid #354253}#component-list span{overflow:hidden;text-overflow:ellipsis;text-align:right}#component-list small{grid-column:1/3;font-size:10px;color:#7f95a9}.panel-tabs{gap:4px}.panel-tabs button{padding:6px;font-size:11px}#dialog-error{color:#ffc2a8;background:#4a2f2b;padding:10px;border-radius:4px}
.operations-menu{position:relative}.operations-menu summary{cursor:pointer;padding:7px 10px;list-style:none}.operations-menu summary:after{content:'⌄';margin-left:7px;color:#8da0b6}.operations-menu>div{position:absolute;top:32px;right:0;min-width:210px;padding:6px;background:#273443;border:1px solid #4a5b70;border-radius:6px;z-index:20;box-shadow:0 10px 30px #0005}.operations-menu button{display:block;width:100%;text-align:left}.selector-result{display:flex;width:100%;justify-content:space-between;border-bottom:1px solid #435364}#selector-results{max-height:260px;overflow:auto}.selector-result span{color:#9edbc3}dialog{max-height:90vh;overflow:auto}

#node-menu{position:fixed;z-index:25;background:#273443;border:1px solid #526779;border-radius:6px;padding:5px;min-width:225px;box-shadow:0 10px 30px #0006}#node-menu button{display:block;text-align:left;width:100%}

nav{overflow-y:auto}nav button{flex-shrink:0}

#geometry-state,#text-state{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#geometry-state.error,#text-state.error{color:#ffb79e}footer{gap:14px}

.thermal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:8px 0}.thermal-grid label{justify-content:center;background:#18232d;padding:7px;border-radius:4px}.thermal-center{text-align:center;align-self:center;color:#adc6d4}
.probe-blink{animation:probe-blink 1s steps(1,end) infinite}@keyframes probe-blink{0%,100%{filter:brightness(1)}50%{filter:brightness(.8)}}@media(prefers-reduced-motion:reduce){.probe-blink{animation:none}}

#drc-panel{padding:14px 16px;flex-shrink:0}.drc-rules{display:flex;flex-direction:column;gap:9px}.drc-rule{display:flex;align-items:center;gap:6px}.drc-rule label{font-size:10px;display:flex;align-items:center;gap:5px;flex:1}.drc-rule input[type=number]{width:65px;padding:5px}.drc-rule input[type=checkbox]{margin:0;flex-shrink:0}.drc-warning{font-size:11px;line-height:1.5;color:#e9b994;border-left:2px solid #c38e66;padding-left:8px}#drc-results{max-height:280px;overflow:auto;margin-top:12px}.drc-error{width:100%;text-align:left;white-space:normal;border-bottom:1px solid #3b4859;border-radius:0;padding:9px 6px}.drc-error strong{display:block;font-size:11px;font-weight:500}.drc-error span{display:block;font-size:10px;margin-top:5px;color:#a7b7c8}.panel-tabs{gap:2px;padding-left:8px;padding-right:8px}.panel-tabs button{font-size:10px}

.macro-folders{margin-top:12px;font-size:11px}.macro-folders summary{cursor:pointer;overflow-wrap:anywhere}#macro-tree{max-height:210px;overflow:auto;margin-top:7px}#macro-tree details{margin:5px 0 5px 10px}#macro-tree button{display:block;text-align:left;font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.macro-controls{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.macro-controls label{font-size:11px}.macro-controls button{margin-left:auto;border:1px solid #4b5b6e}#macro-preview{display:block;width:100%;height:150px;background:#171e27;border:1px solid #344052;border-radius:5px;touch-action:none;user-select:none}#macro-preview.ready{cursor:grab}#macro-preview.ready:active{cursor:grabbing}#macro-name{overflow-wrap:anywhere}#macros-panel #macro-list{max-height:190px}

/* Keep pointer/click targets stable while the SVG scene is redrawn. Hit testing is handled by the editor model. */
#scene,#overlay,#probe-overlay,#drc-overlay{pointer-events:none}

#grid{max-width:125px}#grid-user{width:100%;background:#151c26;color:#d7dfe9;border:1px solid #384252;border-radius:4px;padding:7px;margin-top:7px;resize:vertical}#dialog-content details{margin:12px 0}#dialog-content summary{cursor:pointer}dialog{max-height:90vh;overflow:auto}

.special-form-layout{display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,1fr);gap:20px}.special-form-layout .field{flex-wrap:wrap}.special-form-layout .field input,.special-form-layout .field select{width:130px;max-width:100%}.special-form-preview{position:sticky;top:0;align-self:start}#sf-preview{display:block;width:100%;height:225px;background:#151c26;border:1px solid #415266;border-radius:5px}#sf-error{color:#ffc2a8}#sf-autosize{border:1px solid #4b5b6e;margin-bottom:12px}@media(max-width:620px){.special-form-layout{grid-template-columns:1fr}.special-form-preview{position:static}}

#drill-error{color:#ffc2a8}
#kit-fields{border:0;margin:0;padding:0;min-width:0}#kit-fields legend{color:#9eacbf;padding:0 0 12px}.manufacturing-layers{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}.manufacturing-layers .field{gap:8px;margin:4px 0}.manufacturing-layers input[type=checkbox]{width:auto}#kit-error{color:#ffc2a8}#dialog-actions{flex-wrap:wrap}@media(max-width:620px){.manufacturing-layers{grid-template-columns:1fr}}

.board-commands{display:grid;grid-template-columns:1fr 1fr;gap:8px}.board-commands button{text-align:left;border:1px solid #4b5b6e}.board-bar>.board-manage{font-size:11px;white-space:nowrap}
#add-board-size.error{color:#ffc2a8}
dialog:has(.assembly-layout){min-width:0;width:640px;max-width:calc(100vw - 24px)}.assembly-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}.assembly-layout>div{min-width:0}.assembly-layout fieldset{border:1px solid #384252;border-radius:5px;min-width:0;margin:8px 0;padding:10px}.assembly-layout legend{color:#aabacc}.assembly-layout .field{flex-wrap:wrap}.assembly-layout .field input,.assembly-layout .field select{width:100%}.assembly-check{margin:9px 0}.assembly-field-row{display:flex;align-items:center;gap:3px;padding:3px 0}.assembly-field-row label{flex:1;min-width:0}.assembly-field-row button{padding:4px 7px;flex:none}#assembly-preview{box-sizing:border-box;width:100%;background:#151c26;color:#d7dfe9;border:1px solid #384252;border-radius:4px;font:12px ui-monospace,monospace;white-space:pre;overflow:auto;padding:8px}#assembly-error{color:#ffc2a8}@media(max-width:620px){.assembly-layout{grid-template-columns:minmax(0,1fr)}dialog:has(.assembly-layout){padding:14px}}

#assembly-file-meta{border:1px solid #384252;border-radius:5px;min-width:0;margin:12px 0;padding:10px}#assembly-file-meta legend{color:#aabacc}@media(max-width:620px){dialog:has(.assembly-layout) .field{flex-wrap:wrap}dialog:has(.assembly-layout) .field input,dialog:has(.assembly-layout) .field select{width:100%}}
dialog:has(.assembly-layout){width:840px;max-width:calc(100vw - 24px)}.assembly-field-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px}.assembly-field-editor>div{min-width:0}.assembly-order-label{margin:6px 0 10px;color:#9eacbf;font-size:11px}.assembly-field-row{border:1px solid transparent;border-radius:4px;min-height:32px}.assembly-field-row>span{flex:1;min-width:0;overflow-wrap:anywhere;font-size:12px}.assembly-field-row.dragging{border-color:#90d7bd;background:#283e4b}#assembly-fields{min-height:32px}.assembly-field-editor .assembly-check{align-items:flex-start;line-height:1.5}
.assembly-field-row{cursor:grab;touch-action:none;user-select:none}.assembly-field-row.dragging{opacity:.55;cursor:grabbing}#assembly-fields:focus-visible{outline:1px solid #90d7bd;outline-offset:2px}
@media(max-width:480px){dialog{min-width:0;width:calc(100vw - 24px);max-width:calc(100vw - 24px);padding:14px}dialog .field{flex-wrap:wrap}dialog .field input:not([type=checkbox]),dialog .field select{width:100%}.dialog-header{gap:8px}.dialog-header h2{min-width:0;overflow-wrap:anywhere}.dialog-header button{flex:none}}

/* Print preview uses the same millimetre geometry as the downloaded sheet. */
dialog:has(.print-layout){min-width:0;width:1000px;max-width:calc(100vw - 24px)}
.print-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;align-items:start}
.print-options,.print-preview-column{min-width:0}.print-options fieldset{border:1px solid #384252;border-radius:5px;margin:0 0 12px;padding:10px;min-width:0}.print-options legend{color:#aabacc}
.print-layer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:5px 0}.print-layer label{display:flex;align-items:center;gap:5px;min-width:0;font-size:11px}.print-layer input[type=color]{width:28px;height:23px;padding:0;border:0;flex:none}.print-flag{display:flex;align-items:center;gap:7px;margin:7px 0}.print-options .field{gap:8px;margin:8px 0}.print-options .field input,.print-options .field select{min-width:0;width:110px}.print-options .field label{font-size:11px;flex:1}.print-preview-column{position:sticky;top:0}
#print-preview{background:#35404d;padding:12px;touch-action:none;cursor:grab;overflow:hidden;border-radius:5px}#print-preview:active{cursor:grabbing}#print-preview>svg{display:block;width:100%;height:auto;max-height:70vh;filter:drop-shadow(2px 3px 3px #0005)}#print-error{color:#ffc2a8;overflow-wrap:anywhere}#print-summary{font-variant-numeric:tabular-nums;font-size:12px}
@media(max-width:700px){.print-layout{grid-template-columns:1fr}.print-preview-column{position:static;grid-row:1}.print-options .field input,.print-options .field select{width:45%}#print-preview>svg{max-height:45vh}}

dialog:has(.print-layout){height:90vh}dialog:has(.print-layout)>form{height:100%;display:flex;flex-direction:column;min-height:0}dialog:has(.print-layout) #dialog-content{min-height:0;flex:1;overflow:auto}dialog:has(.print-layout) .dialog-header,dialog:has(.print-layout) #dialog-actions{flex:none}.print-layout{height:100%}.print-options{max-height:100%;overflow:auto;padding-right:8px}.print-preview-column{height:100%;display:flex;flex-direction:column;position:static}.print-preview-column>p{margin:7px 0}#print-preview{flex:1;min-height:150px;display:flex;align-items:center;justify-content:center}#print-preview>svg{height:100%;max-height:100%;width:100%}
.print-layout{grid-template-rows:minmax(0,1fr)}.print-preview-column{min-height:0}
.print-calibration-dialog{min-width:0;width:460px;max-width:calc(100vw - 24px)}.print-calibration-dialog h2{font-size:18px;margin-top:0}.print-calibration-dialog .dialog-actions{flex-wrap:wrap}.print-calibration-values{font-variant-numeric:tabular-nums}
@media(max-width:700px){.print-layout{height:auto;grid-template-rows:auto auto}.print-options{max-height:none;overflow:visible;padding:0}.print-preview-column{height:auto}#print-preview{height:42vh;flex:none}#print-preview>svg{max-height:100%}}

/* Bottom bar laid out like Sprint-Layout: coordinates, layer strip, mode buttons */
footer{height:46px;gap:14px;padding:0 12px}
footer .coords{display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:center;min-width:128px;font:11px monospace;color:#8b9db2;line-height:19px}
footer .coords b{font-weight:400;color:#d7dfe9;text-align:right}
.layer-strip{display:flex;align-items:stretch;border:1px solid #3a4758;border-radius:3px;overflow:hidden;height:40px}
.layer-caps{display:grid;grid-template-rows:1fr 1fr;align-items:center;padding:0 8px;font:11px Interface,system-ui,sans-serif;color:#c4d1df;background:#1b2531;border-right:1px solid #3a4758}
#layers{display:flex;flex-direction:row;gap:0}
.layer-col{display:grid;grid-template-rows:1fr 1fr;width:34px;border-right:1px solid #2a3442}
.layer-vis{display:flex;align-items:center;justify-content:center;background:#000;font:700 13px Interface,system-ui,sans-serif;cursor:pointer;user-select:none}
.layer-vis input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.layer-vis:has(input:not(:checked)){color:#56606c!important;text-decoration:line-through}
.layer-vis:has(input:focus-visible){outline:2px solid #8db9b8;outline-offset:-2px}
.layer-radio{display:flex;align-items:center;justify-content:center;padding:0;background:#1b2531;border-radius:0}
.layer-radio span{width:12px;height:12px;border-radius:50%;border:1.5px solid #8b9db2;box-sizing:border-box}
.layer-radio[aria-checked="true"] span{border-color:#4ea1ff;background:radial-gradient(circle,#4ea1ff 0 45%,transparent 50%)}
.layer-help{padding:0 7px;font:12px Interface,system-ui,sans-serif;color:#8b9db2;background:#1b2531}
.bar-buttons{display:flex;gap:6px}
.bar-buttons button{width:40px;height:38px;padding:5px;border:1px solid #3a4758;border-radius:3px;background:#1b2531;color:#8b9db2;display:flex;align-items:center;justify-content:center}
.bar-buttons button svg{width:26px;height:26px}
.bar-buttons button.active{color:#eaf2fb;background:#2f4257;border-color:#5b7591}
#rubberband-mode .off-mark{display:none}
#rubberband-mode[data-mode="off"] .off-mark{display:block}
#rubberband-mode[data-mode="small"],#rubberband-mode[data-mode="big"]{color:#eaf2fb}
#rubberband-mode[data-mode="big"]{background:#2f4257;border-color:#5b7591}
.layer-legend td{padding:3px 12px 3px 0;font-weight:700}
.layer-legend td+td{font-weight:400}
.aside-footer{margin-top:auto}

/* Interface arranged like Sprint-Layout 6.0: icon toolbar, captioned tool list, rulers, status bar with the hint field */
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
header{height:38px}
.toolbar{height:40px;gap:10px}
.toolbar .button-group{gap:1px;padding-right:10px}
.toolbar .button-group button{font-size:11px;padding:4px 5px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center;gap:3px}
#toolbox{width:152px;flex:none;background:#19212d;border-right:1px solid #303a48;display:flex;flex-direction:column;overflow-y:auto}
nav#tools{width:auto;flex:none;border:0;padding:6px 5px;gap:1px;background:none}
nav#tools button{width:100%;height:28px;padding:3px 8px;display:flex;align-items:center;gap:9px;text-align:left;font-size:12px;color:#c9d4e2}
nav#tools button .icon{width:20px;height:20px;stroke-width:1.7}
nav#tools button.active{color:#d9f3e8}
.tool-settings{border-top:1px solid #303a48;padding:8px 6px;display:flex;align-items:center;gap:4px}
.grid-control{gap:6px;flex:1;min-width:0}
.grid-control select{flex:1;min-width:0;padding:4px}
.grid-control [data-icon]{display:flex;color:#c9d4e2}
#grid-settings{padding:4px;display:flex}
#viewport{flex:1;min-width:0;min-height:0;display:grid;grid-template:20px minmax(0,1fr)/24px minmax(0,1fr)}
#ruler-corner,#ruler-top,#ruler-left{background:#1b2430;color:#aebccd;font:10px Interface,system-ui,sans-serif}
#ruler-corner{display:flex;align-items:center;justify-content:center;border-right:1px solid #3a4758;border-bottom:1px solid #3a4758;font-size:9px}
#ruler-top{display:block;width:100%;height:100%;border-bottom:1px solid #3a4758}
#ruler-left{display:block;width:100%;height:100%;border-right:1px solid #3a4758}
#ruler-top text,#ruler-left text{fill:#aebccd;font-size:10px}
.ruler-ticks{stroke:#7f8ea1;stroke-width:1;fill:none}
.ruler-mark{stroke:#ff4040;stroke-width:1;fill:none}
#workspace{background:#2b3442}
footer #hint{position:static;flex:1;min-width:0;max-width:none;height:38px;display:flex;align-items:center;padding:0 10px;border:1px solid #3a4758;border-radius:3px;color:#9fc1ff;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto}
.bar-buttons button .icon{width:26px;height:26px}
#rubberband-mode{color:#c9d4e2}
@media print{#toolbox,#ruler-corner,#ruler-top,#ruler-left{display:none!important}#viewport{display:block}}

/* Side panels as in Sprint-Layout: columns with a black title and a cross, switched from the toolbar */
aside{width:auto;flex-direction:row;overflow:visible;border-left:0;background:none}
.dock{width:240px;flex:none;display:flex;flex-direction:column;min-height:0;background:#1b2430;border-left:1px solid #364050}
.dock[hidden]{display:none}
.dock[data-dock="selector"]{width:220px}
.dock[data-dock="drc"]{width:280px}
.dock-title{height:22px;flex:none;position:relative;display:flex;align-items:center;justify-content:center;background:#000;color:#fff;font-size:12px}
.dock[data-dock="macros"] .dock-title{color:#ff5a5a}
.dock-title button{position:absolute;right:2px;top:2px;width:18px;height:18px;padding:0;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;border-radius:2px;background:#e6ebf1;color:#000}
.dock-title button:hover{background:#fff}
.dock-body{flex:1;min-height:0;overflow:auto;padding:12px}
#properties-panel.dock-body{min-height:0}
.dock-toggles{border-right:0!important;padding-right:0!important;margin-left:4px}
.dock-toggles button .icon{width:22px;height:22px}
.save-indicator{display:flex;align-items:center;gap:6px;color:#7d91a6;font-size:11px}
.header-actions{align-items:center;gap:12px}
#selector-all{margin-top:10px}
/* the status bar of the original has no state captions: errors only */
#geometry-state:not(.error),#text-state:not(.error){display:none}
footer #hint{font:12px Interface,system-ui,sans-serif}

/* Title row, menu bar and icon-only toolbar in the order of the original */
header{height:30px;padding:0 12px;gap:14px}
.brand strong{font-size:13px}
.menubar{height:26px;flex:none;display:flex;align-items:stretch;background:#19212d;border-bottom:1px solid #303a48;padding:0 6px}
details.menu{position:relative}
details.menu>summary{list-style:none;cursor:pointer;height:100%;padding:0 10px;display:flex;align-items:center;font-size:12px;border-radius:3px;user-select:none}
details.menu>summary::-webkit-details-marker{display:none}
details.menu[open]>summary,details.menu>summary:hover{background:#2d3849}
details.menu>div{position:absolute;left:0;top:100%;z-index:20;min-width:240px;display:flex;flex-direction:column;padding:4px;background:#202b39;border:1px solid #485b70;border-radius:4px;box-shadow:0 8px 30px #0008}
details.menu>div button{text-align:left;font-size:12px;padding:6px 10px;border-radius:3px}
details.menu>div hr{width:100%;margin:4px 0;border:0;border-top:1px solid #3a4758}
details.menu>div label{padding:6px 10px;font-size:12px;color:inherit}
.toolbar{gap:8px}
.toolbar details.menu>summary{height:30px;padding:4px 5px}
.toolbar>button[data-icon]{padding:4px 5px;height:30px;display:flex;align-items:center}

/* Pad shape menu and the default sizes under the tool list, as in the original palette */
.tool-row{display:flex;align-items:stretch}
.tool-row>button{flex:1;min-width:0}
details.pad-menu>summary{height:28px;padding:0 6px;font-size:10px;color:#c9d4e2}
details.pad-menu>div{position:fixed;min-width:200px}
details.pad-menu>div button{display:flex;align-items:center;gap:9px;width:100%;height:auto}
details.pad-menu>div button.active{background:#283e4b;color:#d9f3e8}
.tool-sizes{border-top:1px solid #303a48;padding:8px 6px;display:flex;flex-direction:column;gap:6px}
.size-row{display:flex;align-items:center;gap:8px}
.size-row>[data-icon]{display:flex;color:#c9d4e2}
.size-row .icon{width:22px;height:22px}
.size-pair{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.size-row input{flex:1;min-width:0;width:100%;padding:2px 6px;background:#000;color:#ffe94d;border:1px solid #3a4758;border-radius:2px;font:700 12px Interface,system-ui,sans-serif;text-align:right}
#smd-swap{align-self:flex-end;padding:2px 6px;display:flex}
#smd-swap .icon{width:18px;height:18px}

/* Right-click menu as in the original */
#context-menu{position:fixed;z-index:25;min-width:230px;padding:4px;background:#202b39;border:1px solid #485b70;border-radius:4px;box-shadow:0 8px 30px #0008}
#context-menu button{display:block;width:100%;text-align:left;font-size:12px;padding:5px 10px 5px 26px;border-radius:3px}
#context-menu button.checked{background:none;color:inherit;border-color:transparent;position:relative}
#context-menu button.checked:before{content:'✓';position:absolute;left:9px}
#context-menu hr{margin:3px 0;border:0;border-top:1px solid #3a4758}

/* Zoom tool cursor; scroll bars beside the drawing area, shown only when the content does not fit */
#canvas[data-tool=zoom]{cursor:zoom-in}
#viewport{grid-template:20px minmax(0,1fr) auto/24px minmax(0,1fr) auto}
#ruler-corner{grid-area:1/1}#ruler-top{grid-area:1/2/2/4}#ruler-left{grid-area:2/1/4/2}#workspace{grid-area:2/2}
#scroll-y{grid-area:2/3;width:10px}#scroll-x{grid-area:3/2;height:10px}
.scrollbar{position:relative;background:#1b2430;touch-action:none}
.scrollbar[hidden]{display:none}
.scrollbar .thumb{position:absolute;border-radius:2px;background:#66768a}
#scroll-x .thumb{top:3px;height:4px}#scroll-y .thumb{left:3px;width:4px}
.scrollbar:hover .thumb,.scrollbar.dragging .thumb{background:#a3b1c2}
@media print{.scrollbar{display:none!important}}

/* Rectangle list, rotate angle and align lists; size fields of a selected element are red as in the original */
#toolbox details.menu>div{position:fixed;min-width:200px}
#toolbox details.menu>div button{display:flex;align-items:center;gap:9px;width:100%;height:auto}
details.rect-menu>summary{height:28px;padding:0 6px;font-size:10px;color:#c9d4e2}
.toolbar details.rotate-menu>summary{padding:4px 2px;font-size:9px;margin-left:-4px}
.toolbar details.rotate-menu>div{min-width:110px}
details.menu>div button.checked{position:relative}
details.menu>div button.checked:after{content:'✓';position:absolute;right:10px}
.size-row input.of-selection{background:#c81e1e;color:#fff;border-color:#e05252}

/* List drillings */
.drill-list{border-collapse:collapse;width:100%}.drill-list td,.drill-list th{padding:4px 12px;text-align:right;border-bottom:1px solid #3a4758;font-weight:400}.drill-list th{color:#9eacbf}

/* Sub-menus; the grid button and its list with the colour stripes of the original */
details.submenu{position:relative}
details.submenu>summary{list-style:none;cursor:pointer;position:relative;padding:6px 26px 6px 10px;font-size:12px;border-radius:3px;user-select:none;white-space:nowrap}
details.submenu>summary::-webkit-details-marker{display:none}
details.submenu>summary:after{content:'▸';position:absolute;right:9px}
details.submenu[open]>summary,details.submenu>summary:hover{background:#2d3849}
details.submenu>div{position:absolute;left:100%;top:-5px;z-index:21;min-width:190px;display:flex;flex-direction:column;padding:4px;background:#202b39;border:1px solid #485b70;border-radius:4px;box-shadow:0 8px 30px #0008}
details.submenu>div button{text-align:left;font-size:12px;padding:6px 10px;border-radius:3px}
details.submenu>div hr,#toolbox details.menu>div hr{width:100%;margin:4px 0;border:0;border-top:1px solid #3a4758}
details.menu kbd{margin-left:auto;padding-left:24px;font:inherit;color:#8b9db2}
details.grid-menu{flex:1;min-width:0}
details.grid-menu>summary{gap:8px;height:28px;padding:0 6px;color:#c9d4e2}
details.grid-menu>summary [data-icon]{display:flex}
#grid-caption{flex:1;text-align:right;white-space:nowrap}
#grid-list button[data-grid-value],#grid-list button[data-grid-remove]{border-left:8px solid transparent;border-radius:0 3px 3px 0;gap:6px}
#grid-list button.grid-default{border-left-color:#ff2828}#grid-list button.grid-metric{border-left-color:#2848ff}#grid-list button.grid-user{border-left-color:#0a8c0a}
#grid-list .grid-text{min-width:76px;text-align:right}#grid-list .grid-alt{color:#8b9db2}
#grid-list button.active{background:#33405a;color:#fff}
#grid-list [data-grid-menu="metric"]>summary,#grid-list [data-grid-menu="user"]>summary{font-weight:700;text-align:center}
.grid-keys{border-collapse:collapse;width:100%}.grid-keys td,.grid-keys th{padding:3px 8px;text-align:left;font-weight:400}.grid-keys th{color:#9eacbf}.grid-keys select{width:100%}

/* Menus built from the menu model: check marks on the left as in the original, shortcuts on the right */
details.menu>div button,details.submenu>div button,#context-menu button,#node-menu button{white-space:nowrap}
.menubar details.menu>div{min-width:250px}
.menubar details.menu>div button,.menubar details.submenu>div button{display:flex;align-items:center;padding-left:26px}
.menubar details.submenu>summary{padding-left:26px}
.menubar details.menu>div button.checked:after{content:none}
.menubar details.menu>div button.checked:before{content:'✓';position:absolute;left:9px}
details.submenu.disabled{pointer-events:none}
details.submenu.disabled>summary{color:#66758a}
.toolbar details.zoom-menu>div button,.toolbar details.align-menu>div button{display:flex;align-items:center;justify-content:flex-start;gap:9px}
.toolbar details.menu>div .icon{width:20px;height:20px;flex:none}
#context-menu details.submenu>summary{padding:5px 26px}
#context-menu details.submenu>div{min-width:150px}
#context-menu kbd{float:right;padding-left:24px;font:inherit;color:#8b9db2}
#node-menu{min-width:230px;padding:4px;background:#202b39;border-color:#485b70;border-radius:4px;box-shadow:0 8px 30px #0008}
#node-menu button{font-size:12px;padding:5px 10px 5px 26px;border-radius:3px}
#node-menu hr{margin:3px 0;border:0;border-top:1px solid #3a4758}
details.pad-menu.through>div button[data-pad-shape] .icon{color:#6fb1ff}

/* Favourite size lists beside the size fields: stored values, "+ current value", Remove */
.size-row details.size-menu>summary{height:auto;padding:1px;color:#c9d4e2;display:flex}
#toolbox details.size-menu>div{min-width:150px}
#toolbox details.size-menu>div button{gap:6px;font-variant-numeric:tabular-nums}
#toolbox details.size-menu>div button:before{content:'';flex:none;width:12px;text-align:center;font-weight:700}
#toolbox details.size-menu>div button.active{background:none;color:inherit}
#toolbox details.size-menu>div button.active:before{content:'✓'}
#toolbox details.size-menu>div button[data-size-add]:before{content:'+';color:#34c759}
#toolbox details.size-menu>div button[data-size-remove]:before{content:'×';color:#ff5b52}
#toolbox details.size-menu details.submenu>summary{padding-left:28px}
#toolbox details.size-menu details.submenu>div button{display:flex;align-items:center}

/* Hint field of the status bar: the text of the tool and, under it, the key captions */
footer #hint{display:block;height:38px;padding:3px 10px;line-height:15px}
#hint .hint-text{overflow:hidden;text-overflow:ellipsis;white-space:pre}
#hint .hint-keys{display:flex;align-items:center;height:16px;overflow:hidden;white-space:pre;color:#c9d4e2;font-size:11px}
#hint kbd{flex:none;padding:0 5px;border:1px solid #66768a;border-radius:3px;background:#2d3849;color:#d7dfe9;font:700 10px/13px Interface,system-ui,sans-serif}
#hint kbd.held{background:#d7dfe9;border-color:#d7dfe9;color:#111720}
#hint .hint-keys span{margin:0 12px 0 5px}

/* Unit switch in the corner of the rulers */
button#ruler-corner{padding:0;border:0;border-right:1px solid #3a4758;border-bottom:1px solid #3a4758;border-radius:0;cursor:pointer}
button#ruler-corner:hover{background:#2d3849;color:#fff}

/* A toolbar list that is not available (Align without a selection) */
.toolbar details.menu.disabled{pointer-events:none}
.toolbar details.menu.disabled>summary{opacity:.32}

/* Spin button beside a size field, blue arrow of its favourite list, mixed values of a selection */
.size-field{display:flex;flex:1;min-width:0;gap:3px}
.size-grip{flex:none;width:9px;padding:0;border:0;border-radius:2px;cursor:ns-resize;background:radial-gradient(circle,#9fb0c4 1px,transparent 1.3px) 0 50%/4.5px 5px repeat}
.size-grip:hover{background-color:#2d3849}
.size-arrow{margin-left:2px;font-size:9px;color:#5b9bff}
.size-row input.of-selection.mixed{color:#c0c0c0}
#toolbox details.size-menu>div{max-height:calc(100dvh - 8px);overflow-y:auto}
#toolbox details.size-menu details.submenu{position:static}
#toolbox details.size-menu details.submenu>div{position:fixed;max-height:calc(100dvh - 8px);overflow-y:auto}
[data-menu-id="pad-through"] kbd{margin-right:20px}
#tools button:disabled{opacity:.32}
/* Narrow windows: the toolbar keeps the panel switches in view by dropping the buttons without a function */
@media (max-width:1215px){.toolbar{gap:4px}.toolbar .button-group{padding-right:6px}.toolbar .button-group:has(>button[data-icon]:disabled:not([data-action])){display:none}}

#startup-error{position:fixed;inset:35% 20% auto;z-index:10000;padding:24px;background:#202d38;border:1px solid #8ca2b3;border-radius:8px;color:#fff;box-shadow:0 0 0 100vmax #0009}#startup-error[hidden]{display:none}