.lane-preview {
  --lane-preview-height: 220px;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.lane-preview-labels {
  display: grid;
  grid-template-columns: 36% 28% 36%;
  border: 1px solid var(--line);
  border-radius: 6px 6px 0 0;
  background: #22221e;
}

.lane-preview-label {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 23px;
  font: 650 10px / 1 'Inter', 'Segoe UI', sans-serif;
  color: var(--muted);
  text-align: center;
}

.lane-preview-label:last-child { grid-column: 3; }

.lane-preview-stage {
  position: relative;
  margin-block-start: -4px;
  border: 1px solid var(--line);
  border-block-start: 0;
  border-radius: 0 0 6px 6px;
  background: #171715;
}

.lane-preview-field {
  display: block;
  width: 100%;
  height: var(--lane-preview-height);
  border-radius: inherit;
}

.lane-preview-empty {
  position: absolute;
  inset: 43% 0 auto;
  padding-inline: 8px;
  text-align: center;
  pointer-events: none;
  color: var(--muted);
  font-size: 11px;
}

.lane-preview-position {
  color: var(--muted);
  padding-inline: 1px;
  font: 10px / 1.4 'IBM Plex Mono', Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 965px) {
  .lane-preview { --lane-preview-height: 140px; }
}