release: bump version to 0.27.0

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/public/earth/css/earth-stats.css

@@ -1,26 +1,133 @@
-/* earth-stats */
+/* earth-stats.css — compact KPI grid panel */
 
 .hud-panel-stats {
-  bottom: var(--hud-offset);
+  top: var(--hud-offset);
   right: var(--hud-offset);
-  border-radius: var(--hud-radius);
-  padding: var(--hud-panel-padding);
-  width: calc(264px * var(--hud-scale));
+  border-radius: 0;           /* square / angular — matches layer panel */
+  padding: 0;
+  width: min(calc(240px * var(--hud-scale)), calc(100vw - 32px));
   z-index: 10;
-  font-size: var(--hud-font-size);
+  overflow: hidden;
 }
 
-.hud-panel-stats .stats-item {
-  margin-bottom: 0;
-  padding: calc(9px * var(--hud-scale)) 0;
-  border-bottom: 1px solid rgba(214, 229, 245, 0.06);
+/* ── Thin drag bar ────────────────────────────────────────────── */
+
+.stats-drag-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(8px * var(--hud-scale)) calc(12px * var(--hud-scale));
+  border-bottom: 1px solid var(--hud-line);
+  cursor: grab;
+  user-select: none;
 }
 
-.hud-panel-stats .stats-item:last-child {
+.stats-drag-bar:active {
+  cursor: grabbing;
+}
+
+.stats-kicker {
+  color: var(--hud-text-soft);
+  font-size: calc(0.64rem * var(--hud-scale));
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+/* Reuse hud-panel-close — just override size to match kicker line */
+.stats-drag-bar .hud-panel-close {
+  width: calc(20px * var(--hud-scale));
+  height: calc(20px * var(--hud-scale));
+  min-width: calc(20px * var(--hud-scale));
+}
+
+.stats-drag-bar .hud-panel-close .material-symbols-rounded {
+  font-size: calc(12px * var(--hud-scale));
+}
+
+/* ── 2-column KPI grid ────────────────────────────────────────── */
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.stat-cell {
+  display: flex;
+  flex-direction: column;
+  gap: calc(2px * var(--hud-scale));
+  padding: calc(10px * var(--hud-scale)) calc(12px * var(--hud-scale));
+  border-right: 1px solid var(--hud-line);
+  border-bottom: 1px solid var(--hud-line);
+}
+
+/* Right column cells: remove right border */
+.stat-cell:nth-child(even) {
+  border-right: none;
+}
+
+/* Bottom row cells: remove bottom border */
+.stat-cell:nth-last-child(-n+2) {
   border-bottom: none;
-  padding-bottom: 0;
 }
 
-.hud-panel-stats .stats-item:first-of-type {
-  padding-top: 0;
+.stat-num {
+  color: var(--hud-title);
+  font-size: calc(1.3rem * var(--hud-scale));
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  line-height: 1.1;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Smaller number for multi-word values like "256/314" */
+.stat-num--sm {
+  font-size: calc(0.94rem * var(--hud-scale));
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.stat-label {
+  color: var(--hud-text-soft);
+  font-size: calc(0.62rem * var(--hud-scale));
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  line-height: 1.2;
+}
+
+/* ── BGP status footer ────────────────────────────────────────── */
+
+.stats-footer {
+  display: flex;
+  align-items: center;
+  gap: calc(6px * var(--hud-scale));
+  padding: calc(7px * var(--hud-scale)) calc(12px * var(--hud-scale));
+  border-top: 1px solid var(--hud-line);
+}
+
+.stats-footer-dot {
+  flex-shrink: 0;
+  width: calc(5px * var(--hud-scale));
+  height: calc(5px * var(--hud-scale));
+  border-radius: 50%;
+  background: var(--hud-accent);
+  box-shadow: 0 0 5px var(--hud-accent);
+}
+
+.stats-footer-text {
+  color: var(--hud-text-muted);
+  font-size: calc(0.7rem * var(--hud-scale));
+  line-height: 1.3;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Layout-expanded: slide off-screen ───────────────────────── */
+
+.earth-app.layout-expanded .hud-panel-stats:not([data-dragged="true"]) {
+  top: var(--hud-offset);
+  right: var(--hud-offset);
+  transform: translate(calc(100% - var(--hud-offset)), calc(-100% + var(--hud-offset)));
 }