Improve dashboard readability and stress chart direction

assets/css/app.css

@@ -404,6 +404,60 @@ button {
     overflow-x: auto;
 }
 
+.calendar-detail {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    padding: 0.9rem 1rem;
+    border-radius: 18px;
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.calendar-detail__meta {
+    display: grid;
+    gap: 0.18rem;
+}
+
+.calendar-detail__eyebrow {
+    color: rgba(239, 247, 255, 0.58);
+    font-size: 0.78rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.calendar-detail__meta strong {
+    font-size: 1.05rem;
+    line-height: 1.2;
+}
+
+.calendar-detail__label,
+.calendar-detail__subtle {
+    color: var(--muted);
+}
+
+.calendar-detail__score {
+    display: grid;
+    justify-items: end;
+    line-height: 1;
+}
+
+.calendar-detail__score span {
+    font-size: 1.5rem;
+    font-weight: 800;
+}
+
+.calendar-detail__score small {
+    color: var(--muted);
+    margin-top: 0.2rem;
+}
+
+.calendar-detail__link {
+    white-space: nowrap;
+}
+
 .calendar-legend {
     display: flex;
     justify-content: flex-end;
@@ -479,6 +533,12 @@ button {
     stroke-width: 1.1;
 }
 
+.calendar-cell--selected {
+    stroke: rgba(255, 255, 255, 0.9);
+    stroke-width: 1.2;
+    filter: brightness(1.08);
+}
+
 .line-chart {
     min-height: 10.25rem;
 }
@@ -1182,6 +1242,15 @@ input[type="range"] {
         align-items: flex-start;
     }
 
+    .calendar-detail {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .calendar-detail__score {
+        justify-items: start;
+    }
+
     .line-chart {
         min-height: 9.5rem;
     }