#desktopSettings{white-space:nowrap;border-color:var(--desktop-accent);border-radius:8px}#desktopDialog{width:min(840px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:28px;border:1px solid var(--line);border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:0 24px 100px #0007}#desktopDialog::backdrop{background:#090e18a8;backdrop-filter:blur(5px)}.desktop-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.desktop-top h2{font-size:34px;letter-spacing:-.04em;margin:6px 0}.desktop-top p,.desktop-section p{color:var(--muted);line-height:1.6}.desktop-kicker{font-size:10px;font-weight:750;letter-spacing:.16em;color:var(--muted)}#closeDesktop{min-width:44px}.desktop-section{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}.desktop-section h3{margin:0 0 10px;font-size:18px}.desktop-options{display:grid;grid-template-columns:1fr 1fr;gap:16px}.desktop-options select{margin-top:7px}.desktop-note{font-size:12px}.store-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.store-card{border:1px solid var(--line);border-top:3px solid var(--desktop-accent);border-radius:12px;padding:18px;background:var(--bg);display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.store-card img{border-radius:6px;background:#fff;max-width:100%;height:auto;image-rendering:pixelated}.store-card h4{font-size:22px;margin:5px 0 12px}.store-card button{background:var(--paper);color:var(--ink);border-color:var(--desktop-accent)}.desktop-about #desktopVersion{font-size:12px;font-weight:400;color:var(--muted)}#desktopStorage{font-size:11px;word-break:break-all}body.dark-mode #desktopDialog{--line:#484848;--muted:#bcbcbc}body.dark-mode .store-card button{color:#fff}body.dark-mode #desktopSettings{color:#fff}#desktopMessage{min-height:1em}@media(max-width:600px){#desktopDialog{padding:18px}.desktop-top h2{font-size:28px}.store-grid{grid-template-columns:1fr}.desktop-options{grid-template-columns:1fr}}

