/* DNSSEC check: the chain-of-trust diagram (zones from the root down, joined
   by a line, each with a status dot), which tools.css has no component for.
   Everything else on the page uses the shared styles. The dots repeat what
   the chips beside them say in words, so colour is never the only signal. */

.chain { list-style: none; margin: 0; padding: 0; display: grid; }
.chain-step {
  position: relative;
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px;
  padding-bottom: 16px; min-width: 0;
}
.chain-step:last-child { padding-bottom: 0; }

/* The status dot, and the line down to the next zone */
.chain-step::before {
  content: ""; width: 12px; height: 12px; margin: 6px 0 0 5px; border-radius: 50%;
  background: var(--ink-3); box-shadow: 0 0 0 4px rgb(255 255 255 / .04);
}
.chain-step:not(:last-child)::after {
  content: ""; position: absolute; left: 10px; top: 24px; bottom: 2px; width: 2px;
  border-radius: 2px; background: var(--line-2);
}
.chain-step.pass::before { background: var(--pass); box-shadow: 0 0 0 4px rgb(90 240 160 / .1); }
.chain-step.warn::before { background: var(--warn); box-shadow: 0 0 0 4px rgb(245 196 81 / .1); }
.chain-step.fail::before { background: var(--fail); box-shadow: 0 0 0 4px rgb(255 125 125 / .1); }
/* The record at the end is a square, so the zones read as links in a chain */
.chain-step.record::before { border-radius: 3px; }

.chain-body { min-width: 0; }
.chain-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.chain-name {
  font-family: var(--font-mono); font-size: 14.5px; color: var(--ink);
  text-decoration-color: var(--ink-3); text-underline-offset: 3px; overflow-wrap: anywhere;
}
.chain-name:hover { text-decoration-color: var(--ink); }
.chain-link { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); overflow-wrap: anywhere; }

/* Cards are jumped to from the chain; leave room above them */
.results .card[id] { scroll-margin-top: 16px; }

/* A disclosure in a card body is a grid item: without this, its tables'
   minimum width would stretch the card's column past the card on phones */
.card-body > details.more-detail { min-width: 0; }

/* Small groups inside table cells and card bodies */
.chips-inline { display: flex; flex-wrap: wrap; gap: 6px; }
.stack-tight { display: grid; gap: 6px; min-width: 0; }
.stack-tight > p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.stack-tight > p.note { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.card-body details.more-detail > .table-wrap + .table-wrap { margin-top: 14px; }