[hidden]{display:none!important}
:root{--bg:#0d0f12;--panel:#16191e;--panel2:#1e2229;--line:#303640;--text:#f5f7fa;--muted:#aeb5bf;--yellow:#ffd21f;--danger:#ff6a6a;--radius:14px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font:15px/1.4 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}button,input,textarea,select{font:inherit}button{border:0;border-radius:9px;background:var(--yellow);color:#111;padding:10px 14px;font-weight:800;cursor:pointer}button.secondary{background:#242a32;color:var(--text);border:1px solid var(--line)}button:disabled{opacity:.45;cursor:not-allowed}.danger{color:#ffb3b3!important}.muted{color:var(--muted);margin-left:10px}.bolt{color:var(--yellow)}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.13em;color:#9ea7b3;display:block}.build{margin-left:10px;color:#7f8997;font-size:12px}.badge{font-size:11px;font-weight:900;letter-spacing:.08em;padding:6px 8px;border:1px solid var(--line);border-radius:999px;color:#bbc2cc}.launcher{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 20%,#252a31 0,#0d0f12 55%)}.launch-card{width:min(560px,100%);padding:44px;border:1px solid var(--line);border-radius:24px;background:rgba(22,25,30,.94);box-shadow:0 25px 80px #0009}.launch-card h1{font-size:64px;line-height:.95;margin:14px 0}.launch-card p{font-size:20px;color:#c2c8d0}.launch-actions{display:flex;gap:10px;margin:28px 0}.appbar,.studentbar{height:62px;border-bottom:1px solid var(--line);background:#111419;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:14px;position:sticky;top:0;z-index:10}.appbar>div,.bar-actions{display:flex;align-items:center;gap:8px}.appbar #showName{width:min(420px,35vw);font-weight:800;background:#1b1f25;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:9px 12px}.builder-grid{display:grid;grid-template-columns:220px minmax(0,1fr) 340px;height:calc(100vh - 62px)}.rail,.inspector,.presenter-side{background:var(--panel);overflow:auto}.rail{border-right:1px solid var(--line);padding:12px}.inspector{border-left:1px solid var(--line);padding:14px}.rail-title,.canvas-head,.accept-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.slide-thumb{width:100%;text-align:left;background:#1c2026;color:var(--text);border:1px solid var(--line);padding:10px;margin:8px 0}.slide-thumb.active{outline:2px solid var(--yellow);border-color:transparent}.slide-thumb small{display:block;color:#8e97a4;margin-top:4px}.canvas-column{padding:16px;overflow:auto}.canvas-head{margin-bottom:12px}.stage-wrap{width:min(100%,1100px);background:#050607;border:1px solid #353b45;border-radius:var(--radius);overflow:hidden;position:relative;margin:auto;box-shadow:0 18px 55px #0007}.stage{padding:5.5%;display:flex;flex-direction:column;justify-content:center;gap:2.5%;overflow:hidden;background:#fff;color:#111}.stage h1{font-size:clamp(28px,4cqw,62px);line-height:1.04;margin:0}.stage p{font-size:clamp(16px,2cqw,29px);margin:0;white-space:pre-wrap}.media-shell{min-height:0;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.media-shell img,.media-shell video,.media-shell iframe{max-width:100%;max-height:100%;display:block}.media-shell iframe{width:100%;height:100%;border:0;background:#111}.media-shell img.crop{width:100%;height:100%;object-fit:cover}.media-shell video{width:100%;height:100%;object-fit:contain}.empty-stage{margin:auto;color:#6f7783;text-align:center}.tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:14px}.tab{background:#282d35;color:#fff}.tab.active{background:var(--yellow);color:#111}.inspector label{display:block;font-size:12px;font-weight:800;color:#aeb6c0;margin:12px 0}.inspector input,.inspector textarea{display:block;width:100%;margin-top:6px;background:#0f1216;color:#fff;border:1px solid var(--line);border-radius:8px;padding:9px}.inspector textarea{min-height:72px;resize:vertical}.insert{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.insert strong{grid-column:1/-1;font-size:11px;color:#9da5b0}.block-editor{border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:12px;background:#111419}.block-editor-head{display:flex;justify-content:space-between;align-items:center}.block-editor button{padding:6px 8px}.presenter-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;min-height:calc(100vh - 62px)}.presenter-layout>main{padding:18px}.presenter-side{border-left:1px solid var(--line);padding:16px}.present-controls,.image-controls{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin:14px auto}.hidden-slate{position:absolute;inset:0;background:#0b0d10e8;display:grid;place-items:center;font-size:30px;font-weight:900}.notes{min-height:120px;padding:12px;background:#101318;border:1px solid var(--line);border-radius:10px;white-space:pre-wrap;margin:8px 0 18px}.acceptance{border:1px solid #3b424e;border-radius:12px;padding:12px;background:#101318}.dot{width:10px;height:10px;border-radius:50%;background:#666}.dot.good{background:#54d27b}.metric{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #252a32}.check{padding:7px 0}.check .pass{color:#65da87}.check .pending{color:#f3c94f}.check .blocked{color:#ff8b8b}.accept-note{font-size:12px;color:#aeb6c0}.student-main{padding:22px}.student-main .stage-wrap{width:min(1200px,calc(100vw - 44px));max-height:none}
.waiting{min-height:calc(100vh - 62px);display:grid;place-items:center;text-align:center;color:#aeb6c0}.waiting[hidden]{display:none}.audience[hidden]{display:none}@media(max-width:980px){.builder-grid{grid-template-columns:170px 1fr}.inspector{position:fixed;right:0;top:62px;bottom:0;width:320px;z-index:8;box-shadow:-20px 0 50px #0008}.presenter-layout{grid-template-columns:1fr}.presenter-side{border:0;border-top:1px solid var(--line)} }@media(max-width:700px){.builder-grid{display:block;height:auto}.rail{display:none}.inspector{position:static;width:auto}.canvas-column{padding:10px}.appbar #showName{display:none}.launch-card h1{font-size:50px}.present-controls button{flex:1}}

.inspector-panel[hidden]{display:none}.inspector select{display:block;width:100%;margin-top:6px;background:#0f1216;color:#fff;border:1px solid var(--line);border-radius:8px;padding:9px}.panel-note{font-size:12px;color:#aeb6c0}.plumbing-card{border:1px solid var(--line);border-radius:11px;padding:12px;background:#111419;margin-top:12px}.plumbing-card p{color:#aeb6c0;font-size:13px}.service-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #282d35}.service-row:last-child{border-bottom:0}.service-row b{font-size:12px;color:#d3d8df}.launch-page{width:min(980px,calc(100% - 32px));margin:36px auto;display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px}.session-card{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:26px}.session-card h2{font-size:32px;margin:7px 0}.session-card.compact{align-self:start}.session-code{display:flex;align-items:center;justify-content:space-between;background:#0e1115;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:22px 0}.session-code span{color:#aeb6c0}.session-code strong{font-size:28px;letter-spacing:.12em;color:var(--yellow)}.session-card label{display:block;font-size:12px;font-weight:800;color:#aeb6c0}.copy-row{display:flex;gap:8px;margin-top:7px}.copy-row input{min-width:0;flex:1;background:#0f1216;color:#fff;border:1px solid var(--line);border-radius:9px;padding:10px}.session-mini{color:#9ca5b0;font-size:12px;margin-right:10px}.studentbar>div{display:flex;align-items:center}@media(max-width:800px){.launch-page{grid-template-columns:1fr;margin:18px auto}.session-card{padding:18px}.session-code strong{font-size:22px}.tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.tab{padding:8px 5px;font-size:12px}}
body{overflow:hidden}#launcher{overflow:auto}#builder,#launch,#presenter,#student{height:100vh;overflow:hidden}#launch .launch-page,#presenter .presenter-layout,#student .student-main{overflow:auto}.host-nav{display:flex;align-items:center;gap:8px}
@media(max-width:700px){body{overflow:auto}#builder,#launch,#presenter,#student{height:auto;min-height:100vh;overflow:visible}}
.session-info{border:1px solid var(--line);border-radius:12px;padding:12px;background:#101318;margin-bottom:14px}.session-info label{display:block;font-size:12px;font-weight:800;color:#aeb6c0;margin-top:12px}.wide{width:100%;margin-top:10px}
/* alpha.6: state must be visible, not decorative */
.badge{transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
.badge.state-muted{background:#191d23;border-color:#343a44;color:#9fa8b4}
.badge.state-warn{background:#2b2412;border-color:#70591c;color:#ffd76a}
.badge.state-good{background:#10271b;border-color:#286b46;color:#85efb0}
.badge.state-bad{background:#321719;border-color:#7c3036;color:#ff9aa1}
.badge.state-live{background:#3a1517;border-color:#b13c44;color:#ffb0b5;box-shadow:0 0 0 1px rgba(255,90,100,.1),0 0 18px rgba(255,70,80,.14)}
.live-action{box-shadow:0 0 0 1px rgba(255,209,0,.18),0 0 18px rgba(255,209,0,.08)}
.live-dot{display:inline-block;width:9px;height:9px;border-radius:999px;background:#ff4f5e;box-shadow:0 0 12px rgba(255,79,94,.75);margin-right:5px}
.session-drawer{position:fixed;z-index:50;right:16px;top:68px;width:min(390px,calc(100vw - 32px));max-height:calc(100vh - 84px);overflow:auto;border:1px solid #3b424d;border-radius:16px;padding:18px;background:#11151a;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.session-drawer[hidden]{display:none!important}.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.drawer-head h3{margin:3px 0 0;font-size:22px}.host-nav button.active{border-color:#ffd100;color:#ffd100}

/* alpha.7: named Show library */
.shows-home{display:block;min-height:100vh;padding:34px 22px}.shows-shell{width:min(1050px,100%);margin:0 auto}.shows-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:34px 0 24px;border-bottom:1px solid var(--line)}.shows-head h1{font-size:48px;margin:5px 0}.shows-head p{margin:0;color:var(--muted);font-size:17px}.shows-list{display:grid;gap:12px;padding:20px 0}.show-card{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--line);border-radius:15px;background:var(--panel);padding:20px}.show-card h2{margin:4px 0;font-size:22px}.show-card p{margin:0;color:var(--muted)}.shows-empty{margin:50px auto;text-align:center;border:1px dashed var(--line);border-radius:18px;padding:45px;width:min(620px,100%)}.shows-empty p{color:var(--muted)}.home-build{display:block;color:#737d8a;padding:8px 0 30px}@media(max-width:700px){.shows-head,.show-card{align-items:stretch;flex-direction:column}.shows-head button,.show-card-actions button{width:100%}}

/* alpha.9: shared media playback + explicit phone Builder shell */
.image-shell img{filter:none!important;backdrop-filter:none!important;image-rendering:auto;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.image-shell img.crop{width:100%;height:100%;object-fit:cover}
.yt-target,.yt-target iframe{width:100%!important;height:100%!important;min-height:0;border:0}
.mobile-builder-nav,.mobile-builder-menu,.mobile-live{display:none}
@media(max-width:700px){
  #builder{height:100vh!important;min-height:0!important;overflow:hidden!important;padding-bottom:58px}
  #builder .appbar{height:58px;padding:7px 9px;gap:7px}
  #builder .host-nav{min-width:0;gap:5px}#builder .host-nav .build{display:none}#builder .host-nav strong{font-size:14px}
  #builder .bar-actions>span:not(.mobile-live),#builder .bar-actions>#participantBtn,#builder .bar-actions>#launchBtn{display:none!important}
  #builder .bar-actions{margin-left:auto;gap:5px}.mobile-live{display:inline-flex;font-size:10px;font-weight:900;border:1px solid #3b424d;border-radius:999px;padding:6px 8px;color:#aab2bd;background:#191d23}.mobile-live.is-live{background:#3a1517;border-color:#b13c44;color:#ffb0b5}
  .mobile-builder-menu{display:block;position:relative}.mobile-builder-menu summary{list-style:none;cursor:pointer;background:#282d35;border:1px solid #3b424d;border-radius:9px;padding:7px 9px;font-weight:900}.mobile-builder-menu summary::-webkit-details-marker{display:none}.mobile-builder-menu>div{position:absolute;right:0;top:42px;z-index:40;width:210px;background:#11151a;border:1px solid #3b424d;border-radius:12px;padding:9px;box-shadow:0 18px 50px #0009}.mobile-builder-menu button{width:100%;margin:4px 0}
  #builder .builder-grid{height:calc(100vh - 58px - 58px)!important;display:block!important;overflow:hidden!important}
  #builder .rail,#builder .canvas-column,#builder .inspector{display:none!important;position:static!important;width:auto!important;height:100%!important;overflow:auto!important;border:0!important;box-shadow:none!important}
  #builder[data-mobile-mode="slides"] .rail{display:block!important;padding:12px}
  #builder[data-mobile-mode="stage"] .canvas-column{display:block!important;padding:10px}
  #builder[data-mobile-mode="edit"] .inspector{display:block!important;padding:12px}
  #builder .canvas-head{position:sticky;top:0;z-index:2;background:#0d0f12;padding:7px 0}
  #builder .stage-wrap{width:100%;max-height:calc(100vh - 150px)}
  #builder .tabs{position:sticky;top:0;z-index:3;background:var(--panel);padding-bottom:8px;grid-template-columns:repeat(4,minmax(0,1fr))}
  .mobile-builder-nav{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;height:58px;z-index:30;background:#111419;border-top:1px solid var(--line);padding:6px 8px;gap:6px}.mobile-builder-nav button{background:#232831;color:#fff;border:1px solid #343b46}.mobile-builder-nav button.active{background:var(--yellow);color:#111;border-color:var(--yellow)}
}

/* alpha.12: diagnostic instrumentation; no layout overlay on Builder */
.media-debug{margin-top:14px;border:1px solid #46505d;border-radius:12px;background:#0c1015;padding:10px;color:#dce2ea}.media-debug summary{cursor:pointer;font-weight:900;color:#ffd21f}.debug-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 10px;margin:10px 0;font-size:12px}.debug-grid span{color:#8f9aa7}.debug-grid b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-debug pre{margin:0;max-height:180px;overflow:auto;white-space:pre-wrap;word-break:break-word;background:#07090c;border:1px solid #252b33;border-radius:8px;padding:8px;font:11px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace;color:#b9f3ca}.audience-debug{position:fixed;z-index:70;right:10px;bottom:10px;width:min(430px,calc(100vw - 20px));max-height:44vh;overflow:auto;box-shadow:0 16px 45px #0009}.audience-debug[open]{background:#0c1015ee}@media(max-width:700px){.audience-debug{right:6px;bottom:6px;width:calc(100vw - 12px);max-height:36vh}.media-debug pre{max-height:120px}}

/* alpha.14: interaction and cross-app integration plumbing */
.integration-card{border:1px solid var(--line);border-radius:12px;background:#101318;padding:12px;margin-top:12px}.integration-card p{font-size:12px;color:#aeb6c0}.integration-card input{width:100%;box-sizing:border-box;margin:6px 0 8px;background:#0f1216;color:#fff;border:1px solid var(--line);border-radius:8px;padding:9px}.integration-results{display:grid;gap:6px;margin-top:9px;max-height:260px;overflow:auto}.integration-result{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid #2d333c;background:#15191f;border-radius:8px;padding:8px}.integration-result span{min-width:0}.integration-result b,.integration-result small{display:block;overflow:hidden;text-overflow:ellipsis}.integration-result small{color:#8f99a6;margin-top:2px}.error-text{color:#ff9aa1}.check-row{display:flex!important;align-items:center;gap:8px;margin-top:10px}.check-row input{width:auto!important;margin:0!important}.source-ref,.checkpoint-tag{display:block;color:#aeb6c0;margin-top:8px}.checkpoint-tag{color:#ffd76a}
.choice-block{width:min(92%,760px);display:flex;flex-direction:column;gap:12px}.choice-block h2{margin:0;font-size:clamp(20px,3cqw,36px)}.choice-options{display:grid;gap:8px}.choice-option{display:flex;justify-content:space-between;align-items:center;text-align:left;background:#1c222a;border:1px solid #39424e;color:#fff;padding:12px 14px;border-radius:10px;font-size:16px}.choice-option:disabled{opacity:1;cursor:default}.choice-option:not(:disabled):hover{border-color:#ffd100}.choice-stat{color:#ffd100;font-size:12px}.choice-block>small{color:#929ca8}
.presenter-interaction{margin-top:10px;border:1px solid #3a424d;background:#11151a;border-radius:12px;padding:12px}.interaction-live-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.interaction-live-head span{color:#9fa8b4;font-size:12px}.interaction-counts{display:grid;gap:5px;margin:10px 0}.interaction-counts>div{display:flex;justify-content:space-between;border-bottom:1px solid #292f37;padding:6px 0}
@media(max-width:700px){
 #presenter .presenter-layout{display:block!important;padding-bottom:10px}
 #presenter .presenter-side{width:auto!important;border-left:0!important;border-top:1px solid var(--line)}
 #presenter .present-controls{position:sticky;bottom:0;z-index:20;background:#0d1014;padding:8px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr}
 #presenter .present-controls #slideCounter{grid-column:1/-1;text-align:center}
 .choice-block{width:100%}.choice-option{font-size:15px;padding:11px}
}

/* alpha.17: participant media autoplay fallback */
#studentStageWrap{position:relative}
.media-sync-overlay{position:absolute;inset:auto 50% 20px auto;transform:translateX(50%);z-index:40;background:#ffd100;color:#111;border:0;border-radius:999px;padding:12px 18px;font-weight:900;box-shadow:0 12px 34px #0009}
.media-sync-overlay[hidden]{display:none!important}
@media(max-width:700px){.media-sync-overlay{left:12px;right:12px;bottom:12px;transform:none;width:auto}}

/* alpha.18: explicit late-join sync affordance + mobile stage polish */
.media-sync-overlay{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:260px;animation:syncAttention .72s ease-in-out 0s 6 alternate}
.media-sync-overlay strong{font-size:14px;letter-spacing:.045em}.media-sync-overlay span{font-size:11px;font-weight:750;opacity:.78}
@keyframes syncAttention{from{transform:translateX(50%) scale(1);box-shadow:0 12px 34px #0009,0 0 0 0 rgba(255,209,0,.7)}to{transform:translateX(50%) scale(1.035);box-shadow:0 12px 34px #0009,0 0 0 7px rgba(255,209,0,.14)}}
@media(max-width:700px){
 .media-sync-overlay{animation-name:syncAttentionMobile;min-width:0}
 @keyframes syncAttentionMobile{from{transform:scale(1);box-shadow:0 12px 34px #0009,0 0 0 0 rgba(255,209,0,.7)}to{transform:scale(1.025);box-shadow:0 12px 34px #0009,0 0 0 6px rgba(255,209,0,.14)}}
 #builder[data-mobile-mode="stage"] .canvas-column{display:flex!important;flex-direction:column}
 #builder[data-mobile-mode="stage"] .stage-wrap{margin:auto 0;max-height:none}
 #builder[data-mobile-mode="stage"] .stage{transform-origin:top center}
}
@media(prefers-reduced-motion:reduce){.media-sync-overlay{animation:none!important}}

/* alpha.28 rebase: later UI/features on alpha.18 media baseline */
.presenter-slides-drawer{left:16px;right:auto}.presenter-slide-list{display:grid;gap:7px}.presenter-slide-jump{display:grid;grid-template-columns:30px 1fr;align-items:center;text-align:left;gap:8px;background:#171c22;color:#fff;border:1px solid #353d48;border-radius:9px;padding:10px}.presenter-slide-jump span{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#272e37;color:#aeb7c2;font-weight:900}.presenter-slide-jump.active{border-color:#ffd100}.presenter-slide-jump.active span{background:#ffd100;color:#111}
.zoom-slider{display:grid!important;grid-template-columns:auto minmax(100px,1fr) 48px;align-items:center;gap:8px;margin-left:8px;color:#aeb6c0;font-size:12px;font-weight:800}.zoom-slider input{width:100%;accent-color:#ffd100}.zoom-slider span{color:#fff;text-align:right}.gesture-hint{color:#929ca8}
.live-permissions{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid #39414c;background:#11151a;border-radius:12px;padding:11px 12px;margin-top:10px}.live-permissions div{display:flex;flex-direction:column;gap:3px}.live-permissions small{color:#8f99a6}.permission-on{background:#10271b!important;border-color:#286b46!important;color:#85efb0!important}
.join-qr-card{display:flex;align-items:center;gap:14px;margin:14px 0;padding:12px;background:#fff;border-radius:12px;color:#111}.join-qr-card img{width:145px;height:145px;object-fit:contain}.join-qr-card.compact img{width:115px;height:115px}.join-qr-card div{display:flex;flex-direction:column;gap:3px}.join-base-label{display:block;margin-top:14px}.join-base-label small{display:block;margin-top:5px;color:#8f99a6;font-weight:500}
#presenterStage img[data-image-block]{cursor:grab}#presenterStage img[data-image-block]:active{cursor:grabbing}
@media(max-width:700px){.presenter-slides-drawer{position:fixed!important;left:10px!important;right:10px!important;top:auto!important;bottom:72px!important;width:auto!important;max-height:52vh!important}.presenter-slide-list{grid-template-columns:1fr 1fr;max-height:38vh;overflow:auto}#imageControls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}#imageControls strong,#imageControls .gesture-hint,#imageControls .zoom-slider{grid-column:1/-1}.live-permissions{flex-direction:column;align-items:stretch}.join-qr-card{flex-direction:column;text-align:center}}

/* alpha.29 media tools + synchronized annotation */
.media-shell{position:relative;overflow:hidden}.annotation-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:12}.annotation-layer.draw-enabled{pointer-events:auto;touch-action:none;cursor:crosshair}
.annotation-controls{margin:10px auto;border:1px solid #39414c;background:#101419;border-radius:12px;padding:10px}.annotation-controls[hidden]{display:none!important}.annotation-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.annotation-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:8px}.annotation-tools button.active{border-color:#ffd100;color:#ffd100}.annotation-tools label{display:flex;align-items:center;gap:6px;color:#aeb6c0;font-size:12px;font-weight:800}.annotation-tools select{background:#11161c;color:#fff;border:1px solid #3b4450;border-radius:8px;padding:7px}
@media(max-width:700px){
 .image-controls,.annotation-controls,.live-permissions{margin-left:8px;margin-right:8px}
 .annotation-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .annotation-tools label{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr}
 .annotation-tools button{min-height:40px}
 #presenter .presenter-layout main{min-width:0}
 #presenter .stage-wrap{width:calc(100% - 16px);margin-left:8px;margin-right:8px}
}

/* alpha.30 explicit session actions */
.launch-actions{display:grid;gap:8px;margin-top:12px}
@media(min-width:700px){.launch-actions{grid-template-columns:1fr 1fr}}

/* alpha.31 session lifecycle */
#endSession{margin-top:8px}

/* alpha.32 media control distinctions */
.participant-control{border:1px dashed #7f8a98!important}
.student-media-controls{display:flex;gap:8px;flex-wrap:wrap;margin:8px 12px;padding:8px;border-radius:10px;background:#12171d}.student-media-controls[hidden]{display:none!important}
.annotation-tools input[type="color"]{width:38px;height:32px;padding:0;border:1px solid #4a5562;border-radius:7px;background:transparent}
.video-shell{transform-origin:center;will-change:transform}
.image-shell,.video-shell{overflow:hidden}
@media(max-width:700px){
  .student-media-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .participant-control{border-style:dashed!important}
  .annotation-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .annotation-tools label{grid-column:auto}
}

/* alpha.33: restore pre-rebase mobile Presenter shell */
.mobile-presenter-nav,.mobile-presenter-menu,.mobile-presenter-menu-panel{display:none}

@media(max-width:700px){
  #presenter{
    min-height:100dvh;
    padding-bottom:68px;
    overflow-x:hidden;
    background:#0b0e12;
  }
  #presenter .presenter-appbar{
    position:sticky;
    top:0;
    z-index:35;
    min-height:54px;
    height:54px;
    padding:7px 10px;
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:8px;
    background:#101318f2;
    backdrop-filter:blur(10px);
    border-bottom:1px solid #303741;
  }
  #presenter .presenter-title{
    min-width:0;
    flex:1;
    display:flex;
    align-items:center;
    gap:7px;
    white-space:nowrap;
    overflow:hidden;
  }
  #presenter .presenter-title strong{
    font-size:14px;
    flex:0 0 auto;
  }
  #presenter #presenterShow{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:12px;
  }
  #presenter .host-nav{display:none}
  .mobile-presenter-menu{
    display:block;
    flex:0 0 44px;
    width:44px;
    min-width:44px;
    height:38px;
    padding:0;
    font-size:17px;
  }
  .mobile-presenter-menu-panel{
    position:fixed;
    z-index:70;
    top:58px;
    right:8px;
    width:min(230px,calc(100vw - 16px));
    display:grid;
    gap:7px;
    padding:9px;
    border:1px solid #39424d;
    border-radius:12px;
    background:#12171d;
    box-shadow:0 18px 50px #0009;
  }
  .mobile-presenter-menu-panel[hidden]{display:none!important}

  #presenter .presenter-layout{
    display:block;
    min-height:0;
    overflow:visible;
  }
  #presenter .presenter-layout>main{
    width:100%;
    min-width:0;
    padding:8px 8px 78px;
  }
  #presenter .presenter-layout>aside{
    display:none;
  }
  #presenter .stage-wrap{
    width:100%;
    margin:0;
    max-width:none;
    border-radius:14px;
  }
  #presenter .stage{
    min-width:0;
  }

  /* Desktop nav is replaced, not squeezed. */
  #presenter .present-controls{display:none!important}

  .mobile-presenter-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:60;
    height:62px;
    display:grid;
    grid-template-columns:1.05fr .72fr 1.25fr .9fr;
    gap:6px;
    align-items:stretch;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));
    background:#101318f2;
    backdrop-filter:blur(12px);
    border-top:1px solid #333b45;
  }
  .mobile-presenter-nav button{
    min-width:0;
    padding:8px 6px;
    border-radius:10px;
    font-size:13px;
    white-space:nowrap;
  }
  .mobile-presenter-nav #mobilePresenterNext{
    font-weight:900;
  }

  /* Pre-rebase slide pop-out location: directly above bottom bar. */
  .presenter-slides-drawer{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    top:auto!important;
    bottom:72px!important;
    width:auto!important;
    max-height:52vh!important;
    border-radius:16px!important;
    box-shadow:0 20px 60px #0009!important;
    z-index:72!important;
  }
  .presenter-slide-list{
    grid-template-columns:1fr 1fr;
    max-height:38vh;
    overflow:auto;
  }
  .presenter-slide-jump{
    grid-template-columns:26px 1fr;
    padding:9px;
  }

  /* Tools are a mobile bottom sheet instead of consuming the stage page. */
  #presenter #imageControls,
  #presenter #annotationControls,
  #presenter #participantExplorePermission,
  #presenter #presenterInteractionControls{
    display:none!important;
  }
  #presenter.mobile-tools-open #imageControls:not([hidden]),
  #presenter.mobile-tools-open #annotationControls:not([hidden]),
  #presenter.mobile-tools-open #participantExplorePermission:not([hidden]),
  #presenter.mobile-tools-open #presenterInteractionControls:not([hidden]){
    display:grid!important;
    position:fixed;
    z-index:68;
    left:8px;
    right:8px;
    bottom:72px;
    width:auto;
    max-height:55vh;
    overflow:auto;
    margin:0;
    border-radius:14px;
    box-shadow:0 20px 60px #0009;
    background:#11161c;
  }
  #presenter.mobile-tools-open #annotationControls:not([hidden]){
    bottom:72px;
  }
  #presenter.mobile-tools-open #participantExplorePermission:not([hidden]){
    bottom:72px;
  }

  /* Keep individual tool groups compact inside the mobile sheet. */
  #presenter #imageControls{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
  }
  #presenter #imageControls strong,
  #presenter #imageControls .gesture-hint,
  #presenter #imageControls .zoom-slider{grid-column:1/-1}
  #presenter .annotation-tools{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* alpha.34: pan and draw are mutually exclusive pointer modes */
.presenter-pan-layer{position:absolute;inset:0;z-index:11;pointer-events:none;touch-action:none;background:transparent}
.presenter-pan-layer.active{pointer-events:auto;cursor:grab}
.presenter-pan-layer.active:active{cursor:grabbing}
.media-shell.pan-active{outline:1px dashed rgba(255,209,0,.28);outline-offset:-2px}
.media-shell.draw-active .presenter-pan-layer{pointer-events:none!important}
.media-shell.draw-active{cursor:crosshair}
.annotation-layer.draw-enabled{z-index:13;pointer-events:auto;touch-action:none;cursor:crosshair}

/* alpha.35 live-session page lifecycle */
#endSessionFromLaunch{border-color:#8a343b;background:#34181b;color:#ffb3b8}
#endSessionFromLaunch:hover{background:#451d21}

/* alpha.36 direct Present workflow */
#sessionManageBtn{min-width:auto}
@media(max-width:700px){
  #mobileSessionManage{display:block}
}

/* alpha.38 hard pointer ownership */
.media-shell.draw-active>.presenter-pan-layer{display:none!important;pointer-events:none!important}
.media-shell.draw-active>svg.annotation-layer{display:block!important;pointer-events:auto!important;cursor:crosshair!important;z-index:30!important}
.media-shell.pan-active>svg.annotation-layer{pointer-events:none!important}

/* alpha.40: annotation visibility + mobile Presenter cleanup */
svg.annotation-layer.marks-hidden{
  display:none!important;
  pointer-events:none!important;
}
.media-shell.draw-active>svg.annotation-layer.marks-hidden{
  display:none!important;
  pointer-events:none!important;
}
.annotation-tools .mode-control{
  border-color:#596473;
  font-weight:900;
}
.annotation-tools .mode-control.live-action{
  border-color:#ffd100;
  color:#ffd100;
}

@media(max-width:700px){
  /* Phone Presenter is one vertical surface. Nothing except nav/drawers floats over the stage. */
  #presenter .presenter-layout>main{
    display:block!important;
    width:100%!important;
    padding:8px 8px 82px!important;
    overflow:visible!important;
  }
  #presenter .stage-wrap{
    width:100%!important;
    max-width:none!important;
    margin:0 0 8px!important;
  }

  /* Tools are collapsed by default and expand IN FLOW below the stage. */
  #presenter #imageControls,
  #presenter #annotationControls,
  #presenter #participantExplorePermission,
  #presenter #presenterInteractionControls{
    display:none!important;
    position:static!important;
    inset:auto!important;
    width:auto!important;
    max-height:none!important;
    overflow:visible!important;
    margin:8px 0!important;
    box-shadow:none!important;
  }
  #presenter.mobile-tools-open #imageControls:not([hidden]),
  #presenter.mobile-tools-open #annotationControls:not([hidden]),
  #presenter.mobile-tools-open #participantExplorePermission:not([hidden]),
  #presenter.mobile-tools-open #presenterInteractionControls:not([hidden]){
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-height:none!important;
    overflow:visible!important;
    margin:8px 0!important;
    box-shadow:none!important;
  }
  #presenter.mobile-tools-open #imageControls:not([hidden]){
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  #presenter.mobile-tools-open #annotationControls:not([hidden]){
    display:block!important;
  }
  #presenter.mobile-tools-open #participantExplorePermission:not([hidden]){
    display:flex!important;
  }
  #presenter.mobile-tools-open #presenterInteractionControls:not([hidden]){
    display:block!important;
  }

  #presenter .annotation-tools{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  #presenter .annotation-tools .mode-control{
    grid-column:1/-1;
    min-height:42px;
  }
  #presenter .annotation-tools label{
    grid-column:auto!important;
    min-width:0;
  }
  #presenter .annotation-tools button{
    min-width:0;
    min-height:40px;
    white-space:normal;
  }
  #presenter #participantExplorePermission{
    flex-direction:row!important;
    align-items:center!important;
  }

  /* Stable mobile chrome; only Slides/Session drawers remain floating. */
  .mobile-presenter-menu-panel{
    max-height:calc(100dvh - 130px);
    overflow:auto;
  }
  .presenter-slides-drawer,
  #sessionInfo.session-drawer{
    bottom:72px!important;
    top:auto!important;
    left:8px!important;
    right:8px!important;
    width:auto!important;
    max-height:calc(100dvh - 145px)!important;
    overflow:auto!important;
  }
}

/* alpha.42 participant explore: real zoom/pan controls */
.student-media-controls{
  align-items:center;
}
.student-media-controls #studentZoomValue{
  min-width:52px;
  text-align:center;
  font-size:12px;
  font-weight:900;
  color:#d8dee6;
}
.student-pan-layer{
  position:absolute;
  inset:0;
  z-index:18;
  pointer-events:none;
  touch-action:none;
  background:transparent;
}
.student-pan-layer.active{
  pointer-events:auto;
  cursor:grab;
}
.student-pan-layer.active:active{cursor:grabbing}
.media-shell.student-pan-active{outline:1px dashed rgba(180,190,205,.45);outline-offset:-2px}
#studentStage svg.annotation-layer{pointer-events:none!important}

/* alpha.43 Presenter control modes + Show Remote */
.presenter-mode-label{display:grid;gap:5px;font-size:11px;color:#9ea8b5;font-weight:800}
.presenter-mode-label select{background:#0e1217;color:#fff;border:1px solid #3a4350;border-radius:8px;padding:8px}
.compact-presenter-panel,.remote-slides-panel{position:fixed;z-index:75;left:50%;bottom:74px;transform:translateX(-50%);width:min(720px,calc(100vw - 16px));max-height:55vh;overflow:auto;border:1px solid #3d4652;border-radius:14px;background:#11161c;padding:10px;box-shadow:0 20px 60px #000a}
.compact-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.compact-presenter-panel #imageControls,.compact-presenter-panel #annotationControls,.compact-presenter-panel #participantExplorePermission{margin:0!important;width:100%!important}
#presenter[data-controls-mode="expanded"] .compact-presenter-nav{display:none!important}
#presenter[data-controls-mode="expanded"] .compact-presenter-panel{display:none!important}
#presenter[data-controls-mode="compact"] .present-controls{display:none!important}
#presenter[data-controls-mode="compact"] .compact-presenter-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid!important;
  grid-template-columns:1fr .65fr 1fr .8fr .9fr 1.1fr .75fr;
  gap:5px;padding:7px 8px calc(7px + env(safe-area-inset-bottom));background:#101318f2;
  backdrop-filter:blur(12px);border-top:1px solid #333b45
}
#presenter[data-controls-mode="compact"] .compact-presenter-nav button{min-width:0;padding:8px 5px;font-size:12px}
#presenter[data-controls-mode="compact"] .presenter-layout>main{padding-bottom:78px}
#presenter[data-controls-mode="compact"] #imageControls,
#presenter[data-controls-mode="compact"] #annotationControls,
#presenter[data-controls-mode="compact"] #participantExplorePermission{
  display:none!important
}
#presenter[data-controls-mode="compact"] .compact-presenter-panel #imageControls:not([hidden]){display:grid!important}
#presenter[data-controls-mode="compact"] .compact-presenter-panel #annotationControls:not([hidden]){display:block!important}
#presenter[data-controls-mode="compact"] .compact-presenter-panel #participantExplorePermission:not([hidden]){display:flex!important}

.remote-appbar{position:sticky;top:0;z-index:20}
.remote-shell{width:min(520px,100%);margin:0 auto;padding:14px 12px 90px}
.remote-preview{border:1px solid #343d48;border-radius:14px;background:#11161c;padding:18px;margin-bottom:12px}
.remote-preview #remotePreviewTitle{font-size:22px;font-weight:900;margin-bottom:5px}
.remote-primary{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.remote-primary button{min-height:58px;font-size:16px;font-weight:900}
.remote-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.remote-actions button{min-height:46px}
.remote-slides-panel{width:min(500px,calc(100vw - 16px))}
#remote .presenter-slide-list{display:grid;gap:7px}

@media(max-width:700px){
  #presenter[data-controls-mode="compact"] .compact-presenter-nav{
    grid-template-columns:repeat(7,minmax(0,1fr));
  }
  #presenter[data-controls-mode="compact"] .compact-presenter-nav button{
    font-size:10px;padding:7px 2px
  }
  .compact-presenter-panel{bottom:72px;max-height:52dvh}
  #presenter[data-controls-mode="expanded"] .presenter-layout>main{padding-bottom:8px!important}
  #presenter[data-controls-mode="expanded"] .present-controls{display:flex!important;position:static!important;height:auto!important}
}

/* alpha.44 next batch */
#presenter[data-controls-mode="compact"] .compact-presenter-nav{
  height:auto!important;display:grid!important;grid-template-columns:1fr!important;gap:5px!important
}
.compact-nav-row{display:grid;gap:5px}
.compact-nav-primary{grid-template-columns:1.1fr .7fr 1.2fr .9fr}
.compact-nav-tools{grid-template-columns:1fr 1fr 1.25fr .7fr}
#presenter[data-controls-mode="compact"] .compact-presenter-nav button{font-size:12px!important;padding:8px 5px!important}
#presenter[data-controls-mode="compact"] .presenter-layout>main{padding-bottom:118px!important}
.compact-presenter-panel{bottom:112px!important}
.presenter-slides-drawer,#sessionInfo.session-drawer{bottom:112px!important}

.permission-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.permission-row+.permission-row{border-top:1px solid #303742;padding-top:9px;margin-top:9px}
.permission-row small{display:block;color:#9ea7b3;margin-top:3px}

.student-mark-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:8px 12px;padding:8px;border-radius:10px;background:#12171d}
.student-mark-controls[hidden]{display:none!important}
.student-mark-controls button.active{border-color:#ffd100;color:#ffd100}
.student-mark-controls label{display:flex;align-items:center;gap:5px;font-size:12px}
.student-mark-controls input[type="color"]{width:34px;height:30px;padding:0;border:1px solid #4a5562;border-radius:7px;background:transparent}
.student-personal-marks{position:absolute;inset:0;width:100%;height:100%;z-index:24;pointer-events:none;touch-action:none}

.resource-card{display:grid;gap:10px;align-content:center;justify-items:start;width:100%;height:100%;padding:7%;background:#151a20;border:1px solid #343d48;border-radius:14px}
.resource-card strong{font-size:clamp(22px,4cqw,44px)}
.resource-card p{margin:0;color:#b7c0cb;font-size:clamp(14px,2cqw,22px)}
.resource-open{display:inline-block;padding:10px 14px;border-radius:10px;background:#ffd100;color:#111;text-decoration:none;font-weight:900}

#remotePopout{grid-column:1/-1}

@media(max-width:700px){
  .compact-nav-primary,.compact-nav-tools{gap:4px}
  #presenter[data-controls-mode="compact"] .compact-presenter-nav{padding:6px 7px calc(6px + env(safe-area-inset-bottom))!important}
  .student-mark-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:7px}
  .student-mark-controls label,#studentClearMarks{grid-column:span 2}
  .permission-row{align-items:flex-start}
}

/* alpha.45 participant control wiring / ownership */
.student-mark-controls button.active{box-shadow:0 0 0 1px #ffd100 inset}
.student-pan-layer.active{z-index:22}
.student-personal-marks{z-index:24}

/* alpha.46 participant full-kit parity + move */
.student-media-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.student-media-controls #studentZoomValue{align-self:center;justify-self:center}
.student-mark-controls select{background:#11161c;color:#fff;border:1px solid #3b4450;border-radius:8px;padding:7px}
@media(max-width:700px){
  .student-media-controls{position:sticky;bottom:0;z-index:32;margin:7px;background:#101318f2;backdrop-filter:blur(10px)}
  .student-mark-controls{position:sticky;bottom:0;z-index:33;background:#101318f2;backdrop-filter:blur(10px)}
}

/* alpha.47 participant control width constraint */
.student-media-controls{
  width:min(560px,calc(100% - 24px))!important;
  margin:8px auto!important;
}
.student-mark-controls{
  width:min(760px,calc(100% - 24px))!important;
  margin:8px auto!important;
}
@media(max-width:700px){
  .student-media-controls,
  .student-mark-controls{
    width:calc(100% - 14px)!important;
    margin:7px auto!important;
  }
}

/* alpha.48 explicit tool ownership */
.annotation-tools .mode-control.active{
  border-color:#ffd100!important;
  color:#ffd100!important;
}
.annotation-layer.draw-enabled{cursor:crosshair!important}
.annotation-layer.draw-enabled.moving-object{cursor:grabbing!important}
.annotation-tools [data-annot-tool="move"].active{cursor:grab}

/* alpha.49 explicit Participant Media tool */
.student-mark-controls [data-student-tool="media"].active{
  border-color:#ffd100!important;
  color:#ffd100!important;
  font-weight:900;
}

/* alpha.50 participant move + shared control organization */
.student-media-controls{
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding:8px;
}
.student-zoom-slider{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  font-size:12px;
}
.student-zoom-slider input{width:100%;min-width:0}
.student-gesture-hint{grid-column:1/-1;text-align:center;color:#8f99a5}
.student-personal-marks.moving-object{cursor:grabbing!important}

#presenter .image-controls{
  width:min(700px,100%);
  margin:8px auto;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  padding:8px;
}
#presenter .image-controls strong,
#presenter .image-controls .zoom-slider,
#presenter .image-controls .gesture-hint{grid-column:1/-1}
#presenter .annotation-controls{
  width:min(820px,100%);
  margin:8px auto;
  padding:8px;
}
#presenter .annotation-tools{
  gap:6px;
}
#presenter .annotation-tools button,
#presenter .annotation-tools label{
  min-height:38px;
}

/* alpha.51 Move cursor */
.annotation-layer.draw-enabled[data-tool="move"]{cursor:grab!important}
.annotation-layer.draw-enabled.moving-object{cursor:grabbing!important}

/* alpha.52: explicit Presenter Move cursor wins over generic drawing crosshair */
#presenterStage svg.annotation-layer.draw-enabled[data-tool="move"]{
  cursor:grab!important;
}
#presenterStage svg.annotation-layer.draw-enabled[data-tool="move"].moving-object{
  cursor:grabbing!important;
}
#studentMarkControls [data-student-tool="move"]:disabled{
  opacity:.42;
  cursor:not-allowed;
}

/* alpha.53 visibly and functionally disable Participant Move */
#studentMarkControls button[data-student-tool="move"].coming-soon:disabled{
  opacity:.28!important;
  filter:grayscale(1)!important;
  color:#7b8490!important;
  border-color:#343b45!important;
  background:#15191e!important;
  cursor:not-allowed!important;
  pointer-events:none!important;
  box-shadow:none!important;
}
#studentMarkControls button[data-student-tool="move"].coming-soon:disabled::after{
  content:"";
}

/* alpha.54 Participant Move is live */
#studentStage svg.student-personal-marks[data-tool="move"]{
  cursor:grab!important;
}
#studentStage svg.student-personal-marks[data-tool="move"].moving-object{
  cursor:grabbing!important;
}

/* alpha.55: Move uses the same button styling as every other participant tool */
#studentMarkControls button[data-student-tool="move"]{
  cursor:pointer!important;
}

