/* VectorProof Workbench — the shared layout of the Image-to-SVG page, extracted so EVERY product
 * can mirror it. All rules are scoped under .vp-wb so loading this next to a product's own CSS
 * cannot collide. Structure: .vp-wb > (.wb-guide rail of steps) + (.wb-space => .wb-rail controls
 * + .wb-main => .wb-metrics + .wb-stage[3 viewports + assistant] + .wb-ledger).
 * Product-specific output (e.g. the embroidery stitch player) drops into an extra stage/panel. */
.vp-wb{
  --wb-paper:#f6f7f1; --wb-panel:#ffffff; --wb-panel2:#eef1ea; --wb-ink:#11140f; --wb-muted:#5d6359;
  --wb-line:#cfd5c7; --wb-line-strong:#9aa390; --wb-green:#1d6b4f; --wb-green-soft:#dbeee6;
  --wb-green-strong:#14503b; --wb-blue:#225c93; --wb-amber:#c47b20; --wb-red:#b23b2e;
  --wb-shadow:0 14px 38px rgba(17,20,15,.08); --wb-radius:10px;
  color:var(--wb-ink); font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.vp-wb *{ box-sizing:border-box; }

/* guide rail of steps */
.vp-wb .wb-guide{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.vp-wb .wb-step{ flex:1 1 130px; display:grid; gap:2px; text-align:left; border:1px solid var(--wb-line);
  background:var(--wb-panel); border-radius:var(--wb-radius); padding:10px 12px; cursor:pointer; transition:.15s; }
.vp-wb .wb-step:hover{ border-color:var(--wb-line-strong); }
.vp-wb .wb-step small{ color:var(--wb-muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
.vp-wb .wb-step span{ font-weight:700; font-size:14px; }
.vp-wb .wb-step.active{ border-color:var(--wb-ink); box-shadow:inset 3px 0 0 var(--wb-green); }
.vp-wb .wb-step.done small{ color:var(--wb-green-strong); }

/* workspace */
.vp-wb .wb-space{ display:grid; grid-template-columns:minmax(280px,360px) minmax(0,1fr); gap:16px; }
.vp-wb .wb-rail{ display:grid; align-content:start; gap:14px; padding:14px; border:1px solid var(--wb-line);
  background:rgba(255,255,255,.92); box-shadow:var(--wb-shadow); border-radius:var(--wb-radius);
  /* rails are short next to a tall main column — stick them so the space reads
     as a following sidebar instead of a giant dead area */
  position:sticky; top:14px; align-self:start; }
.vp-wb .wb-main{ display:grid; gap:14px; min-width:0; }

/* dropzone */
.vp-wb .wb-drop{ min-height:150px; border:1px dashed var(--wb-line-strong); border-radius:var(--wb-radius);
  background:linear-gradient(135deg,rgba(34,92,147,.07),transparent 40%),var(--wb-panel);
  display:grid; place-items:center; text-align:center; padding:18px; cursor:pointer; }
.vp-wb .wb-drop.dragging{ border-color:var(--wb-green); background:var(--wb-green-soft); }
.vp-wb .wb-drop strong{ display:block; font-size:20px; margin-bottom:6px; }
.vp-wb .wb-drop span{ display:block; color:var(--wb-muted); font-size:13px; }
.vp-wb .wb-fileinput{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.vp-wb textarea.wb-paste{ width:100%; min-height:64px; resize:vertical; border:1px solid var(--wb-line-strong);
  border-radius:var(--wb-radius); padding:9px 11px; font:inherit; font-size:12.5px; font-family:ui-monospace,Consolas,monospace; }

/* control sections */
.vp-wb .wb-section{ display:grid; gap:10px; }
.vp-wb .wb-sectitle{ display:flex; justify-content:space-between; gap:10px; align-items:center; font-size:12px;
  color:var(--wb-muted); text-transform:uppercase; border-bottom:1px solid var(--wb-line); padding-bottom:7px; }
.vp-wb .wb-control{ display:grid; gap:6px; }
.vp-wb .wb-control label{ display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--wb-muted); }
.vp-wb .wb-control output{ color:var(--wb-ink); font-variant-numeric:tabular-nums; }
.vp-wb input[type=range]{ width:100%; accent-color:var(--wb-green); }
.vp-wb .wb-toggle{ display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--wb-line);
  border-radius:var(--wb-radius); padding:9px 11px; background:var(--wb-panel); color:var(--wb-muted); font-size:13px; }
.vp-wb .wb-toggle input{ width:18px; height:18px; accent-color:var(--wb-green); }
.vp-wb select.wb-select{ width:100%; padding:9px 11px; border:1px solid var(--wb-line-strong); border-radius:var(--wb-radius); font:inherit; font-size:13px; background:var(--wb-panel); }

/* mode cards */
.vp-wb .wb-modes{ display:grid; gap:8px; }
.vp-wb .wb-mode{ display:grid; grid-template-columns:14px 1fr; gap:9px; align-items:start; border:1px solid var(--wb-line);
  border-radius:var(--wb-radius); padding:10px; background:var(--wb-panel); text-align:left; cursor:pointer; }
.vp-wb .wb-mode[aria-pressed=true]{ border-color:var(--wb-ink); box-shadow:inset 3px 0 0 var(--wb-green); }
.vp-wb .wb-mode .dot{ width:12px; height:12px; margin-top:2px; border-radius:999px; border:1px solid var(--wb-line-strong); background:var(--wb-paper); }
.vp-wb .wb-mode[aria-pressed=true] .dot{ background:var(--wb-green); border-color:var(--wb-green); }
.vp-wb .wb-mode b{ display:block; font-size:13px; margin-bottom:2px; }
.vp-wb .wb-mode small{ display:block; color:var(--wb-muted); font-size:12px; line-height:1.35; }

/* buttons + actions */
.vp-wb .wb-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.vp-wb .wb-actions .wide{ grid-column:1/-1; }
.vp-wb button.wb-btn{ min-height:38px; border:1px solid var(--wb-line-strong); background:var(--wb-panel); color:var(--wb-ink);
  border-radius:var(--wb-radius); padding:9px 14px; font:inherit; font-weight:600; font-size:13px; cursor:pointer; transition:.14s; }
.vp-wb button.wb-btn:hover:not(:disabled){ background:var(--wb-panel2); }
.vp-wb button.wb-btn.primary{ border-color:var(--wb-green); background:var(--wb-green); color:#fff; }
.vp-wb button.wb-btn.primary:hover:not(:disabled){ background:var(--wb-green-strong); }
.vp-wb button.wb-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* status badges */
.vp-wb .wb-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.vp-wb .wb-badge{ display:inline-flex; align-items:center; min-height:26px; border:1px solid var(--wb-line-strong);
  border-radius:999px; padding:3px 11px; background:var(--wb-panel); color:var(--wb-muted); font-size:12px; }
.vp-wb .wb-badge.green{ border-color:transparent; background:var(--wb-green-soft); color:var(--wb-green-strong); }
.vp-wb .wb-badge.amber{ border-color:transparent; background:#fbf1e0; color:var(--wb-amber); }
.vp-wb .wb-badge.red{ border-color:transparent; background:#fbecea; color:var(--wb-red); }

/* metrics */
.vp-wb .wb-metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; }
.vp-wb .wb-metric{ border:1px solid var(--wb-line); background:var(--wb-panel); box-shadow:var(--wb-shadow);
  border-radius:var(--wb-radius); padding:10px 12px; min-height:66px; display:grid; align-content:space-between; gap:6px; }
.vp-wb .wb-metric span{ color:var(--wb-muted); font-size:11px; text-transform:uppercase; letter-spacing:.02em; }
.vp-wb .wb-metric strong{ font-size:clamp(17px,2.4vw,26px); line-height:1; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }

/* stage: 3 viewports */
.vp-wb .wb-stage{ border:1px solid var(--wb-line); background:rgba(255,255,255,.92); box-shadow:var(--wb-shadow);
  border-radius:var(--wb-radius); padding:10px; display:grid; gap:10px; }
.vp-wb .wb-tabs{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; border-bottom:1px solid var(--wb-line); padding-bottom:9px; }
.vp-wb .wb-views{ display:flex; gap:6px; flex-wrap:wrap; }
.vp-wb .wb-view{ min-height:30px; padding:5px 11px; font-size:12px; font-weight:600; color:var(--wb-muted); border:1px solid var(--wb-line-strong); background:var(--wb-panel); border-radius:999px; cursor:pointer; }
.vp-wb .wb-view[aria-pressed=true]{ color:#fff; background:var(--wb-blue); border-color:var(--wb-blue); }
.vp-wb .wb-readout{ color:var(--wb-muted); font-size:12px; }
/* review panes: ALWAYS three side by side — comparison is the point. They get
   big because the studio spans the full container, not a rail column. Only
   truly narrow phones stack. */
.vp-wb .wb-canvases{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; min-height:0; }
@media(max-width:640px){ .vp-wb .wb-canvases{ grid-template-columns:1fr; } }
.vp-wb .wb-viewport{ min-width:0; min-height:380px; display:grid; grid-template-rows:auto 1fr; border:1px solid var(--wb-line);
  border-radius:var(--wb-radius); overflow:hidden;
  background:linear-gradient(45deg,#d7dcd0 25%,transparent 25%),linear-gradient(-45deg,#d7dcd0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d7dcd0 75%),linear-gradient(-45deg,transparent 75%,#d7dcd0 75%),#f9faf6;
  background-position:0 0,0 8px,8px -8px,-8px 0; background-size:16px 16px; }
.vp-wb .wb-viewport header{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:34px; padding:7px 9px; border-bottom:1px solid var(--wb-line); background:rgba(255,255,255,.9); color:var(--wb-muted); font-size:12px; text-transform:uppercase; }
.vp-wb .wb-viewport canvas{ width:100%; height:100%; object-fit:contain; align-self:stretch; }
.vp-wb .wb-canvases.single .wb-viewport{ display:none; }
.vp-wb .wb-canvases.single[data-view=original] .pane-original,
.vp-wb .wb-canvases.single[data-view=rendered] .pane-rendered,
.vp-wb .wb-canvases.single[data-view=diff] .pane-diff{ display:grid; grid-column:1/-1; }
/* single-pane view is large so the buyer can actually judge output quality */
.vp-wb .wb-canvases.single .wb-viewport{ min-height:560px; }
.vp-wb .wb-viewport canvas{ image-rendering:auto; }

/* ledger */
.vp-wb .wb-ledger{ border:1px solid var(--wb-line); background:var(--wb-panel); box-shadow:var(--wb-shadow); border-radius:var(--wb-radius); max-height:220px; overflow:auto; }
.vp-wb .wb-ledger table{ width:100%; border-collapse:collapse; font-size:12px; }
.vp-wb .wb-ledger th,.vp-wb .wb-ledger td{ padding:8px 10px; border-bottom:1px solid var(--wb-line); vertical-align:top; text-align:left; }
.vp-wb .wb-ledger th{ color:var(--wb-muted); text-transform:uppercase; position:sticky; top:0; background:var(--wb-panel); }
.vp-wb .wb-ledger .empty{ color:var(--wb-muted); padding:16px; }
.vp-wb .wb-mono{ font-family:ui-monospace,Consolas,monospace; font-variant-numeric:tabular-nums; }
.vp-wb .wb-hidden{ display:none !important; }

@media(max-width:1120px){ .vp-wb .wb-space{ grid-template-columns:1fr; } }
@media(max-width:820px){ .vp-wb .wb-canvases{ grid-template-columns:1fr; } }