/**
 * Product demos.
 *
 * A separate stylesheet from theme.css because it is only needed on the pages
 * that carry a demo, and because everything in it is scoped under `.rc-demo` —
 * nothing here can reach the rest of the site.
 *
 * The whole file is written so that the no-JavaScript rendering is the correct
 * one. Steps are visible by default and hidden only once the script has claimed
 * the frame with `data-rc-js`; the status strip rests on its idle line until a
 * phase is set. Order matters for that: the enhancement always adds the hiding,
 * never the showing.
 */

.rc-demo {
  container-type: inline-size;
  padding: 20px;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-card);
  background: var(--rc-band-raised);
  box-shadow: var(--shadow-float);
  font-size: 0.875rem;
}

/* The height the frame settles at once the sequence finishes. Without it the
   frame grows as the steps mount and pushes the page down under the reader. */
.rc-demo__body {
  min-height: var(--rc-demo-reserve, 0);
}

@media (min-width: 1024px) {
  .rc-demo__body {
    min-height: var(--rc-demo-reserve-lg, var(--rc-demo-reserve, 0));
  }
}

/* ── The hint line ─────────────────────────────────────────────────────── */

.rc-demo__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.rc-demo__hint-playing {
  display: none;
  align-items: center;
  gap: 8px;
  color: var(--rc-text-blue);
}

.rc-demo__hint-ready {
  color: var(--rc-success-top, var(--rc-text-secondary));
}

/* Only while the script is running the sequence is there anything to watch. */
.rc-demo[data-rc-js]:not([data-rc-ready]) .rc-demo__hint-playing {
  display: inline-flex;
}

.rc-demo[data-rc-js]:not([data-rc-ready]) .rc-demo__hint-ready {
  display: none;
}

.rc-demo__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rc-text-blue);
  animation: rc-demo-pulse 1.4s ease-in-out infinite;
}

@keyframes rc-demo-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Steps ─────────────────────────────────────────────────────────────────
   Visible by default. The script adds `data-rc-js`, which is what turns the
   hiding on, so a failed or blocked script leaves the finished demo. */

.rc-demo[data-rc-js] .rc-demo__step {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--rc-motion-standard) var(--rc-ease-premium),
    transform var(--rc-motion-standard) var(--rc-ease-premium);
}

.rc-demo[data-rc-js] .rc-demo__step[data-visible="true"] {
  opacity: 1;
  transform: none;
}

/* Nothing in the frame is operable until the sequence has finished, so a click
   during the reveal cannot land on a control that is about to move. */
.rc-demo[data-rc-js]:not([data-rc-ready]) .rc-demo__body {
  pointer-events: none;
  user-select: none;
}

/* ── Status strip ──────────────────────────────────────────────────────── */

.rc-demo__status {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  /* One line of the strip, so the space is held before a phase is set rather
     than appearing when one is. */
  min-height: 32px;
}

/* Two lines below 400px. The success messages name an amount and an email —
   "Payment complete, receipt emailed to sarah@example.com" — and in French they
   run longer still, so on a 320px screen they wrap and the frame jumped 27px at
   the moment somebody pressed the button. Reserving the second line costs 18px
   on a narrow phone and nothing anywhere else, which is the right way round:
   the space is where the message goes, and a page that moves under a reader is
   worse than a page with a gap in it. One variant had already discovered this
   and set the floor for itself; this covers all nine. */
@media (max-width: 400px) {
  .rc-demo__status {
    min-height: 50px;
  }
}

.rc-demo__status > span {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 500;
}

.rc-demo__status-idle {
  background: var(--rc-band-panel);
  color: var(--rc-text-secondary);
}

.rc-demo__status-busy {
  background: color-mix(in srgb, var(--rc-text-blue) 14%, transparent);
  color: var(--rc-text-blue);
}

.rc-demo__status-success {
  background: color-mix(in srgb, var(--rc-success-top, var(--rc-text-blue)) 14%, transparent);
  color: var(--rc-success-top, var(--rc-text-blue));
}

.rc-demo:not([data-rc-phase]) .rc-demo__status-idle,
.rc-demo[data-rc-phase="busy"] .rc-demo__status-busy,
.rc-demo[data-rc-phase="success"] .rc-demo__status-success {
  display: inline-flex;
}

/* A strip whose caller passed no idle line has nothing to show at rest, and
   `DemoStatusBar` draws nothing at all in that state. Reserving a line for it
   left an empty band above the content on seven variants. The element stays in
   the DOM — it is the live region, and one created after the fact announces
   unreliably — and gets its height back with its first phase. The frame's own
   reserve absorbs that, so nothing below it moves. */
.rc-demo:not([data-rc-phase]) .rc-demo__status--deferred {
  min-height: 0;
  margin-bottom: 0;
}

.rc-demo__spinner {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: rc-demo-spin 0.7s linear infinite;
}

@keyframes rc-demo-spin {
  to { transform: rotate(360deg); }
}

/* ── Response panel ────────────────────────────────────────────────────── */

.rc-demo__response {
  min-height: 7rem;
  padding: 16px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-md);
  background: var(--rc-band-panel);
  transition: box-shadow var(--rc-motion-standard) var(--rc-ease-premium);
}

.rc-demo[data-rc-phase="success"] .rc-demo__response {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc-success-top, var(--rc-text-blue)) 50%, transparent);
}

.rc-demo__response > * {
  display: none;
  margin: 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--rc-text-secondary);
}

.rc-demo__response-busy {
  align-items: center;
  gap: 8px;
  color: var(--rc-text-blue);
}

.rc-demo__response-success {
  color: var(--rc-success-top, var(--rc-text-primary));
}

.rc-demo:not([data-rc-phase]) .rc-demo__response-idle,
.rc-demo[data-rc-phase="success"] .rc-demo__response-success {
  display: block;
}

.rc-demo[data-rc-phase="busy"] .rc-demo__response-busy {
  display: flex;
}

/* ── Fields and buttons ────────────────────────────────────────────────── */

.rc-demo__field {
  margin: 0 0 12px;
}

.rc-demo__field label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-secondary);
}

.rc-demo__field input {
  width: 100%;
  /* 44px, so the field is a comfortable target on a phone rather than a 28px
     line someone has to aim at. */
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-input);
  background: var(--rc-band-deep);
  color: var(--rc-text-primary);
  font-family: inherit;
  /* 16px: anything smaller makes iOS Safari zoom the page on focus, and the
     page does not zoom back out afterwards. */
  font-size: 16px;
}

.rc-demo__field input:focus-visible {
  outline: 2px solid var(--rc-text-blue);
  outline-offset: 1px;
}

.rc-demo__row {
  display: grid;
  gap: 12px;
}

@container (min-width: 380px) {
  .rc-demo__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rc-demo__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--rc-radius-button);
  background: var(--rc-text-blue);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--rc-motion-fast) var(--rc-ease-premium);
}

.rc-demo__action:hover:not(:disabled) {
  filter: brightness(1.08);
}

.rc-demo__action:disabled {
  opacity: 0.65;
  cursor: default;
}

.rc-demo__action:focus-visible {
  outline: 2px solid var(--rc-text-primary);
  outline-offset: 2px;
}

/* ── Rows, totals and lists the variants share ─────────────────────────── */

.rc-demo__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block: 8px;
  border-bottom: 1px solid var(--rc-line-soft);
}

.rc-demo__line:last-child {
  border-bottom: 0;
}

.rc-demo__line dt,
.rc-demo__line-label {
  color: var(--rc-text-secondary);
}

.rc-demo__line dd,
.rc-demo__line-value {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--rc-text-primary);
}

.rc-demo__total {
  font-weight: 600;
}

.rc-demo__total .rc-demo__line-value {
  font-size: 1.125rem;
}

.rc-demo__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--rc-band-panel);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-secondary);
}

.rc-demo__pill--ok {
  background: color-mix(in srgb, var(--rc-success-top, var(--rc-text-blue)) 14%, transparent);
  color: var(--rc-success-top, var(--rc-text-blue));
}

/* ── Foot ──────────────────────────────────────────────────────────────── */

.rc-demo__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.rc-demo__note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--rc-text-disabled);
}

.rc-demo__replay {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rc-text-blue);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}

/* The control is only usable once the sequence has finished, and it starts out
   `hidden` in the markup so a visitor without JavaScript is never shown a button
   that does nothing. But `hidden` is `display: none`, so the control appearing
   re-flowed the foot — and in French, where "Rejouer la démo" and "Données de
   démonstration seulement" will not share a line on a 320px screen, that wrapped
   the foot to two lines and moved the whole frame 27px at the exact moment the
   demo finished playing.

   So the script, which is the only thing that will ever reveal it, swaps the
   attribute for this class as soon as it claims the frame. `visibility: hidden`
   keeps the control out of the tab order and out of the accessibility tree the
   way the attribute did, and holds its box — correct in any language at any
   width, with no reserved figure to keep in step.

   Not an override of `[hidden]`: Chrome's UA stylesheet marks that rule
   `!important` (it has to, for `hidden="until-found"`), so a theme cannot win
   it, and reaching for `!important` to fight the platform here would be the
   wrong answer anyway. */
.rc-demo__replay--pending {
  visibility: hidden;
}

.rc-demo__replay:hover {
  text-decoration: underline;
}

/* The control is 12px text. The transparent overlay gives it the 44px target
   it needs on a phone without adding 44px of visible chrome to the corner. */
.rc-demo__replay::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ── Dark variant, for the API and code demos ──────────────────────────── */

.rc-demo--dark {
  border-color: var(--rc-line-strong, var(--rc-line));
  background: var(--rc-band-charcoal, #12161f);
  color: #e6edf7;
}

.rc-demo--dark .rc-demo__response,
.rc-demo--dark .rc-demo__field input {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #e6edf7;
}

.rc-demo--dark .rc-demo__field label,
.rc-demo--dark .rc-demo__note,
.rc-demo--dark .rc-demo__line dt,
.rc-demo--dark .rc-demo__line-label {
  color: rgba(230, 237, 247, 0.66);
}

.rc-demo--dark .rc-demo__line dd,
.rc-demo--dark .rc-demo__line-value,
.rc-demo--dark .rc-demo__response > * {
  color: #e6edf7;
}

.rc-demo--dark .rc-demo__line {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* The frame's own chrome inside a dark shell.
   `--rc-text-blue` and `--rc-success-top` are the light theme's, and a dark
   shell keeps its background whichever theme the page is in — so the hint, the
   pulse and the replay control need the dark palette named explicitly. Both
   dark variants had written their own copy of this before the stylesheets were
   concatenated; one copy here covers every variant, including the next one. */
.rc-demo--dark .rc-demo__hint-playing,
.rc-demo--dark .rc-demo__replay {
  color: var(--rc-cyan-400);
}

.rc-demo--dark .rc-demo__pulse {
  background: var(--rc-cyan-400);
}

.rc-demo--dark .rc-demo__hint-ready {
  color: var(--rc-green-500);
}

@media (prefers-reduced-motion: reduce) {
  .rc-demo[data-rc-js] .rc-demo__step,
  .rc-demo__response {
    transition: none;
  }

  .rc-demo__pulse,
  .rc-demo__spinner {
    animation: none;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   Variants
   ═══════════════════════════════════════════════════════════════════════════

   Nine demos, each written as its own file and concatenated here. One file
   rather than nine because a page carrying a demo would otherwise make nine
   requests for eight stylesheets it has no use for — and because the first
   version of this shipped the nine as separate files that nothing ever
   enqueued, so every variant rendered unstyled and four separate reviewers
   found the same dead code independently.

   Everything below is scoped under `.rc-demo` or an `rc-demo-<variant>-`
   prefix, which `wordpress/tests/mocks-harness.php` asserts. Nothing here can
   reach the rest of the site.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── checkout ────────────────────────────────────────────────────────── */

/**
 * Hosted checkout demo.
 *
 * Only what the shared sheet does not already give: the eyebrow, the card the
 * four steps land in, the amount field with its currency mark, the expiry/CVC
 * pair, and the one colour the button takes on success. Everything else — the
 * fields, the button, the status strip, the reveal — is `mocks.css`.
 *
 * Almost nothing here reflows: the expiry/CVC pair keeps two columns at every
 * width and the amount stays on the order line down to about 360px, which is
 * what lets one reserved height — 398px, measured — be right on a phone and on
 * a desktop at once. Below 360px the order line wraps and the frame is simply
 * taller than its floor.
 */

.rc-demo .rc-demo-checkout__eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-secondary);
}

/* The bordered card. `gap` rather than margins on the rows: a step that has not
   been revealed yet is transparent, not absent, so its row has to hold its
   height from the first frame. */
.rc-demo .rc-demo-checkout__card {
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding: 16px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-xl);
}

.rc-demo .rc-demo-checkout__card .rc-demo__field {
  margin-bottom: 0;
}

/* Order number on one side, amount on the other, and on a screen too narrow
   for both it wraps rather than overflowing or shrinking the field below its
   target size. */
.rc-demo .rc-demo-checkout__order {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Narrow enough to sit beside the order number on a 375px phone and wide
   enough for the currency mark, the figure and a 44px target. Below about
   360px the row wraps instead, in either language; that is a taller frame than
   the reserved floor, which costs nothing, and not a reflow, which would. */
.rc-demo .rc-demo-checkout__amount {
  display: block;
  width: 120px;
}

.rc-demo .rc-demo-checkout__amount-box {
  position: relative;
  display: block;
}

.rc-demo .rc-demo-checkout__currency {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: var(--rc-text-secondary);
}

/* Room on the left for the currency mark, and the figure aligned right so the
   decimal point sits where the eye expects it. */
.rc-demo .rc-demo-checkout__amount input {
  padding: 10px 14px 10px 26px;
  text-align: right;
  font-weight: 600;
}

/* Two columns at every width, as in the original. Each field still clears the
   44px target on a 320px screen. */
.rc-demo .rc-demo-checkout__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* The one phase cue the original carries in the button itself. Its label cannot
   change — the shared action prints one string — so the status strip above the
   card is what says, in words, that the payment went through.

   `--rc-success-border` and not `--rc-success-top` for the fill, and an ink
   named rather than inherited. The button's label is 14px at 600, which AA
   measures as normal text and wants at 4.5:1. White on `--rc-success-top` is
   4.15:1 in light and 1.64:1 in dark, so painting the button with it turns a
   passing control into a failing one at the exact moment it is reporting
   success. `--rc-success-border` is the high-contrast member of the family in
   both themes — the darker green in light, the lighter green in dark — and
   `--rc-band-raised` is the surface it flips against, white over the dark
   green and near-black over the light one: 5.4:1 and 15.1:1. The same
   reasoning `mocks/recurring.css` and `mocks/embedded.css` already record for
   text in this colour. */
.rc-demo[data-rc-phase="success"] .rc-demo-checkout__pay {
  background: var(--rc-success-border, var(--rc-text-blue));
  color: var(--rc-band-raised, #ffffff);
}


/* ── virtual-terminal ────────────────────────────────────────────────── */

/**
 * Virtual terminal demo.
 *
 * Only what the shared sheet does not already give: the header row and its
 * role pill, the two-column split, the caption above a value, the customer
 * readout, the amount at display size, the keyed-entry panel, and the colour
 * the button takes on success.
 *
 * The split is a viewport media query rather than a container query on purpose.
 * `mocks.css` swaps the reserved height at 1024px and the demo band goes to two
 * columns at 1024px, so the reflow has to happen there too — put it at a
 * container width instead and there is a range of viewports where the frame is
 * taller than the height reserved for it.
 */

.rc-demo .rc-demo-virtual-terminal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rc-line);
}

.rc-demo .rc-demo-virtual-terminal__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rc-text-primary);
}

/* The pill says which seat of the business is taking the payment, so it reads
   as a live role rather than as a neutral tag. */
.rc-demo .rc-demo-virtual-terminal__role {
  background: var(--surface-ice, var(--rc-band-panel));
  color: var(--rc-text-blue);
}

/* Two lines of strip rather than the shared one.
   "Payment complete, receipt emailed to sarah@example.com" takes two lines on a
   phone, and its French counterpart takes two on the narrowest desktop, so the
   strip that is one line while the demo is idle would grow the moment someone
   pressed the button — the frame moving under the hand that just clicked it.
   The room is held from the start instead, in the strip and not at the bottom
   of the frame, which is also what makes one reserved height right for both
   languages. */
.rc-demo .rc-demo-virtual-terminal__intro .rc-demo__status {
  min-height: 50px;
}

