/* WeTeachMath v1.5.6 — Examples + handwritten solution readability.
   The worked solution is the primary study surface. On compact screens we
   preserve readable type and allow internal scrolling rather than shrinking it. */

:root{
  --wtm-example-problem:19px;
  --wtm-example-step-title:14px;
  --wtm-example-step-body:13px;
  --wtm-hand-question:19px;
  --wtm-hand-step:18px;
  --wtm-hand-answer:26px;
}

/* Give the full solution the majority of the stage width. */
.phase5-worked-grid{
  grid-template-columns:minmax(300px,.62fr) minmax(0,1.68fr);
  gap:14px;
}

/* Left overview stays concise, but it must remain comfortably readable. */
.worked-overview-column .worked-method-card h3{
  font-size:var(--wtm-example-problem);
  line-height:1.3;
}
.worked-overview-column .worked-static-step{
  grid-template-columns:30px minmax(0,1fr);
  gap:8px;
  padding:8px 9px;
}
.worked-overview-column .worked-static-step strong{
  font-size:var(--wtm-example-step-title);
  line-height:1.32;
}
.worked-overview-column .worked-static-step p{
  display:block;
  font-size:var(--wtm-example-step-body);
  line-height:1.42;
}
.worked-overview-column .phase3-stage-note{
  display:block;
  font-size:12px;
  line-height:1.42;
  padding:9px 10px;
}
.worked-overview-column .worked-bank-toolbar>span{
  font-size:11px;
}
.worked-overview-column .worked-bank-toolbar>span strong{
  font-size:12px;
}
.worked-overview-column .worked-bank-toolbar .bank-random,
.worked-overview-column .bank-nav{
  font-size:11.5px;
}

/* Notebook/full working is the main reading surface. */
.worked-notebook-large .notebook-top{
  padding:9px 14px;
}
.worked-notebook-large .notebook-top span,
.worked-notebook-large .notebook-top small{
  font-size:11px;
}
.worked-notebook-large .notebook-paper{
  padding:22px 24px 24px 48px;
  background-image:
    linear-gradient(90deg,transparent 0,transparent 35px,rgba(233,104,118,.34) 35px,rgba(233,104,118,.34) 36px,transparent 36px),
    repeating-linear-gradient(180deg,transparent 0,transparent 33px,rgba(80,145,210,.16) 33px,rgba(80,145,210,.16) 34px);
  scrollbar-gutter:stable;
}
.worked-notebook-large .notebook-question{
  font-size:var(--wtm-hand-question);
  line-height:1.6;
  margin-bottom:18px;
}
.worked-notebook-large .notebook-line{
  grid-template-columns:32px minmax(0,1fr);
  gap:12px;
  margin:14px 0 18px;
}
.worked-notebook-large .notebook-step-number{
  width:28px;
  height:28px;
  font-size:12px;
  margin-top:1px;
}
.worked-notebook-large .notebook-line strong,
.worked-notebook-large .notebook-line p{
  font-size:var(--wtm-hand-step);
  line-height:1.62;
}
.worked-notebook-large .notebook-line p{
  margin-top:5px;
}
.worked-notebook-large .notebook-answer{
  padding:13px 15px;
  margin-top:18px;
}
.worked-notebook-large .notebook-answer span{
  font-size:10px;
}
.worked-notebook-large .notebook-answer strong{
  font-size:var(--wtm-hand-answer);
  line-height:1.35;
}

/* Compact laptops: keep the large solution typography and scroll the panels. */
@media (min-width:1101px) and (max-width:1365px){
  .phase5-worked-grid{
    grid-template-columns:minmax(275px,.58fr) minmax(0,1.72fr);
    gap:10px;
  }
  .worked-overview-column .worked-method-card h3{font-size:18px}
  .worked-overview-column .worked-static-step strong{font-size:13.5px}
  .worked-overview-column .worked-static-step p{font-size:12.5px;line-height:1.4}
  .worked-overview-column .phase3-stage-note{font-size:11.5px}
  .worked-notebook-large .notebook-question{font-size:18.5px}
  .worked-notebook-large .notebook-line strong,
  .worked-notebook-large .notebook-line p{font-size:17px;line-height:1.58}
  .worked-notebook-large .notebook-answer strong{font-size:25px}
}

@media (min-width:1101px) and (max-height:680px){
  .worked-overview-column .worked-method-card{
    overflow:auto;
    scrollbar-gutter:stable;
  }
  .worked-overview-column .worked-static-step p{
    display:block;
    font-size:12.5px;
    line-height:1.36;
  }
  .worked-overview-column .phase3-stage-note{
    display:block;
    font-size:12px;
  }
  .worked-notebook-large .notebook-paper{
    padding-top:16px;
    padding-bottom:18px;
  }
  .worked-notebook-large .notebook-question{font-size:18.5px}
  .worked-notebook-large .notebook-line{
    margin:10px 0 13px;
  }
  .worked-notebook-large .notebook-line strong,
  .worked-notebook-large .notebook-line p{
    font-size:17px;
    line-height:1.54;
  }
  .worked-notebook-large .notebook-answer{margin-top:12px}
}

/* Tablet/mobile: stack the overview and notebook, and make the writing larger. */
@media (max-width:1100px){
  .phase5-worked-grid{grid-template-columns:1fr;height:auto}
  .worked-overview-column .worked-method-card h3{font-size:19px}
  .worked-overview-column .worked-static-step strong{font-size:14px}
  .worked-overview-column .worked-static-step p{font-size:13px}
  .worked-notebook-large{min-height:480px}
  .worked-notebook-large .notebook-question{font-size:19px}
  .worked-notebook-large .notebook-line strong,
  .worked-notebook-large .notebook-line p{font-size:17.5px;line-height:1.6}
  .worked-notebook-large .notebook-answer strong{font-size:26px}
}

@media (max-width:640px){
  .worked-overview-column .worked-method-card h3{font-size:18px}
  .worked-overview-column .worked-static-step strong{font-size:13.5px}
  .worked-overview-column .worked-static-step p{font-size:12.75px}
  .worked-notebook-large{min-height:500px}
  .worked-notebook-large .notebook-paper{padding-left:38px;padding-right:14px}
  .worked-notebook-large .notebook-question{font-size:19px}
  .worked-notebook-large .notebook-line{grid-template-columns:30px minmax(0,1fr);gap:10px}
  .worked-notebook-large .notebook-line strong,
  .worked-notebook-large .notebook-line p{font-size:17.5px;line-height:1.6}
  .worked-notebook-large .notebook-answer strong{font-size:26px}
}

/* Compact example overview: use one readable column instead of two cramped micro-cards. */
@media (min-width:1101px) and (max-width:1365px){
  .worked-overview-column .worked-static-stack{grid-template-columns:1fr}
  .worked-overview-column .worked-bank-toolbar{
    grid-template-columns:34px minmax(0,1fr) 34px;
    gap:6px;
    padding:6px;
  }
  .worked-overview-column .worked-bank-toolbar .bank-random{
    grid-column:1/-1;
    width:100%;
    padding:6px 8px;
    font-size:11.5px;
  }
  .worked-overview-column .worked-bank-toolbar>span{font-size:11px}
  .worked-overview-column .worked-bank-toolbar>span strong{font-size:12px}
}