2.2

Add new quick summary panels and update layout to make space for them
2026-06-02 00:17:18 +01:00
parent 6734422673
commit 099f2924d3
6 changed files with 648 additions and 63 deletions
@@ -1127,3 +1127,164 @@
    transform: translateY(-50%) rotate(45deg);
  }
 }
+
+
+/* ════════════════════════════════════════════════════════════════════════
+   INSIGHT PANELS - Why it feels like this + Today at a glance.
+   Sits between the header dial and the day tabs.
+   ════════════════════════════════════════════════════════════════════════ */
+
+/* "Why it feels like this" — sits in the header's right column, beside the dial */
+.insight-panel--why {
+  width: 100%;
+  max-width: 300px;
+}
+
+/* Hourly table paired with the "Today at a glance" rail on its right */
+.table-with-rail {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 16px;
+  align-items: start;
+}
+
+/* Left column: the columns-toggle bar stacked above the table, both
+   sharing the table's width so the rail can top-align with the toggles. */
+.table-main {
+  min-width: 0;
+}
+
+.glance-rail {
+  width: 240px;
+  position: sticky;
+  top: 16px;
+}
+
+.insight-panel--glance {
+  width: 100%;
+}
+
+.insight-panel {
+  background: #fffcf2;
+  border: 1px solid #c9b08a;
+  border-radius: 4px;
+  padding: 12px 16px;
+}
+
+/* Section heading - "WHY IT FEELS LIKE THIS" */
+.insight-panel-title {
+  font-family: Manrope, sans-serif;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #b09870;
+  margin-bottom: 10px;
+}
+
+/* Each factor row */
+.insight-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 0;
+  border-bottom: 1px solid #ede4cc;
+  font-family: Manrope, sans-serif;
+  font-size: 13px;
+}
+
+.insight-row:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.insight-icon {
+  width: 20px;
+  text-align: center;
+  flex-shrink: 0;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.insight-label {
+  flex: 1;
+  color: #4a3420;
+  font-size: 13px;
+}
+
+/* Delta values for "Why it feels like this" */
+.insight-delta {
+  font-family: JetBrains Mono, monospace;
+  font-size: 13px;
+  font-weight: 600;
+  min-width: 44px;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.delta-pos {
+  color: #c8522a;        /* warm orange-red - heat contribution */
+}
+
+.delta-neg {
+  color: #3a78a8;        /* cool blue - cooling contribution */
+}
+
+/* Values for "Today at a glance" */
+.insight-value {
+  font-family: JetBrains Mono, monospace;
+  font-size: 12px;
+  font-weight: 600;
+  color: #4a3420;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+/* Alert state - draws attention without being aggressive */
+.insight-row--alert .insight-value {
+  color: #b84020;
+}
+
+.insight-row--alert .insight-label {
+  color: #1e1208;
+  font-weight: 700;
+}
+
+/* ── Wide screens - the rail is narrow (240px), so stack each value
+   beneath its label instead of letting long values overflow sideways.
+   Mobile keeps the inline label/value layout (plenty of width there). */
+@media (min-width: 901px) {
+  .insight-panel--glance .insight-row {
+    display: grid;
+    grid-template-columns: 20px 1fr;
+    grid-template-areas:
+      "icon label"
+      "icon value";
+    column-gap: 8px;
+    row-gap: 1px;
+    align-items: start;
+  }
+  .insight-panel--glance .insight-icon {
+    grid-area: icon;
+    padding-top: 1px;
+  }
+  .insight-panel--glance .insight-label {
+    grid-area: label;
+  }
+  .insight-panel--glance .insight-value {
+    grid-area: value;
+    text-align: left;       /* value sits left-aligned under its label */
+  }
+}
+
+/* ── Narrow screens - drop the rail below the table ─────────────────── */
+@media (max-width: 900px) {
+  .table-with-rail {
+    grid-template-columns: 1fr;
+  }
+  .glance-rail {
+    width: 100%;
+    position: static;
+    order: -1;            /* show the summary above the filters + table */
+  }
+}