.procedure-simulator {
  overflow: hidden;
  border: 1px solid #dfe4ed;
  border-radius: 12px;
  background: #fafbfe;
}
.procedure-simulator > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
}
.procedure-simulator > summary::-webkit-details-marker { display: none; }
.procedure-simulator > summary span { display: grid; gap: 3px; }
.procedure-simulator > summary b { font-size: 12px; }
.procedure-simulator > summary small { color: #7a8495; font-size: 9px; }
.procedure-simulator > summary i {
  border-radius: 999px;
  background: #edf0f5;
  color: #687487;
  padding: 5px 8px;
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}
.procedure-simulator > summary i.ready { background: #ddf7ea; color: #16734f; }
.procedure-simulator > form {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-top: 1px solid #e7eaf0;
  background: #fff;
}
.procedure-simulator > form p { margin: 0; color: #6e788a; font-size: 10px; }
.procedure-simulator > form > .button { justify-self: start; }
.procedure-scenarios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.procedure-scenarios label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid #e2e6ee;
  border-radius: 9px;
  background: #fafbfc;
  padding: 9px;
  cursor: pointer;
}
.procedure-scenarios input { margin-top: 2px; accent-color: #4e5df3; }
.procedure-scenarios span { display: grid; gap: 2px; min-width: 0; }
.procedure-scenarios b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.procedure-scenarios small { color: #7f8998; font-size: 8px; }
.procedure-results { display: grid; border-top: 1px solid #e7eaf0; }
.procedure-results > article {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border-bottom: 1px solid #edf0f4;
  padding: 10px 14px;
}
.procedure-results > article:last-child { border-bottom: 0; }
.procedure-results > article > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #edf0f5;
  color: #667183;
  font-size: 10px;
  font-weight: 900;
}
.procedure-results > article.matched > span { background: #daf6e8; color: #157450; }
.procedure-results > article.failed > span { background: #ffe1de; color: #a52b22; }
.procedure-results > article > div { display: grid; gap: 2px; }
.procedure-results b { font-size: 10px; }
.procedure-results small { color: #778294; font-size: 8px; }
.procedure-results em { color: #8b6515; font-size: 8px; font-style: normal; }
.procedure-results .failed em { color: #a52b22; }
html[data-theme="dark"] .procedure-simulator,
html[data-theme="dark"] .procedure-simulator > form,
html[data-theme="dark"] .procedure-scenarios label {
  background: #142033;
  border-color: #2d3a4f;
  color: #e9eef7;
}
html[data-theme="dark"] .procedure-results,
html[data-theme="dark"] .procedure-results > article,
html[data-theme="dark"] .procedure-simulator > form { border-color: #2d3a4f; }
@media (max-width: 600px) {
  .procedure-simulator > summary { align-items: flex-start; flex-direction: column; }
  .procedure-scenarios { grid-template-columns: 1fr; }
}