/* Assessment — stepped flow and read-out */
.as{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:start;max-width:1280px}
@media (max-width:900px){.as{grid-template-columns:1fr}}

/* progress */
.as__steps{position:sticky;top:110px}
@media (max-width:900px){.as__steps{position:relative;top:0}}
.as__steps-k{display:flex;justify-content:space-between;color:var(--ink-2);margin-bottom:14px}
.as__steps-k span{color:var(--yuzu)}
.as__meter{height:4px;border-radius:9px;background:var(--rice-2);overflow:hidden;margin-bottom:22px}
.as__meter span{display:block;height:100%;width:100%;transform:scaleX(.125);transform-origin:left;background:var(--yuzu);border-radius:9px;transition:transform .6s var(--ease)}
.as__steps ol{list-style:none;counter-reset:s;display:grid;gap:2px}
.as__steps li{counter-increment:s;display:flex;align-items:center;gap:14px;padding:9px 0;color:var(--ink-2);font-size:15px;transition:color .3s}
.as__steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:10px;letter-spacing:.1em;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);flex:none;transition:background .3s,color .3s,border-color .3s}
.as__steps li:last-child::before{content:"✓"}
.as__steps li.is-done{color:var(--ink)}
.as__steps li.is-done::before{background:var(--mocha);border-color:var(--mocha);color:var(--rice)}
.as__steps li[aria-current=step]{color:var(--ink);font-weight:600}
.as__steps li[aria-current=step]::before{background:var(--yuzu);border-color:var(--yuzu);color:#fff}
@media (max-width:900px){.as__steps ol{display:none}}

/* panel */
.as__panel{min-width:0}
.q{display:grid;gap:22px;min-width:0;padding:clamp(24px,3.6vw,56px);border-radius:var(--r);background:var(--paper);box-shadow:0 0 0 1px var(--line),0 40px 80px -60px rgba(74,55,45,.5)}
.q[hidden]{display:none}
.q__lg{display:grid;gap:18px;padding:0;margin:0;width:100%}
.q__n{color:var(--yuzu);margin:0}
.q__h{display:block;font-size:clamp(32px,4.4vw,62px);line-height:1;letter-spacing:-.045em;font-weight:700;font-family:var(--sans);text-transform:none;color:var(--ink)}
.q__h:focus,#vHead:focus{outline:0}
.q__help{color:var(--ink-2);max-width:56ch;font-size:clamp(16px,1.3vw,18px);font-weight:300}
.q__count{color:var(--ink-2);min-height:1em}
.q__nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:10px}
.q__back{padding:10px 4px;color:var(--ink-2);font-size:15px;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.q__back:hover{color:var(--ink);border-color:var(--yuzu)}

/* option cards */
.opts{display:grid;gap:10px}
.opts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.opts--2{grid-template-columns:1fr}}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt__box{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:14px;row-gap:3px;align-items:baseline;height:100%;padding:17px 20px;border-radius:16px;border:1px solid var(--line);background:var(--rice);transition:border-color .3s,background .3s,box-shadow .3s,opacity .3s}
.opt__box::before{content:"";grid-row:1/span 2;align-self:start;margin-top:3px;width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(43,33,28,.3);background:var(--paper) center/12px no-repeat;transition:background-color .25s,border-color .25s}
.opt--radio .opt__box::before{border-radius:50%}
.opt__t{font-weight:500;line-height:1.3}
.opt__d{grid-column:2;font-size:14.5px;color:var(--ink-2)}
.opt:hover .opt__box{border-color:rgba(43,33,28,.3)}
.opt input:checked+.opt__box{background:#fff;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.opt input:checked+.opt__box::before{background-color:var(--yuzu);border-color:var(--yuzu);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E")}
.opt--radio input:checked+.opt__box::before{background-image:none;box-shadow:inset 0 0 0 4px var(--paper)}
.opt input:focus-visible+.opt__box{outline:2px solid var(--yuzu);outline-offset:3px}
.opt input:disabled+.opt__box{opacity:.45;cursor:not-allowed}

/* read-out */
.verdict{background:transparent;box-shadow:none;padding:0;gap:clamp(14px,1.6vw,22px)}
.verdict__card{display:grid;gap:22px;padding:clamp(26px,3.8vw,60px);border-radius:var(--r);background:radial-gradient(120% 90% at 90% 0%,var(--mocha-hi),var(--mocha-lo) 60%,var(--mocha-deep));color:var(--rice)}
.verdict__card .q__n{color:var(--peach)}
.verdict__cat{font-size:clamp(34px,4.6vw,66px);font-weight:200;letter-spacing:-.05em;line-height:1}
.verdict__sum{font-size:clamp(17px,1.4vw,21px);font-weight:300;max-width:60ch;color:rgba(246,240,233,.88)}
.verdict__sum b{font-weight:600;color:var(--rice)}
.verdict__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--cream-line);border-block:1px solid var(--cream-line);margin:8px 0}
@media (max-width:1100px){.verdict__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.verdict__grid{grid-template-columns:1fr}}
.verdict__grid div{background:var(--mocha-lo);padding:20px 18px 20px 0}
.verdict__grid div+div{padding-left:18px}
@media (max-width:1100px){.verdict__grid div{padding-left:0!important}.verdict__grid div:nth-child(even){padding-left:18px!important}}
@media (max-width:460px){.verdict__grid div:nth-child(even){padding-left:0!important}}
.verdict__grid dt{color:rgba(246,240,233,.6);margin-bottom:10px}
.verdict__grid dd{font-size:clamp(22px,2.1vw,32px);font-weight:200;letter-spacing:-.035em;line-height:1.1;color:var(--peach);font-variant-numeric:tabular-nums}
.verdict__k{color:rgba(246,240,233,.6)}
.verdict__list li{color:rgba(246,240,233,.85)}
.verdict__list b{color:var(--rice);font-weight:600}
.verdict__card .verdict__fine{color:rgba(246,240,233,.6)}
.verdict__fine{font-size:13.5px;color:var(--ink-2);max-width:64ch}
.verdict__send{display:grid;gap:18px;padding:clamp(24px,3.4vw,52px);border-radius:var(--r);background:var(--paper);box-shadow:0 0 0 1px var(--line)}
.verdict__intro{color:var(--ink-2)}
.verdict__send .pill{justify-self:start}
.verdict__msg{min-height:1.2em;font-weight:500}
.verdict__msg.is-bad{color:#C0392B}
.verdict__msg.form-ok{min-height:0}
.verdict__msg:empty{display:none}
.band{display:grid}
.band__title{overflow-wrap:anywhere}