/* alpha.56 mobile navigation shells */

/* Presenter: preserve the intentional TWO-ROW compact bottom app bar. */
@media(max-width:700px){
  #presenter[data-controls-mode="compact"] #mobilePresenterNav.compact-presenter-nav,
  #presenter:not([data-controls-mode="expanded"]) #mobilePresenterNav.compact-presenter-nav{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:90!important;
    grid-template-columns:1fr!important;
    gap:5px!important;
    height:auto!important;
    padding:6px 7px calc(6px + env(safe-area-inset-bottom))!important;
    background:#101318f2!important;
    backdrop-filter:blur(12px)!important;
    border-top:1px solid #333b45!important;
  }
  #mobilePresenterNav .compact-nav-row{
    display:grid!important;
    gap:4px!important;
  }
  #mobilePresenterNav .compact-nav-primary{
    grid-template-columns:1.1fr .7fr 1.2fr .9fr!important;
  }
  #mobilePresenterNav .compact-nav-tools{
    grid-template-columns:1fr 1fr 1.25fr .7fr!important;
  }
  #mobilePresenterNav button{
    min-width:0!important;
    min-height:38px!important;
    padding:7px 5px!important;
    font-size:12px!important;
  }
  #presenter[data-controls-mode="compact"] .presenter-layout>main{
    padding-bottom:118px!important;
  }
  .compact-presenter-panel,
  .presenter-slides-drawer,
  #sessionInfo.session-drawer{
    bottom:112px!important;
  }

  /* Participant: one-row app bar with View/Marks popouts. */
  #student{padding-bottom:66px!important}
  #student .student-main{padding-bottom:72px!important}
  #studentBottomNav.student-bottom-nav{
    display:grid!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:90!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;
    background:#101318f2!important;
    backdrop-filter:blur(12px)!important;
    border-top:1px solid #333b45!important;
  }
  #studentBottomNav[hidden]{display:none!important}
  #studentBottomNav button{
    min-height:44px!important;
    min-width:0!important;
    border-radius:10px!important;
  }
  #studentBottomNav button.active{
    border-color:#ffd100!important;
    color:#ffd100!important;
  }
  #studentCompactPanel.student-compact-panel{
    display:block;
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    bottom:68px!important;
    z-index:88!important;
    width:auto!important;
    max-height:55dvh!important;
    overflow:auto!important;
    border:1px solid #3d4652!important;
    border-radius:14px!important;
    background:#11161c!important;
    padding:10px!important;
    box-shadow:0 20px 60px #000a!important;
  }
  #studentCompactPanel[hidden]{display:none!important}

  /* On mobile, View/Marks live in the popout instead of floating in the page. */
  #student > .student-main > #studentMediaControls,
  #student > .student-main > #studentMarkControls{
    display:none!important;
  }
  #studentCompactPanel #studentMediaControls:not([hidden]){
    display:grid!important;
    position:static!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }
  #studentCompactPanel #studentMarkControls:not([hidden]){
    display:grid!important;
    position:static!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }
}
.student-bottom-nav,.student-compact-panel{display:none}

