/*
 * PairRail v2 /verify: the live Verified Agent-Ready lookup, for sellers and buying agents.
 * The page's inline script renders into verify-* hooks (state pill data-state, trust checklist
 * is-pass / is-fail, endpoint rows, folds, embed tabs, "button button-outline-sm" copy buttons).
 * This file restyles those hooks on the quiet baseline; the script is unchanged.
 * Badge images come from /badge.svg (server-rendered) and are the product being explained.
 */

/* -- Lookup -- */
.pr-verify-lookup { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); max-width: 560px; margin-top: var(--space-6); }
.pr-verify-lookup .pr-field { flex: 1 1 260px; }
.pr-verify-lookup .pr-input { width: 100%; font-family: var(--font-mono); }
.pr-verify-lookup .pr-field > span { color: var(--color-ink); font-size: var(--type-small-size); font-weight: 500; }

/* Live example under the lookup: the demo seller's real badge, visible before anyone types. */
.verify-live-example { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); width: fit-content; max-width: 100%; margin-top: var(--space-4); border-radius: var(--radius-control); color: var(--color-ink-secondary); font-size: var(--type-note-size); line-height: var(--type-note-leading); text-decoration: none; }
.verify-live-example img { display: block; max-width: 100%; height: auto; }
.verify-live-example:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .verify-live-example:hover span { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; } }

/* -- Layout -- */
.verify-body { padding-bottom: var(--space-8); }
.verify-layout { display: grid; gap: var(--space-5); align-items: start; }
.verify-layout > * { min-width: 0; }
/* Before a lookup, the state list and the criteria sit side by side at equal height. */
@media (min-width: 1024px) { .verify-layout:has(#verify-result[hidden]) { align-items: stretch; } }
/* The card's own checklist shows the criteria once met; do not repeat them in the aside. */
.verify-criteria:has(#verify-criteria-actions:not([hidden])) ol { display: none; }
@media (min-width: 1024px) { .verify-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-7); } }
.verify-main { display: grid; gap: var(--space-5); min-width: 0; }

/* -- Result + empty cards -- */
.verify-card { display: grid; gap: var(--space-4); padding: var(--space-6); border: var(--hairline); border-radius: var(--radius-card); background: var(--color-canvas); min-width: 0; }
.verify-card[hidden] { display: none; }
.verify-card h2 { margin: 0; color: var(--color-ink); font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-leading); letter-spacing: var(--type-h3-tracking); overflow-wrap: anywhere; }
.verify-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.verify-card-head img { max-width: 100%; height: auto; }
.verify-state-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 var(--space-3); border: var(--hairline); border-radius: var(--radius-pill); background: var(--color-sunken); color: var(--color-ink); font: 500 var(--type-caption-size) / 1 var(--font-mono); text-transform: lowercase; }
/* Verified is the one positive state; it reads as ink-outlined (green is reserved). Stale/paused use the warning tone. */
.verify-state-pill[data-state="verified"] { border-color: var(--color-ink); background: var(--color-canvas); }
/* Display-only state: the API still says "verified" with plan.sandbox true. */
.verify-state-pill[data-state="sandbox"] { border-color: var(--badge-sandbox-border); background: var(--badge-sandbox-fill); color: var(--badge-sandbox); }
.verify-state-pill[data-state="stale"],
.verify-state-pill[data-state="paused"] { border-color: var(--color-approval-border); background: var(--color-warning-bg); color: var(--color-warning-text); }
.verify-state-pill[data-state="error"] { border-color: var(--color-blocked-border); background: var(--color-blocked-tint); color: var(--color-error-text); }
/* Seller name with the sample chip inline after it. */
.verify-seller-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.verify-seller-line h2 { min-width: 0; }
.verify-demo-note { display: inline-flex; }
.verify-demo-note[hidden] { display: none; }
.verify-meta,
.verify-checked { margin: 0; color: var(--color-ink-muted); font: var(--type-caption-size) / 18px var(--font-mono); overflow-wrap: anywhere; }
.verify-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-3); }
.verify-stats > * { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border: var(--hairline); border-radius: var(--radius-control); min-width: 0; }
.verify-stats span { color: var(--color-ink-muted); font-size: var(--type-caption-size); }
.verify-stats strong { color: var(--color-ink); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.verify-trust { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--hairline); }
.verify-trust[hidden] { display: none; }
.verify-trust h3 { margin: 0; color: var(--color-ink); font-size: var(--type-body-size); font-weight: 600; }
.verify-trust p { margin: 0; color: var(--color-ink-secondary); font-size: var(--type-note-size); line-height: var(--type-note-leading); }
.verify-trust-access { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .verify-trust-access { grid-template-columns: 1fr 1fr; } }
.verify-trust-access > div { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-subtle); }
.verify-trust-access span { display: block; margin-bottom: var(--space-1); color: var(--color-ink-muted); font: 500 var(--type-eyebrow-size) / var(--type-eyebrow-leading) var(--font-mono); letter-spacing: var(--type-eyebrow-tracking); text-transform: uppercase; }
.verify-trust-checklist,
.verify-reasons { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.verify-reasons[hidden] { display: none; }
.verify-trust-checklist li { color: var(--color-ink-secondary); font-size: var(--type-note-size); }
.verify-trust-checklist li.is-pass { color: var(--color-ink); }
.verify-trust-checklist li.is-fail { color: var(--color-ink-muted); }
.verify-reasons li { padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--color-warning-bg); color: var(--color-warning-text); font-size: var(--type-note-size); }

