/* Approved Sense selection flow. Original brand assets, no decorative media. */
body{background:#faf8f0;color:#4a4c37}.ambient{opacity:.5}.gradient{opacity:.32}
#home .masthead{height:104px;min-height:104px;justify-content:center;position:relative;padding:24px}
#home .masthead>img{content:url('assets/logo-forest.svg');width:106px;height:52px;filter:none;opacity:1}
#home .account-trigger{position:absolute;right:24px;top:32px}
#home .experience{padding:16px 20px 20px;max-width:480px;margin:auto;min-height:0;display:block}
#welcome-name,.selection-subtitle{display:none!important}
#home .intro{margin:0;text-align:center}#home .intro h1{font-size:25px;font-weight:400;letter-spacing:-.035em;line-height:1.3}
.sense-dial{width:100%;height:490px;margin:12px auto 0;overflow:hidden;scale:1;isolation:isolate}
.dial-orbit{left:calc(50% + 140px);top:50%;width:850px;height:1000px;transform:translateY(-50%);border-color:#817c501c}
.dial-light{left:48%;top:50%;width:320px;height:180px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#e6e9b7a0 0%,#eeefc166 35%,transparent 70%)}
.dial-label{left:46%;top:50%;font-size:25px;padding:12px 20px;min-height:48px;cursor:pointer;color:#4a4c37}
.dial-label.is-current{font-weight:500;color:#4a4c37}
.dial-label:active{background:#e9eac33b;border-radius:50%}
#dial-confirm{left:50%;top:auto;bottom:0;height:44px;width:240px;transform:translateX(-50%);border-radius:22px}
#dial-confirm img{display:none}#dial-confirm>span{font-size:12px;color:#777864}
.dial-controls{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);bottom:0}
.dial-controls:focus-within{width:auto;height:44px;clip-path:none;background:#faf8f0;z-index:5}
.footnote{margin:8px 0 0!important}.footnote p{font-size:11px!important;color:#777864!important}
#session:not([data-step="video"]){background:radial-gradient(ellipse at 20% 45%,#eef0cd70,transparent 55%),#faf8f0}
#session:not([data-step="video"]) .video-frame{visibility:hidden}
#session .session-header{top:22px;left:50%;transform:translateX(-50%);width:min(100%,480px);padding:0 16px;max-width:480px}
#session:not([data-step="video"]) .back{background:none;border:0;box-shadow:none;padding:12px;color:#4a4c37}
#session .back span{display:none}
.flow-screen{position:relative;inset:auto;width:min(100%,480px);height:100dvh;min-height:0;max-height:none;overflow-y:auto;transform:none;margin:0 auto;padding:26px 26px max(28px,env(safe-area-inset-bottom));border:0;border-radius:0;background:transparent;box-shadow:none;color:#4a4c37;display:flex;flex-direction:column;align-items:stretch;text-align:center}
.flow-screen[hidden]{display:none}
.flow-brand{width:106px;height:52px;object-fit:contain;align-self:center;flex-shrink:0;margin:0 0 48px}
.selection-bond{position:relative;isolation:isolate;display:flex;justify-content:center;align-items:center;align-self:center;min-height:100px;width:100%;max-width:380px;margin:0 0 32px;flex-shrink:0}
.selection-bond[hidden]{display:none}
.selection-bond>*{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-width:0;min-height:94px;border:0;background:none;color:#4a4c37;font:inherit;font-size:clamp(16px,4.2vw,21px);letter-spacing:-.025em;isolation:isolate;padding:8px 5px;white-space:nowrap}
.selection-bond>*[hidden]{display:none}
.selection-bond>*:before{content:'';position:absolute;inset:0 -10px;z-index:-1;border-radius:48% 53% 46% 51%;background:radial-gradient(ellipse,#e5e9b7b0,#edf0c479 63%,#eef0ce24 82%);box-shadow:0 0 30px #e9edb440;pointer-events:none}
.selection-bond:has(#bond-place[hidden]){width:150px}
.selection-bond button{cursor:pointer}.selection-bond button:active{scale:.97}
#bond-intensity{font-variant-numeric:tabular-nums}#bond-intensity:before{background:radial-gradient(ellipse,#f4f3bbcd,#f4f2c17a 60%,#f5f3d120 80%)}
#place-context,#rating-context{display:none}
.flow-screen h2{font-size:25px;font-weight:400;line-height:1.3;letter-spacing:-.035em;margin:0;outline:none}
#place-step{width:100%}.place-options{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;width:100%;max-width:360px;height:auto;margin:40px auto 0;touch-action:pan-y;isolation:isolate}
.place-options button{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1;border:0;border-radius:47% 53% 48% 52%;background:radial-gradient(ellipse at 40% 40%,#e8ebc485,#eff0d565 60%,#f1efde15 80%);color:#4a4c37;padding:8px;font:inherit;font-size:18px;letter-spacing:-.025em;overflow:visible;transition:transform 160ms ease,background 160ms ease}
.place-options button:nth-child(2){background:radial-gradient(ellipse at 60% 40%,#f1e9d285,#f3eddb65 60%,#f5efdf15 80%)}
.place-options button:last-child{grid-column:1 / -1;width:50%;justify-self:center;margin-top:-12px}
.place-options button svg,.place-options button:before,.place-options button:after{display:none}
.place-options button:active{transform:scale(.95);background:#e5e9b7a0}
.place-options button:focus-visible,.selection-bond button:focus-visible{outline:2px solid #817c50;outline-offset:3px}
#rating-step{flex:1;display:flex;flex-direction:column;min-height:340px;width:100%}#rating-step[hidden]{display:none}
#rating-question{margin:12px 0 38px}.rating-control{margin:12px 0 0}.rating-control output{display:none}
.rating-control input{appearance:none;-webkit-appearance:none;height:48px;width:100%;background:transparent;cursor:ew-resize;margin:0;touch-action:pan-y}
.rating-control input::-webkit-slider-runnable-track{height:4px;border-radius:8px;background:linear-gradient(to right,#b8c18f var(--level,50%),#dfded4 var(--level,50%))}
.rating-control input::-webkit-slider-thumb{appearance:none;width:28px;height:28px;margin-top:-12px;background:#dce2af;border:1px solid #ffffe9;border-radius:50%;box-shadow:0 0 22px #f5f4b7;cursor:ew-resize}
.rating-control input::-moz-range-track{height:4px;background:#dfded4}.rating-control input::-moz-range-progress{height:4px;background:#b8c18f}.rating-control input::-moz-range-thumb{width:28px;height:28px;border:1px solid #ffffe9;border-radius:50%;background:#dce2af}
.scale-ends{display:flex;justify-content:space-between;color:#777864;font-size:12px;margin-top:0}
.flow-screen .rating-note{font-size:13px;color:#777864;margin:28px 0}
#rating-step #rating-submit{margin:auto auto 12px;width:auto;min-height:52px;border:0;background:none;color:#4a4c37;font:inherit;font-size:24px;padding:12px;letter-spacing:-.035em;border-radius:20px}
#rating-submit:active{background:#e9ecc84d;transform:scale(.98)}
#complete-step{margin:auto 0}
@media(min-width:700px){#home .masthead{max-width:480px;margin:auto}#home .experience{padding-top:20px}.flow-screen{padding-top:32px}.sense-dial{height:min(520px,calc(100dvh - 230px));min-height:420px}}
@media(max-height:740px){#home .masthead{height:84px;min-height:84px;padding:14px}.sense-dial{height:420px;margin-top:0}.flow-brand{margin-bottom:24px}.selection-bond{min-height:80px;margin-bottom:20px}.selection-bond>*{min-height:80px}.place-options{max-width:300px;margin-top:26px}#rating-question{margin-bottom:20px}.flow-screen .rating-note{margin:20px 0}.flow-screen{padding-top:20px}}
@media(prefers-reduced-motion:reduce){.place-options button{transition:none}.ambient .gradient{animation:none!important}}
@media(prefers-contrast:more){.dial-label{opacity:1!important}.selection-bond>*:before,.place-options button{outline:1px solid #817c50}}
#home .experience{width:100%}
.dial-orbit{left:70%;width:850px}
.selection-bond:has(#bond-place:not([hidden])):after{content:'';position:absolute;z-index:-2;left:7%;right:7%;top:22%;bottom:22%;background:#e9ecc65c;border-radius:40%;filter:blur(12px);pointer-events:none}

.rating-control input:focus-visible{outline:2px solid #817c50;outline-offset:4px;border-radius:12px}

/* The words describe the arc; a separate outline competes with their motion. */
.dial-orbit{display:none}
.dial-label{font-size:19px;letter-spacing:-.01em;font-weight:400}
.dial-label.is-current{font-weight:500}
#dial-labels{position:absolute;inset:0 0 48px;mask-image:linear-gradient(to bottom,transparent 0%,#0003 12%,#000 32%,#000 68%,#0003 88%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#0003 12%,#000 32%,#000 68%,#0003 88%,transparent 100%)}
.dial-light{top:calc(50% - 24px)}
@media(max-height:650px){.sense-dial{height:calc(100dvh - 205px);min-height:280px}.footnote{margin-top:0!important}}

/* Larger arc independent of the typography scale. */
.sense-dial{height:min(590px,calc(100dvh - 220px));min-height:300px}
@media(max-height:650px){.sense-dial{height:calc(100dvh - 205px);min-height:280px}}
.last-assessment{font-size:13px;line-height:1.6;color:#686b50;min-height:42px;margin:0 0 12px}
.history-choice{display:flex;align-items:center;gap:12px;text-align:left;font-size:13px;min-height:48px;margin:0 auto 16px;max-width:320px;color:#4a4c37}
.history-choice input{width:20px;height:20px;accent-color:#817c50;flex-shrink:0}.history-choice small{display:block;font-size:11px;color:#777864;margin-top:4px}
.history-choice[hidden],.last-assessment[hidden]{display:none}
#rating-submit:disabled{opacity:.5}

.selection-flight{position:fixed;z-index:1000;pointer-events:none;display:flex;align-items:center;justify-content:center;color:#4a4c37;font:400 19px Outfit,sans-serif;letter-spacing:-.01em;background:radial-gradient(ellipse,#e5e9b780,transparent 70%);border-radius:50%}
.flow-screen .rating-phase{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#777864;margin:12px 0 0}
#session[data-step="after"] .selection-bond{min-height:64px;margin-bottom:12px;opacity:.7}
#session[data-step="after"] .selection-bond>*{min-height:64px;font-size:16px}
#session[data-step="after"] #rating-question{margin-top:16px}
#session[data-step="after"] #rating-submit{font-size:20px}
.flow-screen .last-assessment{font-size:13px}
.selection-bond button:disabled{cursor:default}

#demo-mode{display:none!important}
#dial-confirm{opacity:0;pointer-events:none}
#dial-confirm:focus-visible{opacity:1;pointer-events:auto}
#instructions{opacity:0;max-width:280px;margin:0 auto;line-height:1.6}
.results-trigger{position:absolute;left:16px;top:32px;min-height:44px;padding:10px 4px;border:0;background:none;color:#686b50;font:400 12px Outfit,sans-serif;cursor:pointer}
.place-options button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.place-options button svg{display:block;width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.place-options button[data-place="unterwegs"]{background:radial-gradient(ellipse at 45% 50%,#dce8de95,#ebefdd55 62%,transparent 82%)}
.history-list li{padding:22px 4px;border-bottom:1px solid #817c5020}
.history-values{display:flex;align-items:center;justify-content:center;gap:30px;margin:18px 0 4px;color:#4a4c37}
.history-values>span{font-size:32px;font-weight:400;line-height:1.3;text-align:center}
.history-values>span>small{display:block;font-size:11px;font-weight:400;color:#777864}
.history-values>span:nth-child(2){font-size:22px;color:#969b76}

.sense-dial{height:calc(100dvh - 205px);min-height:300px;max-height:760px}
#dial-labels{inset:0 0 26px;mask-image:linear-gradient(to bottom,transparent,#0006 10%,#000 27%,#000 73%,#0006 90%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#0006 10%,#000 27%,#000 73%,#0006 90%,transparent)}
.dial-light{top:calc(50% - 13px)}
.results-trigger{top:25px;left:16px;display:flex;align-items:center;flex-direction:column;gap:4px;min-width:64px;min-height:56px;background:#e8ebcc66;border-radius:18px;padding:8px;font-size:11px}
.results-trigger svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#account-content .results-caption{font-size:12px;color:#777864;line-height:1.5;margin-top:-8px}
.result-groups{display:grid;gap:18px;margin:25px 0}
.result-group{width:100%;border:0;border-radius:26px;background:radial-gradient(ellipse at 30% 50%,#e6eac982,transparent 95%);padding:20px 20px 8px;color:#4a4c37;text-align:left;font:inherit;cursor:pointer}
.result-group>span{display:flex;justify-content:space-between;font-size:20px}.result-group>span>span{font-size:18px;color:#858c64}
.pair-chart{display:block;width:100%;height:136px;overflow:visible}.chart-guide{stroke:#817c5018;stroke-width:1;fill:none}.chart-line{fill:none;stroke:#9ca875;stroke-width:3;stroke-linecap:round}.chart-before{fill:#c8ccae}.chart-after{fill:#85985e}.pair-chart text{font:18px Outfit,sans-serif;fill:#4a4c37}.pair-chart text.chart-label{font-size:10px;fill:#777864}
#complete-step{position:relative;margin:auto 0;text-align:center;padding:20px 0;isolation:isolate}
#complete-step:before{content:'';position:absolute;inset:15% -20px 25%;z-index:-1;background:radial-gradient(ellipse,#e7edbb99,transparent 68%);border-radius:50%}
.flow-screen .completion-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#777864;margin-bottom:20px}
#complete-step h2{font-size:28px;line-height:1.3}
#completion-context{font-size:13px;color:#777864;margin:20px 0}
#rating-summary{display:flex;justify-content:center;align-items:center;gap:26px;margin:45px 0 20px}
.completion-value{display:flex;flex-direction:column;gap:7px;min-width:65px}.completion-value strong{font-size:76px;font-weight:400;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.06em}.completion-value small{font-size:12px;color:#777864;font-weight:400}.completion-arrow{font-size:25px;color:#9da779}.completion-now{color:#71824d}
#completion-change{font-size:16px;margin:12px 0 42px}
#complete-step #finish-session{border:0;background:none;color:#4a4c37;font:400 22px Outfit,sans-serif;padding:16px}
#complete-step .complete-actions{margin-top:12px}
@media(max-height:650px){.sense-dial{height:calc(100dvh - 180px)}#complete-step{padding:0}#rating-summary{margin:24px 0 12px}.completion-value strong{font-size:58px}#completion-change{margin-bottom:20px}}

#complete-step h2{font-size:30px;font-weight:400}
#complete-step #rating-summary{margin:52px 0 58px}
.flow-screen .last-assessment{margin:24px 0 0;min-height:0;font-size:13px;color:#777864}
#session-account[hidden]{display:none}
@media(max-height:650px){#complete-step #rating-summary{margin:32px 0 38px}}

/* Keep the assessment and its action in one perceptual group. */
#rating-step{flex:0 0 auto;min-height:0}
#rating-question{margin:8px 0 24px}
.rating-control{margin:0}
#rating-step #rating-submit{margin:36px auto 0;flex-shrink:0}
.flow-screen .last-assessment{margin:20px 0 0}
.flow-screen .rating-note{margin:20px 0 0}
#session .session-header{display:flex;align-items:center;justify-content:space-between;pointer-events:none}
#session .session-header button{pointer-events:auto;min-width:44px;min-height:44px}
#session-home{display:flex;align-items:center;justify-content:center;margin-left:auto;border:0;border-radius:50%;background:#faf8f08c;color:#4a4c37;cursor:pointer}
#session-home svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#session-home:active{transform:scale(.94)}
#session .back[hidden]{display:none}

/* Center the whole task group, keeping its internal spacing intact. */
.flow-screen{padding-top:calc(26px + env(safe-area-inset-top));padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.flow-brand{margin-bottom:24px}
#session:not([data-step="complete"]) .selection-bond{margin-top:auto}
#place-step,#rating-step{flex-shrink:0;margin-bottom:auto}
#session .session-header{top:calc(22px + env(safe-area-inset-top))}
#home .masthead{touch-action:none;padding-top:calc(24px + env(safe-area-inset-top));height:calc(104px + env(safe-area-inset-top))}
#skip-arrival{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
#skip-arrival:focus-visible{width:auto!important;height:auto!important;padding:12px 20px!important;clip-path:none;bottom:32px}
#pull-refresh{position:fixed;z-index:2000;left:50%;top:env(safe-area-inset-top);width:36px;height:36px;display:grid;place-items:center;color:#4A4C37;opacity:0;pointer-events:none;transform:translate(-50%,-12px);transition:opacity 220ms ease}
.refresh-spinner{position:relative;display:block;width:28px;height:28px}
.refresh-spinner i{position:absolute;left:12.5px;top:2px;width:3px;height:7px;border-radius:2px;background:currentColor;transform-origin:1.5px 12px;transform:rotate(calc(var(--spoke)*30deg));opacity:.12}
#pull-refresh.is-loading i{animation:refresh-spoke 1s linear infinite;animation-delay:calc(var(--spoke)*-83.333ms)}
@keyframes refresh-spoke{0%{opacity:1}100%{opacity:.15}}
@media(prefers-reduced-motion:reduce){#pull-refresh{transition:none}#pull-refresh.is-loading i{animation:none;opacity:.65!important}}

@media(max-height:650px){.flow-brand{margin-bottom:20px}.flow-screen{padding-top:calc(20px + env(safe-area-inset-top))}}

#arrival{outline:none}