/* alpha.57: mobile Presenter drawers must survive sidebar collapse */
@media(max-width:700px){
  #presenter .presenter-layout>aside.presenter-side{
    display:block!important;
    position:static!important;
    width:0!important;
    height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  #presenter .presenter-side > .eyebrow,
  #presenter .presenter-side > #presenterNotes,
  #presenter .presenter-side > .acceptance,
  #presenter .presenter-side > .media-debug{
    display:none!important;
  }

  #presenter #presenterSlides.presenter-slides-drawer:not([hidden]){
    display:block!important;
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    top:auto!important;
    bottom:112px!important;
    width:auto!important;
    max-height:55dvh!important;
    overflow:auto!important;
    z-index:96!important;
    border-radius:14px!important;
    background:#11161c!important;
    box-shadow:0 20px 60px #000a!important;
  }

  #presenter #sessionInfo.session-drawer:not([hidden]){
    display:block!important;
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    top:auto!important;
    bottom:112px!important;
    width:auto!important;
    max-height:65dvh!important;
    overflow:auto!important;
    z-index:96!important;
    border-radius:14px!important;
    background:#11161c!important;
    box-shadow:0 20px 60px #000a!important;
  }

  #presenter #presenterSlideList{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
}

/* alpha.58 notes, templates, generic embed */
.notes-editor{display:grid;gap:7px}
.notes-label-row,.presenter-notes-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.notes-label-row button,.presenter-notes-head button{padding:6px 8px;font-size:11px}
.embed-shell{position:relative;width:100%;height:100%;min-height:260px;background:#0b0f14;border-radius:10px;overflow:hidden}
.embed-shell iframe{width:100%;height:100%;min-height:260px;border:0;background:#fff}
@media(max-width:700px){
  .presenter-notes-head{display:none!important}
}

/* alpha.59 Presenter Media/Pan split + participant nav spacing */
.annotation-tools .mode-control.active{
  border-color:#ffd100!important;
  color:#ffd100!important;
}
@media(max-width:700px){
  #studentBottomNav.student-bottom-nav{
    bottom:4px!important;
    left:8px!important;
    right:8px!important;
    border:1px solid #333b45!important;
    border-radius:14px!important;
    box-shadow:0 12px 34px #0008!important;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;
  }
  #studentCompactPanel.student-compact-panel{
    bottom:80px!important;
  }
  #student .student-main{
    padding-bottom:84px!important;
  }
}

/* alpha.60 finish-line Builder surfaces */
.media-guidance p{margin:.5rem 0;color:#aab4c0;line-height:1.45}
.media-guidance b{color:#fff}
.portable-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
#instructionalDesignNotes{min-height:150px}
.embed-shell iframe{width:100%;height:100%;min-height:260px;border:0;background:#fff}
.block-editor textarea{resize:vertical}
@media(max-width:700px){.portable-actions{grid-template-columns:1fr}}

/* alpha.62 QBank slide workflow */
.integration-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.integration-head p{margin:.25rem 0;color:#a7b1bd}
.qbank-picker-tabs{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;margin:8px 0}
.qbank-picker-tabs button.active{border-color:#ffd100;color:#ffd100}
.qbank-filters{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:6px;margin:8px 0}
.qbank-filters input,.qbank-filters select,.qbank-picker select{min-width:0}
.qbank-result{align-items:center}
.qbank-live{display:grid;gap:12px;width:100%;height:100%;align-content:center;padding:4%}
.qbank-live h2{font-size:clamp(24px,4cqw,48px);margin:0}
.qbank-description{color:#aeb8c4;margin:0}
.qbank-media{display:flex;gap:8px;overflow:auto;max-height:38cqh}
.qbank-media img{max-width:100%;max-height:36cqh;object-fit:contain}
.qbank-controls{display:grid;gap:8px}
.qbank-controls textarea{min-height:100px}
.qbank-controls input[type="range"]{width:100%}
.qbank-sequence{display:grid;gap:6px}
.qbank-order-row{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;border:1px solid #36404b;border-radius:8px;padding:7px}
.qbank-hotspot{position:relative;cursor:crosshair}
.qbank-hotspot img{display:block;max-width:100%;max-height:55cqh;margin:auto}
.qbank-block-editor{display:grid;gap:5px}
.qbank-block-editor small{color:#9ea8b5}
.qbank-block-editor p{margin:.25rem 0;color:#9ea8b5}
@media(max-width:900px){.qbank-filters{grid-template-columns:1fr 1fr}.qbank-filters #qbankSearch{grid-column:1/-1}}
@media(max-width:700px){.integration-head{display:grid}.qbank-picker-tabs{grid-template-columns:1fr 1fr}.qbank-picker-tabs #loadQbank{grid-column:1/-1}.qbank-filters{grid-template-columns:1fr}}

/* alpha.63 Bowl-style QBank working-list flow */
.qbank-connection-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qbank-source-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:8px 0}
.qbank-source-actions .source-ref{margin-left:auto}
.qbank-check{display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:8px;min-width:0}
.qbank-check span{display:grid;gap:3px;min-width:0}
.qbank-source-results{max-height:42vh;overflow:auto}
.qbank-working{margin-top:12px;border-top:1px solid #313a45;padding-top:10px}
.qbank-working-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px}
.qbank-working-head>div:first-child{display:grid;gap:2px}
.qbank-working-head small{color:#929daa}
.qbank-working-head>div:last-child{display:flex;gap:6px}
.qbank-working-list{display:grid;gap:6px}
.qbank-working-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;border:1px solid #35404b;border-radius:9px;padding:8px;background:#11161c}
.qbank-working-row>span{display:grid;gap:2px;min-width:0}
.qbank-working-row small{color:#929daa}
.qbank-working-row>div{display:flex;gap:5px}
@media(max-width:700px){
  .qbank-connection-grid{grid-template-columns:1fr}
  .qbank-working-head{display:grid}
  .qbank-working-head>div:last-child{display:grid;grid-template-columns:1fr 1fr}
  .qbank-working-row{grid-template-columns:1fr}
  .qbank-working-row>div{display:grid;grid-template-columns:1fr 1fr 1.5fr}
  .qbank-source-actions .source-ref{margin-left:0;width:100%}
}

/* alpha.64 detachable QBank picker */
.qbank-dock{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.qbank-dock p{margin:.25rem 0;color:#a7b1bd}
#interactionPanel>#qbankPicker{display:none}
body>#qbankPopupRoot #qbankPicker,#qbankPopupRoot #qbankPicker{display:block!important}
@media(max-width:700px){.qbank-dock{grid-template-columns:1fr}.qbank-dock button{width:100%}}

/* alpha.65 QBank picker opens as a normal browser window first */
.qbank-dock button#openQbankPickerWindow{white-space:nowrap}

/* alpha.66: filters apply to either selected Set or full Browse source */
#qbankBrowseMode{display:block!important}

/* alpha.67 QBank Set selector layout */
.qbank-picker-tabs{grid-template-columns:1fr 1fr!important}
.qbank-set-mode{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;margin:8px 0}
.qbank-set-select-label{display:grid!important;grid-template-columns:1fr!important;gap:5px!important;min-width:0!important}
.qbank-set-select-label span{font-weight:700}
#qbankSetSelect{width:100%!important;min-width:0!important;max-width:none!important;box-sizing:border-box!important;font-size:16px!important;padding:10px 12px!important}
.qbank-set-refresh{min-width:110px;min-height:44px}
@media(max-width:700px){.qbank-set-mode{grid-template-columns:1fr}.qbank-set-refresh{width:100%}}

/* alpha.68 QBank media parity + picker close lifecycle */
.qbank-media-view-toggle{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:2px 0 4px;
}
.qbank-media-view-toggle button.active{
  border-color:#ffd100!important;
  color:#ffd100!important;
}
.qbank-media-zone{
  display:grid;
  gap:10px;
  width:100%;
}
.qbank-media-stack{
  grid-template-columns:1fr;
}
.qbank-media-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:8px;
  border:1px solid #3b4652;
  border-radius:10px;
  background:#0b0f14;
  overflow:hidden;
  box-sizing:border-box;
}
.qbank-media-image{
  display:block;
  max-width:100%;
  max-height:42vh;
  width:auto;
  height:auto;
  object-fit:contain;
}
.qbank-media-carousel{
  grid-template-columns:1fr;
}
.qbank-carousel-nav{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px;
  align-items:center;
}
.qbank-carousel-nav span{
  text-align:center;
  color:#aab4c0;
  font-weight:700;
}
@media(max-width:700px){
  .qbank-media-view-toggle{display:grid;grid-template-columns:1fr 1fr}
  .qbank-media-image{max-height:34vh}
}

/* alpha.69 constrain QBank stacked media inside Show stage */
.qbank-live{
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
}
.qbank-media-zone{
  min-width:0!important;
  min-height:0!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.qbank-media-stack{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:8px!important;
  max-height:44vh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  padding-right:2px;
}
.qbank-media-stack .qbank-media-wrap{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  box-sizing:border-box!important;
  flex:0 0 auto!important;
}
.qbank-media-stack .qbank-media-image{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:30vh!important;
  object-fit:contain!important;
  margin:auto!important;
}
.qbank-media-carousel{
  overflow:hidden!important;
  max-width:100%!important;
}
.qbank-media-carousel .qbank-media-wrap{
  min-width:0!important;
  max-width:100%!important;
}
.qbank-media-carousel .qbank-media-image{
  max-width:100%!important;
  max-height:40vh!important;
}
.stage .qbank-live,
#presenterStage .qbank-live,
#studentStage .qbank-live,
#builderStage .qbank-live{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
@media(max-width:700px){
  .qbank-media-stack{
    max-height:38vh!important;
  }
  .qbank-media-stack .qbank-media-image{
    max-height:24vh!important;
  }
}

/* alpha.70 QBank media rule: 1 single, 2 stack/carousel, 3+ carousel */
.qbank-live{
  overflow:visible!important;
}
.qbank-media-zone{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:0!important;
  overflow:visible!important;
  gap:8px!important;
}
.qbank-media-single{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
}
.qbank-media-single .qbank-media-wrap{
  min-height:0!important;
  max-height:48vh!important;
}
.qbank-media-single .qbank-media-image{
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:46vh!important;
  object-fit:contain!important;
}
.qbank-media-stack{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  max-height:44vh!important;
  overflow:visible!important;
  padding:0!important;
}
.qbank-media-stack .qbank-media-wrap{
  min-width:0!important;
  min-height:0!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:none!important;
  padding:6px!important;
  box-sizing:border-box!important;
}
.qbank-media-stack .qbank-media-image{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:20vh!important;
  object-fit:contain!important;
  margin:auto!important;
}
.qbank-media-carousel{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  overflow:visible!important;
}
.qbank-media-carousel .qbank-media-wrap{
  min-width:0!important;
  min-height:0!important;
  max-height:44vh!important;
}
.qbank-media-carousel .qbank-media-image{
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:40vh!important;
  object-fit:contain!important;
  margin:auto!important;
}
.qbank-media-wrap{
  border:1px solid #3b4652!important;
  border-radius:10px!important;
  background:#0b0f14!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
@media(max-width:700px){
  .qbank-media-stack{max-height:36vh!important}
  .qbank-media-stack .qbank-media-image{max-height:16vh!important}
  .qbank-media-single .qbank-media-image{max-height:38vh!important}
  .qbank-media-carousel .qbank-media-image{max-height:34vh!important}
}

/* alpha.72 stabilized QBank live response + scoring */
.qbank-student-feedback{
  margin-top:6px;
  padding:7px 10px;
  border:1px solid #3d4752;
  border-radius:8px;
  font-weight:800;
  width:max-content;
  max-width:100%;
}
.qbank-controls .choice-option.selected{
  border-color:#ffd100!important;
  outline:2px solid rgba(255,209,0,.18);
}

/* alpha.73 Quick Check / Poll */
.quick-check-media{width:100%;display:flex;justify-content:center;align-items:center;border:1px solid #37414c;border-radius:10px;background:#0b0f14;overflow:hidden;margin:6px 0 10px}
.quick-check-media img,.quick-check-media video{display:block;max-width:100%;max-height:34cqh;object-fit:contain}
.quick-check-media iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.quick-answer-key{display:grid;gap:5px;padding:9px;border:1px solid #353f49;border-radius:9px}
.quick-live-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.quick-check-submit{width:100%}
.choice-option.answer-correct{border-color:#ffd100!important;box-shadow:0 0 0 2px rgba(255,209,0,.2) inset}


/* alpha.74 — QBank stacked media gets a real allocated stage region */
.qbank-live{
  display:grid!important;
  grid-template-rows:auto auto minmax(0,1fr) auto auto!important;
  align-content:stretch!important;
  gap:8px!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  padding:3%!important;
}
.qbank-live>h2,
.qbank-live>.qbank-description,
.qbank-live>.qbank-media-view-toggle,
.qbank-live>.qbank-controls,
.qbank-live>[data-qbank-response-count],
.qbank-live>.qbank-student-feedback{
  min-width:0!important;
}
.qbank-media-view-toggle{
  margin:0!important;
}
.qbank-media-zone{
  min-width:0!important;
  min-height:0!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.qbank-media-stack{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr) minmax(0,1fr)!important;
  gap:8px!important;
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:0!important;
}
.qbank-media-stack .qbank-media-wrap{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
  padding:6px!important;
  box-sizing:border-box!important;
}
.qbank-media-stack .qbank-media-image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
}
.qbank-media-single,
.qbank-media-carousel{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}
.qbank-media-single .qbank-media-wrap,
.qbank-media-carousel .qbank-media-wrap{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
}
.qbank-media-single .qbank-media-image,
.qbank-media-carousel .qbank-media-image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
.qbank-media-carousel{
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  gap:6px!important;
}
.qbank-carousel-nav{
  min-height:0!important;
}
.qbank-controls{
  min-height:0!important;
  max-height:26%!important;
  overflow:auto!important;
}
@media(max-width:700px){
  .qbank-live{padding:2.5%!important;gap:6px!important}
  .qbank-controls{max-height:30%!important}
}

/* alpha.76 remaining Show Alpha polish */
.quick-submit-confirm{margin-top:6px;font-weight:800;color:#d7ffe2}
.quick-check-media .yt-target{width:100%;aspect-ratio:16/9}
.quick-check-media .yt-target iframe{width:100%;height:100%}
.cta-card{width:100%;height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:18px;align-items:center;padding:5%;box-sizing:border-box}
.cta-card>img{width:100%;height:100%;max-height:70cqh;object-fit:contain;border-radius:12px}
.cta-copy{display:grid;gap:12px;align-content:center}
.cta-copy h2{font-size:clamp(28px,4cqw,54px);margin:0}
.cta-copy p{font-size:clamp(16px,2cqw,26px);margin:0}
.cta-button{display:inline-flex;width:max-content;max-width:100%;padding:12px 18px;border-radius:9px;background:#ffd100;color:#111;text-decoration:none;font-weight:900}
.chat-slide-shell{width:100%;height:100%;min-height:0}
.chat-slide-shell iframe{width:100%;height:100%;border:0;border-radius:10px;background:#fff}
.support-debug summary{font-weight:800}
.support-debug .debug-grid{margin-top:8px}


/* alpha.77 — QBank answers retain usable height after bounded media */
.qbank-live{
  grid-template-rows:auto auto minmax(0,1fr) auto auto!important;
}
.qbank-controls{
  display:grid!important;
  grid-auto-flow:row!important;
  grid-auto-rows:minmax(48px,auto)!important;
  gap:8px!important;
  min-height:max-content!important;
  max-height:none!important;
  overflow:visible!important;
  flex:none!important;
}
.qbank-controls button,
.qbank-controls .choice-option,
.qbank-controls label{
  min-height:48px!important;
  height:auto!important;
  flex:none!important;
}
.qbank-live[data-qbank-type="true_false"] .qbank-controls,
.qbank-live[data-qbank-type="truefalse"] .qbank-controls,
.qbank-live[data-qbank-type="boolean"] .qbank-controls{
  grid-template-columns:1fr!important;
  grid-template-rows:repeat(2,minmax(48px,auto))!important;
}
.qbank-live>[data-qbank-response-count],
.qbank-live>.qbank-student-feedback{
  min-height:20px!important;
}
@media(max-width:700px){
  .qbank-controls{grid-auto-rows:minmax(44px,auto)!important}
  .qbank-controls button,.qbank-controls .choice-option,.qbank-controls label{min-height:44px!important}
}

/* alpha.78 support + URL/CTA cleanup */
.cta-card>img.crop{object-fit:cover!important;width:100%!important;height:100%!important}
#builderSupportDebug{margin-top:10px}

/* alpha.79 — Resource card contrast */
.resource-card{
  color:#f7f9fb!important;
}
.resource-card strong{
  color:#fff!important;
}
.resource-card p,
.resource-card .muted{
  color:#d8dee6!important;
}
.resource-card .resource-open{
  background:#ffd100!important;
  color:#111!important;
}

/* alpha.82 instructor / organization branding */
/* .stage is already positioned; do not change its full-stage geometry here. */
.slide-brand{position:absolute;z-index:18;display:flex;align-items:center;gap:8px;max-width:42%;padding:7px 9px;border-radius:9px;background:rgba(10,14,18,.82);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.22);overflow:hidden}
.slide-brand img{display:block;object-fit:contain;border-radius:6px;flex:none}
.slide-brand img.crop{object-fit:cover}
.slide-brand>div{display:grid;min-width:0;line-height:1.15}.slide-brand strong,.slide-brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slide-brand span{font-size:.8em;color:#d6dce3}
.brand-top-left{top:2.5%;left:2.5%}.brand-top-right{top:2.5%;right:2.5%}.brand-bottom-left{bottom:2.5%;left:2.5%}.brand-bottom-right{bottom:2.5%;right:2.5%}
.brand-size-small img{width:30px;height:30px}.brand-size-medium img{width:46px;height:46px}.brand-size-large img{width:68px;height:68px}
.brand-compact{font-size:13px}.brand-full{font-size:15px;padding:9px 12px}
.brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:700px){.slide-brand{max-width:60%}.brand-grid{grid-template-columns:1fr}.brand-size-large img{width:54px;height:54px}}

/* alpha.83 — Interaction chooser hierarchy */
.interaction-choice-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-bottom:12px;
}
.interaction-choice-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px;
  border:1px solid #4b5662;
  border-radius:12px;
  background:#202731;
}
.interaction-choice-card>div{
  display:grid;
  gap:6px;
  min-width:0;
}
.interaction-choice-card strong{
  font-size:18px;
  color:#fff;
}
.interaction-choice-card p{
  margin:0;
  color:#d9e0e7;
  line-height:1.4;
}
.interaction-choice-card .eyebrow{
  color:#ffd100;
}
.interaction-choice-card button{
  min-width:150px;
}
#interactionEditors:empty{
  display:none;
}
@media(max-width:700px){
  .interaction-choice-card{
    grid-template-columns:1fr;
  }
  .interaction-choice-card button{
    width:100%;
  }
}

/* alpha.84 — Show uses carousel for all multi-image QBank items */
.qbank-media-stack,
.qbank-media-view-toggle{
  display:none!important;
}
.qbank-media-zone.qbank-media-carousel{
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  gap:6px!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}
.qbank-media-zone.qbank-media-single{
  display:grid!important;
  grid-template-rows:minmax(0,1fr)!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}
.qbank-media-carousel .qbank-media-wrap,
.qbank-media-single .qbank-media-wrap{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
.qbank-media-carousel .qbank-media-image,
.qbank-media-single .qbank-media-image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* alpha.85 — bounded QBank question layout prioritizes answers over media */
.qbank-live{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto auto!important;
  gap:8px!important;
  height:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
}

/* Media is supporting content on a question slide, not the whole slide. */
.qbank-media-zone{
  align-self:stretch!important;
  min-height:0!important;
  max-height:52vh!important;
}
.qbank-live[data-qbank-family="choice"] .qbank-media-zone{
  max-height:48vh!important;
}
.qbank-live[data-qbank-family="complex"] .qbank-media-zone{
  max-height:38vh!important;
}

/* Choice questions use the horizontal room of a slide. */
.qbank-choice-controls{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-auto-rows:minmax(52px,auto)!important;
  gap:8px!important;
  width:100%!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}
.qbank-choice-controls .choice-option{
  min-width:0!important;
  width:100%!important;
  min-height:52px!important;
  height:auto!important;
  white-space:normal!important;
  text-align:left!important;
}

/* True/False should be one clean row on desktop. */
.qbank-live[data-qbank-type="true_false"] .qbank-choice-controls{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:minmax(54px,auto)!important;
}

/* Multi-select submit spans the full width. */
.qbank-live[data-qbank-type="multi_select"] .qbank-choice-controls>button:last-child:not(.choice-option){
  grid-column:1 / -1!important;
}

/* Non-choice interactions get their natural space and can scroll only inside controls if truly necessary. */
.qbank-live[data-qbank-family="complex"] .qbank-controls{
  max-height:34vh!important;
  overflow:auto!important;
  min-height:0!important;
}
.qbank-live[data-qbank-family="poll"] .qbank-controls{
  max-height:30vh!important;
}

/* Carousel itself must fit the allocated question-media region. */
.qbank-media-carousel{
  min-height:0!important;
  max-height:100%!important;
}
.qbank-media-carousel .qbank-media-wrap{
  min-height:0!important;
  max-height:100%!important;
}
.qbank-media-carousel .qbank-media-image{
  width:100%!important;
  height:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
}

@media(max-width:700px){
  .qbank-media-zone,
  .qbank-live[data-qbank-family="choice"] .qbank-media-zone{
    max-height:36vh!important;
  }
  .qbank-live[data-qbank-family="complex"] .qbank-media-zone{
    max-height:28vh!important;
  }
  .qbank-choice-controls,
  .qbank-live[data-qbank-type="true_false"] .qbank-choice-controls{
    grid-template-columns:1fr!important;
    grid-auto-rows:minmax(46px,auto)!important;
  }
  .qbank-choice-controls .choice-option{
    min-height:46px!important;
  }
}

/* alpha.86 — authoritative bounded QBank slide layout */
.qbank-live{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  padding:5%!important;
  background:#fff!important;
  color:#111!important;
}
.qbank-live>h2{
  flex:0 0 auto!important;
  margin:0!important;
  color:#111!important;
}
.qbank-description{
  flex:0 0 auto!important;
  margin:0!important;
  color:#3e4650!important;
}
.qbank-media-zone{
  flex:1 1 auto!important;
  width:100%!important;
  min-height:120px!important;
  max-height:none!important;
  overflow:hidden!important;
  background:#11171e!important;
  border:1px solid #2f3944!important;
  border-radius:10px!important;
}
.qbank-media-single,
.qbank-media-carousel{
  display:grid!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
}
.qbank-media-single{
  grid-template-rows:minmax(0,1fr)!important;
}
.qbank-media-carousel{
  grid-template-rows:minmax(0,1fr) auto!important;
}
.qbank-media-wrap{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:#11171e!important;
  border:0!important;
  border-radius:0!important;
}
.qbank-media-image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
}
.qbank-carousel-nav{
  display:grid!important;
  grid-template-columns:auto 1fr auto!important;
  align-items:center!important;
  gap:8px!important;
  padding:6px 8px!important;
  background:#171e26!important;
  color:#fff!important;
}
.qbank-carousel-nav span{
  text-align:center!important;
  color:#d8dee6!important;
}
.qbank-controls{
  flex:0 0 auto!important;
  width:100%!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}
.qbank-choice-controls{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-auto-rows:minmax(50px,auto)!important;
  gap:8px!important;
}
.qbank-choice-controls .choice-option{
  width:100%!important;
  min-height:50px!important;
  height:auto!important;
  padding:10px 14px!important;
  border-radius:9px!important;
  white-space:normal!important;
  text-align:left!important;
}
.qbank-choice-controls .choice-option.presenter-preview:disabled{
  opacity:1!important;
  background:#1c232b!important;
  color:#fff!important;
  cursor:default!important;
}
.qbank-preview-hint{
  flex:0 0 auto!important;
  display:block!important;
  color:#66717e!important;
  font-size:12px!important;
}
.qbank-live>[data-qbank-response-count],
.qbank-live>.qbank-student-feedback{
  flex:0 0 auto!important;
  min-height:0!important;
}
.qbank-live[data-qbank-family="complex"] .qbank-media-zone{
  flex-grow:.65!important;
}
.qbank-live[data-qbank-family="complex"] .qbank-controls{
  max-height:38%!important;
  overflow:auto!important;
}
.qbank-live[data-qbank-family="poll"] .qbank-controls{
  max-height:34%!important;
}
.qbank-live[data-qbank-type="true_false"] .qbank-choice-controls{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

/* alpha.87 — Help & Support placement */
.help-support-card{
  display:grid;
  gap:9px;
  padding:12px;
  margin:10px 0 14px;
  border:1px solid #4a5561;
  border-radius:11px;
  background:#202731;
}
.help-support-head strong{font-size:16px;color:#fff}
.help-support-head p{margin:5px 0 0;color:#d8dee6;line-height:1.4}
.help-support-card .support-debug{margin:0!important}
.help-support-card .support-debug summary{cursor:pointer;color:#ffd100}

/* alpha.100 — responsive shell/control placement only */

/* View identity */
.view-identity{
  display:inline-flex;align-items:center;min-height:30px;padding:5px 10px;border-radius:8px;
  font-size:12px;font-weight:950;letter-spacing:.09em;white-space:nowrap
}
.presenter-view-identity{background:#ffd21f;color:#111}
.participant-view-identity{background:#f2f4f7;color:#111;border:1px solid #fff}
.presenter-title,.student-title{display:flex;align-items:center;gap:8px;min-width:0}

/* Do not make widescreen desktop consume the whole monitor. */
#presenter .presenter-layout,
#student .student-main{
  width:min(1500px,100%);
  margin-inline:auto;
}

/* Wrappers collapse away by default so legacy/mobile selectors still see the controls. */
#presenterControlDock,
#studentControlDock{display:contents}

/* Wide desktop: bounded stage with controls flanking it.
   Presenter: Marks left, View right. Participant uses the same View/Marks vocabulary/order. */
@media(min-width:1280px) and (min-height:760px){
  #presenter .presenter-layout{
    grid-template-columns:1fr 300px!important;
  }
  #presenter .presenter-layout>main{
    display:grid!important;
    grid-template-columns:220px minmax(0,1fr) 220px!important;
    grid-template-rows:auto auto!important;
    gap:12px!important;
    align-items:start!important;
    min-width:0!important;
    padding:16px!important;
  }
  #presenterStageWrap{
    grid-column:2!important;grid-row:1!important;
    width:min(100%,980px)!important;max-width:980px!important;margin:0 auto!important
  }
  #presenter .present-controls{
    grid-column:2!important;grid-row:2!important;margin:0!important
  }
  #presenterControlDock{
    display:contents!important
  }
  #presenter #annotationControls{
    grid-column:1!important;grid-row:1 / span 2!important;
    width:100%!important;max-width:none!important;margin:0!important
  }
  #presenter #participantExplorePermission{
    grid-column:1!important;grid-row:2!important;
    width:100%!important;max-width:none!important;margin-top:10px!important
  }
  #presenter #imageControls{
    grid-column:3!important;grid-row:1!important;
    width:100%!important;max-width:none!important;margin:0!important
  }
  #presenter #presenterInteractionControls{
    grid-column:3!important;grid-row:2!important;
    width:100%!important;max-width:none!important;margin:0!important
  }
  #presenter #imageControls:not([hidden]){
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important
  }
  #presenter #imageControls>strong,
  #presenter #imageControls>.zoom-slider,
  #presenter #imageControls>.gesture-hint{grid-column:1/-1!important}
  #presenter #annotationControls:not([hidden]){display:block!important}
  #presenter #annotationControls .annotation-tools{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important
  }
  #presenter #annotationControls .annotation-tools label{grid-column:1/-1!important}
  #presenter #participantExplorePermission:not([hidden]){display:grid!important}

  #student .student-main{
    display:grid!important;
    grid-template-columns:220px minmax(0,1fr) 220px!important;
    gap:12px!important;
    align-items:start!important;
    padding:16px!important;
  }
  #student .student-main>#waiting,
  #student .student-main>#studentHidden{grid-column:1/-1!important}
  #student .student-main>#studentStageWrap{
    grid-column:2!important;grid-row:1!important;
    width:min(100%,980px)!important;max-width:980px!important;margin:0 auto!important
  }
  #student .student-main>#studentSelfNav{grid-column:2!important;grid-row:2!important;width:100%!important;margin:0!important}
  #student .student-main>#studentAssessment{grid-column:2!important;grid-row:3!important;width:100%!important;margin:0!important}
  #studentControlDock{display:contents!important}
  #student #studentMarkControls{
    grid-column:1!important;grid-row:1!important;
    width:100%!important;max-width:none!important;margin:0!important
  }
  #student #studentMediaControls{
    grid-column:3!important;grid-row:1!important;
    width:100%!important;max-width:none!important;margin:0!important
  }
  #student #studentMediaControls:not([hidden]){
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important
  }
  #student #studentMediaControls .student-zoom-slider,
  #student #studentMediaControls .student-gesture-hint{grid-column:1/-1!important}
  #student #studentMarkControls:not([hidden]){
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important
  }
}

/* Narrow desktop / side-by-side: controls drop below the stage instead of squeezing it. */
@media(min-width:901px) and (max-width:1279px){
  #presenter .presenter-layout{grid-template-columns:1fr!important}
  #presenter .presenter-layout>main{
    display:block!important;min-width:0!important;padding:14px!important;overflow:visible!important
  }
  #presenterStageWrap{width:min(100%,980px)!important;margin:0 auto!important}
  #presenterControlDock{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    width:min(980px,100%)!important;
    margin:10px auto 0!important
  }
  #presenterControlDock>#imageControls,
  #presenterControlDock>#annotationControls,
  #presenterControlDock>#participantExplorePermission,
  #presenterControlDock>#presenterInteractionControls{
    width:100%!important;max-width:none!important;margin:0!important
  }
  #presenter .presenter-side{
    border-left:0!important;border-top:1px solid var(--line)!important;overflow:visible!important
  }

  #student .student-main{
    display:block!important;padding:14px!important
  }
  #student .student-main>#studentStageWrap{width:min(100%,980px)!important;margin:0 auto!important}
  #studentControlDock{
    display:grid!important;grid-template-columns:1fr 1fr!important;
    gap:10px!important;width:min(980px,100%)!important;margin:10px auto 0!important
  }
  #studentControlDock>#studentMediaControls,
  #studentControlDock>#studentMarkControls{
    width:100%!important;max-width:none!important;margin:0!important
  }
}

