/* ============================================================
   Creative Plus Product Studio — shared design system
   Brand tokens taken from the live site (creativeplusgroup.com)
   ============================================================ */

@font-face{font-family:'Nohemi';src:url('fonts/Nohemi-ExtraLight.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Nohemi';src:url('fonts/Nohemi-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Nohemi';src:url('fonts/Nohemi-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* brand */
  --ink:#17293C;
  --paper:#FBFAF8;
  --card:#FFFFFF;
  --navy:#22415C;
  --blue:#456485;
  --sage:#7E9481;
  --green:#54715B;
  --gold:#D3A76A;
  --brown:#6F5849;
  --orange:#B0764E;

  /* derived UI */
  --line:#E4E0DA;
  --line-soft:#EFEBE5;
  --muted:#7C8797;
  --ink-soft:#4A5A6C;

  /* colour-true stage (deliberately neutral: no hue, so product colour reads honestly) */
  --stage-0:#33363B;
  --stage-1:#232529;
  --stage-2:#141517;

  --ui:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:'Nohemi','Inter',sans-serif;
  --mono:"SF Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --r:10px;
  --panel-w:330px;
  --shadow:0 10px 34px rgba(23,41,60,.14), 0 2px 6px rgba(23,41,60,.06);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--ui);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Nohemi is only ever ExtraLight 200 or Light 300. Never heavier. */
.display{font-family:var(--display);font-weight:200;letter-spacing:-.01em}

/* ============================================================
   TOOL SHELL
   ============================================================ */
body.tool{height:100dvh;overflow:hidden;background:var(--stage-2)}

#stage{position:fixed;inset:0;z-index:1}
#stage canvas{display:block;width:100%;height:100%;touch-action:none}

/* --- top bar, present in every tool: gives a way back and says whose this is --- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 18px;
  background:linear-gradient(to bottom,rgba(20,21,23,.82),rgba(20,21,23,0));
  pointer-events:none;
}
.topbar > *{pointer-events:auto}
.back{
  display:inline-flex;align-items:center;gap:9px;
  color:rgba(255,255,255,.82);font-size:13px;font-weight:500;
  padding:7px 13px 7px 10px;border-radius:100px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  transition:background .16s,color .16s;
}
.back:hover{background:rgba(255,255,255,.14);color:#fff}
.back svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.topbar .who{
  font-family:var(--display);font-weight:200;font-size:14px;letter-spacing:.02em;
  color:rgba(255,255,255,.55);white-space:nowrap;
}
.topbar .who b{font-weight:300;color:rgba(255,255,255,.9)}

/* --- control panel --- */
.panel{
  position:fixed;top:62px;left:18px;z-index:20;
  width:var(--panel-w);max-height:calc(100dvh - 96px);
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  overflow:hidden;
}
.panel-scroll{overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 4px;flex:1}
.panel-head{
  padding:14px 16px 12px;border-bottom:1px solid var(--line-soft);
  background:var(--card);flex-shrink:0;
}
.panel-head h1{font-family:var(--display);font-weight:200;font-size:19px;letter-spacing:-.01em;line-height:1.15}
.panel-head p{font-size:11.5px;color:var(--muted);margin-top:3px;letter-spacing:.01em}
.panel-foot{
  padding:12px 16px;border-top:1px solid var(--line-soft);background:var(--card);
  flex-shrink:0;display:flex;flex-direction:column;gap:8px;
}

/* --- fields --- */
.grp{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line-soft)}
.grp:last-child{border-bottom:none;margin-bottom:0}
.grp-t{
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;
}
.f{margin-bottom:10px}
.f:last-child{margin-bottom:0}
.f > label,.lab{
  display:block;font-size:11px;font-weight:500;color:var(--ink-soft);
  margin-bottom:5px;letter-spacing:.01em;
}
select,input[type=text],input[type=number]{
  width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;
  font-size:13px;font-weight:400;background:var(--card);outline:none;
  transition:border-color .15s;
}
select{
  appearance:none;-webkit-appearance:none;padding-right:28px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%237C8797' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:11px;
}
select:focus,input[type=text]:focus,input[type=number]:focus{border-color:var(--blue)}
.cols{display:grid;gap:8px}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:1fr 1fr 1fr}

/* segmented option buttons */
.segs{display:grid;gap:4px}
.segs-2{grid-template-columns:repeat(2,1fr)}
.segs-3{grid-template-columns:repeat(3,1fr)}
.segs-4{grid-template-columns:repeat(4,1fr)}
.seg{
  background:var(--card);border:1px solid var(--line);color:var(--ink-soft);
  padding:7px 4px;font-size:11.5px;font-weight:500;border-radius:7px;cursor:pointer;
  text-align:center;transition:all .15s;line-height:1.25;
}
.seg:hover{border-color:var(--blue);color:var(--ink)}
.seg[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:500}

/* sliders */
.sld{margin-bottom:11px}
.sld:last-child{margin-bottom:0}
.sld-h{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;margin-bottom:3px}
.sld-h span:first-child{color:var(--ink-soft)}
.sld-h .v{font-family:var(--mono);font-size:11px;color:var(--navy);font-weight:500}
input[type=range]{
  width:100%;height:20px;appearance:none;-webkit-appearance:none;background:none;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--line);border-radius:2px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--navy);
  border:2px solid var(--card);box-shadow:0 1px 3px rgba(23,41,60,.3);margin-top:-5.5px;
}
input[type=range]::-moz-range-track{height:3px;background:var(--line);border-radius:2px}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--navy);border:2px solid var(--card)}

