Refine Lumi stats and detail UX

1 files changed, 236 insertions, 46 deletions

diff --git a/static/styles.css b/static/styles.css
index 95433a5..ebed3c3 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -640,6 +640,7 @@ h2 {
 
 .detail-aside-meta {
   display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 12px;
   border: 1px solid var(--line);
   border-radius: 6px;
@@ -737,7 +738,25 @@ h2 {
   align-items: center;
   gap: 16px;
   flex-wrap: wrap;
-  margin-bottom: 20px;
+  margin-bottom: 8px;
+}
+
+.detail-backlink {
+  color: var(--subtle);
+  border-bottom: 0;
+}
+
+.detail-backlink:hover {
+  color: var(--text);
+}
+
+.detail-ledger {
+  margin-top: 0;
+}
+
+.detail-ledger .rating {
+  display: inline-flex;
+  align-items: center;
 }
 
 .ratings-inline {
@@ -783,7 +802,7 @@ h2 {
 }
 
 .notes-body {
-  margin-top: 28px;
+  margin-top: 18px;
   max-width: 68ch;
   color: var(--muted);
   white-space: pre-wrap;
@@ -792,13 +811,29 @@ h2 {
 }
 
 .detail-actions {
-  margin-top: 34px;
+  display: grid;
+  gap: 12px;
+  justify-items: end;
 }
 
 .detail-actions form {
   margin: 0;
 }
 
+.detail-actions-primary,
+.detail-actions-secondary,
+.detail-actions-danger {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: end;
+  gap: 10px;
+}
+
+.detail-actions-danger {
+  padding-top: 12px;
+  border-top: 1px solid var(--line);
+}
+
 .form-shell {
   width: min(900px, 100%);
   padding-bottom: 64px;
@@ -974,21 +1009,134 @@ textarea:focus {
   justify-content: flex-end;
 }
 
-.stats-layout {
+.stats-hero {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 24px;
+  align-items: end;
+  margin-bottom: 18px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background:
+    linear-gradient(180deg, rgba(17, 21, 28, 0.96), rgba(11, 14, 19, 0.84)),
+    radial-gradient(circle at top left, rgba(194, 170, 122, 0.08), transparent 22rem);
+  padding: 32px;
+  box-shadow: var(--shadow);
+}
+
+.stats-hero-copy {
+  max-width: 52rem;
+}
+
+.stats-hero-text {
+  margin: 14px 0 0;
+  color: var(--muted);
+  line-height: 1.7;
+  max-width: 60ch;
+}
+
+.stats-hero-actions {
+  display: flex;
+  align-items: end;
+  justify-content: end;
+}
+
+.stats-summary,
+.stats-context-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
+  margin-bottom: 18px;
+}
+
+.stats-summary {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.stats-context-strip {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-bottom: 28px;
+}
+
+.stats-summary-card,
+.stats-context-card {
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: linear-gradient(180deg, rgba(17, 21, 28, 0.98), rgba(17, 21, 28, 0.82));
+  padding: 18px;
+  box-shadow: var(--shadow-inset);
+}
+
+.stats-summary-card strong,
+.stats-context-card strong {
+  display: block;
+  margin-top: 8px;
+  font-family: var(--font-display);
+  font-size: clamp(1.8rem, 4vw, 2.7rem);
+  font-weight: 500;
+  color: var(--accent);
+  line-height: 1.05;
+}
+
+.stats-average-mark {
+  display: inline-block;
+  margin-left: 0.18em;
+  color: var(--accent-strong);
+  font-family: var(--font-mono);
+  font-size: 0.76em;
+  vertical-align: 0.16em;
+}
+
+.stats-context-meta {
+  margin: 8px 0 0;
+  color: var(--muted);
+  font-size: 0.9rem;
+  line-height: 1.55;
+}
+
+.stats-research {
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
   gap: 18px;
   padding-bottom: 64px;
 }
 
-.stats-panel-wide {
+.stats-panel-feature {
   grid-column: 1 / -1;
 }
 
+.stats-column {
+  display: grid;
+  gap: 18px;
+  align-content: start;
+}
+
+.stats-panel {
+  display: grid;
+  gap: 16px;
+}
+
+.stats-panel-feature {
+  align-content: start;
+}
+
 .stats-panel h2 {
   margin: 2px 0 0;
 }
 
+.stats-panel-note {
+  max-width: 34ch;
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.92rem;
+  line-height: 1.6;
+}
+
+.stats-map-shell {
+  display: grid;
+  gap: 14px;
+}
+
 .stats-map {
   position: relative;
   min-height: 320px;
@@ -1039,37 +1187,41 @@ textarea:focus {
 
 .heatmap-shell {
   overflow: visible;
+  min-width: 0;
+  --heatmap-cell: 13px;
+  --heatmap-gap: 4px;
+  --heatmap-weekday-width: 34px;
 }
 
 .heatmap-months {
   display: grid;
-  grid-template-columns: repeat(53, 13px);
-  gap: 4px;
-  margin: 0 0 8px 42px;
+  grid-template-columns: repeat(53, var(--heatmap-cell));
+  gap: var(--heatmap-gap);
+  margin: 0 0 8px calc(var(--heatmap-weekday-width) + 8px);
   color: var(--muted);
   font-size: 0.72rem;
 }
 
 .heatmap-body {
-  display: grid;
-  grid-template-columns: 34px minmax(0, 1fr);
+  display: inline-grid;
+  grid-template-columns: var(--heatmap-weekday-width) minmax(0, max-content);
   gap: 8px;
   align-items: start;
 }
 
 .heatmap-weekdays {
   display: grid;
-  grid-template-rows: repeat(7, 13px);
-  gap: 4px;
+  grid-template-rows: repeat(7, var(--heatmap-cell));
+  gap: var(--heatmap-gap);
   color: var(--muted);
   font-size: 0.72rem;
 }
 
 .heatmap-grid {
   display: grid;
-  grid-template-columns: repeat(53, 13px);
-  grid-template-rows: repeat(7, 13px);
-  gap: 4px;
+  grid-template-columns: repeat(53, var(--heatmap-cell));
+  grid-template-rows: repeat(7, var(--heatmap-cell));
+  gap: var(--heatmap-gap);
 }
 
 .heatmap-cell {
@@ -1092,6 +1244,15 @@ textarea:focus {
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 12px;
   align-items: center;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--line);
+}
+
+.stats-list li:last-child,
+.stats-bar-row:last-child,
+.stats-list-row:last-child {
+  padding-bottom: 0;
+  border-bottom: 0;
 }
 
 .stats-list li strong,
@@ -1122,19 +1283,17 @@ textarea:focus {
   background: linear-gradient(90deg, rgba(194, 170, 122, 0.35), var(--accent));
 }
 
-.stats-overview-row {
-  display: flex;
-  gap: 40px;
-  flex-wrap: wrap;
-}
-
-.stats-metric {
+.stats-list-row {
   display: grid;
-  gap: 8px;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: start;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--line);
 }
 
-.stats-metric span {
-  color: var(--muted);
+.stats-list-row-rewatch {
+  font-size: 0.94rem;
 }
 
 .review-hero {
@@ -1701,13 +1860,20 @@ textarea:focus {
 .shelf-hero-meta {
   display: grid;
   gap: 16px;
-  justify-items: end;
+  justify-items: stretch;
+  min-width: min(100%, 430px);
+}
+
+.shelf-hero-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
 }
 
 .shelf-stat {
   display: grid;
   gap: 6px;
-  min-width: 140px;
+  min-width: 0;
   padding: 14px 16px;
   border: 1px solid var(--line);
   border-radius: 8px;
@@ -1717,8 +1883,9 @@ textarea:focus {
 .shelf-stat strong {
   color: var(--accent);
   font-family: var(--font-display);
-  font-size: 2rem;
+  font-size: clamp(1.25rem, 2vw, 2rem);
   font-weight: 500;
+  line-height: 1.1;
 }
 
 .feed-toolbar {
@@ -1981,7 +2148,7 @@ textarea:focus {
 }
 
 .detail-subtitle {
-  margin-bottom: 0;
+  margin-bottom: 8px;
 }
 
 .detail-columns {
@@ -2006,11 +2173,6 @@ textarea:focus {
 }
 
 .detail-actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: end;
-  align-items: center;
-  gap: 10px;
   margin-top: 0;
 }
 
@@ -2230,6 +2392,17 @@ textarea:focus {
     justify-content: start;
   }
 
+  .shelf-hero-stats,
+  .detail-aside-meta {
+    grid-template-columns: 1fr;
+  }
+
+  .detail-actions-primary,
+  .detail-actions-secondary,
+  .detail-actions-danger {
+    justify-content: start;
+  }
+
   .feed-toolbar {
     top: 10px;
     margin-bottom: 20px;
@@ -2243,8 +2416,7 @@ textarea:focus {
   .film-card,
   .detail-layout,
   .form-grid,
-  .director-summary,
-  .stats-layout {
+  .director-summary {
     grid-template-columns: 1fr;
   }
 
@@ -2296,7 +2468,11 @@ textarea:focus {
   }
 
   .review-metrics,
-  .review-grid {
+  .review-grid,
+  .stats-summary,
+  .stats-context-strip,
+  .stats-research,
+  .stats-hero {
     grid-template-columns: 1fr;
   }
 
@@ -2306,22 +2482,22 @@ textarea:focus {
   }
 
   .heatmap-months {
-    grid-template-columns: repeat(53, 8px);
-    gap: 2px;
-    margin: 0 0 8px 20px;
+    grid-template-columns: repeat(53, var(--heatmap-cell));
+    gap: var(--heatmap-gap);
+    margin: 0 0 8px calc(var(--heatmap-weekday-width) + 6px);
     font-size: 0.64rem;
   }
 
   .heatmap-weekdays {
-    grid-template-rows: repeat(7, 8px);
-    gap: 2px;
+    grid-template-rows: repeat(7, var(--heatmap-cell));
+    gap: var(--heatmap-gap);
     font-size: 0.64rem;
   }
 
   .heatmap-grid {
-    grid-template-columns: repeat(53, 8px);
-    grid-template-rows: repeat(7, 8px);
-    gap: 2px;
+    grid-template-columns: repeat(53, var(--heatmap-cell));
+    grid-template-rows: repeat(7, var(--heatmap-cell));
+    gap: var(--heatmap-gap);
   }
 
   .stats-bar-row {
@@ -2331,4 +2507,18 @@ textarea:focus {
   .stats-list li {
     grid-template-columns: minmax(0, 1fr) auto;
   }
+
+  .stats-hero,
+  .stats-panel {
+    padding: 22px 20px;
+  }
+
+  .stats-summary-card,
+  .stats-context-card {
+    padding: 18px 16px;
+  }
+
+  .stats-hero-actions {
+    justify-content: start;
+  }
 }