.rc-demo .rc-demo-virtual-terminal__grid {
  display: grid;
  gap: 16px;
  margin-top: 4px;
}

.rc-demo .rc-demo-virtual-terminal__col {
  display: grid;
  align-content: start;
  gap: 12px;
}

/* What is being charged beside how it is being charged, at the width where the
   demo band itself has already gone to two columns. */
@media (min-width: 1024px) {
  .rc-demo .rc-demo-virtual-terminal__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* The name above a value that is not a field, matching the type of the labels
   on the ones that are. */
.rc-demo .rc-demo-virtual-terminal__caption {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-secondary);
}

.rc-demo .rc-demo-virtual-terminal__readout {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-input);
  color: var(--rc-text-primary);
}

.rc-demo .rc-demo-virtual-terminal__amount .rc-demo__field {
  display: block;
  margin-bottom: 0;
}

/* The figure is the loudest thing on the panel, as it is in the original. Its
   own line-height, because 1.6 on 24px would add 15px to the field for nothing
   and the reserved height is measured off this. */
.rc-demo .rc-demo-virtual-terminal__amount input {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.rc-demo .rc-demo-virtual-terminal__panel {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-xl);
  background: var(--rc-band-panel);
}

.rc-demo .rc-demo-virtual-terminal__panel .rc-demo__field {
  margin-bottom: 0;
}

.rc-demo .rc-demo-virtual-terminal__panel .rc-demo__field input {
  background: var(--rc-band-raised);
}

/* Green on success, the one phase the original shows in the button itself. The
   shared action prints a single label, so the sentence that says the receipt
   was emailed is on the status strip above.

   `--rc-success-border` for the fill and `--rc-band-raised` for the ink, as in
   `mocks/checkout.css` and for the same reason: the label is 14px at 600,
   which AA reads as normal text, and white on `--rc-success-top` is 4.15:1 in
   light and 1.64:1 in dark. The border token is the high-contrast green in
   both themes and the raised band is the surface it flips against, so the pair
   lands at 5.4:1 and 15.1:1 without either file knowing which theme is on. */
.rc-demo[data-rc-phase="success"] .rc-demo-virtual-terminal__submit {
  background: var(--rc-success-border, var(--rc-text-blue));
  color: var(--rc-band-raised, #ffffff);
}


/* ── terminal ────────────────────────────────────────────────────────── */

/**
 * Countertop terminal demo.
 *
 * Only what `mocks.css` does not already give the frame: the device, and the
 * slot machinery that lets one line inside it hold four beats.
 */

.rc-demo-terminal__eyebrow {
  margin: 0 0 var(--space-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-secondary);
}

/* ── The device ────────────────────────────────────────────────────────────
   A button, because in the original the thing you tap is the terminal itself.
   Everything a button brings by default and does not want here — centred text,
   the UA font, the UA font-size — is unset. */

.rc-demo-terminal__device {
  position: relative;
  display: block;
  width: 100%;
  /* Well past 44px on its own, but stated so the floor is not an accident of
     how tall the three lines inside happen to be. */
  min-height: 44px;
  margin-bottom: var(--space-3);
  padding: var(--space-6);
  overflow: hidden;
  border: 1px solid var(--rc-line-strong, var(--rc-line));
  border-radius: var(--radius-xl);
  background: var(--rc-navy-900);
  color: #ffffff;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--rc-motion-fast) var(--rc-ease-premium),
    box-shadow var(--rc-motion-standard) var(--rc-ease-premium);
}

/* Nothing in the frame is operable until the sequence settles, so the device
   only offers the press affordance once it is real. */
.rc-demo[data-rc-ready] .rc-demo-terminal__device:hover:not(:disabled) {
  transform: scale(1.01);
}

.rc-demo[data-rc-ready] .rc-demo-terminal__device:active:not(:disabled) {
  transform: scale(0.99);
}

.rc-demo-terminal__device:focus-visible {
  outline: 2px solid var(--rc-text-blue);
  outline-offset: 2px;
}

.rc-demo-terminal__device:disabled {
  cursor: default;
}

.rc-demo[data-rc-phase="success"] .rc-demo-terminal__device {
  box-shadow: 0 0 0 2px var(--rc-green-500);
}

/* `--rc-navy-900` is the ground; the caption is that ground's own ink at 70%
   rather than a second colour, which is how the original draws it. */
.rc-demo-terminal__caption {
  display: block;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Carries `.rc-demo__line-value` for the mono face and tabular figures. That
   class also sets the light-frame ink, which would be near-black on navy. */
.rc-demo .rc-demo-terminal__amount {
  display: block;
  /* One line of it, held. Between the script claiming the frame and the first
     beat landing every slot is hidden, and without this the screen would lose
     35px of height and get it back — inside a frame whose whole job is not to
     move. Same reason for the prompt below. */
  min-height: 1.15em;
  margin-top: var(--space-1);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
}

@container (min-width: 420px) {
  .rc-demo .rc-demo-terminal__amount {
    font-size: 2rem;
  }
}

.rc-demo-terminal__prompt {
  display: block;
  min-height: 1.5em;
  margin-top: var(--space-4);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rc-green-500);
}

.rc-demo-terminal__prompt-steps {
  display: block;
}

/* ── Slots ─────────────────────────────────────────────────────────────────
   One line, several beats, one shown. `mocks.js` marks EVERY step at or below
   the current index, so the rule cannot be "show the marked one" — it is "show
   the first marked one and hide what follows it", which is why the markup runs
   highest step first.

   The rest state is the same shape read the other way: with no script there is
   no `data-visible` anywhere, and the first slot — the finished beat — is the
   one that shows. `block`, not `inline`: the reveal transform in `mocks.css`
   does not apply to a non-replaced inline box. */

.rc-demo-terminal__slot {
  display: none;
}

.rc-demo:not([data-rc-js]) .rc-demo-terminal__slot:first-child {
  display: block;
}

/* Before the first beat lands — the frame's opening moment, and every replay —
   `mocks.js` has marked nothing, and without this the screen is a lit device
   showing no figure at all for one step length. The original never does that:
   its device is ungated and step 0 reads `$0.00`. The markup runs highest step
   first, so the LAST slot is the step-0 beat; show it until a marked one takes
   over. `opacity` and `transform` come with it because `mocks.css` parks every
   unmarked `.rc-demo__step` at zero opacity, which would leave this one
   displayed and still invisible. The rule below is one selector heavier, so a
   marked predecessor still hides it. */
.rc-demo[data-rc-js] .rc-demo-terminal__slot:last-child {
  display: block;
  opacity: 1;
  transform: none;
}

.rc-demo[data-rc-js] .rc-demo-terminal__slot[data-visible="true"] {
  display: block;
}

.rc-demo[data-rc-js] .rc-demo-terminal__slot[data-visible="true"] ~ .rc-demo-terminal__slot {
  display: none;
}

/* ── Phase lines ───────────────────────────────────────────────────────────
   Busy and success replace the whole slot group rather than joining it: the
   sequence and the phase are independent, and a beat index cannot express
   "while the card is being read". */

.rc-demo-terminal__prompt-busy,
.rc-demo-terminal__prompt-success {
  display: none;
}

.rc-demo[data-rc-phase="busy"] .rc-demo-terminal__prompt-steps,
.rc-demo[data-rc-phase="success"] .rc-demo-terminal__prompt-steps {
  display: none;
}

.rc-demo[data-rc-phase="busy"] .rc-demo-terminal__prompt-busy,
.rc-demo[data-rc-phase="success"] .rc-demo-terminal__prompt-success {
  display: block;
}

/* The approval, over the screen. Navy ink on the green rather than the white
   the device inherits: `--rc-green-500` is bright enough that white text on it
   lands around 1.7:1. */
.rc-demo-terminal__approved {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--rc-green-500) 90%, transparent);
  color: var(--rc-navy-950, #010837);
  font-size: 1.125rem;
  font-weight: 700;
}

.rc-demo[data-rc-phase="success"] .rc-demo-terminal__approved {
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  .rc-demo-terminal__device {
    transition: none;
  }

  .rc-demo[data-rc-ready] .rc-demo-terminal__device:hover:not(:disabled),
  .rc-demo[data-rc-ready] .rc-demo-terminal__device:active:not(:disabled) {
    transform: none;
  }
}


/* ── dashboard ───────────────────────────────────────────────────────── */

/**
 * Merchant dashboard demo.
 *
 * The dark frame, the description-list colours and the tabular figures all come
 * from `mocks.css`; what is here is the metric grid and the channel rows.
 *
 * The card and row surfaces are white at a low alpha rather than a surface
 * token, which is what `.rc-demo--dark` already does for its own inputs and
 * response panel. It keeps the separation between a card and the frame behind
 * it the same however the frame's ground resolves, instead of stacking two
 * near-black tokens that differ by a few points of luminance.
 */
.rc-demo-dashboard__eyebrow {
  margin: 0 0 var(--space-4);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--text-dark-secondary);
}

/* ── Metric cards ──────────────────────────────────────────────────────────
   One column on a phone, three across from 400px of frame. 400 and not a
   rounder number: at a 1024px viewport — the narrowest the band goes two-up —
   the demo column leaves the frame a 408px container, and a card that reflowed
   there would be a row of three everywhere except the width where the layout
   first earns it. */

.rc-demo-dashboard__metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

@container (min-width: 400px) {
  .rc-demo-dashboard__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rc-demo-dashboard__metric {
  padding: var(--space-4);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
}

.rc-demo-dashboard__metric-label {
  font-size: 0.75rem;
  line-height: 1.5;
}

.rc-demo .rc-demo-dashboard__metric-value {
  margin-top: var(--space-1);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

/* The first three-across tier is the tight one: a 400px frame is a 128px card
   and 94px of room for the figure. `$12,482` fits at 1.25rem; `2 ouverts` does
   not, and a figure that wraps leaves one card a line taller than the two
   beside it. The size comes back at 480px, where every card has 104px. */
@container (min-width: 400px) and (max-width: 479.98px) {
  .rc-demo .rc-demo-dashboard__metric-value {
    font-size: 1rem;
  }
}

/* ── Channel rows ──────────────────────────────────────────────────────────
   Not `.rc-demo__line`: that row is a ruled list, and these are three separate
   bordered cards. The label and value classes are still the shared ones, so the
   ink and the tabular figures follow the frame. */

.rc-demo-dashboard__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.rc-demo-dashboard__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
}


/* ── payment-links ───────────────────────────────────────────────────── */

/**
 * Payment links.
 *
 * Four numbered rows and the amount the link was built for. Everything the
 * shared sheet already gives — the frame, the reveal, the tabular figure — is
 * used rather than restated; what is here is the row itself, which no other
 * variant has.
 *
 * Nothing hard-codes a colour. The blue is `--rc-text-blue` and the tints are
 * mixed from it, which is the idiom the shared sheet uses for its own status
 * strip, so the rows follow the theme into dark mode without a second palette.
 */

.rc-demo-payment-links-eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-secondary);
}

/* ── The amount the link carries ───────────────────────────────────────── */

.rc-demo-payment-links-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.rc-demo-payment-links-meta-label {
  font-size: 0.75rem;
  color: var(--rc-text-secondary);
}

/* Not `.rc-demo__pill`: that one is an uppercase label, and this chip carries
   an amount and a sentence fragment, which uppercase would shout. The pale
   panel under blue text is the shared pill's own surface, and the closest
   thing the theme has to the `--surface-ice` the React chip sits on. */
.rc-demo-payment-links-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  background: var(--rc-band-panel);
  color: var(--rc-text-blue);
  font-size: 0.75rem;
  font-weight: 500;
}

/* The figure keeps its tabular numerals and gives up its own colour, so the
   chip reads as one thing rather than two. */
.rc-demo-payment-links-chip .rc-demo__line-value {
  color: inherit;
  font-size: inherit;
}

/* ── The four rows ─────────────────────────────────────────────────────── */

.rc-demo-payment-links-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rc-demo-payment-links-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
}

/* The row the sequence settles on. The state is the `aria-current` the markup
   already carries, so the outline and the announcement cannot drift apart. */
.rc-demo-payment-links-list > li[aria-current="step"] > .rc-demo-payment-links-row {
  border-color: var(--rc-text-blue);
  background: color-mix(in srgb, var(--rc-text-blue) 8%, transparent);
}

.rc-demo-payment-links-num {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  /* The same pale panel as the chip. A blue tint of its own would put dark
     blue on light blue at 4.3:1, which is under AA for a 12px numeral. */
  background: var(--rc-band-panel);
  color: var(--rc-text-blue);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rc-demo-payment-links-text {
  min-width: 0;
}

.rc-demo-payment-links-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rc-text-primary);
}

.rc-demo-payment-links-detail {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--rc-text-secondary);
}


/* ── invoicing ───────────────────────────────────────────────────────── */

/**
 * Invoicing.
 *
 * The rows, the rule above the total and the tabular figures are the shared
 * sheet's. What is here is the invoice header, and the two elements that read
 * differently once the invoice is paid: the badge and the button.
 *
 * Both of those follow the shape the shared status strip uses — every state in
 * the markup, one shown at a time by `[data-rc-phase]` — so the success state
 * costs no JavaScript beyond the phase `mocks.js` already sets, and a visitor
 * with the script blocked sees a coherent unpaid invoice rather than a button
 * with three labels stacked in it.
 */

/* ── Header ────────────────────────────────────────────────────────────── */

.rc-demo-invoicing-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.rc-demo-invoicing-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  color: var(--rc-text-secondary);
}

/* Scoped through `.rc-demo` so it outranks `.rc-demo__line-value`, whose
   tabular numerals the invoice number wants and whose type size it does not. */
.rc-demo .rc-demo-invoicing-id {
  margin: 2px 0 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--rc-text-primary);
}

/* The shared pill, keeping its surface and taking the blue the React original
   gives this badge in both of its states. */
.rc-demo .rc-demo-invoicing-state {
  color: var(--rc-text-blue);
  white-space: nowrap;
}

.rc-demo-invoicing-state > span {
  display: none;
}

.rc-demo:not([data-rc-phase]) .rc-demo-invoicing-state-sent,
.rc-demo[data-rc-phase="busy"] .rc-demo-invoicing-state-sent,
.rc-demo[data-rc-phase="success"] .rc-demo-invoicing-state-paid {
  display: inline;
}

/* ── Amounts ───────────────────────────────────────────────────────────── */

.rc-demo-invoicing-lines {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rc-line);
}

/* The shared row rules a line under every row but the last. This invoice wants
   one rule only, above the total, which is where the original draws it. */
.rc-demo-invoicing-lines .rc-demo__line:first-child {
  border-bottom: 0;
}

/* ── The control, and what it says once the invoice is paid ────────────── */

.rc-demo-invoicing-action {
  margin-top: 16px;
}

.rc-demo-invoicing-pay > span {
  display: none;
}

.rc-demo:not([data-rc-phase]) .rc-demo-invoicing-pay-idle,
.rc-demo[data-rc-phase="busy"] .rc-demo-invoicing-pay-busy,
.rc-demo[data-rc-phase="success"] .rc-demo-invoicing-pay-done {
  display: inline;
}

/* Paid: the theme's success surface rather than a filled green. A solid fill
   cannot be got right from one token — the success ramp is a deep green in
   light mode and a bright mint in dark, so the button's white label lands at
   4.2:1 on one and worse on the other. The tint reads as the same finished
   green in both, and it takes its label from the ramp's border step, which is
   the darkest in light mode and the lightest in dark: 4.7:1 and better,
   whichever way the theme goes, with no second palette to keep in step. */
.rc-demo[data-rc-phase="success"] .rc-demo-invoicing-pay {
  background: color-mix(in srgb, var(--rc-success-top, var(--rc-text-blue)) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc-success-top, var(--rc-text-blue)) 45%, transparent);
  color: var(--rc-success-border, var(--rc-text-primary));
}


/* ── recurring ───────────────────────────────────────────────────────── */

/**
 * Recurring payments demo.
 *
 * Only what the shared frame does not already give: the schedule's eyebrow and
 * caption, the row grid, the four status tones and the inline amount field.
 * Everything else — the reveal, the pill's shape, the tabular figures, the
 * foot — is `mocks.css`.
 */

.rc-demo .rc-demo-recurring__title {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-secondary);
}

.rc-demo .rc-demo-recurring__hint {
  margin: 0 0 12px;
  font-size: 0.75rem;
  color: var(--rc-text-secondary);
}