/* Short desktop / compact workspace: use the existing bottom app navigation/tool sheets earlier. */
@media(min-width:701px) and (max-height:759px){
  #presenter[data-controls-mode="compact"] .compact-presenter-nav,
  #presenter:not([data-controls-mode="expanded"]) .compact-presenter-nav{
    display:grid!important
  }
  #presenter:not([data-controls-mode="expanded"]) .present-controls{display:none!important}
  #presenterControlDock{display:contents!important}
  #studentBottomNav.student-bottom-nav{
    display:grid!important;
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;
    z-index:90!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;padding:7px 8px!important;background:#101318f2!important;
    border-top:1px solid #333b45!important
  }
  #student .student-main{padding-bottom:78px!important}
}

/* Builder: collapse header before crowding; keep stage bounded instead of stretching widescreen. */
#builder .canvas-column .stage-wrap{max-width:1100px}
@media(max-width:1500px) and (min-width:701px){
  #builder .appbar{gap:8px;padding-inline:10px}
  #builder .appbar #showName{width:min(340px,28vw);min-width:170px}
  #builder .bar-actions{gap:5px;min-width:0}
  #builder #builderSession,
  #builder #connBadge,
  #builder #participantBtn,
  #builder #remoteBtn,
  #builder #sessionManageBtn{display:none!important}
  #builder .mobile-builder-menu{display:block!important;position:relative}
  #builder .mobile-builder-menu>summary{
    list-style:none;cursor:pointer;background:#282d35;border:1px solid #3b424d;
    border-radius:9px;padding:7px 9px;font-weight:900
  }
  #builder .mobile-builder-menu>summary::-webkit-details-marker{display:none}
  #builder .mobile-builder-menu>div{
    position:absolute;right:0;top:42px;z-index:80;width:220px;
    background:#11151a;border:1px solid #3b424d;border-radius:12px;
    padding:9px;box-shadow:0 18px 50px #0009
  }
  #builder .mobile-builder-menu button{width:100%;margin:4px 0}
}

/* Intermediate Builder: Stage stays visible; Slides/Edit become narrow reference drawers. */
@media(min-width:701px) and (max-width:1120px){
  #builder{padding-bottom:58px}
  #builder .builder-grid{
    display:block!important;height:calc(100vh - 62px - 58px)!important;
    position:relative!important;overflow:auto!important
  }
  #builder .canvas-column{
    display:block!important;position:static!important;width:auto!important;
    height:auto!important;min-height:100%!important;overflow:auto!important;padding:12px!important
  }
  #builder .rail,#builder .inspector{display:none!important}
  #builder[data-mobile-mode="slides"] .rail{
    display:block!important;position:fixed!important;left:10px!important;top:72px!important;bottom:68px!important;
    width:min(300px,40vw)!important;height:auto!important;overflow:auto!important;z-index:70!important;
    padding:12px!important;background:var(--panel)!important;border:1px solid var(--line)!important;
    border-radius:12px!important;box-shadow:0 20px 60px #0009!important
  }
  #builder[data-mobile-mode="edit"] .inspector{
    display:block!important;position:fixed!important;right:10px!important;top:72px!important;bottom:68px!important;
    width:min(380px,45vw)!important;height:auto!important;overflow:auto!important;z-index:70!important;
    padding:12px!important;background:var(--panel)!important;border:1px solid var(--line)!important;
    border-radius:12px!important;box-shadow:0 20px 60px #0009!important
  }
  #builder .mobile-builder-nav{
    display:grid!important;grid-template-columns:repeat(3,1fr)!important;
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;
    height:58px!important;z-index:75!important;background:#111419!important;
    border-top:1px solid var(--line)!important;padding:6px 8px!important;gap:6px!important
  }
  #builder .mobile-builder-nav button{background:#232831;color:#fff;border:1px solid #343b46}
  #builder .mobile-builder-nav button.active{background:var(--yellow);color:#111;border-color:var(--yellow)}
}

/* Presenter menus are compact reference drawers on desktop, preserving stage context. */
@media(min-width:701px){
  #presenter #presenterSlides.presenter-slides-drawer:not([hidden]),
  #presenter #sessionInfo.session-drawer:not([hidden]){
    position:fixed!important;left:auto!important;right:12px!important;top:72px!important;bottom:auto!important;
    width:min(360px,38vw)!important;max-width:360px!important;max-height:calc(100dvh - 88px)!important;
    overflow:auto!important;z-index:95!important;background:#11161c!important;border:1px solid #3d4652!important;
    border-radius:12px!important;padding:12px!important;box-shadow:0 20px 60px #000a!important
  }
  #presenter,#student{overflow-y:auto!important}
}

/* Identity survives compact layouts. */
@media(max-width:900px){
  #presenter .presenter-title #presenterShow{display:none}
  #student .student-product{display:none}
  .view-identity{font-size:11px;padding:5px 8px;letter-spacing:.07em}
}

/* Phone keeps the existing mobile shell as the authority. */
@media(max-width:700px){
  #presenterControlDock,#studentControlDock{display:contents!important}
}

/* alpha.101 — one-ping UI refinement. No media/session behavior changes. */

/* Compact presenter mark administration */
#presenter .mark-admin{display:inline-flex!important;align-items:center;justify-content:center;gap:6px;min-width:0!important}
#presenter .mark-admin-icon{font-size:16px;line-height:1}
#presenter .compact-permission{padding:8px!important;gap:8px!important}
#presenter .compact-permission>div{min-width:0}
#presenter .compact-permission strong{font-size:12px;line-height:1.15}
#presenter .compact-permission button{padding:6px 8px!important;font-size:11px!important;white-space:nowrap}

/* Builder drawers should read as menus layered over Stage, never replacement pages. */
@media(min-width:701px) and (max-width:1120px){
  #builder .builder-grid{overflow:auto!important}
  #builder .canvas-column{display:block!important}
  #builder[data-mobile-mode="slides"] .canvas-column,
  #builder[data-mobile-mode="edit"] .canvas-column,
  #builder[data-mobile-mode="stage"] .canvas-column{display:block!important}

  #builder[data-mobile-mode="slides"] .rail,
  #builder[data-mobile-mode="edit"] .inspector{
    top:84px!important;bottom:82px!important;
    max-height:calc(100dvh - 166px)!important;
    border:1px solid #4a535f!important;
    border-radius:14px!important;
    box-shadow:0 18px 52px #000b!important;
    background:#15191f!important;
  }
  #builder[data-mobile-mode="slides"] .rail{
    left:16px!important;width:min(290px,38vw)!important
  }
  #builder[data-mobile-mode="edit"] .inspector{
    right:16px!important;width:min(360px,43vw)!important
  }
}

/* Mobile: keep Stage visible and high; Slides/Edit are inset tool sheets rather than pages. */
@media(max-width:700px){
  #builder{padding-bottom:58px!important}
  #builder .builder-grid{
    display:block!important;
    height:calc(100dvh - 58px - 58px)!important;
    overflow:auto!important;
    position:relative!important
  }
  #builder .canvas-column{
    display:block!important;
    padding:8px!important;
    min-height:auto!important;
    overflow:visible!important
  }
  #builder .canvas-column .eyebrow{margin-top:0!important}
  #builder .canvas-column .stage-wrap{margin-top:6px!important}
  #builder[data-mobile-mode="slides"] .canvas-column,
  #builder[data-mobile-mode="edit"] .canvas-column,
  #builder[data-mobile-mode="stage"] .canvas-column{display:block!important}

  #builder .rail,#builder .inspector{display:none!important}
  #builder[data-mobile-mode="slides"] .rail,
  #builder[data-mobile-mode="edit"] .inspector{
    display:block!important;
    position:fixed!important;
    left:12px!important;right:12px!important;
    top:auto!important;bottom:72px!important;
    width:auto!important;height:auto!important;
    max-height:min(62dvh,560px)!important;
    overflow:auto!important;z-index:85!important;
    padding:12px!important;
    background:#15191ff5!important;
    border:1px solid #4a535f!important;
    border-radius:16px!important;
    box-shadow:0 18px 60px #000c!important
  }
  #builder[data-mobile-mode="slides"] .rail::before,
  #builder[data-mobile-mode="edit"] .inspector::before{
    display:block;font-size:11px;font-weight:950;letter-spacing:.09em;
    color:#aeb7c2;margin:0 0 8px
  }
  #builder[data-mobile-mode="slides"] .rail::before{content:"SLIDES"}
  #builder[data-mobile-mode="edit"] .inspector::before{content:"EDIT"}
}

