/* Email security check: the few things tools.css doesn't cover. The
   scorecard rows (each says its verdict in words as well as colour), the
   numbered list of fixes, and small pieces inside the area cards. */

/* Scorecard: area name, verdict word, then what was found */
.scorecard { list-style: none; margin: 0; padding: 0; display: grid; }
.scorecard > li {
  display: grid; grid-template-columns: minmax(120px, 170px) 92px minmax(0, 1fr); gap: 4px 14px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--line); min-width: 0;
}
.scorecard > li:first-child { border-top: 0; padding-top: 2px; }
.scorecard .area-name { font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration-color: var(--ink-3); text-underline-offset: 3px; }
.scorecard .area-name:hover { text-decoration-color: var(--ink); }
.scorecard .area-chip .chip { min-width: 0; }
.scorecard .area-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); min-width: 0; overflow-wrap: anywhere; }
.scorecard .area-text strong { display: block; font-size: 14.5px; font-weight: 550; color: var(--ink); }
@media (max-width: 620px) {
  .scorecard > li { grid-template-columns: minmax(0, 1fr) auto; }
  .scorecard .area-text { grid-column: 1 / -1; }
}

/* Fixes, numbered in priority order */
ol.fixes { list-style: none; margin: 0; padding: 0; counter-reset: fix; display: grid; }
ol.fixes > li {
  counter-increment: fix;
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--line); min-width: 0;
}
ol.fixes > li:first-child { border-top: 0; padding-top: 2px; }
ol.fixes > li::before {
  content: counter(fix);
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink); border: 1px solid var(--line-2); background: var(--panel-2);
}
.fix { display: grid; gap: 4px; min-width: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.fix-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.fix-area { font-size: 12.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; }
.fix strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.fix p { margin: 0; font-size: 13.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.fix-link { justify-self: start; font-size: 13px; color: var(--ink-2); text-underline-offset: 3px; }
.fix-link:hover { color: var(--ink); }

/* Inside the area cards */
.addr-list { display: grid; gap: 2px; }
.card-body > p.small, .muted.small { font-size: 13px; line-height: 1.5; }
.card-body > p.tool-link { font-size: 14px; }
.card-body > p.tool-link a { color: var(--ink); text-underline-offset: 3px; }
.card-body a { overflow-wrap: anywhere; }

/* The summary strip: the domain gets a row of its own, so long names and
   the verdicts beside it never squeeze each other */
.results { container-type: inline-size; }
@container (min-width: 640px) {
  .summary.email-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .summary.email-summary > .stat:first-child { grid-column: 1 / -1; }
}
@container (max-width: 639px) {
  .summary.email-summary > .stat:first-child, .summary.email-summary > .stat:last-child { grid-column: 1 / -1; }
}

/* Lists of hosts and keys: a heading line with a chip, detail underneath */
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; }
.row-head > .mono, .row-head > a { font-size: var(--mono-size); color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.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); }