/* Bloodhail skins. One block per theme; only what differs from the defaults in
   css/app.css (:root, which is the Aurora skin). <html data-theme="…"> picks one. */

:root[data-theme="wolves_aur"] {
  --bg-image: url("/bg_wolves_aur.jpg");
  --bg-pos:   center 50%;
}

:root[data-theme="fox_snow"] {
  --bg-image:      url("/bg_snow_leopard.jpg");
  --bg-pos:        center 40%;
  --search-bg:     rgba(26,38,50,0.38);
  --search-border: rgba(255,255,255,0.22);
  --search-focus:  rgba(120,184,212,0.40);
  --card-bg:       rgba(18,26,38,0.62);
  --card-border:   rgba(255,255,255,0.16);
  --title-shadow:  0 0 5px rgba(0,0,0,0.7), 0 0 12px rgba(0,0,0,0.4);
  --sub-shadow:    0 0 4px rgba(0,0,0,0.55), 0 0 10px rgba(0,0,0,0.3);
}

:root[data-theme="fox_pup"] {
  --accent:   #88a0c0;
  --accent2:  #687898;
  --accent3:  #485878;
  --accentlo: rgba(136,160,192,0.10);
  --pale:     #ccd4e0;
  --dim:      rgba(170,190,215,0.35);
  --text:     #8898b0;
  --text2:    #485870;
  --bg-image:      url("/bg_fox_pup.jpg");
  --bg-pos:        center 75%;
  --search-bg:     rgba(38,44,58,0.46);
  --search-border: rgba(255,255,255,0.26);
  --search-focus:  rgba(120,184,212,0.30);
  --card-bg:       rgba(20,26,36,0.60);
  --card-border:   rgba(255,255,255,0.15);
  --title-shadow:  0 0 4px rgba(0,0,0,0.4), 0 0 10px rgba(0,0,0,0.2);
  --sub-shadow:    0 0 4px rgba(0,0,0,0.55), 0 0 10px rgba(0,0,0,0.3);
}

:root[data-theme="coyote"] {
  --bg-image:      url("/bg_coyote.jpg");
  --bg-pos:        center 50%;
  /* dark metallic grey with only a hint of blue (the day's greys, at night) */
  --text:          #a4b4c0;
  --text2:         #8595a2;
  --pale:          #d4dee6;
  --search-bg:     rgba(30,33,38,0.95);
  --search-focus:  rgba(120,184,212,0.32);
  --card-bg:       rgba(26,29,34,0.95);
  --gls-blur:      none;
  --gls-shadow:    none;
  --card-border:   rgba(255,255,255,0.15);
  --sub-shadow:    0 0 4px rgba(0,0,0,0.55), 0 0 10px rgba(0,0,0,0.3);
}

/* WebP wallpapers (a quarter of the JPEG weight) where image-set() with type() is understood */
@supports (background-image: image-set(url("/bg_coyote.webp") type("image/webp"))) {
  :root[data-theme="coyote"] { --bg-image: image-set(url("/bg_coyote.webp") type("image/webp"), url("/bg_coyote.jpg") type("image/jpeg")); }
}

/* Night Trail surfaces: metal, not glass (the day's plates, in the dark): opaque graphite
   with a hint of blue, a faint brushed sheen at the top, crisp hairlines, little shadow */
