/* Phone layout: app-style shell (sticky header, bottom tabs, bottom-sheet dialogs). Loaded last so it wins over theme overrides. */
/* ===== Mobile app shell (phones) ===== */
.mobile-tabs{display:none}
@media(max-width:700px){
 html,body{height:100dvh;overflow:hidden;-webkit-text-size-adjust:100%}
 body{background:#f5f4f1}
 .shell{height:100dvh;grid-template-rows:auto minmax(0,1fr)}
 .main{height:100dvh;padding-bottom:0}
 /* Header: compact, sticky, with the search on its own full-width row */
 #shell .topbar,.shell .topbar,body.student-portal-active .topbar{position:sticky;top:0;z-index:18;flex-wrap:wrap!important;height:auto!important;min-height:0!important;flex:0 0 auto;padding:max(8px,env(safe-area-inset-top)) 14px 10px!important;gap:8px 10px;box-shadow:0 1px 0 var(--line),0 6px 18px #17203008}
 .topbar .breadcrumb{font-size:15px;font-weight:800;letter-spacing:-.3px;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .topbar .breadcrumb>span:last-child{overflow:hidden;text-overflow:ellipsis}
 .top-actions{display:contents}
 .topbar .top-search{order:20;flex:1 1 100%;width:100%;min-height:44px;border-radius:14px;padding:10px 14px;background:#f1f1ee;border-color:transparent;margin-top:2px;display:flex}
 .topbar .top-search input{font-size:16px}
 .topbar .mobile-menu,.topbar .icon-btn,.top-actions .btn{min-width:42px;width:42px;height:42px;min-height:42px;border-radius:13px;padding:0}
 .top-user{padding-left:4px;border:0}
 .top-user .avatar{width:38px;height:38px}
 .top-user .chevron,.top-user>svg:last-child{display:none}
 /* Content: card stack with room for the tab bar */
 .content{padding:14px 14px calc(96px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;scroll-behavior:smooth;overscroll-behavior-y:contain;scroll-padding-top:12px}
 .content>*:last-child{margin-bottom:0}
 .workspace-state{display:none}
 .page-heading{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:16px}
 .page-heading h1{font-size:24px;line-height:1.15;letter-spacing:-.6px}
 .page-heading p{font-size:13px;line-height:1.5}
 .page-heading .actions{justify-content:stretch;width:100%}
 .page-heading .actions .btn{flex:1 1 auto;min-height:46px;font-size:13px;border-radius:14px}
 .hero{border-radius:22px;padding:24px 22px;min-height:0;margin-bottom:16px}
 .hero h2{font-size:30px;line-height:1.05}
 .hero p{font-size:13px;max-width:none}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
 .stat{padding:14px;border-radius:18px}
 .stat-value{font-size:24px}
 .page-panel,.lms-card,.folder,.course,.unified-card,.notice,.hero,.stat{border-radius:18px}
 .page-panel{box-shadow:0 1px 2px #17203010}
 .page-panel.panel-pad,.panel-pad{padding:16px}
 .section-heading{gap:10px}
 .section-heading h2{font-size:17px}
 .courses,.unified-library,.lms-card-grid,.lms-kpi-grid{grid-template-columns:1fr!important;gap:14px}
 .toolbar{gap:10px}
 .toolbar .format-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;width:100%;padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none}
 .toolbar .format-tabs::-webkit-scrollbar{display:none}
 .format-tab{flex:0 0 auto;font-size:12px;padding:9px 13px;border-radius:999px;min-height:38px}
 .toolbar select,.sort-select,.toolbar .field select{min-height:44px;border-radius:12px;font-size:14px}
 .toolbar .flex{width:100%;gap:8px}
 .toolbar .flex>select{flex:1 1 140px;min-width:0}
 /* Tables scroll sideways inside their card instead of squeezing */
 .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;margin:0 -2px}
 .table-wrap table{min-width:560px}
 .table-wrap th,.table-wrap td{padding:12px 12px;font-size:13px;white-space:nowrap}
 .table-actions{flex-wrap:nowrap}
 /* Buttons, fields: thumb-sized */
 .btn{min-height:42px;border-radius:12px;font-size:13px}
 .btn.small{min-height:36px}
 .btn.icon-btn{width:42px;min-width:42px}
 .field input,.field select,.field textarea{min-height:46px;font-size:16px;border-radius:12px}
 .field textarea{min-height:110px}
 .form-grid{grid-template-columns:1fr;gap:12px}
 .form-grid .span2{grid-column:auto}
 .check-label{min-height:44px;align-items:center}
 /* Dialogs become bottom sheets */
 dialog#modal,dialog.sheet{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:22px 22px 0 0;max-height:calc(100dvh - 24px);border:0;box-shadow:0 -20px 60px #11182740}
 dialog#modal::before{content:"";display:block;width:44px;height:5px;border-radius:99px;background:#d9d9d6;margin:10px auto 0}
 dialog#modal .dialog-header{padding:12px 18px 8px;position:sticky;top:0;background:#fff;z-index:2}
 dialog#modal .dialog-body{padding:8px 18px 18px;max-height:calc(100dvh - 190px);overflow:auto;-webkit-overflow-scrolling:touch}
 dialog#modal .dialog-footer{padding:12px 18px calc(14px + env(safe-area-inset-bottom));position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);flex-wrap:wrap}
 dialog#modal .dialog-footer .btn{flex:1 1 auto}
 dialog.player{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;border-radius:0;margin:0}
 /* Slide-in drawer keeps the brand, with thumb-sized items */
 #shell .sidebar,.shell .sidebar{width:min(300px,84vw)!important;padding:calc(22px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));box-shadow:16px 0 60px #11182733;border-radius:0 24px 24px 0}
 .nav-button{padding:13px 14px;font-size:14px;border-radius:14px;min-height:48px}
 .nav-button .icon{width:22px;height:22px}
 .content-footer{padding-bottom:8px;text-align:center}
 /* Bottom tab bar */
 .mobile-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:24;background:#ffffffee;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px #17203012}
 .mobile-tab{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:54px;padding:6px 2px;border-radius:14px;color:#7a7f8a;font-size:10.5px;font-weight:650;letter-spacing:.1px;line-height:1;transition:background .18s,color .18s,transform .18s}
 .mobile-tab .icon,.mobile-tab svg{width:23px;height:23px;stroke-width:1.8}
 .mobile-tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .mobile-tab:active{transform:scale(.94)}
 .mobile-tab.active{color:var(--ink);background:#f3ead6}
 .mobile-tab.active .icon,.mobile-tab.active svg{color:#a97a1f}
 .shell.menu-open .mobile-tabs{z-index:22}
 /* The teaching board and the course player use the whole screen */
 body:has(dialog.player[open]) .mobile-tabs,body:has(.cb-board-overlay) .mobile-tabs{display:none}
}
@media(max-width:700px) and (display-mode:standalone){
 #shell .topbar{padding-top:max(10px,env(safe-area-inset-top))!important}
}

/* ===== Mobile course player (matches the phone design: close · title · Smartboard · more, chapter strip, bottom lesson bar) ===== */
@media(max-width:700px){
 dialog.player{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;border-radius:0;margin:0;border:0}
 .player-shell.cbm{position:relative;background:#0b1a3a}
 .player-shell.cbm .player-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"close title board more";align-items:center;gap:10px;padding:max(10px,env(safe-area-inset-top)) 12px 10px;min-height:64px}
 .player-shell.cbm .player-header>.avatar{display:none}
 .player-shell.cbm .player-header>.grow{grid-area:title;min-width:0}
 .player-shell.cbm .player-header h2{font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.3px}
 .player-shell.cbm .player-header p{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
 .player-shell.cbm .player-header [data-action="close-viewer"]{grid-area:close;order:-1;width:40px;height:40px;min-width:40px;border-radius:50%;border:1.5px solid #ffffff55;padding:0;display:inline-flex;align-items:center;justify-content:center}
 .player-shell.cbm .player-header .cb-head-tools{grid-area:board;margin:0;gap:0}
 .player-shell.cbm .player-header .cb-head-progress,.player-shell.cbm .player-header .cb-gear,.player-shell.cbm .player-header [data-action="fullscreen-player"],.player-shell.cbm .player-header [data-action="complete-course"],.player-shell.cbm .player-header .badge{display:none}
 .player-shell.cbm .cb-board-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:auto;min-width:56px;height:auto;padding:5px 8px;border-radius:10px;border:1.5px solid #f0c75e;background:#f0c75e14}
 .player-shell.cbm .cb-board-btn svg{width:22px;height:22px;color:#f0c75e}
 .player-shell.cbm .cb-board-btn small{display:block;font-size:9px;color:#fff;letter-spacing:.2px}
 .player-shell.cbm .cbm-more{grid-area:more;width:40px;height:40px;min-width:40px;border-radius:50%;border:1.5px solid #ffffff55;color:#fff;background:transparent;padding:0;display:inline-flex;align-items:center;justify-content:center}
 /* Chapter strip */
 .cbm-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"row row" "track pct";align-items:center;gap:6px 10px;padding:10px 14px 9px;background:#fff;border-bottom:1px solid var(--line)}
 .cbm-strip-row{grid-area:row;display:flex;justify-content:space-between;gap:12px;font-size:13px}
 .cbm-strip-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
 .cbm-strip-row span{color:#5b6070;font-weight:600;flex-shrink:0}
 .cbm-strip-track{grid-area:track;height:8px;border-radius:99px;background:#e6e8ee;overflow:hidden}
 .cbm-strip-track span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#e8b93a,#f5d36a);transition:width .4s ease}
 .cbm-strip-pct{grid-area:pct;font-size:12px;font-weight:800;color:var(--ink)}
 /* Body: content fills the screen, sidebar becomes a sheet */
 .player-shell.cbm .player-body{flex-direction:column;background:#0b1a3a}
 .player-shell.cbm .player-stage{background:#f7f7f5}
 .player-shell.cbm .player-canvas{display:block;padding:0 0 calc(92px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
 .player-shell.cbm .cb-page{padding:16px 16px 8px;max-width:none}
 .player-shell.cbm .cb-page-head h2{font-size:20px;line-height:1.2}
 .player-shell.cbm .cb-nav,.player-shell.cbm .cb-file-nav .cb-nav{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0;padding:0;border:0}
 .player-shell.cbm .cb-file-nav{padding:6px 14px calc(96px + env(safe-area-inset-bottom));flex-direction:column;align-items:stretch}
 .player-shell.cbm .player-bottom{display:none}
 .player-shell.cbm .cb-file-bar{padding:10px 14px}
 .player-shell.cbm .cb-embed,.player-shell.cbm .cb-yt{border-radius:14px;overflow:hidden}
 .player-shell.cbm .cb-sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;max-height:78dvh;width:100%;max-width:none;flex-direction:column;border-radius:22px 22px 0 0;background:#fff;box-shadow:0 -20px 60px #00000055;transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);z-index:40;padding:14px 14px calc(16px + env(safe-area-inset-bottom));overflow:auto;-webkit-overflow-scrolling:touch;border-right:0}
 .player-shell.cbm .cb-sidebar::before{content:"";display:block;width:44px;height:5px;border-radius:99px;background:#d9d9d6;margin:0 auto 12px}
 .player-shell.cbm.cbm-contents-open .cb-sidebar{transform:translateY(0)}
 .player-shell.cbm .cb-sidebar .eyebrow{display:block}
 .player-shell.cbm .cb-lessons{display:block}
 .player-shell.cbm .cb-lesson,.player-shell.cbm .asset-button{min-width:0;max-width:none;width:100%;padding:12px;font-size:13px;min-height:52px}
 .cbm-scrim{display:none;position:fixed;inset:0;background:#0b1a3a80;z-index:39}
 .player-shell.cbm.cbm-contents-open .cbm-scrim{display:block}
 /* Bottom lesson bar */
 .cbm-bar{position:absolute;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#0b1a3a;border-top:1px solid #ffffff14;box-shadow:0 -10px 30px #00000040}
 .cbm-prev{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px 0 12px;border-radius:999px;border:1.5px solid #ffffff66;background:transparent;color:#fff;font-weight:700;font-size:13px}
 .cbm-prev svg{transform:rotate(180deg);width:18px;height:18px}
 .cbm-prev:disabled{opacity:.35}
 .cbm-pos{text-align:center;color:#fff;line-height:1.15;min-width:0}
 .cbm-pos strong{display:block;font-size:14px}
 .cbm-pos small{display:block;font-size:10px;color:#c3cbe0}
 .cbm-primary{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 6px 0 16px;border-radius:999px;border:0;font-weight:800;font-size:13px;color:#1c1a12;background:#f0c75e;box-shadow:0 6px 18px #f0c75e40;white-space:nowrap}
 .cbm-primary svg{width:34px;height:34px;padding:8px;border-radius:50%;background:#1c1a12;color:#f0c75e;flex-shrink:0}
 .cbm-primary.primary{background:#fff;color:#0b1a3a}
 .cbm-primary.primary svg{background:#0b1a3a;color:#fff}
 .cbm-primary.locked,.cbm-primary:disabled{background:#ffffff22;color:#ffffffaa;box-shadow:none}
 .cbm-primary.locked svg{background:#ffffff22;color:#fff}
 .cbm-primary:active,.cbm-prev:active{transform:scale(.97)}
 /* More menu (bottom sheet) */
 .cbm-menu{position:fixed;inset:0;z-index:45;background:#0b1a3a80;display:flex;align-items:flex-end}
 .cbm-menu[hidden]{display:none}
 .cbm-menu-card{width:100%;background:#fff;border-radius:22px 22px 0 0;padding:14px 12px calc(14px + env(safe-area-inset-bottom));display:grid;gap:4px}
 .cbm-item{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 12px;border:0;border-radius:14px;background:transparent;color:var(--ink);font-size:15px;font-weight:600;text-align:left}
 .cbm-item svg{width:20px;height:20px;color:#a97a1f}
 .cbm-item:active{background:#f3ead6}
 .cbm-cancel{justify-content:center;color:#5b6070;border-top:1px solid var(--line);border-radius:0;margin-top:6px;padding-top:6px}
 /* Smartboard overlay covers the whole phone screen */
 .player-shell.cbm .cb-board{position:fixed;inset:0;z-index:60}
}