/* Host boundary only. The existing editor keeps its own mobile/desktop layout. */
html[data-tool-direct='work'] { --tool-direct-bar:60px; }
.tool-direct__bar { position:fixed; z-index:180; top:var(--tool-direct-top,0px); left:0; width:var(--tool-direct-width,100%); box-sizing:border-box; min-height:60px; display:flex; align-items:center; gap:8px; padding:8px; background:#f4f2ec; color:#27251f; border-bottom:1px solid #d9d5ca; }
.tool-direct__bar strong { margin-right:auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tool-direct__bar button { min-height:44px; border:1px solid #c6c0b3; border-radius:10px; padding:8px 12px; font:700 14px system-ui; background:#fff; color:#27251f; }
.tool-direct__bar button:focus-visible { outline:3px solid #315fd0; outline-offset:2px; }
.tool-direct__bar[hidden] { display:none!important; }
.tool-direct__status { font:12px system-ui; }
.tool-direct__bar--recovery { flex-wrap:wrap; }
.tool-direct__bar--recovery .tool-direct__status { order:1; flex-basis:100%; line-height:1.5; }
html[data-tool-direct='work'] [data-direct-description],
html[data-tool-direct='explanation'] [data-direct-owned] { display:none!important; }
html[data-tool-direct='work'] body.creation-editor { height:var(--tool-direct-height,100dvh); }
html[data-tool-direct='work'] body.creation-editor .site-header { top:calc(var(--tool-direct-top,0px) + var(--tool-direct-bar)); }
html[data-tool-direct='work'] body.creation-editor #main { top:var(--creation-editor-header); bottom:var(--creation-editor-bottom); }
html[data-tool-direct='work'] body.creation-editor .app-tabs { bottom:calc(100dvh - var(--tool-direct-top,0px) - var(--tool-direct-height,100dvh) + 8px); }
html[data-tool-direct='work'] .site-header .brand,
html[data-tool-direct='work'] .site-header [data-menu-toggle],
html[data-tool-direct='work'] .site-nav,
html[data-tool-direct='work'] .display-ad,
html[data-tool-direct='work'] [data-ad],
html[data-tool-direct='work'] .adsbygoogle { display:none!important; }
html[data-tool-direct='work'] body.creation-editor .draw-music-panel {
  box-sizing:border-box;
  top:calc(var(--tool-direct-top,0px) + var(--tool-direct-bar) + var(--px-header-height,64px) + 8px);
  max-height:calc(var(--tool-direct-height,100dvh) - var(--tool-direct-bar) - var(--px-header-height,64px) - 24px);
  overflow-y:auto;
}
/* Keep the existing benefits entry in the editor header. A desktop-sized
   floating status at the bottom covers output controls in short landscapes. */
html[data-tool-direct='work'] .pixieed-site-reward {
  right:12px;
  top:calc(var(--tool-direct-top,0px) + var(--tool-direct-bar) + 6px);
  bottom:auto;
}
html[data-tool-direct='work'] .pixieed-site-reward:not(:has([data-dialog]:not([hidden]))) { z-index:36; }
html[data-tool-direct='work'] .pixieed-site-reward-status { display:flex; gap:0; padding:0; background:transparent; border:0; box-shadow:none; }
/* The public header's entry is inside the hidden introduction while working. */
html[data-tool-direct='work'] body .pixieed-site-reward-status { display:flex!important; }
html[data-tool-direct='work'] .pixieed-site-reward-status [data-status] { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html[data-tool-direct='work'] .pixieed-site-reward-status [data-renew] { box-sizing:border-box; width:66px; height:44px; padding:0; border-radius:20px; background:#fff; box-shadow:0 2px 12px #18283b24; }
html[data-tool-direct='work'] .pixieed-site-reward-desktop { display:none; }
html[data-tool-direct='work'] .pixieed-site-reward-mobile { display:inline-flex; align-items:center; justify-content:center; width:100%; height:100%; padding:0 4px; font-size:11px; font-weight:700; white-space:nowrap; }

/* A legacy PXD can require an explicit image-role choice before mount finishes. */
html[data-direct-loading] [data-direct-owned]:not(dialog[open]) { visibility:hidden!important; }

/* Keyboard resize/pan changes the visual viewport without resizing the layout
   viewport. Keep modal actions within it and retain a scrollable control dock. */
html[data-tool-direct='work'] dialog[open] {
  box-sizing:border-box;
  top:calc(var(--tool-direct-top,0px) + 8px);
  bottom:calc(100dvh - var(--tool-direct-top,0px) - var(--tool-direct-height,100dvh) + 8px);
  max-height:calc(var(--tool-direct-height,100dvh) - 16px);
  margin:auto;
  overflow-y:auto;
}
html[data-tool-direct='work'] .draw-text-panel {
  top:var(--tool-direct-top,0px);
  bottom:calc(100dvh - var(--tool-direct-top,0px) - var(--tool-direct-height,100dvh));
}
/* Fixed #main owns a stacking context. Raise that context while its custom
   text modal is open, so the host bar cannot cover the modal's close action. */
html[data-tool-direct='work'] #main:has(.draw-text-panel:not([hidden])) { z-index:181; }
html[data-tool-direct='work'] .draw-text-panel__card {
  box-sizing:border-box;
  max-height:min(720px,calc(var(--tool-direct-height,100dvh) - 36px));
}
@media (max-width:600px) and (orientation:portrait) {
  html[data-tool-direct='work'] body.creation-editor .draw-page {
    grid-template-rows:minmax(44px,1fr) minmax(0,auto);
    overflow-y:auto;
  }
  html[data-tool-direct='work'] body.creation-editor .draw-control-dock {
    max-height:max(44px,min(208px,calc(100dvh - var(--creation-editor-header) - var(--creation-editor-bottom) - 112px)));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}