/* What you will see: badge states. */
.verify-states { display: grid; gap: var(--space-3); }
.verify-states > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding-block: var(--space-2); border-bottom: var(--hairline); }
.verify-states img { display: block; min-width: 0; max-width: 100%; height: auto; }
/* The badges are 390px wide; let the card and its grid shrink to the phone instead of pushing past it. */
.verify-states { grid-template-columns: minmax(0, 1fr); }
.verify-card { grid-template-columns: minmax(0, 1fr); }
.verify-states span { flex: 1 1 14em; color: var(--color-ink-secondary); font-size: var(--type-note-size); line-height: var(--type-note-leading); }
/* Dark: the badges themselves are the tinted variant (/badge.svg?theme=dark); each row's
   description picks up its state's bright text so meaning reads twice, never as a solid fill. */
:root[data-theme="dark"] .verify-states span { color: var(--tone-text); }
.verify-states > [data-tone="live"] { --tone-text: var(--color-live-text); }
.verify-states > [data-tone="sandbox"] { --tone-text: var(--badge-sandbox); }
.verify-states > [data-tone="approval"] { --tone-text: var(--color-approval-text); }
.verify-states > [data-tone="agent"] { --tone-text: var(--color-agent-text); }
.verify-states > [data-tone="neutral"] { --tone-text: var(--color-ink-secondary); }

