observatory stuff

projects/coulomb-pricing/ui/styles.css

@@ -4,10 +4,70 @@ body {
   background: var(--paper);
 }
 
+.obs-app {
+  min-height: calc(100vh - 56px);
+}
+
 .obs-main {
-  max-width: 1080px;
-  margin: 0 auto;
   padding: var(--sp-6) var(--sp-5) var(--sp-9);
+  max-width: 960px;
+}
+
+.obs-panel[hidden] {
+  display: none !important;
+}
+
+wn-sidebar-item[data-section] {
+  cursor: pointer;
+}
+
+.obs-metric__value--sm {
+  font-size: 22px;
+}
+
+.obs-value-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--sp-3);
+}
+
+.obs-range {
+  display: grid;
+  gap: var(--sp-2);
+}
+
+.obs-range__labels {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--sp-2);
+  font-size: 12px;
+  color: var(--fg-3);
+}
+
+.obs-range__current {
+  color: var(--fg-1);
+}
+
+.obs-range__track {
+  position: relative;
+  height: 10px;
+  border: 1px solid var(--border);
+  background: var(--paper-2);
+}
+
+.obs-range__fill {
+  height: 100%;
+  background: var(--line-strong);
+  width: 0;
+}
+
+.obs-range__marker {
+  position: absolute;
+  top: -3px;
+  width: 2px;
+  height: 16px;
+  background: var(--ink);
+  transform: translateX(-1px);
 }
 
 .obs-period {