/* One keyboard focus contour follows the actual control's border radius. */
:root{--focus-ring:#ae3d26}:root[data-theme=dark]{--focus-ring:#f0a293}
button{border-radius:8px}
:is(button,a,input,select,textarea):focus{outline:0 solid transparent}
:is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
:is(input,select,textarea){scroll-margin-block:16px}
:is(button,a):not(:focus-visible){outline:0 solid transparent}
.modal:focus,#quiz-title:focus{outline:0 solid transparent}
.mobile-nav>button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px;box-shadow:none}
.sheet-handle:focus-visible{outline-offset:-2px}
/* Hidden inputs focus their visible choice, never a second 1px checkbox. */
.choice>input:focus-visible{outline:0 solid transparent}
.choice>input:focus-visible+span{outline:2px solid var(--focus-ring);outline-offset:-2px}
.switch:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
/* Composite fields have one contour, on the shared frame. */
.phone-field:focus-within,.phone-country-picker:focus-within{outline:0 solid transparent}
.phone-field:has(:focus-visible){outline:2px solid var(--focus-ring);outline-offset:-2px}
.phone-field :is(input,select):focus-visible{outline:0 solid transparent}
.phone-country-picker:has(select:focus-visible){background:var(--peach);border-radius:7px 0 0 7px}
.password-field{border-radius:11px}
.password-field:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:-2px}
.password-field>input:focus-visible{outline:0 solid transparent}
.password-field>[data-action=show-password]{width:36px;height:36px;padding:8px;border-radius:50%;display:grid;place-items:center}
.password-field>input{padding-right:49px!important}
.password-field>[data-action=show-password]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
input[type=checkbox]:not(.switch){border-radius:3px}
input[type=range]:focus-visible{outline:0 solid transparent}
input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:50%}
input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:50%}
@media(forced-colors:active){:root{--focus-ring:Highlight}.phone-country-picker:has(select:focus-visible){outline:1px dotted Highlight;outline-offset:-4px}}
@media(max-width:900px) and (min-height:501px){.auth-page:not(.quiz-page) .auth-panel{align-self:start}}
/* A shared mobile frame prevents header movement between login and quiz. */
@media(max-width:900px){
 .auth-page.quiz-page{width:100%;max-width:530px;margin-inline:auto;padding:max(18px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom));row-gap:18px}
 .auth-page>header,.quiz-page>header{max-width:none;width:100%;margin:0;gap:10px;flex:none}
 .auth-page{overflow-anchor:none}.quiz-scroll{overflow-anchor:none}
}
@media(max-width:900px) and (max-height:740px){.auth-page.quiz-page{padding-block:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-bottom));row-gap:10px}}
@media(max-width:350px){.auth-page.quiz-page{padding-inline:14px}}
@media(max-width:900px) and (max-height:500px){.auth-page.quiz-page{padding-block:8px;row-gap:8px}}