/* 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 {
  position: absolute; top: 100%; right: 0; margin-top: 8px;
  width: min(300px, 82vw); max-height: min(380px, 62vh);
  display: flex; flex-direction: column; z-index: 2; /* above the MANAGE 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: fill .cc-magicgrid with wider auto-fill tiles than its
   2-column default (the .cc-pdrop override in canvas.css only applies inside
   .cc-pdrop, so this panel needs its own). */
[data-app="canvas"] .cc-spark .bgp-gradgrid,
[data-app="canvas"] .cc-spark .bgp-imggrid { grid-template-columns: repeat(auto-fill, minmax(64px, 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, and .cc-ptr — the MANAGE pill — sits on the BOTTOM edge in narrow
   mode, so flip the popover to open UPWARD there. */
[data-app="canvas"] .cc-spark.cc-narrow #bgp-pop {
  width: min(260px, 92vw); top: auto; bottom: 100%; margin-top: 0; margin-bottom: 8px;
}