/* ============================================================================
   Evaluation questions sitting inside explainer copy.
   The markup comes from the import: .eval-question with __label and __text.
   Loaded on the front end for every post type, since the blocks live in content.
   ========================================================================== */

.eval-question{
  --eq-purple:var(--ps-purple,#6F00FF);
  --eq-tint:color-mix(in srgb,var(--ps-purple,#6F00FF) 7%,#fff);
  --eq-ink:#2b2140;
  font-family:"Lexend",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:-.05em;
  background:var(--eq-tint);
  border-left:4px solid var(--eq-purple);
  border-radius:0 var(--ps-radius,10px) var(--ps-radius,10px) 0;
  padding:16px 20px;
  margin:22px 0;
  color:var(--eq-ink)
}
.eval-question *{font-family:inherit;letter-spacing:inherit}

.eval-question__label{
  display:flex;align-items:center;gap:7px;
  margin:0 0 6px!important;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--eq-purple);line-height:1.3
}
.eval-question__label::before{
  content:"?";
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:var(--eq-purple);color:#fff;
  font-size:.62rem;font-weight:700;letter-spacing:0;flex:0 0 auto
}

.eval-question__text{
  margin:0!important;
  font-size:1rem;line-height:1.6;font-weight:400
}

/* several in a row, or the unplaced set at the end of an article */
.eval-question + .eval-question{margin-top:12px}
.eval-questions--unplaced{margin-top:28px}
.eval-questions--unplaced .eval-question{margin:12px 0}

@media(max-width:560px){
  .eval-question{padding:14px 16px;margin:18px 0}
  .eval-question__text{font-size:.94rem;line-height:1.55}
}

/* printing a worksheet: keep the question, lose the tint */
@media print{
  .eval-question{background:none;border-left:2px solid #000;break-inside:avoid}
  .eval-question__label{color:#000}
  .eval-question__label::before{background:#000}
}

/* ------------------------------------------------------ study mode gating
   Questions stay out of the way while reading and appear when the study
   toggle is switched on. Gated on .ps-has-study so a page without a toggle
   on it shows them as normal rather than hiding them for good.
   -------------------------------------------------------------------------- */
.ps-has-study .eval-question,
.ps-has-study .eval-questions--unplaced{display:none}
.ps-has-study.ps-study-on .eval-question,
.ps-has-study.ps-study-on .eval-questions--unplaced{display:block}

@media print{
  .ps-has-study .eval-question,
  .ps-has-study .eval-questions--unplaced{display:block}
}