/* CertGrade . clean information-document aesthetic.
   System sans-serif, white paper on cool light-gray tabletop, browser-default
   hyperlinks, tables for data. Target: SSL-Labs visual feel . scannable,
   standard, no decoration. Iterate freely; this file is the only stylesheet. */

:root {
  /* `only light` is a hard opt-out from browser-side auto-dark
     (Chrome's "Auto Dark Mode for Web Contents", etc). */
  color-scheme: only light;

  --max-width: 1080px;

  --bg-outer: #e6eaf0;       /* cool light-gray tabletop */
  --bg-paper: #ffffff;       /* pure white paper */
  --bg-form:  #eaf0f7;       /* light-blue form panel */
  --bg-soft:  #f5f7fa;       /* very light cool gray (table header, code) */
  --bg-stripe: #fafbfc;      /* table row striping */

  --text: #1a1a1a;
  --muted: #5c6470;
  --rule: #cdd3db;
  --rule-soft: #e3e6eb;
  --rule-blue: #b4c4dc;

  --brand: #1e40af;          /* deep cobalt . used on the wordmark */
  --link: #0050aa;
  --link-visited: #6e2da8;
  --link-hover-bg: #f0e8c0;

  --warn: #b71c1c;

  /* Grade colors */
  --grade-aplus: #1b5e20;
  --grade-a:    #2e7d32;
  --grade-b:    #689f38;
  --grade-c:    #f9a825;
  --grade-d:    #ef6c00;
  --grade-f:    #c62828;
  --grade-none: #8a93a0;

  /* Inline tag colors */
  --tag-good-bg: #d9ead3;
  --tag-good-br: #93c47d;
  --tag-warn-bg: #fff2cc;
  --tag-warn-br: #e2c772;
  --tag-bad-bg:  #f4cccc;
  --tag-bad-br:  #cf6363;
  --tag-bad-fg:  #8b1d1d;
}

* { box-sizing: border-box; }

