Update app.py

app.py

@@ -1380,121 +1380,78 @@ else:
         # ===============================================================
         st.subheader("Hazard Gradient Legend")
         st.markdown("""
-<style>
-.legend-container {
-    display: flex;
-    gap: 20px;
-    margin-top: 10px;
-}
-.legend-box {
-    background-color: #fafafa;
-    border-radius: 12px;
-    padding: 15px 20px;
-    width: 32%;
-    border: 1px solid #e0e0e0;
-    box-shadow: 0px 2px 6px rgba(0,0,0,0.05);
-}
-.legend-title {
-    font-weight: 700;
-    margin-bottom: 12px;
-    color: #333;
-}
-.legend-item {
-    display: flex;
-    align-items: center;
-    margin-bottom: 6px;
-}
-.legend-color {
-    width: 18px;
-    height: 18px;
-    border-radius: 4px;
-    margin-right: 10px;
-    border: 1px solid #ccc;
-}
-.legend-note {
-    font-size: 12px;
-    color: #555;
-    font-style: italic;
-    margin-top: 10px;
-    display: block;
-}
-</style>
-
 <div class="legend-container">
-
-    <!-- WORSENING -->
+    <!-- Worsening Trends -->
     <div class="legend-box">
-        <div class="legend-title">Worsening Trends (Positive Slope)</div>
-
+        <div class="legend-title">Worsening Trends (Positive Slope):</div>
         <div class="legend-item">
             <div class="legend-color" style="background-color: #d32f2f;"></div>
-            <span>Very High Worsening (≥ 1.5)</span>
+            <span>Very High Worsening (≥1.5)</span>
         </div>
-
         <div class="legend-item">
             <div class="legend-color" style="background-color: #e57373;"></div>
-            <span>High Worsening (1.0 – 1.5)</span>
+            <span>High Worsening (1.0–1.5)</span>
         </div>
-
         <div class="legend-item">
             <div class="legend-color" style="background-color: #ef9a9a;"></div>
-            <span>Moderate Worsening (0.5 – 1.0)</span>
+            <span>Moderate Worsening (0.5–1.0)</span>
         </div>
-
         <div class="legend-item">
             <div class="legend-color" style="background-color: #ffcdd2;"></div>
-            <span>Slight Worsening (0 – 0.5)</span>
+            <span>Slight Worsening (0–0.5)</span>
         </div>
-
-        <span class="legend-note">
-            Worsening trends indicate increasing fatigue frequency over weeks.
-        </span>
+        <p class="legend-note">
+            <i>Note: Positive slope indicates increasing fatigue events over time — escalating risk exposure.</i>
+        </p>
     </div>
 
-    <!-- IMPROVING -->
+    <!-- Improving Trends -->
     <div class="legend-box">
-        <div class="legend-title">Improving Trends (Negative Slope)</div>
-
+        <div class="legend-title">Improving Trends (Negative Slope):</div>
         <div class="legend-item">
             <div class="legend-color" style="background-color: #388e3c;"></div>
-            <span>Excellent Improvement (≤ −1.5)</span>
+            <span>Excellent Improvement (≤−1.5)</span>
         </div>
-
         <div class="legend-item">
             <div class="legend-color" style="background-color: #81c784;"></div>
             <span>Great Improvement (−1.5 to −1.0)</span>
         </div>
-
         <div class="legend-item">
             <div class="legend-color" style="background-color: #a5d6a7;"></div>
             <span>Good Improvement (−1.0 to −0.5)</span>
         </div>
-
         <div class="legend-item">
             <div class="legend-color" style="background-color: #c8e6c9;"></div>
             <span>Slight Improvement (−0.5 to 0)</span>
         </div>
-
-        <span class="legend-note">
-            Improving trends indicate decreasing fatigue frequency over weeks.
-        </span>
+        <p class="legend-note">
+            <i>Note: Negative slope reflects decreasing fatigue events — effective mitigation or behavioral improvement.</i>
+        </p>
     </div>
 
-    <!-- ONE-TIME EVENT -->
+    <!-- One-Time Events -->
     <div class="legend-box">
-        <div class="legend-title">One-Time Events (Zero Slope)</div>
-
+        <div class="legend-title">One-Time Events (Zero Slope):</div>
         <div class="legend-item">
             <div class="legend-color" style="background-color: #FFD700;"></div>
-            <span>One-Time Event (0)</span>
+            <span>One Time Event (0)</span>
         </div>
-
-        <span class="legend-note">
-            Occurs when an operator appears in only one week — slope is defined as 0.
-        </span>
+        <p class="legend-note">
+            <i>Note: Slope = 0 by definition when data exists for only one week — insufficient for trend assessment.</i>
+        </p>
     </div>
-
 </div>
+
+<style>
+    .legend-note {
+        font-size: 12px;
+        color: #666;
+        margin-top: 12px;
+        margin-bottom: 0;
+        font-style: italic;
+        line-height: 1.4;
+    }
+</style>
 """, unsafe_allow_html=True)
 
         # ===============================================================