/* verify.html's own components, on the site's sheet (site.css).
   A file rather than a <style> block: the Content-Security-Policy
   (csp.mjs) allows this origin's stylesheets and no inline ones. */
/* This page's own components, on the site's sheet (site.css). The column
   inside the shared 1160 frame stays a comfortable measure: this page is
   one form and its verdict. Not `.col` — site.css uses that name. */
.vcol{max-width:820px;margin:0 auto}
.vcol .hero{padding:56px 0 8px}
.vcol .hero h1{font-size:46px}
.card{margin-top:22px;padding-top:14px;border-top:2px solid var(--ink)}
.card h2{font:400 italic 24px/1.2 var(--serif);margin:16px 0 6px}
.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--ink)}
.tabs button{position:relative;border:0;padding:10px 0 11px;text-align:left;font:400 italic 21px/1 var(--serif);
  letter-spacing:0;text-transform:none;color:var(--ink-2);background:none}
.tabs button + button{padding-left:14px;border-left:1px solid var(--hair)}
.tabs button:hover:not(:disabled){background:none;color:var(--ink)}
.tabs button.on{color:var(--ink)}
.tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--red)}
textarea{min-height:150px;resize:vertical;line-height:1.6;font-size:12.5px}
#run{width:100%;margin-top:16px}
.verdict{margin-top:20px;font-size:15px;font-weight:600}
.verdict.ok{border-color:rgba(47,107,69,.35);border-left-color:var(--ok);background:var(--ok-wash);color:var(--ok)}
.verdict.bad{border-color:rgba(181,48,28,.35);border-left-color:var(--red);background:var(--red-wash);color:var(--red-t)}
/* The receipt's story, as steps. `.vflow`, not `.steps`: site.css owns that name. */
.vflow{display:block;margin:16px 0 4px;border-left:2px solid var(--hair-3);padding-left:16px}
.vflow .step{position:relative;padding:11px 0}
.vflow .step + .step{border-top:1px solid var(--hair)}
.vflow .step::before{content:"";position:absolute;left:-21px;top:18px;width:8px;height:8px;background:var(--red)}
.vflow .st{font:500 10.5px/1.3 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2)}
.vflow .sv{font:400 14px/1.45 var(--mono);color:var(--ink);margin-top:4px;overflow-wrap:anywhere}
.vflow .sn{font:400 italic 15px/1.45 var(--serif);color:var(--ink-2);margin-top:4px}
.lines{margin-top:16px}
.lines .l{justify-content:flex-start}
.lines .k{flex:0 0 160px;text-transform:none;letter-spacing:0;font:400 13.5px var(--sans);color:var(--ink-2)}
.lines .v{flex:1;min-width:0;overflow-wrap:anywhere;text-align:left}
/* A problem names hashes and addresses, so it must break inside a word. */
ul.problems{margin:14px 0 0;padding-left:20px;color:var(--red-t);font-size:13.5px;overflow-wrap:anywhere;line-height:1.6}
ul.problems li+li{margin-top:7px}
.trust{margin-top:36px;padding-top:14px;border-top:1px solid var(--ink)}
.trust h3{margin:0 0 8px;font:400 italic 22px/1.2 var(--serif)}
.trust p{margin:0 0 10px;font-size:14px;color:var(--ink-2);line-height:1.62}
.trust pre{margin:0;overflow-x:auto;white-space:pre}
@media (max-width:760px){.vcol .hero h1{font-size:32px}.lines .k{flex-basis:110px}}
