/* Drawing tool — dark "Nocturne" theme remap of the iso-piping prototype.
   Tokens below intentionally reuse the same variable NAMES as the
   prototype (--panel, --hairline, --ink, --iso, ...) so none of its
   internal CSS had to be rewritten — only repainted. */
/* Defined on :root (not scoped to .draw-scope) on purpose: the canvas
   engine reads these through getComputedStyle(document.documentElement)
   (see getCss() in engine.js) since a <canvas> can't pick up CSS colors
   through var() the way DOM elements do - so these have to be real root
   custom properties, not just inherited ones. */
:root{
  --panel: var(--surface); --panel-2: var(--surface-2);
  --hairline: var(--divider); --hairline-strong: var(--divider-strong);
  --ink: var(--text); --ink-dim: var(--text-soft);
  --lock: var(--green); --iso: var(--accent-300); --free: var(--text-softer);
  --danger: var(--red); --danger-line: var(--red-line);
  --bg-grid: var(--divider);
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* The drawing CANVAS itself (not the surrounding tool/BOM/footer panels,
     which stay on the app's normal dark theme) is deliberately a separate,
     light "paper" - the default pipe/component colour is black, and the
     dimension/annotation ink is black by default too (adjustable via the
     colour picker in the toolbar), so the canvas needs to be light for
     either to be visible at all. These --dw-canvas-* tokens are read only
     by drawing-tool.js's canvas-drawing code (getCss() calls) and by
     #stage below - never by the tool/BOM/footer chrome, which keeps using
     the --panel/--ink/--hairline tokens above unchanged. */
  --dw-canvas-bg: #FBFAF4;
  --dw-canvas-grid: rgba(15,17,26,.10);
  --dw-canvas-hair: rgba(15,17,26,.24);
  --dw-canvas-iso: #6B7F5B;
  --dw-canvas-lock: #2f8f5b;
  --dw-canvas-free: rgba(15,17,26,.42);
}
.draw-scope{ font-family:'Inter', system-ui, sans-serif; color:var(--ink); }
.draw-scope *{ box-sizing:border-box; }

#tools{
  width:216px; flex-shrink:0; background:var(--panel);
  overflow-y:auto; padding:12px;
}
/* Desktop drawing screen: panels scale with the available width instead of
   staying pinned to a fixed pixel size - see .dw-desktop-row overrides
   further down for the actual fluid flex-basis/min/max values. */
