/* ============================================================================
   Page backgrounds — a personal setting (My profile → Background). Header ribbon by
   default, strength 50%, card blur 0%, panel opacity 50%, see-through on.

   One layer, fixed behind everything, painted in the gaps around the panels: cards,
   tiles and the grid stay solid (except Frosted glass, which is the point of that one),
   so no background ever sits behind data someone is reading.

   The same artwork renders the live layer and the small previews on the profile page:
   both are size containers (.tms-bgbox) and every measurement below is in cqw/cqh, so a
   160px preview is the whole page shrunk, not a crop of it.

   Artwork files: wwwroot/img/bg/. Each is only downloaded when chosen.
   ========================================================================== */

.tms-bgbox { container-type: size; position: relative; overflow: hidden; }

/* The live layer: fixed, under the page, never in the way of a click. z-index -1 puts it
   above the root background and below every in-flow box — see the html/body rule below. */
.tms-bgfx {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* Scrolling: the layer is fixed, so promoted to its own GPU layer and contained, the
     browser paints the artwork once and only composites it while the page moves —
     large SVGs and gradients are never re-rasterised per frame. (A transform here is
     safe: nothing on the page is inside this element.) */
  will-change: transform; transform: translateZ(0);
  contain: strict;
}

/* With a background on, the page colour moves from body to html so the layer can sit
   between the two. (A body background would paint over a z-index -1 layer.) */
:root.tms-has-bg { background: var(--tms-bg); }
:root.tms-has-bg body.tms { background: transparent; }

/* The top bar lets the background through, frosted, so the page reads as one surface. */
:root.tms-has-bg .tms-topbar {
  background: color-mix(in srgb, var(--tms-surface) 76%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
}

/* --tms-bg-strength: the design's own level, per background and theme.
   --tms-bg-boost: the person's Strength slider, 0.2-2 (1 = as designed). */
.tms-bgart {
  position: absolute; inset: 0;
  opacity: min(1, calc(var(--tms-bg-strength, 1) * var(--tms-bg-boost, 1)));
  /* Only the design's own softness (Frosted glass, Light beams). The Blur slider blurs
     the CARDS, not the background — see "frosted cards" below. */
  filter: blur(var(--art-blur, 0px));
}
:root[data-theme="light"] .tms-bgart { --tms-bg-strength: .7; }

/* ---------------------------------------------------------------- see-through panels */
/* On by default with any background (My profile → Background, the checkbox). Panels are
   translucent only — NO backdrop-filter on anything inside the page.

   A backdrop-filter (like transform or filter) makes its element the containing block for
   every position:fixed descendant. The grid's column-filter dropdowns, the select menus in
   cards and the dialogs opened from a page are all position:fixed with viewport
   coordinates, so under a blurred panel they opened offset by the panel's position — the
   Organization filter landed half a screen away from its button. The top bar keeps its
   blur: its only menu (notifications) is absolutely positioned inside it.

   Modals, menus, inputs and buttons are left solid on purpose. */
:root {
  /* Panel opacity slider (My profile): 30-100, 50 by default. Repeated items (finding
     cards, messages, tiles) stay a third of the way more solid, so long lists read well. */
  --tms-panel-o: 50;
  --tms-panel-see: calc(var(--tms-panel-o) * 1%);
  --tms-item-see: calc((var(--tms-panel-o) + (100 - var(--tms-panel-o)) * .35) * 1%);
}

:root.tms-has-bg.tms-bg-see .tms-canvas :is(.tms-card, .tms-kpi, .tms-grid-scroll, .tms-props,
    .tms-rmd-band, .tms-report-frame, .tms-perf-stat, .tms-bd-box) {
  background: color-mix(in srgb, var(--tms-surface) var(--tms-panel-see), transparent);
}
:root.tms-has-bg.tms-bg-see .tms-canvas :is(.tms-cf, .tms-msg-body, .tms-tile, .tms-card-row) {
  background: color-mix(in srgb, var(--tms-surface) var(--tms-item-see), transparent);
}
/* ---------------------------------------------------------------- frosted cards */
/* The Blur slider (My profile): 0-100% frosts the cards, 0-20px.

   The blur is NOT on the card itself. A backdrop-filter on the card would make it the
   containing block for every position:fixed thing inside it — the grid's filter
   dropdowns, select menus, dialogs — and they open in the wrong place (they did). So the
   frost lives on the card's ::after, an empty layer stretched behind its content: a
   sibling of the content, never its ancestor, so nothing inside is affected.

   Only drawn when the slider is above 0 (tms-panel-blur on <html>): a blur costs on
   every scroll frame, so 0 costs nothing. Repeated small items (messages, tiles, rows)
   never get it — hundreds of blurred boxes would make scrolling stutter. */
:where(:root.tms-has-bg.tms-bg-see.tms-panel-blur .tms-canvas) :where(.tms-card, .tms-kpi, .tms-grid-scroll, .tms-props,
    .tms-rmd-band, .tms-report-frame, .tms-perf-stat, .tms-bd-box, .tms-cf) {
  position: relative;            /* :where() = no specificity: an existing sticky/relative wins */
}
:root.tms-has-bg.tms-bg-see.tms-panel-blur .tms-canvas :is(.tms-card, .tms-kpi, .tms-grid-scroll, .tms-props,
    .tms-rmd-band, .tms-report-frame, .tms-perf-stat, .tms-bd-box, .tms-cf)::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  -webkit-backdrop-filter: blur(calc(var(--tms-panel-blur, 0) * .2px));
  backdrop-filter: blur(calc(var(--tms-panel-blur, 0) * .2px));
}
/* Frosted glass's own design always frosts — at the slider's level, or a light frost at 0. */
:root.tms-has-bg[data-bg="glass"]:not(.tms-panel-blur) .tms-canvas :where(.tms-card, .tms-kpi, .tms-grid-scroll, .tms-props,
    .tms-rmd-band, .tms-report-frame, .tms-perf-stat, .tms-bd-box, .tms-cf) { position: relative; }