/* Participant View controls visually inherit the Presenter control language. */
#student #studentMediaControls button,
#student #studentMarkControls button{
  border-radius:8px!important;
  font-weight:850!important;
}

/* alpha.102 — packing fixes only */

/* Slide transport belongs to the stage and must never drift down the workspace. */
#presenterStageWrap>.present-controls{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  width:100%!important;
  margin:8px auto 0!important;
  padding:0!important
}

/* Wide desktop: keep permissions immediately under the Marks rail. */
@media(min-width:1280px) and (min-height:760px){
  #presenter .presenter-layout>main{
    grid-template-rows:auto!important;
  }
  #presenterStageWrap{
    grid-column:2!important;
    grid-row:1!important;
  }
  #presenter #annotationControls{
    grid-column:1!important;
    grid-row:1!important;
    align-self:start!important
  }
  #presenter #participantExplorePermission{
    grid-column:1!important;
    grid-row:1!important;
    align-self:start!important;
    margin-top:520px!important;
    width:100%!important;
    max-width:none!important
  }
  #presenter #imageControls{
    grid-column:3!important;
    grid-row:1!important;
    align-self:start!important
  }
}

/* At narrower desktop widths permissions remain part of the control dock, not an orphan. */
@media(min-width:901px) and (max-width:1279px){
  #presenterControlDock>#participantExplorePermission{
    align-self:start!important
  }
}

/* Participant clear action follows the compact Presenter mark-management language. */
#student .student-clear-marks{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  min-width:0!important;
  white-space:nowrap!important
}

/* alpha.109 — Builder header only */
#builder .builder-appbar{
  display:grid!important;
  grid-template-columns:auto minmax(140px,1fr) auto!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
  padding:8px 10px!important;
}
#builder .builder-head-core,
#builder .builder-head-actions{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;
}
#builder .builder-head-actions{justify-content:flex-end!important}
#builder .builder-appbar #showName{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
}
#builder .builder-more-menu{
  display:block!important;
  position:relative!important;
  flex:0 0 auto!important;
}
#builder .builder-more-menu>summary{
  list-style:none!important;
  cursor:pointer!important;
  background:#282d35!important;
  border:1px solid #3b424d!important;
  border-radius:9px!important;
  padding:8px 10px!important;
  font-weight:900!important;
}
#builder .builder-more-menu>summary::-webkit-details-marker{display:none!important}
#builder .builder-more-menu>div{
  position:absolute!important;
  right:0!important;
  top:44px!important;
  z-index:120!important;
  width:min(300px,calc(100vw - 20px))!important;
  max-height:calc(100dvh - 70px)!important;
  overflow:auto!important;
  padding:10px!important;
  background:#11151af7!important;
  border:1px solid #3b424d!important;
  border-radius:12px!important;
  box-shadow:0 18px 50px #000a!important;
}
#builder .builder-menu-brand{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:4px 2px 10px!important;
  border-bottom:1px solid #2e3540!important;
}
#builder .builder-menu-section{
  display:grid!important;
  gap:7px!important;
  padding:10px 0 0!important;
}
#builder .builder-menu-label{
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.1em!important;
  color:#9ea7b3!important;
  text-transform:uppercase!important;
}
#builder .builder-status-stack{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:6px!important;
}
#builder .builder-status-stack .badge,
#builder .builder-status-stack .mobile-live{
  margin:0!important;
  justify-self:start!important;
}
#builder .builder-more-menu button{
  width:100%!important;
  margin:0!important;
}
#builder .builder-desktop-hidden-actions{
  display:none!important;
}

/* Builder header is intentionally boring on narrow screens: Shows | name | more.
   Present moves into More before it can crowd the bar. */
@media(max-width:760px){
  #builder .builder-appbar{
    grid-template-columns:auto minmax(0,1fr) auto!important;
    gap:6px!important;
    padding:7px 8px!important;
  }
  #builder .builder-head-actions>#launchBtn{display:none!important}
  #builder .builder-appbar #showName{
    font-size:13px!important;
    padding:7px 8px!important;
  }
  #builder #builderExit{padding:7px 9px!important}
}

/* alpha.110 — remove permanent Presenter sidebar from layout */
#presenter .presenter-layout{
  display:block!important;
  width:100%!important;
  min-height:calc(100vh - 62px)!important
}
#presenter .presenter-layout>main{
  width:100%!important;
  max-width:1380px!important;
  margin:0 auto!important;
}
#presenter .presenter-side{display:none!important}

/* Slides and Session Info remain floating drawers. */
#presenter #presenterSlides.presenter-slides-drawer:not([hidden]),
#presenter #sessionInfo.session-drawer:not([hidden]),
#presenter #presenterStatusHelpDrawer:not([hidden]){
  position:fixed!important;
  right:12px!important;
  top:72px!important;
  width:min(390px,calc(100vw - 24px))!important;
  max-height:calc(100dvh - 90px)!important;
  overflow:auto!important;
  z-index:105!important;
  background:#11161cf8!important;
  border:1px solid #46505c!important;
  border-radius:14px!important;
  padding:12px!important;
  box-shadow:0 20px 65px #000b!important
}
#presenterStatusHelpDrawer .acceptance,
#presenterStatusHelpDrawer .media-debug{margin-top:12px!important}

/* Notes are popout-first; hidden home keeps existing notes DOM/IDs available. */
#presenterNotesHome{display:none!important}

/* Without the sidebar, stage gets the available width instead of shrinking to make room. */
#presenterStageWrap{
  width:min(100%,1200px)!important;
  margin-inline:auto!important
}

/* alpha.112 — Builder view identity only */
.builder-view-identity{
  background:#ffd21f;
  color:#111;
  border:1px solid #ffd21f;
}
@media(max-width:760px){
  #builder .builder-view-identity{
    font-size:10px!important;
    padding:5px 7px!important;
  }
}

/* alpha.113 — rich Presenter Notes hint only */
.notes-rich-hint{display:block;margin-top:5px;color:#8f9aa7;font-size:11px;line-height:1.35}

/* alpha.114 — Presenter More menu available at every viewport */
#presenter .mobile-presenter-menu{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
#presenter #mobilePresenterMenuPanel:not([hidden]){
  display:grid!important;
  position:fixed!important;
  right:10px!important;
  top:64px!important;
  z-index:120!important;
  width:min(300px,calc(100vw - 20px))!important;
  gap:7px!important;
  padding:10px!important;
  background:#11161cf8!important;
  border:1px solid #46505c!important;
  border-radius:12px!important;
  box-shadow:0 18px 55px #000b!important;
}

/* alpha.115 — shared Auto / Expanded / Compact-Touch selectors */
.view-mode-menu-label{display:grid!important;gap:5px!important;font-size:11px!important;color:#b7c0cb!important}
.view-mode-menu-label select{width:100%!important;background:#0f1318!important;color:#fff!important;border:1px solid #3b4450!important;border-radius:8px!important;padding:8px!important}

/* Builder explicit mode uses the layouts already present in this build. */
#builder[data-controls-mode="expanded"] .mobile-builder-nav{display:none!important}
#builder[data-controls-mode="expanded"] .rail,
#builder[data-controls-mode="expanded"] .inspector{display:block!important}
#builder[data-controls-mode="expanded"] .builder-grid{display:grid!important}

#builder[data-controls-mode="compact"] .mobile-builder-nav{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important
}
#builder[data-controls-mode="compact"] .builder-grid{
  display:block!important;
  position:relative!important;
  overflow:auto!important
}
#builder[data-controls-mode="compact"] .canvas-column{display:block!important}
#builder[data-controls-mode="compact"] .rail,
#builder[data-controls-mode="compact"] .inspector{display:none!important}
#builder[data-controls-mode="compact"][data-mobile-mode="slides"] .rail,
#builder[data-controls-mode="compact"][data-mobile-mode="edit"] .inspector{display:block!important}

/* Participant explicit mode uses its existing side-control vs bottom-nav layouts. */
#student[data-controls-mode="expanded"] #studentBottomNav{display:none!important}
#student[data-controls-mode="expanded"] #studentCompactPanel{display:none!important}

#student[data-controls-mode="compact"] #studentControlDock>#studentMediaControls,
#student[data-controls-mode="compact"] #studentControlDock>#studentMarkControls{display:none!important}
#student[data-controls-mode="compact"] #studentCompactPanel #studentMediaControls:not([hidden]),
#student[data-controls-mode="compact"] #studentCompactPanel #studentMarkControls:not([hidden]){display:grid!important;position:static!important;width:100%!important;max-width:none!important;margin:0!important}
#student[data-controls-mode="compact"] #studentBottomNav{
  display:grid!important;
  position:fixed!important;
  left:0!important;right:0!important;bottom:0!important;
  z-index:95!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:6px!important;
  padding:7px 8px!important;
  background:#101318f7!important;
  border-top:1px solid #343b45!important
}
#student[data-controls-mode="compact"] .student-main{padding-bottom:76px!important}

/* Participant three-dot menu is available everywhere, like Presenter. */
#student .student-head-actions{display:flex!important;align-items:center!important;gap:6px!important}
#student .student-more-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important}
#student .student-more-panel:not([hidden]){
  display:grid!important;
  position:fixed!important;
  right:10px!important;
  top:64px!important;
  z-index:120!important;
  width:min(280px,calc(100vw - 20px))!important;
  gap:7px!important;
  padding:10px!important;
  background:#11161cf8!important;
  border:1px solid #46505c!important;
  border-radius:12px!important;
  box-shadow:0 18px 55px #000b!important
}

/* alpha.116 — End Session contrast only */
#presenter #endSession,
#launch #endSessionFromLaunch{
  background:#2a0f13!important;
  color:#fff!important;
  border-color:#b23a48!important;
}
#presenter #endSession:hover,
#launch #endSessionFromLaunch:hover{
  background:#3a151b!important;
  border-color:#d95665!important;
}

/* alpha.117 — Getting Started / Quickstart help */
.getting-started-card h3{margin:4px 0 10px}
.quick-flow{display:grid;gap:8px;margin:0;padding-left:22px}
.quick-flow li{padding-left:3px}
.quick-flow li b{display:block;font-size:12px}
.quick-flow li span{display:block;color:#aab4c0;font-size:12px;line-height:1.35}
.quick-links{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}
.quick-links button{width:100%}
.launch-help-drawer:not([hidden]){
  position:fixed!important;
  right:12px!important;
  top:72px!important;
  z-index:130!important;
  width:min(430px,calc(100vw - 24px))!important;
  max-height:calc(100dvh - 90px)!important;
  overflow:auto!important;
  padding:12px!important;
  background:#11161cf8!important;
  border:1px solid #46505c!important;
  border-radius:14px!important;
  box-shadow:0 20px 65px #000b!important
}
.launch-help-body{font-size:13px;line-height:1.5;color:#d9dfe6}
.launch-help-body p{margin:10px 0}
@media(max-width:700px){
  .quick-links{grid-template-columns:1fr}
}

/* alpha.118 — annotation control flow only */
#presenter #annotationControls .annotation-tools,
#student #studentMarkControls{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
}
#presenter #annotationControls .annot-setting-row,
#student #studentMarkControls .student-setting-row{
  grid-column:1 / -1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  min-height:34px!important;
  margin:0!important;
}
#presenter #annotationControls .annot-setting-row select,
#student #studentMarkControls .student-setting-row select{
  width:min(120px,55%)!important;
}
#presenter #annotationControls .annot-setting-row input[type="color"],
#student #studentMarkControls .student-setting-row input[type="color"]{
  width:42px!important;
  height:30px!important;
  padding:2px!important;
}

/* alpha.119 — micro copy/fit only */
#presenter #clearAnnotations,
#presenter #clearParticipantAnnotations{
  font-size:10px!important;
}

/* alpha.120 — Participant Controls switches */
#presenter .participant-controls-card{
  display:grid!important;
  gap:8px!important;
  padding:10px!important;
  border:1px solid #3b4551!important;
  border-radius:12px!important;
  background:#12171d!important;
}
#presenter .participant-controls-card[hidden]{display:none!important}
#presenter .participant-controls-head{display:grid!important;gap:2px!important}
#presenter .participant-controls-head>strong{font-size:12px!important}
#presenter .participant-controls-head>small{font-size:10px!important;color:#8f9aa7!important}
#presenter .participant-toggle-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  padding:8px!important;
  background:#171d24!important;
  border:1px solid #333d48!important;
  border-radius:10px!important;
}
#presenter .participant-toggle-copy{display:grid!important;gap:2px!important;min-width:0!important}
#presenter .participant-toggle-copy>strong{font-size:11px!important}
#presenter .participant-toggle-copy>small{font-size:9px!important;color:#8f9aa7!important;line-height:1.25!important}
#presenter .state-switch{
  display:grid!important;
  grid-template-columns:auto 38px auto!important;
  align-items:center!important;
  gap:5px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#9aa4af!important;
  cursor:pointer!important;
}
#presenter .state-switch .switch-state{font-size:9px!important;font-weight:900!important;line-height:1!important}
#presenter .state-switch .switch-track{
  position:relative!important;
  display:block!important;
  width:38px!important;
  height:20px!important;
  border-radius:999px!important;
  background:#454e59!important;
  border:1px solid #5a6571!important;
  transition:.15s ease!important;
}
#presenter .state-switch .switch-knob{
  position:absolute!important;
  top:2px!important;
  left:2px!important;
  width:14px!important;
  height:14px!important;
  border-radius:50%!important;
  background:#fff!important;
  transition:.15s ease!important;
}
#presenter .state-switch .switch-off{color:#fff!important}
#presenter .state-switch .switch-on{color:#68727d!important}
#presenter .state-switch.permission-on .switch-track{background:#ffd21f!important;border-color:#ffd21f!important}
#presenter .state-switch.permission-on .switch-knob{left:20px!important;background:#111!important}
#presenter .state-switch.permission-on .switch-off{color:#68727d!important}
#presenter .state-switch.permission-on .switch-on{color:#ffd21f!important}

/* alpha.121 — detached Presenter surface menu labels */
.presenter-menu-section-label{
  margin-top:4px!important;
  padding-top:8px!important;
  border-top:1px solid #333c47!important;
  color:#8f9aa7!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}

/* alpha.127 — detached control surface manager */
.presenter-menu-section-label{
  margin-top:4px!important;
  padding-top:8px!important;
  border-top:1px solid #333c47!important;
  color:#8f9aa7!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}




/* a144 hard permission visibility invariant */
#studentMarkControls[hidden]{
  display:none!important;
}
#studentNavMarks[hidden]{
  display:none!important;
}


/* a146: hidden state must beat later two-ID annotation layout rules */
#student #studentMarkControls[hidden],
#studentCompactPanel #studentMarkControls[hidden]{
  display:none!important;
}

