Improve dashboard charts for sparse data and mobile layouts

assets/css/app.css

@@ -378,6 +378,7 @@ button {
 
 .dashboard-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-items: start;
 }
 
 .chart-card--calendar,
@@ -474,9 +475,12 @@ button {
     stroke-width: 1.1;
 }
 
-.line-chart,
+.line-chart {
+    min-height: 10.25rem;
+}
+
 .bar-chart {
-    min-height: 17rem;
+    min-height: 11rem;
 }
 
 .line-chart svg {
@@ -499,16 +503,35 @@ button {
     stroke-width: 1.5;
 }
 
+.line-point--solo {
+    stroke-width: 2;
+}
+
+.line-point-glow {
+    opacity: 0.16;
+}
+
 .chart-axis {
     stroke: rgba(255, 255, 255, 0.1);
     stroke-width: 1;
 }
 
+.chart-guide {
+    opacity: 0.22;
+    stroke-width: 2;
+}
+
 .chart-label {
     fill: rgba(239, 247, 255, 0.65);
     font-size: 11px;
 }
 
+.chart-value {
+    fill: rgba(239, 247, 255, 0.9);
+    font-size: 15px;
+    font-weight: 700;
+}
+
 .bar-chart svg {
     width: 100%;
     height: auto;
@@ -987,6 +1010,14 @@ input[type="range"] {
         flex-direction: column;
         align-items: flex-start;
     }
+
+    .line-chart {
+        min-height: 9.5rem;
+    }
+
+    .bar-chart {
+        min-height: 10rem;
+    }
 }
 
 @media (max-width: 640px) {
@@ -1011,4 +1042,16 @@ input[type="range"] {
     .hero-score {
         font-size: 2.8rem;
     }
+
+    .chart-card {
+        padding: 1rem;
+    }
+
+    .line-chart {
+        min-height: 8.75rem;
+    }
+
+    .bar-chart {
+        min-height: 9.5rem;
+    }
 }