# 14 — Theme Audit + Detail-Page Backdrop Diagnosis

Status: **read-only audit**, executed 2026-05-08 against
`https://arrflix.s8n.ru` (Jellyfin 10.10.3 on nullstone). The owner has
just rolled back to **Cineplex v1.0.6** (the Netflix-faithful theme)
after a brief ElegantFin → NeutralFin experiment that was documented in
docs 04 §3e and 11 respectively. Reported issue: on detail pages the
**backdrop image leaves a visible vertical black band on the left** where
the title/info column sits. Owner asked for a forward plan, not a fix.

> **No state mutated.** No POST to `/System/Configuration/branding`,
> no edit to `/jellyfin/jellyfin-web/index.html`, no docker action.
> Read-only over SSH and against the public `/Branding/Configuration`
> + authenticated `/System/Configuration/branding` endpoints.

---

## 1. Current state inventory

### 1a. Active theme

`/System/Configuration/branding` returns:

| Field | Value |
|---|---|
| `LoginDisclaimer` | `"Welcome to ARRFLIX - Private invite only service"` |
| `SplashscreenEnabled` | `true` |
| `CustomCss` (size) | **25 225 chars** (most of which is the embedded ARRFLIX wordmark data-URL — twice) |

Sole `@import` line:

```css
@import url("https://cdn.jsdelivr.net/gh/MRunkehl/cineplex@v1.0.6/cineplex.css");
```

Cineplex itself transitively imports
`cineplex@v1.0.5/finity-theme/finity-complete.css` (its parent theme,
**Finity** by prism2001). This matters for the backdrop diagnosis below.

### 1b. CustomCss block inventory (every rule, in order)

`!important` declarations: **17**. `#E50914` occurrences: **0** in
CustomCss; **1** in `web-overrides/index.html` critical-path `<style>`.
ARRFLIX wordmark PNG: **235 × 85 px** (aspect 2.765 : 1), embedded
as base64 data-URL on two selectors.

| # | Block | Selectors | Purpose | `!important` count |
|---|---|---|---|---|
| 1 | Cineplex import | `@import` | Theme entry point | 0 |
| 2 | Cast/Crew hide | `#castCollapsible, #guestCastCollapsible` | Drop reviewer cruft | 1 |
| 3a | ARRFLIX logo (img) | `.adminDrawerLogo img` | `content:` replace src in admin drawer | 1 |
| 3b | ARRFLIX logo (div) | `.pageTitleWithLogo` | `background-image:` for masthead `<div>` | 1 |
| 4 | Quick Connect hide | `.btnQuick` | Belt-and-braces for the server-side disable in 04 §4g | 1 |
| 5 | Header icon hide | `.headerSyncButton`, `.headerCastButton`, `.headerUserButton` | Keep only Search top-right | 3 |
| 6a | Slider thumbs (white) | `.MuiSlider-thumb`, `.osdPositionSlider .MuiSlider-thumb`, `.osdVolumeSlider .MuiSlider-thumb`, `emby-slider .sliderThumb` | OSD scrubber + volume circles | 3 |
| 6b | Slider thumbs (focus halo) | `.MuiSlider-thumb:hover/:active/.Mui-focusVisible` | Hover ring | 1 |
| 7a | Pure-black bg (vars) | `:root { --primary-background-color/--background-color: #000 }` | Force shell vars to true black | 2 |
| 7b | Pure-black bg (wrappers) | `html, body, .preload, .skinBody, .mainDrawerHandle` | Anti-flash on shell wrappers | 1 |
| 7c | Pure-black bg (containers) | `.skinHeader, .skinHeader.semiTransparent, .skinHeader.skinHeader-withBackground, .mainAnimatedPages, #reactRoot, .dashboardDocument` | Container surfaces | 1 |
| 8 | Settings drawer hide | `a[href*="mypreferencesmenu"]`, `[to="/mypreferencesmenu.html"]` and `:has()` parent variants × 7 | Remove Settings link from drawer | 1 |
| 9 | Count-badge hide | `.countIndicator` | Drop unwatched-episode badges | 1 |

### 1c. Critical-path inline `<style>` (in `web-overrides/index.html`)

Bind-mounted at `/jellyfin/jellyfin-web/index.html`, paints **before** the
SPA bundle loads CustomCss:

