/* =============================================================================
   share_custom.css                                          2026-09-04
   -----------------------------------------------------------------------------
   The custom share page's loading state. Loaded ALONGSIDE share.css, and only
   by the test renderer -- share/index.php and the composer's preview
   endpoint. share/index.php does not load it and must not be edited to.

   Why it is a separate file rather than a few rules appended to share.css:
   share.css is live. index.php serves real event traffic through it, and these
   rules very nearly broke that page -- see the scoping note below. A test
   renderer gets a test stylesheet; the two merge only when index.php
   is promoted, which is a rename plus moving this block into share.css.

   -----------------------------------------------------------------------------
   WHAT THIS REPLACES
   -----------------------------------------------------------------------------
   The share page can be opened before the guest's sketch exists -- the QR flow
   lands here early -- and seven elements swap between a "still drawing" state
   and the finished one.

   share/index.php does that with an inline display written onto each element at
   render. That stopped working when the content region became customer-editable
   HTML: a saved block is static markup while $isLoading varies per request, so
   the state cannot live in the block. The renderer marks the content root
   .sp-loading instead and these rules do the rest.

   setLoadingUi() in index.php still writes inline display on these same ids
   when polling finds the sketch. That is deliberate layering, not a conflict:
   these rules set the state the page LOADS in, and the inline write takes over
   at the transition. An inline display in a customer's own markup would defeat
   both, which is why the composer warns about one.

   #sketchLoader is absent on purpose. It lives inside the sketch slot, which is
   machinery rendered fresh every request, so it keeps its own inline display.

   -----------------------------------------------------------------------------
   THE .sp-block SCOPE -- KEEP IT
   -----------------------------------------------------------------------------
   Every rule is scoped to .sp-block even though this file is test-only today.

   That scope is not decoration. share/index.php writes an EMPTY inline style on
   the loading spans while it IS loading (index.php:492), so an unscoped
   "#copyLoadingBody1 { display:none }" hides the loading copy on the live page.
   The moment this block is merged into share.css at promotion, an unscoped
   version becomes a live bug that looks like the QR flow silently breaking.

   .sp-block is emitted only by the renderer that keeps its markup free of
   inline display, so the two pages cannot collide.
   ============================================================================= */

.sp-block #copyLoadingBody1,
.sp-block #copyLoadingDownload { display: none; }

.sp-block.sp-loading #copyBody1,
.sp-block.sp-loading #copyDownload,
.sp-block.sp-loading #sharePhotoCopyBlock,
.sp-block.sp-loading #socialWrapper,
.sp-block.sp-loading #body2Block { display: none; }

.sp-block.sp-loading #copyLoadingBody1,
.sp-block.sp-loading #copyLoadingDownload { display: inline; }