/* Shared pressed-flower stationery. Static, cached artwork; no animated
   wallpaper, new blur layers, or decoration inside editable letter content. */
:root{
  --floral-garland:url('assets/florals/peony-lilac-divider.webp');
  --floral-corner:url('assets/florals/rose-sweetpea-corner.webp');
  --floral-meadow:url('assets/florals/cosmos-meadow-sprig.webp');
}

/* App chrome trades the scattered glyphs for two quiet watercolor margins. */
.floral-page-background::before,.floral-page-background::after{
  content:'';position:absolute;width:180px;height:180px;pointer-events:none;
  background:var(--floral-corner) center/contain no-repeat;opacity:.22;
}
.floral-page-background::before{left:-55px;top:230px}
.floral-page-background::after{right:-45px;bottom:100px;transform:scaleX(-1)}

/* Every chapter has a small botanical chapter mark, not a repeated backdrop. */
#landing>.chapter:not(.hero)>.content::before,
.at-section-title>div::before,.pf-section-head::before,.at-dialog::after{
  content:'';display:block;width:112px;height:38px;margin:0 0 20px;
  background:var(--floral-garland) center/contain no-repeat;pointer-events:none;
}
#landing>.finale>.content::before{width:180px;height:60px;margin-bottom:28px}
.at-section-title>div::before{width:96px;height:32px;margin-bottom:12px}
.pf-section-head::before{width:96px;height:32px;margin-bottom:14px}
.at-dialog::after{width:100px;height:34px;margin:24px auto 0}

/* A chapter flourish fits in the existing gap between chapter and save status. */
.at-editor-top{position:relative}
.at-editor-top::after{
  content:'';position:absolute;width:52px;height:18px;left:calc(50% - 26px);top:0;
  background:var(--floral-garland) center/contain no-repeat;pointer-events:none;
}
.at-sidebar-note img{height:80px;object-fit:contain;opacity:1}
.at-finish-art{height:180px}
.at-auth-art img{object-fit:contain}

/* Profile foliage has reserved space, never sits behind a name or email. */
.pf-hero{position:relative}
.pf-hero::after{
  content:'';display:block;width:120px;height:180px;
  background:var(--floral-meadow) center/contain no-repeat;pointer-events:none;
}
@media(min-width:1001px){
  .pf-hero{padding-right:160px}
  .pf-hero::after{position:absolute;right:0;top:20px}
}
@media(min-width:761px) and (max-width:1000px){
  .pf-hero::after{display:none}
}

/* Tiny palette emblem: the paper and canvas keep every pixel of working space. */
:is(.front-sticker-library,.drawing-dialog-tools) .drawing-palette-heading>span:last-child{
  width:28px;height:28px;flex:none;font-size:0;
  background:var(--floral-garland) center/contain no-repeat;
}

/* Recipient intro/reveal edges only. Content slides, loading errors, and the
   recipient's own sticker placements remain untouched. */
.at-floral-preview:is([data-floral-scene=intro],[data-floral-scene=opening])::after{
  content:'';position:absolute;right:12px;bottom:88px;width:150px;height:150px;
  background:var(--floral-corner) center/contain no-repeat;transform:scaleX(-1);
  opacity:.55;pointer-events:none;z-index:6;
}
.at-ending>img{animation:none}

@media(max-width:760px){
  .floral-page-background::before{display:none}
  .floral-page-background::after{width:112px;height:112px;right:-32px;bottom:96px;opacity:.18}
  #landing>.chapter:not(.hero)>.content::before{width:96px;height:32px;margin-bottom:16px}
  #landing>.finale>.content::before{width:144px;height:48px}
  .at-editor-top::after{width:42px;height:14px;left:calc(50% - 21px)}
  .at-finish-art{width:160px;height:145px}
  .pf-hero::after{width:108px;height:36px;background-image:var(--floral-garland);margin-top:-10px}
  .at-floral-preview:is([data-floral-scene=intro],[data-floral-scene=opening])::after{
    right:0;bottom:84px;width:76px;height:76px;opacity:.5;
  }
}
@media(max-width:360px){.at-editor-top::after{display:none}}