/* The original shows this line only once the sequence has settled. `visibility`
   rather than `display`, so the line holds its space from the first paint and
   the four rows below it never move. Without the script it stays visible, which
   is the finished state and the right thing to show. */
.rc-demo[data-rc-js]:not([data-rc-ready]) .rc-demo-recurring__hint {
  visibility: hidden;
}

.rc-demo .rc-demo-recurring__list {
  display: grid;
  gap: 8px;
}

/* Each row is also a `.rc-demo__step`, so the reveal owns opacity and transform
   and this rule owns everything else. The middle column takes the slack: a
   long status — "Relance en attente" — wraps inside the row rather than
   pushing the amount field off the edge of a phone. */
.rc-demo .rc-demo-recurring__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-raised);
}

/* The date is the amount field's label, so it is a target as well as a
   heading: stretched to the row's full height and held to a comfortable width,
   it clears 44px in both directions. */
.rc-demo .rc-demo-recurring__date {
  display: flex;
  align-self: stretch;
  align-items: center;
  min-width: 3.5rem;
  font-weight: 500;
  color: var(--rc-text-primary);
  cursor: pointer;
}

/* The status is the row's middle column, not a badge on it — the original
   colours the words themselves, and a pill wide enough for "Relance en
   attente" would eat the width the amount field needs on a phone. */
.rc-demo .rc-demo-recurring__status {
  justify-self: start;
  font-weight: 500;
}

/* Four tones, named for what the row means rather than for a colour. Each is
   one of the theme's own tokens, so all four follow the page into dark mode.

   `--rc-success-border` and not `--rc-success-top` for the completed cycle:
   the status is 14px body text, where `--rc-success-top` reads at 4.15:1 on a
   white row and AA wants 4.5. The border token is the darker green in light
   and the lighter green in dark — the high-contrast member of the family in
   both — and `theme.css` already colours hero text with it. */
.rc-demo .rc-demo-recurring__status--done {
  color: var(--rc-success-border);
}

.rc-demo .rc-demo-recurring__status--due {
  color: var(--rc-text-blue);
}

.rc-demo .rc-demo-recurring__status--planned {
  color: var(--rc-text-secondary);
}

.rc-demo .rc-demo-recurring__status--retry {
  color: var(--rc-warning);
}

.rc-demo .rc-demo-recurring__amount {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 4px;
}

.rc-demo .rc-demo-recurring__currency {
  font-family: var(--font-mono);
  color: var(--rc-text-secondary);
}

.rc-demo .rc-demo-recurring__input {
  width: 5.5rem;
  /* 44px, the same target the shared fields take, and 16px text so that iOS
     Safari does not zoom the page when someone taps into the amount. */
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-input);
  background: var(--rc-band-deep);
  color: var(--rc-text-primary);
  font-size: 16px;
  text-align: right;
}

.rc-demo .rc-demo-recurring__input:focus-visible {
  outline: 2px solid var(--rc-text-blue);
  outline-offset: 1px;
}


/* ── gateway ─────────────────────────────────────────────────────────── */

/**
 * Payment gateway demo.
 *
 * The request panel, the inline controls row and the response heading — plus
 * the handful of colours the dark shell needs and `mocks.css` does not carry.
 *
 * Two things are worth knowing about that second group. The shared dark block
 * repaints the frame, the fields and the response body, but not the status
 * chips, whose colours are the light theme's `--rc-text-blue` and
 * `--rc-success-top` and read at about 2:1 against a charcoal frame. So the
 * chips are repainted here, scoped to this demo's own wrapper rather than to
 * `.rc-demo--dark`, so that nothing another variant writes can collide with it.
 * `--rc-cyan-400` and `--rc-green-500` are the tokens the React original uses
 * for exactly this, and neither is redefined by the dark theme — which is what
 * makes them safe on a panel that stays dark on a light page.
 */

/* ── Request panel ──────────────────────────────────────────────────────── */

.rc-demo .rc-demo-gateway__panel {
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-panel);
  /* The header strip's corners follow the panel's without a second radius. */
  overflow: hidden;
}

.rc-demo .rc-demo-gateway__panel-head,
.rc-demo .rc-demo-gateway__label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-secondary);
}

.rc-demo .rc-demo-gateway__panel-head {
  padding: 10px 16px;
  border-bottom: 1px solid var(--rc-line);
}

.rc-demo .rc-demo-gateway__code {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  /* Wrapped rather than clipped: on a phone the metadata line is wider than the
     panel, and a request body a reader has to scroll sideways to finish is a
     request body most readers do not finish. */
  white-space: pre-wrap;
  color: var(--rc-text-blue);
}

/* ── Controls ───────────────────────────────────────────────────────────── */

.rc-demo .rc-demo-gateway__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-panel);
}

/* The shared field is a stacked label over a full-width input. Here it is one
   inline control beside a button, which is the only thing that changes.
   Deliberately not `flex-grow`: a field that grows takes the whole row and
   drops the button onto a line of its own, which is what the longer French
   label was doing. It takes its natural width, the button sits beside it, and
   on a phone the wrap puts the button underneath. */
.rc-demo .rc-demo-gateway__controls .rc-demo__field {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
}

.rc-demo .rc-demo-gateway__controls .rc-demo__field label {
  margin-bottom: 0;
  white-space: nowrap;
}

/* 7rem, the width the original gives it. */
.rc-demo .rc-demo-gateway__controls .rc-demo__field input {
  flex: 0 1 7rem;
  width: 7rem;
  min-width: 4.5rem;
}

.rc-demo .rc-demo-gateway__controls .rc-demo__action {
  flex: 0 0 auto;
  width: auto;
}

/* ── Response ───────────────────────────────────────────────────────────── */

.rc-demo .rc-demo-gateway__result {
  margin-top: 16px;
}

.rc-demo .rc-demo-gateway__label {
  margin-bottom: 8px;
}

/* ── The dark shell ─────────────────────────────────────────────────────── */

.rc-demo--dark .rc-demo-gateway__panel,
.rc-demo--dark .rc-demo-gateway__controls {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.rc-demo--dark .rc-demo-gateway__panel-head {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.rc-demo--dark .rc-demo-gateway__panel-head,
.rc-demo--dark .rc-demo-gateway__label {
  color: rgba(230, 237, 247, 0.66);
}

.rc-demo--dark .rc-demo-gateway__code {
  color: var(--rc-cyan-400);
}

/* The field sits inside the controls box, so it has to be darker than the box
   rather than the same wash the shared dark rule gives every field. */
.rc-demo--dark .rc-demo-gateway__controls .rc-demo__field input {
  background: rgba(0, 0, 0, 0.28);
}

/* ── Phase colours on the dark shell ────────────────────────────────────── */

.rc-demo .rc-demo-gateway__status .rc-demo__status-idle {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(230, 237, 247, 0.66);
}

.rc-demo .rc-demo-gateway__status .rc-demo__status-busy {
  background: color-mix(in srgb, var(--rc-blue-600) 24%, transparent);
  color: var(--rc-cyan-400);
}

.rc-demo .rc-demo-gateway__status .rc-demo__status-success {
  background: color-mix(in srgb, var(--rc-green-500) 20%, transparent);
  color: var(--rc-green-500);
}

.rc-demo .rc-demo-gateway__result .rc-demo__response-success {
  color: var(--rc-green-500);
}

.rc-demo[data-rc-phase="success"] .rc-demo-gateway__result .rc-demo__response {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc-green-500) 50%, transparent);
}

/* The spinner inherits `currentColor`, and on the dark panel the busy line is
   near-white. The original spins it in cyan. */
.rc-demo .rc-demo-gateway__result .rc-demo__response-busy .rc-demo__spinner {
  color: var(--rc-cyan-400);
}


/* ── embedded ────────────────────────────────────────────────────────── */

/**
 * Embedded payments demo.
 *
 * Three surfaces, and the whole point of the demo is that a reader can see
 * where one stops and the next begins: the frame is the partner's product, the
 * card inside it is one screen of that product, and the dashed block inside the
 * card is the RapidCents component they drop in. Dashed rather than solid,
 * because it is a slot in someone else's page rather than a button of ours.
 *
 * The card is drawn by its edge rather than by a tint of its own. The React
 * original puts a white card on a cloud-grey frame, but the theme's demo frame
 * is already `--rc-band-raised`, so tinting the card would invert that
 * relationship — and in the dark scheme no pair of bands is further apart than
 * about 1.1:1 anyway, so a tint could not carry it there at all. See the note
 * on `.rc-demo-embedded-card` for what that costs and what it buys.
 */

.rc-demo-embedded-eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-secondary);
}

/* `--rc-line-strong` rather than the `--rc-line` the theme's cards usually
   carry. This particular edge is the demo's whole subject — it is the seam
   between the merchant's software and ours — and the dark palette holds its
   bands within about 1.1:1 of each other, so the card and the frame around it
   are the same colour there and the border is the only thing left to draw it.
   `--rc-line` measures 1.3:1 against the frame in both schemes; the strong
   token measures 1.7:1 in the light scheme and 2.3:1 in the dark one. */
.rc-demo-embedded-card {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--rc-line-strong, var(--rc-line));
  border-radius: var(--radius-xl);
  background: var(--rc-band-raised);
  box-shadow: var(--rc-shadow-sm);
}

.rc-demo-embedded-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--rc-text-primary);
}

.rc-demo-embedded-component {
  display: block;
  width: 100%;
  /* 44px, so the component is a comfortable target on a phone even before its
     padding and its wrapped label push it past 70. */
  min-height: 44px;
  margin-top: 12px;
  padding: 16px;
  border: 1px dashed var(--rc-text-blue);
  border-radius: var(--radius-lg);
  background: var(--rc-band-blue);
  color: var(--rc-text-blue);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--rc-motion-standard) var(--rc-ease-premium),
    background-color var(--rc-motion-standard) var(--rc-ease-premium),
    box-shadow var(--rc-motion-standard) var(--rc-ease-premium),
    color var(--rc-motion-standard) var(--rc-ease-premium);
}

.rc-demo-embedded-component:focus-visible {
  outline: 2px solid var(--rc-text-blue);
  outline-offset: 2px;
}

/* Busy. The script disables the button for the length of the phase so a second
   press cannot flick the panel back from saved to tokenizing. */
.rc-demo-embedded-component:disabled {
  cursor: default;
  opacity: 0.7;
}

/* Saved. The tint is mixed from `--rc-success-top`, but the label is
   `--rc-success-border` — the darker end of the same ramp. theme.css says why,
   at `.rc-badge`: `--rc-success-top` lands at 3.9:1 on a light band, under AA
   for text this size. On the tint over the card it measures 4.7:1 in the light
   scheme and 12.4:1 in the dark one. The React original colours this label with
   the bright green; that reads on its own tokens and does not on these. */
.rc-demo[data-rc-phase="success"] .rc-demo-embedded-component {
  border-color: var(--rc-success-border, var(--rc-text-blue));
  background: color-mix(in srgb, var(--rc-success-top, var(--rc-text-blue)) 12%, transparent);
  color: var(--rc-success-border, var(--rc-text-blue));
}

/* Hover only once the reveal has handed over, and drawn from `currentColor` so
   the ring follows the phase instead of needing a second rule to beat the
   success colours on specificity. */
.rc-demo[data-rc-ready] .rc-demo-embedded-component:hover:not(:disabled) {
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}

/* One label per phase, all three in the markup, one displayed. */
.rc-demo-embedded-label {
  display: none;
}

.rc-demo:not([data-rc-phase]) .rc-demo-embedded-label--idle,
.rc-demo[data-rc-phase="busy"] .rc-demo-embedded-label--busy,
.rc-demo[data-rc-phase="success"] .rc-demo-embedded-label--done {
  display: inline;
}

.rc-demo-embedded-caption {
  margin: 8px 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--rc-text-disabled);
}

@media (prefers-reduced-motion: reduce) {
  .rc-demo-embedded-component {
    transition: none;
  }
}


/* ── centa ───────────────────────────────────────────────────────────────── */

/**
 * Centa assistant demo.
 *
 * A conversation rather than a screen: one question bubble, one answer bubble,
 * and three buttons that choose which exchange is on show. The slot machinery
 * is the terminal demo's, for the reason given there — the markup runs highest
 * step first, the script marks every step at or below the current index, and
 * the stylesheet displays the first marked slot and hides what follows it. With
 * no script there is no `data-visible` anywhere and the first slot in the
 * source shows, which is a complete question and a complete answer.
 */

.rc-demo-centa__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.rc-demo-centa__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-secondary);
}

.rc-demo-centa__tag {
  flex: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rc-blue-600) 10%, transparent);
  padding: 2px var(--space-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--rc-blue-600);
}

.rc-demo-centa__thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.rc-demo-centa__question,
.rc-demo-centa__answer {
  margin: 0;
  max-width: 92%;
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
  line-height: 1.55;
}

/* The merchant's side: aligned right, dark, and squared off at the corner
   nearest the speaker, which is the convention every messaging interface uses
   to say who is talking without labelling either turn. */
.rc-demo-centa__question {
  align-self: flex-end;
  border-radius: var(--radius-xl) var(--radius-xl) var(--space-1) var(--radius-xl);
  background: var(--rc-navy-900);
  color: #ffffff;
}

.rc-demo-centa__answer {
  align-self: flex-start;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--space-1);
  background: var(--rc-band-panel);
  color: var(--rc-text-secondary);
}

.rc-demo-centa__asks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.rc-demo-centa__ask {
  /* 44px so the target clears the touch floor; the label alone is ~28px. */
  min-height: 44px;
  border: 1px solid var(--rc-line);
  border-radius: 999px;
  background: var(--rc-band-panel);
  padding: var(--space-2) var(--space-4);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--rc-text-secondary);
  cursor: pointer;
  transition: border-color var(--rc-motion-fast, 150ms) ease, color var(--rc-motion-fast, 150ms) ease;
}

.rc-demo-centa__ask:hover {
  border-color: var(--rc-blue-600);
  color: var(--rc-blue-600);
}

/* Slot machinery — see the terminal demo for why it is shaped this way. */

.rc-demo-centa__slot {
  display: none;
}

.rc-demo:not([data-rc-js]) .rc-demo-centa__slot:first-child {
  display: block;
}

.rc-demo[data-rc-js] .rc-demo-centa__slot:last-child {
  display: block;
  opacity: 1;
  transform: none;
}

.rc-demo[data-rc-js] .rc-demo-centa__slot[data-visible="true"] {
  display: block;
}

.rc-demo[data-rc-js] .rc-demo-centa__slot[data-visible="true"] ~ .rc-demo-centa__slot {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE PRODUCT-MATCHED DEMOS

   Twenty-nine of the thirty-eight variants the content names had no mock at
   all, so on 87 of the 126 product items the hero fell back to the dashboard
   and every one of those pages showed the same screen. What follows is the
   shared vocabulary those twenty-nine are drawn with, and then one banner per
   variant for the handful of rules that are genuinely its own.

   The vocabulary exists because the alternative was measured: an earlier pass
   over this theme shipped 92 classes with no rule behind them, which renders
   as unstyled markup — worse than an empty box, because it looks like a bug
   the reader cannot report. Six primitives shared by twenty-nine variants can
   be checked by reading one screen of CSS; five hundred bespoke ones cannot.

   Everything here stays inside `.rc-demo`, which `mocks-harness.php` check 10
   enforces on every selector in this file.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Screen-reader-only text ───────────────────────────────────────────────
   The React mocks name their controls with `aria-label`. On an input the
   harness requires a real `<label for>` instead, so the ports bind a label and
   hide it here. Not `display: none`, which would take it out of the
   accessibility tree along with the pixels. */

.rc-demo__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Head ──────────────────────────────────────────────────────────────── */

.rc-demo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--rc-line-soft);
}

.rc-demo__head-title {
  margin: 0;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-secondary);
}

/* A pill sitting beside a title must not be squeezed to two lines by a long
   French title; the title wraps instead. */
.rc-demo__head .rc-demo__pill {
  flex-shrink: 0;
}

.rc-demo__pill--info {
  background: color-mix(in srgb, var(--rc-text-blue) 14%, transparent);
  color: var(--rc-text-blue);
}

.rc-demo__pill--warn {
  background: color-mix(in srgb, var(--rc-amber-500) 18%, transparent);
  color: var(--rc-warning, var(--rc-amber-500));
}

.rc-demo__pill--danger {
  background: color-mix(in srgb, var(--rc-red-500) 16%, transparent);
  color: var(--rc-red-500);
}

