Remove video card shim classes

css/style.css

@@ -98,44 +98,36 @@ header img {
   padding: 1rem;
 }
 
-/* --------------------------------------------------------------------------
-   Legacy component compatibility shims
-   --------------------------------------------------------------------------
-   These selectors bridge existing markup to the token-backed primitives while
-   templates migrate to the new utility classes. Remove once all views are
-   updated. The shared token mappings now live in `css/tailwind.source.css`
-   so this file only maintains bespoke overrides.
---------------------------------------------------------------------------- */
-.video-card[data-owner-is-viewer="false"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
+.card[data-owner-is-viewer="false"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
   display: none;
 }
 
-.video-card.video-card--owner-private {
+.card[data-state="private"] {
   box-shadow:
     0 0 0 0.125rem var(--color-ring-private),
     var(--shadow-md);
 }
 
-.video-card.video-card--owner-private:hover {
+.card[data-state="private"]:hover {
   box-shadow:
     0 0 0 0.125rem var(--color-ring-private-hover),
     var(--shadow-lg);
 }
 
-.video-card.video-card--nsfw-owner {
+.card[data-alert="nsfw-owner"] {
   background-color: var(--color-black);
   box-shadow:
     0 0 0 0.0625rem var(--color-ring-critical),
     var(--shadow-md);
 }
 
-.video-card.video-card--nsfw-owner:hover {
+.card[data-alert="nsfw-owner"]:hover {
   box-shadow:
     0 0 0 0.0625rem var(--color-ring-critical-strong),
     var(--shadow-lg);
 }
 
-.video-card img.video-card__thumbnail--blurred {
+.card img[data-thumbnail-state="blurred"] {
   filter: blur(18px);
   transform: scale(1.05);
   transition:
@@ -143,21 +135,21 @@ header img {
     transform 200ms ease;
 }
 
-.video-card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
+.card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
   box-shadow:
     0 0 0 0.0625rem var(--color-ring-critical-soft),
     var(--shadow-md);
 }
 
-.video-card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"]:hover {
+.card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"]:hover {
   box-shadow:
     0 0 0 0.0625rem var(--color-ring-critical-hover),
     var(--shadow-lg);
 }
 
-.video-card--enter {
+.card[data-motion="enter"] {
   opacity: 0;
-  animation: video-card-fade-in 220ms ease-out forwards;
+  animation: card-motion-enter 220ms ease-out forwards;
 }
 
 .video-visibility-toggle__option {
@@ -198,7 +190,7 @@ header img {
 }
 
 /* Watch history cards */
-@keyframes video-card-fade-in {
+@keyframes card-motion-enter {
   from {
     opacity: 0;
     transform: translateY(0.5rem);
@@ -267,7 +259,7 @@ header img {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .video-card--enter,
+  .card[data-motion="enter"],
   .fade-in {
     opacity: 1;
     animation: none;
@@ -279,40 +271,6 @@ header img {
   }
 }
 
-.video-card:hover {
-  transform: translateY(-0.25rem);
-  box-shadow: var(--shadow-lg);
-}
-
-.video-card .thumbnail-container {
-  position: relative;
-  padding-top: 56.25%;
-  background-color: var(--color-surface);
-  overflow: hidden;
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-}
-
-.video-card img.thumbnail {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.video-card .details {
-  padding: 1.25rem;
-}
-
-.video-card h3 {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text);
-  margin-bottom: 0.75rem;
-}
-
 /* Ensure modal portals always sit above the sidebar stack */
 #modalContainer {
   position: fixed;
@@ -888,14 +846,7 @@ footer a:hover {
   object-fit: cover;
 }
 
-.video-card .ratio-16-9 {
-  border-radius: 0.75rem;
-  overflow: hidden;
-}
-
-.video-card .ratio-16-9 > [data-video-thumbnail] {
-  border-radius: inherit;
-}
+/* Legacy ratio helpers remain for static markup but modern cards apply rounding via utilities. */
 
 /* Sidebar default states */
 #sidebarContainer {