.carryover {
  padding: 2px 5px;
  border-radius: 999px;
  background: #eee5d7;
  color: #7b6547;
  font-size: 7px;
  font-weight: 700;
}

.detail-carryover { margin-left: auto; }
.carryover-note { color: #8a6d43 !important; font-size: 9px !important; }
.action-bar { align-items: center; }

.depth-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.depth-control > span { color: #51483f; font-size: 8px; font-weight: 700; }
.depth-control > small { color: #958b81; font-size: 7px; }
.depth-control > div { display: flex; gap: 4px; }

.action-bar .depth-button {
  min-height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fff;
  font-size: 8px;
}

.depth-button i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 4px;
  border-radius: 50%;
  vertical-align: 1px;
}

.depth-light { border-color: #84a48a !important; color: #4f7558; }
.depth-light i { background: #5f8d68; }
.depth-medium { border-color: #7f9fc6 !important; color: #486f9d; }
.depth-medium i { background: #527eaf; }
.depth-deep { border-color: #bf8179 !important; color: #994b42; }
.depth-deep i { background: #a84e43; }
.depth-button.selected { box-shadow: inset 0 0 0 1px currentColor; background: #f3f0e8; font-weight: 700; }
.depth-button:disabled { opacity: .55; }

@media (max-width: 640px) {
  .action-bar { flex-wrap: wrap; }
  .depth-control { width: 100%; margin-left: 0; justify-content: flex-end; }
  .depth-control > small { display: none; }
}