Design pass on the web UI: amber for new, EQ bars, keyboard feed list

Works through TODO.md from the 2026-09-11 review. Unread badges, dots and
download bars take the icon's amber; the playing item is marked by EQ bars
that move only while it plays. The feed list is usable from the keyboard,
focus rings show everywhere, and folders get a mosaic of their shows' art
with the triangle hung in the margin. Sentence-case labels, fewer bold
weights, tinted initials tiles, shorter header lines, "Kept" everywhere,
and the list gets the room the empty panes had. Reduced motion is honoured.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TAC7sLVqfKmY6rsTLXzNgk

TODO.md

@@ -0,0 +1,85 @@
+# To do
+
+## Design pass on the web UI
+
+From a review on 2026-09-11, against screenshots of every view in all three themes (desktop, phone,
+dialogs, sign-in) on the browser suite's fixture daemon. Line numbers are `web/index.html` as of
+`2e416f9` and will drift; search for the selector instead.
+
+The palette already comes from the 2004 icon and Classic is the strongest identity in the product, but
+Dark and Light, the themes people actually use, read as a generic dark dashboard: one system font, bold
+everywhere, one pale blue doing every job, the same radius on everything. The first three items below
+are the ones that would make Dark look like iPodderX; the rest are tidying.
+
+- [x] **Amber means new.** The blue accent is on unread badges, unread dots, the primary Scan button,
+  selection, the playing outline, the slider thumb and links, so a count looks like a button and nothing
+  stands out. Give the icon's EQ-bar amber (`--accent2`) to unread badges, unread dots and download
+  progress; keep blue for selection and the one primary action. `.badge` (:169), `.ep .st` (:280),
+  `.dlbar i` (:308).
+- [x] **EQ bars as the playing marker.** The strongest image in the brand. Small amber bars on the
+  playing row and in the player bar, standing still under `prefers-reduced-motion`. This is the one
+  memorable detail; keep everything around it quiet.
+- [x] **Focus you can see.** No `:focus-visible` styles anywhere, and `overflow:hidden` on `.tgroup` (:105)
+  and `#topbar` (:100) clips the focus ring of every toolbar button, so keyboard users cannot see where
+  they are. Add a `:focus-visible` ring and inset it, or drop the overflow clipping.
+- [x] **Fewer bold weights.** Directory, Popular and All Subscriptions, every feed name and every unread
+  title are 600–700, so nothing leads. Keep bold for headings and unread titles, 500 elsewhere.
+  `font-variant-numeric: tabular-nums` on counts, sizes and durations. Keep `system-ui`: the page fetches
+  nothing from anyone else, on purpose.
+- [x] **Sentence-case labels.** Drop `text-transform:uppercase` from `.ephead` (:262), `.fhd` (:195),
+  `.chip` (:296) and `.tag` (:157). Classic already writes "Title, File, Size", and it reads better.
+- [x] **The list gets the room.** With nothing selected, the reading pane takes about 60% of the height to
+  say "Pick an item to read it", and the Files pane keeps 270 px to say "No files". Raise the default
+  `--listh` from 40% to about 60% (:187), and hide `#files` (:192) when nothing is selected or the item
+  has no files.
+- [x] **Shorter header lines.** "2 items · 1 downloaded · checked 1m ago · every 1 hour · next in 60m"
+  cuts off at "ev…" on a phone, and "every 1 hour · next in 60m" says nothing right after a check. Show
+  "2 items, 1 downloaded · checked 1m ago"; move the schedule into the tooltip (:829, :914).
+- [x] **One word per thing.**
+  - "1 items" in the sidebar and folder rows (:794, :829, :943).
+  - "saved" in the sidebar (:793–794), "downloaded" in headers and on the Downloaded tab. Use
+    "downloaded".
+  - One feature, three names: the Flagged tab, the "Keep the selected item" tooltip (:537), "Starred
+    items are never touched" in Settings (:1629). Use "Keep", and call the tab "Kept".
+- [x] **Unsubscribe with the other actions.** "Minus unsubscribes" is the rule from the icon pass and it
+  holds, but in the feed header the minus sits bare at the far right, apart from the round buttons, and
+  reads as a window's minimise control. Give it the same round frame and put it with the others
+  (`.acts .btn.last`, :224).
+- [x] **Respect reduced motion.** The drawer slide, the folder chevron and the toast animation should stop
+  under `prefers-reduced-motion`.
+- [x] **Art.** The player shows the episode title's initials ("SE") even when the feed has art: use the
+  feed's. Initials tiles for feeds without art are all the same grey, and two "TS" sit in a row in the
+  fixtures: tint each from the palette by a hash of the title.
+- [x] **Sign-in.** A plain centred card. It is the one place the original icon could be shown large.
+- [x] **Settings export and import.** A floppy disk and a plus, which only make sense with the hint text
+  under them. The one spot where the icon-only rule does not hold up; consider words there.
+
+### Folders in the sidebar
+
+From a closer look the same day: 2× crops of the sidebar in all three themes, with positions measured in
+the browser. Closed by default, remembered across reloads (`ipx.expanded`) and opened by a search is
+right, and so is the quarter turn when you click. How it is drawn is not.
+
+- [x] **Keyboard.** The triangle is a `<span>` and a feed row a `<div>`, with no `tabindex` or
+  `aria-expanded` anywhere: Tab goes from the feed filter straight to Sign out, so the feed list cannot be
+  used from the keyboard at all. Make the triangle a `<button aria-expanded>` and each row focusable with
+  a visible ring; Left and Right to close and open are a cheap extra. This one is a bug, the rest is
+  polish. (`renderFeeds`, :786–800)
+- [x] **Triangle in the margin, on folders only.** Every row keeps the 18 px `.chev` slot and a gap, so
+  every feed's art starts at x=44 while the Directory, Popular and All Subscriptions icons start at x=16:
+  about 100 feeds pushed 28 px right for two triangles, in a 290 px sidebar. Hang the triangle in the left
+  padding of folder rows only, so ordinary feeds line up with the places above them. (`.chev`, :141)
+- [x] **A target you can hit.** 18 × 18 px, under the 24 px minimum, with an 11 px glyph in `--faint`, in
+  a 48 px row where a near miss opens the folder's page instead. Keep the glyph small but give its button
+  the full height of the row.
+- [x] **Shows nest under the folder's title.** `.feed.child` steps in 16 px (:140), so a show's art lands
+  at x=60, between the folder's art (x=44) and its title (x=88). Indent to the title, with slightly
+  smaller art (about 28 px), so an open folder reads as a folder rather than a crooked list.
+- [x] **A folder that looks like one.** "TS" in a grey tile cannot be told from a feed. Draw a 2×2 mosaic
+  of the first four feeds' art, the way iTunes built playlist artwork from album covers; Glass Cannon's
+  shows all have art. The one bold touch the sidebar gets.
+- [x] **The selected tile disappears.** In Dark and Light a selected feed without art loses its initials
+  tile, because `.feed.sel` and `.art` are both `--raise`.
+
+After any of these: rebuild, `node tests/page-smoke.js`, `npx playwright test`, and look at all three
+themes and a phone width before calling it done.