/* 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: rgba(233,233,237,.18); --hairline-strong: rgba(233,233,237,.3);
  --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: rgba(233,233,237,.16);
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}
.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:rgba(233,233,237,.04); }
.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; }

.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); }
.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: radial-gradient(120% 100% at 50% 0%, #14162380, transparent 60%), var(--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:rgba(30,32,51,.88); 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:rgba(30,32,51,.88); 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: 1fr 56px; gap:2px 8px; padding:8px 14px;
  border-bottom:1px solid var(--panel-2); font-size:12.5px;
}
.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; }
.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; }

/* ---------- 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 rgba(233,233,237,.18);
  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 rgba(233,233,237,.18); 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 rgba(233,233,237,.18); 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:rgba(38,41,65,.96); border:1px solid rgba(233,233,237,.2); 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; }
}