.grp-label{ font-size:10.5px; color:var(--ink-dim); letter-spacing:.06em; margin:14px 0 6px 2px; text-transform:uppercase; }
.grp-label:first-child{ margin-top:0; }
.tool-btn{
  display:flex; align-items:center; gap:9px; width:100%; min-height:38px;
  background:transparent; border:1px solid transparent; color:var(--ink); border-radius:8px;
  font-size:12.8px; text-align:left; padding:7px 9px; cursor:pointer; margin-bottom:3px;
}
.tool-btn:hover{ border-color:var(--hairline); background:var(--wash); }
.tool-btn[hidden]{ display:none; }
#typeRunInput{ font-family:var(--mono, ui-monospace, monospace); }
.type-run-help{ font-size:11px; color:var(--muted, #6b6a60); line-height:1.45; margin-top:4px; }
#btnLastTool{ border:1px dashed var(--hairline); justify-content:center; font-weight:600; }
.tool-btn.active{ background:var(--accent-900); border-color:var(--accent); color:var(--accent-200); }
.tool-btn .ic{ width:17px; text-align:center; opacity:.85; font-family:var(--mono); font-size:12px; flex-shrink:0; }
.tool-btn .key-badge{
  margin-left:auto; flex-shrink:0; font-family:var(--mono); font-size:10px; letter-spacing:.02em;
  color:var(--ink-dim); border:1px solid var(--hairline); border-radius:5px; padding:1px 5px; opacity:.75;
}
.tool-btn.active .key-badge{ color:var(--accent-200); border-color:var(--accent); opacity:1; }

/* ---------- right-click context menu ----------------------------------- */
.ctx-menu{
  position:absolute; z-index:300; min-width:200px; max-width:260px; background:var(--panel);
  border:1px solid var(--hairline-strong); border-radius:10px; padding:5px;
  box-shadow:0 14px 40px rgba(0,0,0,.45); font-family:'Inter', system-ui, sans-serif;
  pointer-events:auto;
}
.ctx-menu .ctx-item{
  display:block; width:100%; text-align:left; background:none; border:none; color:var(--ink);
  font-size:12.8px; padding:8px 10px; border-radius:6px; cursor:pointer; font-family:inherit;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ctx-menu .ctx-item:hover{ background:var(--wash); }
.ctx-menu .ctx-item.danger{ color:var(--danger); }
.ctx-menu .ctx-item.danger:hover{ background:rgba(229,90,90,.12); }
.ctx-menu .ctx-item.active{ color:var(--accent-200); }
.ctx-menu .ctx-item.disabled{ color:var(--ink-dim); cursor:default; opacity:.65; }
.ctx-menu .ctx-item.disabled:hover{ background:none; }
.ctx-menu .ctx-sep{ height:1px; background:var(--hairline); margin:5px 4px; }
.ctx-menu .ctx-label{
  font-size:10px; color:var(--ink-dim); letter-spacing:.06em; text-transform:uppercase;
  padding:8px 10px 4px;
}

.draw-scope .field{ margin:10px 2px; }
.draw-scope .field label{ display:block; font-size:10.5px; color:var(--ink-dim); margin-bottom:5px; letter-spacing:.05em; text-transform:uppercase; }
.draw-scope .field input[type=text], .draw-scope .field select{
  width:100%; background:var(--panel-2); border:1px solid var(--hairline); color:var(--ink); border-radius:8px;
  font-family:var(--mono); font-size:12.5px; padding:8px 9px;
}
.draw-scope .field input[type=text]:focus, .draw-scope .field select:focus{ outline:none; border-color:var(--accent); }
.draw-scope .field input[type=range]{ width:100%; accent-color: var(--accent); }
.draw-scope .field input[type=color]{
  width:100%; height:38px; padding:3px; background:var(--panel-2); border:1px solid var(--hairline);
  border-radius:8px; cursor:pointer;
}
.miniRow{ display:flex; gap:6px; margin-top:6px; }
.miniRow .tool-btn{ flex:1; text-align:center; justify-content:center; }

.layerRow{
  display:flex; align-items:center; justify-content:space-between; gap:6px; border-radius:8px;
  padding:7px 9px; border:1px solid transparent; cursor:pointer; margin-bottom:3px;
}
.layerRow:hover{ border-color:var(--hairline); }
.layerRow.active{ background:var(--accent-900); border-color:var(--accent); }
.layerRow .lname{ font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.layerRow .lleft{ display:flex; align-items:center; gap:8px; min-width:0; }
.layerRow .lright{ display:flex; align-items:center; gap:2px; flex-shrink:0; }
.swatch{ width:17px; height:17px; border:none; padding:0; background:none; flex-shrink:0; border-radius:4px; overflow:hidden; }
.ldel{ opacity:.5; font-size:14px; padding:2px 4px; }
.ldel:hover{ opacity:1; color:var(--danger); }
/* toggles whether a layer's pipes/fittings count toward paint m2 at all -
   "off" (no paint, e.g. bare/unpainted piping) is excluded from every
   total and from the Excel export's Calculator sheet, not just shown
   separately. */
.lpaint{
  opacity:.6; font-size:9.5px; font-weight:600; letter-spacing:.04em; padding:3px 6px;
  border-radius:5px; border:1px solid transparent; white-space:nowrap; text-transform:uppercase;
}
.lpaint:hover{ opacity:1; border-color:var(--hairline); }
.lpaint.off{ opacity:.4; text-decoration:line-through; }

#stage{ position:relative; flex:1; min-height:0; background: var(--dw-canvas-bg); }
#stage canvas{ position:absolute; inset:0; display:block; cursor:crosshair; touch-action:none; }
body.drawing-locked #stage canvas{ cursor:grab; }

#hud{
  position:absolute; top:14px; right:14px; z-index:4;
  background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(6px); border:1px solid var(--hairline); border-radius:10px;
  padding:11px 15px; min-width:172px; font-family:var(--mono); font-size:12px;
  line-height:1.85; color:var(--ink); pointer-events:none;
}
#hud .row{ display:flex; justify-content:space-between; gap:18px; }
#hud .row b{ color:var(--ink-dim); font-weight:400; }
#hud .mode{ font-weight:600; }
#hud .mode.lock{ color:var(--lock); }
#hud .mode.iso{ color:var(--iso); }
#hud .mode.free{ color:var(--free); }

#hint{
  position:absolute; left:14px; top:14px; z-index:4;
  font-family:var(--mono); font-size:11px; color:var(--ink-dim);
  background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(6px); border:1px solid var(--hairline); border-radius:10px;
  padding:9px 13px; max-width:300px; line-height:1.7;
}
#hint b{ color:var(--ink); }

#bom{
  width:288px; flex-shrink:0; background:var(--panel);
  display:flex; flex-direction:column; min-height:0;
}
#bom .bomhead{
  padding:13px 14px 9px 14px; border-bottom:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:space-between;
}
#bom .bomhead h2{ font-size:11.5px; margin:0; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); font-weight:600; }
#bom .bomhead button{
  font-size:10.5px; padding:5px 9px; background:transparent; border:1px solid var(--hairline); border-radius:6px;
  color:var(--ink-dim); cursor:pointer; min-height:30px;
}
#bom .bomhead button:hover{ color:var(--ink); border-color:var(--hairline-strong); }
#bomlist{ flex:1; overflow-y:auto; padding:4px 0; }
.bomrow{
  display:grid; grid-template-columns: 20px 1fr 56px; gap:2px 8px; padding:8px 14px;
  border-bottom:1px solid var(--panel-2); font-size:12.5px; align-items:center;
}
.bomrow .no{
  width:18px; height:18px; border-radius:50%; border:1px solid var(--hairline-strong);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10px; color:var(--ink-dim); flex-shrink:0;
}
.bomrow .t{ color:var(--ink); }
.bomrow .s{ color:var(--ink-dim); font-family:var(--mono); font-size:11px; }
.bomrow .q{ text-align:right; font-family:var(--mono); color:var(--accent-300); align-self:center; }
.bomrow-edit{ cursor:pointer; }
.bomrow-edit:hover{ background:var(--panel-2); }
.bomtype{ margin-left:6px; padding:1px 7px; border:1px solid var(--ink-dim); border-radius:6px; background:transparent; color:var(--ink-dim); font:inherit; font-size:10.5px; cursor:pointer; }
.bomtype:hover{ color:var(--ink); border-color:var(--accent-300); }
.bomempty{ padding:22px 14px; font-size:12.5px; color:var(--ink-dim); }
#bomtotal{
  padding:11px 14px; border-top:1px solid var(--hairline); font-family:var(--mono);
  font-size:11.5px; color:var(--ink-dim);
}
#bomtotal .trow{ display:flex; justify-content:space-between; padding:3px 0; }
#bomtotal b{ color:var(--ink); font-weight:600; }
#layerTotals{ margin-top:7px; padding-top:7px; border-top:1px dashed var(--hairline); }
#layerTotals .lrow{ display:flex; align-items:center; justify-content:space-between; padding:3px 0; font-size:11px; }
#layerTotals .lname{ display:flex; align-items:center; gap:6px; }
#layerTotals .ldot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
#paintRates{ border-top:1px solid var(--hairline); padding:10px 14px; max-height:150px; overflow-y:auto; }
#paintRates .prhead{ font-size:10.5px; color:var(--ink-dim); letter-spacing:.05em; margin-bottom:6px; text-transform:uppercase; }
#paintRates .prrow{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 0; font-size:11.5px; }
#paintRates .prrow span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#paintRates .prrow input{
  width:64px; background:var(--panel-2); border:1px solid var(--hairline); color:var(--ink); border-radius:6px;
  font-family:var(--mono); font-size:11.5px; padding:4px 6px; text-align:right;
}
#paintRates .prrow input:focus{ outline:none; border-color:var(--accent); }

