/* evreka.ai · PPWR check for online sellers (nl, en)
   Step-by-step check: the page title sits on the left and the check on the right on wide screens; on phones the
   title, then the check, so the first question is on the first screen. One question per screen on a white sheet
   like the product screens, answers as large cards; the result replaces the questions as a short memo with a green
   rule on the left and the booking button under the summary. Built on the tokens in ppwr.css, so load it after that
   file. Light only. */

/* ---------- page top: title + check ---------- */
.check-top{padding-block:clamp(8px,2.6vw,36px) clamp(36px,5vw,64px)}
.check-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "tool" "facts";gap:16px;align-items:start}
.check-intro{grid-area:intro;display:grid;gap:12px;justify-items:start}
.check-intro .h1{font-size:clamp(30px,3.6vw,46px);line-height:1.06}
.check-intro .lede{font-size:clamp(16.5px,1.35vw,19px);max-width:46ch}
.check-grid>.check{grid-area:tool}
.check-facts{grid-area:facts}
@media (min-width:980px){
  .check-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);grid-template-areas:"intro tool" "facts tool";grid-template-rows:auto 1fr;column-gap:clamp(32px,4.4vw,64px);row-gap:22px}
  .check-intro{gap:16px;padding-top:6px}
}

.check{display:grid;gap:clamp(24px,4vw,40px);min-width:0}
.check-form{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(18px,3.2vw,36px);display:grid;min-width:0;container-type:inline-size;container-name:check}
.check-form[hidden]{display:none}

