/* Free Google check (/check). Builds on site.css: same ink, lime, fonts and form fields. */
.chk{padding-top:8px;padding-bottom:56px}
.chk-card{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--white);border-radius:var(--r-xl);padding:clamp(28px,5vw,64px) clamp(16px,5vw,72px)}
.chk-card::after{content:"";position:absolute;z-index:var(--z-under);right:-80px;top:-60px;width:160px;height:calc(100% + 120px);background:var(--lime);transform:skewX(-20deg)}
.chk-inner{max-width:680px;margin:0 auto}
.chk-copy h1{font-size:var(--fs-d2)}
.chk-copy .sub{max-width:46ch;margin-top:16px}
.chk-copy .pill-note{margin-bottom:18px}
.chk.has-result .chk-copy{display:none}

.chk-panel{margin-top:28px;background:var(--white);color:var(--ink);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px);box-shadow:var(--shadow-lg)}
.chk-step{display:grid;gap:16px}
.chk-step:not([hidden]){animation:stepIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chk-step .h{font-size:var(--fs-2xl);font-family:var(--display);letter-spacing:-.02em}
.chk-step .h:focus,.res-name h2:focus{outline:none}
.lede{color:var(--muted);font-size:var(--fs-base);margin-top:-6px}
.hp{position:absolute;left:-9999px}
.ts:empty{display:none}
.chk-step .btn{justify-self:start}
.btn[aria-busy="true"]{pointer-events:none;opacity:.85}
.btn[aria-busy="true"]::before{content:"";width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
.btn[aria-busy="true"] svg{display:none}
.err{color:var(--bad);font-weight:600;font-size:var(--fs-md)}
.err:empty{display:none}
.link{background:none;border:0;padding:10px 0;min-height:44px;font-weight:600;font-size:var(--fs-base);text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:var(--ink);justify-self:start}

/* matches */
.picks{list-style:none;display:grid;gap:8px}
.pick{width:100%;text-align:left;display:grid;gap:2px;padding:14px 16px;min-height:56px;border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--white);cursor:pointer;transition:border-color .2s,background .2s,transform .12s}
.pick b{font-size:var(--fs-lg);line-height:1.3}
.pick span{font-size:var(--fs-sm);color:var(--muted);line-height:1.4}
.pick:active{transform:scale(.98)}
.pick.none{background:var(--soft);border-color:transparent}
.picks:not(:has(li)){display:none}
.empty-note{color:var(--muted);font-size:var(--fs-base)}
@media (hover:hover) and (pointer:fine){.pick:hover{border-color:var(--ink)}}

/* working */
.load{justify-items:center;text-align:center;padding:28px 0;color:var(--muted);font-weight:600}
.spin{display:inline-block;width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--ink);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(1turn)}}

