docs(player): attribute the phone seek bar's removal correctly

The paragraph said #59 took the seek bar off the phone's transport.
It was plan 016 B2 — audio-player.ts says so in the comment above the
rule that does it, and CLAUDE.md's own #59 paragraph says #59 removed
shuffle, repeat and the queue button. Wrong provenance in the file
whose whole value is being right about which change did what.

Also stop tracking .pi/journal.md. It is a scheduled run's scratch log,
and this repo's memory is CLAUDE.md and .planning/ — a session log
arriving inside a feature PR is a new convention landing sideways.

.pi/skills/yellowjacket-dev/SKILL.md

@@ -130,13 +130,7 @@ reference, because you need them *before* the failure, not after.
   what you otherwise get is `Property 'scroll' does not exist on type
   'CSSResult'` pointing at a line of prose, or every test in the suite
   failing to import. It went in after the trap cost a fourth session in
-  which its own warning had been read twice. **The same command carries
-  a second CSS check**: a nested rule whose selector starts with an
-  element name (`audio-player { … }` rather than `& audio-player { … }`)
-  is silently dropped by the device's Chrome 113 and by nothing else, so
-  every tier you can run renders it correctly. Run it after touching
-  `index.css` or any `css` literal; a rule directly inside a top-level
-  `@media` is not nested and is not flagged.
+  which its own warning had been read twice.
 - **A failing CI job's log is reachable even when `gitea_ci job_logs`
   says it is not.** That endpoint 404s on this Gitea build. The REST
   API answers, with the `GITEA_TOKEN` already in the environment:

CLAUDE.md

@@ -1462,42 +1462,6 @@ vary) wins, ours being told from theirs by **identity** rather than
 that ends the gesture is swallowed, keyed on the gesture rather than on
 a time window so the first tap on the menu it opened is not eaten too.
 
