/* /check: the "Check a site" box and the explainer under it. The dot language
   is the homepage checker's, verbatim (warm marigold = it opens, flat gray =
   blocked, hollow marigold = the front page only), so the two surfaces read the
   same. Everything else is tokens from styles.css. */

#check .container,
#why .container { max-width: 46rem; }

.check-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
  max-width: 34rem;
}
.check-form input {
  flex: 1 1 12rem;
  min-width: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--taupe);   /* >=3:1 boundary on Paper (WCAG 1.4.11) */
  border-radius: 12px;
  padding: 0.85rem 1rem;
}
.check-form input::placeholder { color: var(--taupe); opacity: 0.6; }

.check-result {
  margin-top: 1.5rem;
  max-width: 34rem;
  font-family: var(--sans);
  font-size: 1.0625rem;
}
.check-result[hidden] { display: none; }
.check-verdict {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0;
  max-width: none;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.check-verdict::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.55rem;
  flex: none;
  border-radius: 50%;
}
.check-result[data-state="opens"] .check-verdict::before {
  background: var(--marigold);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--marigold) 22%, transparent);
}
.check-result[data-state="blocked"] .check-verdict::before { background: #6E675E; }
.check-result[data-state="front"] .check-verdict::before {
  background: transparent;
  border: 2px solid var(--marigold);
}
.check-result[data-state="loading"] .check-verdict::before,
.check-result[data-state="error"] .check-verdict::before,
.check-result[data-state="invalid"] .check-verdict::before { display: none; }

.check-note {
  margin-top: 0.4rem;
  max-width: none;
  color: var(--taupe);
}
.check-note:empty { display: none; }

/* The mistake mechanism, shown only under an answer that says a site does not
   open. Indented to the verdict text, not the dot. */
.check-mistake {
  margin-top: 1.1rem;
  padding-left: 1.15rem;
}
.check-mistake[hidden] { display: none; }
.check-mistake p { max-width: none; }
.check-more {
  margin-top: 0.35rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
}
.check-more a { color: var(--amber-ink); text-decoration: none; }
.check-more span { display: inline-block; transition: transform 180ms ease; }
.check-more a:hover span { transform: translateX(3px); }

.check-privacy { margin-top: 1.75rem; }

@media (max-width: 620px) {
  .check-form .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .check-more span { transition: none; transform: none; }
}