/* B077OZ — keep the complete Key idea / enharmonic adviser inside the lesson view. */
@media (min-width:1401px) and (min-height:820px){
  body[data-lesson] .demo{
    grid-template-rows:auto auto minmax(250px,27vh) auto!important;
    padding-bottom:9px!important;
  }
  body[data-lesson] .keyboard{min-height:250px!important}
  body[data-lesson] .demo>.takeaway{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:10px!important;
    min-height:32px!important;
    margin:0!important;
    padding:5px 8px!important;
    border:1px solid var(--cw-border,#28313f)!important;
    border-radius:7px!important;
    background:#080d14!important;
  }
  body[data-lesson] .demo>.takeaway .keyIdea{
    min-width:0!important;
    color:var(--cw-text-soft,#c7cfdb)!important;
    font-size:.7rem!important;
    line-height:1.2!important;
  }
  body[data-lesson] .demo>.takeaway .advisor{
    max-width:min(48vw,620px)!important;
    color:var(--cw-muted,#8f9aae)!important;
    font-size:.67rem!important;
    line-height:1.2!important;
    text-align:right!important;
  }
  body[data-lesson] .demo>.takeaway .advisor.enharmonic{
    padding:3px 6px!important;
    white-space:normal!important;
  }
  body[data-lesson] .demo>.takeaway .enhChoice{
    margin-left:5px!important;
    padding:3px 6px!important;
    font-size:.64rem!important;
  }
}

@media (min-width:1401px) and (max-height:819px){
  body[data-lesson] .demo{grid-template-rows:auto auto minmax(250px,34vh) auto!important}
  body[data-lesson] .demo>.takeaway{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
    margin:0!important;
    padding:5px 8px!important;
    border:1px solid var(--cw-border,#28313f)!important;
    border-radius:7px!important;
    background:#080d14!important;
  }
}

@media (max-width:1400px){
  body[data-lesson] .demo>.takeaway{margin:0!important}
}