/* ============ SITE SKETCH MODULE (namespaced sk-) ============ */
  #skApp{position:fixed;inset:0;z-index:5000;background:var(--sk-bg);display:none;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--sk-ink);overscroll-behavior:none;}

  /* ============ SKETCH MODULE v3 (all classes/ids prefixed sk-) ============ */
  :root{
    --sk-bg:#f2f4f7; --sk-panel:#ffffff; --sk-ink:#1c2733; --sk-line:#d6dde6;
    --sk-accent:#0e5aa7; --sk-accent-soft:#e3eefb; --sk-danger:#c0392b;
  }

  .sk-wrap{display:flex;flex-direction:column;height:100%;}

  .sk-modes{display:flex;background:var(--sk-panel);border-bottom:1px solid var(--sk-line);flex:0 0 auto;}
  .sk-mode{flex:1;border:none;background:none;padding:11px 4px 9px;font-size:13.5px;font-weight:600;color:#5b6b7c;border-bottom:3px solid transparent;-webkit-tap-highlight-color:transparent;}
  .sk-mode.sk-on{color:var(--sk-accent);border-bottom-color:var(--sk-accent);}
  .sk-gearbtn{flex:0 0 50px;border:none;background:none;color:#5b6b7c;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;}
  .sk-gearbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .sk-chk{display:flex;gap:10px;align-items:center;font-size:14px;padding:7px 2px;color:var(--sk-ink);}
  .sk-chk input[type=checkbox]{width:19px;height:19px;flex:0 0 auto;}
  .sk-chk small{color:#7b8a9a;}

  .sk-head{background:var(--sk-panel);border-bottom:1px solid var(--sk-line);padding:7px 10px 6px;flex:0 0 auto;}
  .sk-pages{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
  .sk-chip{flex:0 0 auto;border:1px solid var(--sk-line);background:#fff;border-radius:16px;padding:6px 12px;font-size:12.5px;white-space:nowrap;color:#42546a;-webkit-tap-highlight-color:transparent;}
  .sk-chip.sk-on{background:var(--sk-accent);border-color:var(--sk-accent);color:#fff;font-weight:600;}
  .sk-chip.sk-add{border-style:dashed;color:var(--sk-accent);font-weight:600;}

  .sk-tools{background:var(--sk-panel);border-bottom:1px solid var(--sk-line);padding:6px 8px;display:flex;gap:6px;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;flex:0 0 auto;}
  .sk-btn{flex:0 0 auto;min-width:44px;height:46px;border:1px solid var(--sk-line);border-radius:8px;background:#fff;font-size:10.5px;font-weight:600;color:#42546a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px 7px;-webkit-tap-highlight-color:transparent;user-select:none;}
  .sk-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .sk-btn canvas{width:26px;height:22px;}
  .sk-btn.sk-on{background:var(--sk-accent-soft);border-color:var(--sk-accent);color:var(--sk-accent);}
  .sk-btn:disabled{opacity:.35;}
  .sk-sep{flex:0 0 1px;align-self:stretch;background:var(--sk-line);margin:4px 2px;}

  .sk-preset{flex:0 0 auto;height:46px;min-width:56px;border:1px solid var(--sk-line);border-radius:8px;background:#fff;font-size:10.5px;font-weight:600;color:#42546a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:2px 8px;-webkit-tap-highlight-color:transparent;}
  .sk-preset.sk-on{background:var(--sk-accent-soft);border-color:var(--sk-accent);}
  .sk-preset i{display:block;width:30px;border-top-width:4px;border-top-style:solid;}

  .sk-swatch{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--sk-line);-webkit-tap-highlight-color:transparent;}
  .sk-swatch.sk-on{box-shadow:0 0 0 2px var(--sk-accent);}
  .sk-width{flex:0 0 auto;width:36px;height:36px;border-radius:8px;border:1px solid var(--sk-line);background:#fff;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;}
  .sk-width.sk-on{background:var(--sk-accent-soft);border-color:var(--sk-accent);}
  .sk-width i{display:block;background:#1c2733;border-radius:4px;width:18px;}

  .sk-main{display:flex;flex:1 1 auto;min-height:0;}
  .sk-mainCol{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
  .sk-stage{flex:1 1 auto;min-width:0;min-height:0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:8px;}
  #skCanvas{background:#fff;border:1px solid var(--sk-line);border-radius:6px;box-shadow:0 1px 4px rgba(20,40,60,.08);touch-action:none;max-width:100%;max-height:100%;}

  /* --- left tool rail --- */
  .sk-rail{flex:0 0 auto;width:58px;background:var(--sk-panel);border-right:1px solid var(--sk-line);overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px;}
  .sk-rail .sk-btn{width:46px;min-width:46px;}
  .sk-rail .sk-hr{width:34px;height:1px;background:var(--sk-line);margin:2px 0;flex:0 0 auto;}

  /* --- top control strip (matches the rail): fov, undo/redo, selection actions --- */
  .sk-topstrip{flex:0 0 auto;position:relative;display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--sk-panel);border-bottom:1px solid var(--sk-line);min-height:52px;}
  .sk-fov{display:none;gap:4px;}
  .sk-fov.sk-show{display:flex;}
  .sk-fov button{height:36px;min-width:38px;border:1px solid var(--sk-line);border-radius:8px;background:#fff;font-size:12px;font-weight:700;color:#42546a;-webkit-tap-highlight-color:transparent;}
  .sk-fov button.sk-on{background:var(--sk-accent);border-color:var(--sk-accent);color:#fff;}
  .sk-stripright{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:8px;align-items:center;background:var(--sk-panel);padding:0 6px;z-index:2;}
  .sk-undobar{display:flex;gap:6px;}
  .sk-undobar button,.sk-selbar button{height:40px;min-width:50px;border:1px solid var(--sk-line);border-radius:8px;background:#fff;font-size:10.5px;font-weight:600;color:#42546a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px 8px;-webkit-tap-highlight-color:transparent;}
  .sk-undobar button svg,.sk-selbar button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .sk-undobar button:disabled{opacity:.35;}
  .sk-selbar{display:none;gap:6px;padding-left:10px;border-left:1px solid var(--sk-line);}

  /* --- selection action buttons (live in the top strip) --- */
  .sk-selbar.sk-show{display:flex;}
  .sk-selbar .sk-delbtn{color:var(--sk-danger);}

  .sk-foot{background:var(--sk-panel);border-top:1px solid var(--sk-line);padding:8px 10px;display:flex;gap:8px;flex:0 0 auto;}
  .sk-foot button{flex:1;height:42px;border-radius:8px;border:1px solid var(--sk-line);background:#fff;font-size:13px;font-weight:600;color:#42546a;-webkit-tap-highlight-color:transparent;}
  .sk-foot .sk-primary{background:var(--sk-accent);border-color:var(--sk-accent);color:#fff;}
  .sk-foot .sk-warn{color:var(--sk-danger);}

  .sk-toast{position:fixed;left:50%;bottom:76px;transform:translateX(-50%) translateY(20px);background:#1c2733;color:#fff;font-size:13px;padding:9px 16px;border-radius:8px;opacity:0;pointer-events:none;transition:all .25s;z-index:50;}
  .sk-toast.sk-show{opacity:1;transform:translateX(-50%) translateY(0);}
  .sk-hint{font-size:11px;color:#7b8a9a;padding:3px 10px 6px;background:var(--sk-panel);flex:0 0 auto;}

  /* --- input modal (replaces window.prompt, which mobile browsers can block) --- */
  .sk-modal{position:fixed;inset:0;background:rgba(20,35,50,.45);display:none;align-items:flex-start;justify-content:center;padding-top:14vh;z-index:100;}
  .sk-modal.sk-show{display:flex;}
  .sk-modal-box{background:#fff;border-radius:12px;padding:16px;width:min(340px,88vw);box-shadow:0 8px 30px rgba(10,25,40,.25);}
  .sk-modal-title{font-size:14px;font-weight:700;margin-bottom:10px;}
  .sk-modal-box input{width:100%;font-size:16px;padding:10px 12px;border:1px solid var(--sk-line);border-radius:8px;outline:none;}
  .sk-modal-box input:focus{border-color:var(--sk-accent);}
  .sk-modal-btns{display:flex;gap:8px;margin-top:12px;}
  .sk-modal-btns button{flex:1;height:42px;border-radius:8px;border:1px solid var(--sk-line);background:#fff;font-size:14px;font-weight:600;color:#42546a;-webkit-tap-highlight-color:transparent;}
  .sk-modal-btns .sk-primary{background:var(--sk-accent);border-color:var(--sk-accent);color:#fff;}

  /* --- gas piping / BTU calculator modal --- */
  .sk-gasbox{background:#fff;border-radius:12px;padding:16px;width:min(560px,94vw);max-height:82vh;overflow-y:auto;box-shadow:0 8px 30px rgba(10,25,40,.25);}
  .sk-gassec{font-size:12px;font-weight:800;color:#42546a;margin:12px 0 6px;text-transform:uppercase;letter-spacing:.04em;}
  .sk-gasrow{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap;}
  .sk-gasrow select,.sk-gasrow input{font-size:16px;padding:8px;border:1px solid var(--sk-line);border-radius:8px;outline:none;background:#fff;}
  .sk-gasrow input[type=number]{width:84px;}
  .sk-gasname{flex:1;min-width:90px;}
  .sk-gascap{font-size:12.5px;font-weight:700;color:#0e5aa7;flex-basis:100%;padding-left:2px;}
  .sk-gasadd{border:1px dashed var(--sk-accent);border-radius:8px;background:#fff;color:var(--sk-accent);font-size:13px;font-weight:600;padding:8px 12px;-webkit-tap-highlight-color:transparent;}
  .sk-gasx{border:1px solid var(--sk-line);border-radius:8px;background:#fff;color:var(--sk-danger);width:38px;height:38px;font-weight:700;font-size:16px;-webkit-tap-highlight-color:transparent;}
  .sk-gastotal{font-weight:800;font-size:14.5px;margin:12px 0 4px;}
  .sk-gasnote{font-size:11px;color:#7b8a9a;line-height:1.45;margin:10px 0;}