/*
  sonar.phishtime.com — styles that only this site needs.

  Everything else (tokens, nav, buttons, cards, grid, hero, footer) comes
  from base.css, which is a verbatim copy of phishtime.com's site.css made
  by tools/sync-base.sh. Don't edit base.css here; override in this file.
*/

/* brand: "phishtime" wordmark plus a mono "sonar" suffix */

.brand-sub {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
  border-left: 1px solid var(--line-2);
  padding-left: 10px;
  margin-left: 2px;
  line-height: 1;
}

/* home: the tool list is the page, under a compact heading. The promo
   with the radar display lives on phishtime.com instead. */

.tools-home {
  padding-top: 64px;
}

/* Spacing at the foot of the list, one 72px step each: tools, notice,
   a hairline across the page, then the CTA. */
.tools-home {
  padding-bottom: 72px;
}

.tools-home + section {
  border-top: 1px solid var(--line);
  padding-top: 72px;
}

.tools-home .section-head h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  margin: 10px 0 0;
}

.tools-home .section-head .lede {
  margin-top: 16px;
}

/* The loading spinner turns like a sonar sweep. */
@keyframes sonar-sweep {
  to { transform: rotate(360deg); }
}

/* tool cards */

.tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 900px) {
  .tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .tools {
    grid-template-columns: 1fr;
  }
}

.tool {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  transition: border-color 0.15s, transform 0.15s;
}

a.tool:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
}

.tool.featured {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-bg), var(--bg-elev) 60%);
}

/* The spoofing test is where everyone should start, so it gets the whole
   first row. That also keeps the grid square: one full-width card plus nine
   regular ones is four full rows of three. */
@media (min-width: 621px) {
  .tool.featured {
    grid-column: 1 / -1;
    min-height: 0;
  }

  .tool.featured p {
    max-width: 640px;
  }
}

.tool-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-bg);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}

.tool-icon svg {
  width: 20px;
  height: 20px;
}

.tool h3 {
  font-size: 17px;
  margin-bottom: 6px;
}

.tool p {
  font-size: 14px;
  color: var(--text-2);
  margin: 0;
}

.tool-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
}

.tool-path {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
}

a.tool:hover .tool-path {
  color: var(--accent);
}

.tool-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* The pill on each tool card: what the tool gives you ("Grade A–F"). Every
   published tool is live, so it no longer says "Available". */
.status {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 3px 9px;
  border: 1px solid var(--line-2);
  color: var(--text-3);
  white-space: nowrap;
}

.status.live {
  color: var(--green);
  border-color: var(--green-line);
  background: var(--green-bg);
}

/* "public data, possible errors" notice under the tool grid (and, later,
   under every result) */

.disclaimer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 24px;
}

.disclaimer p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
}

.disclaimer-icon {
  flex: none;
  color: var(--amber);
  margin-top: 2px;
}

.disclaimer-icon svg {
  width: 20px;
  height: 20px;
}

/* "Public data, possible errors": the same quiet box on every page, the
   raised card colour with an amber icon rather than an amber fill. On the
   home page it sits well clear of the last row of tools. */
.tools-home .disclaimer {
  margin-top: 72px;
}

.disclaimer.quiet {
  border-color: var(--line-2);
  background: var(--bg-elev);
}

.disclaimer.quiet p {
  color: var(--text-2);
}

/* ---- tool pages ---- */

.tool-head {
  padding-bottom: 0;
}

.check-form {
  margin-top: 28px;
  max-width: 760px;
}

.check-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 260px;
}

.field-selector {
  flex: 0 1 220px;
}

.field span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.field input {
  font: inherit;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 11px 14px;
  min-width: 0;
}

.field input::placeholder {
  color: var(--text-3);
}

.field input:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.check-fields .btn {
  padding-top: 12px;
  padding-bottom: 12px;
}

.check-fields .btn:disabled {
  opacity: 0.55;
  cursor: progress;
}

.form-hint {
  margin-top: 12px;
  max-width: 760px;
  font-size: 13.5px;
  color: var(--text-3);
}

.form-error {
  color: var(--danger);
  font-size: 14.5px;
  margin: 0;
}

.result-section .disclaimer {
  margin-top: 28px;
}

.result {
  margin-top: 8px;
}

.checking {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 14px;
}

.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--accent-line);
  border-top-color: var(--accent);
  animation: sonar-sweep 0.8s linear infinite;
}

/* verdict banner */

.verdict {
  border: 1px solid var(--line);
  border-left-width: 4px;
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 24px;
}

.verdict h2 {
  font-size: clamp(22px, 3vw, 28px);
  margin: 10px 0 4px;
}

.verdict-domain {
  margin: 0;
  color: var(--text-3);
  font-size: 14px;
}

.verdict-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 3px 10px;
  border: 1px solid currentColor;
}

.status-pass { border-left-color: var(--green); }
.status-pass .verdict-pill { color: var(--green); background: var(--green-bg); }
.status-warn { border-left-color: var(--amber); }
.status-warn .verdict-pill { color: var(--amber); background: var(--amber-bg); }
.status-fail { border-left-color: var(--danger); }
.status-fail .verdict-pill { color: var(--danger); background: rgba(248, 113, 113, 0.1); }
.status-info { border-left-color: var(--blue); }
.status-info .verdict-pill { color: var(--blue); background: var(--blue-bg); }
.status-error { border-left-color: var(--text-3); }
.status-error .verdict-pill { color: var(--text-2); }

/* key facts */

.facts {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 10px 24px;
  margin: 0 0 8px;
  font-size: 14.5px;
}

.facts dt {
  color: var(--text-3);
}

.facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  .facts {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .facts dd {
    margin-bottom: 10px;
  }
}

.result code,
.explainer code,
.form-hint code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
  overflow-wrap: anywhere;
}

.result code.record {
  display: block;
  padding: 8px 10px;
  line-height: 1.5;
}

.result h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin: 36px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.result h3 .count,
.result h4 .count {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--accent-line);
  border-radius: 99px;
  padding: 2px 9px;
}

.result h3 .info {
  margin-left: 0;
}

/* findings */

.findings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.finding {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  border-radius: 12px;
  padding: 14px 16px;
}

.finding h4 {
  font-size: 15px;
  margin: 0 0 4px;
}

.finding p {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
}

.finding-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  margin-top: 1px;
}

.level-pass .finding-mark { color: var(--green); background: var(--green-bg); }
.level-info .finding-mark { color: var(--blue); background: var(--blue-bg); }
.level-warn .finding-mark { color: var(--amber); background: var(--amber-bg); }
.level-fail .finding-mark { color: var(--danger); background: rgba(248, 113, 113, 0.12); }
.level-fail { border-color: rgba(248, 113, 113, 0.3); }

/* A fact value that a finding flags: same colours as the verdict. */
.value-warn {
  color: var(--amber);
  font-weight: 600;
}

.value-fail {
  color: var(--danger);
  font-weight: 600;
}

.value-warn code {
  border-color: var(--amber-line);
}

.value-fail code {
  border-color: rgba(248, 113, 113, 0.45);
}

/* "How to fix" inside a finding */

.fix {
  margin-top: 10px;
  padding: 10px 14px;
  border-left: 3px solid var(--accent-line);
  background: var(--bg-elev-2);
  border-radius: 0 8px 8px 0;
}

.fix-label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.fix p,
.fix li {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

.fix ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

/* SPF include tree */

.tree ul {
  list-style: none;
  margin: 0;
  padding-left: 18px;
  border-left: 1px solid var(--line-2);
}

.tree > ul {
  padding-left: 0;
  border-left: 0;
}

.tree li {
  padding: 6px 0 6px 12px;
  position: relative;
}

.tree > ul > li {
  padding-left: 0;
}

.node-name {
  font-size: 13px;
}

.node-record {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.node.missing > .node-name,
.node.loop > .node-name {
  border-color: rgba(248, 113, 113, 0.5);
  color: var(--danger);
}

.node.error > .node-name {
  border-color: var(--amber-line);
  color: var(--amber);
}

/* DKIM key table */

table.keys {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.keys th,
table.keys td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.keys th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* raw DNS panel */

.raw {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elev);
}

.raw summary {
  cursor: pointer;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-2);
}

.raw pre {
  margin: 0;
  padding: 4px 16px 16px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 480px;
  overflow: auto;
}

/* explainer + related tools */

.explainer-body {
  max-width: 720px;
}

.explainer-body h2 {
  margin-bottom: 16px;
}

.explainer-body p {
  color: var(--text-2);
  margin: 0 0 14px;
}

.mini-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.mini-tool {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  border-radius: 12px;
  padding: 14px 18px;
}

.mini-tool:hover {
  border-color: var(--accent-line);
}

.mini-tool.all {
  justify-content: center;
  color: var(--accent);
}

/* (i) next to a fact label: practical meaning + RFC citation in a panel */

.info {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
}

.info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--bg-elev-2);
  color: var(--text-3);
  font: 600 10.5px/1 var(--mono);
  text-transform: none;
  letter-spacing: 0;
  cursor: help;
}

.info-btn:hover,
.info.open .info-btn,
.info-btn:focus-visible {
  color: var(--accent);
  border-color: var(--accent-line);
}

.info-pop {
  display: none;
  position: absolute;
  z-index: 30;
  left: -10px;
  top: calc(100% + 8px);
  width: max-content;
  max-width: min(320px, calc(100vw - 48px));
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-elev-2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  font: 400 13px/1.5 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
  white-space: normal;
  text-align: left;
}

/* Bridges the gap between the button and the panel, so moving the
   pointer down to the RFC link doesn't close it on the way. */
.info-pop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

/* Keyboard focus opens it too, but not mouse focus: a clicked button
   keeps focus, and :focus-within would then stop a second click from
   closing the panel. Hover only counts where there is a real pointer:
   touch browsers keep :hover stuck on whatever was tapped last, which
   would make a tapped panel impossible to close. */
.info:has(:focus-visible) .info-pop,
.info.open .info-pop {
  display: block;
}

@media (hover: hover) {
  .info:hover .info-pop {
    display: block;
  }
}

.info.dismissed .info-pop {
  display: none;
}

.info-text {
  display: block;
}

.info-pop a.rfc {
  display: inline-block;
  margin-top: 8px;
}

a.rfc {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--accent);
  white-space: nowrap;
  border-bottom: 1px dotted var(--accent-line);
}

a.rfc:hover {
  border-bottom-style: solid;
}

/* breadcrumb on tool pages: back to the tool list */

.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  background: var(--accent-bg);
  border-radius: 99px;
  padding: 5px 12px 5px 10px;
}

.crumbs a:hover {
  background: rgba(94, 234, 212, 0.16);
}

.crumbs [aria-current] {
  color: var(--text-2);
}

/* spoofing test: grade badge + scorecard */

.grade-verdict {
  display: flex;
  gap: 22px;
  align-items: center;
}

.grade-verdict h2 {
  margin-top: 0;
}

.verdict-body {
  margin: 0 0 8px;
  color: var(--text-2);
  font-size: 15px;
}

.grade {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  border: 3px solid currentColor;
}

.grade-A,
.grade-B { color: var(--green); background: var(--green-bg); }
.grade-C { color: var(--amber); background: var(--amber-bg); }
.grade-D,
.grade-F { color: var(--danger); background: rgba(248, 113, 113, 0.1); }

@media (max-width: 560px) {
  .grade-verdict {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .grade {
    width: 64px;
    height: 64px;
    font-size: 34px;
  }
}

.scorecard dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

.row-link {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
}

.row-link:hover {
  text-decoration: underline;
}

.section-note {
  margin: -4px 0 14px;
  font-size: 14px;
  color: var(--text-3);
}

.finding-check {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-3);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  padding: 1px 6px;
  margin-right: 8px;
  vertical-align: 2px;
}

/* tool list, grouped: the spoofing test with its three checks nested under
   it, then the other two groups */

.tool-groups {
  display: grid;
  gap: 44px;
}

.group-head {
  margin-bottom: 16px;
}

.group-head h3 {
  font-size: 20px;
  margin: 0 0 4px;
}

.group-head p {
  margin: 0;
  font-size: 14.5px;
  color: var(--text-3);
}

.tool-group > .tool.featured {
  grid-column: auto;
}

/* The three checks the spoofing test runs, hung off it by a line on the
   left so they read as its parts. */
.subtools {
  position: relative;
  margin: 0 0 0 26px;
  padding: 18px 0 0 24px;
  border-left: 2px solid var(--accent-line);
}

.subtools-label {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--text-3);
}

@media (max-width: 620px) {
  .subtools {
    margin-left: 10px;
    padding-left: 14px;
  }
}

/* header analyser */

.headers-form {
  max-width: 900px;
}

.field textarea {
  font: 13px/1.55 var(--mono);
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 220px;
  resize: vertical;
  width: 100%;
}

.field textarea::placeholder {
  color: var(--text-3);
}

.field textarea:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.headers-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 12px;
}

.privacy-note {
  font-size: 13px;
  color: var(--text-3);
}

.privacy-note::before {
  content: "🔒 ";
}

.status-unknown { border-left-color: var(--text-3); }
.status-unknown .verdict-pill { color: var(--text-2); }

.auth-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.auth-pill {
  font-family: var(--mono);
  font-size: 12px;
  border-radius: 99px;
  padding: 2px 9px;
  border: 1px solid var(--line-2);
  color: var(--text-2);
}

.auth-pass { color: var(--green); border-color: var(--green-line); background: var(--green-bg); }
.auth-warn { color: var(--amber); border-color: var(--amber-line); background: var(--amber-bg); }
.auth-fail { color: var(--danger); border-color: rgba(248, 113, 113, 0.45); background: rgba(248, 113, 113, 0.1); }

table.hops td {
  white-space: normal;
  overflow-wrap: anywhere;
}

table.hops td:first-child,
table.hops td:nth-child(5),
table.hops td:nth-child(6) {
  white-space: nowrap;
}

.next-check {
  margin-top: 24px;
}

.next-check a {
  color: var(--accent);
}

.next-check a:hover {
  text-decoration: underline;
}

/* Scrolling to a result shouldn't tuck its top under the sticky header. */
#result {
  scroll-margin-top: 84px;
}

