Refine Health import event presentation

assets/css/app.css

@@ -743,12 +743,26 @@ body.page-dashboard .content {
 }
 
 .timeline-card__image {
-    grid-column: 1 / -1;
     width: 100%;
+    height: 100%;
     max-height: 18rem;
     object-fit: cover;
     border-radius: 1.25rem;
-    margin-bottom: 0.2rem;
+    display: block;
+}
+
+.timeline-media-button {
+    grid-column: 1 / -1;
+    width: 100%;
+    min-height: 11rem;
+    max-height: 18rem;
+    padding: 0;
+    margin: 0 0 0.2rem;
+    border: 0;
+    border-radius: 1.25rem;
+    overflow: hidden;
+    background: rgba(255, 255, 255, 0.08);
+    cursor: zoom-in;
 }
 
 .timeline-card__time-chip {
@@ -832,14 +846,16 @@ body.page-dashboard .content {
 
 .timeline-route-map {
     position: relative;
+    grid-column: 1 / -1;
     width: 100%;
-    max-width: 24rem;
     height: 10.5rem;
-    margin-top: 0.8rem;
+    margin-top: 0.2rem;
+    padding: 0;
     overflow: hidden;
     border-radius: 1.1rem;
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: rgba(255, 255, 255, 0.08);
+    cursor: zoom-in;
 }
 
 .timeline-route-map svg {
@@ -858,7 +874,7 @@ body.page-dashboard .content {
     filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.9));
 }
 
-.timeline-route-map a {
+.timeline-route-map__credit {
     position: absolute;
     right: 0.35rem;
     bottom: 0.28rem;
@@ -867,7 +883,96 @@ body.page-dashboard .content {
     background: rgba(255, 255, 255, 0.82);
     color: rgba(10, 22, 35, 0.82);
     font-size: 0.66rem;
-    text-decoration: none;
+}
+
+.sleep-phase-bar {
+    display: flex;
+    min-height: 2.35rem;
+    margin-top: 0.75rem;
+    overflow: hidden;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.sleep-phase-bar__segment {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    min-width: max-content;
+    padding: 0.35rem 0.65rem;
+    color: rgba(255, 255, 255, 0.94);
+    font-size: 0.82rem;
+    white-space: nowrap;
+}
+
+.sleep-phase-bar__segment--deep {
+    background: linear-gradient(135deg, rgba(44, 82, 180, 0.92), rgba(38, 52, 124, 0.92));
+}
+
+.sleep-phase-bar__segment--rem {
+    background: linear-gradient(135deg, rgba(120, 83, 210, 0.92), rgba(73, 60, 154, 0.92));
+}
+
+.sleep-phase-bar__segment--core {
+    background: linear-gradient(135deg, rgba(54, 147, 173, 0.92), rgba(38, 106, 135, 0.92));
+}
+
+.media-lightbox[hidden] {
+    display: none;
+}
+
+.media-lightbox {
+    position: fixed;
+    inset: 0;
+    z-index: 1200;
+    display: grid;
+    place-items: center;
+    padding: 1rem;
+}
+
+.media-lightbox__backdrop {
+    position: absolute;
+    inset: 0;
+    border: 0;
+    background: rgba(0, 0, 0, 0.72);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+.media-lightbox__panel {
+    position: relative;
+    z-index: 1;
+    width: min(96vw, 72rem);
+    max-height: 92vh;
+}
+
+.media-lightbox__close {
+    position: absolute;
+    right: 0.75rem;
+    top: 0.75rem;
+    z-index: 2;
+    width: 2.6rem;
+    height: 2.6rem;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.24);
+    background: rgba(20, 28, 38, 0.72);
+    color: #fff;
+    font-size: 1.5rem;
+}
+
+.media-lightbox__content img,
+.media-lightbox__content .timeline-route-map {
+    width: 100%;
+    max-width: none;
+    height: min(72vh, 42rem);
+    border-radius: 1.4rem;
+    object-fit: contain;
+}
+
+.media-lightbox__content .timeline-route-map {
+    cursor: default;
 }
 
 .timeline-card__meta strong {