/* Embed snippet: the page's one dark surface. */
.verify-embed { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--hairline); }
.verify-embed[hidden] { display: none; }
.verify-embed-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.verify-embed-head .pr-eyebrow { margin: 0; }
.verify-embed-tabs { display: inline-flex; flex-wrap: wrap; max-width: 100%; box-sizing: border-box; gap: 2px; padding: 3px; border: var(--hairline); border-radius: calc(var(--radius-control) + 3px); background: var(--color-subtle); }
.verify-embed-tabs button { min-height: 32px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-ink-secondary); font: 500 var(--type-small-size) / 1 var(--font-sans); cursor: pointer; }
.verify-embed-tabs button.is-active { background: var(--color-canvas); color: var(--color-ink); box-shadow: var(--shadow-chip); }
/* Dark: the selected tab lifts to the raised surface so it reads above the track. */
:root[data-theme="dark"] .verify-embed-tabs button.is-active { background: var(--color-raised); }
.verify-embed-tabs button:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
@media (max-width: 479.98px) { .verify-embed-tabs button { padding: 0 var(--space-2); } } /* four tabs on one row at 390px */
#verify-embed-code { margin: 0; padding: var(--space-4); max-height: 240px; overflow: auto; overscroll-behavior: contain; border-radius: var(--radius-control); background: var(--color-code-bg); color: var(--color-dark-text); font: var(--type-code-size) / 22px var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
#verify-embed-code:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* -- Criteria aside -- */
.verify-criteria { display: grid; gap: var(--space-3); padding: var(--space-5); border: var(--hairline); border-radius: var(--radius-card); background: var(--color-subtle); }
.verify-criteria .pr-eyebrow { margin: 0; }
.verify-criteria :is(h2, h3) { margin: 0; color: var(--color-ink); font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-leading); }
.verify-criteria ol { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); list-style: decimal; color: var(--color-ink-secondary); }
.verify-criteria-note { margin: 0; color: var(--color-ink-muted); font-size: var(--type-note-size); line-height: var(--type-note-leading); }
.verify-criteria-actions { display: grid; gap: var(--space-3); }
.verify-criteria-actions[hidden] { display: none; }
.verify-criteria-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Seller-facing footer: what the mark is and how to get it, apart from the buyer actions above. */
.verify-criteria-seller { display: grid; gap: var(--space-3); }
.verify-criteria-actions:not([hidden]) ~ .verify-criteria-seller { margin-top: var(--space-2); padding-top: var(--space-4); border-top: var(--hairline); }

/* -- For buying agents -- */
.verify-connect { padding-block: var(--space-9); border-top: var(--hairline); }
.verify-connect[hidden] { display: none; }
.verify-connect-inner { display: grid; gap: var(--space-6); }
.verify-connect-head h2 { margin: 0; color: var(--color-ink); font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); line-height: var(--type-h2-leading); letter-spacing: var(--type-h2-tracking); }
.verify-connect-head .pr-eyebrow { margin-bottom: var(--space-4); }
.verify-connect-lead { margin: var(--space-4) 0 0; max-width: 36em; color: var(--color-ink-secondary); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-leading); }
.verify-connect-grid { display: grid; gap: var(--space-4); }
@media (min-width: 1024px) { .verify-connect-grid { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Folding panels (details). */
.verify-fold { border: var(--hairline); border-radius: var(--radius-card); background: var(--color-canvas); min-width: 0; }
.verify-fold[hidden] { display: none; }
.verify-fold-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; }
.verify-fold-summary::-webkit-details-marker { display: none; }
.verify-fold-summary:focus-visible { outline: var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-card); }
.verify-fold-summary-main { display: grid; gap: 2px; min-width: 0; }
.verify-fold-summary-main strong { color: var(--color-ink); }
.verify-fold-hint { color: var(--color-ink-muted); font-size: var(--type-small-size); }
.verify-fold-summary-aside { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.verify-fold-toggle { color: var(--color-ink-secondary); font-size: var(--type-small-size); }
.verify-connect-kicker { margin: 0; color: var(--color-ink-muted); font: 500 var(--type-eyebrow-size) / var(--type-eyebrow-leading) var(--font-mono); letter-spacing: var(--type-eyebrow-tracking); text-transform: uppercase; }
.verify-connect-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--color-sunken); color: var(--color-ink); font: 500 var(--type-caption-size) / 1 var(--font-sans); white-space: nowrap; }
.verify-connect-chip.is-gated { border: 1px solid var(--color-ink); background: var(--color-canvas); }
.verify-fold-body { display: grid; gap: var(--space-4); padding: 0 var(--space-5) var(--space-5); min-width: 0; }
.verify-fold-nested { border-radius: var(--radius-control); background: var(--color-subtle); }
.verify-fold-summary-sm { padding: var(--space-3) var(--space-4); }
.verify-connect-panel-lead { margin: 0; color: var(--color-ink-secondary); font-size: var(--type-note-size); line-height: var(--type-note-leading); }
.verify-access-steps { display: grid; gap: var(--space-3); margin: 0; padding-left: var(--space-5); list-style: decimal; color: var(--color-ink-secondary); }
.verify-access-steps li { font-size: var(--type-note-size); line-height: var(--type-note-leading); overflow-wrap: anywhere; }

