/* Shared by the editor preview, therapist workspace, and client guide. */
.drawing-prompt { color: #3f563d; font-family: var(--sans); }
.drawing-prompt-context { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.drawing-prompt-context > span { min-width: 0; color: #5d7151; font: 400 18px/1.35 var(--serif); overflow-wrap: anywhere; }
.drawing-prompt-context > small { flex-shrink: 0; color: #738064; font: 10px/1.5 var(--sans); }
.drawing-prompt-progress { display: flex; gap: 5px; margin: 14px 0 24px; }
.drawing-prompt-progress > span { flex: 1; min-width: 0; height: 3px; border-radius: 3px; background: #e8ecdd; }
.drawing-prompt-progress > .is-reached { background: #a3b58d; }
.drawing-prompt-heading { display: grid; grid-template-columns: 43px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: center; }
.drawing-prompt-emblem { display: grid; grid-row: 1 / 3; place-items: center; width: 43px; height: 49px; border: 1px solid #e1e7d1; border-radius: 14px 14px 18px 14px; background: linear-gradient(145deg, #f4f7eb, #e8eedb); color: #78915f; }
.drawing-prompt-emblem .icon { font-size: 17px; transform: rotate(-12deg); }
.drawing-prompt-phase { align-self: end; color: #70835d; font: 500 9px/1.4 var(--sans); letter-spacing: .075em; text-transform: uppercase; }
.drawing-prompt .drawing-prompt-heading h2 { align-self: start; margin: 0; color: #40543c; font: 400 28px/1.12 var(--serif); letter-spacing: -.025em; overflow-wrap: anywhere; }
.drawing-prompt-heading h2:focus-visible { outline: 2px solid #9bac86; outline-offset: 5px; border-radius: 3px; }
.drawing-prompt .drawing-prompt-intro { margin: 19px 0 0; color: #6b7a60; font: 12px/1.8 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.drawing-prompt-invitation { margin-top: 21px; }
.drawing-prompt-invitation p { margin: 0; color: #4e6444; font: 14px/1.85 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.drawing-prompt-invitation p + p { margin-top: 13px; }
.drawing-prompt-permission { display: flex; align-items: flex-start; gap: 11px; margin-top: 19px; padding: 15px; border: 1px solid #e2e8d5; border-radius: 13px; background: linear-gradient(120deg, #f0f4e6, #f7f8ef); }
.drawing-prompt-permission > .icon { flex-shrink: 0; margin-top: 4px; color: #81966b; font-size: 12px; }
.drawing-prompt-permission p { margin: 0; color: #637650; font: 12px/1.85 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.drawing-prompt-permission p + p { margin-top: 10px; }
.drawing-material-kit { margin-top: 20px; }
.drawing-material-kit > div { display: flex; align-items: center; gap: 8px; color: #738360; font: 500 10px/1.5 var(--sans); }
.drawing-material-kit > div .icon { color: #8d9d76; font-size: 12px; }
.drawing-material-kit ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 10px 0 0; padding: 0; }
.drawing-material-kit li { padding: 6px 10px; border: 1px solid #e2e6d7; border-radius: 8px; background: #fffef9; color: #637652; font: 11px/1.5 var(--sans); overflow-wrap: anywhere; }
.drawing-prompt-finish { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding-top: 17px; border-top: 1px solid #e2e7d7; color: #71835e; }
.drawing-prompt-finish > .icon { margin-top: 4px; font-size: 12px; }
.drawing-prompt-finish p { margin: 0; font: 12px/1.75 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.drawing-prompt .drawing-prompt-reference { margin: 21px 0 0; }
.drawing-prompt-reference > button { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid #e1e7d4; border-radius: 13px; background: #f3f5e9; cursor: zoom-in; }
.drawing-prompt .drawing-prompt-reference img { display: block; width: 100%; max-height: 210px; padding: 8px; object-fit: contain; border-radius: 13px; background: #f3f5e9; }
.drawing-prompt-reference button > span { position: absolute; right: 9px; bottom: 9px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #e4e9dc; border-radius: 50%; background: #fffef9ed; color: #6a7d59; font-size: 11px; }
.drawing-prompt .drawing-prompt-reference figcaption { margin-top: 8px; color: #718064; font: 11px/1.7 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.drawing-prompt[data-prompt-kind="reflect"] .drawing-prompt-emblem { background: linear-gradient(145deg, #f7f0e3, #ede6d8); border-color: #e9dfcc; color: #aa8a61; }
.drawing-prompt[data-prompt-kind="reflect"] .drawing-prompt-emblem .icon { transform: none; font-size: 16px; }
.drawing-prompt[data-prompt-kind="reflect"] .drawing-prompt-phase { color: #8b7454; }
.drawing-prompt .drawing-reflection-question { position: relative; margin: 23px 0 0; padding: 28px 23px; border: 1px solid #e7e1d3; border-radius: 17px; background: radial-gradient(ellipse at 5% 10%, #f7f0de 0, transparent 75%), #faf8ef; color: #586344; font: 400 29px/1.3 var(--serif); letter-spacing: -.015em; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 620px) { .drawing-prompt-reference button > span { width: 36px; height: 36px; } }
@media (forced-colors: active) { .drawing-prompt-progress > .is-reached { background: Highlight; } }