/* Latch: the verify page. Builds on style.css (nav, sections, .kv, .check, .btn, .seg); only what that page lacks. */
.nav .brand img { display: block; }
.vhero { border-top: 0; padding-top: 40px; }
.vhero h1 { font-size: clamp(34px, 6vw, 56px); line-height: 1.04; margin-bottom: 18px; }
.vrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 22px 0 0; }
.vrow .ghost { height: 38px; padding: 0 18px; border-radius: 19px; }
.vrow .ghost:hover { text-decoration: none; }
.vcheck { grid-template-columns: minmax(0, 1fr) auto; margin-top: 20px; }
.vout { margin: 18px 0 0; max-width: 900px; }
.vout:empty { display: none; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; color: var(--ink); }

.vlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.vlist li { display: grid; gap: 3px; padding: 11px 0 11px 22px; border-bottom: 1px solid var(--row); position: relative; }
.vlist li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--led); box-shadow: 0 0 8px var(--led); }
.vlist li.bad::before { background: var(--red); box-shadow: 0 0 8px var(--red); }
.vlist b { font-weight: 500; font-size: 14.5px; color: var(--ink); }
.vlist span { font-size: 13.5px; color: var(--body); line-height: 1.5; }

.verdict { margin: 16px 0 14px; font-size: 17px; line-height: 1.45; }
.verdict.ok { color: var(--ink); } .verdict.ok::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 10px 2px 0; border-radius: 50%; background: var(--led); box-shadow: 0 0 8px var(--led); }
.verdict.bad { color: var(--red); }
.verdict.unsure { color: var(--body); } .verdict.unsure::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 10px 2px 0; border-radius: 50%; border: 1px solid var(--mute); }
.vresult .kv > div { grid-template-columns: 150px minmax(0, 1fr); }
.vresult .verdict { margin-top: 0; }
.vwhat > div { grid-template-columns: 180px minmax(0, 1fr); }
.foot a { color: var(--mute); } .foot a:hover { color: var(--ink); }
@media (max-width: 640px) {
  .vresult .kv > div, .vwhat > div { grid-template-columns: 1fr; gap: 2px; }
  .vhero { padding-top: 24px; }
}