.lane {
  max-height: calc(100vh - 235px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.lane-title {
  position: sticky;
  z-index: 2;
  top: -16px;
  margin: -16px -16px 14px;
  padding: 16px;
  border-bottom: 1px solid #23445f;
  background: #0b2036;
}

.connection-alert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  margin: 0 0 18px;
  padding: 12px 15px;
  border: 1px solid #f2aa62;
  background: #fff4e8;
  color: #773600;
}

.connection-alert strong {
  white-space: nowrap;
}

.connection-alert span {
  color: #914300;
}

.sync > span.offline {
  background: #e84f3d;
  animation: pulse 1.2s infinite;
}

@media (max-width: 900px) {
  .lane {
    max-height: calc(100vh - 185px);
  }
}

@media (max-width: 560px) {
  .connection-alert {
    grid-template-columns: 1fr;
  }

  .connection-alert strong {
    white-space: normal;
  }

  .lane {
    max-height: none;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .lane-title {
    position: static;
    margin: 0 0 14px;
    padding: 0;
    border-bottom: 0;
  }
}