/* Teacher mobile layouts. Desktop worksheets and print pagination keep their original styles. */
@media screen and (max-width:820px){
 :root{--wb-header-height:60px;--wb-visible-height:100vh;--wb-visible-top:0px}
 html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--wb-header-height) + 12px)}
 body{overflow-wrap:anywhere}
 #login{overflow:auto;padding:20px 0;padding-bottom:max(20px,env(safe-area-inset-bottom));min-height:100dvh}
 .login-card{padding:26px 22px;margin:auto;flex:none}
 .topbar{height:auto;min-height:60px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));gap:8px}
 .topbar .logo{flex:1;min-width:0;line-height:1.4;overflow-wrap:anywhere}
 .topbar .logo .badge{display:none}
 .topbar .spacer{display:none}
 .topbar .tbtn{flex:none;min-height:44px;padding:8px 10px;white-space:nowrap}
 #btn-menu{width:44px;height:44px}
 .userchip{flex:none;padding:0;background:none}
 .userchip .av{width:30px;height:30px}
 .side{top:var(--wb-header-height);height:calc(100dvh - var(--wb-header-height));padding-bottom:max(20px,env(safe-area-inset-bottom));overscroll-behavior:contain}
 body.menu-open{overflow:hidden}
 body:has(#mask.on),body:has(#crop-mask.on),body:has(#knowledge-detail[open]){overflow:hidden}
 .nav-item{min-height:48px;font-size:15px}
 .main{padding:12px 12px max(32px,env(safe-area-inset-bottom));overflow:visible;width:100%;min-width:0}
 .view-head h2{flex-wrap:wrap;line-height:1.5}
 .view-head h2 .tip{flex-basis:100%;margin:0;font-size:13px}
 .card,.panel,.stat{min-width:0}
 .sec-title{flex-wrap:wrap;line-height:1.5}
 .sec-title>.muted,.panel-title>.panel-tip-sm,.panel-title>.panel-tip{flex-basis:100%;margin-left:0;font-size:12px;line-height:1.6;font-weight:400}
 .grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
 .grid3,.grid2,.cards2{grid-template-columns:minmax(0,1fr)}
 .stat{padding:14px}
 .empty{padding:22px 10px;line-height:1.7}
 .btn,.mini-btn,.primary,.sub-tab-btn,.pp-day,.tool-card{min-height:44px;white-space:normal;line-height:1.4;max-width:100%}
 .btn.sm{font-size:13px;padding:9px 12px}
 .mini-btn{flex-shrink:1}
 .sub-tabs{gap:8px;flex-wrap:wrap;overflow:visible}
 .sub-tab-btn{flex:1 1 auto;text-align:center;padding:10px 12px;font-size:14px}
 .row>*{min-width:0;max-width:100%}
 input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{max-width:100%;font-size:16px!important;min-height:44px}
 textarea{line-height:1.6}
 select{min-width:0}
 .ngrp-blk{padding:12px 10px}
 .ngrp-in{min-width:0;width:100%;font-size:15px!important}
 .ngrp-hd .fl{display:none}
 .ngrp-hd{gap:8px}
 .nrow{display:grid;grid-template-columns:36px minmax(0,1fr) 44px;gap:6px;margin-bottom:12px}
 .nrow .ncb{grid-column:1;grid-row:1;min-height:44px;display:grid;place-items:center}
 .ncb span{width:22px;height:22px}
 .ncb input:checked+span::after{left:7px;top:3px}
 .nrow .ntx-in{grid-column:2/-1;grid-row:1;width:100%;min-height:68px;resize:vertical;line-height:1.6}
 .nrow .ibtn{width:44px;height:44px;font-size:16px;justify-self:end}
 .nrow .ibtn[data-act=icmt]{grid-column:1;grid-row:2}
 .nrow .ibtn[data-act=isave]{grid-column:2;grid-row:2}
 .nrow .ibtn[data-act=idel]{grid-column:3;grid-row:2}
 .ngrp-hd .ibtn{width:44px;height:44px;flex:none}
 .ncmt-in{min-height:88px}
 .hw-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
 .hw-actions #hw-save,.hw-actions #hw-tip{grid-column:1/-1}
 .hw-actions #hw-save{grid-row:2}
 .hw-actions #hw-preview-last{grid-column:1/-1}
 .drop{padding:22px 12px;line-height:1.7}
 .preview .pv .pv-rm,.preview-grid .pv .rm{width:32px;height:32px;font-size:16px}
 .chip{max-width:100%;min-width:0;flex-wrap:wrap;gap:6px;line-height:1.6;border-radius:12px;overflow-wrap:anywhere}
 .chip .kp-arch,.chip .kp-reset{margin-left:0;min-height:36px;padding:6px 10px}
 .print-opts,.analytics-filter{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
 .fld-inline{display:flex;flex-wrap:wrap;min-width:0;gap:8px}
 .fld-inline select,.fld-inline input:not([type=checkbox]){height:44px;min-width:0;max-width:100%;flex:1}
 .fld-inline input[type=checkbox]{flex:0 0 22px;width:22px;height:22px;min-height:0}
 .action-row .sel-info{flex-basis:100%;line-height:1.6}
 .action-row .primary{flex:1 1 100%;min-height:48px;padding:12px}
 .dz-btns>.btn{flex:1 1 auto}
 .res-actions,.stu-card-acts{flex-wrap:wrap}
 .res-actions>.btn,.stu-card-acts>.mini-btn{flex:1}
 .hist{flex-wrap:wrap}
 .hist .hg{flex-basis:100%}
 .ft-file{flex-wrap:wrap;gap:5px;line-height:1.6}
 .ft-file .fn{min-width:0;flex:1 1 100%}
 .ft-children{margin-left:7px;padding-left:8px}
 .files-hint{line-height:1.7}
 .mc-row{flex-wrap:wrap}
 .mc-row>.fld-inline{flex-basis:100%}
 .param-group{flex-wrap:wrap;max-width:100%}
 .param-group label{max-width:100%}
 .tg-head{flex-wrap:wrap}
 .sudoku-grid{width:min(100%,310px);grid-template-columns:repeat(9,minmax(0,1fr))}
 .sudoku-grid .sd-cell{width:100%;height:auto;aspect-ratio:1;min-width:0;display:grid;place-items:center;font-size:16px;padding:0}
 .sudoku-grid.small{width:min(100%,202px);grid-template-columns:repeat(9,minmax(0,1fr))}
 .sudoku-grid.small .sd-cell{width:100%;height:auto}
 .oral-grid,.ans-grid.oral,.ans-grid.calc{grid-template-columns:repeat(2,minmax(0,1fr))}
 .oral-item,.ans-cell{white-space:normal;overflow-wrap:anywhere}
 .magic-grid .mg-cell{padding:0}
 .shape-svg svg{max-width:100%;height:auto}
 .stu-pick label{margin:0;min-height:48px;flex-wrap:wrap;line-height:1.6;min-width:0;max-width:100%;padding:10px}
 .ck-course-hd,.ck-l-name,.pp-l-name{line-height:1.6;overflow-wrap:anywhere}
 .ck-cf-row{flex-wrap:wrap;gap:4px}
 .ck-cf-row .muted{flex-basis:100%}
 .ck-ops>.btn{flex:1 1 auto}
 .pp-lesson{flex-wrap:wrap}
 .pp-lesson>.btn{min-width:68px}
 .pp-foot>*{min-width:0!important;max-width:100%}
 .pp-foot #pp-save{width:100%}
 .pp-foot #pp-msg{flex-basis:100%}
 .hm-legend{flex-wrap:wrap;line-height:1.7}
 .hm-scroll{max-width:100%;border:1px solid var(--line);border-radius:10px}
 table.hm th{white-space:normal;min-width:104px;max-width:none;overflow:visible;line-height:1.5}
 table.hm .hm-stu{position:sticky;left:0;z-index:1;background:#f8fafc;min-width:90px;max-width:130px;white-space:normal}
 table.hm td.hm-stu{font-size:13px;color:var(--ink);line-height:1.5}
 .hm-scroll-note{font-size:12px;color:var(--ink2);margin:6px 0 10px;line-height:1.6}
 #teacher-error-knowledge .card>p{display:flex;flex-wrap:wrap;gap:8px;align-items:center;line-height:1.7}
 #teacher-error-knowledge select{flex:1 1 120px;max-width:100%;min-width:0}
 #teacher-error-knowledge pre{white-space:pre-wrap;overflow-wrap:anywhere}
 #mask{padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom));top:var(--wb-visible-top);height:var(--wb-visible-height);bottom:auto;overflow:hidden}
 #mask .modal{padding:16px;width:100%;max-width:520px;max-height:calc(var(--wb-visible-height) - 24px);overflow:auto;overscroll-behavior:contain;scroll-padding:12px}
 .modal h3{line-height:1.6;overflow-wrap:anywhere}
 .modal .acts{position:sticky;bottom:-16px;background:#fff;padding:12px 0;margin-top:14px;flex-wrap:wrap;z-index:2}
 .modal .acts>.btn{flex:1}
 .modal input[type=checkbox],.modal input[type=radio]{width:22px;height:22px;padding:0;flex:none;min-height:0}
 #knowledge-detail{max-width:calc(100vw - 24px);padding:16px!important;max-height:calc(var(--wb-visible-height) - 24px)!important;line-height:1.7;overflow-wrap:anywhere}
 #knowledge-detail [data-kk-close]{min-height:44px;padding:8px 16px;position:sticky;top:0;background:#fff;border:1px solid #dce2ed;border-radius:8px}
 #knowledge-detail h3{clear:both;padding-top:8px}
 #knowledge-detail p{margin:8px 0}
 #crop-mask{top:var(--wb-visible-top);height:var(--wb-visible-height);bottom:auto;overflow:hidden}
 .crop-modal{height:var(--wb-visible-height)!important;max-height:var(--wb-visible-height)!important;min-height:0}
 .crop-stage{width:calc(100% - 16px);min-height:80px;margin:6px 8px}
 .crop-hd,.crop-tip,.crop-tools,.crop-addrow,#crop-mask .acts{flex-shrink:0}
 .crop-tip{font-size:12px;line-height:1.5;max-height:62px;overflow:auto}
 .crop-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0;margin:6px 8px}
 .crop-tools .tool{min-height:40px;padding:8px 4px;white-space:normal}
 #crop-mask .acts{padding-bottom:max(12px,env(safe-area-inset-bottom))}
 .toast{max-width:calc(100vw - 24px);width:max-content;bottom:max(20px,env(safe-area-inset-bottom));text-align:center;line-height:1.6}
 .ai-embed{height:auto;min-height:0;overflow:visible;background:transparent;border-radius:0;box-shadow:none}
 .ai-subject-entries{padding-top:0!important}
 .ai-subject-entries button{min-height:44px;flex:1;padding:10px 8px!important}
 .ai-subject-panel iframe,#main>.leads-frame{display:block;height:calc(100dvh - var(--wb-header-height) - 100px)!important;min-height:200px!important;border-radius:12px}
 .embed-wrap:not(.ai-embed){height:calc(100dvh - var(--wb-header-height) - 80px);min-height:320px}
 body.wb-leads-mobile{--ink2:#6b7280;--ink:#22242e;margin:0;min-width:0;background:#f1f5fa}
 .wb-leads-mobile header{padding:12px;gap:12px;flex-wrap:wrap;line-height:1.6}
 .wb-leads-mobile #leads-back{display:none}
 .wb-leads-mobile .content{width:100%;min-width:0;padding:12px}
 .wb-leads-mobile .sub-tabs{display:flex;flex-wrap:wrap;gap:8px}
 .wb-leads-mobile .sub-tab{flex:1;min-height:44px}
 .wb-leads-mobile .cards-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .wb-leads-mobile .pa-person-head{flex-wrap:wrap}
 .wb-leads-mobile .pa-person-actions>button{flex:1 1 auto;min-height:44px}
 .wb-leads-mobile .btn-mini,.wb-leads-mobile button{min-height:44px;white-space:normal}
 .wb-leads-mobile .pa-pane-head{flex-wrap:wrap}
 .wb-leads-mobile .filter-bar .field{width:100%;min-width:0}
 .wb-leads-mobile .filter-bar .field input,.wb-leads-mobile .filter-bar .field select{width:100%}
 .wb-leads-mobile .pa-link-intro{min-width:0}
 .wb-leads-mobile .filterbar,.wb-leads-mobile .filter-bar{flex-wrap:wrap}
 .wb-leads-mobile input,.wb-leads-mobile select,.wb-leads-mobile textarea{min-width:0;max-width:100%;font-size:16px}
}
@media screen and (max-width:600px){
 .topbar{display:grid;grid-template-columns:44px auto minmax(0,1fr) 30px 48px;gap:6px 8px}
 #btn-menu{grid-column:1;grid-row:1}
 #btn-home{grid-column:2;grid-row:1}
 .topbar .userchip{grid-column:4;grid-row:1}
 #btn-logout{grid-column:5;grid-row:1;padding:8px 6px}
 .topbar .logo{grid-column:1/-1;grid-row:2;font-size:14px}
 .topbar .logo #brand{display:block;width:100%;line-height:1.5}
 .todo-row{grid-template-columns:minmax(0,1fr)}
}
@media screen and (max-width:820px){
 .mobile-records,.mobile-records tbody{display:block;width:100%;white-space:normal;overflow:visible}
 .mobile-records thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .mobile-records tbody tr{display:block;margin:10px 0;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fafcff}
 .mobile-records td{display:grid;grid-template-columns:80px minmax(0,1fr);gap:6px;padding:6px 0;border:0;text-align:left;line-height:1.6;font-size:13px;overflow-wrap:anywhere;min-width:0;white-space:normal}
 .mobile-records td::before{content:attr(data-label);font-size:12px;color:var(--ink2);font-weight:400}
 .mobile-records td>*{min-width:0;max-width:100%}
 .mobile-records td small{grid-column:2}
 .mobile-records td>button,.mobile-records td>a{grid-column:2}
 .mobile-records td[colspan]{display:block}
 .mobile-records td[colspan]::before{display:none}
 .mobile-records td .btn{width:100%;text-align:left;overflow-wrap:anywhere;font-size:13px}
 .mobile-records td:first-child{font-weight:600}
 .mobile-records td .pill{width:max-content;max-width:100%}
 .wb-leads-mobile table{max-width:100%}
}
@media screen and (max-height:500px) and (max-width:820px){
 .crop-tip{max-height:34px}
 .crop-tools .tool{min-height:34px;padding:4px}
 .crop-modal .crop-hd{padding-top:8px}
}