/* a148 Sherpa return */
.sherpa-return{border-color:#ffd100!important;color:#ffd100!important;font-weight:900!important}

.qbank-block-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.qbank-block-editor>.source-ref{display:block;margin-top:8px}

/* Alpha.105: Show library/popup vertical overflow repair. */
html,body{
  min-height:100%;
}
body{
  overflow-y:auto !important;
  overflow-x:hidden;
}

.slide-thumb-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:stretch}.slide-thumb-row .slide-thumb{min-width:0}.slide-order-controls{display:grid;grid-template-columns:1fr 1fr;gap:4px}.slide-order-controls button{min-width:34px;padding:6px}.attendance-checkpoint-block{border:1px solid var(--line);border-radius:14px;padding:18px;background:#15191f}.attendance-confirm-row{display:flex;align-items:center;gap:12px;font-weight:700;margin-top:14px}.attendance-confirm-row input{width:22px;height:22px}


/* A263 — narrow interaction-panel safety + participant attendance acknowledgement */
.interaction-choice-card{grid-template-columns:minmax(0,1fr)!important;align-items:stretch!important}
.interaction-choice-card button{width:100%!important;min-width:0!important;position:static!important}
.attendance-checkpoint-block{width:min(100%,900px);align-self:center}
.attendance-confirm-row{background:#fff7c2;border:2px solid #d9ad00;border-radius:12px;padding:12px 14px;color:#111;cursor:pointer}
.attendance-confirm-row input{accent-color:#d9ad00;flex:0 0 auto}
.attendance-checkpoint-block.attendance-recorded .attendance-confirm-row{background:#e7f8ec;border-color:#3c9a5f}

/* A264 — participant checkpoint contrast hardening */
.attendance-checkpoint-block{color:var(--text)}
.attendance-checkpoint-block h1,.attendance-checkpoint-block h2,.attendance-checkpoint-block h3,.attendance-checkpoint-block p{color:var(--text)}
.attendance-checkpoint-block .checkpoint-tag{color:#ffd76a}
.attendance-checkpoint-block.attendance-recorded .checkpoint-tag{color:#9fe0b4}

/* A283 — Show-level assessment definition */
.assessment-settings{display:grid;gap:10px}
.assessment-settings>p{margin:0;color:#aab4c0;line-height:1.45}
.assessment-toggle{display:flex!important;align-items:center;gap:9px;font-weight:800}
.assessment-toggle input{width:18px;height:18px;flex:0 0 auto}
.assessment-options{display:grid;gap:10px;padding:12px;border:1px solid #39434f;border-radius:10px;background:#11171e}
.assessment-options[hidden]{display:none!important}
@media(max-width:640px){.assessment-options{padding:10px}.assessment-settings input,.assessment-settings select{min-height:44px}}

/* A284 — self-directed Show foundation */
.show-navigation-settings{display:grid;gap:10px}
.show-navigation-settings>p{margin:0;color:#aab4c0;line-height:1.45}
.show-navigation-settings select{width:100%;margin-top:6px}
.participant-navigation-control{display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(100%,1100px);margin:8px auto 12px;padding:10px 12px;border:1px solid #39434f;border-radius:12px;background:#11171e}
.participant-navigation-control>div{display:grid;gap:2px}.participant-navigation-control small{color:#aab4c0}
.participant-navigation-control button.active,#mobileParticipantNavigation.active{border-color:#ffd21f;color:#ffd21f}
.student-self-nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center;width:min(100%,760px);margin:12px auto;padding:8px;border:1px solid #39434f;border-radius:12px;background:#11171ef2}
.student-self-nav[hidden]{display:none!important}.student-self-nav span{text-align:center;font-weight:900;color:#dce3eb;min-width:62px}.student-self-nav button{min-height:44px}
@media(max-width:700px){
  .participant-navigation-control{margin:8px 0 12px;width:100%;align-items:stretch}.participant-navigation-control>div{min-width:0}.participant-navigation-control button{min-height:44px;flex:0 0 auto}
  #student.student-self-directed{padding-bottom:126px!important}
  #student .student-self-nav{position:fixed!important;left:8px!important;right:8px!important;bottom:68px!important;z-index:89!important;width:auto!important;margin:0!important;box-shadow:0 16px 40px #0008}
  .show-navigation-settings select{min-height:44px}
}


/* A285 — assessment attempt lifecycle + participant feedback */
.choice-option.student-correct{border-color:#38b86a!important;background:#133421!important;color:#eafff0!important;box-shadow:0 0 0 2px rgba(56,184,106,.22) inset!important}
.choice-option.student-wrong{border-color:#d94a4a!important;background:#3a1717!important;color:#fff0f0!important;box-shadow:0 0 0 2px rgba(217,74,74,.2) inset!important}
.qbank-student-feedback.feedback-correct{border-color:#38b86a!important;background:#133421!important;color:#bff2cf!important}
.qbank-student-feedback.feedback-wrong{border-color:#d94a4a!important;background:#3a1717!important;color:#ffc7c7!important}
.student-assessment{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:center;width:min(100%,760px);margin:10px auto;padding:12px;border:1px solid #495563;border-radius:12px;background:#11171ef5}
.student-assessment[hidden]{display:none!important}.student-assessment>div:first-child{display:grid;gap:3px}.student-assessment small{color:#aab4c0}.student-assessment-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.student-assessment-result{grid-column:1/-1;padding:10px;border-radius:9px;border:1px solid #46515e;background:#0d1319;font-weight:800}.student-assessment-result.pass{border-color:#38b86a;background:#102c1b;color:#c9f5d7}.student-assessment-result.fail{border-color:#d94a4a;background:#321515;color:#ffd0d0}
#studentStage .qbank-live{max-height:100%!important;overflow:auto!important;overscroll-behavior:contain}
#studentStage .choice-block{max-height:100%!important;overflow:auto!important;overscroll-behavior:contain}
@media(max-width:700px){#student.student-self-directed.assessment-active{padding-bottom:220px!important}.student-assessment{position:fixed;left:8px;right:8px;bottom:124px;z-index:90;width:auto;margin:0;grid-template-columns:1fr;padding:10px;box-shadow:0 16px 40px #0009}.student-assessment-actions{justify-content:stretch}.student-assessment-actions button{flex:1 1 140px;min-height:44px}.student-assessment-result{font-size:14px}}

/* A285 r2: mobile participant viewport clearance for persistent navigation/assessment controls. */
@media(max-width:700px){
  #student{
    --student-bottom-clearance:calc(88px + env(safe-area-inset-bottom));
    --student-selfnav-clearance:calc(154px + env(safe-area-inset-bottom));
    --student-assessment-clearance:calc(224px + env(safe-area-inset-bottom));
    --student-self-assessment-clearance:calc(304px + env(safe-area-inset-bottom));
  }
  #student .student-main{
    padding-bottom:var(--student-bottom-clearance)!important;
    scroll-padding-bottom:var(--student-bottom-clearance)!important;
  }
  #student.student-self-directed .student-main{
    padding-bottom:var(--student-selfnav-clearance)!important;
    scroll-padding-bottom:var(--student-selfnav-clearance)!important;
  }
  #student.assessment-active:not(.student-self-directed) .student-main{
    padding-bottom:var(--student-assessment-clearance)!important;
    scroll-padding-bottom:var(--student-assessment-clearance)!important;
  }
  #student.student-self-directed.assessment-active .student-main{
    padding-bottom:var(--student-self-assessment-clearance)!important;
    scroll-padding-bottom:var(--student-self-assessment-clearance)!important;
  }
  #student .student-self-nav{
    bottom:calc(76px + env(safe-area-inset-bottom))!important;
  }
  #student .student-assessment{
    bottom:calc(76px + env(safe-area-inset-bottom))!important;
    max-height:min(42dvh,320px)!important;
    overflow:auto!important;
    overscroll-behavior:contain;
  }
  #student.student-self-directed .student-assessment{
    bottom:calc(146px + env(safe-area-inset-bottom))!important;
    max-height:min(36dvh,280px)!important;
  }
  #studentStageWrap{
    scroll-margin-bottom:var(--student-bottom-clearance);
  }
  #student.student-self-directed #studentStageWrap{
    scroll-margin-bottom:var(--student-selfnav-clearance);
  }
  #student.assessment-active:not(.student-self-directed) #studentStageWrap{
    scroll-margin-bottom:var(--student-assessment-clearance);
  }
  #student.student-self-directed.assessment-active #studentStageWrap{
    scroll-margin-bottom:var(--student-self-assessment-clearance);
  }
}

/* Short landscape/touch layouts can expose the same fixed-footer collision before phone width. */
@media(min-width:701px) and (max-height:759px){
  #student.student-self-directed .student-main{padding-bottom:150px!important;scroll-padding-bottom:150px!important}
  #student.assessment-active:not(.student-self-directed) .student-main{padding-bottom:210px!important;scroll-padding-bottom:210px!important}
  #student.student-self-directed.assessment-active .student-main{padding-bottom:285px!important;scroll-padding-bottom:285px!important}
}


/* A300 participant Show return + attendance interruption */
.student-return-session{white-space:nowrap}
.student-attendance-interrupt{position:fixed;inset:0;z-index:9999;background:rgba(5,8,14,.88);display:grid;place-items:center;padding:20px}
.student-attendance-interrupt[hidden]{display:none}
.student-attendance-card{width:min(560px,100%);background:#111722;border:1px solid #39465d;border-radius:18px;padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.student-attendance-card h2{margin:.35rem 0 .65rem;font-size:clamp(1.5rem,5vw,2.25rem)}
.student-attendance-card p{margin:0 0 1rem;line-height:1.5;color:#d6dce8}
.student-attendance-actions{display:flex;gap:10px;margin:18px 0 10px}
.student-attendance-actions button{width:100%;min-height:48px;font-weight:800}
.student-attendance-card small{display:block;color:#aeb8c8}
@media(max-width:700px){.studentbar{gap:8px}.student-head-actions{gap:6px}.student-return-session{padding:.55rem .7rem}.student-attendance-card{padding:20px;border-radius:16px}}

/* A359-R20: participant controls exist only when their live capability is usable. */
#studentNavMedia[hidden],
#studentNavView[hidden],
#studentNavMarks[hidden],
#studentBottomNav[hidden]{display:none!important}


/* A359-R44-R21: Current Activity is a single-scroll host surface.
   Embedded Show must never create its own browser scrollport. The parent iframe
   expands to the reported content height. Keep controls in normal flow so a
   presenter/self-directed transition cannot flip height-based layout modes. */
html.participant-embedded,body.participant-embedded{
  overflow:hidden!important;
  scrollbar-width:none!important;
}
html.participant-embedded::-webkit-scrollbar,body.participant-embedded::-webkit-scrollbar{display:none!important}
body.participant-embedded #student{
  height:auto!important;min-height:0!important;overflow:hidden!important;padding-bottom:0!important;
}
body.participant-embedded #student .student-main{
  height:auto!important;min-height:0!important;overflow:hidden!important;
  padding:12px!important;scroll-padding-bottom:0!important;
}
body.participant-embedded #studentBottomNav,
body.participant-embedded #studentCompactPanel{display:none!important}
body.participant-embedded #studentSelfNav,
body.participant-embedded #studentAssessment{
  position:static!important;left:auto!important;right:auto!important;bottom:auto!important;
  width:100%!important;max-height:none!important;overflow:visible!important;
  margin:10px auto 0!important;
}


/* A359-R44-R23: slide branding belongs to the authored slide coordinate system.
   Container-relative units make the complete badge scale with the slide in Builder,
   Presenter, participant embed, and participant popout instead of behaving like
   fixed-size application chrome. */
.authored-show-stage{container-type:size}
.slide-brand{
  gap:.72cqw!important;
  padding:.64cqw .82cqw!important;
  border-radius:.82cqw!important;
  font-size:1.36cqw!important;
  box-shadow:0 .18cqw .9cqw rgba(0,0,0,.22)!important;
}
.slide-brand img{border-radius:.55cqw!important}
.slide-brand.brand-size-small img{width:2.73cqw!important;height:2.73cqw!important}
.slide-brand.brand-size-medium img{width:4.18cqw!important;height:4.18cqw!important}
.slide-brand.brand-size-large img{width:6.18cqw!important;height:6.18cqw!important}

/* A359-R44-R25: self-directed transport is part of the participant Show surface.
   The authored canvas keeps its aspect ratio; transport/assessment chrome remains
   in normal flow beneath it so 16:9, 4:3, 1:1 and 9:16 all expose controls inline. */
body.participant-embedded #student .student-main>#studentSelfNav,
body.participant-embedded #student .student-main>#studentAssessment{
  display:grid;
  position:static!important;
  width:min(100%,760px)!important;
  margin:10px auto 0!important;
  flex:none!important;
}
body.participant-embedded #student .student-main>#studentSelfNav[hidden],
body.participant-embedded #student .student-main>#studentAssessment[hidden]{display:none!important}

/* R44-R29 — presenter centering, control spacing, participant hide target */
@media(min-width:1280px) and (min-height:760px){
  #presenter .presenter-layout>main{
    grid-template-columns:minmax(220px,1fr) minmax(0,980px) minmax(220px,1fr)!important;
  }
  #presenterStageWrap{
    grid-column:2!important;
    justify-self:center!important;
    align-self:start!important;
    margin-inline:auto!important;
  }
}
.participant-navigation-control{
  column-gap:20px!important;
  padding:14px 16px!important;
}
.participant-navigation-control>div{padding-right:8px!important}
.participant-navigation-control button{
  padding:12px 18px!important;
  min-height:48px!important;
  line-height:1.2!important;
}
#student .student-main>#studentHidden{
  min-height:0!important;
  height:auto!important;
  padding:18px 16px!important;
  margin:0 auto 10px!important;
  width:min(1200px,calc(100vw - 44px))!important;
  border:1px solid #39434f!important;
  border-radius:12px!important;
  background:#11171e!important;
}
#student .student-main>#studentHidden h2{margin:0!important;font-size:18px!important}


/* A359-R44-R38 — presenter chrome/control-state repair only. Geometry contract untouched. */
.presenter-live-now{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;white-space:nowrap;color:#9cf2b2;font-weight:900;font-size:12px;letter-spacing:.04em}
.presenter-live-now .live-dot{background:#52d273;box-shadow:0 0 10px rgba(82,210,115,.7);margin-right:0}
#presenter .presenter-title{overflow:visible!important}
#presenter .presenter-title #presenterShow{overflow:hidden;min-width:0;text-overflow:ellipsis;white-space:nowrap}
#presenter .mobile-presenter-menu{position:relative;z-index:121}
@media(max-width:700px){
  #presenter .presenter-appbar{overflow:visible!important}
  #presenter .presenter-title{flex:1 1 auto!important;overflow:visible!important;gap:6px!important}
  #presenter .presenter-view-identity{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  #presenter .presenter-live-now{font-size:11px;letter-spacing:0;flex:0 0 auto}
  #presenter #presenterShow{display:none!important}
  #presenter .mobile-presenter-menu{display:inline-flex!important;flex:0 0 44px!important}
}

/* A359-R44-R40 — mobile Show chrome is strictly below-slide. Never place menus beside/over slide. */
@media(max-width:700px){
  #student .student-head-actions .student-more-btn{display:none!important}
  #student > .student-more-panel{display:none!important}
  #student[data-controls-mode] #studentBottomNav{
    display:grid!important;position:static!important;left:auto!important;right:auto!important;bottom:auto!important;
    width:100%!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;margin:0!important;
    background:#101318!important;border-top:1px solid #343b45!important;box-sizing:border-box!important
  }
  #student[data-controls-mode] #studentCompactPanel.student-compact-panel{
    display:block;position:static!important;left:auto!important;right:auto!important;bottom:auto!important;
    width:100%!important;max-height:none!important;overflow:visible!important;margin:0!important;
    border-radius:0!important;border-left:0!important;border-right:0!important;box-shadow:none!important;
    order:3!important
  }
  #student[data-controls-mode] #studentCompactPanel[hidden]{display:none!important}
  #student .student-layout-options{display:grid;gap:8px;width:100%}
  #student .student-layout-options select{width:100%;min-height:44px}
}

/* A359-R44-R41 — Show menus are application chrome, never Show geometry. */
/* The header More trigger is removed from all layout flow. On desktop it becomes a
   fixed app-chrome launcher; on mobile the existing bottom compact bar owns More. */
#presenter .presenter-appbar > #mobilePresenterMenu{
  position:fixed!important;
  right:14px!important;
  bottom:14px!important;
  top:auto!important;
  left:auto!important;
  z-index:140!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  flex:none!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-shadow:0 10px 32px #0008!important;
}
#presenter #mobilePresenterMenuPanel:not([hidden]){
  position:fixed!important;
  right:14px!important;
  bottom:66px!important;
  top:auto!important;
  left:auto!important;
  z-index:139!important;
  width:min(320px,calc(100vw - 28px))!important;
  max-height:min(70vh,680px)!important;
  overflow:auto!important;
  margin:0!important;
}
@media(max-width:700px){
  #presenter .presenter-appbar > #mobilePresenterMenu{display:none!important}
  #presenter #mobilePresenterMenuPanel:not([hidden]){
    left:8px!important;right:8px!important;bottom:118px!important;top:auto!important;
    width:auto!important;max-height:52dvh!important
  }
  #presenter:not([data-controls-mode="expanded"]) #mobilePresenterNav.compact-presenter-nav,
  #presenter[data-controls-mode="compact"] #mobilePresenterNav.compact-presenter-nav{
    display:grid!important
  }
}

/* A359-R44-R42 — embedded participant menu belongs to Sherpa chrome, never Show geometry. */
body.participant-embedded #studentMoreBtn,
body.participant-embedded #studentMorePanel,
body.participant-embedded #studentNavMore{display:none!important;}
body.participant-embedded #studentBottomNav{grid-template-columns:repeat(3,minmax(0,1fr))!important;}

/* A359-R44-R43 — canonical Show surface contract.
   There are surfaces, not layout modes. Embedded Show is a viewer. Participant
   interaction belongs to the dedicated Popout. Expanded geometry is canonical. */
#builder,#presenter,#student{--gshow-layout-contract:expanded}
#presenter[data-controls-mode],#student[data-controls-mode],#builder[data-controls-mode]{ }

/* No layout chooser survives in Show chrome. */
.view-mode-menu-label,.presenter-mode-label{display:none!important}

/* Sherpa Current Activity iframe is display-only. Never spend its slide area on
   participant media/marks/layout chrome. The full participant Popout retains it. */
body.participant-embedded #studentControlDock,
body.participant-embedded #studentBottomNav,
body.participant-embedded #studentCompactPanel,
body.participant-embedded #studentMoreBtn,
body.participant-embedded #studentMorePanel,
body.participant-embedded #studentNavMore{
  display:none!important;
}
body.participant-embedded #student .student-main{
  padding-bottom:8px!important;
}

/* The dedicated participant Show window is the interaction surface. Its controls
   live after the slide in document flow and never overlay the authored canvas. */
body:not(.participant-embedded) #studentBottomNav{
  position:static!important;
  left:auto!important;right:auto!important;bottom:auto!important;
  width:100%!important;margin:8px 0 0!important;
}
body:not(.participant-embedded) #studentCompactPanel:not([hidden]){
  position:static!important;
  left:auto!important;right:auto!important;bottom:auto!important;
  width:100%!important;max-height:none!important;overflow:visible!important;
  margin:0!important;
}


/* A359-R44-R50 — AUTHORED CANVAS GEOMETRY CONSOLIDATION
   One logical slide rectangle, one fitter, no overflow/content/breakpoint geometry.
   Aspect ratio is document data. Surfaces only choose the available host box. */
#builderStageWrap,
#presenterStageWrap,
#studentStageWrap{
  position:relative!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:var(--show-aspect,960 / 540)!important;
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid #353b45!important;
  box-shadow:0 18px 55px #0007!important;
}
#builderStageWrap{
  width:min(100%,1100px,max(220px,calc((100dvh - 150px) * var(--show-ratio-number,1.7777778))))!important;
}
#presenterStageWrap{
  width:min(100%,980px,max(220px,calc((100dvh - 300px) * var(--show-ratio-number,1.7777778))))!important;
  margin-inline:auto!important;
}
#studentStageWrap{
  width:min(100%,980px)!important;
  margin-inline:auto!important;
}
body.participant-embedded #studentStageWrap{
  width:100%!important;
  max-width:100%!important;
  margin:0 auto!important;
}
#builderStage.authored-show-stage,
#presenterStage.authored-show-stage,
#studentStage.authored-show-stage{
  position:absolute!important;
  inset:auto!important;
  left:0!important;
  top:0!important;
  right:auto!important;
  bottom:auto!important;
  width:var(--show-logical-width,960px)!important;
  height:var(--show-logical-height,540px)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  transform-origin:top left!important;
  container-type:size;
  background:#fff!important;
  color:#111!important;
}
/* Authored content is sized from the logical slide, never the browser/iframe viewport. */
.authored-show-stage>h1{font-size:clamp(28px,4cqw,62px)!important;line-height:1.04!important}
.authored-show-stage>p{font-size:clamp(16px,2cqw,29px)!important;line-height:1.4!important}
.authored-show-stage .choice-block{
  width:min(92%,760px)!important;
  max-width:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
}
.authored-show-stage .choice-block h2{font-size:clamp(20px,3cqw,36px)!important;line-height:1.16!important}
.authored-show-stage .choice-option{font-size:16px!important;padding:12px 14px!important;min-height:44px!important;white-space:normal!important}
.authored-show-stage .resource-card{width:100%!important;height:100%!important;max-height:100%!important;overflow:hidden!important}
.authored-show-stage .resource-card strong{font-size:clamp(22px,4cqw,44px)!important}
.authored-show-stage .resource-card p{font-size:clamp(14px,2cqw,22px)!important}
.authored-show-stage .cta-card{
  width:100%!important;height:100%!important;min-height:0!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)!important;
  grid-template-rows:1fr!important;
  gap:18px!important;padding:5%!important;overflow:hidden!important;
}
.authored-show-stage .cta-card.cta-no-image{grid-template-columns:1fr!important}
.authored-show-stage .cta-card>img{width:100%!important;height:100%!important;max-height:70cqh!important;object-fit:contain!important}
.authored-show-stage .cta-copy h2{font-size:clamp(28px,4cqw,54px)!important}
.authored-show-stage .cta-copy p{font-size:clamp(16px,2cqw,26px)!important}
.authored-show-stage .qbank-live{
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  min-width:0!important;min-height:0!important;overflow:hidden!important;padding:4%!important;
}
.authored-show-stage .qbank-live h2{font-size:clamp(24px,4cqw,48px)!important;line-height:1.14!important}
.authored-show-stage .qbank-media,
.authored-show-stage .qbank-media-zone{max-height:38cqh!important;min-height:0!important}
.authored-show-stage .qbank-media img,
.authored-show-stage .qbank-media-image{max-height:36cqh!important;object-fit:contain!important}
.authored-show-stage .qbank-controls{min-height:0!important;max-height:48cqh!important;overflow:auto!important}
.authored-show-stage .quick-check-media img,
.authored-show-stage .quick-check-media video{max-height:34cqh!important}
.authored-show-stage .chat-slide-shell,
.authored-show-stage .embed-shell{width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important}
.authored-show-stage .attendance-checkpoint-block{max-width:100%!important;max-height:100%!important;overflow:hidden!important}
/* Embedded Current Activity is viewer-only. Its chrome is owned by Sherpa/Popout, not the slide. */
body.participant-embedded #studentControlDock,
body.participant-embedded #studentMediaControls,
body.participant-embedded #studentMarkControls,
body.participant-embedded #studentBottomNav,
body.participant-embedded #studentCompactPanel,
body.participant-embedded #studentMorePanel,
body.participant-embedded #studentMoreBtn,
body.participant-embedded #studentNavMore{display:none!important}
/* Dedicated participant chrome follows the canvas in document flow. */
body:not(.participant-embedded) #studentControlDock{position:static!important;width:100%!important;margin:8px auto 0!important}
body:not(.participant-embedded) #studentBottomNav{position:static!important;width:100%!important;margin:8px 0 0!important}
body:not(.participant-embedded) #studentCompactPanel:not([hidden]){position:static!important;width:100%!important;max-height:none!important;overflow:visible!important;margin:0!important}
@media(max-width:700px){
  #builderStageWrap,#presenterStageWrap,#studentStageWrap,body.participant-embedded #studentStageWrap{
    width:100%!important;max-width:100%!important;
    aspect-ratio:var(--show-aspect,960 / 540)!important;
  }
}

/* R50 surface-chrome preservation from the R48 behavioral reference.
   These rules do not participate in slide geometry. */
body.participant-embedded #student .studentbar{display:none!important}
@media(max-width:700px){
  #student .studentbar{
    height:48px!important;min-height:48px!important;padding:5px 8px!important;gap:6px!important
  }
  #student .student-title{display:none!important}
  #student .student-head-actions{display:grid!important;grid-template-columns:minmax(0,1fr) 40px!important;gap:6px!important;width:100%!important;min-width:0!important}
  #student .student-return-session{width:100%!important;min-width:0!important;justify-content:flex-start!important}
  #student .session-mini,#student #studentExploreBadge,#student #studentConn{display:none!important}
  #student .student-more-btn{width:38px!important;height:38px!important;min-width:38px!important;padding:0!important;border-radius:10px!important}
  #student .student-more-panel:not([hidden]){top:52px!important}
  #student .student-main{padding:10px 8px var(--student-bottom-clearance)!important}
  body.participant-embedded #student .student-main{padding:8px!important}
  #presenter #compactMoreBtn{order:-1!important}
}

/* A359-R44-R52 — Presenter mobile chrome only. R50 authored-canvas geometry remains unchanged. */
@media(max-width:700px){
  /* compactMoreBtn is visually first via order:-1, so tracks must follow that order. */
  #mobilePresenterNav .compact-nav-tools{
    grid-template-columns:.7fr 1fr 1fr 1.25fr!important;
  }
  #mobilePresenterNav #compactPermissionsBtn{
    min-width:0!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:clip!important;
  }
}

/* A359-R44-R54 — PARTICIPANT POPOUT CHROME CONSOLIDATION
   The authored slide geometry remains owned by R50. Dedicated Participant Show chrome
   follows one document-flow contract on every viewport:
   canvas -> self navigation -> Media/View/Marks/More -> opened control panel.
   Embedded Current Activity remains viewer-only. */
