/* Styles for the public CSP scanner — the /scan landing and the per-domain
   Scorecard page. Shared chrome + primitives come from /components.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). Tokens: packages/design-tokens, adr/0016. */

/* Scanner pages read as documents (same rhythm as legal pages). */
body { line-height: 1.55; }

/* ---------- landing hero ---------- */
/* On paper, like the homepage. It used to be an ink field, which made this the
   only page on the site that opened dark; the overrides that went with it
   (paper tag border, muted-on-ink lede, paper input border) are gone with it.
   The headline shares the homepage's ramp rather than running four steps
   larger. */
.scan-hero-inner h1 {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 20px 0 16px;
  max-width: 18ch;
}
.scan-lede {
  color: hsl(var(--ink-muted));
  font-size: 17px;
  max-width: 52ch;
}
.scan-hero .scan-form button {
  background: hsl(var(--pop));
  color: hsl(var(--ink));
  border-color: hsl(var(--pop));
}

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

.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: var(--rule-width) solid 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: var(--rule-width) solid hsl(var(--ink));
  cursor: pointer;
}

/* ---------- landing: what we check ---------- */
/* Four parallel checks, as ruled rows rather than a 2x2 of bordered cards.
   The label is the check's own category, which is why it earns the left
   column — the same shape the homepage's four steps use. */
.checks-list { display: flex; flex-direction: column; }
.check-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px 40px;
  padding-block: 28px;
  border-top: 1px solid hsl(var(--hairline));
  align-items: start;
}
.check-row:last-child { border-bottom: 1px solid hsl(var(--hairline)); }
.check-row > * { min-width: 0; }
.check-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--ink-muted));
  margin-top: 5px;
}
.check-row h3 {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.check-row p {
  font-size: 15px;
  line-height: 1.55;
  color: hsl(var(--ink-muted));
  max-width: 62ch;
}

/* ---------- landing: example scorecard ---------- */
.scan-example { max-width: 860px; }

/* ---------- landing: bridge to the product ---------- */
/* On paper. It was an ink band, which was the old system's way of marking a
   closing pitch; the tag and the outline button carried paper overrides for it
   and no longer need them. */
.scan-bridge-copy {
  font-size: 17px;
  line-height: 1.6;
  color: hsl(var(--ink-muted));
  max-width: 62ch;
  margin: 0 0 28px;
}
.scan-bridge-ctas {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.scan-bridge-note { display: block; }

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

.scan-head {
  display: flex;
  align-items: center;
  gap: 24px;
  border: var(--rule-width) solid hsl(var(--ink));
  background: hsl(var(--paper));
  padding: 24px;
  margin-bottom: 28px;
}

/* Named tier (Basic / Good / Strong) — matches the in-app tier (decision #8). */

/* The scanned domain is the Scorecard's <h1> (and a plain div in the example
   scorecard on /scan). Machine string, so it is set in mono — which means it
   must opt out of the global `h1,h2,h3` tracking of -0.02em; font-family and
   font-weight here already outrank that rule on specificity. The universal
   reset zeroes the UA heading margin, so no margin is needed either. */
.scan-domain {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: normal;
  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: var(--rule-width) 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: var(--rule-width) 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; }

/* ---------- scorecard CTA ---------- */
.scan-cta {
  margin-top: 32px;
  border: var(--rule-width) solid hsl(var(--ink));
  background: hsl(var(--ink));
  color: hsl(var(--paper));
  padding: 28px;
}
.scan-cta h2 { font-family: var(--font-sans); font-weight: 700; 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: var(--rule-width) solid hsl(var(--pop));
}
.scan-cta a.cta-btn.is-soon { opacity: 0.55; pointer-events: none; box-shadow: none; }

/* ---------- responsive ---------- */
@media (max-width: 719px) {
  .check-row { grid-template-columns: 1fr; gap: 10px; padding-block: 24px; }
  .check-label { margin-top: 0; }
  .scan-head { flex-direction: column; align-items: flex-start; }
}