/* witness.css — orchestrator page, layered on site.css. */

/* Lane tokens — the single source for the price cards AND the flow diagram.
   Acceptance (witness-page.md §3.3): diagram colors must match the cards by
   computed style, never near-matched. Derived from the site layer palette. */
:root {
  --lane-a: var(--cyan);
  --lane-b: var(--magenta);
}

.witness-header {
  padding: 7rem 0 2.5rem;
  text-align: center;
}

.witness-header p {
  max-width: 46rem;
  margin: 0.75rem auto 0;
  color: rgba(255, 255, 255, 0.72);
}

.witness-section {
  padding: 1.5rem 0;
}

.witness-section h2 {
  text-align: center;
  margin-bottom: 1.25rem;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  max-width: 52rem;
  margin: 0 auto;
}

.lane-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.03);
}

/* Lane identity — same vocabulary as /wall (Lane A = HBAR topic, Lane B = KEY topic). */
.lane-card-a { border-top: 2px solid color-mix(in oklch, var(--lane-a) 70%, transparent); }
.lane-card-b { border-top: 2px solid color-mix(in oklch, var(--lane-b) 70%, transparent); }
.lane-eyebrow {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
}
.lane-card-a .lane-eyebrow { color: var(--lane-a); }
.lane-card-b .lane-eyebrow { color: var(--lane-b); }

.lane-card h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.lane-fee { font-family: 'Roboto Mono', monospace; font-size: 1.05rem; color: oklch(0.85 0.16 85); margin: 0.25rem 0; }
.lane-topic, .lane-note { font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); margin: 0.35rem 0; }
.lane-topic a { color: oklch(0.75 0.15 200); }

/* Identifiers render as-published: override site.css's global code/pre
   uppercase + letter-spacing (same contract as .derivation on /helloworld —
   the bytes shown must be the bytes a reader checks). */
.lane-topic code,
#vending-terms code,
#verify-result code {
  text-transform: none;
  letter-spacing: normal;
}
#vending-terms code { font-size: 0.9em; color: rgba(255, 255, 255, 0.85); }

#vending-terms {
  max-width: 52rem;
  margin: 1.25rem auto 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
  border-left: 2px solid oklch(0.68 0.19 285 / 0.6);
  padding: 0.85rem 1.1rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0 8px 8px 0;
}
#vending-terms p { margin: 0 0 0.6rem; line-height: 1.65; }
#vending-terms p:last-child { margin-bottom: 0; }

.peg-note { font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); }

.verify-widget {
  max-width: 40rem;
  margin: 0 auto;
  display: flex;
  gap: 0.6rem;
}

.verify-widget input {
  flex: 1;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.9rem;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
}

.verify-widget button {
  font-family: 'Roboto Mono', monospace;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  border: 1px solid oklch(0.75 0.15 200 / 0.6);
  background: oklch(0.75 0.15 200 / 0.12);
  color: #fff;
  cursor: pointer;
}

#verify-result {
  max-width: 40rem;
  margin: 1rem auto 3rem;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  word-break: break-all;
}

.verdict { font-size: 1.1rem; font-weight: 700; }
.verdict-valid { color: oklch(0.8 0.14 145); }
.verdict-invalid { color: oklch(0.7 0.19 25); }
.verdict-rejection { color: oklch(0.78 0.14 60); }
#verify-result a { color: oklch(0.75 0.15 200); }

/* ---- Flow diagram (witness-page.md §1) ----
   Inline SVG generated by witness.js from the published payment requirements —
   no ID literals in the markup (W-6 spirit applied to documentation).
   SVG text takes these classes, so the global site.css code/pre uppercase
   rule never touches it. */
.flow-diagram { max-width: 44rem; margin: 0 auto; }
.flow-diagram svg { display: block; width: 100%; height: auto; }
.flow-diagram text { font-family: 'Roboto Mono', monospace; }
.fd-container { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-dasharray: 5 6; }
.fd-lane-label { font-size: 13px; font-weight: 700; }
.fd-lane-label-a { fill: var(--lane-a); }
.fd-lane-label-b { fill: var(--lane-b); }
.fd-title { font-size: 13px; font-weight: 700; text-anchor: middle; }
.fd-sub { font-size: 11px; text-anchor: middle; }
.fd-box-n rect { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.22); }
.fd-box-n .fd-title { fill: rgba(255, 255, 255, 0.92); }
.fd-box-n .fd-sub { fill: rgba(255, 255, 255, 0.6); }
.fd-box-a rect { fill: color-mix(in oklch, var(--lane-a) 13%, transparent); stroke: color-mix(in oklch, var(--lane-a) 55%, transparent); }
.fd-box-a .fd-title { fill: var(--lane-a); }
.fd-box-a .fd-sub { fill: color-mix(in oklch, var(--lane-a) 78%, white 22%); }
.fd-box-b rect { fill: color-mix(in oklch, var(--lane-b) 13%, transparent); stroke: color-mix(in oklch, var(--lane-b) 55%, transparent); }
.fd-box-b .fd-title { fill: var(--lane-b); }
.fd-box-b .fd-sub { fill: color-mix(in oklch, var(--lane-b) 78%, white 22%); }
.fd-arrow { fill: none; stroke: rgba(255, 255, 255, 0.38); stroke-width: 1.5; marker-end: url(#fd-arr); }
.fd-leader { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-dasharray: 3 4; }
.fd-note { font-size: 11px; fill: rgba(255, 255, 255, 0.55); text-anchor: middle; }

/* ---- Verify-widget explainer (witness-page.md §2 — copy is verbatim) ---- */
.verify-explainer {
  max-width: 40rem;
  margin: 0 auto 1.5rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}
.verify-explainer h3 { font-size: 0.95rem; margin: 1.1rem 0 0.35rem; color: rgba(255, 255, 255, 0.9); }
.verify-explainer h3:first-child { margin-top: 0; }
.verify-explainer p { margin: 0 0 0.75rem; }
.verify-explainer a { color: var(--cyan); }