/* Desk mode — 1-bit illustrated desk, inspired by early-90s office metaphors */
.desk-win .win-body { padding: 0 !important; display: flex; }
.desk-win .win-body > .view-host { flex: 1; display: flex; }
.desk { --dw: #e9e6de; --dd: #c9c4b8; --dk: #f6f4ee; --g1: #dcd8ce; --g2: #b8b2a5; flex: 1; display: flex; flex-direction: column; background: var(--dw); min-height: 100%; }
:root[data-night="1"] .desk { --dw: #2a3133; --dd: #3d4648; --dk: #323b3d; --g1: #3a4446; --g2: #4b5658; }
.desk-top { display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-bottom: 2px solid var(--ink); background: var(--card); font: 13px var(--mono); }
.desk-top button { border: 0; background: none; font: 600 13px var(--mono); cursor: pointer; color: var(--ink); padding: 3px 6px; border-radius: 5px; }
.desk-top button:hover { background: var(--ink); color: var(--card); }
.desk-cap { flex: 1; text-align: center; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-cap b { color: var(--ink); }
.desk-svg { flex: 1; width: 100%; min-height: 300px; max-height: calc(100vh - 220px); display: block; }
.desk-svg .s { stroke: var(--ink); stroke-width: 2; } .desk-svg .s1 { stroke: var(--ink); stroke-width: 1.4; } .desk-svg .s3 { stroke: var(--ink); stroke-width: 3; } .desk-svg .s4 { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.desk-svg .nf { fill: none; }
.desk-svg .f-wall { fill: var(--dw); } .desk-svg .f-desk { fill: var(--dk); } .desk-svg .f-dot { fill: var(--ink); opacity: .32; }
.desk-svg .f-w { fill: var(--card); } .desk-svg .f-g1 { fill: var(--g1); } .desk-svg .f-g2 { fill: var(--g2); } .desk-svg .f-ink { fill: var(--ink); }
.desk-svg .f-acc { fill: var(--accent); } .desk-svg .f-bad { fill: var(--bad); }
.desk-svg line { stroke: var(--ink); }
.desk-svg .lbl { font: 700 19px var(--mono); text-anchor: middle; fill: var(--ink); }
.desk-svg .lbl-big { font: 700 30px var(--mono); text-anchor: middle; fill: var(--ink); }
.desk-svg .lbl-xs { font: 600 11px var(--mono); text-anchor: middle; fill: var(--muted); }
.desk-svg .lbl-sm { font: 700 13px var(--mono); text-anchor: middle; } .desk-svg .w { fill: #fff; }
.desk-svg .obj { cursor: pointer; outline: none; transition: translate .12s, scale .12s, filter .12s; transform-box: fill-box; transform-origin: center; }
.desk-svg .obj:hover, .desk-svg .obj:focus-visible { filter: drop-shadow(4px 4px 0 var(--accent)); translate: 0 -3px; }
.desk-svg .obj.pop { scale: 1.05; }
.desk-svg .obj[data-o="clock"]:hover, .desk-svg .obj[data-o="clock"]:focus-visible { translate: none; }
.desk-dock { display: flex; border-top: 2px solid var(--ink); background: var(--card); }
.desk-dock button { flex: 1; border: 0; background: none; padding: 8px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; font: 10.5px var(--mono); color: var(--ink); }
.desk-dock button + button { border-left: 2px solid var(--ink); }
.desk-dock button:hover { background: var(--ink); color: var(--card); }
.desk-dock button:hover .pix rect[fill="var(--ink)"] { fill: var(--card); }
@media (max-width: 860px) { .desk-dock span { display: none; } .desk-svg { max-height: none; } }