Default the detail carousel grid to the plain layout until content confirmed

The loading skeleton previously rendered inside #detail-carousel-wrap
counted as "not empty," so the CSS :has() rule expanded into the risky
carousel layout (full-width header, dead space beside the poster) on
every page load, before the lazy fetch even resolved -- defeating the
prior fix, which only handled the post-resolution empty case.

- Drop the skeleton; the wrap starts truly empty so the safe,
  poster-beside-text layout (same as books) is what always renders
  first, for both TV/movie and season pages. The carousel layout only
  expands in once real trailer/photo content lands.
- Removed the now-unused skeleton template.

Author: dannyvfilms

src/static/css/input.css

@@ -644,39 +644,40 @@ html.light .theme-toggle-icon-moon {
 }
 
 @media (min-width: 768px) {
+  /* Default to the pre-carousel arrangement -- poster beside the
+     title/chips/synopsis column, carousel pane hidden -- so a page whose
+     carousel hasn't resolved yet (or never will) never shows the carousel's
+     dead second column. Only once #detail-carousel-wrap is confirmed to
+     hold a trailer/photos does the :has() rule below expand into the
+     carousel's own two-row layout. */
   .detail-carousel-grid {
     column-gap: 2.5rem;
     grid-template-columns: 250px minmax(0, 1fr);
+    grid-template-areas: "poster header" "poster chips" "poster synopsis";
+  }
+
+  .detail-carousel-grid__header {
+    margin-top: 0;
+  }
+
+  /* Carousel confirmed non-empty: expand to the carousel's own two-row
+     layout (title/actions spanning full width, carousel next to the
+     poster) instead of the pre-carousel column arrangement above. */
+  .detail-carousel-grid:has(#detail-carousel-wrap:not(:empty)) {
     grid-template-areas:
       "poster carousel"
       "header header"
       "chips chips"
       "synopsis synopsis";
   }
 
-  .detail-carousel-grid__carousel {
+  .detail-carousel-grid:has(#detail-carousel-wrap:not(:empty)) .detail-carousel-grid__carousel {
     display: block;
   }
 
-  .detail-carousel-grid__header {
+  .detail-carousel-grid:has(#detail-carousel-wrap:not(:empty)) .detail-carousel-grid__header {
     margin-top: 1.5rem;
   }
-
-  /* No trailer/photos to show (fragment swapped in empty): fall back to the
-     pre-carousel arrangement, poster beside the title/chips/synopsis column
-     instead of a carousel next to it, rather than stacking full-width rows
-     below the poster and leaving its column dead. */
-  .detail-carousel-grid:has(#detail-carousel-wrap:empty) {
-    grid-template-areas: "poster header" "poster chips" "poster synopsis";
-  }
-
-  .detail-carousel-grid:has(#detail-carousel-wrap:empty) .detail-carousel-grid__carousel {
-    display: none;
-  }
-
-  .detail-carousel-grid:has(#detail-carousel-wrap:empty) .detail-carousel-grid__header {
-    margin-top: 0;
-  }
 }
 
 /* Mobile default: active playback card spans all columns on very small screens */

src/static/css/main.css

@@ -2832,6 +2832,9 @@
   .pl-10 {
     padding-left: calc(var(--spacing) * 10);
   }
+  .pl-12 {
+    padding-left: calc(var(--spacing) * 12);
+  }
   .pl-\[37px\] {
     padding-left: 37px;
   }
@@ -3006,6 +3009,9 @@
   .text-\[var\(--color-text-muted\)\] {
     color: var(--color-text-muted);
   }
+  .text-\[var\(--color-text-primary\)\] {
+    color: var(--color-text-primary);
+  }
   .text-\[var\(--color-text-secondary\)\] {
     color: var(--color-text-secondary);
   }
@@ -4299,6 +4305,11 @@
       --tw-ring-color: var(--color-accent);
     }
   }
+  .focus\:ring-amber-400 {
+    &:focus {
+      --tw-ring-color: var(--color-amber-400);
+    }
+  }
   .focus\:ring-indigo-200 {
     &:focus {
       --tw-ring-color: var(--color-indigo-200);
@@ -6069,22 +6080,19 @@ html.light .theme-toggle-icon-moon {
   .detail-carousel-grid {
     column-gap: 2.5rem;
     grid-template-columns: 250px minmax(0, 1fr);
-    grid-template-areas: "poster carousel" "header header" "chips chips" "synopsis synopsis";
-  }
-  .detail-carousel-grid__carousel {
-    display: block;
+    grid-template-areas: "poster header" "poster chips" "poster synopsis";
   }
   .detail-carousel-grid__header {
-    margin-top: 1.5rem;
+    margin-top: 0;
   }
-  .detail-carousel-grid:has(#detail-carousel-wrap:empty) {
-    grid-template-areas: "poster header" "poster chips" "poster synopsis";
+  .detail-carousel-grid:has(#detail-carousel-wrap:not(:empty)) {
+    grid-template-areas: "poster carousel" "header header" "chips chips" "synopsis synopsis";
   }
-  .detail-carousel-grid:has(#detail-carousel-wrap:empty) .detail-carousel-grid__carousel {
-    display: none;
+  .detail-carousel-grid:has(#detail-carousel-wrap:not(:empty)) .detail-carousel-grid__carousel {
+    display: block;
   }
-  .detail-carousel-grid:has(#detail-carousel-wrap:empty) .detail-carousel-grid__header {
-    margin-top: 0;
+  .detail-carousel-grid:has(#detail-carousel-wrap:not(:empty)) .detail-carousel-grid__header {
+    margin-top: 1.5rem;
   }
 }
 [data-active-playback-card] {

src/templates/app/components/detail_carousel_skeleton.html

@@ -28,11 +28,17 @@
           </div>
 
           <div class="detail-carousel-grid__carousel relative min-w-0">
+            {# Left empty (not a loading skeleton) so .detail-carousel-grid's
+               :has(#detail-carousel-wrap:not(:empty)) rule in input.css only
+               expands into the carousel layout once real content lands --
+               a skeleton here would count as "not empty" and expand the
+               grid immediately, showing the carousel's layout before we
+               know whether there's anything to put in it. #}
             <div class="absolute inset-0"
                  id="detail-carousel-wrap"
                  hx-get="{{ detail_carousel_fragment_url }}"
                  hx-trigger="load delay:100ms"
-                 hx-swap="innerHTML">{% include "app/components/detail_carousel_skeleton.html" %}</div>
+                 hx-swap="innerHTML"></div>
           </div>
 
           <div class="detail-carousel-grid__header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">