/* One phone shell. The Stage stays 16:9 and retains its saved composition. Primary controls
   stay outside the field; temporary drawing actions can be moved to either screen edge. */
#mobileRail,#mobileCaption,#mobileSlideList,#mobileMenu,#mobileScrim,#mobilePan,#mobileActions,#mobileActionToggle,#mobileSnapNotice,#mobileAnimBar{display:none}
#mobileCamera{display:contents}
/* Correctness boundary also applies to portrait tablets, regardless of drawer specificity. */
body.presentation-host.presenteren .body #workspace{display:none}
@media (orientation:portrait) and (min-width:768px) and (max-width:820px){
  body.presentation-host .body.right-collapsed #workspace{transform:translateX(calc(100% - 58px))}
  body.presentation-host #workspace .tabrail{flex-basis:58px;min-width:58px}
  body.presentation-host .body .col.stage{padding-right:66px}
  body.presentation-host.presenteren .body .col.stage{grid-column:1;padding:0}
  body.presentation-host.presenteren .body{grid-template-columns:minmax(0,1fr)}
}
@media (orientation:landscape) and (max-width:950px) and (max-height:600px), (orientation:portrait) and (max-width:767px){
  body.presentation-host #mobileSnapNotice:not([hidden]){display:block;position:fixed;z-index:45;transform:translateX(-50%);box-sizing:border-box;padding:7px 11px;border:2px solid #83edff;border-radius:12px;background:#10212ff2;color:#fff;font:600 12px/16px var(--f-ui);text-align:center;pointer-events:none}
  body.presentation-host{--mobile-rail:calc(56px + env(safe-area-inset-left,0px));--mobile-head:calc(44px + env(safe-area-inset-top,0px))}
  body.presentation-host .app{grid-template-rows:minmax(0,1fr);padding:0}
  body.presentation-host .top,body.presentation-host #topExpand,body.presentation-host #focusStrip,
  body.presentation-host #focusSuggest,body.presentation-host #focusDiaBar,body.presentation-host #hint,
  body.presentation-host #presentBar{display:none!important}
  body.presentation-host .body{grid-template-columns:minmax(0,1fr);position:relative;overflow:hidden}
  body.presentation-host .body .col.stage{grid-column:1;grid-row:1;padding:var(--mobile-head) env(safe-area-inset-right,0px) 0 var(--mobile-rail);overflow:hidden}
  body.presentation-host .field-wrap{padding:0;overflow:hidden}
  body.presentation-host .stage-fit{overflow:hidden;position:relative}
  body.presentation-host .stage-frame{overflow:visible;outline:none;width:var(--mobile-stage-width,min(100cqw,100cqh * 16 / 9));flex-shrink:0}
  /* Whole-dia inspection in Bewerken: distinguish the actual 16:9 composition from
     the tool, including on portrait phones. Inset the frame so all four edges remain
     visible; outline/shadow never resize its content. Field-fit stays edge-to-edge.
     Presenteren retains its single viewport background (ADR-0028 Amendment 2). */
  body.presentation-host.mobile-whole:not(.presenteren) .stage-fit{background:var(--bg)}
  body.presentation-host.mobile-whole:not(.presenteren) .stage-frame{
    width:var(--mobile-stage-width,min(calc(100cqw - 16px),calc((100cqh - 20px) * 16 / 9)));
    outline:1px solid rgba(228,234,242,.4);box-shadow:0 4px 18px #0006}
  body.presentation-host #mobileCamera{display:grid;place-items:center;position:absolute;inset:0;transform-origin:0 0;pointer-events:none}
  body.presentation-host #mobileCamera .stage-field{pointer-events:auto}
  /* v0.65.180: the Analyse video on a dia owns its own controls (▶, bar, rail); keep them tappable. */
  body.presentation-host #mobileCamera .stage-video{pointer-events:auto}
  /* The fixed caption owns the title in field-fit. Keep its layout slot for the
     unchanged camera geometry; whole-dia inspection retains the saved title. */
  body.presentation-host:not(.mobile-whole) #stageTitle{visibility:hidden;pointer-events:none}
  /* S2 Tekstkolom: de veldcamera toont alleen het veld (ADR-0028 Am.4); de tekst staat in "Hele dia". */
  body.presentation-host:not(.mobile-whole) #stageTextColumn,body.presentation-host:not(.mobile-whole) #stageDivider{visibility:hidden;pointer-events:none}
  body.presentation-host #mobileCamera.portrait-camera #pitch text{transform-box:fill-box;transform-origin:center;transform:rotate(90deg)}
  /* S1 Veldgedeelte: een liggende uitsnede (0/180) in de staande camera: beide rotaties samen. */
  body.presentation-host #mobileCamera.portrait-camera #pitch[data-view-rot] text{transform:rotate(calc(90deg + var(--view-label-rot, 0deg)))}
  /* M3: de spelerskaart blijft in de staande camera rechtop boven de speler (zelfde draaiing als de labels). */
  body.presentation-host #mobileCamera.portrait-camera #pitch .player-photo-card{transform-box:view-box;transform-origin:var(--card-ox) var(--card-oy);transform:rotate(90deg)}
  body.presentation-host #mobileCamera.portrait-camera #pitch[data-view-rot] .player-photo-card{transform:rotate(calc(90deg + var(--view-label-rot, 0deg)))}
  body.presentation-host #mobileCaption{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;position:fixed;z-index:68;left:calc(var(--mobile-rail) + 52px);right:calc(52px + env(safe-area-inset-right,0px));top:env(safe-area-inset-top,0px);height:44px;max-width:420px;margin:auto;background:#0f141bf2;border-radius:8px}
  #mobileCaption button{min-width:44px;min-height:44px;padding:0 4px;background:transparent;border:0;border-radius:7px;color:var(--ink);touch-action:manipulation;font:600 12px var(--f-ui)}
  #mobileCaption button:disabled{opacity:.3}
  #mobileCaption button:focus-visible,#mobileSlideList button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  #mobileCaption #mobileSlideTitle{display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:5px;min-width:0}
  #mobileSlideTitle .mr-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #mobileCaption #mobilePrev .mr-label,#mobileCaption #mobileNext .mr-label{display:none}
  #mobileCaption #mobilePrev .mr-icon,#mobileCaption #mobileNext .mr-icon{font-size:25px}
  body.presentation-host #mobileSlideList:not([hidden]){display:flex;flex-direction:column;position:fixed;z-index:70;top:var(--mobile-head);left:calc(var(--mobile-rail) + 6px);right:calc(6px + env(safe-area-inset-right,0px));max-width:420px;max-height:calc(var(--app-h,100dvh) - var(--mobile-head) - 12px);margin:0 auto;padding:6px;gap:3px;overflow:auto;background:var(--card,#121821);border:1px solid var(--brd-2);border-radius:8px;box-shadow:0 6px 24px #0008}
  #mobileSlideList button{flex-shrink:0;min-height:44px;padding:8px 10px;text-align:left;overflow-wrap:anywhere;font:500 12px/17px var(--f-ui);background:transparent;border:1px solid transparent;border-radius:6px;color:var(--ink);touch-action:manipulation}
  #mobileSlideList button[aria-current="true"]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
  /* v0.65.174 dia-beheer: one compact ⋯ per row; the six actions only appear under the chosen dia. */
  #mobileSlideList .msl-top{position:sticky;top:-6px;z-index:1;display:flex;flex-direction:column;gap:3px;flex-shrink:0;margin:-6px -6px 0;padding:6px 6px 3px;background:var(--card)}
  #mobileSlideList .msl-head{display:flex}
  #mobileSlideList #mobileSlideAdd{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-line);font-weight:600}
  #mobileSlideList #mobileSlideAdd .mr-icon{font-size:20px;line-height:20px}
  #mobileSlideList .msl-note,#mobileSlideList .msl-question{margin:2px 4px;font:500 12px/16px var(--f-ui);color:var(--ink-dim);overflow-wrap:anywhere}
  #mobileSlideList .msl-status:not([hidden]){display:flex;flex-shrink:0;align-items:center;gap:6px;padding:4px 4px 4px 8px;border:1px solid var(--accent-line);border-radius:6px;background:var(--raised);color:var(--ink);font:500 12px/16px var(--f-ui);overflow-wrap:anywhere}
  #mobileSlideList .msl-status>span{flex:1;min-width:0}
  #mobileSlideList .msl-rows{display:flex;flex-direction:column;gap:3px}
  #mobileSlideList .msl-row{display:flex;gap:2px;align-items:stretch}
  #mobileSlideList .msl-pick{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
  #mobileSlideList .msl-pick .mr-icon:empty{display:none}
  #mobileSlideList .msl-more{flex:0 0 44px;width:44px;padding:0;text-align:center;color:var(--ink-dim)}
  #mobileSlideList .msl-more .mr-icon{font:700 20px/20px var(--f-ui)}
  #mobileSlideList .msl-more .mr-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #mobileSlideList .msl-more[aria-expanded="true"]{background:var(--panel);border-color:var(--brd-2);color:var(--ink)}
  #mobileSlideList .msl-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:4px;margin:0 0 3px;border:1px solid var(--brd-2);border-radius:7px;background:var(--raised)}
  #mobileSlideList .msl-panel button,#mobileSlideList .msl-status button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:44px;min-height:46px;padding:3px 2px;text-align:center;border-color:var(--brd);background:var(--panel)}
  #mobileSlideList .msl-panel .mr-icon,#mobileSlideList .msl-status .mr-icon{display:flex;align-items:center;justify-content:center;height:20px;font:600 17px/20px var(--f-ui)}
  #mobileSlideList .msl-panel .mr-label,#mobileSlideList .msl-status .mr-label{font:600 10px/12px var(--f-ui);white-space:nowrap}
  #mobileSlideList .msl-panel button:disabled{opacity:.35}
  #mobileSlideList .msl-panel .msl-danger{color:#ffaaaa}
  #mobileSlideList .msl-panel>.msl-note,#mobileSlideList .msl-panel>.msl-question,#mobileSlideList .msl-panel>label{grid-column:1/-1}
  #mobileSlideList .msl-panel[data-kind="delete"],#mobileSlideList .msl-panel[data-kind="rename"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  #mobileSlideList .msl-panel label{margin:0 2px;font:600 11px/15px var(--f-ui);color:var(--ink-dim)}
  /* 16px text avoids iOS zoom-on-focus; the field keeps the whole width above its two buttons. */
  #mobileSlideList #mobileSlideRename{grid-column:1/-1;min-width:0;min-height:44px;box-sizing:border-box;padding:8px 10px;font:500 16px/22px var(--f-ui);color:var(--ink);background:var(--input);border:1px solid var(--accent-line);border-radius:6px}
  #mobileSlideList #mobileSlideRename:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  /* v0.65.176: the list has its own status line; the generic floating hint would cover the title field. */
  body.presentation-host[data-mobile-panel="slide-list"] #flashHint{display:none}
  body.presentation-host #mobileRail{display:grid;position:fixed;z-index:80;left:0;top:0;width:var(--mobile-rail);height:var(--app-h,100dvh);grid-template-rows:repeat(5,minmax(44px,1fr));
    padding:3px 4px 3px calc(4px + env(safe-area-inset-left,0px));gap:2px;background:var(--raised);border-right:1px solid var(--brd-2)}
  #mobileRail button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;min-width:44px;width:100%;padding:2px;color:var(--ink);background:transparent;border:1px solid transparent;border-radius:8px;touch-action:manipulation}
  #mobileRail button:disabled{opacity:.3}
  #mobileRail .mr-icon{font:500 22px/23px var(--f-ui)}
  #mobileRail .mr-label{font:600 9px/12px var(--f-ui);white-space:nowrap}
  #mobileRail #mobileMenuButton .mr-icon{font-size:18px;line-height:18px}
  #mobileRail .mr-build{font:500 8px/9px var(--f-ui);color:var(--ink-faint)}
  #mobileRail button[aria-pressed="true"],#mobileRail .needs-fullscreen{color:var(--accent-ink);border-color:var(--accent-line);background:var(--accent-soft)}
  #mobileRail button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  body.presentation-host #chainBar,body.presentation-host #draftBar{display:none!important}
  body.presentation-host #mobileActions:not([hidden]){display:flex;position:fixed;z-index:55;left:calc(var(--mobile-rail) + 6px);right:calc(6px + env(safe-area-inset-right,0px));top:calc(var(--mobile-head) + 4px);
    width:auto;max-width:410px;margin-left:auto;margin-right:auto;align-items:center;flex-wrap:nowrap;gap:2px;padding:3px;background:#121821f5;border:1px solid var(--brd-2);border-radius:9px;box-shadow:0 3px 12px #0005}
  #mobileActions button,body.presentation-host #mobileActionToggle{display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:44px;min-height:44px;padding:2px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink);font:600 9px/12px var(--f-ui);touch-action:manipulation}
  #mobileActions .mr-icon{display:flex;align-items:center;justify-content:center;font-size:20px;line-height:22px}
  #mobileActions .mr-label{white-space:nowrap}
  #mobileActions button[hidden]{display:none}
  #mobileActions #mobileLineColors:not([hidden]){display:flex;position:absolute;top:calc(100% + 4px);left:0;right:0;gap:2px;padding:3px;border:1px solid var(--brd-2);border-radius:8px;background:var(--card);box-shadow:0 3px 12px #0005}
  #mobileActions[data-edge="bottom"] #mobileLineColors:not([hidden]){top:auto;bottom:calc(100% + 4px)}
  #mobileActions #mobileLineColors[hidden]{display:none}
  #mobileLineColors button{width:44px;flex-shrink:0;padding:4px}
  #mobileLineColors [data-color] .mr-icon{font-size:24px;color:var(--sw)}
  #mobileLineColors .mr-label{display:none}
  #mobileActions #mobileTool .mr-label{display:block}
  #mobileActions #mobileTool .mr-icon{font-size:22px}
  #mobileActions #mobileLineDelete{color:#ffaaaa}
  #mobileActions button:disabled{opacity:.4}
  #mobileActions #mobileAnimate,#mobileActions #mobileAnimateAll,#mobileActions #mobileActionDone{color:var(--accent-ink);border-color:var(--accent-line)}
  #mobileActions button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-line)}
  #mobileActions #mobileActionDock .mr-label,#mobileActionToggle .mr-label{display:none}
  #mobileActions #mobileActionDock .mr-icon{font-size:22px;line-height:24px}
  #mobileActions button:focus-visible,#mobileActionToggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  body.presentation-host #mobileActionToggle:not([hidden]){display:flex;position:fixed;z-index:56;right:max(4px,env(safe-area-inset-right,0px));top:env(safe-area-inset-top,0px);width:44px;height:44px;background:#121821ed;font-size:22px}
  body.presentation-host #mobileActionToggle[hidden]{display:none}
  body.presentation-host #mobileActions[data-edge="bottom"],body.presentation-host #mobileActionToggle[data-edge="bottom"]{top:auto;bottom:max(6px,env(safe-area-inset-bottom,0px))}
  body.presentation-host #mobileActions[data-edge="bottom"]{right:calc(54px + env(safe-area-inset-right,0px))}
  body.presentation-host #workspace,body.presentation-host .body.right-collapsed #workspace,
  body.presentation-host .body .col.left{display:none;transform:none}
  body.presentation-host[data-mobile-panel="tools"]:not(.presenteren) .body #workspace,
  body.presentation-host[data-mobile-panel="dias"]:not(.presenteren) .body .col.left,
  body.presentation-host #mobileMenu:not([hidden]){display:flex;position:fixed;z-index:70;left:var(--mobile-rail);right:auto;top:0;bottom:0;width:min(350px,calc(100vw - var(--mobile-rail)));height:var(--app-h,100dvh);
    flex-direction:column;transform:none;padding:0;background:var(--card);border:0;border-right:1px solid var(--brd-2);border-radius:0;box-shadow:12px 0 32px #0008;overflow:auto}
  body.presentation-host #workspace .tabrail{flex:0 0 auto;width:100%;height:58px;min-height:58px;flex-direction:row;align-items:center;justify-content:space-around;padding:4px;border-right:0;border-bottom:1px solid var(--brd)}
  body.presentation-host #workspace .tabrail-view{display:none}
  body.presentation-host #workspace .tabbtn,body.presentation-host #workspace #rightCollapse{flex:1;min-height:44px;margin:0;padding:4px}
  body.presentation-host #workspace .tabpanel{flex:1;min-height:0;height:auto;width:100%;overflow:auto;padding:12px 12px 24px;display:block}
  body.presentation-host #mobileMenu>header{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;padding:4px 12px;background:var(--raised);z-index:1;border-bottom:1px solid var(--brd)}
  #mobileMenu h2{margin:0;font-size:15px}#mobileMenu h3{font-size:12px;color:var(--ink-faint);margin:12px 4px 2px}
  #mobileMenu button{font:600 13px var(--f-ui);min-height:44px;text-align:left;color:var(--ink);background:transparent;border:1px solid var(--brd);border-radius:7px;padding:9px 12px;touch-action:manipulation}
  #mobileMenu button:disabled{opacity:.4}
  #mobileMenu #mobileClose{display:flex;min-width:44px;gap:6px;align-items:center}
  body.presentation-host #mobileMenu:not([hidden]){overflow:hidden}
  body.presentation-host #mobileMenu>header{flex-shrink:0}
  .mobile-menu-content{display:flex;flex:1;min-height:0;overflow:auto;flex-direction:column;gap:6px;padding:10px 12px 18px}
  .mobile-menu-content>button{flex-shrink:0}
  #mobileMenu #mobilePresent{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-line)}
  .mobile-build{font-size:11px;color:var(--ink-faint);line-height:1.5;margin:4px}
  body.presentation-host #mobileScrim:not([hidden]){display:block;position:fixed;z-index:65;inset:0 0 0 var(--mobile-rail);border:0;background:#0006;border-radius:0}
  body.presentation-host #mobilePan:not([hidden]){display:block;position:absolute;inset:0;z-index:20;cursor:grab;touch-action:none}
  body.presentation-host #animationStrip{display:none;max-width:100%;overflow:auto;max-height:45vh;flex:0 0 auto}
  body.presentation-host.mobile-timeline:not(.presenteren) #animationStrip{display:block}
  body.presentation-host .anim-strip .anim-bar{flex-wrap:wrap;gap:4px;padding:4px}
  body.presentation-host .anim-strip button{min-height:44px;min-width:44px}
  body.presentation-host #stepDraftBar{left:calc(var(--mobile-rail) + 6px);right:6px;bottom:6px;max-width:calc(100vw - var(--mobile-rail) - 12px);width:auto;transform:none;flex-wrap:wrap}
  body.presentation-host #stepDraftBar button{min-height:44px;min-width:44px;touch-action:manipulation}
  body.presentation-host #stepDraftBar .sd-label{flex:1 1 100%;max-height:30px;overflow:auto;font-size:11px}
  /* Staand: een vaste labelhoogte (twee regels), zodat de balk — en dus het veld — tijdens de groep niet verspringt. */
  @media (orientation:portrait){body.presentation-host #stepDraftBar .sd-label{height:30px;line-height:15px}}
  /* P1 animatiegroepen mobiel (PO 2026-11-02): één dockplek bij het veld voor de animatiestrook, de open
     groep (#stepDraftBar) en tijdens Presenteren de live werkbalk. Hun gemeten maat (--mobile-dock) houdt
     het veld vrij. */
  body.presentation-host #mobileAnimBar:not([hidden]){display:flex;position:fixed;z-index:57;gap:6px;padding:4px;box-sizing:border-box;background:#121821f5;border:1px solid var(--brd-2);border-radius:10px;box-shadow:0 3px 12px #0005}
  #mobileAnimBar button{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:4px 12px;border:1px solid var(--brd-2);border-radius:8px;background:var(--panel);color:var(--ink);font:600 13px/16px var(--f-ui);touch-action:manipulation}
  #mobileAnimBar #mobileGroup{flex:1 1 auto;color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-line)}
  #mobileAnimBar .mr-icon{font-size:16px;line-height:16px}
  #mobileAnimBar .mr-label{white-space:nowrap}
  #mobileAnimBar button[hidden]{display:none}
  #mobileAnimBar button[aria-pressed="true"]{background:var(--accent-line);border-color:var(--accent);color:var(--ink)}
  #mobileAnimBar button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  body.presentation-host.presenteren #liveTools{transform:none;max-width:none;gap:4px;padding:4px;z-index:57;box-sizing:border-box}
  body.presentation-host #liveTools button{min-height:44px;font-size:12px;padding:4px 10px;text-align:center;touch-action:manipulation}
  body.presentation-host.presenteren.mobile-step #liveTools{display:none}
  body.presentation-host #pathShapeBar button,body.presentation-host #couplingBar button{min-height:44px}
  #mobileAnimBar button:disabled{opacity:.4}
  /* ADR-0029 Am. 1 (P6) op de telefoon: de balk Origineel / Met veranderingen / Overnemen / Verwijderen staat
     naast de dock (nooit over het veld); de knoppen spreken voor zich, het kopje blijft weg. */
  body.presentation-host #changesBar{top:auto;transform:none;gap:4px;padding:4px;box-sizing:border-box;z-index:57}
  body.presentation-host #changesBar .sd-label{display:none}
  body.presentation-host #changesBar .chip-btn{min-height:44px;font-size:12px;padding:4px 10px;flex:1 1 auto;touch-action:manipulation}
  body.presentation-host #changesBar .changes-stale{flex:1 1 100%;font-size:11px}
  body.presentation-host .nd-backdrop{padding:8px;align-items:stretch}
  body.presentation-host .nd-dialog{width:min(100%,820px);max-height:100%;padding:12px 14px;gap:8px;border-radius:10px}
  body.presentation-host .nd-teams{grid-template-columns:1fr 1fr;gap:10px}
  body.presentation-host .nd-actions button{min-height:44px}
}
/* At 320px the six contextual actions plus the separate opener still fit in one row.
   Normal phones retain 44px targets; this narrow fallback is never used by the main rail. */
@media (orientation:portrait) and (max-width:340px){
  body.presentation-host #mobileActions[data-edge="bottom"] button{min-width:38px}
  body.presentation-host #mobileActions[data-edge="bottom"] .mr-label{font-size:8px}
}
/* Portrait uses the SAME five controls, outside the pitch at the bottom. No field objects
   can disappear underneath them; action drawers stop above this reserved rail. */
@media (orientation:portrait) and (max-width:767px){
  body.presentation-host{--mobile-rail:env(safe-area-inset-left,0px);--mobile-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  body.presentation-host .body .col.stage{padding-top:var(--mobile-head);padding-bottom:var(--mobile-bottom)}
  body.presentation-host .body .col.stage{padding-bottom:calc(var(--mobile-bottom) + var(--mobile-dock,0px) + var(--mobile-dock-extra,0px))}
  body.presentation-host #mobileAnimBar:not([hidden]),body.presentation-host #stepDraftBar,body.presentation-host.presenteren #liveTools{left:max(6px,env(safe-area-inset-left,0px));right:max(6px,env(safe-area-inset-right,0px));top:auto;bottom:calc(var(--mobile-bottom) + 6px);transform:none;width:auto;max-width:420px;margin:0 auto}
  body.presentation-host.presenteren #liveTools{flex-direction:row;flex-wrap:wrap;justify-content:center}
  body.presentation-host.presenteren #liveTools button{flex:1 1 auto}
  body.presentation-host #changesBar{left:6px;right:6px;bottom:calc(var(--mobile-bottom) + var(--mobile-dock,0px) + 6px);max-width:420px;margin:0 auto}
  body.presentation-host #pathShapeBar,body.presentation-host #couplingBar{left:6px;right:6px;bottom:calc(var(--mobile-bottom) + var(--mobile-dock,0px) + var(--mobile-dock-extra,0px) + 6px);transform:none;max-width:420px;margin:0 auto}
  /* Zoals op desktop gestapeld: Losmaken boven de padbalk, nooit eroverheen. */
  body.presentation-host #couplingBar{bottom:calc(var(--mobile-bottom) + var(--mobile-dock,0px) + var(--mobile-dock-extra,0px) + 62px)}
  body.presentation-host #mobileRail{top:auto;bottom:0;width:100%;height:var(--mobile-bottom);grid-template-rows:minmax(44px,1fr);grid-template-columns:repeat(5,minmax(44px,1fr));
    padding:3px max(4px,env(safe-area-inset-right,0px)) calc(3px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px));border-right:0;border-top:1px solid var(--brd-2)}
  body.presentation-host #mobileSlideList:not([hidden]){max-height:calc(var(--app-h,100dvh) - var(--mobile-head) - var(--mobile-bottom) - 12px)}
  body.presentation-host #mobileActions[data-edge="bottom"],body.presentation-host #mobileActionToggle[data-edge="bottom"]{bottom:calc(var(--mobile-bottom) + var(--mobile-dock,0px) + var(--mobile-dock-extra,0px) + 6px)}
  body.presentation-host[data-mobile-panel="tools"]:not(.presenteren) .body #workspace,
  body.presentation-host[data-mobile-panel="dias"]:not(.presenteren) .body .col.left,
  body.presentation-host #mobileMenu:not([hidden]){width:calc(100vw - var(--mobile-rail));height:calc(var(--app-h,100dvh) - var(--mobile-bottom));bottom:var(--mobile-bottom);padding-top:env(safe-area-inset-top,0px)}
  body.presentation-host #mobileScrim:not([hidden]){bottom:var(--mobile-bottom)}
}
/* Liggend: de dock staat RECHTS naast het veld (daar is breedte over), zodat het veld zijn volle hoogte houdt. */
@media (orientation:landscape) and (max-width:950px) and (max-height:600px){
  body.presentation-host .body .col.stage{padding-right:calc(env(safe-area-inset-right,0px) + var(--mobile-dock,0px));padding-bottom:var(--mobile-dock-extra,0px)}
  body.presentation-host #mobileAnimBar:not([hidden]),body.presentation-host #stepDraftBar,body.presentation-host.presenteren #liveTools{left:auto;right:max(6px,env(safe-area-inset-right,0px));top:calc(var(--mobile-head) + 4px);bottom:auto;transform:none;width:116px;max-width:116px;max-height:calc(var(--app-h,100dvh) - var(--mobile-head) - 60px);overflow:auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  /* De tekenbalk en de dia-titel blijven boven/over het VELD (links van de dock), net als zonder dock. */
  body.presentation-host #mobileActions[data-edge]{right:calc(var(--mobile-dock,0px) + 6px)}
  body.presentation-host #mobileCaption{right:calc(52px + env(safe-area-inset-right,0px) + var(--mobile-dock,0px))}
  /* De strook begint onder de band van de tekenbalk (#mobileActions), die ook bovenaan staat: nooit eroverheen. */
  body.presentation-host #mobileAnimBar:not([hidden]){top:calc(var(--mobile-head) + 60px)}
  body.presentation-host #mobileAnimBar #mobileGroup{flex:0 0 auto;white-space:normal}
  body.presentation-host #mobileAnimBar .mr-label{white-space:normal;text-align:left}
  /* Compact in twee kolommen, zodat ook op 568x320 elke knop zonder scrollen in beeld staat. */
  body.presentation-host #stepDraftBar,body.presentation-host.presenteren #liveTools{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row dense;align-content:start;gap:4px;max-height:calc(var(--app-h,100dvh) - var(--mobile-head) - 6px - max(6px,env(safe-area-inset-bottom,0px)))}
  body.presentation-host #stepDraftBar .sd-label{grid-column:1/-1;max-height:none;font-size:11px;line-height:14px}
  body.presentation-host #stepDraftBar .sd-next,body.presentation-host #stepDraftBar .sd-done,body.presentation-host #stepDraftBar #stepFormationBtn{grid-column:1/-1}
  body.presentation-host #stepDraftBar button,body.presentation-host.presenteren #liveTools button{padding:3px 4px;font-size:11.5px;line-height:14px;min-width:0;white-space:normal}
  body.presentation-host.presenteren #liveTools [data-pb="addgroup"],body.presentation-host.presenteren #liveTools [data-pb="changes"],body.presentation-host.presenteren #liveTools [data-pb="mode-move"]{grid-column:1/-1}
  body.presentation-host #mobileAnimBar button{padding:4px 6px;font-size:12px;gap:4px}
  /* Liggend onderaan: boven de thuisbalk (safe area), zoals #mobileActions. --mobile-dock-extra is liggend de
     afstand van de bovenkant van #changesBar tot de onderrand (balk + zijn eigen marge). */
  body.presentation-host #changesBar{left:calc(var(--mobile-rail) + 6px);right:calc(var(--mobile-dock,0px) + 6px);bottom:max(6px,env(safe-area-inset-bottom,0px));max-width:none;flex-wrap:wrap}
  body.presentation-host #pathShapeBar,body.presentation-host #couplingBar{left:calc(var(--mobile-rail) + 6px);right:calc(var(--mobile-dock,0px) + 6px);bottom:calc(var(--mobile-dock-extra,0px) + max(6px,env(safe-area-inset-bottom,0px)));transform:none;max-width:none}
  body.presentation-host #couplingBar{bottom:calc(var(--mobile-dock-extra,0px) + max(6px,env(safe-area-inset-bottom,0px)) + 56px)}
}