| Block | Effect |
|---|---|
| `:root { --primary-background-color: #000; --background-color: #000 }` | Pre-paint shell vars (no `!important`) |
| `html, body, .preload, .skinBody, .skinHeader, #reactRoot, .mainAnimatedPages { bg:#000 !important; color:#fff !important }` | Anti-flash + force colour |
| `.raised, .button-submit, .emby-button[type=submit], button[type=submit] { bg:#E50914 !important; color:#fff !important }` | Pre-paint Netflix-red on submits (login Sign-In) |
| `.splashLogo { animation: fadein .5s; width:30%; height:30%; bg-image:<ARRFLIX wordmark data-URL>; bg-size:contain; bg-position:center; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) }` | The pre-bundle splash screen |
| `@media (min-device-width:992px) { .splashLogo { bg-image:<same ARRFLIX wordmark, full-res copy> } }` | Desktop variant (currently identical bytes — see §6) |

Plus 78 lines of inline `<script>` (ARRFLIX-SHIM) that locks
`document.title`, the favicon, and continuously hides any
`mypreferencesmenu` drawer entry that might be rendered after navigation.
None of the JS touches detail-page layout.

---

## 2. Detail-page backdrop diagnosis

### 2a. Selector hunt against the live JF 10.10.3 web bundle

`docker exec jellyfin grep -oE` against
`/jellyfin/jellyfin-web/main.jellyfin.1ed46a7a22b550acaef3.css` and
`itemDetails-index-html.ca5f15ff794311af00a6.chunk.js` returned the
canonical detail-page selector set:

| Selector | Where defined | Stock JF 10.10.3 layout |
|---|---|---|
| `.itemBackdrop` | `main.jellyfin.<hash>.css` | `height: 40vh; width: <inherited>; background-size: cover; background-attachment: fixed; position: relative;` — **only top 40vh of the page** |
| `.layout-mobile .itemBackdrop` | same | `background-attachment: scroll; background-position: top` |
| `.layout-tv .itemBackdrop` | same | `display: none` |
| `.detailPageContent` | same | `display: flex; flex-direction: column; padding-left: 32.45vw` (LTR desktop) — i.e. the content column starts 32.45% from the left |
| `.detailPagePrimaryContainer` | same | `display: flex; align-items: center; z-index: 2;` desktop adds `padding-left: 32.45vw` |
| `.detailImageContainer .card` | same | `position: absolute; top: -80%; left: 3.3%; width: 25vw` (desktop) — the poster card sits in the LEFT column |
| `.detailLogo` | same | `position: absolute; top: 10vh; right: 25vw; width: 25vw; height: 16vh; background-size: contain` |
| `.detailRibbon` | same | desktop: `height: 7.2em; margin-top: -7.2em` (the gradient fade strip below backdrop) |
| `.itemBackdropProgressBar` | same | `position: absolute; bottom:0; left:0; right:0` |
| `.detailPageWrapperContainer` | same | `border-collapse: collapse` |

There is **no** `itemBackdropFader`, no `itemHeroSection`, no
`backdropHeroSection` selector in the bundle. The owner's mental model of
"a fader covering the left column" doesn't match — the architecture is
*positional offsets*, not an overlay.

### 2b. What Cineplex/Finity overrides

`grep -nE "itemBackdrop|detailPagePrimary|detailPageContent|detailLogo|detailImageContainer|detailRibbon|detailPageWrapper" /tmp/cineplex.css /tmp/finity.css` shows:

**`cineplex.css`** — only **two** detail-page rules, both of them
mobile-only. No desktop override of `.itemBackdrop`.

```css
/* line 577 */
.layout-mobile .itemBackdrop {
  margin-top: 0rem;
  mask-image: linear-gradient(to top, #fff0 1%, #000 15%, #000 80%, #fff0 100%);
}
```

**`finity-complete.css`** — Finity is where the detail-page layout is
heavily redesigned. Key block:

```css
/* finity.css :root */
--detail-page-side-padding:    5%;
--detail-page-primary-width:   45%;
--detail-page-backdrop-offset: 17%;     /* <-- THE BLACK BAND */
--detail-page-backdrop-width:  85vw;
--detail-page-mask-offset:     16%;
--detail-page-mask-width:      85vw;
--detail-page-content-offset:  -65vh;

.layout-desktop .itemBackdrop {
  background-attachment: scroll;
  background-position: center;
  background-size: cover;
  height: 100vh;     /* full viewport, NOT 40vh — Finity expands JF default */
  width: 100%;
}

.backdropContainer {
  height: 100vh;
  left: var(--detail-page-backdrop-offset);   /* 17% */
  position: absolute;
  top: 0;
  width: var(--detail-page-backdrop-width);   /* 85vw */
  z-index: 0;
  pointer-events: none;
}

.layout-desktop .backgroundContainer.withBackdrop {
  background: url("https://raw.githubusercontent.com/prism2001/finity/main/assets/mask.png");
  background-size: cover;
  height: 100vh;
  left: var(--detail-page-mask-offset);       /* 16% */
  width: var(--detail-page-mask-width);       /* 85vw */
  z-index: 1;
  pointer-events: none;
}

.layout-desktop .detailImageContainer .card { display: none; }   /* hide poster card */
```