/* record generators */

.gen-form {
  display: grid;
  gap: 22px;
  max-width: 900px;
  margin-top: 28px;
}

.gen-form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.gen-form legend {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
  padding: 0;
}

.gen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.field-hint {
  display: block;
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
}

.field select {
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 10px 12px;
}

.field select:focus {
  outline: none;
  border-color: var(--accent-line);
}

.with-unit {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
}

.with-unit input {
  width: 110px;
}

.load-status {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--text-2);
}

.load-status:empty {
  display: none;
}

.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.choice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--line-2);
  background: var(--bg-elev);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
}

.choice:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--accent-bg);
}

.choice input {
  margin-top: 4px;
  accent-color: var(--accent);
}

.choice-body {
  display: grid;
  gap: 3px;
}

.choice-body code {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
}

.choice-body small {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.45;
}

.gen-advanced {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
}

.gen-advanced[open] {
  display: grid;
  gap: 14px;
}

.gen-advanced summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-2);
}

.provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 8px;
}

.provider {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line-2);
  background: var(--bg-elev);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
}

.provider:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--accent-bg);
}

.provider input,
.check-row input {
  accent-color: var(--accent);
}

.provider-body {
  display: grid;
  min-width: 0;
}

.provider-body b {
  font-size: 14px;
  font-weight: 500;
}

.provider-body code {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
}

.provider-cost {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  white-space: nowrap;
}

.check-row {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14.5px;
  color: var(--text-2);
}

.gen-output {
  margin-top: 0;
}

.gen-record {
  border: 1px solid var(--accent-line);
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: grid;
  gap: 10px;
}

.gen-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 12px;
  align-items: center;
}

.gen-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.gen-value {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.gen-main .gen-value {
  background: var(--bg-elev-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14.5px;
}

.copy-btn {
  min-width: 84px;
}

@media (max-width: 620px) {
  .gen-row {
    grid-template-columns: 1fr auto;
  }

  .gen-row .gen-label {
    grid-column: 1 / -1;
  }
}

.lookup-meter {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 16px;
}

.lookup-meter b {
  font-family: var(--mono);
  font-size: 18px;
}

.meter-bar {
  height: 8px;
  border-radius: 99px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  overflow: hidden;
}

.meter-fill {
  display: block;
  height: 100%;
  background: var(--accent);
}

.meter-fill.warn { background: var(--amber); }
.meter-fill.fail { background: var(--danger); }

.costs ul {
  margin: 0;
  padding: 4px 16px 14px 34px;
  font-size: 13.5px;
  color: var(--text-2);
}

.note-text {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
}

/* The generators' lists are a few lines, not a pasted message. */
.gen-form .field textarea {
  min-height: 76px;
}

/* header analyser: identifiers, hops, decoded anti-spam, all headers */

.ids-list dd.id-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.id-value {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.ids-list .copy-btn {
  padding: 4px 10px;
  min-width: 76px;
  flex: none;
}

.hop-ip {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-3);
}

.delay-bar {
  display: block;
  margin-top: 5px;
  height: 4px;
  width: 80px;
  background: var(--bg-elev-2);
  border-radius: 99px;
  overflow: hidden;
}

.delay-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.value-warn .delay-bar span {
  background: var(--amber);
}

.sub-head {
  font-size: 15px;
  margin: 18px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

table.decode td {
  white-space: normal;
  vertical-align: top;
}

table.decode td:first-child {
  white-space: nowrap;
  color: var(--text-2);
}

.header-value {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.all-headers .table-scroll {
  padding: 0 12px 12px;
}

.sa-tests code {
  font-size: 12px;
}

.result-block {
  margin-top: 8px;
}

/* lookalike domains */

.checking { flex-wrap: wrap; }

.progress-bar {
  flex-basis: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.progress-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.2s;
}

table.lookalikes td { vertical-align: top; }
table.lookalikes tr.yours td { color: var(--text-3); }
table.lookalikes tr.yours code { opacity: 0.7; }

.lookalike-ascii {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
}

.free-actions { margin: 4px 0 8px; }

.check-form .advanced { margin-top: 12px; }
.check-form .advanced summary {
  cursor: pointer;
  color: var(--text-2);
  font-size: 14px;
}
.check-form .advanced[open] summary { margin-bottom: 10px; }
.check-form .advanced .field { max-width: 560px; }

/* MTA-STS & BIMI: two result sections on one page */

.mail-section + .mail-section { margin-top: 40px; }
.mail-title {
  font-family: var(--mono);
  font-size: 13px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2) !important;
  margin-bottom: 12px;
}

.bimi-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
}
.bimi-preview img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  object-fit: contain;
}
.bimi-preview figcaption { font-size: 13px; }

.wrap-anywhere { overflow-wrap: anywhere; }