Fix media lightbox and sleep target

assets/css/app.css

@@ -886,15 +886,39 @@ body.page-dashboard .content {
 }
 
 .sleep-phase-bar {
+    position: relative;
     display: flex;
     min-height: 2.35rem;
-    margin-top: 0.75rem;
+    margin-top: 1.55rem;
     overflow: hidden;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, 0.14);
     background: rgba(255, 255, 255, 0.08);
 }
 
+.sleep-phase-bar__target {
+    position: absolute;
+    left: var(--sleep-optimal-left, 100%);
+    top: -1.28rem;
+    bottom: 0;
+    width: 0;
+    border-left: 2px solid rgba(255, 255, 255, 0.92);
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
+    pointer-events: none;
+}
+
+.sleep-phase-bar__target span {
+    position: absolute;
+    top: 0;
+    left: 0.28rem;
+    padding: 0.08rem 0.34rem;
+    border-radius: 999px;
+    background: rgba(6, 16, 28, 0.72);
+    color: rgba(255, 255, 255, 0.95);
+    font-size: 0.68rem;
+    white-space: nowrap;
+}
+
 .sleep-phase-bar__segment {
     display: inline-flex;
     align-items: center;

assets/js/app.js

@@ -1658,6 +1658,10 @@
             return;
         }
 
+        if (lightbox.parentElement !== document.body) {
+            document.body.appendChild(lightbox);
+        }
+
         const close = () => {
             lightbox.setAttribute("hidden", "hidden");
             content.replaceChildren();