/* Worked path: one rail of numbered steps, public first, then the seller's approval, then keyed. */
.verify-path { display: grid; min-width: 0; }
.verify-path[hidden] { display: none; }
.verify-path-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding-bottom: var(--space-6); }
.verify-path-lead { margin: 0; min-width: 0; color: var(--color-ink-secondary); font-size: var(--type-note-size); line-height: var(--type-note-leading); overflow-wrap: anywhere; }
.verify-path-steps { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: verify-path; }
.verify-path-steps[hidden] { display: none; }
.verify-path-step { position: relative; display: grid; gap: var(--space-2); padding: 0 0 var(--space-7) 44px; min-width: 0; counter-increment: verify-path; }
/* The rail: a numbered marker on a hairline that runs to the next step. */
.verify-path-step::before { content: counter(verify-path); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 28px; height: 28px; border: var(--hairline); border-radius: var(--radius-pill); background: var(--color-canvas); color: var(--color-ink); font: 500 var(--type-caption-size) / 1 var(--font-mono); font-variant-numeric: tabular-nums; }
.verify-path-step::after { content: ""; position: absolute; top: 32px; bottom: 4px; left: 14px; width: 1px; background: var(--color-border); }
#verify-buyer-path-keyed .verify-path-step:last-child { padding-bottom: 0; }
#verify-buyer-path-keyed .verify-path-step:last-child::after { display: none; }
.verify-path-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 28px; }
.verify-path-step-head strong { color: var(--color-ink); font-weight: 500; }
.verify-path-step > p { margin: 0; max-width: 68ch; color: var(--color-ink-secondary); font-size: var(--type-note-size); line-height: var(--type-note-leading); }
.verify-path-code { margin-top: var(--space-2); min-width: 0; }
.verify-path-code .pr-code__bar { flex-wrap: nowrap; align-items: center; padding: 6px var(--space-2) 6px var(--space-4); }
.verify-path-code .pr-code__bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.verify-path-code pre { padding: var(--space-4); font-size: var(--type-caption-size); line-height: 20px; white-space: pre; }
.verify-path-copy { flex: none; min-height: 28px; padding: 0 var(--space-3); border: 0; border-radius: 6px; background: transparent; color: var(--color-dark-muted); font: 500 var(--type-caption-size) / 1 var(--font-sans); cursor: pointer; transition: background-color var(--motion-ui) var(--motion-ease-out), color var(--motion-ui) var(--motion-ease-out); }
.verify-path-copy:focus-visible { outline: var(--focus-ring); outline-offset: 0; }
.verify-path-copy:active { transform: scale(0.97); }
/* The seller's approval sits on the rail between the public and keyed steps: amber, a person decides. */
.verify-path-gate { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: var(--space-4); margin: 0 0 var(--space-7); padding: var(--space-4) var(--space-4) var(--space-4) 0; border: 1px solid var(--color-approval-border); border-radius: var(--radius-control); background: var(--color-approval-tint); }
.verify-path-gate[hidden] { display: none; }
.verify-path-gate-mark { justify-self: center; width: 10px; height: 10px; margin-top: 6px; border-radius: var(--radius-pill); background: var(--color-approval-solid); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-approval-solid) 22%, transparent); }
.verify-path-gate strong { color: var(--color-approval-text); font-weight: 500; }
.verify-path-gate p { margin: var(--space-1) 0 0; color: var(--color-ink-secondary); font-size: var(--type-note-size); line-height: var(--type-note-leading); }
.verify-connect-ref-heading { margin: var(--space-5) 0 0; color: var(--color-ink); font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-leading); }

