/* Spark Lab BACKGROUNDS panel (play-backgrounds.js) — a floating popover under
   the top-right action pill (#cc-ptr already carries position:absolute from
   canvas.css's "SPARK LAB layout v2" rules, so appending inside it and
   anchoring with top:100% tracks the pill wherever it sits, including the
   narrow/tiny responsive layouts that move it to the bottom of the window).
   The panel itself reuses canvas.css's .cc-pcard/.cc-pslide-head/.cc-pslide-x/
   .cc-stamptabs/.cc-magicgrid/.cc-pswatch/.cc-pcustom classes for its base
   look (dark card, rounded corners, hover states) — this file only adds the
   popover positioning and the two NEW tile types (gradient swatch, image
   thumbnail) that don't already exist elsewhere. Load AFTER canvas.css. */

/* ⚠ SPECIFICITY: canvas.css's "SPARK LAB layout" block has
     [data-app="canvas"] .cc-spark .cc-ptr > .cc-pcard { position: relative }
   at (0,4,0). This panel carries .cc-pcard for its base card look, so a
   (0,3,0) class-only selector LOSES and the popover falls back into the flex
   row — which shoves the whole MANAGE pill left by the panel's width.
   The #id here makes it (1,3,0) so the popover positioning actually wins.
   Root-caused 2026-07-29 at integration; re-verified after the Option B
   MAKE/MANAGE rebuild (#cc-ptr is still the popover's positioned wrapper, it
   just holds the MANAGE pill alone now). Keep the id selector. */
[data-app="canvas"] .cc-spark #bgp-pop {
  /* margin-top clears the BAR, not just the section: since v6 #cc-ptr is a
     chrome-less .cc-barsec INSIDE the one big bar card, so its 100% is ~5px
     short of the bar's own bottom edge. */
  position: absolute; top: 100%; right: 0; margin-top: 14px;
  width: min(240px, 84vw); max-height: min(380px, 62vh);
  display: flex; flex-direction: column; z-index: 2; /* above the actions pill */
  padding: 10px;
}
[data-app="canvas"] .cc-spark #bgp-pop[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  [data-app="canvas"] .cc-spark #bgp-pop { animation: cc-dropin .17s cubic-bezier(.2,.9,.3,1) both; }
}

[data-app="canvas"] .cc-spark .bgp-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

/* colors pane: swatches + transparent tile + custom picker, wrapped in a row */
[data-app="canvas"] .cc-spark .bgp-colorgrid { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px; }
[data-app="canvas"] .cc-spark .bgp-colorgrid .cc-pswatch,
[data-app="canvas"] .cc-spark .bgp-colorgrid .cc-pcustom { width: 30px; height: 30px; }
[data-app="canvas"] .cc-spark .bgp-transparent {
  background-image:
    repeating-conic-gradient(#3a3946 0% 25%, #232230 0% 50%);
  background-size: 10px 10px;
}

/* gradients / images: TWO COLUMNS, same as every tool dropdown grid since the
   2026-07-30 toolbar rebuild (canvas.css's grid override only applies inside the
   .cc-vpick picker rail, so this popover needs its own). */
[data-app="canvas"] .cc-spark .bgp-gradgrid,
[data-app="canvas"] .cc-spark .bgp-imggrid { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
[data-app="canvas"] .cc-spark .bgp-gradgrid:first-child,
[data-app="canvas"] .cc-spark .bgp-imggrid:first-child { margin-top: 0; }

[data-app="canvas"] .cc-spark .bgp-swtile {
  padding: 0; border: 2px solid #2c2b38; border-radius: 12px; overflow: hidden;
  aspect-ratio: 4 / 3; cursor: pointer; background: #1f1e28; display: block;
}
[data-app="canvas"] .cc-spark .bgp-swtile:hover { border-color: #4a4858; }
[data-app="canvas"] .cc-spark .bgp-swtile.bgp-on { border-color: #C6F542; }
[data-app="canvas"] .cc-spark .bgp-swimg { display: block; width: 100%; height: 100%; object-fit: cover; }

/* real, visible keyboard focus — canvas.css's focus-visible list doesn't cover
   .cc-pswatch/.cc-stamptabs-button/these new tiles, so this panel guarantees
   its own regardless of what any other module's CSS does. */
[data-app="canvas"] .cc-spark .bgp-pop button:focus-visible,
[data-app="canvas"] .cc-spark .bgp-pop input:focus-visible {
  outline: 3px solid #16E0E0; outline-offset: 2px;
}

/* narrow window: the panel can't be wider than the (also-narrowed) trigger
   column. Since the 2026-07-30 rebuild the actions pill is ALWAYS at the top
   (last section of #cc-topbar), so the popover always drops DOWNWARD — the old
   upward flip for the bottom-edge narrow layout is gone. */
[data-app="canvas"] .cc-spark.cc-narrow #bgp-pop { width: min(224px, 92vw); }