/* 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{-webkit-text-size-adjust:100%}
 body{background:#f5f4f1}
 .shell{height:100dvh;grid-template-rows:auto minmax(0,1fr)}
 .main{height:100dvh;padding-bottom:0}
 /* Phones: no header at all (the More tab opens everything the header had: profile, notifications, sign out). */
 #shell .topbar,.shell .topbar,body.student-portal-active .topbar{display:none!important}
 .mobile-tab-more{position:relative}
 .mobile-tab-dot{position:absolute;top:4px;right:calc(50% - 20px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#d92d20;color:#fff;font-size:10px;font-weight:700;font-style:normal;line-height:17px;text-align:center}
 /* 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 .mobile-menu{display:none!important}/* the More tab opens the same menu */
 .topbar .breadcrumb{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:2px}
 .topbar .breadcrumb .sep,.topbar .breadcrumb>span:not(:last-child){display:none}
 .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 .icon-btn,.top-actions .btn{min-width:40px;width:40px;height:40px;min-height:40px;border-radius:50%;padding:0}
 .top-actions .btn:not(.icon-btn) span,.top-actions .btn:not(.icon-btn) small{display:none}
 .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:calc(12px + env(safe-area-inset-top)) 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:22px 20px;min-height:0;margin-bottom:16px;grid-template-columns:1fr;display:block}
 .hero h1,.hero h2{font-size:28px;line-height:1.05;margin:6px 0 8px}
 .hero p{font-size:13px;line-height:1.5;max-width:none;margin:0}
 .hero-right-region,.hero-art-image,.hero-handwriting{display:none}
 .hero-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
 .hero-link-btn{flex:1 1 30%;justify-content:center;min-height:40px;font-size:12px;padding:0 8px;border-radius:12px}
 /* Admin overview: compact hero, 2-up metric tiles */
 #adminOverviewRoot .overview-hero{padding:20px 18px 16px;border-radius:22px;gap:0}
 #adminOverviewRoot .hero-kicker{font-size:10px;margin-bottom:8px}
 #adminOverviewRoot .hero-content h1{font-size:28px;margin:0 0 8px;line-height:1.05}
 #adminOverviewRoot .hero-content p{font-size:13px;line-height:1.5;margin:0}
 #adminOverviewRoot .hero-right-region{display:block;margin-top:14px;width:100%}
 #adminOverviewRoot .hero-links{flex-direction:row;flex-wrap:wrap;gap:6px;min-width:0}
 #adminOverviewRoot .hero-link-btn{flex:1 1 0;justify-content:center;min-height:38px;padding:0 6px;border-radius:12px;background:#ffffff14;font-size:11px;gap:5px;white-space:nowrap}
 #adminOverviewRoot .hero-link-btn svg{width:16px;height:16px}
 #adminOverviewRoot .overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #adminOverviewRoot .metric-card{padding:14px;border-radius:18px;min-height:0}
 #adminOverviewRoot .metric-top{flex-direction:column;gap:8px}
 #adminOverviewRoot .metric-info{flex-direction:column;align-items:flex-start;gap:8px}
 #adminOverviewRoot .metric-icon{width:34px;height:34px}
 #adminOverviewRoot .metric-label{font-size:12px}
 #adminOverviewRoot .metric-value{font-size:24px}
 #adminOverviewRoot .metric-chart{display:none}
 #adminOverviewRoot .metric-footer{font-size:11px;margin-top:6px}
 #adminOverviewRoot .overview-footer{padding:12px 0 0}
 /* Course library: swipeable filter chips, single compact controls row */
 /* Student phone home: no welcome banner / stat cards, the course list starts right at the filters. */
 body.student-portal-active .student-hero,body.student-portal-active .student-stats,body.student-portal-active .ul-header{display:none!important}
 .ul-header{gap:8px;margin-bottom:8px}
 .ul-header-text h2{font-size:21px;margin:0}
 .ul-header-text p{display:none}
 .ul-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:2px;scrollbar-width:none}
 .ul-tabs::-webkit-scrollbar{display:none}
 .ul-tab{flex:0 0 auto;white-space:nowrap;min-height:38px;border-radius:999px;padding:0 14px;font-size:13px}
 .ul-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .ul-controls select{width:100%;min-height:42px;border-radius:12px;font-size:13px}
 .ul-controls .ul-view-toggle,.ul-view-toggle{display:none}
 .ul-controls select:nth-of-type(3){grid-column:1/-1}
 .ul-controls{grid-template-columns:1fr 1fr 1fr}
 .ul-controls select:nth-of-type(3){grid-column:auto}
 .ul-controls select{font-size:12px;padding-left:10px;padding-right:26px}
 .ul-grid{gap:14px}
 .ul-card{border-radius:20px}
 .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 become stacked cards (labels come from the header row, added by mobile-app.js) */
 .table-wrap{overflow:visible;margin:0}
 .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%;min-width:0}
 .table-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}/* kept for screen readers */
 .table-wrap tbody tr{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:10px;box-shadow:0 1px 2px #17203010}
 .table-wrap td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;border:0;font-size:13px;white-space:normal;text-align:left;min-width:0}
 .table-wrap td+td{border-top:1px dashed #ececea}
 .table-wrap td[data-label]::before{content:attr(data-label);color:#7a7f8a;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;flex-shrink:0}
 .table-wrap td[data-label=""]::before,.table-wrap td.mobile-actions::before,.table-wrap td.mobile-title::before{display:none}
 .table-wrap td.mobile-title{font-weight:800;font-size:15px;padding-top:0}
 .table-wrap td.mobile-actions{padding-bottom:0}
 .table-wrap td.mobile-actions>.table-actions,.table-wrap td.mobile-actions>.flex{width:100%;flex-wrap:wrap;gap:8px}
 .table-wrap td.mobile-actions .btn{flex:1 1 auto;min-height:40px}
 .table-wrap td>*{min-width:0}
 .table-wrap td[data-label]:not(.mobile-title):not(.mobile-actions)>*{max-width:64%;flex:0 1 auto;text-align:right;overflow:hidden;text-overflow:ellipsis}
 .table-wrap td[data-label]:not(.mobile-title):not(.mobile-actions) .badge{white-space:normal;line-height:1.3;height:auto;padding-top:5px;padding-bottom:5px}
 .table-footer{flex-direction:column;gap:10px;align-items:stretch;text-align:center}
 .pagination-controls{justify-content:center}
 .filters{display:flex;flex-direction:column;gap:8px;width:100%}
 .filters>*,.filters select,.filters .top-search{width:100%;max-width:none;min-height:44px;border-radius:12px}
 /* 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-header .icon-btn{width:36px;min-width:36px;height:36px;min-height:36px;border-radius:50%;box-shadow:none;outline:none;border-color:var(--line)}
 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){
 /* The player pins to the visible viewport: only the lesson area scrolls, never the page (iOS keeps the page still even when the toolbar collapses) */
 dialog.player{position:fixed;inset:0;width:auto;height:auto;max-width:none;max-height:none;border-radius:0;margin:0;border:0;overflow:hidden;overscroll-behavior:none}
 dialog.player[open]{animation:none}
 body:has(dialog.player[open]){position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
 .player-shell.cbm{display:flex;flex-direction:column;height:100%;overflow:hidden}
 .player-shell.cbm .player-body,.player-shell.cbm .player-stage{flex:1;min-height:0;overflow:hidden}
 .player-shell.cbm .player-canvas{flex:1;min-height:0;overflow:auto}
 .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:17px;line-height:1.25}
 .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}
 /* Immersive framed lessons: the uploaded page fills the stage; the strip carries the title, the bottom bar carries navigation and completion */
 .player-shell.cbm.cbm-immersive .cb-file-bar,.player-shell.cbm.cbm-immersive .cb-file-nav{display:none}
 .player-shell.cbm .player-canvas:has(>iframe){display:flex;flex-direction:column;background:#fff}
 .player-shell.cbm .player-canvas>iframe{flex:1 1 auto;width:100%;height:auto;min-height:60dvh;border:0}
 .player-shell.cbm.cbm-immersive .player-canvas{padding:0 0 calc(70px + env(safe-area-inset-bottom))}
 .player-shell.cbm.cbm-immersive .player-canvas>iframe{min-height:0}
 .player-shell.cbm .cb-embed,.player-shell.cbm .cb-yt{border-radius:14px;overflow:hidden}
 /* Phones: YouTube only starts from a tap inside its own player, so the cover/shield step aside and the bar stays visible for pause/seek */
 .player-shell.cbm .cb-yt iframe{pointer-events:auto}
 .player-shell.cbm .cb-yt-shield,.player-shell.cbm .cb-yt-cover{display:none}
 .player-shell.cbm .cb-yt-bar{opacity:1}
 .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.done,.cbm-primary.done:disabled{background:#1f6b4a;color:#fff;opacity:1;box-shadow:none}
 .cbm-primary.done 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}
}

/* ===== Phone polish pass: student header, hero, teacher overview tiles, class list, roster sheet ===== */
@media(max-width:700px){
 /* Student portal header: avatar + name on the left, bell on the right, search on its own row (the More tab replaces the hamburger) */
 body.student-portal-active .topbar .mobile-menu{display:none!important}
 body.student-portal-active .topbar{padding:max(8px,env(safe-area-inset-top)) 14px 10px!important;gap:8px 10px;justify-content:space-between}
 body.student-portal-active .top-actions{display:contents}
 body.student-portal-active .top-user{order:-1;flex:1 1 0;min-width:0;display:flex;align-items:center;gap:10px;padding:0;border:0}
 body.student-portal-active .top-user .avatar{width:40px;height:40px;flex-shrink:0}
 body.student-portal-active .top-user .user-label{min-width:0;display:block}
 body.student-portal-active .top-user .user-label strong{display:block;font-size:15px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52vw}
 body.student-portal-active .top-user .user-label .small{display:block;font-size:11px;color:#7a7f8a}
 body.student-portal-active .top-actions>.badge.red{order:2;margin-left:-14px;align-self:flex-start;font-size:10px;padding:2px 6px;min-width:0}
 body.student-portal-active .top-actions>.icon-btn,body.student-portal-active .topbar .top-actions>.nav-button{order:1;width:40px;min-width:40px;height:40px;min-height:40px;flex:0 0 40px;padding:0;margin:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#f1f1ee;color:var(--ink)}
 body.student-portal-active .topbar .top-actions>.nav-button span,body.student-portal-active .topbar .top-actions>.nav-button .nav-count{display:none}
 body.student-portal-active .topbar .top-actions>.nav-button .icon{width:20px;height:20px}
 body.student-portal-active .top-search{order:20;flex:1 1 100%;max-width:none;margin:0}
 body.student-portal-active .content{padding:14px 14px calc(96px + env(safe-area-inset-bottom))}
 /* Student hero: no overflow with long names, handwriting kept as a small flourish */
 body.student-portal-active .student-hero{display:block;padding:22px 18px 20px;border-radius:22px;min-height:0;margin-bottom:14px}
 body.student-portal-active .student-hero-content{max-width:none}
 body.student-portal-active .student-hero h1{font-size:clamp(22px,6.8vw,30px);line-height:1.08;letter-spacing:-.6px;overflow-wrap:anywhere;word-break:break-word}
 body.student-portal-active .student-hero p{font-size:13px}
 body.student-portal-active .student-hero-art{margin:14px 0 0;font-size:22px;text-align:left;transform:rotate(-2deg)}
 body.student-portal-active .student-hero-art::after{display:none}
 body.student-portal-active .student-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}
 body.student-portal-active .stat-card{padding:12px 12px;border-radius:18px;gap:10px}
 body.student-portal-active .stat-card .stat-arrow{display:none}
 body.student-portal-active .student-hero,body.student-portal-active .student-stats,body.student-portal-active .course-grid{max-width:100%}
 .content h2{overflow-wrap:anywhere}
 /* Teacher / admin overview: 2-up tiles, sparklines hidden */
 #overviewRoot .ov-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
 #overviewRoot .ov-stat{grid-template-columns:1fr;gap:8px;padding:14px;border-radius:18px}
 #overviewRoot .ov-stat-icon{width:36px;height:36px}
 #overviewRoot .ov-stat-icon .icon{width:18px;height:18px}
 #overviewRoot .ov-stat-value{font-size:22px}
 #overviewRoot .ov-stat-label{font-size:12px}
 #overviewRoot .ov-stat-foot{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;min-width:0;padding-right:0}
 #overviewRoot .ov-stat-foot .small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #overviewRoot .ov-stat-chart{display:none}
 #overviewRoot .ov-spark{display:none}
 #overviewRoot .ov-head h1{font-size:24px}
 #overviewRoot .ov-head p{font-size:13px}
 #overviewRoot .ov-toolbar,#overviewRoot .ov-actions{flex-wrap:wrap;gap:8px}
 #overviewRoot .ov-toolbar .btn,#overviewRoot .ov-actions .btn{min-height:40px}
 /* Classes & bookings: compact filters, card rows */
 .cls-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;scrollbar-width:none;padding-bottom:2px}
 .cls-tabs::-webkit-scrollbar{display:none}
 .cls-tabs .btn,.cls-tab{flex:0 0 auto;white-space:nowrap;border-radius:999px}
 .cls-toolbar{padding:12px 12px 10px}
 .cls-toolbar .cls-filters{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
 .cls-toolbar .cls-tabs{width:100%}
 .cls-filters .top-search,.cls-filters label:first-child,.cls-filters>:first-child{grid-column:1/-1;width:100%;max-width:none}
 .cls-filters select,.cls-filters input{min-height:44px;width:100%;border-radius:12px;font-size:14px}
 .table-wrap td .cls-type{font-size:12px;gap:5px;padding:4px 10px}
 .cls-table th:nth-child(5),.cls-table td:nth-child(5){display:flex}
 .cls-filters .cls-search{grid-column:1/-1;display:flex;align-items:center;gap:8px;width:100%;max-width:none}
 .cls-filters .cls-search input{flex:1}
 .table-wrap td .cls-thumb{width:56px;height:40px;border-radius:10px}
 /* Roster sheet: add-students form stacks, student cards */
 .cls-roster-add{flex-direction:column;align-items:stretch;padding:12px;border-radius:16px}
 .cls-roster-add .check-label{min-height:36px;margin:0}
 .cls-roster-add .btn{width:100%}
 .cls-roster .table-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .cls-edit-row td{display:block}
 .cls-edit-row form{flex-direction:column;align-items:stretch}
 .cls-edit-row form .btn{width:100%}
 dialog#modal .dialog-body .notice code{word-break:break-all;font-size:11px}
 /* Notification / thread cards: text takes the full width, badge and action drop to a bottom row */
 .thread-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"av body" "foot foot";gap:8px 12px;padding:14px;border-radius:18px;align-items:start}
 .thread-card>.avatar{grid-area:av}
 .thread-card>.grow{grid-area:body;min-width:0}
 .thread-card>.grow p{margin:2px 0 4px}
 .thread-card>.badge{grid-area:foot;justify-self:start;align-self:center}
 .thread-card>.btn{grid-area:foot;justify-self:end;min-height:36px}
}
/* ===== Touch performance & tap reliability (phones) ===== */
@media(max-width:700px){
 /* App shell: the page itself never scrolls (so the header and bottom tabs can never move or bounce,
    even when the browser bar shows/hides); only the content area scrolls, like a native app. */
 /* Only the signed-in portal shell (#shell with #content) is an app shell. Public pages (store, login,
    course pages) scroll the document normally. */
 html:has(#shell #content){height:100%;overflow:hidden!important;overscroll-behavior:none}
 body:has(#shell #content){height:100%;height:100dvh!important;overflow:hidden!important;position:fixed;inset:0;width:100%;overscroll-behavior:none}
 html:not(:has(#shell #content)),body:not(:has(#shell #content)){height:auto!important;min-height:100dvh;overflow:visible!important;position:static}
 #shell.shell{display:block;height:100dvh!important;overflow:hidden}
 #shell>.main{display:flex!important;flex-direction:column;height:100dvh!important;overflow:hidden}
 #shell .topbar,.shell .topbar,body.student-portal-active .topbar{position:relative;top:auto;flex:0 0 auto}
 #shell #content{flex:1 1 auto!important;min-height:0!important;height:auto;overflow-y:auto!important;overflow-x:hidden;scroll-behavior:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
 .mobile-tabs{position:fixed;bottom:0;left:0;right:0;transform:translateZ(0)}
 body.teaching-board-active{overflow:hidden!important}
 .content>*{animation:none!important;transform:none}
 .mobile-tabs{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
 button,a,label,[role=button],.nav-button,.mobile-tab,.course,.ul-card,input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
 .btn:hover:not(:disabled),.course:hover,.community-card:hover,.portal-role:hover,.cb-gold:hover,.ul-card-footer .ul-card-icon-btn:hover,.ul-card-footer .ul-btn-navy:hover{transform:none;box-shadow:none}
}
@media(hover:none){
 /* Controls that only appear on hover must be visible on touch screens, otherwise the first tap just "hovers". */
 .ul-cover-btn,.cb-unit-tools,.cb-lesson-tools,.cb-yt-bar{opacity:1!important}
}