#drawFooter{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 14px; border-top:1px solid var(--hairline);
  background:var(--panel); flex-shrink:0;
}
#drawFooter button.tb{
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; min-height:38px;
  background:transparent; color:var(--ink); border:1px solid var(--hairline); border-radius:8px;
  padding:0 13px; cursor:pointer; letter-spacing:.01em;
}
#drawFooter button.tb:hover{ border-color:var(--hairline-strong); }
#drawFooter button.tb.active{ border-color:var(--accent); color:var(--accent-200); background:var(--accent-900); }
#drawFooter button.tb.danger:hover{ border-color:var(--danger-line); color:var(--danger); }
#drawFooter .sep{ width:1px; align-self:stretch; background:var(--hairline); margin:0 2px; }
#drawFooter .spacer{ flex:1; }
#drawFooter .note{ font-size:11px; color:var(--ink-dim); font-family:var(--mono); }
body.drawing-locked #drawFooter .edit-only{ display:none; }
body.drawing-locked #hint, body.drawing-locked #hud{ display:none; }
body.drawing-locked #btnGetJp{ display:none; }

/* ---------- in-canvas modal + toast (stand in for prompt/alert/confirm,
   which a sandboxed preview silently ignores) ------------------------- */
.iso-modal-scrim{
  position:absolute; inset:0; z-index:200; background:rgba(10,11,18,.62);
  display:flex; align-items:center; justify-content:center; padding:16px;
  font-family:'Inter',sans-serif; pointer-events:auto;
}
.iso-modal-box{
  width:min(360px,100%); background:var(--surface); border:1px solid var(--divider-strong);
  border-radius:16px; padding:18px; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.iso-modal-title{ font-size:15.5px; font-weight:600; color:var(--text); margin-bottom:12px; }
.iso-modal-msg{ font-size:13px; color:var(--text-soft); line-height:1.5; margin-bottom:16px; }
.iso-modal-label{ display:block; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-soft); margin:10px 0 5px; }
.iso-modal-label:first-of-type{ margin-top:0; }
.iso-modal-input{
  width:100%; background:var(--surface-2); border:1px solid var(--divider-strong); color:var(--text);
  border-radius:9px; font-size:14.5px; padding:10px 12px; font-family:inherit;
}
.iso-modal-input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.iso-modal-actions{ display:flex; gap:10px; margin-top:18px; }
.iso-modal-btn{
  flex:1; min-height:44px; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer;
  border:1px solid var(--divider-strong); background:transparent; color:var(--text); font-family:inherit;
}
.iso-modal-btn.iso-modal-ok{ border-color:var(--accent); background:var(--accent-700); color:var(--accent-100); }
.iso-modal-btn.iso-modal-danger{ border-color:var(--danger-line); color:var(--danger); }
#isoToastHost{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:250; display:flex; flex-direction:column; gap:8px; pointer-events:none; align-items:center; }
.iso-toast{
  background:var(--surface); border:1px solid var(--divider-strong); color:var(--text);
  font-size:13px; padding:11px 16px; border-radius:10px; max-width:320px; text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4); opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease;
}
.iso-toast.show{ opacity:1; transform:none; }