-**A control revealed by `:hover` is gated on the device having hover,
-and which way round depends on whether it is the only route to its
-action.** The gate itself is not optional: a touch long-press
-synthesises a hover state in the WebView, so every one of these flashed
-into view during the 500 ms hold above — a control appearing because
-the user was reaching for a different one. Where the action is reachable
-another way the control is **absent** on a touch device (the home card's
-play button, #68; the queue row's remove, which the row's bottom-sheet
-menu carries since #60), and that is `display: none` outside
-`(hover: hover) and (pointer: fine)` rather than `opacity: 0` or
-`visibility: hidden`, both of which leave a button holding its hit area
-and its place in the accessibility tree. Where the control is the
-**only** route it is instead always visible under
-`@media not all and (hover: hover)` — `track-details`'s cover-art
-overlay and remove, `shortcut-capture`'s reset (#137) — because hiding
-it takes the action away entirely.
-
-**Always-visible is not the same as always-in-the-way.** The cover-art
-overlay is `inset: 0` at 50% black, which is fine as a hover state and
-is not fine as the permanent appearance of the artwork being edited —
-and it is only a *hint*, since `.cover-art-edit` carries the click and
-tapping the art always worked. Off hover it becomes a corner chip in
-the remove button's own language. The × beside it stays full-size,
-because that one really is the only route to its action.
-
-One thing to know before checking either: **no *committed* tier renders
-as a touch device.** CDP's `Emulation.setEmulatedMedia` does not reach
-the component tier's iframe, and the e2e projects are Desktop Chrome
-and Desktop Safari, neither of which has touch — a Playwright project
-using a mobile descriptor would report `hover: none`, so this is a
-choice not to carry one rather than a thing that cannot be done. So
-`hover-affordance.test.ts` asserts the *parsed stylesheet* — which rule
-sits inside which media query — and says so; the regression it exists
-for is someone hoisting a rule out of its query as a tidy-up, which
-nothing on a desktop renders differently.
-
 Three lists had no focused row to open a menu *from* — the queue panel
 and both playlist detail views — and gained a roving tab stop through
 `utils/roving-rows.ts`. **`track-list` deliberately does not use it**:
@@ -2069,26 +2033,9 @@ one that closes the queue — the reported defect moved one press later,
 which looks exactly like a press that did nothing.
 
 **And the way out is 44px on a phone.** With the panel spanning the
-whole width there is no scrim there at all, so the close button is the
-only pointer route out of a full-screen surface; it was **25×21px**.
-
-**The scrim is drawn only where it can be tapped** (#171). Below 600px
-`.panel-content` is `width: 100%`, so the scrim sat entirely underneath
-an opaque panel — measured at 424×439, host, panel and scrim all
-424×318 — dimming nothing and dismissing nothing while wearing
-`cursor: pointer`. #24's tap-outside-to-close cannot exist on a surface
-with no outside, and the screen above is what answers it instead: back,
-and a 44px close button. The alternative — a gutter, which is the
-drawer pattern — was declined, because it buys the affordance by taking
-width off a full-screen surface on a 424px viewport. Two things about
-it are load-bearing. Its **existence** is `matchMedia`, not
-`display: none`, on `job-band`'s rule: a hidden scrim is still an
-element carrying the dismissal handler. And **the 600–899 band is
-untouched**, where the panel is a 320px column of a wider content area
-and the scrim has real uncovered pixels — which is why the e2e half
-asserts *absence* at 424×439 rather than clicking, since a phone-width
-case that clicks the scrim's centre hits the panel and passes on the
-broken build.
+whole width the scrim has no uncovered pixels at all, so the close
+button is the only pointer route out of a full-screen surface; it was
+**25×21px**.
 
 What this does **not** fix is `page-header` overflowing on its own:
 at 900×600 "New Smart Playlist" is still clipped to 114 of 162px with
@@ -2569,31 +2516,6 @@ missing half; `catalogFailed` is the only route to `unavailable` now,
 and the timer is a 60 s backstop for a genuine hang rather than the
 verdict.
 
-**On a phone that page is one scroll container, and the header is in
-it** (#66). It was built as a fixed header over a scrolling tracklist,
-which is the desktop arrangement: at the reference device's 424×439 the
-header owned **253 of the panel's 318px** and the list scrolled inside
-the 64 that were left. Below 600px the *host* is the scroller and
-`.content` stops being one, so the whole page moves together — which is
-only available because this tracklist is plain DOM rather than a
-virtualizer, and because `.main-panel > *` already gives the host a
-definite height.
-
-Three things about it are load-bearing. **Another `min-width: 0` was
-not the fix**: `.album-info` carries one and was shrinking exactly as
-asked, to 112px beside a 200px cover — so the title drew as `G…` and
-"Shuffle album" ended at x=443 inside a 424px box, clipped by the
-component's own `overflow: hidden` and reachable by no gesture. A row
-with a fixed-size sibling has to **stack** at that width, or the column
-that must shrink has nothing to be wide with. **`layout-overflow.spec.ts`
-cannot see any of this** — `body.scrollWidth` equalled the viewport
-throughout, because the overflow was *inside* a component; the spec
-measures each header control against the host's own box, which is
-`top-bar-fit.spec.ts`'s shape for the same reason. And **the phone block
-is last in the stylesheet**, on `index.css`'s rule: a media query adds
-no specificity, so written above the plain rules it overrides every
-declaration in it is silently dead.
-
 **Activating a row plays the list the row is in, from that row.** A
 double-click — and Play on a single row's context menu — queues the
 list as *displayed* with `startIndex` on that row, not a queue of one
@@ -3549,27 +3471,6 @@ android-inspect` forwards the WebView's devtools socket and `make
 android-eval` asks the real page — raw CDP, because `connectOverCDP`
 calls `Browser.setDownloadBehavior` and a WebView refuses it.
 
-**One of those gaps is checked rather than remembered.** A nested rule
-whose selector starts with an element name is not a parse error anyone
-would notice on 113 — the rule simply does not exist, there and nowhere
-else, which is how the bottom bar's `text-overflow: ellipsis` came to
-have never truncated on the device. `make css-check`
-(`frontend/scripts/check-css-nesting.mjs`, a pre-commit hook and a CI
-step) fails on one, over every `frontend/*.css` and the `css` literals
-alike — a glob rather than `index.css` by name, because the hook fires
-on `frontend/**/*.{ts,css}` and a sweep that names one file goes green
-over a stylesheet it never opened — and
-says the fix is a leading `&` — valid in both syntaxes, so no nested
-rule here has a reason to omit it. Two things it has to get right, and
-both follow from asking whether a *style* rule is anywhere above rather
-than what the immediate parent is: `@media (…) { bottom-nav { … } }` at
-the top level is an ordinary rule and is the majority of what a regex
-over the file would report, while the same rule one level inside
-`.bar { @media (…) { … } }` is nested and is flagged. The check is the
-cheap version of the answer; a build-time downlevel (Lightning CSS
-targeting 113) would fix the class permanently and is a dependency and
-a build step rather than twenty lines.
-
 `build/config.yml`'s `version` is the
 *metadata* version and is not what the app reports — `main.version` is
 stamped at link time from the packaging recipe's git-derived version.

Makefile

@@ -172,17 +172,12 @@ ui-setup: ## Install the Vitest browser provider's own Chromium (once)
 bindings-check: ## Fail if the generated bindings are stale
 	@./scripts/bindings-check.sh
 
-# Two CSS traps that report a long way from their cause, or not at all.
 # A backtick inside a comment in a css`` literal ends the literal, and
 # what you get back is a type error about CSSResult, or every test in
-# the suite failing to import. Four sessions, three plans. And a nested
-# rule starting with an element name is dropped by the device's
-# Chrome 113 in silence -- no tier here runs an engine that can see it.
-# Instant.
+# the suite failing to import. Four sessions, three plans. Instant.
 .PHONY: css-check
-css-check: ## Fail on a css`` literal ended early by a backtick, or a nested rule needing an &
+css-check: ## Fail if a css`` literal was ended early by a backtick in a comment
 	@cd frontend && node scripts/check-css-literals.mjs
-	@cd frontend && node scripts/check-css-nesting.mjs
 
 # .pi/ and CLAUDE.md document commands, and a doc that documents a
 # command wrongly is worse than no doc: an agent runs it confidently.

e2e/specs/phone-album-page.spec.ts

@@ -1,209 +0,0 @@
-import { test, expect } from '../support/fixtures.js';
-import type { Page } from '@playwright/test';
-
-/**
- * The album page on a phone (#66).
- *
- * Two faults, and neither was visible to `layout-overflow.spec.ts`:
- * that spec asserts the *shell* needs no sideways scrolling, and the
- * shell was correct throughout — `body.scrollWidth === clientWidth`
- * while `explore-album-details` itself measured 443 inside a 424px box
- * and clipped two of the album's three primary actions with its own
- * `overflow: hidden`. So the measurement here is **per control against
- * the component's box**, which is the same shape `top-bar-fit.spec.ts`
- * needed for the same reason.
- *
- * The other half is the scroll: the page was a fixed header over a
- * scrolling tracklist, so at the reference device's 424x439 the header
- * owned 253 of the panel's 318px and the list scrolled in the 64 that
- * were left. It is one scroll container below 600px, which is a
- * property of the *host* rather than of `.content`.
- *
- * The engine is the caveat this tier cannot close: the reference device
- * renders in Chrome 113 and this is Chromium/WebKit. A flex direction
- * and a scroll container are nowhere near that engine's documented gaps
- * (relaxed nesting, the Popover API, `light-dark()`), but "it renders
- * at that size in Chromium" is not evidence about the phone.
- */
-
-/** The phone this was measured on, in CSS pixels. */
-const DEVICE = { width: 424, height: 439 };
-
-const details = (page: Page) => page.locator('explore-album-details');
-
-/** The page's own boxes, read from inside its shadow root. */
-const geometry = (page: Page) =>
-  page.evaluate(() => {
-    const host = document.querySelector('explore-album-details');
-    const sr = host?.shadowRoot;
-
-    if (!host || !sr) return null;
-
-    const box = (sel: string) => {
-      const el = sr.querySelector(sel);
-
-      if (!el) return null;
-
-      const r = el.getBoundingClientRect();
-
-      return { width: Math.round(r.width), right: Math.round(r.right) };
-    };
-
-    const content = sr.querySelector('.content');
-
-    return {
-      hostWidth: host.clientWidth,
-      hostScrollWidth: host.scrollWidth,
-      // The host is the scroller below 600px, so the page is taller
-      // than its box rather than the tracklist being a window inside it.
-      hostScrolls: host.scrollHeight > host.clientHeight,
-      contentScrolls: content
-        ? content.scrollHeight > content.clientHeight
-        : null,
-      header: box('.album-header'),
-      play: box('[data-testid="album-play"]'),
-      shuffle: box('[data-testid="album-shuffle"]'),
-      queue: box('[data-testid="album-queue"]'),
-      title: (() => {
-        const el = sr.querySelector('.album-title-text');
-
-        return el ? el.scrollWidth <= el.clientWidth + 1 : null;
-      })(),
-    };
-  });
-
-test.describe('the album page on a phone', () => {
-  test.beforeEach(async ({ app }) => {
-    await app.setViewportSize(DEVICE);
-    await openFirstAlbum(app);
-  });
-
-  test.afterEach(async ({ app }) => {
-    await app.setViewportSize({ width: 1440, height: 900 });
-    await app.getByTestId('nav-tracks').click();
-  });
-
-  test('keeps every action inside its own box', async ({ app }) => {
-    const geo = await geometry(app);
-
-    expect(geo).not.toBeNull();
-    // "Shuffle album" ended at x=443 in a 424px component and could not
-    // be reached by any gesture; "Add to queue" at 440.
-    for (const action of ['play', 'shuffle', 'queue'] as const) {
-      expect(
-        geo?.[action],
-        `${action} is rendered`,
-      ).not.toBeNull();
-      expect(
-        geo?.[action]?.right ?? 0,
-        `${action} ends inside the page`,
-      ).toBeLessThanOrEqual(geo?.hostWidth ?? 0);
-    }
-
-    expect(geo?.hostScrollWidth).toBe(geo?.hostWidth);
-    expect(geo?.header?.width).toBe(geo?.hostWidth);
-  });
-
-  test('gives the title the row rather than one glyph of it', async ({
-    app,
-  }) => {
-    // `.album-info` was squeezed to 112px beside the art, so an album
-    // called *Glass Harbour* drew as `G…`. It carries `min-width: 0`
-    // and was shrinking as asked — the row had to stack.
-    expect(await geometry(app).then((g) => g?.title)).toBe(true);
-  });
-
-  test('scrolls as one page, with the header scrolling away', async ({
-    app,
-  }) => {
-    const before = await geometry(app);
-
-    expect(before?.hostScrolls).toBe(true);
-    expect(before?.contentScrolls).toBe(false);
-
-    const headerTop = () =>
-      app.evaluate(
-        () =>
-          document
-            .querySelector('explore-album-details')
-            ?.shadowRoot?.querySelector('.album-header')
-            ?.getBoundingClientRect().top ?? 0,
-      );
-
-    expect(await headerTop()).toBeGreaterThanOrEqual(0);
-
-    // A wheel gesture, not `scrollTop`: `overflow: hidden` still permits
-    // programmatic scrolling, so a probe that assigns it passes on the
-    // build this exists to fail.
-    await details(app).hover();
-    await app.mouse.wheel(0, 250);
-
-    await expect.poll(headerTop).toBeLessThan(-100);
-  });
-
-  test('is the desktop arrangement again above the breakpoint', async ({
-    app,
-  }) => {
-    await app.setViewportSize({ width: 1024, height: 800 });
-
-    // The same element, re-laid-out: one component with two
-    // arrangements, not a phone-only copy.
-    await expect
-      .poll(async () => (await geometry(app))?.hostScrolls)
-      .toBe(false);
-
-    const arrangement = await app.evaluate(() => {
-      const sr = document.querySelector('explore-album-details')?.shadowRoot;
-      const header = sr?.querySelector('.album-header');
-      const content = sr?.querySelector('.content');
-
-      return {
-        direction: header ? getComputedStyle(header).flexDirection : null,
-        contentOverflow: content ? getComputedStyle(content).overflowY : null,
-      };
-    });
-
-    expect(arrangement.direction).toBe('row');
-    expect(arrangement.contentOverflow).toBe('auto');
-  });
-});
-
-/** Albums → the second card, which navigates to the album page. */
-async function openFirstAlbum(app: Page): Promise<void> {
-  // Below 600px the sidebar is gone; the tab bar is the navigation.
-  await app.getByTestId('tab-albums').click();
-  await expect(app.getByTestId('main-content')).toHaveAttribute(
-    'data-active-view',
-    'albums',
-  );
-
-  await expect.poll(() => cardCount(app)).toBeGreaterThan(1);
-
-  // Dispatched rather than clicked: the card lives in a virtualizer
-  // inside a shadow root, and Enter expands the dropdown instead.
-  await app.evaluate(() => {
-    document
-      .querySelector('cover-grid')
-      ?.shadowRoot?.querySelectorAll('.album-card')[1]
-      ?.dispatchEvent(
-        new MouseEvent('click', { bubbles: true, composed: true }),
-      );
-  });
-
-  await expect(app.getByTestId('main-content')).toHaveAttribute(
-    'data-active-view',
-    'explore-album-details',
-  );
-  await expect(
-    details(app).locator('[data-testid="album-play"]'),
-  ).toBeVisible();
-}
-
-async function cardCount(app: Page): Promise<number> {
-  return app.evaluate(
-    () =>
-      document
-        .querySelector('cover-grid')
-        ?.shadowRoot?.querySelectorAll('.album-card').length ?? 0,
-  );
-}

e2e/specs/phone-progress-line.spec.ts

@@ -79,20 +79,6 @@ test.describe('the progress line sits on the border between the bars', () => {
     await play(app);
   });
 
-  /*
-   * Every test here starts a LONG_TRACK and the suite is workers: 1,
-   * fullyParallel: false against one long-lived app — so without this
-   * the four phone-* specs that follow alphabetically inherit a playing
-   * queue. phone-transport.spec.ts records where that lesson came from:
-   * the fault first showed up as a flake in a spec about something else.
-   */
-  test.afterEach(async ({ app }) => {
-    await callBinding(app, 'queue.Queue.Clear').catch(() => {
-      /* already empty */
-    });
-    await app.setViewportSize(DESKTOP);
-  });
-
   test('spans the width, between the mini player and the tab bar', async ({
     app,
   }) => {

e2e/specs/queue-as-a-screen.spec.ts

@@ -179,8 +179,8 @@ test.describe('the queue is a screen where it covers the content', () => {
    */
 
   /**
-   * With the panel spanning the whole width there is no scrim here at
-   * all (#171), so the close button is the only pointer route out of a
+   * With the panel spanning the whole width the scrim has no uncovered
+   * pixels, so the close button is the only pointer route out of a
    * full-screen surface. Measured at 424×439 before #55: **25×21px**.
    */
   test('offers a way out a thumb can hit', async ({ app }) => {
@@ -194,33 +194,6 @@ test.describe('the queue is a screen where it covers the content', () => {
     expect(box!.width).toBeGreaterThanOrEqual(44);
     expect(box!.height).toBeGreaterThanOrEqual(44);
   });
-
-  /**
-   * #171 — and it draws no scrim, because there is nowhere to tap.
-   *
-   * `.panel-content` is `width: 100%` here, so the scrim sat entirely
-   * underneath it: measured at 424×439, host, panel and scrim all
-   * 424×318. #24's tap-outside-to-close cannot exist on a surface with
-   * no outside, and a `cursor: pointer` layer nobody can reach is a
-   * claim the component cannot keep.
-   *
-   * Asserted as absence rather than by clicking, for the reason the
-   * issue gives: a naive phone case clicks the scrim's centre and hits
-   * the panel, so it passes on the build this exists to fail. The scrim
-   * is still real between 600 and 899px, which `queue-overlay.spec.ts`
-   * asserts at 900×600 by clicking it.
-   */
-  test('draws no scrim, because a screen has no outside to tap', async ({
-    app,
-  }) => {
-    await openTheQueue(app);
-
-    const scrim = await queue(app).evaluate(
-      (el) => el.shadowRoot!.querySelector('.scrim') !== null,
-    );
-
-    expect(scrim).toBe(false);
-  });
 });
 
 /**

frontend/scripts/check-css-literals.mjs

@@ -23,23 +23,97 @@
  * as the literal contains an unterminated `/*`. Nothing else produces
  * that, and a legitimate literal cannot contain one.
  */
-import { globSync, readFileSync } from 'node:fs';
-
-import { taggedLiterals } from './css-literals.mjs';
+import { readFileSync } from 'node:fs';
+import { globSync } from 'node:fs';
 
 const TAGS = ['css', 'html', 'svg'];
 
+/**
+ * Find the end of a template literal that starts at `start` (the index
+ * of its opening backtick), respecting escapes and `${}` substitutions.
+ * Returns the index of the closing backtick, or -1.
+ */
+function endOfTemplate(src, start) {
+  let depth = 0;
+
+  for (let i = start + 1; i < src.length; i++) {
+    const c = src[i];
+
+    if (c === '\\') {
+      i++;
+      continue;
+    }
+
+    if (c === '$' && src[i + 1] === '{') {
+      depth++;
+      i++;
+      continue;
+    }
+
+    if (c === '}' && depth > 0) {
+      depth--;
+      continue;
+    }
+
+    if (c === '`' && depth === 0) return i;
+  }
+
+  return -1;
+}
+
+/** Strip `${...}` substitutions, which may legitimately contain anything. */
+function stripSubstitutions(text) {
+  let out = '';
+  let depth = 0;
+
+  for (let i = 0; i < text.length; i++) {
+    if (text[i] === '$' && text[i + 1] === '{') {
+      depth++;
+      i++;
+      continue;
+    }
+
+    if (text[i] === '}' && depth > 0) {
+      depth--;
+      continue;
+    }
+
+    if (depth === 0) out += text[i];
+  }
+
+  return out;
+}
+
+function lineOf(src, index) {
+  return src.slice(0, index).split('\n').length;
+}
+
 const files = globSync('src/**/*.ts', { cwd: process.cwd() });
 const problems = [];
 
 for (const file of files) {
   const src = readFileSync(file, 'utf8');
+  const tagPattern = new RegExp(`(^|[^\\w$.])(${TAGS.join('|')})\``, 'g');
 
-  for (const { tag, body, line } of taggedLiterals(src, TAGS)) {
+  let match;
+
+  while ((match = tagPattern.exec(src)) !== null) {
+    const open = match.index + match[0].length - 1;
+    const close = endOfTemplate(src, open);
+
+    if (close === -1) continue;
+
+    const body = stripSubstitutions(src.slice(open + 1, close));
     const opens = (body.match(/\/\*/g) ?? []).length;
     const closes = (body.match(/\*\//g) ?? []).length;
 
-    if (opens > closes) problems.push({ file, line, tag });
+    if (opens > closes) {
+      problems.push({
+        file,
+        line: lineOf(src, open),
+        tag: match[2],
+      });
+    }
   }
 }
 

frontend/scripts/check-css-nesting.mjs

@@ -1,79 +0,0 @@
-#!/usr/bin/env node
-/**
- * Fail on a nested rule whose selector starts with an element name.
- *
- * See `css-nesting.mjs` for what the phone does with one. No tier here
- * can see it: the component tier, the e2e tier and `make ui-visual` all
- * run a current Chromium, where the rule applies normally, so the only
- * report is a screenshot of the device — which is how the bottom bar's
- * title came to have never truncated there.
- *
- * It covers `index.css` and the `css` literals in the components alike,
- * because a shadow-root stylesheet is parsed by the same engine.
- */
-import { globSync, readFileSync } from 'node:fs';
-
-import { taggedLiterals } from './css-literals.mjs';
-import { findBareNestedRules } from './css-nesting.mjs';
-
-const problems = [];
-
-// Every stylesheet, not `index.css` by name: the hook that runs this
-// fires on `frontend/**/*.{ts,css}`, so naming one file promises a
-// coverage the sweep does not deliver -- a second stylesheet would be
-// silently unswept while the hook still went green over it. There is
-// only `index.css` today, which is exactly when this is free to fix.
-const stylesheets = globSync('*.css', { cwd: process.cwd() });
-
-if (stylesheets.length === 0) {
-  console.error('css-nesting-check: no stylesheet matched *.css');
-  process.exit(1);
-}
-
-for (const file of stylesheets) {
-  for (const { line, selector } of findBareNestedRules(
-    readFileSync(file, 'utf8'),
-  )) {
-    problems.push({ file, line, selector });
-  }
-}
-
-const sources = globSync('src/**/*.ts', { cwd: process.cwd() });
-
-// A sweep over an empty glob passes, and this one is expected to find
-// nothing, so "it found nothing" has to mean it looked.
-if (sources.length === 0) {
-  console.error('css-nesting-check: no sources matched src/**/*.ts');
-  process.exit(1);
-}
-
-for (const file of sources) {
-  const src = readFileSync(file, 'utf8');
-
-  for (const literal of taggedLiterals(src, ['css'])) {
-    for (const { line, selector } of findBareNestedRules(literal.body)) {
-      problems.push({ file, line: literal.line + line - 1, selector });
-    }
-  }
-}
-
-if (problems.length > 0) {
-  for (const p of problems) {
-    console.error(
-      `${p.file}:${p.line}: nested rule "${p.selector.split('\n')[0]}" starts ` +
-        'with an element name — write it as "& ' +
-        `${p.selector.split('\n')[0]}"`,
-    );
-  }
-
-  console.error(
-    `\ncss-nesting-check: ${problems.length} problem(s). ` +
-      'Chrome 113 (the device) drops a nested rule that does not start ' +
-      'with a symbol; the leading & is valid in both syntaxes.',
-  );
-  process.exit(1);
-}
-
-console.log(
-  `css-nesting-check: ${stylesheets.length} stylesheet(s) + ${sources.length} files, no bare nested rules`,
-);

frontend/scripts/css-literals.mjs

@@ -1,103 +0,0 @@
-/**
- * Finding the `css` tagged templates in a TypeScript source.
- *
- * Two checks read them — the unterminated-comment one and the nesting
- * one — and a second scanner would be a second thing to keep in step
- * with how a template literal actually ends.
- */
-
-/**
- * Find the end of a template literal that starts at `start` (the index
- * of its opening backtick), respecting escapes and `${}` substitutions.
- * Returns the index of the closing backtick, or -1.
- */
-export function endOfTemplate(src, start) {
-  let depth = 0;
-
-  for (let i = start + 1; i < src.length; i++) {
-    const c = src[i];
-
-    if (c === '\\') {
-      i++;
-      continue;
-    }
-
-    if (c === '$' && src[i + 1] === '{') {
-      depth++;
-      i++;
-      continue;
-    }
-
-    if (c === '}' && depth > 0) {
-      depth--;
-      continue;
-    }
-
-    if (c === '`' && depth === 0) return i;
-  }
-
-  return -1;
-}
-
-/**
- * Strip `${...}` substitutions, which may legitimately contain anything.
- *
- * Newlines inside them are kept, so a line number taken from the
- * stripped text still names the right line of the file it came from.
- */
-export function stripSubstitutions(text) {
-  let out = '';
-  let depth = 0;
-
-  for (let i = 0; i < text.length; i++) {
-    if (text[i] === '$' && text[i + 1] === '{') {
-      depth++;
-      i++;
-      continue;
-    }
-
-    if (text[i] === '}' && depth > 0) {
-      depth--;
-      continue;
-    }
-
-    if (depth === 0) out += text[i];
-    else if (text[i] === '\n') out += '\n';
-  }
-
-  return out;
-}
-
-/** The 1-based line number of `index` in `src`. */
-export function lineOf(src, index) {
-  return src.slice(0, index).split('\n').length;
-}
-
-/**
- * Every tagged template literal in `src` whose tag is in `tags`.
- *
- * `body` has its substitutions stripped and `line` is the line its
- * opening backtick sits on, so `line + (n - 1)` is the file line of the
- * body's own line `n`.
- */
-export function taggedLiterals(src, tags) {
-  const pattern = new RegExp(`(^|[^\\w$.])(${tags.join('|')})\``, 'g');
-  const found = [];
-
-  let match;
-
-  while ((match = pattern.exec(src)) !== null) {
-    const open = match.index + match[0].length - 1;
-    const close = endOfTemplate(src, open);
-
-    if (close === -1) continue;
-
-    found.push({
-      tag: match[2],
-      body: stripSubstitutions(src.slice(open + 1, close)),
-      line: lineOf(src, open),
-    });
-  }
-
-  return found;
-}

frontend/scripts/css-nesting.mjs

@@ -1,119 +0,0 @@
-/**
- * A nested rule whose selector starts with an element name is silently
- * dropped on the phone.
- *
- * The device renders in Chrome 113, which predates relaxed CSS nesting
- * (Chrome 120): before that a nested selector had to start with
- * something that could not be read as the beginning of a declaration,
- * so `.bottom-bar { audio-player { … } }` is not a parse error anyone
- * would notice — the inner rule simply does not exist, on the phone and
- * only on the phone. Three were live in `index.css`, one of them the
- * `text-overflow: ellipsis` on the bottom bar's title, which had
- * therefore never truncated on the device.
- *
- * `& audio-player` is valid in both syntaxes, so no nested rule here
- * has any reason to omit it.
- *
- * Two things the detection has to get right:
- *
- * - **A rule directly inside an at-rule is not nested.**
- *   `@media (…) { bottom-nav { … } }` at the top level is an ordinary
- *   rule and is fine — and it is the majority of the matches a regex
- *   over the file would produce. What decides it is whether a *style*
- *   rule is somewhere above, not what the immediate parent is: inside
- *   `.bar { @media (…) { audio-player { … } } }` the inner rule is
- *   nested, at-rule in between or not.
- * - **A declaration is not a rule.** `background: url(…)` and any
- *   string or comment can hold a brace, so this tracks them rather than
- *   matching lines.
- */
-
-/** Does this selector start with an identifier, rather than a symbol? */
-function startsWithIdent(selector) {
-  return /^[A-Za-z_\u00A0-\uFFFF]/.test(selector);
-}
-
-/**
- * Every nested style rule in `css` whose selector starts with an
- * element name, as `{ line, selector }` with a 1-based line.
- */
-export function findBareNestedRules(css) {
-  const found = [];
-  /** The blocks we are inside, innermost last: 'style' or 'at'. */
-  const stack = [];
-  /** The text since the last `{`, `}` or `;` — a prelude, if a `{` follows. */
-  let prelude = '';
-  let preludeLine = 1;
-  let line = 1;
-
-  const startPrelude = () => {
-    prelude = '';
-    preludeLine = line;
-  };
-
-  for (let i = 0; i < css.length; i++) {
-    const c = css[i];
-
-    if (c === '\n') {
-      line++;
-      if (prelude.trim() === '') preludeLine = line;
-      prelude += c;
-      continue;
-    }
-
-    if (c === '/' && css[i + 1] === '*') {
-      const end = css.indexOf('*/', i + 2);
-      const comment = css.slice(i, end === -1 ? css.length : end + 2);
-
-      line += (comment.match(/\n/g) ?? []).length;
-      i += comment.length - 1;
-      if (prelude.trim() === '') preludeLine = line;
-      continue;
-    }
-
-    if (c === '"' || c === "'") {
-      let j = i + 1;
-
-      while (j < css.length && css[j] !== c) {
-        if (css[j] === '\\') j++;
-        j++;
-      }
-
-      prelude += css.slice(i, j + 1);
-      i = j;
-      continue;
-    }
-
-    if (c === '{') {
-      const selector = prelude.trim();
-      const kind = selector.startsWith('@') ? 'at' : 'style';
-
-      if (
-        kind === 'style' &&
-        stack.includes('style') &&
-        startsWithIdent(selector)
-      ) {
-        found.push({ line: preludeLine, selector });
-      }
-
-      stack.push(kind);
-      startPrelude();
-      continue;
-    }
-
-    if (c === '}') {
-      stack.pop();
-      startPrelude();
-      continue;
-    }
-
-    if (c === ';') {
-      startPrelude();
-      continue;
-    }
-
-    prelude += c;
-  }
-
-  return found;
-}

frontend/src/components/config-page/shortcut-capture.ts

@@ -79,17 +79,6 @@ export class ShortcutCapture extends LitElement {
         .reset-btn:hover {
             color: var(--yj-accent-text, #ffd43b);
         }
-        /*
-         * Reset is the only way to put a rebound shortcut back, so where
-         * the device has no hover it is always visible rather than an
-         * invisible button holding its hit area. The inverse of #68's
-         * rule, which applies where the hover control is redundant.
-         */
-        @media not all and (hover: hover) {
-            .reset-btn {
-                opacity: 1;
-            }
-        }
     `;
 
     private handleClick = () => {

frontend/src/components/explore-album-details/explore-album-details.ts

@@ -892,67 +892,6 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
             .track-row .track-request {
                 flex-shrink: 0;
             }
-
-            /* ── The phone (#66) ──
-             *
-             * **This block is last on purpose**, for index.css's
-             * reason: a media query adds no specificity, so a rule
-             * written above the plain one it overrides loses to it and
-             * every declaration here is silently dead.
-             *
-             * Two faults, one shape. The page is a fixed header over a
-             * scrolling tracklist — the desktop arrangement — so at the
-             * reference device's 424x439 the header owned 253 of the
-             * panel's 318px and the tracklist scrolled inside the 64px
-             * that were left. And the header's flex row squeezed
-             * .album-info to 112px, so the title drew as one ellipsised
-             * glyph and two of the album's three primary actions were
-             * clipped by the host's own overflow: Shuffle album ended
-             * at x=443 in a 424px box, unreachable by any gesture.
-             *
-             * .album-info carries min-width: 0 and was shrinking as
-             * asked, so another one is not the fix — the row has to
-             * stack, or the info column has nothing to be wide with.
-             *
-             * The scroller moves to the host and .content stops being
-             * one, which is what makes the header scroll away; the
-             * tracklist is plain DOM rather than a virtualizer, so
-             * nothing inside wants a scroll window of its own. */
-            @media (max-width: 599px) {
-                :host {
-                    overflow-y: auto;
-                }
-
-                .album-header {
-                    flex-direction: column;
-                    align-items: flex-start;
-                    gap: 12px;
-                    padding: 12px 16px;
-                }
-
-                /* Stacked, the art is the whole of the header's width
-                 * budget and its 200px square is 45% of the reference
-                 * device's height. It is still what identifies the
-                 * album, so it shrinks rather than going. */
-                .cover-art-container {
-                    width: 140px;
-                    height: 140px;
-                }
-
-                /* A column flex item takes its content's width from
-                 * align-items: flex-start above, which would leave the
-                 * actions wrapping inside a box narrower than the row
-                 * they now have to themselves. */
-                .album-info {
-                    align-self: stretch;
-                }
-
-                .content {
-                    flex: 0 0 auto;
-                    overflow-y: visible;
-                    padding: 16px 16px 24px;
-                }
-            }
         `,
     ];
 

frontend/src/components/queue-panel/queue-panel.ts

@@ -13,7 +13,6 @@ import type { MenuSurface } from '../menu-surface/menu-surface';
 import '../menu-surface/menu-surface';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import { QueueController } from '@store/controllers/queue-controller';
-import { PHONE_QUERY } from '@utils/breakpoints';
 import { creditStore } from '@store/credit-store';
 import {
     describeQueueSource,
@@ -121,25 +120,6 @@ export class QueuePanel
     @property({ type: Boolean, reflect: true })
     overlay = false;
 
-    /**
-     * Phone width, from `matchMedia` rather than from a media query,
-     * because it decides whether the scrim *exists* (#171) —
-     * `job-band`'s rule, and a stylesheet cannot express it: a
-     * `display: none` scrim is still an element with a click handler.
-     *
-     * Below 600px the panel spans the whole content area, so the scrim
-     * has no uncovered pixels: measured at 424x439, host, panel and
-     * scrim are all 424x318 with the scrim entirely underneath. It dims
-     * nothing and dismisses nothing there, and the queue is a *screen*
-     * at that width anyway (#55) — back and a 44px close button are its
-     * ways out. Between 600 and 899 the panel is a 320px column of a
-     * wider content area, the scrim is reachable, and #24's
-     * tap-outside-to-close is real; that band is untouched.
-     */
-    @state() private phone = false;
-
-    private phoneQuery?: MediaQueryList;
-
     @state()
     private isDragging = false;
 
@@ -411,8 +391,6 @@ export class QueuePanel
             display: none;
         }
 
-        /* Overlay only, and above 600px only -- see the phone field,
-           which is where that half is decided (#171). */
         .scrim {
             position: absolute;
             inset: 0;
@@ -436,10 +414,10 @@ export class QueuePanel
 
             /* A screen's way out has to be hittable with a thumb.
                Measured at 424x439 before #55: these were **25x21px**,
-               and with the panel spanning the whole width there is no
-               scrim here at all (#171) -- so this is the only pointer
-               route out of a full-screen surface. Back answers it now
-               as well, which is the other half.
+               and with the panel spanning the whole width the scrim
+               underneath has no uncovered pixels at all -- so it was
+               the only pointer route out of a full-screen surface.
+               Back answers it now as well, which is the other half.
 
                Sized only in overlay mode: inline these sit in a 320px
                column beside the content, where a mouse is what reaches
@@ -661,42 +639,23 @@ export class QueuePanel
             text-overflow: ellipsis;
         }
 
-        /*
-         * The per-row remove is a hover affordance, and on a device
-         * without hover it is redundant rather than missing: the row's
-         * context menu is a bottom sheet since #60 and carries "Remove
-         * from Queue", so the action is one long-press away. An
-         * always-visible X would instead spend part of a 424px row on
-         * something already reachable. #68's treatment, for #68's reason.
-         *
-         * display:none outside the query rather than visibility:hidden:
-         * a hidden button still occupies its hit area and is still in
-         * the accessibility tree, so a phone would keep a target for a
-         * control it can never see.
-         */
         .remove-button {
-            display: none;
+            background: none;
+            border: none;
+            color: var(--yj-text-tertiary, #888);
+            cursor: pointer;
+            padding: 4px;
+            display: flex;
+            align-items: center;
+            visibility: hidden;
         }
 
-        @media (hover: hover) and (pointer: fine) {
-            .remove-button {
-                background: none;
-                border: none;
-                color: var(--yj-text-tertiary, #888);
-                cursor: pointer;
-                padding: 4px;
-                display: flex;
-                align-items: center;
-                visibility: hidden;
-            }
+        .track-item:hover .remove-button {
+            visibility: visible;
+        }
 
-            .track-item:hover .remove-button {
-                visibility: visible;
-            }
-
-            .remove-button:hover {
-                color: var(--yj-error-text, #ff8787);
-            }
+        .remove-button:hover {
+            color: var(--yj-error-text, #ff8787);
         }
 
         .list-area.drag-over {
@@ -869,12 +828,6 @@ export class QueuePanel
         // desktop width rather than the minimum.
         this.updateOverlayMode();
 
-        // Read here rather than in a field initialiser, so a test can
-        // install its own matchMedia before the element is created.
-        this.phoneQuery = window.matchMedia?.(PHONE_QUERY);
-        this.phone = this.phoneQuery?.matches ?? false;
-        this.phoneQuery?.addEventListener('change', this.onPhoneMedia);
-
         if (this.parentElement) {
             this.spaceObserver = new ResizeObserver(() =>
                 this.updateOverlayMode(),
@@ -917,8 +870,6 @@ export class QueuePanel
         this.creditsUnsub = undefined;
         this.spaceObserver?.disconnect();
         this.spaceObserver = undefined;
-        this.phoneQuery?.removeEventListener('change', this.onPhoneMedia);
-        this.phoneQuery = undefined;
         document.removeEventListener('keydown', this.onOverlayKeydown);
         document.removeEventListener(
             'mousemove',
@@ -985,10 +936,6 @@ export class QueuePanel
         this.overlay = available - this.panelWidth < MAIN_PANEL_FLOOR;
     };
 
-    private onPhoneMedia = (e: MediaQueryListEvent): void => {
-        this.phone = e.matches;
-    };
-
     /**
      * Escape closes a scrimmed overlay, which is the one keyboard rule
      * every dialog in this app already follows.
@@ -2025,7 +1972,7 @@ export class QueuePanel
         const tracks = this.queue.tracks;
 
         return html`
-            ${this.overlay && !this.phone
+            ${this.overlay
                 ? html`<div
                       class="scrim"
                       part="scrim"

frontend/src/components/track-details/track-details.ts

@@ -529,44 +529,6 @@ export class TrackDetails extends LitElement {
             background: var(--yj-error, #e03131);
         }
 
-        /*
-         * Both are the *only* route to changing or removing a track's
-         * cover art, so where the device has no hover they are always
-         * visible rather than hidden — the inverse of #68's rule, which
-         * applies where the hover control is redundant. Revealed by
-         * opacity, so what is on screen is what the desktop reveal shows
-         * and nothing about the layout moves.
-         */
-        @media not all and (hover: hover) {
-            /* The × is genuinely the only route to removing the art, so
-               on a device that cannot hover it is simply always there.
-
-               The pen is not: .cover-art-edit carries the click that
-               opens the file picker, so tapping the artwork already
-               worked while the overlay was invisible. It is a discovery
-               hint — and paying for discovery by covering the artwork
-               being edited in 50% black, permanently, on every touch
-               device, is heavier than the hint is worth. It becomes a
-               corner chip in the remove button's own visual language
-               instead: same size, same disc, same alpha. */
-            .cover-art-remove {
-                opacity: 1;
-            }
-
-            .cover-art-overlay {
-                opacity: 1;
-                inset: auto 4px 4px auto;
-                width: 24px;
-                height: 24px;
-                border-radius: 50%;
-                background: rgba(0, 0, 0, 0.7);
-            }
-
-            .cover-art-overlay wa-icon {
-                font-size: 14px;
-            }
-        }
-
         /* Error message */
         .error-message {
             flex: 1;

frontend/test/components/hover-affordance.test.ts

@@ -1,6 +1,5 @@
 /**
- * A hover affordance is gated on the device having hover — in whichever
- * direction keeps the action reachable.
+ * A hover affordance is gated on the device having hover.
  *
  * The home page's cover cards reveal a play button on :hover. A touch
  * long-press synthesises a hover state in the WebView, so on a phone
@@ -8,15 +7,6 @@
  * utils/long-press.ts is measuring for a context menu — a control
  * appearing because the user was reaching for a different one.
  *
- * #137 is the same sweep with the opposite answer for two of its three
- * cases. Where the revealed control is the *only* route to its action,
- * hiding it removes the action, so it is always visible where there is
- * no hover: `track-details`'s cover-art overlay and remove, and
- * `shortcut-capture`'s reset. The queue's per-row remove is the third,
- * and is the redundant kind — since #60 the row's context menu is a
- * bottom sheet carrying "Remove from Queue" — so it takes #68's
- * treatment here.
- *
  * This is asserted against the *parsed stylesheet* rather than by
  * emulating a touch device, and that is a limitation worth stating
  * rather than hiding. CDP's Emulation.setEmulatedMedia does not reach
@@ -34,9 +24,6 @@
 import { describe, expect, it } from 'vitest';
 
 import '@components/home-view/home-view';
-import '@components/queue-panel/queue-panel';
-import '@components/track-details/track-details';
-import '@components/config-page/shortcut-capture';
 import { fixture } from '@test/support/render';
 
 /** Every rule in the element's own adopted stylesheets, flattened. */
@@ -96,91 +83,3 @@ describe('the home card play button', () => {
     expect(unconditional.some((r) => /display:\s*none/.test(r.text))).toBe(true);
   });
 });
-
-describe("the queue row's remove button", () => {
-  it('is absent where the device has no hover, the menu carrying the action', async () => {
-    const el = await fixture('queue-panel', {});
-    const rules = rulesOf(el);
-
-    expect(rules.length).toBeGreaterThan(0);
-
-    // visibility:hidden alone would leave an invisible button holding
-    // its hit area on a phone, which is the trap #68's commit names.
-    const unconditional = rules.filter(
-      (r) => r.condition === null && r.text.startsWith('.remove-button'),
-    );
-
-    expect(unconditional.length).toBeGreaterThan(0);
-    expect(unconditional.some((r) => /display:\s*none/.test(r.text))).toBe(true);
-
-    const reveals = rules.filter(
-      (r) =>
-        r.text.includes('.remove-button') && /visibility:\s*visible/.test(r.text),
-    );
-
-    expect(reveals.length).toBeGreaterThan(0);
-
-    for (const rule of reveals) {
-      expect(rule.condition).toMatch(/hover:\s*hover/);
-      expect(rule.condition).toMatch(/pointer:\s*fine/);
-    }
-  });
-});
-
-/**
- * The two affordances that are the only route to their action.
- *
- * Asserted as "there is a rule showing it, and its condition is a
- * *negated* hover query" — the same stylesheet reading as above, for
- * the same reason: this tier's iframe cannot be emulated as a touch
- * device, and the regression worth catching is someone folding the rule
- * away as redundant on the desktop it does nothing on.
- */
-describe('an affordance with no other route', () => {
-  const cases: Array<[string, string, string[]]> = [
-    ['track-details', 'track-details', ['.cover-art-overlay', '.cover-art-remove']],
-    ['shortcut-capture', 'shortcut-capture', ['.reset-btn']],
-  ];
-
-  for (const [name, tag, selectors] of cases) {
-    it(`${name} shows it where the device has no hover`, async () => {
-      const el = await fixture(tag, {});
-      const rules = rulesOf(el);
-
-      expect(rules.length).toBeGreaterThan(0);
-
-      for (const selector of selectors) {
-        const shown = rules.filter(
-          (r) =>
-            r.condition !== null &&
-            r.text.includes(selector) &&
-            /opacity:\s*1/.test(r.text),
-        );
-
-        const touch = shown.filter((r) => /not[\s\S]*hover:\s*hover/.test(r.condition!));
-
-        expect(touch.length).toBeGreaterThan(0);
-      }
-    });
-  }
-
-  // The one half this tier can measure rather than read: the query is
-  // negated, so on the hover-capable browser running these tests the
-  // control must still be revealed by hover and by nothing else. A rule
-  // written without the `not` would show it here, permanently, on every
-  // desktop.
-  it('leaves the desktop reveal alone, where the device does have hover', async () => {
-    expect(matchMedia('(hover: hover)').matches).toBe(true);
-
-    const el = await fixture('shortcut-capture', {
-      action: 'player.next',
-      label: 'Next Track',
-      currentKey: 'X',
-      defaultKey: 'N',
-    });
-    const btn = el.shadowRoot?.querySelector('.reset-btn');
-
-    expect(btn).not.toBeNull();
-    expect(getComputedStyle(btn!).opacity).toBe('0');
-  });
-});

frontend/test/components/progress-line.test.ts

@@ -7,8 +7,8 @@
  * backend reported rather than a count of its own, and that it is
  * neither announced nor touchable. It cannot see where it sits — that
  * is the shell's grid, and it is asserted in
- * `e2e/specs/phone-progress-line.spec.ts` where there is a real bar
- * with a real tab bar under it.
+ * `e2e/specs/phone-transport.spec.ts` where there is a real bar with a
+ * real tab bar under it.
  */
 import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
 
@@ -168,36 +168,6 @@ describe('<player-progress-line>', () => {
         expect(scale(el)).toBeCloseTo(41 / 90, 3);
     });
 
-    /*
-     * The reason this component asks `matchMedia` instead of letting a
-     * stylesheet hide it: a media query cannot stop a 1 Hz interval
-     * running for the life of every desktop session. That claim is
-     * load-bearing in CLAUDE.md, so it is asserted rather than
-     * described — the timer count, because a desktop render is empty
-     * either way and so cannot tell the two apart.
-     */
-    it('runs no interpolation timer above the breakpoint', async () => {
-        pretendPhone(false);
-        vi.useFakeTimers();
-
-        const el = await fixture('player-progress-line');
-
-        emit(Events.TrackChanged, { ...TRACK, trackChangeId: 9 });
-        emit(Events.PlaybackStateChanged, { state: 'playing' });
-        emit(Events.PlaybackPositionChanged, {
-            positionSeconds: 3,
-            trackLength: 90,
-            trackChangeId: 9,
-            seq: 9,
-            playing: true,
-        });
-        await vi.advanceTimersByTimeAsync(5000);
-        await el.updateComplete;
-
-        expect(scale(el)).toBeNull();
-        expect(vi.getTimerCount()).toBe(0);
-    });
-
     it('ignores a report about a track that is no longer loaded', async () => {
         pretendPhone(true);
 

frontend/test/components/queue-overlay-mode.test.ts

@@ -29,61 +29,8 @@ import { shadow } from '@test/support/render';
 
 const wrappers: HTMLElement[] = [];
 
-let restoreMedia: (() => void) | null = null;
-
-/**
- * Answer the shell's phone query with `phone` until restored.
- *
- * Stubbed rather than emulated, for the reason `search-dialog.test.ts`
- * gives: the runner's viewport is fixed at 1280x800, and the panel
- * reads `matchMedia` in `connectedCallback` precisely so a test can
- * answer it first.
- */
-/**
- * Answering the phone query is not enough on its own: what decides
- * whether the scrim exists is a `change` listener, and a stub whose
- * `addEventListener` is a no-op leaves that listener untested — the
- * whole suite stays green with it deleted. So the stub records the
- * listeners and hands back a way to fire them.
- */
-function stubPhone(phone: boolean): (next: boolean) => void {
-  const real = window.matchMedia.bind(window);
-  const listeners = new Set<(e: MediaQueryListEvent) => void>();
-  let matches = phone;
-
-  window.matchMedia = ((q: string) =>
-    q.includes('max-width: 599px')
-      ? {
-          get matches() {
-            return matches;
-          },
-          media: q,
-          addEventListener(_: string, fn: (e: MediaQueryListEvent) => void) {
-            listeners.add(fn);
-          },
-          removeEventListener(_: string, fn: (e: MediaQueryListEvent) => void) {
-            listeners.delete(fn);
-          },
-        }
-      : real(q)) as typeof window.matchMedia;
-
-  restoreMedia = () => {
-    window.matchMedia = real;
-  };
-
-  return (next: boolean) => {
-    matches = next;
-
-    for (const fn of listeners) {
-      fn({ matches: next } as MediaQueryListEvent);
-    }
-  };
-}
-
 afterEach(() => {
   for (const w of wrappers.splice(0)) w.remove();
-  restoreMedia?.();
-  restoreMedia = null;
 });
 
 /**
@@ -210,78 +157,6 @@ describe('the queue panel decides whether it can be a column', () => {
     }
   });
 
-  /**
-   * #171 — the scrim is a dismissal target, so it exists only where it
-   * has pixels to be tapped.
-   *
-   * Below 600px `.panel-content` is `width: 100%`, so the scrim is
-   * entirely underneath an opaque panel: measured at 424x439, host,
-   * panel and scrim all 424x318. Drawing it there is a `cursor:
-   * pointer` click target nobody can reach, and the queue is a screen
-   * at that width anyway (#55) — back and the close button are its ways
-   * out. Existence rather than `display: none`, because a hidden scrim
-   * is still an element carrying the handler.
-   */
-  it('draws no scrim at phone width, where it would have no reachable pixels', async () => {
-    stubPhone(true);
-
-    const el = await panelIn(424);
-
-    expect(el.overlay).toBe(true);
-    expect(el.shadowRoot?.querySelector('.scrim')).toBeNull();
-
-    // The way out a thumb can hit is still there.
-    expect(
-      shadow(el, '[data-testid="queue-close"]')?.getAttribute('aria-label'),
-    ).toBe('Close queue');
-  });
-
-  /**
-   * The 600–899 band is where the panel is a 320px column of a wider
-   * content area, so the scrim has uncovered pixels and #24's
-   * tap-outside-to-close is real. Same width as the overlay tests
-   * above, with the phone query explicitly answered `false`, so this
-   * fails if the scrim is ever dropped for every overlay.
-   */
-  it('keeps the scrim above phone width, where it can be tapped', async () => {
-    stubPhone(false);
-
-    const el = await panelIn(700);
-
-    expect(el.overlay).toBe(true);
-
-    shadow<HTMLElement>(el, '.scrim')?.click();
-    await el.updateComplete;
-
-    expect(el.open).toBe(false);
-  });
-
-  /**
-   * The scrim's existence comes from `matchMedia` rather than a
-   * stylesheet, which only holds up if the query is *listened* to — a
-   * panel opened on a desktop and carried across the breakpoint (a
-   * resized window, an unfolded phone) has to lose its scrim without
-   * being reopened. Nothing else in this file fires `change`, so
-   * deleting the listener leaves the whole suite green.
-   */
-  it('drops the scrim when the viewport crosses the breakpoint', async () => {
-    const setPhone = stubPhone(false);
-
-    const el = await panelIn(700);
-
-    expect(el.shadowRoot?.querySelector('.scrim')).not.toBeNull();
-
-    setPhone(true);
-    await el.updateComplete;
-
-    expect(el.shadowRoot?.querySelector('.scrim')).toBeNull();
-
-    setPhone(false);
-    await el.updateComplete;
-
-    expect(el.shadowRoot?.querySelector('.scrim')).not.toBeNull();
-  });
-
   /**
    * Escape belongs to the overlay, not to the queue. An inline panel is
    * beside the content rather than over it, so there is nothing to

frontend/test/utils/css-nesting.test.ts

@@ -1,79 +0,0 @@
-/**
- * The nesting check's own semantics.
- *
- * `make css-check` runs it over a tree that currently has no violation,
- * so the check passing says nothing about whether it can still find
- * one. What it has to get right is two distinctions, and both are the
- * kind a regex over the file gets wrong: a rule directly inside an
- * at-rule is not nested, and a brace inside a string or a comment is
- * not a block.
- *
- * The rule it enforces is the device's: Chrome 113 predates relaxed CSS
- * nesting, so a nested selector starting with an element name is
- * dropped in silence. See `scripts/css-nesting.mjs`.
- */
-import { describe, expect, it } from 'vitest';
-
-import { findBareNestedRules } from '../../scripts/css-nesting.mjs';
-
-describe('the nested-rule check', () => {
-  it('flags a nested rule that starts with an element name', () => {
-    const found = findBareNestedRules(
-      '.bottom-bar {\n    color: red;\n\n    audio-player { margin: 0 }\n}',
-    );
-
-    expect(found).toEqual([{ line: 4, selector: 'audio-player' }]);
-  });
-
-  it('accepts the same rule written with a leading &', () => {
-    expect(
-      findBareNestedRules('.bottom-bar {\n    & audio-player { margin: 0 }\n}'),
-    ).toEqual([]);
-  });
-
-  it('accepts a nested selector that starts with any other symbol', () => {
-    expect(
-      findBareNestedRules('.bar {\n    #track-info { color: red }\n}'),
-    ).toEqual([]);
-    expect(findBareNestedRules('.bar {\n    :host { color: red }\n}')).toEqual(
-      [],
-    );
-  });
-
-  it('leaves a top-level rule alone, element name or not', () => {
-    expect(findBareNestedRules('p {\n    margin: 0;\n}')).toEqual([]);
-  });
-
-  /**
-   * The majority of what a naive sweep would report: a media query at
-   * the top level holds ordinary rules, not nested ones.
-   */
-  it('leaves a rule directly inside an at-rule alone', () => {
-    expect(
-      findBareNestedRules(
-        '@media (max-width: 599px) {\n    bottom-nav { display: flex }\n}',
-      ),
-    ).toEqual([]);
-  });
-
-  /**
-   * And the other half of that: what decides it is whether a style rule
-   * is anywhere above, not what the immediate parent is.
-   */
-  it('flags one inside an at-rule that is itself inside a rule', () => {
-    expect(
-      findBareNestedRules(
-        '.bar {\n    @media (min-width: 900px) {\n        audio-player { margin: 0 }\n    }\n}',
-      ),
-    ).toEqual([{ line: 3, selector: 'audio-player' }]);
-  });
-
-  it('reads through a brace in a string or a comment', () => {
-    expect(
-      findBareNestedRules('.a {\n    background: url("x{y}");\n}'),
-    ).toEqual([]);
-    expect(
-      findBareNestedRules('.a {\n    /* audio-player { x: y } */\n}'),
-    ).toEqual([]);
-  });
-});

lefthook.yml

@@ -58,15 +58,6 @@ pre-commit:
       root: "frontend/"
       run: node scripts/check-css-literals.mjs
 
-    # A nested rule whose selector starts with an element name is
-    # silently dropped by the device's Chrome 113, and by nothing else --
-    # so every tier here renders it correctly and only a screenshot of
-    # the phone disagrees. Instant.
-    css-nesting:
-      glob: "frontend/**/*.{ts,css}"
-      root: "frontend/"
-      run: node scripts/check-css-nesting.mjs
-
 # Deliberately sequential, unlike pre-commit.  `go test -race`
 # saturates every core for the better part of a minute and the UI tier
 # is a real browser with wall-clock timeouts, so run together the