/* Shared by HTML bootstrap and React pending states; structural and private-data free. */
/* startup.js adds the dark class before first paint; the canvas and native controls follow it. */
html { background-color:var(--startup-background) }
html.dark { color-scheme:dark }
.loading-sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
.pending-frame { min-height:100svh;background:var(--startup-background);color:var(--startup-foreground);font-family:var(--startup-font-sans) }
.pending-platform { display:flex }
.pending-body { flex:1;min-width:0 }
.pending-sidebar { display:none;box-sizing:border-box;flex:0 0 calc(var(--startup-space) * 56);border-right:1px solid var(--startup-border);background:var(--startup-sidebar) }
.pending-topbar { box-sizing:border-box;height:calc(var(--startup-space) * 14);border-bottom:1px solid var(--startup-border) }
.page-placeholder { box-sizing:border-box;width:100%;min-height:calc(var(--startup-space) * 90);padding:calc(var(--startup-space) * 8);max-width:calc(var(--startup-space) * 320);margin:0 auto }
/* Marketing chrome stays mounted around a lazy leaf. Reserve the viewport
   below the fixed-height h-14 header only during that pending state, so its
   footer cannot enter the viewport and then shift beneath a long page. */
.marketing-page-placeholder { min-height:calc(100svh - (var(--startup-space) * 14)) }
.pending-standalone { background:var(--startup-background) }
#bootstrap-frame { min-height:100svh;background:var(--startup-background);color:var(--startup-foreground);font-family:var(--startup-font-sans) }
#bootstrap-frame .pending-sidebar { display:none }
#bootstrap-frame .bootstrap-marketing { display:none }
#bootstrap-frame .bootstrap-jp, html[lang="ja"] #bootstrap-frame .bootstrap-en { display:none }
html[lang="ja"] #bootstrap-frame .bootstrap-jp { display:inline }
html[data-startup-frame="platform"] #bootstrap-frame { display:flex }
html[data-startup-frame="standalone"] #bootstrap-frame { display:block;background:var(--startup-background) }
html[data-startup-frame="standalone"] #bootstrap-frame .pending-topbar { display:none }
html[data-startup-frame="marketing"] #bootstrap-frame .bootstrap-private { display:none }
html[data-startup-frame="marketing"] #bootstrap-frame .bootstrap-marketing { display:block }
.bootstrap-marketing-header { box-sizing:border-box;height:calc(var(--startup-space) * 14);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--startup-border);padding:0 calc(var(--startup-space) * 6) }
.bootstrap-marketing-header img { display:block;width:calc(var(--startup-space) * 40.5);height:calc(var(--startup-space) * 7);object-fit:contain }
.bootstrap-marketing-main { box-sizing:border-box;min-height:calc(100svh - (var(--startup-space) * 14));padding:calc(var(--startup-space) * 8);max-width:calc(var(--startup-space) * 320);margin:0 auto }
.bootstrap-recovery { display:none;margin:0 calc(var(--startup-space) * 8) calc(var(--startup-space) * 8);font-size:calc(var(--startup-space) * 3.5);line-height:1.5;color:var(--startup-muted-foreground) }
.bootstrap-marketing-main .bootstrap-recovery { margin:calc(var(--startup-space) * 6) 0 0 }
#bootstrap-frame[data-delayed]:not([data-error]) .bootstrap-delayed { display:block }
#bootstrap-frame[data-error] .bootstrap-error { display:block;position:fixed;z-index:1;inset-inline:calc(var(--startup-space) * 4);bottom:calc(var(--startup-space) * 4);box-sizing:border-box;max-width:calc(var(--startup-space) * 160);margin:0 auto;padding:calc(var(--startup-space) * 4);border:1px solid var(--startup-border);border-radius:var(--startup-radius);background:var(--startup-background) }
#bootstrap-frame[data-error] [role="status"] { display:none }
#bootstrap-frame a { color:var(--startup-link) }
@media (min-width:768px) {
  .pending-sidebar, html[data-startup-frame="platform"] #bootstrap-frame .pending-sidebar { display:block }
}
@media (max-width:639px) {
  .page-placeholder, .bootstrap-marketing-main { padding:calc(var(--startup-space) * 6) calc(var(--startup-space) * 4) }
  .bootstrap-marketing-header { padding:0 calc(var(--startup-space) * 4) }
}