# New Bento Hub theme

The old Bento rules in `frontend/styles.css` have been removed. The replacement
is `frontend/theme-bento-hub.css`, scoped to `html[data-layout="bento-hub"]`.
The stylesheet, small theme helper, and self-hosted Plus Jakarta Sans fonts are
included in the service-worker shell cache. Classic remains the default.

## Match to the reference

The reference is `docs/mockups/bento-hub/index.html` and `SPEC.md` (local design
sources). The implementation uses their obsidian surfaces, solar-gold primary
controls, cyan listening/status cues, Plus Jakarta Sans and JetBrains Mono,
16px outer / 10px inner corners, stroke SVG icons, search capsule, playlist
artwork collages, bordered collection rows, and floating mini player.

Coverage includes the desktop sidebar and phone navigation, Home and search,
Now Playing, all three notes tabs, stage lyrics, up next, playlist and channel
views, Queue and batch selection, History, Saved, all download states and their
Retry/Cancel controls, Settings overview and sections, Service mode, modals,
control sheets, and empty states. Floating chrome has measured clearance;
content scrolls inside the remaining viewport. `#sectionRail` stays fixed and
attached directly to `body`. It is never moved into a panel or scroll container.

## Deliberate differences

- Content and navigation remain the real app's. Home shows actual playlists
  and recommendations. Counts, artwork, progress, lyrics and wake-lock state
  come from existing data; there are no invented verification badges, transfer
  speeds, subscriber counts, or guarantees that the screen will stay awake.
- The desktop sidebar uses the spec's 260px width rather than the HTML mockup's
  240px. The drawer extends through 1023px. The existing app stacks its player
  at phone widths; its browsing and player controls remain accessible there.
- Now Playing keeps the real control deck, playlist panel, volume, looping,
  fullscreen, notes and More controls. Notes remain with the player instead of
  reproducing the mockup's separate static lyrics column. Service keeps its
  view, autoscroll, floating lyrics, reporting and text-size controls; these
  wrap when necessary rather than overlapping.
- Settings keeps its section registry, back/history behavior, live summaries,
  search and desktop two-pane navigation. Layout selection remains the existing
  select rather than duplicating it with mockup-only theme chips.
- Functional text has an 11px floor and controls have 44px minimum targets.
  Muted dark text and the light-theme gold were adjusted for contrast. Existing
  font scaling, density, contrast, reduced-motion and performance preferences
  continue to apply. Service lyrics keep their adjustable sizing.
- Mockup frames omit the shell on several screens and contain empty space or
  sample rows. Real pages retain the full shell and scrollable content. Video
  fixture art is synthetic; a real playing video fills the video stage.

## Verification and screenshots

Run `node scripts/test-bento-theme.js` for a reproducible comparison. It extracts
pre-Bento commit `04b620e` into a temporary directory, captures Classic and Glass
before shots, then checks the current app. It does not modify the checkout.
`BENTO_BASE_COMMIT` can select another baseline; `BENTO_SCREENSHOT_DIR` can select
an output directory. Default output is `~/deliverables/ytplayer-done13/`.

The Playwright matrix covers 23 screens at 390px and 1440px in Chromium and
WebKit. It also checks centered navigation icons, download action appearance,
fixed rail ownership, sidebar and mini-player navigation, floating clearance,
theme switching restoration, and light/high-contrast appearance. The reference
is opened at both widths and each reference frame is captured when the local
mockup is present. No local mockup files are added to these implementation
commits. Static fixtures freeze the Classic mini-player's initial observer and
native indeterminate progress to avoid unrelated animation/scroll races.
Before/after comparisons allow at most 40 subpixel rasterization differences
in a whole screenshot; substantial geometry or styling differences fail. The
additional theme-switch check tolerates one RGB level per channel to account
for Chromium recompositing rounded corners, while retaining the 40-pixel limit.

Frontend unit tests include floating-chrome clearance with and without safe
areas/hidden bars and Bento-only SVG mapping without changing Glass glyphs.
The usual frontend tests, app syntax check and server build are run after each
screen group. Server source and imports are unchanged.

On a real iPhone, review safe-area clearance in Safari and installed mode,
keyboard and orientation changes, the floating rail, mini-player return,
Service controls, and actual video playback. On desktop, review long titles,
sidebar drawer at tablet widths, keyboard focus, Settings navigation and theme
switching. WebKit automation checks layout; it does not emulate all iOS media
or safe-area behavior. Nothing was pushed or deployed.