/*!
 * Website Diagnostics — styles on top of Public Tools' tools.css.
 * Classes start with wd-; shared components (pt-panel, pt-badge, pt-checks,
 * pt-table, pt-kv) come from Public Tools.
 */

/* ── Form ─────────────────────────────────────────────────────────────── */
.wd-form__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.wd-form__main { flex: 1 1 18rem; }
.wd-form__row > .pt-field:not(.wd-form__main) { flex: 0 1 auto; }
.wd-form__row .pt-select { min-width: 9rem; max-width: 100%; }
.wd-form__go { flex: 0 0 auto; }
.wd-form .pt-actions { margin-top: .6rem; }
.wd-form .pt-input[aria-invalid="true"] { border-color: var(--pt-error); }

/* ── Results ──────────────────────────────────────────────────────────── */
.wd-result { margin-top: 1.25rem; }
.wd-result[aria-busy="true"] { opacity: .6; }
.wd-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.wd-summary__title { flex: 1 1 100%; margin: 0; font-family: var(--pt-mono); font-size: .9375rem; font-weight: 600; color: var(--pt-ink); overflow-wrap: anywhere; }
.wd-panel .pt-panel__head .pt-row { gap: .5rem; }
.wd-none { margin: 0; color: var(--pt-muted); font-size: .9rem; }
.pt-ui .pt-help { margin: 0; }

/* Header tables: name, then value with a one-line explanation under it. */
.wd-headers .wd-hname { font-family: var(--pt-mono); font-size: .8125rem; font-weight: 600; color: var(--pt-ink); white-space: nowrap; background: none; }
.wd-headers td { width: 100%; }
.wd-hval { display: block; font-family: var(--pt-mono); font-size: .8125rem; color: var(--pt-ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.wd-hinfo { display: block; margin-top: .2rem; font-size: .78rem; color: var(--pt-muted); }
.wd-raw { border: 1px solid var(--pt-line); border-radius: var(--pt-radius-sm); padding: .6rem .9rem; }
.wd-raw > summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--pt-ink); }
.wd-raw[open] > summary { margin-bottom: .6rem; }

/* DNS */
.wd-dns-type { display: flex; flex-direction: column; gap: .4rem; }
.wd-type { margin: 0; font-size: .9375rem; font-weight: 700; color: var(--pt-ink); }
.wd-dns td:first-child { white-space: nowrap; }
.wd-ttl { white-space: nowrap; color: var(--pt-muted); }

/* Cookies */
.wd-cookies td { font-size: .85rem; }
.wd-cookies td:first-child { white-space: nowrap; }
.wd-cookies td:nth-child(2), .wd-cookies td:nth-child(3), .wd-cookies td:nth-child(4) { white-space: nowrap; }

/* Redirect chain: numbered steps joined by a line. */
.wd-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wd-hop { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; padding-bottom: 1rem; }
.wd-hop:not(:last-child)::before { content: ""; position: absolute; left: calc(1rem - 1px); top: 2rem; bottom: 0; width: 2px; background: var(--pt-line); }
.wd-hop__n { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--pt-accent-soft); color: var(--pt-accent-strong); font-weight: 700; font-size: .875rem; }
.wd-hop__body { min-width: 0; padding-top: .2rem; }
.wd-hop__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.wd-hop__ms { font-size: .8125rem; color: var(--pt-muted); }
.wd-hop__url, .wd-hop__to { margin: .3rem 0 0; font-family: var(--pt-mono); font-size: .85rem; overflow-wrap: anywhere; color: var(--pt-ink); }
.wd-hop__to { color: var(--pt-muted); }
.wd-hop__arrow { color: var(--pt-accent); font-weight: 700; }
.wd-hop__err { margin: .3rem 0 0; font-size: .875rem; color: var(--pt-error); }

/* Certificate chain */
.wd-certchain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; counter-reset: wdc; }
.wd-certchain > li { counter-increment: wdc; display: flex; flex-direction: column; padding-left: 2rem; position: relative; }
.wd-certchain > li::before { content: counter(wdc); position: absolute; left: 0; top: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--pt-soft); border: 1px solid var(--pt-line); display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: var(--pt-muted); }
.wd-certchain__name { font-weight: 600; color: var(--pt-ink); overflow-wrap: anywhere; }
.wd-certchain__meta { font-size: .8125rem; color: var(--pt-muted); overflow-wrap: anywhere; }

/* ── Phones ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .wd-form__row { align-items: stretch; }
  .wd-form__row > .pt-field, .wd-form__go { flex: 1 1 100%; }
  .wd-form__row .pt-select { width: 100%; }
  .pt-ui .pt-table.wd-headers, .wd-headers tbody, .wd-headers tr, .wd-headers th, .wd-headers td { display: block; width: auto; }
  .wd-headers thead { display: none; }
  .wd-headers tr { border-top: 1px solid var(--pt-line); padding: .5rem .75rem; }
  .wd-headers tr:first-child { border-top: 0; }
  .wd-headers th, .wd-headers td { border: 0; padding: 0; }
  .wd-headers .wd-hname { white-space: normal; overflow-wrap: anywhere; margin-bottom: .15rem; }
}

@media print {
  .wd-form { display: none !important; }
}