/* ── Label / value ladders ─────────────────────────────────────────────────
   `grid` rather than `flex` with `justify-content: space-between`, because
   these rows carry an optional middle cell — a count, a card mark, a status —
   and a flex row would let a long French label push the figure off the end.
   The figure column is fixed and the label column is what gives. */

.rc-demo__kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 10px;
  padding-block: 5px;
  font-size: 0.75rem;
  line-height: 1.35;
}

.rc-demo__kv:not(:last-child) {
  border-bottom: 1px solid var(--rc-line-soft);
}

.rc-demo__kv-label {
  min-width: 0;
  color: var(--rc-text-secondary);
}

.rc-demo__kv-meta {
  grid-column: 1;
  grid-row: 2;
  font-size: 11px;
  color: var(--rc-text-disabled);
}

.rc-demo__kv-value {
  grid-column: 2;
  grid-row: 1;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--rc-text-primary);
  white-space: nowrap;
}

.rc-demo__kv-value--warn {
  color: var(--rc-warning, var(--rc-amber-500));
}

.rc-demo__kv-value--ok {
  color: var(--rc-success-top, var(--rc-text-blue));
}

.rc-demo__kv-value--muted {
  font-weight: 500;
  color: var(--rc-text-secondary);
}

.rc-demo__kv--total {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--rc-line);
  border-bottom: 0 !important;
  font-weight: 600;
}

.rc-demo__kv--total .rc-demo__kv-label {
  color: var(--rc-text-primary);
}

.rc-demo__kv--total .rc-demo__kv-value {
  font-size: 1rem;
}

/* ── Chips ─────────────────────────────────────────────────────────────────
   A selection the React component tracks and this port cannot. They are spans
   rather than buttons on purpose: with `theme.js` out of reach there is
   nothing to press, and a dead button is a promise the page does not keep. */

.rc-demo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rc-demo__chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--rc-text-secondary);
}

.rc-demo__chip--on {
  border-color: transparent;
  background: var(--rc-text-blue);
  color: #ffffff;
}

/* ── The dark device panel ─────────────────────────────────────────────────
   Fixed colours, not tokens. This is a card terminal's screen: it is the same
   near-black in the light theme and the midnight one, because the object it
   is drawing does not change colour with the page around it. Everything
   inside it is therefore written against that fixed ground rather than
   against `--rc-text-*`, which flips. */

.rc-demo__screen {
  padding: 12px 14px;
  border-radius: var(--radius-xl);
  background: var(--rc-navy-900);
  color: #ffffff;
}

.rc-demo__screen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rc-demo__screen-title {
  margin: 0;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.rc-demo__screen-note {
  margin: 4px 0 0;
  font-size: 10px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.6);
}

.rc-demo__screen-note--warn {
  color: var(--rc-amber-500);
}

.rc-demo__screen-note--ok {
  color: var(--rc-green-500);
}

/* The connectivity / status chip on a device screen. */
.rc-demo__screen-chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.rc-demo__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rc-green-500);
}

.rc-demo__dot--warn { background: var(--rc-amber-500); }
.rc-demo__dot--info { background: var(--rc-cyan-400); }
.rc-demo__dot--off  { background: rgba(255, 255, 255, 0.3); }

.rc-demo__screen-label {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.rc-demo__screen-amount {
  margin: 2px 0 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.rc-demo__screen-amount small {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

/* Rows inside the device screen: the same ladder, inverted. */
.rc-demo__screen .rc-demo__kv-label,
.rc-demo__screen .rc-demo__kv-meta {
  color: rgba(255, 255, 255, 0.65);
}

.rc-demo__screen .rc-demo__kv-value {
  color: #ffffff;
}

.rc-demo__screen .rc-demo__kv:not(:last-child) {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.rc-demo__screen .rc-demo__kv--total {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.rc-demo__screen .rc-demo__kv--total .rc-demo__kv-label {
  color: rgba(255, 255, 255, 0.65);
}

.rc-demo__screen .rc-demo__chip {
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.78);
}

.rc-demo__screen .rc-demo__chip--on {
  border-color: transparent;
  background: var(--rc-text-blue);
  color: #ffffff;
}

/* The edge legends on a card reader — TAP along the top, CHIP at the base. */
.rc-demo__edge {
  margin: 6px 0 0;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.65);
}

.rc-demo__edge--live {
  color: var(--rc-cyan-400);
}

/* ── Paper ─────────────────────────────────────────────────────────────────
   `--surface-ice` rather than `--surface-cloud`, which is the fix the React
   original records: cloud resolves BELOW the card in the midnight theme, so a
   slip of thermal paper became a 1.04:1 inset of the panel it was supposed to
   be lying on. The perforated edge is drawn in `--text-muted` for the same
   reason — `--border-light` is rgba(120,200,255,0.16) on midnight and is not
   an edge at all. */

.rc-demo__paper {
  margin: 10px 16px 0;
  padding: 6px 12px 8px;
  border-inline: 1px dashed var(--text-muted);
  border-bottom: 2px dashed var(--text-muted);
  background: var(--surface-ice);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.5;
  color: var(--text-primary);
}

.rc-demo__paper-stamp {
  margin: 0 0 2px;
  padding-block: 1px;
  border-block: 1px dashed var(--text-muted);
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.rc-demo__paper-head {
  margin: 0;
  text-align: center;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.rc-demo__paper-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: var(--text-muted);
}

.rc-demo__paper-row span:first-child {
  min-width: 0;
}

.rc-demo__paper-value {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.rc-demo__paper-row--total {
  margin-top: 2px;
  padding-top: 2px;
  border-top: 1px solid var(--text-muted);
  font-weight: 700;
  color: var(--text-primary);
}

/* ── Bars ──────────────────────────────────────────────────────────────────
   Width, not transform: these never animate, so there is no layout property
   being animated and nothing for `prefers-reduced-motion` to object to. */

.rc-demo__bar {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.rc-demo__bar-track {
  fill: var(--rc-band-panel);
}

.rc-demo__bar-fill {
  fill: var(--rc-text-blue);
}

.rc-demo__bar--ok .rc-demo__bar-fill { fill: var(--rc-green-500); }
.rc-demo__bar--warn .rc-demo__bar-fill { fill: var(--rc-amber-500); }
.rc-demo__bar--danger .rc-demo__bar-fill { fill: var(--rc-red-500); }

/* ── Panels, tables and small type the variants share ──────────────────── */

.rc-demo__panel {
  padding: 10px 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-panel);
}

.rc-demo__panel + .rc-demo__panel {
  margin-top: 8px;
}

.rc-demo__panel-title {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-secondary);
}

.rc-demo__cols {
  display: grid;
  gap: 8px;
}

@container (min-width: 380px) {
  .rc-demo__cols--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rc-demo__cols--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* A column header row above a ladder. The widths are set per variant where
   they differ; this only fixes the type. */
.rc-demo__cols-head {
  display: grid;
  gap: 8px;
  padding: 0 2px 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-disabled);
}

.rc-demo__row {
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-md);
  font-size: 11px;
  line-height: 1.3;
}

.rc-demo__row + .rc-demo__row {
  margin-top: 6px;
}

.rc-demo__row--on {
  border-color: var(--rc-text-blue);
  background: color-mix(in srgb, var(--rc-text-blue) 8%, transparent);
}

.rc-demo__num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.rc-demo__strong {
  font-weight: 600;
  color: var(--rc-text-primary);
}

.rc-demo__muted {
  color: var(--rc-text-secondary);
}

.rc-demo__caption {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--rc-text-secondary);
}

.rc-demo__caption--small {
  font-size: 10px;
  color: var(--rc-text-disabled);
}

.rc-demo__ok {
  color: var(--rc-success-top, var(--rc-text-blue));
}

.rc-demo__warn {
  color: var(--rc-warning, var(--rc-amber-500));
}

.rc-demo__danger {
  color: var(--rc-red-500);
}

/* A figure large enough to be the point of the screen, on the light card
   rather than on a device face. */
.rc-demo__figure {
  margin: 2px 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--rc-text-primary);
}

.rc-demo__figure-label {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-disabled);
}

/* A short monospace token — a card mark, a reference, an id. */
.rc-demo__mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* The keypad row at the base of a device screen. Two inert legends and,
   where the demo has one, the real action button. */
.rc-demo__keys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.rc-demo__key {
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.rc-demo__keys .rc-demo__action {
  min-height: 34px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The action button sits at the foot of most of these demos rather than in
   the middle of them, so it gets the gap the ladder above it does not. */
.rc-demo__act {
  margin-top: 12px;
}

/* A two-line hint under the action, used where the React original prints a
   qualifier the demo must not silently drop — "an advisor confirms", "funds
   move on the next business day". */
.rc-demo__qualifier {
  margin: 8px 0 0;
  font-size: 10px;
  line-height: 1.4;
  color: var(--rc-text-disabled);
}

/* ── Phase swaps ───────────────────────────────────────────────────────────
   Two states of one line, both in the markup, one shown at a time — the same
   technique the status strip uses, generalised. A demo whose panel says OPEN
   before the button runs and CLOSED after it needs both strings present, and
   a live region that is emptied and refilled announces reliably where one
   created after the fact often does not.

   `revert` rather than a fixed display value, so the same pair works on a
   <p>, a <span> and a <div> without three utilities. A browser too old to
   support it leaves the element hidden, which lands the reader on the idle
   state — the correct resting frame either way. */

.rc-demo__swap-done {
  display: none;
}

.rc-demo[data-rc-phase="success"] .rc-demo__swap-idle {
  display: none;
}

.rc-demo[data-rc-phase="success"] .rc-demo__swap-done {
  display: revert;
}

/* ── payment-terminals ─────────────────────────────────────────────────────
   Four columns at every width: lane, form factor, connectivity, volume. The
   volume column is fixed and the lane column is what gives, because a French
   lane name wraps long before a five-figure volume does. */

.rc-demo-payment-terminals__grid {
  grid-template-columns: minmax(0, 1fr) 74px 52px 72px;
  gap: 6px;
}

@container (min-width: 380px) {
  .rc-demo-payment-terminals__grid {
    grid-template-columns: minmax(0, 1fr) 92px 66px 88px;
    gap: 8px;
  }
}

.rc-demo-payment-terminals__device {
  justify-content: center;
  width: 100%;
  border-color: var(--rc-text-blue);
  color: var(--rc-text-blue);
}

.rc-demo-payment-terminals__vol input {
  width: 100%;
  min-height: 30px;
  padding: 3px 6px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-sm);
  background: var(--rc-band-deep);
  color: var(--rc-text-primary);
  font-family: inherit;
  /* 16px everywhere else in this stylesheet, for the iOS zoom. This cell is
     72px wide and a five-figure volume does not fit in it at 16px, so the
     trade is taken the other way here and the field is left at 12px: the
     alternative is a number the reader cannot see all of. */
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rc-demo-payment-terminals__vol input:focus-visible {
  outline: 2px solid var(--rc-text-blue);
  outline-offset: 1px;
}

.rc-demo-payment-terminals__rollup {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rc-line);
}

.rc-demo-payment-terminals__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.rc-demo-payment-terminals__total p {
  margin: 0;
  font-size: 11px;
}

.rc-demo-payment-terminals__total .rc-demo__figure {
  font-size: 1rem;
}

.rc-demo-payment-terminals__total .rc-demo__figure small {
  font-size: 11px;
  font-weight: 500;
  color: var(--rc-text-disabled);
}

/* ── countertop-terminals ──────────────────────────────────────────────────
   The batch panel, its three rows and the slip of paper it prints. The paper
   only exists once the batch is closed, which here is the success phase. */

.rc-demo-countertop-terminals__batch {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.rc-demo-countertop-terminals__batch > div {
  min-width: 0;
}

.rc-demo-countertop-terminals__batch p {
  margin: 0;
}

.rc-demo-countertop-terminals__state {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--rc-amber-500) 16%, transparent);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rc-amber-500);
}

.rc-demo-countertop-terminals__state--closed {
  background: color-mix(in srgb, var(--rc-green-500) 16%, transparent);
  color: var(--rc-green-500);
}

.rc-demo-countertop-terminals__rows {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.rc-demo-countertop-terminals__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.75rem 5.75rem;
  align-items: center;
  gap: 8px;
  padding-block: 3px;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.65);
}

.rc-demo-countertop-terminals__row .rc-demo__num {
  color: #ffffff;
}

.rc-demo-countertop-terminals__refund {
  color: var(--rc-amber-500);
}

/* The close key keeps the cyan face it has on the device rather than the
   frame's default blue: it is a key on a terminal, not a button on a page. */
.rc-demo-countertop-terminals__close {
  border: 1px solid color-mix(in srgb, var(--rc-cyan-400) 60%, transparent);
  background: color-mix(in srgb, var(--rc-cyan-400) 18%, transparent);
  color: var(--rc-cyan-400);
}

.rc-demo-countertop-terminals__close:hover:not(:disabled) {
  background: color-mix(in srgb, var(--rc-cyan-400) 28%, transparent);
  filter: none;
}

.rc-demo-countertop-terminals__tail {
  margin-top: 0;
}

/* ── mobile-terminals ──────────────────────────────────────────────────────
   The handheld and the rail beside it. One column on a phone, because a 142px
   device column beside a 128px rail is two unreadable columns rather than
   two columns. */

.rc-demo-mobile-terminals__title {
  margin-bottom: 10px;
}

.rc-demo-mobile-terminals__grid {
  display: grid;
  gap: 10px;
}

@container (min-width: 400px) {
  .rc-demo-mobile-terminals__grid {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px;
  }
}

.rc-demo-mobile-terminals__device {
  border-radius: var(--radius-2xl);
}

.rc-demo-mobile-terminals__table {
  min-width: 0;
  font-size: 10px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.6);
}

.rc-demo-mobile-terminals__server {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  font-size: 10px;
  font-weight: 500;
  color: #ffffff;
}

.rc-demo-mobile-terminals__tip {
  padding-top: 6px;
}

.rc-demo-mobile-terminals__read {
  margin-top: 10px;
}

/* The read-card key is a line on the device face, not a page button: a
   full-strength blue slab inside a terminal screen reads as a web form. */
.rc-demo-mobile-terminals__read .rc-demo__action {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  font-size: 11px;
  font-weight: 500;
  color: var(--rc-green-500);
}

.rc-demo-mobile-terminals__read .rc-demo__action:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
  filter: none;
}

.rc-demo-mobile-terminals__rail {
  min-width: 0;
}

.rc-demo-mobile-terminals__net {
  display: inline-block;
  margin: 0;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--rc-text-blue);
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
}

.rc-demo-mobile-terminals__rail .rc-demo__panel + .rc-demo__panel {
  margin-top: 8px;
}

/* ── rivo-go ───────────────────────────────────────────────────────────────
   The device, the printer slot welded to its base, and the counter the paper
   lands on. */

.rc-demo-rivo-go__conn {
  text-transform: none;
  letter-spacing: 0;
}

.rc-demo-rivo-go__device {
  position: relative;
  padding: 8px 16px 6px;
}

.rc-demo-rivo-go__edge-top {
  margin-top: 0;
}

/* The stripe reader runs down the side of this unit, so its legend does too.
   `writing-mode` rather than a rotation: a rotated element keeps its
   horizontal box and overlaps the figure beside it. */
.rc-demo-rivo-go__edge-side {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.65);
}

.rc-demo-rivo-go__face {
  padding-right: 20px;
}

.rc-demo-rivo-go__totals {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 12px;
}

.rc-demo-rivo-go__totals .rc-demo__screen-label {
  margin-top: 0;
}

.rc-demo-rivo-go__split {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  margin: 0;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.6);
}

.rc-demo-rivo-go__tips {
  margin-top: 6px;
}

.rc-demo-rivo-go__signed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.rc-demo-rivo-go__sig {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
}

.rc-demo-rivo-go__sig svg {
  width: 56px;
  height: 16px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
}

.rc-demo-rivo-go__approved {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rc-green-500);
}

.rc-demo-rivo-go__slot {
  position: relative;
  width: 58%;
  height: 7px;
  margin: 0 auto;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--rc-navy-900);
}

.rc-demo-rivo-go__slot::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 16px;
  left: 16px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.25);
}

.rc-demo-rivo-go__counter {
  padding: 8px 0 10px;
  border-radius: var(--radius-lg);
  background: var(--rc-band-deep);
}

.rc-demo-rivo-go__counter .rc-demo__paper {
  margin-top: 0;
}

.rc-demo-rivo-go__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.rc-demo-rivo-go__controls .rc-demo__field {
  margin: 0;
  width: 108px;
}

