/* The Verify page: the document demos' system, plus the evidence ladder,
   the attacks and one verdict large enough to read from across a room. */

.v-levels { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--cb-line); border-radius: 8px; overflow: hidden; }
.v-levels li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 16px; background: var(--cb-bg-1); }
.v-levels li + li { border-top: 1px solid var(--cb-line); }
.v-levels li b { font: 500 15px/1.3 var(--cb-sans); display: block; margin-bottom: 2px; color: var(--cb-ink); }
.v-levels li span { color: var(--cb-ink-2); font-size: 14px; }
.v-mark { width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; font: 600 12px var(--cb-mono); background: rgba(255, 255, 255, .06); color: var(--cb-ink-3); }
.v-mark.ok { background: var(--cb-ok-dim); color: var(--cb-ok); }
.v-mark.bad { background: var(--cb-bad-dim); color: var(--cb-bad); }
.v-mark.warn { background: var(--cb-warn-dim); color: var(--cb-warn); }
@media (prefers-reduced-motion: no-preference) { .v-mark { animation: v-pop .35s ease both; } }
@keyframes v-pop { from { opacity: 0; } }
.v-when { margin: 16px 0 0; padding: 12px 14px; border-radius: 6px; background: var(--cb-bg-1); border: 1px solid var(--cb-line); font: 13px var(--cb-mono); color: var(--cb-ink-2); }
.v-when b { color: var(--cb-ink); font-weight: 500; }

.v-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 22px; margin: 22px 0 16px; font-size: 14px;
  padding: 16px 18px; border-radius: 8px; background: var(--cb-bg-1); border: 1px solid var(--cb-line); }
.v-facts dt { font: 400 10.5px var(--cb-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--cb-ink-4); padding-top: 3px; }
.v-facts dd { margin: 0; font: 13.5px var(--cb-mono); overflow-wrap: anywhere; color: var(--cb-ink); }

.v-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: start; padding: 14px 16px; border: 1px solid var(--cb-line); border-radius: 8px; background: var(--cb-bg-1); }
.v-row h3 { margin: 0; font: 500 15px/1.3 var(--cb-sans); color: var(--cb-ink); }
.v-row p { margin: 5px 0 0; color: var(--cb-ink-2); font-size: 14px; overflow-wrap: anywhere; }
.v-row code { font: 12.5px var(--cb-mono); }

.v-button { display: inline-flex; align-items: center; gap: 8px; font: 500 14px var(--cb-sans); border-radius: 7px; padding: 11px 18px; background: var(--cb-ink);
  color: var(--cb-bg); text-decoration: none; transition: background .18s; }
.v-button::before { content: "↓"; font-family: var(--cb-mono); }
.v-button:hover { background: #fff; }

.v-limits { border-color: rgba(242, 184, 75, .25) !important; }
.v-limits .t-num { color: var(--cb-warn); background: var(--cb-warn-dim); border-color: rgba(242, 184, 75, .25); }
.v-limits ul { margin: 16px 0 0; padding-left: 20px; color: var(--cb-ink-2); display: grid; gap: 10px; max-width: 78ch; }
.v-limits li::marker { color: var(--cb-warn); }

/* Try to break it */
.v-attacks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.v-attacks button { background: transparent; color: var(--cb-ink); border-color: var(--cb-line-2); font-family: var(--cb-mono); font-size: 12.5px; }
.v-attacks button::before { content: "↯ "; color: var(--cb-bad); }
.v-attacks button:hover { border-color: rgba(255, 93, 99, .6); background: var(--cb-bad-dim); }
.v-attacks button.v-restore::before { content: "↺ "; color: var(--cb-ok); }
.v-attacks button.v-restore:hover { border-color: rgba(61, 220, 151, .6); background: var(--cb-ok-dim); }
.v-attacks button[aria-pressed="true"] { border-color: var(--cb-bad); background: var(--cb-bad-dim); }
.v-verdict { margin: 18px 0 0; padding: 20px 22px; border-radius: 8px; font: 600 clamp(17px, 2.2vw, 22px)/1.35 var(--cb-sans); letter-spacing: -.02em;
  background: var(--cb-bg-1); color: var(--cb-ink-2); overflow-wrap: anywhere; border: 1px solid var(--cb-line); transition: background .35s, color .35s, border-color .35s; }
.v-verdict small { display: block; margin-top: 8px; font: 400 12.5px/1.5 var(--cb-mono); letter-spacing: 0; color: inherit; opacity: .8; }
.v-verdict.ok { background: var(--cb-ok-dim); color: var(--cb-ok); border-color: rgba(61, 220, 151, .3); }
.v-verdict.bad { background: var(--cb-bad-dim); color: var(--cb-bad); border-color: rgba(255, 93, 99, .35); }
@media (prefers-reduced-motion: no-preference) { .v-verdict.bad { animation: v-shake .3s ease-out; } }
@keyframes v-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Would an ordinary log catch it? */
.v-compare { margin-top: 22px; overflow-x: auto; border: 1px solid var(--cb-line); border-radius: 8px; }
.v-compare .t-table th:last-child, .v-compare .t-table td:last-child { background: rgba(62, 224, 255, .04); }
.v-compare .t-table th:last-child { color: var(--cb-sig); }
.v-compare td small { font: 400 11.5px var(--cb-mono); color: var(--cb-ink-3); margin-left: 4px; }
.v-compare td:not(:first-child), .v-compare th:not(:first-child) { white-space: nowrap; }
.v-compare .pill { min-width: 24px; text-align: center; }

@media (max-width: 560px) {
  .v-levels li { grid-template-columns: 22px minmax(0, 1fr); }
  .v-levels li .pill { grid-column: 2; justify-self: start; }
  .v-row { grid-template-columns: minmax(0, 1fr); }
  .v-facts { grid-template-columns: minmax(0, 1fr); }
  .v-attacks button { flex: 1 1 calc(50% - 8px); padding-inline: 10px; }
  .v-compare td small { display: block; white-space: normal; margin: 4px 0 0; }
}