/* result */
.res-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.res-name{min-width:0}
.res-name h2{font-size:var(--fs-d3);font-family:var(--display);letter-spacing:-.02em;overflow-wrap:break-word;hyphens:auto}
.res-name p{color:var(--muted);font-size:var(--fs-md);margin-top:6px}
.score{flex:none;display:grid;justify-items:center;width:112px;padding:12px 8px;border-radius:var(--r-md);background:var(--soft);--c:var(--ink)}
.score b{font-family:var(--display);font-size:var(--fs-4xl);line-height:1;color:var(--c);font-variant-numeric:tabular-nums}
.score span{font-size:var(--fs-xs);color:var(--muted);margin-top:4px}
.score em{font-style:normal;font-size:var(--fs-sm);font-weight:700;color:var(--c);margin-top:4px}
.score.bad{--c:var(--bad)}.score.ok{--c:var(--warn)}.score.good{--c:var(--good)}
.chk-step h3{font-size:var(--fs-lg);margin-top:4px}
.issues{list-style:none;display:grid;gap:8px}
.issues li{position:relative;display:grid;gap:6px;padding:14px 14px 14px 18px;border-radius:var(--r-md);background:var(--soft);font-size:var(--fs-md);line-height:1.5}
.issues li::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 var(--r-xs) var(--r-xs) 0;background:var(--c,var(--bad))}
.issues li.s2{--c:var(--warn-mark)}.issues li.s1{--c:var(--faint)}
.issues li.fresh{animation:stepIn .28s cubic-bezier(.2,.8,.2,1)}
.ih{display:flex;gap:6px 12px;align-items:baseline;justify-content:space-between}
.ih b{font-size:var(--fs-base);line-height:1.4;font-weight:700}
.pts{flex:none;font-size:var(--fs-sm);font-weight:700;color:var(--c,var(--bad));font-variant-numeric:tabular-nums;white-space:nowrap}
.issues li.s1 .pts{color:var(--muted)}
.why{color:var(--text-body)}
.fix span{font-weight:700}
.src{font-size:var(--fs-xs);color:var(--muted)}
.more summary{cursor:pointer;font-weight:600;font-size:var(--fs-base);min-height:44px;display:flex;align-items:center;gap:8px;list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.more[open] summary::before{transform:rotate(45deg)}
.more .issues{margin-top:4px}

/* how the score adds up */
.parts{display:grid;gap:8px}
.part-list{list-style:none;display:grid;gap:10px}
.part{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;font-size:var(--fs-md)}
.part .vl{font-weight:700;font-variant-numeric:tabular-nums}
.part .tr{grid-column:1/-1;height:8px;border-radius:var(--r-xs);background:var(--soft);overflow:hidden}
.part .tr i{display:block;height:100%;border-radius:var(--r-xs);background:var(--ink);width:var(--w);transform-origin:left;animation:grow .5s cubic-bezier(.2,.8,.2,1) both}
.part .pn{grid-column:1/-1;font-size:var(--fs-sm);color:var(--muted)}
.part.pending .vl{color:var(--muted);font-weight:600}
.part-note{font-size:var(--fs-sm);color:var(--muted)}
.good-w{display:grid;gap:8px}
.site-wait{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:var(--fs-md);font-weight:600}
.site-wait .spin{width:20px;height:20px;border-width:2.5px}
.cmp .bars{display:grid;gap:10px;margin-top:10px}
.bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;font-size:var(--fs-md)}
.bar .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .vl{font-weight:700;font-variant-numeric:tabular-nums}
.bar .tr{grid-column:1/-1;height:10px;border-radius:var(--r-xs);background:var(--soft);overflow:hidden}
.bar .tr i{display:block;height:100%;border-radius:var(--r-xs);background:var(--faint);width:var(--w);transform-origin:left;animation:grow .5s cubic-bezier(.2,.8,.2,1) both}
.bar.you .nm{font-weight:700}.bar.you .tr i{background:var(--ink)}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
.good{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.good li{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600;color:var(--good);background:var(--good-soft);border-radius:var(--r-pill);padding:6px 12px}
.good li::before{content:"";width:12px;height:7px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateY(-2px) rotate(-45deg)}

.cta{display:grid;gap:14px;margin-top:8px;padding:20px;border-radius:var(--r-md);background:var(--ink);color:var(--white)}
.cta h3{font-size:var(--fs-xl);margin:0;line-height:1.25}
.cta>p{color:var(--on-dark);font-size:var(--fs-md);margin-top:-6px}
.cta-f{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cta .f label{color:var(--white)}
.cta .btn{background:var(--lime);color:var(--ink);justify-self:start}
.cta .err{color:var(--bad-on-dark)}
.cta .fine{grid-column:auto;text-align:left;color:var(--on-dark);margin:0}
.cta .fine a{color:var(--white)}
.cta :focus-visible{outline-color:var(--lime)}
.done{display:flex;gap:14px;align-items:center;padding:18px 20px;border-radius:var(--r-md);background:var(--good-soft);color:var(--good-ink)}
.done b{font-size:var(--fs-lg)}.done p{font-size:var(--fs-md)}
.tick{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--good);color:var(--white);position:relative}
.tick svg{width:22px;height:22px}
.done:not([hidden]) .tick{animation:tickIn .32s cubic-bezier(.2,.8,.2,1) both}
.done:not([hidden]) .tick::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgb(var(--good-rgb) / .45);animation:pulse .5s .1s ease-out}
@keyframes tickIn{from{transform:scale(.6);filter:blur(3px);opacity:0}to{transform:none;filter:none;opacity:1}}
@keyframes pulse{to{box-shadow:0 0 0 14px rgb(var(--good-rgb) / 0)}}
.res-foot{display:flex;flex-wrap:wrap;gap:4px 24px}
.chk-note{max-width:680px;margin:18px auto 0;font-size:var(--fs-sm);color:var(--muted);text-align:center}

.toast{position:fixed;z-index:var(--z-overlay);right:24px;bottom:24px;max-width:360px;background:var(--ink);color:var(--white);border-radius:var(--r-md);padding:14px 18px;font-size:var(--fs-md);font-weight:600;box-shadow:var(--shadow-md)}
.toast:not([hidden]){animation:stepIn .24s cubic-bezier(.2,.8,.2,1)}

@media (max-width:900px){.chk-card::after{width:70px;right:-40px}}
@media (max-width:560px){
  .chk-card{border-radius:var(--r-lg);padding:24px 16px}
  .chk-card::after{display:none}
  .chk-panel{padding:18px 16px;border-radius:var(--r-lg);margin-top:22px}
  .cta{padding:18px 16px}
  .cta-f{grid-template-columns:1fr}
  .chk-step .btn,.cta .btn{justify-self:stretch}
  .res-head{flex-direction:column;gap:12px}
  .ih{flex-direction:column;gap:2px}
  .score{width:auto;grid-auto-flow:column;align-items:baseline;justify-content:start;gap:10px;padding:10px 14px}.score b{font-size:var(--fs-3xl)}.score span,.score em{margin-top:0}
  .toast{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:none}
}
@media (max-width:880px){.nav .links{display:none}}