.data-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #7c8b94;
  font: 600 11px -apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif, sans-serif;
}

.data-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aabb1;
}

.data-state.live { color: #a9c8c5; }
.data-state.live i {
  background: #59d7bd;
  box-shadow: 0 0 0 4px rgba(89, 215, 189, .12);
}
.data-state.recent i { background: #70b8aa; }
.data-state.offline { color: #87959a; }
.data-state.offline i { background: #aab5b8; }

@media (max-width: 700px) {
  .data-state { font-size: 10px; }
}

/* Keep the decorative fallback route aligned with the canonical 54% live progress. */
.route-flown { width: 54%; }
.route-ahead { left: 54%; }
.plane-marker { left: 52%; }

[hidden]{display:none!important}

#offlineBriefNotice{padding:16px 24px;border:1px solid #b8cccc;border-radius:16px;background:#f5faf9;color:#193b43;font-size:1rem;line-height:1.5}.offline-flight-mode .progress-route i b{transition:none;animation:none}

#offlineBriefNotice{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 14px;border-radius:12px;font-size:.82rem;line-height:1.25}#offlineBriefNotice b{white-space:nowrap;font-weight:650}#offlineBriefNotice span{color:#667b80}.offline-flight-mode .card-head{align-items:flex-start;gap:8px}.offline-flight-mode .card-head .data-state{text-align:right;line-height:1.25}@media(max-width:580px){#offlineBriefNotice{display:block;margin:0 4px 10px;padding:9px 11px;font-size:.76rem}#offlineBriefNotice b,#offlineBriefNotice span{display:block}#offlineBriefNotice span{margin-top:2px}.offline-flight-mode .card-head{display:grid;grid-template-columns:1fr}.offline-flight-mode .card-head .status-pill{justify-self:start;max-width:100%}.offline-flight-mode .card-head .data-state{justify-self:start;text-align:left}}

@media(max-width:580px){
  .card-head{display:grid;grid-template-columns:1fr;gap:9px;justify-items:start;align-items:start}
  .card-head .status-pill{display:inline-flex;width:max-content;max-width:100%;white-space:nowrap}
  .card-head .data-state{justify-self:start;text-align:left;line-height:1.3}
}