/* 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:56px; }
.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:56px; display:flex; align-items:center; gap:6px; padding:6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left)); background:#f4f2ec; color:#27251f; border-bottom:1px solid #d9d5ca; font:16px system-ui,-apple-system,"Segoe UI",sans-serif; }
.tool-direct__bar strong { flex:0 0 auto; max-width:clamp(72px,18vw,132px); margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.tool-direct__bar .tool-direct__status { flex:0 1 auto; min-width:0; max-width:clamp(88px,16vw,180px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tool-direct__bar .tool-direct__status:empty { display:none; }
.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__bar :is(#creation-project-undo,#creation-project-redo) {
  width:44px; min-width:44px; padding:0!important; font-size:0;
}
.tool-direct__bar :is(#creation-project-undo,#creation-project-redo)::before {
  content:''; display:block; width:24px; height:24px; background-color:currentColor;
  -webkit-mask:var(--tool-history-icon) center / contain no-repeat;
  mask:var(--tool-history-icon) center / contain no-repeat;
}
.tool-direct__bar #creation-project-undo { --tool-history-icon:url('/assets/icons/pixieed/undo.svg'); }
.tool-direct__bar #creation-project-redo { --tool-history-icon:url('/assets/icons/pixieed/redo.svg'); }
.tool-direct__bar .tool-direct__help { width:44px; min-width:44px; padding:0; border-radius:50%; font-size:18px; }
.tool-direct__merged-header { display:none!important; }
.tool-direct__bar .project-bar.px-tool-header-files { position:relative; inset:auto; flex:0 0 44px; width:44px; height:44px; }
.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) + 8px);
  max-height:calc(var(--tool-direct-height,100dvh) - var(--tool-direct-bar) - 24px);
  overflow-y:auto;
}
/* The existing benefits entry joins the consolidated toolbar so it cannot
   cover editor controls in short landscape viewports. */
/* The status button carries the live state in its accessible name. */

html[data-direct-loading], html[data-direct-loading] body { background:#151d24!important; }

/* 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) {
  .tool-direct__bar { gap:4px; }
  .tool-direct__bar strong { max-width:72px; font-size:12px; }
  .tool-direct__bar button { padding-inline:8px; }
  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;
  }
}
@media (max-width:380px) {
}
@media (max-width:600px) {
  /* Camera progress is also shown in the preview. Keep the live status
     accessible here without squeezing the essential header controls. */
  .tool-direct__bar:not(.tool-direct__bar--recovery) .tool-direct__status {
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
  .tool-direct__bar strong { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
}