/* Shared interface states. Artwork and arrow geometry stay in their own layers. */
:root{--ui-ease:cubic-bezier(.22,1,.36,1);--ui-press:#e7c35c;--ui-focus:#526d45;--ui-card:#fffdf8}
.header-nav{height:auto;gap:8px;padding:5px;background:#fffdf8;border-radius:8px;box-shadow:0 3px 16px #292e2b05}
.header-nav .nav-item{padding:10px 18px;border-radius:8px;transition:background .2s,color .2s,transform .25s var(--ui-ease)}
.header-nav .nav-item:after{left:18px;right:18px;width:auto;bottom:5px;height:3px}
.header-nav .nav-item.is-active{background:#fbefcf}
.all-tests-link{min-height:42px;padding:10px 15px;background:#fffdf8;border-radius:8px;box-shadow:0 3px 16px #292e2b05}
.all-tests-link:after{left:14px;right:14px;bottom:6px;height:3px}
.button,.primary,.journal .primary-button{box-shadow:0 3px 0 var(--ui-press);transition:background .2s,box-shadow .22s var(--ui-ease),transform .22s var(--ui-ease)}
.secondary,.journal .outline-button{background:#eeeee4;box-shadow:0 2px 0 #dedfd2;transition:background .2s,box-shadow .22s var(--ui-ease),transform .22s var(--ui-ease)}
.button-dark{box-shadow:0 3px 0 #151c17}
.button:active,.primary:active:not(:disabled),.journal .primary-button:active:not(:disabled),.secondary:active:not(:disabled),.journal .outline-button:active:not(:disabled){transform:translateY(2px) scale(.985);box-shadow:0 0 0 transparent}
.button:focus-visible,.primary:focus-visible,.secondary:focus-visible,.journal .primary-button:focus-visible,.journal .outline-button:focus-visible{outline:3px solid var(--ui-focus);outline-offset:5px}
.test-card{--card-accent:#dcecf4;--card-shadow:#c8d9df;box-shadow:0 4px 0 #e9ece5,0 8px 24px #292e2b05;transition:transform .35s var(--ui-ease),box-shadow .35s var(--ui-ease)}
.test-card.cp-card{--card-accent:#f7dedb;--card-shadow:#e4c4bc}
.test-card .card-body{background:var(--ui-card);padding:25px 26px 24px}
.test-card .card-heading{align-items:center}
.test-card .card-heading h3{font-size:24px;line-height:1.45;letter-spacing:-.6px}
.test-card .card-number{padding:5px 8px;background:var(--card-accent);border-radius:8px;color:#58635c;font-size:10px;letter-spacing:1px}
.test-card .card-body>p{font-size:14px;margin-top:8px}
.test-card .card-bottom{padding-top:20px;gap:12px}
.test-card .completed{font-size:11px}
.test-card .card-cta{min-height:40px;padding:8px 12px;background:var(--card-accent);border-radius:8px;font-size:12px;box-shadow:0 2px 0 var(--card-shadow);transition:background .25s,box-shadow .25s,transform .25s var(--ui-ease)}
.test-card:active{transform:translateY(2px);box-shadow:0 1px 0 #e9ece5}
.test-card:active .card-cta{transform:translateY(1px);box-shadow:none}
.welcome-copy{position:relative}
.ui-spark{position:absolute;display:block;width:32px;height:32px;background:url('/home-art/doodles-v1.webp') 0 100% / 200% 200% no-repeat;pointer-events:none}
.welcome-copy>.ui-spark{right:15%;top:4%;animation:ui-spark-drift 6s ease-in-out infinite}
.test-scene>.ui-spark{right:5%;top:5%;width:28px;height:28px;animation:ui-spark-drift 6.5s ease-in-out infinite reverse}
.progress,.journal .progress-track,.mini-progress{height:7px;background:#e9e9df}
.progress>i,.journal .progress-fill,.mini-progress>i{transform-origin:left center}
.question .option,.journal .option{position:relative;gap:12px;box-shadow:0 2px 0 #292e2b07;transition:background .18s,box-shadow .18s,transform .18s var(--ui-ease)}
.question .option>span:first-child,.journal .option-key{display:grid;place-items:center;flex:none;min-width:28px;height:28px;padding:0;background:#fff9;border-radius:8px;font-size:11px;font-weight:700;color:#59634f}
.journal .option-dot{display:none}
.journal .option-list .option>span:not(.option-key):not(.option-check){color:var(--ink)}
.question .option.selected,.journal .option.selected{background:#e1ebd7;outline:2px solid #657e54;outline-offset:2px;box-shadow:0 3px 0 #cedbc4}
.question .option.selected>span:first-child,.journal .option.selected .option-key{background:#657e54;color:#fff}
.question .option.selected:disabled,.journal .option.selected:disabled{opacity:1}
.question .option:active:not(:disabled),.journal .option:active:not(:disabled){transform:translateY(2px) scale(.99);box-shadow:none}
input:focus-visible,textarea:focus-visible,select:focus-visible,.journal input:focus-visible{background:#fff;outline:2px solid #657e54;outline-offset:2px;box-shadow:0 0 0 5px #e1ebd780}
.preference-details,.pair-more,.answer-review{background:#f2f3ea;border-radius:8px}
.preference-details summary,.pair-more summary,.answer-review summary{padding:4px 0;transition:color .2s}
.preference-details[open]>:not(summary),.pair-more[open]>:not(summary),.answer-review[open]>:not(summary){animation:ui-details-in .2s var(--ui-ease)}
dialog[open]{animation:ui-dialog-in .23s var(--ui-ease)}
dialog[open]::backdrop{animation:ui-backdrop-in .23s ease-out}
.ui-ambient:not(.ui-in-view) img,.ui-ambient:not(.ui-in-view)>.ui-spark,.ui-motion-paused .hero-scene,.ui-motion-paused .test-scene img,.ui-motion-paused .ui-spark{animation-play-state:paused}
/* Content is visible before observers run, including full-page captures and JS failures. */
.motion-ready .reveal,.motion-ready .reveal.is-visible{opacity:1;transform:none}
@keyframes ui-spark-drift{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-7px) rotate(9deg)}}
@keyframes ui-brand-wave{0%,100%{transform:rotate(0)}35%{transform:rotate(-12deg)}70%{transform:rotate(7deg)}}
@keyframes ui-details-in{from{opacity:.3;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes ui-dialog-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ui-backdrop-in{from{opacity:0}to{opacity:1}}
@media(hover:hover) and (pointer:fine){
 .header-nav .nav-item:hover{background:#fbefcf;transform:translateY(-2px)}
 .wordmark:hover .brand-mark,.site-header a:hover .brand-mark{animation:ui-brand-wave .6s var(--ui-ease);transform:none}
 .button:hover,.primary:hover:not(:disabled),.journal .primary-button:hover:not(:disabled){background:#ffdc76;transform:translateY(-3px);box-shadow:0 6px 0 var(--ui-press),0 10px 18px #c8a64c12}
 .button-dark:hover{background:#3c4940;box-shadow:0 6px 0 #151c17}
 .secondary:hover:not(:disabled),.journal .outline-button:hover:not(:disabled){background:#e2e8d9;transform:translateY(-2px);box-shadow:0 4px 0 #cdd6c2}
 .test-card:hover,.motion-ready .test-card.is-visible:hover{transform:translateY(-6px);box-shadow:0 8px 0 #e6e9e0,0 18px 32px #292e2b0b}
 .test-card:hover .card-cta{background:#ffdf80;box-shadow:0 3px 0 #e7c35c;transform:translateY(-1px)}
 .question .option:hover:not(:disabled),.journal .option:hover:not(:disabled){background:#f8edca;box-shadow:0 3px 0 #e4dcbf;transform:translateX(3px)}
 .question .option.selected:hover:not(:disabled),.journal .option.selected:hover:not(:disabled){background:#e1ebd7;box-shadow:0 3px 0 #cedbc4}
}
@media(hover:none){
 .button:hover,.primary:hover:not(:disabled),.journal .primary-button:hover:not(:disabled){background:var(--yellow);transform:none;box-shadow:0 3px 0 var(--ui-press)}
 .button-dark:hover{background:var(--ink);box-shadow:0 3px 0 #151c17}
 .secondary:hover:not(:disabled),.journal .outline-button:hover:not(:disabled){background:#eeeee4;transform:none;box-shadow:0 2px 0 #dedfd2}
 .test-card:hover,.motion-ready .test-card.is-visible:hover{transform:none;box-shadow:0 4px 0 #e9ece5,0 8px 24px #292e2b05}
 .test-card:hover .scene-art>img,.question .option:hover:not(:disabled),.journal .option:hover:not(:disabled){transform:none}
 .question .option:hover:not(.selected):not(:disabled),.journal .option:hover:not(.selected):not(:disabled){background:#f7dedb}
 .question .option:nth-child(2):hover:not(.selected):not(:disabled),.journal .option:nth-child(2):hover:not(.selected):not(:disabled){background:#fbefcf}
 .question .option:nth-child(3):hover:not(.selected):not(:disabled),.journal .option:nth-child(3):hover:not(.selected):not(:disabled){background:#efeee7}
 .question .option:nth-child(4):hover:not(.selected):not(:disabled),.journal .option:nth-child(4):hover:not(.selected):not(:disabled){background:#dfebd7}
 .question .option:nth-child(5):hover:not(.selected):not(:disabled),.journal .option:nth-child(5):hover:not(.selected):not(:disabled){background:#dcecf4}
 .all-tests-link:is(:hover,:focus-visible){transform:none}
 .button:active,.primary:active:not(:disabled),.journal .primary-button:active:not(:disabled),.secondary:active:not(:disabled){transform:translateY(2px) scale(.985);box-shadow:none}
}
.button:active,.primary:active:not(:disabled),.journal .primary-button:active:not(:disabled),.secondary:active:not(:disabled),.journal .outline-button:active:not(:disabled){transform:translateY(2px) scale(.985);box-shadow:none}
.test-card:active,.motion-ready .test-card.is-visible:active{transform:translateY(2px);box-shadow:0 1px 0 #e9ece5}
.question .option:active:not(:disabled),.journal .option:active:not(:disabled){transform:translateY(2px) scale(.99);box-shadow:none}
@media(max-width:600px){.header-nav{gap:2px;padding:3px}.header-nav .nav-item{padding:9px 12px}.header-nav .nav-item:after{left:12px;right:12px}.test-card .card-body{padding:22px}.test-card .card-heading h3{font-size:23px}.test-card .card-body>p{font-size:13px}.test-card .card-cta{padding:8px 10px;min-height:40px}.test-card .completed{font-size:10px}.welcome-copy>.ui-spark{right:6%;top:14px;width:30px;height:30px}.all-tests-link{padding:9px 13px}.question .option,.journal .option{gap:10px}}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .test-card:hover,.motion-ready .test-card.is-visible:hover,.button:hover,.primary:hover:not(:disabled),.secondary:hover:not(:disabled),.journal .primary-button:hover:not(:disabled),.journal .option:hover:not(:disabled),.question .option:hover:not(:disabled),.header-nav .nav-item:hover{transform:none}
}
@media print{.ui-spark{display:none}.test-card,.button,.primary,.secondary,.journal .primary-button{box-shadow:none}}