.weather-shell {
  display: grid;
  gap: 1rem;
}

.weather-site-form {
  margin-top: .75rem;
}

.weather-site-meta {
  margin-top: .65rem;
}

.weather-current-grid,
.weather-night-grid,
.weather-daily-grid {
  display: grid;
  gap: .85rem;
}

.weather-current-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.weather-metric-card,
.weather-night-card,
.weather-day-card {
  border: 1px solid rgba(110, 164, 255, .14);
  border-radius: 1rem;
  background: rgba(6, 17, 42, .52);
  padding: .85rem .95rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.weather-metric-card span,
.weather-night-card__grid span,
.weather-day-card__detail,
.weather-night-card__meta {
  display: block;
  color: rgba(220, 231, 255, .72);
  font-size: .84rem;
}

.weather-metric-card strong,
.weather-day-card__temps {
  display: block;
  margin-top: .2rem;
  font-size: 1.15rem;
}

.weather-night-grid,
.weather-daily-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.weather-night-card__head {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: flex-start;
}

.weather-night-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem .75rem;
  margin-top: .65rem;
}

.weather-chip--good { color: #9ff0b2; }
.weather-chip--okay { color: #f7d87f; }
.weather-chip--weak { color: #f2ae6c; }
.weather-chip--bad { color: #ff9ca2; }

.weather-table-wrap {
  overflow-x: auto;
}

.weather-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.weather-table th,
.weather-table td {
  text-align: left;
  padding: .7rem .65rem;
  border-bottom: 1px solid rgba(110, 164, 255, .10);
  font-size: .92rem;
}

.weather-table th {
  color: rgba(220, 231, 255, .72);
  font-weight: 600;
}

@media (max-width: 720px) {
  .weather-current-grid {
    grid-template-columns: 1fr 1fr;
  }

  .weather-night-card__head {
    flex-direction: column;
  }
}