fix: align dashboard card grid to 3-column layout with spanning headlines card

static/style.css

@@ -450,44 +450,52 @@ header {
 
 .dashboard-3col {
   display: grid;
-  grid-template-columns: 1fr 1fr 1.45fr;
-  gap: 1.5rem;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: auto auto;
+  gap: 1.25rem;
   align-items: stretch;
   margin-bottom: 2rem;
 }
 
-.dash-col {
+/* ── Explicit grid placement for each dashboard card ── */
+.engine-light-card {
+  grid-column: 1;
+  grid-row: 1;
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
-  height: 100%;
-  min-height: 0;        /* lets flex children shrink below content size */
 }
 
-/* Left column: two cards share the full column height equally */
-.dash-col--left {
-  height: 100%;
-  min-height: 0;
+.price-card {
+  grid-column: 2;
+  grid-row: 1;
 }
 
-.dash-col--left .card {
-  flex: 1;
-  min-height: 0;
+/* Headlines spans both rows in the third column */
+.headlines-card {
+  grid-column: 3;
+  grid-row: 1 / span 2;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
-/* Engine indicator fills leftover vertical space inside Risk card */
-.dash-col--left .engine-indicator {
-  flex: 1;
+.sentiment-card {
+  grid-column: 1;
+  grid-row: 2;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
 }
 
-/* Sentiment body fills leftover space inside Sentiment card */
-.dash-col--left .sentiment-meter {
+.llm-card {
+  grid-column: 2;
+  grid-row: 2;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Engine indicator centred vertically inside Risk card */
+.engine-light-card .engine-indicator {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -495,51 +503,32 @@ header {
   justify-content: center;
 }
 
-/* Middle column */
-.dash-col--mid {
-  height: 100%;
-  min-height: 0;
-}
-
-.dash-col--mid .price-card {
-  flex-shrink: 0;
-}
-
-.dash-col--mid .llm-card {
+/* Sentiment meter centred vertically inside Sentiment card */
+.sentiment-card .sentiment-meter {
   flex: 1;
-  min-height: 0;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  align-items: center;
+  justify-content: center;
 }
 
-.dash-col--mid .llm-card .llm-info {
+/* LLM Insights: scrollable content area */
+.llm-card .llm-info {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
 }
 
-/* Right column: headlines card fills full height and scrolls internally */
-.dash-col--right {
-  height: 100%;
-  min-height: 0;
-}
-
-.dash-col--right .headlines-card {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.dash-col--right .headlines-card h3 {
+/* Headlines: fixed title, scrollable list */
+.headlines-card h3 {
   flex-shrink: 0;
 }
 
-.dash-col--right .headlines-card .headlines-list {
-  height: 80%;
+.headlines-card .headlines-list {
+  flex: 1;
+  overflow-y: auto;
   padding-right: 0.25rem;
+  max-height: 460px;
 }
 
 /* Predicted price: RED for uptrend, GREEN for downtrend (contrarian risk signal) */
@@ -1165,38 +1154,25 @@ footer p {
         width: 100%; /* Full width tap-target for thumbs */
     }
 
-    /* Layout Grid */
+    /* Layout Grid — single column on mobile */
     .dashboard-3col {
         grid-template-columns: 1fr;
         grid-template-rows: none;
-        height: auto;
-    }
-
-    /* Dashboard columns reset */
-    .dash-col,
-    .dash-col--left,
-    .dash-col--mid,
-    .dash-col--right {
-        display: block;
     }
 
+    /* Reset explicit placements so cards stack naturally */
     .engine-light-card,
-    .sentiment-card,
     .price-card,
+    .headlines-card,
+    .sentiment-card,
     .llm-card {
         grid-column: auto;
         grid-row: auto;
     }
 
     .headlines-card {
-        grid-column: auto;
-        grid-row: auto;
-        height: auto;
-    }
-
-    .dashboard-3col .card,
-    .dashboard-3col .glass-panel {
-        height: auto;
+        max-height: none;
+        overflow: visible;
     }
 
     .headlines-list {

templates/index.html

@@ -113,7 +113,7 @@
 
             <div class="cards-grid dashboard-3col">
 
-              <!-- col 1, row 1 -->
+              <!-- Row 1, Col 1: Risk Indicator -->
               <div class="card glass-panel engine-light-card">
                 <h3>Risk Indicator</h3>
                 <div class="engine-indicator" id="engine-light">
@@ -122,36 +122,47 @@
                 </div>
               </div>
 
-              <!-- col 1, row 2 -->
-              <div class="card glass-panel sentiment-card">
-                <h3>Sentiment Analysis</h3>
-                <div class="sentiment-meter">
-                  <div class="score-display"><span id="sentiment-score">0.00</span></div>
-                  <p class="sentiment-desc" id="sentiment-desc">Neutral Sentiment</p>
-                </div>
-              </div>
-
-              <!-- col 2, row 1 -->
+              <!-- Row 1, Col 2: Market Prediction -->
               <div class="card glass-panel price-card">
                 <h3>Market Prediction</h3>
                 <div class="price-info">
-                  <div class="price-row"><span class="label">Current</span><span class="value" id="current-price">$0.00</span></div>
-                  <div class="price-row highlight"><span class="label">Predicted (Next Session)</span><span class="value" id="predicted-price">$0.00</span></div>
+                  <div class="price-row">
+                    <span class="label">Current</span>
+                    <span class="value" id="current-price">$0.00</span>
+                  </div>
+                  <div class="price-row highlight">
+                    <span class="label">Predicted (Next Session)</span>
+                    <span class="value" id="predicted-price">$0.00</span>
+                  </div>
                 </div>
                 <div class="trend-badge" id="trend-label">UNKNOWN TREND</div>
               </div>
 
-              <!-- col 2, row 2 -->
-              <div class="card glass-panel llm-card">
-                <h3>LLM Insights</h3>
-                <div id="llm-insights-container"><p class="text-muted">No LLM insights available.</p></div>
-              </div>
-
-              <!-- col 3, row 1–2 -->
+              <!-- Col 3, spans rows 1–2: Recent Headlines -->
               <div class="card glass-panel headlines-card">
                 <h3>Recent Headlines Analyzed</h3>
                 <ul id="headlines-list" class="headlines-list"></ul>
-                <div class="headlines-scroll-hint" id="headlines-scroll-hint">▼ scroll for more</div>
+                <div class="headlines-scroll-hint">scroll for more</div>
+              </div>
+
+              <!-- Row 2, Col 1: Sentiment Analysis -->
+              <div class="card glass-panel sentiment-card">
+                <h3>Sentiment Analysis</h3>
+                <div class="sentiment-meter">
+                  <div class="score-display">
+                    <span id="sentiment-score">0.00</span>
+                  </div>
+                  <p class="sentiment-desc" id="sentiment-desc">Neutral Sentiment</p>
+                </div>
+              </div>
+
+              <!-- Row 2, Col 2: LLM Insights -->
+              <div class="card glass-panel llm-card">
+                <h3>LLM Insights</h3>
+                <div class="llm-info" id="llm-insights-container"
+                     style="display:flex;flex-direction:column;gap:8px;margin-top:8px;">
+                  <p class="text-muted">No LLM insights available.</p>
+                </div>
               </div>
 
             </div>