:root {
  --ink: #0a2e38;
  --ink-soft: #334155;
  --muted: #64748b;
  --accent: #14b8a6;
  --accent-deep: #0f766e;
  --paper: #ffffff;
  --mist: #f1f5f9;
  --wash: #f0fdfa;
  --line: #e2e8f0;
  --pass: #166534; --pass-bg: #dcfce7;
  --warn: #92400e; --warn-bg: #fef3c7;
  --fail: #991b1b; --fail-bg: #fee2e2;
  --unknown: #475569; --unknown-bg: #e2e8f0;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e6f4f1; --ink-soft: #cbd5e1; --muted: #94a3b8; --accent: #2dd4bf; --accent-deep: #5eead4;
    --paper: #0b1f26; --mist: #10303a; --wash: #0f2d33; --line: #1f4650;
    --pass: #86efac; --pass-bg: #14532d; --warn: #fcd34d; --warn-bg: #78350f; --fail: #fca5a5; --fail-bg: #7f1d1d;
    --unknown: #cbd5e1; --unknown-bg: #1f4650;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink-soft); font: 400 1rem/1.6 var(--sans); }
a { color: var(--accent-deep); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 0; }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem max(16px, calc((100% - 760px) / 2)); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .6rem; font: 700 1.05rem var(--sans); color: var(--ink); text-decoration: none; letter-spacing: .01em; }
.mark { width: 1.35rem; height: 1.35rem; border-radius: 6px; background: linear-gradient(135deg, var(--ink) 0 55%, var(--accent) 55%); }
.bar-note { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Text from a stranger's site can be one very long word; it wraps instead of widening the page. */
main, .finding, .notice, h1, h2, h3, .meta { overflow-wrap: anywhere; }
main { max-width: 760px; margin: 0 auto; padding: 2.5rem 16px 3rem; outline: none; }
h1 { font: 700 clamp(1.9rem, 5vw, 2.6rem)/1.15 var(--serif); color: var(--ink); margin: 0 0 1rem; text-wrap: balance; }
h2 { font: 700 1.35rem/1.25 var(--serif); color: var(--ink); margin: 2.25rem 0 .75rem; text-wrap: balance; }
h3 { font: 700 1.05rem/1.3 var(--sans); color: var(--ink); margin: 0; }
.lede { font-size: 1.125rem; max-width: 60ch; margin: 0 0 1.75rem; }
.small { font-size: .875rem; color: var(--muted); }

form.check { display: grid; gap: .75rem; background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
label { font-weight: 600; color: var(--ink); display: block; margin-bottom: .3rem; }
input[type="text"], input[type="email"], input[type="url"] {
  width: 100%; font: inherit; padding: .75rem .85rem; border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink);
}
input:focus-visible { border-color: var(--accent); outline-offset: 0; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.row > .grow { flex: 1 1 260px; }
button, .button {
  font: 700 1rem var(--sans); padding: .8rem 1.4rem; border-radius: 8px; border: 0; cursor: pointer; background: var(--ink); color: var(--paper);
  text-decoration: none; display: inline-block; transition: background .15s;
}
button:hover:not(:disabled), .button:hover { background: var(--accent-deep); color: #fff; }
button:disabled { opacity: .55; cursor: not-allowed; }
button.quiet { background: transparent; color: var(--accent-deep); border: 1.5px solid var(--line); }
.hint { font-size: .85rem; color: var(--muted); margin: 0; }
.turnstile { min-height: 65px; }

.notice { border-radius: var(--radius); padding: .9rem 1.1rem; border: 1px solid var(--line); background: var(--mist); margin: 1rem 0; }
.notice.error { background: var(--fail-bg); border-color: var(--fail); color: var(--fail); }
.notice.good { background: var(--pass-bg); border-color: var(--pass); color: var(--pass); }
.notice p { margin: 0; }
.notice p + p { margin-top: .4rem; }

.scanning { display: flex; gap: 1rem; align-items: center; margin: 1.5rem 0; }
.spinner { width: 1.4rem; height: 1.4rem; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } button { transition: none; } }

.score-card { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 1.25rem 0; background: var(--paper); }
.score { font: 700 3.25rem/1 var(--serif); color: var(--ink); min-width: 4.5rem; text-align: center; }
.score small { display: block; font: 600 .75rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: .35rem; }
.band { font: 700 1.2rem var(--serif); color: var(--ink); margin: 0 0 .25rem; }
.meter { height: 8px; background: var(--mist); border-radius: 99px; overflow: hidden; margin-top: .6rem; }
.meter > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
@media (max-width: 480px) { .score-card { grid-template-columns: 1fr; text-align: left; } .score { text-align: left; } }

ul.findings { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.finding { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; background: var(--paper); }
.finding header { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.finding p { margin: .4rem 0 0; }
.finding ul.evidence { margin: .6rem 0 0; padding: 0; list-style: none; display: grid; gap: .25rem; }
.finding ul.evidence li { font: .85rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--mist); color: var(--ink-soft); padding: .3rem .55rem; border-radius: 6px; overflow-wrap: anywhere; }
.pill { font: 700 .72rem var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 99px; white-space: nowrap; }
.pill.pass { color: var(--pass); background: var(--pass-bg); }
.pill.warn { color: var(--warn); background: var(--warn-bg); }
.pill.fail { color: var(--fail); background: var(--fail-bg); }
.pill.unknown { color: var(--unknown); background: var(--unknown-bg); }

.unlock { background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; margin: 1.5rem 0; display: grid; gap: .75rem; }
.checks-hidden { color: var(--muted); }
.meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .875rem; color: var(--muted); margin: 0 0 1rem; }
.check-row { display: flex; gap: .6rem; align-items: flex-start; }
.check-row input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--accent-deep); }
.check-row label { font-weight: 400; margin: 0; }

.foot { border-top: 1px solid var(--line); padding: 1.5rem max(16px, calc((100% - 760px) / 2)); color: var(--muted); font-size: .85rem; }
.foot p { margin: 0 0 .5rem; max-width: 70ch; }
.noscript { padding: 1rem; background: var(--warn-bg); color: var(--warn); margin: 0; }

/* Document pages (privacy, terms, about). */
.doc h1 { margin-bottom: .25rem; }
.doc .lede { margin-top: 1rem; }
.doc ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.doc li { margin: .4rem 0; max-width: 68ch; }
.doc p { max-width: 68ch; margin: 0 0 1rem; }
.doc code, .doc .code { font: 500 .9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--mist); border-radius: 5px; padding: .1em .35em; }
.doc .code { display: block; padding: .8rem 1rem; margin: 0 0 1rem; overflow-x: auto; white-space: pre; }

.flush { margin-top: 0; margin-bottom: 0; }
.unlock h2.flush { margin-bottom: .25rem; }

.score-card.noscore { grid-template-columns: 1fr; background: var(--mist); }