* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #0b1020;
}

#map {
  position: absolute;
  inset: 0;
}

#panel {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1000;              /* above the Leaflet map */
  width: 220px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(11, 16, 32, 0.85);
  color: #e8ecf5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.brand-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 auto;
}

#panel h1 {
  margin: 0;
  font-size: 18px;
}

#panel dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0 0 12px;
  font-size: 14px;
}

#panel dt { color: #9aa6c2; }
#panel dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.follow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}

.status {
  margin: 10px 0 0;
  font-size: 12px;
  color: #9aa6c2;
}
.status.error { color: #ff8a8a; }

/* The ISS icon itself */
.iss-icon {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.7));
}

@media (max-width: 500px) {
  #panel {
    top: auto;
    bottom: 24px;
    left: 12px;
    right: 12px;
    width: auto;
  }
}