/* Shared page-background kit (copied verbatim from the myapps background kit). */
/* Page background — see background.js. A fixed full-screen layer under the
   page's content, tinted with two hues over the app's own page colour, so text
   and cards keep their contrast in light AND dark. Off = no data-bg = nothing.

   The app maps --app-bg-base to its own page background colour (e.g.
   `:root { --app-bg-base: var(--bg); }`); while a background is on, the body is
   made transparent and the html element carries that colour, so the layer sits
   between the two. */
:root { --app-bg-alpha: .30; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --app-bg-alpha: .36; } }
:root[data-theme="dark"] { --app-bg-alpha: .36; }
html[data-bg] { background-color: var(--app-bg-base, #f6f5fb); }
html[data-bg] body { background: transparent !important; }
.app-bg-layer { display: none; }
html[data-bg] .app-bg-layer {
  display: block; position: fixed; top: 0; left: 0; right: 0; height: 100lvh; z-index: -1;
  pointer-events: none; background: var(--app-bg-img);
}
[data-bg="0"] { --app-bg-img: linear-gradient(160deg, rgb(6 182 212 / var(--app-bg-alpha)), transparent 55%, rgb(139 92 246 / var(--app-bg-alpha))); }
[data-bg="1"] { --app-bg-img: linear-gradient(200deg, rgb(245 158 11 / var(--app-bg-alpha)), transparent 55%, rgb(239 68 68 / var(--app-bg-alpha))); }
[data-bg="2"] { --app-bg-img: linear-gradient(150deg, rgb(16 185 129 / var(--app-bg-alpha)), transparent 55%, rgb(6 182 212 / var(--app-bg-alpha))); }
[data-bg="3"] { --app-bg-img: linear-gradient(180deg, rgb(139 92 246 / var(--app-bg-alpha)), transparent 58%, rgb(239 68 68 / calc(var(--app-bg-alpha) * .8))); }
[data-bg="4"] { --app-bg-img: radial-gradient(130% 80% at 10% 0%, rgb(6 182 212 / calc(var(--app-bg-alpha) * 1.2)), transparent 70%); }
[data-bg="5"] { --app-bg-img: radial-gradient(120% 80% at 90% 5%, rgb(139 92 246 / calc(var(--app-bg-alpha) * 1.2)), transparent 72%); }
[data-bg="6"] { --app-bg-img: linear-gradient(170deg, rgb(245 158 11 / calc(var(--app-bg-alpha) * .9)), transparent 55%, rgb(139 92 246 / calc(var(--app-bg-alpha) * .9))); }
[data-bg="7"] { --app-bg-img: linear-gradient(140deg, rgb(16 185 129 / calc(var(--app-bg-alpha) * .85)), transparent 52%, rgb(245 158 11 / calc(var(--app-bg-alpha) * .85))); }

/* The Settings control drawn by AppBackground.mountPicker(). */
.app-bg-label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; }
.app-bg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
  gap: .5rem; margin-top: .6rem; }
.app-bg-swatch { --app-bg-alpha: .6; height: 3.2rem; border-radius: 12px; cursor: pointer;
  border: 1px solid rgb(127 127 127 / .35); color: inherit; font: 600 .72rem/1.1 inherit;
  background: var(--app-bg-img, none), var(--app-bg-base, #f6f5fb);
  display: flex; align-items: flex-end; justify-content: center; padding: 0 .25rem .35rem; }
.app-bg-swatch[aria-pressed="true"] { border-color: #06b6d4; box-shadow: 0 0 0 3px rgb(6 182 212 / .4); }