/* static/css/article_review-flow.css */

.review-branch-flow{
  margin:1.8rem 0;
}

.review-branch-step{
  border:.08rem solid #d9e6f7;
  border-radius:.9rem;
  background:#f8fbff;
  padding:1rem;
}

.review-branch-question{
  font-weight:700;
  color:#0175d8;
  line-height:1.6;
  margin-bottom:.9rem;
}

.review-branch-body{
  display:grid;
  grid-template-columns:8rem auto 1fr;
  gap:.8rem;
  align-items:center;
}

.review-branch-no,
.review-branch-yes{
  border-radius:.7rem;
  padding:.8rem .9rem;
  line-height:1.7;
  font-weight:700;
}

.review-branch-no{
  background:#f2fbf4;
  border:.08rem solid #98d8a5;
  color:#0d7a33;
  text-align:center;
}

.review-branch-yes{
  background:#fff1f1;
  border:.08rem solid #efb0b0;
  color:#333;
}

.review-branch-side-arrow{
  font-size:1.4rem;
  font-weight:700;
  color:#777;
  line-height:1;
  text-align:center;
}

.review-branch-no span,
.review-branch-yes span{
  display:inline-block;
  font-size:.8rem;
  font-weight:700;
  border-radius:999px;
  padding:.15rem .6rem;
  margin-right:.5rem;
}

.review-branch-no span{
  background:#dff5e5;
  color:#0d7a33;
}

.review-branch-yes span{
  background:#ffd7d7;
  color:#b00020;
}

.review-branch-arrow{
  width:8rem;
  text-align:center;
  font-weight:700;
  color:#777;
  font-size:1.5rem;
  line-height:1;
  margin:.55rem 0;
}

.review-branch-result{
  border:.1rem solid #98d8a5;
  background:#f2fbf4;
  border-radius:.9rem;
  padding:1rem;
  text-align:center;
  font-weight:700;
  color:#0d7a33;
}

/* mobile */
@media (max-width:600px){
  .review-branch-step{
    padding:.75rem;
  }

  .review-branch-question{
    font-size:.98rem;
    margin-bottom:.7rem;
  }

  .review-branch-body{
    grid-template-columns:4.6rem 1.2rem 1fr;
    gap:.45rem;
  }

  .review-branch-no,
  .review-branch-yes{
    padding:.6rem .55rem;
    border-radius:.55rem;
    font-size:.86rem;
    line-height:1.55;
  }

  .review-branch-no span,
  .review-branch-yes span{
    font-size:.68rem;
    padding:.1rem .45rem;
    margin-right:.3rem;
  }

  .review-branch-side-arrow{
    font-size:1.1rem;
  }

  .review-branch-arrow{
    width:4.6rem;
    font-size:1.35rem;
    margin:.45rem 0;
  }

  .review-branch-result{
    padding:.8rem;
    font-size:.95rem;
  }
}