/* seo-test-url.css — the tool form block rendered by renderPseoTestUrl()
   (src/seo-render.php): «Test your URL now» on pSEO pages (EN-11) and the
   WHOIS form at the top of an article that names a tool (articles.embed_tool,
   EN-INTENT). Moved out of seo-page.css so article.php can load it without
   the whole pSEO stylesheet. */

/* EN-11 «Test your URL now» — outlined panel under the fix-first answer.
   Same surface as the card it sits in, so the field (surface2, the site's
   .input) stands out against it rather than melting into a surface2 panel.
   Refined after Magnific concept «C» (2026-10-20): roomier padding, the
   domain in mono (DESIGN.md: hostnames are mono). The button stays the
   site's own .btn-primary. */
.seo-test-url {
  margin: 0 0 var(--space-6);
  padding: var(--space-6) var(--space-7);
  background: var(--surface);
  border: 1px solid var(--border3);
  border-radius: var(--radius);
}
.seo-test-url__title {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.seo-test-url__hint {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-14);
  color: var(--muted2);
}
.seo-test-url__form {
  display: flex;
  gap: var(--space-2-5);
  align-items: stretch;
}
.seo-test-url .seo-test-url__input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: var(--fs-base);
  border-color: var(--border3);
}
/* Beats main.css input:focus (0,2,1): an invalid address keeps its red edge
   while the script puts the focus back into the field. */
.seo-test-url .seo-test-url__input[aria-invalid="true"],
.seo-test-url .seo-test-url__input[aria-invalid="true"]:focus {
  border-color: var(--status-fail);
}
.seo-test-url__btn { flex-shrink: 0; min-width: 140px; }
.seo-test-url__status {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--muted2);
}
.seo-test-url__status.is-error { color: var(--status-fail); }
/* Nothing to say yet: no reserved line under the form (the region stays in
   the DOM so a screen reader still hears what is written into it later). */
.seo-test-url__status:empty { margin: 0; }
/* Inside an article (articles.embed_tool): .article h2 / .article p (0,1,1)
   would give the heading a 2.5rem top margin and the hint body-text size.
   Same look as on pSEO pages; pSEO itself is untouched by these rules. */
.article .seo-test-url__title {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-lg);
  line-height: 1.3;
}
.article .seo-test-url__hint {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--muted2);
}
.article .seo-test-url__status {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--muted2);
}
.article .seo-test-url__status.is-error { color: var(--status-fail); }
.article .seo-test-url__status:empty { margin: 0; }
@media (max-width: 600px) {
  .seo-test-url { padding: var(--space-4); }
  .seo-test-url__form { flex-direction: column; }
  .seo-test-url__btn { width: 100%; }
}
@media print {
  .seo-test-url { display: none; }
}