Extract Row primitive, migrate all call sites

Variants card/ref/plain with scoped skin. Padding and wrap
one-offs via style prop; draggable and handlers via rest
spread. GroceryRow absorbs item-btn/ref-link globals with
local names; BestRef scopes best-ref. Delete item-* globals
and dead page overrides.

1 files changed, 0 insertions, 107 deletions

diff --git a/src/app.css b/src/app.css
index 87817bd..daeffd7 100644
--- a/src/app.css
+++ b/src/app.css
@@ -15,113 +15,6 @@
 	gap: 0.5rem;
 }
 
-/* Row containers */
-.item-row {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-}
-
-.item-row--card {
-	padding: 0.5rem 0.75rem;
-	background: var(--surface);
-	border-radius: 0.75rem;
-	box-shadow: 0 1px 2px var(--shadow);
-	transition: all 0.2s ease;
-}
-
-.item-row--card:hover {
-	box-shadow: 0 2px 6px var(--shadow);
-	transform: translateY(-1px);
-}
-
-.item-row--fixed {
-	height: 2.75rem;
-}
-
-.item-row--ref {
-	padding: 0.875rem 1rem;
-	gap: 0.75rem;
-	background: var(--surface);
-	border-radius: 0.75rem;
-	box-shadow: 0 1px 2px var(--shadow);
-	transition: all 0.2s ease;
-}
-
-.item-row--ref:hover {
-	box-shadow: 0 2px 6px var(--shadow);
-	transform: translateY(-1px);
-}
-
-/* Buttons inside rows */
-.item-btn {
-	width: 100%;
-	text-align: left;
-	padding: 0 0.875rem;
-	height: 100%;
-	border: none;
-	border-radius: 0.75rem;
-	background: var(--surface);
-	font-size: 1rem;
-	font-weight: 500;
-	display: flex;
-	align-items: center;
-	transition: all 0.2s ease;
-	box-shadow: 0 1px 2px var(--shadow);
-}
-
-.item-btn:hover {
-	background: var(--surface-hover);
-	box-shadow: 0 2px 6px var(--shadow-accent);
-	transform: translateY(-1px);
-}
-
-.item-btn--grow {
-	flex-grow: 1;
-	width: auto;
-}
-
-/* Text */
-.item-text {
-	display: flex;
-	flex-direction: column;
-	text-align: left;
-	line-height: 1.2;
-	gap: 0.0625rem;
-	overflow: hidden;
-}
-
-.best-ref {
-	font-size: 0.75rem;
-	color: var(--text-secondary);
-	font-weight: 400;
-}
-
-/* Links */
-.ref-link {
-	width: 2.75rem;
-	flex-shrink: 0;
-	height: 2.75rem;
-	aspect-ratio: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border-radius: 0.75rem;
-	background: var(--surface);
-	color: var(--text-secondary);
-	text-decoration: none;
-	font-size: 1rem;
-	transition: all 0.2s ease;
-	box-shadow: 0 1px 2px var(--shadow);
-}
-
-.ref-link:hover {
-	background: var(--surface-hover);
-	color: var(--accent);
-	box-shadow: 0 2px 6px var(--shadow-accent);
-	transform: translateY(-1px);
-}
-
 /* Category heading */
 .category-name {
 	font-size: 0.75rem;