/* ---------- responsive layout for the shared tool/stage/bom nodes ----- */
.draw-desktop-row{ display:flex; height:100%; min-height:0; width:100%; flex:1; min-width:0; }
.draw-desktop-row #tools, .draw-desktop-row #bom{ height:100%; }

/* app.js decides mobile vs desktop from the real viewport width (see
   mountDrawingTool()) and passes that through to drawing-tool.js's mount(),
   which toggles this class on <body> - so these rules track the actual
   window, not a fixed demo frame. */
body.drawing-mobile .tool-btn{ min-height:44px; font-size:13.5px; }
body.drawing-mobile #bom .bomhead button{ min-height:36px; }
body.drawing-mobile #hint{ max-width:168px; font-size:10px; line-height:1.55; padding:7px 9px 8px; }
body.drawing-mobile #hint #hintBody{ display:none; }
body.drawing-mobile #hud{ min-width:108px; padding:8px 10px; font-size:10.5px; line-height:1.7; }
/* On mobile, #tools/#bom are re-parented into the app's generic bottom
   sheet (see renderDwToolsSheet()/renderDwBomSheet() in app.js) instead of
   sitting in a fixed-width desktop rail - stretch them to fill it. */
body.drawing-mobile #tools, body.drawing-mobile #bom{ width:100%; max-width:none; height:auto; }

