Rewrite spec to state values directly, drop correction framing

docs/superpowers/specs/2026-07-03-listing-detail-desktop-design.md

@@ -10,12 +10,6 @@ for desktop, the sidebar isn't visually a distinct card, and several shared
 components it depends on (`TopNav`, `ListingCard`) have the same issues since they're
 reused across other screens.
 
-A prior request included a written analysis of the gap with concrete numbers
-(container width, font sizes, colors). That analysis was produced without access to
-the prototype's source and got several concrete details wrong (see "Corrections"
-below) — the prototype HTML/CSS and the current app code are the source of truth for
-this spec, not that analysis.
-
 ## Scope
 
 Primary target: `app/src/app/listing/[id].tsx`. Because two of the fixes (navbar,
@@ -35,35 +29,24 @@ layout beyond what `ListingCard` changes give them for free, `WalletConnectSheet
 `CheckoutSheet`, the mobile/desktop nav breakpoint (768px) itself, nav
 blur/translucency.
 
-## Corrections vs. the original analysis
+The prototype (`prototype/Volana.dc.html`) is the visual source of truth; it has
-
+**zero responsive/mobile CSS** — it's a desktop-only mockup, no `@media` queries
-Verified against `prototype/Volana.dc.html` and the actual HeroUI Native
+touch layout anywhere in it. All mobile-specific sizing in this spec (hero aspect
-docs/source in `.heroui-docs/` and `node_modules/heroui-native/src`:
+ratio, typography minimums, the two-column breakpoint) is therefore this spec's own
-
+design judgment, not something derived from the prototype.
-- **Max-width is 1320px, not 1440px.** The prototype uses `max-width:1320px`
-  consistently for the nav, hero, and listing-detail wrapper.
-- **The app's theme colors already match the prototype.** `app/src/global.css`'s
-  `--background`, `--surface`, `--surface-secondary`, `--accent`, `--success`,
-  `--warning`, `--danger` were already copied from the prototype's own
-  `--c-bg`/`--c-surf`/`--c-a`/etc. CSS variables. The hex codes given in the
-  original analysis prompt do not match the prototype and must not be used.
-- **The hero background is not teal.** The prototype layers a
-  `rgba(255,255,255,.08)` radial highlight (top-left) and a black-to-transparent
-  linear fade at the bottom over the listing's own per-product `bg` color
-  (`mock.ts`), not a fixed teal color.
-- **Sidebar width is a fixed 340px, not 380-420px.**
-- The prototype has **zero responsive/mobile CSS** — it's a desktop-only mockup
-  (confirmed: no `@media` queries touch layout). All mobile-specific sizing
-  (hero aspect ratio, typography minimums, breakpoint choice) is this spec's own
-  design judgment, not derived from the prototype.
 
 ## Theme (`app/src/global.css`)
 
-Extend the existing `@layer theme` blocks (do not replace the existing
+Theme colors are sourced from the prototype's own CSS variables (`--c-bg`,
-background/surface/accent/success/warning/danger values — they're already correct):
+`--c-surf`, `--c-surf2`, `--c-a`, `--c-g`, `--c-y`, `--c-r`, defined in
+`prototype/Volana.dc.html`'s `<style>` block). `app/src/global.css`'s existing
+`--background`, `--surface`, `--surface-secondary`, `--accent`, `--success`,
+`--warning`, `--danger` already match these values for both light and dark themes
+— leave them as they are. Extend the existing `@layer theme` blocks with what's
+missing:
 
 - Add `--border` overrides (currently unset, silently falling back to HeroUI's
-  generic default gray instead of the prototype's border color):
+  generic default gray instead of the prototype's `--c-bd` border color):
   - dark: `--border: #252548`
   - light: `--border: #e2dff0`
 - Add a second muted tier. The prototype uses two distinct de-emphasis levels —
@@ -239,9 +222,9 @@ color tokens (no new component, no hardcoded colors). Used for the sidebar's
 - No other structural changes. The `md:flex` visibility breakpoint (mobile tab bar
   vs. desktop nav swap) is unchanged — out of scope for this spec. No
   blur/translucency backdrop — the prototype's `backdrop-filter: blur(20px)` is a
-  nice-to-have not required by the original ask's navbar requirements (height,
+  nice-to-have on top of this navbar's core requirements (height, border, logo,
-  border, logo, search, links, pill, connect button) and has no native
+  search, links, pill, connect button), has no native equivalent, and is
-  equivalent, so it's deliberately excluded to keep this scoped.
+  deliberately excluded to keep this scoped.
 
 ## `ListingCard` grid variant (`app/src/components/ListingCard.tsx`)