/* IntelliNotebook v13 — mobile-first layer (phones, tablets, Chromebooks).
   Loaded LAST. Breakpoints: phone <760px · compact (phones + portrait tablets) <1024px · touch = (pointer:coarse).
   Brand kept: gradient #22d3ee/#7c3aed/#ec4899, Plus Jakarta Sans, light + dark. */
:root{--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--bnav-h:0px;--top-h:58px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{max-width:100%}
body{overflow-x:clip}
img,svg,canvas,video{max-width:100%}
/* Notch / rounded corners in landscape and installed (standalone) mode */
.topbar{padding-left:max(18px,var(--safe-l));padding-right:max(18px,var(--safe-r))}
@media (display-mode:standalone){.topbar{padding-top:var(--safe-t);height:calc(58px + var(--safe-t))}.screen{height:calc(100dvh - 58px - var(--safe-t))}#learnRoot{top:calc(58px + var(--safe-t))!important}}
.screen{height:calc(100dvh - 58px)}
.mb-only,.mb-compact{display:none!important}
/* Offline indicator (set by mobile.js) */
.mb-net{position:fixed;left:50%;top:calc(64px + var(--safe-t));transform:translateX(-50%);z-index:120;display:none;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-weight:800;font-size:14px;color:#fff;background:linear-gradient(120deg,#0e7490,#6d28d9 60%,#be185d);box-shadow:0 10px 30px -10px rgba(124,58,237,.8)}
body.is-offline .mb-net{display:inline-flex}
/* ---------- Touch: every control ≥44px, no hover-only affordances ---------- */
@media (pointer:coarse){
 .btn,.btn.sm,.seg button,.theme-toggle button,.subtabs button,.cats button,.chip[role=button],button.chip,.fb-role,.l-btn,#learnRoot .l-btn,#learnRoot .l-btn.small,.thumb,.lang,.g3-ib,.fb-back-smart,select,.fb-langsel select,input:not([type=checkbox]):not([type=radio]):not([type=range]),.bgopt,.swatches button,.stickers button,.sugs button,.pager .btn,.fb-actbtn,.opt,.match button,.tpl,#fbJoin,.fb-join{min-height:44px}
 .btn.icon-only,.tool,.g3-ib,.lang,.swatches button,.stickers button,#learnRoot .l-btn{min-width:44px}
 .btn.sm{padding:9px 13px;font-size:14px}
 .fb-back-smart{display:inline-flex;align-items:center;padding:0 4px;font-size:14px}
 .nav a{min-height:44px}
 /* iOS Safari zooms into inputs under 16px: keep every field at 16px on touch screens */
 input,textarea,select,[contenteditable=true]{font-size:16px!important}
 .cornell textarea,.reflect textarea{line-height:24px!important;background-image:repeating-linear-gradient(transparent 0 23px,var(--page-line) 23px 24px)!important}
 /* hover-only tool tips become visible labels */
 .tool{width:auto;min-width:48px;height:auto;min-height:48px;padding:4px 6px;display:flex;flex-direction:column;gap:2px}
 .tool .tip{position:static;opacity:1;transform:none;border:0;background:none;padding:0;font-size:11px;color:inherit;pointer-events:none}
 .tool .sw{bottom:1px}
 .btn:hover,.tool:hover{transform:none}
 /* Prevent double-tap zoom delays and accidental text selection on game/drag surfaces */
 button,a,.tool,.thumb,.g3-pad,.opt{touch-action:manipulation}
 .sticker-layer,.sticker-layer *,#g3c,.flip-book{-webkit-user-select:none;user-select:none}
 .sticker-layer .stk,.sticker-layer>*{touch-action:none}
 body.mb-pen .page .pg{touch-action:none}
 .g3-pad{min-height:56px}
}
@media (hover:none){.thumb:hover{background:transparent}.thumb.current:hover{background:var(--violet-bg)}}

/* ---------- Compact: phones + portrait tablets (<1024px) ---------- */
@media (max-width:1023.98px){
 .topbar{gap:10px}
 .top-right{gap:6px;min-width:0}
 .proto-tag{display:none}
 .fb-conn #fbConnT{display:none}
 .fb-conn{padding:5px 7px}
 body[data-role] .nav a>span{display:none}
 /* Screens flow with the document instead of fixed-height dashboards */
 .screen{height:auto;min-height:calc(100dvh - 58px);overflow:visible}
 .screen.active{display:block}
 /* Cover */
 .cover-stage{flex-direction:column;padding:18px 16px;gap:18px}
 .cover-intro{max-width:none;text-align:center}
 .cover-intro .layer-legend{justify-content:center}
 .cover{width:min(410px,calc(100vw - 32px));height:auto;aspect-ratio:410/560;margin:0 auto;animation:none}
 .cover-panel{width:auto;margin:0 16px 24px;overflow:visible}
 /* Notebook */
 #s-cuaderno.active{display:flex;flex-direction:column}
 .reader-main{min-height:calc(100dvh - 58px)}
 .reader-side{width:auto;border-right:0;border-bottom:1px solid var(--border)}
 .toolbar{height:auto;min-height:54px;flex-wrap:wrap;padding:6px 10px;gap:8px;position:sticky;top:58px;z-index:30}
 .tools{max-width:100%;overflow-x:auto;scrollbar-width:none}
 .tools::-webkit-scrollbar{display:none}
 .book-area{padding:12px 8px 20px;align-items:flex-start;min-height:0}
 .search-pop{width:min(320px,calc(100vw - 24px));right:12px}
 /* Panel */
 .panel-head{flex-wrap:wrap;padding:10px 14px}
 .panel-head>div[style*="margin-left:auto"]{margin-left:0!important;flex-wrap:wrap;width:100%}
 .panel-head select{flex:1;min-width:0}
 .subtabs{margin-left:0;flex-wrap:wrap}
 .panel-body{overflow:visible;padding:12px 14px 40px}
 .mosaic{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important}
 .grade-layout{grid-template-columns:1fr}
 .gb-card{overflow-x:auto;-webkit-overflow-scrolling:touch}
 .corr,.corr-page,.photo-flow{grid-template-columns:1fr!important}
 .fb-lv-body{grid-template-columns:1fr}
 .fb-gb-card{max-height:none}
 .fb-gb-tools{flex-wrap:wrap}
 /* Assistant + template studio */
 #s-asistente.active{display:flex;flex-direction:column;gap:14px;padding:12px 14px 30px}
 .chat{width:auto;max-height:none}
 .msgs{max-height:60dvh}
 .studio{grid-template-columns:1fr!important;overflow:visible}
 .studio-left{overflow:visible}
 .gsearch{min-width:0;flex:1 1 180px}
 /* Live */
 #s-live.active{display:flex;flex-direction:column;padding:12px 14px 30px}
 .live-ctrl{flex-wrap:wrap}
 .live-stage{min-height:60dvh}
 .modal{width:min(440px,calc(100vw - 24px))}
 .fb-tnote{position:static;width:auto;margin:8px 0}
 .fb-livebanner{max-width:calc(100vw - 20px);top:calc(64px + var(--safe-t))}
 .fb-home{padding:18px 14px calc(30px + var(--bnav-h))}
}

/* ---------- Phones (<760px) ---------- */
@media (max-width:759.98px){
 :root{--top-h:56px}
 body[data-role]:not(.independent-only){--bnav-h:calc(64px + var(--safe-b))}
 body{padding-bottom:var(--bnav-h)}
 .mb-only{display:revert!important}
 .topbar{height:56px;padding-left:max(10px,var(--safe-l));padding-right:max(10px,var(--safe-r));gap:8px}
 .brand img{width:30px;height:30px}
 .brand .wm b{font-size:17px}
 .brand .wm small{display:none}
 .fb-uname,.fb-user .fb-back-smart{display:none!important}
 .theme-toggle button{padding:5px 8px}
 .theme-toggle button span{display:none}
 #learnEntry{white-space:nowrap}
 .lang-menu,.bg-menu{position:fixed;left:10px;right:10px;top:calc(62px + var(--safe-t));width:auto;max-height:70dvh;overflow:auto}
 /* Bottom navigation for school roles */
 body[data-role] .nav{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:90;border-radius:20px 20px 0 0;border-width:1px 0 0;padding:6px max(6px,var(--safe-l)) calc(6px + var(--safe-b)) max(6px,var(--safe-r));display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;background:var(--surface-solid);box-shadow:0 -10px 30px -18px rgba(124,58,237,.9)}
 body[data-role] .nav::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--grad);border-radius:2px}
 body[data-role] .nav a{flex-direction:column;justify-content:center;gap:2px;padding:6px 2px;font-size:11.5px;border-radius:14px;min-height:52px}
 body[data-role] .nav a>span{display:block!important;max-width:100%;overflow:hidden;text-overflow:ellipsis}
 body[data-role] .nav a svg{width:22px;height:22px}
 body.kb-open .nav,body.learn-active .nav{display:none!important}
 body.kb-open{--bnav-h:0px}
 .screen{min-height:calc(100dvh - 56px - var(--bnav-h))}
 /* Cover */
 .cover-intro h1{font-size:26px}
 /* Notebook: single page, swipe, pages drawer */
 .reader-side{display:none;position:fixed;left:0;right:0;bottom:0;top:auto;max-height:72dvh;z-index:95;border-radius:22px 22px 0 0;border:1px solid var(--border-strong);box-shadow:0 -20px 50px -20px rgba(0,0,0,.6);background:var(--surface-solid);padding-bottom:var(--safe-b)}
 body.mb-toc-open .reader-side{display:flex}
 body.mb-toc-open::after{content:"";position:fixed;inset:0;background:rgba(8,10,30,.5);z-index:94}
 .reader-side .toc{overflow:auto}
 .thumb .t{font-size:14px}.thumb .t small{font-size:12.5px}
 .toolbar{top:56px}
 .toolbar .seg{display:none}
 .tools{order:3;width:100%}
 .pager{margin-left:auto;font-size:14px}
 .pager .btn{min-width:44px;justify-content:center}
 .book-area{padding:10px 8px 16px}
 .book-glow{display:none}
 .pg{font-size:14px;padding:22px 18px 30px;overflow-y:auto;overscroll-behavior:contain}
 .pg h2{font-size:21px}.pg h3{font-size:15px}
 .pg .foot{font-size:12px;left:18px;right:18px}
 .opt{font-size:14px;padding:10px 12px}
 .match button{font-size:14px}
 .voice{font-size:13px}
 .cornell{grid-template-columns:1fr}
 .cornell .q{border-right:0;border-bottom:1.5px solid var(--border-strong);min-height:120px}
 .cornell .s{grid-column:1}
 .cornell label{font-size:12px}
 .sticky{width:min(150px,45%)}
 /* Panel / teacher */
 .panel-head h2{font-size:19px}
 .mosaic{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
 .settings{grid-template-columns:1fr}
 .tpls{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .fb-roster{grid-template-columns:1fr}
 .pv-foot{flex-wrap:wrap}
 .pv-foot .btn{flex:1 1 auto;justify-content:center}
 .chip{font-size:12px}
 .muted{font-size:max(1em,13px)}
 /* Live student panel becomes a bottom sheet */
 .fb-liveplay{left:0;right:0;top:auto;bottom:0;width:auto;max-height:78dvh;overflow:auto;border-radius:22px 22px 0 0;padding:14px max(14px,var(--safe-l)) calc(14px + var(--safe-b)) max(14px,var(--safe-r));z-index:96}
 .fb-livebanner{left:10px;right:10px;transform:none;flex-wrap:wrap;justify-content:center;text-align:center}
 .fb-pl-ans{grid-template-columns:1fr!important}
 .fb-pl-ans button{min-height:56px;font-size:16px}
 /* Generic modal sheet */
 .modal{width:calc(100vw - 20px)}
}

/* ---------- Games: full-screen, safe-area aware, playable by thumb ---------- */
.game-modal.g3{width:calc(100vw - 20px);height:calc(100dvh - 20px);max-height:none}
@media (max-width:1023.98px){
 .game-bg{align-items:stretch;justify-content:stretch}
 .game-modal.g3{width:100vw;height:100dvh;border-radius:0;padding:0}
 .g3-hud{padding-top:max(8px,var(--safe-t));padding-left:max(10px,var(--safe-l));padding-right:max(10px,var(--safe-r))}
 .g3-pads{left:max(10px,var(--safe-l));right:max(10px,var(--safe-r));bottom:max(10px,var(--safe-b))}
 .game-modal:not(.g3){width:100vw;max-height:100dvh;height:100dvh;border-radius:0}
}
@media (max-width:759.98px){
 .g3-pads{grid-template-columns:1fr 1fr!important;gap:8px!important}
 .g3-pad{min-height:64px}
 .g3-pad .g3-at{font-size:15px}
 .g3-pad kbd{display:none}
 .g3-title{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .g3-q{left:10px!important;right:auto!important;transform:none!important;width:calc(100% - 20px)!important;max-width:none!important;top:calc(96px + var(--safe-t))!important;padding:10px 14px 12px!important}
 .g3-qt{font-size:17px!important}
 .g3-how{flex-direction:column}
}
@media (orientation:landscape) and (max-height:500px){
 .g3-pads{grid-template-columns:repeat(4,minmax(0,1fr))!important}
 .g3-pad{min-height:48px}
 .topbar{height:50px}
}

/* ---------- Independent learner workspace ---------- */
@media (max-width:759.98px){
 #learnRoot{top:56px!important;padding:14px 14px calc(84px + var(--safe-b))!important}
 #learnRoot .l-nav{margin-bottom:14px}
 #learnRoot .l-nav .l-brand{display:none}
 #learnRoot .l-tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:6px max(6px,var(--safe-l)) calc(6px + var(--safe-b)) max(6px,var(--safe-r));background:var(--surface-solid);border-top:1px solid var(--border-strong);border-radius:20px 20px 0 0;box-shadow:0 -10px 30px -18px rgba(124,58,237,.9)}
 #learnRoot .l-tabs::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--grad)}
 #learnRoot .l-tabs .l-btn{flex-direction:column;gap:2px;min-height:54px;padding:4px 2px;font-size:12px;border-radius:14px;border-color:transparent;background:transparent;text-align:center;line-height:1.15}
 #learnRoot .l-tabs .l-btn.primary{background:linear-gradient(120deg,#5b21b6,#9d174d);border-color:#c4b5fd}
 #learnRoot .l-tabs .l-ico{font-size:19px;line-height:1}
 #learnRoot .l-extra{display:flex;gap:6px;margin-left:auto}
 body.kb-open #learnRoot .l-tabs{display:none}
 #learnRoot h1{font-size:25px;letter-spacing:-.5px}
 #learnRoot h2{font-size:20px}
 #learnRoot .l-hero{padding:18px;min-height:0;border-radius:20px}
 #learnRoot .l-hero:after{font-size:150px;right:10px;top:-30px}
 #learnRoot .l-card{padding:16px;border-radius:18px}
 #learnRoot .l-course:first-child{min-height:0}
 #learnRoot .l-tag{font-size:12.5px}
 #learnRoot .l-muted,#learnRoot .l-notice,#learnRoot label{font-size:14px}
 #learnRoot .l-btn.small{font-size:14px}
 #learnRoot .l-unit-tabs{flex-wrap:nowrap;overflow-x:auto;margin:12px -14px 16px;padding:0 14px 6px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:14px}
 #learnRoot .l-unit-tabs::-webkit-scrollbar{display:none}
 #learnRoot .l-unit-tabs .l-btn{flex:none;scroll-snap-align:start}
 #learnRoot .l-step{grid-template-columns:34px minmax(0,1fr);padding:12px}
 #learnRoot .l-step .l-actions{max-width:none}
 #learnRoot .l-text{font-size:16px;line-height:1.8}
 #learnRoot .l-flash strong{font-size:30px}
 #learnRoot .l-option{padding:14px;min-height:52px}
 #learnRoot .l-banner-status{font-size:13px}
}
@media (min-width:760px) and (max-width:1023.98px){#learnRoot .l-tabs,#learnRoot .l-extra{display:contents}}
@media (min-width:1024px){#learnRoot .l-tabs,#learnRoot .l-extra{display:contents}}
#learnRoot .l-ico{display:none}
@media (max-width:759.98px){#learnRoot .l-tabs .l-ico{display:block}}

/* ---------- Phone settings/account sheet (mobile.js) ---------- */
.mb-sheet{position:fixed;left:8px;right:8px;top:calc(62px + var(--safe-t));z-index:130;max-height:calc(100dvh - 80px);overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.mb-sheet[hidden]{display:none}
.mb-sheet-h{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:16px}
.mb-sheet-b{display:flex;flex-direction:column;gap:12px}
.mb-sheet-b>*{width:100%}
.mb-sheet .fb-user{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mb-sheet .fb-user .fb-uname{display:flex!important;text-align:left;max-width:none;margin-right:auto;font-size:15px}
.mb-sheet .fb-user .fb-uname small{font-size:13px}
.mb-sheet .theme-toggle{justify-content:stretch}
.mb-sheet .theme-toggle button{flex:1;justify-content:center}
.mb-sheet .theme-toggle button span{display:inline!important}
.mb-sheet .lang-picker,.mb-sheet .bg-picker{display:flex}
.mb-sheet .lang,.mb-sheet #bgBtn{width:100%;justify-content:center}
body.mb-sheet-open::after{content:"";position:fixed;inset:0;background:rgba(8,10,30,.45);z-index:125}
@media (max-width:759.98px){.top-right #who,.top-right .who{display:none}#fbConn{order:-1}}
@media (max-width:759.98px){.tools{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));overflow:visible}.tool{min-width:0!important;width:100%}}
/* Fixed bars must be relative to the viewport: a backdrop-filter on the top bar would trap the bottom nav inside it */
@media (max-width:759.98px){
 .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface-solid)}
 .tool .tip{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .g3-hud{flex-wrap:wrap;row-gap:6px}
 .g3-hud .g3-dots{order:5;width:100%;justify-content:center}
 .g3-title{flex:1 1 0}
}
@media (max-width:1023.98px){
 .cover-stage{width:100%;min-width:0;align-items:stretch}
 .cover-stage>*{min-width:0}
 .cover{align-self:center;max-width:100%}
 .studio{grid-template-columns:minmax(0,1fr)!important}
 .studio>*,.grade-layout>*,.corr>*,.fb-lv-body>*{min-width:0}
}
@media (max-width:759.98px){
 .g3-logo{max-width:calc(100vw - 32px)}
 .g3-h1{font-size:clamp(28px,9.5vw,48px)!important;white-space:normal!important;overflow-wrap:anywhere}
 .g3-start{padding-left:14px!important;padding-right:14px!important}
}
@media (max-width:759.98px){
 .chip{white-space:normal;max-width:100%;text-align:left}
 .hd,.chat-head,.pv-tags,.fb-gb-tools,.alerts,.weights{flex-wrap:wrap}
 .sticker{max-width:22%}
}
@media (max-width:759.98px){body:not([data-role]) .topbar .nav{display:none}}
/* Pre-existing bug (all sizes): the soccer game's global .goal rule turned the notebook's "Learning goal" box into a 600px absolute frame */
.pg .goal{position:static;left:auto;top:auto;transform:none;width:auto;height:auto;border:1px solid rgba(124,58,237,.3);border-radius:12px;box-shadow:none}
@media (max-width:759.98px){.toast{bottom:calc(var(--bnav-h) + 14px);max-width:calc(100vw - 24px)}body.learn-active .toast{bottom:calc(84px + var(--safe-b))}}

@media (max-width:1023.98px){.mb-compact{display:revert!important}.top-right #who,.top-right .who{display:none}}
@media (pointer:coarse){.toolbar{flex-wrap:wrap;height:auto;min-height:54px;padding:6px 12px}}
.book-area{overflow-x:clip}

/* ---------- Legibility on phones and portrait tablets: body text ≥14px; badges/labels ≥12px ---------- */
@media (max-width:1023.98px){
 .chip,.fb-stat,.fb-sug,.pill,.fb-onair,.fb-act-k{font-size:13px}
 .fb-demo-badge{font-size:11.5px}
 small,.fb-st small,.fb-act-t small,.fb-bt small,.cv-student small,.thumb .t small{font-size:13px}
 .gb td,.fb-gb td,td{font-size:14px}
 th{font-size:12px}
 .pts button,.pts b,.gb b{font-size:14px}
 label.weight,.field label,.layer b,.layer span{font-size:14px}
 .tpl .tx b{font-size:14px}.tpl .tx small{font-size:13px}.tags .tg,em.tg{font-size:12px}
 .catb{font-size:14px}.catb span,.idb{font-size:12.5px}
 .msg,.msgs li,.bq,.bq span{font-size:14px}
 .eyebrow{font-size:12.5px}
 .toc-page li .n,.toc-page li span.n{font-size:13px}
 .pg .foot{font-size:12.5px}
 .nopaste{font-size:12px}
 .fb-lp-t b,.fb-st-h b{font-size:14px}
 .seg button,.btn.sm{font-size:14px}
 #learnRoot .l-tag{font-size:13.5px}
 #learnRoot .l-kicker{font-size:12.5px}
 #learnRoot .l-banner-status{font-size:14px}
 #learnRoot .l-muted{font-size:14px}
}
@media (max-width:759.98px){#learnRoot .l-tabs .l-btn{font-size:12.5px}}
@media (pointer:coarse){
 .brand{min-height:44px}

 .switch,label.switch{min-height:44px;display:flex;align-items:center}
 .pts button,.weights button,button.step{min-width:44px;min-height:44px}
 #cvTitle{min-height:44px}
}
@media (max-width:1023.98px){.fb-lobby-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.fb-lv-push{margin-left:0;flex-wrap:wrap}.fb-lv-ctrl{flex-wrap:wrap;justify-content:stretch}.fb-lv-ctrl .btn{flex:1 1 auto;justify-content:center}}
@media (max-width:759.98px){.fb-lobby-grid{grid-template-columns:1fr 1fr}.fb-lp{padding:10px;gap:8px}}
@media (max-width:1023.98px){.fb-lv-body{grid-template-columns:minmax(0,1fr)}.fb-lp,.fb-lobby-grid>*{min-width:0}}
@media (pointer:coarse){.nav a{min-width:44px;justify-content:center}}
/* Activation toggle: keep the 40×22 pill look but give it a 48×44 touch box */
@media (pointer:coarse){
 .fb-actbtn{width:48px;height:44px;min-height:44px;min-width:48px;background:transparent!important;padding:0}
 .fb-actbtn::before{content:"";position:absolute;left:4px;top:11px;width:40px;height:22px;border-radius:999px;background:var(--border-strong);transition:background .2s}
 .fb-actbtn.on::before{background:linear-gradient(120deg,#059669,#0e7490)}
 .fb-actbtn span{left:7px;top:14px;z-index:1}
 .theme-toggle button{min-width:44px}
}
@media (max-width:1279.98px){
 .panel-head{flex-wrap:wrap;row-gap:8px}
 .panel-head h2{white-space:nowrap}
 .panel-head>div[style*="margin-left:auto"]{flex-wrap:wrap}
}
@media (max-width:759.98px){
 .topbar .nav .fb-demo-badge,.nav .fb-demo-badge{display:none!important}
 .nav a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .panel-head .subtabs{display:grid!important;grid-template-columns:1fr 1fr;gap:6px;width:100%}
 .panel-head .subtabs button{justify-content:center;flex-wrap:wrap;row-gap:2px;font-size:13.5px}
 .panel-head>div[style*="margin-left:auto"]>select{flex:1 1 40%}
 .panel-head>div[style*="margin-left:auto"]>input{flex:1 1 100%}
 .fb-conn{white-space:nowrap}
}
@media (pointer:coarse){#thumbFilters{display:flex;flex-wrap:wrap;gap:6px}#thumbFilters button{min-height:44px;padding:0 14px;font-size:14px}}
@media (max-width:759.98px){
 .ltiles{grid-template-columns:minmax(0,1fr)!important;gap:8px}
 .lt{min-width:0;font-size:17px;padding:12px 14px;gap:10px;overflow-wrap:anywhere}
 .ltiles.reveal .lt{font-size:15px}
}
/* Live banner on phones: slim bar docked above the bottom nav so it never covers the notebook tools */
@media (max-width:759.98px){
 .fb-livebanner{top:auto!important;bottom:calc(72px + var(--safe-b));left:8px;right:8px;max-width:none;transform:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 8px 8px 10px;border-radius:16px;text-align:left;flex-wrap:nowrap}
 .fb-livebanner[hidden]{display:none}
 .fb-livebanner .fb-bt{min-width:0;display:block}
 .fb-livebanner .fb-bt b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .fb-livebanner .fb-bt small{display:none}
 .fb-livebanner .fb-onair{font-size:12px;padding:4px 8px}
 .fb-livebanner .fb-join{min-height:44px;padding:0 12px;font-size:14px;white-space:nowrap}
 .fb-livebanner.locked{grid-template-columns:auto minmax(0,1fr)}
 .fb-livebanner .fb-lockmsg{grid-column:1/-1;font-size:13px}
 body:not([data-role]) .fb-livebanner,body.learn-active .fb-livebanner{bottom:calc(12px + var(--safe-b))}
 body.kb-open .fb-livebanner{display:none}
}
@media (pointer:coarse){
 #learnRoot summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer}
 #learnRoot input[type=checkbox],#learnRoot input[type=radio]{width:24px;height:24px;flex:none}
 #learnRoot label:has(>input[type=checkbox]),#learnRoot label:has(>input[type=radio]){min-height:44px;display:flex;align-items:center;gap:10px}
}
@media (max-width:759.98px){.steps{flex-wrap:wrap;gap:6px}.steps .stp{flex:1 1 calc(50% - 6px);min-width:0;font-size:13px}}
/* Phones even without touch (narrow desktop window): keep the main bars ≥44px */
@media (max-width:759.98px){
 .topbar .brand,#learnEntry,#mbMore{min-height:44px}
 #mbMore{min-width:44px}
 .fb-lv-h button,.fb-lv-ctrl .btn,.fb-lv-push .btn,.fb-lv-push select,#fbPushSel,#fbPush,#fbNext,#fbEnd{min-height:44px}
}
/* Live banner (all sizes ≥760): dock it at the bottom centre so it never covers the notebook toolbar (it used to sit on top of it) */
@media (min-width:760px){
 .fb-livebanner{top:auto!important;bottom:calc(16px + var(--safe-b));left:50%;right:auto;transform:translateX(-50%);max-width:min(720px,calc(100vw - 32px))}
 .fb-livebanner .fb-join{white-space:nowrap;min-height:44px}
}
/* Portrait tablets: the page list also opens as a drawer ("☰ Pages"), so the notebook page is what you see first */
@media (min-width:760px) and (max-width:1023.98px){
 #mbTocBtn{display:inline-flex!important}
 .reader-side{display:none;position:fixed;left:0;right:0;bottom:0;top:auto;max-height:72dvh;z-index:95;border-radius:22px 22px 0 0;border:1px solid var(--border-strong);box-shadow:0 -20px 50px -20px rgba(0,0,0,.6);background:var(--surface-solid);padding-bottom:var(--safe-b)}
 .reader-side{left:max(0px,calc(50% - 360px));right:max(0px,calc(50% - 360px))}
 body.mb-toc-open .reader-side{display:flex}
 body.mb-toc-open::after{content:"";position:fixed;inset:0;background:rgba(8,10,30,.5);z-index:94}
 .reader-side .toc{overflow:auto}
}
/* Portrait tablets: the live answer panel is a bottom sheet (max half the screen) instead of a full-height side column over the book */
@media (min-width:760px) and (max-width:1023.98px){
 .fb-liveplay{left:50%;right:auto;transform:translateX(-50%);width:min(640px,calc(100vw - 32px));top:auto;bottom:0;max-height:48dvh;overflow:auto;border-radius:22px 22px 0 0;padding-bottom:calc(14px + var(--safe-b));z-index:96}
 .fb-liveplay .fb-pl-ans{display:grid;grid-template-columns:1fr 1fr;gap:8px}
}
@media (min-width:760px){
 .fb-livebanner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:min(720px,calc(100vw - 32px));flex-wrap:nowrap;text-align:left;justify-content:initial}
 .fb-livebanner[hidden]{display:none}
 .fb-livebanner .fb-bt{min-width:0;display:flex;flex-direction:column}
 .fb-livebanner .fb-bt b,.fb-livebanner .fb-bt small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .fb-livebanner.locked{grid-template-columns:auto minmax(0,1fr)}
 .fb-livebanner .fb-lockmsg{grid-column:1/-1}
}
/* Live launch card (no session running yet): fit the column on phones/tablets */
@media (max-width:1023.98px){
 .fb-live,#fbLive{min-width:0;max-width:100%}
 .fb-launch{max-width:none!important;width:auto;margin:10px 0;min-width:0;box-sizing:border-box}
 .fb-launch>*{min-width:0;max-width:100%}
 .fb-launch select,.fb-launch input:not([type=checkbox]){width:100%;max-width:100%;box-sizing:border-box}
 .fb-launch .switch{flex-wrap:wrap}
}
@media (max-width:759.98px){.fb-launch{padding:16px}.fb-launch h2{font-size:22px}.fb-launch-roster{grid-template-columns:1fr}}