.pwa-status {
  margin-left: auto;
  border-color: var(--night-3);
  padding: 5px 10px;
  color: var(--ink-dim);
  font-size: 12px;
  white-space: nowrap;
}
.pwa-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--moon-dim);
}
.pwa-status[data-state="ready"]::before { background: var(--dark-sky); }
.pwa-status[data-state="offline"]::before { background: var(--today); }
.pwa-status[data-state="error"]::before { background: #d87d7d; }
.pwa-status[data-state="update"] { color: var(--moon); border-color: var(--dark-sky); }
.pwa-status:disabled { cursor: default; opacity: 1; }
.map-connectivity {
  margin: 5px 0 9px;
  color: var(--today);
  font-size: 13px;
  line-height: 1.4;
}
.offline-data {
  margin: 24px 0;
  padding: 14px 16px;
  border: 1px solid var(--night-3);
  border-radius: 13px;
  background: var(--night-2);
}
.offline-data h4 { margin: 0 0 5px; color: var(--moon); font: 400 17px/1.3 var(--serif); }
.offline-data p { margin: 0 0 10px; color: var(--ink-dim); font-size: 13px; line-height: 1.5; }
.offline-data details { margin: 0 0 12px; color: var(--ink-dim); font-size: 13px; }
.offline-data details summary { cursor: pointer; color: var(--moon-dim); }
.offline-data details p { margin: 7px 0 0; }
.forecast-snapshot {
  margin-top: 8px;
  color: var(--today);
  font-size: 12px;
  line-height: 1.45;
}
.home-sky .forecast-snapshot { display: block; }

@media (max-width: 720px) {
  .pwa-status {
    max-width: 142px;
    overflow: hidden;
    padding: 4px 8px;
    border: 0;
    text-overflow: ellipsis;
    font-size: 11px;
  }
  .pwa-status::before { margin-right: 5px; }
}