html, body {
  background-color: var(--bg-outer);
  color: var(--text);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.5;
  margin: 0;
  padding: 1.5rem 1rem 3rem;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
a:visited { color: var(--link-visited); }
a:hover { background: var(--link-hover-bg); }

/* The central "paper" rectangle that holds all content */
main.paper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.75rem 2rem 2.25rem;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Header */
header {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
}
header .tagline {
  margin: 0.1rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* New image-based header. The logo is a fixed-aspect-ratio WebP that
   the browser scales down for narrower viewports; the width and height
   attrs on the <img> tag reserve layout so the page doesn't reflow as
   the image decodes. */
.site-header {
  --logo-h: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}
.site-brand {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.site-header .logo-link {
  display: inline-block;
  line-height: 0;            /* kill the baseline gap under the image */
  margin: 0;
  padding: 0;
}
.site-header .logo-link:hover { background: transparent; }
.logo-header {
  display: block;
  width: auto;
  height: var(--logo-h);
  max-width: 100%;
  margin: 0;
}
/* Tagline sits flush at the brand container's left edge — same as
   the logo image above it — so both start at x=0 visually. */
.site-header .tagline {
  margin-left: 0;
  padding-left: 0;
}

/* Primary top-nav. Lives on every page; right-aligned next to the
   logo on desktop, wraps below on narrow viewports. */
.site-nav {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  font-size: 0.95rem;
  flex-wrap: wrap;
}
.site-nav a {
  text-decoration: none;
  color: var(--text);
  padding: 0.15rem 0.1rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover {
  color: var(--link);
  background: transparent;
  border-bottom-color: var(--rule);
}
.site-nav a.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

@media (max-width: 760px) { .site-header { --logo-h: 52px; } }
@media (max-width: 480px) {
  .site-header { --logo-h: 44px; gap: 0.75rem; }
  .site-nav { gap: 0.85rem; font-size: 0.9rem; }
}

/* Form panel . SSL-Labs-ish light blue band */
form#scan-form {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0 1.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--bg-form);
  border: 1px solid var(--rule-blue);
}
form input[type="text"] {
  /* min-width: 0 lets the input shrink past the placeholder's intrinsic
     width on narrow viewports so the button stays on the same line. */
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  font: inherit;
  border: 1px solid #9aa3b1;
  background: var(--bg-paper);
  color: var(--text);
}
form button {
  flex: 0 0 auto;
  padding: 0.45rem 1.2rem;
  font: inherit;
  font-weight: 600;
  border: 1px solid #7a8493;
  background: #e9eef5;
  color: var(--text);
  cursor: pointer;
}
form button:hover { background: #dde4ee; }
form button:disabled { opacity: 0.65; cursor: wait; background: #e9eef5; }

/* Loading banner shown between form submit and new-page render */
.scanning-banner {
  margin: 1rem 0 1.5rem;
  padding: 0.85rem 1rem 1rem;
  background: var(--bg-form);
  border: 1px solid var(--rule-blue);
}
.scanning-msg {
  margin: 0.65rem 0 0;
  font-size: 0.95rem;
  color: var(--text);
}
.scanning-bar {
  height: 4px;
  background: rgba(30, 64, 175, 0.12);
  overflow: hidden;
  position: relative;
}
.scanning-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -30%;
  height: 100%;
  width: 30%;
  background: var(--brand);
  animation: scanning-slide 1.4s ease-in-out infinite;
}
@keyframes scanning-slide {
  0%   { left: -30%; }
  100% { left: 100%; }
}

/* Fade the previous report while a new scan is in flight */
body.scanning .summary,
body.scanning .notable,
body.scanning .anchors,
body.scanning section.report {
  opacity: 0.35;
  transition: opacity 120ms ease-out;
}

/* Per-section "Scanning…" line shown by the streaming response between a
   section heading and its content. Once the content sibling arrives, the
   `:has()` rules below hide this line automatically . pure CSS progress
   without any JS state. */
.scan-status {
  position: relative;
  margin: 0.5rem 0 1rem;
  padding: 0.5rem 0.85rem 0.65rem;
  background: var(--bg-form);
  border-left: 3px solid var(--brand);
  color: var(--text);
  font-size: 0.93rem;
  font-style: italic;
  overflow: hidden;
}
.scan-status::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -30%;
  height: 2px;
  width: 30%;
  background: var(--brand);
  animation: scanning-slide 1.4s ease-in-out infinite;
}
/* Hide the per-section "scanning..." line as soon as ANY later sibling is
   actual content. Use the general-sibling combinator `~` (not `+`) so
   interleaved <script> chunks (progress-pill updates yielded by the
   streaming flow) don't prevent the match. Each scan-status only sees
   siblings within its own <section.report>, so a later section's table
   never hides an earlier section's scan-status incorrectly. */
.scan-status:has(~ table),
.scan-status:has(~ .error-block),
.scan-status:has(~ h3.cipher-proto),
.scan-status:has(~ p.muted),
.scan-status:has(~ p.fetch-meta),
.scan-status:has(~ .placeholder-section) {
  display: none;
}

/* HTTP security headers section */
.fetch-meta {
  margin: 0.4rem 0 0.6rem;
  color: var(--muted);
  font-size: 0.88rem;
}
.fetch-meta code {
  font-size: 0.85rem;
  background: var(--bg-soft);
  padding: 0.05em 0.3em;
  border: 1px solid var(--rule-soft);
}
table.headers-table th { width: 16em; }
table.headers-table .header-value {
  display: block;
  background: var(--bg-soft);
  border: 1px solid var(--rule-soft);
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  word-break: break-all;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  max-height: 9em;
  overflow-y: auto;
}
table.headers-table .header-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.1rem 0;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Intro on empty state */
.intro {
  margin: 1rem 0;
  color: var(--muted);
}

/* Summary band at top of report */
.summary {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin: 0.5rem 0 1.25rem;
  border: 1px solid var(--rule);
  padding: 0.9rem 1.1rem;
  background: var(--bg-paper);
}
.summary-id { flex: 1; min-width: 0; }
.summary-id h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.summary-id .meta {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.2rem 0 0;
}

.grade-pair {
  display: flex;
  gap: 0.75rem;
  text-align: center;
}
.grade-cell {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.grade-box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 800;
  font-size: 1.85rem;
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 auto 0.3rem;
  color: #ffffff;
  background: var(--grade-none);
  border: 1.5px solid rgba(0, 0, 0, 0.22);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  letter-spacing: -0.025em;
  line-height: 1;
  text-align: center;
  /* sub-pixel offset to perfectly center letters with a descender-less metric */
  padding-bottom: 0.05em;
}
.grade-box.grade-a\+ { background: var(--grade-aplus); }
.grade-box.grade-a   { background: var(--grade-a); }
.grade-box.grade-a-  { background: var(--grade-a); }
.grade-box.grade-b   { background: var(--grade-b); }
.grade-box.grade-c   { background: var(--grade-c); color: #1a1a1a; }
.grade-box.grade-d   { background: var(--grade-d); }
.grade-box.grade-e   { background: var(--grade-d); }
.grade-box.grade-f   { background: var(--grade-f); }
.grade-box.grade-none {
  background: var(--grade-none);
  font-size: 1.5rem;
}

/* Notable findings strip */
.notable {
  margin: 1rem 0 1.5rem;
  padding: 0.6rem 0.95rem;
  background: #fff8e1;
  border-left: 4px solid #d4a017;
  border-top: 1px solid var(--rule-soft);
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.notable strong { display: block; margin-bottom: 0.2rem; }
.notable ul { margin: 0; padding-left: 1.25rem; }
.notable li { margin: 0.1rem 0; }

/* When the sticky nav is shown, the anchor-clicked section heading
   would otherwise be hidden behind it. scroll-margin-top offsets the
   browser's "snap to anchor" scroll target. */
.report h2[id] { scroll-margin-top: 60px; }

/* Section-jump nav. Sticky to the top of the viewport so users can
   navigate the long report without scrolling back up. */
.anchors {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0.5rem -2rem 1.5rem;
  padding: 0.55rem 2rem;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.9rem;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  line-height: 1.6;
}
@media (max-width: 720px) {
  .anchors {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.85rem;
  }
}

/* TOC link severity markers (added by the streaming JS as each section's
   scan finishes). Suffix a tiny coloured glyph after the link text. */
.anchors a.toc-good::after { content: ' \2713'; color: var(--grade-a); }
.anchors a.toc-warn::after { content: ' !';     color: var(--grade-d); font-weight: 700; }
.anchors a.toc-bad::after  { content: ' \2717'; color: var(--grade-f); font-weight: 700; }
.anchors a.toc-unknown::after { content: ''; }

/* Scan progress checklist (top of report; ticks off as scans complete).
   4-column CSS grid so 8 pills lay out as a clean 4×2. Each pill has a
   CSS-drawn icon (no Unicode chars . consistent geometry across fonts):
   pending = hollow circle, running = animated spinner, done = green disc
   with white check mark. */
.scan-progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
  gap: 0.55rem;
  margin: 0.5rem 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--rule);
}
.progress-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.92rem;
  border: 1px solid var(--rule);
  background: var(--bg-soft);
  text-decoration: none;
  color: var(--text);
  min-height: 2.55rem;
  box-sizing: border-box;
}
.progress-item:hover {
  text-decoration: none;
  background: var(--bg-form);
}
.progress-item:visited { color: var(--text); }
.progress-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* All icons share the same outer footprint. Pseudo-elements draw the
   actual indicator, so font-family / character-width have no effect. */
.progress-icon {
  display: inline-block;
  flex: 0 0 1.2rem;
  width: 1.2rem;
  height: 1.2rem;
  position: relative;
  box-sizing: border-box;
  border-radius: 50%;
}

/* Pending . hollow gray circle */
.progress-pending          { color: var(--muted); }
.progress-pending .progress-icon {
  border: 2px solid #a8aeb6;
  background: #ffffff;
}

/* Running . rotating quarter-arc spinner */
.progress-running {
  background: var(--bg-form);
  border-color: var(--rule-blue);
  color: var(--text);
  font-weight: 600;
}
.progress-running .progress-icon {
  border: 2.5px solid var(--rule-blue);
  border-top-color: var(--brand);
  animation: progress-spin 0.75s linear infinite;
}

/* Done . green filled disc with white check mark drawn via rotated borders */
.progress-done {
  background: #e7f5e8;
  border-color: #b6dabc;
}
.progress-done .progress-icon {
  background: var(--grade-a);
  border: 2px solid var(--grade-a);
}
.progress-done .progress-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.42rem;
  height: 0.22rem;
  border-left: 2.2px solid #ffffff;
  border-bottom: 2.2px solid #ffffff;
  transform: translate(-55%, -75%) rotate(-45deg);
}

@keyframes progress-spin {
  to { transform: rotate(360deg); }
}

/* Vulnerabilities table . info note under the severity tag */
table.vulns-table th { width: 18em; }
.vuln-info {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.88rem;
}

/* Cookies + DNS tables */
table.cookies-table thead th { background: var(--bg-soft); font-weight: 600; }
table.cookies-table th.col-secure,
table.cookies-table th.col-httponly,
table.cookies-table th.col-samesite,
table.cookies-table th.col-status {
  width: 6em;
  text-align: center;
}
table.cookies-table td:nth-child(n+2) { text-align: center; }
.cookie-value {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82em;
  margin-left: 0.3em;
}
table.dns-table th { width: 12em; }

/* Report sections */
section.report h2 {
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 1.75rem 0 0.5rem;
  padding: 0 0 0.3rem 0.55rem;
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid var(--brand);
  color: #1e293b;
}
section.report h2 .anchor {
  font-weight: normal;
  font-size: 0.85em;
  color: var(--muted);
  margin-left: 0.4rem;
  text-decoration: none;
  visibility: hidden;
}
section.report h2:hover .anchor { visibility: visible; }

.placeholder-section {
  color: var(--muted);
  font-style: italic;
  margin: 0.5rem 0;
}

/* Fact tables */
table.facts {
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  margin: 0.5rem 0 1rem;
  font-size: 0.92rem;
  background: var(--bg-paper);
}
table.facts th,
table.facts td {
  border: 1px solid var(--rule);
  padding: 0.4rem 0.6rem;
  text-align: left;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
}
table.facts th {
  background: var(--bg-soft);
  font-weight: 600;
  width: 13em;
  color: #2a2a2a;
  word-break: break-word;
  overflow-wrap: anywhere;
}
table.facts tr:nth-child(even) td { background: var(--bg-stripe); }

.muted { color: var(--muted); font-weight: normal; }

/* Cipher-suite tables (one per supported TLS version) */
h3.cipher-proto {
  font-size: 0.98rem;
  font-weight: 700;
  margin: 1.2rem 0 0.35rem;
  color: #1e293b;
}
table.ciphers {
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  table-layout: auto;
  margin: 0.3rem 0 0.75rem;
  font-size: 0.88rem;
  background: var(--bg-paper);
}
table.ciphers th,
table.ciphers td {
  border: 1px solid var(--rule);
  padding: 0.3rem 0.55rem;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}
table.ciphers thead th {
  background: var(--bg-soft);
  font-weight: 600;
  color: #2a2a2a;
  white-space: nowrap;
}
table.ciphers tr:nth-child(even) td { background: var(--bg-stripe); }
table.ciphers td .tag { vertical-align: 0.05em; }
table.ciphers td code {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 0.86rem;
}
table.ciphers td.num { text-align: right; font-variant-numeric: tabular-nums; width: 3.5em; }
table.ciphers th.col-bits { width: 3.5em; text-align: right; }
table.ciphers th.col-strength { width: 6em; }
table.ciphers th.col-kex { width: 12em; }

/* Inline pill tags */
.tag {
  display: inline-block;
  padding: 0.05em 0.4em;
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82em;
  background: var(--bg-soft);
  border: 1px solid var(--rule-soft);
  margin: 0 0.25em 0.25em 0;
  color: #2a2a2a;
}
.tag.tag-good { background: var(--tag-good-bg); border-color: var(--tag-good-br); }
.tag.tag-warn { background: var(--tag-warn-bg); border-color: var(--tag-warn-br); }
.tag.tag-bad  { background: var(--tag-bad-bg);  border-color: var(--tag-bad-br); color: var(--tag-bad-fg); }
.tag.tag-info { background: #e1ecf7; border-color: #b7c9df; color: #1f3a5f; }
.tag.tag-muted { background: var(--bg-soft); border-color: var(--rule-soft); color: #6a6a6a; }
.tag-list { line-height: 1.85; }

/* Code blocks */
code, pre {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86rem;
}
code {
  background: var(--bg-soft);
  padding: 0.05em 0.3em;
  border: 1px solid var(--rule-soft);
  color: #2a2a2a;
  word-break: break-all;
}
pre {
  background: var(--bg-soft);
  padding: 0.75rem;
  border: 1px solid var(--rule);
  overflow-x: auto;
  color: #2a2a2a;
}

.error-block {
  margin: 0.75rem 0;
  padding: 0.55rem 0.85rem;
  background: #fef2f2;
  border-left: 4px solid var(--warn);
  color: var(--warn);
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88rem;
}

footer {
  margin-top: 2.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--muted);
}
footer p { margin: 0; }
.served-by {
  /* Keep "Brașov 🇦🇴" inline with the same line height as the rest of the footer. */
  white-space: nowrap;
  font-weight: 500;
  color: var(--text);
}

/* Hosting & Jurisdiction card (issue #24) */
.geo-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.4fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1rem 1.1rem;
  border: 1px solid var(--rule-soft);
  background: var(--bg-stripe);
}
@media (max-width: 720px) {
  .geo-card { grid-template-columns: 1fr; }
}
.geo-where, .geo-host, .geo-grade { min-width: 0; }
.geo-country {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}
.geo-flag {
  font-size: 1.6rem;
  line-height: 1;
}
.geo-country-name { font-weight: 600; }
.geo-line { margin: 0.25rem 0; }
.geo-grade .grade-cell { margin-bottom: 0.5rem; }
.geo-rationale { margin: 0.35rem 0; }
.geo-factors {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.86rem;
  color: var(--muted);
}
.geo-factors li { margin-bottom: 0.1rem; }
.geo-factors strong { color: var(--text); font-weight: 600; }

/* Compact action links under the summary id (Download JSON, Compare with...) */
.meta-actions {
  font-size: 0.85rem;
}
.meta-actions a { white-space: nowrap; }

/* Grade rationale: expandable "why these grades?" panel under the summary */
.grade-rationale {
  margin: 0.5rem 0 1.25rem;
  font-size: 0.9rem;
}
.grade-rationale summary {
  cursor: pointer;
  color: var(--muted);
  padding: 0.25rem 0;
  user-select: none;
}
.grade-rationale summary:hover { color: var(--link); }
.grade-rationale-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: 0.75rem 0.85rem;
  background: var(--bg-stripe);
  border: 1px solid var(--rule-soft);
}
@media (max-width: 640px) {
  .grade-rationale-pair { grid-template-columns: 1fr; }
}
.grade-rationale-pair strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--brand);
}
.grade-reasons-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--text);
}
.grade-reasons-list li { margin-bottom: 0.15rem; }
.grade-reasons-list:empty::after {
  content: 'Loading...';
  color: var(--muted);
  font-style: italic;
}

