/* ============================================================ PROXY CONFIGURE — per-device artwork configuration Shared engine styles. Inherits PROXY Design System v1.0. ============================================================ */ .cfg-wrap{max-width:1140px;margin:0 auto;padding:0 24px} .cfg-head{padding:40px 0 18px} .cfg-head .eyebrow{display:block;margin-bottom:8px} .cfg-head h1{font-size:40px;letter-spacing:-.015em} .cfg-head h1 .dot{color:var(--gold)} .cfg-head p.intro{max-width:560px;color:var(--muted);margin-top:10px;font-size:15px} .cfg-rail{display:flex;gap:4px;margin:22px 0 26px;flex-wrap:wrap} .cfg-rail button{font-family:var(--mono);font-size:11px;letter-spacing:.08em;border:1px solid var(--line); background:#fff;color:var(--muted);padding:8px 14px;border-radius:999px;cursor:pointer} .cfg-rail button.on{background:var(--navy);color:#fff;border-color:var(--navy)} .cfg-rail button.done{color:var(--navy);border-color:var(--navy)} .cfg-rail button:disabled{opacity:.45;cursor:default} .cfg-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:36px;align-items:start;padding-bottom:64px} @media(max-width:900px){.cfg-grid{grid-template-columns:1fr}.cfg-stagewrap{position:static}} /* stage */ .cfg-stagewrap{position:sticky;top:96px} .cfg-stage{position:relative;background:radial-gradient(120% 90% at 50% 38%,#fff 0%,var(--cream) 66%,#F1ECE1 100%); border:1px solid var(--line);border-radius:8px;overflow:hidden;height:520px;user-select:none;touch-action:none} .cfg-stage img.render{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:88%;width:auto;pointer-events:none} .cfg-stage canvas.recolor{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:88%;pointer-events:none} .cfg-zone{position:absolute;border:1px dashed rgba(201,150,46,.7);border-radius:3px;pointer-events:none} .cfg-zone.bad{border-color:#C0392B;background:rgba(192,57,43,.07)} .cfg-zone .tag{position:absolute;top:-20px;left:0;font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--gold-text);white-space:nowrap} .cfg-art{position:absolute;cursor:grab;transform-origin:center center} .cfg-art:active{cursor:grabbing} .cfg-art img{display:block;width:100%;height:100%;pointer-events:none} .cfg-stagefoot{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--muted); letter-spacing:.06em;padding:10px 2px 0} /* panel */ .cfg-panel{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px} .cfg-step h2{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);margin-bottom:4px} .cfg-step .sub{font-size:12.5px;color:var(--muted);margin-bottom:16px;line-height:1.5} .cfg-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px} .cfg-sw{border:1px solid var(--line);border-radius:6px;padding:8px 6px;background:#fff;cursor:pointer;text-align:center} .cfg-sw .dot{width:26px;height:26px;border-radius:50%;margin:0 auto 6px;border:1px solid rgba(0,0,0,.08)} .cfg-sw span{font-size:10px;color:var(--ink);display:block} .cfg-sw.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)} .cfg-pant{border-top:1px solid var(--line);margin-top:6px;padding-top:14px} .cfg-pant label{display:block;font-size:11px;color:var(--muted);margin-bottom:6px} .cfg-pant input{width:100%;border:1px solid var(--line);border-radius:4px;padding:9px 10px;font-family:var(--mono);font-size:13px} .cfg-note{font-size:11px;color:var(--muted);line-height:1.5;margin-top:10px} .cfg-oemtag{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;background:var(--gold-tint); color:var(--gold-text);border-radius:999px;padding:3px 8px;margin-left:6px} .cfg-upload{border:1.5px dashed var(--line);border-radius:8px;padding:26px 16px;text-align:center;cursor:pointer;background:var(--cream)} .cfg-upload.has{border-style:solid} .cfg-upload b{display:block;font-size:13px;color:var(--navy);margin-bottom:4px} .cfg-upload span{font-size:11px;color:var(--muted)} .cfg-fld{margin:12px 0} .cfg-fld label{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:5px} .cfg-fld label output{font-family:var(--mono);color:var(--navy)} .cfg-fld input[type=range]{width:100%;accent-color:var(--gold)} .cfg-fld input[type=text],.cfg-fld input[type=email],.cfg-fld textarea{width:100%;border:1px solid var(--line);border-radius:4px;padding:9px 10px;font-size:13px;font-family:var(--font)} .cfg-fld textarea{min-height:74px;resize:vertical} .cfg-warn{display:none;background:#FBEAE8;border:1px solid #E4B6B0;color:#8C2F25;border-radius:6px; padding:11px 13px;font-size:12.5px;line-height:1.5;margin:12px 0} .cfg-warn.on{display:block} .cfg-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0} .cfg-chip{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:5px 11px} .cfg-chip .d{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.1)} .cfg-chip input{width:76px;border:none;border-bottom:1px dashed var(--line);font-family:var(--mono);font-size:11px;padding:2px 0;outline:none} .cfg-actions{display:flex;gap:10px;margin-top:20px} .cfg-actions .btn{flex:1;justify-content:center} .cfg-back{background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;padding:10px 0} /* review */ .cfg-review h3{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--gold-text);text-transform:uppercase;margin:16px 0 6px} .cfg-rrow{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:7px 0;font-size:12px} .cfg-rrow .k{color:var(--muted)} .cfg-rrow .v{font-family:var(--mono);color:var(--navy);text-align:right;max-width:60%} .cfg-provisional{font-family:var(--mono);font-size:9.5px;color:var(--muted);letter-spacing:.04em} /* designer path */ .cfg-designer{margin-top:34px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:22px 24px; display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap} .cfg-designer b{display:block;font-size:14px;color:var(--navy);margin-bottom:3px} .cfg-designer p{font-size:12.5px;color:var(--muted);max-width:460px} .cfg-confirm{padding:44px 8px;text-align:center} .cfg-confirm h2{font-size:26px;color:var(--navy);margin-bottom:10px} .cfg-confirm p{color:var(--muted);font-size:14px;max-width:420px;margin:0 auto} .cfg-ref{font-family:var(--mono);color:var(--gold-text);letter-spacing:.08em} /* --- v1.1 additions --- */ .cfg-designer-inline{font-size:12.5px;color:var(--muted);margin:-8px 0 18px} .cfg-designer-inline a{color:var(--navy);font-weight:600} /* v1.2: designer pathway panel */ .cfg-designer-panel{display:flex;align-items:flex-start;gap:12px;background:var(--gold-tint); border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin:-4px 0 18px} .cfg-designer-panel .ic{width:22px;height:22px;color:var(--gold-text);flex:none;margin-top:2px} .cfg-designer-panel b{display:block;font-size:13px;color:var(--navy);margin-bottom:2px} .cfg-designer-panel a{display:inline-block;font-size:12.5px;font-weight:700;color:var(--navy); text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold)} .cfg-designer-panel .sub{display:block;font-size:11px;color:var(--muted);margin-top:3px} /* v1.2: visual color picker */ .cfg-pickrow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--cream)} .cfg-pickrow input[type=color]{width:44px;height:44px;border:1px solid var(--line);border-radius:8px;padding:2px;background:#fff;cursor:pointer;flex:none} .cfg-picktxt b{display:block;font-size:12.5px;color:var(--navy)} .cfg-picktxt span{display:block;font-size:10.5px;color:var(--muted);line-height:1.45} .cfg-pickhex{font-family:var(--mono);color:var(--gold-text)!important;margin-top:3px} /* v1.2: oil window keep-clear */ .cfg-keepout{position:absolute;border:1px dashed rgba(107,112,128,.75);border-radius:3px;pointer-events:none} .cfg-keepout .tag{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-family:var(--mono); font-size:8px;letter-spacing:.1em;color:var(--muted);white-space:nowrap} .cfg-keepout.bad{border-color:#C0392B;background:rgba(192,57,43,.10)} .cfg-keepout.bad .tag{color:#C0392B} /* v1.2: color count line */ .cfg-colcount{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--gold-text);margin:0 0 8px} /* v1.3: per-surface artwork path options */ .cfg-paths{display:flex;flex-direction:column;gap:8px;margin-bottom:16px} .cfg-pathopt{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:8px;padding:11px 13px;cursor:pointer;background:#fff} .cfg-pathopt:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);background:var(--cream)} .cfg-pathopt input{width:auto;margin-top:3px;accent-color:var(--gold)} .cfg-pathopt .t b{display:block;font-size:12.5px;color:var(--navy)} .cfg-pathopt .t span{display:block;font-size:10.5px;color:var(--muted);line-height:1.45;margin-top:1px} .cfg-finishhost[hidden]{display:none} /* v1.4: clean stage - boundaries only, no on-device micro-labels */ .cfg-zone .tag,.cfg-keepout .tag{display:none} .cfg-keepout{border-color:rgba(107,112,128,.45)} .cfg-keepout.bad{border-color:#C0392B;background:rgba(192,57,43,.10)} /* v1.4: subtle quality advisory */ .cfg-info{display:none;background:var(--gold-tint);border:1px solid var(--line);color:var(--gold-text);border-radius:6px;padding:10px 13px;font-size:12px;line-height:1.5;margin:12px 0} .cfg-info.on{display:block} .cfg-info b{color:var(--navy)} /* v2.9e: low-resolution artwork warning - noticeable, non-blocking */ .cfg-qualwarn{display:none;background:#FBEDEB;border:1px solid #DBA49C;border-left:3px solid #B04A3E;color:#6E5652;border-radius:6px;padding:11px 13px;font-size:12px;line-height:1.55;margin:12px 0;gap:10px;align-items:flex-start} .cfg-qualwarn.on{display:flex} .cfg-qualwarn .ic{flex:none;width:18px;height:18px;border-radius:50%;background:#B04A3E;color:#fff;font-weight:800;font-size:11px;line-height:18px;text-align:center;margin-top:1px} .cfg-qualwarn b{display:block;color:#8C2F25;font-size:12.5px;letter-spacing:.01em;margin-bottom:2px} /* v1.5: cards carry uploads */ .cfg-pathopt.drag{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold);background:var(--gold-tint)} .cfg-cardfile{display:block;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)} .cfg-cardfile .fn{display:block;font-family:var(--mono);font-size:11px;color:var(--navy);word-break:break-all} .cfg-cardfile .ft{display:block;font-family:var(--mono);font-size:9.5px;color:var(--gold-text);margin:2px 0 4px} .cfg-cardfile a{font-size:11px;font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--gold)} /* v1.5: Pantone disclosure */ .cfg-colrow.v2{align-items:flex-start} .cfg-colrow.v2 .cn{flex:1;min-width:0} .cfg-addpms{display:inline-block;font-size:11px;color:var(--muted);margin-top:6px;text-decoration:none} .cfg-addpms u{color:var(--gold-text);text-underline-offset:2px} .cfg-pmsbox{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap} /* own line under the field, not a fourth item on the flex row */ .cfg-pmshint{flex:0 0 100%;margin-top:2px;font-size:11px;line-height:1.4;color:var(--muted)} .cfg-pmsbox label{font-size:10px;color:var(--muted)} .cfg-pmsbox input{width:130px;border:1px solid var(--line);border-radius:4px;font-family:var(--mono);font-size:11.5px;padding:5px 8px} .cfg-pmsbox input.bad{border-color:#C0392B} .cfg-pmsbox a{font-size:10.5px;color:var(--muted);text-decoration:underline;text-underline-offset:2px} .cfg-flownote{font-size:12px;color:var(--gold-text);background:var(--gold-tint);border:1px solid var(--line);border-radius:6px;padding:8px 12px;margin:0 0 14px} .cfg-surfbar{display:flex;align-items:center;gap:8px;margin-bottom:10px} .cfg-surfbar[hidden]{display:none} [data-pantone].bad{border-color:#C0392B} .cfg-surfbar span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--muted)} .cfg-surfbar button{font-family:var(--font);font-size:12.5px;font-weight:600;border:1px solid var(--line);background:#fff;color:var(--muted);padding:6px 18px;border-radius:999px;cursor:pointer} .cfg-surfbar button.on{background:var(--navy);color:#fff;border-color:var(--navy)} .cfg-rail button.done{color:var(--navy);border-color:var(--navy);cursor:pointer} .cfg-rail button.done::before{content:'✓ ';color:var(--gold)} .cfg-rail button:disabled{cursor:default} .cfg-rail button.on:disabled{opacity:1} .cfg-pantbadge{font-family:var(--mono);font-size:10.5px;color:var(--gold-text);margin-top:8px} .cfg-pant input.bad{border-color:#C0392B} .cfg-colrow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px;width:100%} .cfg-colrow .d{width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.12);flex:none} .cfg-colrow .cn{display:flex;flex-direction:column;min-width:86px} .cfg-colrow .cn b{font-size:12.5px;color:var(--navy)} .cfg-colrow .cn .mono{font-family:var(--mono);font-size:10px;color:var(--muted)} .cfg-colrow .cp{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end} .cfg-colrow .cp label{font-size:10px;color:var(--muted);margin-bottom:3px} .cfg-colrow .cp input{width:110px;border:1px solid var(--line);border-radius:4px;font-family:var(--mono);font-size:11.5px;padding:5px 8px} .cfg-colrow .cp input.bad{border-color:#C0392B} /* v2.0: mouthpiece style selector (registry-driven) */ .cfg-mouthhost[hidden]{display:none} .cfg-mouthopts{display:flex;gap:10px;margin-top:8px} .cfg-mouthopts button{flex:1;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#fff; cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:var(--navy);text-align:left;transition:border-color .15s} .cfg-mouthopts button span{display:block;font-weight:400;font-size:11px;color:var(--muted);margin-top:4px} .cfg-mouthopts button.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)} /* v2.0: step-2 surface selector (upload target is explicit) */ .cfg-surfseg{display:flex;gap:10px;margin:0 0 12px} /* min-width:0 is load-bearing. A flex item defaults to min-width:auto and refuses to shrink below its content, so a long filename grew the button, the span's max-width:100% resolved against the already-expanded box, and the ellipsis it already carries never engaged - one surface ballooned and pushed the other past the container. */ .cfg-surfseg button{flex:1;min-width:0;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:#fff; cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:var(--navy);text-align:left;transition:border-color .15s} .cfg-surfseg button span{display:block;font-family:var(--mono);font-weight:400;font-size:10px;color:var(--muted); margin-top:3px;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .cfg-surfseg button.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)} /* Artwork type selector. Same segmented shape as the Front/Back control above, but the selection here is a MODE rather than a target, so the active option is filled navy instead of gold-outlined - it reads as "this is what this artwork is" rather than "this is where you are working". */ .cfg-atype{display:flex;gap:10px;margin:0 0 6px} .cfg-atype button{flex:1;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:#fff; cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:var(--navy);text-align:center; transition:background-color .15s,border-color .15s,color .15s} .cfg-atype button:hover{border-color:var(--navy)} .cfg-atype button.on{background:var(--navy);border-color:var(--navy);color:#fff} /* v1.9: build-level artwork color groups */ .cfg-colgroup{margin:18px 0 6px;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--gold-text)} .cfg-colgroup:first-child{margin-top:0} .cfg-chips .cfg-colgroup,.cfg-chips .cfg-note,.cfg-chips .cfg-colcount{width:100%} /* ---------- end-of-flow intent actions (Request a Quote / Submit for Production) ---------- */ .cfg-intents{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start} .cfg-intent{display:flex;flex-direction:column;gap:8px;max-width:300px} .cfg-intent .btn{width:100%} .cfg-intent-note{font-size:13px;line-height:1.5;color:#6B7080} .cfg-progress{margin-top:18px;font-size:14px;color:#6B7080} /* Submission failure, shown beneath the Submit buttons. Distinct from the advisory .cfg-flownote at the top of the page: this one reports that a submission did not complete, so it reads as a warning and stays until the customer acts on it. */ .cfg-submiterror{margin-top:18px;font-size:14px;line-height:1.5;color:#8A2B22; background:#FCF3F1;border:1px solid #E4BFB8;border-left:3px solid #C0392B; border-radius:6px;padding:12px 14px} /* ---------- decoration & finish (production metadata only - never simulated) ---------- */ .cfg-finish{margin:0 0 26px} .cfg-finish h3{margin:0 0 4px;font-size:17px} .cfg-finish .sub{margin:0 0 16px} .cfg-optgroup{margin:0 0 18px} .cfg-optlabel{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase; color:#6B7080;margin:0 0 8px} .cfg-opt{display:flex;align-items:flex-start;gap:10px;padding:6px 0;font-size:14px;cursor:pointer} .cfg-opt input{margin-top:3px;accent-color:#C9962E} .cfg-opt b{display:block;font-weight:600} .cfg-opt em{display:block;font-style:normal;font-size:13px;color:#6B7080;margin-top:1px} /* ---------- mouthpiece color ---------- */ .cfg-mouth label{display:block} .cfg-mouthmode{display:flex;flex-wrap:wrap;gap:8px 24px;margin:8px 0 10px} .cfg-mouthpick{margin-top:10px} .cfg-mouthpms{margin-top:10px} .cfg-mouthpms input{width:100%;max-width:260px} /* ---------- option cards (replaces tiny radio circles) ---------- */ .cfg-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:10px 0 4px} .cfg-cardgroup .cfg-card{margin:0} .cfg-cardgroup{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px} .cfg-cardgroup .cfg-optlabel{grid-column:1/-1;margin:6px 0 0} .cfg-card{position:relative;display:block;cursor:pointer;padding:13px 15px; border:1px solid #E2DED6;border-radius:10px;background:#fff; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease} .cfg-card:hover{border-color:#C9BFAE} .cfg-card input{position:absolute;opacity:0;pointer-events:none} .cfg-cardbody{display:block} .cfg-cardbody b{display:block;font-weight:600;font-size:14px;color:var(--navy);letter-spacing:.01em} .cfg-cardbody em{display:block;font-style:normal;font-size:12.5px;line-height:1.35; color:#6B7080;margin-top:3px} .cfg-card:has(input:checked){border-color:var(--gold);background:#FFFDF8; box-shadow:0 0 0 1px var(--gold) inset} .cfg-card:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px} /* artwork colours folded into the Artwork step */ .cfg-artcolors{margin:22px 0 4px;padding-top:18px;border-top:1px solid #E7E2D9} .cfg-artcolors h2{font-size:16px;margin:0 0 4px} /* ---------- centering guides (UI only, never in outputs) ---------- */ .cfg-guide{position:absolute;pointer-events:none;background:var(--gold);opacity:.85;z-index:4} .cfg-guide-v{width:1px} .cfg-guide-h{height:1px} /* ---------- modal dialog ---------- Deliberately NOT .cfg-confirm: that class belongs to the submission confirmation overlay, and an author display:flex there beat the UA [hidden]{display:none} rule, forcing that overlay visible. */ .cfg-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center; background:rgba(30,39,73,.38)} /* a hidden overlay must stay hidden even if a later rule sets display */ .cfg-modal[hidden],.cfg-confirm[hidden]{display:none !important} .cfg-modalbox{background:#fff;border-radius:12px;max-width:420px;width:calc(100% - 40px); padding:22px 24px;box-shadow:0 18px 50px rgba(30,39,73,.22)} .cfg-modalbox h3{margin:0 0 8px;font-size:17px;color:var(--navy)} .cfg-modalbox p{margin:0 0 18px;font-size:14px;line-height:1.5;color:#4A4F60} .cfg-modalacts{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end} /* ---------- device color section break ---------- */ .cfg-sectionbreak{border:0;border-top:1px solid #E7E2D9;margin:26px 0 16px} .cfg-sectionhead{margin:0 0 10px;font-size:13px;letter-spacing:.09em;text-transform:uppercase; color:#6B7080;font-weight:600} .cfg-bodycustom{margin-top:4px} /* branding-center guide: distinct from the true geometric center */ .cfg-guide-b{height:1px;background:repeating-linear-gradient(to right, var(--gold) 0 6px,transparent 6px 11px);opacity:.9} /* ---------- printing-method validation ---------- */ .cfg-printwarn{grid-column:1/-1;margin:2px 0 6px;font-size:13px;color:#9A6B12; background:#FFF8EA;border:1px solid #F0DFB8;border-radius:8px;padding:8px 11px} /* ---------- discreet secondary note (informational, not an alert) ---------- */ .cfg-subnote{grid-column:1/-1;margin:0 0 8px;font-size:12.5px;line-height:1.4;color:#6B7080} /* ---------- placement gate: subtle, uses the existing button language ------ */ .cfg-actions [data-next]:disabled, .cfg-actions [data-next].is-blocked{opacity:.45;cursor:not-allowed} /* ========================================================================== MOBILE REFINEMENT (<=640px) Presentation only. No geometry, placement maths, gating, colour logic or submission behaviour is touched here - every rule below is layout, spacing or type. Desktop is untouched: the whole block is inside the media query. ========================================================================== */ @media(max-width:640px){ /* ---- ROOT CAUSE FIX ------------------------------------------------- .cfg-stagewrap had TWO competing rules of equal specificity: line 18 @media(max-width:900px){ .cfg-stagewrap{position:static} } line 20 .cfg-stagewrap{position:sticky;top:96px} The unconditional sticky rule is declared AFTER the media query, so it won the cascade at every width and the mobile reset never took effect. The preview stayed pinned at top:96px on phones while the Mouthpiece cards scrolled over it - controls and imagery on the same visual layer. This block is the last stagewrap declaration in the file, so it wins. */ /* A COMPACT sticky preview, not the old one. The previous failure was a LAYERING bug, not stickiness itself: .cfg-stagewrap was pinned with no background and no stacking context, so .cfg-panel - later in the DOM and therefore painted after - drew its option cards straight over the device image. Three things make this version safe: 1. opaque background + z-index, so the preview paints ABOVE the panel and controls pass cleanly behind it instead of through it 2. a compact bounded height (~32svh), so it reserves a modest strip rather than a viewport-filling hero 3. top offset clears the PROXY header and Safari's own chrome Desktop keeps its own sticky rule at line 20, untouched. */ .cfg-stagewrap{position:sticky;top:64px;z-index:5; background:var(--cream);padding-bottom:10px; box-shadow:0 10px 12px -10px rgba(30,39,73,.10)} .cfg-stage{height:32vh;height:32svh;min-height:210px;max-height:290px} /* Position needs precision, so it keeps a larger canvas and does not pin - dragging under a sticky strip is worse than scrolling to the artwork. :has() scopes this to the visible step without touching markup or JS. */ .cfg-grid:has(.cfg-step[data-step="3"]:not([hidden])) .cfg-stagewrap{ position:static;z-index:auto;box-shadow:none;padding-bottom:0} .cfg-grid:has(.cfg-step[data-step="3"]:not([hidden])) .cfg-stage{ height:46vh;height:46svh;min-height:300px;max-height:420px} /* --- header: reclaim vertical space before the controls begin --- */ .cfg-hero h1{font-size:34px;line-height:1.12} .cfg-hero .sub{font-size:14px;line-height:1.5} .cfg-hero{margin-bottom:18px} /* --- step rail: was wrapping to three rows (101px). One scrollable row keeps all five steps reachable without eating the screen. --- */ .cfg-rail{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none;margin:14px -20px 18px;padding:0 20px 2px;gap:6px} .cfg-rail::-webkit-scrollbar{display:none} .cfg-rail button{flex:0 0 auto;font-size:10px;padding:7px 11px;letter-spacing:.06em} /* --- stage caption: space-between collided the two spans at 390px --- */ .cfg-stagefoot{flex-direction:column;gap:3px;align-items:flex-start; line-height:1.45;padding-top:8px} /* --- panel: tighter padding buys back a whole control row --- */ .cfg-panel{padding:18px 16px} .cfg-grid{gap:20px;padding-bottom:96px} /* --- touch targets: 44px minimum on the controls a thumb actually uses --- */ .cfg-surfbar button,.cfg-pathopt,.cfg-card{min-height:44px} .cfg-fld input[type=range]{height:34px} .cfg-fld input[type=text],.cfg-fld input[type=color]{min-height:44px} /* the Pantone fields sit outside .cfg-fld; they are the ones a thumb has to hit while the on-screen keyboard is up */ /* 16px is deliberate: iOS Safari auto-zooms the page when focusing an input under 16px, which throws the layout off mid-typing. Specificity raised because the panel rules set 13px. */ input[type=text][data-pantone],input[type=text][data-mouth-pms]{ min-height:44px;font-size:16px} .cfg-actions [data-next],.cfg-actions [data-back]{min-height:46px;font-size:15px} /* --- placement: controls sat ~750px below the preview, so positioning meant scrolling away from the artwork to reach size/rotation --- */ .cfg-step[data-step="3"] .cfg-panel{padding-top:16px} .cfg-step[data-step="3"] h2{font-size:19px;margin-bottom:6px} .cfg-step[data-step="3"] .sub{font-size:13px;line-height:1.45} /* --- inline placement messages read as guidance, not alarms --- */ .cfg-warn{font-size:13px;line-height:1.45;padding:10px 12px} .cfg-subnote,.cfg-printwarn{font-size:12.5px;line-height:1.45} /* --- modals must fit the viewport and stay reachable --- */ .cfg-modalbox{width:calc(100% - 28px);max-width:none;padding:18px 16px; max-height:calc(100vh - 96px);overflow-y:auto} .cfg-modalacts{gap:8px} .cfg-modalacts button{flex:1 1 auto;min-height:46px} /* --- Review: hierarchy rather than a flat wall of text --- */ .cfg-step[data-step="5"] .cfg-fld label{font-size:12.5px} .cfg-step[data-step="5"] h2{font-size:19px} } /* The sticky action bar is deliberately NOT used. On a real iPhone it floated over the Mouthpiece heading and the first option card - the same "controls on top of content" failure as the pinned preview. With the compact preview above, Continue sits close enough to reach by scrolling, which is worth more than a bar that overlaps. Desktop was never sticky. */ /* ---------- artwork element strip (Phase 1b) ---------------------------- */ .cfg-elements{margin:0 0 14px} .cfg-elstrip{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none} .cfg-elstrip::-webkit-scrollbar{display:none} .cfg-elchip{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:999px; padding:7px 13px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em; color:var(--muted);cursor:pointer;white-space:nowrap} .cfg-elchip.on{border-color:var(--gold);color:var(--navy);background:#FFFDF7} .cfg-elchip.bad{border-color:#C0392B;color:#C0392B} .cfg-elacts{display:flex;gap:8px;margin-top:8px} .cfg-elbtn{border:1px solid var(--line);background:#fff;border-radius:4px;padding:8px 12px; font-size:12.5px;color:var(--navy);cursor:pointer} .cfg-elbtn:hover{border-color:var(--gold)} .cfg-elbtn-del{color:#C0392B} .cfg-elbtn:disabled{opacity:.45;cursor:not-allowed} /* non-selected elements stay visible but are not transform-active */ .cfg-art.cfg-art-ghost{pointer-events:none;outline:none} .cfg-art.cfg-art-sel{outline:1px dashed var(--gold);outline-offset:2px} @media(max-width:640px){ /* the strip scrolls horizontally rather than wrapping into the controls */ .cfg-elstrip{margin:0 -16px;padding:0 16px 4px} .cfg-elchip{min-height:38px;font-size:11px} .cfg-elbtn{min-height:44px;flex:1 1 auto} } /* ---------- text element controls (Phase 2a-i) -------------------------- */ .cfg-textctl{margin:0 0 14px;padding:14px;border:1px solid var(--line); border-radius:6px;background:#fff} .cfg-fontrow{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0} .cfg-fontgrp{display:flex;gap:6px;flex-wrap:wrap} /* A native