/* Workbench 0.1.0 — https://github.com/ShahidHussain-srti/workbench
 * Copyright (C) 2026 shahidhussain2k13@gmail.com
 * SPDX-License-Identifier: GPL-3.0-or-later. Generated by tools/build.mjs; edit src/ instead. */

/* ── workbench.css ── */
/* Workbench — shared parts for browser-based maker tools.
 * Copyright (C) 2026 shahidhussain2k13@gmail.com
 * SPDX-License-Identifier: GPL-3.0-or-later — see LICENSE. */
/* workbench.css — the look shared by the tools: colour tokens (dark, with a
 * light theme), the top bar, sidebar panels, form controls, number boxes you
 * can drag, segmented toggles, panes, warnings, the share popup and modals.
 * Apps load it before their own stylesheet. */
/* ── tokens ─────────────────────────────────────────────────────────── */
:root{
  --bg:#0e1116;
  --bg2:#151a21;
  --panel:#171d25;
  --line:#242c38;
  --line2:#2f3a49;
  --ink:#e6ebf2;
  --ink2:#98a4b5;
  --ink3:#67748a;
  --acc:#5aa9ff;
  --acc2:#2b6fd1;
  --warn:#e0a63a;
  --bad:#e0645a;
  --ok:#4bbf8a;
  --r:9px;
  --sh:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --stage:#0a0d12;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#eef1f5; --bg2:#f7f9fb; --panel:#ffffff; --line:#dde3ea; --line2:#c9d2dd;
    --ink:#111820; --ink2:#5a6675; --ink3:#8b96a5; --stage:#e4e9ef;
    --sh:0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08);
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
/* ── top bar ────────────────────────────────────────────────────────── */
.topbar{
  height:52px; display:flex; align-items:center; gap:10px; padding:0 14px;
  background:var(--bg2); border-bottom:1px solid var(--line);
}
.brand{font-weight:650; letter-spacing:.2px; display:flex; align-items:center; gap:8px}
.logo{color:var(--acc); font-size:18px}
.grow{flex:1}
.inline{display:flex; align-items:center; gap:6px; color:var(--ink2); font-size:12px}
/* Must out-specify the generic `input[type=text]{width:100%}` declared below. */
.topbar input.namefield{width:170px; flex:none; font-size:12.5px; padding:5px 9px}
.topbar select{width:auto; min-width:92px; flex:none}
.topbar button{flex:none}
button{
  font:inherit; cursor:pointer; border-radius:7px; padding:6px 12px;
  border:1px solid var(--line2); background:var(--panel); color:var(--ink);
  transition:background .12s, border-color .12s, transform .06s;
}
button:hover{border-color:var(--acc); }
button:active{transform:translateY(1px)}
button.primary{background:var(--acc2); border-color:var(--acc2); color:#fff; font-weight:600}
button.primary:hover{background:var(--acc); border-color:var(--acc)}
button.ghost{background:transparent; color:var(--ink2)}
button.ghost:hover{color:var(--ink)}
button.wide{width:100%}
button:disabled{opacity:.45; cursor:default}
select,input[type=text],input[type=number],textarea{
  font:inherit; background:var(--bg); color:var(--ink);
  border:1px solid var(--line2); border-radius:7px; padding:5px 8px; width:100%;
}
select:focus,textarea:focus,input:focus{outline:2px solid var(--acc2); outline-offset:-1px}
textarea{resize:vertical; font-size:13px}
/* ── layout ─────────────────────────────────────────────────────────── */
.layout{display:flex; height:calc(100% - 52px)}
.sidebar{
  width:322px; flex:none; overflow-y:auto; background:var(--bg2);
  border-right:1px solid var(--line); padding-bottom:40px;
  scrollbar-width:thin;
}
.sidebar-tools{position:sticky; top:0; z-index:3; display:flex; justify-content:flex-end; padding:5px 8px;
  background:var(--bg2); border-bottom:1px solid var(--line)}
.sidebar-tools button{padding:3px 8px; font-size:11px; border-color:transparent}
.sidebar-tools button:hover{border-color:var(--line2)}
.sidebar::-webkit-scrollbar{width:9px}
.sidebar::-webkit-scrollbar-thumb{background:var(--line2); border-radius:9px; border:2px solid var(--bg2)}
.panel{border-bottom:1px solid var(--line)}
.panel > h2{
  margin:0; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink2); padding:12px 14px; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:8px;
}
.panel > h2 small{font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink3); font-size:11px}
.panel > h2::before{content:"▸"; font-size:9px; color:var(--ink3); transition:transform .15s}
.panel.open > h2::before{transform:rotate(90deg)}
.panel > .body{display:none; padding:2px 14px 16px}
.panel.open > .body{display:block}
.row{margin:0 0 11px}
.row > label,.row > .lbl{display:flex; justify-content:space-between; align-items:baseline; color:var(--ink2); font-size:12px; margin-bottom:5px}
.row > label b,.row > .lbl b{color:var(--ink); font-weight:600; font-family:var(--mono); font-size:11px}
.row.inlinerow{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.row.inlinerow > label{margin:0}
.hint{color:var(--ink3); font-size:11.5px; margin:-3px 0 12px; line-height:1.4}
label.chk{display:inline-flex; align-items:center; gap:6px; color:var(--ink2); font-size:12px; cursor:pointer; white-space:nowrap}
label.chk input{accent-color:var(--acc); margin:0}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:18px; background:transparent; margin:0; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:4px; background:var(--line2); border-radius:3px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--acc);
  margin-top:-5px; border:2px solid var(--bg2); box-shadow:0 1px 3px rgba(0,0,0,.4);
}
input[type=range]:focus{outline:none}
input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(90,169,255,.3)}
input[type=file]{font-size:11.5px; color:var(--ink2); width:100%}
input[type=file]::file-selector-button{
  font:inherit; margin-right:8px; padding:5px 10px; border-radius:6px;
  border:1px solid var(--line2); background:var(--panel); color:var(--ink); cursor:pointer;
}
/* segmented control */
.seg{display:inline-flex; background:var(--bg); border:1px solid var(--line2); border-radius:7px; padding:2px; gap:2px}
.seg button{
  border:none; background:transparent; color:var(--ink2); padding:4px 10px; border-radius:5px;
  font-size:12px; flex:1; white-space:nowrap;
}
.seg button:hover{color:var(--ink); border:none}
.seg button.on{background:var(--acc2); color:#fff; font-weight:600}
.seg.small button{padding:3px 8px; font-size:11.5px}
.seg.vert{flex-direction:column; width:100%}
/* Five or more choices wrap onto rows instead of squeezing into one. */
.seg:not(.vert):has(> button:nth-child(5)){display:grid; grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)); width:100%}
/* colours */
.swatches{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px}
.sw{position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--line2); aspect-ratio:1/.72}
.sw input{
  position:absolute; inset:-6px; width:calc(100% + 12px); height:calc(100% + 12px);
  padding:0; border:none; background:none; cursor:pointer;
}
.sw span{
  position:absolute; left:0; right:0; bottom:0; text-align:center; font-size:9px; font-family:var(--mono);
  background:rgba(0,0,0,.5); color:#fff; padding:1px 0; pointer-events:none; letter-spacing:.03em;
}
.assign{display:grid; gap:7px}
.assign .arow{display:flex; align-items:center; gap:8px}
.assign .arow > span{width:64px; color:var(--ink2); font-size:12px}
.assign .pick{display:flex; gap:5px; flex:1}
.assign .pick button{
  flex:1; height:22px; border-radius:5px; padding:0; border:2px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(128,128,128,.35);
}
.assign .pick button.on{border-color:var(--acc); box-shadow:inset 0 0 0 1px rgba(128,128,128,.35), 0 0 0 2px rgba(90,169,255,.25)}
/* ── viewport ───────────────────────────────────────────────────────── */
.viewport{flex:1; display:flex; flex-direction:column; min-width:0}
.vptabs{
  height:42px; flex:none; display:flex; align-items:center; gap:12px; padding:0 14px;
  border-bottom:1px solid var(--line); background:var(--bg2);
}
.stat{font-family:var(--mono); font-size:11px; color:var(--ink3); white-space:nowrap}
.stat b{color:var(--ink2); font-weight:600}
.stage{flex:1; position:relative; background:var(--stage); overflow:hidden; min-height:0}
.stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.hud{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  font-size:11px; color:var(--ink3); background:rgba(0,0,0,.35); padding:4px 12px; border-radius:20px;
  pointer-events:none; letter-spacing:.02em;
}
.busy{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:12px;
  background:rgba(10,13,18,.72); color:var(--ink); font-size:13px; backdrop-filter:blur(2px); z-index:5;
}
.spinner{
  width:20px; height:20px; border:2px solid var(--line2); border-top-color:var(--acc);
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.warnings{
  flex:none; max-height:132px; overflow-y:auto; border-top:1px solid var(--line);
  background:var(--bg2); padding:0 14px;
}
.warnings:empty{display:none}
.warnings .w{display:flex; gap:8px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--line); font-size:12px; color:var(--ink2)}
.warnings .w:last-child{border-bottom:none}
.warnings .w .ic{font-size:12px; line-height:1.3}
.warnings .w.warn .ic{color:var(--warn)}
.warnings .w.bad  .ic{color:var(--bad)}
.warnings .w.ok   .ic{color:var(--ok)}
/* ── modal ──────────────────────────────────────────────────────────── */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:50}
.sheet{background:var(--bg2); border:1px solid var(--line2); border-radius:12px; box-shadow:var(--sh); overflow:hidden}
.sheet > header{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line)}
.drawbody{display:flex; gap:14px; padding:14px}
#drawcanvas{
  background:#fff; border-radius:8px; border:1px solid var(--line2); cursor:crosshair;
  touch-action:none;
  background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%,transparent 75%,#f0f0f0 75%),
                   linear-gradient(45deg,#f0f0f0 25%,transparent 25%,transparent 75%,#f0f0f0 75%);
  background-size:20px 20px; background-position:0 0,10px 10px;
}
.drawtools{width:172px; display:flex; flex-direction:column; gap:9px}
.drawtools label{color:var(--ink2); font-size:12px; display:flex; justify-content:space-between}
.drawtools label b{font-family:var(--mono); color:var(--ink)}
/* undo/redo glyph buttons */
.topbar button.icon{
  font-size:15px; line-height:1; padding:5px 9px; min-width:32px;
  font-family:-apple-system,"Segoe UI Symbol",sans-serif;
}
/* side switcher */
.sidepanel{background:linear-gradient(180deg,rgba(90,169,255,.06),transparent)}
.panel > h2 small{opacity:.85}
.warnish{color:var(--warn); font-size:11px}
/* element lists */
.itemlist{display:flex; flex-direction:column; gap:4px; margin-bottom:9px}
.itemlist:empty{display:none}
.itemrow{
  display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:6px;
  border:1px solid var(--line2); background:var(--bg); cursor:pointer; font-size:12px;
  color:var(--ink2); text-align:left; width:100%;
}
.itemrow:hover{color:var(--ink); border-color:var(--acc)}
.itemrow.on{border-color:var(--acc); background:rgba(90,169,255,.10); color:var(--ink)}
.itemrow .dot{width:12px; height:12px; border-radius:3px; flex:none; box-shadow:inset 0 0 0 1px rgba(128,128,128,.4)}
.itemrow .txt{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.itemrow .num{color:var(--ink3); font-family:var(--mono); font-size:10px}
input.colorfield{
  width:100%; height:26px; padding:1px; border:1px solid var(--line2);
  border-radius:6px; background:var(--bg); cursor:pointer;
}
.swatchlist{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 10px}
.swatchlist .s{
  width:22px; height:22px; border-radius:5px; border:1px solid var(--line2);
  box-shadow:inset 0 0 0 1px rgba(128,128,128,.25);
}
.legal{margin:18px 14px 0; font-size:10.5px; line-height:1.5; color:var(--ink3)}
.legal a{color:var(--ink2)}
/* remove buttons stay red */
button.danger{color:var(--bad); border-color:rgba(224,100,90,.55)}
button.danger:hover{background:rgba(224,100,90,.12); border-color:var(--bad); color:var(--bad)}
button.danger:disabled{color:var(--bad)}
/* dismissible notices (share links) */
.w.notice{align-items:flex-start}
.w.notice .msg{flex:1; min-width:0}
.w.notice .iconbtn{width:22px; height:22px; padding:0; margin-left:6px; flex:none}
.sharelink{display:block; width:100%; margin-top:6px; font-family:var(--mono); font-size:11px}
/* share popup */
.sharepop{position:fixed; z-index:50; width:min(380px, calc(100vw - 16px)); background:var(--bg2, #1b1f27);
  border:1px solid var(--line2); border-radius:10px; padding:10px 12px 12px; box-shadow:0 10px 30px rgba(0,0,0,.45);
  opacity:0; transform:translateY(-4px); transition:opacity .16s, transform .16s; font-size:12px; color:var(--ink2)}
.sharepop.in{opacity:1; transform:none}
.sharepop.centred{top:64px; left:50%; transform:translate(-50%,-4px)}
.sharepop.centred.in{transform:translate(-50%,0)}
.sp-head{display:flex; align-items:center; gap:8px}
.sp-head b{flex:1; color:var(--ink); font-size:13px; font-weight:600}
.sp-ic{width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700;
  background:var(--ok); color:#0b0d10; flex:none}
.sharepop.warn .sp-ic{background:var(--warn)}
.sp-x{background:none; border:0; color:var(--ink3); padding:2px 4px; cursor:pointer; font-size:12px}
.sp-x:hover{color:var(--ink)}
.sp-link{display:flex; gap:6px; margin-top:9px}
.sp-link input{flex:1; min-width:0; font-family:var(--mono); font-size:11px; padding:5px 7px}
.sp-link button{flex:none; padding:5px 10px; font-size:11.5px}
.sp-body{margin:8px 0 0; line-height:1.45}
.sp-body.warn{color:var(--ink); padding:7px 9px; border-radius:7px; background:rgba(230,180,80,.1); border:1px solid rgba(230,180,80,.35)}
.sharepop.designs{width:min(400px, calc(100vw - 16px))}
.ds-list{margin-top:8px; max-height:min(52vh, 420px); overflow-y:auto; display:flex; flex-direction:column; gap:3px}
.ds-row{display:flex; align-items:stretch; gap:4px}
.ds-pick{flex:1; min-width:0; display:flex; align-items:center; gap:10px; text-align:left;
  background:var(--bg); border:1px solid var(--line2); border-radius:7px; padding:5px 9px 5px 5px}
.ds-thumb{flex:none; width:66px; height:46px; border-radius:5px; background:var(--bg2); border:1px solid var(--line);
  display:grid; place-items:center; overflow:hidden}
.ds-thumb img{width:100%; height:100%; object-fit:contain; display:block}
.ds-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.ds-pick:disabled{opacity:1; cursor:default}
.ds-row.here .ds-pick{border-color:var(--acc2)}
.ds-row.busy .ds-pick{opacity:.6}
.ds-name{color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ds-meta{color:var(--ink3); font-size:11px; white-space:nowrap}
.ds-del{flex:none; width:30px; padding:0; background:none; color:var(--ink3)}
.ds-del:hover{color:var(--bad, #e66); border-color:var(--bad, #e66)}
.ds-acts{display:flex; gap:6px; margin-top:10px}
.ds-acts button{flex:1}
.ds-foot{color:var(--ink3)}
button.linkish{background:none; border:0; padding:0; color:var(--acc); text-decoration:underline; cursor:pointer; font-size:inherit}
.privacy{margin:0 14px 14px; font-size:11px; color:var(--ink3)}
.privacy summary{cursor:pointer; color:var(--ink2)}
.privacy p{margin:6px 0 0; line-height:1.45}
.privacy code{font-family:var(--mono)}
button.flash{border-color:var(--ok) !important; color:var(--ok) !important}
/* number boxes beside sliders, drag to change */
.row.num{display:grid; grid-template-columns:1fr 84px; column-gap:10px; row-gap:3px; align-items:center}
.row.num > label{margin:0; color:var(--ink2); font-size:12px}
.row.num > input[type=range]{grid-column:1 / -1}
.nf{position:relative; display:inline-flex; align-items:center; width:100%}
.nf input[type=number]{padding-right:26px; text-align:right; font-family:var(--mono); font-size:12px; -moz-appearance:textfield}
.nf input[type=number]::-webkit-inner-spin-button,
.nf input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
.nf::after{
  content:attr(data-unit); position:absolute; right:8px; color:var(--ink3); font-size:10.5px;
  pointer-events:none; font-family:var(--mono);
}
.nf[data-unit=""] input[type=number]{padding-right:8px}
.nf input[type=number]{
  background-image:linear-gradient(90deg, var(--line2) 0 2px, transparent 2px calc(100% - 2px), var(--line2) calc(100% - 2px));
}
.nf input[type=number].edgehot{
  cursor:ew-resize;
  background-image:linear-gradient(90deg, var(--acc) 0 3px, transparent 3px calc(100% - 3px), var(--acc) calc(100% - 3px));
}
.scrublabel{cursor:ew-resize; user-select:none}
.scrublabel:hover{color:var(--ink)}
body.scrubbing, body.scrubbing *{cursor:ew-resize !important; user-select:none}
/* two panes: layout and 3D */
.panes{flex:1; display:flex; min-height:0; position:relative}
.pane{flex:1; display:flex; flex-direction:column; min-width:0; min-height:0}
.pane + .pane{border-left:1px solid var(--line)}
@media (max-width: 1100px){
  .panes{flex-direction:column}
  .pane + .pane{border-left:none; border-top:1px solid var(--line)}
}

/* reset-to-defaults button in a panel heading */
.panel > h2{position:relative}
.panel-reset{margin-left:auto; background:none; border:1px solid transparent; color:var(--ink3); font-size:13px; line-height:1;
  padding:2px 6px; border-radius:6px; cursor:pointer; opacity:0; transition:opacity .12s}
.panel:hover .panel-reset, .panel-reset:focus-visible{opacity:1}
.panel-reset:hover{color:var(--ink); border-color:var(--line2); background:var(--bg)}
@media (hover: none){ .panel-reset{opacity:1} }

/* sub-headings inside a sidebar section */
.panel h3{
  margin:16px 0 9px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink3); display:flex; align-items:center; gap:8px;
}
.panel h3::after{content:""; flex:1; height:1px; background:var(--line)}
/* a bar of view options above a pane */
.panebar{
  height:38px; flex:none; display:flex; align-items:center; gap:12px; padding:0 12px;
  border-bottom:1px solid var(--line); background:var(--bg2);
}