/* Email security composite summary (DNS section) */
.email-summary {
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.8rem;
  background: var(--bg-stripe);
  border: 1px solid var(--rule-soft);
  font-size: 0.93rem;
}
.grade-inline {
  display: inline-block;
  padding: 0.05em 0.5em;
  border-radius: 3px;
  color: white;
  font-weight: 700;
  font-size: 0.85em;
}
.grade-inline.grade-a { background: var(--grade-a); }
.grade-inline.grade-b { background: var(--grade-b); }
.grade-inline.grade-c { background: var(--grade-c); color: #1a1a1a; }
.grade-inline.grade-d { background: var(--grade-d); }
.grade-inline.grade-e { background: var(--grade-d); }
.grade-inline.grade-f { background: var(--grade-f); }
.email-factor {
  font-size: 0.85em;
}
.email-factor-ok::before {
  content: '\2713\00a0'; /* check mark + nbsp */
  color: var(--grade-a);
}
.email-factor-miss::before {
  content: '\2717\00a0'; /* ballot X + nbsp */
  color: var(--muted);
}
.email-factor-miss { color: var(--muted); }

/* HSTS preload eligibility checklist */
.preload-checks {
  list-style: none;
  margin: 0.35rem 0 0.5rem;
  padding: 0;
  font-size: 0.88rem;
}
.preload-checks .check { padding: 0.1rem 0; }
.preload-checks .check-ok::before {
  content: '\2713\00a0';
  color: var(--grade-a);
}
.preload-checks .check-miss::before {
  content: '\2717\00a0';
  color: var(--warn);
}
.preload-checks .check-miss { color: var(--warn); }

/* Muted link in table headers (e.g. MDN doc links on header names) */
.muted-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--rule);
}
.muted-link:hover {
  color: var(--link);
  background: transparent;
  border-bottom-color: var(--link);
}

