/* Product geometry only; visuals and state styles come from the accepted kit. */
@import url('assets/shhp-kit/components.css');
html{color-scheme:light;scrollbar-color:var(--c-text-muted) var(--c-bg)}
body{margin:0;min-height:100svh;display:flex;flex-direction:column}
::selection{background:var(--c-selected);color:var(--c-on-selected)}
header,footer{padding:var(--sp-4) var(--safe);font-size:var(--fs-caption);color:var(--c-text-muted)}
header.shp-header{justify-content:space-between;gap:var(--sp-5);padding-top:0;padding-bottom:0;margin-inline:var(--safe);padding-inline:0}
.brand-logo{--logo-h:80px;display:flex;flex:none;padding:calc(var(--logo-h)*.4);padding-left:0}
.brand-logo img{height:var(--logo-h);width:auto;display:block;max-width:none}
header .shp-btn{max-width:12em;flex:none;padding:.7em 1em}
footer{margin-top:auto}
main{width:min(100%,1000px);padding:var(--safe);margin:auto}
main>h1{margin:0 0 var(--sp-6)}
h2{margin:var(--sp-6) 0 var(--sp-4)}
p{max-width:65ch;margin:var(--sp-4) 0 var(--sp-5)}
button,a{touch-action:manipulation}
a{color:var(--c-brand);text-underline-offset:.25em}
.shp-btn{text-decoration:none;padding-block:var(--sp-4);overflow-wrap:anywhere}
.shp-btn:disabled{opacity:1}
.actions{display:flex;flex-wrap:wrap;gap:var(--sp-5);margin-top:var(--sp-6);padding-bottom:var(--key-depth)}
.actions>*{flex:1 1 240px}
.choices{margin:var(--sp-6) 0;gap:var(--sp-5)}
.choice{min-height:calc(var(--target)*1.35)}
.choice .shp-answer__body{padding-block:var(--sp-4)}
.choice[aria-pressed]{grid-template-columns:auto minmax(0,1fr);font-size:var(--fs-body);text-align:left}
.choice[aria-pressed] .shp-answer__body{padding:var(--sp-4)}
.progress{display:flex;align-items:center;gap:var(--sp-5);font-size:var(--fs-caption);color:var(--c-text-muted);margin-bottom:var(--sp-5);font-variant-numeric:tabular-nums}
progress{appearance:none;border:0;background:var(--c-line);height:var(--sp-2);flex:1;min-width:0}
progress::-webkit-progress-bar{background:var(--c-surface-sunk)}
progress::-webkit-progress-value{background:var(--c-brand)}
progress::-moz-progress-bar{background:var(--c-brand)}
.lead{font-size:var(--fs-h2);line-height:var(--lh-heading)}
.note{font-size:var(--fs-caption);color:var(--c-text-muted)}
.error{color:var(--c-error)}
li{padding-block:var(--sp-2)}ul,ol{padding-left:1.3em}
.preview{width:100%;max-height:55svh;aspect-ratio:3/4;object-fit:cover;display:block}
video.preview{transform:scaleX(-1)}
.photo{max-width:520px;margin:var(--sp-5) auto}
.qr{width:min(280px,100%);height:auto;display:block;background:var(--c-surface);padding:var(--sp-4);border:var(--bw-strong) solid var(--c-line-strong);border-radius:var(--r-m)}
.qr-layout{grid-template-columns:auto minmax(0,1fr)}
.qr-layout>div{min-width:0}.qr-layout h2{margin-top:0}
.status{padding-block:var(--sp-5);border-block:var(--bw-hair) solid var(--c-line)}
.spinner{width:var(--target);height:var(--target);border:var(--bw-strong) solid var(--c-surface-sunk);border-top-color:var(--c-brand);border-radius:50%;animation:shp-spin 900ms linear infinite;margin:var(--sp-5) auto}
main.shp-wait>h1{margin-bottom:0}main.shp-wait p{margin:0}
main.shp-error{width:min(calc(100% - var(--safe)*2),936px);margin:var(--safe) auto}
label.consent{display:flex;gap:var(--sp-4);align-items:flex-start;font-size:var(--fs-label);margin-block:var(--sp-5)}
input[type=checkbox]{width:26px;height:26px;flex-shrink:0;accent-color:var(--c-brand)}
[hidden]{display:none!important}
@media(max-width:600px){
 /* Exact kit mobile size tokens; device detection stays in CSS, without new input handlers. */
 body.shp-root[data-device="tablet"]{--fs-display:32px;--fs-h1:24px;--fs-h2:18px;--fs-body:16px;--fs-label:14px;--fs-caption:13px;--target:48px;--bw-sel:2px;--safe:16px;--key-depth:3px}
 .brand-logo{--logo-h:60px}header.shp-header{gap:var(--sp-3)}header .shp-btn{max-width:10em;padding:.7em .8em}
 .actions{flex-direction:column}.actions>*{flex:auto;width:100%}main{margin:0 auto}
 .choices{gap:var(--sp-4)}.qr-layout{grid-template-columns:minmax(0,1fr);justify-items:start;gap:var(--sp-5)}
 .qr-layout>div{width:100%}.qr-layout .button{max-width:100%}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

#app>h1[tabindex="-1"]:focus{outline:none;box-shadow:none}
@media(max-width:360px){header.shp-header{flex-wrap:wrap;padding-bottom:var(--sp-4)}header .shp-btn{max-width:none}}

/* Ten authored questions: three selections and a fourth continue control. */
#app[data-screen=question] h1{font-size:var(--fs-h2);line-height:1.25}
#app[data-screen=question] .actions{position:sticky;bottom:0;background:var(--c-bg);padding-block:var(--sp-4);z-index:1}
#app[data-screen=question] .choice{scroll-margin-bottom:110px}
@media(min-width:900px) and (max-height:900px){#app[data-screen=question] .choices{gap:var(--sp-3);margin-block:var(--sp-4)}#app[data-screen=question] .choice .shp-answer__body{padding-block:var(--sp-3)}}

#photo-conditions{max-width:min(46rem,calc(100% - 32px));max-height:85svh;overflow:auto;border:var(--bw-strong) solid var(--c-line-strong);border-radius:var(--r-m);padding:var(--sp-5);background:var(--c-bg);color:var(--c-text);font:inherit}#photo-conditions::backdrop{background:rgb(0 0 0 / .45)}#photo-conditions h2{margin-top:0}#photo-conditions .actions{position:sticky;bottom:0;background:var(--c-bg);padding-block:var(--sp-3)}

/* The completed portrait includes its QR immediately; no intermediate action. */
.portrait-result{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,280px);gap:32px;align-items:center}
.portrait-result .photo{margin:0;max-width:none;min-width:0}
.portrait-result .preview{object-fit:contain;max-height:50svh}
.portrait-download{min-width:0}.portrait-download .qr{width:100%;max-width:280px;box-sizing:border-box}
@media(max-width:600px){.portrait-result{grid-template-columns:minmax(0,1fr);gap:24px}.portrait-download .qr{margin-inline:auto}.portrait-download p{text-align:center}}