/* Service run card: a still of the queue from each agent page's demo, used where a page needs a picture of the
   service (webinar steps, quiz results). Same paper card, chips and review flag as .uc-demo-card in usecase.css. */
.svc-run { width: 100%; background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 rgba(21, 24, 26, .08); padding: 12px; text-align: left; }
.svc-run-k, .svc-run-note { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.svc-run-note { margin-top: 8px; font-size: 9.5px; letter-spacing: .04em; text-transform: none; }
.svc-run ul { list-style: none; display: grid; gap: 6px; margin-top: 8px; }
.svc-run li { display: grid; gap: 1px; padding: 7px 9px; border: 1px solid var(--line); background: var(--surface-2); }
.svc-run-n { font-size: 13px; font-weight: 650; line-height: 1.3; }
.svc-run-m { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; line-height: 1.4; color: var(--muted); }
.svc-run-s { justify-self: start; margin-top: 4px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10px; letter-spacing: .04em; line-height: 1.4; padding: 1px 6px; border: 1px solid var(--ink); color: var(--ink); }
.svc-run-s.ok::before { content: "✓ "; }
.svc-run-s.review { background: var(--yellow); color: #15181A; }