/* ── smart-terminals ───────────────────────────────────────────────────────
   The app tray, the catalogue rows and the approval that lands under them. */

.rc-demo-smart-terminals__tray {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.rc-demo-smart-terminals__app {
  position: relative;
  display: block;
  padding: 6px 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-panel);
}

.rc-demo-smart-terminals__app--on {
  border-color: var(--rc-text-blue);
  background: color-mix(in srgb, var(--rc-text-blue) 8%, transparent);
}

.rc-demo-smart-terminals__app-name {
  display: block;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--rc-text-primary);
}

.rc-demo-smart-terminals__app--on .rc-demo-smart-terminals__app-name {
  color: var(--rc-text-blue);
}

.rc-demo-smart-terminals__app-kind {
  display: block;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--rc-text-disabled);
}

/* Navy ink on the green, not white: --rc-green-500 is bright enough that white
   on it lands near 1.9:1, and this badge carries a number rather than
   decorating a dot. */
.rc-demo-smart-terminals__badge {
  position: absolute;
  top: -7px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: var(--radius-pill);
  background: var(--rc-green-500);
  font-size: 10px;
  font-weight: 700;
  color: var(--rc-navy-950);
}

.rc-demo[data-rc-phase="success"] .rc-demo-smart-terminals__badge {
  display: flex;
}

.rc-demo-smart-terminals__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  padding: 5px 10px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  font-size: 0.8125rem;
}

.rc-demo-smart-terminals__item + .rc-demo-smart-terminals__item {
  margin-top: 6px;
}

.rc-demo-smart-terminals__item-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.rc-demo-smart-terminals__item-name .rc-demo__strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rc-demo-smart-terminals__stock {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--rc-band-panel);
  font-size: 10px;
  font-weight: 500;
  color: var(--rc-text-disabled);
}

.rc-demo-smart-terminals__stock--low {
  background: color-mix(in srgb, var(--rc-amber-500) 16%, transparent);
  color: var(--rc-warning, var(--rc-amber-500));
}

.rc-demo-smart-terminals__item-price {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
}

.rc-demo-smart-terminals__qty {
  font-size: 11px;
  font-weight: 600;
  color: var(--rc-text-blue);
}

.rc-demo-smart-terminals__mod {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 1px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--rc-text-blue);
  font-size: 10px;
  font-weight: 500;
  color: #ffffff;
}

.rc-demo-smart-terminals__foot {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--rc-line);
}

.rc-demo-smart-terminals__order {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--rc-text-disabled);
}

.rc-demo-smart-terminals__approved {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--rc-green-500) 40%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--rc-green-500) 10%, transparent);
}

.rc-demo-smart-terminals__auth {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rc-success-top, var(--rc-green-500));
}

/* ── rivo-touch ────────────────────────────────────────────────────────────
   Portrait glass beside a rail. The glass is a fixed box that clips, sized for
   the longest language rather than the shortest: at 164px wide the French home
   screen runs a two-line tap caption and two-line doors where English runs one
   of each, and sized in English it shaved the buttons off the bottom edge. */

.rc-demo-rivo-touch__grid {
  display: grid;
  gap: 12px;
}

@container (min-width: 400px) {
  .rc-demo-rivo-touch__grid {
    grid-template-columns: 180px minmax(0, 1fr);
  }
}

.rc-demo-rivo-touch__glass {
  position: relative;
  height: 348px;
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-3xl);
  background: var(--rc-navy-900);
  color: #ffffff;
  box-shadow: var(--shadow-float);
}

.rc-demo-rivo-touch__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.rc-demo-rivo-touch__bar svg {
  width: 22px;
  height: 10px;
  color: rgba(255, 255, 255, 0.6);
}

.rc-demo-rivo-touch__sale {
  margin-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.rc-demo-rivo-touch__amount {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.rc-demo-rivo-touch__amount input {
  width: 104px;
  padding: 2px 4px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1);
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  color: #ffffff;
}

.rc-demo-rivo-touch__amount input:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.6);
}

.rc-demo-rivo-touch__tap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8px;
}

.rc-demo-rivo-touch__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid var(--rc-blue-600);
  border-radius: 50%;
  background: color-mix(in srgb, var(--rc-blue-600) 25%, transparent);
  color: #ffffff;
  cursor: pointer;
  /* Transform, not width or height: the ring is the one thing in this file
     that moves under a finger, and animating a layout property here would
     reflow the glass it is centred in. */
  transition: transform var(--rc-motion-fast) var(--rc-ease-premium),
    background-color var(--rc-motion-fast) var(--rc-ease-premium);
}

.rc-demo-rivo-touch__ring svg {
  width: 28px;
  height: 28px;
}

.rc-demo-rivo-touch__ring:hover:not(:disabled) {
  transform: scale(1.04);
}

.rc-demo-rivo-touch__ring:active:not(:disabled) {
  transform: scale(0.97);
}

.rc-demo-rivo-touch__ring:focus-visible {
  outline: 2px solid var(--rc-cyan-400);
  outline-offset: 3px;
}

.rc-demo[data-rc-phase="busy"] .rc-demo-rivo-touch__ring {
  transform: scale(1.06);
  background: color-mix(in srgb, var(--rc-blue-600) 45%, transparent);
}

/* The ring is the only thing in the new variants that scales, and it scales in
   three places — hover, press, and the whole authorization. `.rc-demo-terminal__device`
   already answers reduced motion this way; this ring did not, so a reader who
   asks for less movement still got a button that grew under their pointer and
   stayed grown for the length of the charge. The colour change carries the
   same three states on its own. */
@media (prefers-reduced-motion: reduce) {
  .rc-demo-rivo-touch__ring {
    transition: none;
  }

  .rc-demo-rivo-touch__ring:hover:not(:disabled),
  .rc-demo-rivo-touch__ring:active:not(:disabled),
  .rc-demo[data-rc-phase="busy"] .rc-demo-rivo-touch__ring {
    transform: none;
  }
}

.rc-demo-rivo-touch__caption {
  margin: 8px 0 0;
  min-height: 24px;
  padding-inline: 4px;
  text-align: center;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
}

.rc-demo-rivo-touch__doors {
  margin-top: 8px;
}

.rc-demo-rivo-touch__or {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.rc-demo-rivo-touch__or::before,
.rc-demo-rivo-touch__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.rc-demo-rivo-touch__or span {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.5);
}

.rc-demo-rivo-touch__door-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.rc-demo-rivo-touch__door {
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
}

.rc-demo-rivo-touch__chip-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
}

.rc-demo-rivo-touch__glass-chip {
  padding: 4px 2px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 8px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.6);
}

.rc-demo-rivo-touch__glass-chip--on {
  border-color: var(--rc-blue-600);
  color: #ffffff;
}

/* Opaque, and over everything: in the original the route underneath is
   unmounted rather than hidden, so nothing behind it stays reachable. */
.rc-demo-rivo-touch__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-inline: 12px;
  background: var(--rc-green-500);
  text-align: center;
  color: var(--rc-navy-900);
}

.rc-demo[data-rc-phase="success"] .rc-demo-rivo-touch__wash {
  display: flex;
}

.rc-demo-rivo-touch__wash p {
  margin: 0;
  font-size: 9px;
  font-weight: 500;
}

.rc-demo-rivo-touch__wash-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.rc-demo-rivo-touch__wash-amount {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rc-demo-rivo-touch__rail {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.rc-demo-rivo-touch__radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-pill);
  background: var(--rc-band-panel);
  font-size: 11px;
  font-weight: 600;
  color: var(--rc-text-blue);
}

.rc-demo-rivo-touch__log {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--rc-line);
}

.rc-demo-rivo-touch__log ul {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.rc-demo-rivo-touch__log li {
  padding: 6px 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-panel);
}

.rc-demo-rivo-touch__log li + li {
  margin-top: 6px;
}

.rc-demo-rivo-touch__log p {
  margin: 0;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rc-demo-rivo-touch__log .rc-demo__num {
  font-size: 10px;
  text-align: left;
}

/* ── rivo-link ─────────────────────────────────────────────────────────────
   The device keeps its dark treatment in both themes on purpose: it is a
   physical object sitting on the card, not a surface of the page. */

.rc-demo-rivo-link__device {
  max-width: 268px;
  margin: 8px auto 0;
  padding: 10px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-2xl);
  background: var(--rc-navy-900);
  box-shadow: var(--shadow-float);
}

.rc-demo-rivo-link__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.rc-demo-rivo-link__display {
  height: 68px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rc-cyan-400) 25%, transparent);
  border-radius: var(--radius-lg);
  background: var(--surface-graphite);
}

/* The slot swap, the same shape `rc-demo-terminal__slot` uses: written highest
   step first, and the first visible one wins. With the script blocked and no
   `data-visible` anywhere that is the approved screen, which is the finished
   demo and the honest resting frame. */
.rc-demo-rivo-link__slot {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 8px 10px;
  color: #ffffff;
}

.rc-demo:not([data-rc-js]) .rc-demo-rivo-link__slot:first-child {
  display: flex;
}

/* Before the first beat lands — the frame's opening moment, and every replay —
   nothing is marked, and without this the display is a lit screen showing
   nothing for one step length. The markup runs highest step first, so the LAST
   slot is the step-0 beat. `opacity` and `transform` come with it because the
   shared rule parks every unmarked step at zero opacity. */
.rc-demo[data-rc-js] .rc-demo-rivo-link__slot:last-child {
  display: flex;
  opacity: 1;
  transform: none;
}

.rc-demo[data-rc-js] .rc-demo-rivo-link__slot[data-visible="true"] {
  display: flex;
}

.rc-demo[data-rc-js] .rc-demo-rivo-link__slot[data-visible="true"] ~ .rc-demo-rivo-link__slot {
  display: none;
}

/* The OK key names the ENTER PIN slot, so during the authorization the display
   sits on the screen this page exists to show. When the phase turns the
   approval paints over it, whichever slot the sequence had left marked. */
.rc-demo[data-rc-phase="success"] .rc-demo-rivo-link__slot {
  display: none;
}

.rc-demo[data-rc-phase="success"] .rc-demo-rivo-link__slot--approved {
  display: flex;
  opacity: 1;
  transform: none;
}

.rc-demo-rivo-link__slot--approved {
  background: var(--rc-green-500);
  color: var(--rc-navy-900);
}

.rc-demo-rivo-link__line {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.rc-demo-rivo-link__slot--approved .rc-demo-rivo-link__line {
  align-items: baseline;
}

.rc-demo-rivo-link__instruction {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-cyan-400);
}

.rc-demo-rivo-link__state {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rc-demo-rivo-link__amount {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rc-demo-rivo-link__slot--approved .rc-demo-rivo-link__amount {
  font-size: 22px;
}

.rc-demo-rivo-link__note {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.8;
}

.rc-demo-rivo-link__dots {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
}

.rc-demo-rivo-link__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rc-cyan-400);
}

.rc-demo-rivo-link__pad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.rc-demo-rivo-link__key {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.1);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.rc-demo-rivo-link__key--legend {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.35);
}

.rc-demo-rivo-link__key--cancel {
  background: color-mix(in srgb, var(--rc-red-500) 15%, transparent);
  color: var(--rc-red-500);
}

.rc-demo-rivo-link__key--correct {
  background: color-mix(in srgb, var(--rc-amber-500) 15%, transparent);
  color: var(--rc-amber-500);
}

/* Column four, rows three and four: a dedicated green OK, findable without
   looking down. It is the one live control on the pad. */
.rc-demo-rivo-link__enter {
  grid-column: 4;
  grid-row: 3 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--rc-green-500) 20%, transparent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rc-green-500);
  cursor: pointer;
  transition: background-color var(--rc-motion-fast) var(--rc-ease-premium);
}

.rc-demo-rivo-link__enter:hover:not(:disabled) {
  background: color-mix(in srgb, var(--rc-green-500) 35%, transparent);
}

.rc-demo-rivo-link__enter:disabled {
  cursor: default;
  opacity: 0.5;
}

.rc-demo-rivo-link__enter:focus-visible {
  outline: 2px solid var(--rc-cyan-400);
  outline-offset: 2px;
}

/* ── restaurant-pos ────────────────────────────────────────────────────────
   The check, the two seats, and the handheld strip at the foot of it. The
   strip is midnight in BOTH themes, so every colour inside it is a token or a
   white-alpha — never a page surface that flips. */

.rc-demo-restaurant-pos__lines {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.rc-demo-restaurant-pos__line {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding-block: 3px;
  font-size: 0.8125rem;
}

.rc-demo-restaurant-pos__seat {
  height: 20px;
  border: 1px solid var(--rc-text-blue);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--rc-text-blue) 10%, transparent);
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  color: var(--rc-text-blue);
}

.rc-demo-restaurant-pos__name {
  min-width: 0;
  color: var(--rc-text-primary);
}

.rc-demo-restaurant-pos__name > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rc-demo-restaurant-pos__mod {
  font-size: 10px;
  color: var(--rc-text-disabled);
}

.rc-demo-restaurant-pos__totals {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--rc-line);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  color: var(--rc-text-disabled);
}

.rc-demo-restaurant-pos__seats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.rc-demo-restaurant-pos__card {
  padding: 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-xl);
  background: var(--rc-band-panel);
}

.rc-demo-restaurant-pos__card--active {
  border-color: var(--rc-text-blue);
  background: color-mix(in srgb, var(--rc-text-blue) 8%, transparent);
}

.rc-demo-restaurant-pos__card p {
  margin: 0;
}

.rc-demo-restaurant-pos__card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 4px;
}

.rc-demo-restaurant-pos__card-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--rc-text-primary);
}

.rc-demo-restaurant-pos__transfer {
  padding: 1px 4px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-sm);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--rc-text-blue);
}

.rc-demo-restaurant-pos__split {
  margin-top: 4px !important;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--rc-text-disabled);
}

.rc-demo-restaurant-pos__card-total {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rc-text-primary);
}

.rc-demo-restaurant-pos__pad {
  margin-top: 8px;
  border-radius: var(--radius-xl);
}

.rc-demo-restaurant-pos__pad-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.rc-demo-restaurant-pos__pad-head > span {
  min-width: 0;
}

.rc-demo-restaurant-pos__ask {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #ffffff;
}

.rc-demo-restaurant-pos__device {
  display: block;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.6);
}

.rc-demo-restaurant-pos__tip {
  flex-shrink: 0;
  text-align: right;
}

.rc-demo-restaurant-pos__tip-value {
  display: block;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.rc-demo-restaurant-pos__tip-base {
  display: block;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.6);
}

/* The selected chip is cyan with navy ink. `--rc-blue-600` under white text
   resolves to 3.9:1 in the site's default dark theme, and the tip chip is the
   one control on this strip whose selected state carries the meaning. */
.rc-demo-restaurant-pos__pad .rc-demo__chip--on {
  background: var(--rc-cyan-400);
  color: var(--rc-navy-900);
}

/* ── retail-pos ────────────────────────────────────────────────────────────
   The scan readout, the basket, and the size matrix the sale moves. */

.rc-demo-retail-pos__scan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  font-size: 11px;
}

.rc-demo-retail-pos__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  background: var(--rc-band-panel);
  font-size: 0.8125rem;
}

.rc-demo-retail-pos__item {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rc-demo-retail-pos__matrix {
  margin-top: 12px;
  padding: 10px;
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--rc-text-blue) 8%, transparent);
}

.rc-demo-retail-pos__matrix > p:first-child {
  margin: 0;
  font-size: 11px;
}

.rc-demo-retail-pos__sizes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.rc-demo-retail-pos__size {
  display: block;
  padding: 4px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-raised);
  text-align: center;
}

.rc-demo-retail-pos__size--on {
  border-color: var(--rc-text-blue);
  box-shadow: inset 0 0 0 1px var(--rc-text-blue);
}

.rc-demo-retail-pos__size-face {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-disabled);
}

.rc-demo-retail-pos__size-count {
  display: block;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rc-text-primary);
}

.rc-demo-retail-pos__size-count--out {
  color: var(--rc-warning, var(--rc-amber-500));
}

.rc-demo-retail-pos__tender {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rc-line);
}

.rc-demo-retail-pos__tender > div:first-child {
  min-width: 0;
}

.rc-demo-retail-pos__tender-act {
  flex-shrink: 0;
  width: 58%;
  max-width: 220px;
}

.rc-demo-retail-pos__tender-act .rc-demo__caption {
  text-align: center;
}