body:not(.participant-embedded) #student .student-main{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  width:min(1500px,100%)!important;
  margin-inline:auto!important;
  padding:12px 12px 18px!important;
  overflow:visible!important;
  scroll-padding-bottom:0!important;
}
body:not(.participant-embedded) #studentControlDock{
  display:none!important;
}
body:not(.participant-embedded) #student .student-main>#studentStageWrap{
  flex:0 0 auto!important;
  margin-inline:auto!important;
}
body:not(.participant-embedded) #student .student-self-nav{
  display:grid;
  position:static!important;
  left:auto!important;right:auto!important;bottom:auto!important;
  width:min(100%,980px)!important;
  margin:8px auto 0!important;
  box-shadow:none!important;
  flex:0 0 auto!important;
}
body:not(.participant-embedded) #student .student-self-nav[hidden]{display:none!important}
body:not(.participant-embedded) #student #studentBottomNav.student-bottom-nav{
  display:flex!important;
  position:static!important;
  left:auto!important;right:auto!important;bottom:auto!important;
  width:min(100%,980px)!important;
  margin:8px auto 0!important;
  padding:7px 8px!important;
  gap:6px!important;
  background:#101318!important;
  border:1px solid #343b45!important;
  border-radius:12px!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  flex:0 0 auto!important;
}
body:not(.participant-embedded) #student #studentBottomNav[hidden]{display:none!important}
body:not(.participant-embedded) #student #studentBottomNav>button{
  flex:1 1 0!important;
  min-width:0!important;
  min-height:42px!important;
}
body:not(.participant-embedded) #student #studentCompactPanel.student-compact-panel:not([hidden]){
  display:block!important;
  position:static!important;
  left:auto!important;right:auto!important;bottom:auto!important;
  width:min(100%,980px)!important;
  max-height:none!important;
  overflow:visible!important;
  margin:8px auto 0!important;
  padding:10px!important;
  border:1px solid #3d4652!important;
  border-radius:12px!important;
  background:#11161c!important;
  box-shadow:none!important;
  flex:0 0 auto!important;
  order:0!important;
}
body:not(.participant-embedded) #student #studentCompactPanel[hidden]{display:none!important}
body:not(.participant-embedded) #student .student-assessment{
  position:static!important;
  left:auto!important;right:auto!important;bottom:auto!important;
  width:min(100%,980px)!important;
  max-height:none!important;
  overflow:visible!important;
  margin:8px auto 0!important;
  box-shadow:none!important;
  flex:0 0 auto!important;
}
body:not(.participant-embedded) #student .student-assessment[hidden]{display:none!important}
#studentMoreBtn,#studentMorePanel{display:none!important}
.student-more-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;width:100%}
.student-more-actions button{width:100%;min-height:44px}
@media(max-width:700px){
  body:not(.participant-embedded) #student .student-main{padding:8px 8px 14px!important}
  #student .student-head-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;width:100%!important;min-width:0!important}
  #student .student-return-session{width:100%!important;min-width:0!important}
  body:not(.participant-embedded) #student .student-self-nav,
  body:not(.participant-embedded) #student #studentBottomNav.student-bottom-nav,
  body:not(.participant-embedded) #student #studentCompactPanel.student-compact-panel:not([hidden]),
  body:not(.participant-embedded) #student .student-assessment{width:100%!important}
  body:not(.participant-embedded) #student .student-self-nav{margin-top:6px!important;padding:6px!important;gap:6px!important}
  body:not(.participant-embedded) #student .student-self-nav button{min-height:42px!important;padding:8px 10px!important}
  body:not(.participant-embedded) #student #studentBottomNav.student-bottom-nav{margin-top:6px!important;padding:6px!important}
}


/* A359-R44-R55 — EMBEDDED PARTICIPANT CONTROL BOUNDARY
   Current Activity keeps transport only. Rich participant media/markup chrome is
   dedicated-Show-only. The authored canvas/fitter is unchanged. */
body.participant-embedded #studentBottomNav,
body.participant-embedded #studentCompactPanel,
body.participant-embedded #studentControlDock,
body.participant-embedded #studentMediaControls,
body.participant-embedded #studentMarkControls,
body.participant-embedded #studentNavMedia,
body.participant-embedded #studentNavView,
body.participant-embedded #studentNavMarks,
body.participant-embedded #studentNavMore{display:none!important}
body.participant-embedded #student .student-main>#studentSelfNav{
  display:grid;
  position:static!important;
  width:min(100%,980px)!important;
  margin:8px auto 0!important;
  padding:7px 8px!important;
  box-shadow:none!important;
}
body.participant-embedded #student .student-main>#studentSelfNav[hidden]{display:none!important}
#studentSelfNav.follow-presenter button:disabled{opacity:.5;cursor:default}
.student-self-nav-status{grid-column:1 / -1;text-align:center;font-size:11px;line-height:1.25;font-weight:850;color:#aab4c0;padding:0 4px 2px}
.student-self-nav-status.enabled{color:#ffd21f}

/* A359-R44-R58 — SHOW CONTROL SURFACE CONSOLIDATION
   Chrome-only pass. R50 authored-canvas geometry/fitter remains authoritative.
   - Presenter mobile: no oversized participant-navigation card; the existing More menu owns that action.
   - Presenter compact controls live in normal flow beneath the canvas rather than as a fixed overlay.
   - Poll/results use the same compact inline panel as other Presenter utilities.
   - Desktop never promotes the mobile two-row toolbar into a viewport-wide footer.
   - Presenter More is header chrome on desktop, avoiding the Stage/Builder launcher corner. */

/* Canonical desktop transport stays bounded to the Show workspace. */
#presenter .present-controls{
  position:static!important;
  width:min(100%,980px)!important;
  margin:8px auto 0!important;
  padding:0!important;
  border-top:0!important;
  background:transparent!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
#presenter .present-controls button{flex:0 1 auto!important;min-width:96px!important}
#presenter .present-controls #slideCounter{grid-column:auto!important;text-align:center!important;min-width:54px!important}

/* On wide desktop the participant-control card belongs with the centered Show, not a side gutter. */
@media(min-width:1280px) and (min-height:760px){
  #presenter .participant-navigation-control{
    grid-column:2!important;
    grid-row:3!important;
    width:min(100%,980px)!important;
    margin:0 auto!important;
  }
}

/* Desktop More belongs in the header. It must never compete with the lower Stage/Builder launcher. */
@media(min-width:701px){
  #presenter .presenter-appbar > #mobilePresenterMenu{
    position:static!important;
    display:inline-flex!important;
    right:auto!important;bottom:auto!important;top:auto!important;left:auto!important;
    width:40px!important;height:40px!important;min-width:40px!important;
    margin:0!important;box-shadow:none!important;flex:0 0 40px!important;
  }
  #presenter #mobilePresenterMenuPanel:not([hidden]){
    position:fixed!important;
    right:12px!important;top:66px!important;bottom:auto!important;left:auto!important;
    width:min(320px,calc(100vw - 24px))!important;
    max-height:calc(100dvh - 78px)!important;
    overflow:auto!important;
  }
  /* Never use the phone toolbar as a full-width desktop footer. */
  #presenter #mobilePresenterNav.compact-presenter-nav,
  #presenter #compactPresenterPanel{display:none!important}
}

@media(max-width:700px){
  /* The action remains available in More; the full card was consuming most of the phone viewport. */
  #presenter #participantNavigationControl{display:none!important}

  /* One in-flow phone control surface: canvas -> transport/tools -> selected utility. */
  #presenter #mobilePresenterNav.compact-presenter-nav{
    display:grid!important;
    position:static!important;
    left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;
    width:100%!important;max-width:980px!important;
    margin:8px auto 0!important;
    padding:6px!important;
    gap:6px!important;
    background:#101318!important;
    border:1px solid #343b45!important;
    border-radius:12px!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
  #presenter #mobilePresenterNav .compact-nav-primary{
    grid-template-columns:1fr .62fr 1.15fr .78fr!important;
  }
  #presenter #mobilePresenterNav .compact-nav-tools{
    grid-template-columns:repeat(auto-fit,minmax(64px,1fr))!important;
  }
  #presenter #compactMoreBtn{order:initial!important}
  #presenter #mobilePresenterNav button{
    min-width:0!important;min-height:42px!important;padding:8px 5px!important;font-size:11px!important
  }

  #presenter #compactPresenterPanel:not([hidden]){
    display:block!important;
    position:static!important;
    left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;
    transform:none!important;
    width:100%!important;max-width:980px!important;
    max-height:none!important;overflow:visible!important;
    margin:6px auto 0!important;
    padding:8px!important;
    border-radius:12px!important;
    box-shadow:none!important;
  }
  #presenter #compactPresenterPanel[hidden]{display:none!important}
  #presenter .presenter-layout>main{padding-bottom:12px!important}

  /* The main dashboard remains a menu, but no longer carries a duplicate controls-popout path. */
  #presenter #mobilePresenterMenuPanel:not([hidden]){
    left:8px!important;right:8px!important;bottom:8px!important;top:auto!important;
    width:auto!important;max-height:58dvh!important
  }
}

/* R58 mobile source visibility inside the shared inline utility panel. */
@media(max-width:700px){
  #presenter .present-controls{display:none!important}
  #presenter #compactPresenterPanel #imageControls:not([hidden]){display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}
  #presenter #compactPresenterPanel #imageControls>strong,
  #presenter #compactPresenterPanel #imageControls>.zoom-slider,
  #presenter #compactPresenterPanel #imageControls>.gesture-hint{grid-column:1/-1!important}
  #presenter #compactPresenterPanel #annotationControls:not([hidden]){display:block!important}
  #presenter #compactPresenterPanel #participantExplorePermission:not([hidden]){display:flex!important;flex-direction:column!important;align-items:stretch!important}
  #presenter #compactPresenterPanel #presenterInteractionControls:not([hidden]){display:block!important}
}


/* A359-R44-R59 — MOBILE PRESENTER TOOLBAR CONTRACT REPAIR
   Chrome-only. R50 authored-canvas geometry remains untouched.
   A retired saved Expanded preference could leave the R58 phone toolbar visible
   without the compact track contract, collapsing both rows into narrow columns.
   Phone Presenter now has one explicit shelf: transport row + utility row. */
@media(max-width:700px){
  #presenter #mobilePresenterNav.compact-presenter-nav{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    align-items:stretch!important;
    justify-items:stretch!important;
    width:100%!important;
    min-width:0!important;
  }
  #presenter #mobilePresenterNav .compact-nav-row{
    display:grid!important;
    grid-column:1 / -1!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    align-items:stretch!important;
    justify-items:stretch!important;
  }
  #presenter #mobilePresenterNav .compact-nav-primary{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr) minmax(0,1.2fr) minmax(0,.9fr)!important;
  }
  #presenter #mobilePresenterNav .compact-nav-tools{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  #presenter #mobilePresenterNav .compact-nav-tools:has(#compactInteractionBtn:not([hidden])){
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
  #presenter #mobilePresenterNav button{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #presenter #compactPermissionsBtn{
    font-size:10px!important;
    letter-spacing:-.02em!important;
  }
}


/* A359-R44-R62 — PARTICIPANT QUICK MARK TOOL PALETTE CORRECTION
   R61 was rejected because it repurposed the existing View/Marks panels. R62 starts
   from R60 and leaves those controls exactly where they were. This is an additional,
   independent quick-tool palette for phone-sized dedicated Participant Show only. */
.student-quick-tools-toggle,.student-quick-tools-palette{display:none}
@media(max-width:700px){
  body:not(.participant-embedded) #studentQuickToolsToggle.student-quick-tools-toggle:not([hidden]){
    display:flex!important;
    position:fixed!important;
    right:6px!important;
    top:48%!important;
    transform:translateY(-50%)!important;
    z-index:118!important;
    width:42px!important;
    height:48px!important;
    min-width:42px!important;
    min-height:48px!important;
    padding:0!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:12px 0 0 12px!important;
    font-size:22px!important;
    line-height:1!important;
    background:#171d24f2!important;
    box-shadow:0 10px 28px #0009!important;
    backdrop-filter:blur(10px)!important;
  }
  body:not(.participant-embedded) #studentQuickToolsPalette.student-quick-tools-palette:not([hidden]){
    display:grid!important;
    position:fixed!important;
    right:6px!important;
    top:64px!important;
    bottom:88px!important;
    z-index:119!important;
    width:58px!important;
    grid-template-columns:1fr!important;
    grid-auto-rows:40px!important;
    gap:5px!important;
    padding:6px!important;
    overflow:auto!important;
    border:1px solid #3d4652!important;
    border-radius:14px!important;
    background:#11161cf5!important;
    box-shadow:0 18px 48px #000b!important;
    backdrop-filter:blur(12px)!important;
  }
  body:not(.participant-embedded) #studentQuickToolsPalette>button{
    display:flex!important;
    width:44px!important;
    height:40px!important;
    min-width:44px!important;
    min-height:40px!important;
    margin:0!important;
    padding:0!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:9px!important;
    font-size:18px!important;
    line-height:1!important;
  }
  body:not(.participant-embedded) #studentQuickToolsPalette>button.active{
    border-color:#ffd100!important;
    color:#ffd100!important;
    box-shadow:0 0 0 1px #ffd100 inset!important;
  }
  body:not(.participant-embedded) #studentQuickToolsPalette>.quick-tool-close{
    color:#fff!important;
    font-size:20px!important;
    margin-bottom:2px!important;
  }
}


/* A359-R44-R63 — COMPLETE MOBILE QUICK ANNOTATION BARS
   Additive only: canonical Participant and Presenter control panels remain unchanged. */
.presenter-quick-tools-toggle,.presenter-quick-tools-palette{display:none}
@media(max-width:700px){
  body:not(.participant-embedded) #studentQuickToolsPalette.student-quick-tools-palette:not([hidden]),
  #presenter #presenterQuickToolsPalette.presenter-quick-tools-palette:not([hidden]){
    display:grid!important;position:fixed!important;right:6px!important;top:48px!important;bottom:48px!important;z-index:119!important;width:54px!important;
    grid-template-columns:1fr!important;grid-auto-rows:32px!important;gap:2px!important;padding:4px!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;
    border:1px solid #3d4652!important;border-radius:13px!important;background:#11161cf5!important;box-shadow:0 18px 48px #000b!important;backdrop-filter:blur(12px)!important;
  }
  body:not(.participant-embedded) #studentQuickToolsPalette>button,
  #presenter #presenterQuickToolsPalette>button{
    display:flex!important;width:44px!important;height:32px!important;min-width:44px!important;min-height:32px!important;margin:0!important;padding:0!important;align-items:center!important;justify-content:center!important;border-radius:8px!important;font-size:15px!important;line-height:1!important;
  }
  body:not(.participant-embedded) #studentQuickToolsPalette>button.active,
  #presenter #presenterQuickToolsPalette>button.active{border-color:#ffd100!important;color:#ffd100!important;box-shadow:0 0 0 1px #ffd100 inset!important}
  body:not(.participant-embedded) #studentQuickToolsPalette>.quick-tool-close,
  #presenter #presenterQuickToolsPalette>.quick-tool-close{font-size:18px!important;color:#fff!important}
  .quick-tool-danger{color:#ffb4b4!important}
  .quick-tool-select{width:44px!important;height:32px!important;min-height:32px!important;margin:0!important;padding:0 4px!important;border-radius:8px!important;font-size:12px!important;font-weight:800!important;text-align:center!important;background:#242b34!important;color:#fff!important;border:1px solid #3d4652!important}
  .quick-tool-color{width:44px!important;height:32px!important;min-height:32px!important;margin:0!important;padding:3px!important;border-radius:8px!important;background:#242b34!important;border:1px solid #3d4652!important}
  #presenter #presenterQuickToolsToggle.presenter-quick-tools-toggle:not([hidden]){
    display:flex!important;position:fixed!important;right:6px!important;top:48%!important;transform:translateY(-50%)!important;z-index:118!important;width:42px!important;height:48px!important;min-width:42px!important;min-height:48px!important;padding:0!important;align-items:center!important;justify-content:center!important;border-radius:12px 0 0 12px!important;font-size:22px!important;line-height:1!important;background:#171d24f2!important;box-shadow:0 10px 28px #0009!important;backdrop-filter:blur(10px)!important;
  }
}

/* A359-R44-R66 — PARTICIPANT MEDIA CONTROLS / RESPONSIVE INTERACTION
   Chrome/input ownership only. R50 authored-canvas geometry, R63 annotation tools,
   Give/Take Participant Control, and the R64 startup path remain untouched. */

/* Utility navigation is a compact tool cluster, not four full-width navigation tabs. */
body:not(.participant-embedded) #student #studentBottomNav.student-bottom-nav{
  width:max-content!important;
  max-width:100%!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  padding:5px 6px!important;
  gap:5px!important;
}
body:not(.participant-embedded) #student #studentBottomNav>button{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:68px!important;
  min-height:38px!important;
  padding:7px 12px!important;
}
body:not(.participant-embedded) #student #studentBottomNav>#studentNavMore{
  min-width:44px!important;
  padding-inline:10px!important;
}

/* More contains actions, not giant full-width bars. */
body:not(.participant-embedded) #student #studentCompactPanel[data-kind="more"]{
  width:max-content!important;
  max-width:100%!important;
  min-width:min(300px,100%)!important;
}
body:not(.participant-embedded) #student .student-more-actions{
  display:flex!important;
  width:auto!important;
  max-width:100%!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  gap:6px!important;
}
body:not(.participant-embedded) #student .student-more-actions button{
  width:auto!important;
  min-width:0!important;
  min-height:38px!important;
  padding:7px 12px!important;
}

/* The R63 participant quick media/mark rail is useful at every dedicated Show width. */
body:not(.participant-embedded) #studentQuickToolsToggle.student-quick-tools-toggle:not([hidden]){
  display:flex!important;
  position:fixed!important;
  right:6px!important;
  top:48%!important;
  transform:translateY(-50%)!important;
  z-index:118!important;
  width:42px!important;
  height:48px!important;
  min-width:42px!important;
  min-height:48px!important;
  padding:0!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:12px 0 0 12px!important;
  font-size:22px!important;
  line-height:1!important;
  background:#171d24f2!important;
  box-shadow:0 10px 28px #0009!important;
  backdrop-filter:blur(10px)!important;
}
body:not(.participant-embedded) #studentQuickToolsPalette.student-quick-tools-palette:not([hidden]){
  display:grid!important;
  position:fixed!important;
  right:6px!important;
  top:48px!important;
  bottom:48px!important;
  z-index:119!important;
  width:54px!important;
  grid-template-columns:1fr!important;
  grid-auto-rows:32px!important;
  gap:2px!important;
  padding:4px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  border:1px solid #3d4652!important;
  border-radius:13px!important;
  background:#11161cf5!important;
  box-shadow:0 18px 48px #000b!important;
  backdrop-filter:blur(12px)!important;
}
body:not(.participant-embedded) #studentQuickToolsPalette>button{
  display:flex!important;
  width:44px!important;
  height:32px!important;
  min-width:44px!important;
  min-height:32px!important;
  margin:0!important;
  padding:0!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:8px!important;
  font-size:15px!important;
  line-height:1!important;
}

/* Media mode explicitly gives the player the pointer. Pan/mark layers only own input
   when their tool is selected; responsive transforms must not leave a transparent
   interaction layer in front of a YouTube/video player. */
#studentStage .media-shell.student-media-input>.student-pan-layer,
#studentStage .media-shell.student-media-input>svg.student-personal-marks,
#studentStage .media-shell.student-media-input>svg.annotation-layer{
  pointer-events:none!important;
}
#studentStage .media-shell.student-media-input>.yt-target,
#studentStage .media-shell.student-media-input>.yt-target>iframe,
#studentStage .media-shell.student-media-input>iframe,
#studentStage .media-shell.student-media-input>video{
  pointer-events:auto!important;
  touch-action:manipulation;
}

@media(max-width:700px){
  body:not(.participant-embedded) #student #studentBottomNav>button{
    min-width:62px!important;
    min-height:42px!important;
    padding:8px 9px!important;
  }
  body:not(.participant-embedded) #student #studentBottomNav>#studentNavMore{min-width:42px!important}
  body:not(.participant-embedded) #student #studentCompactPanel[data-kind="more"]{min-width:0!important}
  body:not(.participant-embedded) #student .student-more-actions button{min-height:42px!important}
}
/* R66 desktop/tablet finish for the existing R63 participant rail controls. */
body:not(.participant-embedded) #studentQuickToolsPalette>button.active{
  border-color:#ffd100!important;
  color:#ffd100!important;
  box-shadow:0 0 0 1px #ffd100 inset!important;
}
body:not(.participant-embedded) #studentQuickToolsPalette>.quick-tool-close{
  font-size:18px!important;
  color:#fff!important;
}
body:not(.participant-embedded) #studentQuickToolsPalette>.quick-tool-select{
  width:44px!important;
  height:32px!important;
  min-height:32px!important;
  margin:0!important;
  padding:0 4px!important;
  border-radius:8px!important;
  font-size:12px!important;
  font-weight:800!important;
  text-align:center!important;
  background:#242b34!important;
  color:#fff!important;
  border:1px solid #3d4652!important;
}
body:not(.participant-embedded) #studentQuickToolsPalette>.quick-tool-color{
  width:44px!important;
  height:32px!important;
  min-height:32px!important;
  margin:0!important;
  padding:3px!important;
  border-radius:8px!important;
  background:#242b34!important;
  border:1px solid #3d4652!important;
}


/* A359-R44-R67 — PARTICIPANT DESKTOP RAIL + TRANSPORT PROPORTION CORRECTION
   Correction to R66 only. R50 authored-canvas geometry and R63 tool behavior are unchanged. */

/* More was only duplicating the already-present Session return in the participant header. */
body:not(.participant-embedded) #student #studentNavMore{display:none!important}
body:not(.participant-embedded) #student #studentCompactPanel[data-kind="more"]{display:none!important}

/* Utility controls stay readable. Compact means bounded footprint, not tiny text. */
body:not(.participant-embedded) #student #studentBottomNav.student-bottom-nav{
  width:max-content!important;max-width:100%!important;padding:6px 7px!important;gap:6px!important
}
body:not(.participant-embedded) #student #studentBottomNav>button{
  min-width:76px!important;min-height:42px!important;padding:9px 14px!important;font-size:14px!important;line-height:1.1!important
}

