/* system styles: each part of the site keeps its own file so nobody overwrites another's work. */

/* optional setup steps */
.sys-progress { height: 8px; border-radius: 999px; background: rgba(127,127,127,.2); overflow: hidden; margin: 10px 0; }
.sys-progress i { display: block; height: 100%; background: var(--primary, #8f82c9); border-radius: 999px; }
.sys-steps { display: grid; gap: 8px; margin-top: 8px; }
.sys-step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(127,127,127,.25); border-radius: 12px; flex-wrap: wrap; }
.sys-step.done { opacity: .85; }
.sys-step.skipped { opacity: .6; }
.sys-step-no { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(127,127,127,.2); font-weight: 700; flex: none; }
.sys-step.done .sys-step-no { background: var(--primary, #8f82c9); color: #fff; }
.sys-step-actions { gap: 6px; flex-wrap: wrap; }