/* "Step by step" under public play pages (resources/views/play/partials/step-list.blade.php) */
.pm-steps { background: #f5f7ff; padding: 0 16px; font-family: 'Quicksand', sans-serif; color: #1e2a4a; border-top: 2px solid #d9e0f7; }
.pm-steps-summary { max-width: 960px; margin: 0 auto; padding: 18px 0; display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.pm-steps-summary::-webkit-details-marker { display: none; }
.pm-steps-title { font-family: 'Baloo 2', sans-serif; font-size: 20px; font-weight: 800; color: #335eea; }
.pm-steps-count { font-size: 13px; font-weight: 700; color: #8a95b8; }
.pm-steps-chevron { margin-left: auto; color: #335eea; transition: transform .2s ease; }
.pm-steps[open] .pm-steps-chevron { transform: rotate(180deg); }
.pm-steps-inner { max-width: 960px; margin: 0 auto; padding: 4px 0 40px; }
/* the app renders its own footer inside #app; on pages with the toggle the server footer follows it instead */
.has-step-list #app .pm-footer { display: none; }
.pm-steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pm-steps-step { background: #fff; border: 2px solid #d9e0f7; border-radius: 20px; padding: 14px; }
.pm-steps-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.pm-steps-badge { flex-shrink: 0; display: inline-block; padding: 4px 10px; border-radius: 999px; background: #335eea; color: #fff; font-family: 'Baloo 2', sans-serif; font-size: 12px; font-weight: 800; }
.pm-steps-desc { margin: 3px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.pm-steps-figure svg { display: block; width: 100%; height: auto; border-radius: 12px; }
.pm-steps-branches { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 0; padding: 0; font-size: 12px; font-weight: 700; color: #8a95b8; }
.pm-steps-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 6px; vertical-align: -1px; }
.pm-steps-dot--0 { background: #f59e0b; }
.pm-steps-dot--1 { background: #10b981; }
.pm-steps-dot--2 { background: #ec4899; }
@media (max-width: 767px) { .pm-steps-list { grid-template-columns: 1fr; } }