/* ── grocery-pos ───────────────────────────────────────────────────────────
   The lane, the scale line, and the check that holds the sale. */

.rc-demo-grocery-pos__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding: 6px 10px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  font-size: 0.8125rem;
}

.rc-demo-grocery-pos__row--flag {
  border-left: 3px solid var(--rc-amber-500);
}

.rc-demo[data-rc-phase="success"] .rc-demo-grocery-pos__row--flag {
  border-left-color: var(--rc-green-500);
}

.rc-demo-grocery-pos__label {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  color: var(--rc-text-primary);
}

.rc-demo-grocery-pos__label--rolled {
  font-style: italic;
  color: var(--rc-text-disabled);
}

.rc-demo-grocery-pos__weigh {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--rc-text-disabled);
}

.rc-demo-grocery-pos__weigh input {
  width: 56px;
  padding: 0 4px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-sm);
  background: var(--rc-band-deep);
  font-family: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--rc-text-primary);
}

.rc-demo-grocery-pos__weigh input:focus-visible {
  outline: 2px solid var(--rc-text-blue);
  outline-offset: 1px;
}

.rc-demo-grocery-pos__tag {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--rc-amber-500) 25%, transparent);
  font-size: 10px;
  font-weight: 600;
  color: var(--rc-text-primary);
}

.rc-demo-grocery-pos__tag--ok {
  background: color-mix(in srgb, var(--rc-green-500) 20%, transparent);
}

/* One slot, holding its height across both states so resolving the check does
   not jog the total bar under it. */
.rc-demo-grocery-pos__slot {
  min-height: 68px;
  margin-top: 12px;
}

.rc-demo-grocery-pos__prompt {
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--rc-amber-500) 40%, transparent);
  border-left: 3px solid var(--rc-amber-500);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--rc-amber-500) 10%, transparent);
}

.rc-demo-grocery-pos__prompt p {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--rc-text-primary);
}

.rc-demo-grocery-pos__prompt-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.rc-demo-grocery-pos__clear {
  width: auto;
  min-height: 28px;
  padding: 4px 10px;
  font-size: 11px;
}

.rc-demo-grocery-pos__drop {
  padding: 4px 10px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 600;
  color: var(--rc-text-secondary);
}

.rc-demo-grocery-pos__cleared {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border-left: 3px solid var(--rc-green-500);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--rc-green-500) 10%, transparent);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--rc-text-primary);
}

.rc-demo[data-rc-phase="success"] .rc-demo-grocery-pos__cleared {
  display: flex;
}

.rc-demo-grocery-pos__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--rc-line);
}

.rc-demo-grocery-pos__foot p {
  margin: 0;
}

/* The send control is a legend, not a button. It is disabled in the original
   for exactly as long as the prompt is open, and that refusal is the point of
   the screen — so it is never drawn as something to press. */
.rc-demo-grocery-pos__send {
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  background: var(--rc-band-panel);
  font-size: 12px;
  font-weight: 600;
  color: var(--rc-text-secondary);
}

.rc-demo-grocery-pos__send--ready {
  background: color-mix(in srgb, var(--rc-text-blue) 70%, transparent);
  color: #ffffff;
}

/* ── contracts-esignatures ─────────────────────────────────────────────────
   The document, the deposit clause, the pad and the record that holds both. */

.rc-demo-contracts-esignatures__doc {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rc-line);
}

.rc-demo-contracts-esignatures__doc > div:first-child {
  min-width: 0;
}

.rc-demo-contracts-esignatures__doc p {
  margin: 0;
}

.rc-demo-contracts-esignatures__title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--rc-text-primary);
}

.rc-demo-contracts-esignatures__total {
  flex-shrink: 0;
  text-align: right;
}

.rc-demo-contracts-esignatures__total .rc-demo__num {
  font-size: 0.875rem;
}

.rc-demo-contracts-esignatures__clause {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--rc-text-blue) 40%, transparent);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--rc-text-blue) 8%, transparent);
}

.rc-demo-contracts-esignatures__switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.75rem;
}

.rc-demo-contracts-esignatures__state {
  flex-shrink: 0;
  padding: 1px 8px;
  border: 1px solid var(--rc-text-blue);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--rc-text-blue);
}

.rc-demo-contracts-esignatures__deposit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.rc-demo-contracts-esignatures__deposit input {
  width: 84px;
  flex-shrink: 0;
  min-height: 30px;
  padding: 2px 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-deep);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--rc-text-primary);
}

.rc-demo-contracts-esignatures__deposit input:focus-visible {
  outline: 2px solid var(--rc-text-blue);
  outline-offset: 1px;
}

.rc-demo-contracts-esignatures__deposit .rc-demo__caption {
  margin: 0;
}

/* The pad. Dashed, because that is what a signature block looks like on paper,
   and 60px tall so the stroke below has somewhere to land. */
.rc-demo-contracts-esignatures__pad {
  position: relative;
  height: 60px;
  margin-top: 10px;
  border: 1px dashed var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-panel);
}

.rc-demo-contracts-esignatures__pad svg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 40px;
}

.rc-demo-contracts-esignatures__signer {
  position: absolute;
  right: 12px;
  bottom: 4px;
  left: 12px;
  margin: 0;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--rc-text-disabled);
}

.rc-demo-contracts-esignatures__record {
  min-height: 74px;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-panel);
}

.rc-demo-contracts-esignatures__record .rc-demo__caption {
  margin-top: 0;
}

.rc-demo-contracts-esignatures__record .rc-demo__caption + .rc-demo__caption {
  margin-top: 2px;
}

.rc-demo-contracts-esignatures__logged {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--rc-success-top, var(--rc-text-blue));
}

/* ── account-updater ───────────────────────────────────────────────────────
   Four stored cards, four outcomes, and the token panel that shows the token
   did not move. */

.rc-demo-account-updater__summary {
  margin-top: 0;
  margin-bottom: 10px;
}

.rc-demo-account-updater__row {
  display: block;
  padding: 8px 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
}

.rc-demo-account-updater__row + .rc-demo-account-updater__row {
  margin-top: 6px;
}

.rc-demo-account-updater__head {
  display: flex;
  min-height: 20px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  font-size: 13px;
}

.rc-demo-account-updater__chip {
  white-space: nowrap;
  padding: 1px 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  color: var(--rc-text-disabled);
}

.rc-demo-account-updater__chip--ok {
  border-color: color-mix(in srgb, var(--rc-green-500) 40%, transparent);
  background: color-mix(in srgb, var(--rc-green-500) 10%, transparent);
  color: var(--rc-success-top, var(--rc-text-blue));
}

.rc-demo-account-updater__chip--warn {
  border-color: color-mix(in srgb, var(--rc-amber-500) 40%, transparent);
  background: color-mix(in srgb, var(--rc-amber-500) 10%, transparent);
  color: var(--rc-warning, var(--rc-amber-500));
}

.rc-demo-account-updater__body {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.3;
}

.rc-demo-account-updater__was {
  text-decoration: line-through;
  color: var(--rc-text-disabled);
}

.rc-demo-account-updater__arrow {
  padding-inline: 4px;
  color: var(--rc-text-disabled);
}

.rc-demo-account-updater__now {
  font-weight: 600;
  color: var(--rc-success-top, var(--rc-text-blue));
}

.rc-demo-account-updater__token {
  margin-top: 12px;
}

.rc-demo-account-updater__token-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 8px;
  margin: 0;
  font-size: 11px;
  color: var(--rc-text-primary);
}

.rc-demo-account-updater__lines {
  margin: 8px 0 0;
}

.rc-demo-account-updater__lines > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}

.rc-demo-account-updater__lines dt {
  flex-shrink: 0;
  color: var(--rc-text-disabled);
}

.rc-demo-account-updater__lines dd {
  min-width: 0;
  margin: 0;
  text-align: right;
  color: var(--rc-text-primary);
}

/* ── disputes ──────────────────────────────────────────────────────────────
   The inbox, the open case and the template its reason code chose. */

.rc-demo-disputes__case {
  display: block;
  padding: 8px 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
}

.rc-demo-disputes__case + .rc-demo-disputes__case {
  margin-top: 6px;
}

.rc-demo-disputes__case-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.rc-demo-disputes__case-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  margin-top: 2px;
  font-size: 11px;
}

.rc-demo-disputes__chip {
  white-space: nowrap;
  padding: 1px 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  color: var(--rc-text-disabled);
}

.rc-demo-disputes__chip--danger {
  border-color: color-mix(in srgb, var(--rc-red-500) 40%, transparent);
  background: color-mix(in srgb, var(--rc-red-500) 10%, transparent);
  color: var(--rc-red-500);
}

.rc-demo-disputes__chip--warn {
  border-color: color-mix(in srgb, var(--rc-amber-500) 40%, transparent);
  background: color-mix(in srgb, var(--rc-amber-500) 10%, transparent);
  color: var(--rc-warning, var(--rc-amber-500));
}

.rc-demo-disputes__detail {
  margin-top: 8px;
}

.rc-demo-disputes__summary {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--rc-text-primary);
}

.rc-demo-disputes__template {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--rc-line);
}

.rc-demo-disputes__template-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 8px;
  margin: 0 0 8px;
  font-size: 11px;
}

/* Dashed, because nothing is attached yet: a solid row would read as a file
   that is already there. */
.rc-demo-disputes__doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border: 1px dashed var(--rc-line);
  border-radius: var(--radius-lg);
}

.rc-demo-disputes__doc + .rc-demo-disputes__doc {
  margin-top: 6px;
}

.rc-demo-disputes__doc > span:first-child {
  min-width: 0;
}

.rc-demo-disputes__doc span span {
  display: block;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rc-demo-disputes__doc .rc-demo__mono {
  font-size: 10px;
}

.rc-demo-disputes__doc-mark {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
  color: var(--rc-text-disabled);
}

.rc-demo-disputes__submit {
  display: block;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-raised);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--rc-text-disabled);
}

/* ── chargeback-protection ─────────────────────────────────────────────────
   The case, the guidance strip the reason code drives, and the three records
   the pack is built from. */

.rc-demo-chargeback-protection__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
}

.rc-demo-chargeback-protection__deadline {
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--rc-amber-500) 40%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--rc-amber-500) 10%, transparent);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--rc-text-primary);
}

.rc-demo-chargeback-protection__case {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--rc-text-primary);
}

.rc-demo-chargeback-protection__dates {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--rc-text-disabled);
}

/* The hue lives in the border and the tint. Every word inside is on the demo
   scope's own text tokens, which are pinned in both themes. */
.rc-demo-chargeback-protection__strip {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--rc-text-blue) 8%, transparent);
}

.rc-demo[data-rc-phase="success"] .rc-demo-chargeback-protection__strip {
  border-color: color-mix(in srgb, var(--rc-green-500) 40%, transparent);
  background: color-mix(in srgb, var(--rc-green-500) 10%, transparent);
}

.rc-demo-chargeback-protection__strip p {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}

.rc-demo-chargeback-protection__strip p + p {
  margin-top: 2px;
}

.rc-demo-chargeback-protection__records {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.rc-demo-chargeback-protection__record {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-panel);
}

.rc-demo-chargeback-protection__record + .rc-demo-chargeback-protection__record {
  margin-top: 6px;
}

/* Disabled for the reason the reporting fee boxes are, and drawn rather than
   left to the UA for the same one: a greyed tick beside "3 of 3 records
   included" would say the records are unavailable when they are attached. */
.rc-demo-chargeback-protection__record input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin: 2px 0 0;
  border: 1px solid var(--rc-text-blue);
  border-radius: 3px;
  background: transparent;
  opacity: 1;
}

.rc-demo-chargeback-protection__record input:checked {
  background: var(--rc-text-blue);
}

.rc-demo-chargeback-protection__record input:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 3px;
  height: 7px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.rc-demo-chargeback-protection__record label {
  min-width: 0;
  flex: 1;
}

.rc-demo-chargeback-protection__record-line {
  display: block;
  font-size: 11px;
  line-height: 1.3;
}

.rc-demo-chargeback-protection__source {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-style: italic;
  line-height: 1.3;
  color: var(--rc-text-disabled);
}

.rc-demo-chargeback-protection__controls {
  margin-top: 12px;
}

.rc-demo-chargeback-protection__note {
  margin-top: 8px;
}

.rc-demo-chargeback-protection__controls .rc-demo__status {
  margin-top: 8px;
  margin-bottom: 0;
}

/* ── Readonly fields ───────────────────────────────────────────────────────
   Several ports keep a field where their original has one but cannot let it be
   typed into, because the figures it drives are computed in component state
   the theme has no script for. The box stays a box — it is one in the screen
   being reproduced — and the cursor is the only thing that says it is a
   readout. Not `disabled`, which drops it out of the tab order and greys the
   value the reader came to read. */

.rc-demo input[readonly] {
  cursor: default;
  color: var(--rc-text-primary);
}

/* ── funding ───────────────────────────────────────────────────────────────
   The advance, its disclosed terms, and the daily remittance ledger. */

.rc-demo-funding__advance {
  margin: 8px 0 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--rc-text-primary);
}

.rc-demo-funding__terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  padding-block: 10px;
  border-block: 1px solid var(--rc-line);
}

.rc-demo-funding__terms p {
  margin: 0;
}

.rc-demo-funding__term-value {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--rc-text-primary);
}

.rc-demo-funding__term-sub {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--rc-text-disabled);
}

/* The acceptance, in the state the sequence leaves it. Not a control: a button
   here would imply the reader can accept funding inside a demonstration. */
.rc-demo-funding__accepted {
  display: block;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--rc-green-500) 12%, transparent);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--rc-success-top, var(--rc-text-primary));
}

.rc-demo-funding__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px 82px;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
}

.rc-demo-funding__when {
  display: block;
  min-width: 0;
}

.rc-demo-funding__when > span {
  display: block;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rc-demo-funding__when .rc-demo__mono {
  font-size: 10px;
}

.rc-demo-funding__today {
  margin-left: 4px;
  font-size: 10px;
  font-weight: 400;
  color: var(--rc-text-blue);
}

.rc-demo-funding__row .rc-demo__num {
  font-size: 12px;
  color: var(--rc-text-primary);
}

/* The amber is a tint behind an ink digit. As a text colour --rc-amber-500 has
   no light-theme override and lands at 1.8:1 on this card, and this is the one
   number the whole card is about. */
.rc-demo-funding__remitted {
  padding-inline: 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--rc-amber-500) 15%, transparent);
  font-weight: 600;
  color: var(--rc-text-financial, var(--rc-text-primary));
}

/* ── multi-location ────────────────────────────────────────────────────────
   Head office over regions, with the share of the chain drawn twice — once as
   a figure, once as the bar under it. */

.rc-demo-multi-location__scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.rc-demo-multi-location__scope p {
  margin: 0;
}

.rc-demo-multi-location__scopes {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
}

.rc-demo-multi-location__scope-on,
.rc-demo-multi-location__scope-off {
  padding: 4px 8px;
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 600;
}

.rc-demo-multi-location__scope-on {
  background: var(--rc-text-blue);
  color: #ffffff;
}

.rc-demo-multi-location__scope-off {
  color: var(--rc-text-disabled);
}

.rc-demo-multi-location__headline {
  margin-top: 12px;
}

.rc-demo-multi-location__total {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--rc-text-primary);
}

.rc-demo-multi-location__list {
  min-height: 170px;
  margin-top: 12px;
}

.rc-demo-multi-location__region {
  display: block;
  padding: 4px 12px 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
}

.rc-demo-multi-location__region + .rc-demo-multi-location__region {
  margin-top: 4px;
}

.rc-demo-multi-location__region-top,
.rc-demo-multi-location__region-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.rc-demo-multi-location__region-top {
  font-size: 13px;
}

.rc-demo-multi-location__region-meta {
  margin-top: 2px;
  font-size: 10px;
  color: var(--rc-text-disabled);
}

.rc-demo-multi-location__share {
  margin-top: 4px;
  height: 3px;
}

.rc-demo-multi-location__disputes {
  display: block;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--rc-text-blue) 8%, transparent);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--rc-text-blue);
}

/* ── payment-tokenization ──────────────────────────────────────────────────
   Two zones, one line between them, and the row that is the whole product. */

.rc-demo-payment-tokenization__pan {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 8px 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  font-size: 13px;
}

.rc-demo-payment-tokenization__exchange {
  margin-top: 4px;
  text-align: center;
}

.rc-demo-payment-tokenization__exchange svg {
  display: block;
  width: 14px;
  height: 10px;
  margin: 0 auto;
  color: var(--rc-text-disabled);
}