/* Windows workspace: full-width drawing with an independently scrolling tool pane. */
@media (min-width:761px) {
 body{display:grid;grid-template-rows:auto 48px minmax(0,1fr);height:100dvh;overflow:hidden}
 header{grid-row:1;height:auto;min-height:66px;padding:10px 18px;gap:12px;box-shadow:none}
 header h1{font-size:18px;letter-spacing:.8px}header .eyebrow{font-size:9px}
 .header-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px}
 .header-actions button{min-height:36px;padding:6px 10px;font-size:12px}
 .planner-nav{grid-row:2;max-width:none;width:100%;height:48px;margin:0;padding:5px 18px;justify-content:flex-start;gap:5px;border-top:0;border-bottom:1px solid var(--line);background:var(--paper)}
 .planner-nav button{width:auto;min-width:100px;min-height:36px;padding:7px 14px;flex-direction:row;gap:8px;font-size:12px;border-width:1px;border-radius:6px}
 .planner-nav svg{width:17px;height:17px}
 .planner-nav button[aria-pressed=true]{box-shadow:inset 0 -3px var(--desktop-accent)}
 .shell,body[data-panel] .shell{grid-row:3;width:100%;max-width:none;height:100%;min-height:0;margin:0;grid-template-rows:minmax(0,1fr)}
 body[data-panel] .shell{grid-template-columns:minmax(0,1fr) 350px}
 body[data-panel] .drawing{display:flex;min-height:0}
 body[data-panel] .tray{min-width:0;padding:16px;border-left:1px solid var(--line);overflow:auto;scrollbar-gutter:stable}
 body[data-panel] .counts{display:flex}
 .panel-heading,body[data-panel='edit'] .panel-heading,body[data-panel='measure'] .panel-heading{gap:10px;margin-bottom:14px}
 .panel-heading h2{font-size:17px;letter-spacing:.4px}
 .panel-heading button{min-height:34px;font-size:11px;padding:5px 9px}
 .tool-card{padding:13px;border:1px solid var(--line);border-radius:8px;margin-bottom:12px}
 .tool-card>h3{font-size:12px;letter-spacing:.6px;margin-bottom:10px}
 .tray button,.tray select,.tray input{min-height:36px;border-width:1px}
 .tray select,.tray .field input{font-size:14px;padding:6px 8px}
 .tray .field label{font-size:12px;min-height:28px;margin-bottom:4px}
 .tray .fields{gap:10px}.tray .groups{gap:6px}.tray .groups button{font-size:12px;padding:6px}
 .tray .small-actions{gap:6px}.tray .small-actions button{font-size:12px}
 .tray summary{min-height:36px;font-size:13px}.tray details p,.tray details li{font-size:12px}
 .tray .section-title{margin-top:13px}.tray .subpanel{margin-top:12px;padding-top:12px}
 .counts{min-height:53px;padding:7px 18px}.counts-detail{gap:22px}
 .view-controls{flex-direction:row;align-items:flex-start;gap:8px;max-width:calc(100% - 130px)}
 .view-controls .grid-controls{flex-wrap:wrap}
 .view-controls button{min-height:36px;font-size:12px;padding:6px 9px}
 .view-controls .grid-controls input{height:36px;min-height:36px;font-size:13px}
 .view-buttons{flex-shrink:0}.view-controls .grid-style-panel{top:100%}
 .zoom button{min-height:36px}.zoom{grid-template-columns:36px 36px;right:18px}
 .zoom button{width:36px}.dimension-strip{bottom:30px;left:42px;right:18px;max-width:620px;margin:auto}
 .dimension-strip span{font-size:10px}.dimension-strip b{font-size:12px}
 .gesture{font-size:10px;max-width:260px}.legend{left:18px}
}
@media (min-width:1001px){.panel-heading [data-back]{display:none}}
@media (min-width:1600px){body[data-panel] .shell{grid-template-columns:minmax(0,1fr) 390px}body[data-panel] .tray{padding:20px}}
@media (min-width:761px) and (max-width:1100px){
 header{align-items:flex-start}header>div:first-child{flex-shrink:0;padding-top:5px}header h1{font-size:16px}
 body[data-panel] .shell{grid-template-columns:minmax(0,1fr) 320px}
 .view-controls{flex-direction:column;max-width:calc(100% - 104px)}
 .counts-detail{gap:9px}.counts{padding:7px 12px}.counts-main strong{font-size:22px}
}
@media (min-width:761px){
 .tray .profile-start{height:auto;max-width:none;width:100%;margin:0 0 12px;padding:0 0 12px;grid-template-columns:minmax(0,1fr);gap:8px;border-bottom:1px solid var(--line)}
 .tray .profile-start button{height:auto;min-height:34px;font-size:12px}.tray .profile-start .field label{font-size:12px;margin-bottom:5px}
}

.length-unit-control{display:flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap}.length-unit-control select{width:auto;min-height:34px;padding:5px;font-size:12px}.header-actions{flex-wrap:wrap}
/* Explicit fine controls keep arbitrary typed precision and avoid 1-unit native steps. */
input[data-length-field]{appearance:textfield;-moz-appearance:textfield}
input[data-length-field]::-webkit-inner-spin-button,input[data-length-field]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.profile-stepper{display:flex;gap:4px;align-items:center}.profile-stepper input{min-width:0;flex:1}.profile-stepper button{width:30px;min-width:30px;padding:4px;min-height:38px;font-size:18px}
.profile-shape-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0}.profile-shape-actions label{display:flex;gap:7px;align-items:center}.profile-shape-actions input[type=checkbox]{width:auto;min-height:0}.wall-profile-controls{margin-top:12px}.wall-profile-controls[hidden]{display:none}.wall-profile-controls label{font-size:12px}

/* The drawing stays light while the surrounding menus follow the theme. */
body.dark-mode .drawing{--bg:#f4f4f0;--paper:#fff;--ink:#1a1a1a;--muted:#555;--line:#bfbfbf;--accent:#1a1a1a;color:#1a1a1a}
/* Dark mode uses a white selection fill, so selected labels must be dark. */
body.dark-mode button[aria-pressed=true]{color:#1a1a1a}
body.dark-mode .drawing button[aria-pressed=true]{color:#fff}
body.dark-mode .selection button{color:#1a1a1a}
body.dark-mode .selection button[aria-pressed=true]{color:#fff}
body.dark-mode #toast{background:#1a1a1a;color:#fff}