### 2c. Root cause

The "black band on the left" is **Finity's intentional design**, not a
Cineplex bug and not a JF stock layout artefact:

- Stock Jellyfin: `.itemBackdrop` is `height: 40vh` and full-width
  (`width` is inherited from the parent flow). The backdrop crops the
  *top* of the page, the info column lays out below it. No left band.
- Finity: re-engineers the page so `.itemBackdrop` is `100vh` *but*
  positions a separate `.backdropContainer` absolutely at `left: 17%
  width: 85vw` (so the right ~98% of the viewport gets the backdrop and
  the left **17vw / 17%** is left clear). On top of that, a blurred
  `mask.png` is overlaid at `left: 16%` to fade the right edge of the
  remaining clear band into the backdrop — making the band look like a
  designed gradient sidebar, NOT a black bar.

The reason it currently reads as **a hard black band** rather than a
soft gradient fade is the combination of two of our personal tweaks
plus one Finity asset that may not be reaching the browser:

1. **`html, body, .preload, .skinBody, .mainDrawerHandle { bg:#000 !important }`**
   forces the underlying surface where the band sits to pure black.
   Finity's `--theme-background-color: #181818` is the intended
   surface — slightly less harsh.
2. **`#reactRoot, .mainAnimatedPages, .dashboardDocument { bg:#000 !important }`**
   does the same for the SPA wrappers above the body.
3. The Finity mask overlay
   (`.backgroundContainer.withBackdrop`) loads its mask PNG from
   `raw.githubusercontent.com/prism2001/finity/main/assets/mask.png` —
   on a LAN with no upstream proxy that should resolve, but if the
   browser blocks third-party image loads (some ad-blockers strip
   `raw.githubusercontent.com` requests) the mask never paints and the
   17vw band is unmasked. Worth a DevTools network-tab check before any
   CSS change.

Net: the backdrop **is** filling the right 85vw of the viewport. The
left 17vw is intentionally clear so the title/poster/info column has a
high-contrast surface to render on. Our `bg:#000 !important` rules turn
that intentionally-clear surface into a hard black band; without them
it would be `#181818` with a soft gradient fade from the mask PNG.

### 2d. Forward-plan CSS (DO NOT APPLY)

If the goal is **Netflix-style full-bleed backdrop with a left-side
gradient overlay** (info column floating over a darkened-but-visible
backdrop), the proposed rule set is:

```css
/* Detail-page backdrop: full-bleed + left gradient overlay
   (proposal — not applied) */

/* 1. Stretch the backdrop container across the full viewport
      instead of starting at 17vw */
.layout-desktop .backdropContainer {
  left: 0 !important;
  width: 100vw !important;
}

/* 2. Replace Finity's mask.png with a CSS-only linear gradient
      that darkens the left 40-50vw and fades to transparent.
      `.backgroundContainer.withBackdrop` is the overlay layer. */
.layout-desktop .backgroundContainer.withBackdrop {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.85) 25%,
    rgba(0, 0, 0, 0.55) 45%,
    rgba(0, 0, 0, 0.20) 65%,
    rgba(0, 0, 0, 0.00) 85%
  ) !important;
  left: 0 !important;
  width: 100vw !important;
}

/* 3. Drop the global black-bg force from the wrappers ON DETAIL
      PAGES ONLY so the gradient composes against the actual
      backdrop, not pure black. Scope by .itemDetailPage body class
      that JF adds on detail routes. */
body.itemDetailPage,
body.itemDetailPage #reactRoot,
body.itemDetailPage .mainAnimatedPages {
  background-color: transparent !important;
}
```

The `90deg, 95% → 0%` gradient is the Netflix.com detail-page recipe:
opaque on the left where the title sits, fades to transparent by ~70vw
so the right side of the backdrop is visible at full brightness. Tune
the stop percentages once live — the sweet spot depends on
`--detail-page-primary-width` (Finity ships `45%`).

**Untested side-effect to watch for:** Finity *also* hides the poster
card with `.layout-desktop .detailImageContainer .card { display:none }`.
That means we have NO poster in the left column today — the current
black band is empty space framing a clear logo + title block. The fix
above would put the title text directly over the backdrop, which is
fine on most artwork but may have legibility issues on bright/busy
backdrops. If owner wants the poster back, drop that Finity rule too.

### 2e. Screenshot reference

A capture of `https://arrflix.s8n.ru/web/#/details?id=324f75b84f394a5d9b0749c0679f23b9`
(Rick & Morty S01E01 "Pilot") with a hard browser reload would show:

- Top: ~17vw black/empty band on the left, Rick & Morty backdrop on
  the right ~83vw. (Finity / current.)
