/* Security Header + DNS/Email Checker (Brief 6.14) — tool-specific styles.
 * Loaded only on the security-dns-checker tool page. Shared components
 * (badges, tables, alerts, result boxes, buttons, form fields) come from
 * site.css; this file styles only the parts unique to this tool:
 * the two-part form, the DKIM selector guidance box, and the record
 * display inside result tables. */

.secdns-form .form-field input[type="text"],
.secdns-form .form-field input[type="url"] {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.secdns-form-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .secdns-form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .secdns-form-grid .secdns-field-wide {
    grid-column: 1 / -1;
  }
}

/* Guidance box (DKIM selector explainer) shown inside the workspace. */
.secdns-guidance {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-teal-text, #0F766E);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
}

.secdns-guidance h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base, 16px);
}

.secdns-guidance p {
  margin: 0 0 var(--space-2);
}

.secdns-guidance p:last-child {
  margin-bottom: 0;
}

.secdns-guidance code {
  font-family: var(--font-mono);
  font-size: var(--text-code, 13px);
  word-break: break-all;
}

/* Long header values and DNS records inside result tables. */
#secdns-results .table td {
  word-break: break-word;
}

#secdns-results .table td code,
#secdns-results .secdns-record {
  font-family: var(--font-mono);
  font-size: var(--text-code, 13px);
  word-break: break-all;
}

#secdns-results details {
  margin-top: var(--space-2);
}

#secdns-results details summary {
  cursor: pointer;
  font-size: var(--text-sm);
}

#secdns-results details pre {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-code, 13px);
  white-space: pre-wrap;
  word-break: break-all;
}

#secdns-results h3 {
  margin-top: var(--space-6, 24px);
}