/* DKIM checker & key generator: the few things tools.css doesn't cover.
   The selector box beside the domain, lists of selectors and tags (a
   heading line with a chip that says its verdict in words, detail
   underneath), the list of selectors tried, and the generator's output. */

.selector-field { flex: 1 1 180px; max-width: 280px; }
@media (max-width: 560px) { .selector-field { max-width: none; } }
.row > .btn-ghost { background: var(--panel-2); }

/* Copy buttons in code headings: full-strength text, as the generator's cards sit on a panel */
.code-head .btn { color: var(--ink-2); }
.code-head .btn:hover { color: var(--ink); }

.card-body h3.sub-head { margin: 4px 0 -4px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }

/* The summary strip: the domain gets a row of its own, then three stats */
.results { container-type: inline-size; }
@container (min-width: 640px) {
  .summary.wide-first { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .summary.wide-first > .stat:first-child { grid-column: 1 / -1; }
}
@container (max-width: 639px) {
  .summary.wide-first > .stat:first-child, .summary.wide-first > .stat:last-child { grid-column: 1 / -1; }
}

/* Lists of selectors, tags and services */
ul.rows { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
ul.rows > li { display: grid; gap: 3px; padding: 10px 12px; border-top: 1px solid var(--line); min-width: 0; }
ul.rows > li:first-child { border-top: 0; }
.row-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-width: 0; font-size: 14px; color: var(--ink); }
.row-head > .mono, .row-head > a { font-size: var(--mono-size); overflow-wrap: anywhere; min-width: 0; }
.row-head .tag-name .mono { color: var(--ink); }
.row-sub { display: grid; gap: 2px; font-size: 13px; line-height: 1.5; color: var(--ink-3); min-width: 0; overflow-wrap: anywhere; }
.row-sub .mono { font-size: 12.5px; color: var(--ink-2); }

/* Every selector tried: name, who uses it, what was found */
ul.tried { list-style: none; margin: 0; padding: 0; display: grid; font-size: 13.5px; }
ul.tried > li { display: grid; grid-template-columns: minmax(96px, 9rem) minmax(0, 1fr) auto; gap: 2px 12px; padding: 6px 0; border-top: 1px solid var(--line); }
ul.tried > li:first-child { border-top: 0; }
ul.tried .mono { font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  ul.tried > li { grid-template-columns: minmax(0, 1fr) auto; }
  ul.tried > li > .muted { grid-column: 1 / -1; grid-row: 2; }
}

/* Generator */
.generator .type-hint { margin: 2px 0 0; min-height: 3em; }
.gen-out { display: grid; gap: 16px; min-width: 0; }
.gen-out:empty { display: none; }
.gen-out[aria-busy="true"] { opacity: .7; }
.key-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.with-copy { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
ol.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
ol.steps li::marker { color: var(--ink-3); }
ol.steps a { color: var(--ink); text-underline-offset: 3px; overflow-wrap: anywhere; }
.card-body > p code.inline { font-size: 12.5px; }