/* The receipt preview is an illustrative product card, not a real screenshot. */
/* inline-size containment keeps the card's children from ever inflating the
   hero grid track; the two-column body is keyed on the card's own width. */
.receipt-demo { margin: 0; min-width: 0; container-type: inline-size; }
.demo-card {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
}
.demo-footnote { font-size: var(--text-xs); color: var(--color-ink-muted); margin: var(--space-3) 2px 0; }

.demo-chrome { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-rule); background: var(--color-surface-sunken); }
.demo-chrome__dots { display: flex; gap: 6px; }
.demo-chrome__dots span { width: 8px; height: 8px; border-radius: 999px; background: var(--color-rule-strong); }
.demo-chrome__title { margin-left: 4px; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-ink-muted); letter-spacing: 0.03em; text-transform: uppercase; }
.demo-label.demo-chrome__badge { margin-left: auto; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-accent-tint); color: var(--color-accent); font-size: 0.71875rem; font-weight: var(--weight-semibold); text-transform: none; letter-spacing: 0; }

.demo-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-2); }
@container (min-width: 30rem) {
  .demo-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Micro-labels: 11px tracked caps, the card's own wayfinding voice. */
.demo-label { font-family: var(--font-sans); font-size: 0.6875rem; font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-muted); }

.demo-receipt { position: relative; overflow: hidden; padding: var(--space-4); border: 1px solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-bg); min-height: 11rem; transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1); }
.demo-receipt.is-idle { opacity: 0.3; transform: translateY(10px) scale(0.985); }
.demo-receipt.is-settled { opacity: 0.28; transform: translateY(-8px) scale(0.985); }
.demo-row { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.demo-merchant { font-family: var(--font-serif); font-size: 1.1875rem; margin: var(--space-3) 0 var(--space-1); letter-spacing: -0.01em; }
.demo-detail { margin: 0 0 var(--space-4); min-height: 2.4em; font-size: 0.84375rem; line-height: 1.45; color: var(--color-ink-muted); }
.demo-divider { height: 1px; background: var(--color-rule); margin-bottom: var(--space-3); }
.demo-row--total .demo-label { font-size: 0.78125rem; font-weight: var(--weight-regular); letter-spacing: 0; text-transform: none; }
.demo-amount { font-family: var(--font-serif); font-size: 1.375rem; white-space: nowrap; letter-spacing: -0.02em; }

.demo-scan { position: absolute; left: 0; right: 0; top: 0; height: 38%; pointer-events: none; opacity: 0; border-bottom: 1.5px solid var(--color-accent-bright); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--color-accent-tint) 55%, var(--color-accent-tint) 100%); }
.receipt-demo[data-phase="scanning"] .demo-scan { animation: demo-scan 1150ms cubic-bezier(0.45, 0, 0.35, 1) both; }

.demo-fields { display: flex; flex-direction: column; gap: var(--space-2); min-height: 11rem; }
/* A cycling status sentence, not a static label: sentence case stays legible
   at length, where the short static labels above earn the tracked caps. */
.demo-stage { min-height: 1.1em; font-family: var(--font-sans); font-size: 0.75rem; font-weight: var(--weight-regular); letter-spacing: 0; text-transform: none; color: var(--color-ink-muted); }
.demo-field { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 9px var(--space-3); border-radius: var(--radius-control); font-size: 0.8125rem; color: var(--color-ink-muted); opacity: 1; transform: translateY(5px); background: var(--color-bg); border: 1px solid var(--color-rule); transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1), transform 380ms cubic-bezier(0.16, 1, 0.3, 1), background 380ms ease, border-color 380ms ease; }
.demo-field.is-on { opacity: 1; transform: translateY(0); background: var(--color-surface); border-color: var(--color-rule-strong); }
.demo-field__value { display: flex; align-items: center; gap: 7px; font-size: 0.84375rem; font-weight: var(--weight-semibold); color: var(--color-ink); white-space: nowrap; }
.demo-check { width: 14px; height: 14px; border-radius: 999px; background: var(--color-accent); color: var(--color-on-accent); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.6); }
.demo-check svg { display: block; }
.demo-field.is-on .demo-check { animation: demo-pop 380ms cubic-bezier(0.16, 1, 0.3, 1) both; }

.demo-chip { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--color-accent-tint); color: var(--color-accent); font-size: 0.84375rem; font-weight: var(--weight-semibold); opacity: 0; transform: translateY(6px) scale(0.94); transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1), transform 420ms cubic-bezier(0.16, 1, 0.3, 1); }
.demo-chip.is-on { opacity: 1; transform: translateY(0) scale(1); }
.demo-chip__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.demo-context { font-size: 0.71875rem; line-height: 1.45; color: var(--color-ink-muted); margin: auto 0 0; min-height: 2.8em; }

.demo-ledger { padding: 0 var(--space-5) var(--space-5); }
.demo-ledger__panel { border: 1px solid var(--color-rule); border-radius: var(--radius-control); overflow: hidden; }
.demo-ledger__head { padding: var(--space-2) var(--space-4); font-family: var(--font-sans); font-size: 0.6875rem; font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-muted); background: var(--color-surface-sunken); }
.demo-totals { margin: 0; }
.demo-totals > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); padding: var(--space-3) var(--space-4); font-family: var(--font-sans); font-size: 0.875rem; transition: background-color 420ms ease, box-shadow 420ms ease; }
.demo-totals > div:not(:first-child) { border-top: 1px solid var(--color-rule); }
.demo-totals dd { margin: 0; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.demo-totals > div.is-current,
.demo-totals.is-complete > div { background: var(--color-accent-tint); box-shadow: inset 3px 0 0 var(--color-accent); }

.demo-controls { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); flex-wrap: wrap; }
.demo-controls button { flex-shrink: 0; min-height: 44px; }
.demo-controls__status { flex-basis: 100%; order: 3; font-weight: var(--weight-regular); letter-spacing: 0; text-transform: none; font-size: 0.75rem; }
.demo-dots { display: flex; align-items: center; gap: 6px; }
/* Width is animated on purpose: four 7px spans cost nothing to lay out, and a
   scaled pill loses its round ends. */
.demo-dots span { width: 7px; height: 7px; border-radius: 999px; background: var(--color-rule-strong); transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1), background-color 400ms ease, opacity 400ms ease; }
.demo-dots span.is-current { width: 20px; background: var(--color-accent); opacity: 0.42; }
.demo-dots span.is-done { background: var(--color-accent); opacity: 1; }

.receipt-demo[data-paused="true"] *, .receipt-demo[data-paused="true"] *::before { animation-play-state: paused; }

@keyframes demo-scan { 0% { transform: translateY(-110%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(430%); opacity: 0; } }
@keyframes demo-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

@media (max-width: 24rem) {
  .demo-receipt { padding: var(--space-3); }
  .demo-controls { align-items: start; flex-direction: column; }
  .demo-row { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-scan { display: none; }
  .demo-receipt, .demo-field, .demo-check, .demo-chip, .demo-totals > div, .demo-dots span { transition: none; animation: none; }
}

.demo-chrome { flex-wrap: wrap; }
.demo-field { flex-wrap: wrap; }
.demo-field__value { min-width: 0; white-space: normal; }
.demo-field__value > span:first-child { overflow-wrap: anywhere; }
@media (max-width: 39.99rem) {
  .demo-chrome, .demo-body, .demo-ledger, .demo-controls { padding-inline: clamp(12px, 4vw, 24px); }
}