.rc-demo-payment-tokenization__token {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--rc-text-blue) 12%, transparent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--rc-text-blue);
}

.rc-demo-payment-tokenization__exchange .rc-demo__caption {
  text-align: center;
}

/* The line between the two zones, drawn as a rule that runs off the end of the
   label rather than as a box: nothing is contained by it, it is a boundary. */
.rc-demo-payment-tokenization__boundary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-disabled);
}

.rc-demo-payment-tokenization__boundary span:last-child {
  flex: 1;
  height: 1px;
  background: var(--rc-line);
}

.rc-demo-payment-tokenization__db {
  margin-top: 8px;
}

.rc-demo-payment-tokenization__db dl {
  margin: 0;
}

.rc-demo-payment-tokenization__db dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
}

.rc-demo-payment-tokenization__db dt {
  flex-shrink: 0;
  color: var(--rc-text-disabled);
}

.rc-demo-payment-tokenization__db dd {
  min-width: 0;
  margin: 0;
  text-align: right;
  color: var(--rc-text-primary);
}

.rc-demo-payment-tokenization__absent {
  font-weight: 600;
  color: var(--rc-success-top, var(--rc-text-blue)) !important;
}

.rc-demo-payment-tokenization__reuse {
  margin-top: 12px;
}

.rc-demo-payment-tokenization__charge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.rc-demo-payment-tokenization__charge label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-disabled);
}

.rc-demo-payment-tokenization__charge input {
  width: 96px;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-deep);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--rc-text-primary);
}

.rc-demo-payment-tokenization__charge .rc-demo__action {
  flex: 1;
  flex-basis: 140px;
  width: auto;
}

.rc-demo-payment-tokenization__receipt {
  padding: 8px 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-panel);
  font-size: 11px;
  line-height: 1.4;
  color: var(--rc-text-primary);
}

.rc-demo-payment-tokenization__ok {
  font-weight: 600;
  color: var(--rc-success-top, var(--rc-text-blue));
}

.rc-demo-payment-tokenization__ref {
  color: var(--rc-text-blue);
}

/* ── integrated-payments ───────────────────────────────────────────────────
   Four stages down one column, with the two wires between them indented so the
   direction of travel is legible without an arrow graphic. */

.rc-demo-integrated-payments__modes {
  display: flex;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-pill);
}

.rc-demo-integrated-payments__modes span {
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--rc-text-secondary);
}

.rc-demo-integrated-payments__mode--on {
  background: var(--rc-text-blue);
  color: #ffffff !important;
}

.rc-demo-integrated-payments__card {
  padding: 6px 10px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
}

.rc-demo-integrated-payments__card + .rc-demo-integrated-payments__card,
.rc-demo-integrated-payments__wire + .rc-demo-integrated-payments__card {
  margin-top: 4px;
}

.rc-demo-integrated-payments__card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.rc-demo-integrated-payments__card-top > span:first-child {
  flex-shrink: 0;
}

.rc-demo-integrated-payments__tag {
  display: inline-block;
  flex-shrink: 0;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--rc-band-panel);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-disabled);
}

.rc-demo-integrated-payments__wire {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-left: 12px;
  font-size: 10px;
  line-height: 1.4;
}

.rc-demo-integrated-payments__wire .rc-demo__mono {
  min-width: 0;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--rc-band-panel);
  overflow-wrap: anywhere;
  color: var(--rc-text-secondary);
}

.rc-demo-integrated-payments__chevron {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--rc-text-disabled);
}

.rc-demo-integrated-payments__tips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.rc-demo-integrated-payments__tips .rc-demo__chips {
  flex-shrink: 0;
}

.rc-demo-integrated-payments__tips .rc-demo__chip {
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--rc-band-panel);
  padding: 2px 8px;
}

.rc-demo-integrated-payments__tips > .rc-demo__num {
  margin-left: auto;
  font-size: 11px;
}

.rc-demo-integrated-payments__approved {
  margin: 4px 0 0;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--rc-green-500) 12%, transparent);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--rc-success-top, var(--rc-text-primary));
}

.rc-demo-integrated-payments__ledger {
  background: color-mix(in srgb, var(--rc-text-blue) 8%, transparent);
}

/* Held at the height of the three-line posting, so the card cannot collapse
   under a reader comparing the two integration modes. */
.rc-demo-integrated-payments__gl {
  min-height: 86px;
  margin-top: 4px;
}

.rc-demo-integrated-payments__gl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--rc-text-primary);
}

.rc-demo-integrated-payments__gl > div > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rc-demo-integrated-payments__posted {
  margin: 4px 0 0;
  padding-top: 4px;
  border-top: 1px solid var(--rc-line);
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rc-text-primary);
}

/* ── embedded-payments ─────────────────────────────────────────────────────
   The host application, the region RapidCents owns inside it, and the callback
   log. The accent is the pair the component opens on — violet at a 12px radius
   — and it is set here rather than inline, which this directory does not
   permit. Every colour is an existing design token, so both site themes stay
   correct. */

.rc-demo-embedded-payments {
  --rc-demo-host-accent: var(--rc-purple);
  --rc-demo-host-ink: var(--rc-icon-white);
  --rc-demo-host-radius: 12px;
}

.rc-demo-embedded-payments__host {
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-demo-host-radius);
  background: var(--rc-band-panel);
}

.rc-demo-embedded-payments__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 2px solid var(--rc-demo-host-accent);
}

.rc-demo-embedded-payments__logo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: var(--rc-demo-host-radius);
  background: var(--rc-demo-host-accent);
}

.rc-demo-embedded-payments__crumb {
  margin-left: auto;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--rc-text-disabled);
}

.rc-demo-embedded-payments__panel {
  margin: 12px;
  padding: 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-demo-host-radius);
  background: var(--rc-band-raised);
}

.rc-demo-embedded-payments__due {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rc-demo-embedded-payments__due p {
  margin: 0;
}

.rc-demo-embedded-payments__theme-chip {
  padding: 4px 8px;
  border: 1px solid var(--rc-demo-host-accent);
  border-radius: var(--rc-demo-host-radius);
  font-size: 10px;
  font-weight: 500;
  color: var(--rc-text-secondary);
}

.rc-demo-embedded-payments__components {
  margin-top: 8px;
}

.rc-demo-embedded-payments__wallets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.rc-demo-embedded-payments__wallets span {
  padding: 6px 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--rc-demo-host-radius);
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--rc-text-primary);
}

.rc-demo-embedded-payments__or {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 10px;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-disabled);
}

.rc-demo-embedded-payments__or::before,
.rc-demo-embedded-payments__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rc-line);
}

/* The one region RapidCents owns, and the only dashed blue edge on the frame.
   No swatch can be set to that blue, so the boundary survives any theme. */
.rc-demo-embedded-payments__iframe {
  position: relative;
  padding: 8px;
  border: 1px dashed var(--rc-text-blue);
  border-radius: var(--radius-lg);
}

.rc-demo-embedded-payments__iframe-tag {
  margin: 0;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-blue);
}

.rc-demo-embedded-payments__iframe label {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--rc-text-disabled);
}

.rc-demo-embedded-payments__iframe input {
  width: 100%;
  min-height: 32px;
  margin-top: 2px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--rc-demo-host-radius);
  background: var(--rc-band-panel);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--rc-text-primary);
}

.rc-demo-embedded-payments__meta {
  display: flex;
  gap: 16px;
  margin: 4px 0 0;
  font-size: 10px;
  color: var(--rc-text-disabled);
}

.rc-demo-embedded-payments__3ds {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding-inline: 12px;
  border: 1px solid var(--rc-text-blue);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--rc-text-blue) 12%, var(--rc-band-raised));
}

.rc-demo[data-rc-phase="busy"] .rc-demo-embedded-payments__3ds {
  display: flex;
}

.rc-demo-embedded-payments__3ds-title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--rc-text-blue);
}

.rc-demo-embedded-payments__3ds .rc-demo__caption {
  margin-top: 0;
}

.rc-demo-embedded-payments__pay {
  margin-top: 8px;
}

.rc-demo-embedded-payments__pay-btn {
  border-radius: var(--rc-demo-host-radius);
  background: var(--rc-demo-host-accent);
  color: var(--rc-demo-host-ink);
  font-size: 0.75rem;
}

.rc-demo-embedded-payments__widget {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--rc-text-secondary);
}

.rc-demo-embedded-payments__tokens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
}

.rc-demo-embedded-payments__swatches,
.rc-demo-embedded-payments__radii {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rc-demo-embedded-payments__swatch {
  width: 24px;
  height: 24px;
  border: 2px solid var(--rc-line);
  border-radius: 50%;
}

.rc-demo-embedded-payments__swatch--on {
  border-color: var(--rc-text-primary);
}

.rc-demo-embedded-payments__swatch--violet { background: var(--rc-purple); }
.rc-demo-embedded-payments__swatch--green  { background: var(--rc-green-500); }
.rc-demo-embedded-payments__swatch--teal   { background: var(--rc-teal-mid); }
.rc-demo-embedded-payments__swatch--amber  { background: var(--rc-amber-500); }

.rc-demo-embedded-payments__radii span {
  padding: 6px 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-md);
  font-size: 10px;
  font-weight: 500;
  color: var(--rc-text-disabled);
}

.rc-demo-embedded-payments__radius--on {
  border-color: var(--rc-text-blue) !important;
  background: color-mix(in srgb, var(--rc-text-blue) 10%, transparent);
  color: var(--rc-text-blue) !important;
}

.rc-demo-embedded-payments__log {
  margin-top: 8px;
}

.rc-demo-embedded-payments__log ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.6;
}

.rc-demo-embedded-payments__log li {
  display: flex;
  gap: 8px;
}

.rc-demo[data-rc-phase="success"] .rc-demo-embedded-payments__log li.rc-demo__swap-done {
  display: flex;
}

.rc-demo-embedded-payments__ev {
  flex-shrink: 0;
  color: var(--rc-text-blue);
}

.rc-demo-embedded-payments__log li span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── platform-payments ─────────────────────────────────────────────────────
   The connected account, the buyer charge, and the three parts it resolves
   into — indented off a rule, so the split reads as one number becoming
   three rather than as four unrelated rows. */

.rc-demo-platform-payments__account-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rc-demo-platform-payments__capability {
  padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--rc-success-top, var(--rc-green-500)) 45%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--rc-success-top, var(--rc-green-500)) 12%, transparent);
  font-size: 11px;
  font-weight: 600;
  color: var(--rc-text-primary);
}

.rc-demo-platform-payments__charge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.rc-demo-platform-payments__charge input {
  width: 112px;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-sm);
  background: var(--rc-band-deep);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--rc-text-primary);
}

.rc-demo-platform-payments__split {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid var(--rc-line);
}

.rc-demo-platform-payments__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-block: 2px;
  font-size: 0.875rem;
  color: var(--rc-text-secondary);
}

.rc-demo-platform-payments__line--fee {
  color: var(--rc-text-blue);
}

.rc-demo-platform-payments__line--fee .rc-demo__kv-value,
.rc-demo-platform-payments__line--fee .rc-demo__num {
  color: var(--rc-text-blue);
}

.rc-demo-platform-payments__line--seller .rc-demo__num {
  color: var(--rc-text-primary);
}

.rc-demo-platform-payments__pct {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.rc-demo-platform-payments__pct input {
  width: 44px;
  padding: 2px 4px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-sm);
  background: var(--rc-band-deep);
  font-family: inherit;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--rc-text-blue);
}

.rc-demo-platform-payments__payout {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rc-line);
}

.rc-demo-platform-payments__ledger {
  margin-top: 10px;
  padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--rc-green-500) 40%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--rc-green-500) 10%, transparent);
}

/* ── secure-card-vault ─────────────────────────────────────────────────────
   Two rows of two lines each: what the method is, and what is actually on the
   record behind it. */

.rc-demo-secure-card-vault__row {
  display: block;
  margin-top: 6px;
  padding: 6px 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
}

.rc-demo-secure-card-vault__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  font-size: 13px;
}

.rc-demo-secure-card-vault__line + .rc-demo-secure-card-vault__line {
  margin-top: 4px;
  font-size: 11px;
}

.rc-demo-secure-card-vault__exp {
  font-weight: 400;
  color: var(--rc-text-disabled);
}

.rc-demo-secure-card-vault__chip {
  white-space: nowrap;
  padding: 1px 8px;
  border: 1px solid color-mix(in srgb, var(--rc-text-blue) 45%, transparent);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  color: var(--rc-text-blue);
}

.rc-demo-secure-card-vault__chip--default {
  background: color-mix(in srgb, var(--rc-text-blue) 10%, transparent);
}

.rc-demo-secure-card-vault__chip--ok {
  border-color: color-mix(in srgb, var(--rc-green-500) 60%, transparent);
  background: color-mix(in srgb, var(--rc-green-500) 10%, transparent);
  color: var(--rc-text-primary);
}

.rc-demo-secure-card-vault__roles {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-xl);
  background: var(--rc-band-panel);
}

.rc-demo-secure-card-vault__roles > div {
  min-width: 0;
}

.rc-demo-secure-card-vault__roles .rc-demo__chips {
  margin-top: 4px;
}

.rc-demo-secure-card-vault__send {
  width: auto;
  flex-shrink: 0;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
}

/* ── fraud-prevention ──────────────────────────────────────────────────────
   Four rules, one verdict, and the decision bar the reviewer works from.
   Colour lives in the tint and the border; every word is on the scope's own
   ink, because 10px of an accent token here measures 1.5:1 to 2.8:1. */

.rc-demo-fraud-prevention__auth {
  margin-top: 8px;
}

.rc-demo-fraud-prevention__auth-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--rc-text-primary);
}

.rc-demo-fraud-prevention__heading {
  margin-top: 12px;
}

.rc-demo-fraud-prevention__rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 10px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  font-size: 11px;
  line-height: 1.4;
}

.rc-demo-fraud-prevention__rule--amount {
  position: relative;
  overflow: hidden;
  padding-left: 14px;
}

/* The accent bar, drawn as its own layer so the left edge never argues with
   the border on the box. */
.rc-demo-fraud-prevention__rule--amount::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 4px;
  background: var(--rc-red-500);
}

.rc-demo-fraud-prevention__threshold {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.rc-demo-fraud-prevention__threshold label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--rc-text-primary);
}

.rc-demo-fraud-prevention__threshold input {
  width: 76px;
  padding: 2px 6px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-sm);
  background: var(--rc-band-panel);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--rc-text-primary);
}

.rc-demo-fraud-prevention__chip {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 1px 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  color: var(--rc-text-primary);
}

.rc-demo-fraud-prevention__chip--pass {
  border-color: color-mix(in srgb, var(--rc-green-500) 40%, transparent);
  background: color-mix(in srgb, var(--rc-green-500) 10%, transparent);
}

.rc-demo-fraud-prevention__chip--flag {
  border-color: color-mix(in srgb, var(--rc-amber-500) 40%, transparent);
  background: color-mix(in srgb, var(--rc-amber-500) 12%, transparent);
}

.rc-demo-fraud-prevention__chip--trip {
  border-color: color-mix(in srgb, var(--rc-red-500) 40%, transparent);
  background: color-mix(in srgb, var(--rc-red-500) 12%, transparent);
}

.rc-demo-fraud-prevention__verdict {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--rc-amber-500) 40%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--rc-amber-500) 10%, transparent);
  font-size: 12px;
  line-height: 1.4;
  color: var(--rc-text-primary);
}

.rc-demo-fraud-prevention__verdict .rc-demo__dot {
  margin-top: 4px;
  width: 8px;
  height: 8px;
}

.rc-demo-fraud-prevention__decide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.rc-demo-fraud-prevention__btn {
  padding: 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--rc-text-primary);
}

.rc-demo-fraud-prevention__btn--approve {
  border-color: color-mix(in srgb, var(--rc-green-500) 50%, transparent);
  background: color-mix(in srgb, var(--rc-green-500) 10%, transparent);
}

.rc-demo-fraud-prevention__btn--decline {
  border-color: color-mix(in srgb, var(--rc-red-500) 50%, transparent);
  background: color-mix(in srgb, var(--rc-red-500) 10%, transparent);
}

/* ── international-payments ────────────────────────────────────────────────
   The card and its amount, the country the issuer sits in, and the three rows
   the rule set derives from it. */

.rc-demo-international-payments__card {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
}

.rc-demo-international-payments__card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  font-size: 0.875rem;
}

