/* UX V3.1 presentation only: same 114px allocation, events and character geometry. */
.defs{position:absolute;width:0;height:0;overflow:hidden}
/* Six unequal visual weights, never time estimates or percentages. The existing
   6px gap above purchase holds this 4px bar without changing the 114px strip. */
#generation-phases{position:absolute;left:0;right:0;bottom:-5px;height:4px;margin:0;padding:0;display:flex;gap:4px;list-style:none;pointer-events:none}
#generation-phases[hidden]{display:none}
.progress-segment{flex:1;min-width:0;height:4px;border:1px solid #94a68d;background:#d1dbcc;border-radius:2px;box-sizing:border-box}
.progress-segment:nth-child(2){flex-grow:.7}
.progress-segment:nth-child(3){flex-grow:1.35}
.progress-segment:nth-child(4){flex-grow:1.1}
.progress-segment:nth-child(5){flex-grow:1.6}
.progress-segment:nth-child(6){flex-grow:.85}
.progress-segment[data-state=complete]{background:var(--ink);border-color:var(--ink)}
.progress-segment[data-state=current]{background:var(--paper,#faf9f5);border-color:var(--ink)}
#selection-screen .selection-actions{grid-template-columns:minmax(0,1fr)}
#selection-screen #request-preview{width:100%;grid-column:1/-1}
/* Body outline and facial features are unchanged. Only the requested colour changes. */
#body-v3{fill:#75957b}
#mini-message::after{content:none}
#generation-state[data-generating=true] #mini-message::after{content:'';display:inline-block;width:9px;height:9px;margin-inline-start:5px;vertical-align:baseline;border:1.5px solid #a9bcaa;border-top-color:var(--ink);border-radius:50%;animation:mz-progress-spin 1s linear infinite}
@keyframes mz-progress-spin{to{transform:rotate(360deg)}}
#generation-state{display:grid;grid-template-columns:minmax(0,1fr) max-content;grid-template-rows:64px 44px;gap:4px 12px;height:114px;padding:1px 0!important;position:relative}
.mini-progress{grid-column:1/-1;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;height:64px}
.mini-message{margin:0;min-width:0;max-width:340px;font-size:15px;line-height:1.3}
.mini-scene{width:224px;height:64px;flex:none;background:transparent;border:0;border-radius:0;overflow:hidden}
.mini-scene svg{display:block}
.mini-scene>svg>svg{filter:drop-shadow(0 0 .65px #213b2e)}
.mini-scene>svg>path{stroke:#75957b}
.mini-scene>svg>circle{fill:#75957b}
.mini-error-copy{display:none;margin:0;font-size:13px;line-height:1.2}
#generation-state>#preview-status,#generation-state>#preview-activity{display:none!important}
#generation-state .orbital-controls{grid-column:1;grid-row:2;align-self:center!important;justify-self:start;position:static;top:auto;min-width:0;gap:0;align-items:center}
#generation-state .orbital-controls button{min-height:44px;max-width:100%;margin:0;padding:4px 0;border:0;border-radius:0;background:transparent;box-shadow:none;gap:7px;font-size:14px;text-align:left;text-decoration:underline;text-underline-offset:4px;line-height:1.2}
#generation-state .orbital-controls button:before{font-size:21px;flex:none}
#generation-state .orbital-controls #orbital-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);padding:0}
#generation-state>#cancel-preview{grid-column:2;grid-row:2;justify-self:end;align-self:center;position:static;min-height:44px;margin:0;padding:4px 0;font-size:13px}
#generation-state button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#generation-state[data-experience=ready] .mini-scene{width:84px;height:24px}
#generation-state[data-experience=ready] .mini-message{max-width:none;font-size:14px}
#generation-state:is([data-experience=error],[data-experience=cancelled]){grid-template-rows:36px 32px 44px;gap:0}
#generation-state:is([data-experience=error],[data-experience=cancelled]) .mini-progress{height:36px;gap:12px}
#generation-state:is([data-experience=error],[data-experience=cancelled]) .mini-message{max-width:none;font-size:14px;line-height:1.2}
#generation-state:is([data-experience=error],[data-experience=cancelled]) .mini-scene{width:84px;height:24px}
#generation-state[data-experience=error] .mini-error-copy{display:block;grid-column:1/-1;grid-row:2}
#error-actions{grid-column:1/-1;grid-row:3;position:static!important;align-self:end;align-items:center;gap:18px;height:44px;margin:0}
#error-actions a{display:none}
#error-actions button{min-height:44px;margin:0;padding:4px 0;border:0;background:transparent;border-radius:0;box-shadow:none;font-size:14px;text-align:left;text-decoration:underline;text-underline-offset:4px}
#generation-state[data-experience=optional] .mini-progress{visibility:hidden}
#buy-help,#support-dialog #contact-toggle{display:none}
.waiting-message{display:none!important}
@media(max-width:900px){
 #generation-state{column-gap:10px}
 .mini-progress{gap:8px}
 .mini-message{font-size:14px;line-height:1.25}
 #generation-state .orbital-controls button{font-size:14px}
 #generation-state:is([data-experience=error],[data-experience=cancelled]) .mini-progress{gap:8px}
 #generation-state:is([data-experience=error],[data-experience=cancelled]) .mini-message{font-size:13px;line-height:1.2}
 .mini-error-copy{font-size:12px;line-height:1.2}
 #error-actions{gap:16px}
 #error-actions button{font-size:13px}
}
@media(max-width:350px){
 .mini-progress .mini-scene{width:208px}
 .mini-message{font-size:13px;line-height:1.2}
}
@media(prefers-reduced-motion:reduce){#generation-state *{animation:none!important;transition:none!important}}

@media(prefers-reduced-motion:reduce){#generation-state #mini-message::after{animation:none!important}}

/* V3.1 r2: progress left of the actors, customer message underneath. */
#generation-state{grid-template-columns:minmax(0,1fr) 224px;grid-template-rows:64px 44px;gap:4px 12px}
.mini-progress{display:contents}
#generation-phases{position:static;grid-column:1;grid-row:1;align-self:start;margin:4px 0 0;height:12px;width:100%;gap:3px}
.progress-segment{height:12px;border-radius:3px}
.mini-scene{grid-column:2;grid-row:1;align-self:center;justify-self:end}
.mini-message{grid-column:1/-1;grid-row:2;align-self:center;max-width:none;font-size:14px;line-height:1.3}
#generation-state>#cancel-preview{grid-column:1;grid-row:1;justify-self:start;align-self:end}
#generation-state .orbital-controls{grid-column:1;grid-row:1;align-self:end!important}
#generation-state[data-experience=ready]{grid-template-columns:minmax(0,1fr) 224px}
#generation-state:is([data-experience=error],[data-experience=cancelled]){grid-template-columns:minmax(0,1fr) 224px;grid-template-rows:28px 40px 44px;gap:0 12px}
#generation-state:is([data-experience=error],[data-experience=cancelled]) .mini-message{grid-row:2;font-size:12px;line-height:1.08}
#generation-state .mini-error-copy{display:none!important}
#generation-state[data-experience=optional] .mini-message,#generation-state[data-experience=optional] .mini-scene{visibility:hidden}
/* Purchase order: action first, units and price at its right. No cart logic changes. */
#purchase{grid-template-columns:minmax(0,1fr) 100px max-content;grid-template-rows:50px 32px;gap:6px 10px;align-content:start}
#purchase .quantity-row label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
#purchase #add-cart{grid-column:1;grid-row:1;align-self:stretch;min-height:48px;height:50px;width:100%;font-size:15px;padding:8px}
#purchase .quantity{grid-column:2;grid-row:1;align-self:center;width:100%;height:44px}
#purchase #line-price{grid-column:3;grid-row:1;align-self:center;justify-self:end;font-size:27px;white-space:nowrap}
#purchase #cart-feedback,#purchase #purchase-feedback{grid-column:1/-1;grid-row:2}
@media(max-width:900px){
 #generation-state{column-gap:8px}
 #purchase{grid-template-columns:minmax(0,1fr) 112px max-content;column-gap:7px}
 #purchase #add-cart{font-size:14px;padding:7px;gap:5px}
 #purchase .quantity input{width:36px;min-width:0;padding:0;font-size:16px}
 #purchase .quantity button{min-width:36px;width:36px;padding:0}
 #purchase #line-price{font-size:25px}
}

@media(max-width:900px){#preview-title{font-size:20px;line-height:1.1;white-space:nowrap;flex-shrink:0}#adjust-selection{padding:0;min-height:30px;line-height:1.1;display:flex;align-items:center;justify-content:flex-end}}

/* Keep the actors’ reserved column constant in every state. The compact
   final actors leave room for the existing rotation action, not for bar growth. */
#generation-state[data-experience=ready] .orbital-controls{width:max-content;max-width:calc(100% + 140px)}

/* Explain the wait only once a valid first image is visible. Same 114px strip. */
.detail-wait-note{grid-column:1;grid-row:1;align-self:end;margin:0;font-size:12px;line-height:1.1;max-height:44px}
@media(max-width:900px){
 #generation-state[data-detail-wait=true] .detail-wait-note{grid-column:1/-1;grid-row:2;align-self:center}
 #generation-state[data-detail-wait=true] .mini-message{grid-column:1;grid-row:1;align-self:end;max-width:none;font-size:12px;line-height:1.1}
}

.colour-readiness-note{font-size:14px;line-height:1.35;margin:6px 0;min-height:19px;color:var(--ink)}