Update index.html

index.html

@@ -50,7 +50,7 @@
       font-size: 1.02rem;
     }
     main { padding-bottom: 16px; }
-    .workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
+    .workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
     .panel {
       min-width: 0;
       padding: 16px 19px;
@@ -118,7 +118,17 @@
       color: var(--muted);
       padding: 28px;
     }
-    .results { display: none; }
+    /* Match the upload card's height; distribute result blocks vertically. */
+    .workspace > .panel:last-child { display: flex; flex-direction: column; }
+    .empty-result { flex: 1; }
+    .results {
+      display: none;
+      flex: 1;
+      flex-direction: column;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 2px 0 7px;
+    }
     .score-label { margin: 0 0 3px; font-size: .9rem; color: var(--muted); font-weight: 650; }
     .score {
       color: var(--navy);
@@ -128,7 +138,7 @@
       line-height: 1.17;
       letter-spacing: -.04em;
     }
-    .continuum { margin-top: 19px; }
+    .continuum { margin-top: 0; }
     .continuum-label { font-size: .85rem; font-weight: 650; color: var(--navy-dark); margin-bottom: 11px; }
     .scale {
       position: relative;
@@ -173,7 +183,7 @@
     .scale-ticks small { display: block; font-size: .72rem; font-weight: 500; color: var(--muted); }
     .scale-caption { margin: 7px 0 0; color: #67768A; font-size: .72rem; line-height: 1.4; }
     .outside { display: none; color: #805D25; font-weight: 650; margin-top: 9px; font-size: .78rem; }
-    .divider { border: 0; border-top: 1px solid var(--line); margin: 17px 0 11px; }
+    .divider { border: 0; border-top: 1px solid var(--line); margin: 0; width: 100%; }
     .secondary-label { font-size: .86rem; color: var(--muted); font-weight: 650; }
     .secondary-value { color: var(--navy-dark); font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 5px; }
     .interpretation { margin: 8px 0 0; font-size: .85rem; line-height: 1.43; color: #526174; }
@@ -191,7 +201,9 @@
     @media (max-width: 790px) {
       .container { width: min(100% - 30px, 1200px); }
       header { padding: 30px 0 23px; }
-      .workspace { grid-template-columns: 1fr; gap: 15px; }
+      .workspace { grid-template-columns: 1fr; gap: 15px; align-items: start; }
+      .results { gap: 16px; padding-bottom: 0; }
+      .workspace > .panel:last-child { min-height: 0; }
       .panel { padding: 22px; }
       .dropzone { min-height: 258px; }
       .empty-result { min-height: 185px; }
@@ -249,8 +261,11 @@
           <h2 id="results-heading">Style Analysis</h2>
           <div id="empty-result" class="empty-result"></div>
           <div id="results" class="results" aria-live="polite">
-            <p class="score-label">Predicted Style Score</p>
-            <div id="style-score" class="score">—</div>
+            <div class="primary-result">
+              <p class="score-label">Predicted Style Score</p>
+              <div id="style-score" class="score">—</div>
+            </div>
+            <hr class="divider" />
             <div class="continuum">
               <div class="continuum-label">Minimalism–Maximalism Continuum</div>
               <div class="scale" role="img" aria-label="Stylistic continuum, minimalism on the left, moderate in the center, maximalism on the right">
@@ -261,8 +276,10 @@
               <p id="outside" class="outside">The prediction is beyond the visual window; its marker is shown at the boundary. The numerical score is unchanged.</p>
             </div>
             <hr class="divider" />
-            <div class="secondary-label">Estimated Expert Rating (1–7)</div>
-            <div id="expert-rating" class="secondary-value">—</div>
+            <div class="secondary-result">
+              <div class="secondary-label">Estimated Expert Rating (1–7)</div>
+              <div id="expert-rating" class="secondary-value">—</div>
+            </div>
           </div>
         </section>
       </div>
@@ -388,7 +405,7 @@
         marker.style.left = `${pct}%`;
         outside.style.display = Math.abs(centered) > DISPLAY_HALF_RANGE ? "block" : "none";
         empty.style.display = "none";
-        results.style.display = "block";
+        results.style.display = "flex";
         status.textContent = "Analysis complete.";
       } catch (error) {
         clientPromise = null; // allow a fresh connection on retry