.rc-demo-international-payments__amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-left: auto;
}

.rc-demo-international-payments__amount input {
  width: 80px;
  padding: 2px 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-sm);
  background: var(--rc-band-deep);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--rc-text-primary);
}

.rc-demo-international-payments__issuer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
}

.rc-demo-international-payments__chip {
  padding: 1px 8px;
  border: 1px solid color-mix(in srgb, var(--rc-amber-500) 40%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--rc-amber-500) 10%, transparent);
  font-size: 10px;
  font-weight: 600;
  color: var(--rc-warning, var(--rc-amber-500));
}

.rc-demo-international-payments__countries {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.rc-demo-international-payments__country {
  padding: 4px 10px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--rc-text-disabled);
}

.rc-demo-international-payments__country--on {
  border-color: var(--rc-text-blue);
  background: color-mix(in srgb, var(--rc-text-blue) 10%, transparent);
  color: var(--rc-text-blue);
}

.rc-demo-international-payments__row {
  display: block;
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
}

.rc-demo-international-payments__row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.rc-demo-international-payments__verdict {
  flex-shrink: 0;
  text-align: right;
  font-weight: 500;
}

.rc-demo-international-payments__verdict--warn { color: var(--rc-warning, var(--rc-amber-500)); }
.rc-demo-international-payments__verdict--muted { color: var(--rc-text-disabled); }
.rc-demo-international-payments__verdict--ok { color: var(--rc-success-top, var(--rc-text-blue)); }

.rc-demo-international-payments__row .rc-demo__caption {
  display: block;
  margin-top: 2px;
}

.rc-demo-international-payments__outcome {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--rc-green-500) 40%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--rc-green-500) 10%, transparent);
}

.rc-demo-international-payments__outcome-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rc-success-top, var(--rc-text-primary));
}

.rc-demo-international-payments__outcome-ref {
  font-size: 12px;
  font-weight: 500;
  color: var(--rc-success-top, var(--rc-text-primary));
}

/* ── ach-bank-payments ─────────────────────────────────────────────────────
   The mandate first, then the money. The order is the argument. */

.rc-demo-ach-bank-payments__bank {
  margin-top: 4px;
}

.rc-demo-ach-bank-payments__account {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--rc-text-primary);
}

.rc-demo-ach-bank-payments__mandate {
  display: block;
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--rc-green-500) 40%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--rc-green-500) 10%, transparent);
  font-size: 11px;
  line-height: 1.4;
  color: var(--rc-text-primary);
}

.rc-demo-ach-bank-payments__debit {
  margin-top: 10px;
  border-radius: var(--radius-xl);
}

.rc-demo-ach-bank-payments__debit-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.rc-demo-ach-bank-payments__state {
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--rc-text-blue) 12%, transparent);
  font-size: 10px;
  font-weight: 600;
  color: var(--rc-text-blue);
}

.rc-demo-ach-bank-payments__state--done {
  background: color-mix(in srgb, var(--rc-green-500) 12%, transparent);
  color: var(--rc-success-top, var(--rc-text-blue));
}

.rc-demo-ach-bank-payments__amount {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.rc-demo-ach-bank-payments__amount input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-deep);
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rc-text-primary);
}

.rc-demo-ach-bank-payments__when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--rc-text-primary);
}

.rc-demo-ach-bank-payments__notice {
  margin: 2px 0 0;
  font-size: 10px;
  line-height: 1.4;
  color: var(--rc-text-blue);
}

.rc-demo-ach-bank-payments__debit .rc-demo__action {
  margin-top: 8px;
}

.rc-demo-ach-bank-payments__activity {
  margin-top: 10px;
}

.rc-demo-ach-bank-payments__returned {
  margin-top: 4px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--rc-amber-500) 40%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--rc-amber-500) 10%, transparent);
}

.rc-demo-ach-bank-payments__returned-line {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--rc-warning, var(--rc-amber-500));
}

.rc-demo-ach-bank-payments__retry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--rc-text-primary);
}

.rc-demo-ach-bank-payments__after {
  padding: 2px 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-md);
  background: var(--rc-band-raised);
  font-size: 11px;
}

/* ── 3d-secure ─────────────────────────────────────────────────────────────
   Two clauses over the batch they decide. */

.rc-demo-3d-secure__rule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.rc-demo-3d-secure__clause {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.rc-demo-3d-secure__clause input {
  width: 72px;
  padding: 2px 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-md);
  background: var(--rc-band-raised);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--rc-text-primary);
}

.rc-demo-3d-secure__orders {
  margin-top: 12px;
}

.rc-demo-3d-secure__order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
}

.rc-demo-3d-secure__order-ref {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
}

.rc-demo-3d-secure__order-ref .rc-demo__num {
  font-size: 13px;
}

.rc-demo-3d-secure__region {
  padding-inline: 4px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 500;
  color: var(--rc-text-disabled);
}

.rc-demo-3d-secure__pill {
  display: flex;
  min-width: 6rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 1px 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-pill);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--rc-text-disabled);
}

.rc-demo-3d-secure__pill--verified {
  border-color: color-mix(in srgb, var(--rc-green-500) 40%, transparent);
  background: color-mix(in srgb, var(--rc-green-500) 10%, transparent);
  color: var(--rc-success-top, var(--rc-text-primary));
}

.rc-demo-3d-secure__pill--challenge {
  border-color: color-mix(in srgb, var(--rc-amber-500) 40%, transparent);
  background: color-mix(in srgb, var(--rc-amber-500) 10%, transparent);
  color: var(--rc-warning, var(--rc-amber-500));
}

.rc-demo-3d-secure__why {
  margin: 4px 0 0;
  padding-left: 12px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--rc-text-blue);
}

.rc-demo-3d-secure__liability {
  display: block;
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-xl);
}

.rc-demo-3d-secure__tally {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0;
  font-size: 12px;
}

.rc-demo-3d-secure__issuer {
  font-weight: 600;
  color: var(--rc-success-top, var(--rc-text-blue));
}

.rc-demo-3d-secure__merchant {
  font-weight: 600;
  color: var(--rc-warning, var(--rc-amber-500));
}

.rc-demo-3d-secure__sep {
  padding-inline: 6px;
  color: var(--rc-text-disabled);
}

/* ── online-ordering ───────────────────────────────────────────────────────
   A ticket that arrives paid, and the setting that publishes its time slots. */

.rc-demo-online-ordering__ticket {
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-xl);
  background: var(--rc-band-panel);
}

.rc-demo[data-rc-phase="success"] .rc-demo-online-ordering__ticket {
  border-color: color-mix(in srgb, var(--rc-green-500) 50%, transparent);
  background: color-mix(in srgb, var(--rc-green-500) 10%, transparent);
}

.rc-demo-online-ordering__ticket-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rc-demo-online-ordering__no {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--rc-text-primary);
}

.rc-demo-online-ordering__paid {
  flex-shrink: 0;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--rc-green-500) 12%, transparent);
  font-size: 10px;
  font-weight: 600;
  color: var(--rc-success-top, var(--rc-text-blue));
}

.rc-demo-online-ordering__in-kitchen {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--rc-success-top, var(--rc-text-blue));
}

.rc-demo-online-ordering__items {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.rc-demo-online-ordering__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-block: 2px;
}

.rc-demo-online-ordering__name {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--rc-text-primary);
}

.rc-demo-online-ordering__mod {
  display: block;
  padding-left: 12px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--rc-text-disabled);
}

.rc-demo-online-ordering__totals {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--rc-line);
}

.rc-demo-online-ordering__totals p {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
}

.rc-demo-online-ordering__paid-line {
  font-size: 15px !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rc-text-primary);
}

.rc-demo-online-ordering__route {
  margin-top: 8px;
}

.rc-demo-online-ordering__fulfilment {
  margin: 0 0 8px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--rc-text-primary);
}

.rc-demo-online-ordering__offer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rc-line);
}

.rc-demo-online-ordering__offer .rc-demo__chips {
  margin-top: 6px;
}

.rc-demo-online-ordering__windows {
  margin-top: 8px;
}

.rc-demo-online-ordering__slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}

.rc-demo-online-ordering__slots span {
  padding: 4px 2px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--rc-text-secondary);
}

/* ── payment-pages ─────────────────────────────────────────────────────────
   The rail on the left, the page it publishes on the right. Both halves take
   the brand colour the builder is set to, which is a design token rather than
   a hex so it stays legible in both themes. */

.rc-demo-payment-pages {
  --rc-demo-brand: var(--rc-primary-middle);
}

.rc-demo-payment-pages__grid {
  display: grid;
  gap: 12px;
}

@container (min-width: 460px) {
  .rc-demo-payment-pages__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.rc-demo-payment-pages__field {
  display: block;
  margin-top: 8px;
}

.rc-demo-payment-pages__field label,
.rc-demo-payment-pages__field .rc-demo__figure-label {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-disabled);
}

.rc-demo-payment-pages__field input {
  width: 100%;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-deep);
  font-family: inherit;
  font-size: 12px;
  color: var(--rc-text-primary);
}

.rc-demo-payment-pages__amount {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.rc-demo-payment-pages__amount input {
  width: 96px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rc-demo-payment-pages__brands {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rc-demo-payment-pages__brand {
  width: 22px;
  height: 22px;
  border: 2px solid var(--rc-line);
  border-radius: 50%;
}

.rc-demo-payment-pages__brand--on {
  border-color: var(--rc-text-primary);
}

.rc-demo-payment-pages__brand--blue   { background: var(--rc-primary-middle); }
.rc-demo-payment-pages__brand--violet { background: var(--rc-purple); }
.rc-demo-payment-pages__brand--teal   { background: var(--rc-teal-deep); }

.rc-demo-payment-pages__preview {
  padding: 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-xl);
  background: var(--rc-band-panel);
}

.rc-demo-payment-pages__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rc-demo-payment-pages__logo span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: var(--rc-demo-brand);
  font-size: 9px;
  font-weight: 700;
  color: #ffffff;
}

.rc-demo-payment-pages__pt {
  margin: 8px 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--rc-text-primary);
}

.rc-demo-payment-pages__due,
.rc-demo-payment-pages__collect {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
}

.rc-demo-payment-pages__due .rc-demo__figure {
  font-size: 1.125rem;
}

.rc-demo-payment-pages__card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px dashed var(--rc-line);
  border-radius: var(--radius-lg);
  font-size: 12px;
}

.rc-demo-payment-pages__card .rc-demo__caption {
  margin-top: 0;
}

.rc-demo-payment-pages__pay {
  margin: 8px 0 0;
  padding: 8px;
  border-radius: var(--radius-lg);
  background: var(--rc-demo-brand);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #ffffff;
}

.rc-demo-payment-pages__share {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rc-line);
}

.rc-demo-payment-pages__share > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.rc-demo-payment-pages__share .rc-demo__mono {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rc-demo-payment-pages__share .rc-demo__caption {
  margin-top: 0;
}

/* A fixed five-by-five pattern, not an encoding of the link beside it — which
   is why it is aria-hidden and why nothing invites anyone to scan it. */
.rc-demo-payment-pages__qr {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: repeat(5, 6px);
  gap: 1px;
  padding: 4px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-sm);
  background: var(--rc-band-raised);
}

.rc-demo-payment-pages__qr span {
  width: 6px;
  height: 6px;
}

.rc-demo-payment-pages__qr-on {
  background: var(--rc-text-primary);
}

/* ── customer-profiles ─────────────────────────────────────────────────────
   The lookup, the record it opens, its timeline, and the two conditions that
   decide whether the stored method can be charged. */

.rc-demo-customer-profiles__search {
  display: block;
  margin-top: 8px;
}

.rc-demo-customer-profiles__search label {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--rc-tracking-label);
  text-transform: uppercase;
  color: var(--rc-text-disabled);
}

.rc-demo-customer-profiles__search input {
  width: 100%;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-deep);
  font-family: inherit;
  font-size: 13px;
  color: var(--rc-text-primary);
}

.rc-demo-customer-profiles__record {
  display: block;
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rc-line);
}

.rc-demo-customer-profiles__record p {
  margin: 0;
}

.rc-demo-customer-profiles__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--rc-text-primary);
}

.rc-demo-customer-profiles__record .rc-demo__mono {
  font-size: 11px;
}

.rc-demo-customer-profiles__timeline {
  display: block;
  margin-top: 10px;
}

.rc-demo-customer-profiles__timeline .rc-demo__chips {
  margin: 6px 0 8px;
}

.rc-demo-customer-profiles__event {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 8px;
  padding-block: 5px;
  border-top: 1px solid var(--rc-line-soft);
  font-size: 12px;
}

.rc-demo-customer-profiles__status {
  grid-column: 2 / -1;
  text-align: right;
  font-size: 10px;
}

.rc-demo-customer-profiles__status--muted { color: var(--rc-text-disabled); }
.rc-demo-customer-profiles__status--warn  { color: var(--rc-warning, var(--rc-amber-500)); }

.rc-demo-customer-profiles__method {
  margin-top: 10px;
}

.rc-demo-customer-profiles__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.rc-demo-customer-profiles__auth {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--rc-success-top, var(--rc-text-blue));
}

.rc-demo-customer-profiles__charge {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.rc-demo-customer-profiles__charge > span {
  min-width: 0;
}

.rc-demo-customer-profiles__charge .rc-demo__chips {
  margin-top: 4px;
}

.rc-demo-customer-profiles__charge input {
  width: 96px;
  min-height: 32px;
  margin-top: 4px;
  padding: 4px 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-deep);
  font-family: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--rc-text-primary);
}

.rc-demo-customer-profiles__charge label {
  display: block;
}

/* Drawn as the blocked control it is: the read-only role may not charge, and
   the sentence under it says so. Never a button, because there is nothing
   behind it to press. */
.rc-demo-customer-profiles__blocked {
  display: block;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-panel);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--rc-text-disabled);
}

/* ── reporting ─────────────────────────────────────────────────────────────
   The period, the four lines that reconcile it, the columns the file carries,
   and the schedule that mails it. */

.rc-demo-reporting__periods {
  display: block;
  margin-top: 4px;
}

.rc-demo-reporting__periods .rc-demo__caption {
  margin-top: 6px;
}

.rc-demo-reporting__lines,
.rc-demo-reporting__fees,
.rc-demo-reporting__net {
  display: block;
  margin-top: 8px;
}

.rc-demo-reporting__fee {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0 3px 12px;
  font-size: 11px;
}

/* Disabled, because the box shows the template's state rather than offering it
   — see the note at the call site. That leaves a painting problem: a browser
   greys a disabled control to say it is unavailable, and `accent-color` is
   ignored on one, so the three fees that ARE in the file read as three that
   cannot be had. So the box is drawn here instead of by the UA — a filled
   square and a tick built from two borders, no image and no glyph — and it
   keeps the ink it would have had if it were live. The rotation is a static
   transform, not motion, so reduced motion has nothing to answer. */
.rc-demo-reporting__fee input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid var(--rc-text-blue);
  border-radius: 3px;
  background: transparent;
  opacity: 1;
}

.rc-demo-reporting__fee input:checked {
  background: var(--rc-text-blue);
}

.rc-demo-reporting__fee input:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 3px;
  height: 7px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* No pointer cursor: the label names a state, and advertising a click that
   does nothing is the thing the disabled attribute is here to stop. */
.rc-demo-reporting__fee label {
  min-width: 0;
  flex: 1;
  color: var(--rc-text-secondary);
}

.rc-demo-reporting__format {
  display: block;
  margin-top: 12px;
}

/* The header line, as a file: it scrolls inside its own box rather than
   wrapping, because a CSV header is one line and breaking it invents columns
   the file does not have. */
.rc-demo-reporting__preview {
  overflow-x: auto;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--rc-line);
  border-radius: var(--radius-lg);
  background: var(--rc-band-panel);
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--rc-text-secondary);
}

.rc-demo-reporting__schedule {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rc-line);
}

.rc-demo-reporting__schedule .rc-demo__chips {
  margin-top: 6px;
}

/* ── Three elements that were carrying a class and no rule ────────────────
   Caught by rendering every variant and diffing the classes it emits against
   the classes this file mentions. An element with a class and no rule is the
   failure this stylesheet exists to prevent, so the check is worth keeping:

     php wordpress/tests/mocks-harness.php   renders them
     the class diff                          proves they are dressed         */

.rc-demo-rivo-touch__conn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.rc-demo-platform-payments__account {
  margin-top: 12px;
}

.rc-demo-payment-pages__rail {
  min-width: 0;
}