/* ============================================================================
   agent.css — the "explicit data" proof sheet. Deliberately plain and dense:
   this page is for an AI agent verifying facts, not a human being marketed to.
   ============================================================================ */
:root {
  --ink: #0b0d10;
  --mut: #5b626b;
  --faint: #8a919b;
  --line: #e3e6ea;
  --bg: #ffffff;
  --panel: #f7f8fa;
  --ok: #087443;
  --ok-bg: #e7f4ec;
  --accent: #1c2a3a;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.ds { max-width: 880px; margin: 0 auto; padding: 28px 26px 80px; }
a { color: #0b5fb0; text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); }

/* header */
.ds-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 12px; flex-wrap: wrap; }
.ds-mark { font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.ds-mark b { color: var(--accent); }
.badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; padding: 5px 11px; border-radius: 4px; border: 1px solid var(--line); }
.badge.valid { color: var(--ok); background: var(--ok-bg); border-color: #bfe3cd; }
.badge.valid::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.badge.demo { color: #8a5a00; background: #fbf3e2; border-color: #efdcb0; }

.ds-h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin: 22px 0 4px; }
.ds-sub { color: var(--mut); font-size: 14px; margin: 0 0 4px; max-width: 66ch; }
.ds-id { font-family: var(--mono); font-size: 12.5px; color: var(--faint); margin-top: 6px; }
.ds-id b { color: var(--ink); }

/* section */
.ds-sec { margin-top: 30px; }
.ds-label { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 12px; }

/* key/value grid */
.kvs { display: grid; grid-template-columns: 180px 1fr; gap: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.kvs > div { padding: 9px 13px; border-bottom: 1px solid var(--line); }
.kvs > div:nth-child(4n+1), .kvs > div:nth-child(4n+2) { background: var(--panel); }
.kvs .k { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--mut); }
.kvs .v { font-family: var(--mono); font-size: 12.5px; color: var(--ink); word-break: break-all; }
.kvs .v.ok { color: var(--ok); }
@media (max-width: 620px) { .kvs { grid-template-columns: 120px 1fr; } }

/* callout */
.callout { border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--panel); border-radius: 4px; padding: 13px 15px; font-size: 13.5px; color: var(--ink); }
.callout b { color: var(--ink); }
.callout.demo { border-left-color: #cf9a2f; }

/* stats */
.ds-stats { display: flex; gap: 34px; flex-wrap: wrap; }
.ds-stat .n { font-family: var(--mono); font-size: 22px; font-weight: 500; }
.ds-stat .l { color: var(--mut); font-size: 12px; max-width: 200px; }

/* table */
table.ds-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ds-table th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--faint); padding: 8px 10px; border-bottom: 1.5px solid var(--ink); }
.ds-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.ds-table tr:nth-child(even) td { background: var(--panel); }
.ds-table .co { font-weight: 600; }
.ds-table .co::before { content: "✓ "; color: var(--ok); }
.ds-table .num { font-family: var(--mono); color: var(--mut); white-space: nowrap; }
.ds-table .out { font-family: var(--mono); color: var(--ok); font-weight: 500; }

/* verify */
.verify-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.btn { font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 5px; border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; }
.btn:hover { opacity: .9; }
/* id-based so styling survives verify.js swapping className */
#verify-result { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; padding: 5px 11px; border-radius: 4px; border: 1px solid var(--line); color: var(--faint); }
#verify-result.ok { color: var(--ok); background: var(--ok-bg); border-color: #bfe3cd; }
#verify-result.bad { color: #c0392b; background: #fbeaea; border-color: #f0c4c4; }
#verify-result.pending { color: var(--faint); }

pre.code, pre.ds-json { font-family: var(--mono); font-size: 12px; line-height: 1.6; background: #0d1117; color: #d6dee8; border-radius: 6px; padding: 15px 16px; overflow: auto; }
pre.code .c { color: #7d8794; }
pre.code .t { color: #7ee2b8; }
pre.ds-json { max-height: 460px; }

.ds-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--mono); font-size: 12.5px; }
.ds-foot { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; line-height: 1.6; }
.ds-foot b { color: var(--mut); }
ul.ds-list { margin: 0; padding-left: 18px; color: var(--ink); font-size: 13.5px; }
ul.ds-list li { margin: 5px 0; }