/* Keep the lesson first on touch-sized screens; retain the desktop sidebar. */
.course-toggle{display:none}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #c67b00;outline-offset:3px}
.sentence-detail,.dialogue-line div,.support-row>div,.home-level{min-width:0;overflow-wrap:anywhere}
.dialogue-line b,.sound{flex-shrink:0}
@media(max-width:1180px){
 main{display:flex;flex-direction:column;gap:14px;padding:16px;max-width:960px}
 .sidebar{width:100%;position:static;max-height:none;padding:0;border-radius:16px;overflow:visible}
 .side-head{display:none}
 .course-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:56px;border:0;background:#fff;border-radius:16px;padding:14px 18px;color:#173b73;text-align:left;font-weight:900}
 .course-toggle small{display:block;font-size:14px;line-height:1.4;font-weight:700;color:#526887;margin-top:4px}
 .course-toggle-status{font-size:14px;background:#e8efff;border-radius:9px;padding:8px 12px;white-space:nowrap}
 #nav{display:none}
 .sidebar[data-menu-open="true"] #nav{display:block;max-height:min(60vh,540px);max-height:min(60dvh,540px);overflow-y:auto;overscroll-behavior:contain;padding:0 16px 16px;border-top:1px solid #dfe7f4}
 .sidebar[data-menu-open="true"] .course-toggle{border-radius:16px 16px 0 0}
 .stage{width:100%}
 .stage:has(.lesson-title) .intro{display:none}
 .intro{padding:20px;margin-bottom:14px}
 .intro .progress{display:none}
 .workspace{padding:24px;border-radius:20px}
 .lesson-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .level,.lesson-nav,.stepper button,.sound,.primary,.secondary{min-height:44px}
 .writing-layout{grid-template-columns:minmax(240px,285px) minmax(0,1fr);gap:18px}
 .stepper{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding:4px 2px 10px;scrollbar-width:thin;gap:7px}
 .stepper button{flex:0 0 auto;padding:10px 14px;font-size:14px}
 .dialogue-line{max-width:95%}
}
@media(max-width:700px){
 main{padding:12px;gap:12px}
 header{padding:12px 16px}
 header .brand{font-size:21px}
 .header-right{display:none}
 .course-toggle{padding:12px 14px;gap:10px}
 .course-toggle small{font-size:14px}
 .workspace{padding:16px;border-radius:18px}
 .lesson-title{font-size:28px;line-height:1.2}
 .lesson-desc{font-size:16px;margin-bottom:14px}
 .intro{padding:18px}
 .intro h1{font-size:25px}
 .word-grid,.learning-grid,.home-levels,.writing-layout,.choices{grid-template-columns:minmax(0,1fr)}
 .sentence-card{align-items:flex-start;flex-wrap:wrap;gap:10px}
 .sentence-detail{flex:1 1 100%}
 .dialogue-line{max-width:100%;gap:10px;flex-wrap:wrap}
 .dialogue-line div{flex:1 1 calc(100% - 50px)}
 .dialogue-line .sound{margin-left:45px}
 .reading-card{padding:16px}
 .reading-cn{font-size:23px;line-height:1.8;overflow-wrap:anywhere}
 .support-row{padding:12px;grid-template-columns:20px minmax(0,1fr);gap:8px}
 .support-py,.support-en{font-size:16px}
 .character-card{flex:1 1 90px;min-width:0}
 .stroke-target{max-width:100%;height:auto;aspect-ratio:1}
 .paper{padding:16px;min-width:0}
 .practice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .practice-cell{width:100%;height:auto;aspect-ratio:1}
 .action-row{flex-wrap:wrap}
 .action-row button{flex:1 1 130px;padding:12px 14px}
 .worksheet-link{max-width:100%;overflow-wrap:anywhere}
 .home-level-foot{flex-wrap:wrap;gap:12px}
 .lesson-list{grid-template-columns:1fr}
}
/* Companion readings reuse the existing blue pinyin and green English styles. */
.supplementary-reading{margin-top:24px;border:2px solid #c9d9ef;border-radius:16px;overflow:hidden}
.supplementary-reading>summary{padding:18px;background:#edf3fd;cursor:pointer;color:#173b73;line-height:1.6}
.supplementary-reading>summary span{font-weight:800;margin-right:12px}
.supplementary-reading>summary strong{font-size:20px}
.supplementary-reading>summary small{display:block;font-size:16px;margin-top:4px}
.supplementary-body{padding:20px;min-width:0;overflow-wrap:anywhere}
.supplementary-body h4{font-size:18px;margin:24px 0 14px}
.extra-question{padding:16px 0;border-bottom:1px solid #dfe7f4;font-size:16px;line-height:1.7}
.extra-question ol{padding-left:28px}
.extra-question li{padding:6px 0}
.extra-answer{margin:12px 0;border:1px solid #dfe7f4;border-radius:10px;padding:12px}
.extra-answer summary{cursor:pointer;font-weight:700;color:#173b73;min-height:30px}
.extra-answer .support-en{background:transparent}
@media(max-width:700px){.supplementary-body{padding:12px}.supplementary-reading>summary{padding:14px}.supplementary-body .reading-card{padding:14px}.supplementary-body .word-grid{grid-template-columns:1fr}.supplementary-body .support-row{gap:8px}}

.character-picks{flex-wrap:wrap;max-height:230px;overflow-y:auto}
.character-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}
.article-title{margin:0 0 22px;font-size:29px;color:#173b73;line-height:1.4;text-align:center}
.article-title small{display:block;font-size:16px;color:#60728d;font-weight:600;margin-top:7px}
.reading-cn p{margin:0 0 1em}
.reading-cn .prose{text-indent:2em}
.reading-cn .verse{text-indent:0}
@media(max-width:1180px){.stepper{overscroll-behavior-x:contain}}
@media(max-width:700px){.character-row{grid-template-columns:repeat(2,minmax(0,1fr))}.article-title{font-size:25px}}
.poem-title{font-size:23px;margin:24px 0 10px;color:#173b73}.reading-cn .verse{padding-left:1em;line-height:2.1}
.character-coverage-note{font-size:14px!important;color:#60728d!important;line-height:1.5!important;margin-bottom:10px!important}