/* ─────────────────────────────────────────────────────────────
   SPOTTER SUPPLY — Label Designer
   Loaded only on /designer/. Depends on style.css tokens.
   ───────────────────────────────────────────────────────────── */
/* Neutral loader shown until designer.js mounts (replaces the old blue
   "Loading the designer" banner that flashed on load). */
.dz-loading{min-height:70vh;display:grid;place-items:center}
.dz-spin{width:28px;height:28px;border-radius:50%;border:3px solid rgba(18,20,26,.14);border-top-color:var(--blue);animation:dzspin .7s linear infinite}
@keyframes dzspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.dz-spin{animation:none}}
/* ─── Kit B, self-hosted. Variable faces: one file covers every weight. ───
   These are the faces the LABEL is set in, so they are bundled rather than
   linked — the print file is rendered server-side and has to match exactly
   what the customer approved on screen. All three are SIL OFL 1.1; the
   licences ship beside them in /assets/fonts/. */
@font-face{font-family:'Public Sans';src:url('/assets/fonts/publicsans.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo Narrow';src:url('/assets/fonts/archivonarrow.woff2') format('woff2-variations');
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/sourceserif4.woff2') format('woff2-variations');
  font-weight:200 900;font-style:normal;font-display:swap}

.dz{min-height:calc(100vh - 70px);display:flex;flex-direction:column}
.dz-bar{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:70px;z-index:40}
.dz-bar-in{display:flex;align-items:center;gap:16px;height:56px;overflow-x:auto}
.dz-steps{display:flex;gap:4px;align-items:center;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.dz-step{display:flex;align-items:center;gap:7px;padding:5px 9px;border-radius:var(--r);white-space:nowrap}
.dz-step .n{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line-2);
  display:grid;place-items:center;font-size:.66rem;color:var(--muted)}
.dz-step.done .n{background:var(--ink);border-color:var(--ink);color:#fff}
.dz-step.active{color:var(--ink)}
.dz-step.active .n{border-color:var(--orange);color:var(--orange)}
.dz-sep{width:16px;height:1px;background:var(--line-2);flex:0 0 auto}
.dz-save{margin-left:auto;font-family:var(--mono);font-size:.68rem;color:var(--ok);white-space:nowrap}

.dz-body{flex:1;display:grid;grid-template-columns:1fr;gap:0}
.dz-panel{padding:32px 24px 40px}
.dz-stage{background:var(--graphite);display:grid;place-items:center;padding:36px 24px;position:relative;min-height:420px}
.dz-panel h2{font-size:1.5rem;margin-bottom:.3rem}
.dz-panel .sub{color:var(--muted);margin-bottom:1.8rem;font-size:.98rem}
.dz-panel .wrap-in{max-width:520px;margin:0 auto}

.fld{margin-bottom:18px}
.fld label{display:block;font-size:.8rem;font-weight:650;color:var(--ink);margin-bottom:6px}
.fld .hint{font-family:var(--mono);font-size:.68rem;color:var(--muted);font-weight:400}
.fld input[type=text],.fld input[type=tel],.fld input[type=url],.fld input[type=email],.fld select{
  width:100%;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:var(--r);
  font:inherit;font-size:1rem;background:#fff;color:var(--ink)}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.fld .meter{height:4px;background:var(--line);border-radius:2px;margin-top:7px;overflow:hidden}
.fld .meter i{display:block;height:100%;background:var(--ok);width:0;transition:width .15s,background .15s}
.fld .flag{font-size:.82rem;margin-top:7px;display:none}
.fld.warn .flag{display:block;color:var(--orange-dk)}
.fld.err .flag{display:block;color:var(--danger,#c0392b)}
.fld.err input{border-color:#c0392b}

.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.color-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.swatch{width:44px;height:44px;border-radius:var(--r);border:1.5px solid var(--line-2);cursor:pointer;padding:0;overflow:hidden}
.swatch input{width:200%;height:200%;transform:translate(-25%,-25%);cursor:pointer;border:0}
.color-presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cp{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);cursor:pointer}
.cp.sel{box-shadow:0 0 0 2px var(--ink)}

.dz-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.dz-actions .grow{flex:1}

/* logo dropzone */
.drop{border:2px dashed var(--line-2);border-radius:var(--r-lg);padding:26px;text-align:center;
  cursor:pointer;transition:.15s;background:#fff}
.drop:hover,.drop.over{border-color:var(--orange);background:var(--orange-soft)}
.drop .ico{width:30px;height:30px;color:var(--muted);margin-bottom:8px}
.drop-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:.82rem}
.drop-or::before,.drop-or::after{content:"";flex:1;height:1px;background:var(--line)}
.logo-preview{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-top:12px}
.logo-preview img{width:52px;height:52px;object-fit:contain;background:var(--paper-2);border-radius:4px}
.logo-preview .meta{flex:1;font-size:.85rem}
.logo-preview button{font-size:.8rem;color:var(--danger,#c0392b);background:none;border:0;cursor:pointer;text-decoration:underline}

/* template + option grids */
.tpl-grid,.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tpl-card,.opt-card{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:12px;background:#fff;
  cursor:pointer;transition:.14s;display:flex;flex-direction:column;align-items:center;gap:8px}
.tpl-card:hover,.opt-card:hover{border-color:var(--line-2);box-shadow:var(--shadow,0 8px 24px rgba(0,0,0,.06))}
.tpl-card.sel,.opt-card.sel{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.tpl-card .lbl,.opt-card .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.tpl-card svg,.opt-card svg{width:100%;height:auto;border-radius:3px;display:block}

/* the label preview (SVG) */
.label-svg{display:block;filter:drop-shadow(0 20px 50px rgba(0,0,0,.45))}
.stage-note{position:absolute;bottom:14px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:#8A9099;text-transform:uppercase}
.stage-label{display:flex;flex-direction:column;align-items:center;gap:14px}
.stage-toggle{display:inline-flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:100px;padding:3px;gap:2px}
.stage-toggle button{background:none;border:0;color:#9AA0A8;font-size:.78rem;font-weight:600;
  padding:6px 14px;border-radius:100px;cursor:pointer}
.stage-toggle button.on{background:var(--orange);color:#fff}
.truesize-ref{color:#9AA0A8;font-family:var(--mono);font-size:.66rem;text-align:center;margin-top:6px}

/* back-label reassurance chip */
.backchip{display:flex;gap:12px;align-items:flex-start;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:16px 18px;margin-top:22px}
.backchip .ico{color:var(--ok);flex:0 0 auto;margin-top:2px}
.backchip p{margin:0;font-size:.88rem;color:var(--muted)}
.backchip strong{color:var(--ink)}

/* approval */
.consent{display:grid;gap:12px;margin:22px 0}
.consent label{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1.5px solid var(--line);
  border-radius:var(--r);cursor:pointer;font-size:.9rem;background:#fff}
.consent label.ok{border-color:var(--ok);background:#F1F8F3}
.consent input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--orange)}
.consent b{display:block;color:var(--ink);margin-bottom:2px}
.consent span{color:var(--muted)}
.notice-inline{border-left:3px solid var(--orange);background:var(--orange-soft);padding:12px 15px;
  border-radius:0 var(--r) var(--r) 0;font-size:.86rem;color:#8A3B18;margin:14px 0}

/* order */
.qty-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin:8px 0 18px}
.qty{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:16px;text-align:center;cursor:pointer;background:#fff}
.qty.sel{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.qty .n{font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--ink)}
.qty .p{font-size:.82rem;color:var(--muted);margin-top:2px}
.order-summary{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-top:8px}
.order-summary .row{display:flex;justify-content:space-between;padding:6px 0;font-size:.92rem}
.order-summary .row.tot{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-weight:700;color:var(--ink)}
.order-summary .num{font-family:var(--mono)}

.done-box{text-align:center;max-width:460px;margin:0 auto}
.done-box .big{width:56px;height:56px;border-radius:50%;background:#F1F8F3;color:var(--ok);
  display:grid;place-items:center;margin:0 auto 18px}
.dz-form-status{font-size:.9rem;text-align:center;min-height:1.3em;margin-top:10px}

/* order: one-off vs subscription */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px}
.modecard{position:relative;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:14px 15px;cursor:pointer;background:#fff;transition:.14s}
.modecard:hover{border-color:var(--line-2)}
.modecard.sel{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.modecard .mc-t{font-weight:650;font-size:.92rem;color:var(--ink)}
.modecard .mc-p{font-family:var(--mono);font-size:1.35rem;font-weight:700;color:var(--ink);margin:4px 0 2px}
.modecard .mc-p span{font-size:.72rem;font-weight:500;color:var(--muted)}
.modecard .mc-n{font-size:.78rem;color:var(--muted)}
.modecard .mc-badge{position:absolute;top:10px;right:10px;background:var(--ok);color:#fff;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:100px}

/* SMS opt-in (TCPA: real checkbox, never a purchase condition) */
.smsopt{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border:1.5px solid var(--line);
  border-radius:var(--r);cursor:pointer;font-size:.82rem;background:#fff;margin:16px 0 4px}
.smsopt.on{border-color:var(--ok);background:#F1F8F3}
.smsopt input{margin-top:2px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--orange)}
.smsopt b{display:block;color:var(--ink);margin-bottom:2px;font-size:.86rem}
.smsopt span{color:var(--muted)}

/* post-checkout account */
.acct-box{max-width:380px;margin:0 auto;text-align:left}
.acct-box .fld input{width:100%;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:var(--r);font:inherit;font-size:1rem}
.acct-box .fld input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}

@media(min-width:860px){
  .dz-body{grid-template-columns:minmax(420px,1fr) 1.05fr}
  .dz-stage{position:sticky;top:126px;align-self:start;height:calc(100vh - 126px)}
  .tpl-grid,.opt-grid{grid-template-columns:1fr 1fr}
}

/* ─── Label Studio: the Custom door ───────────────────────────── */
.door-alt{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--muted)}

.chip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:18px}
.chip{appearance:none;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);
  padding:11px 12px;font:inherit;font-size:.86rem;font-weight:600;color:var(--ink-2);
  text-align:left;cursor:pointer;transition:border-color .12s,background .12s}
.chip:hover{border-color:var(--ink-2)}
.chip.sel{border-color:var(--orange);background:var(--orange-soft);color:var(--ink)}

.art-status{min-height:0;font-size:.88rem;color:var(--orange-dk);margin:0}
.art-status.on{min-height:auto;margin:14px 0 0;padding:11px 13px;
  background:var(--orange-soft);border-radius:var(--r)}

.art-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}
.art-tile{position:relative;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;
  border:2px solid transparent;box-shadow:0 1px 3px rgba(0,0,0,.14);cursor:pointer;background:var(--paper-2)}
.art-tile img{width:100%;height:100%;object-fit:cover;display:block}
.art-tile .n{position:absolute;top:7px;left:7px;width:20px;height:20px;border-radius:50%;
  background:rgba(17,18,20,.62);color:#fff;font:600 11px/20px var(--mono);text-align:center}
.art-tile:hover{border-color:var(--line-2)}
.art-tile.sel{border-color:var(--orange)}
.art-tile.sel::after{content:"✓";position:absolute;right:7px;bottom:7px;width:22px;height:22px;
  border-radius:50%;background:var(--orange);color:#fff;font:700 13px/22px var(--sans);text-align:center}

/* Generation takes 8-15s — show four holes filling, not a spinner. */
.art-tile.skel{cursor:default;border-color:transparent}
.shimmer{position:absolute;inset:0;background:linear-gradient(100deg,
  var(--paper-2) 20%,var(--line) 42%,var(--paper-2) 64%);background-size:220% 100%;
  animation:artshimmer 1.35s ease-in-out infinite}
@keyframes artshimmer{from{background-position:180% 0}to{background-position:-60% 0}}
@media (prefers-reduced-motion:reduce){.shimmer{animation:none;background:var(--paper-2)}}

.art-wait{text-align:center;color:var(--muted);font-size:.86rem;margin:14px 0 0}
.art-actions{display:flex;gap:10px;margin-top:14px}
.art-actions .btn{flex:1}
.art-count{text-align:center;color:var(--muted);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.04em;margin:14px 0 0}

@media(min-width:860px){
  .chip-grid{grid-template-columns:repeat(3,1fr)}
}

/* ─── Vibe Match ──────────────────────────────────────────────── */
.vibe{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.vibe-h{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}

.rights{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--ink-2);
  cursor:pointer;padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--paper);margin-bottom:10px}
.rights input{margin:2px 0 0;flex:0 0 auto}
.rights.on{border-color:var(--ok);background:#F1F8F3}

.ref-drop{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:22px 16px;text-align:center;
  cursor:pointer;color:var(--muted);font-size:.88rem;transition:border-color .12s,background .12s}
.ref-drop b{display:block;color:var(--ink);font-size:.95rem;margin-bottom:4px}
.ref-drop span{display:block;font-size:.8rem;margin-top:5px}
.ref-drop:hover,.ref-drop.over{border-color:var(--orange);background:var(--orange-soft)}
.ref-drop.off{cursor:default;opacity:.5;padding:15px;font-size:.83rem}
.ref-drop.off:hover{border-color:var(--line-2);background:none}

.ref-on{display:flex;gap:13px;align-items:center;padding:11px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--paper)}
.ref-thumb{width:74px;height:52px;object-fit:cover;border-radius:3px;flex:0 0 auto;
  box-shadow:0 1px 3px rgba(0,0,0,.18)}
.ref-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ref-meta b{font-size:.86rem;color:var(--ink)}
.ref-mood{font-size:.79rem;color:var(--muted)}
.sw-row{display:flex;gap:4px;margin-top:3px}
.sw{width:15px;height:15px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.btn-sm{padding:6px 11px;font-size:.8rem}

/* ─── The variant wall ────────────────────────────────────────── */
.wall-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:4px}
.wrap-card{display:block;width:100%;padding:0;border:2px solid transparent;border-radius:6px;
  background:none;cursor:pointer;text-align:left;position:relative;overflow:hidden}
.wrap-card svg{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.wrap-card .lbl{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.wrap-card:hover{border-color:var(--line-2)}
.wrap-card.sel{border-color:var(--orange)}
.wrap-card.sel::after{content:"✓";position:absolute;right:9px;bottom:9px;width:24px;height:24px;
  border-radius:50%;background:var(--orange);color:#fff;font:700 14px/24px var(--sans);text-align:center}

.wrap-skel{aspect-ratio:6/4;border-radius:5px;background:var(--paper-2);position:relative;overflow:hidden}

/* Palette chips — recolour is local computation, so this is instant. */
.pal-row{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.pal{display:flex;align-items:center;gap:6px;background:var(--paper);border:1.5px solid var(--line-2);
  border-radius:6px;padding:6px 10px;cursor:pointer;font:inherit;font-size:.78rem;color:var(--ink-2)}
.pal i{width:13px;height:13px;border-radius:3px;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.pal.on{border-color:var(--orange);background:var(--orange-soft);color:var(--ink)}

.live-edit{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.fit-warn{min-height:0;font-size:.84rem;color:var(--orange-dk)}
.fit-warn.on{margin-top:10px;padding:9px 12px;background:var(--orange-soft);border-radius:var(--r)}

.sw-row{display:flex;gap:7px;flex-wrap:wrap}
.swatch{width:30px;height:30px;border-radius:50%;border:2px solid var(--line-2);cursor:pointer;padding:0}
.swatch.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}

@media(min-width:860px){
  .wall-grid{grid-template-columns:1fr}
}