.handle-predictor {
  box-sizing: border-box;
  margin: 2rem 0;
  padding: 1.25rem;
  border: 1px solid #bfc8ca;
  border-radius: 6px;
  background: #fff;
  color: #202b2f;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0;
}
.handle-predictor *, .handle-predictor *::before, .handle-predictor *::after { box-sizing: border-box; }
.handle-predictor h3 { margin: 0 0 1rem; font-size: 20px; line-height: 1.3; }
.handle-case-select { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.75rem; }
.handle-case-select select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0.45rem;
  border: 1px solid #9dabad;
  border-radius: 3px;
  background: #fff;
  color: inherit;
  font: inherit;
}
.handle-predictor .handle-scenario { min-height: 7.5em; margin: 1rem 0; font: inherit; }
.handle-states { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 0.9rem 0; border-block: 1px solid #dce1e2; }
.handle-states .handle-state-heading { margin: 0 0 0.4rem; font-size: 15px; font-weight: 700; }
.handle-states label { display: block; font-size: 15px; }
.handle-predictor input { width: 17px; height: 17px; margin: 0 0.5rem 0 0; vertical-align: -2px; accent-color: #246b57; }
.handle-states input:disabled { opacity: 1; }
.handle-calls { margin: 1rem 0; }
.handle-calls > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 0.75rem; margin: 0.5rem 0; }
.handle-calls dt { font-size: 15px; }
.handle-calls dd { min-width: 0; margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.handle-predictions { min-width: 0; margin: 0; padding: 0.75rem 0 0; border: 0; }
.handle-predictions legend { padding: 0; font-weight: 700; font-size: 16px; }
.handle-predictions label { display: flex; align-items: center; gap: 0.2rem; min-height: 38px; font-size: 15px; cursor: pointer; }
.handle-predictions input { flex-shrink: 0; }
.handle-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.handle-actions button {
  min-height: 42px;
  max-width: 100%;
  padding: 0.55rem 0.8rem;
  border: 1px solid #246b57;
  border-radius: 3px;
  background: #246b57;
  color: #fff;
  font: inherit;
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
}
.handle-actions [data-reset] { background: #fff; color: #34464a; border-color: #9dabad; }
.handle-actions button:disabled { opacity: 0.45; cursor: default; }
.handle-actions button:not(:disabled):hover { filter: brightness(0.94); }
.handle-predictor :focus-visible { outline: 3px solid #a35435; outline-offset: 3px; }
.handle-answer { margin-top: 1rem; padding-top: 0.8rem; border-top: 2px solid #246b57; }
.handle-answer[data-correct="false"] { border-color: #a35435; }
.handle-predictor .handle-answer p { margin: 0.4rem 0; font: inherit; }
.handle-predictor .handle-answer .handle-answer-detail { color: #485e64; font-size: 14px; }
.handle-answer[hidden] { display: none; }
@media (max-width: 540px) {
  .handle-predictor { padding: 1rem; }
  .handle-predictor .handle-scenario { min-height: 14em; }
  .handle-case-select { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .handle-calls > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .handle-states { gap: 0.75rem; }
  .handle-state-heading { min-height: 3em; }
  .handle-predictions label { align-items: flex-start; padding: 0.35rem 0; }
  .handle-predictions input { margin-top: 0.3rem; }
}
@media print {
  .handle-predictor { break-inside: avoid; }
  .handle-actions { display: none; }
}