/* cards: the panel (css/app.css), the access screen's card */
:root[data-theme="coyote"] .vp-card, :root[data-theme="coyote"] .vp-card:hover { background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--vc) 10%, transparent) 0%, transparent 45%), linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 55%), var(--panel-bg); box-shadow: var(--panel-lift), var(--panel-hl); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-theme="coyote"] .search-wrap { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 55%), var(--search-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-theme="coyote"] body.searched #app-header { background: #0e1013; }
:root[data-theme="coyote"] body.searched::before { background: rgba(10,12,15,0.42); }
:root[data-theme="coyote"] .type-chip, :root[data-theme="coyote"] .hist-chip { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 55%), rgba(30,33,38,0.95); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
:root[data-theme="coyote"] body.searched #app-header { background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 60%), #0e1013; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Night Trail: the source rows read at a glance (brighter summaries and names) */
:root[data-theme="coyote"] .card-summary, :root[data-theme="coyote"] .card.card-collapsed:not(.vp-card) .card-summary { color: #cdd6dd; }
:root[data-theme="coyote"] .source-name-cap { color: #eef3f6; }
:root[data-theme="coyote"] .card .sv { color: #e3e9ee; }
:root[data-theme="coyote"] .card .sl, :root[data-theme="coyote"] .svc-label { color: #a9b7c2; }

/* ── Snow Leopard: the night's surfaces over the snow leopard, set back as on the access
   screen (blurred, dimmed, a little less colour, a vignette); a step further once a scan is open ── */
:root[data-theme][data-bg="snow"] { --bg-image: none; }
:root[data-theme][data-bg="snow"] body { background: #2a2c2f; }
:root[data-theme][data-bg="snow"] body::before { inset: -30px; background: #2a2c2f url("/bg_snow_leopard.webp") 75% 40% / cover no-repeat; filter: blur(2px) brightness(0.48) saturate(0.85); transform: scale(1.05); -webkit-backdrop-filter: none; backdrop-filter: none; transition: filter .5s ease; }
:root[data-theme][data-bg="snow"] body.searched::before { background: #2a2c2f url("/bg_snow_leopard.webp") 75% 40% / cover no-repeat; filter: blur(5px) brightness(0.36) saturate(0.7); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-theme][data-bg="snow"] body::after { background: radial-gradient(110% 85% at 50% 42%, rgba(5,6,8,0) 30%, rgba(5,6,8,0.7) 100%), linear-gradient(180deg, rgba(5,6,8,0.25), rgba(5,6,8,0) 30%, rgba(5,6,8,0.35)); }

/* ── Brightness (Themes › Brightness, or ?bright=1-3): the same night with more light in it.
   The photo behind is dimmed less and its vignette is lighter, the surfaces sit a few steps up
   from black, the lines and the text a little brighter. Hues, glass and contrast stay as they are. */
:root[data-theme][data-bright="1"] { --gbg: #12171b; --bp: .56; --bps: .44; --bv: .55; --s1: #181c22; --s2: rgba(16,19,24,0.93); --s3: #15191d; --hdr: rgba(15,18,22,0.8);
  --text: #c0ccd5; --text2: #a0aeb9; --pale: #eef2f5; --panel-bg: rgba(14,17,21,0.95); --panel-line: rgba(255,255,255,0.14); --card-bg: rgba(28,32,38,0.95); --search-bg: rgba(30,34,40,0.95); }
:root[data-theme][data-bright="2"] { --gbg: #14191e; --bp: .64; --bps: .55; --bv: .42; --s1: #1c2128; --s2: rgba(17,21,26,0.94); --s3: #171b20; --hdr: rgba(17,21,26,0.84);
  --text: #cad5dd; --text2: #a9b7c2; --pale: #f2f5f8; --panel-bg: rgba(15,18,23,0.95); --panel-line: rgba(255,255,255,0.15); --card-bg: rgba(30,35,41,0.96); --search-bg: rgba(32,37,44,0.96); }
:root[data-theme][data-bright="3"] { --gbg: #171c22; --bp: .72; --bps: .62; --bv: .3; --s1: #20262d; --s2: rgba(20,24,30,0.94); --s3: #1a1f25; --hdr: rgba(20,24,30,0.86);
  --text: #d2dce3; --text2: #b1bfc9; --pale: #f5f8fa; --panel-bg: rgba(17,21,26,0.95); --panel-line: rgba(255,255,255,0.16); --card-bg: rgba(34,40,47,0.96); --search-bg: rgba(36,42,50,0.96); }
/* the photo: less dimmed, a lighter vignette (Snow Leopard); a lighter veil (Coyote) */
:root[data-theme][data-bg="snow"][data-bright] body::before { filter: blur(2px) brightness(var(--bp)) contrast(1.07) saturate(1); }
:root[data-theme][data-bg="snow"][data-bright] body.searched::before { filter: blur(5px) brightness(var(--bps)) contrast(1.07) saturate(0.95); }
:root[data-theme][data-bg="snow"][data-bright] body::after { background: radial-gradient(110% 85% at 50% 42%, rgba(5,6,8,0) 30%, rgba(5,6,8,var(--bv)) 100%), linear-gradient(180deg, rgba(5,6,8,calc(var(--bv) * .35)), rgba(5,6,8,0) 30%, rgba(5,6,8,calc(var(--bv) * .5))); }
:root[data-theme]:not([data-bg="snow"])[data-bright] body::after { background: radial-gradient(ellipse 120% 115% at 50% 45%, transparent 30%, rgba(4,5,7,calc(var(--bv) * .7)) 100%); }
:root[data-theme]:not([data-bg="snow"])[data-bright] body.searched { backdrop-filter: blur(2.5px) brightness(1); -webkit-backdrop-filter: blur(2.5px) brightness(1); }
/* the surfaces */
:root[data-bright] .vp-tile { background: var(--s1); }
:root[data-bright] .vp-tiles { background: rgba(255,255,255,0.1); }
:root[data-bright] .hp-card, :root[data-bright] .hp-head, :root[data-bright] .hp-sec, :root[data-bright] .hp-notes,
:root[data-bright] .g-info, :root[data-bright] .tab-menu, :root[data-bright] .hunt-pop, :root[data-bright] .td-box, :root[data-bright] .td-h, :root[data-bright] .g-geo-side { background: var(--s2); }
:root[data-bright] .g-canvas { background: var(--gbg); }
:root[data-bright] .hp-map svg { background: var(--s3); }
:root[data-bright] .g-bg { fill: var(--gbg); }
:root[data-bright] #tabs-bar { background: var(--hdr); }
:root[data-bright] body.searched #app-header { background: var(--hdr); }
/* the home page over a brighter photo: its lists sit on a surface, its labels carry a shadow */
:root[data-bright] .hist-list { background: var(--s2); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
:root[data-bright] .hist-why, :root[data-bright] .hist-at { color: var(--text); opacity: 1; }
:root[data-bright] .hist-n, :root[data-bright] .hist-k, :root[data-bright] .hist-clear { color: var(--pale); }
:root[data-bright] .hist-h, :root[data-bright] .hb-greet, :root[data-bright] .hb-clock, :root[data-bright] .hb-sub, :root[data-bright] .type-chip { text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 10px rgba(0,0,0,0.55); }
:root[data-bright] .tab.on { background: var(--s1); }
/* the brightness picker, under the themes */
.hdr-bright { display: flex; align-items: center; gap: 4px; margin-top: 4px; padding: 8px 10px 6px; border-top: 1px solid rgba(255,255,255,0.08); font: 11px var(--mono); color: var(--text2); }
.hdr-bright span { margin-right: auto; padding-right: 10px; letter-spacing: .04em; }
.hdr-menu .hdr-bright button { display: inline-grid; place-items: center; width: 24px; height: 22px; padding: 0; border: 1px solid rgba(255,255,255,0.14); font: 11px var(--mono); color: var(--text); }
.hdr-menu .hdr-bright button.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
:root[data-bright] .vp-card > .vp-head, :root[data-bright] .vp-card.vp-stuck > .vp-head { background: var(--s1); }
:root[data-bright] .vp-A .vp-sec, :root[data-bright] .vp-finds { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.11); }
:root[data-bright] .g-tools { background: rgba(255,255,255,0.03); }
:root[data-bright] .hdr-menu, :root[data-bright] .acc-modal, :root[data-bright] .acc-box { background-color: var(--s1); }

/* ── Every theme: dark glass (it began with Snow Leopard). The surfaces let the photo through, blurred and dimmed first (so the
   text keeps its contrast whatever is behind), a hairline around and a soft light on the top edge.
   Lists and menus are a little denser; the graph keeps its own solid field. ── */
:root[data-theme][data-bg] {
  --glass: rgba(13,17,23,0.54); --glass-2: rgba(13,17,23,0.68);
  --glass-blur: blur(18px) saturate(1.45) brightness(0.62);
  --glass-line: rgba(255,255,255,0.14); --glass-hl: inset 0 1px 0 rgba(255,255,255,0.09); --glass-lift: 0 14px 34px rgba(0,0,0,0.26);
}
:root[data-bg] .search-wrap, :root[data-bg] .hist-row, :root[data-bg] .type-chip, :root[data-bg] .hb-bar, :root[data-bg] .ha-bar, :root[data-bg] .ha-list,
:root[data-bg] .vp-card, :root[data-bg] .vp-card:hover, :root[data-bg] .hp-head, :root[data-bg] .hp-notes, :root[data-bg] .hp-card, :root[data-bg] .hp-sec,
:root[data-bg] #tabs-bar {
  background-color: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-color: var(--glass-line);
}
:root[data-bg] .search-wrap, :root[data-bg] .vp-card, :root[data-bg] .vp-card:hover { box-shadow: var(--glass-hl), var(--glass-lift); }
:root[data-bg] .search-wrap { background-image: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 60%); }
:root[data-bg] .vp-card, :root[data-bg] .vp-card:hover { background-image: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--vc) 12%, transparent) 0%, transparent 45%), linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%); }
:root[data-bg] #tabs-bar { background-color: var(--glass); background-image: none; }
/* the tabs on the glass strip stay solid plates */
:root[data-bg] .tab { background: #14181d; border-color: rgba(255,255,255,0.07); }
:root[data-bg] .tab:hover { background: #1a1f25; }
:root[data-bg] .tab.on { background: var(--s1, #1c2128); border-color: rgba(255,255,255,0.14); }
/* inside the glass: a breath of light, not another slab */
:root[data-bg] .vp-tile { background: rgba(255,255,255,0.035); }
:root[data-bg] .vp-tiles { background: rgba(255,255,255,0.08); }
:root[data-bg] .vp-card > .vp-head, :root[data-bg] .vp-card.vp-stuck > .vp-head { background: transparent; }
:root[data-bg] .vp-card.vp-stuck > .vp-head { background-color: var(--glass-2); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
:root[data-bg] .hist-list, :root[data-bg] .th-tab { background: rgba(255,255,255,0.03); box-shadow: none; }
/* the home page: each part on its own pane (the greeting and the clock, the search under them, the
   open tabs, the recent analyses, the hunts), so nothing is written straight on the photo */
:root[data-bg] .hb-row { margin-bottom: 8px; padding: 0 2px; }
:root[data-bg] .hb-greet, :root[data-bg] .hb-clock { opacity: 1; color: #f2f5f8; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.8), 0 0 18px rgba(0,0,0,0.5); }
:root[data-bg] .hist-row { padding: 9px 10px 10px; border: 1px solid var(--glass-line); box-shadow: var(--glass-hl), var(--glass-lift); }
:root[data-bg] .hist-h, :root[data-bg] .type-chip { text-shadow: none; }
:root[data-bg] .type-chip { color: #d6e0e7; }
:root[data-bg] .type-chip:hover { background-color: rgba(120,184,212,0.18); }
/* the menus over it: denser glass */
:root[data-bg] .hdr-menu, :root[data-bg] .tab-menu, :root[data-bg] .hunt-pop, :root[data-bg] .g-menu { background-color: rgba(13,17,23,0.84); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); }
/* the name over the photo: its subtitle a little brighter, a tight shadow (no halo) */
:root[data-bg] .hb-sub { color: #dbe4ea; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 5px rgba(0,0,0,0.6); }
/* the site's header is solid (only the tab strip under it is glass): nothing shows through it */
:root[data-bg] body.searched #app-header { background: #101317; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Snow: the two bars at the top (the open tabs, then the search) are the same frosted glass */
:root[data-theme][data-bg] body.searched #app-header, :root[data-theme][data-bg] #tabs-bar {
  background-color: var(--glass); background-image: none; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-line); box-shadow: none;
}
/* On a result the photo behind is already frosted (body.searched::before): the big panes do not blur
   again what is behind them (the slowest thing to redraw while scrolling); a deeper tint instead */
:root[data-bg] body.searched .vp-card, :root[data-bg] body.searched .vp-card:hover, :root[data-bg] body.searched .hp-head,
:root[data-bg] body.searched .hp-notes, :root[data-bg] body.searched .hp-card, :root[data-bg] body.searched .hp-sec,
:root[data-bg] body.searched .ha-bar, :root[data-bg] body.searched .ha-list, :root[data-bg] body.searched .hb-bar {
  -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(13,17,23,0.66);
}
/* Snow: a result's card as solid as a saved hunt's panes (the hunt's glass darkens what is behind it) */
:root[data-bg] body.searched .vp-card, :root[data-bg] body.searched .vp-card:hover { background-color: rgba(13,16,20,0.86); }

/* the Observatory backgrounds: textures made in code, no photo (brushed blue-grey slate, dark
   glass); already dark, so no veil on top of them */

/* the photo themes: each picture enlarged with care, graded toward the cold palette (its own
   colour kept, held back), highlights rolled off so nothing glares behind the panels, and a fine
   film grain; they keep the night's veil and vignette like Coyote */
:root[data-theme][data-bg="landscape"] { --bg-image: image-set(url("/bg_landscape.webp") type("image/webp"), url("/bg_landscape.jpg") type("image/jpeg")); --bg-pos: center 45%; }
:root[data-theme][data-bg="sharks"] { --bg-image: image-set(url("/bg_sharks.webp") type("image/webp"), url("/bg_sharks.jpg") type("image/jpeg")); --bg-pos: center 45%; }
:root[data-theme][data-bg="wolfpack"] { --bg-image: image-set(url("/bg_wolfpack.webp") type("image/webp"), url("/bg_wolfpack.jpg") type("image/jpeg")); --bg-pos: 68% 62%; }
:is(:root[data-theme][data-bg="landscape"], :root[data-theme][data-bg="sharks"], :root[data-theme][data-bg="wolfpack"], :root[data-theme][data-bg="storm"], :root[data-theme][data-bg="eclipse"], :root[data-theme][data-bg="chill"], :root[data-theme][data-bg="jaguar"], :root[data-theme][data-bg="highland"], :root[data-theme][data-bg="red"]) body { background-color: var(--night); }

/* the photo themes, given depth like Coyote's night: the picture set back (a touch out of focus,
   dimmed, less colour), the band behind the name and the search kept dark, a vignette at the
   edges; further back once a scan is open. The picture moves to body::before, as on Snow Leopard. */
:root[data-theme][data-bg="storm"] { --bg-image: image-set(url("/bg_storm.webp") type("image/webp"), url("/bg_storm.jpg") type("image/jpeg")); --bg-pos: center 40%; --ph: url("/bg_storm.webp"); }
:root[data-theme][data-bg="eclipse"] { --bg-image: image-set(url("/bg_eclipse.webp") type("image/webp"), url("/bg_eclipse.jpg") type("image/jpeg")); --bg-pos: 60% 45%; --ph: url("/bg_eclipse.webp"); }
:root[data-theme][data-bg="chill"] { --bg-image: image-set(url("/bg_chill.webp") type("image/webp"), url("/bg_chill.jpg") type("image/jpeg")); --bg-pos: 40% 55%; --ph: url("/bg_chill.webp"); }
:root[data-theme][data-bg="jaguar"] { --bg-image: image-set(url("/bg_jaguar.webp") type("image/webp"), url("/bg_jaguar.jpg") type("image/jpeg")); --bg-pos: 62% 55%; --ph: url("/bg_jaguar.webp"); }
:root[data-theme][data-bg="highland"] { --bg-image: image-set(url("/bg_highland.webp") type("image/webp"), url("/bg_highland.jpg") type("image/jpeg")); --bg-pos: 50% 45%; --ph: url("/bg_highland.webp"); }
:root[data-theme][data-bg="red"] { --bg-image: image-set(url("/bg_red.webp") type("image/webp"), url("/bg_red.jpg") type("image/jpeg")); --bg-pos: center 50%; --ph: url("/bg_red.webp"); }
:root[data-theme][data-bg="landscape"] { --ph: url("/bg_landscape.webp"); }
:root[data-theme][data-bg="sharks"] { --ph: url("/bg_sharks.webp"); }
:root[data-theme][data-bg="wolfpack"] { --ph: url("/bg_wolfpack.webp"); }
:is(:root[data-theme][data-bg="landscape"], :root[data-theme][data-bg="sharks"], :root[data-theme][data-bg="wolfpack"], :root[data-theme][data-bg="storm"], :root[data-theme][data-bg="eclipse"], :root[data-theme][data-bg="chill"], :root[data-theme][data-bg="jaguar"], :root[data-theme][data-bg="highland"], :root[data-theme][data-bg="red"]) {
  --ph-dim: .62; --ph-dim-s: .4; --ph-v: .62;
}
:is(:root[data-theme][data-bg="landscape"], :root[data-theme][data-bg="sharks"], :root[data-theme][data-bg="wolfpack"], :root[data-theme][data-bg="storm"], :root[data-theme][data-bg="eclipse"], :root[data-theme][data-bg="chill"], :root[data-theme][data-bg="jaguar"], :root[data-theme][data-bg="highland"], :root[data-theme][data-bg="red"]) body { background: var(--night); }
:is(:root[data-theme][data-bg="landscape"], :root[data-theme][data-bg="sharks"], :root[data-theme][data-bg="wolfpack"], :root[data-theme][data-bg="storm"], :root[data-theme][data-bg="eclipse"], :root[data-theme][data-bg="chill"], :root[data-theme][data-bg="jaguar"], :root[data-theme][data-bg="highland"], :root[data-theme][data-bg="red"]) body::before {
  inset: -30px; background: var(--night) var(--ph) var(--bg-pos) / cover no-repeat;
  filter: blur(1.4px) brightness(var(--ph-dim)) saturate(0.8); transform: scale(1.04);
  -webkit-backdrop-filter: none; backdrop-filter: none; transition: filter .5s ease;
}
:is(:root[data-theme][data-bg="landscape"], :root[data-theme][data-bg="sharks"], :root[data-theme][data-bg="wolfpack"], :root[data-theme][data-bg="storm"], :root[data-theme][data-bg="eclipse"], :root[data-theme][data-bg="chill"], :root[data-theme][data-bg="jaguar"], :root[data-theme][data-bg="highland"], :root[data-theme][data-bg="red"]) body.searched::before {
  background: var(--night) var(--ph) var(--bg-pos) / cover no-repeat;
  filter: blur(5px) brightness(var(--ph-dim-s)) saturate(0.7); -webkit-backdrop-filter: none; backdrop-filter: none;
}
:is(:root[data-theme][data-bg="landscape"], :root[data-theme][data-bg="sharks"], :root[data-theme][data-bg="wolfpack"], :root[data-theme][data-bg="storm"], :root[data-theme][data-bg="eclipse"], :root[data-theme][data-bg="chill"], :root[data-theme][data-bg="jaguar"], :root[data-theme][data-bg="highland"], :root[data-theme][data-bg="red"]) body::after,
:is(:root[data-theme][data-bg="landscape"], :root[data-theme][data-bg="sharks"], :root[data-theme][data-bg="wolfpack"], :root[data-theme][data-bg="storm"], :root[data-theme][data-bg="eclipse"], :root[data-theme][data-bg="chill"], :root[data-theme][data-bg="jaguar"], :root[data-theme][data-bg="highland"], :root[data-theme][data-bg="red"])[data-bright] body::after {
  background: linear-gradient(180deg, rgba(5,6,8,calc(var(--ph-v) * .75)) 0%, rgba(5,6,8,calc(var(--ph-v) * .6)) 22%, rgba(5,6,8,calc(var(--ph-v) * .25)) 45%, rgba(5,6,8,0) 62%, rgba(5,6,8,calc(var(--ph-v) * .45)) 100%),
              radial-gradient(110% 90% at 50% 55%, rgba(5,6,8,0) 35%, rgba(5,6,8,var(--ph-v)) 100%);
}
:is(:root[data-theme][data-bg="landscape"], :root[data-theme][data-bg="sharks"], :root[data-theme][data-bg="wolfpack"], :root[data-theme][data-bg="storm"], :root[data-theme][data-bg="eclipse"], :root[data-theme][data-bg="chill"], :root[data-theme][data-bg="jaguar"], :root[data-theme][data-bg="highland"], :root[data-theme][data-bg="red"])[data-bright] body.searched { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Brightness lifts them as it lifts Snow Leopard */
:is(:root[data-theme][data-bg="landscape"], :root[data-theme][data-bg="sharks"], :root[data-theme][data-bg="wolfpack"], :root[data-theme][data-bg="storm"], :root[data-theme][data-bg="eclipse"], :root[data-theme][data-bg="chill"], :root[data-theme][data-bg="jaguar"], :root[data-theme][data-bg="highland"], :root[data-theme][data-bg="red"])[data-bright] { --ph-dim: calc(var(--bp) * 1.05); --ph-dim-s: calc(var(--bps) * .8); --ph-v: calc(var(--bv) + .14); }

/* the glass, everywhere: a result's card, a hunt, a new tab's window and the panels inside them let
   the picture through, darkened first so the text keeps its contrast */
:root[data-theme][data-bg] { --panel-bg: rgba(12,16,21,0.64); }
:root[data-theme][data-bg] .vp-card.vp-A, :root[data-theme][data-bg] .vp-card.vp-A:hover, :root[data-theme][data-bg] #results > .hp, :root[data-theme][data-bg] body.newtab #hero {
  background: var(--glass) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-color: var(--glass-line) !important; box-shadow: var(--glass-hl), var(--glass-lift); }
:root[data-theme][data-bg] #tabs-bar { background: var(--glass-2) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
:root[data-theme][data-bg] :is(.vp-A .vp-sec, .vp-finds, .vp-A .vp-head, .hp > .hp-head, .tm-side) { background-color: rgba(255,255,255,0.025) !important; }
/* a new tab's window: lighter glass, so the threat map behind it shows (a light blur for depth) */
:root[data-theme][data-bg] body.newtab #hero { background: rgba(10,13,17,0.32) !important; -webkit-backdrop-filter: blur(3px) saturate(1.05); backdrop-filter: blur(3px) saturate(1.05); }
:root[data-theme][data-bg] body.newtab #tabs-bar { background: rgba(10,13,17,0.5) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Highland: the snow leopard sits right behind the live map; the map's glass is clearer there, so
   it shows through (the map and its data as on every theme) */
:root[data-theme][data-bg="highland"] { --tm-sheet-blur: 0px; --tm-sheet-a: .22; }

/* ── Fluid: nothing is frosted live while a tab is open. The photo behind is frosted once (body.searched::before,
   a still filter the browser draws one time); the result's and the hunt's window are a tint over it. A live
   frost (backdrop-filter) on the window, with the relations' globe turning inside it, made the browser blur the
   whole screen again on every frame (10 frames a second instead of 60 where the GPU is modest). ── */
body.searched, body.searched::before, :root[data-theme] body.searched, :root[data-theme] body.searched::before { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:root[data-theme][data-bg] body.searched .vp-card.vp-A, :root[data-theme][data-bg] body.searched .vp-card.vp-A:hover, :root[data-theme][data-bg] body.searched #results > .hp {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 40%), rgba(12,16,21,0.74) !important; }
body.searched .vp-card.vp-A, body.searched #results > .hp { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }