:root{font-family:Arial,Helvetica,sans-serif;color:#162c3b;background:#f3f6f8;font-size:16px}*{box-sizing:border-box}body{margin:0}header{background:#162c3b;color:white;padding:20px max(24px,calc((100vw - 1280px)/2));display:flex;align-items:center;justify-content:space-between;gap:16px}header div{font-size:1.6rem;font-weight:800;letter-spacing:-.04em}header span{color:#efa83c}header small{font-size:.8rem;font-weight:400;border:1px solid #71818d;border-radius:20px;padding:5px 10px;margin-left:12px;letter-spacing:0}header p{margin:0;color:#d1dce3;font-size:.9rem}main{max-width:1328px;margin:auto;padding:32px 24px 40px}.heading{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:12px}h1{font-size:1.8rem;letter-spacing:-.035em;margin:0 0 9px}h2{font-size:1rem;margin:0 0 15px}.heading p{margin:0;color:#617480;line-height:1.5}.upload,button{font:inherit;font-weight:700;border:0;border-radius:9px;cursor:pointer;padding:13px 18px;background:#efa83c;color:#162c3b}.upload{white-space:nowrap;display:inline-block}.upload input{position:absolute;width:1px;height:1px;opacity:0}.upload:focus-within{outline:3px solid #26749e;outline-offset:3px}.file-name{color:#617480;font-size:.9rem;margin:0 0 20px;overflow-wrap:anywhere}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px;align-items:start}.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}article,aside{background:white;border:1px solid #dbe4e9;border-radius:14px;padding:20px}aside{padding:24px;position:sticky;top:20px}.display{height:390px;display:flex;justify-content:center;align-items:center;background:#f0f3f5;border:1px solid #dfe6ea;border-radius:8px;overflow:hidden;padding:12px}.display canvas{display:none;max-width:100%;max-height:100%;object-fit:contain;background:white}.display.ready canvas{display:block}.display.ready .empty{display:none}.empty{color:#728490;font-size:.9rem;text-align:center;line-height:1.6;padding:20px}.preview-title{display:flex;justify-content:space-between;gap:10px}.preview-title span{font-size:.8rem;color:#617480}.assessment{padding:20px 22px;background:#e6edf1;border:1px solid #cddae2;border-radius:12px;margin:20px 0}.assessment p{font-size:.92rem;line-height:1.55;margin:7px 0 0}.assessment.warn{background:#fff1dd;border-color:#e7bd79;color:#694216}.assessment.bad{background:#fff0ed;border-color:#e1a594;color:#803c2e}.result-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.result-actions span{font-size:.9rem;color:#617480}button:disabled{opacity:.5;cursor:not-allowed}details{margin-top:24px;font-size:.9rem;color:#617480;line-height:1.6}summary{cursor:pointer;color:#28495c;font-weight:700}.control{border-bottom:1px solid #e5ecf0;padding:0 0 17px;margin:0 0 18px}.control label{display:flex;justify-content:space-between;align-items:center;font-size:.92rem;font-weight:700;gap:12px}.control output{color:#567081;font-weight:400;white-space:nowrap}.control p,.control-note{font-size:.86rem;line-height:1.5;color:#617480;margin:9px 0 0}input[type=range]{width:100%;accent-color:#1e6b93;margin:18px 0 0;touch-action:none}input,button{font:inherit}input[type=number]{width:105px;border:1px solid #b8cbd5;padding:10px;border-radius:7px}.number{display:flex;gap:10px;align-items:center;margin-top:12px}.check{display:flex;gap:10px;align-items:center;font-size:.92rem;margin:16px 0;cursor:pointer}.check input{width:19px;height:19px;accent-color:#1e6b93}.secondary{width:100%;margin-top:22px;border:1px solid #b8cbd5;background:white;color:#21495e}footer{max-width:1280px;margin:0 auto;padding:0 24px 24px;color:#7a8b96;font-size:.85rem}[hidden]{display:none!important}@media(max-width:1000px){.workspace{grid-template-columns:1fr 280px}.pair{grid-template-columns:1fr}.display{height:300px}}@media(max-width:720px){header{padding:18px 20px}header p{display:none}main{padding:24px 16px}.heading{align-items:flex-start;flex-direction:column}h1{font-size:1.55rem}.workspace{grid-template-columns:1fr}.pair{grid-template-columns:1fr 1fr;gap:10px}article{padding:12px}.display{height:240px;padding:7px}aside{position:static}.assessment{padding:17px}header small{font-size:.72rem}}@media(max-width:430px){.pair{grid-template-columns:1fr}.display{height:290px}}

.ai-help{margin:18px 0 24px}.ai-help>.secondary{width:auto;max-width:100%;margin:0;text-align:left;line-height:1.5}.ai-help>div{background:white;border:1px solid #dbe4e9;border-radius:12px;padding:20px;margin-top:12px}.ai-help p{line-height:1.55;color:#617480;margin:0 0 16px}.ai-help p:last-child{margin:16px 0 0}.ai-help textarea{display:block;width:100%;min-height:300px;resize:vertical;border:1px solid #b8cbd5;border-radius:8px;padding:14px;font:inherit;line-height:1.55;color:#162c3b;background:#f8fafb;margin-bottom:16px}
header a{color:white;font-size:.9rem;text-decoration:none;border:1px solid #728593;padding:10px 14px;border-radius:8px}select{width:100%;font:inherit;border:1px solid #b8cbd5;border-radius:8px;background:white;color:#162c3b;padding:10px;margin-top:10px}.small{font-size:.8rem;padding:7px 10px;margin:0;width:auto}.preview-title{align-items:center;margin-bottom:15px;flex-wrap:wrap}.preview-title h2{margin:0}.preview-options{display:block;margin-top:12px;font-size:.85rem}.preview-options select{width:auto;margin:0 0 0 8px;padding:6px}.result-actions .secondary{width:auto;margin:0}.presets{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px}.presets button{font-size:.8rem;padding:8px 9px;background:#e6edf1}.presets button.active{background:#162c3b;color:white}input[type=range]{min-height:28px}.picking{outline:3px solid #d94b35}.picking canvas{cursor:crosshair}aside{position:static}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #26749e;outline-offset:3px}input:disabled{opacity:.45}@media(max-width:720px){header{align-items:flex-start;flex-wrap:wrap}header div{font-size:1.4rem}header a{padding:8px;font-size:.8rem}.pair{grid-template-columns:1fr}.display{height:330px}}

/* Keep both previews available while scrolling the adjustment controls. */
aside{position:static}.previews{position:sticky;top:16px;align-self:start;max-height:calc(100dvh - 32px);overflow:auto;scrollbar-width:thin}.pair{grid-template-columns:repeat(2,minmax(0,1fr))}.pair article{min-width:0}.pair .display{height:clamp(150px,calc(100dvh - 250px),390px)}
@media(max-width:720px){.workspace{display:flex;flex-direction:column;gap:18px;align-items:stretch}.workspace>.pair{position:sticky;top:0;z-index:10;background:#f3f6f8;padding:8px 0;margin:0;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));box-shadow:0 7px 10px -10px #162c3b}.workspace>.pair article{padding:10px}.workspace>.pair h2{font-size:.875rem;margin-bottom:8px}.workspace>.pair .display{height:clamp(80px,20dvh,170px);padding:5px}.workspace>.pair .preview-title{gap:5px;margin-bottom:8px}.workspace>.pair .preview-title h2{margin:0}.workspace>.pair .small{font-size:.75rem;padding:5px 7px}.workspace>.pair .preview-options{font-size:.75rem}.workspace>.pair .preview-options select{display:block;max-width:100%;margin:5px 0 0;font-size:.75rem}.workspace>aside{order:1}.workspace>.previews{order:2;position:static;max-height:none;overflow:visible}.workspace>.pair #pick-help{font-size:.75rem}}

#reset{margin:0 0 20px}.control .value-below{display:block;min-height:1.3em;margin-top:6px;font-size:.92rem;font-variant-numeric:tabular-nums}

.shade-ends{display:flex;justify-content:space-between;font-size:.85rem;color:#617480;margin:2px 0 16px}#artworkShade{background:linear-gradient(to right,#fff,#000);border-radius:10px}

#pick-artwork{display:block;margin:0 0 16px}

.manual-row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0;font-size:.85rem}.manual-row label{display:inline-flex;align-items:center;justify-content:flex-start;gap:6px;font-size:.85rem;font-weight:400;cursor:pointer}.manual-row input{width:17px;height:17px;accent-color:#1e6b93}.manual-options{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.manual-options button{margin:0;width:auto}.display{position:relative}.lasso-overlay{position:absolute;z-index:2;pointer-events:none;overflow:hidden}.lasso-overlay.drawing{pointer-events:auto;touch-action:none;cursor:crosshair}.lasso-overlay polygon,.lasso-overlay polyline{fill:none;stroke:#e1492e;stroke-width:2;stroke-dasharray:6 4}.lasso-hint{font-size:.85rem;line-height:1.4;color:#954024;margin:8px 0}.manual-row:has(input:checked)>label:first-child{color:#a53824}

.control label:has(.setting-activation){justify-content:flex-start;flex-wrap:wrap}.control .setting-activation{flex:none;width:18px;height:18px;accent-color:#1e6b93;margin:0}.control label:has(.setting-activation) output{margin-left:auto}.setting-inactive>input[type=range],.setting-inactive>p,.setting-inactive>.manual-row{opacity:.45}.setting-inactive>input[type=range]{cursor:not-allowed}

.colour-section{border-top:1px solid #dbe4e9;padding-top:24px;margin-top:24px}.colour-section h3{font-size:.92rem;margin:16px 0 12px}.colour-palette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.colour-swatch{background:white;border:1px solid #dbe4e9;font-size:.72rem;padding:7px 2px;font-weight:400}.colour-swatch span{display:block;background:var(--swatch);width:26px;height:26px;border:1px solid #bbc8ce;border-radius:50%;margin:0 auto 5px}.colour-swatch.active{border:2px solid #efa83c;padding:6px 1px}.part-mode{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px;font-size:.85rem}.part-mode label{display:flex;gap:6px;align-items:center}#part-help{font-size:.85rem;line-height:1.5;color:#617480}.lasso-overlay{touch-action:none}

.display canvas{transform-origin:0 0;flex-shrink:0}.original-zoom{display:block;margin-top:12px;font-size:.85rem;font-weight:700}.original-zoom output{float:right;font-weight:400;color:#617480}.original-zoom input{display:block;margin-top:8px}#original-wrap,#result-wrap{touch-action:none}.display canvas{will-change:transform}

.display.can-pan{cursor:grab;user-select:none}.display.is-panning,.display.is-panning canvas{cursor:grabbing}

.shirt-intensity{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.5rem}#shirt-intensity{width:100%}#shirt-preview-controls.setting-inactive{opacity:.45}

.artwork-bottom{display:flex;justify-content:flex-end;margin-top:10px}.artwork-bottom .secondary{margin:0}.hide-original-control{display:none}.hide-original-control input{accent-color:#1e6b93;width:18px;height:18px}.original-hidden .hide-original-control{margin-bottom:0}#colour-limit-message{font-size:.85rem;line-height:1.4;margin:8px 0}
@media(max-width:720px){.hide-original-control{display:flex;align-items:center;gap:8px;font-size:.85rem;margin-bottom:10px}.pair.original-hidden{grid-template-columns:1fr}.pair.original-hidden #original-article{padding:8px 10px}.pair.original-hidden #original-article>:not(.hide-original-control){display:none!important}.workspace>.pair.original-hidden #result-wrap{height:clamp(180px,40dvh,360px)}.pair.original-hidden #artwork-article{grid-column:1/-1}.workspace>.pair.original-hidden{gap:6px}}

#eraser-control>label.check{justify-content:flex-start;gap:8px}#eraser-enabled{flex:none;width:19px;height:19px;margin:0}.artwork-pick-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:16px}.artwork-pick-actions #pick-artwork{margin:0}.artwork-pick-actions button{flex:none;width:auto;margin:0}

.chatgpt-link a{color:#1e6b93;font-weight:700;text-underline-offset:3px}

/* On phones only the artwork remains pinned while the original scrolls away. */
@media(max-width:720px){
.workspace>.pair{display:none!important}
.workspace>#original-article,.workspace>#artwork-article{width:100%;box-sizing:border-box;padding:10px;order:0}
.workspace>#original-article{position:static}
.workspace>#artwork-article{position:sticky;top:0;z-index:10;background:#fff;box-shadow:0 7px 10px -10px #162c3b}
.workspace>#original-article .display{height:clamp(160px,30dvh,280px)}
.workspace>#artwork-article .display{height:clamp(140px,27dvh,250px)}
.workspace>#artwork-article h2{font-size:1rem;margin:0 0 6px}
.workspace>#artwork-article .artwork-bottom{margin-top:4px}
.workspace.original-hidden>#original-article>:not(.hide-original-control){display:none!important}
.workspace.original-hidden>#artwork-article #result-wrap{height:clamp(180px,40dvh,360px)}
}
/* Labelled options are tactile toggle buttons on desktop and phone. */
.selection-toggle{display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;text-align:left;min-height:40px;padding:9px 12px;margin:0;border:1px solid #cbd3d9;border-radius:8px;background:#edf0f2;color:#77818a;font-size:.9rem;font-weight:650;line-height:1.35;box-shadow:none;white-space:normal}
.selection-toggle[aria-pressed=true]{background:#e6f3fa;color:#164d6b;border:2px solid #1e6b93;padding:8px 11px;box-shadow:inset 3px 0 #1e6b93}
.selection-toggle:disabled{opacity:.4;cursor:not-allowed}
.selection-toggle:focus-visible{outline:3px solid #efa83c;outline-offset:2px}
.selection-toggle output{margin-left:auto}
.control label:has(.selection-toggle),.manual-row label:has(.selection-toggle),.manual-options label:has(.selection-toggle),.part-mode label:has(.selection-toggle){display:block}
.manual-row label:has(.selection-toggle),.manual-options label:has(.selection-toggle){margin:0}
.hide-original-control .selection-toggle{width:100%}

/* Built-in switch style chosen for all selection buttons. */
.selection-toggle{justify-content:space-between;gap:10px;border-radius:9px;min-height:44px;padding:10px 12px;border:1px solid #cbd3d9;background:#edf0f2;color:#73808a;box-shadow:none}
.selection-toggle[aria-pressed=true]{background:#e7f3fa;color:#174f6d;border:1px solid #1e6b93;padding:10px 12px;box-shadow:none}
.selection-switch-track{display:flex;align-items:center;flex:0 0 32px;width:32px;height:18px;padding:2px;box-sizing:border-box;border-radius:14px;background:#bdc6cd}
.selection-switch-knob{display:block;width:14px;height:14px;border-radius:50%;background:#fff;transform:translateX(0);transition:transform .12s ease}
.selection-toggle[aria-pressed=true] .selection-switch-track{background:#1e6b93}
.selection-toggle[aria-pressed=true] .selection-switch-knob{transform:translateX(14px)}
.selection-toggle output{white-space:nowrap}
@media(prefers-reduced-motion:reduce){.selection-switch-knob{transition:none}}

.selection-toggle.clean-outline{justify-content:center;background:#f5f6f7;border:1px solid #cbd3d9;border-radius:8px;color:#73808a;padding:10px 12px}
.selection-toggle.clean-outline[aria-pressed=true]{background:#eaf5fc;color:#175b81;border:2px solid #1e6b93;padding:9px 11px}
.selection-toggle.clean-outline[aria-pressed=true]::before{content:'✓';flex:none;color:#175b81}
button.selection-action{border:1px solid #1e6b93;background:#fff;color:#175b81;border-radius:8px}
button.selection-action[aria-pressed=true],button.selection-action:active,button.selection-action.action-flash{background:#eaf5fc;color:#175b81}
/* Reserve the same indicator space and border width in both outline states. */
.selection-toggle.clean-outline,.selection-toggle.clean-outline[aria-pressed=true]{border-width:2px;padding:9px 11px}
.selection-toggle.clean-outline::before{content:'×';display:inline-block;flex:0 0 16px;width:16px;text-align:center;color:#73808a}
.selection-toggle.clean-outline[aria-pressed=true]::before{content:'✓';flex:0 0 16px;width:16px;color:#175b81}
.selection-toggle.clean-outline[data-toggle-for^="include-"]::before,
.selection-toggle.clean-outline[data-toggle-for^="exclude-"]::before{content:none;display:none}

.artwork-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.artwork-bottom #lock-zoom{grid-column:2;font-size:.85rem;padding:8px 12px}
.artwork-bottom #undo{grid-column:3;justify-self:end}
#lock-zoom[aria-pressed=true]{background:#eaf5fc;border-color:#1e6b93;color:#175b81}

.ai-create-link{margin:12px 0!important}.ai-create-link a{color:#1e6b93;text-underline-offset:3px;font-weight:650}
.ai-mode-button{display:block;width:auto;max-width:100%;margin:12px 0;background:#efa83c;color:#162c3b;border:2px solid #d2912d;text-align:left;line-height:1.4}
.ai-mode-button[aria-pressed=true]{background:#f6c76a;border-color:#976218;box-shadow:inset 3px 0 #976218}
aside.ai-prepared>:not(.ai-keep):not(h2){display:none!important}

.artwork-bottom .history-actions{grid-column:3;justify-self:end;display:flex;gap:8px;align-items:center}
.artwork-bottom .history-actions button{font-size:.85rem;padding:8px 10px;margin:0}
@media(max-width:380px){.artwork-bottom{gap:6px}.artwork-bottom .history-actions{gap:5px}.artwork-bottom .history-actions button{padding:8px}.artwork-bottom #lock-zoom{padding:8px}}

#shirt-colours{grid-template-columns:repeat(3,minmax(0,1fr))}
#shirt-colours .colour-swatch{overflow-wrap:anywhere;padding-left:4px;padding-right:4px;line-height:1.4;min-height:66px}