/* ---------- progress ---------- */
.wz-head{display:grid;gap:10px;margin-bottom:clamp(18px,2.6vw,26px)}
.wz-count{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wz-bar{height:4px;border-radius:999px;background:var(--paper-2);overflow:hidden}
.wz-bar span{display:block;width:0;height:100%;border-radius:inherit;background:var(--green);transition:width .3s ease}

/* ---------- questions ---------- */
.q-set{border:0;margin:0;padding:0;display:grid;gap:12px;min-width:0}
.q-set+.q-set{margin-top:clamp(24px,3vw,32px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--line-2)}
.q-set>legend{float:left;width:100%;padding:0;margin:0 0 2px}
.q-set>legend+*{clear:both}
.q-h{font-weight:800;font-size:clamp(20px,2.1vw,24px);line-height:1.25;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.q-h:focus{outline:none}
.q-hint{font-size:14.5px;line-height:1.5;color:var(--muted);max-width:62ch;margin-top:-4px}

.is-wizard .q-set{display:none}
.is-wizard .q-set.is-current{display:grid}
.is-wizard .q-set+.q-set{margin-top:0;padding-top:0;border-top:0}

/* answers as cards: a real radio or checkbox inside each label */
.opts{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0;margin-top:4px}
@container check (min-width:520px){
  .opts-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.opt{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--sheet);cursor:pointer;font-size:16px;line-height:1.4;color:var(--ink-2);-webkit-tap-highlight-color:transparent;transition:border-color .15s,background-color .15s,color .15s}
.opt:hover{border-color:var(--muted)}
.opt input{-webkit-appearance:none;appearance:none;flex:none;display:grid;place-items:center;width:20px;height:20px;margin:0;border:1.5px solid var(--muted);border-radius:50%;background:var(--sheet);cursor:pointer;transition:background-color .15s,border-color .15s,box-shadow .15s}
.opt input[type="checkbox"]{border-radius:5px}
.opt input:checked{border-color:var(--green-ink);background:var(--green-ink)}
.opt input[type="radio"]:checked{box-shadow:inset 0 0 0 4px var(--sheet)}
.opt input[type="checkbox"]:checked::before{content:"";width:5px;height:10px;margin-top:-3px;border:solid var(--sheet);border-width:0 2px 2px 0;transform:rotate(45deg)}
.opt input:focus-visible{outline:none}
.opt:has(input:focus-visible){outline:3px solid var(--green);outline-offset:2px}
.opt:has(input:checked){border-color:var(--green-ink);background:var(--green-soft);color:var(--ink)}
.opt-t{flex:1;min-width:0}
.cc{flex:none;min-width:34px;padding:5px 6px;border-radius:6px;background:var(--paper-2);color:var(--ink-2);font:500 11.5px/1 var(--mono);letter-spacing:.05em;text-align:center}
.cc-blank{visibility:hidden}
.opt:has(input:checked) .cc{background:var(--sheet);color:var(--green-ink)}

/* follow-up for micro-enterprises, on the same screen as question 5 */
.q-sub{border:0;margin:8px 0 0;padding:16px;border-radius:12px;background:var(--paper);display:grid;gap:10px;min-width:0}
.q-sub>legend{float:left;width:100%;padding:0;margin:0 0 4px;font-weight:700;font-size:16px;line-height:1.4;color:var(--ink)}
.q-sub>legend+*{clear:both}
.q-sub .opt{background:var(--sheet)}

.q-err{color:var(--red-ink);font-size:14px;font-weight:600}
.q-err:empty{display:none}
.is-missing>.opts .opt{border-color:#E7B3AC}

/* ---------- actions ---------- */
.check-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:clamp(22px,3vw,30px);padding-top:clamp(16px,2.4vw,22px);border-top:1px solid var(--line-2)}
.check-actions .wz-next,.check-actions [type="submit"]{margin-left:auto}
.check-actions .form-note{flex-basis:100%;margin:2px 0 0;font-size:13.5px}
.wz-back:hover .ic{transform:translateX(-3px)}
@media (max-width:640px){
  .check-actions .wz-next,.check-actions [type="submit"]{flex:1;margin-left:0}
}

/* step change: a short slide in the direction of travel; none for reduced motion */
@keyframes wz-in-fwd{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes wz-in-back{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.wz-in-fwd{animation:wz-in-fwd .24s cubic-bezier(.2,.7,.3,1)}
.wz-in-back{animation:wz-in-back .24s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .wz-in-fwd,.wz-in-back{animation:none}
  .wz-bar span,.opt,.opt input{transition:none}
}

/* ---------- result ---------- */
.check-result{background:var(--sheet);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:var(--r);padding:clamp(20px,3.2vw,36px);display:grid;gap:clamp(18px,2.4vw,24px);min-width:0;scroll-margin-top:110px}
.res-head{display:grid;gap:10px;justify-items:start}
.res-h{font-size:clamp(26px,2.8vw,36px)}
.res-h:focus{outline:none}
.res-intro{color:var(--ink-2);max-width:62ch}
.res-glance{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.res-glance li{font-size:13.5px;font-weight:600;line-height:1.35;padding:6px 12px;border-radius:999px;background:var(--green-soft);color:var(--green-ink)}
.res-cta{display:grid;gap:14px;justify-items:start;padding:18px 20px;border-radius:12px;background:var(--paper);border:1px solid var(--line-2)}
.res-cta p{color:var(--ink);font-weight:600;line-height:1.5;max-width:60ch}
.res-sec{display:grid;gap:12px;padding-top:clamp(16px,2.2vw,22px);border-top:1px solid var(--line-2);min-width:0}
.res-sec h3{font-weight:800;font-size:19px;line-height:1.3;letter-spacing:-.012em;color:var(--ink)}
.res-list{display:grid;gap:10px}
.res-list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;color:var(--ink-2);line-height:1.6}
.res-list li::before{content:"";width:8px;height:8px;margin-top:10px;margin-left:3px;border-radius:2px;background:var(--green)}
.res-list li>span{min-width:0;max-width:72ch}
.res-list b{color:var(--ink)}
.res-note{font-size:14.5px;line-height:1.55;color:var(--muted);max-width:72ch;padding-left:28px}
.res-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding-top:clamp(16px,2.2vw,22px);border-top:1px solid var(--line-2)}
.res-more{display:flex;flex-wrap:wrap;gap:4px 20px}
.res-link{background:none;border:0;padding:8px 0;min-height:44px;font:600 15px/1.4 var(--font);color:var(--ink-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.res-link:hover{color:var(--ink)}
.res-msg{font-size:14px;font-weight:600;color:var(--green-ink)}
.res-msg:empty{display:none}
.res-fallback{width:100%;min-height:200px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font:400 13px/1.5 var(--mono);color:var(--ink);background:var(--paper);resize:vertical}
.res-disc{font-size:13px;line-height:1.5;color:var(--muted)}
@media (max-width:640px){
  .res-cta{padding:16px}
  .res-cta .btn,.res-actions>.btn{width:100%}
  .res-note{padding-left:0}
}