.material-workspace {
  display: grid;
  gap: 16px;
}

.material-readiness,
.industrial-readiness {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 116px;
}

.material-readiness-bar,
.industrial-readiness-bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--v5-sidebar, #111a2d) 10%, transparent);
}

.material-readiness-fill,
.industrial-readiness-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent, #5d39cf);
}

.material-risk,
.industrial-risk {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-risk.critical,
.material-risk.high,
.industrial-risk.critical,
.industrial-risk.high {
  border-color: color-mix(in srgb, #b42318 35%, transparent);
  background: color-mix(in srgb, #b42318 10%, transparent);
  color: #8f1d16;
}

.material-risk.medium,
.industrial-risk.medium {
  border-color: color-mix(in srgb, #b54708 32%, transparent);
  background: color-mix(in srgb, #b54708 9%, transparent);
  color: #8a3906;
}

.material-risk.low,
.industrial-risk.low {
  border-color: color-mix(in srgb, #027a48 28%, transparent);
  background: color-mix(in srgb, #027a48 8%, transparent);
  color: #05603a;
}

.material-load-more,
.material-state {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.material-state {
  min-height: 220px;
  flex-direction: column;
}

@media (max-width: 980px) {
  .material-readiness,
  .industrial-readiness {
    grid-template-columns: minmax(54px, 1fr) auto;
  }

  .material-risk,
  .industrial-risk {
    max-width: 150px;
  }
}