/*
 * PairRail v2 live demo (/demo, public/demo.html). Stitch "PairRail Live Demo – Final".
 * Requires /ui/tokens.css and /ui/components.css. Page classes are pr-demo-* because v1
 * styles.css owns .demo*.
 * Dark surface: the raw-response code panel (the page's only one).
 * Rail: only the short rail into the approval badge on the quote card.
 */

/* —— Header: centered, one idea —— */
.pr-demo-head {
  padding-block: var(--space-7); /* keeps "Run quote" in the first screen of a 1440×900 laptop */
  text-align: center;
}
.pr-demo-head .pr-eyebrow { margin-bottom: var(--space-4); }
.pr-demo-head .pr-h1 { max-width: 15em; margin-inline: auto; }
.pr-demo-head .pr-lead { margin: var(--space-5) auto 0; max-width: 32em; }

/* —— Stage: request (5) → quote (7) —— */
.pr-demo-stage {
  display: grid;
  gap: var(--space-5);
  align-items: stretch;
}
@media (min-width: 900px) {
  .pr-demo-stage { grid-template-columns: 5fr 7fr; gap: var(--space-5); }
}

.pr-demo-label {
  margin: 0;
  color: var(--color-ink-secondary);
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: var(--type-eyebrow-leading);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}

.pr-demo-ask {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: var(--hairline);
  border-radius: var(--radius-card);
  background: var(--color-canvas);
}
.pr-demo-ask__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--hairline);
}
.pr-demo-ask__kind { color: var(--color-ink-muted); font-family: var(--font-mono); font-size: var(--type-caption-size); line-height: 20px; }
.pr-demo-prompt {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: var(--hairline);
  border-radius: var(--radius-control);
  background: var(--color-sunken);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  line-height: var(--type-mono-leading);
  overflow-wrap: anywhere;
}
.pr-demo-ask__sub { margin-top: var(--space-6); margin-bottom: var(--space-3); color: var(--color-ink-muted); }
.pr-demo-intent {
  border: var(--hairline);
  border-radius: var(--radius-control);
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  line-height: var(--type-mono-leading);
}
.pr-demo-intent > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 10px var(--space-4);
}
.pr-demo-intent > div + div { border-top: var(--hairline); }
.pr-demo-intent dt { color: var(--color-ink-muted); white-space: nowrap; }
.pr-demo-intent dd { color: var(--color-ink); text-align: right; font-variant-numeric: var(--numeric-prices); overflow-wrap: anywhere; }

.pr-demo-ask__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-6);
}
.pr-demo-ask__actions::before {
  content: "";
  flex-basis: 100%;
  height: 1px;
  margin-bottom: var(--space-3);
  background: var(--color-border);
}
.pr-demo-ask__actions [data-demo-run] { flex: 1 1 12em; }
.pr-demo-ask__actions [data-demo-next] { color: var(--color-ink); }

/* —— Result: the quote card, or the not-yet-quoted state —— */
.pr-demo-result { position: relative; display: grid; min-width: 0; }
.pr-demo-result pr-agent-quote,
.pr-demo-result .pr-quote { height: 100%; box-sizing: border-box; }
.pr-demo-result .pr-quote { display: flex; flex-direction: column; }
.pr-demo-result .pr-quote__total { margin-top: auto; padding-top: var(--space-6); }
.pr-demo-result .pr-quote__total strong { font-size: 32px; }
.pr-demo-result .pr-quote { transition: opacity var(--motion-ui) var(--motion-ease-out), filter var(--motion-ui) var(--motion-ease-out); }
.pr-demo-result[aria-busy="true"] .pr-quote { opacity: 0.55; filter: blur(2px); }
.pr-demo-pending {
  display: grid;
  place-content: center;
  gap: var(--space-2);
  min-height: 420px;
  padding: var(--space-6);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-card);
  background: var(--color-subtle);
  color: var(--color-ink-muted);
  text-align: center;
}
.pr-demo-pending[hidden],
.pr-demo-result pr-agent-quote[hidden] { display: none; }
.pr-demo-pending__title { color: var(--color-ink); font-weight: 600; }

/* —— Raw response: the page's one dark surface —— */
.pr-demo-raw { padding-top: var(--space-9); }
.pr-demo-raw__sub { margin: var(--space-1) 0 var(--space-5); color: var(--color-ink-secondary); font-size: var(--type-note-size); line-height: var(--type-note-leading); }
.pr-demo-raw .pr-code pre { padding: var(--space-6); font-size: var(--type-code-size); line-height: 22px; }
/* JSON stays monochrome: green is reserved for CTA, badge, logo and rail. */
.pr-code .j-k { color: var(--color-dark-muted); }
.pr-code .j-s { color: var(--color-dark-text-strong); }
.pr-code .j-b { color: var(--color-dark-text-strong); font-weight: 500; }

/* —— Guarantees: three short statements, hairline-topped columns (not cards) —— */
.pr-demo-props { padding-block: var(--space-9) var(--space-8); }
.pr-demo-props__list {
  display: grid;
  gap: var(--space-6);
  counter-reset: pr-prop;
}
.pr-demo-props__list > li {
  padding-top: var(--space-5);
  border-top: var(--hairline);
  counter-increment: pr-prop;
}
.pr-demo-props__list > li::before {
  content: counter(pr-prop, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  font-variant-numeric: tabular-nums;
}
.pr-demo-props__title {
  margin-bottom: var(--space-2);
  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);
}
.pr-demo-props__list p { max-width: 26em; text-wrap: pretty; }
@media (min-width: 768px) {
  .pr-demo-props__list { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}
.pr-demo-note {
  max-width: 40em;
  margin: var(--space-8) auto 0;
  color: var(--color-ink-muted);
  font-size: var(--type-note-size);
  line-height: var(--type-note-leading);
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 767.98px) {
  .pr-demo-head { padding-block: var(--space-8) var(--space-7); }
  .pr-demo-raw { padding-top: var(--space-8); }
  .pr-demo-raw .pr-code pre { padding: var(--space-4); }
  .pr-demo-props { padding-block: var(--space-8) var(--space-7); }
  .pr-demo-pending { min-height: 280px; }
}
@media (max-width: 480px) {
  .pr-demo-ask { padding: var(--space-4); }
  .pr-demo-result .pr-quote__total strong { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-demo-result .pr-quote { transition: opacity var(--motion-ui) linear; }
  .pr-demo-result[aria-busy="true"] .pr-quote { filter: none; }
}