/* Wrap wide tables so they scroll horizontally inside the paper
   instead of pushing the section's right edge off the page. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 0.75rem;
}
.table-scroll table { min-width: 100%; }

/* CT history details: minimal styling for the collapsible wrapper. */
.ct-details summary {
  cursor: pointer;
  padding: 0.4rem 0;
  color: var(--text);
  font-size: 0.95rem;
}
.ct-details summary:hover { color: var(--link); }

/* Notable findings list (top of report, computed after all scans done) */
.notable-findings {
  list-style: none;
  margin: 0;
  padding: 0;
}
.notable {
  display: flex;
  /* Stack vertically: the head row on top, the optional fix-card
     beneath at full width. Without this the <details> ended up as a
     flex sibling and ballooned the row's width to fit its widest
     <pre> line. */
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 0.35rem;
  border-left: 4px solid var(--rule);
  background: var(--bg-stripe);
  font-size: 0.95rem;
}
.notable-marker {
  font-weight: 700;
  font-family: ui-monospace, monospace;
  flex-shrink: 0;
}
.notable-bad {
  border-left-color: var(--tag-bad-br);
  background: var(--tag-bad-bg);
  color: var(--tag-bad-fg);
}
.notable-bad .notable-marker { color: var(--tag-bad-fg); }
.notable-warn {
  border-left-color: var(--tag-warn-br);
  background: var(--tag-warn-bg);
  color: #6a4a00;
}
.notable-warn .notable-marker { color: #b08600; }

/* Scan profile footer */
.scan-profile {
  margin: 1.5rem 0 0;
  font-size: 0.85rem;
}
.scan-profile summary {
  cursor: pointer;
  color: var(--muted);
}
.scan-profile summary:hover { color: var(--link); }
.scan-profile-table { margin-top: 0.5rem; }
.scan-profile-table td.num { font-variant-numeric: tabular-nums; }

/* Server-sent certificate chain (collapsible in Modern Features section) */
.cert-chain { margin: 0 0 0.85rem; font-size: 0.92rem; }
.cert-chain summary { cursor: pointer; color: var(--muted); margin-bottom: 0.35rem; }
.cert-chain summary:hover { color: var(--link); }
.cert-chain-table th { font-weight: 500; font-size: 0.85rem; color: var(--muted); }

/* Landing-page feature list — green check icon per item, not form
   controls (these aren't features you can toggle; every scan runs
   the full set). */
.feature-list {
  list-style: none;
  margin: 0.5rem 0 0.75rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem 1.25rem;
  font-size: 0.93rem;
}
@media (max-width: 520px) {
  .feature-list { grid-template-columns: 1fr; }
}
.feature-list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text);
}
.feature-list li::before {
  content: '\2713'; /* heavy check */
  position: absolute;
  left: 0;
  color: var(--grade-a);
  font-weight: 700;
}

