/* The workbench is a three-step editor, rather than a page of stacked forms. */
[hidden]{display:none!important}
.palette-page{padding-top:48px}
.palette-page>.page-title{margin-bottom:22px}
.palette-page .page-title h1{font-size:clamp(44px,5.4vw,76px);margin-bottom:18px}
.palette-page .page-title p{font-size:17px}
.wb-subtitle{font-size:28px;letter-spacing:-.03em;margin:0 0 20px}
.workbench-tabs{display:flex;border-block:1px solid var(--line);margin:24px 0}
.workbench-tabs button{flex:1;min-height:70px;text-align:left;padding:17px 22px;background:transparent;border-right:1px solid var(--line);font-size:16px}
.workbench-tabs button span{font-size:11px;margin-right:18px;color:var(--wine)}
.workbench-tabs button[aria-selected=true]{background:var(--wine);color:var(--cream)}
.workbench-tabs button[aria-selected=true] span{color:inherit}
.wb-layout{display:grid;grid-template-columns:minmax(260px,32fr) minmax(0,68fr);gap:38px;align-items:start}
.wb-controls{background:var(--paper);padding:26px;border:1px solid var(--paper-edge)}
.wb-controls h2{font-size:25px;letter-spacing:-.03em;margin:26px 0 20px}
.wb-controls h2:first-child{margin-top:0}
.wb-panel>*:last-child{margin-bottom:0}
.wb-field{display:block;font-size:14px;line-height:1.5;margin:22px 0}
.wb-field output{float:right;font-size:12px}
.wb-field input,.wb-field select,.wb-field textarea,.wb-colour input:not([type=radio]){display:block;width:100%;margin-top:9px;min-height:48px;border:1px solid #33382d40;background:transparent;border-radius:0;color:var(--ink);padding:10px}
.wb-field input[type=range]{padding:0;accent-color:var(--wine);border:0;min-height:34px}
.wb-field input[type=color]{padding:4px}
.wb-field textarea{resize:vertical;line-height:1.6}
.wb-inline{display:flex;gap:17px;justify-content:space-between}
.wb-inline button{min-width:44px;min-height:44px;background:transparent;font-size:13px}
.wb-check{display:flex;align-items:center;gap:9px;font-size:13px;margin:16px 0}
.wb-check input{width:18px;height:18px;accent-color:var(--wine)}
.wb-modes{padding:0;border:0;margin:24px 0}
.wb-modes legend{font-size:13px;margin-bottom:10px}
.wb-modes button{display:block;min-height:48px;width:100%;padding:11px;text-align:left;border:1px solid #33382d40;border-bottom:0;background:transparent;font-size:14px}
.wb-modes button:last-child{border-bottom:1px solid #33382d40}
.wb-modes button[aria-pressed=true]{background:var(--wine);color:var(--cream)}
.wb-current{display:flex;gap:16px;align-items:center;margin:24px 0}
.wb-current>span{width:64px;height:64px;background:transparent;border:1px solid var(--line)}
.wb-current small{display:block;font-size:11px}
.wb-current strong{font-size:22px}
.wb-preview{min-width:0}
.wb-source{aspect-ratio:4/3;position:relative;overflow:hidden;background:#E4DED2;border:7px solid var(--paper);box-shadow:0 10px 25px #33382d20}
#photo-stage{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.wb-empty{position:absolute;inset:0;display:grid;place-content:center;gap:18px;padding:30px;background:transparent;font-size:18px;line-height:1.5;text-align:center}
.wb-empty span{font-size:14px;color:var(--wine);text-decoration:underline}
#slice-stage{display:block;width:100%;height:auto;touch-action:none;cursor:grab;box-shadow:0 10px 24px #33382d18;border:1px solid var(--paper-edge)}
#palette-card{display:block;width:100%;height:auto;box-shadow:0 10px 24px #33382d20}
.wb-preview .small{margin-top:18px;max-width:680px}
.wb-colour{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;margin:20px 0;padding-bottom:20px;border-bottom:1px solid var(--line)}
.wb-colour>span{height:50px}
.wb-colour strong{font-size:15px}
.wb-colour .wb-check{margin:8px 0;font-size:12px}
.wb-colour input:not([type=radio]){font-size:12px}
#export-result{margin-top:30px}
#export-result a{margin:0 20px 20px 0}
#export-result img{margin-top:20px;border:1px solid var(--line)}
.form-message{font-size:14px;line-height:1.6;color:var(--wine);margin-top:20px}
@media(max-width:900px){.wb-layout{grid-template-columns:minmax(230px,38fr) minmax(0,62fr);gap:24px}.wb-controls{padding:20px}}
@media(max-width:760px){
 .palette-page{padding-top:48px}
.palette-page>.page-title{margin-bottom:22px}
.palette-page .page-title h1{font-size:clamp(44px,5.4vw,76px);margin-bottom:18px}
.palette-page .page-title p{font-size:17px}
.wb-subtitle{font-size:25px}
 .workbench-tabs{margin:26px 0;position:sticky;top:80px;z-index:15;background:var(--cream)}
 .workbench-tabs button{font-size:12px;line-height:1.4;padding:10px 8px;min-height:64px;text-align:center}
 .workbench-tabs button span{display:block;font-size:9px;margin:0 0 5px}
 .wb-layout{display:flex;flex-direction:column;gap:25px}
 .wb-controls,.wb-preview{width:100%}
 .wb-controls{padding:22px}
 .wb-source{border-width:5px}
 .wb-field{font-size:14px}
 .wb-field textarea{font-size:16px}
 .wb-preview{order:-1}
 .wb-current{margin-block:18px}
 #preview-record{max-height:none}
}

.wb-preview[data-step=photo]{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;align-items:start}
.wb-preview[data-step=photo] #palette-message{grid-column:1/-1}
@media(max-width:1050px){.wb-preview[data-step=photo]{grid-template-columns:1fr;gap:25px}}

#export-result{scroll-margin-top:175px}