/* Design your own - the drawing sheet the customer gets.
   The first block is the engine own controls, SLICED VERBATIM from
   index.html so the customer gets the identical canvas. Re-cut it whenever
   the builder changes. The palette vars are declared here because sign.html
   has its own set and does not define these. */
.studio{--line:#E2DCD2;--muted:#8B8275;--ink:#22303C;--brand:#B35400}
.sp-wrap{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:8px;background:#fff}
.sp-canvas{background:#F9F7F3;padding:6px 8px 2px;touch-action:none;position:relative}
/* Pinch to zoom the drawing itself. The canvas has to keep touch-action:none
   or a one-finger drag on a fence line scrolls the page, so the browser's own
   pinch never reaches it - these do the same job for a stylus or a mouse. */
/* 15 Sep 2026: the zoom buttons used to float over the bottom-right of the
   drawing, on top of the lot corner. They sit in their own row under the
   drawing now, next to the Draw / Scroll switch. In Scroll the canvas hands
   one-finger touches back to the page. */
.sp-tools{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;
  padding:6px 8px;background:#F9F7F3;border-top:1px solid var(--line)}
.sp-mode{display:flex;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.sp-mode button{font:inherit;font-size:13px;font-weight:700;line-height:1;min-height:36px;padding:6px 14px;
  border:0;background:transparent;color:var(--muted);cursor:pointer}
.sp-mode button.on{background:#D97757;color:#fff}
.sp-canvas.scroll,.sp-canvas.scroll svg.sp-svg{touch-action:pan-y pinch-zoom}
/* ...but the things you grab stay grabbable in Scroll: a line, a corner, a
   gate, the house. Their own touch-action wins over the canvas's pan-y. */
.sp-canvas.scroll .sp-e,.sp-canvas.scroll .sp-c,.sp-canvas.scroll .sp-g,.sp-canvas.scroll .sp-h{touch-action:none}
.sp-zoom{display:flex;align-items:center;gap:4px;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:3px}
.sp-zoom button{font:inherit;font-size:15px;font-weight:700;line-height:1;min-width:34px;
  min-height:32px;padding:4px 8px;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:6px}
.sp-zoom button:last-child{font-size:12px;font-weight:600}
.sp-zoom button:hover{background:#F1EDE6;color:#B35400}
.sp-zl{font-size:11.5px;font-weight:700;color:var(--muted);min-width:26px;text-align:center;
  font-variant-numeric:tabular-nums}
.sp-canvas.arm{box-shadow:inset 0 0 0 2px #F07300}
/* A deep lot drew 1275px tall inside the estimate panel, which is three
   scrolls of nothing. The viewBox keeps the drawing square either way. */
svg.sp-svg{display:block;width:100%;height:auto;margin:0 auto;
  max-height:min(430px,58vh);touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.sp-g{cursor:grab} .sp-g:active{cursor:grabbing}
.sp-c{cursor:move} .sp-e{cursor:move}
.sp-bar{border-top:1px solid var(--line);background:#FAF8F5;padding:8px 10px}
.sp-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sp-row+.sp-row{margin-top:6px}
.sp-cap{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:#8B8275}
.sp-cap.on{color:#F07300}
.sp-lab{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#A9A296}
.sp-who{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:#B35400}
.sp-pos{font-size:12.5px;color:var(--muted)}
.sp-hint{font-size:12.5px;color:var(--muted)}
.sp-bar button{font:inherit;font-size:13px;font-weight:600;padding:7px 11px;border-radius:7px;
  border:1px solid var(--line);background:#fff;color:inherit;cursor:pointer;min-height:36px}
.sp-bar button:hover{border-color:#B35400;color:#B35400}
.sp-bar button.x{margin-left:auto;color:#D33A2C}
.sp-seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#fff}
.sp-seg button{border:0;border-radius:0;border-right:1px solid var(--line);padding:7px 10px;min-height:34px}
.sp-seg button:last-child{border-right:0}
.sp-seg button[aria-pressed=true]{background:#B35400;color:#fff}
.sp-seg button[aria-pressed=true]:hover{color:#fff}
.sp-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line)}
.sp-head b{font-size:14px}
.sp-tag{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:2px 6px;border-radius:4px;background:rgba(240,115,0,.12);color:#F07300}
.sp-tag.done{background:rgba(46,125,91,.14);color:#2E7D5B}
.sp-tag.mine{background:rgba(240,115,0,.12);color:#B35400}
.sp-ft{margin-left:auto;font-weight:700;font-size:15px}
.sp-warn{font-size:12px;color:#D33A2C;padding:6px 10px;border-top:1px solid var(--line)}

/* ---- the sheet itself ---- */
.studio{position:fixed;inset:0;z-index:60;background:rgba(20,32,43,.55);display:flex;align-items:flex-end;justify-content:center}
body.studio-open{overflow:hidden}
.studio-in{background:#fff;width:100%;max-width:640px;max-height:96vh;display:flex;flex-direction:column;border-radius:16px 16px 0 0;box-shadow:0 -14px 44px rgba(0,0,0,.32);overflow:hidden}
@media (min-width:700px){ .studio{align-items:center} .studio-in{border-radius:16px;max-height:92vh} }
.studio-top{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #E2DCD2}
.studio-top b{display:block;font:700 17px "Playfair Display",Georgia,serif;color:#22303C}
.studio-top span{display:block;font-size:12.5px;color:#8B8275;margin-top:2px}
.studio-x{margin-left:auto;background:none;border:1px solid #E2DCD2;border-radius:9px;padding:9px 14px;font:inherit;font-size:13.5px;font-weight:600;color:#5b5348;min-height:44px}
.studio-body{flex:1;overflow:auto;padding:12px 12px 4px;-webkit-overflow-scrolling:touch}
.studio-foot{border-top:1px solid #E2DCD2;padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:14px;background:#FAF8F5}
.studio-read{flex:1;min-width:0}
.studio-ft{font-size:13px;color:#5b5348;font-weight:600}
.studio-price{font:700 21px "Playfair Display",Georgia,serif;color:#22303C;font-variant-numeric:tabular-nums;margin-top:2px}
.studio-price span{font:600 12px "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.1em;color:#8B8275;margin-left:6px}
.studio-price .wait{font:400 13px inherit;color:#8B8275;letter-spacing:0;text-transform:none}
.studio-price .bad{font:400 13px inherit;color:#C0392B;letter-spacing:0;text-transform:none}
.studio-go{background:#2E7D5B;border:0;color:#fff;font:inherit;font-weight:700;font-size:15px;padding:14px 20px;border-radius:11px;min-height:50px;white-space:nowrap}
.studio-go:disabled{background:#CFC9BF}
button.pick.lay.mine{border-style:dashed}
.studio-open-card .draw{display:grid;place-items:center;height:104px;color:#B35400;font-size:32px}
/* 11 Sep 2026: the autosave word under the price - "Saving…", then "Saved". */
.studio-saved{font-size:11px;color:#8B8275;min-height:14px;margin-top:2px}
.studio-saved.on{color:#22303C}