/* ============================================================
   Production screen layout (app.js's "drawing" screen) - the app-header/
   tabbar/sheet chrome around the tool comes from styles.css; this part is
   just the drawing-tool-specific wrapper the tool's own nodes get mounted
   into (#dwStage/#dwTools/#dwBom/#dwFooter, from mountDrawingTool()).
   ============================================================ */
.app-content.dw-flush{ padding-left:0; padding-right:0; padding-top:0; gap:0; overflow:hidden; }
.dw-title-row{ display:flex; gap:8px; padding:10px 12px; border-bottom:1px solid var(--divider); align-items:center; flex:none; }
.dw-title-row input{ flex:1; }
.dw-wrap{ display:flex; flex-direction:column; flex:1; min-height:0; }
.dw-stage{ position:relative; flex:1; min-height:280px; display:flex; }
.dw-mobile-bar{ display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--divider); background:var(--bg); flex:none; }
.dw-sheet-body{ min-height:300px; display:flex; flex-direction:column; max-height:64vh; overflow-y:auto; }
.dw-desktop-row{ display:flex; flex:1; min-height:0; position:relative; }
.dw-desktop-row .dw-stage{ flex:1; min-width:280px; }
.dw-desktop-row .dw-footer-wrap{ flex:none; }

/* Tools auto-hide drawer: mirrors the Bill-of-Materials drawer below,
   anchored to the left edge instead. Taken out of the flex flow
   (position:absolute) so the canvas gets that width back by default,
   and the panel floats over the left edge of the canvas as a thin tab.
   Hovering it (or tabbing into it) slides it open; moving the mouse
   away closes it again. */
.dw-desktop-row #dwTools{
  position:absolute; top:0; left:0; bottom:0; z-index:6;
  width:16px; min-width:0; max-width:none; overflow:hidden;
  background:var(--panel); border-right:1px solid var(--hairline-strong);
  box-shadow:10px 0 24px rgba(0,0,0,.32);
  transition:width .2s ease;
}
.dw-desktop-row #dwTools::before{
  content:'TOOLS'; position:absolute; left:0; top:0; bottom:0; width:16px;
  display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl;
  font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-dim); white-space:nowrap; pointer-events:none;
  transition:opacity .12s ease;
}
.dw-desktop-row #dwTools:hover,
.dw-desktop-row #dwTools:focus-within{
  width:270px;
}
.dw-desktop-row #dwTools:hover::before,
.dw-desktop-row #dwTools:focus-within::before{
  opacity:0;
}
.dw-desktop-row #tools{
  width:270px; max-width:none; height:100%; flex:none;
}

/* Bill-of-Materials auto-hide drawer: taken out of the flex flow
   entirely (position:absolute) so the canvas gets that width back by
   default, and the panel floats over the right edge of the canvas as a
   thin tab. Hovering it (or tabbing into it) slides it open; moving the
   mouse away closes it again. */
.dw-desktop-row #dwBom{
  position:absolute; top:0; right:0; bottom:0; z-index:6;
  width:16px; min-width:0; max-width:none; overflow:hidden;
  background:var(--panel); border-left:1px solid var(--hairline-strong);
  box-shadow:-10px 0 24px rgba(0,0,0,.32);
  transition:width .2s ease;
}
.dw-desktop-row #dwBom::before{
  content:'BILL OF MATERIALS'; position:absolute; left:0; top:0; bottom:0; width:16px;
  display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-dim); white-space:nowrap; pointer-events:none;
  transition:opacity .12s ease;
}
.dw-desktop-row #dwBom:hover,
.dw-desktop-row #dwBom:focus-within{
  width:300px;
}
.dw-desktop-row #dwBom:hover::before,
.dw-desktop-row #dwBom:focus-within::before{
  opacity:0;
}
.dw-desktop-row #bom{
  width:300px; max-width:none; height:100%; flex:none;
}
@media (min-width: 900px){
  .app-shell.has-tabbar .app-content.dw-flush{ max-width:none; padding:0; }
}


