/* Checkpointing and credit holds replay. */
.rs { position: relative; display: grid; gap: 14px; }
.rs-parts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.rs-part { display: grid; gap: 2px; text-align: center; padding: 12px 6px; }
.rs-part .rs-count { font-size: 20px; }
.rs-part .rs-state { font-size: 12px; color: var(--muted, #a9b1c2); }
.rs-part.is-applied { background: rgba(156,200,164,.08); border-color: rgba(156,200,164,.45); }
.rs-part.is-applied .rs-state { color: var(--rp-ok); }
.rs-part.is-skipped { background: rgba(156,200,164,.04); border-style: dashed; }
.rs-part.is-interrupted { border-color: var(--rp-bad); background: rgba(227,154,134,.08); }
.rs-part.is-interrupted .rs-state { color: var(--rp-bad); }
.rs-state-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rs-state-row .rp-value { font-size: 13px; }
.rs-flash { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 10px; background: rgba(12,17,28,.72); color: var(--rp-bad); font-size: 18px; letter-spacing: .02em; opacity: 0; pointer-events: none; transition: opacity .35s var(--rp-ease); }
.rs-flash.is-on { opacity: 1; }

.rs-before-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rs-big { display: block; font-size: 30px; line-height: 1.2; }
.rs-doc.is-bad { border-color: var(--rp-bad); }
.rs-doc.is-bad .rs-big { color: var(--rp-bad); }
.rs-receipt.is-bad { border-color: var(--rp-warn); }
.rs-order { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; opacity: .3; transition: opacity .5s var(--rp-ease); }
.rs-order li { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.rs-order li:last-child { border-style: dashed; }
.rs-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: rgba(var(--brass-rgb),.18); color: var(--brass, #e9b46c); flex: none; }
.rs-before.is-fixed .rs-before-grid { opacity: .25; }
.rs-before.is-fixed .rs-order { opacity: 1; }
.rs-before.is-fixed .rs-order li:nth-child(-n+3) { border-color: var(--rp-ok); }

.rs-holds { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.rs-wallet { display: grid; gap: 8px; }
.rs-wallet .rs-avail { font-size: 22px; }
.rs-lock { display: grid; justify-items: center; gap: 2px; padding-top: 10px; opacity: .35; transition: opacity .4s; text-align: center; max-width: 170px; }
.rs-lock-fn { overflow-wrap: anywhere; margin: 0; }
.rs-lock.is-on { opacity: 1; }
.rs-lock-icon { color: var(--brass, #e9b46c); line-height: 0; }
.rs-jobs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rs-job { display: grid; gap: 8px; justify-items: start; }
.rs-ghost { grid-column: 1 / -1; margin: 0; color: var(--rp-bad); opacity: 0; transition: opacity .4s; }
.rs-ghost.is-on { opacity: 1; }

@media (max-width: 520px) {
  .rs-parts { gap: 4px; }
  .rs-part { padding: 9px 2px; }
  .rs-part .rs-count { font-size: 17px; }
  .rs-state-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-order { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-jobs { grid-template-columns: 1fr; }
  .rs-holds { grid-template-columns: 1fr; }
  .rs-lock { justify-items: start; max-width: none; grid-auto-flow: column; padding-top: 0; }
}