/* Recent scans (browser localStorage, populated by report pages) */
.recent-scans {
  margin: 1rem 0 1.5rem;
  padding: 0.65rem 0.9rem;
  background: var(--bg-stripe);
  border: 1px solid var(--rule-soft);
  font-size: 0.92rem;
}
.recent-scans-label {
  margin: 0 0 0.35rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
#recent-scans-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#recent-scans-list li { padding: 0; }
#recent-scans-list a {
  white-space: nowrap;
}

/* Short paragraph under each <h2> explaining what the section covers. */
.section-intro {
  margin: -0.3rem 0 0.85rem;
  color: var(--muted);
  font-size: 0.92rem;
}

/* Error banner shown on the form-only page after a 4xx/5xx (custom handler). */
.error-banner {
  margin: 0.75rem 0 1.25rem;
  padding: 0.65rem 0.9rem;
  background: var(--tag-bad-bg);
  border: 1px solid var(--tag-bad-br);
  color: var(--tag-bad-fg);
  font-size: 0.95rem;
}

/* Per-directive CSP breakdown (Headers section) */
.csp-detail {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}
.csp-detail summary {
  cursor: pointer;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.csp-detail summary:hover { color: var(--link); }
.csp-directives {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-stripe);
  border: 1px solid var(--rule-soft);
}
.csp-directives th {
  text-align: left;
  vertical-align: top;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.35rem 0.6rem;
  color: var(--brand);
  border-bottom: 1px solid var(--rule-soft);
  white-space: nowrap;
  width: 13em;
}
.csp-directives td {
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--rule-soft);
}
.csp-directives tr:last-child th,
.csp-directives tr:last-child td { border-bottom: none; }
.tag-warn-text {
  color: #8a5a00;
}

