/* ═══════════════════════════════════════════════════════════════════════════
   SSL-tool pages (ssl-checker, ssl-expiration) - shared styles for the live,
   pre-signup checker. Loaded after site.css; uses its design tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

.tool-hero { padding-top: 54px; padding-bottom: 8px; text-align: center; }
.tool-hero h1 { font-size: clamp(26px, 4.4vw, 34px); }
.tool-hero .lede { max-width: 60ch; margin: 14px auto 0; color: var(--text-2); font-size: 15px; }
.ck-form { max-width: 560px; margin: 26px auto 0; }
.ck-note { margin-top: 12px; color: var(--muted); font-size: 12.5px; text-align: center; }

.ck-results { max-width: 720px; margin: 28px auto 0; text-align: left; }
.ck-results[hidden] { display: none; }

/* Last-scanned line + rescan control (the result is a stored "ghost row" until Rescan is clicked). */
.ck-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ck-lastscan { color: var(--muted); font-size: 12.5px; }
.ck-rescan {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2);
  border-radius: 7px; padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.ck-rescan:hover { background: var(--surface-2); color: var(--text); border-color: var(--muted); }
.ck-rescan[disabled] { opacity: 0.55; cursor: default; }

.ck-progress {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px 20px; box-shadow: var(--shadow-sm); color: var(--text-2); font-size: 14px;
}
.ck-spin {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%;
  border: 2.5px solid var(--signal-line); border-top-color: var(--signal); animation: ck-spin 0.7s linear infinite;
}
@keyframes ck-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ck-spin { animation-duration: 2s; } }
.ck-progress b { color: var(--text); font-weight: 600; }

.ck-error {
  background: var(--bad-soft); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
  color: var(--bad); border-radius: var(--radius); padding: 16px 18px; font-size: 14px;
}

.ck-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.ck-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 16px 22px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.ck-host { font-family: var(--mono); font-size: 14.5px; font-weight: 600; color: var(--text); word-break: break-all; }
.ck-pill { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ck-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ck-pill.good { background: var(--good-soft); color: var(--good); }
.ck-pill.warn { background: var(--warn-soft); color: var(--warn); }
.ck-pill.bad { background: var(--bad-soft); color: var(--bad); }
.ck-pill.neutral { background: var(--surface-sunk); color: var(--muted); }

.ck-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.ck-fact { background: var(--surface); padding: 13px 22px; }
.ck-fact .k { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.ck-fact .v { color: var(--text); font-size: 14px; margin-top: 3px; word-break: break-word; }
.ck-fact .v.mono { font-family: var(--mono); font-size: 13px; }
.ck-fact .v.warnv { color: var(--warn); }
.ck-fact .v.badv { color: var(--bad); }
@media (max-width: 540px) { .ck-grid { grid-template-columns: 1fr; } }

/* Expiration mode: expiry-first "short data" block. */
.ck-expiry { display: flex; align-items: center; gap: 26px; padding: 24px 22px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.ck-expiry-main { display: flex; align-items: baseline; gap: 12px; }
.ck-expiry-num { font-size: 52px; font-weight: 680; letter-spacing: -0.04em; line-height: 1; color: var(--good); }
.ck-expiry-num.warn { color: var(--warn); }
.ck-expiry-num.bad { color: var(--bad); }
.ck-expiry-label { font-size: 14px; color: var(--text-2); max-width: 9ch; line-height: 1.25; }
.ck-expiry-meta { display: flex; flex-direction: column; gap: 8px; margin-left: auto; }
.ck-expiry-meta .row { display: flex; gap: 10px; font-size: 13px; }
.ck-expiry-meta .row .k { color: var(--muted); min-width: 66px; }
.ck-expiry-meta .row .v { color: var(--text); }
@media (max-width: 540px) { .ck-expiry-meta { margin-left: 0; } }

.ck-findings { padding: 8px 22px 6px; }
.ck-finding { display: flex; gap: 11px; padding: 12px 0; border-top: 1px solid var(--line); }
.ck-findings .ck-finding:first-child { border-top: 0; }
.ck-fdot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.ck-fdot.critical { background: var(--bad); }
.ck-fdot.warning { background: var(--warn); }
.ck-fmsg { color: var(--text); font-size: 13.5px; font-weight: 500; }
.ck-frec { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.ck-clean { padding: 20px 22px; display: flex; align-items: center; gap: 11px; color: var(--good); font-size: 14px; font-weight: 500; }
.ck-clean svg { flex-shrink: 0; }

/* The discovery reveal. Problems are loud and red; the subdomain count is prominent. */
.ck-reveal { margin-top: 16px; background: var(--signal-soft); border: 1px solid var(--signal-line); border-radius: var(--radius-lg); padding: 20px 22px; }
.ck-reveal.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 34%, transparent); }
.ck-reveal-stats { display: flex; gap: 30px; flex-wrap: wrap; }
.ck-rstat { display: flex; align-items: baseline; gap: 11px; }
.ck-rstat .num { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--signal-hover); }
.ck-rstat.bad .num { color: var(--bad); }
.ck-rstat.ok .num { color: var(--good); }
.ck-rstat span { font-size: 13px; color: var(--text-2); max-width: 24ch; line-height: 1.35; }
.ck-reveal .sub { margin-top: 14px; color: var(--text-2); font-size: 13.5px; }
.ck-reveal.bad .sub { color: color-mix(in srgb, var(--bad) 82%, var(--text)); }

.ck-cta { margin-top: 18px; text-align: center; }
.ck-cta .btn { min-width: 260px; }
.ck-cta .sub { color: var(--muted); font-size: 12.5px; margin-top: 10px; }

/* Curiosity banner between the tool and the explainer content. */
.curio-wrap { padding-top: 10px; padding-bottom: 10px; }
.curio { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; background: var(--dark-bg); color: #fff; border-radius: var(--radius-lg); padding: 22px 26px; }
.curio-txt { max-width: 62ch; }
.curio-txt b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.curio-txt span { display: block; margin-top: 5px; font-size: 13.5px; color: rgba(255, 255, 255, 0.66); }
.curio .btn { flex-shrink: 0; }