/* Engine pages (preview, checkout, status, errors) on the site's look. Uses the tokens in site.css and the
   components in make.css; only the few bits those files don't have live here. */
.engine .make__grid { margin-top: var(--sp-2); }
.engine-card { max-width: 46rem; }
.testbadge { display: inline-block; font-weight: 800; font-size: var(--s-small); background: var(--yellow); border: var(--stroke) solid var(--ink); border-radius: 999px; padding: 0.2rem 0.8rem; }
.engine-errors { display: grid; gap: var(--sp-1); font-weight: 800; color: #b3261e; background: #fff3f0; border: var(--stroke) solid #b3261e; border-radius: 12px; padding: var(--sp-2) var(--sp-3); }
.engine-agree { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 600; max-width: 60ch; }
.engine-agree input { width: 1.4rem; height: 1.4rem; flex: none; margin-top: 0.15rem; accent-color: var(--green); }
.engine-remind { font-weight: 500; margin-top: 0.4rem; }
.engine-story { display: grid; gap: var(--sp-2); }
.engine-story li { background: var(--paper) url("/assets/img/paper.png"); padding: var(--sp-2) var(--sp-3); border-radius: 12px; font-weight: 600; }
.engine-story b { font-family: var(--font-display); font-weight: 600; margin-right: 0.4em; }
.engine-sum .engine-line { padding-top: 0.35rem; border-top: 2px dotted var(--ink); }
.engine-sum .engine-line + .engine-line { border-top: 0; padding-top: 0; }
.engine-sum .engine-line dt { font-weight: 600; text-align: left; max-width: 70%; }
.engine-status { justify-items: start; }
.engine-dood { width: 96px; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .engine-dood--busy { animation: engine-wobble 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
  @keyframes engine-wobble { 50% { transform: rotate(-6deg); } }
}
.nav__bar .testbadge { flex: 0 0 auto; width: auto; margin-left: auto; }