/* HTTP -> HTTPS upgrade status (Headers section) */
.http-upgrade {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
}

/* Redirect chain disclosure in the Headers section */
.redirect-chain {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
}
.redirect-chain summary {
  cursor: pointer;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.redirect-chain summary:hover { color: var(--link); }
.redirect-chain ol {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}
.redirect-chain ol li { margin-bottom: 0.2rem; }

/* World map for the Hosting & Jurisdiction section */
.world-map {
  position: relative;
  margin: 0 0 1rem;
  background: #f5f7fa;
  border: 1px solid var(--rule-soft);
  line-height: 0; /* avoid extra baseline gap below svg */
  user-select: none;        /* dragging-to-pan shouldn't select text */
  -webkit-user-select: none;
}
.world-map-controls {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
}
.world-map-controls button {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.world-map-controls button:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.world-map-controls button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.geo-alt-country {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* Resolution-source banner above the geo card. Two flavours:
   .good = the client's browser DoH'd it from their region (accurate);
   .muted = the server resolved it from Romania (regional caveat). */
.geo-source {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.8rem;
  border-radius: 3px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.geo-source.good {
  background: #ecfdf5;
  border-left: 3px solid #047857;
  color: #064e3b;
}
.geo-source.muted {
  background: var(--bg-soft);
  border-left: 3px solid var(--rule);
  color: var(--muted);
}
.geo-source a { white-space: nowrap; }

/* /learn/dns ascii-art chain diagram */
.dns-diagram {
  font-size: 0.75rem;
  line-height: 1.25;
  overflow-x: auto;
  background: var(--bg-soft);
  border: 1px solid var(--rule-soft);
  padding: 0.75rem;
  border-radius: 3px;
  margin: 0.75rem 0;
}
.ct-unavailable {
  padding: 0.6rem 0.8rem;
  background: var(--bg-soft);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--rule);
  border-radius: 3px;
  margin: 0;
}
/* "How to fix this" cards beneath each notable finding. Collapsed by
   default so the section stays scannable; expanded one shows the per-
   web-server snippets that resolve the underlying issue. */
.notable-head {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.notable-text { flex: 1; }
.notable-fixhint {
  font-size: 0.75rem;
  white-space: nowrap;
}
.fix-card {
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  background: var(--bg-paper);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;          /* clip code blocks at the rounded corners */
}
.fix-card > summary {
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  background: var(--bg-soft);
  border-radius: 4px 4px 0 0;
  font-size: 0.9rem;
}
.fix-card[open] > summary {
  border-bottom: 1px solid var(--rule-soft);
}
.fix-body {
  padding: 0.75rem;
}
.fix-description {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
}
.fix-tradeoff {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.75rem;
  background: #fff8e8;       /* warm-paper tint so it stands apart from snippets */
  border-left: 3px solid #d4a017;
  border-radius: 3px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.fix-tradeoff-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.2rem;
  color: #7a5a00;
}

/* About page: long-form prose, narrower column for readability */
.about {
  max-width: 720px;
  margin: 1.5rem 0 2rem;
}
.about h2 {
  margin-top: 1.75rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule-soft);
}
.about p, .about ul { font-size: 1rem; line-height: 1.6; }
.about ul li { margin-bottom: 0.5rem; }

/* /learn index — list of articles, each with title link + short summary */
.learn-list, .learn-list-tentative {
  list-style: none;
  padding: 0;
}
.learn-list > li { margin-bottom: 1.1rem; }
.learn-list > li > a {
  font-weight: 600;
  font-size: 1.05rem;
}
.learn-list > li > p {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
}
.learn-list-tentative > li {
  margin-bottom: 0.4rem;
}
.fix-snippets {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.fix-snippet {
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}
.fix-snippet-header {
  padding: 0.3rem 0.6rem;
  background: var(--bg-stripe);
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.fix-code {
  margin: 0;
  padding: 0.6rem 0.75rem;
  background: #f8f9fb;
  font-size: 0.85rem;
  line-height: 1.45;
  overflow-x: auto;
  white-space: pre;
}
.fix-code code {
  background: transparent;
  padding: 0;
  border: 0;
  font-size: inherit;
}
.fix-context {
  padding: 0.4rem 0.75rem 0.5rem;
  margin: 0;
  font-size: 0.8rem;
  background: var(--bg-paper);
}
.fix-docs {
  margin: 0.8rem 0 0;
  font-size: 0.8rem;
}
.subdomain-details summary { cursor: pointer; }
.subdomain-list {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 1.5rem;
}
.subdomain-list li {
  padding: 0.15rem 0;
  break-inside: avoid;
}
@media (min-width: 720px) { .subdomain-list { columns: 3; } }
@media (min-width: 1000px) { .subdomain-list { columns: 4; } }
.world-map svg {
  display: block;
  width: 100%;
  height: auto;
}
.world-map svg path {
  fill: #d6dce4;
  stroke: #ffffff;
  stroke-width: 0.6;
  stroke-linejoin: round;
  /* Keep stroke a constant screen-pixel width regardless of zoom level.
     Without this, zooming in 6x makes country borders 6x thicker and
     the whole map looks heavy/pixelated. */
  vector-effect: non-scaling-stroke;
}
.world-map .world-marker {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.world-map .marker-halo {
  fill: rgba(251, 191, 36, 0.35);
  stroke: #b45309;
  stroke-width: 1.2;
}
.world-map .marker-dot {
  fill: #fbbf24;
  stroke: #7c2d12;
  stroke-width: 1.2;
}

/* Worldwide-DNS overlay pins drawn on top of the Hosting map after the
   vantage scan completes. Smaller and outlined so they don't compete with
   the primary scanned-IP pin (gold) above. */
.world-map .vantage-halo-overlay {
  fill: rgba(30, 64, 175, 0.18);
  stroke: var(--brand);
  stroke-width: 0.8;
}
.world-map .vantage-dot-overlay {
  fill: #ffffff;
  stroke: var(--brand);
  stroke-width: 1.2;
}
/* Lighter blue fill for countries reached by the worldwide DNS scan
   (but NOT the country we scanned the TLS handshake against — that
   country's #<ISO2> rule wins by specificity). */
.world-map svg path.vantage-country {
  fill: #c9d4ea;
}

/* Worldwide DNS Resolution section — grouped table view */
.vantage-summary {
  margin: 0 0 1rem;
  color: var(--text);
}
.vantage-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.vantage-table th,
.vantage-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--rule-soft);
  text-align: left;
  vertical-align: top;
}
.vantage-table thead th {
  background: var(--bg-soft);
  font-weight: 600;
  border-bottom: 1px solid var(--rule);
}
.vantage-table tbody tr:nth-child(even) { background: var(--bg-stripe); }
.vantage-table td.num,
.vantage-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 4rem;
}
.vantage-loc-cell {
  white-space: nowrap;
  font-weight: 500;
}
.vantage-net-cell {
  white-space: nowrap;
}
.vantage-resolvers-cell {
  line-height: 1.7;
}
.vantage-tag {
  display: inline-block;
  background: var(--bg-soft);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  padding: 0.05rem 0.4rem;
  margin: 0 0.2rem 0.2rem 0;
  font-size: 0.8rem;
  white-space: nowrap;
}
.vantage-failures {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.vantage-failures summary { cursor: pointer; }
.vantage-failures ul {
  margin: 0.4rem 0 0;
  padding-left: 1.25rem;
}
.vantage-failures li { margin-bottom: 0.25rem; }

/* Print stylesheet: collapse interactive elements, white background,
   show all <details> contents so the print version is self-contained. */
@media print {
  html, body { background: #fff; }
  body { padding: 0; font-size: 11pt; }
  main.paper { box-shadow: none; max-width: 100%; padding: 0.5cm; }
  #scan-form, .scanning-banner, .scan-progress, .anchors,
  .meta-actions { display: none !important; }
  details { open: true; }
  details > summary { list-style: none; cursor: default; }
  details:not([open]) > *:not(summary) { display: block !important; }
  details > summary::-webkit-details-marker { display: none; }
  .scan-status, .section-body.loading { display: none !important; }
  a { color: #000; text-decoration: underline; }
  .tag, .grade-box, .grade-inline { border: 1px solid #000 !important; }
  h2 { page-break-after: avoid; }
  table, .geo-card, .world-map { page-break-inside: avoid; }
  .ciphers, .headers-table, .dns-table { page-break-inside: auto; }
}


/* ===== new in 2026-05-26: dns-raw / ipv6 / dkim / smtp / blocklist / cipher-pref ===== */

.dns-raw-table th,
.ipv6-table th,
.dkim-table th,
.smtp-table th,
.blocklist-table th {
  white-space: nowrap;
  vertical-align: top;
}
.dns-raw-table td,
.ipv6-table td,
.dkim-table td,
.smtp-table td,
.blocklist-table td {
  word-break: break-word;
}
.dns-raw-row { margin: 0.15rem 0; }
.dns-raw-row code { word-break: break-all; }

.dkim-raw { margin-top: 0.4rem; }
.dkim-raw pre {
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--paper-shade, #f6f6f1);
  padding: 0.5rem;
  border-radius: 4px;
  max-width: 100%;
  overflow-x: auto;
}

.cipher-pref-note {
  font-size: 0.92rem;
  margin: 0.2rem 0 0.6rem;
}

.smtp-table code { word-break: break-all; }
.blocklist-table .header-note { font-size: 0.85rem; }