/* colour */
.colr{
  display:flex;align-items:center;gap:9px;border:1px solid var(--line);
  border-radius:7px;padding:5px 9px;background:var(--card);
}
input[type=color]{
  -webkit-appearance:none;appearance:none;border:none;background:none;
  width:26px;height:26px;border-radius:5px;cursor:pointer;padding:0;flex-shrink:0;
}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:1px solid var(--line);border-radius:5px}
input[type=color]::-moz-color-swatch{border:1px solid var(--line);border-radius:5px}
.colr .hex{font-family:var(--mono);font-size:11px;color:var(--ink-soft);text-transform:uppercase}

/* checkbox */
.chk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);cursor:pointer;user-select:none}
input[type=checkbox]{accent-color:var(--navy);width:15px;height:15px;cursor:pointer;flex-shrink:0}

/* upload */
.drop{
  border:1.5px dashed var(--line);border-radius:9px;padding:14px 12px;text-align:center;
  background:var(--card);cursor:pointer;position:relative;transition:all .18s;
}
.drop:hover,.drop.over{border-color:var(--blue);background:#F4F7FA}
.drop svg{width:22px;height:22px;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 6px}
.drop b{display:block;font-size:12px;font-weight:500;color:var(--ink)}
.drop small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop.has{border-style:solid;border-color:var(--sage);background:#F6F8F6}
.fname{
  font-size:11px;color:var(--ink-soft);margin-top:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);
}

/* buttons */
.btn{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  padding:10px 14px;border:1px solid transparent;border-radius:8px;
  font-size:12.5px;font-weight:500;cursor:pointer;transition:all .15s;letter-spacing:.01em;
}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.btn-p{background:var(--navy);color:#fff}
.btn-p:hover{background:var(--ink)}
.btn-g{background:var(--gold);color:#3B2A12}
.btn-g:hover{background:#C79A5C}
.btn-s{background:var(--card);border-color:var(--line);color:var(--ink-soft)}
.btn-s:hover{border-color:var(--blue);color:var(--ink)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}

/* progress */
.prog{display:none;margin-top:8px;font-size:11px;color:var(--navy);text-align:center;font-family:var(--mono)}
.prog.on{display:block}
.prog-bar{height:2px;background:var(--line);border-radius:2px;margin-top:5px;overflow:hidden}
.prog-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .2s}

/* note strip inside panel */
.hint{
  font-size:10.5px;line-height:1.5;color:var(--muted);
  background:#F3F1ED;border-left:2px solid var(--sage);
  padding:7px 10px;border-radius:0 5px 5px 0;margin-top:8px;
}
.hint.warn{background:#FAF3E8;border-left-color:var(--gold);color:var(--brown)}

/* ============================================================
   SCALE — the shared reference system across all four tools
   ============================================================ */
.scalebar{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:20;
  display:flex;align-items:center;gap:14px;
  padding:9px 15px;border-radius:100px;
  background:rgba(20,21,23,.72);
  border:1px solid rgba(255,255,255,.11);
  color:rgba(255,255,255,.9);white-space:nowrap;
}
@supports (backdrop-filter:blur(1px)){.scalebar{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}}
.scalebar .dims{font-family:var(--mono);font-size:12px;letter-spacing:.01em}
.scalebar .dims em{font-style:normal;color:rgba(255,255,255,.42);margin:0 3px}
.scalebar .sep{width:1px;height:15px;background:rgba(255,255,255,.16)}
.scalebar .ref{
  display:flex;align-items:center;gap:6px;font-size:11.5px;
  color:rgba(255,255,255,.6);cursor:pointer;background:none;border:none;padding:0;
}
.scalebar .ref:hover{color:#fff}
.scalebar .ref svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7}
.scalebar .ref b{font-weight:500;color:rgba(255,255,255,.92)}

/* the physical ruler: width is set in JS to equal a true 10cm on screen */
.ruler{display:flex;flex-direction:column;align-items:center;gap:3px}
.ruler .track{height:7px;border-left:1px solid rgba(255,255,255,.55);border-right:1px solid rgba(255,255,255,.55);
  border-bottom:1px solid rgba(255,255,255,.55);min-width:26px;transition:width .25s ease}
.ruler .lbl{font-family:var(--mono);font-size:9.5px;color:rgba(255,255,255,.5);letter-spacing:.04em}

/* ============================================================
   MOBILE — panel becomes a bottom sheet, collapsed so the
   product is visible. Every tool inherits this.
   ============================================================ */
.sheet-grip{display:none}

@media (max-width:820px), (max-height:520px){
  .panel{
    top:auto;bottom:0;left:0;right:0;width:100%;
    max-height:74dvh;border-radius:16px 16px 0 0;border-bottom:none;
    transform:translateY(calc(100% - 62px));
    transition:transform .3s cubic-bezier(.32,.72,0,1);
  }
  .panel.open{transform:translateY(0)}
  .sheet-grip{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:0 16px 10px;cursor:pointer;flex-shrink:0;background:var(--card);
  }
  .sheet-grip::before{
    content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:34px;height:4px;border-radius:2px;background:var(--line);
  }
  .panel-head{padding-top:20px;position:relative}
  .panel-scroll{padding-bottom:12px}
  .scalebar{
    bottom:auto;top:56px;left:8px;right:8px;transform:none;
    font-size:11px;padding:7px 11px;gap:9px;justify-content:center;
  }
  .scalebar .dims{font-size:11px}
  /* 390px cannot hold dimensions, a ruler and a labelled reference.
     The dimensions and the reference name are what matter on a phone. */
  .scalebar .ruler,
  .scalebar .ruler + .sep{display:none}
  .scalebar .ref span{display:none}
  .scalebar .ref{gap:4px}
  .topbar{padding:10px 12px}
  .btn-row{grid-template-columns:1fr}
}

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed;bottom:74px;left:50%;transform:translate(-50%,14px);z-index:60;
  background:var(--ink);color:#fff;padding:11px 18px;border-radius:9px;
  font-size:12.5px;box-shadow:0 10px 30px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;max-width:min(440px,88vw);
  line-height:1.45;
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast b{font-weight:600;color:var(--gold)}

/* no-webgl / load failure */
.fatal{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;padding:30px;background:var(--stage-2);
}
.fatal.on{display:flex}
.fatal .box{max-width:400px;text-align:center;color:rgba(255,255,255,.85)}
.fatal h2{font-family:var(--display);font-weight:200;font-size:22px;margin-bottom:10px;color:#fff}
.fatal p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.6);margin-bottom:16px}
.fatal a{color:var(--gold);text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}