/* Shared upload Workflow, scoped away from all editing UI. */
.lw-workflow { border-top:1px solid var(--color-border-subtle); padding-block:56px 64px; color:var(--color-ink); font:var(--type-site-body); scroll-margin-top:100px; }
.lw-workflow p,.lw-workflow h2,.lw-workflow h3 { margin:0; }
.lw-workflow .workflow-heading h2 { font:500 clamp(32px,3.4vw,54px)/1.08 var(--font-display); letter-spacing:-.045em; margin-top:16px; }
.lw-workflow .workflow-grid { list-style:none; margin:0; }
.lw-workflow .workflow-step { min-width:0; }
.lw-workflow .step-number { display:flex; align-items:center; gap:10px; font:400 15px/1.4 var(--font-mono); min-height:32px; margin-bottom:16px; color:var(--color-eyebrow-emphasis); }
.lw-workflow .step-number b { font-weight:400; display:grid; place-items:center; min-width:32px; min-height:32px; }
.lw-workflow .key-step .step-number b { background:var(--color-accent); border-radius:50%; color:var(--color-ink); }
.lw-workflow .canvas-frame { margin:0 0 24px; background:var(--color-bg-control); display:flex; align-items:center; justify-content:center; overflow:hidden; user-select:none; }
.lw-workflow .workflow-step h3 { font:500 clamp(22px,1.8vw,28px)/1.2 var(--font-display); letter-spacing:-.025em; margin-bottom:12px; }
.lw-workflow .workflow-step>p { font:400 16px/1.6 var(--font-ui); color:var(--color-text-secondary); max-width:49ch; }
.lw-workflow .workflow-heading { text-align:left; margin-bottom:30px; }
.lw-workflow .workflow-grid { --card-width:clamp(360px,52vw,660px); --card-gap:24px; display:flex; gap:var(--card-gap); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px 0 12px; cursor:grab; }
.lw-workflow .workflow-grid::-webkit-scrollbar { display:none; }
.lw-workflow .workflow-grid::after { content:''; flex:0 0 max(0px,calc(100% - var(--card-width) - var(--card-gap))); }
.lw-workflow .workflow-step { flex:0 0 var(--card-width); scroll-snap-align:start; }
.lw-workflow .workflow-grid:focus-visible { outline-offset:6px; border-radius:4px; }
.lw-workflow .workflow-grid.is-dragging { cursor:grabbing; scroll-snap-type:none; user-select:none; }
.lw-workflow .canvas-frame { aspect-ratio:4/3; padding:clamp(22px,3.5vw,48px); border-radius:clamp(24px,4vw,56px); margin-bottom:24px; }
.lw-workflow .canvas-frame img { width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.lw-workflow .canvas-art { display:block; width:100%; height:100%; min-height:0; object-fit:contain; overflow:hidden; flex:none; pointer-events:none; user-select:none; }
.lw-workflow .canvas-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; gap:clamp(8px,1.5vw,20px); width:100%; height:100%; min-height:0; }
.lw-workflow .canvas-results .canvas-art { min-width:0; }
.lw-workflow .canvas-frame:has(.canvas-results-nine) { padding:clamp(14px,2vw,28px); }
.lw-workflow .canvas-results-nine { grid-template-rows:repeat(3,minmax(0,1fr)); gap:clamp(6px,1vw,14px); }
.lw-workflow .canvas-results-nine .canvas-art { height:100%; width:100%; }
.lw-workflow .canvas-frame:has(.lock-closeup) { padding:0; }
.lw-workflow .step-number { margin:0 0 12px; }
.lw-workflow .workflow-step h3 { font-size:clamp(22px,2.1vw,28px); }
.lw-workflow .workflow-step>p { max-width:58ch; }
.lw-workflow .carousel-controls { display:flex; justify-content:flex-end; align-items:center; gap:20px; margin-top:20px; }
.lw-workflow .carousel-actions { display:flex; align-items:center; gap:12px; flex:none; }
.lw-workflow .carousel-count { font:400 15px/1.4 var(--font-mono); margin-right:12px; min-width:6ch; }
.lw-workflow .carousel-count.carousel-sr { margin:0; min-width:0; }
.lw-workflow .carousel-actions button { width:48px; height:48px; border-radius:var(--radius-pill); background:var(--color-hover); }
.lw-workflow .carousel-actions button:hover { background:var(--color-accent); }
.lw-workflow .carousel-actions button[aria-disabled=true] { opacity:.35; cursor:default; background:var(--color-hover); }
.lw-workflow .carousel-actions button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; }
.lw-workflow .carousel-controls[hidden] { display:none; }
.lw-workflow .carousel-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:699px) {
  .lw-workflow .workflow-grid { --card-width:82%; --card-gap:16px; }
  .lw-workflow .workflow-heading h2 { font-size:30px; }
  .lw-workflow { padding-block:44px 48px; }
  .lw-workflow .canvas-frame { padding:20px; border-radius:26px; }
  .lw-workflow .canvas-frame:has(.canvas-results-nine) { aspect-ratio:1/1; }
  .lw-workflow .carousel-controls { flex-wrap:wrap; }
  .lw-workflow .carousel-actions { margin-left:auto; }
}
.lw-workflow .workflow-swatches { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); place-items:center; width:70%; height:80%; }
.lw-workflow .workflow-swatches span { width:clamp(16px,2.2vw,28px); aspect-ratio:1; border-radius:5px; background:var(--workflow-swatch); }
.design-system:not([data-phase=empty])>.lw-workflow { display:none; }