/* Styles for the public CSP scanner — the /scan landing form and the
   per-domain Scorecard page. Design tokens come from the shared /tokens.css:
   the Nunjucks /scan page gets it via base.njk, and the Cloudflare Pages
   Function that renders the Scorecard links it explicitly (functions/scan/
   [domain].ts). Single source: packages/design-tokens — see docs/adr/0016. */

.scan-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}

/* Dark hero block on the /scan landing — mirrors the homepage's opening
   .section--dark block. Scoped to .scan-hero so the (light) Scorecard page,
   which reuses .scan-wrap, is unaffected. */
.scan-hero {
  background: hsl(var(--ink));
  color: hsl(var(--paper));
  border-bottom: 1.5px solid hsl(var(--ink));
}
.scan-hero .scan-wrap { padding-top: 80px; }
.scan-hero .scan-lede { color: hsl(var(--muted-on-ink)); }
.scan-hero .scan-form input[type="text"] {
  border-color: hsl(var(--paper));
  box-shadow: 4px 4px 0 hsl(var(--pop));
}
.scan-hero .scan-form button {
  background: hsl(var(--pop));
  color: hsl(var(--ink));
  border-color: hsl(var(--pop));
  box-shadow: 4px 4px 0 hsl(var(--paper));
}

.scan-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--pop));
}

.scan-wrap h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 34px;
  margin: 8px 0 12px;
}

.scan-lede {
  color: hsl(var(--ink-muted));
  font-size: 17px;
  max-width: 52ch;
}

/* ---------- landing form ---------- */
.scan-form {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.scan-form input[type="text"] {
  flex: 1 1 320px;
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 16px 18px;
  background: hsl(var(--paper));
  color: hsl(var(--ink));
  border: 1.5px solid hsl(var(--ink));
  box-shadow: 4px 4px 0 hsl(var(--ink));
}

.scan-form input:focus {
  outline: 2px solid hsl(var(--pop));
  outline-offset: 2px;
}

.scan-form button {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 16px 28px;
  background: hsl(var(--ink));
  color: hsl(var(--paper));
  border: 1.5px solid hsl(var(--ink));
  box-shadow: 4px 4px 0 hsl(var(--pop));
  cursor: pointer;
}

/* ---------- scorecard ---------- */
.scan-head {
  display: flex;
  align-items: center;
  gap: 24px;
  border: 1.5px solid hsl(var(--ink));
  box-shadow: 4px 4px 0 hsl(var(--ink));
  background: hsl(var(--paper));
  padding: 24px;
  margin-bottom: 28px;
}

.grade-badge {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border: 1.5px solid hsl(var(--ink));
  flex: 0 0 auto;
}
.grade-A, .grade-B { background: hsl(var(--ok)); color: hsl(var(--paper)); }
.grade-C { background: hsl(var(--ink)); color: hsl(var(--paper)); }
.grade-D, .grade-F { background: hsl(var(--pop)); color: hsl(var(--ink)); }

.scan-domain {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  word-break: break-all;
}
.scan-summary { color: hsl(var(--ink-muted)); margin-top: 6px; font-size: 15px; }
.scan-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--ink-muted));
  margin-top: 10px;
}
/* noscript fallback message sits a little lower than inline meta. */
.scan-meta--noscript { margin-top: 16px; }

.findings { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.finding {
  border: 1.5px solid hsl(var(--ink));
  background: hsl(var(--paper));
  padding: 16px 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: baseline;
}
.finding-sev {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 8px;
  border: 1px solid hsl(var(--ink));
  white-space: nowrap;
}
.sev-critical, .sev-high { background: hsl(var(--pop)); color: hsl(var(--ink)); border-color: hsl(var(--pop)); }
.sev-medium { background: hsl(var(--ink)); color: hsl(var(--paper)); }
.sev-low { background: hsl(var(--paper-2)); color: hsl(var(--ink)); }
.sev-good { background: hsl(var(--ok)); color: hsl(var(--paper)); border-color: hsl(var(--ok)); }
.finding-title { font-weight: 700; }
.finding-detail { color: hsl(var(--ink-muted)); font-size: 14px; margin-top: 4px; }

/* ---------- CTA ---------- */
.scan-cta {
  margin-top: 32px;
  border: 1.5px solid hsl(var(--ink));
  box-shadow: 6px 6px 0 hsl(var(--pop));
  background: hsl(var(--ink));
  color: hsl(var(--paper));
  padding: 28px;
}
.scan-cta h2 { font-family: var(--font-sans); font-weight: 800; font-size: 22px; margin-bottom: 8px; }
.scan-cta p { color: hsl(var(--muted-on-ink)); max-width: 56ch; }
.scan-cta a.cta-btn {
  display: inline-block;
  margin-top: 18px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 16px 26px;
  background: hsl(var(--pop));
  color: hsl(var(--ink));
  border: 1.5px solid hsl(var(--pop));
  box-shadow: 4px 4px 0 hsl(var(--paper));
}
.scan-cta a.cta-btn.is-soon { opacity: 0.55; pointer-events: none; box-shadow: none; }