/* Shared look for the section bar and dialogs across builder, quiz and reports. */
.app-nav {
  position: sticky;
  top: 0;
  z-index: 5;
}
.app-nav strong {
  color: #1f2a23;
}
.app-dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid #deded5;
  border-radius: 14px;
  background: #faf9f6;
  color: #252c27;
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.18);
}
.app-dialog::backdrop {
  background: rgb(31 42 35 / 0.35);
}
.app-dialog h2 {
  margin: 0 0 6px;
  font-size: 20px;
}
.app-dialog p {
  margin: 0 0 16px;
  color: #4a524c;
}
.app-dialog__choices {
  display: grid;
  gap: 10px;
}
.app-dialog__choice {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  text-align: left;
  background: white;
  border: 1px solid #deded5;
  border-radius: 10px;
  cursor: pointer;
}
.app-dialog__choice:hover,
.app-dialog__choice:focus-visible {
  border-color: #345540;
  box-shadow: 0 0 0 2px #345540;
  outline: none;
}
.app-dialog__choice span {
  color: #5c5f62;
  font-size: 13px;
}
.app-dialog__cancel {
  margin-top: 16px;
  padding: 8px 14px;
  background: white;
  border: 1px solid #c9c9bd;
  border-radius: 8px;
  cursor: pointer;
}
.app-dialog__group {
  margin-top: 18px;
}
.app-dialog__group h3 {
  margin: 0 0 4px;
  font-size: 15px;
}
.app-dialog__group p {
  margin: 0 0 10px;
  font-size: 13px;
}