/* Endpoint rows rendered by the script. */
.verify-endpoint-groups { display: grid; gap: var(--space-5); }
.verify-endpoint-group { display: grid; gap: var(--space-2); }
.verify-endpoint-group-note { margin: 0; color: var(--color-ink-muted); font-size: var(--type-small-size); }
.verify-endpoint-table { display: grid; border-top: var(--hairline); }
.verify-endpoint-row { display: grid; gap: var(--space-2); padding-block: var(--space-3); border-bottom: var(--hairline); min-width: 0; }
.verify-endpoint-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.verify-endpoint-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.verify-endpoint-title strong { color: var(--color-ink); font-weight: 500; }
.verify-endpoint-auth,
.verify-endpoint-can { color: var(--color-ink-muted); font-size: var(--type-caption-size); }
.verify-endpoint-method { display: inline-block; min-width: 3.5em; color: var(--color-ink-secondary); font: 500 var(--type-caption-size) / 18px var(--font-mono); }
.verify-endpoint-url,
.verify-endpoint-example { display: block; margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--color-sunken); color: var(--color-ink); font: var(--type-caption-size) / 20px var(--font-mono); overflow-wrap: anywhere; white-space: pre-wrap; }
pre.verify-access-example { margin: 0; padding: var(--space-3); border-radius: var(--radius-control); background: var(--color-sunken); color: var(--color-ink); font: var(--type-caption-size) / 20px var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Authorized surfaces block. */
.verify-authorized { display: grid; gap: var(--space-3); }
.verify-authorized[hidden] { display: none; }
.verify-authorized-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.verify-authorized-lead,
.verify-authorized-execute-note,
.verify-authorized-surfaces-label { margin: 0; color: var(--color-ink-secondary); font-size: var(--type-note-size); line-height: var(--type-note-leading); }
.verify-authorized-body { display: grid; gap: var(--space-3); }
.verify-authorized-body[hidden] { display: none; }
.verify-authorized-actions { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); list-style: disc; color: var(--color-ink-secondary); }

/* Copy buttons the script creates ("button button-outline-sm"). */
.verify-main .button,
.verify-connect .button,
.verify-criteria .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-canvas);
  color: var(--color-ink);
  font: 500 var(--type-small-size) / 1 var(--font-sans);
  cursor: pointer;
  transition: background-color var(--motion-ui) var(--motion-ease-out), transform var(--motion-ui) var(--motion-ease-out);
}
:is(.verify-main, .verify-connect, .verify-criteria) .button:active { transform: scale(0.97); }
:is(.verify-main, .verify-connect, .verify-criteria) .button:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
@media (hover: hover) and (pointer: fine) {
  :is(.verify-main, .verify-connect, .verify-criteria) .button:hover { background: var(--color-subtle); }
  .verify-fold-summary:hover .verify-fold-toggle { color: var(--color-ink); }
  .verify-path-copy:hover { background: rgba(255, 255, 255, 0.08); color: var(--color-dark-text); }
}

@media (pointer: coarse) {
  :is(.verify-main, .verify-connect, .verify-criteria) .button { min-height: 44px; }
  .verify-embed-tabs button { min-height: 44px; }
  .verify-fold-summary { min-height: 56px; }
  .verify-path-copy { min-height: 44px; }
}
@media (max-width: 767.98px) {
  .verify-card { padding: var(--space-5); }
  .verify-connect { padding-block: var(--space-8); }
  .verify-fold-summary { padding: var(--space-4); }
  .verify-fold-body { padding: 0 var(--space-4) var(--space-4); }
  .verify-path-step { padding-left: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.verify-main, .verify-connect, .verify-criteria) .button { transition: none; }
  :is(.verify-main, .verify-connect, .verify-criteria) .button:active { transform: none; }
  .verify-path-copy { transition: none; }
  .verify-path-copy:active { transform: none; }
}