Merge dev into p10-w4-popover-knobs (integrate concurrent Phase 11 scaffold changes)

# Conflicts: # DeepDrftPublic.Client/Controls/ReleaseDetailScaffold.razor.cs
2026-06-16 00:47:58 -04:00
parent 2bb7d86e63 c2a3e53991
commit fbb397228e
43 changed files with 2170 additions and 106 deletions
@@ -446,3 +446,110 @@ h2, h3, h4, h5, h6,
        text-align: center;
    }
 }
+
+/* =============================================================================
+   CUT ALBUM DETAIL  (/cuts/{id})
+   Header splits left-meta / right-cover; the cover carries an explicit theme
+   border (the new visual element vs. the borderless Session/Mix covers).
+   ============================================================================= */
+
+.cut-detail-header {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 2rem;
+    margin: 2rem 0 1.5rem;
+}
+
+.cut-detail-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 0;
+    flex: 1 1 auto;
+}
+
+.cut-detail-subline {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    opacity: 0.75;
+    font-family: var(--deepdrft-font-mono);
+    font-size: 0.85rem;
+    margin-top: 0.25rem;
+}
+
+.cut-detail-sep { opacity: 0.5; }
+
+.cut-detail-actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.75rem;
+    margin-top: 1rem;
+}
+
+/* Square cover with a framed theme border — the new visual element this page introduces. */
+.cut-detail-cover {
+    aspect-ratio: 1 / 1;
+    width: 260px;
+    flex: 0 0 auto;
+    overflow: hidden;
+    border: 3px solid var(--mud-palette-secondary);
+    box-shadow: 0 8px 28px color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
+}
+
+.cut-detail-divider { margin: 1.5rem 0 0.5rem; }
+
+.cut-detail-empty {
+    opacity: 0.7;
+    padding: 1rem 0;
+}
+
+.cut-detail-tracklist {
+    display: flex;
+    flex-direction: column;
+}
+
+.cut-detail-track-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.25rem 0;
+    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent);
+}
+
+.cut-detail-track-row:last-child { border-bottom: none; }
+
+.cut-detail-track-number {
+    width: 1.75rem;
+    text-align: right;
+    flex: 0 0 auto;
+    opacity: 0.55;
+    font-family: var(--deepdrft-font-mono);
+    font-size: 0.9rem;
+}
+
+.cut-detail-track-play { flex: 0 0 auto; }
+
+.cut-detail-track-name {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+/* Stack the header on narrow screens: cover above the meta column. */
+@media (max-width: 599px) {
+    .cut-detail-header {
+        flex-direction: column-reverse;
+        align-items: stretch;
+        gap: 1.25rem;
+    }
+
+    .cut-detail-cover {
+        width: 100%;
+        max-width: 320px;
+        margin: 0 auto;
+    }
+}