/* ---------- tool panel tabs -------------------------------------------- */
/* The panel carries six groups now; tabs keep it to one screenful instead of one long scroll. */
.tool-tabs{
  display:flex; flex-wrap:wrap; gap:4px; margin:0 0 10px; position:sticky; top:-12px;
  background:var(--panel); padding:2px 0 6px; z-index:2;
}
.tool-tabs button{
  flex:1 1 auto; min-width:54px; min-height:30px; padding:5px 7px; cursor:pointer;
  font-size:11px; letter-spacing:.02em; border-radius:7px;
  border:1px solid var(--hairline); background:transparent; color:var(--ink-dim);
}
.tool-tabs button:hover{ background:var(--wash); color:var(--ink); }
.tool-tabs button.active{ background:var(--accent-900); border-color:var(--accent); color:var(--accent-200); }
.tool-always{ margin-bottom:10px; }
.tool-pane{ display:none; }
.tool-pane.active{ display:block; }

/* ---------- consumables in the bill of materials ------------------------ */
/* Sealant, non-metallic sheet and the like: printed on the sheet, but materials rather than painted
   area, so they sit apart from the numbered rows and outside the m2 total. */
.bomconsum{ border-top:1px dashed var(--hairline-strong); margin-top:6px; }
.bomconsum-head{
  padding:9px 14px 4px; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-dim);
}
.bomconsum .bomrow .no{ border-style:dashed; }
.bomconsum .bomrow .q{ color:var(--ink-dim); }

/* ---------- desktop taskbar (approved mockup) ------------------------------------------------------------------
   Only under body.drawing-taskbar (set by mount() on a desktop editor). Row 1: group tabs, size, the ? hint button.
   Row 2: the current tool, its key and only that tool's options. A tab opens its group as a drop-down over the
   canvas. Phones and the read-only viewer keep their own layout. */
