/* Free website checker (/website-checker). Uses the tokens in style.css. */
.chk-hero { padding-bottom: clamp(2rem, 4vw, 3rem); }
.chk-hero h1 { max-width: 17ch; }
.chk-form { margin-top: 2rem; max-width: 760px; }
.chk-form label { display: block; font-weight: 700; margin-bottom: .55rem; }
.chk-row { display: flex; gap: .6rem; }
.chk-row input {
  flex: 1; min-width: 0; padding: 15px 18px; font-size: 1.15rem; border-radius: var(--r-btn);
  border: 2px solid var(--forest); background: var(--white); color: var(--forest);
}
.chk-row input::placeholder { color: rgba(0, 82, 45, .5); }
.chk-row input:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.chk-row .btn[disabled] { opacity: .65; cursor: progress; }
.chk-note { margin-top: .7rem; font-size: .9rem; color: var(--forest-65); }
@media (max-width: 600px) {
  .chk-row { flex-direction: column; }
  .chk-row .btn { width: 100%; }
}

.chk-out { padding-bottom: clamp(3rem, 6vw, 5rem); scroll-margin-top: 90px; }
.chk-status:empty { display: none; }
.chk-status { max-width: 760px; padding: 20px 22px; border-radius: var(--r-card); background: var(--peach); }
.chk-status p + p { margin-top: .6rem; }
.chk-status .chk-run { display: block; height: 4px; margin-top: 14px; border-radius: 4px; background: var(--sand); overflow: hidden; position: relative; }
.chk-status .chk-run::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 34%; border-radius: 4px; background: var(--amber); animation: chk-run 1.2s ease-in-out infinite; }
@keyframes chk-run { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .chk-status .chk-run::after { animation: none; width: 100%; opacity: .5; } }

.chk-report { background: var(--white); border: 1px solid var(--sand); border-radius: var(--r-card); padding: clamp(1.4rem, 3.5vw, 2.75rem); }
.chk-report:focus { outline: none; }
.chk-top { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; }
.chk-score { font-family: var(--display); line-height: .9; color: var(--chk-tone, var(--forest)); white-space: nowrap; }
.chk-num { font-size: clamp(5.5rem, 4rem + 7vw, 10rem); font-variant-numeric: tabular-nums; }
.chk-of { font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); color: var(--forest-65); margin-left: .15em; }
.chk-host { font-weight: 700; color: var(--forest-65); word-break: break-all; }
.chk-verdict { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.3rem); margin-top: .3rem; color: var(--forest); }
.chk-summary { margin-top: .6rem; max-width: 60ch; }
.chk-summary .chk-alert { display: block; margin-bottom: .4rem; font-weight: 700; color: var(--chk-poor); }
@media (max-width: 560px) { .chk-top { grid-template-columns: 1fr; gap: .25rem; } }

.chk-report { --chk-good: var(--forest); --chk-mid: var(--amber-btn); --chk-poor: #9b2c0b; }
.chk-meter { position: relative; height: 10px; margin-top: 1.6rem; border-radius: 10px; background: var(--sand); overflow: hidden; }
.chk-meter span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 10px; background: var(--chk-tone, var(--forest)); transition: width .9s cubic-bezier(.2, .7, .2, 1); }

.chk-groups { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 1.6rem; background: var(--sand); border: 1px solid var(--sand); border-radius: 14px; overflow: hidden; }
.chk-groups li { background: var(--white); padding: 14px 16px; }
.chk-groups b { display: block; font-size: .92rem; line-height: 1.3; }
.chk-groups .chk-g-pts { display: block; margin-top: .35rem; font-family: var(--display); font-size: 1.6rem; letter-spacing: .02em; color: var(--forest); }
.chk-groups .chk-g-pts small { font-family: var(--sans); font-size: .85rem; color: var(--forest-65); margin-left: .2em; }
@media (max-width: 900px) { .chk-groups { grid-template-columns: repeat(2, 1fr); } }

.chk-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2.2rem; align-items: start; }
@media (max-width: 900px) { .chk-body { grid-template-columns: 1fr; } }
.chk-h { font-size: 1.35rem; margin-bottom: .8rem; }
.chk-list { list-style: none; }
.chk-list li { padding: 16px 0; border-top: 1px solid var(--sand); display: grid; grid-template-columns: 8.4rem 1fr; gap: 1.1rem; }
.chk-list li:last-child { border-bottom: 1px solid var(--sand); }
.chk-list h4 { font-size: 1.05rem; }
.chk-list p { font-size: .95rem; margin-top: .3rem; }
.chk-list .chk-fix { color: var(--forest-65); }
.chk-list .chk-fix b { color: var(--forest); }
.chk-pill { align-self: start; justify-self: stretch; text-align: center; display: inline-block; padding: 4px 10px; border-radius: var(--r-full); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.chk-pill-fail { background: var(--chk-poor); color: var(--white); }
.chk-pill-warn { background: var(--apricot); color: var(--forest); }
.chk-pill-pass { border: 1.5px solid var(--forest); color: var(--forest); padding: 2.5px 9px; }
@media (max-width: 480px) { .chk-list li { grid-template-columns: 1fr; gap: .45rem; } .chk-pill { justify-self: start; } }
.chk-empty { padding: 16px 0; border-top: 1px solid var(--sand); color: var(--forest-65); }
.chk-passed { margin-top: 1.4rem; }
.chk-passed summary { cursor: pointer; font-weight: 700; padding: 6px 0; width: fit-content; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2.5px; text-underline-offset: 5px; }
.chk-passed summary:focus-visible { outline: 2.5px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
.chk-passed .chk-list { margin-top: .6rem; }

.chk-cta { background: var(--forest); color: var(--chalk); border-radius: var(--r-card); padding: clamp(1.4rem, 3vw, 2rem); position: sticky; top: 96px; }
.chk-cta h3 { color: var(--white); font-size: 1.5rem; }
.chk-cta .body { margin-top: .7rem; color: rgba(254, 250, 243, .9); }
.chk-cta .btn { margin-top: 1.1rem; }
.chk-cta .small { margin-top: 1rem; color: rgba(254, 250, 243, .8); }
.chk-cta .tlink { color: var(--apricot); }
@media (max-width: 900px) { .chk-cta { position: static; } }

.chk-foot { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--sand); }
.chk-copy { background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; }
.chk-copy:focus-visible { outline: 2.5px solid var(--amber); outline-offset: 3px; border-radius: 3px; }

.chk-explain .card { background: var(--white); }
.chk-explain h3 { font-size: 1.3rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.chk-pts { font-size: .85rem; font-weight: 500; color: var(--forest-65); white-space: nowrap; }
.chk-explain .ask { margin-top: 1rem; }
.chk-end { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.chk-end > div { max-width: 60ch; }