/* Security check: the parts health.css doesn't already cover. Loaded after health.css, which supplies the form,
   live scan, report and findings. Builds on site.css tokens. */

.sk-hero .huge { max-width: 10.5em; }
.sk-hero .hc-radar i { background: conic-gradient(from 0deg, rgba(156, 196, 136, 0.24), transparent 18%, transparent); }
.sk-hero .hc-globe { stroke-linecap: round; stroke-linejoin: round; }

/* An area that couldn't be checked */
.tier-none { --tier: var(--stone); --tier-glow: rgba(83, 100, 89, 0.2); --tier-soft: rgba(83, 100, 89, 0.2); }
.hcr-area.tier-none .hcr-mini b { color: var(--stone); }

/* Live scan: the records the checker reads, typed out as they arrive */
.sk-term { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line-dark); border-radius: 20px; background: var(--night); }
.sk-lines {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; flex: 1 0 auto; height: 320px; margin: 0; padding: 18px 18px 16px; overflow: hidden; list-style: none;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 22%); mask: linear-gradient(to bottom, transparent, #000 22%);
}
.sk-line { flex: none; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 1px 12px; align-items: baseline; font: 500 0.78rem/1.45 var(--font-mono); animation: sk-line-in 0.45s var(--ease-out) both; }
.sk-line b { grid-row: span 2; align-self: start; padding: 2px 0; border-radius: 6px; background: rgba(156, 196, 136, 0.12); color: var(--leaf); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.06em; text-align: center; }
.sk-line span { overflow: hidden; color: var(--stone); text-overflow: ellipsis; white-space: nowrap; }
.sk-line code { overflow: hidden; color: var(--cream); font: inherit; text-overflow: ellipsis; white-space: nowrap; animation: sk-type 0.6s steps(28, end) both; }
.sk-line.is-miss b { background: rgba(255, 127, 78, 0.13); color: var(--copper); }
.sk-line.is-miss code { color: var(--peach); }
.sk-caret { flex: none; height: 1.1em; }
.sk-caret::before { content: ""; display: inline-block; width: 8px; height: 1em; margin-left: 76px; vertical-align: -2px; background: var(--copper); animation: hc-blink 1s steps(1) infinite; }
.hc-run.is-done .sk-caret::before { background: var(--leaf); }

/* Email: what happens to a fake email */
.sk-split { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
.sk-spoof { display: grid; gap: 12px; margin: 0; }
.sk-spoof figcaption { color: var(--mist); font: 500 0.74rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.sk-spoof > p { margin: 0; color: var(--mist); font-size: 0.92rem; line-height: 1.5; }
.sk-mail {
  position: relative; display: grid; gap: 14px; padding: 18px 18px 22px; overflow: hidden;
  border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.9);
  transform: rotate(-1.2deg); animation: hc-rise 0.8s var(--ease-out) both; animation-delay: 0.35s;
}
.sk-mail dl { display: grid; gap: 6px; margin: 0; font-size: 0.86rem; }
.sk-mail dl div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; }
.sk-mail dt { color: #5B6B61; font: 500 0.72rem/1.7 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.sk-mail dd { margin: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sk-fake-lines { display: grid; gap: 7px; padding-top: 10px; border-top: 1px solid var(--line-paper); }
.sk-fake-lines i { display: block; height: 7px; border-radius: 4px; background: rgba(14, 25, 19, 0.1); }
.sk-fake-lines i:nth-child(2) { width: 86%; }
.sk-fake-lines i:nth-child(3) { width: 58%; }
.sk-stamp {
  position: absolute; right: 14px; bottom: 16px; padding: 6px 14px; border: 3px solid var(--tier); border-radius: 10px;
  color: var(--tier); font: 800 1.05rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(237, 241, 232, 0.86); transform: rotate(-9deg); animation: sk-stamp 0.55s cubic-bezier(0.3, 1.6, 0.5, 1) both; animation-delay: 1s;
}
/* The leaf and peach tokens are made for dark backgrounds, so the stamp uses deeper shades on the white card */
.sk-spoof.tier-good { --tier: #4F7F3A; }
.sk-spoof.tier-ok { --tier: #B5622F; }
.sk-spoof.tier-bad { --tier: var(--copper-deep); }
.sk-spoof.tier-none { --tier: #5B6B61; }

/* Website: which protections are switched on */
.sk-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.sk-checks li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--line-dark); border-radius: 12px; background: rgba(10, 19, 14, 0.5); font-size: 0.9rem; line-height: 1.3;
  animation: hc-rise 0.6s var(--ease-out) both; animation-delay: calc(0.4s + var(--i) * 90ms);
}
.sk-checks li::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--leaf); color: var(--night); font-size: 0.72rem; font-weight: 800; }
.sk-checks li.no::before { content: "!"; background: var(--copper); }
.sk-checks li.maybe { color: var(--mist); }
.sk-checks li.maybe::before { content: "?"; background: var(--stone); color: var(--cream); }

