/* Site detector. Same look as the PressWork detector it was ported from.
   Everything is scoped under .dat-det (not .dat-container: tool.css would then
   restyle it), and links carry their own :hover/:focus/:visited, because
   GeneratePress's `.entry-content a` (0,1,1) repaints anything weaker. */
.dat-det {
  --dat-det-accent: var(--accent, #1e73be);
  --dat-det-ink: var(--contrast, #222);
  --dat-det-muted: var(--contrast-2, #575760);
  --dat-det-line: var(--base, #e5e7eb);
  --dat-det-soft: var(--base-2, #f7f8f9);
  --dat-det-paper: var(--base-3, #fff);
  margin: 0 0 2.5em;
  font-size: 17px;
  line-height: 1.55;
  color: var(--dat-det-ink);
}
.dat-det .dat-det-form { margin: 0; }
.dat-det .dat-det-label { display: block; font-weight: 600; font-size: 15px; margin: 0 0 6px; }
.dat-det .dat-det-bar { display: flex; gap: 8px; }
.dat-det .dat-det-bar input {
  flex: 1 1 auto; min-width: 0; font-size: 18px; padding: 14px 16px;
  border: 2px solid #c9ccd1; border-radius: 8px; background: var(--dat-det-paper); color: var(--dat-det-ink);
}
.dat-det .dat-det-bar input:focus { outline: none; border-color: var(--dat-det-accent); }
.dat-det .dat-det-bar button {
  flex: 0 0 auto; font-size: 17px; font-weight: 600; padding: 14px 24px; border: 0; border-radius: 8px;
  background: var(--dat-det-accent); color: #fff; cursor: pointer;
}
.dat-det .dat-det-bar button:hover, .dat-det .dat-det-bar button:focus { filter: brightness(0.92); }
.dat-det .dat-det-bar button[disabled] { opacity: 0.6; cursor: wait; }
.dat-det .dat-det-hint { margin: 8px 0 0; font-size: 14px; color: var(--dat-det-muted); }

.dat-det .dat-det-result { margin-top: 20px; }
.dat-det .dat-det-loading { color: var(--dat-det-muted); margin: 0; }
.dat-det .dat-det-box { border: 1px solid var(--dat-det-line); border-radius: 10px; padding: 20px; background: var(--dat-det-paper); }
.dat-det .dat-det-box-warn { border-left: 4px solid #d97706; }
.dat-det .dat-det-msg { margin: 0; }
.dat-det .dat-det-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.dat-det .dat-det-site { font-size: 14px; color: var(--dat-det-muted); word-break: break-all; }
.dat-det .dat-det-verdict { font-size: 24px; font-weight: 700; line-height: 1.25; }

.dat-det .dat-det-card { background: var(--dat-det-soft); border-radius: 8px; padding: 16px 18px; margin: 0 0 12px; }
.dat-det .dat-det-card-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dat-det-muted); font-weight: 600; }
.dat-det .dat-det-card-title { font-size: 21px; font-weight: 700; margin: 2px 0 8px; word-break: break-word; }
.dat-det .dat-det-row { display: flex; gap: 10px; font-size: 15px; padding: 3px 0; }
.dat-det .dat-det-row-label { flex: 0 0 72px; color: var(--dat-det-muted); }
.dat-det .dat-det-row-value { word-break: break-word; }
.dat-det .dat-det-desc { font-size: 15px; margin: 8px 0 0; }
.dat-det .dat-det-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 15px; font-weight: 600; }
.dat-det .dat-det-list { margin: 0 0 8px 1.1em; padding: 0; font-size: 15px; columns: 2; column-gap: 24px; }
.dat-det .dat-det-list li { margin: 0 0 4px; break-inside: avoid; }
.dat-det .dat-det-muted { color: var(--dat-det-muted); font-size: 13px; }
.dat-det .dat-det-note { font-size: 14px; color: var(--dat-det-muted); margin: 8px 0 0; }
.dat-det .dat-det-meta { font-size: 14px; color: var(--dat-det-muted); margin: 10px 0 0; }

.dat-det a.dat-det-link, .dat-det a.dat-det-link:visited { color: var(--dat-det-accent); text-decoration: underline; text-underline-offset: 2px; }
.dat-det a.dat-det-link:hover, .dat-det a.dat-det-link:focus { color: var(--dat-det-ink); }
/* Every .dat-det-link opens a new tab, so every one carries the link-out icon
   (Feather "external-link", drawn in the link's own colour). */
.dat-det a.dat-det-link::after {
  content: ""; display: inline-block; width: 0.78em; height: 0.78em; margin-left: 0.28em; vertical-align: -0.04em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3C/svg%3E") no-repeat center / contain;
}
.dat-det .dat-det-platform { font-size: 15px; font-weight: 600; margin-top: 6px; }
.dat-det a.dat-det-inlink, .dat-det a.dat-det-inlink:visited { color: var(--dat-det-accent); text-decoration: underline; text-underline-offset: 2px; }
.dat-det a.dat-det-inlink:hover, .dat-det a.dat-det-inlink:focus { color: var(--dat-det-ink); }

.dat-det .dat-det-help { margin: 16px 0 0; border-left: 4px solid var(--dat-det-accent); }
.dat-det .dat-det-help-form { margin: 0; }
.dat-det .dat-det-help textarea, .dat-det .dat-det-help input[type="email"] {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px 12px;
  border: 2px solid #c9ccd1; border-radius: 8px; background: var(--dat-det-paper); color: var(--dat-det-ink);
}
.dat-det .dat-det-help textarea { display: block; resize: vertical; min-height: 84px; margin: 0 0 8px; }
.dat-det .dat-det-help textarea:focus, .dat-det .dat-det-help input[type="email"]:focus { outline: none; border-color: var(--dat-det-accent); }
.dat-det .dat-det-help-row { display: flex; gap: 8px; }
.dat-det .dat-det-help-row input[type="email"] { flex: 1 1 auto; min-width: 0; width: auto; }
.dat-det .dat-det-help-row button {
  flex: 0 0 auto; font-size: 16px; font-weight: 600; padding: 10px 22px; border: 0; border-radius: 8px;
  background: var(--dat-det-accent); color: #fff; cursor: pointer;
}
.dat-det .dat-det-help-row button:hover, .dat-det .dat-det-help-row button:focus { filter: brightness(0.92); }
.dat-det .dat-det-help-row button[disabled] { opacity: 0.6; cursor: wait; }
.dat-det .dat-det-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.dat-det .dat-det-help-msg { font-size: 14px; margin: 6px 0 0; min-height: 1em; }
.dat-det .dat-det-help-done { margin: 6px 0 0; font-weight: 600; }

@media (max-width: 560px) {
  .dat-det .dat-det-bar { flex-direction: column; }
  .dat-det .dat-det-bar button { width: 100%; }
  .dat-det .dat-det-list { columns: 1; }
  .dat-det .dat-det-help-row { flex-direction: column; }
  .dat-det .dat-det-help-row button { width: 100%; }
  .dat-det .dat-det-verdict { font-size: 21px; }
}

/* Hosting offer (v1.19.0): one line and its disclosure, under a WordPress result. */
.dat-det .dat-det-host-wrap { margin: 14px 0 0; padding: 10px 14px; background: var(--dat-det-soft); border-left: 3px solid var(--dat-det-accent); border-radius: 4px; }
.dat-det .dat-det-host { font-size: 15px; margin: 0; }
.dat-det .dat-det-host-note { font-size: 12px; color: var(--dat-det-muted); margin: 4px 0 0; }