:root.tms-has-bg[data-bg="glass"]:not(.tms-panel-blur) .tms-canvas :is(.tms-card, .tms-kpi, .tms-grid-scroll, .tms-props,
    .tms-rmd-band, .tms-report-frame, .tms-perf-stat, .tms-bd-box, .tms-cf)::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* The grid's sticky header scrolls over rows, and its cells hold the filter dropdowns:
   kept nearly solid, and never blurred (see above). */
:root.tms-has-bg.tms-bg-see .tms-canvas .tms-grid-table thead th {
  background: color-mix(in srgb, var(--tms-surface) 94%, transparent);
}

.tms-bgstrength { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.tms-bgstrength b { font-size: var(--tms-fs-data); font-weight: 600; min-width: 64px; }
.tms-bgstrength input[type=range] { flex: 1 1 220px; max-width: 360px; accent-color: var(--tms-accent); }
.tms-bgstrength output { font-family: var(--tms-font-mono); font-size: var(--tms-fs-data); min-width: 44px; text-align: right; }

.tms-bgsee { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; cursor: pointer; }
.tms-bgsee input { margin-top: 3px; accent-color: var(--tms-accent); }
.tms-bgsee > span { display: flex; flex-direction: column; gap: 2px; }
.tms-bgsee b { font-size: var(--tms-fs-data); font-weight: 600; }
.tms-bgsee:has(input:disabled) { cursor: default; opacity: .7; }

/* ---------------------------------------------------------------- 1 halftone glow */
.tms-bgart[data-bgv="halftone"] {
  background:
    url("../img/bg/halftone.svg") no-repeat right -16cqw top -34cqw / 58cqw 58cqw,
    radial-gradient(45cqw 45cqw at 88% 4%, rgba(49,176,163,.16), transparent 70%);
  -webkit-mask-image: radial-gradient(70cqw 70cqw at 92% 0%, #000 20%, rgba(0,0,0,.45) 50%, transparent 75%);
  mask-image: radial-gradient(70cqw 70cqw at 92% 0%, #000 20%, rgba(0,0,0,.45) 50%, transparent 75%);
}
:root[data-theme="dark"] .tms-bgart[data-bgv="halftone"] { --tms-bg-strength: .45; }
:root[data-theme="light"] .tms-bgart[data-bgv="halftone"] { --tms-bg-strength: .3; }

/* ---------------------------------------------------------------- 2 aurora */
.tms-bgart[data-bgv="aurora"] {
  background:
    radial-gradient(70cqw 60cqh at 0% 0%, rgba(49,176,163,.22), transparent 70%),
    radial-gradient(60cqw 70cqh at 100% 100%, rgba(54,98,209,.22), transparent 70%),
    radial-gradient(40cqw 40cqh at 85% 10%, rgba(107,72,192,.13), transparent 70%);
}

/* ---------------------------------------------------------------- 3 dot grid */
.tms-bgart[data-bgv="dotgrid"] {
  --dot: rgba(255,255,255,.11);
  background:
    radial-gradient(circle, var(--dot) 1px, transparent 1.4px) 0 0 / max(14px, 1.1cqw) max(14px, 1.1cqw),
    radial-gradient(80cqw 70cqh at 50% 0%, rgba(49,176,163,.09), transparent 70%);
  -webkit-mask-image: linear-gradient(#000, rgba(0,0,0,.3));
  mask-image: linear-gradient(#000, rgba(0,0,0,.3));
}
:root[data-theme="light"] .tms-bgart[data-bgv="dotgrid"] { --dot: rgba(30,40,80,.16); }

/* ---------------------------------------------------------------- 4 header ribbon */
.tms-bgart[data-bgv="ribbon"] {
  background:
    radial-gradient(circle, rgba(110,143,240,.45) 1px, transparent 1.5px) 0 0 / max(9px, .7cqw) max(9px, .7cqw),
    linear-gradient(115deg, transparent 18%, rgba(49,176,163,.24) 38%, rgba(54,98,209,.28) 62%, transparent 82%);
  -webkit-mask-image: linear-gradient(#000 0, #000 22%, transparent 48%);
  mask-image: linear-gradient(#000 0, #000 22%, transparent 48%);
}

/* ---------------------------------------------------------------- 5 constellation */
.tms-bgart[data-bgv="constellation"] {
  background: url("../img/bg/constellation.svg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(#000, rgba(0,0,0,.2));
  mask-image: linear-gradient(#000, rgba(0,0,0,.2));
}
:root[data-theme="dark"] .tms-bgart[data-bgv="constellation"] { --tms-bg-strength: .7; }
:root[data-theme="light"] .tms-bgart[data-bgv="constellation"] { --tms-bg-strength: .5; }

/* ---------------------------------------------------------------- 6 topographic */
.tms-bgart[data-bgv="topo"] {
  background: url("../img/bg/topo.svg") right top / cover no-repeat;
}
:root[data-theme="dark"] .tms-bgart[data-bgv="topo"] { --tms-bg-strength: .7; }
:root[data-theme="light"] .tms-bgart[data-bgv="topo"] { --tms-bg-strength: .55; }

/* ---------------------------------------------------------------- 7 frosted glass */
.tms-bgart[data-bgv="glass"] {
  background:
    radial-gradient(38cqw 50cqh at 18% 30%, rgba(49,176,163,.5), transparent 70%),
    radial-gradient(40cqw 55cqh at 80% 75%, rgba(54,98,209,.55), transparent 70%),
    radial-gradient(30cqw 40cqh at 70% 12%, rgba(107,72,192,.4), transparent 70%);
  --art-blur: 2cqw;
}
:root[data-theme="light"] .tms-bgart[data-bgv="glass"] { --tms-bg-strength: .55; }

/* The panels themselves turn to frosted glass — always with this background, whatever the
   see-through setting, and clearer than that setting's panels. Same specificity as the
   see-through rule and later in the file, so this one wins. */
:root.tms-has-bg[data-bg="glass"] .tms-canvas :is(.tms-card, .tms-kpi, .tms-grid-scroll, .tms-props,
    .tms-rmd-band, .tms-report-frame, .tms-perf-stat, .tms-bd-box) {
  /* Translucent, not blurred — a blur here breaks every dropdown and dialog inside the
     panel (see "see-through panels" above). The art behind is soft already. */
  background: color-mix(in srgb, var(--tms-surface) var(--tms-panel-see), transparent);
}

/* ---------------------------------------------------------------- 8 circuit */
.tms-bgart[data-bgv="circuit"] {
  background: url("../img/bg/circuit.svg") 0 0 / max(800px, 50cqw) auto repeat;
  -webkit-mask-image: linear-gradient(160deg, #000, rgba(0,0,0,.25));
  mask-image: linear-gradient(160deg, #000, rgba(0,0,0,.25));
}
:root[data-theme="dark"] .tms-bgart[data-bgv="circuit"] { --tms-bg-strength: .6; }
:root[data-theme="light"] .tms-bgart[data-bgv="circuit"] { --tms-bg-strength: .45; }

/* ---------------------------------------------------------------- 9 horizon grid */
/* Drawn as an SVG rather than a CSS perspective transform: at page scale the transformed
   1px lines collapsed into rows of dots. */
.tms-bgart[data-bgv="horizon"] {
  background:
    url("../img/bg/horizon.svg") center bottom / 100% 40cqh no-repeat,
    radial-gradient(70cqw 30cqh at 50% 100%, rgba(49,176,163,.3), transparent 70%);
}
.tms-bgart[data-bgv="horizon"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 40cqh; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(92,207,193,.7), transparent);
}
:root[data-theme="dark"] .tms-bgart[data-bgv="horizon"] { --tms-bg-strength: .75; }
:root[data-theme="light"] .tms-bgart[data-bgv="horizon"] { --tms-bg-strength: .5; }

/* ---------------------------------------------------------------- 10 geometric tiles */
.tms-bgart[data-bgv="tiles"] {
  background: url("../img/bg/tiles.svg") 0 0 / max(40px, 2.6cqw) auto repeat;
  -webkit-mask-image: linear-gradient(135deg, #000, rgba(0,0,0,.15) 80%);
  mask-image: linear-gradient(135deg, #000, rgba(0,0,0,.15) 80%);
}
:root[data-theme="dark"] .tms-bgart[data-bgv="tiles"] { --tms-bg-strength: .28; }
:root[data-theme="light"] .tms-bgart[data-bgv="tiles"] { --tms-bg-strength: .3; }

/* ---------------------------------------------------------------- 11 spotlight and grain */
/* --tms-mx / --tms-my follow the mouse (tms-interop.js); the preview keeps the default. */
.tms-bgart[data-bgv="spotlight"] {
  background: radial-gradient(28cqw circle at var(--tms-mx, 70%) var(--tms-my, 30%), rgba(49,176,163,.4), transparent 70%);
}
.tms-bgart[data-bgv="spotlight"]::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/bg/grain.svg") 0 0 / 240px 240px repeat;
  opacity: .14;
}
:root[data-theme="dark"] .tms-bgart[data-bgv="spotlight"] { --tms-bg-strength: .55; }
:root[data-theme="light"] .tms-bgart[data-bgv="spotlight"] { --tms-bg-strength: .35; }

/* ---------------------------------------------------------------- 12 waves */
.tms-bgart[data-bgv="waves"] {
  background: url("../img/bg/waves.svg") center bottom / 100% 26cqh no-repeat;
}
:root[data-theme="dark"] .tms-bgart[data-bgv="waves"] { --tms-bg-strength: .45; }
:root[data-theme="light"] .tms-bgart[data-bgv="waves"] { --tms-bg-strength: .28; }

/* ---------------------------------------------------------------- 13 bokeh */
.tms-bgart[data-bgv="bokeh"] { background: url("../img/bg/bokeh.svg") center / cover no-repeat; }
:root[data-theme="dark"] .tms-bgart[data-bgv="bokeh"] { --tms-bg-strength: .55; }
:root[data-theme="light"] .tms-bgart[data-bgv="bokeh"] { --tms-bg-strength: .4; }

/* ---------------------------------------------------------------- 14 honeycomb */
/* The mesh is a repeating tile; the lit cells are one larger image drawn on the SAME
   lattice and pinned to the same origin, so they always land exactly on a cell. */
.tms-bgart[data-bgv="honeycomb"] {
  background:
    url("../img/bg/honeycomb-lit.svg") 0 0 / 1524.2px 792px repeat,
    url("../img/bg/honeycomb.svg") 0 0 / 38.1px 66px repeat;
  -webkit-mask-image: linear-gradient(150deg, #000, rgba(0,0,0,.2) 85%);
  mask-image: linear-gradient(150deg, #000, rgba(0,0,0,.2) 85%);
}
:root[data-theme="dark"] .tms-bgart[data-bgv="honeycomb"] { --tms-bg-strength: .45; }
:root[data-theme="light"] .tms-bgart[data-bgv="honeycomb"] { --tms-bg-strength: .4; }

/* ---------------------------------------------------------------- 15 blueprint */
.tms-bgart[data-bgv="blueprint"] {
  --bp: rgba(110,143,240,.10); --bp-major: rgba(110,143,240,.22); --bp-wash: rgba(14,42,85,.38);
  background:
    url("../img/bg/blueprint.svg") center / cover no-repeat,
    linear-gradient(var(--bp-major) 1px, transparent 1px) 0 0 / 75px 75px,
    linear-gradient(90deg, var(--bp-major) 1px, transparent 1px) 0 0 / 75px 75px,
    linear-gradient(var(--bp) 1px, transparent 1px) 0 0 / 15px 15px,
    linear-gradient(90deg, var(--bp) 1px, transparent 1px) 0 0 / 15px 15px,
    linear-gradient(var(--bp-wash), var(--bp-wash));
}
:root[data-theme="light"] .tms-bgart[data-bgv="blueprint"] {
  --tms-bg-strength: .55; --bp: rgba(54,98,209,.12); --bp-major: rgba(54,98,209,.24); --bp-wash: rgba(54,98,209,.06);
}

/* ---------------------------------------------------------------- 16 data rain */
.tms-bgart[data-bgv="rain"] {
  background: url("../img/bg/rain.svg") 0 0 / 600px 600px repeat;
  -webkit-mask-image: linear-gradient(#000, transparent 80%);
  mask-image: linear-gradient(#000, transparent 80%);
}
:root[data-theme="dark"] .tms-bgart[data-bgv="rain"] { --tms-bg-strength: .45; }
:root[data-theme="light"] .tms-bgart[data-bgv="rain"] { --tms-bg-strength: .35; }

/* ---------------------------------------------------------------- 17 light beams */
.tms-bgart[data-bgv="beams"] {
  background: conic-gradient(from 105deg at -5% -10%,
    transparent 0deg, rgba(49,176,163,.24) 8deg, transparent 14deg,
    transparent 20deg, rgba(54,98,209,.24) 27deg, transparent 34deg,
    transparent 40deg, rgba(107,72,192,.2) 46deg, transparent 54deg, transparent 360deg);
  --art-blur: .4cqw;
}
:root[data-theme="light"] .tms-bgart[data-bgv="beams"] { --tms-bg-strength: .55; }

/* ---------------------------------------------------------------- 18 linen */
.tms-bgart[data-bgv="linen"] {
  --thread: rgba(255,255,255,.035);
  background:
    repeating-linear-gradient(0deg, var(--thread) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, var(--thread) 0 1px, transparent 1px 4px),
    radial-gradient(80cqw 70cqh at 50% 40%, rgba(49,176,163,.08), transparent 70%);
}
:root[data-theme="light"] .tms-bgart[data-bgv="linen"] { --thread: rgba(40,40,70,.045); }

/* ---------------------------------------------------------------- 19 mountains */
.tms-bgart[data-bgv="mountains"] { background: url("../img/bg/mountains.svg") center bottom / 100% 30cqh no-repeat; }
:root[data-theme="dark"] .tms-bgart[data-bgv="mountains"] { --tms-bg-strength: .32; }
:root[data-theme="light"] .tms-bgart[data-bgv="mountains"] { --tms-bg-strength: .22; }

/* ---------------------------------------------------------------- 20 orbits */
.tms-bgart[data-bgv="orbits"] { background: url("../img/bg/orbits.svg") right top / cover no-repeat; }
:root[data-theme="dark"] .tms-bgart[data-bgv="orbits"] { --tms-bg-strength: .55; }
:root[data-theme="light"] .tms-bgart[data-bgv="orbits"] { --tms-bg-strength: .45; }

/* ---------------------------------------------------------------- 21 truchet arcs */
.tms-bgart[data-bgv="truchet"] {
  background: url("../img/bg/truchet.svg") 0 0 / 288px 288px repeat;
  -webkit-mask-image: linear-gradient(135deg, #000, rgba(0,0,0,.15) 85%);
  mask-image: linear-gradient(135deg, #000, rgba(0,0,0,.15) 85%);
}
:root[data-theme="dark"] .tms-bgart[data-bgv="truchet"] { --tms-bg-strength: .35; }
:root[data-theme="light"] .tms-bgart[data-bgv="truchet"] { --tms-bg-strength: .35; }

/* ---------------------------------------------------------------- 22 halftone wave */
.tms-bgart[data-bgv="htwave"] { background: url("../img/bg/htwave.svg") center / cover no-repeat; }
:root[data-theme="dark"] .tms-bgart[data-bgv="htwave"] { --tms-bg-strength: .4; }
:root[data-theme="light"] .tms-bgart[data-bgv="htwave"] { --tms-bg-strength: .3; }

/* Previews: tiles drawn at page size would show one cell in a thumbnail. */
.tms-bgprev .tms-bgart[data-bgv="honeycomb"] { background-size: 762px 396px, 19px 33px; }
.tms-bgprev .tms-bgart[data-bgv="rain"] { background-size: 240px 240px; }
.tms-bgprev .tms-bgart[data-bgv="truchet"] { background-size: 144px 144px; }
.tms-bgprev .tms-bgart[data-bgv="mountains"] { background-size: 100% 46cqh; }
.tms-bgprev .tms-bgart[data-bgv="orbits"] { background-size: 260% auto; background-position: 100% 0; }

/* ---------------------------------------------------------------- 23-24 hexagon glow / neon */
/* Ported from Tharsol Mail (wwwroot/css/textures.css), so the two products share it.
   Unlike every other background this one is laid OVER the whole window — panels
   included — and blended in: "screen" lightens in dark theme, "multiply" darkens in
   light theme, so the honeycomb reads through everything at a faint 20% (15% in light).
   Clicks go straight through it. */
:root { --tms-hex-tile: url("../img/bg/hexagon-light.svg"); --tms-hex-base: #fff; --tms-hex-blend: multiply; --tms-hex-o: .15; }
:root[data-theme="dark"] { --tms-hex-tile: url("../img/bg/hexagon-dark.svg"); --tms-hex-base: #000; --tms-hex-blend: screen; --tms-hex-o: .2; }

:root[data-bg="hexglow"] .tms-bgfx,
:root[data-bg="hexneon"] .tms-bgfx {
  z-index: 2147483000;
  opacity: min(1, calc(var(--tms-hex-o) * var(--tms-bg-boost, 1)));
  mix-blend-mode: var(--tms-hex-blend);
}
:root .tms-bgart[data-bgv="hexglow"],
:root .tms-bgart[data-bgv="hexneon"] { --tms-bg-strength: 1; background-color: var(--tms-hex-base); }

.tms-bgart[data-bgv="hexglow"] {
  background-image: var(--tms-hex-tile),
    radial-gradient(30% 50% at 16% 25%, rgb(60,130,255), transparent 72%),
    radial-gradient(28% 46% at 46% 85%, rgb(34,200,220), transparent 72%),
    radial-gradient(28% 50% at 84% 35%, rgb(150,110,255), transparent 72%);
  background-size: 102px 58.89px, 100% 100%, 100% 100%, 100% 100%;
}
.tms-bgart[data-bgv="hexneon"] {
  background-image: var(--tms-hex-tile),
    radial-gradient(30% 50% at 16% 25%, rgb(47,140,255), transparent 72%),
    radial-gradient(28% 46% at 46% 85%, rgb(95,212,42), transparent 72%),
    radial-gradient(28% 50% at 84% 35%, rgb(232,52,74), transparent 72%);
  background-size: 102px 58.89px, 100% 100%, 100% 100%, 100% 100%;
}

/* Previews: the same blend, over the mock panel too, a little stronger to be seen. */
.tms-bgprev .tms-bgart[data-bgv="hexglow"],
.tms-bgprev .tms-bgart[data-bgv="hexneon"] {
  z-index: 1; mix-blend-mode: var(--tms-hex-blend); opacity: min(1, calc(var(--tms-hex-o) * 1.8 * var(--tms-bg-boost, 1)));
  background-size: 51px 29.45px, 100% 100%, 100% 100%, 100% 100%;
}

/* ---------------------------------------------------------------- the picker (My profile) */
.tms-bgpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tms-bgopt {
  display: flex; flex-direction: column; gap: 6px; padding: 6px; text-align: left;
  border: 1px solid var(--tms-border); border-radius: var(--tms-r); background: var(--tms-surface);
  color: var(--tms-text); font: inherit; cursor: pointer;
  transition: border-color var(--tms-fast), box-shadow var(--tms-fast);
}
.tms-bgopt:hover { border-color: var(--tms-border-strong); }
.tms-bgopt[aria-pressed="true"] { border-color: var(--tms-accent); box-shadow: 0 0 0 2px var(--tms-accent-line); }
.tms-bgprev { display: block; height: 84px; border-radius: 6px; background: var(--tms-bg); border: 1px solid var(--tms-border); }
/* A hint of the page inside each preview, so the art is judged around panels, not alone. */
.tms-bgprev::after {
  content: ""; position: absolute; left: 12%; right: 8%; top: 30%; bottom: 14%;
  border-radius: 4px; background: var(--tms-surface); border: 1px solid var(--tms-border);
}
:root[data-bg="glass"] .tms-bgprev[data-glass]::after,
.tms-bgprev[data-glass]::after { background: color-mix(in srgb, var(--tms-surface) var(--tms-panel-see), transparent); }
/* The mock panel in each preview shows the card blur too (a thumbnail has no popups). */
:root.tms-panel-blur .tms-bgprev::after { -webkit-backdrop-filter: blur(calc(var(--tms-panel-blur, 0) * .05px)); backdrop-filter: blur(calc(var(--tms-panel-blur, 0) * .05px)); }
/* Every preview's mock panel follows the opacity slider while see-through is on. */
:root.tms-bg-see .tms-bgprev::after { background: color-mix(in srgb, var(--tms-surface) var(--tms-panel-see), transparent); }
.tms-bgopt-n { font-size: var(--tms-fs-data); font-weight: 600; padding: 0 2px; }
.tms-bgopt-d { font-size: var(--tms-fs-cap); color: var(--tms-text-3); padding: 0 2px 2px; line-height: 1.4; }

@media (prefers-reduced-transparency: reduce) {
  :root.tms-has-bg.tms-bg-see .tms-canvas :is(.tms-card, .tms-kpi, .tms-grid-scroll, .tms-props,
      .tms-rmd-band, .tms-report-frame, .tms-perf-stat, .tms-bd-box, .tms-cf, .tms-msg-body,
      .tms-tile, .tms-card-row),
  :root.tms-has-bg.tms-bg-see .tms-canvas .tms-grid-table thead th,
  :root.tms-has-bg .tms-topbar,
  :root.tms-has-bg[data-bg="glass"] .tms-canvas :is(.tms-card, .tms-kpi, .tms-grid-scroll, .tms-props,
      .tms-rmd-band, .tms-report-frame, .tms-perf-stat, .tms-bd-box) { background: var(--tms-surface); }
}

/* Previews are the whole page shrunk to a thumbnail, where fine line art all but
   disappears. Shown a little stronger, and the line-art ones as a closer crop, so each
   thumbnail looks like what it will be on the page. */
.tms-bgprev .tms-bgart {
  opacity: min(1, calc(var(--tms-bg-strength, 1) * 1.6 * var(--tms-bg-boost, 1)));
  filter: blur(var(--art-blur, 0px));
}
.tms-bgprev .tms-bgart[data-bgv="constellation"] { background-size: 320% auto; background-position: 30% 20%; }
.tms-bgprev .tms-bgart[data-bgv="topo"] { background-size: 280% auto; background-position: 100% 0; }
.tms-bgprev .tms-bgart[data-bgv="circuit"] { background-size: 240px auto; }

@media (prefers-reduced-transparency: reduce) {
  .tms-canvas :is(.tms-card, .tms-kpi, .tms-grid-scroll, .tms-props,
    .tms-rmd-band, .tms-report-frame, .tms-perf-stat, .tms-bd-box, .tms-cf)::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}