- Title "Pilot" + Series logo + Play button float over the empty band.
- After fix: title floats over a darkened-but-visible portion of the
  same backdrop, gradient eases into the un-darkened backdrop on the
  right ~30%.

Owner has not provided a current screenshot in this audit; capture
recommended before any CSS change so before/after is documented.

---

## 3. Theme survey 2026-05

Surveyed candidates (live as of audit date), scored on Netflix
fidelity, monochrome fidelity, recency, JF 10.10.3 compatibility,
import format, license:

| Theme | Last commit | License | Netflix fidelity | Monochrome fidelity | JF 10.10.3 compat | Import | Notes |
|---|---|---|---|---|---|---|---|
| **Cineplex v1.0.6** (current) | 2025-09-06 | MIT | **9/10** — true `#E50914`, Netflix Sans webfont, scale-hover, login backdrop | 2/10 | YES (verified live) | single `@import` (transitively pulls Finity) | Bus-factor 1 (single author MRunkehl, 0 stars). Inherits Finity's left-band detail-page layout. |
| **ElegantFin v25.12.31** | 2026-04-30 | GPL-2.0 | 5/10 — Jellyseerr blue/violet by default, recolour-able to `#E50914` (eight `--var` overrides documented in 04 §3e) | 5/10 | YES (tested 10.11.5) | single `@import` | Most actively maintained CSS theme in the ecosystem. Detail-page backdrop is full-width with a gradient overlay built in — no left band. |
| **NeutralFin v1.3.0** | 2025-11-24 | GPL-2.0 | 1/10 (mid-grey accents, no red) | **9/10** — `#131313 → #1e1e1e` gradient, mid-grey accents, off-white text | YES (tested implicitly via ElegantFin parent) | single `@import` | Fork of ElegantFin. The "didn't look as good" feel was caused by our `bg:#000 !important` rules clamping its `#131313→#1e1e1e` gradient flat (see doc 11). With those dropped it would render correctly. |
| **Theme Park (jellyfin pack)** | active | GPL-3.0 | n/a — **no Netflix preset** (only aquamarine/hotline/dracula/dark/organizr/space-gray/plex/nord) | varies by preset | likely | single `@import url(theme-park.dev/css/base/jellyfin/<NAME>.css)` | DQ for our brief; closest is `plex` (orange/black) but that's a different brand entirely. |
| **JellyFlix** (prayag17) | 2023-12-20 | none | 9/10 — origin of the genre | 1/10 | **HALTED** (README header) | single `@import` | DQ — explicitly halted, broken on JF 10.11, risky on 10.10.3 |
| **DarkFlix v5.1** | 2024-06 | GPL-3.0 | 8/10 | 1/10 | only declares 10.8.x; **requires 67% browser zoom** | single `@import` | DQ — accessibility issue, no 10.10 statement |
| **Ultrachromic** (CTalvio) | "selectively maintained" — 146 commits, no recent date | MIT | 6/10 (accent-tunable) — three presets: Monochromic, Kaleidochromic, Novachromic | 8/10 (Monochromic preset) | unspecified | single `@import` per preset | "Old, passively maintained." No Netflix preset, but Novachromic accepts custom accents — could be set to `#E50914`. |
| **Finity** (prism2001, Cineplex's parent) | 2026-05 (active) | none stated | 6/10 (dark, modern, no Netflix red by default) | 5/10 | unspecified | single `@import` | Fully responsible for the detail-page layout we see on Cineplex. If the backdrop fix lands, we'd be fixing Finity's `.backdropContainer` rules. |
| **abyss-jellyfin** (AumGupta) | 2026-05 | n/a | 1/10 | 7/10 | unspecified | unknown | "Minimal dark." 290 stars, growing. Not Netflix-flavoured. |
| **FossFlix** (PaleCache) | 2026-01 | n/a | 6/10 (claims Netflix UI similarity) | 1/10 | unspecified | unknown | 1 star, unproven. Worth bookmark, not migration. |
| **JellyFin** (n00bcodr) | 2026-05 | n/a | 0/10 | 6/10 | unspecified | unknown | Inspired by Flow + Zesty — neither fits the brief. |
| **JellyThemes** (kingchenc) | 2026-01 | n/a | 0/10 | varies (six dark themes with glassmorphism) | unspecified | unknown | DQ for Netflix brief. |
| **Hybrid: Cineplex + NeutralFin tweaks** | n/a | derivative | 7/10 | 4/10 | YES if grafted carefully | one `@import` + tweaks | Not actually possible to graft cleanly — Cineplex's red and NeutralFin's grey both define `--theme-accent-color` / `--uiAccentColor` at `:root`, last-write-wins. Picking the import = picking the palette. Ranges of personal-tweak overrides (e.g. `.MuiSlider-thumb:white`) DO survive across both. |

### 3a. Verdict on Theme Park

`docs.theme-park.dev/themes/jellyfin/` lists eight presets: Aquamarine,
Hotline, Dracula, Dark, Organizr, Space-gray, Plex, Nord. **No Netflix
preset.** The closest cousin (`hotline`) is a magenta/cyan synthwave
look, not Netflix-red. Theme Park is therefore not a viable migration
target for the ARRFLIX brand; ruled out.

---

## 4. Personal-tweak portability matrix

For each personal-tweak block in current `CustomCss`, classify the
selector as **theme-independent** (generic Jellyfin selector, survives
any swap) vs **theme-specific** (requires re-targeting).

| # | Block | Selector | Type | Cineplex | ElegantFin | NeutralFin | Theme-Park | Portability |
|---|---|---|---|---|---|---|---|---|
| 2 | Cast/Crew hide | `#castCollapsible, #guestCastCollapsible` | Generic JF id | works | works | works | works | **HIGH** |
| 3a | Logo (admin) | `.adminDrawerLogo img` | Generic JF class | works | works (per 04 §3e — verified 0 ElegantFin matches) | works (no NeutralFin matches) | works | **HIGH** |
| 3b | Logo (masthead) | `.pageTitleWithLogo` | Generic JF class | works (with `bg-image`, NOT `content:`) | works (verified) | works | works | **HIGH** |
| 4 | Quick Connect hide | `.btnQuick` | Generic JF class on `<button>` | works | works | works | works | **HIGH** |
| 5 | Header icons hide | `.headerSyncButton`, `.headerCastButton`, `.headerUserButton` | Generic JF classes (verified in `73233.*.chunk.js`) | works | works | works (NeutralFin sets `width/height/border` on `.headerUserButton` but `display:none` overrides those) | works | **HIGH** |
| 6 | Slider thumb white | `.MuiSlider-thumb` + variants | MUI runtime class | works | works | works (theme doesn't theme MUI sliders) | works | **HIGH** — but consider re-tinting on monochrome themes |
| 7a | Bg vars `:root` | `--primary-background-color`, `--background-color` | Jellyfin shell var | works (Cineplex defaults to `#181818` — we override to `#000`) | works | **HARMFUL on NeutralFin** — clamps the `#131313→#1e1e1e` gradient (see doc 11 row 8) | works | **MEDIUM** — survives technically, but defeats NeutralFin's intent. |
| 7b/7c | Bg wrappers (`html`, `body`, `.skinHeader`, `.mainAnimatedPages`, `#reactRoot`, `.dashboardDocument`) | Jellyfin shell wrappers | works (Cineplex doesn't theme these) | works (ElegantFin uses translucent wrappers — `#000` underneath is fine) | **HARMFUL** — clamps gradient + flattens `.skinHeader.semiTransparent` (see doc 11 row 10) | likely works | **MEDIUM** — and **harmful on detail pages for Cineplex** (this is what's making the 17vw band hard-black, see §2c above) |
| 8 | Settings drawer hide | `a[href*="mypreferencesmenu"]`, `[to="/mypreferencesmenu.html"]`, `:has()` parents | JF route + MUI ListItem classes | works | works | works | works | **HIGH** (if browser supports `:has()`) |
| 9 | Count badge hide | `.countIndicator` | Generic JF class | works | works | works (NeutralFin themes it, but `display:none` wins) | works | **HIGH** |
| index.html | Anti-flash inline | `html, body, .preload, .skinBody, .skinHeader, #reactRoot, .mainAnimatedPages` | Same wrappers as 7b/7c, but **pre-bundle** | works | works | **HARMFUL** — same issue as 7b/7c, but earlier in load (see doc 11 row 14) | likely | **LOW-MEDIUM** — needs `!important` removed and `.skinHeader` dropped from the list to be theme-portable |
| index.html | Submit-button red | `.raised, .button-submit, .emby-button[type=submit], button[type=submit]` | Generic JF + MUI button classes | works (matches Cineplex's `#E50914` accent) | requires recolour-aware ElegantFin (works since override is in our hands) | **HARMFUL** — paints every submit Netflix-red over a monochrome theme (see doc 11 row 15) | works | **LOW** — rule is brand-specific, must be removed when brand colour changes (NeutralFin would need `--btnSubmitColor` instead) |
| index.html | ARRFLIX shim (title/favicon/`mypreferencesmenu`) | inline `<script>` | Independent of theme | works | works | works | works | **HIGH** |
| index.html | Splash logo | `.splashLogo` | Pre-bundle JF class | works | works | works | works | **HIGH** |

**Summary:** 11 of 14 blocks are HIGH portability (theme-independent
generic JF selectors). The 3 problem children are all variations of
"force pure black background" — and they happen to be the same blocks
flagged in doc 11 as harmful to NeutralFin AND, per §2c above, to be
the cause of the hard-black detail-page band on Cineplex.

> **Operational rule:** when swapping themes, audit blocks 7a / 7b / 7c
> / index.html-anti-flash / index.html-submit-red FIRST. The other
> tweaks ride along automatically.

---

## 5. Logo aspect-ratio fit

ARRFLIX wordmark PNG: **235 × 85 px**, aspect **2.765 : 1**.

| Container | Selector | Sizing on Cineplex/Finity | Wordmark fit |
|---|---|---|---|
| Admin drawer | `.adminDrawerLogo img` | `<img>` element, `content:` swap, sized by sidebar (~240px wide) | natural — replacement is the displayed image | OK |
| Masthead | `.pageTitleWithLogo` | `<div>`, `bg-image` + `bg-size: contain` (Finity convention) | aspect preserved by `contain`, no squish | OK |
| Detail page logo | `.detailLogo` | `position: absolute; right: 25vw; top: 10vh; width: 25vw; height: 16vh; bg-size: contain` | per-show clear-logo box. ARRFLIX wordmark is not used here — this is the show's clear-logo (e.g. Rick & Morty title art). Not a fit concern for our wordmark. | OK |
| Splash | `.splashLogo` | `width:30%; height:30%; bg-size:contain; centered` | aspect preserved; on a 1920×1080 viewport renders ~576×324 box, wordmark settles at ~576×208 (height-limited by aspect). Looks correct. | OK |

**Verdict:** 235 × 85 fits cleanly in every container. Aspect ratio is
NOT a factor in any of the rendering complaints. The native JF
admin-drawer + masthead use `bg-size: contain`, so a 2.765:1 wordmark
displays without distortion regardless of theme.

---

## 6. Pre-bundle splash quality

Inspecting `web-overrides/index.html` (93 lines, the bind-mounted
override of the JF web shell):

| Aspect | Value | Notes |
|---|---|---|
| `body { background: #000 }` (declared in critical-path `<style>`) | YES | Anti-flash baseline |
| `.splashLogo` size | `width:30%; height:30%` | Centred via `position:fixed; top:50%; left:50%; transform:translate(-50%,-50%)` |
| `.splashLogo bg-image` | inlined data-URL of the 235 × 85 ARRFLIX wordmark | Same PNG as the masthead/admin drawer |
| `.splashLogo bg-size` | `contain` | Aspect preserved |
| Animation | `animation: fadein 0.5s` (defined as `@keyframes fadein { 0%{opacity:0} 100%{opacity:1} }`) | Half-second ease-in |
| Mobile vs desktop variant | `@media (min-device-width: 992px) { .splashLogo { bg-image: <data-URL> } }` | The desktop branch CURRENTLY uses **the same 235 × 85 PNG bytes** as the small/mobile branch — i.e. there is no higher-resolution desktop asset. This is a half-implemented split. Owner could supply a 470 × 170 (2x) or 940 × 340 (4x) PNG to bake into the desktop branch for sharper rendering on 1080p+ displays. |
| Screen reader / `<title>` | `<title>` is set + locked at runtime by `lockTitle()` to `"ARRFLIX"` | OK |

**Verdict:** splash is functional, fade-in is smooth, aspect is correct.
The only quality nit is the desktop `<media>` branch reading the same
small PNG as mobile — a 2× or 4× ARRFLIX wordmark in the desktop
branch would be sharper. Defer-able; not a complaint the owner has
raised.

---

## 7. Detail-page backdrop fix proposal (concrete CSS, NOT applied)

Re-stating §2d in implementation-ready form. Expected to drop into
`CustomCss` AFTER the Cineplex `@import`, BEFORE the existing
`bg:#000` blocks (which need to be **scoped out of detail pages** to
not clobber the gradient — see `body.itemDetailPage` selectors below).

```css
/* === Detail-page backdrop fix (proposal, 2026-05-08) === */
/* Convert Finity's 17vw black band into a Netflix-style gradient
   overlay over a full-bleed backdrop. */

/* 1. Stretch backdrop container across the full viewport */
.layout-desktop .backdropContainer {
  left: 0 !important;
  width: 100vw !important;
}

/* 2. Replace Finity's mask.png with a CSS-only linear-gradient
      that darkens the left ~50vw and fades to transparent.
      `.backgroundContainer.withBackdrop` is the existing overlay
      element in the Finity DOM. */
.layout-desktop .backgroundContainer.withBackdrop {
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.85) 25%,
    rgba(0, 0, 0, 0.55) 45%,
    rgba(0, 0, 0, 0.20) 65%,
    rgba(0, 0, 0, 0.00) 85%
  ) !important;
  background-size: 100vw 100vh !important;
  left: 0 !important;
  width: 100vw !important;
}

/* 3. UN-clamp the page bg specifically on detail pages so the
      gradient composes against the actual backdrop, not pure black.
      `.itemDetailPage` is added to <body> by JF on every detail
      route (verified in main.jellyfin.bundle.js).               */
body.itemDetailPage,
body.itemDetailPage #reactRoot,
body.itemDetailPage .mainAnimatedPages,
body.itemDetailPage .skinBody {
  background-color: transparent !important;
}
```

**Before/after expectation:**

- Before: 17vw band on the left of the detail page is **flat `#000`**;
  poster card hidden by Finity; title + clear-logo float on a hard
  black slab.
- After: backdrop fills 100vw of the viewport. Title + logo float over
  a darkened-but-visible slice of the backdrop on the left, fading to
  full backdrop brightness around 70-85% across. Reads as
  netflix.com's title-card style.

**Stops to tune** once live (open DevTools, edit the gradient stops):

- If title text is illegible against busy artwork, push opacity stops
  up: `0.95 / 0.92 / 0.75 / 0.40 / 0.10`.
- If too much of the backdrop is darkened, pull stops left: `0.95 / 0.80 / 0.40 / 0.10 / 0.00`
  with the last stop at 60%.
- If the right edge of the gradient creates a visible seam against a
  bright backdrop, soften the last stop: append a sixth at
  `90% rgba(0,0,0,0)` for an extra 5vw fade.

**Untested side-effects to watch for:**

- Finity hides `.detailImageContainer .card` on desktop. The fix
  preserves that (poster card stays hidden — title is the focus).
  If owner wants the poster card visible, drop:
  ```css
  .layout-desktop .detailImageContainer .card { display: none }
  ```
  by adding `.layout-desktop .detailImageContainer .card { display: revert !important }`.
- The OSD scrubber (`.itemBackdropProgressBar`) sits at the very
  bottom of `.itemBackdrop`. With the backdrop now full-width, it's
  also full-width (was already, just visually different against a
  colour-fade vs. black band).
- Library-list pages that ALSO use the `.backgroundContainer.withBackdrop`
  layer (a few in JF — backdrops on library tile rows) will get the
  same gradient. If they look wrong, scope rule (1) and (2) to
  `body.itemDetailPage .layout-desktop .backdropContainer` etc.

---

## 8. Recommended forward path (top 3 ranked)

### #1 — STAY on Cineplex + apply the §7 detail-page backdrop fix

**Why:** Cineplex is the only Netflix-faithful theme that runs on
JF 10.10.3 with a maintained codebase. The detail-page band is a
*single rule's worth of CSS* away from being a Netflix-style gradient
overlay. We've already invested in the brand stack (ARRFLIX wordmark,
header-icon hide, slider thumbs, Quick Connect off, settings hide); 11
of 14 personal tweaks survive the change, the other 3 (`bg:#000`)
need to be **scoped to non-detail pages** by selector chain
`body:not(.itemDetailPage)` instead of being dropped.

**Risk:** low. CSS-only, additive, no `@import` change, no
`/branding` POST hot-spot. Rolls back trivially.

**Cost:** ~30 minutes to apply, screenshot, tune gradient stops live.

### #2 — Migrate to ElegantFin v25.12.31 with ARRFLIX `#E50914` recolour

**Why:** ElegantFin's detail-page is full-width-backdrop with a
gradient overlay built in — no left band — so the §7 fix becomes
unnecessary. Most actively maintained CSS theme on JF (last commit
2026-04-30, GPL-2.0). The 04 §3e migration documented this exact
config: 8 accent variables overridden, ARRFLIX logo + cast/crew + Quick
Connect + header icons + slider thumbs all preserved.

**Risk:** medium. The previous attempt was overwritten by a sibling
Cineplex POST (race rule in 04 §3b). Personal-tweak block 7c
(`.skinHeader.semiTransparent`) still risks flattening ElegantFin's
translucent header — that block needs editing on landing.

**Cost:** ~45 minutes (re-do migration, scope the bg-clamp rules,
verify all 11 personal tweaks intact post-POST).

**Aesthetic delta vs Cineplex:** ElegantFin is "polished
Jellyseerr-y", Cineplex is "Netflix-faithful". With the recolour
ElegantFin gets the brand red but keeps a non-Netflix layout
(card design, hero strip, etc.). Owner has gone back-and-forth on this
preference — explicitly chose Cineplex this morning.

### #3 — Hybrid: keep Cineplex import + graft NeutralFin's `--gradientPoint` vars

**Why:** for owners who like Cineplex's red+webfont but want
NeutralFin's depth/gradient on backgrounds. Manually copy NeutralFin's
`--darkerGradientPoint #131313 / --lighterGradientPoint #1e1e1e` into a
`:root` block, drop our `--primary-background-color: #000 !important`
overrides, and let the gradient render.

**Risk:** higher than #1 or #2. Variables don't compose perfectly
across themes — Cineplex's Finity parent doesn't read those NeutralFin
vars, it reads its own `--theme-background-color`. So you'd actually
copy the values into Finity's variable: `--theme-background-color: linear-gradient(...)`
which CSS doesn't allow on a plain `background-color`. Real grafting
needs `body { background-image: linear-gradient(180deg, #131313, #1e1e1e) }`
plus dropping the `bg:#000 !important` rules.

**Cost:** ~60 min trial-and-error. Likely lower visual reward than #1.

**Verdict:** Recommended order is **#1 first (lowest risk, biggest
backdrop win), then #2 if owner re-evaluates Netflix-fidelity vs
polish, #3 only as a fall-back if #1 doesn't read well**.

---

## 9. Risks + rollback

### Snapshot tag

`snapshot-2026-05-08-pre-elegantfin` — captured before the ElegantFin
attempt. Currently this is **also the rollback point for any further
theme work** because ElegantFin → NeutralFin → Cineplex have all been
applied (and reverted) on top of it. Located at
`snapshots/2026-05-08-pre-elegantfin/`.

If a future change wants its own snapshot, follow the pattern in
`RESTORE.md`: capture `branding.json`, `index.html`, all
`displayprefs-*.json`, `users.json`, `libraries.json`, write a new
`RESTORE.md`, tag the commit.

### Prior failed swaps (timeline 2026-05-08)

| Time | Theme attempted | Outcome |
|---|---|---|
| early today | ElegantFin v25.12.31 (initial pick — pre-Netflix-brief) | replaced by Cineplex when owner asked for Netflix-faithful |
| mid-day | **Cineplex v1.0.6** | applied, working |
| later | ElegantFin v25.12.31 + ARRFLIX recolour (04 §3e) | applied, then silently overwritten by a sibling Cineplex POST (race rule, see 04 §3b) |
| even later | NeutralFin v1.3.0 | applied, but a sibling Cineplex POST overwrote it minutes later (see doc 11 headline finding); also, our `bg:#000 !important` rules clamped its gradient flat so the brief render that DID land looked wrong |
| now | **Cineplex v1.0.6** | active (verified live this audit) |

### Race-rule reminder

`/System/Configuration/branding` takes a complete object on every
POST; whichever POST lands last wins. Per 04 §3b: any agent or script
touching this endpoint MUST `GET → edit-only-its-fields → POST` and
the branding POST must be the **last** in any sequence.

### Detail-page fix rollback

If §7's CSS lands and looks wrong, remove the three new blocks from
`CustomCss` and POST `branding`. The §7 proposal is purely additive
(no rule removal); revert is a clean delete.

---

## 10. What was NOT touched during this audit

- No POST to `/System/Configuration/branding`.
- No edit to `web-overrides/index.html` or the bind-mounted
  `/jellyfin/jellyfin-web/index.html`.
- No `docker compose` action, no container restart.
- No git commit on `snapshots/`, no tag movement.
- All inspections were `curl` GET (`/Branding/Configuration` +
  `/System/Configuration/branding`) and `docker exec jellyfin sh -c`
  bounded to `cat`/`grep`/`wc`/`ls`.

---

## 11. Sign-off

- **Auditor:** s8n (audit pass, 2026-05-08)
- **Live theme at audit time:** Cineplex v1.0.6 (verified —
  `/Branding/Configuration` returns `MRunkehl/cineplex@v1.0.6`)
- **Top likely cause of detail-page black band:** Finity (Cineplex's
  parent) ships `--detail-page-backdrop-offset: 17%` by design. Our
  `bg:#000 !important` rules turn that intentionally-clear 17vw band
  into a hard-black slab. The Finity `mask.png` overlay would have
  softened it into a gradient if it loads — worth a DevTools network
  check.
- **Recommended forward path:** STAY on Cineplex + apply §7
  detail-page CSS (full-bleed backdrop + linear-gradient overlay,
  scoped to `body.itemDetailPage`).
- **Personal-tweak portability:** **HIGH** for 11 of 14 blocks; **MEDIUM/LOW**
  for the 3 `bg:#000` blocks (must be scoped/dropped on theme swap).
- **Next step:** owner reviews this doc + screenshots the current
  detail-page band, decides whether to apply §7. No work on the live
  server until that review.