@layer reset,tokens,base,layout;@layer components{.comms-mock__body{align-content:start;gap:var(--space-md);padding:var(--space-lg);font-size:var(--text-sm);display:grid}.comms-mock__rows{gap:var(--space-2xs);margin:0;padding:0;list-style:none;display:grid}.comms-mock__row{align-items:center;gap:var(--space-sm);padding-bottom:var(--space-2xs);border-bottom:var(--border);grid-template-columns:1fr auto;display:grid}.comms-mock__row:last-child{border-bottom:0}.comms-mock__label{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--color-text);overflow:hidden}.comms-mock__channel{padding:0 var(--space-2xs);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);white-space:nowrap;color:var(--color-primary);background:var(--rvg-blue-50)}.comms-mock__chip{justify-self:start;align-items:center;gap:var(--space-3xs);padding:var(--space-3xs) var(--space-sm);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);color:var(--color-primary);background:var(--rvg-white);box-shadow:var(--shadow-float);display:inline-flex}.comms-mock__chip-dot{width:var(--reconciliation-dot-size);height:var(--reconciliation-dot-size);border-radius:var(--radius-round);background:var(--color-success-text)}@media (prefers-reduced-motion:no-preference){.comms-mock__row{animation:comms-appear var(--duration-comms-appear) var(--ease-out) infinite both}.comms-mock__row:nth-child(2){animation-delay:calc(var(--duration-comms-appear) * .05)}.comms-mock__row:nth-child(3){animation-delay:calc(var(--duration-comms-appear) * .1)}.comms-mock__row:nth-child(4){animation-delay:calc(var(--duration-comms-appear) * .15)}}@keyframes comms-appear{0%,5%{opacity:0;translate:0 var(--space-2xs)}16%,88%{opacity:1;translate:0}to{opacity:0;translate:0 var(--space-2xs)}}@media (width<=820px){.comms-mock__body{gap:var(--space-sm);padding:var(--space-sm);font-size:var(--text-xs)}}.message-mock{gap:var(--space-md);font-size:var(--text-sm);display:grid}.message-mock__group{gap:var(--space-2xs);display:grid}.message-mock__legend{font-size:var(--text-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-text-muted)}.message-mock__channels{gap:var(--space-3xs);flex-wrap:wrap;display:flex}.message-mock__channel{padding:var(--space-3xs) var(--space-2xs);border:var(--border);border-radius:var(--radius-sm);font-size:var(--text-xs);white-space:nowrap;color:var(--color-text-muted)}.message-mock__channel--selected{border-color:var(--rvg-blue-300);font-weight:var(--font-weight-semibold);color:var(--color-primary);background:var(--rvg-blue-50)}.message-mock__field{text-overflow:ellipsis;white-space:nowrap;min-width:0;padding:var(--space-3xs) var(--space-2xs);border:var(--border);border-radius:var(--radius-sm);background:var(--color-bg-muted);margin:0;overflow:hidden}.message-mock__editor{gap:var(--space-2xs);padding:var(--space-sm);border:var(--border);border-radius:var(--radius-md);background:var(--rvg-white);display:grid}.message-mock__line{color:var(--color-text);margin:0}.message-mock__var{padding:0 var(--space-3xs);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);color:var(--color-primary);background:var(--rvg-blue-100)}@media (prefers-reduced-motion:no-preference){.message-mock__var{animation:message-var var(--duration-message-loop) var(--ease-out) infinite both}.message-mock__line:first-child .message-mock__var{animation-delay:calc(var(--duration-message-loop) * .06)}.message-mock__line:last-child .message-mock__var{animation-delay:calc(var(--duration-message-loop) * .12)}}@keyframes message-var{0%,6%{color:var(--color-text-muted);background:var(--color-bg-muted)}18%,88%{color:var(--color-primary);background:var(--rvg-blue-100)}to{color:var(--color-text-muted);background:var(--color-bg-muted)}}@media (width<=520px){.message-mock{gap:var(--space-sm);font-size:var(--text-xs)}.message-mock__channel:nth-child(n+3){display:none}}.scenario-mock__body{align-content:start;gap:var(--space-md);padding:var(--space-lg);font-size:var(--text-sm);display:grid}.scenario-mock__steps{gap:var(--space-sm);margin:0;padding:0;list-style:none;display:grid}.scenario-mock__step{align-items:center;gap:var(--space-sm);grid-template-columns:auto auto 1fr auto;display:grid;position:relative}.scenario-mock__step:not(:last-child):before{content:"";inset-inline-start:calc(var(--reconciliation-check-size) / 2);top:var(--reconciliation-check-size);bottom:calc(-1 * var(--space-sm));border-inline-start:var(--border-width) solid var(--color-border);position:absolute}.scenario-mock__marker{z-index:1;width:var(--reconciliation-check-size);height:var(--reconciliation-check-size);border-radius:var(--radius-round);border:var(--border-width) solid var(--color-border);background:var(--rvg-white);place-items:center;display:grid;position:relative}.scenario-mock__step--done .scenario-mock__marker{border-color:var(--color-success-border);color:var(--color-success-text);background:var(--color-success-surface)}.scenario-mock__step--current .scenario-mock__marker{border-color:var(--color-accent-sand);background:var(--color-sand-surface)}.scenario-mock__delay{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-semibold);color:var(--color-primary)}.scenario-mock__label{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--color-text);overflow:hidden}.scenario-mock__status{font-size:var(--text-xs);white-space:nowrap;color:var(--color-text-muted)}.scenario-mock__step--current .scenario-mock__status{font-weight:var(--font-weight-semibold);color:var(--color-text-on-sand)}.scenario-mock__chip{justify-self:start;align-items:center;gap:var(--space-3xs);padding:var(--space-3xs) var(--space-sm);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);color:var(--color-primary);background:var(--rvg-white);box-shadow:var(--shadow-float);display:inline-flex}.scenario-mock__chip-dot{width:var(--reconciliation-dot-size);height:var(--reconciliation-dot-size);border-radius:var(--radius-round);background:var(--color-success-text)}@media (prefers-reduced-motion:no-preference){.scenario-mock__step--done .scenario-mock__marker-icon{animation:scenario-step var(--duration-scenario-loop) var(--ease-out) infinite both}.scenario-mock__step--done:nth-child(2) .scenario-mock__marker-icon{animation-delay:calc(var(--duration-scenario-loop) * .08)}.scenario-mock__step--current .scenario-mock__marker{animation:scenario-wait var(--duration-scenario-wait) var(--ease-in-out) infinite}}@keyframes scenario-step{0%,8%{opacity:0;scale:.5}20%,88%{opacity:1;scale:1}to{opacity:0;scale:.5}}@keyframes scenario-wait{0%,to{box-shadow:0 0 0 0 var(--color-sand-surface)}50%{box-shadow:0 0 0 var(--space-3xs) var(--color-sand-surface)}}@media (width<=820px){.scenario-mock__body{gap:var(--space-sm);padding:var(--space-sm);font-size:var(--text-xs)}.scenario-mock__steps{gap:var(--space-2xs)}.scenario-mock__status{display:none}}.template-mock__body{align-content:start;gap:var(--space-lg);padding:var(--space-lg);font-size:var(--text-sm);grid-template-columns:auto 1fr;display:grid}.template-mock__steps{gap:var(--space-sm);margin:0;padding:0;list-style:none;display:grid}.template-mock__step{align-items:start;gap:var(--space-2xs);grid-template-columns:auto 1fr;display:grid;position:relative}.template-mock__step:not(:last-child):before{content:"";inset-inline-start:calc(var(--reconciliation-check-size) / 2);top:var(--reconciliation-check-size);bottom:calc(-1 * var(--space-sm));border-inline-start:var(--border-width) solid var(--color-border);position:absolute}.template-mock__marker{z-index:1;width:var(--reconciliation-check-size);height:var(--reconciliation-check-size);border-radius:var(--radius-sm);border:var(--border-width) solid var(--color-border);background:var(--rvg-white);place-items:center;display:grid;position:relative}.template-mock__step--done .template-mock__marker{border-color:var(--color-success-border);color:var(--color-success-text);background:var(--color-success-surface)}.template-mock__step--current .template-mock__marker{border-color:var(--color-accent-sand);background:var(--color-sand-surface)}.template-mock__step-text{gap:var(--space-3xs);min-width:0;display:grid}.template-mock__step-label{font-weight:var(--font-weight-semibold);white-space:nowrap;color:var(--color-primary)}.template-mock__step--done .template-mock__step-label{color:var(--color-success-text)}.template-mock__step-status{font-size:var(--text-xs);white-space:nowrap;color:var(--color-text-muted)}.template-mock__fields{align-content:start;gap:var(--space-sm);margin:0;display:grid}.template-mock__field{gap:var(--space-3xs);min-width:0;display:grid}.template-mock__field-label{font-size:var(--text-xs);color:var(--color-text-muted)}.template-mock__field-value{text-overflow:ellipsis;white-space:nowrap;min-width:0;padding:var(--space-3xs) var(--space-2xs);border:var(--border);border-radius:var(--radius-sm);color:var(--color-text);background:var(--color-bg-muted);margin:0;overflow:hidden}@media (prefers-reduced-motion:no-preference){.template-mock__step--done .template-mock__marker-icon{animation:template-step var(--duration-template-loop) var(--ease-out) infinite both}.template-mock__step--done:nth-child(2) .template-mock__marker-icon{animation-delay:calc(var(--duration-template-loop) * .06)}.template-mock__step--done:nth-child(3) .template-mock__marker-icon{animation-delay:calc(var(--duration-template-loop) * .12)}}@keyframes template-step{0%,6%{opacity:0;scale:.5}18%,88%{opacity:1;scale:1}to{opacity:0;scale:.5}}@media (width<=1080px){.template-mock__body{gap:var(--space-sm);padding:var(--space-sm);font-size:var(--text-xs)}}@media (width<=820px){.template-mock__body{gap:var(--space-sm);padding:var(--space-sm);font-size:var(--text-xs);grid-template-columns:1fr}.template-mock__fields,.template-mock__step:last-child{display:none}.template-mock__step:nth-last-child(2):before{content:none}}}@layer utilities;