/* Previous / position / Next is a compact transport directly beneath the slide. */
@media(min-width:701px){
  body:not(.participant-embedded) #student .student-self-nav{
    width:min(100%,520px)!important;
    grid-template-columns:minmax(128px,1fr) auto minmax(128px,1fr)!important;
    padding:6px!important;gap:6px!important
  }
  body:not(.participant-embedded) #student .student-self-nav button{
    min-width:0!important;min-height:42px!important;padding:9px 16px!important;font-size:14px!important;line-height:1.1!important
  }
  body:not(.participant-embedded) #student .student-self-nav span{min-width:64px!important;font-size:14px!important}
  body:not(.participant-embedded) #student .student-self-nav-status{font-size:11px!important;padding-top:1px!important}
}
@media(max-width:700px){
  body:not(.participant-embedded) #student .student-self-nav{
    width:100%!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important
  }
  body:not(.participant-embedded) #student #studentBottomNav>button{
    min-width:70px!important;min-height:44px!important;padding:9px 12px!important;font-size:14px!important
  }
}

/* On desktop/tablet the existing R63 quick rail hugs the actual slide/media rectangle.
   JS supplies the stage edge coordinates; phone keeps the accepted edge treatment. */
@media(min-width:701px){
  body:not(.participant-embedded) #studentQuickToolsToggle.student-quick-tools-toggle:not([hidden]){
    position:fixed!important;
    left:var(--student-tools-left,auto)!important;right:auto!important;
    top:var(--student-tools-toggle-top,48%)!important;
    transform:translateY(-50%)!important;
    width:46px!important;height:48px!important;min-width:46px!important;min-height:48px!important;
    border-radius:12px!important;
    font-size:21px!important;
  }
  body:not(.participant-embedded) #studentQuickToolsPalette.student-quick-tools-palette:not([hidden]){
    position:fixed!important;
    left:var(--student-tools-left,auto)!important;right:auto!important;
    top:var(--student-tools-palette-top,70px)!important;bottom:auto!important;
    width:54px!important;max-height:var(--student-tools-palette-max,calc(100dvh - 86px))!important;
    overflow-y:auto!important;overflow-x:hidden!important;
  }
}


/* A359-R44-R98A — SHERPA PRESENTER EMBED CONTRACT
   Sherpa owns the outer application window. G-Show contributes only its canonical
   presenter workspace when hosted there: no duplicate page chrome, no nested
   full-page viewport, and no modal/focus-dismiss behavior. */
html.sherpa-presenter-embedded,
body.sherpa-presenter-embedded{width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;background:#0b0f14!important}
body.sherpa-presenter-embedded #presenter{height:100dvh!important;min-height:0!important;overflow:hidden!important;background:#0b0f14!important}
body.sherpa-presenter-embedded #presenter>.presenter-appbar,
body.sherpa-presenter-embedded #presenter>#mobilePresenterMenuPanel,
body.sherpa-presenter-embedded #presenter>#mobilePresenterNav{display:none!important}
body.sherpa-presenter-embedded #presenter .presenter-layout{
  display:block!important;width:100%!important;height:100%!important;min-height:0!important;
  overflow:auto!important;padding:0!important;background:#0b0f14!important
}
body.sherpa-presenter-embedded #presenter .presenter-layout>main{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  width:100%!important;min-width:0!important;min-height:100%!important;
  padding:12px 14px 18px!important;overflow:visible!important;box-sizing:border-box!important
}
body.sherpa-presenter-embedded #presenter .presenter-layout>aside{display:none!important}
body.sherpa-presenter-embedded #presenter .stage-wrap{
  flex:0 0 auto!important;width:min(100%,980px)!important;max-width:980px!important;
  max-height:min(62dvh,620px)!important;margin:0 auto 8px!important;box-shadow:none!important
}
body.sherpa-presenter-embedded #presenter .present-controls{
  flex:0 0 auto!important;width:min(100%,980px)!important;margin:6px auto 0!important
}
body.sherpa-presenter-embedded #presenter .participant-navigation-control{
  width:min(100%,980px)!important;margin:8px auto!important
}
body.sherpa-presenter-embedded #presenter .presenter-side{display:none!important}
body.sherpa-presenter-embedded #presenter .presenter-slides-drawer:not([hidden]),
body.sherpa-presenter-embedded #presenter .session-drawer:not([hidden]){position:fixed!important;z-index:90!important}
@media(max-width:700px){
  body.sherpa-presenter-embedded #presenter .presenter-layout>main{padding:8px 8px 14px!important}
  body.sherpa-presenter-embedded #presenter .stage-wrap{width:100%!important;max-height:none!important}
}

/* R99 — Sherpa-owned Show Notes floater: canonical live presenter notes, no duplicate runtime. */
body.sherpa-presenter-notes{overflow:hidden!important;background:#0b0f14!important}
body.sherpa-presenter-notes #presenter{display:none!important}
body.sherpa-presenter-notes #presenterNotesHome{display:flex!important;flex-direction:column!important;height:100dvh!important;min-height:0!important;padding:14px!important;background:#0b0f14!important}
body.sherpa-presenter-notes #presenterNotesHome .presenter-notes-head{display:flex!important}
body.sherpa-presenter-notes #presenterNotesHome #popoutPresenterNotes{display:none!important}
body.sherpa-presenter-notes #presenterNotes{display:block!important;flex:1!important;min-height:0!important;overflow:auto!important;margin:8px 0 0!important;font-size:16px!important;line-height:1.5!important}

/* A359-R44-R100 — participant feedback must remain readable on light slide canvases. */
[data-choice-submitted].feedback-correct{display:block!important;margin-top:10px;padding:9px 12px;border:2px solid #16763a!important;border-radius:9px;background:#e8f7ee!important;color:#0b5a2b!important;font-weight:950!important}
[data-choice-submitted].feedback-wrong{display:block!important;margin-top:10px;padding:9px 12px;border:2px solid #b4232c!important;border-radius:9px;background:#fff0f1!important;color:#8f1620!important;font-weight:950!important}
[data-choice-submitted].feedback-neutral{display:block!important;margin-top:10px;padding:9px 12px;border:1px solid #56616c!important;border-radius:9px;background:#eef2f5!important;color:#17212b!important;font-weight:900!important}

/* A359-R44-R100B — SHERPA FULL PRESENTER SCROLL CONTRACT
   Sherpa owns only the outer window. Embedded G-Show retains the complete
   canonical presenter workspace and scrolls vertically inside that window. */
html.sherpa-presenter-embedded,
body.sherpa-presenter-embedded{
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}
body.sherpa-presenter-embedded #presenter{
  height:100dvh!important;
  min-height:0!important;
  overflow:hidden!important;
}
body.sherpa-presenter-embedded #presenter .presenter-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 320px!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-gutter:stable!important;
  -webkit-overflow-scrolling:touch;
}
body.sherpa-presenter-embedded #presenter .presenter-layout>main{
  min-height:max-content!important;
  overflow:visible!important;
}
body.sherpa-presenter-embedded #presenter .presenter-layout>aside.presenter-side,
body.sherpa-presenter-embedded #presenter .presenter-side{
  display:block!important;
}
@media(max-width:980px){
  body.sherpa-presenter-embedded #presenter .presenter-layout{
    grid-template-columns:1fr!important;
  }
  body.sherpa-presenter-embedded #presenter .presenter-layout>aside.presenter-side{
    border-left:0!important;
    border-top:1px solid var(--line)!important;
  }
}


/* A359-R44-R100D — SHERPA FULL PRESENTER CHROME RESTORE
   The Presenter app bar and compact control/menu bar are functional G-Show
   presenter surfaces, not duplicate browser chrome. Sherpa owns only the outer
   floater. G-Show keeps its canonical controls and chooses expanded/compact
   geometry from the iframe viewport. */
body.sherpa-presenter-embedded #presenter>.presenter-appbar{
  display:flex!important;
  position:sticky!important;
  top:0!important;
  z-index:120!important;
  height:auto!important;
  min-height:54px!important;
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #mobilePresenterNav.compact-presenter-nav{
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  position:fixed!important;
  left:0!important;right:0!important;bottom:0!important;
  z-index:130!important;
  grid-template-columns:1fr!important;
  gap:5px!important;
  height:auto!important;
  padding:6px 7px!important;
  background:#101318f2!important;
  border-top:1px solid #333b45!important;
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] .presenter-layout>main{
  padding-bottom:118px!important;
}
body.sherpa-presenter-embedded #presenter>#mobilePresenterMenuPanel:not([hidden]){
  display:grid!important;
  position:fixed!important;
  right:12px!important;
  bottom:118px!important;
  top:auto!important;
  z-index:140!important;
  width:min(320px,calc(100vw - 24px))!important;
  max-height:min(70dvh,680px)!important;
  overflow:auto!important;
}
body.sherpa-presenter-embedded #presenter>#mobilePresenterMenuPanel[hidden]{display:none!important}
body.sherpa-presenter-embedded #presenter[data-controls-mode="expanded"] #mobilePresenterNav{display:none!important}

/* A359-R44-R100E — CANONICAL PRESENTER GEOMETRY IN SHERPA
   Sherpa supplies only the resizable outer window. Inside the iframe G-Show keeps
   the same Presenter document geometry it uses in a normal browser tab.
   This supersedes the R98A/R100B embed-only stretching rules. */
html.sherpa-presenter-embedded,
body.sherpa-presenter-embedded{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
  background:var(--bg)!important;
}
body.sherpa-presenter-embedded #presenter{
  display:block!important;
  width:100%!important;
  height:100dvh!important;
  min-height:0!important;
  overflow:hidden!important;
  background:var(--bg)!important;
}
/* The canonical Show app bar is part of Presenter, not Sherpa chrome. */
body.sherpa-presenter-embedded #presenter>.presenter-appbar{
  display:flex!important;
  position:sticky!important;
  top:0!important;
  min-height:62px!important;
  height:62px!important;
  z-index:120!important;
}
/* Exactly one scroll owner below the app bar. This keeps Stage/Builder and every
   lower Presenter surface reachable when the Sherpa window is short. */
body.sherpa-presenter-embedded #presenter .presenter-layout{
  display:block!important;
  width:100%!important;
  height:calc(100dvh - 62px)!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-gutter:stable!important;
  -webkit-overflow-scrolling:touch;
  padding:0!important;
}
body.sherpa-presenter-embedded #presenter .presenter-layout>main{
  display:block!important;
  width:100%!important;
  max-width:1380px!important;
  min-width:0!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:18px!important;
  overflow:visible!important;
}
body.sherpa-presenter-embedded #presenter .presenter-layout>aside.presenter-side,
body.sherpa-presenter-embedded #presenter .presenter-side{display:none!important}
/* Preserve authored slide geometry. Width is limited by BOTH the floater width and
   the available floater height; aspect-ratio remains document data from R50. */
body.sherpa-presenter-embedded #presenterStageWrap{
  width:min(100%,980px,max(220px,calc((100dvh - 300px) * var(--show-ratio-number,1.7777778))))!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:var(--show-aspect,960 / 540)!important;
  max-height:none!important;
  margin:0 auto!important;
  overflow:hidden!important;
}
/* Expanded transport and participant control stay in normal document flow. */
body.sherpa-presenter-embedded #presenter .present-controls{
  position:static!important;
  width:min(100%,980px)!important;
  margin:8px auto 0!important;
}
body.sherpa-presenter-embedded #presenter .participant-navigation-control{
  width:min(100%,980px)!important;
  margin:8px auto!important;
}
/* Compact is still G-Show's canonical compact surface. Reserve its footprint so
   it never covers the final Presenter menus while the document scrolls. */
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] .presenter-layout>main{
  padding-bottom:132px!important;
}


/* A359-R44-R100G — SHERPA PRESENTER TWO-LAYOUT CONTRACT
   Sherpa gets only the two Presenter arrangements that tested well:
   expanded = the useful mid-size two-column View/Marks dock;
   compact = the proven mobile bottom deck. Historical intermediate/sidebar/
   giant-button arrangements remain available to standalone G-Show only. */
body.sherpa-presenter-embedded #presenter[data-controls-mode="expanded"] #presenterQuickToolsPalette,
body.sherpa-presenter-embedded #presenter[data-controls-mode="expanded"] #presenterQuickToolsToggle{display:none!important}
body.sherpa-presenter-embedded #presenter[data-controls-mode="expanded"] #presenterControlDock{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:10px!important;
  width:min(980px,100%)!important;
  margin:10px auto 18px!important;
  align-items:start!important;
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="expanded"] #presenterControlDock>#imageControls,
body.sherpa-presenter-embedded #presenter[data-controls-mode="expanded"] #presenterControlDock>#annotationControls,
body.sherpa-presenter-embedded #presenter[data-controls-mode="expanded"] #presenterControlDock>#participantExplorePermission,
body.sherpa-presenter-embedded #presenter[data-controls-mode="expanded"] #presenterControlDock>#presenterInteractionControls{
  width:100%!important;max-width:none!important;margin:0!important;min-width:0!important
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="expanded"] #imageControls:not([hidden]){
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="expanded"] #annotationControls:not([hidden]){display:block!important}
body.sherpa-presenter-embedded #presenter[data-controls-mode="expanded"] #annotationControls .annotation-tools{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="expanded"] #annotationControls .annotation-tools label{grid-column:1/-1!important}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #presenterControlDock{display:contents!important}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #presenterQuickToolsPalette,
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #presenterQuickToolsToggle{display:none!important}

/* A359-R44-R100H — SHERPA PRESENTER CANONICAL MOBILE + MID DESKTOP
   Corrects R100G's Mobile override: Sherpa Mobile is the known-good canonical
   compact Presenter plus its floating quick-tool rail, even when the outer
   Sherpa floater itself is wider than 700px. Desktop remains the useful mid-size
   two-column View/Marks dock. No dead-zone or giant-control layout is selected. */
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #presenterQuickToolsPalette.presenter-quick-tools-palette:not([hidden]){
  display:grid!important;position:fixed!important;right:6px!important;top:70px!important;bottom:126px!important;z-index:139!important;width:54px!important;
  grid-template-columns:1fr!important;grid-auto-rows:32px!important;gap:2px!important;padding:4px!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;
  border:1px solid #3d4652!important;border-radius:13px!important;background:#11161cf5!important;box-shadow:0 18px 48px #000b!important;backdrop-filter:blur(12px)!important;
  pointer-events:auto!important;
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #presenterQuickToolsPalette>button{
  display:flex!important;width:44px!important;height:32px!important;min-width:44px!important;min-height:32px!important;margin:0!important;padding:0!important;align-items:center!important;justify-content:center!important;border-radius:8px!important;font-size:15px!important;line-height:1!important;pointer-events:auto!important;
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #presenterQuickToolsPalette>button.active{border-color:#ffd100!important;color:#ffd100!important;box-shadow:0 0 0 1px #ffd100 inset!important}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #presenterQuickToolsPalette>.quick-tool-close{font-size:18px!important;color:#fff!important}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #presenterQuickToolsPalette .quick-tool-select{width:44px!important;height:32px!important;min-height:32px!important;margin:0!important;padding:0 4px!important;border-radius:8px!important;font-size:12px!important;font-weight:800!important;text-align:center!important;background:#242b34!important;color:#fff!important;border:1px solid #3d4652!important}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #presenterQuickToolsPalette .quick-tool-color{width:44px!important;height:32px!important;min-height:32px!important;margin:0!important;padding:3px!important;border-radius:8px!important;background:#242b34!important;border:1px solid #3d4652!important}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #presenterQuickToolsToggle.presenter-quick-tools-toggle:not([hidden]){
  display:flex!important;position:fixed!important;right:6px!important;top:48%!important;transform:translateY(-50%)!important;z-index:138!important;width:42px!important;height:48px!important;min-width:42px!important;min-height:48px!important;padding:0!important;align-items:center!important;justify-content:center!important;border-radius:12px 0 0 12px!important;font-size:22px!important;line-height:1!important;background:#171d24f2!important;box-shadow:0 10px 28px #0009!important;backdrop-filter:blur(10px)!important;pointer-events:auto!important;
}
/* Supersede R100G's compact quick-tool suppression. */
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #presenterQuickToolsPalette[hidden],
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #presenterQuickToolsToggle[hidden]{display:none!important}

/* A359-R44-R100I — SHERPA FORCED-MOBILE CONTROL PARITY
   A forced Sherpa Mobile layout must behave like the proven <=700px canonical
   Presenter even when the iframe itself is wider. R100H selected compact state
   but several canonical phone surfaces were still gated only by viewport media
   queries. Scope the equivalent layout to the actual compact state so visual
   mode and interaction mode cannot diverge. */
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] .present-controls{
  display:none!important;
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #mobilePresenterNav.compact-presenter-nav{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-auto-flow:row!important;
  align-items:stretch!important;
  justify-items:stretch!important;
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #mobilePresenterNav .compact-nav-row{
  display:grid!important;
  grid-column:1/-1!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  align-items:stretch!important;
  justify-items:stretch!important;
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #mobilePresenterNav .compact-nav-primary{
  grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr) minmax(0,1.2fr) minmax(0,.9fr)!important;
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #mobilePresenterNav .compact-nav-tools{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #mobilePresenterNav .compact-nav-tools:has(#compactInteractionBtn:not([hidden])){
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #mobilePresenterNav button{
  width:100%!important;max-width:none!important;min-width:0!important;
  min-height:42px!important;padding:8px 5px!important;font-size:11px!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #compactPermissionsBtn{
  font-size:10px!important;letter-spacing:-.02em!important;
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #compactPresenterPanel:not([hidden]){
  display:block!important;
  position:fixed!important;
  left:8px!important;right:8px!important;bottom:122px!important;top:auto!important;
  transform:none!important;
  width:auto!important;max-width:none!important;
  max-height:min(58dvh,620px)!important;overflow:auto!important;
  margin:0!important;padding:8px!important;
  z-index:141!important;border-radius:12px!important;
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #compactPresenterPanel[hidden]{display:none!important}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #compactPresenterPanel #imageControls:not([hidden]){
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #compactPresenterPanel #imageControls>strong,
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #compactPresenterPanel #imageControls>.zoom-slider,
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #compactPresenterPanel #imageControls>.gesture-hint{
  grid-column:1/-1!important;
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #compactPresenterPanel #annotationControls:not([hidden]){
  display:block!important;
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #compactPresenterPanel #participantExplorePermission:not([hidden]){
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
}
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #compactPresenterPanel #presenterInteractionControls:not([hidden]){
  display:block!important;
}
/* Participant slide control is a Host permission, not a desktop-only control.
   Keep it visible in forced Mobile and in physically narrow Sherpa Presenter. */
body.sherpa-presenter-embedded #presenter[data-controls-mode="compact"] #participantNavigationControl{
  display:flex!important;
  width:min(100%,980px)!important;
  margin:8px auto 126px!important;
}

/* A359-R44-R100N — canonical Show Presenter Notes surface inside Sherpa. */
body.sherpa-presenter-notes #presenter{display:none!important}
body.sherpa-presenter-notes #presenterNotesHome{position:relative!important;display:flex!important;flex-direction:column!important;height:100dvh!important;padding:18px!important;overflow:auto!important}
body.sherpa-presenter-notes .presenter-notes-slide-title{display:block!important;margin:8px 0 2px!important;font-size:clamp(22px,4vw,34px)!important;line-height:1.15!important}
body.sherpa-presenter-notes .presenter-notes-show-title{display:block!important;color:#99a4b1!important;font-size:14px!important;margin-bottom:14px!important}
body.sherpa-presenter-notes .presenter-notes-read-tools{display:flex!important;justify-content:flex-end!important;gap:8px!important;padding:10px!important;border:1px solid #37414d!important;border-radius:12px!important;background:#121820!important;margin-bottom:14px!important}
body.sherpa-presenter-notes .presenter-notes-read-tools button{min-width:52px!important}
body.sherpa-presenter-notes #presenterNotes{flex:1 0 auto!important;min-height:260px!important;padding:20px!important;background:#151b22!important;border:1px solid #37414d!important;border-radius:14px!important;overflow:auto!important}

/* A359-R44-R100V — Presenter Notes single editing authority */
.notes-editor textarea[readonly]{cursor:default;background:#11171d;color:#c8d0d9;border-style:dashed}

/* A359-R44-R100X — canonical rich Presenter Notes read surfaces */
.notes-rich-preview{display:block;width:100%;min-height:72px;margin-top:6px;background:#11171d;color:#c8d0d9;border:1px dashed var(--line);border-radius:8px;padding:9px;overflow-wrap:anywhere}
.notes-rich-preview p,.notes-rich-preview div{margin:.35em 0}
.notes-rich-preview ul,.notes-rich-preview ol,#presenterNotes ul,#presenterNotes ol{padding-left:1.6em;margin:.45em 0}
.notes-rich-preview li,#presenterNotes li{margin:.18em 0}
.notes-rich-preview a,#presenterNotes a{color:#7fc4ff}
.notes-rich-preview blockquote,#presenterNotes blockquote{border-left:3px solid #687482;margin-left:0;padding-left:12px;color:#cfd6de}

/* R123 — native slide Presenter Notes authoring */
.notes-native-toolbar{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0;padding:7px;background:#11171e;border:1px solid #303a46;border-radius:9px}
.notes-native-toolbar button{min-width:34px;padding:6px 8px}
.notes-native-editor{min-height:150px;max-height:38vh;overflow:auto;cursor:text;outline:none;white-space:normal}
.notes-native-editor:focus{border-color:#ffd100!important;box-shadow:0 0 0 2px #ffd10022}
.notes-native-editor:empty:before{content:'Add presenter notes for this slide…';color:#7f8996;pointer-events:none}
.notes-native-editor a{color:#7fc4ff}.notes-native-editor ul,.notes-native-editor ol{padding-left:1.6em}