/* ---------- Responsive & motion ----------
   Loaded last so these overrides win the cascade against the
   component stylesheets above (matches the original source order
   in legacy/v1-source/app.html). */
@media (max-width:720px){
  main{padding:20px 15px 30px}
  .task-card{padding:22px 18px}
  .chapter-card{padding:20px 18px}
  .greeting{font-size:24px}
  .brand-sub{display:none}
  .brand-name{font-size:12.5px}
  .seq-label{font-size:8.5px;letter-spacing:.2px}
  .seq-dot{width:26px;height:26px;font-size:10.5px}
  .seq-item::before{top:13px}
  .course-route-card{padding:20px 18px;gap:18px}
  .route-title{font-size:18px}
  .route-copy{font-size:13px}
  .cur-lessons-card .chapter-title{font-size:17px}
  .btn-book .book-long{display:none}
  .btn-book .book-short{display:inline}
  .focus-badge .fs-long{display:none}
  .focus-badge .fs-short{display:inline}
  .student-chip .cls{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}


/* ============================================================
   LARGE DESKTOP MONITORS
   The reading column is capped at 900px because that is roughly
   65-75 characters, which is where prose stays readable — a
   full-width line of teaching text on a 27-inch monitor is
   genuinely harder to read, not easier.
   On a very wide screen, though, that column looked lost in
   empty space and the owner was zooming to 175% to compensate.
   These caps give it more room without pushing the line length
   past the readable band. It is a compromise, and deliberately
   a modest one.
   ============================================================ */
@media (min-width:1500px){
  main{max-width:1240px}
  .header-inner,#app-footer{max-width:1240px}
  .cur-session-shell{max-width:1040px}
}
@media (min-width:1900px){
  main{max-width:1360px}
  .header-inner,#app-footer{max-width:1360px}
  .cur-session-shell{max-width:1120px}
}