/* proof.html — gate demo, zero-requests widget, claims grid, terminal */

.proof-hero {
  padding-top: clamp(4.5rem, 10vw, 7.5rem);
}

/* ---------- gate demo ---------- */

.gate {
  transition: box-shadow 300ms var(--ease-micro), border-color 300ms var(--ease-micro);
}
.gate.refusing {
  border-color: rgba(var(--refuse-rgb), 0.45);
  box-shadow: var(--glow-refuse);
}

.gate-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--muted);
}
.gate-head strong {
  font-weight: 600;
  color: var(--ink);
}
.gate-head .btn-mini {
  margin-left: auto;
}

.gate-rows {
  list-style: none;
  min-height: 16.5rem;
  padding: 0.6rem 0;
  overflow: hidden;
}
.grow {
  display: grid;
  grid-template-columns: 4.2rem 1fr 7.5rem 7rem 1.4rem;
  gap: 1rem;
  align-items: baseline;
  padding: 0.45rem 0.6rem;
  font-size: 0.9rem;
  border-radius: 8px;
  color: var(--muted);
}
html.js .gate:not(.is-static) .grow {
  animation: growIn 380ms var(--ease-reveal);
}
@keyframes growIn {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
}
.gr-date {
  color: var(--faint);
}
.gr-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gr-amt,
.gr-bal {
  text-align: right;
  color: var(--ink);
}
.grow.checking {
  background: rgba(var(--accent-rgb), 0.05);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.25);
}
.grow.passed .gr-tick {
  color: var(--accent);
}
.grow.refused {
  background: rgba(var(--refuse-rgb), 0.07);
  box-shadow: inset 0 0 0 1px rgba(var(--refuse-rgb), 0.35);
  color: var(--ink);
}
.grow.refused .gr-tick,
.grow.refused .gr-bal {
  color: var(--refuse);
}

.gate-banner {
  display: none;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--refuse);
  background: rgba(var(--refuse-rgb), 0.09);
  border: 1px solid rgba(var(--refuse-rgb), 0.35);
}
.gate.refusing .gate-banner,
.gate.is-static .gate-banner {
  display: block;
}

.gate-note {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: 0.95rem;
  text-wrap: pretty;
}

/* ---------- zero-requests widget ---------- */

.zr-copy {
  color: var(--muted);
  margin-top: 1.2rem;
  text-wrap: pretty;
}

.zr {
  font-size: 0.95rem;
}
.zr-row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.zr-row span:last-child {
  color: var(--ink);
}
.zr-row.zr-key span:last-child {
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}
.zr.busted .zr-row.zr-key span:last-child {
  color: var(--refuse);
}
.zr.busted {
  border-color: rgba(var(--refuse-rgb), 0.45);
  box-shadow: var(--glow-refuse);
}
.zr-oath {
  margin-top: 1.1rem;
  color: var(--faint);
  font-size: 0.82rem;
}

/* ---------- claims grid ---------- */

.claims-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* ---------- terminal ---------- */

.term {
  padding: 0;
  overflow: hidden;
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(var(--deep-rgb), 0.5);
}
.term-bar .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--line-2);
}
.term-bar .dot:first-child {
  background: rgba(var(--refuse-rgb), 0.7);
}
.term-bar .dot:nth-child(2) {
  background: rgba(var(--warn-rgb), 0.7);
}
.term-bar .dot:nth-child(3) {
  background: rgba(var(--accent-rgb), 0.7);
}
.term-title {
  margin-left: 8px;
  font-size: 0.8rem;
  color: var(--faint);
}
.term-bar .btn-mini {
  margin-left: auto;
}

.term-body {
  padding: 18px 20px 22px;
  font-size: 0.88rem;
  line-height: 1.75;
  min-height: 16rem;
}
.tl {
  display: block;
  white-space: pre;
  overflow-x: auto;
  color: var(--muted);
}
.tl.cmd {
  color: var(--ink);
}
.tl.warn {
  color: var(--warn);
}
.tl.hide {
  display: none;
}
html.js .term.typing .tl.cmd::after {
  content: "▮";
  color: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}

@media (max-width: 820px) {
  .grow {
    grid-template-columns: 3.4rem 1fr 6rem 1.2rem;
    font-size: 0.8rem;
  }
  .grow .gr-bal {
    display: none;
  }
  .gate-rows {
    min-height: 14rem;
  }
}