/* ID: WBT-0155 / v30 / 2026-10-27 — clear choices for composition, colour and the amount of copy. */

/* Optional starting brief; all controls remain in the normal form flow. */
.studio-prompt{min-width:0;margin:0 0 32px;padding:24px;border:1px solid #c5d8b7;border-radius:21px;background:linear-gradient(135deg,#f3f8eb,#fbfcf7);color:#1d4128}
.studio-prompt>.eyebrow{margin:0 0 9px;font-size:9px;letter-spacing:.12em;color:#477744}
.studio-prompt>h2{margin:0 0 20px;font-size:clamp(22px,2.2vw,29px);font-weight:800;line-height:1.55;letter-spacing:-.025em;overflow-wrap:anywhere}
.studio-prompt>label{display:block;min-width:0;margin:0 0 9px;font-size:12px;font-weight:750;line-height:1.8;overflow-wrap:anywhere}
.studio-prompt>textarea{display:block;width:100%;min-width:0;max-width:100%;min-height:112px;margin:0;padding:13px 15px;border:1px solid #93b085;border-radius:12px;background:#fff;color:#1d4128;font:inherit;font-size:16px;font-weight:400;line-height:1.8;resize:vertical}
.studio-prompt>textarea::placeholder{color:#6c7e65;opacity:1}
.studio-prompt__examples{display:flex;flex-wrap:wrap;gap:8px;min-width:0;margin:12px 0 17px}
.studio-prompt__examples>button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;max-width:100%;padding:9px 16px;border:1px solid #b2c9a4;border-radius:999px;background:#fff;color:#356038;font:inherit;font-size:11px;font-weight:700;line-height:1.7;text-align:center;overflow-wrap:anywhere;cursor:pointer}
.studio-prompt__examples>button:hover{border-color:#157c45;background:#e7f1dd}
.studio-prompt>[data-studio-suggest]{max-width:100%;min-height:48px;gap:16px;padding:12px 21px;font-size:12px;line-height:1.7;white-space:normal;overflow-wrap:anywhere}
.studio-prompt>.form-note{margin:13px 0 0;font-size:11px;color:#536f4c;line-height:1.85;overflow-wrap:anywhere}
.studio-prompt>[data-studio-suggestion-status]{min-width:0;margin:15px 0 0;padding:12px 14px;border:1px solid #c2d7b2;border-radius:11px;background:#e7f2dc;color:#20552c;font-size:12px;font-weight:650;line-height:1.85;overflow-wrap:anywhere}
.studio-prompt>[data-studio-suggestion-status]:empty{display:none}
.studio-prompt textarea:focus-visible,.studio-prompt button:focus-visible,.studio-color-custom input:focus-visible{outline:3px solid #126a3c;outline-offset:3px}
.studio-prompt textarea[aria-invalid=true],.studio-color-custom input[aria-invalid=true]{border-color:#aa3f38;outline:2px solid #aa3f38;outline-offset:2px}

/* Six compact stages. On a phone the labels keep readable widths in two rows. */
.studio-step{scroll-margin-top:110px}
.studio-form>.studio-progress{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.studio-form>.studio-progress>li{min-width:0;max-width:100%;padding-inline:4px;overflow-wrap:anywhere}

/* Composition diagrams use only four abstract shapes; no page text is obscured. */
.studio-emphasis__options,.studio-options.studio-density{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));align-items:stretch}
.studio-form .studio-emphasis__option{display:grid;grid-template-columns:18px minmax(0,1fr);align-content:start;align-items:start;gap:14px 9px;padding:14px;border-radius:17px}
.studio-form .studio-emphasis__option>input{grid-column:1;grid-row:2;width:18px;height:18px;margin:3px 0 0}
.studio-form .studio-emphasis__option>.studio-option__content{grid-column:2;grid-row:2}
.studio-emphasis__visual{position:relative;display:block;grid-column:1/-1;grid-row:1;width:100%;height:122px;min-width:0;border:1px solid #c2d4b6;border-radius:10px;background:#fafbf5;overflow:hidden;pointer-events:none}
.studio-emphasis__visual::before{content:"";position:absolute;top:8px;left:10px;width:4px;height:4px;border-radius:50%;background:#80a16d;box-shadow:7px 0 0 #b1c5a5,14px 0 0 #d2dfc9}
.studio-emphasis__visual::after{content:"";position:absolute;top:21px;left:0;right:0;border-top:1px solid #d9e4d0}
.studio-emphasis__visual>i{position:absolute;display:block;margin:0;padding:0;border:0;border-radius:3px;background:#789b65;font-style:normal}
.studio-emphasis__visual>i:nth-child(4){background:linear-gradient(142deg,transparent 45%,#7c9e65 45% 73%,transparent 73%),linear-gradient(33deg,#a7c391 42%,transparent 42%),linear-gradient(180deg,#d8e7cc,#c0d7ad)}
.studio-emphasis__visual[data-emphasis=balanced]>i:nth-child(1){top:39px;left:10%;width:31%;height:10px;background:#315d3a}
.studio-emphasis__visual[data-emphasis=balanced]>i:nth-child(2){top:57px;left:10%;width:27%;height:5px;box-shadow:0 9px 0 #c0d0b5}
.studio-emphasis__visual[data-emphasis=balanced]>i:nth-child(3){top:85px;left:10%;width:23%;height:11px;border-radius:7px;background:#157c45}
.studio-emphasis__visual[data-emphasis=balanced]>i:nth-child(4){top:34px;right:8%;width:42%;height:68px;border-radius:7px}
.studio-emphasis__visual[data-emphasis=text]>i:nth-child(1){top:35px;left:10%;width:77%;height:18px;background:#315d3a}
.studio-emphasis__visual[data-emphasis=text]>i:nth-child(2){top:60px;left:10%;width:58%;height:8px;background:#678859}
.studio-emphasis__visual[data-emphasis=text]>i:nth-child(3){bottom:17px;left:10%;width:24%;height:11px;border-radius:7px;background:#157c45}
.studio-emphasis__visual[data-emphasis=text]>i:nth-child(4){bottom:12px;right:9%;width:23%;height:29px;border-radius:5px}
.studio-emphasis__visual[data-emphasis=image]>i:nth-child(4){inset:29px 7% 9px;border-radius:6px}
.studio-emphasis__visual[data-emphasis=image]>i:nth-child(1){z-index:1;left:13%;bottom:38px;width:55%;height:9px;background:#fff}
.studio-emphasis__visual[data-emphasis=image]>i:nth-child(2){z-index:1;left:13%;bottom:27px;width:35%;height:4px;background:#f5faef}
.studio-emphasis__visual[data-emphasis=image]>i:nth-child(3){z-index:1;left:13%;bottom:15px;width:23%;height:7px;border-radius:5px;background:#315d3a}
.studio-emphasis__option:has(input:checked) .studio-emphasis__visual{border-color:#76a25c;background:#f7fbef}
.studio-form .studio-emphasis__option b{font-size:15px;line-height:1.7}
.studio-form .studio-emphasis__option small{margin-top:6px;font-size:11px;line-height:1.85}

/* Colour and copy are separate, visible choices within the atmosphere stage. */
.studio-style-group{min-width:0;margin:27px 0 0;padding-top:25px;border-top:1px solid #d5e3cb}
.studio-style-group>h3{margin:0 0 15px;font-size:17px;font-weight:800;line-height:1.65;overflow-wrap:anywhere}
.studio-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-width:0}
.studio-color{display:grid;grid-template-columns:17px minmax(0,1fr);align-content:start;align-items:start;gap:8px;min-width:0;max-width:100%;min-height:97px;margin:0;padding:13px 12px;border:1px solid #a9c09c;border-radius:13px;background:#fff;color:#2a4f30;font-size:12px;font-weight:700;line-height:1.7;cursor:pointer}
.studio-color:hover{border-color:#6d955e;background:#f6faef}
.studio-color:has(input:checked){border-color:#157c45;background:#eaf4de;box-shadow:inset 0 0 0 1px #157c45}
.studio-color:has(input:focus-visible){outline:3px solid #126a3c;outline-offset:3px}
.studio-color>input{display:block;grid-column:1;grid-row:2;align-self:start;width:17px;height:17px;margin:2px 0 0;accent-color:#157c45}
.studio-color__swatch{display:block;grid-column:1/-1;grid-row:1;width:100%;height:27px;min-width:0;border:1px solid #75916a60;border-radius:6px;background:var(--swatch,#edf4e5)}
.studio-color>span:last-child{grid-column:2;grid-row:2;min-width:0;max-width:100%;overflow-wrap:anywhere}
.studio-color-custom{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:start;gap:8px 14px;max-width:410px;min-width:0;margin-top:17px;padding:16px;border:1px solid #d2e0c7;border-radius:13px;background:#f6f9ef}
.studio-color-custom>label{display:block;min-width:0;margin:0;color:#41633c;font-size:11px;font-weight:750;line-height:1.8;overflow-wrap:anywhere}
.studio-color-custom>label:first-of-type{grid-column:1;grid-row:1}
.studio-color-custom>label:last-of-type{grid-column:2;grid-row:1}
.studio-color-custom>input{display:block;width:100%;min-width:0;max-width:100%;height:44px;margin:0;border:1px solid #90ac82;border-radius:9px;background:#fff;color:#214c2b;font:inherit;font-size:16px;line-height:1.5}
.studio-color-custom>input[type=color]{grid-column:1;grid-row:2;padding:5px;cursor:pointer}
.studio-color-custom>input[type=text]{grid-column:2;grid-row:2;padding:9px 11px;font-family:var(--font-latin);letter-spacing:.035em;text-transform:uppercase}
.studio-color-custom>input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.studio-color-custom>input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}
.studio-color-custom>input[type=color]::-moz-color-swatch{border:0;border-radius:4px}
.studio-color-custom>input:disabled{opacity:.55;background:#edf1e6;cursor:default}
.studio-options.studio-density>.studio-option{padding:17px 14px;gap:10px}
.studio-density .studio-option__content>b{font-size:14px;line-height:1.7}
.studio-density .studio-option__content>small{font-size:11px;line-height:1.85}

/* The same choices stay compact in the editor's one existing sidebar scroller. */
.studio-editor-panel .studio-editor-emphasis,.studio-editor-panel .studio-editor-density{display:block;min-width:0;max-width:100%;margin:0 0 25px;padding:0 0 25px;border:0;border-bottom:1px solid #d8e3d0}
.studio-editor-panel .studio-editor-emphasis>legend,.studio-editor-panel .studio-editor-density>legend{display:block;float:none;width:100%;max-width:100%;margin:0 0 12px;padding:0;color:#183d22;font-size:14px;font-weight:800;line-height:1.7;overflow-wrap:anywhere}
.studio-editor-emphasis>.studio-options,.studio-editor-density>.studio-options{grid-template-columns:minmax(0,1fr);gap:9px}
.studio-editor-panel .studio-editor-emphasis .studio-option,.studio-editor-panel .studio-editor-density .studio-option{display:grid;grid-template-columns:17px minmax(0,1fr);align-items:start;gap:8px;min-height:44px;min-width:0;max-width:100%;margin:0;padding:12px 10px;border-radius:12px;font-size:12px;line-height:1.7}
.studio-editor-panel .studio-editor-emphasis .studio-option>input,.studio-editor-panel .studio-editor-density .studio-option>input{display:block;width:17px;height:17px;min-width:17px;margin:2px 0 0;accent-color:#157c45}
.studio-editor-panel .studio-editor-emphasis .studio-option b,.studio-editor-panel .studio-editor-density .studio-option b{font-size:12px;line-height:1.7}
.studio-editor-panel .studio-editor-emphasis .studio-option small,.studio-editor-panel .studio-editor-density .studio-option small{margin:4px 0 0;color:#5a7352;font-size:10px;font-weight:400;line-height:1.8}

@media(max-width:767px){
 .studio-form>.studio-progress{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:27px}
 .studio-form>.studio-progress>li{padding:9px 5px;font-size:10px;line-height:1.7}
 .studio-form>.studio-progress>li::before{font-size:13px;margin-bottom:2px}
}
@media(max-width:599px){
 .studio-prompt{margin-bottom:27px;padding:18px 15px;border-radius:16px}
 .studio-prompt>h2{margin-bottom:16px;font-size:22px;line-height:1.65}
 .studio-prompt>.eyebrow{font-size:8px}
 .studio-prompt>label{font-size:11px}
 .studio-prompt>textarea{min-height:130px;padding:11px 12px}
 .studio-prompt__examples{gap:7px;margin-top:11px;margin-bottom:14px}
 .studio-prompt__examples>button{padding-inline:13px;font-size:11px}
 .studio-prompt>[data-studio-suggest]{width:100%;padding-inline:12px;font-size:12px;gap:10px}
 .studio-prompt>.form-note{font-size:10px}
 .studio-prompt>[data-studio-suggestion-status]{padding:11px;font-size:11px}
 .studio-form .studio-emphasis__option{grid-template-columns:18px minmax(0,1fr);gap:12px 10px;padding:13px}
 .studio-emphasis__visual{height:120px}
 .studio-style-group{margin-top:23px;padding-top:22px}
 .studio-style-group>h3{font-size:16px;margin-bottom:13px}
 .studio-colors{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .studio-color{padding:12px 10px;gap:8px 7px;font-size:11px}
 .studio-color-custom{grid-template-columns:64px minmax(0,1fr);gap:8px 12px;padding:13px}
 .studio-options.studio-density>.studio-option{padding:15px 13px}
}
@media(prefers-reduced-motion:reduce){
 .studio-prompt button{transition:none}
 .studio-prompt button:hover{transform:none}
}