/* M-53 平板模式（html.tablet，触屏 700–1400 宽自动，或手动切）：只改排版，电脑上一点不变。
   1. 导航收成 80 px 窄栏，图标下面一行小字（平板没有悬停，光有图标认不出）；分组名换成一根细线。
   2. 班级卡搬到顶栏左边（studio.js applyTablet）；顶栏、页头压矮，搜索收成图标。
   3. 点一下带说明的标签弹出说明（.tippop）。 */
html.tablet .shell,html.tablet .shell.folded{grid-template-columns:84px minmax(0,1fr)}
html.tablet .side{margin:8px 0 8px 8px;padding:10px 6px 8px}
html.tablet .brandrow{flex-direction:column;margin:0 0 8px}
html.tablet .brand{justify-content:center;flex:none}
html.tablet .brand span,html.tablet .collapse,html.tablet .shell>.split-h{display:none}
html.tablet .navs{gap:2px;margin:0 -2px;padding:0 2px}
html.tablet .side .cap{font-size:0;height:1px;background:var(--glass-edge);margin:6px 10px}
html.tablet .side .cap:first-child{display:none}
html.tablet .shell .nav{flex-direction:column;justify-content:center;gap:3px;min-height:56px;padding:6px 2px;position:relative;text-align:center}
html.tablet .shell .nav svg{width:21px;height:21px}
html.tablet .shell .nav>span:not(.badge){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;flex:none;width:100%;font-size:11px;line-height:1.25;font-weight:500}
html.tablet .shell .nav.on>span:not(.badge){font-weight:600}
html.tablet .shell .nav .badge{position:absolute;top:3px;right:6px;margin:0;padding:0 5px;line-height:16px}
html.tablet .sidefoot{padding-top:6px;margin-top:6px}
/* 顶栏：左边班级，右边几个图标；面包屑、搜索字、老师名收起 */
html.tablet .topbar{height:56px;padding:0 12px 0 14px;gap:4px}
html.tablet .crumb{display:none}
html.tablet .topbar .clscard,html.tablet .shell.folded .topbar .clscard{display:flex;align-items:baseline;gap:8px;flex:0 1 auto;min-width:0;max-width:min(420px,50vw);min-height:44px;margin:0 auto 0 0;padding:11px 34px 0 14px;border-radius:var(--r-pill)}
html.tablet .topbar .clscard .clsname{font-size:15px;min-width:0}
html.tablet .topbar .clscard small{flex:none;white-space:nowrap}
/* 切换「电脑 / 平板」排版：带字的小胶囊，不和「学生视角」的图标混 */
#tablet-toggle{width:auto;padding:0 12px;border-radius:var(--r-pill);font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
html.tablet .search{width:44px;height:44px;padding:0;justify-content:center;flex:none}
html.tablet .search span,html.tablet .search kbd,html.tablet #me-name{display:none}
html.tablet .search svg{width:19px;height:19px}
/* 页头压矮：标题 20、副标题同一行 */
html.tablet .content{padding:6px 16px 10px}
html.tablet .head{padding:0 2px 10px;gap:8px 12px;align-items:center}
html.tablet .head>.ttl{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap;min-width:0}
html.tablet .head h1{font-size:20px}
html.tablet .head p{margin:0;font-size:13px}
/* 点代替悬停 */
.tippop{position:fixed;z-index:80;max-width:min(320px,calc(100vw - 16px));padding:8px 12px;border-radius:var(--r-sm);background:var(--ink);color:#fff;font-size:13px;line-height:1.5;box-shadow:var(--sh-md);pointer-events:none}
/* 班级与学生、录播这类「班级卡 + 主面板」的页：上下边距收一点，一屏多露两行 */
html.tablet .mp .clshead{padding-top:4px;padding-bottom:4px}
html.tablet .ro-main{padding:8px 12px 10px;gap:8px}
html.tablet .ro-main>div{gap:8px}
/* 页内的班级条只有班名和说明、没有操作时，平板上收起（顶栏已经能选班）；有「编辑班级」这类操作的留着 */
html.tablet .mp .clshead:not(:has(.clsact .btn)){display:none}

/* C-284: retain the grading surface while reading an answer on a tablet. */
html.tablet .ap-workspace.ap-open{display:flex;flex-direction:column;gap:16px}
html.tablet .ap-workspace>.ap-work,html.tablet .ap-workspace>.ap-side{width:100%}
html.tablet .ap-workspace>.ap-side{position:static;max-height:55dvh}
html.tablet .ap-workspace>.split-h{display:none}