/* Verified-receipt component — the site's signature evidence frame.
   Every screenshot, demo, or metric that backs a claim renders inside one of
   these so proof is visually recognizable across pages. Uses the global
   tokens from styles.css (falls back to literals when loaded standalone). */

.receipt {
  background: var(--bg, #ffffff);
  border: 1px solid var(--line-strong, #c7d0dc);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 22, 36, 0.04), 0 8px 24px -18px rgba(16, 22, 36, 0.25);
}

.receipt-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  background: var(--surface, #f6f7f9);
  border-bottom: 1px solid var(--line, #dfe5ec);
}

.receipt-dots {
  display: flex;
  gap: 5px;
  flex: none;
}

.receipt-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong, #c7d0dc);
}

.receipt-url {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: var(--muted, #627083);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

.receipt-body {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface, #f6f7f9);
}

.receipt-body img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}

/* Terminal / JSON receipts render as styled text, not screenshots */
.receipt-body.receipt-code {
  aspect-ratio: auto;
  background: #131a21;
  padding: 18px 20px;
}

.receipt-code pre {
  margin: 0;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: #c9d4dd;
  white-space: pre-wrap;
  word-break: break-word;
}

.receipt-code .rk { color: #7fb3a3; }      /* keys */
.receipt-code .rv { color: #d8b078; }      /* values */
.receipt-code .rh { color: #e8927c; }      /* highlight: the failure/fallback lines */

.receipt-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--line, #dfe5ec);
  font-size: 13px;
  color: var(--muted, #627083);
  line-height: 1.5;
}

.receipt-chip {
  flex: none;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #2f6f73);
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 3px 8px;
  text-decoration: none;
  white-space: nowrap;
}

.receipt-chip:hover {
  background: var(--surface-strong, #eef3f1);
}

/* Stat receipts: tabular numerals with labels above */
.receipt-stat {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .receipt-caption { flex-direction: column; gap: 6px; }
}