/* earth-stats.css — compact KPI grid panel */

.hud-panel-stats {
  top: var(--hud-offset);
  right: var(--hud-offset);
  border-radius: 0;           /* square / angular — matches layer panel */
  padding: 0;
  width: min(calc(240px * var(--hud-scale)), calc(100vw - 32px));
  z-index: 10;
  overflow: hidden;
}

/* ── 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;
}

.stats-drag-bar:active {
  cursor: grabbing;
}

.stats-kicker {
  color: var(--hud-text-soft);
  font-size: var(--hud-panel-header-title-size);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.stats-drag-bar .hud-panel-close {
  align-self: auto;
  width: auto;
  height: auto;
  min-width: 0;
  padding: calc(7px * var(--hud-scale));
}

.stats-drag-bar .hud-panel-close .material-symbols-rounded {
  font-size: calc(16px * 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;
}

.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)));
}

.layout-mode-mobile .hud-panel-stats {
  position: fixed;
  top: calc(8px + var(--safe-top));
  right: 8px;
  width: min(180px, calc(100vw - 16px));
  z-index: 205;
}

.layout-mode-mobile.earth-search-open .hud-panel-stats,
.layout-mode-mobile.earth-settings-open .hud-panel-stats,
.layout-mode-mobile.earth-media-open .hud-panel-stats,
.layout-mode-mobile.earth-info-open .hud-panel-stats {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
}