/* B077OY — desktop viewport fit for the four Chords & Harmony comparison lessons.
   The keyboard remains the primary teaching surface; supporting chrome is compacted. */
@media (min-width:1401px) and (min-height:820px){
  body[data-lesson="major"] .lesson,
  body[data-lesson="parallel"] .lesson,
  body[data-lesson="relative"] .lesson,
  body[data-lesson="borrowed"] .lesson{
    gap:8px!important;
    padding-top:8px!important;
    padding-bottom:10px!important;
  }

  body[data-lesson="major"] .lessonHeader,
  body[data-lesson="parallel"] .lessonHeader,
  body[data-lesson="relative"] .lessonHeader,
  body[data-lesson="borrowed"] .lessonHeader{
    gap:8px!important;
  }

  body[data-lesson="major"] .lessonTitle,
  body[data-lesson="parallel"] .lessonTitle,
  body[data-lesson="relative"] .lessonTitle,
  body[data-lesson="borrowed"] .lessonTitle{
    padding:13px 18px!important;
  }

  body[data-lesson] .lessonTitle h1{
    margin:4px 0 7px!important;
    font-size:clamp(1.75rem,2.25vw,2.2rem)!important;
    line-height:1!important;
  }
  body[data-lesson] .lessonTitle .messageHeading{margin:8px 0 3px!important}
  body[data-lesson] .lessonTitle p{font-size:.88rem!important;line-height:1.32!important}

  body[data-lesson] .tonicPanel{
    gap:7px!important;
    padding:10px 12px!important;
  }
  body[data-lesson] .focusedPath{padding:7px 10px!important}
  body[data-lesson] .focusedPath summary{font-size:.75rem!important}
  body[data-lesson] .tonic{min-height:40px!important;padding:3px 2px!important;font-size:.82rem!important}
  body[data-lesson] .tonic small{margin-top:1px!important;font-size:.55rem!important}

  body[data-lesson] .actionPanel{
    grid-template-columns:minmax(300px,1fr) auto minmax(230px,.72fr)!important;
    gap:10px!important;
    padding:8px 12px!important;
  }
  body[data-lesson] .instruction b{margin-bottom:2px!important;font-size:.88rem!important}
  body[data-lesson] .instruction span{font-size:.76rem!important;line-height:1.3!important}
  body[data-lesson] .controls{gap:6px!important}
  body[data-lesson] .control{gap:2px!important}
  body[data-lesson] .control label{font-size:.59rem!important}
  body[data-lesson] .toggle{min-width:178px!important;padding:2px!important}
  body[data-lesson] .toggle button{min-height:32px!important;padding:5px 8px!important;font-size:.73rem!important}
  body[data-lesson] .playGlyph{width:16px!important;height:16px!important}
  body[data-lesson] .summary{padding-left:9px!important;font-size:.72rem!important;line-height:1.25!important}
  body[data-lesson] .summary strong{margin-bottom:1px!important;font-size:.86rem!important}

  body[data-lesson] .demo{
    grid-template-rows:auto auto minmax(270px,31vh)!important;
    gap:6px!important;
    padding:9px 12px 11px!important;
  }
  body[data-lesson="borrowed"] .actionPanel{gap:6px 10px!important;padding:6px 12px!important}
  body[data-lesson="borrowed"] .borrowedChooser{padding:6px!important}
  body[data-lesson="borrowed"] .borrowedChooserTitle{margin-bottom:4px!important}
  body[data-lesson="borrowed"] .borrowedOption{padding:5px 7px!important}
  body[data-lesson="borrowed"] .actionPanel .summary{grid-column:1/-1!important;padding:5px 8px!important}
  body[data-lesson="borrowed"] .demo{grid-template-rows:auto minmax(225px,24vh) auto!important;padding-top:7px!important}
  body[data-lesson] .watch{
    gap:5px 8px!important;
    padding:6px 10px!important;
    font-size:.72rem!important;
    line-height:1.25!important;
  }
  body[data-lesson] .pill{min-height:34px!important;font-size:.9rem!important}
  body[data-lesson] .choiceStrip.alignedStrip{height:34px!important}
  body[data-lesson] .choiceStrip.alignedStrip>.pill{height:34px!important;min-height:34px!important}
  body[data-lesson] .keyboard{min-height:270px!important}
  body[data-lesson="borrowed"] .keyboard{min-height:225px!important}

  body[data-lesson] .takeaway{
    gap:10px!important;
    padding:7px 12px!important;
    font-size:.75rem!important;
    line-height:1.25!important;
  }
  body[data-lesson] .advisor{font-size:.69rem!important}
  body[data-lesson] .advisor.enharmonic{padding:4px 7px!important}
}

/* Shorter desktop windows keep the compact framing, but retain scrolling and a
   readable keyboard instead of scaling musical information below legibility. */
@media (min-width:1401px) and (max-height:819px){
  body[data-lesson] .lesson{gap:8px!important;padding:8px 0 18px!important}
  body[data-lesson] .lessonTitle{padding:13px 17px!important}
  body[data-lesson] .lessonTitle h1{margin:4px 0 7px!important;font-size:1.9rem!important}
  body[data-lesson] .lessonTitle .messageHeading{margin:8px 0 3px!important}
  body[data-lesson] .tonicPanel{gap:7px!important;padding:10px 12px!important}
  body[data-lesson] .focusedPath{padding:7px 10px!important}
  body[data-lesson] .tonic{min-height:40px!important;padding:3px 2px!important}
  body[data-lesson] .actionPanel{gap:10px!important;padding:8px 12px!important}
  body[data-lesson] .demo{gap:6px!important;padding:9px 12px!important}
  body[data-lesson="borrowed"] .actionPanel{gap:6px!important;padding:6px 10px!important}
  body[data-lesson="borrowed"] .borrowedChooser{padding:6px!important}
  body[data-lesson="borrowed"] .borrowedChooserTitle{margin-bottom:4px!important}
  body[data-lesson="borrowed"] .borrowedOption{padding:5px 7px!important}
  body[data-lesson="borrowed"] .actionPanel .summary{grid-column:1/-1!important;padding:5px 8px!important}
  body[data-lesson="borrowed"] .demo{grid-template-rows:auto minmax(225px,28vh) auto!important}
  body[data-lesson] .watch{padding:6px 10px!important}
  body[data-lesson] .keyboard{min-height:270px!important}
  body[data-lesson="borrowed"] .keyboard{min-height:225px!important}
  body[data-lesson] .takeaway{padding:7px 12px!important}
}