/* Domain: the countdown to renewal */
.sk-renew {
  display: grid; gap: 12px; align-content: start; padding: 22px; border: 1px solid var(--line-dark); border-radius: 20px; background: rgba(10, 19, 14, 0.5);
  --tier: var(--leaf);
}
.sk-renew.tier-ok { --tier: var(--peach); }
.sk-renew.tier-bad { --tier: var(--copper); }
.sk-renew-num { display: grid; }
.sk-renew-num b { color: var(--tier); font: 760 3.4rem/1 var(--font-display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.sk-renew-num span { margin-top: 4px; color: var(--mist); font: 500 0.74rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.sk-renew-bar { display: block; height: 8px; overflow: hidden; border-radius: 99px; background: rgba(233, 240, 230, 0.08); }
.sk-renew-bar i { display: block; width: var(--p); height: 100%; border-radius: inherit; background: var(--tier); transform-origin: left; animation: hc-grow 1.2s var(--ease-out) both; animation-delay: 0.4s; }
.sk-renew small { color: var(--mist); font-size: 0.88rem; }
.sk-none { margin: 0; color: var(--mist); line-height: 1.5; }

/* The records we read, for anyone who wants the detail */
.sk-records { border: 1px solid var(--line-dark); border-radius: 22px; background: rgba(16, 34, 26, 0.55); }
.sk-records summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 14px; align-items: center; padding: 18px 22px; cursor: pointer; font-weight: 600; list-style: none; }
.sk-records summary::-webkit-details-marker { display: none; }
.sk-records summary em { padding: 3px 10px; border-radius: 999px; background: rgba(233, 240, 230, 0.07); color: var(--mist); font: 600 0.75rem var(--font-mono); font-style: normal; }
.sk-records[open] .hcf-chev { transform: rotate(180deg); }
.sk-record-list { display: grid; gap: 10px; margin: 0; padding: 0 22px 22px; list-style: none; }
.sk-record-list .sk-line { animation: none; }
.sk-record-list .sk-line span, .sk-record-list .sk-line code { white-space: normal; overflow-wrap: anywhere; animation: none; }

@keyframes sk-line-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sk-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sk-stamp { 0% { opacity: 0; transform: rotate(-9deg) scale(2.4); } 70% { opacity: 1; } 100% { opacity: 1; transform: rotate(-9deg) scale(1); } }

@media (max-width: 980px) {
  .sk-lines { height: 230px; }
}
@media (max-width: 760px) {
  .sk-split { grid-template-columns: minmax(0, 1fr); }
  .sk-split > :last-child { justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .sk-line, .sk-line code, .sk-mail, .sk-stamp, .sk-checks li, .sk-renew-bar i, .sk-caret::before { animation: none; }
}

@media print {
  .sk-records, .sk-renew, .sk-checks li { border-color: #ccc !important; break-inside: avoid; }
  .sk-mail { box-shadow: none; border: 1px solid #ccc; transform: none; }
  .sk-stamp { color: #111 !important; border-color: #111 !important; }
  .sk-record-list { display: grid !important; }
}