/* Occasional wizard navigation: state indication, using only transform and opacity. */
:root{--ease-out:cubic-bezier(0.23,1,0.32,1)}
.commitment-wizard{opacity:1;transform:translateY(0);transform-origin:top center;transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
.commitment-wizard.wizard-enter,.commitment-wizard.wizard-closing{opacity:0;transform:translateY(8px)}
.commitment-wizard.wizard-closing{transition-duration:180ms;pointer-events:none}
.commitment-step{opacity:1;transform:translateX(0);transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
.commitment-step.wizard-enter{opacity:0;transform:translateX(8px)}
.commitment-step.wizard-from-back.wizard-enter{transform:translateX(-8px)}
.wizard-enter{transition:none!important}
.wizard-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:-6px 0 20px}
.wizard-progress>span{height:3px;border-radius:3px;overflow:hidden;background:var(--line2)}
.wizard-progress-fill{display:block;height:100%;background:var(--rank);transform:scaleX(0);transform-origin:left center;transition:transform 240ms var(--ease-out)}
.wizard-progress-fill.is-filled{transform:scaleX(1)}
.commitment-wizard button{transition:transform 160ms var(--ease-out)}
.commitment-wizard button:active:not(:disabled){transform:scale(.97)}
.commitment-wizard.wizard-instant,.wizard-instant .commitment-step,.wizard-instant .wizard-progress-fill,.wizard-instant button{transition:none}
.wizard-instant button:active:not(:disabled){transform:none}
@media(prefers-reduced-motion:reduce){
  .commitment-wizard,.commitment-step{transform:none!important;transition-property:opacity;transition-duration:125ms}
  .commitment-wizard button:active:not(:disabled){transform:none}
  .wizard-progress-fill,.commitment-wizard button{transition:none}
}