/*
 * Styles for /verify.html only. This file lives under /js/verify/ rather than
 * /css/ because the verifier is a self-contained unit (page, modules, styles,
 * vectors ship together) and the site's CSP has no 'unsafe-inline' — a
 * <style> block would be blocked, and /css/site.css belongs to the site-wide
 * design pass. Everything here is design tokens from /css/tokens.css.
 */

.vform {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.vform__row {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .vform__row--split {
    grid-template-columns: 1fr 1fr;
  }
}

.vfield {
  display: grid;
  gap: var(--space-1);
}

.vfield label {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.vfield .vfield__hint {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.vfield input,
.vfield select {
  font-family: var(--font-numeric);
  font-variant-numeric: var(--numeric);
  font-size: var(--text-body);
  color: var(--text-primary);
  background: var(--surface-sunken);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  min-height: 44px;
  width: 100%;
}

.vfield input::placeholder {
  color: var(--text-muted);
}

.vfield input:focus-visible,
.vfield select:focus-visible {
  outline: var(--border-thick) solid var(--focus-ring);
  outline-offset: 2px;
}

.vform .btn {
  justify-self: start;
}

/* ------------------------------------------------------------- results */

.vout {
  display: none;
  margin-top: var(--space-4);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  padding: var(--space-4);
}

.vout.is-shown {
  display: block;
}

.vout > * + * {
  margin-top: var(--space-3);
}

.vrow {
  display: grid;
  gap: var(--space-1);
}

.vrow dt {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.vrow dd {
  margin: 0;
  font-family: var(--font-numeric);
  font-variant-numeric: var(--numeric);
  font-size: var(--text-label);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

/* Verdict lines. Green is proof, red is a mismatch, gold is "cannot say". */
.verdict {
  display: inline-block;
  font-weight: 700;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}

.verdict--ok {
  color: var(--win);
  background: var(--win-subtle);
}

.verdict--bad {
  color: var(--loss);
  background: var(--loss-subtle);
}

.verdict--warn {
  color: var(--pending);
  background: var(--pending-subtle);
}

.verror {
  color: var(--loss);
  font-size: var(--text-body);
}

/* ------------------------------------------------------------- progress */

.vprogress {
  display: none;
  margin-top: var(--space-3);
}

.vprogress.is-shown {
  display: block;
}

.vprogress__track {
  height: 6px;
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-overlay);
  overflow: hidden;
}

.vprogress__fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width var(--dur-fast) linear;
}

.vprogress__text {
  margin-top: var(--space-1);
  font-family: var(--font-numeric);
  font-variant-numeric: var(--numeric);
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* ------------------------------------------------------------- self-test */

.vtests {
  margin-top: var(--space-4);
  display: none;
}

.vtests.is-shown {
  display: block;
}

.vtests li {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: var(--border-hairline) solid var(--border-subtle);
  list-style: none;
}

.vtests ul {
  margin: 0;
  padding: 0;
}

.vtests .vtests__name {
  font-size: var(--text-label);
  color: var(--text-secondary);
}

.vtests .vtests__detail {
  font-family: var(--font-numeric);
  font-size: var(--text-caption);
  color: var(--loss);
  overflow-wrap: anywhere;
}

.vtests__summary {
  margin-top: var(--space-3);
  font-weight: 600;
}

/* Games-registry list on the honesty card. */
.vregistry {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}