.topbar .navigation-sensors { display: flex; align-items: center; justify-content: flex-start; gap: 14px; flex: 0 1 auto; margin-right: auto; min-width: 0; max-width: 45vw; overflow-x: auto; padding: 2px 0 2px 12px; border-left: 1px solid rgba(255, 255, 255, .28); }
.topbar .navigation-sensors[hidden] { display: none; }
.navigation-sensor-group { display: grid; grid-template-rows: repeat(2, minmax(16px, auto)); align-items: center; flex: 0 0 auto; column-gap: 10px; }
.topbar .navigation-sensor { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; white-space: nowrap; font-size: 14px; line-height: 1.25; }
.topbar .navigation-sensor.top { grid-row: 1; }
.topbar .navigation-sensor.bottom { grid-row: 2; }
.topbar .navigation-sensor.single { grid-row: 1 / 3; align-self: center; font-size: 18px; }
.topbar .navigation-sensor.small { font-size: 10px; }
.topbar .navigation-sensor.large { font-size: 17px; }
.topbar .navigation-sensor.single.small { font-size: 10px; }
.topbar .navigation-sensor.single.large { font-size: 22px; }
.topbar .navigation-sensor span { font-size: inherit; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }
.topbar .navigation-sensor strong { font-size: inherit; color: #fff; font-variant-numeric: tabular-nums; }
.topbar .navigation-sensor.offline strong { opacity: .6; }
@media (max-width: 800px) {
  .topbar:has(.navigation-sensors:not([hidden])) { flex-wrap: wrap; }
  .topbar .navigation-sensors { max-width: 100%; flex: 0 1 auto; }
}