/* Host boundary only. The existing editor keeps its own mobile/desktop layout. */
/* Parser-time direct-work boot: reuse the existing, lightweight status region
   so a workspace URL has visible feedback before the editor module graph runs. */
html[data-direct-bootstrap] body.tool-shell > .skip-link,
html[data-direct-bootstrap] body.tool-shell > .site-header,
html[data-direct-bootstrap] body.tool-shell > .site-footer,
html[data-direct-bootstrap] body.tool-shell #main > :not(.tool-shell__workspace) { display:none!important; }
html[data-direct-bootstrap] body.tool-shell .tool-intro__embed-copy,
html[data-direct-bootstrap] body.tool-shell .tool-shell__embed [data-embed-stage] { display:none!important; }
.tool-shell__start[aria-busy='true']::after { content:''; flex:0 0 auto; width:1rem; height:1rem; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:tool-direct-spin .8s linear infinite; }
.tool-shell__start[aria-busy='true'] { gap:.65rem; cursor:wait; }
@keyframes tool-direct-spin { to { transform:rotate(1turn); } }
@media (prefers-reduced-motion:reduce) { .tool-intro__embed-status::before, .tool-shell__start[aria-busy='true']::after, .tool-direct__boot-cue p::before { animation:none; } }
html[data-tool-direct='work'] { --tool-direct-bar:64px; }
.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:64px; display:flex; align-items:center; gap:8px; padding:8px; background:#f4f2ec; color:#27251f; border-bottom:1px solid #d9d5ca; font:16px system-ui,-apple-system,"Segoe UI",sans-serif; }
.tool-direct__bar strong { margin-right:auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tool-direct__bar button { flex-shrink:0; white-space:nowrap; 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; }
html[data-direct-loading]:not([data-direct-error]) .tool-direct__status { display:none; }
.tool-direct__boot-cue { position:fixed; z-index:200; top:calc(var(--tool-direct-top,0px) + (var(--tool-direct-height,100dvh) + 60px)/2); left:50%; display:flex; flex-direction:column; align-items:stretch; gap:12px; box-sizing:border-box; width:min(560px,calc(100vw - 32px)); max-width:calc(100vw - 32px); margin:0; padding:20px; transform:translate(-50%,-50%); border:1px solid #d9d5ca; border-radius:14px; background:#fff; color:#27251f; box-shadow:0 12px 40px #0003; font:700 14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
.tool-direct__boot-cue p { display:flex; align-items:center; gap:12px; margin:0; }
.tool-direct__boot-cue p::before { content:''; flex:0 0 auto; width:1rem; height:1rem; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:tool-direct-spin .8s linear infinite; }
.tool-direct__boot-cue button { align-self:flex-start; flex-shrink:0; white-space:nowrap; min-height:44px; padding:8px 12px; border:1px solid #c6c0b3; border-radius:10px; background:#fff; color:#27251f; font:700 14px system-ui; }
.tool-direct__boot-cue button:focus-visible { outline:3px solid #315fd0; outline-offset:2px; }
.tool-direct__boot-cue[hidden] { display:none!important; }
/* Desktop feature buttons replace their text with a short glyph. Keep the
   real loading/retry state visible in that same fixed-size button. */
html[data-tool-direct='work'] body.draw-desktop-active .draw-desktop-features .draw-feature-actions > button[aria-busy='true']::before { content:'読込'; font-size:12px; }
html[data-tool-direct='work'] body.draw-desktop-active .draw-desktop-features .draw-feature-actions > button[aria-label$='（再試行）']::before { content:'再試行'; font-size:11px; }
.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; }

html[data-direct-loading], html[data-direct-loading] body { background:#151d24!important; }
html[data-direct-loading] .pixieed-site-reward { visibility:hidden; }

/* 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; }
html[data-direct-loading] dialog[open] { visibility:visible!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;
  }
}