.dw-taskbar{ flex:none; position:relative; z-index:8; }
#btnHintToggle, .pane-close{ display:none; }
.opt-tool, .opt-none{ display:none; }
body.drawing-taskbar #tools{
  width:auto; max-width:none; height:auto; overflow:visible; position:relative;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:7px 14px;
  border-bottom:1px solid var(--hairline-strong);
}
body.drawing-taskbar .tool-tabs{ position:static; margin:0; padding:0; flex:none; flex-wrap:nowrap; background:transparent; }
body.drawing-taskbar .tool-tabs button{ flex:none; min-height:34px; padding:5px 13px; font-size:12.5px; }
body.drawing-taskbar .tool-tabs button::after{ content:'\25BE'; font-size:10px; margin-left:6px; opacity:.7; }
body.drawing-taskbar .tool-tabs button.has-tool{ border-color:var(--accent); color:var(--ink); }
body.drawing-taskbar .tool-always{ margin:0; }
body.drawing-taskbar #tools > .field.tool-always{ display:flex; flex-direction:row; align-items:center; gap:6px; }
body.drawing-taskbar #tools > .field.tool-always label{ margin:0; white-space:nowrap; }
body.drawing-taskbar #sizeInput{ width:64px; }
body.drawing-taskbar #btnHintToggle{
  display:inline-flex; align-items:center; justify-content:center; margin-left:auto;
  width:34px; height:34px; border-radius:50%; cursor:pointer; font-weight:600;
  border:1px solid var(--hairline); background:transparent; color:var(--ink);
}
body.drawing-taskbar #btnHintToggle:not(.active){ border-color:var(--accent); color:var(--accent-200); }
body.drawing-taskbar #toolOptions{
  flex:1 0 100%; display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; min-height:38px;
  border-top:1px solid var(--hairline); padding-top:7px;
}
body.drawing-taskbar .opt-tool{ display:inline-flex; align-items:center; gap:8px; }
body.drawing-taskbar .opt-label{ font-size:11px; color:var(--ink-dim); letter-spacing:.06em; }
body.drawing-taskbar #optToolName{ padding:4px 10px; border-radius:6px; background:var(--accent-900); color:var(--accent-200); font-size:12.5px; letter-spacing:.03em; }
body.drawing-taskbar #optToolKey{ font-size:11.5px; padding:1px 6px; border:1px solid var(--hairline-strong); border-bottom-width:2px; border-radius:5px; }
body.drawing-taskbar .opt-none{ display:inline; font-size:12px; color:var(--ink-dim); }
body.drawing-taskbar #toolOptions .field{ margin:0; display:flex; flex-direction:row; align-items:center; gap:7px; }
body.drawing-taskbar #toolOptions .field label{ margin:0; white-space:nowrap; }
body.drawing-taskbar #toolOptions .tool-btn{ width:auto; margin:0; min-height:32px; padding:5px 12px; border:1px solid var(--hairline-strong); }
body.drawing-taskbar #toolOptions .tool-btn.active{ border-color:var(--accent); background:var(--accent-900); color:var(--accent-200); }
body.drawing-taskbar #toolOptions select{ width:auto; }
body.drawing-taskbar #tools > .field.tool-always label,
body.drawing-taskbar #toolOptions .field label{ display:inline; }
body.drawing-taskbar #typeRunInput{ width:320px; }
body.drawing-taskbar .type-run-help{ display:none; }
/* a group's tools as a drop-down over the canvas */
body.drawing-taskbar .tool-pane.active{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; align-content:start;
  position:absolute; top:46px; left:14px; z-index:20; width:min(700px, calc(100vw - 48px));
  max-height:min(70vh, 640px); overflow:auto; box-sizing:border-box; padding:12px;
  background:var(--panel); border:1px solid var(--hairline-strong); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.35);
}
body.drawing-taskbar .tool-pane.active > *:not(.tool-btn){ grid-column:1 / -1; }
body.drawing-taskbar .tool-pane.active > .tool-btn{ margin:0; }
body.drawing-taskbar .tool-pane[data-pane="sheet"].active,
body.drawing-taskbar .tool-pane[data-pane="layers"].active{ display:block; width:min(560px, calc(100vw - 48px)); }
body.drawing-taskbar .pane-close{
  display:flex; align-items:center; justify-content:center; float:right; position:sticky; top:0;
  width:32px; height:32px; margin:-4px -4px 4px 8px; border-radius:8px; cursor:pointer; font-size:18px; line-height:1;
  border:1px solid var(--hairline); background:var(--panel); color:var(--ink);
}
body.drawing-taskbar.hint-hidden #hint{ display:none; }
#segCount.warn{ color:#e0844a; font-weight:600; }   /* pipes without a typed length (see drawUntypedMarks) */
/* New drawing: "Start from" a similar drawing (app.js renderStartFromRow) */
.dw-from-row{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding:6px 12px; border-bottom:1px solid var(--divider); flex:none; }
.dw-from-row select{ max-width:300px; }
.dw-from-opt{ display:inline-flex; align-items:center; gap:5px; font-size:13px; white-space:nowrap; }
/* Stamps (saved branches) in the Draw group */
#stampList{ display:flex; flex-direction:column; gap:4px; }
.stamp-row{ display:flex; gap:4px; align-items:stretch; }
.stamp-row .stamp-use{ flex:1; margin:0; }
.stamp-del{ width:32px; flex:none; border-radius:8px; border:1px solid var(--hairline); background:transparent; color:var(--ink-dim); cursor:pointer; font-size:16px; }
.stamp-del:hover{ color:var(--ink); border-color:var(--hairline-strong); }
.stamp-empty{ font-size:11.5px; color:var(--ink-dim); line-height:1.45; }
body.drawing-taskbar #stampList{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }