/* Mobile questionnaire v2: a clear question, optional ritual, one useful reflection. */
.sr-only,.choice-input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.flow-options{border:0;padding:0;min-width:0}
.flow-options label{cursor:pointer;position:relative}
.flow-options label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:4px}
.flow-options .topic-option strong{text-align:center}
.flow-options .topic-option:has(input:checked){color:#ffe9cf}
.flow-progress{list-style:none;display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:9px;padding:0;margin:6px 0 24px}
.flow-progress li{display:flex;align-items:flex-start;gap:6px;color:#bcaebf;font-size:11px;line-height:1.4;border-top:2px solid #534252;padding-top:9px}
.flow-progress li[aria-current]{color:#f5d7b9;border-color:#e5b998}
.flow-progress li>span{flex-shrink:0;opacity:.7}
.save-status{font-size:11px;color:var(--muted);line-height:1.4}
.text-button{background:none!important;border:0;color:inherit;box-shadow:none!important;min-height:44px;padding:9px 5px;text-decoration:underline;text-underline-offset:4px;border-radius:6px;font-size:14px;white-space:normal}
.text-button:hover{color:var(--accent)}
.flow-actions{display:flex;flex-direction:column;gap:3px;padding-block:12px max(10px,env(safe-area-inset-bottom))}
.flow-actions .text-button{color:#e3cbdc;min-height:44px;border-radius:6px;font-size:14px}
.in-quiz .quiz-flow{padding-bottom:130px}
.quiz-flow h1{font-size:34px;line-height:1.12}
.quiz-flow p,.quiz-flow .quiz-heading>p,.flow-situation-head>p{font-size:16px;line-height:1.55}
.quiz-flow .subtle,.quiz-flow .reflection-note,.quiz-flow .notice{font-size:14px;line-height:1.55}
.quiz-flow textarea,.quiz-flow input:not([type=radio]):not([type=checkbox]){font-size:16px}
.topic-garden{margin-top:20px;gap:18px 12px}
.topic-option .topic-symbol{width:124px;height:142px}
.topic-option strong{font-size:24px;min-height:53px}
.flow-situation-head{position:relative}
.flow-situation-head .connection-scene{height:94px;margin:8px 0 6px;border-radius:8px}
.flow-situation-head .situation-emblem{height:92px;justify-content:flex-start;gap:14px;margin:6px 0}
.flow-situation-head .situation-emblem .topic-symbol{width:86px;height:86px}
.flow-situation-head .situation-emblem>span:last-child{font-size:21px;max-width:180px}
.situation-list{margin-top:16px}
.situation-option{min-height:58px;line-height:1.45;font-size:16px;padding:12px 8px;gap:10px}
.situation-option .situation-mark{font-size:11px}
.optional-context{margin-top:4px}.optional-context summary{font-size:14px}
body[data-screen=focus]{--ink:#352834;--muted:#725963;--gold:#82533e;--accent:#78465c;--line:#d6c1b7;--panel:#f8f0e7;--raised:#dfcec5;--error:#9f313d;color-scheme:light}
body[data-screen=focus] .site-header,body[data-screen=focus] main,body[data-screen=focus] footer{background:#f4eadb}
body[data-screen=focus] .demo-strip{background:#e4d6c9;border-color:#dac7bb;color:#5b4853}
body[data-screen=focus] .flow-progress li{color:#77636b;border-color:#d8c3b8}
body[data-screen=focus] .flow-progress li[aria-current]{color:#673c50;border-color:#9e6971}
body[data-screen=focus] .quiz-actions{background:#f4eadbf5;border-color:#d1b6ae}
body[data-screen=focus] .quiz-actions .button:not(.text-button){background:#613e53;color:#fff2e3}
body[data-screen=focus] .quiz-actions .text-button{color:#613e53}
body[data-screen=focus] .situation-option{color:#4c3546;border-color:#d4bdb0}
body[data-screen=focus] .situation-option.selected{background:#e4c5b9;border-color:#905d69}
body[data-screen=focus] .situation-mark{color:#835767}
body[data-screen=focus] .untangle-scene{height:80px;margin:0 -8px 12px}
/* Illustrated focus choices share their native radio behaviour with the quiz. */
body[data-screen=focus] .site-header{padding-block:12px 6px}
body[data-screen=focus] .flow-progress{margin-top:0;margin-bottom:16px}
body[data-screen=focus] .focus-heading h1{font-size:clamp(28px,8.45vw,36px);line-height:1.08;margin:12px 0 10px}
body[data-screen=focus] .focus-heading>p{font-size:15px;line-height:1.45}
.focus-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px -8px 0}
.focus-option{display:flex;flex-direction:column;align-items:center;min-width:0;padding:6px 8px 5px;border:1px solid transparent;border-radius:14px;color:#4c3546;touch-action:manipulation}
.focus-option.selected{border-color:#78465c;background:#eee0dc}
.focus-option .focus-art{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50% 50% 2px 2px;pointer-events:none}
.focus-option-label{display:block;max-width:150px;min-height:38px;margin:7px auto 0;font-size:16px;font-weight:400;line-height:1.2;text-align:center}
.focus-option .focus-choice{position:absolute;z-index:1;top:8px;right:8px;margin:0;width:20px;height:20px;appearance:none;border:1px solid #8c728f;border-radius:50%;background:transparent;cursor:pointer}
.focus-option .focus-choice:checked{border-color:#78465c;background:#78465c;box-shadow:inset 0 0 0 3px #f4eadb}
@media(forced-colors:active){.focus-option .focus-choice{appearance:auto}}
.focus-unsure{grid-column:1/-1;display:grid;grid-template-columns:72px minmax(0,1fr) 22px;gap:10px;align-items:center;min-height:68px;margin-top:0;padding:2px 14px 2px 6px;border-radius:14px;background:#eee0d1}
.focus-unsure .focus-art{width:72px;height:62px;object-fit:contain;border-radius:0;mix-blend-mode:multiply}
.focus-unsure .focus-option-label{min-height:0;max-width:none;margin:0;font-size:16px;text-align:left}
.focus-unsure .focus-choice{position:static;grid-column:3;grid-row:1;align-self:center}
.focus-unsure .focus-art{grid-column:1;grid-row:1}.focus-unsure .focus-option-label{grid-column:2;grid-row:1}
body[data-screen=focus] .quiz-flow{padding-bottom:105px}
body[data-screen=focus] .quiz-actions{padding:14px 22px max(32px,env(safe-area-inset-bottom))}
@media(hover:hover){.focus-option:hover{border-color:#b9919f}.focus-option.selected:hover{border-color:#78465c}}
@media(max-width:359px){.focus-option-label{font-size:14px;min-height:40px}.focus-gallery{gap:8px 4px}.focus-option{padding-inline:6px}.focus-unsure{grid-template-columns:56px minmax(0,1fr) 20px;padding-right:12px;gap:7px}.focus-unsure .focus-art{width:56px}.focus-unsure .focus-option-label{font-size:15px}}
.flow-topic-line{display:flex;align-items:center;gap:10px;margin:18px 0 12px;border-block:1px solid var(--line);font-size:14px;padding:6px 0}
.flow-topic-line .topic-symbol{width:36px;height:36px}
.flow-topic-line>span:nth-child(2){flex:1}
.flow-topic-line .text-button{font-size:13px}
/* Finish the thought: the selected writing-first design, scoped to this step. */
body[data-screen=question] .site-header{max-width:430px;padding:18px 24px 12px}
body[data-screen=question] .site-header .wordmark{font-size:38px;line-height:1;letter-spacing:-2px}
body[data-screen=question] .site-header .wordmark span,body[data-screen=question] .site-header nav{display:none}
body[data-screen=question] main{max-width:430px;padding:8px 24px 32px}
.question-page{position:relative}
.quiz-flow.question-page h1{font-size:clamp(37px,10.7vw,47px);line-height:1.06;letter-spacing:-1.05px;margin:0 0 4px}
.question-page h1 em{color:var(--ink)}
.question-writing-illustration{position:absolute;width:126px;height:126px;top:-80px;right:-19px;object-fit:contain;pointer-events:none}
.quiz-flow.question-page .flow-question-intro{font-size:18px;line-height:1.6;color:#c2b5c9;margin:0}
.question-page .flow-topic-line{border:0;padding:0;min-height:44px;margin:14px 0 26px;gap:12px;font-size:16px}
.question-page .flow-topic-line .topic-symbol{width:31px;height:34px;flex:none}
.question-page .flow-topic-line .text-button{padding:0;min-height:44px;color:#c2b5c9;font-size:15px;font-weight:400}
.question-starters h2{font:600 17px/1.4 var(--sans);margin:0 0 4px;letter-spacing:0;color:var(--ink)}
.question-starter-options{display:flex;flex-wrap:wrap;gap:8px 10px}
.question-starter-options .question-starter{display:block;width:auto;min-height:44px;padding:9px 18px;border:1px solid #7f647e;border-radius:999px;background:transparent;color:#eee1e9;font:400 16px/1.45 var(--sans);box-shadow:none;text-align:left}
.question-starter-options .question-starter[aria-pressed=true]{background:#dfbdce;border-color:#dfbdce;color:#2b1c2b;font-weight:600}
.question-starter-options .question-starter:focus-visible{outline:2px solid #f3d4b2;outline-offset:3px}
@media(hover:hover){.question-starter-options .question-starter:hover{border-color:#e4bed2}.question-starter-options .question-starter[aria-pressed=false]:hover{background:#302332}}
.question-editor{margin:18px 0 0;padding:16px 20px;border:1px solid transparent;border-radius:16px;background:#f7f0e7;color:#241c27;color-scheme:light}
.question-editor:focus-within{border-color:#dfbdce;outline:2px solid #dfbdce;outline-offset:3px}
.question-editor-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px;margin-bottom:10px}
.question-editor-heading label.field{margin:0;color:#78667f;font:600 11px/1.4 var(--sans);letter-spacing:1.1px;text-transform:uppercase}
.question-edit-button.button{width:44px;min-height:44px;flex:none;padding:10px;margin:-10px -9px -10px 0;border:0;background:none;box-shadow:none}
.question-pencil{width:24px;height:24px;opacity:.58}
body[data-screen=question] textarea.question-input{padding:0;min-height:93px;border:0;border-radius:0;box-shadow:none;background:transparent;color:#241c27;font-family:var(--serif);font-size:24px;line-height:1.36;font-weight:400;letter-spacing:-.25px;resize:none;caret-color:#b57095;scroll-margin-block:32px;cursor:text;overflow:hidden}
body[data-screen=question] textarea.question-input::placeholder{color:#86718d;opacity:1}
body[data-screen=question] textarea.question-input:focus{outline:0;background:transparent}
body[data-screen=question] textarea.question-input[aria-invalid=true]{outline:2px solid #9b333f;outline-offset:4px}
.question-editor-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;margin-top:10px}
.quiz-flow .question-editor-hint{font-size:13px;line-height:1.45;color:#78667f;margin:0}
.question-count{opacity:0;font:11px/1.6 var(--sans);white-space:nowrap;font-variant-numeric:tabular-nums;color:#78667f}
.question-editor:focus-within .question-count{opacity:1}
.question-page .question-blank{font-size:16px;font-weight:400;padding:10px 0;margin:8px 0 0;color:var(--ink);min-height:44px}
.question-context{border-block:1px solid #66536d;margin:10px 0 0;padding:0}
.question-context summary{display:flex;align-items:center;gap:15px;min-height:57px;padding:12px 0;cursor:pointer;list-style:none;color:#e7d9e7;font-size:16px;line-height:1.5}
.question-context summary::-webkit-details-marker{display:none}
.question-context summary>img{width:28px;height:28px;flex:none;filter:invert(.83);transition:transform .15s}
.question-context[open] summary>img{transform:rotate(45deg)}
.question-context summary small{font:inherit;color:#c2b5c9}
.question-context-body{padding-bottom:18px}
.question-context-body label.field{margin-top:7px}
.quiz-flow.question-page .question-reassurance{font:14px/1.5 var(--sans);color:#c2b5c9;margin:24px 0 0}
body[data-screen=question] #main .question-page .quiz-actions{padding:0;background:transparent;margin-top:15px}
.question-page .quiz-actions>.button.full{background:#dfbdce;color:#2b1c2b;border-radius:999px;font-size:16px;gap:12px;min-height:54px;padding:14px 18px;box-shadow:none}
.question-page .quiz-actions>.button.full:hover{background:#edcddd}
.question-page .quiz-actions img{width:22px;height:22px}
.question-footer-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.question-footer-nav .back{margin:0;min-height:44px;display:flex;align-items:center;font-size:13px}
.question-footer-nav .save-status{margin-left:auto;text-align:right}
@media(max-width:374px){
 body[data-screen=question] .site-header{padding-inline:20px}
 body[data-screen=question] main{padding-inline:20px}
 .quiz-flow.question-page h1{font-size:35px;letter-spacing:-.7px}
 .quiz-flow.question-page .flow-question-intro{font-size:16px}
 .question-writing-illustration{width:112px;height:112px;right:-14px;top:-85px}
 .question-starter-options{gap:7px}
 .question-starter-options .question-starter{font-size:14px;padding-inline:11px}
 .question-editor{padding:16px}
 body[data-screen=question] textarea.question-input{font-size:23px}
 .question-context summary{font-size:15px;gap:11px}
 .question-page .quiz-actions>.button.full{font-size:15px;padding-inline:12px;gap:8px}
}
body[data-screen=question] #context{border-color:#967b94;border-radius:12px;background:#251e2e;min-height:112px}
body[data-screen=question] #context::placeholder{color:#b9a6bf;opacity:1}
.field-error{font-size:14px!important;color:var(--error);line-height:1.45;min-height:0;margin-block:4px 0}
.field-error:empty{display:none}
[aria-invalid=true]{outline:2px solid var(--error);outline-offset:2px}
.tone-options{display:grid;gap:8px;margin-top:10px}
.tone-options .situation-option{font-size:15px;min-height:48px}
.question-guidance p{font-size:14px;line-height:1.55}
.question-guidance summary{font-size:14px}
.earlier-notes{padding:20px;background:#342734;border:1px solid #826878;margin-top:22px;border-radius:8px}
.earlier-notes h2{font:22px var(--serif)}
.earlier-notes p,.brief-context p{white-space:pre-wrap;overflow-wrap:anywhere}
.earlier-notes .button{white-space:normal}
.flow-review-notice{margin-block:12px}.flow-review-notice .actions{gap:8px}
.suggestion-list{display:grid;gap:8px;margin:20px 0}
.suggestion-option{min-height:54px;background:#342734;color:var(--ink);border:1px solid #826878;padding:12px;text-align:left;border-radius:8px;font-size:16px}
.resume-question{border:1px solid #715069;border-radius:12px;padding:16px;margin:20px 0;text-align:center}
.resume-question p{font-size:15px;color:#e4cfdb}
.previous-questions{margin:18px 0}.previous-questions summary{font-size:14px}.previous-questions>div{padding:14px 0;border-bottom:1px solid var(--line)}
.previous-questions p{font-size:15px;overflow-wrap:anywhere}
.ritual-distinction{font-size:14px!important;color:#dcc9df;margin:16px 0}
.ritual-instruction{font-size:17px!important;color:#f3d2b4;margin-top:22px}
.quiz-flow .flow-fan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 10px;margin:20px 0 28px;justify-items:center}
.flow-fan .intention-card:nth-child(n){width:100%;height:auto;aspect-ratio:640/1100;transform:none;max-width:84px;min-width:44px}
.flow-fan .intention-card:nth-child(n)[aria-pressed=true]{transform:translateY(-4px);outline:1px solid #e8c097}
.flow-fan .intention-card img{width:100%;height:100%;object-fit:cover}
.flow-fan .card-index{font-size:12px}
.flow-intentions{text-align:left;margin-top:20px}
.flow-intention{display:grid;grid-template-columns:1fr;gap:0;padding:18px 0;border-top:1px solid #614459}
.flow-intention.active{border-color:#e7ba93}
.flow-intention small{font-size:12px;letter-spacing:.5px;color:#d4b2c4}
.flow-intention h2{font-size:26px;margin:5px 0 8px}
.flow-intention p{font-size:15px;line-height:1.55}
.flow-intention .text-button{justify-self:start;margin-top:5px}
.brief-question{background:#f2e4d3;padding:22px 20px;border-radius:3px 18px 3px 3px;color:#493441;margin:22px 0}
.brief-question>p{font:25px/1.4 var(--serif);color:inherit;overflow-wrap:anywhere;white-space:pre-wrap}
.brief-question .text-button{color:#734c66;margin-top:10px}
.brief-context{margin:24px 0}.brief-context h2,.brief-cards h2{font:26px var(--serif);margin-bottom:12px}
.brief-context p{font-size:16px}
.brief-details{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;border-block:1px solid var(--line);padding:14px 0;margin:22px 0}
.brief-details>span{font-size:14px;color:#d5c0d2}
.brief-details .text-button{font-size:13px}
.brief-exercise{background:#eee1cd;padding:24px 22px;color:#503647;box-shadow:4px 5px 0 #624255;margin:26px 4px 30px 0}
.brief-exercise .eyebrow{color:#785144;font-size:11px}
.brief-exercise p{color:inherit;font:24px/1.4 var(--serif);margin:18px 0}
.brief-exercise small{display:block;font-size:13px;line-height:1.5;color:#745c60}
.brief-cards>div{padding:16px 0;border-bottom:1px solid var(--line)}
.brief-cards small{font-size:13px;color:#e4b999}.brief-cards p{font-size:16px;margin-top:8px}
.checkout-email{margin:26px 0;padding-top:22px;border-top:1px solid var(--line)}
.checkout-email h2{font-size:27px;line-height:1.2}.checkout-email p{font-size:14px;line-height:1.6;margin-top:12px}
.checkout-email input[type=email]{font-size:16px}.checkout-email .check{margin-top:14px;font-size:14px}
.purchase-question .text-button{color:#dbc0d2}.purchase-question:has(.text-button:focus){outline:2px solid var(--accent)}
.purchase-hero>.progress-head,.purchase-hero>.flow-progress{text-align:left}
/* Keep a focused field and the caret clear of the fixed action bar. */
:is(body[data-screen=question],body[data-screen=situation]:has(.optional-context[open])) .quiz-actions{position:static;transform:none;left:auto;width:100%;border:0;padding:14px 0 0;backdrop-filter:none;margin-top:18px}
:is(body[data-screen=question],body[data-screen=situation]:has(.optional-context[open])) .quiz-flow{padding-bottom:12px}
body[data-screen=question] footer{padding-bottom:25px}
.quiz-flow textarea{scroll-margin-block:24px 130px}
@media(max-width:374px){
 .quiz-flow h1{font-size:30px}.topic-option .topic-symbol{width:105px;height:122px}.topic-option strong{font-size:21px;min-height:48px}
 .flow-progress{gap:7px}.flow-progress li{font-size:10px;gap:4px}
 .flow-situation-head .connection-scene{height:80px}.flow-situation-head .situation-emblem{height:80px}
 .flow-situation-head .situation-emblem .topic-symbol{width:74px;height:74px}.flow-situation-head .situation-emblem>span:last-child{font-size:20px}
 body[data-screen=focus] .untangle-scene{height:90px}.flow-actions{padding-inline:18px}
 .brief-question{padding:20px 16px}.brief-question>p{font-size:23px}.brief-details{gap:6px 8px}
}
@media(max-height:650px){.flow-situation-head .connection-scene,.flow-situation-head .situation-emblem,body[data-screen=focus] .untangle-scene{height:72px}.flow-progress{margin-bottom:18px}}
/* Six topics keep the same two-column rhythm and scroll above the entry actions. */
body[data-screen=topic] .topic-garden{gap:14px 12px;margin-top:14px}
body[data-screen=topic] .topic-option .topic-symbol{width:92px;height:96px}
body[data-screen=topic] .topic-option strong{font-size:22px;min-height:49px}
body[data-screen=ritual] .quiz-flow h1{font-size:34px;line-height:1.12}
@media(max-width:374px){body[data-screen=topic] .topic-option .topic-symbol{width:78px;height:84px}body[data-screen=topic] .topic-option strong{font-size:20px;min-height:45px}body[data-screen=ritual] .quiz-flow h1{font-size:30px}}
@media(min-height:900px){body[data-screen=topic] .topic-option .topic-symbol{width:126px;height:144px}}