/* The Check page: a recipient's page, so it looks like the report it shows. */
:root {
  --paper: #ffffff; --ink: #17202b; --quiet: #5b6672; --rule: #d5d9de;
  --pass: #17603f; --pass-bg: #e8f3ec; --fail: #a1261d; --fail-bg: #fbeae8; --accent: #2d4fa3; --tint: #f3f6fb;
  --serif: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #14181d; --ink: #e6e9ed; --quiet: #9aa4ae; --rule: #2f363e; --pass: #6cc59a; --pass-bg: #16281f; --fail: #f08a80; --fail-bg: #2e1715; --accent: #8fa8ec; --tint: #1b222c; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--sans); }
main { max-width: 52rem; margin: 0 auto; padding: 2.5rem 1rem 4rem; }
.brand { font-weight: 650; letter-spacing: .01em; color: var(--quiet); margin: 0 0 2rem; }
h1 { font-family: var(--serif); font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.1; margin: 0 0 .75rem; }
.lede { font-size: 1.1rem; max-width: 40rem; margin: 0 0 2rem; }
code { font-size: .88em; }
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-height: 13rem; border: 2px dashed var(--rule); border-radius: 14px; background: var(--tint); cursor: pointer; text-align: center; padding: 1.5rem; transition: border-color .15s, background .15s; }
.drop .big { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.drop span:not(.big) { color: var(--quiet); }
.drop.over { border-color: var(--accent); }
.drop.done { min-height: 0; padding: .9rem; }
.drop.done .big { font-size: 1.1rem; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.link { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.drop:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
details { margin: 1rem 0; }
summary { cursor: pointer; color: var(--accent); }
.pin { display: block; margin-top: .6rem; }
.pin span { display: block; color: var(--quiet); font-size: .92rem; margin-bottom: .3rem; }
.pin input { width: 100%; font: .92rem ui-monospace, Menlo, Consolas, monospace; padding: .5rem .6rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); }
#status { padding: .75rem 1rem; border-left: 4px solid var(--rule); margin: 1.25rem 0 .75rem; }
#status.pass { border-color: var(--pass); background: var(--pass-bg); }
#status.fail, #status.problem { border-color: var(--fail); background: var(--fail-bg); }
#again { font: inherit; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 8px; padding: .45rem .9rem; cursor: pointer; }
#report { width: 100%; height: 80vh; border: 1px solid var(--rule); border-radius: 10px; margin-top: .75rem; background: #fff; }
footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--quiet); font-size: .92rem; }
@media (prefers-reduced-motion: reduce) { .drop { transition: none; } }
.brand a { color: inherit; text-decoration: none; }